@kouji-ui/components 0.9.2 → 0.9.4

package/src/tabs/tabs.css

@@ -0,0 +1,162 @@
+@layer kj.component {
+  /* Two tab shapes, because that is what real products use:
+     - `default` — an UNDERLINE strip. The tabs sit flat on the surface and the
+       active one is marked by a short bar on the strip's edge. This is the
+       panel/section tab: it divides a surface that is already there.
+     - `pills` — a recessed TRAY holding chips. The active tab lifts to the
+       body colour with a hairline ring. This is the view-mode switch: a
+       control that floats on top of a surface.
+     Everything either shape needs is a knob, so a consumer re-themes them
+     without redeclaring the recipe. */
+  .kj-tabs {
+    display: block;
+
+    /* shared */
+    --kj-tab-fg: var(--kj-fg-muted);
+    --kj-tab-fg-active: var(--kj-fg-default);
+    --kj-tab-font-size: 0.875rem;
+    --kj-tab-font-weight: 400;
+    --kj-tab-padding-x: var(--kj-space-md);
+    --kj-tab-padding-y: var(--kj-space-sm);
+    --kj-tab-gap: 0;
+
+    /* default (underline) */
+    --kj-tab-indicator-color: var(--kj-bg-primary);
+    --kj-tab-indicator-size: 2px;
+    /* how far the bar is held back from each edge of the tab. 0 makes it span
+       the full tab, which is the classic material underline. */
+    --kj-tab-indicator-inset: 0px;
+    --kj-tab-list-border-color: var(--kj-border-default);
+    --kj-tab-list-gap: var(--kj-space-lg);
+
+    /* pills (tray) */
+    --kj-tab-tray-bg: var(--kj-bg-surface);
+    --kj-tab-tray-border-color: var(--kj-border-default);
+    --kj-tab-tray-radius: var(--kj-radius-field);
+    --kj-tab-tray-padding: 3px;
+    --kj-tab-tray-gap: 2px;
+    --kj-tab-chip-radius: calc(var(--kj-radius-field) - 2px);
+    --kj-tab-chip-bg-active: var(--kj-bg-body);
+    --kj-tab-chip-ring-active: var(--kj-border-default);
+  }
+  .kj-tabs[data-orientation="vertical"] {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--kj-space-lg);
+  }
+
+  .kj-tab-list {
+    display: flex;
+    gap: var(--kj-tab-gap);
+    border-bottom: 1px solid var(--kj-tab-list-border-color);
+    margin-bottom: var(--kj-tab-list-gap);
+  }
+  .kj-tabs[data-orientation="vertical"] .kj-tab-list {
+    flex-direction: column;
+    border-bottom: 0;
+    border-right: 1px solid var(--kj-tab-list-border-color);
+    margin: 0;
+  }
+
+  .kj-tab {
+    position: relative;
+    background: none;
+    border: 0;
+    color: var(--kj-tab-fg);
+    padding: var(--kj-tab-padding-y) var(--kj-tab-padding-x);
+    font: var(--kj-tab-font-weight) var(--kj-tab-font-size) / 1.2 var(--kj-font-sans);
+    cursor: pointer;
+    transition: color var(--kj-transition), background-color var(--kj-transition),
+      box-shadow var(--kj-transition);
+  }
+  /* The active mark is a pseudo-element, not a border: a border cannot be
+     inset from the tab's edges, and the old `opacity: .6` for the rest state
+     dimmed the tab's ICON and any badge along with the label. */
+  .kj-tab::after {
+    content: "";
+    position: absolute;
+    left: var(--kj-tab-indicator-inset);
+    right: var(--kj-tab-indicator-inset);
+    bottom: 0;
+    height: var(--kj-tab-indicator-size);
+    background: var(--kj-tab-indicator-color);
+    opacity: 0;
+    transition: opacity var(--kj-transition);
+  }
+  .kj-tab[aria-selected="true"] {
+    color: var(--kj-tab-fg-active);
+  }
+  .kj-tab[aria-selected="true"]::after {
+    opacity: 1;
+  }
+  .kj-tab:hover {
+    color: var(--kj-tab-fg-active);
+  }
+  .kj-tab:focus-visible {
+    outline: 2px solid var(--kj-border-focus, var(--kj-bg-primary));
+    outline-offset: -2px;
+  }
+  .kj-tab:disabled,
+  .kj-tab[aria-disabled="true"] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* ---- pills: a tray of chips ---- */
+  .kj-tabs[data-variant="pills"] {
+    /* the host IS the tray when only a tab-list is rendered (a view-mode
+       toggle with no panels) */
+    display: inline-block;
+  }
+  .kj-tabs[data-variant="pills"] .kj-tab-list {
+    display: inline-flex;
+    gap: var(--kj-tab-tray-gap);
+    padding: var(--kj-tab-tray-padding);
+    background-color: var(--kj-tab-tray-bg);
+    border: 1px solid var(--kj-tab-tray-border-color);
+    border-radius: var(--kj-tab-tray-radius);
+    width: fit-content;
+    margin-bottom: 0;
+  }
+  .kj-tabs[data-variant="pills"] .kj-tab {
+    border-radius: var(--kj-tab-chip-radius);
+    margin: 0;
+  }
+  /* no underline in a tray — the chip itself carries the state */
+  .kj-tabs[data-variant="pills"] .kj-tab::after {
+    content: none;
+  }
+  .kj-tabs[data-variant="pills"] .kj-tab[aria-selected="true"] {
+    background-color: var(--kj-tab-chip-bg-active);
+    color: var(--kj-tab-fg-active);
+    box-shadow: inset 0 0 0 1px var(--kj-tab-chip-ring-active);
+  }
+
+  /* ---- vertical: the bar moves to the inline edge ---- */
+  .kj-tabs[data-orientation="vertical"] .kj-tab {
+    text-align: left;
+  }
+  .kj-tabs[data-orientation="vertical"] .kj-tab::after {
+    left: auto;
+    right: 0;
+    top: var(--kj-tab-indicator-inset);
+    bottom: var(--kj-tab-indicator-inset);
+    width: var(--kj-tab-indicator-size);
+    height: auto;
+  }
+
+  .kj-tab-panel {
+    /* Default `display: block` — without it the host renders as inline
+       (default for unknown custom elements), which collapses any block
+       child's width to the inline flow width. That broke the virtualized
+       table demo: `.kj-table-body` couldn't get a non-zero ResizeObserver
+       rect, so the virtualizer rendered 0 visible rows. */
+    display: block;
+    color: var(--kj-fg-default);
+    font: 0.875rem var(--kj-font-sans);
+    line-height: 1.5;
+  }
+  .kj-tab-panel[hidden] {
+    display: none;
+  }
+}

