@kouji-ui/components 0.9.1 → 0.9.3

package/src/carousel/carousel.css

@@ -0,0 +1,181 @@
+@layer kj.component {
+  .kj-carousel {
+    --kj-carousel-gap:           var(--kj-space-md);
+    --kj-carousel-radius:        var(--kj-radius-box);
+    --kj-carousel-control-size:  44px;
+    --kj-carousel-control-bg:    var(--kj-bg-body);
+    --kj-carousel-control-fg:    var(--kj-fg-default);
+    --kj-carousel-indicator-size:    10px;
+    --kj-carousel-indicator-active:  var(--kj-bg-primary);
+    --kj-carousel-indicator-idle:    var(--kj-bg-field);
+
+    position: relative;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: 1fr auto;
+    gap: var(--kj-carousel-gap);
+    align-items: center;
+  }
+
+  .kj-carousel[data-orientation="vertical"] {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto 1fr auto auto;
+  }
+
+  .kj-carousel-viewport {
+    grid-column: 2;
+    grid-row: 1;
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--kj-carousel-radius);
+    gap: var(--kj-carousel-gap);
+    scroll-behavior: smooth;
+  }
+  .kj-carousel-viewport::-webkit-scrollbar { display: none; }
+
+  .kj-carousel[data-orientation="vertical"] .kj-carousel-viewport {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+    grid-column: 1;
+    grid-row: 2;
+    /* Grid items default to `min-height: auto`, which lets the viewport
+       grow past its `1fr` row when slides are taller than the share —
+       defeating the scroll-snap container. Pin to 0 so the row's
+       fraction actually constrains the viewport height. */
+    min-height: 0;
+  }
+
+  .kj-carousel-slide {
+    flex: 0 0 calc(100% / var(--kj-carousel-slides-per-view, 1));
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    border-radius: var(--kj-carousel-radius);
+    background: var(--kj-bg-body);
+    color: var(--kj-fg-default);
+    padding: var(--kj-space-lg);
+    min-height: 0;
+  }
+
+  .kj-carousel-slide[data-align="center"] { scroll-snap-align: center; }
+  .kj-carousel-slide[data-align="end"]    { scroll-snap-align: end; }
+
+  .kj-carousel-control {
+    grid-row: 1;
+    width: var(--kj-carousel-control-size);
+    height: var(--kj-carousel-control-size);
+    min-width: var(--kj-carousel-control-size);
+    min-height: var(--kj-carousel-control-size);
+    border-radius: 50%;
+    border: var(--kj-border) solid var(--kj-border-default);
+    background: var(--kj-carousel-control-bg);
+    color: var(--kj-carousel-control-fg);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: 1rem var(--kj-font-sans);
+    transition: var(--kj-transition);
+  }
+  .kj-carousel-control:hover { background: var(--kj-bg-surface); }
+  .kj-carousel-control:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+  .kj-carousel-control[aria-disabled="true"] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .kj-carousel-previous { grid-column: 1; }
+  .kj-carousel-next     { grid-column: 3; }
+
+  .kj-carousel[data-orientation="vertical"] .kj-carousel-previous { grid-column: 1; grid-row: 1; }
+  .kj-carousel[data-orientation="vertical"] .kj-carousel-next     { grid-column: 1; grid-row: 3; }
+
+  .kj-carousel-indicators {
+    grid-column: 2;
+    grid-row: 2;
+    display: inline-flex;
+    gap: var(--kj-space-sm);
+    align-items: center;
+    justify-content: center;
+    padding: var(--kj-space-sm) 0;
+  }
+  .kj-carousel[data-orientation="vertical"] .kj-carousel-indicators {
+    grid-column: 1;
+    grid-row: 4;
+    flex-direction: row;
+  }
+
+  .kj-carousel-indicator {
+    width:  var(--kj-carousel-indicator-size);
+    height: var(--kj-carousel-indicator-size);
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .kj-carousel-indicator::before {
+    content: '';
+    width:  var(--kj-carousel-indicator-size);
+    height: var(--kj-carousel-indicator-size);
+    border-radius: 50%;
+    background: var(--kj-carousel-indicator-idle);
+    transition: var(--kj-transition);
+  }
+  .kj-carousel-indicator[aria-current="true"]::before,
+  .kj-carousel-indicator[aria-selected="true"]::before {
+    background: var(--kj-carousel-indicator-active);
+    transform: scale(1.25);
+  }
+  .kj-carousel-indicator:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+    border-radius: 50%;
+  }
+
+  .kj-carousel-pause {
+    grid-column: 3;
+    grid-row: 2;
+    width: var(--kj-carousel-control-size);
+    height: var(--kj-carousel-control-size);
+    border-radius: 50%;
+    border: var(--kj-border) solid var(--kj-border-default);
+    background: var(--kj-carousel-control-bg);
+    color: var(--kj-carousel-control-fg);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: 1rem var(--kj-font-sans);
+  }
+  .kj-carousel-pause:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+  .kj-carousel-pause[aria-pressed="true"] {
+    background: var(--kj-bg-primary);
+    color: var(--kj-fg-on-primary);
+  }
+  .kj-carousel-pause[disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-carousel-viewport { scroll-behavior: auto; }
+    .kj-carousel-indicator::before { transition: none; }
+  }
+}

