@kouji-ui/components 0.9.2 → 0.9.3

package/src/file-upload/file-upload.css

@@ -0,0 +1,207 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-file-upload — themed wrapper for the headless KjFileUpload
+   directive family. The directives own state + ARIA; CSS only
+   handles drop-zone / list / row visuals, drag-active highlight,
+   and per-row status icons.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-file-upload {
+    --kj-file-upload-gap:           var(--kj-space-md, 0.75rem);
+    --kj-file-upload-radius:        var(--kj-radius-md, 0.5rem);
+    --kj-file-upload-border:        1px dashed var(--kj-border-default, #d4d4d8);
+    --kj-file-upload-border-active: 2px dashed var(--kj-bg-primary, #2563eb);
+    --kj-file-upload-bg:            var(--kj-bg-field, transparent);
+    --kj-file-upload-bg-active:     color-mix(in oklch, var(--kj-bg-primary) 8%, transparent);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-file-upload-gap);
+    width: 100%;
+  }
+
+  .kj-file-upload[data-disabled] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  /* ── Drop-zone ───────────────────────────────────────────── */
+  .kj-file-upload__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kj-space-sm, 0.5rem);
+    padding: var(--kj-space-xl, 2rem) var(--kj-space-md, 1rem);
+    border: var(--kj-file-upload-border);
+    border-radius: var(--kj-file-upload-radius);
+    background: var(--kj-file-upload-bg);
+    color: var(--kj-fg-default, currentColor);
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 150ms ease-out, border-color 150ms ease-out;
+    min-height: 8rem; /* roomy enough for a thumbnail grid in the gallery example */
+  }
+
+  .kj-file-upload__dropzone:focus-visible {
+    outline: 2px solid var(--kj-bg-primary, #2563eb);
+    outline-offset: 2px;
+  }
+
+  .kj-file-upload__dropzone[data-drag-active] {
+    border: var(--kj-file-upload-border-active);
+    background: var(--kj-file-upload-bg-active);
+  }
+
+  .kj-file-upload__dropzone[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .kj-file-upload__dropzone-hint {
+    font-size: 0.875rem;
+    color: var(--kj-fg-muted, #71717a);
+  }
+
+  /* ── Toolbar (trigger button) ───────────────────────────── */
+  .kj-file-upload__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--kj-space-sm, 0.5rem);
+    align-items: center;
+  }
+
+  /* ── List + rows ────────────────────────────────────────── */
+  .kj-file-upload__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-xs, 0.25rem);
+  }
+
+  .kj-file-upload__list:empty {
+    display: none;
+  }
+
+  .kj-file-upload__row {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm, 0.5rem);
+    padding: var(--kj-space-sm, 0.5rem) var(--kj-space-md, 0.75rem);
+    border: 1px solid var(--kj-border-muted, #e4e4e7);
+    border-radius: var(--kj-file-upload-radius);
+    background: var(--kj-bg-surface, transparent);
+  }
+
+  .kj-file-upload__row[data-status="error"] {
+    border-color: var(--kj-fg-danger, #ef4444);
+    background: color-mix(in oklch, var(--kj-bg-danger, #ef4444) 8%, transparent);
+  }
+
+  .kj-file-upload__row[data-status="done"] {
+    border-color: var(--kj-fg-success, #10b981);
+  }
+
+  .kj-file-upload__row[data-status="cancelled"] {
+    opacity: 0.6;
+  }
+
+  .kj-file-upload__thumb {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--kj-radius-sm, 0.25rem);
+    object-fit: cover;
+    background: var(--kj-bg-surface, #e4e4e7);
+    flex: none;
+  }
+
+  .kj-file-upload__row-body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .kj-file-upload__row-meta {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--kj-space-sm, 0.5rem);
+    font-size: 0.875rem;
+  }
+
+  .kj-file-upload__row-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .kj-file-upload__row-size {
+    color: var(--kj-fg-muted, #71717a);
+    font-variant-numeric: tabular-nums;
+    flex: none;
+  }
+
+  .kj-file-upload__row-status {
+    font-size: 0.75rem;
+    color: var(--kj-fg-muted, #71717a);
+  }
+
+  .kj-file-upload__row[data-status="error"] .kj-file-upload__row-status {
+    color: var(--kj-fg-danger, #ef4444);
+  }
+
+  .kj-file-upload__row[data-status="done"] .kj-file-upload__row-status {
+    color: var(--kj-fg-success, #10b981);
+  }
+
+  .kj-file-upload__row-actions {
+    display: flex;
+    gap: var(--kj-space-xs, 0.25rem);
+    align-items: center;
+    flex: none;
+  }
+
+  /* Status icons — pure CSS, ::before content covers ✓ ✕ … */
+  .kj-file-upload__row-icon {
+    width: 1rem;
+    height: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.875rem;
+    line-height: 1;
+  }
+  .kj-file-upload__row-icon[data-status="done"] { color: var(--kj-fg-success, #10b981); }
+  .kj-file-upload__row-icon[data-status="done"]::before { content: "✓"; }
+  .kj-file-upload__row-icon[data-status="error"] { color: var(--kj-fg-danger, #ef4444); }
+  .kj-file-upload__row-icon[data-status="error"]::before { content: "✕"; }
+  .kj-file-upload__row-icon[data-status="uploading"]::before { content: "…"; }
+
+  .kj-file-upload__remove {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    color: inherit;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--kj-radius-sm, 0.25rem);
+    font-size: 0.875rem;
+    min-width: 44px;
+    min-height: 44px; /* WCAG 2.5.5 touch target floor */
+  }
+  .kj-file-upload__remove:focus-visible {
+    outline: 2px solid var(--kj-bg-primary, #2563eb);
+    outline-offset: 2px;
+  }
+  .kj-file-upload__remove:hover {
+    background: var(--kj-bg-surface, #e4e4e7);
+  }
+
+  /* Reduced motion: collapse drop-zone hover transitions */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-file-upload__dropzone {
+      transition: none;
+    }
+  }
+}

package/src/form/form.css

@@ -0,0 +1,63 @@
+@layer kj.component {
+  .kj-form {
+    /* component knobs — themes/users override any of these */
+    --kj-form-gap:           var(--kj-space-md, 0.75rem);
+    --kj-form-actions-gap:   var(--kj-space-sm, 0.5rem);
+    --kj-form-summary-bg:    var(--kj-bg-surface);
+    --kj-form-summary-fg:    var(--kj-fg-default);
+    --kj-form-summary-accent: var(--kj-fg-danger, #dc2626);
+    --kj-form-summary-radius: var(--kj-radius-box, 0.5rem);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-form-gap);
+  }
+
+  .kj-form[data-submitting] {
+    cursor: progress;
+  }
+
+  /* Actions row — typically at the bottom; flex with gap, right-aligned by default. */
+  .kj-form-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--kj-form-actions-gap);
+    margin-top: var(--kj-space-sm, 0.5rem);
+  }
+
+  .kj-form-actions[data-align="start"] { justify-content: flex-start; }
+  .kj-form-actions[data-align="between"] { justify-content: space-between; }
+  .kj-form-actions[data-align="center"] { justify-content: center; }
+
+  /* Error summary — destructive-tinted alert chrome. Hidden when no errors. */
+  .kj-form-summary {
+    display: none;
+    background: var(--kj-form-summary-bg);
+    color: var(--kj-form-summary-fg);
+    border: var(--kj-border, 1px) solid var(--kj-form-summary-accent);
+    border-left: 4px solid var(--kj-form-summary-accent);
+    border-radius: var(--kj-form-summary-radius);
+    padding: var(--kj-space-md, 0.75rem) var(--kj-space-lg, 1rem);
+    font: var(--kj-text-sm, 0.875rem) / 1.45 var(--kj-font-sans, sans-serif);
+  }
+
+  .kj-form-summary[data-visible] {
+    display: block;
+  }
+
+  .kj-form-summary__title {
+    font-weight: 600;
+    margin: 0 0 var(--kj-space-xs, 0.25rem) 0;
+    color: var(--kj-form-summary-accent);
+  }
+
+  .kj-form-summary__list {
+    margin: 0;
+    padding-left: var(--kj-space-lg, 1rem);
+  }
+
+  .kj-form-summary__list li {
+    margin: 0.125rem 0;
+  }
+}

package/src/input/input.css

@@ -0,0 +1,70 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-input — component-layer tokens + structural CSS
+   Same pattern as button.css: tokens default to shared layer,
+   variants/states retarget tokens, structural CSS reads tokens only.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-input {
+    --kj-input-bg:               var(--kj-bg-field);
+    --kj-input-fg:               var(--kj-fg-default);
+    --kj-input-border-color:     var(--kj-border-default);
+    --kj-input-border-style:     solid;
+    --kj-input-border-width:     var(--kj-border);
+    --kj-input-radius:           var(--kj-radius-field);
+    --kj-input-padding-x:        var(--kj-space-md);
+    --kj-input-padding-y:        var(--kj-space-sm);
+    --kj-input-font:             var(--kj-font-sans);
+    --kj-input-font-size:        var(--kj-text-sm);
+    --kj-input-placeholder-fg:   var(--kj-fg-muted);
+    /* Match button md (36px) so inputs and buttons line up in form rows.
+       Don't set `align-self` — in column-flex parents (form-field stacks),
+       `center` horizontally shifts the host; explicit height alone is what
+       prevents row-flex parents from stretching the input vertically. */
+    --kj-input-height:           var(--kj-ctl-h-md);
+
+    display: inline-flex;
+    width: 100%;
+    height: var(--kj-input-height);
+    background: var(--kj-input-bg);
+    color: var(--kj-input-fg);
+    border: var(--kj-input-border-width) var(--kj-input-border-style) var(--kj-input-border-color);
+    border-radius: var(--kj-input-radius);
+    padding: var(--kj-input-padding-y) var(--kj-input-padding-x);
+    font: var(--kj-input-font-size) / 1.4 var(--kj-input-font);
+    transition: var(--kj-transition);
+  }
+  /* Per-size heights mirror the button scale. */
+  .kj-input[data-size="xs"] { --kj-input-height: var(--kj-ctl-h-xs); --kj-input-font-size: 0.75rem;   --kj-input-padding-x: var(--kj-space-sm); --kj-input-padding-y: 0; }
+  .kj-input[data-size="sm"] { --kj-input-height: var(--kj-ctl-h-sm);    --kj-input-font-size: 0.8125rem; }
+  .kj-input[data-size="lg"] { --kj-input-height: var(--kj-ctl-h-lg); --kj-input-font-size: 1rem; }
+
+  /* Variant: sunken — inputs sit on `--kj-bg-body` so they read distinctly
+     against a card / surface parent. Used on the landing showcase where
+     cards already use `--kj-bg-surface`; mirrors the design's pattern of
+     "input on page bg, card around it on surface". */
+  .kj-input[data-variant="sunken"] {
+    --kj-input-bg: var(--kj-bg-body);
+  }
+  .kj-input::placeholder { color: var(--kj-input-placeholder-fg); }
+
+  .kj-input:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+    --kj-input-border-color: var(--kj-border-focus, var(--kj-bg-primary));
+  }
+  .kj-input[aria-invalid="true"] {
+    --kj-input-border-color: var(--kj-border-danger, var(--kj-fg-danger));
+  }
+  .kj-input[aria-disabled="true"], .kj-input:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .kj-input[type="color"] {
+    inline-size: 44px;
+    block-size: 32px;
+    padding: 2px;
+    cursor: pointer;
+  }
+}

package/src/input-group/input-group.css

@@ -0,0 +1,125 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-input-group — flex wrapper that joins an input with
+   prefix/suffix addons into a single visually-unified field.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-input-group {
+    --kj-input-group-border-color: var(--kj-border-default);
+    --kj-input-group-border-width: var(--kj-border, 1px);
+    --kj-input-group-radius:       var(--kj-radius-field);
+    --kj-input-group-addon-bg:     var(--kj-bg-surface);
+    --kj-input-group-addon-fg:     var(--kj-fg-default);
+    --kj-input-group-addon-font:   var(--kj-font-sans);
+    --kj-input-group-addon-size:   var(--kj-text-sm);
+    --kj-input-group-padding-x:    var(--kj-space-md);
+    --kj-input-group-padding-y:    var(--kj-space-sm);
+
+    display: inline-flex;
+    align-items: stretch;
+    border-radius: var(--kj-input-group-radius);
+  }
+
+  /* ── Vertical layout ──────────────────────────────────────────────────── */
+  .kj-input-group[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* ── Shared border collapse ───────────────────────────────────────────── */
+  /* Every child (input or addon) shares the same border so they appear as
+     one component. We zero out the border-radius on inner edges and use a
+     negative margin to collapse duplicate borders. */
+
+  .kj-input-group [kjInput],
+  .kj-input-group .kj-input,
+  .kj-input-group [kjInputGroupAddon] {
+    border-radius: 0;
+    flex: 0 0 auto;
+  }
+
+  /* Give the native input flex-grow so it fills remaining space. */
+  .kj-input-group [kjInput],
+  .kj-input-group .kj-input {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* Horizontal: collapse left border on non-first children. */
+  .kj-input-group:not([data-orientation='vertical']) > * + [kjInput],
+  .kj-input-group:not([data-orientation='vertical']) > * + [kjInputGroupAddon],
+  .kj-input-group:not([data-orientation='vertical']) > * + kj-input-group-addon,
+  .kj-input-group:not([data-orientation='vertical']) > kj-input-group-addon + * {
+    margin-left: -1px;
+  }
+
+  /* Vertical: collapse top border on non-first children. */
+  .kj-input-group[data-orientation='vertical'] > * + [kjInput],
+  .kj-input-group[data-orientation='vertical'] > * + [kjInputGroupAddon],
+  .kj-input-group[data-orientation='vertical'] > * + kj-input-group-addon,
+  .kj-input-group[data-orientation='vertical'] > kj-input-group-addon + * {
+    margin-top: -1px;
+  }
+
+  /* ── Outer-corner rounding ──────────────────────────────────────────────
+     The first and last child get rounded corners on their outer edges only,
+     giving the group its pill/rounded-box appearance. */
+
+  /* Horizontal — first child */
+  .kj-input-group:not([data-orientation='vertical']) > :first-child,
+  .kj-input-group:not([data-orientation='vertical']) > :first-child [kjInput],
+  .kj-input-group:not([data-orientation='vertical']) > :first-child [kjInputGroupAddon] {
+    border-top-left-radius: var(--kj-input-group-radius);
+    border-bottom-left-radius: var(--kj-input-group-radius);
+  }
+
+  /* Horizontal — last child */
+  .kj-input-group:not([data-orientation='vertical']) > :last-child,
+  .kj-input-group:not([data-orientation='vertical']) > :last-child [kjInput],
+  .kj-input-group:not([data-orientation='vertical']) > :last-child [kjInputGroupAddon] {
+    border-top-right-radius: var(--kj-input-group-radius);
+    border-bottom-right-radius: var(--kj-input-group-radius);
+  }
+
+  /* Vertical — first child */
+  .kj-input-group[data-orientation='vertical'] > :first-child,
+  .kj-input-group[data-orientation='vertical'] > :first-child [kjInput] {
+    border-top-left-radius: var(--kj-input-group-radius);
+    border-top-right-radius: var(--kj-input-group-radius);
+  }
+
+  /* Vertical — last child */
+  .kj-input-group[data-orientation='vertical'] > :last-child,
+  .kj-input-group[data-orientation='vertical'] > :last-child [kjInput] {
+    border-bottom-left-radius: var(--kj-input-group-radius);
+    border-bottom-right-radius: var(--kj-input-group-radius);
+  }
+
+  /* ── Addon skin ─────────────────────────────────────────────────────── */
+  .kj-input-group__addon {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--kj-input-group-padding-y) var(--kj-input-group-padding-x);
+    background: var(--kj-input-group-addon-bg);
+    color: var(--kj-input-group-addon-fg);
+    border: var(--kj-input-group-border-width) solid var(--kj-input-group-border-color);
+    font: var(--kj-input-group-addon-size) / 1.4 var(--kj-input-group-addon-font);
+    transition: var(--kj-transition);
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  /* ── Focus — lift focused child above siblings so its border isn't clipped */
+  .kj-input-group [kjInput]:focus-visible,
+  .kj-input-group .kj-input:focus-visible,
+  .kj-input-group .kj-button:focus-visible {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* ── Disabled state ─────────────────────────────────────────────────── */
+  .kj-input-group[data-disabled] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+}

package/src/input-mask/input-mask.css

@@ -0,0 +1,39 @@
+/* Input mask wrapper — inherits base input visual tokens */
+
+.kj-input-mask {
+  display: contents;
+}
+
+.kj-input-mask__input {
+  /* Inherits the same base-input tokens used by .kj-input. Explicit height
+     contract (matches input.css / button.css) so masked inputs line up with
+     sibling inputs in a form row. */
+  --kj-input-mask-height: 2.25rem;
+  background: var(--kj-bg-field);
+  color: var(--kj-fg-default);
+  border: var(--kj-border, 1px) solid var(--kj-border-default);
+  border-radius: var(--kj-radius-field, 0.375rem);
+  padding: 0 var(--kj-space-md, 0.75rem);
+  font: var(--kj-text-sm, 0.875rem) / 1.4 var(--kj-font-sans, sans-serif);
+  width: 100%;
+  height: var(--kj-input-mask-height);
+  font-variant-numeric: tabular-nums;
+}
+.kj-input-mask__input[data-size="sm"] { --kj-input-mask-height: 2rem;    font-size: 0.8125rem; }
+.kj-input-mask__input[data-size="lg"] { --kj-input-mask-height: 2.75rem; font-size: 1rem; }
+
+.kj-input-mask__input:focus-visible {
+  outline: 2px solid var(--kj-fg-primary);
+  outline-offset: 2px;
+  border-color: var(--kj-fg-primary);
+}
+
+.kj-input-mask__input[aria-invalid='true'] {
+  border-color: var(--kj-fg-danger, #ef4444);
+}
+
+.kj-input-mask__input[data-disabled],
+.kj-input-mask__input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/input-otp/input-otp.css

@@ -0,0 +1,87 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-input-otp — OTP input widget.
+
+   Each cell is a square input (min 44×44 — WCAG 2.5.5).
+   Cells sit in a flex row with a small gap between them.
+   A decorative separator dash can appear between groups.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-input-otp {
+    display: inline-flex;
+  }
+
+  .kj-input-otp__group {
+    --kj-otp-cell-size:         2.75rem; /* 44px — WCAG 2.5.5 touch target */
+    --kj-otp-cell-gap:          0.5rem;
+    --kj-otp-cell-bg:           var(--kj-bg-field);
+    --kj-otp-cell-fg:           var(--kj-fg-default);
+    --kj-otp-cell-border-color: var(--kj-border-default);
+    --kj-otp-cell-border-width: var(--kj-border);
+    --kj-otp-cell-radius:       var(--kj-radius-field);
+    --kj-otp-cell-font:         var(--kj-font-sans);
+    --kj-otp-cell-font-size:    var(--kj-text-base);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-otp-cell-gap);
+  }
+
+  .kj-input-otp__cell {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width:      var(--kj-otp-cell-size);
+    height:     var(--kj-otp-cell-size);
+    min-width:  var(--kj-otp-cell-size);
+    min-height: var(--kj-otp-cell-size);
+    background:    var(--kj-otp-cell-bg);
+    color:         var(--kj-otp-cell-fg);
+    border:        var(--kj-otp-cell-border-width) solid var(--kj-otp-cell-border-color);
+    border-radius: var(--kj-otp-cell-radius);
+    font:          var(--kj-otp-cell-font-size) / 1 var(--kj-otp-cell-font);
+    text-align:    center;
+    caret-color:   var(--kj-fg-primary);
+    transition:    border-color var(--kj-transition), box-shadow var(--kj-transition);
+    /* Remove default browser padding so content stays centred */
+    padding: 0;
+  }
+
+  /* Focus ring via data-focus-visible (KjFocusRing on each cell) */
+  .kj-input-otp__cell[data-focus-visible],
+  .kj-input-otp__cell:focus-visible {
+    outline:        2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+    --kj-otp-cell-border-color: var(--kj-fg-primary);
+  }
+
+  /* Invalid state */
+  .kj-input-otp__group[data-invalid] .kj-input-otp__cell,
+  .kj-input-otp__group[aria-invalid="true"] .kj-input-otp__cell {
+    --kj-otp-cell-border-color: var(--kj-fg-danger);
+  }
+
+  /* Disabled state */
+  .kj-input-otp__group[data-disabled] .kj-input-otp__cell,
+  .kj-input-otp__cell:disabled {
+    opacity:    0.55;
+    cursor:     not-allowed;
+    background: var(--kj-bg-surface);
+  }
+
+  /* Readonly */
+  .kj-input-otp__cell:read-only {
+    background: var(--kj-bg-surface);
+    cursor:     default;
+  }
+
+  /* Separator dash between cell groups */
+  .kj-input-otp__separator {
+    display:     inline-flex;
+    align-items: center;
+    color:       var(--kj-fg-muted);
+    font-size:   var(--kj-text-sm);
+    user-select: none;
+    padding:     0 0.125rem;
+  }
+}

package/src/kbd/kbd.css

@@ -0,0 +1,67 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-kbd — component-layer tokens + structural CSS
+
+   Theme-token-only. The directive sets `data-size` on the host;
+   the rest is a small "raised key" silhouette: 1px border + soft
+   inner shadow + monospace text. No variant — the kbd is tonally
+   neutral (see analysis Open question section).
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-kbd {
+    --kj-kbd-bg:           var(--kj-bg-surface);
+    --kj-kbd-fg:           var(--kj-fg-default);
+    --kj-kbd-border-color: var(--kj-border-default);
+    --kj-kbd-border-width: var(--kj-border, 1px);
+    --kj-kbd-radius:       var(--kj-radius-selector, 0.25rem);
+    --kj-kbd-padding-x:    0.4em;
+    --kj-kbd-padding-y:    0.15em;
+    --kj-kbd-font:         var(--kj-font-mono);
+    --kj-kbd-font-size:    var(--kj-text-sm);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: baseline;
+
+    background: var(--kj-kbd-bg);
+    color: var(--kj-kbd-fg);
+    border: var(--kj-kbd-border-width) solid var(--kj-kbd-border-color);
+    border-radius: var(--kj-kbd-radius);
+    padding: var(--kj-kbd-padding-y) var(--kj-kbd-padding-x);
+
+    font-family: var(--kj-kbd-font);
+    font-size: var(--kj-kbd-font-size);
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  /* Size routing — driven by the directive's [attr.data-size]. */
+  .kj-kbd[data-size='xs'] {
+    /* At xs the border carries most of the visual identity; bump it to a
+       higher-contrast token so it clears 3:1 against base-100/200/300 page
+       backgrounds (analysis Open question 5). */
+    --kj-kbd-border-color: color-mix(in oklab, var(--kj-fg-default) 30%, transparent);
+    --kj-kbd-font-size: var(--kj-text-xs);
+    --kj-kbd-padding-x: 0.3em;
+    --kj-kbd-padding-y: 0.1em;
+  }
+
+  .kj-kbd[data-size='sm'] {
+    --kj-kbd-font-size: var(--kj-text-xs);
+    --kj-kbd-padding-x: 0.35em;
+    --kj-kbd-padding-y: 0.12em;
+  }
+
+  .kj-kbd[data-size='md'] {
+    --kj-kbd-font-size: var(--kj-text-sm);
+    --kj-kbd-padding-x: 0.4em;
+    --kj-kbd-padding-y: 0.15em;
+  }
+
+  .kj-kbd[data-size='lg'] {
+    --kj-kbd-font-size: var(--kj-text-base);
+    --kj-kbd-padding-x: 0.5em;
+    --kj-kbd-padding-y: 0.2em;
+  }
+}