@kerfjs/ui 4.4.1 → 5.0.0-beta.10

package/dist/styles/collapsible-panel.css

@@ -0,0 +1,146 @@
+/* A standalone collapsible rail / drawer. Collapsing snaps the panel's own size
+   to zero (one reflow, no per-frame width/height animation) while the fixed-size
+   content slides out via transform (composited, clipped by overflow). The same
+   technique as Workbench and the catalog sidebar (docs/18). */
+.kui-collapsible-panel {
+  overflow: hidden;
+  background: var(--kui-color-surface);
+}
+
+.kui-collapsible-panel--left,
+.kui-collapsible-panel--right {
+  width: var(--kui-collapsible-panel-width, 17.5rem);
+  min-width: 0;
+  height: 100%;
+}
+
+.kui-collapsible-panel--left {
+  border-inline-end: 1px solid var(--kui-color-border);
+}
+
+.kui-collapsible-panel--right {
+  border-inline-start: 1px solid var(--kui-color-border);
+}
+
+.kui-collapsible-panel--bottom {
+  width: 100%;
+  height: var(--kui-collapsible-panel-height, 13.75rem);
+  min-height: 0;
+  border-block-start: 1px solid var(--kui-color-border);
+}
+
+.kui-collapsible-panel[data-collapsed="true"] {
+  border: 0;
+}
+
+.kui-collapsible-panel--left[data-collapsed="true"],
+.kui-collapsible-panel--right[data-collapsed="true"] {
+  width: 0;
+}
+
+.kui-collapsible-panel--bottom[data-collapsed="true"] {
+  height: 0;
+}
+
+/* The fixed-size sliding content: it keeps a definite size so the transform
+   reads as a slide, not a squeeze. */
+.kui-collapsible-panel__content {
+  height: 100%;
+  transition: transform 200ms ease;
+}
+
+.kui-collapsible-panel--left .kui-collapsible-panel__content,
+.kui-collapsible-panel--right .kui-collapsible-panel__content {
+  width: var(--kui-collapsible-panel-width, 17.5rem);
+}
+
+.kui-collapsible-panel--bottom .kui-collapsible-panel__content {
+  width: 100%;
+  height: var(--kui-collapsible-panel-height, 13.75rem);
+}
+
+.kui-collapsible-panel--left[data-collapsed="true"]
+  .kui-collapsible-panel__content {
+  transform: translateX(-100%);
+}
+
+.kui-collapsible-panel--right[data-collapsed="true"]
+  .kui-collapsible-panel__content {
+  transform: translateX(100%);
+}
+
+.kui-collapsible-panel--bottom[data-collapsed="true"]
+  .kui-collapsible-panel__content {
+  transform: translateY(100%);
+}
+
+/* Compact presentation: wireSidebar marks the host so the panel floats over the
+   content as an overlay with a dismissable backdrop instead of taking layout
+   space. The panel is fixed to its edge and slides in from off-screen. */
+[data-collapsible-overlay="true"] .kui-collapsible-panel {
+  position: fixed;
+  z-index: var(--kui-collapsible-panel-overlay-z, 40);
+  box-shadow: var(--kui-shadow-l, 0 8px 32px rgb(0 0 0 / 24%));
+}
+
+[data-collapsible-overlay="true"] .kui-collapsible-panel--left {
+  inset-block: 0;
+  inset-inline-start: 0;
+}
+
+[data-collapsible-overlay="true"] .kui-collapsible-panel--right {
+  inset-block: 0;
+  inset-inline-end: 0;
+}
+
+[data-collapsible-overlay="true"] .kui-collapsible-panel--bottom {
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+
+.kui-collapsible-panel__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--kui-collapsible-panel-backdrop-z, 39);
+  border: 0;
+  padding: 0;
+  background: var(--kui-color-scrim, rgb(0 0 0 / 32%));
+  cursor: pointer;
+}
+
+/* The standard toggle affordance: a plain icon button carrying the per-side
+   collapse/expand glyph. */
+.kui-collapsible-panel__toggle {
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  place-items: center;
+}
+
+.kui-collapsible-panel__toggle:hover {
+  border-color: var(--kui-color-border);
+  background: var(--kui-color-neutral-fill-normal);
+}
+
+.kui-collapsible-panel__toggle:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-collapsible-panel__toggle svg {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-collapsible-panel__content {
+    transition: none;
+  }
+}

