@kouji-ui/components 0.9.2 → 0.9.4

package/src/link/link.css

@@ -0,0 +1,104 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-link — component-layer tokens + structural CSS
+   Tokens default to shared-layer values from @kouji-ui/themes.
+   Variants / sizes / states retarget the component tokens; the
+   structural rules below are the only place raw var(--kj-link-*)
+   is read.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-link {
+    /* component knobs — themes / users can override any of these */
+    --kj-link-fg:               var(--kj-fg-primary);
+    --kj-link-hover-fg:         color-mix(in oklch, var(--kj-fg-primary), black 8%);
+    --kj-link-visited-fg:       var(--kj-fg-accent);
+    --kj-link-decoration:       underline;
+    --kj-link-underline-offset: 3px;
+    --kj-link-font-size:        inherit;
+    --kj-link-radius:           var(--kj-radius-field, 0.25rem);
+
+    /* the only place raw var(--kj-link-*) is read */
+    color: var(--kj-link-fg);
+    text-decoration: var(--kj-link-decoration);
+    text-underline-offset: var(--kj-link-underline-offset);
+    font-size: var(--kj-link-font-size);
+    border-radius: var(--kj-link-radius);
+    cursor: pointer;
+    transition: color var(--kj-transition), text-decoration-color var(--kj-transition);
+  }
+
+  .kj-link:hover {
+    color: var(--kj-link-hover-fg);
+  }
+
+  .kj-link:visited {
+    color: var(--kj-link-visited-fg);
+  }
+
+  .kj-link:focus-visible {
+    outline: 2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+  }
+
+  /* ── Underline modes ────────────────────────────────────────── */
+  .kj-link[data-underline="always"] { --kj-link-decoration: underline; }
+  .kj-link[data-underline="hover"]  { --kj-link-decoration: none; }
+  .kj-link[data-underline="hover"]:hover,
+  .kj-link[data-underline="hover"]:focus-visible { --kj-link-decoration: underline; }
+  .kj-link[data-underline="none"]   { --kj-link-decoration: none; }
+
+  /* ── Variants ───────────────────────────────────────────────── */
+  .kj-link[data-variant="primary"] {
+    --kj-link-fg: var(--kj-fg-primary);
+    --kj-link-hover-fg: color-mix(in oklab, var(--kj-fg-primary) 80%, var(--kj-fg-default));
+  }
+
+  .kj-link[data-variant="secondary"] {
+    --kj-link-fg: var(--kj-fg-accent);
+    --kj-link-hover-fg: color-mix(in oklab, var(--kj-fg-accent) 80%, var(--kj-fg-default));
+  }
+
+  .kj-link[data-variant="muted"] {
+    --kj-link-fg: color-mix(in oklab, var(--kj-fg-default) 70%, transparent);
+    --kj-link-hover-fg: var(--kj-fg-default);
+  }
+
+  .kj-link[data-variant="destructive"] {
+    --kj-link-fg: var(--kj-fg-danger);
+    --kj-link-hover-fg: color-mix(in oklab, var(--kj-fg-danger) 80%, var(--kj-fg-default));
+  }
+
+  /* ── Sizes ──────────────────────────────────────────────────── */
+  .kj-link[data-size="sm"]      { --kj-link-font-size: 0.8125rem; }
+  .kj-link[data-size="md"]      { --kj-link-font-size: 0.9375rem; }
+  .kj-link[data-size="lg"]      { --kj-link-font-size: 1.0625rem; }
+  .kj-link[data-size="inherit"] { --kj-link-font-size: inherit; }
+
+  /* ── External-link icon (sighted-user story) ───────────────── */
+  .kj-link[data-external="true"]::after {
+    content: "";
+    display: inline-block;
+    width: 0.75em;
+    height: 0.75em;
+    margin-inline-start: 0.25em;
+    background-color: currentColor;
+    /* Mask is a tiny "arrow leaving box" glyph; aria-hidden by virtue of CSS. */
+    -webkit-mask: var(
+      --kj-link-external-icon,
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9 3h4v4M13 3 7 9M11 9v4H3V5h4'/></svg>")
+    ) center / contain no-repeat;
+    mask: var(
+      --kj-link-external-icon,
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M9 3h4v4M13 3 7 9M11 9v4H3V5h4'/></svg>")
+    ) center / contain no-repeat;
+    vertical-align: -0.05em;
+  }
+
+  /* ── Disabled state ─────────────────────────────────────────── */
+  .kj-link[aria-disabled="true"],
+  .kj-link[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    text-decoration: none;
+  }
+}

