@godxjp/ui 19.1.0 → 19.2.0

package/dist/styles/badge-layout.css

@@ -1,37 +1,23 @@
-/*
- * STATUS BADGE — compact chip spacing + semantic tones (control-styles.ts maps tones).
- */
+
 
 @layer components {
   [data-slot="badge"] {
     display: inline-flex;
     align-items: center;
-    /* Center on the text x-height when the badge sits INLINE with running text (an inline-flex box
-     * defaults to baseline → it rides high / "valign top" next to a label). Ignored in flex/grid
-     * containers, so table cells and Flex rows are unaffected. */
+
     vertical-align: middle;
     gap: var(--badge-space-gap);
     padding: var(--badge-space-y) var(--badge-space-x);
     border-radius: var(--radius-md);
     border-width: 1px;
     font-size: var(--badge-font-size);
-    /* The cva used to carry `text-xs`, which set BOTH font-size and the Tailwind companion
-     * line-height. It was dropped (gh#260) so this components-layer rule can own font-size —
-     * so line-height must be restored here too, or the badge would inherit the ambient body
-     * leading and grow taller. Default reproduces `text-xs` exactly. */
+
     line-height: var(--badge-line-height);
     font-weight: var(--font-weight-medium);
-    /* A status chip must read as one unit — never wrap its label across lines,
-     * especially inside narrow table cells. */
+
     white-space: nowrap;
   }
 
-  /* Optical vertical centering. JP faces (Noto Sans JP / M PLUS 2) declare ascent ≫ descent
-   * (~1.16em vs ~0.29em), so flex-centering the em box seats the label visibly LOW in the chip
-   * (worst with short lowercase labels: "owner", "active"). Trimming the line box to
-   * cap-height/alphabetic makes the INK the thing that gets centered, and drops the phantom
-   * leading so the chip height comes from --badge-space-y + the glyphs, not the font's em box.
-   * No-support browsers simply keep the legacy (slightly low) rendering. */
   @supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
     [data-slot="badge-label"] {
       text-box-trim: trim-both;

package/dist/styles/base.css

@@ -1,68 +1,8 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * FOUNDATION — Tailwind entry, design tokens, density, theme mapping, base
- * element styles. This is the minimum every consumer needs.
- *
- * Tree-shakeable CSS setup: import this ONCE, then add ONLY the component
- * layout layers you actually render:
- *
- *     @import "@godxjp/ui/styles/base";            // this file (required)
- *     @import "@godxjp/ui/styles/control";         // buttons, inputs, toggles
- *     @import "@godxjp/ui/styles/form-layout";
- *     @import "@godxjp/ui/styles/dialog-layout";
- *     @import "@godxjp/ui/styles/card-layout";
- *     // ...only the ones you use
- *
- * The layout files declare `@layer components` and use `@apply`, so base.css
- * (which pulls in Tailwind) MUST be imported before them, in the same
- * stylesheet.
- *
- * Bundled fonts are opt-in — add `@godxjp/ui/styles/fonts` if you want them, or
- * skip it and supply your own via the --font-family-* tokens. When you DO import
- * it, it MUST come AFTER this file: base.css pulls in tokens/foundation.css,
- * whose font-agnostic `:root { --font-sans-base: <system stack> }` sits at the
- * same specificity as the bundle's fill, so the later import wins. Imported
- * first, the bundle is dead weight (issue #210).
- *
- * Prefer the all-in-one `@godxjp/ui/styles` entry if you'd rather ship every
- * component's CSS + the bundled fonts and not think about it.
- * ───────────────────────────────────────────────────────────────────────── */
+
 @import "tailwindcss";
 
-/* ── THE LAYER CONTRACT (gh#412) ───────────────────────────────────────────
- * `@import "tailwindcss"` establishes `theme, base, components, utilities`. Everything this
- * package styles lives in `@layer components`, which is EARLIER than `utilities` — so a Tailwind
- * utility a component itself emits silently outranks the package rule that is supposed to own the
- * same property, no matter how specific that rule is. That is not a specificity bug you can fix
- * with another selector; layer order beats specificity outright.
- *
- * It shipped as a real defect: `<table class="… text-sm">` (utilities) vs the collection preset's
- * `font-size: var(--table-action-collection-font-size-compact)` (components) — the compact type
- * tier never applied at ANY width, so the documented token was dead and a 5–6 character Japanese
- * label could not fit the narrow-frame column measure (WCAG 2.2 SC 1.4.10, and only ever visible
- * in Japanese). Two independent consumers reported it.
- *
- * `godxjp-ui-responsive` is declared HERE, after Tailwind, so it is the LAST layer and outranks
- * `utilities`. It is reserved for one thing: RESPONSIVE RE-POINTS — the container/media blocks
- * that must win over a component's own static utility for the layout contract to hold. Nothing
- * static belongs in it; a rule that does not sit inside a `@container`/`@media` query goes in
- * `@layer components` like everything else.
- *
- * What this layer canNOT do — and the rule consumers must follow: an UNLAYERED consumer rule
- * outranks EVERY layer, including this one. So app CSS must theme this package through TOKENS on
- * a wrapper, never by writing its own selectors against `[data-slot]` / `[data-priority]`
- * elements. A consumer that does write such a rule must put it in a layer
- * (`@layer components { … }`), or it will silently kill the responsive re-points the package
- * makes — a column measured to 0px and wrapped one character per line is what that looks like.
- * See docs/TOKENS.md · "The layer contract". */
 @layer godxjp-ui-responsive;
 
-/* Per-language font wiring — token-only, NO hardcoded faces. Each locale reads
- * an OPTIONAL per-lang slot token (empty by default) and falls back to the
- * base sans. Consumers switch a locale's face by setting its slot, e.g.
- *   :root { --font-sans-ja: "Noto Sans JP", var(--font-sans-base); }
- * without writing any [lang] selectors. The opt-in bundle styles/fonts fills
- * these slots for its Noto Sans JP + M PLUS 2 fallback. `--font-sans-base` is a
- * separate token (not --font-family-sans) so the fallback can't self-reference. */
 [lang="ja"] {
   --font-family-sans: var(--font-sans-ja, var(--font-sans-base));
 }
@@ -82,47 +22,27 @@
   --font-family-sans: var(--font-sans-zh-hant, var(--font-sans-base));
 }
 
-/* Guarantee the full set of semantic color utilities ships in the compiled CSS
- * even when the library itself only references a few — consumers (and the token
- * docs) must be able to use bg/text/border for EVERY semantic role. Without this
- * Tailwind's JIT drops unused roles (success/info/attention) → transparent. */
 @source inline(
   "{bg,text,border,ring}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}"
 );
 @source inline(
   "{bg,text}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}-foreground"
 );
-/* Extended text hierarchy + interaction-ramp utilities (library may not reference them directly). */
+
 @source inline("{text,bg,border}-{foreground-tertiary,foreground-disabled,link,brand}");
 @source inline("bg-{primary,secondary,destructive}-{hover,active}");
-/* Force the extended radius steps so Tailwind emits --radius-xs/-xl/-2xl to :root (consumers read
- * `var(--radius-2xl)` directly; without a generated utility Tailwind drops the unused var). */
+
 @source inline("rounded-{xs,xl,2xl}");
 @source inline("text-2xs");
 @source inline("text-{3xl,4xl,5xl}");
 @source inline("text-{primary,success,warning,info,error}-strong");
-/* `.js` matters: the published package ships only compiled JS under dist (no
- * .tsx sources), and this file is copied verbatim into dist/styles — without
- * it Tailwind finds no component classes in consumers (unstyled popovers and
- * selects, and Radix scroll-lock freezes the page because pointer-events-auto
- * is never emitted). In-repo the glob scans src; published, it scans dist. */
+
 @source "../**/*.{tsx,ts,js}";
 @import "../tokens/base.css";
-/* The focus ring is FOUNDATION, not a component layer: every focusable control in
- * every layer reads the same four tokens from ONE rule (styles/focus-ring.css).
- * Imported here — not left to index.css — so a consumer that tree-shakes down to
- * `styles/base` + two layout files still gets keyboard-focus affordance (WCAG
- * 2.4.7); shipping it as an optional layer would make a11y opt-in by accident. */
+
 @import "./focus-ring.css";
 @import "./density.css";
 
-/* `inline` (NOT a bare @theme): Tailwind inlines each expression — e.g. `hsl(var(--primary))` —
- * directly into every utility (`bg-primary` becomes `background-color: hsl(var(--primary))`) instead
- * of emitting `var(--color-primary)` computed once at :root. This is THE enabler for scoped /
- * multi-tenant theming: a `[data-tenant]{ --primary: … }` override now re-resolves at the element,
- * so colors and radius propagate into a subtree (a plain @theme froze them at :root, so scoped
- * overrides never reached the color utilities). Components read raw tokens like `hsl(var(--primary))`
- * directly in their own CSS, so they re-theme the same way. */
 @theme inline {
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
@@ -151,8 +71,7 @@
   --color-info-foreground: hsl(var(--info-foreground));
   --color-attention: hsl(var(--attention));
   --color-attention-foreground: hsl(var(--attention-foreground));
-  /* AA-strong status TEXT colours (text-{success,warning,info,error}-strong) — darker than the
-   * fills so small coloured labels clear WCAG AA on white; flip light on the dark theme. */
+
   --color-primary-strong: hsl(var(--text-primary));
   --color-success-strong: hsl(var(--text-success));
   --color-warning-strong: hsl(var(--text-warning));
@@ -164,8 +83,7 @@
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
   --color-chart-6: var(--chart-6);
-  /* Golden-ratio radius scale — every step derives from --radius × (--radius-ratio = φ)ⁿ, so
-   * overriding --radius alone rescales the whole scale proportionally (≈ 1.4/2.3/3.7/6/9.7/15.7px). */
+
   --radius-xs: calc(
     var(--radius) / var(--radius-ratio) / var(--radius-ratio) / var(--radius-ratio)
   );
@@ -174,22 +92,22 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) * var(--radius-ratio));
   --radius-2xl: calc(var(--radius) * var(--radius-ratio) * var(--radius-ratio));
-  /* Extended text-hierarchy roles (tertiary / disabled / link / brand) → text-* / bg-* utilities. */
+
   --color-foreground-tertiary: hsl(var(--text-tertiary));
   --color-foreground-disabled: hsl(var(--text-disabled));
   --color-link: hsl(var(--text-link));
   --color-brand: hsl(var(--text-brand));
-  /* Interaction ramp (hover / active) → bg-primary-hover etc. */
+
   --color-primary-hover: hsl(var(--primary-hover));
   --color-primary-active: hsl(var(--primary-active));
   --color-secondary-hover: hsl(var(--secondary-hover));
   --color-secondary-active: hsl(var(--secondary-active));
   --color-destructive-hover: hsl(var(--destructive-hover));
   --color-destructive-active: hsl(var(--destructive-active));
-  /* Wire Tailwind's font-sans/mono (and preflight) to the design-system fonts. */
+
   --font-sans: var(--font-family-sans);
   --font-mono: var(--font-family-mono);
-  /* 和色 (wa-iro) accents → bg-wa / text-wa utilities (charts, tags, decoration). */
+
   --color-wa-ai: var(--wa-ai);
   --color-wa-gunjo: var(--wa-gunjo);
   --color-wa-ruri: var(--wa-ruri);
@@ -203,7 +121,7 @@
   --color-wa-sakura: var(--wa-sakura);
   --color-wa-sumi: var(--wa-sumi);
   --color-wa-nezu: var(--wa-nezu);
-  /* Wire Tailwind text-* utilities to runtime typography tokens (fontSize toolbar). */
+
   --text-2xs: var(--font-size-2xs);
   --text-xs: var(--font-size-xs);
   --text-sm: var(--font-size-sm);
@@ -211,7 +129,7 @@
   --text-lg: var(--font-size-lg);
   --text-xl: var(--font-size-xl);
   --text-2xl: var(--font-size-2xl);
-  /* Opt-in DISPLAY ramp (marketing/hero) — wired to the display tokens, unused by the admin scale. */
+
   --text-3xl: var(--font-size-3xl);
   --text-4xl: var(--font-size-4xl);
   --text-5xl: var(--font-size-5xl);
@@ -222,17 +140,6 @@
     border-color: hsl(var(--border));
   }
 
