minor tweaks for card

[jjagielka]

📑 Description

Tweaks:

• error handler for image loading
• shadow bug for size sm

Status

• Not Completed
• Completed

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation and api-check directory as required
• All the tests and check have passed by running pnpm check && pnpm test:e2e
• My pull request is based on the latest commit (not the npm version).
• I have checked the page with https://validator.unl.edu/

ℹ Additional Information

Summary by CodeRabbit

• New Features
  • Card images now lazy-load, use improved decorative-image defaults, and hide broken images automatically.
• Bug Fixes
  • Cards render reliably when no child content is provided, avoiding runtime errors.
• Style
  • Card shadow variants adjusted (added extra-small; default/normal shadow updated for visual consistency).

[vercel]

@jjagielka is attempting to deploy a commit to the Themesberg Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Updates Card.svelte to add alt="" to images, loading="lazy", and an onerror handler that hides failed images; makes children rendering calls safe with optional chaining. Adjusts card shadow tokens (adds xs, remaps normal). Removes the required children field from CardProps so children are optional.

Changes

Cohort / File(s)	Summary of Changes
Card component rendering & image handling src/lib/card/Card.svelte	When img is present, sets alt="", loading="lazy", and an onerror handler to hide the <img> on failure; uses optional chaining when invoking children (children?.()) in both branches.
Card theme tokens src/lib/card/theme.ts	Adds xs shadow variant (shadow-xs); remaps normal to shadow (was shadow-sm); ensures sm is shadow-sm; md, lg, xl remain shadow-md, shadow-lg, shadow-xl.
Type definitions src/lib/types.ts	Removes the required children: Snippet from CardProps, making children optional.

Sequence Diagram(s)

sequenceDiagram
  actor Consumer
  participant Card as Card.svelte
  participant DOM as Browser DOM

  Consumer->>Card: Render Card({ img?, children? })
  alt img provided
    Card->>DOM: create <img src=... alt="" loading="lazy" onerror=hide>
    note right of DOM #ffe6cc: onerror -> hide image element
    Card-->>Consumer: Render children if present (children?.())
  else no img
    Card-->>Consumer: Render children if present (children?.())
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Pre-merge checks (1 passed, 1 warning, 1 inconclusive)

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The description only lists two tweaks and omits other significant changes such as lazy loading enhancements in Card.svelte, optional chaining for child rendering, the new xs shadow variant and shadow mapping updates, and removal of the required children property from CardProps, so it does not fully reflect the pull request’s scope.	Revise the description to enumerate all key modifications across Card.svelte, theme.ts, and types.ts—including accessibility improvements, lazy loading, optional chaining, shadow variant adjustments, and type changes—and add any relevant context in the Additional Information section.
Title Check	❓ Inconclusive	The title “minor tweaks for card” is overly generic and does not convey the specific nature of the changes, such as the addition of an image error handler or the shadow variant fix; it references tweaks without summarizing the main updates in the pull request.	Update the title to clearly summarize the primary changes, for example “fix(card): add image load error handler and correct sm shadow variant” to provide meaningful context at a glance.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Poem

I nibble on pixels, soft and neat,
Lazy images nap, then rise to greet.
If one trips, I tuck it out of sight,
Friends may come or skip the light.
A tiny shadow hops just right. 🐇✨

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 28a6e06 and 21b24fc.

📒 Files selected for processing (1)

• src/lib/card/theme.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/lib/card/theme.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Playwright and Lint

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/lib/card/theme.ts (1)

44-46: Optional: align “normal” to Tailwind’s default shadow to avoid duplication with sm

Currently both sm and normal resolve to shadow-sm. If “normal” is meant to be the default (non-sm) shadow, consider using shadow for normal.

Proposed diff:

 shadow: {
   sm: { base: "shadow-sm" },
-  normal: { base: "shadow-sm" },
+  normal: { base: "shadow" },
   md: { base: "shadow-md" },

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 840343d and 28a6e06.

📒 Files selected for processing (3)

• src/lib/card/Card.svelte (1 hunks)
• src/lib/card/theme.ts (1 hunks)
• src/lib/types.ts (0 hunks)

💤 Files with no reviewable changes (1)

• src/lib/types.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Playwright and Lint

🔇 Additional comments (3)

src/lib/card/theme.ts (1)

44-44: Shadow(sm) fix looks right

Mapping the sm variant to Tailwind’s shadow-sm aligns with the intended scale. No issues spotted.

src/lib/card/Card.svelte (2)

41-44: Children optional chaining — LGTM

Using children?.() prevents runtime errors and matches the updated CardProps.

Please ensure the docs/examples reflect that children is optional.

---

29-41: Expose imgAlt prop for image alt text and simplify error handling
Add imgAlt?: string to CardProps and destructure it; update <img> to alt={imgAlt ?? ""} and include decoding="async". Replace the inline onerror block with onerror={(e) => e.currentTarget.hidden = true}. Confirm whether card images should be decorative by default—if not, document using imgAlt.

[shinokada]

@jjagielka Is this PR still valid? Please let me know.

[jjagielka]

Yes. It introduces some error management for the image loading.