package/src/list/list.css

@@ -0,0 +1,166 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-list — component-layer tokens + structural CSS
+   The list root carries layout (flex direction, gap) and reads
+   `data-orientation` / `data-divided` / `data-hoverable` from the
+   composed `KjList` directive to flip variants. Per-row chrome is
+   driven by `data-active` / `data-disabled` on `<kj-list-item>`.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-list {
+    --kj-list-bg:           transparent;
+    --kj-list-fg:           var(--kj-fg-default);
+    --kj-list-border-color: var(--kj-border-default);
+    --kj-list-radius:       var(--kj-radius-box);
+    --kj-list-row-gap:      0;
+    --kj-list-row-padding-x: var(--kj-space-md);
+    --kj-list-row-padding-y: var(--kj-space-sm);
+    --kj-list-row-radius:   var(--kj-radius-field);
+    --kj-list-row-min-h:    2.75rem; /* 44px — WCAG 2.5.5 */
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-list-row-gap);
+    background: var(--kj-list-bg);
+    color: var(--kj-list-fg);
+    border-radius: var(--kj-list-radius);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Horizontal axis flips flex-direction. The `data-orientation` mirror is
+     emitted by `KjList` so themes do not need the JS-level orientation. */
+  .kj-list[data-orientation='horizontal'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* Sizes — drive row density via the row-padding / min-height tokens. */
+  .kj-list[data-size='xs'] {
+    --kj-list-row-padding-y: 0.125rem;
+    --kj-list-row-padding-x: var(--kj-space-sm);
+    --kj-list-row-min-h:    1.5rem;
+  }
+  .kj-list[data-size='sm'] {
+    --kj-list-row-padding-y: 0.25rem;
+    --kj-list-row-padding-x: var(--kj-space-sm);
+    --kj-list-row-min-h:    2rem;
+  }
+  .kj-list[data-size='lg'] {
+    --kj-list-row-padding-y: var(--kj-space-md);
+    --kj-list-row-padding-x: var(--kj-space-lg);
+    --kj-list-row-min-h:    3rem;
+  }
+
+  /* Variants — chrome on the container itself. */
+  .kj-list[data-variant='bordered'] {
+    border: var(--kj-border) solid var(--kj-list-border-color);
+    overflow: hidden;
+  }
+  .kj-list[data-variant='flat'] {
+    border: 0;
+    --kj-list-bg: transparent;
+  }
+
+  /* Per-row layout. Rows are flex containers so consumers can drop in
+     leading icons / trailing badges without juggling spans. */
+  .kj-list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    padding: var(--kj-list-row-padding-y) var(--kj-list-row-padding-x);
+    min-height: var(--kj-list-row-min-h);
+    border-radius: var(--kj-list-row-radius);
+    color: inherit;
+    /* Transition only state-tied properties so the active / hover flip is
+       buttery without animating layout. */
+    transition: background-color var(--kj-transition),
+                color var(--kj-transition),
+                opacity var(--kj-transition);
+  }
+
+  /* One projected link/button: move row padding onto it so the clickable box
+     matches the full row (padding on the host sat outside the hit target).
+     Use `nth-child(1 of …)` / `nth-last-child(1 of …)` so whitespace text
+     nodes between the host and the control do not break `:only-child`. */
+  .kj-list-item:has(
+    > :where(a, button):nth-child(1 of :where(a, button)):nth-last-child(1 of :where(a, button))
+  ) {
+    padding: 0;
+    align-items: stretch;
+    min-height: 0;
+  }
+
+  /* Divided rows — between-row border via `:not(:last-child)` so the final
+     row stays clean. The `data-divided` mirror lives on the root. */
+  .kj-list[data-divided] .kj-list-item {
+    border-radius: 0;
+  }
+  .kj-list[data-divided][data-orientation='vertical'] .kj-list-item:not(:last-child) {
+    border-bottom: var(--kj-border) solid var(--kj-list-border-color);
+  }
+  .kj-list[data-divided][data-orientation='horizontal'] .kj-list-item:not(:last-child) {
+    border-right: var(--kj-border) solid var(--kj-list-border-color);
+  }
+
+  /* Hoverable rows. Cascade order matters: the `:hover` rule comes BEFORE
+     the `[data-active]` rule so the active row wins when both are true. */
+  .kj-list[data-hoverable] .kj-list-item:hover {
+    background: color-mix(in oklab, var(--kj-fg-default) 6%, transparent);
+    cursor: pointer;
+  }
+
+  /* Active row — current location in a nav. Painted via background tint plus
+     a left bar (≥3:1 against background per WCAG 1.4.11). */
+  .kj-list-item[data-active] {
+    background: color-mix(in oklab, var(--kj-bg-primary) 12%, transparent);
+    color: var(--kj-fg-primary);
+    box-shadow: inset 3px 0 0 0 var(--kj-bg-primary);
+  }
+  .kj-list[data-orientation='horizontal'] .kj-list-item[data-active] {
+    box-shadow: inset 0 -3px 0 0 var(--kj-bg-primary);
+  }
+
+  /* Disabled row — dim the chrome and any projected interactive child.
+     Keyboard reachability is the projected child's responsibility. */
+  .kj-list-item[data-disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .kj-list-item[data-disabled] :where(a, button) {
+    pointer-events: none;
+  }
+
+  /* Shared styles for interactive children */
+  .kj-list-item > :where(a, button) {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    color: inherit;
+    text-decoration: none;
+    background: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .kj-list-item:has(
+    > :where(a, button):nth-child(1 of :where(a, button)):nth-last-child(1 of :where(a, button))
+  )
+    > :where(a, button) {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-width: 0;
+    min-height: var(--kj-list-row-min-h);
+    padding: var(--kj-list-row-padding-y) var(--kj-list-row-padding-x);
+    box-sizing: border-box;
+  }
+
+  .kj-list-item > :where(a, button):focus-visible {
+    outline: 2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+    border-radius: var(--kj-list-row-radius);
+  }
+}

package/src/menubar/menubar.css

@@ -0,0 +1,62 @@
+@layer kj.component {
+  .kj-menubar {
+    --kj-menubar-bg:           var(--kj-bg-body);
+    --kj-menubar-fg:           var(--kj-fg-default);
+    --kj-menubar-border-color: var(--kj-border-default);
+    --kj-menubar-radius:       var(--kj-radius-box);
+    --kj-menubar-padding:      var(--kj-space-2xs);
+    --kj-menubar-gap:          var(--kj-space-2xs);
+
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--kj-menubar-gap);
+    box-sizing: border-box;
+    background: var(--kj-menubar-bg);
+    color: var(--kj-menubar-fg);
+    border: var(--kj-border) solid var(--kj-menubar-border-color);
+    border-radius: var(--kj-menubar-radius);
+    padding: var(--kj-menubar-padding);
+    font: 0.875rem / 1.5 var(--kj-font-sans);
+  }
+
+  .kj-menubar-item {
+    --kj-menubar-item-padding-x: var(--kj-space-md);
+    --kj-menubar-item-padding-y: var(--kj-space-xs);
+    --kj-menubar-item-min-height: 2.75rem; /* 44px AAA touch target */
+    --kj-menubar-item-radius:    var(--kj-radius-field);
+    --kj-menubar-item-hover-bg:  var(--kj-bg-surface);
+    --kj-menubar-item-active-bg: var(--kj-bg-elevated);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--kj-menubar-item-min-height);
+    box-sizing: border-box;
+    padding: var(--kj-menubar-item-padding-y) var(--kj-menubar-item-padding-x);
+    margin: 0;
+    background: transparent;
+    color: inherit;
+    border: none;
+    border-radius: var(--kj-menubar-item-radius);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .kj-menubar-item:hover:not([aria-disabled="true"]) {
+    background: var(--kj-menubar-item-hover-bg);
+  }
+  .kj-menubar-item:focus-visible {
+    outline: 2px solid var(--kj-fg-primary);
+    outline-offset: -2px;
+  }
+  .kj-menubar-item[data-state="active"] {
+    background: var(--kj-menubar-item-active-bg);
+  }
+  .kj-menubar-item[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/src/number-input/number-input.css

@@ -0,0 +1,115 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-number-input — wrapper around KjNumberInput + KjNumberStepper.
+
+   Tokens default to shared layer values; the stepper buttons live as
+   sibling buttons inside the group. Bounds-aware aria-disabled is
+   reflected from the directive — CSS only reads the attribute.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-number-input {
+    --kj-number-input-bg:               var(--kj-bg-field);
+    --kj-number-input-fg:               var(--kj-fg-default);
+    --kj-number-input-border-color:     var(--kj-border-default);
+    --kj-number-input-border-width:     var(--kj-border);
+    --kj-number-input-radius:           var(--kj-radius-field);
+    --kj-number-input-padding-x:        var(--kj-space-md);
+    --kj-number-input-font:             var(--kj-font-sans);
+    --kj-number-input-font-size:        var(--kj-text-sm);
+    --kj-number-input-stepper-bg:       var(--kj-bg-surface);
+    --kj-number-input-stepper-fg:       var(--kj-fg-default);
+    --kj-number-input-stepper-size:     2.25rem;
+    /* Same height contract as .kj-input — keep form rows aligned. */
+    --kj-number-input-height:           2.25rem;
+
+    display: inline-flex;
+    align-items: stretch;
+    height: var(--kj-number-input-height);
+    background: var(--kj-number-input-bg);
+    color: var(--kj-number-input-fg);
+    border: var(--kj-number-input-border-width) solid var(--kj-number-input-border-color);
+    border-radius: var(--kj-number-input-radius);
+    overflow: hidden;
+    font: var(--kj-number-input-font-size) / 1.4 var(--kj-number-input-font);
+    transition: var(--kj-transition);
+  }
+  .kj-number-input[data-size="xs"] { --kj-number-input-height: 1.75rem; --kj-number-input-stepper-size: 1.75rem; --kj-number-input-font-size: 0.75rem;   --kj-number-input-padding-x: var(--kj-space-sm); }
+  .kj-number-input[data-size="sm"] { --kj-number-input-height: 2rem;    --kj-number-input-stepper-size: 2rem;    --kj-number-input-font-size: 0.8125rem; }
+  .kj-number-input[data-size="lg"] { --kj-number-input-height: 2.75rem; --kj-number-input-stepper-size: 2.75rem; --kj-number-input-font-size: 1rem; }
+
+  /* At `xs` we hide the stepper buttons — at 28px the +/- glyphs become
+     too cramped to hit accurately, and the typical xs context (filter rows,
+     inline editors) doesn't want a stepper anyway. The keyboard contract
+     (Arrow/Page/Home/End) still works on the inner <input>. */
+  .kj-number-input[data-size="xs"] .kj-number-input__stepper { display: none; }
+  .kj-number-input[data-size="xs"] .kj-number-input__field { text-align: left; }
+
+  .kj-number-input:focus-within {
+    --kj-number-input-border-color: var(--kj-fg-primary);
+    outline: 2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+  }
+
+  .kj-number-input[data-invalid] {
+    --kj-number-input-border-color: var(--kj-fg-danger);
+  }
+
+  .kj-number-input[data-disabled] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .kj-number-input__field {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    background: transparent;
+    color: inherit;
+    border: 0;
+    padding: 0 var(--kj-number-input-padding-x);
+    font: inherit;
+    text-align: right;
+  }
+  .kj-number-input__field:focus { outline: none; }
+  .kj-number-input__field::placeholder { color: var(--kj-fg-muted); }
+
+  .kj-number-input__stepper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--kj-number-input-stepper-size);
+    min-height: var(--kj-number-input-stepper-size);
+    background: var(--kj-number-input-stepper-bg);
+    color: var(--kj-number-input-stepper-fg);
+    border: 0;
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+    transition: background var(--kj-transition), color var(--kj-transition), opacity var(--kj-transition);
+  }
+  .kj-number-input__stepper:hover {
+    background: color-mix(in oklab, var(--kj-fg-default) 8%, var(--kj-number-input-stepper-bg));
+  }
+  .kj-number-input__stepper[aria-disabled="true"] {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Flanking layout (default): decrement | input | increment */
+  .kj-number-input[data-stepper-layout="flanking"] .kj-number-input__stepper--down { order: -1; }
+  .kj-number-input[data-stepper-layout="flanking"] .kj-number-input__stepper--up   { order:  1; }
+
+  /* Stacked layout: input on the left, up / down stacked vertically on the right. */
+  .kj-number-input[data-stepper-layout="stacked"] {
+    align-items: stretch;
+  }
+  .kj-number-input[data-stepper-layout="stacked"] .kj-number-input__steppers {
+    display: flex;
+    flex-direction: column;
+  }
+  .kj-number-input[data-stepper-layout="stacked"] .kj-number-input__stepper {
+    flex: 1 1 auto;
+    min-height: calc(var(--kj-number-input-stepper-size) / 2);
+  }
+}

