@kouji-ui/components 0.9.1 → 0.9.3

package/src/rich-text/rich-text-editor.css

@@ -0,0 +1,351 @@
+/* ─────────────────────────────────────────────────────────────
+   kj-rich-text-editor — component-layer tokens + structural CSS.
+   Content nodes are rendered by Lexical (ViewEncapsulation.None),
+   so every selector is namespaced under `.kj-rte`.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-rte {
+    /* component knobs — themes/users can override any of these */
+    --kj-rte-bg: var(--kj-bg-field);
+    --kj-rte-fg: var(--kj-fg-default);
+    --kj-rte-muted-fg: var(--kj-fg-muted);
+    --kj-rte-border-color: var(--kj-border-default);
+    --kj-rte-radius: var(--kj-radius-field);
+    --kj-rte-toolbar-bg: var(--kj-bg-surface, var(--kj-bg-body));
+    --kj-rte-btn-size: 2.75rem; /* 44px — WCAG 2.5.5 AAA touch target */
+    --kj-rte-accent: var(--kj-bg-primary);
+    --kj-rte-accent-fg: var(--kj-fg-on-primary);
+    --kj-rte-min-height: 12rem;
+    --kj-rte-pad: var(--kj-space-md);
+    --kj-rte-font: var(--kj-font-sans);
+    --kj-rte-mono: var(--kj-font-mono, ui-monospace, monospace);
+
+    display: flex;
+    flex-direction: column;
+    /* Fluid: fill the container and never exceed it. `min-width: 0` lets the
+       editor shrink below its content's intrinsic width inside flex/grid
+       parents (the docs playground stage, app layouts) so the toolbar scrolls
+       instead of the whole editor overflowing its container. */
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    background: var(--kj-rte-bg);
+    color: var(--kj-rte-fg);
+    border: var(--kj-border) solid var(--kj-rte-border-color);
+    border-radius: var(--kj-rte-radius);
+    font-family: var(--kj-rte-font);
+    overflow: hidden;
+  }
+
+  .kj-rte:focus-within {
+    outline: 2px solid var(--kj-rte-accent);
+    outline-offset: 1px;
+    border-color: var(--kj-border-focus, var(--kj-rte-accent));
+  }
+
+  /* -- toolbar ----------------------------------------------------------- */
+
+  .kj-rte__toolbar {
+    display: flex;
+    /* Single horizontal row that scrolls on overflow rather than wrapping into
+       a tall, chunked block in narrow containers. All buttons stay keyboard-
+       reachable (roving tabindex) and scroll into view on focus. */
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--kj-space-xs, 0.25rem);
+    padding: var(--kj-space-sm);
+    background: var(--kj-rte-toolbar-bg);
+    border-bottom: var(--kj-border) solid var(--kj-rte-border-color);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--kj-rte-border-color) transparent;
+  }
+
+  /* Subtle, unobtrusive scrollbar for the overflowing toolbar (WebKit). */
+  .kj-rte__toolbar::-webkit-scrollbar {
+    height: 0.5rem;
+  }
+
+  .kj-rte__toolbar::-webkit-scrollbar-thumb {
+    background: var(--kj-rte-border-color);
+    border-radius: 0.25rem;
+  }
+
+  .kj-rte__toolbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .kj-rte__group {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-xs, 0.25rem);
+  }
+
+  /* Keep buttons, groups and separators at their natural size so the row
+     scrolls instead of squashing them when space is tight. */
+  .kj-rte__group,
+  .kj-rte__sep,
+  .kj-rte__btn {
+    flex: 0 0 auto;
+  }
+
+  .kj-rte__sep {
+    width: 1px;
+    align-self: stretch;
+    min-height: 1.5rem;
+    margin: 0 var(--kj-space-xs, 0.25rem);
+    background: var(--kj-rte-border-color);
+  }
+
+  .kj-rte__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--kj-rte-btn-size);
+    min-height: var(--kj-rte-btn-size);
+    padding: 0 var(--kj-space-sm);
+    color: var(--kj-rte-fg);
+    background: transparent;
+    border: var(--kj-border) solid transparent;
+    border-radius: var(--kj-radius-field);
+    cursor: pointer;
+    transition: var(--kj-transition, background-color 0.15s ease, color 0.15s ease);
+  }
+
+  .kj-rte__btn:hover:not(:disabled) {
+    background: var(--kj-bg-subtle, var(--kj-bg-body));
+  }
+
+  .kj-rte__btn:focus-visible {
+    outline: 2px solid var(--kj-rte-accent);
+    outline-offset: 2px;
+  }
+
+  .kj-rte__btn--active {
+    background: color-mix(in srgb, var(--kj-rte-accent) 16%, transparent);
+    border-color: color-mix(in srgb, var(--kj-rte-accent) 40%, transparent);
+    color: var(--kj-rte-accent);
+  }
+
+  .kj-rte__btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /* -- feature overlays (link / image editors) -------------------------- */
+
+  .kj-rte__overlay {
+    position: relative;
+    z-index: 1;
+    padding: var(--kj-space-sm) var(--kj-rte-pad);
+    background: var(--kj-rte-toolbar-bg);
+    border-bottom: var(--kj-border) solid var(--kj-rte-border-color);
+    box-shadow: 0 6px 16px rgb(0 0 0 / 12%);
+  }
+
+  .kj-rte__overlay-form {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--kj-space-sm);
+  }
+
+  .kj-rte__overlay-label {
+    font-size: var(--kj-text-sm);
+    color: var(--kj-rte-muted-fg);
+  }
+
+  .kj-rte__overlay-input {
+    flex: 1 1 12rem;
+    min-height: 2.25rem;
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    color: var(--kj-rte-fg);
+    background: var(--kj-bg-field);
+    border: var(--kj-border) solid var(--kj-rte-border-color);
+    border-radius: var(--kj-radius-field);
+    font: var(--kj-text-sm) / 1.4 var(--kj-rte-font);
+  }
+
+  .kj-rte__overlay-input:focus-visible {
+    outline: 2px solid var(--kj-rte-accent);
+    outline-offset: 1px;
+  }
+
+  .kj-rte__overlay-actions {
+    display: flex;
+    gap: var(--kj-space-sm);
+  }
+
+  .kj-rte__overlay-btn {
+    min-height: 2.25rem;
+    padding: 0 var(--kj-space-md);
+    color: var(--kj-rte-fg);
+    background: transparent;
+    border: var(--kj-border) solid var(--kj-rte-border-color);
+    border-radius: var(--kj-radius-field);
+    cursor: pointer;
+  }
+
+  .kj-rte__overlay-btn:hover:not(:disabled) {
+    background: var(--kj-bg-subtle, var(--kj-bg-body));
+  }
+
+  .kj-rte__overlay-btn:focus-visible {
+    outline: 2px solid var(--kj-rte-accent);
+    outline-offset: 2px;
+  }
+
+  .kj-rte__overlay-btn:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /* -- editable surface -------------------------------------------------- */
+
+  .kj-rte__content {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: var(--kj-rte-min-height);
+    padding: var(--kj-rte-pad);
+    outline: none;
+    overflow-y: auto;
+    overflow-wrap: anywhere;
+    line-height: 1.6;
+    color: var(--kj-rte-fg);
+  }
+
+  .kj-rte__content[data-empty][data-placeholder]::before {
+    content: attr(data-placeholder);
+    color: var(--kj-rte-muted-fg);
+    pointer-events: none;
+  }
+
+  /* screen-reader-only live region */
+  .kj-rte__sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* -- Lexical content node typography ---------------------------------- */
+
+  .kj-rte .kj-rte-paragraph {
+    margin: 0 0 var(--kj-space-sm);
+  }
+
+  .kj-rte .kj-rte-h1 {
+    margin: 0 0 var(--kj-space-sm);
+    font-size: var(--kj-text-2xl, 1.75rem);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .kj-rte .kj-rte-h2 {
+    margin: 0 0 var(--kj-space-sm);
+    font-size: var(--kj-text-xl, 1.4rem);
+    font-weight: 700;
+    line-height: 1.3;
+  }
+
+  .kj-rte .kj-rte-h3 {
+    margin: 0 0 var(--kj-space-sm);
+    font-size: var(--kj-text-lg, 1.2rem);
+    font-weight: 600;
+    line-height: 1.35;
+  }
+
+  .kj-rte .kj-rte-ul,
+  .kj-rte .kj-rte-ol {
+    margin: 0 0 var(--kj-space-sm);
+    padding-left: 1.5rem;
+  }
+
+  .kj-rte .kj-rte-ul {
+    list-style: disc;
+  }
+
+  .kj-rte .kj-rte-ol {
+    list-style: decimal;
+  }
+
+  .kj-rte .kj-rte-li {
+    margin-bottom: 0.25rem;
+  }
+
+  .kj-rte .kj-rte-quote {
+    margin: 0 0 var(--kj-space-sm);
+    padding-left: var(--kj-space-md);
+    border-left: 3px solid var(--kj-rte-border-color);
+    color: var(--kj-rte-muted-fg);
+    font-style: italic;
+  }
+
+  .kj-rte .kj-rte-link {
+    color: var(--kj-rte-accent);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .kj-rte .kj-rte-bold {
+    font-weight: 700;
+  }
+
+  .kj-rte .kj-rte-italic {
+    font-style: italic;
+  }
+
+  .kj-rte .kj-rte-underline {
+    text-decoration: underline;
+  }
+
+  .kj-rte .kj-rte-strikethrough {
+    text-decoration: line-through;
+  }
+
+  .kj-rte .kj-rte-code {
+    padding: 0.1em 0.35em;
+    background: var(--kj-bg-subtle, var(--kj-bg-body));
+    border-radius: 0.25rem;
+    font-family: var(--kj-rte-mono);
+    font-size: 0.9em;
+  }
+
+  .kj-rte .kj-rte-code-block {
+    display: block;
+    margin: 0 0 var(--kj-space-sm);
+    padding: var(--kj-space-md);
+    background: var(--kj-bg-subtle, var(--kj-bg-body));
+    border-radius: var(--kj-radius-field);
+    font-family: var(--kj-rte-mono);
+    font-size: 0.9em;
+    white-space: pre-wrap;
+    overflow-x: auto;
+  }
+
+  .kj-rte .kj-rte-image {
+    margin: var(--kj-space-sm) 0;
+  }
+
+  .kj-rte .kj-rte-image img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--kj-radius-field);
+  }
+
+  /* Respect reduced-motion preferences. */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-rte__btn,
+    .kj-rte {
+      transition: none;
+    }
+  }
+}