-  /* Visually-hidden, absolutely-positioned helpers must never affect layout or scroll height.
-   *
-   * Radix renders a hidden native form-fallback (BubbleSelect/BubbleInput) for Select, Checkbox,
-   * Switch and RadioGroup; it is `position:absolute` with NO top/left, so when the control has no
-   * positioned ancestor its static box resolves far down the page and inflates
-   * `document.scrollHeight` → phantom empty scroll space (gh#105). The same is true of the
-   * `.sr-only` clamp (Tailwind / our own status + file-input nodes). These fallbacks are always
-   * `aria-hidden` + `tabindex=-1`. Pinning every such node to the top-left of its containing block
-   * makes it impossible for it to extend the scroll height, regardless of consumer markup — no DOM
-   * wrapper or per-component positioning required. Inside the AppShell the `.app-main { contain:
-   * paint }` boundary (gh#104) already contains these; this rule protects every other call site too. */
   :where(select, input)[aria-hidden="true"][tabindex="-1"],
   .sr-only {
     top: 0;
@@ -242,8 +149,7 @@
   body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
-    /* Body reads --font-family-body (defaults to --font-family-sans → unchanged); a service that
-     * wants a dual-font brand (display + body face) overrides --font-family-body alone. */
+
     font-family: var(--font-family-body);
     font-size: var(--font-size-base);
     line-height: var(--line-height-body);
@@ -256,11 +162,6 @@
       "calt" 1;
   }
 
