@kouji-ui/components 0.9.1 → 0.9.3

package/src/drawer/drawer.css

@@ -0,0 +1,130 @@
+@layer kj.component {
+  .kj-drawer {
+    --kj-drawer-bg: var(--kj-bg-elevated);
+    --kj-drawer-fg: var(--kj-fg-default);
+    --kj-drawer-border-color: var(--kj-border-default);
+    --kj-drawer-shadow: var(--kj-shadow-lg);
+    --kj-drawer-size: 22rem;
+
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    background: var(--kj-drawer-bg);
+    color: var(--kj-drawer-fg);
+    box-shadow: var(--kj-drawer-shadow);
+    overflow: hidden;
+    z-index: var(--kj-overlay-z, 1000);
+    box-sizing: border-box;
+    padding: var(--kj-space-lg);
+  }
+
+  .kj-drawer[data-kj-side="right"] {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: min(var(--kj-drawer-size), 100vw);
+    border-left: var(--kj-border) solid var(--kj-drawer-border-color);
+  }
+  .kj-drawer[data-kj-side="left"] {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(var(--kj-drawer-size), 100vw);
+    border-right: var(--kj-border) solid var(--kj-drawer-border-color);
+  }
+  .kj-drawer[data-kj-side="top"] {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: min(var(--kj-drawer-size), 100vh);
+    border-bottom: var(--kj-border) solid var(--kj-drawer-border-color);
+  }
+  .kj-drawer[data-kj-side="bottom"] {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: min(var(--kj-drawer-size), 100vh);
+    border-top: var(--kj-border) solid var(--kj-drawer-border-color);
+  }
+
+  /* Modal scrim — pseudo-element on the portaled wrapper. */
+  [data-kj-drawer-container]::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: rgb(0 0 0 / 0.5);
+    z-index: calc(var(--kj-overlay-z, 1000) - 1);
+    pointer-events: auto;
+  }
+  [data-kj-drawer-container]:has(.kj-drawer[role="region"])::before {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-drawer {
+      transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
+    }
+    .kj-drawer[data-state="open"] {
+      transform: translate3d(0, 0, 0);
+    }
+    .kj-drawer[data-kj-side="right"][data-state="closed"]  { transform: translate3d(100%, 0, 0); }
+    .kj-drawer[data-kj-side="left"][data-state="closed"]   { transform: translate3d(-100%, 0, 0); }
+    .kj-drawer[data-kj-side="top"][data-state="closed"]    { transform: translate3d(0, -100%, 0); }
+    .kj-drawer[data-kj-side="bottom"][data-state="closed"] { transform: translate3d(0, 100%, 0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-drawer {
+      transition: opacity 120ms linear;
+    }
+    .kj-drawer[data-state="open"]   { opacity: 1; }
+    .kj-drawer[data-state="closed"] { opacity: 0; }
+  }
+
+  .kj-drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--kj-space-lg) var(--kj-space-xl);
+    border-bottom: var(--kj-border) solid var(--kj-border-muted);
+    flex-shrink: 0;
+  }
+  .kj-drawer-header[data-align="center"] { justify-content: center; }
+
+  .kj-drawer-title {
+    display: block;
+    margin: 0;
+    font: 600 1.125rem / 1.3 var(--kj-font-sans);
+    color: var(--kj-fg-default);
+  }
+
+  .kj-drawer-description {
+    display: block;
+    margin: var(--kj-space-xs) 0 0;
+    color: var(--kj-fg-muted);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+    opacity: 0.8;
+  }
+
+  .kj-drawer-body {
+    flex: 1;
+    color: var(--kj-fg-default);
+    font: 0.9375rem / 1.5 var(--kj-font-sans);
+    min-height: 0;
+  }
+  .kj-drawer-body[data-padded] { padding: var(--kj-space-lg) var(--kj-space-xl); }
+  .kj-drawer-body[data-scroll] { overflow-y: auto; }
+
+  .kj-drawer-footer {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    padding: var(--kj-space-lg) var(--kj-space-xl);
+    border-top: var(--kj-border) solid var(--kj-border-muted);
+    flex-shrink: 0;
+  }
+  .kj-drawer-footer[data-align="start"]   { justify-content: flex-start; }
+  .kj-drawer-footer[data-align="center"]  { justify-content: center; }
+  .kj-drawer-footer[data-align="end"]     { justify-content: flex-end; }
+  .kj-drawer-footer[data-align="between"] { justify-content: space-between; }
+}