package/src/cascade-select/cascade-select.css

@@ -0,0 +1,120 @@
+@layer kj.component {
+  /* ── Root ────────────────────────────────────────────────────────────── */
+  .kj-cascade-select {
+    position: relative;
+    display: inline-block;
+    min-width: 12rem;
+  }
+
+  /* ── Trigger button ──────────────────────────────────────────────────── */
+  .kj-cascade-trigger {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--kj-space-sm);
+    background: var(--kj-bg-field);
+    color: var(--kj-fg-default);
+    border: 1px 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;
+    min-height: 2.75rem; /* 44px touch target */
+  }
+  .kj-cascade-trigger:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+  .kj-cascade-select[data-disabled] .kj-cascade-trigger {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── Root panel ──────────────────────────────────────────────────────── */
+  .kj-cascade-panel {
+    box-sizing: border-box;
+    background: var(--kj-bg-elevated);
+    border: 1px solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    box-shadow: var(--kj-shadow-md);
+    padding: 4px;
+    min-width: 12rem;
+    max-height: 20rem;
+    overflow: auto;
+    z-index: var(--kj-overlay-z, 200);
+  }
+  .kj-cascade-panel[hidden] { display: none; }
+
+  /* ── Sub-panel ───────────────────────────────────────────────────────── */
+  /* `position: fixed` so the sub-panel escapes the root panel's
+     `overflow: auto`. Coords are written inline by the sub-panel directive
+     based on the parent option's bounding rect. */
+  .kj-cascade-sub-panel {
+    position: fixed;
+    background: var(--kj-bg-elevated);
+    border: 1px solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    box-shadow: var(--kj-shadow-md);
+    padding: 4px;
+    min-width: 12rem;
+    max-height: 20rem;
+    overflow: auto;
+    z-index: 1001;
+  }
+  .kj-cascade-sub-panel[hidden] { display: none; }
+
+  /* ── Option row ──────────────────────────────────────────────────────── */
+  .kj-cascade-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    border-radius: var(--kj-radius-selector);
+    cursor: pointer;
+    color: var(--kj-fg-default);
+    font: 0.875rem var(--kj-font-sans);
+    min-height: 2.75rem; /* 44px touch target */
+    position: relative;
+  }
+  .kj-cascade-option:hover,
+  .kj-cascade-option[data-active] {
+    background: var(--kj-bg-surface);
+  }
+  .kj-cascade-option[aria-selected="true"] {
+    background: var(--kj-bg-primary-subtle, var(--kj-bg-surface));
+    color: var(--kj-fg-primary, var(--kj-fg-default));
+  }
+  .kj-cascade-option[data-disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .kj-cascade-option[data-active-path] {
+    font-weight: 500;
+  }
+
+  /* ── Option label ────────────────────────────────────────────────────── */
+  .kj-cascade-option-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ── Chevron ─────────────────────────────────────────────────────────── */
+  .kj-cascade-option-chevron {
+    flex-shrink: 0;
+    font-size: 1rem;
+    color: var(--kj-fg-muted, currentColor);
+    opacity: 0.6;
+    margin-left: var(--kj-space-sm);
+  }
+  /* Hide chevron on leaf options (data-leaf="true" is set on the host element) */
+  [data-leaf="true"] .kj-cascade-option-chevron,
+  [data-leaf="true"].kj-cascade-option .kj-cascade-option-chevron {
+    display: none;
+  }
+}

package/src/chart/chart.css