package/src/tag/tag.css

@@ -0,0 +1,183 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-tag — component-layer tokens + structural CSS
+   Mirrors .kj-badge's chrome (rounded pill, density tokens) and
+   layers in the interactive states (hover, focus-visible, pressed,
+   disabled) that distinguish a tag from a static badge.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-tag {
+    --kj-tag-bg: var(--kj-bg-primary);
+    --kj-tag-fg: var(--kj-fg-on-primary);
+    --kj-tag-border-color: transparent;
+    --kj-tag-radius: var(--kj-radius-selector);
+    --kj-tag-padding-x: var(--kj-space-sm);
+    --kj-tag-padding-y: 0.125rem;
+    --kj-tag-font-size: 0.75rem;
+    --kj-tag-gap: 0.25rem;
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-tag-gap);
+    background: var(--kj-tag-bg);
+    color: var(--kj-tag-fg);
+    border: var(--kj-border) solid var(--kj-tag-border-color);
+    border-radius: var(--kj-tag-radius);
+    padding: var(--kj-tag-padding-y) var(--kj-tag-padding-x);
+    font: var(--kj-tag-font-size) / 1 var(--kj-font-sans);
+    font-weight: 500;
+    transition:
+      background-color var(--kj-transition),
+      color var(--kj-transition),
+      border-color var(--kj-transition);
+  }
+
+  /* ── Variants (parity with KjBadge) ──────────────────────────────── */
+  .kj-tag[data-variant='secondary'] {
+    --kj-tag-bg: var(--kj-bg-field);
+    --kj-tag-fg: var(--kj-fg-default);
+  }
+  .kj-tag[data-variant='destructive'],
+  .kj-tag[data-variant='danger'] {
+    --kj-tag-bg: var(--kj-bg-danger);
+    --kj-tag-fg: var(--kj-fg-on-danger);
+  }
+  .kj-tag[data-variant='success'] {
+    --kj-tag-bg: var(--kj-bg-success, var(--kj-bg-primary));
+    --kj-tag-fg: var(--kj-fg-on-success, var(--kj-fg-on-primary));
+  }
+  .kj-tag[data-variant='warning'] {
+    --kj-tag-bg: var(--kj-bg-warning, var(--kj-bg-primary));
+    --kj-tag-fg: var(--kj-fg-on-warning, var(--kj-fg-on-primary));
+  }
+  .kj-tag[data-variant='info'] {
+    --kj-tag-bg: var(--kj-bg-info, var(--kj-bg-primary));
+    --kj-tag-fg: var(--kj-fg-on-info, var(--kj-fg-on-primary));
+  }
+  .kj-tag[data-variant='outline'] {
+    --kj-tag-bg: transparent;
+    --kj-tag-fg: var(--kj-fg-default);
+    --kj-tag-border-color: var(--kj-border-default);
+  }
+  .kj-tag[data-variant='ghost'] {
+    --kj-tag-bg: transparent;
+    --kj-tag-fg: var(--kj-fg-default);
+    --kj-tag-border-color: transparent;
+  }
+
+  /* ── Sizes (strict ladder: xs < sm < default/md < lg) ───────────── */
+  .kj-tag[data-size='xs'] {
+    --kj-tag-padding-x: 0.1875rem;
+    --kj-tag-padding-y: 0.03125rem;
+    --kj-tag-font-size: 0.5625rem; /* 9px — dense/meta chips only */
+    --kj-tag-gap: 0.125rem;
+  }
+  .kj-tag[data-size='sm'] {
+    --kj-tag-padding-x: 0.375rem;
+    --kj-tag-padding-y: 0.125rem;
+    --kj-tag-font-size: 0.6875rem; /* 11px — step above xs */
+  }
+  .kj-tag[data-size='lg'] {
+    --kj-tag-padding-x: var(--kj-space-md);
+    --kj-tag-font-size: 0.875rem;
+  }
+
+  /* ── Interactive states (selectable / listbox option) ────────────── */
+  .kj-tag[role='button'],
+  .kj-tag[role='option'] {
+    cursor: pointer;
+    user-select: none;
+  }
+  .kj-tag[role='button']:hover,
+  .kj-tag[role='option']:hover {
+    --kj-tag-bg: color-mix(in oklab, var(--kj-tag-bg) 88%, var(--kj-fg-default));
+  }
+  .kj-tag[aria-pressed='true'],
+  .kj-tag[aria-selected='true'],
+  .kj-tag[data-selected] {
+    --kj-tag-bg: var(--kj-bg-primary);
+    --kj-tag-fg: var(--kj-fg-on-primary);
+    --kj-tag-border-color: var(--kj-bg-primary);
+  }
+  .kj-tag[data-focus-visible]:focus,
+  .kj-tag:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+  }
+
+  /* ── Disabled ─────────────────────────────────────────────────────── */
+  .kj-tag[aria-disabled='true'],
+  .kj-tag[data-disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Remove button ────────────────────────────────────────────────── */
+  .kj-tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    margin-inline-start: 0.125rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    border-radius: 999px;
+    cursor: pointer;
+    line-height: 1;
+    font: inherit;
+    /* Touch-target enlargement (WCAG 2.5.5): visible glyph stays small,
+       the hit area grows via a transparent ::after overlay so it does
+       not inflate the chip's visible footprint. */
+    position: relative;
+  }
+  .kj-tag-remove::after {
+    content: '';
+    position: absolute;
+    inset: -0.875rem;
+    border-radius: inherit;
+  }
+  .kj-tag-remove:hover {
+    background: color-mix(in oklab, currentColor 18%, transparent);
+  }
+  .kj-tag-remove:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+  .kj-tag-remove[aria-disabled='true'] {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* The host's `[hidden]` (written by kj-tag-list when a chip overflows
+     `kjMax`) needs an explicit `display: none`: the `inline-flex` above beats
+     the UA `[hidden]` rule on specificity. */
+  .kj-tag[hidden] {
+    display: none;
+  }
+
+  /* ── Tag list container ───────────────────────────────────────────── */
+  .kj-tag-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--kj-space-sm);
+    align-items: center;
+  }
+  /* The "+N" chip: a native button painted as a tag. */
+  .kj-tag-list-overflow {
+    border-style: dashed;
+    --kj-tag-border-color: var(--kj-border-default);
+  }
+  .kj-tag-list-overflow[aria-expanded='true'] {
+    --kj-tag-bg: var(--kj-bg-field);
+  }
+  .kj-tag-list[role='listbox']:focus-visible,
+  .kj-tag-list[role='grid']:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+  }
+}