package/src/dropdown-menu/dropdown-menu.css

@@ -0,0 +1,108 @@
+@layer kj.component {
+  /* The trigger and most wrappers use display: contents — they don't add a
+     box. Theme tokens land on `.kj-dropdown-menu` (the panel), which the
+     directive moves to a body-level container on open so it escapes any
+     clipping ancestor. */
+
+  .kj-dropdown-menu {
+    --kj-dropdown-menu-bg:           var(--kj-bg-elevated);
+    --kj-dropdown-menu-fg:           var(--kj-fg-default);
+    --kj-dropdown-menu-border-color: var(--kj-border-default);
+    --kj-dropdown-menu-radius:       var(--kj-radius-box);
+    --kj-dropdown-menu-padding:      var(--kj-space-xs);
+    --kj-dropdown-menu-shadow:       var(--kj-shadow-md);
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-width: 12rem;
+    max-width: min(20rem, calc(100vw - 2rem));
+    background: var(--kj-dropdown-menu-bg);
+    color: var(--kj-dropdown-menu-fg);
+    border: var(--kj-border) solid var(--kj-dropdown-menu-border-color);
+    border-radius: var(--kj-dropdown-menu-radius);
+    padding: var(--kj-dropdown-menu-padding);
+    font: 0.875rem / 1.5 var(--kj-font-sans);
+    box-shadow: var(--kj-dropdown-menu-shadow);
+    pointer-events: auto;
+    z-index: var(--kj-overlay-z, 1000);
+  }
+
+  .kj-dropdown-menu[hidden] { display: none; }
+
+  .kj-dropdown-menu-item {
+    --kj-dropdown-menu-item-padding-x: var(--kj-space-md);
+    --kj-dropdown-menu-item-padding-y: var(--kj-space-sm);
+    --kj-dropdown-menu-item-min-height: 2.75rem; /* 44px AAA touch target */
+    --kj-dropdown-menu-item-radius:    var(--kj-radius-field);
+    --kj-dropdown-menu-item-hover-bg:  var(--kj-bg-surface);
+    --kj-dropdown-menu-item-active-bg: var(--kj-bg-field);
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--kj-space-sm);
+    width: 100%;
+    min-height: var(--kj-dropdown-menu-item-min-height);
+    box-sizing: border-box;
+    padding: var(--kj-dropdown-menu-item-padding-y) var(--kj-dropdown-menu-item-padding-x);
+    margin: 0;
+    background: transparent;
+    color: inherit;
+    border: none;
+    border-radius: var(--kj-dropdown-menu-item-radius);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .kj-dropdown-menu-item:hover:not([data-disabled]) {
+    background: var(--kj-dropdown-menu-item-hover-bg);
+  }
+  .kj-dropdown-menu-item:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: -2px;
+  }
+  .kj-dropdown-menu-item[aria-current="true"] {
+    background: var(--kj-dropdown-menu-item-current-bg, var(--kj-bg-field));
+    color: var(--kj-dropdown-menu-item-current-fg, var(--kj-fg-primary));
+    font-weight: 500;
+  }
+  .kj-dropdown-menu-item[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .kj-dropdown-menu-separator {
+    display: block;
+    height: 1px;
+    margin: var(--kj-space-xs) calc(var(--kj-space-xs) * -1);
+    background: color-mix(in oklab, var(--kj-fg-default) 12%, transparent);
+    border: 0;
+  }
+
+  .kj-dropdown-menu-label {
+    display: block;
+    padding: var(--kj-space-xs) var(--kj-space-md);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--kj-fg-default);
+    opacity: 0.65;
+  }
+
+  .kj-dropdown-menu-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-dropdown-menu {
+      transition: opacity 120ms ease-out, transform 120ms ease-out;
+    }
+    .kj-dropdown-menu[data-state="closed"] { opacity: 0; transform: scale(0.98); }
+    .kj-dropdown-menu[data-state="open"]   { opacity: 1; transform: scale(1); }
+  }
+}

package/src/editor/editor.css

