@kouji-ui/components 0.9.2 → 0.9.3

package/src/toggle/toggle.css

@@ -0,0 +1,123 @@
+@layer kj.component {
+  .kj-toggle {
+    --kj-toggle-bg:           var(--kj-bg-surface);
+    --kj-toggle-bg-pressed:   var(--kj-bg-primary);
+    --kj-toggle-fg:           var(--kj-fg-default);
+    --kj-toggle-fg-pressed:   var(--kj-fg-on-primary);
+    --kj-toggle-radius:       var(--kj-radius-field);
+    --kj-toggle-padding-x:    var(--kj-space-md);
+    --kj-toggle-padding-y:    var(--kj-space-sm);
+    --kj-toggle-font-size:    var(--kj-text-sm);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    background: var(--kj-toggle-bg);
+    color: var(--kj-toggle-fg);
+    border: var(--kj-border) solid transparent;
+    border-radius: var(--kj-toggle-radius);
+    padding: var(--kj-toggle-padding-y) var(--kj-toggle-padding-x);
+    font: var(--kj-toggle-font-size) / 1.2 var(--kj-font-sans);
+    cursor: pointer;
+    transition: var(--kj-transition);
+  }
+
+  .kj-toggle[data-pressed] {
+    background: var(--kj-toggle-bg-pressed);
+    color: var(--kj-toggle-fg-pressed);
+  }
+
+  .kj-toggle[data-size="sm"] {
+    --kj-toggle-padding-x: var(--kj-space-sm);
+    --kj-toggle-padding-y: 0.25rem;
+    --kj-toggle-font-size: 0.8125rem;
+  }
+  .kj-toggle[data-size="lg"] {
+    --kj-toggle-padding-x: var(--kj-space-lg);
+    --kj-toggle-padding-y: 0.625rem;
+    --kj-toggle-font-size: 1rem;
+  }
+
+  .kj-toggle:hover { background: color-mix(in oklab, var(--kj-toggle-bg) 88%, black); }
+  .kj-toggle:focus-visible { outline: 2px solid var(--kj-bg-primary); outline-offset: 2px; }
+  .kj-toggle[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+
+  /* ── Switch appearance — track + thumb sliding switch ────────────
+     Matches design-revamp/kouji-ui/project/app.css `.toggle` block
+     (lines 447–471): 44×24 rounded track, 18×18 thumb at top:2 left:2,
+     translateX(20px) on pressed. Tokenised throughout (no hex). */
+  .kj-toggle--switch {
+    --kj-switch-w: 44px;
+    --kj-switch-h: 24px;
+    --kj-switch-thumb: 18px;
+    --kj-switch-pad: 2px;
+
+    background: transparent;
+    border: 0;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    font-family: var(--kj-font-sans);
+    font-size: var(--kj-text-sm);
+    color: var(--kj-fg-default);
+  }
+  .kj-toggle--switch:hover { background: transparent; }
+  .kj-toggle--switch:focus-visible { outline: none; }
+  .kj-toggle--switch:focus-visible .kj-toggle__track {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+  }
+
+  /* Track + thumb corner geometry follows the theme. kouji (radius 0)
+     renders a square track + square thumb; sakura/dune (large radii)
+     render fully pill; everyone in between scales. Falls back to the
+     pill-shape (radius = track height) when --kj-radius-selector
+     resolves to 0 only on themes where that's the brand decision. */
+  .kj-toggle--switch {
+    --kj-switch-track-radius: var(--kj-radius-selector, var(--kj-switch-h));
+    --kj-switch-thumb-radius: calc(var(--kj-switch-track-radius) - var(--kj-switch-pad));
+  }
+
+  .kj-toggle__track {
+    width: var(--kj-switch-w);
+    height: var(--kj-switch-h);
+    border-radius: var(--kj-switch-track-radius);
+    background-color: var(--kj-bg-surface);
+    border: var(--kj-border) solid var(--kj-border-default);
+    position: relative;
+    flex-shrink: 0;
+    transition: background-color 0.25s cubic-bezier(.34, 1.56, .64, 1);
+  }
+
+  .kj-toggle__thumb {
+    position: absolute;
+    top: var(--kj-switch-pad);
+    left: var(--kj-switch-pad);
+    width: var(--kj-switch-thumb);
+    height: var(--kj-switch-thumb);
+    /* Mirror the track's radius so square themes stay square, soft themes
+       stay round. `max(0, ...)` keeps the result non-negative on kouji
+       (radius 0). */
+    border-radius: max(0px, var(--kj-switch-thumb-radius));
+    background-color: var(--kj-fg-default);
+    transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1),
+                background-color 0.25s cubic-bezier(.34, 1.56, .64, 1);
+  }
+
+  .kj-toggle--switch[aria-pressed="true"] .kj-toggle__track,
+  .kj-toggle--switch[data-pressed] .kj-toggle__track {
+    background-color: var(--kj-bg-primary);
+    border-color: var(--kj-bg-primary);
+  }
+  .kj-toggle--switch[aria-pressed="true"] .kj-toggle__thumb,
+  .kj-toggle--switch[data-pressed] .kj-toggle__thumb {
+    transform: translateX(calc(var(--kj-switch-w) - var(--kj-switch-h)));
+    background-color: var(--kj-fg-on-primary);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-toggle__track,
+    .kj-toggle__thumb { transition: none; }
+  }
+}

