@kouji-ui/components 0.9.1 → 0.9.3

package/src/command-palette/command-palette.css

@@ -0,0 +1,234 @@
+/* ── Command Palette (modal) ────────────────────────────────────────── */
+
+/* Shell wraps backdrop + dialog. Always rendered for hydration stability;
+   the `is-open` modifier toggles visibility. */
+.kj-command-palette__shell {
+  display: none;
+}
+.kj-command-palette__shell.is-open {
+  display: contents;
+}
+
+/* Backdrop covers the viewport behind the dialog. */
+.kj-command-palette__backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  z-index: var(--kj-overlay-z, 1000);
+  animation: kj-command-palette-fade 0.1s ease-out;
+}
+
+/* The dialog panel itself — centered, fixed, animated in. */
+.kj-command-palette__dialog {
+  position: fixed;
+  top: 15vh;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(640px, 92vw);
+  display: flex;
+  flex-direction: column;
+  background: var(--kj-bg-elevated);
+  border: 1px solid var(--kj-border-default);
+  z-index: calc(var(--kj-overlay-z, 1000) + 1);
+  overflow: hidden;
+  animation: kj-command-palette-slide 0.15s ease-out;
+}
+
+@keyframes kj-command-palette-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes kj-command-palette-slide {
+  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kj-command-palette__backdrop,
+  .kj-command-palette__dialog {
+    animation: none;
+  }
+}
+
+/* ── Input wrapper ───────────────────────────────────────────────────── */
+
+.kj-command-palette__input-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0.875rem var(--kj-space-lg, 1.25rem);
+  border-bottom: 1px solid var(--kj-border-default);
+  gap: var(--kj-space-md, 0.75rem);
+}
+
+.kj-command-palette__search-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  color: var(--kj-fg-muted);
+}
+
+.kj-command-palette__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--kj-font-mono);
+  font-size: 0.875rem;
+  color: var(--kj-fg-default);
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.kj-command-palette__input::placeholder {
+  color: var(--kj-fg-muted);
+}
+
+.kj-command-palette__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+/* Standalone <kj-command-input> rendered outside the modal. */
+.kj-command-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--kj-font-mono);
+  font-size: 0.875rem;
+  color: var(--kj-fg-default);
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  padding: 0.875rem var(--kj-space-lg, 1.25rem);
+}
+
+/* ── ESC kbd badge in input wrapper ──────────────────────────────────── */
+
+.kj-command-palette__esc-kbd {
+  font-family: var(--kj-font-mono);
+  font-size: 0.65rem;
+  color: var(--kj-fg-muted);
+  background: var(--kj-bg-surface);
+  border: 1px solid var(--kj-border-default);
+  padding: 0.15rem 0.4rem;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.kj-command-palette__esc-kbd:hover {
+  color: var(--kj-fg-default);
+}
+
+/* ── List ────────────────────────────────────────────────────────────── */
+
+.kj-command-palette__list {
+  overflow-y: auto;
+  max-height: 22rem;
+  padding: var(--kj-space-sm, 0.375rem) 0;
+}
+
+/* ── Empty / hint state ──────────────────────────────────────────────── */
+
+.kj-command-palette__empty,
+.kj-command-empty {
+  padding: var(--kj-space-xl, 1.5rem) var(--kj-space-lg, 1.25rem);
+  text-align: center;
+  font-family: var(--kj-font-mono);
+  font-size: 0.8rem;
+  color: var(--kj-fg-muted);
+}
+
+/* ── Command item ─────────────────────────────────────────────────────── */
+
+.kj-command-item {
+  display: flex;
+  flex-direction: var(--kj-command-item-direction, row);
+  align-items: var(--kj-command-item-align, center);
+  gap: var(--kj-command-item-gap, var(--kj-space-md, 0.75rem));
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.625rem var(--kj-space-lg, 1.25rem);
+  border: none;
+  border-inline-start: 2px solid transparent;
+  background: transparent;
+  font-family: var(--kj-font-mono);
+  font-size: 0.875rem;
+  color: var(--kj-fg-default);
+  text-align: start;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.kj-command-item:hover,
+.kj-command-item[data-active] {
+  background: var(--kj-bg-surface);
+  border-inline-start-color: var(--kj-bg-primary);
+}
+
+.kj-command-item[aria-disabled="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Group ───────────────────────────────────────────────────────────── */
+
+.kj-command-group {
+  padding-block: 0.25rem;
+}
+
+.kj-command-group__label {
+  padding: 0.375rem var(--kj-space-lg, 1.25rem) 0.125rem;
+  font-family: var(--kj-font-mono);
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: var(--kj-fg-muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+/* ── Separator ───────────────────────────────────────────────────────── */
+
+.kj-command-separator {
+  height: 1px;
+  background: var(--kj-border-default);
+  margin-block: 0.25rem;
+}
+
+/* ── Footer ──────────────────────────────────────────────────────────── */
+
+.kj-command-palette__footer {
+  display: flex;
+  gap: var(--kj-space-xl, 1.5rem);
+  padding: var(--kj-space-sm, 0.375rem) var(--kj-space-lg, 1.25rem);
+  border-top: 1px solid var(--kj-border-default);
+  background: var(--kj-bg-surface);
+}
+
+.kj-command-palette__footer span {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: var(--kj-font-mono);
+  font-size: 0.65rem;
+  color: var(--kj-fg-muted);
+}
+
+.kj-command-palette__footer kbd {
+  background: var(--kj-bg-surface);
+  border: 1px solid var(--kj-border-default);
+  color: var(--kj-fg-muted);
+  font-family: var(--kj-font-mono);
+  font-size: 0.6rem;
+  padding: 0.1rem 0.35rem;
+}
+
+/* ── Reduced motion ──────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .kj-command-item {
+    transition: none;
+  }
+}

package/src/confirm-popup/confirm-popup.css

@@ -0,0 +1,47 @@
+@layer kj.component {
+  .kj-confirm-popup-content {
+    --kj-confirm-popup-bg:           var(--kj-bg-elevated);
+    --kj-confirm-popup-fg:           var(--kj-fg-default);
+    --kj-confirm-popup-border-color: var(--kj-border-default);
+    --kj-confirm-popup-radius:       var(--kj-radius-box);
+    --kj-confirm-popup-padding-x:    var(--kj-space-md);
+    --kj-confirm-popup-padding-y:    var(--kj-space-md);
+    --kj-confirm-popup-shadow:       var(--kj-shadow-md);
+
+    display: block;
+    box-sizing: border-box;
+    max-width: min(20rem, calc(100vw - 2rem));
+    background: var(--kj-confirm-popup-bg);
+    color: var(--kj-confirm-popup-fg);
+    border: var(--kj-border) solid var(--kj-confirm-popup-border-color);
+    border-radius: var(--kj-confirm-popup-radius);
+    padding: var(--kj-confirm-popup-padding-y) var(--kj-confirm-popup-padding-x);
+    font: 0.875rem / 1.5 var(--kj-font-sans);
+    box-shadow: var(--kj-confirm-popup-shadow);
+    pointer-events: auto;
+    z-index: var(--kj-overlay-z, 1000);
+    word-wrap: break-word;
+  }
+
+  .kj-confirm-popup-content[hidden] { display: none; }
+
+  .kj-confirm-popup-message {
+    display: block;
+    margin: 0 0 var(--kj-space-sm);
+    color: var(--kj-fg-default);
+  }
+
+  .kj-confirm-popup-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--kj-space-sm);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .kj-confirm-popup-content {
+      transition: opacity 140ms ease-out, transform 140ms ease-out;
+    }
+    .kj-confirm-popup-content[data-state="closed"] { opacity: 0; transform: scale(0.98); }
+    .kj-confirm-popup-content[data-state="open"]   { opacity: 1; transform: scale(1); }
+  }
+}

package/src/date-picker/date-picker.css

@@ -0,0 +1,61 @@
+.kj-date-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kj-space-xs);
+  position: relative;
+}
+
+.kj-date-picker__input {
+  /* Explicit height contract (matches input.css / button.css) so the date
+     input lines up with sibling inputs in a form row. */
+  --kj-date-picker-input-height: 2.25rem;
+  appearance: none;
+  border: var(--kj-border) solid var(--kj-border-default);
+  border-radius: var(--kj-radius-field);
+  padding: 0 var(--kj-space-md);
+  height: var(--kj-date-picker-input-height);
+  font: inherit;
+  background: var(--kj-bg-field);
+  color: var(--kj-fg-default);
+  min-width: 12ch;
+}
+.kj-date-picker[data-size="xs"] .kj-date-picker__input { --kj-date-picker-input-height: 1.75rem; font-size: 0.75rem;   padding-inline: var(--kj-space-sm); min-width: 0; }
+.kj-date-picker[data-size="sm"] .kj-date-picker__input { --kj-date-picker-input-height: 2rem;    font-size: 0.8125rem; }
+.kj-date-picker[data-size="lg"] .kj-date-picker__input { --kj-date-picker-input-height: 2.75rem; font-size: 1rem; }
+
+.kj-date-picker__input:focus {
+  outline: 2px solid var(--kj-border-focus);
+  outline-offset: 2px;
+  border-color: var(--kj-border-focus);
+}
+
+.kj-date-picker__input[disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Panel owns the elevated surface chrome (bg, border, radius, shadow,
+   inset padding). The projected `.kj-calendar` stays chrome-less so it
+   reads as a flat grid inside the panel. */
+.kj-date-picker__panel {
+  box-sizing: border-box;
+  z-index: var(--kj-overlay-z, 50);
+  display: inline-block;
+  background: var(--kj-bg-elevated);
+  color: var(--kj-fg-default);
+  border: var(--kj-border) solid var(--kj-border-default);
+  border-radius: var(--kj-radius-box);
+  box-shadow: var(--kj-shadow-md);
+  padding: var(--kj-space-sm);
+}
+
+/* When the calendar is projected into the panel it already gets padding
+   from above; collapse its own padding so the inner content lines up with
+   the panel's inset. */
+.kj-date-picker__panel .kj-calendar {
+  padding: 0;
+}
+
+.kj-date-picker__panel[hidden] {
+  display: none;
+}

package/src/date-range-presets/date-range-presets.css

@@ -0,0 +1,49 @@
+.kj-date-range-presets {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: var(--kj-date-range-presets-min-width, 12rem);
+  padding: var(--kj-space-xs, 0.25rem);
+  background: var(--kj-bg-elevated, transparent);
+  border: var(--kj-border) solid var(--kj-border-subtle, transparent);
+  border-radius: var(--kj-radius-field, 0.375rem);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  color: var(--kj-fg-default);
+}
+
+.kj-date-range-presets__option {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  /* WCAG 2.5.5 — 44px target height. */
+  min-height: 44px;
+  padding: 0 var(--kj-space-md, 0.75rem);
+  background: transparent;
+  border: var(--kj-border) solid transparent;
+  border-radius: var(--kj-radius-field, 0.375rem);
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.kj-date-range-presets__option:hover:not([disabled]) {
+  background: var(--kj-bg-field);
+}
+
+.kj-date-range-presets__option:focus-visible {
+  outline: 2px solid var(--kj-border-focus);
+  outline-offset: -2px;
+}
+
+.kj-date-range-presets__option[data-selected] {
+  background: var(--kj-bg-primary);
+  color: var(--kj-fg-on-primary);
+  font-weight: 600;
+}
+
+.kj-date-range-presets__option[disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/src/datetime-picker/datetime-picker.css

@@ -0,0 +1,84 @@
+.kj-datetime-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kj-space-xs);
+  position: relative;
+}
+
+.kj-datetime-picker__input {
+  /* Explicit height contract (matches input.css / date-picker.css) so the
+     trigger lines up with sibling inputs in a form row. */
+  --kj-datetime-picker-input-height: 2.25rem;
+  appearance: none;
+  border: var(--kj-border) solid var(--kj-border-default);
+  border-radius: var(--kj-radius-field);
+  padding: 0 var(--kj-space-md);
+  height: var(--kj-datetime-picker-input-height);
+  font: inherit;
+  background: var(--kj-bg-field);
+  color: var(--kj-fg-default);
+  /* Size to the content ("12/05/2026 14:30" ≈ 16ch) instead of the browser's
+     20-character default — the trigger shouldn't be wider than its text. */
+  width: 19ch;
+  min-width: 0;
+}
+.kj-datetime-picker[data-size="xs"] .kj-datetime-picker__input { --kj-datetime-picker-input-height: 1.75rem; font-size: 0.75rem;   padding-inline: var(--kj-space-sm); min-width: 0; }
+.kj-datetime-picker[data-size="sm"] .kj-datetime-picker__input { --kj-datetime-picker-input-height: 2rem;    font-size: 0.8125rem; }
+.kj-datetime-picker[data-size="lg"] .kj-datetime-picker__input { --kj-datetime-picker-input-height: 2.75rem; font-size: 1rem; }
+
+.kj-datetime-picker__input:focus {
+  outline: 2px solid var(--kj-border-focus);
+  outline-offset: 2px;
+  border-color: var(--kj-border-focus);
+}
+
+.kj-datetime-picker__input[disabled] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Panel chrome mirrors the date-picker panel. */
+.kj-datetime-picker__panel {
+  box-sizing: border-box;
+  z-index: var(--kj-overlay-z, 50);
+  display: inline-block;
+  background: var(--kj-bg-elevated);
+  color: var(--kj-fg-default);
+  border: var(--kj-border) solid var(--kj-border-default);
+  border-radius: var(--kj-radius-box);
+  box-shadow: var(--kj-shadow-md);
+  padding: var(--kj-space-sm);
+}
+.kj-datetime-picker__panel .kj-calendar {
+  padding: 0;
+}
+.kj-datetime-picker__panel[hidden] {
+  display: none;
+}
+
+/* Time row under the calendar. */
+.kj-datetime-picker__time {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--kj-space-sm);
+  margin-top: var(--kj-space-sm);
+  padding: var(--kj-space-sm) var(--kj-space-xs) 0;
+  border-top: var(--kj-border) solid var(--kj-border-muted);
+  font-size: 0.8125rem;
+  color: var(--kj-fg-muted);
+}
+.kj-datetime-picker__time-input {
+  appearance: none;
+  border: var(--kj-border) solid var(--kj-border-default);
+  border-radius: var(--kj-radius-field);
+  background: var(--kj-bg-field);
+  color: var(--kj-fg-default);
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 2px var(--kj-space-sm);
+}
+.kj-datetime-picker__time-input:focus {
+  outline: 2px solid var(--kj-border-focus);
+  outline-offset: 1px;
+}

package/src/dialog/dialog.css

@@ -0,0 +1,56 @@
+@layer kj.component {
+  .kj-dialog-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgb(0 0 0 / 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: var(--kj-overlay-z, 1000);
+  }
+  .kj-dialog {
+    display: flex;
+    flex-direction: column;
+    background: var(--kj-bg-elevated);
+    color: var(--kj-fg-default);
+    border-radius: var(--kj-radius-box);
+    box-shadow: var(--kj-shadow-lg);
+    min-width: 24rem;
+    max-width: min(40rem, calc(100vw - 2rem));
+    max-height: calc(100vh - 4rem);
+    overflow: hidden;
+    padding: var(--kj-space-xl);
+  }
+  .kj-dialog-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);
+  }
+  .kj-dialog-header[data-align="center"] { justify-content: center; }
+  .kj-dialog-title {
+    display: block;
+    margin: 0;
+    font: 600 1.125rem / 1.3 var(--kj-font-sans);
+    color: var(--kj-fg-default);
+  }
+  .kj-dialog-body {
+    flex: 1;
+    color: var(--kj-fg-default);
+    font: 0.9375rem / 1.5 var(--kj-font-sans);
+  }
+  .kj-dialog-body[data-padded] { padding: var(--kj-space-lg) var(--kj-space-xl); }
+  .kj-dialog-body[data-scroll] { overflow-y: auto; }
+  .kj-dialog-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);
+  }
+  .kj-dialog-footer[data-align="start"]   { justify-content: flex-start; }
+  .kj-dialog-footer[data-align="center"]  { justify-content: center; }
+  .kj-dialog-footer[data-align="end"]     { justify-content: flex-end; }
+  .kj-dialog-footer[data-align="between"] { justify-content: space-between; }
+}