@@ -0,0 +1,140 @@
+:host {
+  display: block;
+  border: 1px solid var(--kj-border-default);
+  border-radius: var(--kj-radius-md, 0);
+  overflow: hidden;
+  background: var(--kj-bg-surface);
+}
+
+.kj-editor-wrap {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 12rem;
+}
+
+/* ── Auto-height mode: grow to fit content instead of filling the container. ──
+   The directive sets the host's inline height from Monaco's content height; the
+   body must stop being a flex-fill / absolute-positioned region so that height
+   applies. */
+:host([data-auto-height]) {
+  height: auto;
+}
+:host([data-auto-height]) .kj-editor-wrap {
+  height: auto;
+  min-height: 0;
+}
+:host([data-auto-height]) .kj-editor-body {
+  position: static;
+  flex: none;
+  min-height: 3rem;
+}
+:host([data-auto-height]) .kj-editor-host {
+  position: relative;
+  inset: auto;
+}
+
+/* ── Toolbar ── */
+.kj-editor-toolbar,
+.kj-editor-status {
+  display: flex;
+  align-items: center;
+  gap: var(--kj-space-sm);
+  padding: var(--kj-space-sm) var(--kj-space-lg);
+  background: var(--kj-bg-body);
+  flex-shrink: 0;
+}
+.kj-editor-toolbar {
+  border-bottom: 1px solid var(--kj-border-default);
+}
+.kj-editor-status {
+  border-top: 1px solid var(--kj-border-default);
+}
+
+.kj-editor-spacer {
+  flex: 1;
+}
+
+.kj-editor-lang {
+  font-family: var(--kj-font-mono);
+  font-size: 0.65rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--kj-fg-primary);
+  background: color-mix(in oklab, var(--kj-bg-primary) 8%, transparent);
+  padding: 0.15rem var(--kj-space-sm);
+  border: 1px solid color-mix(in oklab, var(--kj-bg-primary) 22%, transparent);
+}
+
+.kj-editor-copy {
+  background: none;
+  border: none;
+  color: var(--kj-fg-muted);
+  font-family: var(--kj-font-mono);
+  font-size: 0.7rem;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  /* 44x44 touch target (WCAG 2.5.5) via padding on a compact control. */
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0 var(--kj-space-sm);
+  transition: color 0.15s;
+}
+.kj-editor-copy:hover {
+  color: var(--kj-fg-default);
+}
+.kj-editor-copy:focus-visible {
+  outline: 2px solid var(--kj-border-focus, var(--kj-bg-primary));
+  outline-offset: 2px;
+}
+
+/* ── Status bar ── */
+.kj-editor-pos {
+  font-family: var(--kj-font-mono);
+  font-size: 0.7rem;
+  color: var(--kj-fg-muted);
+}
+.kj-editor-hint {
+  font-size: 0.7rem;
+  color: var(--kj-fg-muted);
+}
+
+/* ── Monaco host ── */
+.kj-editor-body {
+  position: relative;
+  flex: 1;
+  min-height: 8rem;
+}
+.kj-editor-host {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.kj-editor-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--kj-bg-surface);
+  z-index: 1;
+}
+
+/* ── Pierce Monaco's uncontrolled DOM to match kj tokens ──
+   Monaco renders elements we don't own; the defined kj-editor theme handles
+   most chrome, this backstops backgrounds/scrollbar for the container. */
+.kj-editor-host ::ng-deep .monaco-editor,
+.kj-editor-host ::ng-deep .monaco-editor-background,
+.kj-editor-host ::ng-deep .monaco-editor .margin {
+  background-color: var(--kj-bg-surface) !important;
+}
+.kj-editor-host ::ng-deep .monaco-editor .scrollbar .slider {
+  background: var(--kj-bg-field, var(--kj-bg-elevated)) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kj-editor-copy {
+    transition: none;
+  }
+}

package/src/empty-state/empty-state.css

