@kouji-ui/components 0.1.1

package/src/tabs/tabs.ts

@@ -0,0 +1,204 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  inject,
+  input,
+} from '@angular/core';
+import { KjTabs, KjTabList, KjTab, KjTabPanel } from '@kouji-ui/core';
+
+/**
+ * Styled wrapper around the headless `KjTabs` directive — root of the tabs
+ * compound. Re-maps the `kjValue`/`kjOrientation`/`kjActivationMode` inputs to
+ * terse public names and reflects them as `data-*` attributes for CSS chrome.
+ *
+ * Compose the four wrappers — `<kj-tabs>`, `<kj-tab-list>`, `<kj-tab>`,
+ * `<kj-tab-panel>` — to mirror the four-directive shape. The wiring between
+ * a tab and its panel is by string `value`, not by parent-child structure.
+ *
+ * @example
+ * ```html
+ * <kj-tabs [(value)]="active">
+ *   <kj-tab-list>
+ *     <kj-tab value="overview">Overview</kj-tab>
+ *     <kj-tab value="billing">Billing</kj-tab>
+ *   </kj-tab-list>
+ *   <kj-tab-panel value="overview">Overview content.</kj-tab-panel>
+ *   <kj-tab-panel value="billing">Billing content.</kj-tab-panel>
+ * </kj-tabs>
+ * ```
+ *
+ * @doc-keyboard
+ *   ArrowRight|ArrowLeft — Moves focus between tabs when orientation is "horizontal" (off-axis arrows are swallowed)
+ *   ArrowDown|ArrowUp    — Moves focus between tabs when orientation is "vertical"
+ *   Home                 — Moves focus to the first tab
+ *   End                  — Moves focus to the last tab
+ *   Enter|Space          — Activates the focused tab (always honoured; required in `activationMode="manual"`)
+ *   Delete               — Fires `kjClose` when the tab has `kjClosable="true"`
+ *   Tab                  — Single tab stop: leaves the tablist and moves to the active panel (roving tabindex)
+ *
+ * @doc-aria
+ *   role="tablist"       — on `<kj-tab-list>`
+ *   aria-orientation     — reflects [orientation] ("horizontal" | "vertical")
+ *   role="tab"           — on each `<kj-tab>` host button
+ *   aria-selected        — "true" on the active tab, "false" otherwise
+ *   aria-controls        — links each tab to the id of its panel
+ *   aria-disabled        — set to "true" when [disabled] is true on a tab
+ *   role="tabpanel"      — on each `<kj-tab-panel>`
+ *   aria-labelledby      — links each panel to the id of its tab
+ *   hidden               — set on inactive panels (toggled, not destroyed, after first mount)
+ *   data-state           — "active" | "inactive" mirror for CSS targeting
+ *
+ * @doc-touch
+ *   Default tab padding produces a ~32–36px hit area. For touch-first layouts, increase tab padding to reach 44px or pair tabs with a larger pill variant — the WCAG 2.5.5 "inline" exception applies when tabs sit inside a horizontal navigation strip with labels.
+ *
+ * @doc-a11y
+ *   Implements the WAI-ARIA Tabs APG pattern. Roving tabindex via
+ *   `KjRovingTabindex` keeps the tablist as a single Tab stop; arrow keys move
+ *   focus among tabs. `activationMode="automatic"` (default) activates the tab
+ *   as focus lands on it; `activationMode="manual"` separates focus from
+ *   activation so screen reader users can browse tab labels before committing
+ *   to a panel. Panels use a lazy-then-persistent mount: content is created on
+ *   first activation and kept thereafter (only `hidden` toggles), preserving
+ *   form state and aria live regions across tab switches.
+ *
+ * @doc-related tab-list,segmented,stepper
+ *
+ * @doc-example Default
+ *   The default playground — three tabs, automatic activation, horizontal.
+ *   @doc-file tabs.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the most common tabs usages — controlled value, default
+ *   active, disabled tab, and a panel that reads from the active value.
+ *   @doc-file tabs.usage.example.ts
+ * @doc-example Vertical
+ *   `[orientation]="'vertical'"` stacks the tabs and panels side-by-side.
+ *   @doc-file tabs.vertical.example.ts
+ * @doc-example Manual activation
+ *   `[activationMode]="'manual'"` separates focus from activation — useful
+ *   for tabs that swap heavy content.
+ *   @doc-file tabs.manual-activation.example.ts
+ * @doc-example Disabled tab
+ *   `[disabled]="true"` on a `<kj-tab>` removes it from activation; arrow keys skip it.
+ *   @doc-file tabs.disabled.example.ts
+ * @doc-example Controlled
+ *   Two-way bind `[(value)]` to drive activation from outside the strip.
+ *   @doc-file tabs.controlled.example.ts
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name tabs
+ * @doc-description Themed tab strip with default and pill variants and manual or automatic activation.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-tabs',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: KjTabs,
+      inputs: [
+        'kjValue: value',
+        'kjOrientation: orientation',
+        'kjActivationMode: activationMode',
+      ],
+      outputs: ['kjValueChange: valueChange'],
+    },
+  ],
+  template: `<ng-content />`,
+  styleUrl: './tabs.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'kj-tabs',
+    '[attr.data-variant]': 'variant()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTabsComponent {
+  /** Visual chrome for the tab strip. Reflected as `data-variant` on the host. */
+  readonly variant = input<'default' | 'pills'>('default');
+}
+
+/**
+ * Styled wrapper around `KjTabList`. Hosts `role="tablist"` (provided by the
+ * underlying directive) and the roving-tabindex behaviour. Place inside a
+ * `<kj-tabs>` and project `<kj-tab>` children.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name tabs
+ */
+@Component({
+  selector: 'kj-tab-list',
+  standalone: true,
+  hostDirectives: [KjTabList],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-tab-list' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTabListComponent {}
+
+/**
+ * Styled wrapper around `KjTab`. Renders a `<button role="tab">` and forwards
+ * the required `value` and optional `disabled` inputs to the directive.
+ * Project the tab's label as content.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name tabs
+ */
+@Component({
+  selector: 'kj-tab',
+  standalone: true,
+  imports: [KjTab],
+  template: `
+    <button
+      type="button"
+      kjTab
+      class="kj-tab"
+      [kjTabValue]="value()"
+      [kjTabDisabled]="disabled()"
+    >
+      <ng-content />
+    </button>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTabComponent {
+  /** String key wiring this tab to the panel of the same `value`. */
+  readonly value = input.required<string>();
+  /** When true, the tab is announced as disabled and cannot be activated. */
+  readonly disabled = input(false);
+}
+
+/**
+ * Styled wrapper around `KjTabPanel`. Renders the panel host with
+ * `role="tabpanel"` and the lazy-then-persistent mount posture: projected
+ * content is created on first activation and kept thereafter — subsequent
+ * deactivations only toggle `hidden`.
+ *
+ * @doc-category Library/Navigation
+ * @doc
+ * @doc-name tabs
+ */
+@Component({
+  selector: 'kj-tab-panel',
+  standalone: true,
+  hostDirectives: [{ directive: KjTabPanel, inputs: ['kjPanelValue: value'] }],
+  template: `
+    @if (panel.mounted()) {
+      <ng-content />
+    }
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-tab-panel' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjTabPanelComponent {
+  // Read the host directive instance from the element injector so the template
+  // can gate `<ng-content>` on its `mounted()` signal — implements the
+  // lazy-then-persistent mount posture without re-creating it here.
+  protected readonly panel = inject(KjTabPanel);
+}

package/src/tag/_examples/index.ts

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjTagExample } from './tag.example';
+export { KjTagListExample } from './tag.list.example';
+export { KjTagRemovableExample } from './tag.removable.example';
+export { KjTagSelectableExample } from './tag.selectable.example';
+export { KjTagSizesExample } from './tag.sizes.example';
+export { KjTagUsageExample } from './tag.usage.example';
+export { KjTagVariantsExample } from './tag.variants.example';

package/src/tag/_examples/tag.example.ts

@@ -0,0 +1,22 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTagComponent } from '../tag';
+
+/**
+ * Default usage example for KjTagComponent — a static decorative chip.
+ * Visually identical to the matching `<kj-badge>`.
+ */
+@Component({
+  selector: 'kj-tag-example',
+  standalone: true,
+  imports: [KjTagComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-tag>New</kj-tag>`,
+})
+export class KjTagExample {}

package/src/tag/_examples/tag.list.example.ts

@@ -0,0 +1,38 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjTagComponent, KjTagListComponent } from '../tag';
+
+/**
+ * Group of selectable chips inside a `<kj-tag-list kjTagListRole="listbox">`
+ * container. The container provides one tab stop, roving arrow-key
+ * navigation between chips, and `aria-multiselectable="true"` for the
+ * filter-chips pattern.
+ */
+@Component({
+  selector: 'kj-tag-list-example',
+  standalone: true,
+  imports: [KjTagComponent, KjTagListComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-tag-list kjTagListRole="listbox" [kjTagListMultiple]="true" aria-label="Filter by tag">
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="frontend">Frontend</kj-tag>
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="backend">Backend</kj-tag>
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="mobile">Mobile</kj-tag>
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="devops">DevOps</kj-tag>
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="design">Design</kj-tag>
+    </kj-tag-list>
+  `,
+})
+export class KjTagListExample {
+  protected readonly frontend = signal(true);
+  protected readonly backend = signal(false);
+  protected readonly mobile = signal(false);
+  protected readonly devops = signal(true);
+  protected readonly design = signal(false);
+}

package/src/tag/_examples/tag.removable.example.ts

@@ -0,0 +1,39 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjTagComponent, KjTagRemoveComponent } from '../tag';
+
+/**
+ * Removable tags. Each chip projects a `<kj-tag-remove>` X button whose
+ * `aria-label` is auto-derived from the parent's text content (`"Remove
+ * Acme Corp"`). The host's `(kjTagRemoved)` output drops the chip from
+ * the controlled signal.
+ */
+@Component({
+  selector: 'kj-tag-removable-example',
+  standalone: true,
+  imports: [KjTagComponent, KjTagRemoveComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    @for (tag of tags(); track tag) {
+      <kj-tag kjVariant="secondary" (kjTagRemoved)="remove(tag)">
+        {{ tag }}
+        <kj-tag-remove>×</kj-tag-remove>
+      </kj-tag>
+    }
+  `,
+})
+export class KjTagRemovableExample {
+  protected readonly tags = signal(['Acme Corp', 'Globex', 'Initech', 'Umbrella']);
+
+  protected remove(tag: string): void {
+    this.tags.update((list) => list.filter((t) => t !== tag));
+  }
+}

package/src/tag/_examples/tag.selectable.example.ts

@@ -0,0 +1,33 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjTagComponent } from '../tag';
+
+/**
+ * Selectable / toggle chips. Each chip is `role="button"` with
+ * `aria-pressed` mirrored from the two-way `kjTagSelected` model. Click
+ * or press Space / Enter to toggle.
+ */
+@Component({
+  selector: 'kj-tag-selectable-example',
+  standalone: true,
+  imports: [KjTagComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="design">Design</kj-tag>
+    <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="engineering">Engineering</kj-tag>
+    <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="research">Research</kj-tag>
+  `,
+})
+export class KjTagSelectableExample {
+  protected readonly design = signal(true);
+  protected readonly engineering = signal(false);
+  protected readonly research = signal(false);
+}

package/src/tag/_examples/tag.sizes.example.ts

@@ -0,0 +1,25 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTagComponent } from '../tag';
+
+@Component({
+  selector: 'kj-tag-sizes-example',
+  standalone: true,
+  imports: [KjTagComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-tag kjSize="xs">Extra small</kj-tag>
+    <kj-tag kjSize="sm">Small</kj-tag>
+    <kj-tag kjSize="md">Medium</kj-tag>
+    <kj-tag kjSize="lg">Large</kj-tag>
+  `,
+})
+export class KjTagSizesExample {}

package/src/tag/_examples/tag.usage.example.ts

@@ -0,0 +1,62 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjTagComponent, KjTagRemoveComponent, KjTagListComponent } from '../tag';
+
+/**
+ * A walkthrough of the most common tag usages — decorative variants, a
+ * removable chip with a (kjTagRemoved) handler, a selectable filter pill, and
+ * a tag list with arrow-key navigation. Copy-paste starting point.
+ */
+@Component({
+  selector: 'kj-tag-usage-example',
+  standalone: true,
+  imports: [KjTagComponent, KjTagRemoveComponent, KjTagListComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+      .row {
+        display: flex;
+        gap: var(--kj-space-sm);
+        flex-wrap: wrap;
+        align-items: center;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div class="row">
+      <kj-tag kjVariant="default">New</kj-tag>
+      <kj-tag kjVariant="success">Shipped</kj-tag>
+      <kj-tag kjVariant="warning">Pending</kj-tag>
+      <kj-tag kjVariant="destructive">Failed</kj-tag>
+    </div>
+
+    <div class="row">
+      @for (t of remaining(); track t) {
+        <kj-tag>
+          {{ t }}
+          <kj-tag-remove (click)="remove(t)">×</kj-tag-remove>
+        </kj-tag>
+      }
+    </div>
+
+    <kj-tag-list class="row">
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="onlyMine">Only mine</kj-tag>
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="recent">Recent</kj-tag>
+      <kj-tag [kjTagSelectable]="true" [(kjTagSelected)]="archived">Archived</kj-tag>
+    </kj-tag-list>
+  `,
+})
+export class KjTagUsageExample {
+  readonly remaining = signal<string[]>(['design', 'engineering', 'launch']);
+  readonly onlyMine = signal(false);
+  readonly recent = signal(true);
+  readonly archived = signal(false);
+
+  remove(t: string): void {
+    this.remaining.update((list) => list.filter((x) => x !== t));
+  }
+}

package/src/tag/_examples/tag.variants.example.ts

@@ -0,0 +1,29 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjTagComponent } from '../tag';
+
+@Component({
+  selector: 'kj-tag-variants-example',
+  standalone: true,
+  imports: [KjTagComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-tag kjVariant="default">Default</kj-tag>
+    <kj-tag kjVariant="secondary">Secondary</kj-tag>
+    <kj-tag kjVariant="success">Success</kj-tag>
+    <kj-tag kjVariant="warning">Warning</kj-tag>
+    <kj-tag kjVariant="destructive">Destructive</kj-tag>
+    <kj-tag kjVariant="info">Info</kj-tag>
+    <kj-tag kjVariant="outline">Outline</kj-tag>
+    <kj-tag kjVariant="ghost">Ghost</kj-tag>
+  `,
+})
+export class KjTagVariantsExample {}

package/src/tag/index.ts

@@ -0,0 +1 @@
+export * from './tag';

package/src/tag/tag.css

@@ -0,0 +1,167 @@
+/* ─────────────────────────────────────────────────────────────
+   .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;
+  }
+
+  /* ── Tag list container ───────────────────────────────────────────── */
+  .kj-tag-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: var(--kj-space-sm);
+    align-items: center;
+  }
+  .kj-tag-list[role="listbox"]:focus-visible,
+  .kj-tag-list[role="grid"]:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+  }
+}