@kouji-ui/components 0.1.1 → 0.1.2

package/src/tabs/tabs.ts

@@ -1,204 +0,0 @@
-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

@@ -1,9 +0,0 @@
-// 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

@@ -1,22 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

package/src/tag/tag.css

@@ -1,167 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .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;
-  }
-}