package/src/direction-toggle/direction-toggle.css

@@ -0,0 +1,55 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-direction-toggle — accessible LTR/RTL toggle button.
+   Tokens default to shared-layer values from @kouji-ui/themes so
+   the control blends with the active theme; consumers can override
+   any --kj-direction-toggle-* knob.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-direction-toggle {
+    --kj-direction-toggle-bg:           var(--kj-bg-subtle, transparent);
+    --kj-direction-toggle-fg:           var(--kj-fg, currentColor);
+    --kj-direction-toggle-border-color: var(--kj-border-color, currentColor);
+    --kj-direction-toggle-radius:       var(--kj-radius-field, 0.5rem);
+    --kj-direction-toggle-padding-x:    var(--kj-space-md, 0.75rem);
+    --kj-direction-toggle-padding-y:    var(--kj-space-sm, 0.5rem);
+
+    /* WCAG 2.5.5 — reserve a 44×44 hit area regardless of label size. */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--kj-space-xs, 0.25rem);
+    min-width: 44px;
+    min-height: 44px;
+    padding-block: var(--kj-direction-toggle-padding-y);
+    padding-inline: var(--kj-direction-toggle-padding-x);
+
+    background: var(--kj-direction-toggle-bg);
+    color: var(--kj-direction-toggle-fg);
+    border: var(--kj-border, 1px) solid var(--kj-direction-toggle-border-color);
+    border-radius: var(--kj-direction-toggle-radius);
+    font: inherit;
+    font-size: var(--kj-text-sm, 0.875rem);
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .kj-direction-toggle:hover {
+    background: var(--kj-bg-subtle-hover, var(--kj-direction-toggle-bg));
+  }
+
+  /* Focus ring only for keyboard users. */
+  .kj-direction-toggle:focus-visible {
+    outline: var(--kj-focus-ring-width, 2px) solid
+      var(--kj-focus-ring-color, currentColor);
+    outline-offset: 2px;
+  }
+
+  /* Pressed = RTL active. */
+  .kj-direction-toggle[aria-pressed='true'] {
+    background: var(--kj-bg-primary, var(--kj-direction-toggle-bg));
+    color: var(--kj-fg-on-primary, var(--kj-direction-toggle-fg));
+    border-color: var(--kj-bg-primary, var(--kj-direction-toggle-border-color));
+  }
+}