-  /* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
-   * the document outline (one <h1> per page, levels never skipped). Visual size
-   * follows the reference-design scale; component titles override via their own class.
-   * Headings read --font-family-display (defaults to --font-family-sans → unchanged) for dual-font
-   * brands (display face on headings, body face on prose). */
   :where(h1, h2, h3, h4, h5, h6) {
     font-family: var(--font-family-display);
   }

package/dist/styles/card-layout.css

@@ -1,48 +1,22 @@
-/*
- * CARD LAYOUT — canonical slot padding (@godxjp/ui)
- * -----------------------------------------------------------------
- * Card* components emit data-slot + data-* flags ONLY. All inset/gap padding lives here.
- *
- * Uses card component tokens from src/tokens/components/card.css.
- * Card tokens derive from foundation/layout primitives and are coordinated by tokens/base.css.
- *
- * Slot ownership — one token per vertical gap:
- *   shell φ¹   title block top, card bottom, solo content
- *   section φ⁰ header↔body (plain header pb=0; content owns gap)
- *   band φ⁻¹   banded header, separated footer
- *
- * Modifiers (set on components, never Tailwind p-* in app/story code):
- *   data-banded · data-flush · data-tight · data-solo · data-separated
- *
- * LAYER: wrapped in `@layer components` (like every other *-layout.css). Unlayered card CSS used to
- * BEAT Tailwind utilities, so a consumer `className="flex flex-row …"` on CardHeader was silently
- * ignored (flex-direction stayed `column`) — the documented CardAction pairing broke. In the
- * components layer, utilities win, so className overrides behave like every other component.
- */
+
 
 @layer components {
   [data-slot="card"] {
     min-width: 0;
-    /* Base hairline border — width lives here (not a Tailwind `border` utility) so the
-     * `[data-accent]` rail-width override below can win within the same cascade layer. */
+
     border-width: 1px;
     border-style: solid;
     border-color: hsl(var(--card-border, var(--border)));
     border-radius: var(--card-radius);
-    /* Fill = base card colour with an opt-in role tint washed over it (--card-tint default
-     * transparent → byte-identical at rest). Tint layer sits ABOVE the base colour.
-     * --card-background defaults to the LIVE --card role at the call site (re-resolves under a
-     * scoped theme); a service overrides --card-background to win. */
+
     background:
       linear-gradient(var(--card-tint), var(--card-tint)), hsl(var(--card-background, var(--card)));
     color: hsl(var(--card-foreground));
-    /* Resting elevation + opt-in brand glow — both quiet no-ops by default so a service theme can
-     * lift (--card-shadow) and/or glow (--card-glow) every card with no markup change. */
+
     box-shadow: var(--card-shadow), var(--card-glow);
     overflow: hidden;
   }
 
-  /* ── Surface variants — fill only; retain the shared DXS surface elevation ──── */
   [data-slot="card"][data-variant="muted"] {
     background: hsl(var(--secondary));
   }
@@ -51,22 +25,12 @@
     background: transparent;
   }
 
