@kouji-ui/components 0.9.2 → 0.9.4

package/src/pagination/pagination.css

@@ -0,0 +1,146 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-pagination — component-layer tokens + structural CSS
+   The directive family reflects state via `data-current` /
+   `data-disabled` / `aria-current` / `aria-disabled` /
+   `data-pagination-action` — every selector here keys off those.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-pagination {
+    /* component knobs — themes/users can override any of these */
+    --kj-pagination-gap:                  var(--kj-space-xs);
+    --kj-pagination-item-size:            2.75rem; /* 44px — WCAG 2.5.5 */
+    --kj-pagination-item-radius:          var(--kj-radius-field);
+    --kj-pagination-item-bg:              transparent;
+    --kj-pagination-item-bg-hover:        var(--kj-bg-surface);
+    --kj-pagination-item-bg-current:      var(--kj-bg-primary);
+    --kj-pagination-item-fg:              var(--kj-fg-default);
+    --kj-pagination-item-fg-current:      var(--kj-fg-on-primary);
+    --kj-pagination-item-border-color:    var(--kj-border-default);
+    --kj-pagination-item-border-width:    var(--kj-border);
+    --kj-pagination-item-font:            var(--kj-font-sans);
+    --kj-pagination-item-font-size:       var(--kj-text-sm);
+    --kj-pagination-ellipsis-color:       var(--kj-fg-default);
+    --kj-pagination-info-color:           var(--kj-fg-default);
+
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--kj-pagination-gap);
+    color: var(--kj-fg-default);
+  }
+
+  /* Numeric items + boundary controls share the same visual chrome —
+     the `.kj-pagination-action` class names map to Previous / Next /
+     First / Last so consumers can target them individually if needed. */
+  .kj-pagination-item,
+  .kj-pagination-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--kj-pagination-item-size);
+    min-height: var(--kj-pagination-item-size);
+    padding: 0 var(--kj-space-sm);
+    background: var(--kj-pagination-item-bg);
+    color: var(--kj-pagination-item-fg);
+    border: var(--kj-pagination-item-border-width) solid var(--kj-pagination-item-border-color);
+    border-radius: var(--kj-pagination-item-radius);
+    font: var(--kj-pagination-item-font-size) / 1.2 var(--kj-pagination-item-font);
+    cursor: pointer;
+    user-select: none;
+    transition: var(--kj-transition);
+  }
+
+  .kj-pagination-item:hover,
+  .kj-pagination-action:hover {
+    background: var(--kj-pagination-item-bg-hover);
+  }
+
+  .kj-pagination-item:focus-visible,
+  .kj-pagination-action:focus-visible {
+    outline: 2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+  }
+
+  /* Active page — keep the touch target intact (don't shrink the active
+     state). The directive reflects `aria-current="page"` and
+     `data-current="true"`; we key off `aria-current` for AT correctness. */
+  .kj-pagination-item[aria-current='page'] {
+    background: var(--kj-pagination-item-bg-current);
+    color: var(--kj-pagination-item-fg-current);
+    border-color: var(--kj-pagination-item-bg-current);
+    cursor: default;
+  }
+  .kj-pagination-item[aria-current='page']:hover {
+    background: var(--kj-pagination-item-bg-current);
+  }
+
+  /* Disabled — `aria-disabled="true"` rather than the native attribute,
+     so the control stays focusable (kouji's WCAG 2.1 AAA stance). */
+  .kj-pagination-item[aria-disabled='true'],
+  .kj-pagination-action[aria-disabled='true'] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  .kj-pagination-item[aria-disabled='true']:hover,
+  .kj-pagination-action[aria-disabled='true']:hover {
+    background: var(--kj-pagination-item-bg);
+  }
+
+  /* Ellipsis is non-interactive — no hover, no border, no touch target. */
+  .kj-pagination-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--kj-pagination-item-size);
+    min-height: var(--kj-pagination-item-size);
+    color: var(--kj-pagination-ellipsis-color);
+    user-select: none;
+  }
+
+  /* Info span — AT-readable, visible. */
+  .kj-pagination-info {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--kj-space-sm);
+    color: var(--kj-pagination-info-color);
+    font: var(--kj-pagination-item-font-size) / 1.2 var(--kj-pagination-item-font);
+  }
+
+  /* ── Variants ──────────────────────────────────────────────── */
+  /* The root cascades `data-variant` to children via the context; each
+     child's KjVariant host directive reflects its own. We target the
+     children directly so the wrapper variant flows through. */
+
+  .kj-pagination-item[data-variant='outline'],
+  .kj-pagination-action[data-variant='outline'] {
+    --kj-pagination-item-bg: transparent;
+    --kj-pagination-item-border-color: var(--kj-border-default);
+  }
+
+  .kj-pagination-item[data-variant='ghost'],
+  .kj-pagination-action[data-variant='ghost'] {
+    --kj-pagination-item-bg: transparent;
+    --kj-pagination-item-border-color: transparent;
+  }
+
+  /* ── Sizes ─────────────────────────────────────────────────── */
+  .kj-pagination-item[data-size='xs'],
+  .kj-pagination-action[data-size='xs'] {
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    --kj-pagination-item-font-size: 0.75rem;
+  }
+  .kj-pagination-item[data-size='sm'],
+  .kj-pagination-action[data-size='sm'] {
+    min-width: 2rem;
+    min-height: 2rem;
+    --kj-pagination-item-font-size: 0.8125rem;
+  }
+  .kj-pagination-item[data-size='lg'],
+  .kj-pagination-action[data-size='lg'] {
+    min-width: 3rem;
+    min-height: 3rem;
+    --kj-pagination-item-font-size: 1rem;
+  }
+}