package/src/overflow/overflow.css

@@ -0,0 +1,43 @@
+/* ─────────────────────────────────────────────────────────────
+   kj-overflow-panel — the "+N" chip's panel (tag list / avatar group).
+   The panel itself is a kj-popover-content; only the default label
+   list and the trigger chips' shared reset live here.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-overflow-panel {
+    --kj-popover-padding-x: var(--kj-space-sm);
+    --kj-popover-padding-y: var(--kj-space-sm);
+    min-width: 10rem;
+  }
+
+  .kj-overflow-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .kj-overflow-item {
+    padding: var(--kj-space-xs) var(--kj-space-sm);
+    font-size: var(--kj-text-sm);
+    line-height: 1.4;
+    color: var(--kj-fg-default);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The "+N" chip is a native <button> so it is focusable and reachable on
+     touch; strip the UA chrome, the group's own chip styles paint it. */
+  .kj-overflow-trigger {
+    appearance: none;
+    font: inherit;
+    cursor: pointer;
+  }
+  .kj-overflow-trigger:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+  }
+}

package/src/overlay/overlay.css

@@ -0,0 +1,45 @@
+/* ─────────────────────────────────────────────────────────────
+   @kouji-ui/components — overlay-family surface stylesheet
+   --------------------------------------------------------------
+   Register this file once in your build, next to the themes and
+   the core overlay primitive:
+
+     "styles": [
+       "node_modules/@kouji-ui/themes/src/index.css",
+       "node_modules/@kouji-ui/core/overlay/overlay.css",
+       "node_modules/@kouji-ui/components/src/overlay/overlay.css"
+     ]
+
+   WHY IT MUST BE REGISTERED. Every overlay panel in the kit is
+   rendered by a HEADLESS directive from `@kouji-ui/core` —
+   `<kj-popover-content>`, `<kj-dropdown-menu-content>`,
+   `<kj-tooltip-content>`, `<kj-dialog-content>`. Directives carry
+   no styles, and Angular injects a component's `styleUrl` only
+   when that component is INSTANTIATED. So a panel composed the
+   documented way (trigger directive + content directive, with no
+   `<kj-popover>`-style wrapper anywhere on the page) used to
+   paint with no background, no border and no shadow: the surface
+   CSS lived solely inside a wrapper component nobody rendered.
+   This stylesheet is that surface CSS, decoupled from the
+   wrappers — the wrapper components still `styleUrl` the same
+   files, so registering it is idempotent.
+
+   Kept in the SOURCE layout on purpose: `ng-packagr` copies every
+   stylesheet under `src` into the published package unchanged, so
+   these relative imports resolve identically from
+   `node_modules/@kouji-ui/components/src/overlay/overlay.css`.
+   The core primitive is NOT imported from here — CSS cannot reach
+   across packages by relative path once installed; register
+   `@kouji-ui/core/overlay/overlay.css` for the container /
+   wrapper / backdrop chrome.
+   ──────────────────────────────────────────────────────────── */
+
+@import "../popover/popover.css";
+@import "../tooltip/tooltip.css";
+@import "../dropdown-menu/dropdown-menu.css";
+@import "../dialog/dialog.css";
+@import "../drawer/drawer.css";
+@import "../toast/toast.css";
+@import "../confirm-popup/confirm-popup.css";
+@import "../sheet/sheet.css";
+@import "../action-sheet/action-sheet.css";