-  /* `featured` = the brand-toned perimeter. Its colour is a role-mirror knob (rule #45): declared
-   * `initial` in the token layer so the --primary default resolves HERE, at the call site, and a
-   * scoped [data-tenant]/.dark override of --primary still reaches it. A service that wants the
-   * featured ring in a non-brand tone overrides --card-featured-border-color; a card that wants a
-   * SEMANTIC perimeter (attention / destructive / success …) uses
-   * `accent="…" accentPlacement="perimeter"` instead — same geometry, tone-owned. */
   [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)
       var(--card-featured-border-color, hsl(var(--primary)));
   }
 
-  /* ── Density — override the shell inset/body tokens ──────────────────────
-   * `--card-space-shell-y: initial` re-arms the block axis to follow THIS card's inset again: the
-   * `density` prop is an explicit per-instance decision and must beat an ambient shell-level block
-   * override (e.g. AuthShell compact), exactly as it did when one inset owned both axes. */
   [data-slot="card"][data-density="tight"] {
     --card-space-inset: var(--space-3);
     --card-space-shell-y: initial;
@@ -79,11 +43,6 @@
     --card-space-body-y: var(--space-5);
   }
 
-  /* ── Accent tone — ONE resolved colour per semantic accent ─────────────
-   * `--card-accent-color` is RESOLVED from the card's own `data-accent`, so both placements read
-   * the same value and a new tone is one line. It is deliberately NOT a service knob: it is set on
-   * the element, so a :root / [data-tenant] override could never reach it. Retint the ROLE
-   * (--attention, --success, …) — that is what a role is for. */
   [data-slot="card"][data-accent="primary"] {
     --card-accent-color: hsl(var(--primary));
   }
