@kouji-ui/components 0.9.1 → 0.9.3

package/src/chat/chat.css

@@ -0,0 +1,231 @@
+@layer kj.component {
+  /* ── Log container ───────────────────────────────────────── */
+  .kj-chat-log {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-md);
+    padding: var(--kj-space-md);
+    background: var(--kj-bg-body);
+    color: var(--kj-fg-default);
+    border-radius: var(--kj-radius-box);
+    overflow-y: auto;
+    font-family: var(--kj-font-sans);
+  }
+
+  /* ── Row ─────────────────────────────────────────────────── */
+  .kj-chat {
+    --kj-chat-gap:        var(--kj-space-sm);
+    --kj-chat-col-gap:    0.125rem;
+
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      'avatar header'
+      'avatar bubble'
+      'avatar footer';
+    column-gap: var(--kj-chat-gap);
+    row-gap: var(--kj-chat-col-gap);
+    align-items: end;
+    max-width: 100%;
+  }
+
+  .kj-chat[data-side='start'] {
+    justify-self: start;
+    margin-inline-end: auto;
+  }
+
+  .kj-chat[data-side='end'] {
+    justify-self: end;
+    margin-inline-start: auto;
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'header avatar'
+      'bubble avatar'
+      'footer avatar';
+    text-align: end;
+  }
+
+  /* RTL flip is cascade-driven: `data-side` is logical, the cascade swaps
+     the physical column. */
+  [dir='rtl'] .kj-chat[data-side='start'] {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      'header avatar'
+      'bubble avatar'
+      'footer avatar';
+    text-align: end;
+  }
+  [dir='rtl'] .kj-chat[data-side='end'] {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      'avatar header'
+      'avatar bubble'
+      'avatar footer';
+    text-align: start;
+  }
+
+  /* Grouping suppresses avatar / header visibility but preserves layout
+     so the gap stays tight and consistent. */
+  .kj-chat[data-grouped] .kj-chat-avatar { visibility: hidden; }
+  .kj-chat[data-grouped] .kj-chat-header { display: none; }
+
+  /* ── Avatar slot ─────────────────────────────────────────── */
+  .kj-chat-avatar {
+    grid-area: avatar;
+    align-self: end;
+    width: 2.25rem;
+    height: 2.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    user-select: none;
+  }
+
+  /* ── Header (name + time) ────────────────────────────────── */
+  .kj-chat-header {
+    grid-area: header;
+    font-size: 0.75rem;
+    color: var(--kj-fg-default);
+    opacity: 0.7;
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--kj-space-xs);
+    margin-bottom: 0.125rem;
+  }
+
+  .kj-chat-header time {
+    font-variant-numeric: tabular-nums;
+    opacity: 0.85;
+  }
+
+  /* ── Bubble body ─────────────────────────────────────────── */
+  .kj-chat-bubble {
+    --kj-chat-bubble-bg:        var(--kj-bg-surface);
+    --kj-chat-bubble-fg:        var(--kj-fg-default);
+    --kj-chat-bubble-radius:    var(--kj-radius-box, 0.75rem);
+    --kj-chat-bubble-padding-x: var(--kj-space-md);
+    --kj-chat-bubble-padding-y: var(--kj-space-sm);
+    --kj-chat-bubble-font-size: 0.9375rem;
+
+    grid-area: bubble;
+    position: relative;
+    display: inline-block;
+    max-width: min(36rem, 100%);
+    background: var(--kj-chat-bubble-bg);
+    color: var(--kj-chat-bubble-fg);
+    padding: var(--kj-chat-bubble-padding-y) var(--kj-chat-bubble-padding-x);
+    border-radius: var(--kj-chat-bubble-radius);
+    font-size: var(--kj-chat-bubble-font-size);
+    line-height: 1.45;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  /* Variant tokens. Each pairs background + readable foreground. */
+  .kj-chat-bubble[data-variant='primary'] {
+    --kj-chat-bubble-bg: var(--kj-bg-primary, #2563eb);
+    --kj-chat-bubble-fg: var(--kj-fg-on-primary, #ffffff);
+  }
+  .kj-chat-bubble[data-variant='secondary'] {
+    --kj-chat-bubble-bg: var(--kj-bg-field, var(--kj-bg-field));
+    --kj-chat-bubble-fg: var(--kj-fg-default, var(--kj-fg-default));
+  }
+  .kj-chat-bubble[data-variant='accent'] {
+    --kj-chat-bubble-bg: var(--kj-bg-accent, #a855f7);
+    --kj-chat-bubble-fg: var(--kj-fg-on-accent, #ffffff);
+  }
+  .kj-chat-bubble[data-variant='info'] {
+    --kj-chat-bubble-bg: var(--kj-bg-info, #0ea5e9);
+    --kj-chat-bubble-fg: var(--kj-fg-on-info, #ffffff);
+  }
+  .kj-chat-bubble[data-variant='success'] {
+    --kj-chat-bubble-bg: var(--kj-bg-success, #16a34a);
+    --kj-chat-bubble-fg: var(--kj-fg-on-success, #ffffff);
+  }
+  .kj-chat-bubble[data-variant='warning'] {
+    --kj-chat-bubble-bg: var(--kj-bg-warning, #f59e0b);
+    --kj-chat-bubble-fg: var(--kj-fg-on-warning, #1f1300);
+  }
+  .kj-chat-bubble[data-variant='error'] {
+    --kj-chat-bubble-bg: var(--kj-bg-danger, #dc2626);
+    --kj-chat-bubble-fg: var(--kj-fg-on-danger, #ffffff);
+  }
+
+  /* Sizes: padding + type-scale only — radius cascades through `em`. */
+  .kj-chat-bubble[data-size='sm'] {
+    --kj-chat-bubble-padding-x: var(--kj-space-sm);
+    --kj-chat-bubble-padding-y: 0.25rem;
+    --kj-chat-bubble-font-size: 0.8125rem;
+  }
+  .kj-chat-bubble[data-size='lg'] {
+    --kj-chat-bubble-padding-x: var(--kj-space-lg);
+    --kj-chat-bubble-padding-y: var(--kj-space-md);
+    --kj-chat-bubble-font-size: 1.0625rem;
+  }
+
+  /* Tail — drawn only when the bubble carries `data-tail`. */
+  .kj-chat-bubble[data-tail]::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 0.625rem;
+    height: 0.75rem;
+    background: var(--kj-chat-bubble-bg);
+  }
+
+  .kj-chat[data-side='start'] .kj-chat-bubble[data-tail]::before {
+    left: -0.375rem;
+    border-bottom-right-radius: 0.625rem;
+    clip-path: path('M 10 0 Q 0 4 0 12 L 10 12 Z');
+  }
+  .kj-chat[data-side='end'] .kj-chat-bubble[data-tail]::before {
+    right: -0.375rem;
+    border-bottom-left-radius: 0.625rem;
+    clip-path: path('M 0 0 Q 10 4 10 12 L 0 12 Z');
+  }
+  /* RTL: tails follow the visual side. */
+  [dir='rtl'] .kj-chat[data-side='start'] .kj-chat-bubble[data-tail]::before {
+    left: auto;
+    right: -0.375rem;
+    clip-path: path('M 0 0 Q 10 4 10 12 L 0 12 Z');
+  }
+  [dir='rtl'] .kj-chat[data-side='end'] .kj-chat-bubble[data-tail]::before {
+    right: auto;
+    left: -0.375rem;
+    clip-path: path('M 10 0 Q 0 4 0 12 L 10 12 Z');
+  }
+
+  /* ── Footer (read state) ─────────────────────────────────── */
+  .kj-chat-footer {
+    grid-area: footer;
+    font-size: 0.6875rem;
+    color: var(--kj-fg-default);
+    opacity: 0.6;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-top: 0.125rem;
+  }
+
+  /* Glyphs keyed off `data-state`. CSS-only — uses unicode primitives so
+     no icon font is required. */
+  .kj-chat-footer[data-state]::before {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+    font-weight: 600;
+  }
+  .kj-chat-footer[data-state='sending']::before   { content: '\025F7'; opacity: 0.7; }
+  .kj-chat-footer[data-state='sent']::before      { content: '\02713'; }
+  .kj-chat-footer[data-state='delivered']::before { content: '\02713\02713'; letter-spacing: -0.15em; padding-inline-end: 0.15em; }
+  .kj-chat-footer[data-state='read']::before      { content: '\02713\02713'; letter-spacing: -0.15em; padding-inline-end: 0.15em; color: var(--kj-fg-info, #0ea5e9); }
+  .kj-chat-footer[data-state='error']::before     { content: '\0203C'; color: var(--kj-fg-danger, #dc2626); }
+
+  /* Reduced motion: the tail is static, so nothing here animates. The log's
+     scroll behaviour is the consumer's; this rule documents the contract. */
+  @media (prefers-reduced-motion: reduce) {
+    .kj-chat-log { scroll-behavior: auto; }
+  }
+}

package/src/checkbox/checkbox.css

@@ -0,0 +1,74 @@
+@layer kj.component {
+  /* Outer host. Acts as a single click target whose label area forwards to
+     the inner box. */
+  .kj-checkbox {
+    display: inline-flex;
+  }
+
+  .kj-checkbox-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-checkbox-label { user-select: none; }
+
+  /* The interactive box (carries the kjCheckbox directive). */
+  .kj-checkbox-box {
+    --kj-checkbox-size:        1rem;
+    --kj-checkbox-bg:          var(--kj-bg-body);
+    --kj-checkbox-bg-checked:  var(--kj-bg-primary);
+    --kj-checkbox-fg-checked:  var(--kj-fg-on-primary);
+    --kj-checkbox-border:      var(--kj-border-default);
+    --kj-checkbox-radius:      var(--kj-radius-selector);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--kj-checkbox-size);
+    height: var(--kj-checkbox-size);
+    background: var(--kj-checkbox-bg);
+    border: var(--kj-border) solid var(--kj-checkbox-border);
+    border-radius: var(--kj-checkbox-radius);
+    transition: var(--kj-transition);
+  }
+
+  .kj-checkbox-box[data-checked] {
+    background: var(--kj-checkbox-bg-checked);
+    border-color: var(--kj-checkbox-bg-checked);
+  }
+  .kj-checkbox-box[data-checked]::after {
+    content: '✓';
+    color: var(--kj-checkbox-fg-checked);
+    font-size: 0.75rem;
+    line-height: 1;
+  }
+
+  .kj-checkbox-box[data-indeterminate]::after {
+    content: '';
+    width: 60%;
+    height: 2px;
+    background: var(--kj-checkbox-fg-checked);
+  }
+  .kj-checkbox-box[data-indeterminate] {
+    background: var(--kj-checkbox-bg-checked);
+    border-color: var(--kj-checkbox-bg-checked);
+  }
+
+  .kj-checkbox-box[data-size="sm"] { --kj-checkbox-size: 0.875rem; }
+  .kj-checkbox-box[data-size="lg"] { --kj-checkbox-size: 1.25rem; }
+
+  .kj-checkbox-box:focus-visible { outline: 2px solid var(--kj-border-focus); outline-offset: 2px; }
+
+  /* Disabled — dim the whole checkbox (box + label text) for visual
+     consistency with native form controls. */
+  .kj-checkbox[data-disabled] .kj-checkbox-inner { cursor: not-allowed; }
+  .kj-checkbox[data-disabled] .kj-checkbox-box,
+  .kj-checkbox[data-disabled] .kj-checkbox-label {
+    opacity: 0.45;
+  }
+  .kj-checkbox[data-disabled] .kj-checkbox-box { pointer-events: none; }
+}

package/src/color-picker/color-picker.css

@@ -0,0 +1,183 @@
+@layer kj.component {
+  .kj-color-picker {
+    position: relative;
+    display: inline-block;
+  }
+
+  .kj-color-picker-trigger {
+    /* WCAG 2.5.5 — replaces the existing 44×32 native swatch that fails AAA. */
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    cursor: pointer;
+    /* Checkerboard backdrop for translucent colors. The current color is
+       layered on top via the inline style hook. */
+    background:
+      linear-gradient(var(--kj-color-picker-current, #000), var(--kj-color-picker-current, #000)),
+      conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0) 0 0 / 12px 12px;
+  }
+  .kj-color-picker-trigger[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .kj-color-picker-trigger:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+
+  .kj-color-picker-panel {
+    box-sizing: border-box;
+    z-index: var(--kj-overlay-z, 1000);
+    width: 280px;
+    padding: var(--kj-space-md);
+    background: var(--kj-bg-body);
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    box-shadow: var(--kj-shadow-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-sm);
+    color: var(--kj-fg-default);
+  }
+  .kj-color-picker-panel[hidden] { display: none; }
+
+  /* 2-axis sat/value rectangle. Hue passed through as a hsl() wedge,
+     a horizontal white→saturated-color gradient, and a vertical
+     transparent→black gradient, layered to produce the standard square. */
+  .kj-color-picker-area {
+    position: relative;
+    width: 100%;
+    height: 160px;
+    border-radius: 4px;
+    cursor: crosshair;
+    background:
+      linear-gradient(to top, #000, transparent),
+      linear-gradient(to right, #fff, hsl(var(--kj-color-picker-hue, 0), 100%, 50%));
+    touch-action: none;
+  }
+  .kj-color-picker-area:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+  .kj-color-picker-area::after {
+    content: '';
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    margin: -7px 0 0 -7px;
+    /* Saturation drives x; (1 - value) drives y so visually high y = low value. */
+    left: calc(var(--kj-color-picker-x, 0) * 100%);
+    top: calc((1 - var(--kj-color-picker-y, 0)) * 100%);
+    border: 2px solid #fff;
+    box-shadow: 0 0 0 1px #000, 0 0 4px rgb(0 0 0 / 0.4);
+    border-radius: 50%;
+    pointer-events: none;
+  }
+
+  .kj-color-picker-hue-slider,
+  .kj-color-picker-alpha-slider {
+    width: 100%;
+    height: 16px;
+    margin: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+  }
+  .kj-color-picker-hue-slider::-webkit-slider-runnable-track {
+    height: 12px;
+    border-radius: 6px;
+    background: linear-gradient(to right,
+      #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
+  }
+  .kj-color-picker-hue-slider::-moz-range-track {
+    height: 12px;
+    border-radius: 6px;
+    background: linear-gradient(to right,
+      #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
+  }
+  .kj-color-picker-alpha-slider::-webkit-slider-runnable-track {
+    height: 12px;
+    border-radius: 6px;
+    background:
+      linear-gradient(to right, transparent, var(--kj-color-picker-current, #000)),
+      conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0) 0 0 / 8px 8px;
+  }
+  .kj-color-picker-alpha-slider::-moz-range-track {
+    height: 12px;
+    border-radius: 6px;
+    background:
+      linear-gradient(to right, transparent, var(--kj-color-picker-current, #000)),
+      conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0) 0 0 / 8px 8px;
+  }
+  .kj-color-picker-hue-slider::-webkit-slider-thumb,
+  .kj-color-picker-alpha-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid #000;
+    margin-top: -1px;
+  }
+  .kj-color-picker-hue-slider::-moz-range-thumb,
+  .kj-color-picker-alpha-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid #000;
+  }
+  .kj-color-picker-hue-slider:focus-visible,
+  .kj-color-picker-alpha-slider:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+
+  .kj-color-picker-input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--kj-space-xs) var(--kj-space-sm);
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    background: var(--kj-bg-body);
+    color: var(--kj-fg-default);
+    font: 0.8125rem var(--kj-font-mono, monospace);
+  }
+  .kj-color-picker-input[aria-invalid="true"] {
+    border-color: var(--kj-border-danger, #ef4444);
+  }
+
+  .kj-color-picker-presets {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 6px;
+  }
+  .kj-color-picker-preset {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: var(--kj-border) solid var(--kj-border-default);
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .kj-color-picker-preset[aria-selected="true"] {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 1px;
+  }
+  .kj-color-picker-preset:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-color-picker-panel,
+    .kj-color-picker-trigger,
+    .kj-color-picker-area::after {
+      transition: none !important;
+    }
+  }
+}

package/src/combobox/combobox.css

@@ -0,0 +1,101 @@
+@layer kj.component {
+  .kj-combobox {
+    position: relative;
+    display: inline-block;
+    min-width: 16rem;
+  }
+
+  .kj-combobox-input {
+    width: 100%;
+    background: var(--kj-bg-field);
+    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);
+  }
+  .kj-combobox-input:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+  .kj-combobox-input[aria-busy="true"] {
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--kj-bg-surface) 50%,
+      transparent 100%
+    );
+    background-size: 200% 100%;
+    animation: kj-combobox-shimmer 1.4s linear infinite;
+  }
+  .kj-combobox[data-disabled] .kj-combobox-input {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .kj-combobox-listbox {
+    box-sizing: border-box;
+    min-width: 16rem;
+    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);
+    padding: 4px;
+    max-height: 16rem;
+    overflow: auto;
+    z-index: var(--kj-overlay-z, 100);
+    display: flex;
+    flex-direction: column;
+  }
+  .kj-combobox-listbox[hidden] { display: none; }
+
+  .kj-combobox-option {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    width: 100%;
+    text-align: left;
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    border: none;
+    background: transparent;
+    color: var(--kj-fg-default);
+    border-radius: var(--kj-radius-selector);
+    cursor: pointer;
+    font: 0.875rem var(--kj-font-sans);
+  }
+  .kj-combobox-option:hover,
+  .kj-combobox-option[data-active] {
+    background: var(--kj-bg-surface);
+  }
+  .kj-combobox-option[aria-selected="true"] {
+    background: var(--kj-bg-surface);
+    font-weight: 600;
+  }
+  .kj-combobox-option[hidden] { display: none; }
+  .kj-combobox-option[aria-disabled="true"],
+  .kj-combobox-option[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  .kj-combobox-empty,
+  .kj-combobox-loading {
+    padding: var(--kj-space-md);
+    color: var(--kj-fg-default);
+    opacity: 0.7;
+    font: 0.875rem var(--kj-font-sans);
+    text-align: center;
+  }
+  .kj-combobox-empty[hidden],
+  .kj-combobox-loading[hidden] { display: none; }
+
+  @keyframes kj-combobox-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kj-combobox-input[aria-busy="true"] { animation: none; }
+  }
+}