package/dist/styles/disclosure-arrow.css

@@ -0,0 +1,23 @@
+.kui-disclosure-arrow {
+  display: inline-flex;
+  width: var(--kui-disclosure-arrow-size, 1.125rem);
+  height: var(--kui-disclosure-arrow-size, 1.125rem);
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(var(--_kui-disclosure-arrow-rotation, 0deg));
+  transform-origin: center;
+  transition: transform var(--kui-disclosure-arrow-duration, 0.2s) ease;
+}
+
+.kui-disclosure-arrow svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-disclosure-arrow {
+    transition-duration: 0s;
+  }
+}

package/dist/styles/empty-state.css

@@ -0,0 +1,47 @@
+.kui-empty-state {
+  --kui-empty-state-foreground: var(--kui-color-neutral-on-quiet);
+  --kui-empty-state-title: var(--kui-color-text);
+  display: grid;
+  width: min(
+    calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem))),
+    28rem
+  );
+  min-height: 12rem;
+  margin: auto;
+  padding: var(--kui-space-xl);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-empty-state-border, transparent);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-empty-state-foreground);
+  background: var(--kui-empty-state-background, transparent);
+  place-items: center;
+  place-content: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  text-align: center;
+}
+.kui-empty-state__icon {
+  display: grid;
+  min-width: 2rem;
+  min-height: 2rem;
+  margin-block-end: var(--kui-space-xs);
+  color: inherit;
+  place-items: center;
+}
+.kui-empty-state__icon svg {
+  width: 2rem;
+  height: 2rem;
+  stroke-width: 1.5;
+}
+.kui-empty-state strong {
+  color: var(--kui-empty-state-title);
+  font-size: var(--kui-font-l);
+  font-weight: 650;
+}
+.kui-empty-state > span {
+  max-width: 24rem;
+  font-size: var(--kui-font-s);
+  line-height: 1.45;
+}
+.kui-empty-state__action {
+  margin-block-start: var(--kui-space-xs);
+}

package/dist/styles/foundation.css