@@ -108,7 +67,6 @@
     --card-accent-color: hsl(var(--destructive));
   }
 
-  /* ── Accent placement `edge` (DEFAULT) — semantic left stripe (token width), content on shell ─ */
   [data-slot="card"][data-accent] {
     border-inline-start-width: var(--card-accent-rail-width);
     border-inline-start-color: var(--card-accent-color);
@@ -120,12 +78,6 @@
     padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
   }
 
-  /* ── Accent placement `perimeter` — the full attention border (gh#12) ───
-   * The whole edge carries the semantic tone instead of one rail, so a card can read as
-   * "action required" / "failed" at a glance without borrowing `--primary` the way
-   * `variant="featured"` does. Same optical weight as `featured` (border + 1px ring), tone-owned.
-   * Because the rail is gone, the slot padding compensation above is undone — content returns to
-   * the normal shell column, so switching placement never shifts the text. */
   [data-slot="card"][data-accent][data-accent-placement="perimeter"] {
     border-width: var(--card-accent-perimeter-width);
     border-color: var(--card-accent-color);
@@ -143,7 +95,6 @@
     padding-inline-start: var(--card-space-inset);
   }
 
-  /* ── Header ──────────────────────────────────────────────────────────── */
   [data-slot="card-header"] {
     display: flex;
     flex-direction: column;
@@ -156,11 +107,6 @@
     padding-bottom: 0;
   }
 
-  /* ── CardBar — positionable tab/toolbar strip (CardBar in card.tsx) ───────
-   * Separators come from POSITION: a top bar gets a bottom border, a bottom
-   * bar a top border, a middle bar both, a sole child none. `border-block` is
-   * the block (top/bottom) axis — RTL-neutral. The card's own overflow:hidden
-   * clips the bar to the rounded corners, so it needs no radius of its own. */
   [data-slot="card-bar"] {
     display: flex;
     align-items: center;
@@ -205,7 +151,7 @@
 
   [data-slot="card-header"][data-banded] {
     padding-inline: var(--card-space-inset);
-    /* Divided band → symmetric vertical padding (border-aware). */
+
     padding-block: var(--card-space-divided-y);
     gap: var(--card-space-gap);
   }
@@ -250,28 +196,17 @@
     overflow: hidden;
   }
 
-  /* A banded header gives a normal body a top gap — but NOT a flush body: a full-bleed table (or any
-   * edge-to-edge content) must butt FLUSH against the card header's bottom border, with no empty
-   * bordered gap between the two bands (the dialog/sheet no-gap principle). */
   [data-slot="card"]:has([data-slot="card-header"][data-banded])
     [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
     padding-top: var(--card-space-body-y);
   }
 