package/src/textarea/textarea.css

@@ -0,0 +1,117 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-textarea — component-layer tokens + structural CSS
+   Same pattern as button.css / input.css: tokens default to
+   shared-layer values, variants/sizes/states retarget tokens,
+   structural CSS reads tokens only.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-textarea {
+    /* component knobs — themes/users can override any of these */
+    --kj-textarea-bg:               var(--kj-bg-field);
+    --kj-textarea-fg:               var(--kj-fg-default);
+    --kj-textarea-border-color:     var(--kj-border-default);
+    --kj-textarea-border-style:     solid;
+    --kj-textarea-border-width:     var(--kj-border);
+    --kj-textarea-radius:           var(--kj-radius-field);
+    --kj-textarea-padding-x:        var(--kj-space-md);
+    --kj-textarea-padding-y:        var(--kj-space-sm);
+    --kj-textarea-font:             var(--kj-font-sans);
+    --kj-textarea-font-size:        var(--kj-text-sm);
+    --kj-textarea-line-height:      1.5;
+    --kj-textarea-placeholder-fg:   var(--kj-fg-muted);
+    --kj-textarea-min-height:       2.75rem; /* WCAG 2.5.5 touch target floor */
+
+    display: block;
+    width: 100%;
+    min-height: var(--kj-textarea-min-height);
+    background: var(--kj-textarea-bg);
+    color: var(--kj-textarea-fg);
+    border: var(--kj-textarea-border-width) var(--kj-textarea-border-style) var(--kj-textarea-border-color);
+    border-radius: var(--kj-textarea-radius);
+    padding: var(--kj-textarea-padding-y) var(--kj-textarea-padding-x);
+    font: var(--kj-textarea-font-size) / var(--kj-textarea-line-height) var(--kj-textarea-font);
+    transition: var(--kj-transition);
+    /* `resize` is set inline by KjTextarea (`[style.resize]`) and overrides
+       this fallback when present. */
+    resize: vertical;
+  }
+
+  .kj-textarea::placeholder {
+    color: var(--kj-textarea-placeholder-fg);
+  }
+
+  .kj-textarea:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+    --kj-textarea-border-color: var(--kj-bg-primary);
+  }
+
+  .kj-textarea[aria-invalid='true'] {
+    --kj-textarea-border-color: var(--kj-bg-danger);
+  }
+
+  .kj-textarea[aria-disabled='true'],
+  .kj-textarea:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  /* ── Variants ─────────────────────────────────────────────── */
+  .kj-textarea[data-variant='filled'] {
+    --kj-textarea-bg: var(--kj-bg-surface);
+    --kj-textarea-border-color: transparent;
+  }
+  .kj-textarea[data-variant='filled']:focus-visible {
+    --kj-textarea-border-color: var(--kj-bg-primary);
+  }
+
+  /* ── Sizes ────────────────────────────────────────────────── */
+  .kj-textarea[data-size='sm'] {
+    --kj-textarea-padding-x: var(--kj-space-sm);
+    --kj-textarea-padding-y: 0.25rem;
+    --kj-textarea-font-size: 0.8125rem;
+  }
+  .kj-textarea[data-size='lg'] {
+    --kj-textarea-padding-x: var(--kj-space-lg);
+    --kj-textarea-padding-y: 0.625rem;
+    --kj-textarea-font-size: 1rem;
+  }
+
+  /* ── Auto-resize: hide the user drag handle ──────────────── */
+  .kj-textarea[data-autoresize] {
+    /* `[style.resize]` from the directive already sets resize:none, but
+       keeping the rule here for older browsers / SSR before the directive
+       initialises. */
+    resize: none;
+    overflow-y: hidden;
+  }
+
+  /* ── Counter ─────────────────────────────────────────────── */
+  .kj-textarea__counter {
+    margin-top: var(--kj-space-xs, 0.25rem);
+    font: var(--kj-text-xs, 0.75rem) / 1.2 var(--kj-font-mono, var(--kj-font-sans));
+    color: var(--kj-fg-muted);
+    text-align: end;
+  }
+  .kj-textarea__counter[data-state='warn'] {
+    color: var(--kj-fg-warning, var(--kj-fg-muted));
+  }
+  .kj-textarea__counter[data-state='limit'] {
+    color: var(--kj-fg-danger);
+  }
+
+  /* Live region: visually hidden but readable to AT. Mirrors the
+     `.sr-only` pattern. */
+  .kj-textarea__live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/src/time-picker/time-picker.css

