@godxjp/ui 23.1.0 → 23.2.0

package/dist/styles/card-layout.css

@@ -4,6 +4,9 @@
   [data-slot="card"] {
     min-width: 0;
 
+    display: flex;
+    flex-direction: column;
+
     border-width: 1px;
     border-style: solid;
     border-color: hsl(var(--card-border, var(--border)));
@@ -25,6 +28,10 @@
     background: transparent;
   }
 
+  [data-slot="card"][data-variant="borderless"] {
+    border-width: 0;
+  }
+
   [data-slot="card"][data-variant="featured"] {
     border-color: var(--card-featured-border-color, hsl(var(--primary)));
     box-shadow: 0 0 0 var(--card-featured-ring-width)
@@ -74,6 +81,11 @@
 
   [data-slot="card"][data-accent] > [data-slot="card-header"],
   [data-slot="card"][data-accent] > [data-slot="card-content"]:not([data-flush]),
+
+  [data-slot="card"] > [data-slot="card-footer"] {
+    margin-block-start: auto;
+  }
+
   [data-slot="card"][data-accent] > [data-slot="card-footer"]:not([data-flush]) {
     padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
   }
@@ -95,6 +107,21 @@
     padding-inline-start: var(--card-space-inset);
   }
 
+  [data-slot="card"][data-hoverable] {
+    cursor: pointer;
+    transition: box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  [data-slot="card"][data-hoverable]:hover {
+    --card-shadow: var(--card-hover-shadow);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="card"][data-hoverable] {
+      transition: none;
+    }
+  }
+
   [data-slot="card-header"] {
     display: flex;
     flex-direction: column;
@@ -335,6 +362,27 @@
     justify-content: stretch;
   }
 
+  [data-slot="card-footer"][data-actions] {
+    gap: 0;
+    flex-wrap: nowrap;
+    padding-inline: 0;
+    padding-block: 0;
+    border-top: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
+  }
+
+  [data-slot="card-footer"][data-actions] > * {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 0;
+    align-items: center;
+    justify-content: center;
+    padding-block: var(--card-space-footer-y);
+  }
+
+  [data-slot="card-footer"][data-actions] > * + * {
+    border-inline-start: var(--stroke-hairline) solid hsl(var(--card-border, var(--border)));
+  }
+
   .ui-card-inset-x {
     padding-inline: var(--card-space-inset);
   }

package/dist/styles/data-display-layout.css

@@ -314,6 +314,94 @@
     background: hsl(var(--muted-foreground));
   }
 