package/src/tooltip/tooltip.css

@@ -0,0 +1,61 @@
+@layer kj.component {
+  /* The wrapper hosts use display: contents — they don't add a box. */
+
+  .kj-tooltip-content {
+    --kj-tooltip-bg:           var(--kj-fg-default);
+    --kj-tooltip-fg:           var(--kj-bg-body);
+    --kj-tooltip-border-color: transparent;
+    --kj-tooltip-radius:       var(--kj-radius-selector);
+    --kj-tooltip-padding-x:    var(--kj-space-md);
+    --kj-tooltip-padding-y:    var(--kj-space-xs);
+    --kj-tooltip-font-size:    0.8125rem;
+    --kj-tooltip-shadow:       var(--kj-shadow-md, 0 4px 12px rgb(0 0 0 / 0.18));
+    --kj-tooltip-arrow-size:   6px;
+
+    /* Layout — the directive applies position: fixed and writes top/left. */
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    max-width: min(20rem, calc(100vw - 1rem));
+    background: var(--kj-tooltip-bg);
+    color: var(--kj-tooltip-fg);
+    border: var(--kj-border) solid var(--kj-tooltip-border-color);
+    border-radius: var(--kj-tooltip-radius);
+    padding: var(--kj-tooltip-padding-y) var(--kj-tooltip-padding-x);
+    font: var(--kj-tooltip-font-size) / 1.4 var(--kj-font-sans);
+    box-shadow: var(--kj-tooltip-shadow);
+    pointer-events: auto;
+    z-index: var(--kj-overlay-z, 1000);
+    word-wrap: break-word;
+  }
+
+  /* Closed: KjOverlayPanel sets `hidden` when state is closed — keep portaled panel out of layout.
+     Load this stylesheet globally when using KjTooltipTrigger + kj-tooltip-content from core
+     (see packages/core tooltip finance example; avoid duplicating `[hidden]` in app CSS). */
+  /* Must win over any app-level tooltip overrides (e.g. encapsulation + extra classes). */
+  .kj-tooltip-content[hidden] {
+    display: none !important;
+  }
+
+  /* Arrow positioning relative to the content's resolved data-side. */
+  .kj-tooltip-arrow {
+    position: absolute;
+    width: var(--kj-tooltip-arrow-size);
+    height: var(--kj-tooltip-arrow-size);
+    background: var(--kj-tooltip-bg);
+    transform: rotate(45deg);
+  }
+
+  .kj-tooltip-content[data-side="top"]    .kj-tooltip-arrow { bottom: calc(var(--kj-tooltip-arrow-size) / -2); left: 50%; margin-left: calc(var(--kj-tooltip-arrow-size) / -2); }
+  .kj-tooltip-content[data-side="bottom"] .kj-tooltip-arrow { top:    calc(var(--kj-tooltip-arrow-size) / -2); left: 50%; margin-left: calc(var(--kj-tooltip-arrow-size) / -2); }
+  .kj-tooltip-content[data-side="left"]   .kj-tooltip-arrow { right:  calc(var(--kj-tooltip-arrow-size) / -2); top:  50%; margin-top:  calc(var(--kj-tooltip-arrow-size) / -2); }
+  .kj-tooltip-content[data-side="right"]  .kj-tooltip-arrow { left:   calc(var(--kj-tooltip-arrow-size) / -2); top:  50%; margin-top:  calc(var(--kj-tooltip-arrow-size) / -2); }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-tooltip-content {
+      transition: opacity 120ms ease-out;
+    }
+    .kj-tooltip-content[data-state="closed"] { opacity: 0; }
+    .kj-tooltip-content[data-state="open"]   { opacity: 1; }
+  }
+}

