@kouji-ui/components 0.9.1 → 0.9.3

package/src/skip-link/skip-link.css

@@ -0,0 +1,58 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-skip-link — WCAG 2.4.1 "skip to content" link.
+   Visually hidden (parked above the viewport, NOT display:none so
+   it stays in the tab order) until focused, then slides on-screen
+   with a solid high-contrast surface. Component tokens default to
+   shared-layer values from @kouji-ui/themes.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-skip-link {
+    /* component knobs — themes / users can override any of these */
+    --kj-skip-link-bg:     var(--kj-bg-primary);
+    --kj-skip-link-fg:     var(--kj-fg-on-primary);
+    --kj-skip-link-radius: var(--kj-radius-field, 0.25rem);
+    --kj-skip-link-shadow: var(--kj-shadow-lg);
+    --kj-skip-link-offset: var(--kj-space-sm, 0.5rem);
+    --kj-skip-link-z:      1000;
+
+    position: fixed;
+    /* Parked just above the viewport — off-screen but focusable. */
+    top: 0;
+    left: var(--kj-skip-link-offset);
+    z-index: var(--kj-skip-link-z);
+    transform: translateY(-150%);
+    transition: transform var(--kj-transition, 150ms ease);
+
+    display: inline-block;
+    padding: 0.625rem 1rem;
+    min-height: 44px; /* WCAG 2.5.5 comfortable target once revealed */
+    box-sizing: border-box;
+
+    background: var(--kj-skip-link-bg);
+    color: var(--kj-skip-link-fg);
+    border-radius: var(--kj-skip-link-radius);
+    box-shadow: var(--kj-skip-link-shadow);
+    font: inherit;
+    font-weight: 600;
+    line-height: 1.4;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  /* Revealed on focus (:focus covers browsers/AT that don't match
+     :focus-visible for programmatic focus, e.g. skip-to-here). */
+  .kj-skip-link:focus,
+  .kj-skip-link:focus-visible {
+    transform: translateY(var(--kj-skip-link-offset));
+    outline: 3px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+  }
+
+  /* Honour reduced-motion: reveal instantly rather than sliding. */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-skip-link {
+      transition: none;
+    }
+  }
+}

package/src/slider/slider.css