@@ -0,0 +1,114 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-empty-state — components-only family
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-empty-state {
+    --kj-empty-state-bg:        transparent;
+    --kj-empty-state-fg:        var(--kj-fg-default);
+    --kj-empty-state-muted-fg:  var(--kj-fg-muted);
+    --kj-empty-state-accent:    var(--kj-border-default);
+    --kj-empty-state-padding-y: var(--kj-space-2xl, 2rem);
+    --kj-empty-state-padding-x: var(--kj-space-xl,  1.5rem);
+    --kj-empty-state-gap:       var(--kj-space-md,  0.75rem);
+    --kj-empty-state-icon-size: 3rem;
+    --kj-empty-state-title-size: 1.125rem;
+    --kj-empty-state-desc-size:  0.9375rem;
+    --kj-empty-state-max-width:  32rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: var(--kj-empty-state-gap);
+    padding: var(--kj-empty-state-padding-y) var(--kj-empty-state-padding-x);
+    background: var(--kj-empty-state-bg);
+    color: var(--kj-empty-state-fg);
+  }
+
+  .kj-empty-state[data-size="sm"] {
+    --kj-empty-state-padding-y: var(--kj-space-lg, 1rem);
+    --kj-empty-state-padding-x: var(--kj-space-md, 0.75rem);
+    --kj-empty-state-gap: var(--kj-space-sm, 0.5rem);
+    --kj-empty-state-icon-size: 2rem;
+    --kj-empty-state-title-size: 1rem;
+    --kj-empty-state-desc-size:  0.875rem;
+  }
+
+  .kj-empty-state[data-size="lg"] {
+    --kj-empty-state-padding-y: var(--kj-space-3xl, 3rem);
+    --kj-empty-state-padding-x: var(--kj-space-2xl, 2rem);
+    --kj-empty-state-gap: var(--kj-space-lg, 1rem);
+    --kj-empty-state-icon-size: 4.5rem;
+    --kj-empty-state-title-size: 1.5rem;
+    --kj-empty-state-desc-size:  1rem;
+  }
+
+  .kj-empty-state[data-variant="error"] {
+    --kj-empty-state-accent: var(--kj-fg-danger, #b91c1c);
+  }
+  .kj-empty-state[data-variant="error"] .kj-empty-state-icon {
+    color: var(--kj-empty-state-accent);
+  }
+
+  .kj-empty-state-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--kj-empty-state-icon-size);
+    height: var(--kj-empty-state-icon-size);
+    color: var(--kj-empty-state-muted-fg);
+    line-height: 1;
+  }
+  .kj-empty-state-icon svg,
+  .kj-empty-state-icon img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .kj-empty-state-title {
+    font: 600 var(--kj-empty-state-title-size) / 1.3 var(--kj-font-sans);
+    color: var(--kj-empty-state-fg);
+    margin: 0;
+    max-width: var(--kj-empty-state-max-width);
+  }
+
+  .kj-empty-state-description {
+    font: var(--kj-empty-state-desc-size) / 1.5 var(--kj-font-sans);
+    color: var(--kj-empty-state-muted-fg);
+    margin: 0;
+    max-width: var(--kj-empty-state-max-width);
+  }
+
+  .kj-empty-state-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--kj-space-sm, 0.5rem);
+    margin-top: var(--kj-space-sm, 0.5rem);
+  }
+
+  .kj-empty-state-actions__primary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kj-space-sm, 0.5rem);
+    flex-wrap: wrap;
+  }
+
+  .kj-empty-state-actions__secondary {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kj-space-sm, 0.5rem);
+    font-size: 0.8125rem;
+    color: var(--kj-empty-state-muted-fg);
+  }
+
+  .kj-empty-state-actions[data-has-secondary] .kj-empty-state-actions__secondary,
+  .kj-empty-state-actions:has(.kj-empty-state-actions__secondary > *) .kj-empty-state-actions__secondary {
+    display: flex;
+  }
+}

package/src/field/field.css