@@ -0,0 +1,26 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-chart — component-layer tokens + structural CSS
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-chart {
+    display: block;
+    width: 100%;
+    /* height is applied via style binding from the `height` input */
+  }
+
+  /* Visually-hidden caption/summary — readable to AT via aria-describedby,
+     removed from the visual + layout flow. Mirrors the library `.sr-only`
+     technique used by textarea/carousel live regions. */
+  .kj-chart__caption {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/src/chat/chat-ai.css

@@ -0,0 +1,352 @@
+@layer kj.component {
+  /* Visually-hidden utility (scoped; ViewEncapsulation.None). */
+  .kj-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ── Thread / log surface ─────────────────────────────────── */
+  .kj-chat-thread {
+    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);
+  }
+
+  /* ── Message row ──────────────────────────────────────────── */
+  .kj-chat-msg {
+    display: flex;
+    gap: var(--kj-space-sm);
+    align-items: flex-start;
+    max-width: 100%;
+  }
+  .kj-chat-msg[data-side='end'] {
+    flex-direction: row-reverse;
+    margin-inline-start: auto;
+  }
+  .kj-chat-msg[data-role='system'] {
+    justify-content: center;
+  }
+
+  .kj-chat-msg__avatar {
+    flex: 0 0 auto;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-size: var(--kj-text-sm);
+    font-weight: 600;
+    background: var(--kj-bg-surface);
+    color: var(--kj-fg-default);
+    border: 1px solid var(--kj-border-default);
+  }
+
+  .kj-chat-msg__bubble {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-xs);
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    border-radius: var(--kj-radius-box);
+    background: var(--kj-bg-surface);
+    color: var(--kj-fg-default);
+    max-width: min(48rem, 100%);
+    overflow-wrap: anywhere;
+  }
+  .kj-chat-msg[data-role='user'] .kj-chat-msg__bubble {
+    background: var(--kj-bg-primary);
+    color: var(--kj-fg-on-primary);
+  }
+  .kj-chat-msg[data-role='system'] .kj-chat-msg__bubble {
+    background: transparent;
+    color: var(--kj-fg-muted);
+    font-size: var(--kj-text-sm);
+    text-align: center;
+    padding-block: var(--kj-space-xs);
+  }
+
+  .kj-chat-msg__body :is(p) {
+    margin: 0 0 var(--kj-space-xs);
+  }
+  .kj-chat-msg__body :is(p):last-child {
+    margin-bottom: 0;
+  }
+  .kj-chat-msg__error {
+    margin: 0;
+    color: var(--kj-fg-danger);
+    font-size: var(--kj-text-sm);
+  }
+
+  .kj-md-link {
+    color: inherit;
+    text-decoration: underline;
+  }
+  .kj-md-code {
+    font-family: ui-monospace, monospace;
+    background: color-mix(in srgb, currentColor 12%, transparent);
+    padding: 0.1em 0.35em;
+    border-radius: var(--kj-radius-field);
+    font-size: 0.9em;
+  }
+
+  /* ── Code block with copy button ──────────────────────────── */
+  .kj-chat-code {
+    border: 1px solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    overflow: hidden;
+    margin: var(--kj-space-xs) 0;
+    background: var(--kj-bg-body);
+  }
+  .kj-chat-code__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.25rem var(--kj-space-sm);
+    background: var(--kj-bg-surface);
+    border-bottom: 1px solid var(--kj-border-default);
+    font-size: var(--kj-text-sm);
+    color: var(--kj-fg-muted);
+  }
+  .kj-chat-code__copy {
+    min-height: 1.75rem;
+    padding: 0.25rem 0.6rem;
+    border: 1px solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    background: var(--kj-bg-body);
+    color: var(--kj-fg-default);
+    font-size: var(--kj-text-sm);
+    cursor: pointer;
+  }
+  .kj-chat-code__copy:hover {
+    background: var(--kj-bg-surface);
+  }
+  .kj-chat-code__copy:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+  .kj-chat-code__pre {
+    margin: 0;
+    padding: var(--kj-space-sm);
+    overflow-x: auto;
+    font-family: ui-monospace, monospace;
+    font-size: 0.9em;
+    color: var(--kj-fg-default);
+  }
+
+  /* ── Tool-call card ───────────────────────────────────────── */
+  .kj-chat-tool {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-xs);
+    padding: 0.35rem var(--kj-space-sm);
+    border: 1px solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    background: var(--kj-bg-body);
+    font-size: var(--kj-text-sm);
+  }
+  .kj-chat-tool__name {
+    font-weight: 600;
+    font-family: ui-monospace, monospace;
+  }
+  .kj-chat-tool__status {
+    margin-inline-start: auto;
+    color: var(--kj-fg-muted);
+    text-transform: capitalize;
+  }
+  .kj-chat-tool[data-status='error'] {
+    border-color: var(--kj-border-danger);
+  }
+  .kj-chat-tool[data-status='error'] .kj-chat-tool__status {
+    color: var(--kj-fg-danger);
+  }
+  .kj-chat-tool__error {
+    color: var(--kj-fg-danger);
+  }
+
+  /* ── Citations ────────────────────────────────────────────── */
+  .kj-chat-cites {
+    list-style: none;
+    margin: var(--kj-space-xs) 0 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--kj-space-xs);
+  }
+  .kj-chat-cite {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.35rem;
+    padding: 0.15rem 0.5rem;
+    border: 1px solid var(--kj-border-default);
+    border-radius: 999px;
+    font-size: var(--kj-text-sm);
+    background: var(--kj-bg-body);
+  }
+  .kj-chat-cite__link {
+    color: var(--kj-fg-info);
+    text-decoration: none;
+  }
+  .kj-chat-cite__link:hover {
+    text-decoration: underline;
+  }
+  .kj-chat-cite__snippet {
+    color: var(--kj-fg-muted);
+  }
+
+  /* ── Typing indicator (reduced-motion aware) ──────────────── */
+  .kj-chat-typing {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0.25rem 0;
+  }
+  .kj-chat-typing__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: var(--kj-fg-muted);
+    animation: kj-chat-bounce 1.2s infinite ease-in-out both;
+  }
+  .kj-chat-typing__dot:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+  .kj-chat-typing__dot:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  @keyframes kj-chat-bounce {
+    0%,
+    80%,
+    100% {
+      transform: scale(0.5);
+      opacity: 0.4;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .kj-chat-typing__dot {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+
+  /* ── Prompt input ─────────────────────────────────────────── */
+  .kj-prompt {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    gap: var(--kj-space-sm);
+    padding: var(--kj-space-sm);
+    border: 1px solid var(--kj-border-default);
+    border-radius: var(--kj-radius-box);
+    background: var(--kj-bg-field, var(--kj-input-bg));
+  }
+  .kj-prompt:focus-within {
+    border-color: var(--kj-border-focus);
+  }
+  .kj-prompt__textarea {
+    flex: 1 1 auto;
+    resize: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--kj-input-fg, var(--kj-fg-default));
+    font-family: var(--kj-font-sans);
+    font-size: var(--kj-input-font-size, 1rem);
+    line-height: 1.5;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .kj-prompt__textarea::placeholder {
+    color: var(--kj-input-placeholder-fg, var(--kj-fg-muted));
+  }
+  .kj-prompt__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-xs);
+    flex: 0 0 auto;
+  }
+  .kj-prompt__btn {
+    display: grid;
+    place-items: center;
+    width: 2.75rem;
+    height: 2.75rem; /* WCAG 2.5.5 target */
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    font-size: 1.1rem;
+  }
+  .kj-prompt__btn:focus-visible {
+    outline: 2px solid var(--kj-border-focus);
+    outline-offset: 2px;
+  }
+  .kj-prompt__btn--send {
+    background: var(--kj-bg-primary);
+    color: var(--kj-fg-on-primary);
+  }
+  .kj-prompt__btn--send:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .kj-prompt__btn--stop {
+    background: var(--kj-bg-danger);
+    color: var(--kj-fg-on-danger);
+  }
+
+  /* ── Slash-command menu ───────────────────────────────────── */
+  .kj-prompt__slash {
+    position: absolute;
+    bottom: calc(100% + 0.25rem);
+    left: 0;
+    right: 0;
+    margin: 0;
+    padding: 0.25rem;
+    list-style: none;
+    background: var(--kj-bg-surface);
+    border: 1px solid var(--kj-border-default);
+    border-radius: var(--kj-radius-field);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    max-height: 14rem;
+    overflow-y: auto;
+    z-index: 10;
+  }
+  .kj-prompt__slash-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    padding: var(--kj-space-xs) var(--kj-space-sm);
+    border-radius: var(--kj-radius-field);
+    cursor: pointer;
+  }
+  .kj-prompt__slash-item.is-active,
+  .kj-prompt__slash-item:hover {
+    background: var(--kj-bg-primary);
+    color: var(--kj-fg-on-primary);
+  }
+  .kj-prompt__slash-name {
+    font-family: ui-monospace, monospace;
+    font-weight: 600;
+  }
+  .kj-prompt__slash-desc {
+    font-size: var(--kj-text-sm);
+    color: var(--kj-fg-muted);
+  }
+  .kj-prompt__slash-item.is-active .kj-prompt__slash-desc,
+  .kj-prompt__slash-item:hover .kj-prompt__slash-desc {
+    color: inherit;
+  }
+}