package/src/select/select.css

@@ -0,0 +1,91 @@
+@layer kj.component {
+  .kj-select { position: relative; display: inline-block; min-width: 12rem; }
+
+  .kj-select-trigger {
+    /* Explicit height contract (matches input.css / button.css) so the
+       select trigger lines up with sibling inputs in a form row. */
+    --kj-select-trigger-height: 2.25rem;
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kj-space-sm);
+    background: var(--kj-bg-field);
+    color: var(--kj-fg-default);
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    padding: 0 var(--kj-space-md);
+    height: var(--kj-select-trigger-height);
+    font: 0.875rem var(--kj-font-sans);
+    cursor: pointer;
+    /* A flex item defaults to min-width:auto, so a long label could push the
+       trigger past its column instead of clipping inside it. */
+    min-width: 0;
+  }
+  /* One line, always. The trigger has a fixed height contract, so a label that
+     wrapped overflowed the button; a long branch/path name now truncates with
+     an ellipsis and the caret keeps its place at the end. */
+  .kj-select-trigger-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+  }
+  .kj-select[data-size="xs"] .kj-select-trigger { --kj-select-trigger-height: 1.75rem; font-size: 0.75rem;   padding-inline: var(--kj-space-sm); gap: var(--kj-space-xs); }
+  .kj-select[data-size="sm"] .kj-select-trigger { --kj-select-trigger-height: 2rem;    font-size: 0.8125rem; }
+  .kj-select[data-size="lg"] .kj-select-trigger { --kj-select-trigger-height: 2.75rem; font-size: 1rem; }
+  .kj-select[data-size="xs"] { min-width: 0; }
+  .kj-select-trigger-caret {
+    font-size: 0.875em;
+    color: var(--kj-fg-muted);
+    flex: none;
+  }
+  .kj-select-trigger:focus-visible { outline: 2px solid var(--kj-fg-primary); outline-offset: 2px; }
+  .kj-select[data-disabled] .kj-select-trigger { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+
+  .kj-select-content {
+    box-sizing: border-box;
+    min-width: 12rem;
+    width: max-content;
+    /* max-content alone let one long option make the whole panel as wide as
+       that option; the cap keeps the listbox near the trigger's width class
+       and inside the viewport, with rows truncating instead. */
+    max-width: min(28rem, calc(100vw - 2rem));
+    background: var(--kj-bg-elevated);
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    box-shadow: var(--kj-shadow-md, 0 8px 24px rgb(0 0 0 / 0.12));
+    padding: 4px;
+    max-height: 16rem;
+    overflow: auto;
+    z-index: var(--kj-overlay-z, 100);
+  }
+  .kj-select-content[hidden] { display: none; }
+
+  .kj-option {
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    border-radius: var(--kj-radius-selector);
+    cursor: pointer;
+    color: var(--kj-fg-default);
+    font: 0.875rem var(--kj-font-sans);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* Hover uses bg-field (sunken slot), not bg-surface. In themes where
+     elevated == surface (light/corporate, both white) a bg-surface hover would
+     be invisible on the bg-elevated panel. */
+  .kj-option:hover { background: var(--kj-bg-field); }
+  /* Selected option — tinted primary mirrors tree-select / cascade-select so
+     the listbox family looks consistent across themes. */
+  .kj-option[aria-selected="true"] {
+    background: color-mix(in oklab, var(--kj-bg-primary) 12%, transparent);
+    color: var(--kj-fg-primary);
+    font-weight: 600;
+  }
+  .kj-option[aria-selected="true"]:hover {
+    background: color-mix(in oklab, var(--kj-bg-primary) 18%, transparent);
+  }
+}

package/src/sheet/sheet.css

@@ -0,0 +1,121 @@
+@layer kj.component {
+  .kj-sheet {
+    --kj-sheet-bg: var(--kj-bg-elevated);
+    --kj-sheet-fg: var(--kj-fg-default);
+    --kj-sheet-shadow: var(--kj-shadow-lg);
+    --kj-sheet-radius: var(--kj-radius-box);
+    --kj-sheet-max-height: 92vh;
+    --kj-sheet-grip-color: var(--kj-border-strong);
+
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    max-height: var(--kj-sheet-max-height);
+    margin-inline: auto;
+    background: var(--kj-sheet-bg);
+    color: var(--kj-sheet-fg);
+    box-shadow: var(--kj-sheet-shadow);
+    border-top-left-radius: var(--kj-sheet-radius);
+    border-top-right-radius: var(--kj-sheet-radius);
+    overflow: hidden;
+    z-index: var(--kj-overlay-z, 1000);
+    /* Live drag follows the pointer; released via --kj-sheet-drag-offset. */
+    transform: translate3d(0, var(--kj-sheet-drag-offset, 0), 0);
+    /* Respect the iOS home-indicator / gesture inset. */
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+
+  /* Constrain width on large viewports so it reads as a sheet, not a bar. */
+  @media (min-width: 40rem) {
+    .kj-sheet {
+      max-width: 32rem;
+      border-bottom-left-radius: var(--kj-sheet-radius);
+      border-bottom-right-radius: var(--kj-sheet-radius);
+      bottom: var(--kj-space-lg);
+    }
+  }
+
+  .kj-sheet[data-kj-detent="half"] { height: 50vh; }
+  .kj-sheet[data-kj-detent="full"] { height: var(--kj-sheet-max-height); }
+
+  /* Grab handle — a ≥44px touch target with a small visible grip pill. */
+  .kj-sheet__handle {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    min-height: 44px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: grab;
+    flex-shrink: 0;
+    touch-action: none;
+  }
+  .kj-sheet[data-kj-dragging] .kj-sheet__handle { cursor: grabbing; }
+
+  .kj-sheet__grip {
+    display: block;
+    width: 2.25rem;
+    height: 0.3125rem;
+    border-radius: 999px;
+    background: var(--kj-sheet-grip-color);
+  }
+
+  .kj-sheet__handle:focus-visible {
+    outline: var(--kj-focus-ring-width, 2px) solid var(--kj-focus-ring-color, var(--kj-primary));
+    outline-offset: -4px;
+    border-radius: var(--kj-radius-sm);
+  }
+
+  .kj-sheet__content {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0 var(--kj-space-xl) var(--kj-space-xl);
+    color: var(--kj-sheet-fg);
+    font: 0.9375rem / 1.5 var(--kj-font-sans);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-sheet:not([data-kj-dragging]) {
+      transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
+    }
+    .kj-sheet[data-state="open"]   { transform: translate3d(0, var(--kj-sheet-drag-offset, 0), 0); }
+    .kj-sheet[data-state="closed"] { transform: translate3d(0, 100%, 0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-sheet:not([data-kj-dragging]) {
+      transition: opacity 120ms linear;
+    }
+    .kj-sheet[data-state="open"]   { opacity: 1; }
+    .kj-sheet[data-state="closed"] { opacity: 0; }
+  }
+
+  /* Header / title / footer helpers for sheet bodies (parallel to drawer). */
+  .kj-sheet__title {
+    display: block;
+    margin: 0 0 var(--kj-space-xs);
+    font: 600 1.125rem / 1.3 var(--kj-font-sans);
+    color: var(--kj-fg-default);
+  }
+  .kj-sheet__description {
+    display: block;
+    margin: 0 0 var(--kj-space-md);
+    color: var(--kj-fg-muted);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+  }
+  .kj-sheet__footer {
+    display: flex;
+    gap: var(--kj-space-sm);
+    padding-top: var(--kj-space-md);
+  }
+  .kj-sheet__footer[data-align="end"] { justify-content: flex-end; }
+}

package/src/skeleton/skeleton.css

@@ -0,0 +1,111 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-skeleton — component-layer tokens + structural CSS
+   The directive lands `aria-hidden="true"` and reflects
+   `data-shape` / `data-animation` on the host. CSS owns the
+   shimmer / pulse keyframes and the reduced-motion override —
+   per `skeleton.md`, the directive deliberately does *not*
+   detect `prefers-reduced-motion` itself; theme CSS does, here.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-skeleton {
+    /* component knobs — themes/users can override any of these */
+    --kj-skeleton-bg:           var(--kj-bg-elevated, color-mix(in oklab, var(--kj-fg-default, #000) 12%, transparent));
+    --kj-skeleton-highlight:    var(--kj-bg-surface, color-mix(in oklab, var(--kj-fg-default, #000) 5%, transparent));
+    --kj-skeleton-radius:       var(--kj-radius-field, 0.375rem);
+    --kj-skeleton-line-height:  1em;
+    --kj-skeleton-line-radius:  0.25rem;
+    --kj-skeleton-shimmer-duration: 1.4s;
+    --kj-skeleton-pulse-duration:   1.6s;
+
+    display: block;
+    background-color: var(--kj-skeleton-bg);
+    border-radius: var(--kj-skeleton-radius);
+    /* Sized by consumer-supplied width/height. Default to a sensible
+       rectangle so a bare <kj-skeleton/> still paints something. */
+    inline-size: 100%;
+    block-size: 1rem;
+    overflow: hidden;
+    position: relative;
+  }
+
+  /* ── Shape routing ──────────────────────────────────────────────────── */
+
+  .kj-skeleton[data-shape="circle"] {
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+  }
+
+  .kj-skeleton[data-shape="text"],
+  .kj-skeleton.kj-skeleton--line {
+    block-size: var(--kj-skeleton-line-height);
+    border-radius: var(--kj-skeleton-line-radius);
+  }
+
+  /* The text-block host is a layout container — it doesn't paint itself,
+     it stacks N child .kj-skeleton--line elements. Drop the default
+     paint chrome so only the lines are visible. */
+  .kj-skeleton[data-shape="text-block"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-sm, 0.5rem);
+    background-color: transparent;
+    border-radius: 0;
+    inline-size: 100%;
+    block-size: auto;
+    overflow: visible;
+  }
+
+  /* ── Animation routing ──────────────────────────────────────────────── */
+
+  /* Shimmer: a moving highlight gradient sweeps left-to-right. */
+  .kj-skeleton[data-animation="shimmer"]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--kj-skeleton-highlight) 50%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: kj-skeleton-shimmer var(--kj-skeleton-shimmer-duration) linear infinite;
+  }
+
+  /* The text-block host doesn't paint, so its ::after sweep would be a
+     ghost. Suppress it; each child line runs its own shimmer. */
+  .kj-skeleton[data-shape="text-block"][data-animation="shimmer"]::after {
+    content: none;
+  }
+
+  .kj-skeleton[data-animation="pulse"] {
+    animation: kj-skeleton-pulse var(--kj-skeleton-pulse-duration) ease-in-out infinite;
+  }
+
+  .kj-skeleton[data-animation="none"]::after {
+    content: none;
+  }
+
+  @keyframes kj-skeleton-shimmer {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(100%);  }
+  }
+
+  @keyframes kj-skeleton-pulse {
+    0%, 100% { opacity: 1;   }
+    50%      { opacity: 0.55; }
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────── */
+  /* Per skeleton.md: when the OS sets the preference, theme CSS pins the
+     animation off regardless of `kjSkeletonAnimation`. The directive
+     deliberately does not detect the media query — this rule is the
+     enforcement layer. */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-skeleton,
+    .kj-skeleton::after {
+      animation: none !important;
+    }
+  }
+}