@@ -0,0 +1,126 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-time-picker — wrapper around KjTimePicker + segment directives.
+
+   Three (or four) segmented spinbuttons sit inline. Each segment is a
+   2-character `<input>` with right-aligned text; the colon separator
+   between them is presentational. The meridiem toggle is a kj-button-
+   like surface that flips AM ↔ PM.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-time-picker {
+    --kj-time-picker-bg:               var(--kj-bg-field);
+    --kj-time-picker-fg:               var(--kj-fg-default);
+    --kj-time-picker-border-color:     var(--kj-border-default);
+    --kj-time-picker-border-width:     var(--kj-border);
+    --kj-time-picker-radius:           var(--kj-radius-field);
+    --kj-time-picker-padding-x:        var(--kj-space-md);
+    --kj-time-picker-font:             var(--kj-font-sans);
+    --kj-time-picker-font-size:        var(--kj-text-sm);
+    --kj-time-picker-segment-width:    2rem;
+    --kj-time-picker-meridiem-bg:      var(--kj-bg-surface);
+    --kj-time-picker-meridiem-fg:      var(--kj-fg-default);
+    /* Mirror `.kj-input` so a time-picker lines up vertically with sibling
+       inputs in a form row. Explicit height pins the box (sm/md/lg). Don't
+       set `align-self` here — when the parent is a column-flex stack
+       (e.g. <kj-form-field>'s label + control), `center` would horizontally
+       center this `inline-flex` host instead of leaving it at start. */
+    --kj-time-picker-height:           2.25rem;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+    height: var(--kj-time-picker-height);
+    background: var(--kj-time-picker-bg);
+    color: var(--kj-time-picker-fg);
+    border: var(--kj-time-picker-border-width) solid var(--kj-time-picker-border-color);
+    border-radius: var(--kj-time-picker-radius);
+    padding: 0 var(--kj-time-picker-padding-x);
+    font: var(--kj-time-picker-font-size) / 1.4 var(--kj-time-picker-font);
+    transition: var(--kj-transition);
+  }
+  .kj-time-picker[data-size="sm"] { --kj-time-picker-height: 2rem;    --kj-time-picker-font-size: 0.8125rem; }
+  .kj-time-picker[data-size="lg"] { --kj-time-picker-height: 2.75rem; --kj-time-picker-font-size: 1rem; }
+
+  .kj-time-picker:focus-within {
+    --kj-time-picker-border-color: var(--kj-bg-primary);
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+  }
+
+  .kj-time-picker[aria-invalid="true"] {
+    --kj-time-picker-border-color: var(--kj-bg-danger);
+  }
+
+  .kj-time-picker[data-disabled] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .kj-time-picker__segment {
+    width: var(--kj-time-picker-segment-width);
+    height: 100%;
+    background: transparent;
+    color: inherit;
+    border: 0;
+    padding: 0 0.25rem;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    appearance: textfield;
+    border-radius: var(--kj-radius-sm, 0.25rem);
+    transition: background var(--kj-transition);
+  }
+
+  .kj-time-picker__segment:focus {
+    outline: none;
+    background: color-mix(in oklab, var(--kj-bg-primary) 12%, transparent);
+  }
+
+  .kj-time-picker__segment[aria-invalid="true"] {
+    color: var(--kj-fg-danger);
+  }
+
+  .kj-time-picker__segment::-webkit-outer-spin-button,
+  .kj-time-picker__segment::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  .kj-time-picker__separator {
+    user-select: none;
+    color: color-mix(in oklab, var(--kj-time-picker-fg) 70%, transparent);
+  }
+
+  .kj-time-picker__meridiem {
+    margin-inline-start: var(--kj-space-sm);
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--kj-time-picker-meridiem-bg);
+    color: var(--kj-time-picker-meridiem-fg);
+    border: 0;
+    border-radius: var(--kj-radius-field);
+    cursor: pointer;
+    font: inherit;
+    font-weight: 600;
+    transition: background var(--kj-transition), color var(--kj-transition);
+  }
+
+  .kj-time-picker__meridiem:hover {
+    background: color-mix(in oklab, var(--kj-fg-default) 8%, var(--kj-time-picker-meridiem-bg));
+  }
+
+  .kj-time-picker__meridiem[aria-pressed="true"] {
+    background: var(--kj-bg-primary);
+    color: var(--kj-fg-on-primary);
+  }
+
+  .kj-time-picker__meridiem[aria-disabled="true"] {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/src/toast/toast.css

@@ -0,0 +1,115 @@
+@layer kj.component {
+  /* ── Viewport ── */
+  .kj-toast-viewport {
+    position: fixed;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    z-index: var(--kj-toast-z-index, 2000);
+    /* Default position: bottom-right (mirrors KJ_TOAST_SONNER_STRATEGY) */
+    bottom: 1rem;
+    right: 1rem;
+    width: 22rem;
+    max-width: calc(100vw - 2rem);
+  }
+
+  /* Positional overrides driven by data-position-* from the directive */
+  .kj-toast-viewport[data-position-y="bottom"] { bottom: 1rem; top: auto; }
+  .kj-toast-viewport[data-position-y="top"]    { top: 1rem; bottom: auto; }
+  .kj-toast-viewport[data-position-x="end"]    { right: 1rem; left: auto; }
+  .kj-toast-viewport[data-position-x="start"]  { left: 1rem; right: auto; }
+  .kj-toast-viewport[data-position-x="center"] { left: 50%; right: auto; transform: translateX(-50%); }
+
+  /* Each <li> wraps a toast — absolutely positioned so siblings overlap. */
+  .kj-toast-viewport li {
+    position: absolute;
+    left: 0;
+    right: 0;
+    transition:
+      transform 0.4s cubic-bezier(0.21, 0.61, 0.35, 1),
+      opacity 0.3s ease;
+  }
+  .kj-toast-viewport[data-position-y="bottom"] li { bottom: 0; }
+  .kj-toast-viewport[data-position-y="top"]    li { top: 0; }
+
+  /* ── Collapsed (stacked) state ── */
+  .kj-toast-viewport[data-expanded="false"] .kj-toast:not([data-front="true"]) {
+    height: var(--kj-toast-front-height);
+    overflow: hidden;
+    transform:
+      translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px) * -1))
+      scale(calc(1 - (var(--kj-toast-index) - 1) * 0.06));
+    opacity: calc(1 - (var(--kj-toast-index) - 1) * 0.25);
+  }
+  .kj-toast-viewport[data-position-y="top"][data-expanded="false"] .kj-toast:not([data-front="true"]) {
+    transform:
+      translateY(calc((var(--kj-toast-index) - 1) * var(--kj-toast-gap, 14px)))
+      scale(calc(1 - (var(--kj-toast-index) - 1) * 0.06));
+  }
+
+  /* ── Expanded state ── */
+  .kj-toast-viewport[data-expanded="true"] .kj-toast {
+    transform: translateY(
+      calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)) * -1)
+    );
+  }
+  .kj-toast-viewport[data-position-y="top"][data-expanded="true"] .kj-toast {
+    transform: translateY(
+      calc((var(--kj-toast-index) - 1) * (var(--kj-toast-height, 0px) + var(--kj-toast-gap, 14px)))
+    );
+  }
+
+  /* ── Toast ── */
+  .kj-toast {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-md, 0.75rem);
+    padding: var(--kj-space-md, 0.75rem) var(--kj-space-lg, 1rem);
+    min-width: 18rem;
+    font: 0.875rem / 1.4 var(--kj-font-sans, sans-serif);
+    border-radius: var(--kj-radius-box, 0.5rem);
+    box-shadow: 0 4px 16px rgb(0 0 0 / 0.18), 0 1px 0 rgb(255 255 255 / 0.04) inset;
+    border: var(--kj-border, 1px) solid var(--kj-border-default, #e2e8f0);
+    background: var(--kj-bg-elevated, #fff);
+    color: var(--kj-fg-default, #1a202c);
+    animation: kj-toast-enter 0.35s cubic-bezier(0.21, 0.61, 0.35, 1);
+  }
+
+  @keyframes kj-toast-enter {
+    from { opacity: 0; transform: translateY(100%) scale(0.95); }
+    to   { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  .kj-toast[data-variant="success"] {
+    background: var(--kj-bg-success, #16a34a);
+    color: var(--kj-fg-on-success, #fff);
+    border-color: transparent;
+  }
+  .kj-toast[data-variant="warning"] {
+    background: var(--kj-bg-warning, #d97706);
+    color: var(--kj-fg-on-warning, #fff);
+    border-color: transparent;
+  }
+  .kj-toast[data-variant="destructive"] {
+    background: var(--kj-bg-danger, #dc2626);
+    color: var(--kj-fg-on-danger, #fff);
+    border-color: transparent;
+  }
+
+  /* ── Close button ── */
+  .kj-toast-close {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    padding: 4px 6px;
+    border-radius: 4px;
+    line-height: 1;
+    font-size: 1.1rem;
+    opacity: 0.7;
+    margin-inline-start: auto;
+    flex-shrink: 0;
+  }
+  .kj-toast-close:hover { opacity: 1; background: rgb(0 0 0 / 0.08); }
+  .kj-toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+}