package/src/password-input/password-input.css

@@ -0,0 +1,155 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-password-input — component-layer tokens + structural CSS
+   Same pattern as input.css / button.css: tokens default to the
+   shared layer; variants/states retarget the component tokens.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-password-input {
+    --kj-password-input-bg:               var(--kj-bg-field);
+    --kj-password-input-fg:               var(--kj-fg-default);
+    --kj-password-input-border-color:     var(--kj-border-default);
+    --kj-password-input-border-style:     solid;
+    --kj-password-input-border-width:     var(--kj-border);
+    --kj-password-input-radius:           var(--kj-radius-field);
+    --kj-password-input-padding-x:        var(--kj-space-md);
+    --kj-password-input-padding-y:        var(--kj-space-sm);
+    --kj-password-input-font:             var(--kj-font-sans);
+    --kj-password-input-font-size:        var(--kj-text-sm);
+    --kj-password-input-placeholder-fg:   var(--kj-fg-muted);
+    --kj-password-input-toggle-fg:        var(--kj-fg-muted);
+    --kj-password-input-toggle-fg-hover:  var(--kj-fg-default);
+    /* Explicit height contract (same pattern as input.css / button.css) so
+       password-input lines up with sibling inputs in a form row. */
+    --kj-password-input-height:           2.25rem;
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-space-xs);
+    inline-size: 100%;
+    height: var(--kj-password-input-height);
+    background: var(--kj-password-input-bg);
+    color: var(--kj-password-input-fg);
+    border: var(--kj-password-input-border-width)
+            var(--kj-password-input-border-style)
+            var(--kj-password-input-border-color);
+    border-radius: var(--kj-password-input-radius);
+    padding: 0 var(--kj-password-input-padding-x);
+    font: var(--kj-password-input-font-size) / 1.4 var(--kj-password-input-font);
+    transition: var(--kj-transition);
+  }
+  .kj-password-input[data-size="sm"] { --kj-password-input-height: 2rem;    --kj-password-input-font-size: 0.8125rem; }
+  .kj-password-input[data-size="lg"] { --kj-password-input-height: 2.75rem; --kj-password-input-font-size: 1rem; }
+
+  .kj-password-input__field {
+    flex: 1 1 auto;
+    inline-size: 100%;
+    height: 100%;
+    background: transparent;
+    color: inherit;
+    border: 0;
+    outline: 0;
+    padding: 0;
+    font: inherit;
+  }
+  .kj-password-input__field::placeholder {
+    color: var(--kj-password-input-placeholder-fg);
+  }
+
+  .kj-password-input:focus-within {
+    outline: 2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+    --kj-password-input-border-color: var(--kj-fg-primary);
+  }
+  .kj-password-input:has([aria-invalid="true"]) {
+    --kj-password-input-border-color: var(--kj-fg-danger);
+  }
+  .kj-password-input:has([aria-disabled="true"]),
+  .kj-password-input:has(:disabled) {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  /* eye-icon toggle button: ghost, square, in-row */
+  .kj-password-input__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    margin-inline-start: var(--kj-space-xs);
+    color: var(--kj-password-input-toggle-fg);
+    background: transparent;
+    border: 0;
+    border-radius: var(--kj-radius-field);
+    cursor: pointer;
+  }
+  .kj-password-input__toggle:hover,
+  .kj-password-input__toggle:focus-visible {
+    color: var(--kj-password-input-toggle-fg-hover);
+  }
+  .kj-password-input__toggle:focus-visible {
+    outline: 2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+  }
+
+  .kj-password-input__icon {
+    inline-size: 1rem;
+    block-size: 1rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* strength meter — 4-segment bar, colour ramp owned here */
+  .kj-password-strength {
+    display: flex;
+    gap: var(--kj-space-xs);
+    inline-size: 100%;
+    margin-block-start: var(--kj-space-xs);
+  }
+  .kj-password-strength__seg {
+    flex: 1 1 0;
+    block-size: 0.25rem;
+    background: var(--kj-bg-surface);
+    border-radius: 2px;
+    transition: background-color var(--kj-transition);
+  }
+  .kj-password-strength[data-score="1"] .kj-password-strength__seg:nth-child(-n+1),
+  .kj-password-strength[data-score="2"] .kj-password-strength__seg:nth-child(-n+2),
+  .kj-password-strength[data-score="3"] .kj-password-strength__seg:nth-child(-n+3),
+  .kj-password-strength[data-score="4"] .kj-password-strength__seg:nth-child(-n+4) {
+    background: var(--kj-password-strength-color, var(--kj-bg-primary));
+  }
+  .kj-password-strength[data-score="1"] {
+    --kj-password-strength-color: var(--kj-bg-danger);
+  }
+  .kj-password-strength[data-score="2"] {
+    --kj-password-strength-color: var(--kj-bg-warning, #d97706);
+  }
+  .kj-password-strength[data-score="3"] {
+    --kj-password-strength-color: var(--kj-bg-success, #059669);
+  }
+  .kj-password-strength[data-score="4"] {
+    --kj-password-strength-color: var(--kj-bg-success, #059669);
+  }
+
+  .kj-password-strength__label {
+    display: block;
+    margin-block-start: var(--kj-space-xs);
+    font-size: var(--kj-text-xs);
+    color: var(--kj-fg-muted);
+  }
+
+  .kj-password-caps-lock-warning {
+    display: block;
+    margin-block-start: var(--kj-space-xs);
+    font-size: var(--kj-text-xs);
+    color: var(--kj-fg-warning, #d97706);
+  }
+  .kj-password-caps-lock-warning[hidden] {
+    display: none;
+  }
+}

package/src/popover/popover.css

@@ -0,0 +1,71 @@
+@layer kj.component {
+  /* The wrapper hosts use display: contents — they don't add a box. The
+     panel is portal-mounted to <body> by the underlying directive; the
+     `.kj-popover-content` class lands on the panel via `kjPanelClass`. */
+
+  .kj-popover-content {
+    --kj-popover-bg:           var(--kj-bg-elevated);
+    --kj-popover-fg:           var(--kj-fg-default);
+    --kj-popover-border-color: var(--kj-border-default);
+    --kj-popover-radius:       var(--kj-radius-box);
+    --kj-popover-padding-x:    var(--kj-space-md);
+    --kj-popover-padding-y:    var(--kj-space-md);
+    --kj-popover-shadow:       var(--kj-shadow-md, 0 12px 32px rgb(0 0 0 / 0.18));
+    --kj-popover-arrow-size:   8px;
+
+    /* Layout — the directive applies position: fixed and writes top/left. */
+    display: block;
+    box-sizing: border-box;
+    max-width: min(28rem, calc(100vw - 2rem));
+    background: var(--kj-popover-bg);
+    color: var(--kj-popover-fg);
+    border: var(--kj-border) solid var(--kj-popover-border-color);
+    border-radius: var(--kj-popover-radius);
+    padding: var(--kj-popover-padding-y) var(--kj-popover-padding-x);
+    font: 0.875rem / 1.5 var(--kj-font-sans);
+    box-shadow: var(--kj-popover-shadow);
+    pointer-events: auto;
+    z-index: var(--kj-overlay-z, 1000);
+    word-wrap: break-word;
+  }
+
+  .kj-popover-content[hidden] { display: none; }
+
+  .kj-popover-title {
+    display: block;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    margin: 0 0 var(--kj-space-xs);
+    color: var(--kj-fg-default);
+  }
+
+  /* Arrow positioning relative to the panel's resolved data-side. */
+  .kj-popover-arrow {
+    position: absolute;
+    width: var(--kj-popover-arrow-size, 8px);
+    height: var(--kj-popover-arrow-size, 8px);
+    background: var(--kj-popover-bg, var(--kj-bg-elevated));
+    border: var(--kj-border) solid var(--kj-popover-border-color, var(--kj-border-default));
+    transform: rotate(45deg);
+  }
+
+  .kj-popover-content[data-side="top"]    .kj-popover-arrow { bottom: calc(var(--kj-popover-arrow-size) / -2); left: 50%; margin-left: calc(var(--kj-popover-arrow-size) / -2); border-top-color: transparent; border-left-color: transparent; }
+  .kj-popover-content[data-side="bottom"] .kj-popover-arrow { top:    calc(var(--kj-popover-arrow-size) / -2); left: 50%; margin-left: calc(var(--kj-popover-arrow-size) / -2); border-bottom-color: transparent; border-right-color: transparent; }
+  .kj-popover-content[data-side="left"]   .kj-popover-arrow { right:  calc(var(--kj-popover-arrow-size) / -2); top:  50%; margin-top:  calc(var(--kj-popover-arrow-size) / -2); border-left-color: transparent; border-bottom-color: transparent; }
+  .kj-popover-content[data-side="right"]  .kj-popover-arrow { left:   calc(var(--kj-popover-arrow-size) / -2); top:  50%; margin-top:  calc(var(--kj-popover-arrow-size) / -2); border-right-color: transparent; border-top-color: transparent; }
+
+  /* Modal-mode body scroll lock. Multiple stacked modals coordinate via
+     a counter in KjOverlayService; this just hides body overflow when the
+     attribute is present. */
+  body[data-kj-scroll-lock="true"] {
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-popover-content {
+      transition: opacity 140ms ease-out, transform 140ms ease-out;
+    }
+    .kj-popover-content[data-state="closed"] { opacity: 0; transform: scale(0.98); }
+    .kj-popover-content[data-state="open"]   { opacity: 1; transform: scale(1); }
+  }
+}

package/src/progress-bar/progress-bar.css

@@ -0,0 +1,113 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-progress-bar — component-layer tokens + structural CSS
+   The directive owns the value math + ARIA contract. The theme
+   only renders track + fill. Variant tokens flip the fill colour;
+   size tokens flip the bar height. The indeterminate stripe is a
+   pure CSS animation, neutralised under prefers-reduced-motion.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-progress-bar {
+    /* component knobs — themes/users can override any of these */
+    --kj-progress-bar-track:        var(--kj-bg-field);
+    --kj-progress-bar-fill:         var(--kj-bg-primary);
+    --kj-progress-bar-radius:       9999px;
+    --kj-progress-bar-height:       0.5rem; /* md default — 8px */
+    --kj-progress-bar-transition:   200ms ease-out;
+    --kj-progress-bar-indeterminate-duration: 1.6s;
+
+    display: block;
+    position: relative;
+    width: 100%;
+    height: var(--kj-progress-bar-height);
+    background: var(--kj-progress-bar-track);
+    border-radius: var(--kj-progress-bar-radius);
+    overflow: hidden;
+  }
+
+  /* ── Sizes ── (data-size mirrored by KjSize host directive) */
+  .kj-progress-bar[data-size="xs"] { --kj-progress-bar-height: 0.125rem; } /* 2px */
+  .kj-progress-bar[data-size="sm"] { --kj-progress-bar-height: 0.25rem; }  /* 4px */
+  .kj-progress-bar[data-size="md"] { --kj-progress-bar-height: 0.5rem; }   /* 8px */
+  .kj-progress-bar[data-size="lg"] { --kj-progress-bar-height: 0.75rem; }  /* 12px */
+
+  /* ── Variants ── (data-variant mirrored by KjVariant host directive) */
+  .kj-progress-bar[data-variant="primary"] { --kj-progress-bar-fill: var(--kj-bg-primary); }
+  .kj-progress-bar[data-variant="success"] { --kj-progress-bar-fill: var(--kj-bg-success); }
+  .kj-progress-bar[data-variant="warning"] { --kj-progress-bar-fill: var(--kj-bg-warning); }
+  .kj-progress-bar[data-variant="error"]   { --kj-progress-bar-fill: var(--kj-bg-danger); }
+
+  /* ── Fill (determinate) ──
+     The directive sets --kj-progress-fraction (0..1) on the host AND on the
+     fill. Reading from the fill is one selector hop shorter and lets us scope
+     the transition cleanly. */
+  .kj-progress-bar__fill {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: var(--kj-progress-bar-fill);
+    border-radius: inherit;
+    transform-origin: left center;
+    transform: scaleX(var(--kj-progress-fraction, 0));
+    /* Transition the fill width on value changes — but never the colour, so
+       a variant flip mid-flight is instantaneous. */
+    transition: transform var(--kj-progress-bar-transition);
+  }
+
+  /* RTL: the fill grows from the right edge. */
+  [dir="rtl"] .kj-progress-bar__fill {
+    transform-origin: right center;
+  }
+
+  /* ── Fill (indeterminate) ──
+     When data-indeterminate="true", abandon the scaleX(fraction) transform
+     and run a stripe that travels left → right. The stripe is a 50%-wide
+     coloured band on a transparent track, which gives a clean "working"
+     read on every theme without needing the track itself to animate. */
+  .kj-progress-bar__fill[data-indeterminate="true"] {
+    transform: none;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--kj-progress-bar-fill) 50%,
+      transparent 100%
+    );
+    background-size: 50% 100%;
+    background-repeat: no-repeat;
+    animation: kj-progress-bar-indeterminate
+      var(--kj-progress-bar-indeterminate-duration) linear infinite;
+  }
+
+  @keyframes kj-progress-bar-indeterminate {
+    from { background-position: -50% 0; }
+    to   { background-position: 150% 0; }
+  }
+
+  /* ── Reduced motion ──
+     APG / WCAG 2.3.3: animations from interactions must respect
+     prefers-reduced-motion. The directive reflects data-reduced-motion;
+     we also honour the media query directly so the rule kicks in even if
+     the directive's media-query subscription hasn't run yet (SSR, very
+     early paint). The indeterminate stripe collapses to a static, dimmed
+     fill — still visible as "something is happening", just not moving. */
+  .kj-progress-bar[data-reduced-motion="reduce"] .kj-progress-bar__fill,
+  .kj-progress-bar[data-reduced-motion="reduce"] .kj-progress-bar__fill[data-indeterminate="true"] {
+    animation: none;
+    transition: none;
+  }
+  .kj-progress-bar[data-reduced-motion="reduce"] .kj-progress-bar__fill[data-indeterminate="true"] {
+    background: var(--kj-progress-bar-fill);
+    opacity: 0.6;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-progress-bar__fill {
+      transition: none;
+    }
+    .kj-progress-bar__fill[data-indeterminate="true"] {
+      animation: none;
+      background: var(--kj-progress-bar-fill);
+      opacity: 0.6;
+    }
+  }
+}

package/src/radio/radio.css

@@ -0,0 +1,58 @@
+@layer kj.component {
+  .kj-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-sm);
+  }
+  .kj-radio-group[data-orientation="horizontal"] { flex-direction: row; gap: var(--kj-space-lg); }
+
+  /* Outer host. Acts as a single click target whose label area forwards to
+     the inner dot. */
+  .kj-radio {
+    display: inline-flex;
+  }
+  .kj-radio-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    cursor: pointer;
+    color: var(--kj-fg-default);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+  }
+  .kj-radio-label { user-select: none; }
+
+  /* The interactive dot (carries the kjRadio directive). */
+  .kj-radio-dot {
+    --kj-radio-size:        1rem;
+    --kj-radio-border:      var(--kj-border-default);
+    --kj-radio-bg-checked:  var(--kj-bg-primary);
+
+    display: inline-block;
+    width: var(--kj-radio-size);
+    height: var(--kj-radio-size);
+    flex-shrink: 0;
+    border: var(--kj-border) solid var(--kj-radio-border);
+    border-radius: 9999px;
+    background: var(--kj-bg-field);
+    position: relative;
+    transition: var(--kj-transition);
+  }
+  .kj-radio-dot[data-checked]::after {
+    content: '';
+    position: absolute;
+    inset: 25%;
+    border-radius: 9999px;
+    background: var(--kj-radio-bg-checked);
+  }
+  .kj-radio-dot[data-checked] { border-color: var(--kj-radio-bg-checked); }
+  .kj-radio-dot:focus-visible { outline: 2px solid var(--kj-fg-primary); outline-offset: 2px; }
+
+  /* Disabled — dim the whole group (dot + label text) for visual consistency
+     with native form controls. */
+  .kj-radio[data-disabled] .kj-radio-inner { cursor: not-allowed; }
+  .kj-radio[data-disabled] .kj-radio-dot,
+  .kj-radio[data-disabled] .kj-radio-label {
+    opacity: 0.45;
+  }
+  .kj-radio[data-disabled] .kj-radio-dot { pointer-events: none; }
+}