-  /* Flush / tight body — symmetric plain header band.
-   *
-   * NOT written as `:has(…[data-tight]:not(:has(tabs-list)))`: the Selectors 4 spec forbids
-   * `:has()` anywhere inside `:has()`, and Chrome drops the WHOLE rule as invalid
-   * (CSS.supports=false, measured on Chrome 151) — the symmetric band never applied. Same
-   * failure class as the headerAlign selector (505f0e6): in the file, correct-looking, selects
-   * nothing. So: apply to every tight body, then the tabs case below restores the shell top. */
   [data-slot="card"]:has([data-slot="card-content"][data-tight])
     [data-slot="card-header"]:not([data-banded]) {
     padding-top: var(--card-space-body-y);
     padding-bottom: var(--card-space-body-y);
   }
 
-  /* Tabs in a tight body: only the bottom band is managed (rule below) — keep the shell top. */
   [data-slot="card"]:has([data-slot="card-content"][data-tight] [data-slot="tabs-list"])
     [data-slot="card-header"]:not([data-banded]) {
     padding-top: var(--card-space-shell-y, var(--card-space-inset));
@@ -282,7 +217,6 @@
     padding-bottom: var(--card-space-body-y);
   }
 
-  /* Toolbar header — title + CardAction, no description */
   [data-slot="card-header"]:has([data-slot="card-action"]):not(
       :has([data-slot="card-description"])
     ) {
@@ -295,16 +229,6 @@
     padding-bottom: var(--card-space-body-y);
   }
 
-  /* NOT `:has(header:has(action):not(:has(description)))` — nested `:has()` is spec-invalid
-   * and Chrome drops the whole rule (measured, Chrome 151), so the toolbar body never lost its
-   * top padding. Valid equivalent: zero it for any header-hosted action, then the described
-   * (non-toolbar) header restores the gap in the equal-specificity rule after this one. */
-  /* Both halves of the pair exclude [data-flush]: a flush body owns its block axis outright in
-   * the flush rule below, so neither half has anything to say about it. Excluding it from the
-   * DESCRIPTION half is what stops that half re-adding the gap a flush body just zeroed (gh#307);
-   * excluding it from the ACTION half is only consistency — that half zeroes the same value the
-   * flush rule already sets, and leaving it in place would let a service that retunes the flush
-   * block axis be silently overridden in an action-headed card. */
   [data-slot="card"]:has([data-slot="card-header"] [data-slot="card-action"])
     [data-slot="card-content"]:not([data-tight]):not([data-flush]) {
     padding-top: 0;
@@ -315,31 +239,21 @@
     padding-top: var(--card-space-body-y);
   }
 
-  /* Header-only card — terminal slot owns bottom shell */
   [data-slot="card"]:not(:has([data-slot="card-content"], [data-slot="card-footer"]))
     [data-slot="card-header"] {
     padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
   }
 
-  /* Cover — header below media uses section top, not shell */
   .ui-card-cover {
     display: block;
     width: 100%;
     overflow: hidden;
   }
 
-  /* A header BELOW a cover gets a top gap to clear the media — but a BANDED header is a
-   * self-contained divider band that must stay symmetric (border-aware), so it keeps its
-   * own `--card-space-divided-y` block padding instead of this one-sided top gap. */
   [data-slot="card"]:has([data-slot="card-cover"]) [data-slot="card-header"]:not([data-banded]) {
     padding-top: var(--card-space-body-y);
   }
 
-  /* ── Content ─────────────────────────────────────────────────────────────
-   * The two axes are INDEPENDENT (gh#232): the inline column reads --card-space-inset, the block
-   * shell edge reads --card-space-shell-y (default = the same inset, so the resting render is
-   * unchanged). A shell that needs a shorter card without a narrower column — AuthShell compact —
-   * now moves the block axis alone instead of hitting a wall at a uniform inset. */
   [data-slot="card-content"] {
     padding-inline: var(--card-space-inset);
     padding-bottom: var(--card-space-shell-y, var(--card-space-inset));
@@ -349,11 +263,6 @@
     padding-top: var(--card-space-body-y);
   }
 
-  /* A solo body owns BOTH block edges (there is no header/footer to carry them), so this is
-   * `padding-block`, not just `padding-top` — it overrides the generic bottom edge above.
-   * The fallback chain solo-y → shell-y → inset means: a shell that tunes only the general block
-   * knob still reaches a solo body, an explicit --card-space-solo-y wins over it, and with neither
-   * set the render is the historical inset. */
   [data-slot="card-content"][data-solo] {
     padding-block: var(--card-space-solo-y, var(--card-space-shell-y, var(--card-space-inset)));
   }