@@ -0,0 +1,172 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-slider — wrapper around the KjSlider directive family.
+
+   The directive layer is headless. This wrapper translates the
+   directive context into pixels: track height/width, thumb size,
+   filled-portion offsets via the --kj-slider-start / --kj-slider-end
+   custom properties published by [kjSliderRange].
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-slider {
+    --kj-slider-track-thickness:    0.375rem;        /* 6px */
+    --kj-slider-track-bg:           var(--kj-bg-field);
+    --kj-slider-fill-bg:            var(--kj-bg-primary);
+    --kj-slider-thumb-size:         1.25rem;         /* 20px visual */
+    --kj-slider-thumb-hit:          2.75rem;         /* 44px touch — WCAG 2.5.5 */
+    --kj-slider-thumb-bg:           var(--kj-bg-primary);
+    --kj-slider-thumb-fg:           var(--kj-fg-on-primary);
+    --kj-slider-thumb-border:       2px solid var(--kj-bg-body);
+    --kj-slider-tick-size:          0.25rem;         /* 4px */
+    --kj-slider-tick-bg:            var(--kj-fg-default);
+    --kj-slider-radius:             999px;
+    --kj-slider-vertical-length:    12rem;            /* 192px default */
+
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .kj-slider[data-orientation="horizontal"] {
+    width: 100%;
+    min-height: var(--kj-slider-thumb-hit);
+    padding: calc((var(--kj-slider-thumb-hit) - var(--kj-slider-track-thickness)) / 2) 0;
+  }
+
+  .kj-slider[data-orientation="vertical"] {
+    flex-direction: column;
+    height: var(--kj-slider-vertical-length);
+    min-width: var(--kj-slider-thumb-hit);
+    padding: 0 calc((var(--kj-slider-thumb-hit) - var(--kj-slider-track-thickness)) / 2);
+  }
+
+  .kj-slider[data-disabled] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+
+  /* ── Track ───────────────────────────────────────────────── */
+  .kj-slider__track {
+    position: relative;
+    flex: 1 1 auto;
+    background: var(--kj-slider-track-bg);
+    border-radius: var(--kj-slider-radius);
+    cursor: pointer;
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__track {
+    height: var(--kj-slider-track-thickness);
+    width: 100%;
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__track {
+    width: var(--kj-slider-track-thickness);
+    height: 100%;
+  }
+
+  /* ── Range fill ──────────────────────────────────────────── */
+  .kj-slider__range {
+    position: absolute;
+    background: var(--kj-slider-fill-bg);
+    border-radius: inherit;
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__range {
+    top: 0;
+    bottom: 0;
+    left: calc(var(--kj-slider-start, 0) * 100%);
+    right: calc((1 - var(--kj-slider-end, 0)) * 100%);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__range {
+    left: 0;
+    right: 0;
+    bottom: calc(var(--kj-slider-start, 0) * 100%);
+    top: calc((1 - var(--kj-slider-end, 0)) * 100%);
+  }
+
+  /* ── Thumb ───────────────────────────────────────────────── */
+  .kj-slider__thumb {
+    position: absolute;
+    width: var(--kj-slider-thumb-size);
+    height: var(--kj-slider-thumb-size);
+    background: var(--kj-slider-thumb-bg);
+    color: var(--kj-slider-thumb-fg);
+    border: var(--kj-slider-thumb-border);
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+    cursor: grab;
+    padding: 0;
+    transition: transform var(--kj-transition, 120ms ease), box-shadow var(--kj-transition, 120ms ease);
+  }
+
+  .kj-slider__thumb:hover { transform: scale(1.05); }
+  .kj-slider__thumb[data-dragging] { cursor: grabbing; transform: scale(1.1); }
+
+  .kj-slider__thumb[data-focus-visible] {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 3px;
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__thumb {
+    top: 50%;
+    left: calc(var(--kj-slider-thumb-fraction, 0) * 100%);
+    transform: translate(-50%, -50%);
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__thumb:hover {
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__thumb[data-dragging] {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__thumb {
+    left: 50%;
+    bottom: calc(var(--kj-slider-thumb-fraction, 0) * 100%);
+    transform: translate(-50%, 50%);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__thumb:hover {
+    transform: translate(-50%, 50%) scale(1.05);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__thumb[data-dragging] {
+    transform: translate(-50%, 50%) scale(1.1);
+  }
+
+  /* ── Tick marks (decorative) ─────────────────────────────── */
+  .kj-slider__ticks {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .kj-slider__tick {
+    position: absolute;
+    width: var(--kj-slider-tick-size);
+    height: var(--kj-slider-tick-size);
+    background: var(--kj-slider-tick-bg);
+    opacity: 0.5;
+    border-radius: 50%;
+  }
+
+  .kj-slider[data-orientation="horizontal"] .kj-slider__tick {
+    top: 50%;
+    left: calc(var(--kj-slider-tick-fraction, 0) * 100%);
+    transform: translate(-50%, -50%);
+  }
+
+  .kj-slider[data-orientation="vertical"] .kj-slider__tick {
+    left: 50%;
+    bottom: calc(var(--kj-slider-tick-fraction, 0) * 100%);
+    transform: translate(-50%, 50%);
+  }
+
+  /* ── Reduced motion ──────────────────────────────────────── */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-slider__thumb { transition: none; }
+  }
+}

package/src/speed-dial/speed-dial.css

@@ -0,0 +1,137 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-speed-dial — viewport-anchored FAB + fan-out action cluster
+   The root component is a positioning shell (fixed when
+   data-position="*-*"). The trigger and actions are buttons that
+   theme through .kj-button — overrides target the kj-button-*
+   tokens so theme presets still apply.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-speed-dial {
+    --kj-speed-dial-gap:           var(--kj-space-md);
+    --kj-speed-dial-edge:          var(--kj-space-2xl);
+    --kj-speed-dial-trigger-size:  3.5rem;
+    --kj-speed-dial-action-size:   2.75rem;
+    --kj-speed-dial-shadow:        0 6px 16px rgb(0 0 0 / 0.18);
+    --kj-speed-dial-stagger:       30ms;
+    --kj-speed-dial-duration:      180ms;
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--kj-speed-dial-gap);
+    z-index: 100;
+  }
+
+  .kj-speed-dial[data-direction='up']    { flex-direction: column-reverse; }
+  .kj-speed-dial[data-direction='down']  { flex-direction: column; }
+  .kj-speed-dial[data-direction='left']  { flex-direction: row-reverse; }
+  .kj-speed-dial[data-direction='right'] { flex-direction: row; }
+
+  .kj-speed-dial[data-position='bottom-right'] {
+    position: fixed;
+    right:  var(--kj-speed-dial-edge);
+    bottom: var(--kj-speed-dial-edge);
+  }
+  .kj-speed-dial[data-position='bottom-left'] {
+    position: fixed;
+    left:   var(--kj-speed-dial-edge);
+    bottom: var(--kj-speed-dial-edge);
+  }
+  .kj-speed-dial[data-position='top-right'] {
+    position: fixed;
+    right: var(--kj-speed-dial-edge);
+    top:   var(--kj-speed-dial-edge);
+  }
+  .kj-speed-dial[data-position='top-left'] {
+    position: fixed;
+    left: var(--kj-speed-dial-edge);
+    top:  var(--kj-speed-dial-edge);
+  }
+
+  .kj-speed-dial-trigger {
+    --kj-button-radius:    9999px;
+    --kj-button-padding-x: 0;
+    --kj-button-padding-y: 0;
+    --kj-button-shadow:    var(--kj-speed-dial-shadow);
+
+    width:  var(--kj-speed-dial-trigger-size);
+    height: var(--kj-speed-dial-trigger-size);
+    min-width: var(--kj-speed-dial-trigger-size);
+    flex: 0 0 auto;
+  }
+
+  .kj-speed-dial-trigger[data-state='open'] > * {
+    transform: rotate(45deg);
+    transition: transform var(--kj-speed-dial-duration) ease;
+  }
+  .kj-speed-dial-trigger > * {
+    display: inline-flex;
+    transition: transform var(--kj-speed-dial-duration) ease;
+  }
+
+  .kj-speed-dial-actions {
+    display: inline-flex;
+    gap: var(--kj-speed-dial-gap);
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--kj-speed-dial-duration) ease;
+  }
+  .kj-speed-dial-actions[data-direction='up']    { flex-direction: column-reverse; }
+  .kj-speed-dial-actions[data-direction='down']  { flex-direction: column; }
+  .kj-speed-dial-actions[data-direction='left']  { flex-direction: row-reverse; }
+  .kj-speed-dial-actions[data-direction='right'] { flex-direction: row; }
+
+  .kj-speed-dial-actions[aria-hidden='true'] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .kj-speed-dial-actions[data-expanded] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .kj-speed-dial-actions[data-direction='up']    > * { transform: translateY(8px); }
+  .kj-speed-dial-actions[data-direction='down']  > * { transform: translateY(-8px); }
+  .kj-speed-dial-actions[data-direction='left']  > * { transform: translateX(8px); }
+  .kj-speed-dial-actions[data-direction='right'] > * { transform: translateX(-8px); }
+  .kj-speed-dial-actions[data-expanded] > * {
+    transform: translate3d(0, 0, 0);
+    transition: transform var(--kj-speed-dial-duration) ease,
+                opacity   var(--kj-speed-dial-duration) ease;
+    transition-delay: calc(var(--kj-speed-dial-stagger) * var(--kj-speed-dial-i, 0));
+  }
+  .kj-speed-dial-actions > *:nth-child(1) { --kj-speed-dial-i: 0; }
+  .kj-speed-dial-actions > *:nth-child(2) { --kj-speed-dial-i: 1; }
+  .kj-speed-dial-actions > *:nth-child(3) { --kj-speed-dial-i: 2; }
+  .kj-speed-dial-actions > *:nth-child(4) { --kj-speed-dial-i: 3; }
+  .kj-speed-dial-actions > *:nth-child(5) { --kj-speed-dial-i: 4; }
+  .kj-speed-dial-actions > *:nth-child(6) { --kj-speed-dial-i: 5; }
+
+  .kj-speed-dial-action {
+    --kj-button-radius:    9999px;
+    --kj-button-padding-x: 0;
+    --kj-button-padding-y: 0;
+    --kj-button-shadow:    var(--kj-speed-dial-shadow);
+
+    width:  var(--kj-speed-dial-action-size);
+    height: var(--kj-speed-dial-action-size);
+    min-width: var(--kj-speed-dial-action-size);
+    flex: 0 0 auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-speed-dial-trigger > *,
+    .kj-speed-dial-actions,
+    .kj-speed-dial-actions > * {
+      transition: none;
+    }
+    .kj-speed-dial-actions > * {
+      transform: none;
+    }
+  }
+}

package/src/spinner/spinner.css

@@ -0,0 +1,161 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-spinner — component-layer tokens + structural CSS
+
+   The directive owns role/label/data-attribute reflection. The CSS
+   below renders the visual glyph via the inner `.kj-spinner__glyph`
+   element (kept `aria-hidden="true"` in the template so AT only sees
+   the host's `role="status"` + `aria-label`). Variant + size + animation
+   routing all happens through `data-*` attributes on the wrapper host.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-spinner {
+    --kj-spinner-size:     1.25rem; /* md default */
+    --kj-spinner-color:    currentColor; /* neutral resolves to currentColor */
+    --kj-spinner-track:    color-mix(in srgb, currentColor 20%, transparent);
+    --kj-spinner-duration: 0.7s;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--kj-spinner-size);
+    block-size: var(--kj-spinner-size);
+    color: var(--kj-spinner-color);
+    /* Keep the glyph centred without offering a hit-target — spinners are
+       not interactive. */
+    pointer-events: none;
+  }
+
+  /* Sizes — circular shapes use --kj-spinner-size for both axes. Linear
+     shapes (dots / bars) override inline-size on the host below. */
+  .kj-spinner[data-size="xs"] { --kj-spinner-size: 0.75rem; }
+  .kj-spinner[data-size="sm"] { --kj-spinner-size: 1rem; }
+  .kj-spinner[data-size="md"] { --kj-spinner-size: 1.25rem; }
+  .kj-spinner[data-size="lg"] { --kj-spinner-size: 1.75rem; }
+
+  /* Variant routing — neutral inherits currentColor (matches the
+     daisyUI / lucide convention so a spinner inside a primary button
+     picks up the button's text colour). */
+  .kj-spinner[data-variant="neutral"]   { --kj-spinner-color: currentColor; }
+  .kj-spinner[data-variant="primary"]   { --kj-spinner-color: var(--kj-fg-primary); }
+  .kj-spinner[data-variant="secondary"] { --kj-spinner-color: var(--kj-fg-default); }
+  .kj-spinner[data-variant="success"]   { --kj-spinner-color: var(--kj-fg-success, #16a34a); }
+  .kj-spinner[data-variant="warning"]   { --kj-spinner-color: var(--kj-fg-warning, #d97706); }
+  .kj-spinner[data-variant="error"]     { --kj-spinner-color: var(--kj-fg-danger, #dc2626); }
+  .kj-spinner[data-variant="info"]      { --kj-spinner-color: var(--kj-fg-info, #2563eb); }
+
+  /* Glyph host — themes can repaint the inner element per data-animation. */
+  .kj-spinner__glyph {
+    display: inline-block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  /* ── Animation: spin (default) — rotating arc ─────────────────────── */
+  .kj-spinner[data-animation="spin"] .kj-spinner__glyph {
+    border: 2px solid var(--kj-spinner-track);
+    border-block-start-color: var(--kj-spinner-color);
+    border-radius: 50%;
+    animation: kj-spinner-spin var(--kj-spinner-duration) linear infinite;
+  }
+
+  /* ── Animation: pulse — single fading circle ──────────────────────── */
+  .kj-spinner[data-animation="pulse"] .kj-spinner__glyph {
+    background: var(--kj-spinner-color);
+    border-radius: 50%;
+    animation: kj-spinner-pulse calc(var(--kj-spinner-duration) * 2) ease-in-out infinite;
+  }
+
+  /* ── Animation: dots — three pulsing dots side by side ────────────── */
+  .kj-spinner[data-animation="dots"] {
+    /* Linear shape — width is auto, height is the size token. */
+    inline-size: auto;
+  }
+  .kj-spinner[data-animation="dots"] .kj-spinner__glyph {
+    display: inline-flex;
+    gap: calc(var(--kj-spinner-size) * 0.25);
+    inline-size: auto;
+    block-size: 100%;
+  }
+  .kj-spinner[data-animation="dots"] .kj-spinner__glyph::before,
+  .kj-spinner[data-animation="dots"] .kj-spinner__glyph::after,
+  .kj-spinner[data-animation="dots"] .kj-spinner__glyph {
+    /* Each dot via pseudo + the glyph itself acts as a flex container. */
+  }
+  .kj-spinner[data-animation="dots"] .kj-spinner__glyph::before,
+  .kj-spinner[data-animation="dots"] .kj-spinner__glyph::after {
+    content: "";
+    inline-size: calc(var(--kj-spinner-size) * 0.3);
+    block-size: calc(var(--kj-spinner-size) * 0.3);
+    background: var(--kj-spinner-color);
+    border-radius: 50%;
+    animation: kj-spinner-dots calc(var(--kj-spinner-duration) * 2) ease-in-out infinite;
+  }
+  .kj-spinner[data-animation="dots"] .kj-spinner__glyph {
+    background: transparent;
+  }
+  /* Middle dot rendered via box-shadow on ::before for a 3-dot row without
+     extra DOM. The two pseudos animate offset; the middle dot is the glyph
+     element's own background dot. */
+  .kj-spinner[data-animation="dots"] .kj-spinner__glyph::after {
+    animation-delay: calc(var(--kj-spinner-duration) * 0.4);
+  }
+
+  /* ── Animation: bars — vertical bars rising/falling ───────────────── */
+  .kj-spinner[data-animation="bars"] {
+    inline-size: auto;
+  }
+  .kj-spinner[data-animation="bars"] .kj-spinner__glyph {
+    display: inline-flex;
+    align-items: stretch;
+    gap: calc(var(--kj-spinner-size) * 0.15);
+    inline-size: auto;
+    block-size: 100%;
+  }
+  .kj-spinner[data-animation="bars"] .kj-spinner__glyph::before,
+  .kj-spinner[data-animation="bars"] .kj-spinner__glyph::after {
+    content: "";
+    inline-size: calc(var(--kj-spinner-size) * 0.2);
+    background: var(--kj-spinner-color);
+    border-radius: calc(var(--kj-spinner-size) * 0.05);
+    animation: kj-spinner-bars calc(var(--kj-spinner-duration) * 1.6) ease-in-out infinite;
+    transform-origin: center;
+  }
+  .kj-spinner[data-animation="bars"] .kj-spinner__glyph::after {
+    animation-delay: calc(var(--kj-spinner-duration) * 0.4);
+  }
+
+  /* ── Reduced motion — directive sets `data-reduced-motion="true"` ──── */
+  /* WCAG 2.3.3 (AAA): swap continuous rotation for a slow opacity pulse. */
+  .kj-spinner[data-reduced-motion="true"] .kj-spinner__glyph,
+  .kj-spinner[data-reduced-motion="true"] .kj-spinner__glyph::before,
+  .kj-spinner[data-reduced-motion="true"] .kj-spinner__glyph::after {
+    animation: kj-spinner-reduced-motion 1.6s ease-in-out infinite !important;
+  }
+}
+
+/* Keyframes live outside the cascade layer so consumers can't accidentally
+   defeat them with a higher-priority unlayered rule. */
+@keyframes kj-spinner-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes kj-spinner-pulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.85); }
+  50%      { opacity: 1;    transform: scale(1); }
+}
+
+@keyframes kj-spinner-dots {
+  0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
+  40%           { transform: scale(1);   opacity: 1; }
+}
+
+@keyframes kj-spinner-bars {
+  0%, 40%, 100% { transform: scaleY(0.4); }
+  20%           { transform: scaleY(1); }
+}
+
+@keyframes kj-spinner-reduced-motion {
+  0%, 100% { opacity: 0.45; }
+  50%      { opacity: 1; }
+}

package/src/stepper/stepper.css

@@ -0,0 +1,147 @@
+@layer kj.component {
+  .kj-stepper {
+    --kj-stepper-gap:           var(--kj-space-md);
+    --kj-stepper-indicator-size: 2rem;
+    --kj-stepper-bg:            var(--kj-bg-body);
+    --kj-stepper-border:        var(--kj-border-default);
+    --kj-stepper-active:        var(--kj-bg-primary);
+    --kj-stepper-active-fg:     var(--kj-fg-on-primary);
+    --kj-stepper-completed:     var(--kj-bg-success);
+    --kj-stepper-error:         var(--kj-bg-danger);
+    --kj-stepper-muted:         var(--kj-fg-muted);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-lg);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .kj-stepper[data-orientation="horizontal"] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .kj-step {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-sm);
+    flex: 1 1 auto;
+  }
+
+  .kj-stepper[data-orientation="vertical"] .kj-step {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .kj-step__label {
+    appearance: none;
+    background: none;
+    border: 0;
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    color: var(--kj-stepper-muted);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: var(--kj-radius-field);
+    transition: var(--kj-transition);
+    text-align: left;
+  }
+
+  .kj-step__label::before {
+    content: counter(kj-step-counter);
+    counter-increment: kj-step-counter;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--kj-stepper-indicator-size);
+    height: var(--kj-stepper-indicator-size);
+    border-radius: 50%;
+    border: var(--kj-border) solid var(--kj-stepper-border);
+    background: var(--kj-stepper-bg);
+    color: var(--kj-stepper-muted);
+    font-size: 0.75rem;
+    flex-shrink: 0;
+  }
+
+  .kj-stepper { counter-reset: kj-step-counter; }
+
+  .kj-step__label:hover { color: var(--kj-fg-default); }
+  .kj-step__label:focus-visible { outline: 2px solid var(--kj-stepper-active); outline-offset: 2px; }
+
+  .kj-step[data-active="true"] > .kj-step__label,
+  .kj-step[data-active="true"] .kj-step__label {
+    color: var(--kj-fg-default);
+  }
+  .kj-step[data-active="true"] > .kj-step__label::before,
+  .kj-step[data-active="true"] .kj-step__label::before {
+    background: var(--kj-stepper-active);
+    border-color: var(--kj-stepper-active);
+    color: var(--kj-stepper-active-fg);
+  }
+
+  .kj-step[data-completed="true"] > .kj-step__label::before,
+  .kj-step[data-completed="true"] .kj-step__label::before {
+    background: var(--kj-stepper-completed);
+    border-color: var(--kj-stepper-completed);
+    color: var(--kj-fg-on-success, #fff);
+    content: "\2713"; /* check mark */
+  }
+
+  .kj-step[data-error="true"] > .kj-step__label::before,
+  .kj-step[data-error="true"] .kj-step__label::before {
+    background: var(--kj-stepper-error);
+    border-color: var(--kj-stepper-error);
+    color: var(--kj-fg-on-danger, #fff);
+    content: "!";
+  }
+
+  .kj-step[data-disabled="true"] > .kj-step__label,
+  .kj-step[data-disabled="true"] .kj-step__label,
+  .kj-step__label[aria-disabled="true"],
+  .kj-step__label[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .kj-step__content {
+    display: block;
+    color: var(--kj-fg-default);
+    font: 0.875rem / 1.5 var(--kj-font-sans);
+    padding: var(--kj-space-md);
+    background: var(--kj-bg-body);
+    border: var(--kj-border) solid var(--kj-stepper-border);
+    border-radius: var(--kj-radius-box);
+  }
+  .kj-step__content[hidden] { display: none; }
+
+  .kj-stepper-action {
+    appearance: none;
+    border: var(--kj-border) solid var(--kj-stepper-border);
+    background: var(--kj-bg-body);
+    color: var(--kj-fg-default);
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    border-radius: var(--kj-radius-field);
+    font: 0.875rem / 1 var(--kj-font-sans);
+    cursor: pointer;
+    transition: var(--kj-transition);
+  }
+  .kj-stepper-action:hover:not([disabled]):not([aria-disabled="true"]) {
+    border-color: var(--kj-stepper-active);
+    color: var(--kj-stepper-active);
+  }
+  .kj-stepper-action:focus-visible { outline: 2px solid var(--kj-stepper-active); outline-offset: 2px; }
+  .kj-stepper-action[disabled],
+  .kj-stepper-action[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+
+  .kj-stepper-action--next {
+    background: var(--kj-stepper-active);
+    color: var(--kj-stepper-active-fg);
+    border-color: var(--kj-stepper-active);
+  }
+}