package/src/tree-select/tree-select.css

@@ -0,0 +1,220 @@
+@layer kj.component {
+  /* ── Root ──────────────────────────────────────────────────────────── */
+  .kj-tree-select {
+    position: relative;
+    display: inline-block;
+    min-width: 14rem;
+  }
+
+  /* ── Trigger ───────────────────────────────────────────────────────── */
+  .kj-tree-select-trigger {
+    width: 100%;
+    min-height: 2.75rem; /* WCAG 2.5.5 — 44px touch target */
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kj-space-sm);
+    background: var(--kj-bg-body);
+    color: var(--kj-fg-default);
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    font: 0.875rem var(--kj-font-sans);
+    cursor: pointer;
+    text-align: left;
+  }
+  .kj-tree-select-trigger:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+  }
+  .kj-tree-select[data-disabled] .kj-tree-select-trigger {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .kj-tree-select-trigger-label {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  /* Placeholder styling — when nothing is selected the label matches placeholder color */
+  .kj-tree-select[data-empty] .kj-tree-select-trigger-label,
+  .kj-tree-select:not([data-has-value]) .kj-tree-select-trigger-label {
+    color: color-mix(in oklab, var(--kj-fg-default) 55%, transparent);
+  }
+
+  .kj-tree-select-caret {
+    flex-shrink: 0;
+    color: color-mix(in oklab, var(--kj-fg-default) 60%, transparent);
+    font-size: 0.75rem;
+    transition: transform var(--kj-transition, 150ms ease);
+  }
+  .kj-tree-select[data-open] .kj-tree-select-caret {
+    transform: rotate(180deg);
+  }
+
+  /* ── Panel ─────────────────────────────────────────────────────────── */
+  .kj-tree-select-panel {
+    box-sizing: border-box;
+    min-width: 14rem;
+    width: max-content;
+    background: var(--kj-bg-elevated);
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    box-shadow: var(--kj-shadow-md, 0 8px 24px rgb(0 0 0 / 0.12));
+    padding: 4px;
+    max-height: 18rem;
+    overflow: auto;
+    z-index: var(--kj-overlay-z, 100);
+  }
+  .kj-tree-select-panel[hidden] {
+    display: none;
+  }
+
+  .kj-tree-select-empty {
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    color: color-mix(in oklab, var(--kj-fg-default) 55%, transparent);
+    font: 0.875rem var(--kj-font-sans);
+  }
+
+  /* ── Node row ──────────────────────────────────────────────────────── */
+  .kj-tree-select-node {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-xs);
+    border-radius: var(--kj-radius-selector);
+    cursor: pointer;
+    color: var(--kj-fg-default);
+    font: 0.875rem var(--kj-font-sans);
+    min-height: 2.25rem; /* WCAG 2.5.5 — 36px is acceptable within a scrollable list */
+    outline: none;
+    /* padding-inline-start is set via inline style per-level */
+    padding-block: var(--kj-space-xs);
+    padding-inline-end: var(--kj-space-md);
+  }
+  .kj-tree-select-node:hover {
+    background: var(--kj-bg-surface);
+  }
+  .kj-tree-select-node:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: -2px;
+    background: var(--kj-bg-surface);
+  }
+  .kj-tree-select-node[data-selected] {
+    background: color-mix(in oklab, var(--kj-bg-primary) 12%, transparent);
+    color: var(--kj-fg-primary);
+  }
+  .kj-tree-select-node[data-selected]:hover {
+    background: color-mix(in oklab, var(--kj-bg-primary) 18%, transparent);
+  }
+  .kj-tree-select-node[aria-disabled='true'] {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Collapsed children are hidden via [hidden] attribute */
+  .kj-tree-select-node[hidden] {
+    display: none;
+  }
+
+  /* ── Toggle button ─────────────────────────────────────────────────── */
+  .kj-tree-select-toggle {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    color: color-mix(in oklab, var(--kj-fg-default) 60%, transparent);
+    border-radius: var(--kj-radius-selector);
+  }
+  .kj-tree-select-toggle:hover {
+    background: color-mix(in oklab, var(--kj-fg-default) 10%, transparent);
+  }
+
+  .kj-tree-select-toggle-icon {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    /* Collapsed: right-pointing triangle */
+    border-width: 4px 0 4px 7px;
+    border-color: transparent transparent transparent currentColor;
+    transition: transform var(--kj-transition, 150ms ease);
+  }
+  .kj-tree-select-node[data-expanded='true'] .kj-tree-select-toggle-icon {
+    /* Expanded: downward triangle */
+    transform: rotate(90deg);
+  }
+
+  /* Indent spacer for leaf nodes (keeps labels aligned with branch labels) */
+  .kj-tree-select-indent {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    display: inline-block;
+  }
+
+  .kj-tree-select-label {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* ── Checkbox (multi mode — tri-state via aria-checked) ─────────────── */
+  .kj-tree-select-checkbox {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-selector);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    line-height: 1;
+    /* Visual breathing room between the checkbox and the label so the
+       glyph never butts up against the text. The container's `gap`
+       handles the toggle ↔ checkbox spacing; this rule owns checkbox ↔
+       label specifically. */
+    margin-inline-end: var(--kj-space-sm);
+  }
+  /* Checked (cascade: all leaf descendants selected, or this is a
+     selected leaf). */
+  .kj-tree-select-node[aria-checked='true'] .kj-tree-select-checkbox {
+    background: var(--kj-bg-primary);
+    border-color: var(--kj-bg-primary);
+    color: var(--kj-fg-on-primary);
+  }
+  .kj-tree-select-node[aria-checked='true'] .kj-tree-select-checkbox::before {
+    content: '✓';
+  }
+  /* Indeterminate (cascade: some — but not all — leaf descendants
+     selected). Renders a dash glyph and keeps the primary fill so
+     screen-reader users hearing `aria-checked="mixed"` see the same
+     state visually. */
+  .kj-tree-select-node[aria-checked='mixed'] .kj-tree-select-checkbox {
+    background: var(--kj-bg-primary);
+    border-color: var(--kj-bg-primary);
+    color: var(--kj-fg-on-primary);
+  }
+  .kj-tree-select-node[aria-checked='mixed'] .kj-tree-select-checkbox::before {
+    content: '−'; /* U+2212 minus, not a hyphen */
+  }
+  /* Row highlight for fully checked branches/leaves in cascade mode. */
+  .kj-tree-select-node[aria-checked='true'] {
+    background: color-mix(in oklab, var(--kj-bg-primary) 12%, transparent);
+    color: var(--kj-fg-primary);
+  }
+  .kj-tree-select-node[aria-checked='true']:hover {
+    background: color-mix(in oklab, var(--kj-bg-primary) 18%, transparent);
+  }
+}