@@ -362,27 +271,10 @@
     padding-inline: 0;
   }
 
-  /* The flush body owns its BLOCK axis outright, and it does so for EVERY flush body — not only
-   * one that happens to contain a `<table>` (gh#307). The `:has(table)` gate made the "flush has
-   * no padding" contract accidental: a full-bleed body of anything else (a file list, a
-   * DataTable rendering its empty state, a media strip) still took the generic body padding, so
-   * it floated off the header — measured at 18.4px on a consumer's 関連ファイル section while the
-   * 備考 section next to it, a flush TABLE, measured 0px. The narrow repair for that report
-   * (`:not([data-flush])` on the describedBody pair) could not fix it: the padding was coming
-   * from the generic `[data-slot="card-content"]` rules, not from the described one, and adding
-   * the guard to the header-ACTION half of that pair even took the `padding-top: 0` those bodies
-   * used to get. Owning the axis here at (0,4,0) settles all of it: this out-ranks every generic
-   * content rule, and the two guarded pair-halves below no longer reach a flush body at all, so
-   * neither can override the zero again. `tight` and `solo` own the block axis themselves. */
   [data-slot="card-content"][data-flush]:not([data-tight]):not([data-solo]) {
     padding-block: 0;
   }
 
-  /* A plain header above ANY flush body therefore supplies its OWN bottom gap — the body's block
-   * padding is zeroed above, so without this the title/subtitle butt against the first row. Match
-   * the header's top inset so the header block reads balanced top↕bottom. The `:has()` argument
-   * mirrors the flush rule's own guards exactly: a tight/solo body keeps its padding, so widening
-   * this to it would double the gap. */
   [data-slot="card"]:has([data-slot="card-content"][data-flush]:not([data-tight]):not([data-solo]))
     [data-slot="card-header"]:not([data-banded]) {
     padding-bottom: var(--card-space-body-y);
@@ -396,7 +288,6 @@
     padding-bottom: var(--card-space-body-y);
   }
 
-  /* Tabs in card */
   [data-slot="card"]:has([data-slot="tabs-list"]) [data-slot="card-content"][data-tight] {
     padding-top: 0;
     padding-inline: 0;
@@ -411,7 +302,6 @@
     padding: var(--card-space-body-y) var(--card-space-inset);
   }
 
-  /* ── Footer ──────────────────────────────────────────────────────────── */
   [data-slot="card-footer"] {
     display: flex;
     flex-wrap: wrap;
@@ -435,7 +325,7 @@
 
   [data-slot="card-footer"][data-separated] {
     border-top: 1px solid hsl(var(--card-border, var(--border)));
-    /* Divided band → symmetric vertical padding (border-aware), in sync with a banded header. */
+
     padding-block: var(--card-space-divided-y);
     justify-content: flex-end;
   }
@@ -445,7 +335,6 @@
     justify-content: stretch;
   }
 
-  /* ── Nested insets (table cells, grid cells — align to shell, not slot padding) ─ */
   .ui-card-inset-x {
     padding-inline: var(--card-space-inset);
   }
@@ -466,7 +355,6 @@
     padding-block: var(--card-space-footer-y);
   }
 
-  /* ── StatCard — KPI tile aligned to dashboard design ─────────────── */
   [data-slot="card"][data-stat-card] {
     padding: var(--card-space-header-y) var(--card-space-inset);
   }
@@ -482,8 +370,6 @@
     min-width: 0;
   }
 
-  /* Optional leading icon medallion — tinted box above the metric. Tone via tokens (default a
-   * soft brand-primary tint), so a service rethemes it with --primary or the icon tokens. */
   [data-slot="stat-card-icon"] {
     display: inline-flex;
     align-items: center;
@@ -501,7 +387,6 @@
     height: var(--stat-card-icon-glyph-size);
   }
 
-  /* Inline layout: medallion floats to the trailing edge so label/value keep the start column. */
   [data-slot="card"][data-stat-layout="inline"] [data-slot="stat-card-icon"] {
     margin-bottom: 0;
     order: 1;
@@ -562,7 +447,6 @@
     line-height: var(--line-height-normal);
   }
 