package/src/overlay-badge/overlay-badge.css

@@ -0,0 +1,118 @@
+@layer kj.component {
+  .kj-overlay-badge-anchor {
+    /* The anchor is also the positioning context. `position: relative` is
+       inline-style-bound by `KjOverlayBadge`; we add the inline-flex layout
+       here so projected anchors keep their inline rhythm. */
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  .kj-overlay-badge {
+    /* Visual chrome inherited from <kj-badge>. We re-apply the same token
+       set here so the slot renders identically whether the consumer uses
+       <kj-overlay-badge> or projects a manual <span kjOverlayBadgeContent>. */
+    --kj-badge-bg:           var(--kj-bg-primary);
+    --kj-badge-fg:           var(--kj-fg-on-primary);
+    --kj-badge-border-color: transparent;
+    --kj-badge-radius:       var(--kj-radius-selector);
+    --kj-badge-padding-x:    var(--kj-space-sm);
+    --kj-badge-padding-y:    0.125rem;
+    --kj-badge-font-size:    0.6875rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    background: var(--kj-badge-bg);
+    color: var(--kj-badge-fg);
+    border: var(--kj-border) solid var(--kj-badge-border-color);
+    border-radius: var(--kj-badge-radius);
+    padding: var(--kj-badge-padding-y) var(--kj-badge-padding-x);
+    font: var(--kj-badge-font-size) / 1 var(--kj-font-sans);
+    font-weight: 600;
+
+    /* 2px halo against the anchor for WCAG 1.4.11 non-text contrast — the
+       badge is a small element sitting on top of arbitrary surfaces. */
+    box-shadow: 0 0 0 2px var(--kj-bg-body);
+
+    /* Logical-property positioning so RTL flips for free. The translate
+       pulls the badge half-out of the anchor at each corner — keeps the
+       majority of the chip visible above an avatar's overflow mask, etc. */
+    inset-block-start: auto;
+    inset-block-end:   auto;
+    inset-inline-start: auto;
+    inset-inline-end:   auto;
+  }
+
+  /* Variant overrides — mirror <kj-badge>'s data-variant rules. */
+  .kj-overlay-badge[data-variant="secondary"] {
+    --kj-badge-bg: var(--kj-bg-surface);
+    --kj-badge-fg: var(--kj-fg-default);
+  }
+  .kj-overlay-badge[data-variant="destructive"] {
+    --kj-badge-bg: var(--kj-bg-danger);
+    --kj-badge-fg: var(--kj-fg-on-danger);
+  }
+  .kj-overlay-badge[data-variant="outline"] {
+    --kj-badge-bg: transparent;
+    --kj-badge-fg: var(--kj-fg-default);
+    --kj-badge-border-color: var(--kj-border-default);
+  }
+
+  /* Sizes. */
+  .kj-overlay-badge[data-size="sm"] {
+    min-width: 1rem;
+    height: 1rem;
+    --kj-badge-font-size: 0.625rem;
+    --kj-badge-padding-x: 0.25rem;
+  }
+  .kj-overlay-badge[data-size="lg"] {
+    min-width: 1.5rem;
+    height: 1.5rem;
+    --kj-badge-font-size: 0.75rem;
+    --kj-badge-padding-x: 0.5rem;
+  }
+
+  /* Dot mode — fixed 0.5rem circle, no padding, no min-width. */
+  .kj-overlay-badge[data-dot] {
+    min-width: 0;
+    width: 0.625rem;
+    height: 0.625rem;
+    padding: 0;
+    border-radius: 9999px;
+  }
+  .kj-overlay-badge[data-dot][data-size="sm"] { width: 0.5rem;  height: 0.5rem; }
+  .kj-overlay-badge[data-dot][data-size="lg"] { width: 0.75rem; height: 0.75rem; }
+
+  /* Logical-corner placement. RTL flips automatically because we use
+     inline-start / inline-end. */
+  .kj-overlay-badge[data-position="top-end"] {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    transform: translate(50%, -50%);
+  }
+  .kj-overlay-badge[data-position="top-start"] {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    transform: translate(-50%, -50%);
+  }
+  .kj-overlay-badge[data-position="bottom-end"] {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    transform: translate(50%, 50%);
+  }
+  .kj-overlay-badge[data-position="bottom-start"] {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    transform: translate(-50%, 50%);
+  }
+
+  /* RTL inverts the inline-axis translation so the badge stays outside the
+     anchor's edge rather than tucking inward. Logical insets handle the
+     position itself; only the translate sign needs flipping. */
+  [dir="rtl"] .kj-overlay-badge[data-position="top-end"]    { transform: translate(-50%, -50%); }
+  [dir="rtl"] .kj-overlay-badge[data-position="top-start"]  { transform: translate(50%,  -50%); }
+  [dir="rtl"] .kj-overlay-badge[data-position="bottom-end"] { transform: translate(-50%, 50%); }
+  [dir="rtl"] .kj-overlay-badge[data-position="bottom-start"] { transform: translate(50%, 50%); }
+}