@@ -0,0 +1,148 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-field — vertical-stack form-row container.
+   The wrapper itself is `display: contents`-style transparent;
+   .kj-field renders the actual flex container so projected
+   children participate in the stack without an extra div.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  kj-field.kj-field {
+    --kj-field-gap:               var(--kj-space-xs);
+    --kj-field-label-fg:          var(--kj-fg-default);
+    --kj-field-label-font:        var(--kj-font-sans);
+    --kj-field-label-font-size:   var(--kj-text-sm);
+    --kj-field-label-weight:      500;
+    --kj-field-help-fg:           var(--kj-fg-muted);
+    --kj-field-help-font-size:    var(--kj-text-xs);
+    --kj-field-error-fg:          var(--kj-fg-danger);
+    --kj-field-error-font-size:   var(--kj-text-xs);
+    --kj-field-required-fg:       var(--kj-fg-danger);
+    --kj-field-disabled-opacity:  0.55;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-field-gap);
+    width: 100%;
+  }
+
+  kj-field.kj-field[data-orientation="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--kj-space-md);
+  }
+
+  kj-field.kj-field[data-disabled] {
+    opacity: var(--kj-field-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  /* Label */
+  .kj-field-label {
+    color: var(--kj-field-label-fg);
+    font: var(--kj-field-label-weight) var(--kj-field-label-font-size) / 1.4
+          var(--kj-field-label-font);
+  }
+  .kj-field-label[data-required]::after {
+    content: " *";
+    color: var(--kj-field-required-fg);
+    /* Aria-hidden via CSS — the * is purely visual; aria-required carries
+       semantics on the inner control. */
+  }
+  .kj-field-label[data-invalid] {
+    color: var(--kj-field-error-fg);
+  }
+
+  /* Help / description */
+  .kj-field-help {
+    color: var(--kj-field-help-fg);
+    font: var(--kj-field-help-font-size) / 1.4 var(--kj-font-sans);
+  }
+
+  /* Error */
+  .kj-field-error {
+    color: var(--kj-field-error-fg);
+    font: var(--kj-field-error-font-size) / 1.4 var(--kj-font-sans);
+  }
+
+  /* Reserved error slot — keeps one text line of height while valid so the
+     error appearing/disappearing never shifts the surrounding layout. */
+  .kj-field-error[data-reserve] {
+    display: block;
+    min-height: calc(var(--kj-field-error-font-size) * 1.4);
+  }
+  .kj-field-error[data-hidden] {
+    visibility: hidden;
+  }
+
+  /* Compound input layout */
+  .kj-field-group {
+    --kj-field-group-bg:           var(--kj-bg-field);
+    --kj-field-group-fg:           var(--kj-fg-default);
+    --kj-field-group-border-color: var(--kj-border-default);
+    --kj-field-group-radius:       var(--kj-radius-field);
+    --kj-field-group-addon-fg:     var(--kj-fg-muted);
+    --kj-field-group-addon-bg:     var(--kj-bg-surface);
+    --kj-field-group-padding-x:    var(--kj-space-md);
+
+    display: inline-flex;
+    align-items: stretch;
+    width: 100%;
+    background: var(--kj-field-group-bg);
+    color: var(--kj-field-group-fg);
+    border: var(--kj-border) solid var(--kj-field-group-border-color);
+    border-radius: var(--kj-field-group-radius);
+    overflow: hidden;
+    transition: var(--kj-transition);
+  }
+  .kj-field-group:focus-within {
+    border-color: var(--kj-border-focus, var(--kj-bg-primary));
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: -2px;
+  }
+  .kj-field-group[data-invalid] {
+    border-color: var(--kj-border-danger, var(--kj-fg-danger));
+  }
+  .kj-field-group[data-disabled] {
+    opacity: var(--kj-field-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .kj-field-group__prefix,
+  .kj-field-group__suffix {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--kj-field-group-padding-x);
+    color: var(--kj-field-group-addon-fg);
+    background: var(--kj-field-group-addon-bg);
+    font: var(--kj-text-sm) / 1 var(--kj-font-sans);
+    white-space: nowrap;
+  }
+  /* Hide empty addon slots so the layout collapses cleanly when only one
+     side is used. The :empty selector handles the comment-only / no-content
+     case in projected slots. */
+  .kj-field-group__prefix:empty,
+  .kj-field-group__suffix:empty {
+    display: none;
+  }
+
+  .kj-field-group__control {
+    display: inline-flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  /* Inner controls inside a group should drop their own border / radius and
+     fill the group's box. Targeting common inner-control classes; the
+     consumer is responsible for ensuring their custom controls cooperate. */
+  .kj-field-group__control > .kj-input,
+  .kj-field-group__control > input,
+  .kj-field-group__control > kj-input,
+  .kj-field-group__control > kj-input > .kj-input {
+    border: 0;
+    border-radius: 0;
+    width: 100%;
+  }
+  .kj-field-group__control > .kj-input:focus-visible,
+  .kj-field-group__control > input:focus-visible {
+    outline: none;
+  }
+}