-  /* ── Service launcher — organization-scoped downstream app tile ─────── */
   [data-slot="card"][data-service-launcher] {
     display: flex;
     flex-direction: column;
@@ -590,9 +474,6 @@
     color: hsl(var(--card-service-launcher-icon-foreground, var(--primary)));
   }
 
-  /* Unavailable tile (the consumer supplied a `disabledReason`): the medallion drops its brand
-   * wash so an un-launchable service never reads as live. Role-mirror knobs default at the CALL
-   * SITE, so a scoped [data-tenant]/.dark override of --muted still reaches it (docs/TOKENS.md). */
   [data-slot="card"][data-service-launcher][data-unavailable] [data-slot="service-launcher-icon"] {
     background: hsl(var(--card-service-launcher-unavailable-icon-background, var(--muted)));
     color: hsl(var(--card-service-launcher-unavailable-icon-foreground, var(--muted-foreground)));
@@ -624,7 +505,6 @@
     line-height: var(--card-service-launcher-description-line-height);
   }
 
-  /* Mono metadata ONLY (hostname · plan) — machine identifiers, never prose. */
   [data-slot="service-launcher-metadata"] {
     overflow-wrap: anywhere;
     color: hsl(var(--muted-foreground));
@@ -633,8 +513,6 @@
     line-height: var(--card-service-launcher-metadata-line-height);
   }
 
-  /* The disabled/unavailable reason is a localized SENTENCE — it takes the description's prose
-   * rhythm, not the mono metadata treatment (a JA/VI sentence in monospace is unreadable). */
   [data-slot="service-launcher-disabled-reason"] {
     overflow-wrap: anywhere;
     color: hsl(var(--muted-foreground));

package/dist/styles/chart-layout.css

@@ -1,6 +1,4 @@
-/* Chart layout — the accessible figure chrome for `@godxjp/ui/charts`.
- * Colours come from the foundation `--chart-1..6` + semantic tokens; recharts
- * draws the SVG itself. Logical properties only (RTL-safe). */
+
 
 .ui-chart {
   display: flex;
@@ -22,7 +20,6 @@
   min-inline-size: 0;
 }
 
-/* recharts legend/axis text inherits the design typography + muted tone. */
 .ui-chart .recharts-text,
 .ui-chart .recharts-legend-item-text {
   font-size: var(--font-size-xs);
@@ -38,22 +35,12 @@
   font-size: var(--font-size-xs);
 }
 
-/* Content that sits BELOW the plot (the activity footer slot) — outside the
- * `role="img"` canvas so links/buttons in it stay reachable and announced. */
 .ui-chart-footer {
   margin-block-start: var(--chart-trend-footer-gap);
   font-size: var(--font-size-xs);
   color: hsl(var(--muted-foreground));
 }
 
-/* ─────────────────────────────────────────────────────────────────────────────
- * CompactBarTrend — a dependency-free (no recharts) vertical bar trend.
- * ALL geometry resolves from `--chart-trend-*` tokens; the only inline value is
- * the DATUM itself (`--chart-trend-bar-value`, a 0..1 ratio), so a consumer never
- * writes a height calculation or a colour of its own.
- * ─────────────────────────────────────────────────────────────────────────── */
-
-/* `size` → the active plot-height tier. Set on the <figure> as `data-size`. */
 .ui-chart-trend[data-size="xs"] {
   --chart-trend-plot-height: var(--chart-trend-plot-height-xs);
 }
@@ -85,8 +72,6 @@
   block-size: var(--chart-trend-plot-height);
   inline-size: 100%;
   min-inline-size: 0;
-  /* Quiet by default (rule #44) — a service opts into a baseline rule with
-   * `--chart-trend-baseline-border: 1px solid hsl(var(--border));`. */
   border-block-end: var(--chart-trend-baseline-border, none);
 }
 
@@ -102,7 +87,7 @@
 .ui-chart-trend-bar {
   inline-size: 100%;
   max-inline-size: var(--chart-trend-bar-max-width);
-  /* Data-driven: the 0..1 ratio arrives as an inline custom property. */
+
   block-size: max(var(--chart-trend-bar-min-height), calc(var(--chart-trend-bar-value, 0) * 100%));
   border-start-start-radius: var(--chart-trend-bar-radius);
   border-start-end-radius: var(--chart-trend-bar-radius);