package/src/divider/divider.css

@@ -0,0 +1,93 @@
+@layer kj.component {
+  .kj-divider {
+    --kj-divider-color:     var(--kj-border-default, color-mix(in oklch, var(--kj-fg-default) 20%, transparent));
+    --kj-divider-thickness: 1px;
+    --kj-divider-spacing:   var(--kj-space-md, 1rem);
+    --kj-divider-gap:       var(--kj-space-md, 1rem);
+
+    border: 0;
+    color: inherit;
+  }
+
+  /* Rule-only (the <hr> branch and any <div> with no projected label). */
+  .kj-divider[data-with-content="false"] {
+    block-size: var(--kj-divider-thickness);
+    inline-size: 100%;
+    margin-block: var(--kj-divider-spacing);
+    background-color: var(--kj-divider-color);
+  }
+
+  /* Vertical, rule-only — flips the axis using logical sizing. */
+  .kj-divider[data-with-content="false"][data-orientation="vertical"] {
+    inline-size: var(--kj-divider-thickness);
+    block-size: auto;
+    align-self: stretch;
+    margin-block: 0;
+    margin-inline: var(--kj-divider-spacing);
+  }
+
+  /* With-content (label nestled into the rule). */
+  .kj-divider[data-with-content="true"] {
+    display: flex;
+    align-items: center;
+    gap: var(--kj-divider-gap);
+    margin-block: var(--kj-divider-spacing);
+  }
+
+  .kj-divider[data-with-content="true"][data-orientation="vertical"] {
+    flex-direction: column;
+    block-size: 100%;
+    margin-block: 0;
+    margin-inline: var(--kj-divider-spacing);
+  }
+
+  .kj-divider[data-with-content="true"]::before,
+  .kj-divider[data-with-content="true"]::after {
+    content: "";
+    flex: 1 1 0;
+    background-color: var(--kj-divider-color);
+    block-size: var(--kj-divider-thickness);
+  }
+
+  .kj-divider[data-with-content="true"][data-orientation="vertical"]::before,
+  .kj-divider[data-with-content="true"][data-orientation="vertical"]::after {
+    inline-size: var(--kj-divider-thickness);
+    block-size: auto;
+  }
+
+  /* Alignment of the projected label within the rule. */
+  .kj-divider[data-with-content="true"][data-align="start"]::before  { flex-grow: 0; flex-basis: 1rem; }
+  .kj-divider[data-with-content="true"][data-align="end"]::after     { flex-grow: 0; flex-basis: 1rem; }
+
+  /* Variant routing — line style. */
+  .kj-divider[data-variant="dashed"][data-with-content="false"] {
+    background-color: transparent;
+    border-block-start: var(--kj-divider-thickness) dashed var(--kj-divider-color);
+    block-size: 0;
+  }
+  .kj-divider[data-variant="dashed"][data-with-content="false"][data-orientation="vertical"] {
+    border-block-start: 0;
+    border-inline-start: var(--kj-divider-thickness) dashed var(--kj-divider-color);
+    inline-size: 0;
+  }
+  .kj-divider[data-variant="dotted"][data-with-content="false"] {
+    background-color: transparent;
+    border-block-start: var(--kj-divider-thickness) dotted var(--kj-divider-color);
+    block-size: 0;
+  }
+  .kj-divider[data-variant="dotted"][data-with-content="false"][data-orientation="vertical"] {
+    border-block-start: 0;
+    border-inline-start: var(--kj-divider-thickness) dotted var(--kj-divider-color);
+    inline-size: 0;
+  }
+
+  /* Size routing — spacing + thickness. */
+  .kj-divider[data-size="sm"] { --kj-divider-spacing: var(--kj-space-sm, 0.5rem); --kj-divider-thickness: 1px; }
+  .kj-divider[data-size="lg"] { --kj-divider-spacing: var(--kj-space-lg, 2rem);  --kj-divider-thickness: 2px; }
+
+  .kj-divider__content {
+    color: var(--kj-fg-default);
+    font: inherit;
+    white-space: nowrap;
+  }
+}