+  .ui-swatch {
+    display: inline-block;
+    flex: none;
+
+    vertical-align: middle;
+    inline-size: var(--swatch-size);
+    block-size: var(--swatch-size);
+    border-radius: var(--swatch-radius);
+    background: var(--swatch-color);
+    box-shadow: inset 0 0 0 var(--swatch-border-width)
+      var(--swatch-border-color, hsl(var(--border)));
+    forced-color-adjust: none;
+  }
+
+  .ui-feature-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--feature-list-space-gap);
+  }
+
+  .ui-feature-list-item {
+    display: grid;
+    align-items: start;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--feature-list-space-inline);
+    font-size: var(--feature-list-font-size);
+    line-height: var(--line-height-body);
+  }
+
+  .ui-feature-list-mark {
+    display: grid;
+    block-size: 1lh;
+    place-items: center;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-feature-list-mark > svg {
+    inline-size: var(--feature-list-mark-icon-size);
+    block-size: var(--feature-list-mark-icon-size);
+  }
+
+  .ui-feature-list-item[data-state="included"] .ui-feature-list-mark {
+    color: hsl(var(--mark-success));
+  }
+
+  .ui-feature-list-item[data-state="limited"] .ui-feature-list-mark {
+    color: hsl(var(--mark-warning));
+  }
+
+  .ui-feature-list-item[data-state="excluded"] .ui-feature-list-label {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-feature-list-body {
+    display: flex;
+    min-inline-size: 0;
+    flex-direction: column;
+
+    overflow-wrap: anywhere;
+  }
+
+  .ui-feature-list-description {
+    color: hsl(var(--muted-foreground));
+    font-size: var(--feature-list-description-font-size);
+  }
+
+  .ui-thumbnail {
+    display: block;
+
+    inline-size: auto;
+
+    max-inline-size: 100%;
+    block-size: var(--thumbnail-block-size);
+    border: var(--thumbnail-border-width) solid hsl(var(--border));
+    border-radius: var(--thumbnail-radius);
+
+    background: hsl(var(--muted));
+    object-fit: contain;
+  }
+
+  .ui-thumbnail[data-size="sm"] {
+    block-size: var(--thumbnail-block-size-sm);
+  }
+
+  .ui-thumbnail[data-size="lg"] {
+    block-size: var(--thumbnail-block-size-lg);
+  }
+
   .ui-timeline {
     display: flex;
     flex-direction: column;

package/dist/styles/navigation-layout.css

@@ -53,22 +53,67 @@
     position: absolute;
     background: var(--tabs-indicator-background, hsl(var(--primary)));
     opacity: 0;
-    transition: opacity var(--duration-fast) var(--ease-standard);
+
+    transition: opacity var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
     pointer-events: none;
   }
 
   [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
     [data-slot="tabs-trigger"]::after {
-    inset-inline: 0;
     inset-block-end: calc(-1 * var(--tabs-indicator-offset));
     block-size: var(--tabs-indicator-size);
+    inline-size: calc(100% - 2 * var(--tabs-indicator-inset));
+    inset-inline-start: var(--tabs-indicator-inset);
+  }
+
+  [data-slot="tabs"][data-indicator-align="start"]
+    [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
+    [data-slot="tabs-trigger"]::after {
+    inset-inline-start: 0;
+  }
+
+  [data-slot="tabs"][data-indicator-align="end"]
+    [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
+    [data-slot="tabs-trigger"]::after {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
   }
 
   [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
     [data-slot="tabs-trigger"]::after {
-    inset-block: 0;
     inset-inline-end: calc(-1 * var(--tabs-indicator-offset));
     inline-size: var(--tabs-indicator-size);
+    block-size: calc(100% - 2 * var(--tabs-indicator-inset));
+    inset-block-start: var(--tabs-indicator-inset);
+  }
+
+  [data-slot="tabs"][data-indicator-align="start"]
+    [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
+    [data-slot="tabs-trigger"]::after {
+    inset-block-start: 0;
+  }
+
+  [data-slot="tabs"][data-indicator-align="end"]
+    [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
+    [data-slot="tabs-trigger"]::after {
+    inset-block-start: auto;
+    inset-block-end: 0;
+  }
+
+  [data-slot="tabs"][data-indicator-size="label"][data-orientation="horizontal"][data-size="sm"] {
+    --tabs-indicator-inset: var(--tabs-trigger-padding-x-sm);
+  }
+
+  [data-slot="tabs"][data-indicator-size="label"][data-orientation="horizontal"][data-size="md"] {
+    --tabs-indicator-inset: var(--tabs-trigger-padding-x-md);
+  }
+
+  [data-slot="tabs"][data-indicator-size="label"][data-orientation="horizontal"][data-size="lg"] {
+    --tabs-indicator-inset: var(--tabs-trigger-padding-x-lg);
+  }
+
+  [data-slot="tabs"][data-indicator-size="label"][data-orientation="vertical"] {
+    --tabs-indicator-inset: var(--tabs-trigger-line-padding-y);
   }
 
   [data-slot="tabs-list"][data-variant="line"]
@@ -76,10 +121,38 @@
     opacity: 1;
   }
 
+  [data-slot="tabs"][data-animated-ink-bar="false"]
+    [data-slot="tabs-list"][data-variant="line"]
+    [data-slot="tabs-trigger"]::after {
+    transition: none;
+  }
+
+  @keyframes ui-tabs-pane-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  [data-slot="tabs"][data-animated-tab-pane="true"] [data-slot="tabs-panel"][data-state="active"],
+  [data-slot="tabs"][data-animated-tab-pane="true"]
+    [data-slot="tabs-content"][data-state="active"] {
+    animation: ui-tabs-pane-in var(--duration-base, 250ms)
+      var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
   @media (prefers-reduced-motion: reduce) {
     [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
       transition: none;
     }
+
+    [data-slot="tabs"][data-animated-tab-pane="true"] [data-slot="tabs-panel"][data-state="active"],
+    [data-slot="tabs"][data-animated-tab-pane="true"]
+      [data-slot="tabs-content"][data-state="active"] {
+      animation: none;
+    }
   }
 
   .ui-tabs-bar {

package/dist/styles/shell-layout.css

@@ -1692,6 +1692,22 @@
     color: var(--sidebar-badge-destructive-foreground, hsl(var(--destructive-foreground)));
   }
 
+  .sb-trailing-icon {
+    display: grid;
+    width: var(--sidebar-nav-icon-size);
+    height: var(--sidebar-nav-icon-size);
+    flex: 0 0 auto;
+    line-height: 0;
+    place-items: center;
+  }
+
+  .sb-trailing-icon svg {
+    display: block;
+    width: var(--sidebar-nav-icon-size);
+    height: var(--sidebar-nav-icon-size);
+    flex: 0 0 auto;
+  }
+
   .sb-footer {
     margin-top: auto;
     border-top: 1px solid hsl(var(--border));
@@ -1894,6 +1910,8 @@
   :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
     .sb-section-label,
   :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"]) .sb-label,
+  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
+    .sb-trailing-icon,
   :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"]) .sb-badge {
     display: none;
   }

package/dist/tokens/components/card.css

@@ -36,6 +36,8 @@
 
   --card-glow: 0 0 0 0 transparent;
 
+  --card-hover-shadow: var(--shadow-md);
+
   --card-tint: transparent;
 
   --card-accent-rail-width: var(--stroke-2xl);

package/dist/tokens/components/data-display.css

@@ -82,6 +82,29 @@
 
   --legend-color: initial;
 
+  --swatch-size: 1rem;
+  --swatch-radius: 0.125rem;
+
+  --swatch-border-width: var(--stroke-hairline);
+
+  --swatch-border-color: initial;
+
+  --swatch-color: hsl(var(--muted));
+
+  --feature-list-space-gap: var(--space-stack-sm);
+
+  --feature-list-space-inline: var(--space-inline-sm);
+  --feature-list-font-size: var(--font-size-sm);
+  --feature-list-description-font-size: var(--font-size-xs);
+
+  --feature-list-mark-icon-size: var(--icon-size-md);
+
+  --thumbnail-block-size-sm: 4rem;
+  --thumbnail-block-size: 6rem;
+  --thumbnail-block-size-lg: 10rem;
+  --thumbnail-border-width: var(--stroke-hairline);
+  --thumbnail-radius: var(--radius);
+
   --timeline-dot-done-background: initial;
   --timeline-dot-current-background: initial;
   --timeline-line-completed-background: initial;

package/dist/tokens/components/feedback.css

@@ -94,6 +94,24 @@
   --skeleton-stat-value-width: 8rem;
   --skeleton-stat-caption-width: 5rem;
 
+  --skeleton-element-radius: var(--radius-sm);
+  --skeleton-button-width-ratio: 2;
+  --skeleton-input-width-ratio: 5;
+
+  --skeleton-node-size: calc(var(--control-height) * 3);
+  --skeleton-image-glyph-size: var(--icon-size-4xl);
+
+  --skeleton-image-glyph-color: initial;
+
+  --skeleton-article-avatar-gap: var(--space-inline-lg);
+  --skeleton-article-avatar-title-offset: var(--space-3);
+  --skeleton-article-title-gap: var(--space-stack-lg);
+  --skeleton-article-line-gap: var(--space-stack-md);
+
+  --skeleton-paragraph-last-width: 61%;
+
+  --skeleton-sweep-gradient: initial;
+
   --query-load-more-space-block-start: var(--space-stack-md);
   --query-loading-more-space-block-start: var(--space-stack-sm);
 

package/dist/tokens/components/navigation.css

@@ -47,6 +47,8 @@
   --tabs-indicator-size: 2px;
   --tabs-indicator-offset: 0px;
 
+  --tabs-indicator-inset: 0px;
+
   --tabs-root-gap: 0.5rem;
 
   --tabs-list-line-space-inset: 0px;

package/dist/tokens/foundation.css

@@ -238,6 +238,24 @@
   --phi-0: var(--phi-unit);
   --phi-p1: calc(var(--phi-unit) * var(--ratio-phi));
   --phi-p2: calc(var(--phi-p1) * var(--ratio-phi));
+
+  --duration-fast: 150ms;
+  --duration-base: 250ms;
+  --duration-slow: 500ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
+  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
+  --reveal-distance: 10px;
+
+  --reveal-stagger-step: 60ms;
+
+  --duration-loop: 1400ms;
+
+  --activity-interval: var(--duration-loop);
+
+  --activity-stagger-step: 160ms;
+
 }
 
 .ui-scale-fixed {
@@ -289,22 +307,6 @@
   --space-chrome-gap: var(--space-2);
   --field-label-gap: var(--space-2);
 
-  --duration-fast: 150ms;
-  --duration-base: 250ms;
-  --duration-slow: 500ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
-  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
-  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
-  --reveal-distance: 10px;
-
-  --reveal-stagger-step: 60ms;
-
-  --duration-loop: 1400ms;
-
-  --activity-interval: var(--duration-loop);
-
-  --activity-stagger-step: 160ms;
 }
 
 .dark,

package/docs/CONSUMER-RULES.md

@@ -5,7 +5,7 @@ Read this once; the audit enforces it. Everything else in `docs/` is for contrib
 1. Load styles with `@import "@godxjp/ui/styles"` (fonts bundled) or `@import "@godxjp/ui/styles/core"` (no fonts). Never cherry-pick `*-layout.css`.
 2. Every page is `<PageContainer title subtitle extra footer>`; its sections are spaced by the page. Group items inside a section with `<Flex direction="col" gap>` or `<ResponsiveGrid>`.
 3. No Tailwind layout on your own elements: no `flex`, `grid`, `gap-*`, `p-*`, `m-*`, `space-*`. Rows are `<Flex>` (default row), stacks are `<Flex direction="col">`, grids are `<ResponsiveGrid>`.
-4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`.
+4. No hand-rolled surfaces: no `rounded-* border bg-*` divs. A box is `Card`, a pill is `Badge`, a person is `Avatar`, a row is `ListRow`, a label/value pair is `Descriptions`, an empty area is `EmptyState`, a read-only sample of a colour the USER chose is `Swatch`.
 5. Real controls only: `Button`, `Input`, `Select`, `Textarea`, `Checkbox`… never raw `<button>`/`<input>`; a labelled control lives in `<FormField label>`. A Select outside a form takes `width="auto"`. **A disabled control's reason is visible text, never a tooltip** — see below.
 6. Text is `<Text>` / `<Heading>` with `tone`, `size`, `weight`, `truncate`, `mono` — not `className="text-muted-foreground font-semibold"`.
 7. Colours are semantic tokens (`tone="destructive"`, `bg-primary`), never palette names, hex, or `bg-black` / `text-white`.

package/docs/DESIGN-AUTHORITY.md

@@ -253,7 +253,8 @@ a weaker one.** An algorithm guarantees a value is _consistent_; this repo had t
 times (below) precisely because consistent is not the same as _accessible_. A threshold guarantees
 the property actually being sold.
 
-**To change a derived value:** change it, run `pnpm test`, and if a threshold breaks the value is
+**To change a derived value:** change it, run the test file that owns the threshold (never the full
+suite — that is CI's job on the PR), and if a threshold breaks the value is
 wrong. Do not relax the threshold.
 
 **The four overrides that existed even while a generator did** — the clearest evidence the

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,16 +3,27 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **135**
-- With ≥1 frame: **130** · zero-frame: **5**
+- Public components: **150**
+- With ≥1 frame: **134** · zero-frame: **16**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
 
 - [ ] `inertiaUpload`
+- [ ] `FormFieldControl`
+- [ ] `FormFieldArray`
+- [ ] `useZodForm`
 - [ ] `CardBar`
 - [ ] `VisuallyHidden`
 - [ ] `RangeTimeline`
+- [ ] `ServiceCatalogCta`
+- [ ] `OverlayPortalProvider`
+- [ ] `SkeletonArticle`
+- [ ] `SkeletonAvatar`
+- [ ] `SkeletonButton`
+- [ ] `SkeletonInput`
+- [ ] `SkeletonNode`
+- [ ] `SkeletonImage`
 - [ ] `ChatBubbleList`
 
 ## Per-component contract axes
@@ -22,6 +33,10 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Component | Frame | visua | state | owner | conte | respo | inter | acces | prefe | async |
 | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
 | inertiaUpload | **✗** | · | · | · | · | · | · | · | · | · |
+| FormRoot | ✓ | · | · | · | · | · | · | · | · | · |
+| FormFieldControl | **✗** | · | · | · | · | · | · | · | · | · |
+| FormFieldArray | **✗** | · | · | · | · | · | · | · | · | · |
+| useZodForm | **✗** | · | · | · | · | · | · | · | · | · |
 | CardBar | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | TimeRangePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | VisuallyHidden | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
@@ -53,8 +68,12 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | CardContent | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | StatCard | ✓ | N/A | N/A | · | · | · | · | · | · | · |
 | ServiceLauncherCard | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| ServiceCatalogCta | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | Badge | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Legend | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| Swatch | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| FeatureList | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| Thumbnail | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | ListRow | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | CredentialReveal | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | QrCode | ✓ | ✓ | N/A | · | · | · | · | · | · | · |
@@ -95,6 +114,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Steps | ✓ | ✓ | N/A | · | · | · | · | · | · | · |
 | Toolbar | ✓ | N/A | · | N/A | · | · | · | · | · | · |
 | AppProvider | ✓ | · | · | · | · | · | · | · | · | · |
+| OverlayPortalProvider | **✗** | · | · | · | · | · | · | · | · | · |
 | formatDate | ✓ | · | · | · | · | · | · | · | · | · |
 | TimePicker | ✓ | · | · | · | · | · | · | · | · | · |
 | Cascader | ✓ | ✓ | · | · | · | · | · | · | · | · |
@@ -116,7 +136,13 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | PrefetchLink | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Avatar | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Separator | ✓ | · | N/A | N/A | · | · | · | · | · | · |
-| Skeleton | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| Skeleton | ✓ | N/A | · | N/A | · | · | · | · | · | · |
+| SkeletonArticle | **✗** | N/A | · | N/A | · | · | · | · | · | · |
+| SkeletonAvatar | **✗** | ✓ | N/A | N/A | · | · | · | · | · | · |
+| SkeletonButton | **✗** | ✓ | N/A | N/A | · | · | · | · | · | · |
+| SkeletonInput | **✗** | ✓ | N/A | N/A | · | · | · | · | · | · |
+| SkeletonNode | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
+| SkeletonImage | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | Toggle | ✓ | ✓ | · | N/A | · | · | · | · | · | · |
 | ToggleGroup | ✓ | ✓ | · | · | · | · | · | · | · | · |
 | AspectRatio | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/assets/shot-landscape.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="540" viewBox="0 0 960 540" role="img">
+  <rect width="960" height="540" fill="hsl(210 20% 97%)"/>
+  <rect width="960" height="56" fill="hsl(152 34% 38%)"/>
+  <rect x="24" y="22" width="140" height="12" rx="6" fill="hsl(152 34% 80%)"/>
+  <rect y="56" width="216" height="484" fill="hsl(210 16% 92%)"/>
+  <rect x="24" y="92" width="160" height="10" rx="5" fill="hsl(210 12% 76%)"/>
+  <rect x="24" y="124" width="160" height="10" rx="5" fill="hsl(210 12% 82%)"/>
+  <rect x="24" y="156" width="160" height="10" rx="5" fill="hsl(210 12% 82%)"/>
+  <rect x="248" y="92" width="320" height="160" rx="12" fill="hsl(210 16% 88%)"/>
+  <rect x="592" y="92" width="320" height="160" rx="12" fill="hsl(210 16% 88%)"/>
+  <rect x="248" y="284" width="664" height="212" rx="12" fill="hsl(210 16% 90%)"/>
+</svg>

package/docs/assets/shot-portrait.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="360" height="640" viewBox="0 0 360 640" role="img">
+  <rect width="360" height="640" fill="hsl(210 20% 97%)"/>
+  <rect width="360" height="72" fill="hsl(204 60% 46%)"/>
+  <rect x="20" y="30" width="120" height="12" rx="6" fill="hsl(204 60% 82%)"/>
+  <rect x="20" y="104" width="320" height="120" rx="10" fill="hsl(210 16% 88%)"/>
+  <rect x="20" y="248" width="320" height="64" rx="10" fill="hsl(210 16% 90%)"/>
+  <rect x="20" y="336" width="320" height="64" rx="10" fill="hsl(210 16% 90%)"/>
+  <rect x="20" y="424" width="320" height="64" rx="10" fill="hsl(210 16% 90%)"/>
+  <rect x="20" y="540" width="320" height="44" rx="10" fill="hsl(204 60% 46%)"/>
+</svg>

package/docs/data-display/card/index.tsx

@@ -111,6 +111,12 @@ export default function Demo() {
               </CardHeader>
               <CardContent>枠線のみ</CardContent>
             </Card>
+            <Card variant="borderless">
+              <CardHeader>
+                <CardTitle level={2}>borderless</CardTitle>
+              </CardHeader>
+              <CardContent>塗りのみ · 枠線なし</CardContent>
+            </Card>
             <Card variant="featured">
               <CardHeader>
                 <CardTitle level={2}>featured</CardTitle>
@@ -120,6 +126,40 @@ export default function Demo() {
           </ResponsiveGrid>
         </Flex>
 
+        <Flex direction="col" gap="sm">
+          <Text as="div" weight="medium">
+            hoverable · actions — Ant Design の hoverable と actions
+          </Text>
+          <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+            {/*
+             * `hoverable` は見た目だけのフラグです。カード全体が押せるように見えるなら、
+             * キーボードでも届く本物のコントロールを必ず同居させます（ここでは footer の
+             * Button）。div に onClick を置くのは禁止です。
+             */}
+            <Card hoverable>
+              <CardHeader>
+                <CardTitle level={2}>ホバーで浮き上がる</CardTitle>
+                <CardDescription>--card-hover-shadow まで一段上がります</CardDescription>
+              </CardHeader>
+              <CardFooter actions>
+                <Button variant="ghost">複製</Button>
+                <Button variant="ghost">共有</Button>
+                <Button variant="ghost">削除</Button>
+              </CardFooter>
+            </Card>
+            <Card hoverable accent="info" accentPlacement="perimeter">
+              <CardHeader>
+                <CardTitle level={2}>accent と併用</CardTitle>
+                <CardDescription>ホバー中もアテンションのリングは消えません</CardDescription>
+              </CardHeader>
+              <CardFooter actions>
+                <Button variant="ghost">承認</Button>
+                <Button variant="ghost">却下</Button>
+              </CardFooter>
+            </Card>
+          </ResponsiveGrid>
+        </Flex>
+
         <Flex direction="col" gap="sm">
           <Text as="div" weight="medium">
             Accent · accentPlacement=&quot;edge&quot; (既定 · 先頭エッジのレール)