@@ -0,0 +1,347 @@
+:root {
+  color-scheme: light dark;
+
+  /* Web Awesome-compatible typography and geometry with stable standalone fallbacks. */
+  --kui-font-sans: var(
+    --wa-font-family-body,
+    ui-sans-serif,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif
+  );
+  --kui-font-mono: var(
+    --wa-font-family-code,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace
+  );
+  --kui-font-2xs: var(--wa-font-size-2xs, 11px);
+  --kui-font-xs: var(--wa-font-size-xs, 12px);
+  --kui-font-s: var(--wa-font-size-s, 14px);
+  --kui-font-m: var(--wa-font-size-m, 16px);
+  --kui-font-l: var(--wa-font-size-l, 20px);
+  --kui-font-2xl: var(--wa-font-size-2xl, 32px);
+  --kui-font-weight-semibold: var(--wa-font-weight-semibold, 650);
+  /* Official spacing scale (see docs/layout.md "Spacing scale"). Five canonical
+     steps, each expressing one relationship — pick by how connected the elements
+     are, not by eye:
+       0px  --kui-space-none  no separation (elements read as one unit)
+       4px  --kui-space-2xs   very minor — connected, but readability/aesthetics
+                              demand a hair of air
+       8px  --kui-space-xs    standard — between elements within a group
+       16px --kui-space-m     minor — between homogeneous groups
+       24px --kui-space-l     major — between heterogeneous groups
+     --kui-space-s (12px) and --kui-space-xl (32px) are off the canonical rhythm;
+     reach for them only as deliberate exceptions, not as default steps. All
+     scalable values are remify-authored against the fixed 16px baseline. */
+  --kui-space-none: 0;
+  --kui-space-2xs: var(--wa-space-2xs, 0.25rem);
+  --kui-space-xs: var(--wa-space-xs, 0.5rem);
+  --kui-space-s: var(--wa-space-s, 0.75rem);
+  --kui-space-m: var(--wa-space-m, 1rem);
+  --kui-space-l: var(--wa-space-l, 1.5rem);
+  --kui-space-xl: var(--wa-space-xl, 2rem);
+  /* Device-class breakpoints, mirrored from @kerfjs/ui/device-class's
+     DEFAULT_BREAKPOINTS so CSS media queries and the reactive deviceClass()
+     signal read the same minimum widths. Authored as literal px (a media-query
+     boundary is a physical width, not a scalable length). */
+  --kui-bp-mobile: 360px;
+  --kui-bp-tablet: 720px;
+  --kui-bp-desktop: 1024px;
+  --kui-bp-xl-desktop: 1440px;
+  --kui-layout-inline-margin: var(--kui-space-xs);
+  --kui-layout-item-border-width: 1px;
+  --kui-layout-item-padding: var(--kui-space-xs);
+  --kui-layout-item-gap: var(--kui-space-xs);
+  --kui-layout-content-gap: var(--kui-space-l);
+  --kui-layout-control-gap: var(--kui-space-xs);
+  --kui-layout-metadata-gap: var(--kui-space-2xs);
+  --kui-layout-rounded-radius: calc(1px + 0.6875rem);
+  --kui-layout-pill-radius: calc(1px + 1.3125rem);
+  --kui-toolbar-group-inner-size: 2.625rem;
+  --kui-toolbar-group-size: calc(2px + var(--kui-toolbar-group-inner-size));
+  --kui-toolbar-gap: var(--kui-layout-item-gap);
+  --kui-radius-s: var(--wa-border-radius-s, 0.1875rem);
+  --kui-radius-m: var(--wa-border-radius-m, 0.375rem);
+  --kui-radius-l: var(--wa-border-radius-l, 0.75rem);
+  --kui-radius-circle: var(--wa-border-radius-circle, 50%);
+  --kui-radius-pill: var(--wa-border-radius-pill, 999px);
+  --kui-disclosure-icon-scale: 0.5;
+  /* macOS Tahoe light semantics used by Hot Sheet 2, with a compatible dark extension. */
+  --kui-color-surface: var(
+    --wa-color-surface-default,
+    light-dark(#fff, #1c1c1e)
+  );
+  --kui-color-surface-raised: var(
+    --wa-color-surface-raised,
+    var(--kui-color-surface)
+  );
+  --kui-color-surface-lowered: var(
+    --wa-color-surface-lowered,
+    light-dark(#f2f2f7, #111113)
+  );
+  --kui-color-text: var(--wa-color-text-normal, light-dark(#1d1d1f, #f5f5f7));
+  --kui-color-text-quiet: var(
+    --wa-color-text-quiet,
+    light-dark(#6e6e73, #aeaeb2)
+  );
+  --kui-color-text-link: var(
+    --wa-color-text-link,
+    var(--kui-color-brand-fill-loud)
+  );
+
+  --kui-color-neutral-fill-quiet: var(
+    --wa-color-neutral-fill-quiet,
+    var(--kui-color-surface-lowered)
+  );
+  --kui-color-neutral-fill-normal: var(
+    --wa-color-neutral-fill-normal,
+    light-dark(#e5e5ea, #3a3a3c)
+  );
+  --kui-color-neutral-fill-loud: var(
+    --wa-color-neutral-fill-loud,
+    light-dark(#48484a, #e5e5ea)
+  );
+  --kui-color-neutral-border-quiet: var(
+    --wa-color-neutral-border-quiet,
+    var(--kui-color-neutral-fill-normal)
+  );
+  --kui-color-neutral-border-normal: var(
+    --wa-color-neutral-border-normal,
+    light-dark(#d1d1d6, #48484a)
+  );
+  --kui-color-neutral-border-loud: var(
+    --wa-color-neutral-border-loud,
+    light-dark(#aeaeb2, #636366)
+  );
+  --kui-color-neutral-on-quiet: var(
+    --wa-color-neutral-on-quiet,
+    var(--kui-color-text-quiet)
+  );
+  --kui-color-neutral-on-normal: var(
+    --wa-color-neutral-on-normal,
+    var(--kui-color-text)
+  );
+  --kui-color-neutral-on-loud: var(
+    --wa-color-neutral-on-loud,
+    var(--kui-color-surface)
+  );
+
+  --kui-color-brand-fill-loud: var(
+    --wa-color-brand-fill-loud,
+    light-dark(#0088ff, #64d2ff)
+  );
+  --kui-color-brand-fill-quiet: var(
+    --wa-color-brand-fill-quiet,
+    color-mix(
+      in srgb,
+      var(--kui-color-brand-fill-loud) 8%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-brand-fill-normal: var(
+    --wa-color-brand-fill-normal,
+    color-mix(
+      in srgb,
+      var(--kui-color-brand-fill-loud) 16%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-brand-border-quiet: var(
+    --wa-color-brand-border-quiet,
+    color-mix(
+      in srgb,
+      var(--kui-color-brand-fill-loud) 35%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-brand-border-normal: var(
+    --wa-color-brand-border-normal,
+    color-mix(
+      in srgb,
+      var(--kui-color-brand-fill-loud) 58%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-brand-border-loud: var(
+    --wa-color-brand-border-loud,
+    var(--kui-color-brand-fill-loud)
+  );
+  --kui-color-brand-on-quiet: var(
+    --wa-color-brand-on-quiet,
+    light-dark(#1e6ef4, #8acbff)
+  );
+  --kui-color-brand-on-normal: var(
+    --wa-color-brand-on-normal,
+    var(--kui-color-brand-on-quiet)
+  );
+  --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
+
+  --kui-color-success-fill-loud: var(--wa-color-success-fill-loud, #34c759);
+  --kui-color-success-fill-quiet: var(
+    --wa-color-success-fill-quiet,
+    color-mix(
+      in srgb,
+      var(--kui-color-success-fill-loud) 14%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-success-fill-normal: var(
+    --wa-color-success-fill-normal,
+    color-mix(
+      in srgb,
+      var(--kui-color-success-fill-loud) 72%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-success-border-quiet: var(
+    --wa-color-success-border-quiet,
+    color-mix(
+      in srgb,
+      var(--kui-color-success-fill-loud) 32%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-success-border-normal: var(
+    --wa-color-success-border-normal,
+    color-mix(
+      in srgb,
+      var(--kui-color-success-fill-loud) 50%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-success-border-loud: var(
+    --wa-color-success-border-loud,
+    color-mix(
+      in srgb,
+      var(--kui-color-success-fill-loud) 78%,
+      var(--kui-color-neutral-on-normal)
+    )
+  );
+  --kui-color-success-on-quiet: var(--wa-color-success-on-quiet, #008932);
+  --kui-color-success-on-normal: var(--wa-color-success-on-normal, #006d28);
+  --kui-color-success-on-loud: var(--wa-color-success-on-loud, #fff);
+
+  --kui-color-warning-fill-loud: var(--wa-color-warning-fill-loud, #ffcc00);
+  --kui-color-warning-fill-quiet: var(
+    --wa-color-warning-fill-quiet,
+    color-mix(
+      in srgb,
+      var(--kui-color-warning-fill-loud) 9%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-warning-fill-normal: var(
+    --wa-color-warning-fill-normal,
+    color-mix(
+      in srgb,
+      var(--kui-color-warning-fill-loud) 22%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-warning-border-quiet: var(
+    --wa-color-warning-border-quiet,
+    color-mix(
+      in srgb,
+      var(--kui-color-warning-fill-loud) 35%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-warning-border-normal: var(
+    --wa-color-warning-border-normal,
+    color-mix(
+      in srgb,
+      var(--kui-color-warning-fill-loud) 58%,
+      var(--kui-color-neutral-on-normal)
+    )
+  );
+  --kui-color-warning-border-loud: var(
+    --wa-color-warning-border-loud,
+    color-mix(
+      in srgb,
+      var(--kui-color-warning-fill-loud) 78%,
+      var(--kui-color-neutral-on-normal)
+    )
+  );
+  --kui-color-warning-on-quiet: var(--wa-color-warning-on-quiet, #a16a00);
+  --kui-color-warning-on-normal: var(--wa-color-warning-on-normal, #5f3f00);
+  --kui-color-warning-on-loud: var(--wa-color-warning-on-loud, #1d1d1f);
+
+  --kui-color-danger-fill-loud: var(--wa-color-danger-fill-loud, #ff383c);
+  --kui-color-danger-fill-quiet: var(
+    --wa-color-danger-fill-quiet,
+    color-mix(
+      in srgb,
+      var(--kui-color-danger-fill-loud) 7%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-danger-fill-normal: var(
+    --wa-color-danger-fill-normal,
+    color-mix(
+      in srgb,
+      var(--kui-color-danger-fill-loud) 14%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-danger-border-quiet: var(
+    --wa-color-danger-border-quiet,
+    color-mix(
+      in srgb,
+      var(--kui-color-danger-fill-loud) 32%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-danger-border-normal: var(
+    --wa-color-danger-border-normal,
+    color-mix(
+      in srgb,
+      var(--kui-color-danger-fill-loud) 50%,
+      var(--kui-color-surface)
+    )
+  );
+  --kui-color-danger-border-loud: var(
+    --wa-color-danger-border-loud,
+    color-mix(
+      in srgb,
+      var(--kui-color-danger-fill-loud) 78%,
+      var(--kui-color-neutral-on-normal)
+    )
+  );
+  --kui-color-danger-on-quiet: var(--wa-color-danger-on-quiet, #c20b20);
+  --kui-color-danger-on-normal: var(--wa-color-danger-on-normal, #8e0717);
+  --kui-color-danger-on-loud: var(--wa-color-danger-on-loud, #fff);
+
+  /* Compatibility aliases retained for existing @kerfjs/ui consumers. */
+  --kui-color-border: var(
+    --wa-color-surface-border,
+    var(--kui-color-neutral-border-normal)
+  );
+  --kui-color-border-quiet: var(--kui-color-neutral-border-quiet);
+  --kui-color-accent: var(--kui-color-brand-fill-normal);
+  --kui-color-accent-text: var(--kui-color-brand-on-quiet);
+  --kui-color-success: var(--kui-color-success-fill-quiet);
+  --kui-color-success-text: var(--kui-color-success-on-quiet);
+  --kui-color-warning: var(--kui-color-warning-fill-quiet);
+  --kui-color-warning-text: var(--kui-color-warning-on-quiet);
+  --kui-color-danger: var(--kui-color-danger-fill-quiet);
+  --kui-color-danger-text: var(--kui-color-danger-on-quiet);
+  --kui-focus-ring: var(
+    --wa-focus-ring,
+    3px solid var(--wa-color-focus, var(--kui-color-brand-fill-loud))
+  );
+  --kui-shadow-s: var(--wa-shadow-s, 0 1px 3px rgb(0 0 0 / 0.14));
+  --kui-shadow-l: var(
+    --wa-shadow-l,
+    0 0.75rem 2rem rgb(0 0 0 / 0.09)
+  );
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --kui-color-border: currentColor;
+    --kui-focus-ring: 3px solid currentColor;
+  }
+}

package/dist/styles/layout.css

@@ -0,0 +1,73 @@
+/* Shared application geometry: unpadded panes containing toolbars and content. */
+.kui-pane {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+.kui-pane__toolbar,
+.kui-pane__footer {
+  min-width: 0;
+}
+
+.kui-pane__content {
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.kui-content {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  flex-direction: column;
+  gap: var(--kui-layout-content-gap, 1.5rem);
+}
+
+.kui-content-item {
+  min-width: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: var(--kui-layout-item-border-width, 1px) solid
+    var(--kui-content-item-border, transparent);
+  border-radius: var(
+    --kui-content-item-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+  background: var(--kui-content-item-background, transparent);
+}
+
+.kui-content-item--pill {
+  --kui-content-item-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+}
+
+.kui-control-cluster {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kui-layout-control-gap, 0.5rem);
+}
+
+.kui-inline-metadata {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--kui-layout-metadata-gap, 0.25rem);
+}
+
+.kui-scroll-owner {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}