@kerfjs/ui 5.0.0-beta.3 → 5.0.0-beta.30

package/dist/styles/collapsible-panel.css

@@ -0,0 +1,212 @@
+/* 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 {
+  position: relative;
+  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[data-separator="hidden"] {
+  border-color: transparent;
+}
+
+.kui-collapsible-panel[data-content-overflow="auto"] {
+  overflow: auto;
+}
+
+.kui-collapsible-panel[data-content-overflow="visible"] {
+  z-index: var(--kui-collapsible-panel-popup-z, 5);
+  overflow: visible;
+}
+
+.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 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 {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  width: 100%;
+  height: var(--kui-collapsible-panel-height, 13.75rem);
+}
+
+.kui-collapsible-panel[data-collapse-motion="none"]
+  .kui-collapsible-panel__content {
+  transition: none;
+}
+
+.kui-collapsible-panel[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  .kui-collapsible-panel__content {
+  opacity: 0;
+}
+
+.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,
+.kui-collapsible-panel[data-presentation="overlay"] {
+  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,
+.kui-collapsible-panel--left[data-presentation="overlay"] {
+  inset-block: 0;
+  inset-inline-start: 0;
+}
+
+[data-collapsible-overlay="true"] .kui-collapsible-panel--right,
+.kui-collapsible-panel--right[data-presentation="overlay"] {
+  inset-block: 0;
+  inset-inline-end: 0;
+}
+
+[data-collapsible-overlay="true"] .kui-collapsible-panel--bottom,
+.kui-collapsible-panel--bottom[data-presentation="overlay"] {
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+
+.kui-collapsible-panel[data-presentation="overlay"][data-collapsed="true"] {
+  pointer-events: none;
+}
+
+.kui-collapsible-panel[data-presentation="hidden"] {
+  display: none;
+}
+
+[data-collapsible-responsive="hidden"] .kui-collapsible-panel {
+  display: none;
+}
+
+.kui-collapsible-panel__restore {
+  position: fixed;
+  z-index: var(--kui-collapsible-panel-restore-z, 42);
+  inset-block-end: calc(
+    var(--kui-collapsible-panel-restore-inset, 1rem) +
+      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+}
+
+.kui-collapsible-panel__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--kui-collapsible-panel-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+}
+
+.kui-collapsible-panel__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--kui-collapsible-panel-restore-inset, 1rem) +
+      var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.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/floating-toolbar.css

@@ -0,0 +1,38 @@
+.kui-floating-toolbar {
+  /* Inset from the container edges: a top toolbar sits 8px in, so this floats an
+     extra 8px past that (--kui-space-m = 16px). Override the token to reposition. */
+  --kui-floating-toolbar-inset: var(--kui-space-m, 1rem);
+
+  /* Floats above the main content of its nearest positioned ancestor. z-index
+     stays low so it never covers dialogs/overlays (it is not top-layer). Forced
+     dark so the controls read as one distinct floating layer over any theme. */
+  position: absolute;
+  z-index: 4;
+  display: flex;
+  color-scheme: dark;
+  align-items: center;
+  gap: var(--kui-space-xs, 0.5rem);
+}
+
+.kui-floating-toolbar[data-position^="bottom"] {
+  inset-block-end: var(--kui-floating-toolbar-inset);
+}
+
+.kui-floating-toolbar[data-position^="top"] {
+  inset-block-start: var(--kui-floating-toolbar-inset);
+}
+
+.kui-floating-toolbar[data-position$="-end"] {
+  inset-inline-end: var(--kui-floating-toolbar-inset);
+}
+
+.kui-floating-toolbar[data-position$="-start"] {
+  inset-inline-start: var(--kui-floating-toolbar-inset);
+}
+
+/* The centered edges span from the middle rather than an inline edge. */
+.kui-floating-toolbar[data-position="bottom"],
+.kui-floating-toolbar[data-position="top"] {
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}

package/dist/styles/foundation.css

@@ -24,12 +24,33 @@
   --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);
@@ -37,6 +58,7 @@
   --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-highlight-inset: 2px;
   --kui-layout-rounded-radius: calc(1px + 0.6875rem);
   --kui-layout-pill-radius: calc(1px + 1.3125rem);
   --kui-toolbar-group-inner-size: 2.625rem;
@@ -157,6 +179,42 @@
     var(--kui-color-brand-on-quiet)
   );
   --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
+  /* Brand accent text placed directly ON a brand fill (quiet or normal), such as
+     the info StateBanner and Select's current option. Darker than brand-on-quiet
+     so it clears WCAG AA (>=4.5:1): brand-on-quiet (#1e6ef4) resolves to only
+     3.77:1 over brand-fill-normal (#d6ecff) and 4.15:1 over brand-fill-quiet
+     (#ebf6ff), while #1a5dcf (same hue) clears ~4.9:1 and ~5.2:1 there. The dark
+     value matches brand-on-quiet, which already passes over the dark fills. */
+  --kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
+
+  /* Pop is attractive emphasis without status meaning: use it for featured,
+     novel, or celebratory content, never as a success/danger substitute. */
+  --kui-color-pop-fill-loud: light-dark(#af34d4, #da8fff);
+  --kui-color-pop-fill-quiet: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 10%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-fill-normal: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 18%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-quiet: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 36%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-normal: color-mix(
+    in srgb,
+    var(--kui-color-pop-fill-loud) 58%,
+    var(--kui-color-surface)
+  );
+  --kui-color-pop-border-loud: var(--kui-color-pop-fill-loud);
+  --kui-color-pop-on-quiet: light-dark(#792498, #e8a5ff);
+  --kui-color-pop-on-normal: var(--kui-color-pop-on-quiet);
+  --kui-color-pop-on-loud: light-dark(#fff, #241126);
+  --kui-color-pop-on-fill: var(--kui-color-pop-on-quiet);
 
   --kui-color-success-fill-loud: var(--wa-color-success-fill-loud, #34c759);
   --kui-color-success-fill-quiet: var(
@@ -202,6 +260,10 @@
   --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);
+  /* Success text placed ON a success fill (e.g. the success StateBanner). Darker
+     than success-on-quiet so it clears WCAG AA (>=4.5:1) over success-fill-quiet
+     (#e3f7e8), where #008932 reached only 4.05:1. Dark matches success-on-quiet. */
+  --kui-color-success-on-fill: light-dark(#00792c, #63e685);
 
   --kui-color-warning-fill-loud: var(--wa-color-warning-fill-loud, #ffcc00);
   --kui-color-warning-fill-quiet: var(
@@ -247,6 +309,10 @@
   --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);
+  /* Warning text placed ON a warning fill (e.g. the warning StateBanner). Darker
+     than warning-on-quiet so it clears WCAG AA (>=4.5:1) over warning-fill-quiet
+     (#fffae8), where #a16a00 reached only 4.39:1. Dark matches warning-on-quiet. */
+  --kui-color-warning-on-fill: light-dark(#8f5e00, #ffd84a);
 
   --kui-color-danger-fill-loud: var(--wa-color-danger-fill-loud, #ff383c);
   --kui-color-danger-fill-quiet: var(
@@ -301,6 +367,8 @@
   --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-pop: var(--kui-color-pop-fill-quiet);
+  --kui-color-pop-text: var(--kui-color-pop-on-fill);
   --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);
@@ -320,6 +388,18 @@
 
 @media (prefers-contrast: more) {
   :root {
+    --kui-color-pop-fill-quiet: Canvas;
+    --kui-color-pop-fill-normal: Canvas;
+    --kui-color-pop-fill-loud: Highlight;
+    --kui-color-pop-border-quiet: currentColor;
+    --kui-color-pop-border-normal: currentColor;
+    --kui-color-pop-border-loud: currentColor;
+    --kui-color-pop-on-quiet: currentColor;
+    --kui-color-pop-on-normal: currentColor;
+    --kui-color-pop-on-loud: HighlightText;
+    --kui-color-pop-on-fill: currentColor;
+    --kui-color-pop: Canvas;
+    --kui-color-pop-text: currentColor;
     --kui-color-border: currentColor;
     --kui-focus-ring: 3px solid currentColor;
   }

package/dist/styles/layout.css

@@ -1,24 +1,6 @@
-/* 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;
-}
+@import "./pane.css";
 
-.kui-pane__content {
-  min-width: 0;
-  min-height: 0;
-  padding: 0;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
+/* Shared application content geometry for Pane children and standalone stacks. */
 
 .kui-content {
   display: flex;

package/dist/styles/list-action-row.css

@@ -0,0 +1,224 @@
+.kui-list-action-row {
+  --kui-list-group-divider-color: var(--kui-color-neutral-border-quiet);
+  --kui-list-action-row-color: var(--kui-color-neutral-on-normal);
+  --kui-list-action-row-border: transparent;
+  --kui-list-action-row-background: transparent;
+  --kui-list-action-row-hover-border: var(--kui-color-neutral-border-normal);
+  --kui-list-action-row-hover-background: var(--kui-color-neutral-fill-quiet);
+  --kui-list-action-row-selected-color: var(--kui-color-neutral-on-normal);
+  --kui-list-action-row-selected-border: var(--kui-color-brand-border-quiet);
+  --kui-list-action-row-selected-background: var(--kui-color-brand-fill-normal);
+  --kui-list-action-row-trailing-hover-background: var(
+    --kui-color-neutral-fill-normal
+  );
+  display: flex;
+  width: calc(100% - (2 * var(--kui-layout-inline-margin, 0.5rem)));
+  min-height: 2.75rem;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-list-action-row-color);
+  background: var(--kui-list-action-row-background);
+  box-shadow: inset 0 0 0 1px var(--kui-list-action-row-border);
+  align-items: stretch;
+}
+
+.kui-list-action-row[data-density="compact"] {
+  min-height: 2.25rem;
+}
+
+.kui-list-action-row[data-density="compact"]
+  :is(.kui-list-action-row__primary, .kui-list-action-row__trailing-action) {
+  min-height: 2.25rem;
+}
+
+.kui-list-action-row[data-divider="before"],
+.kui-list-action-row[data-divider="both"] {
+  border-block-start: 1px solid var(--kui-list-group-divider-color);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.kui-list-action-row[data-divider="after"],
+.kui-list-action-row[data-divider="both"] {
+  border-block-end: 1px solid var(--kui-list-group-divider-color);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.kui-list-action-row:has(.kui-list-action-row__primary:hover) {
+  --kui-list-action-row-border: var(--kui-list-action-row-hover-border);
+  --kui-list-action-row-background: var(--kui-list-action-row-hover-background);
+}
+
+.kui-list-action-row[data-selected="true"],
+.kui-list-action-row[data-pressed="true"] {
+  --kui-list-action-row-border: var(--kui-list-action-row-selected-border);
+  --kui-list-action-row-background: var(
+    --kui-list-action-row-selected-background
+  );
+  color: var(--kui-list-action-row-selected-color);
+  font-weight: 650;
+}
+
+.kui-list-action-row:has(.kui-list-action-row__primary:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-list-action-row__primary,
+.kui-list-action-row__trailing-action {
+  height: auto !important;
+  min-height: 2.75rem;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.kui-list-action-row__primary {
+  position: relative;
+  display: block;
+  flex: 1 1 auto;
+  min-width: 2.75rem;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  padding-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  text-align: start;
+}
+
+.kui-list-action-row__primary:focus-visible {
+  outline: none;
+}
+
+.kui-list-action-row__primary:disabled,
+.kui-list-action-row__trailing-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.kui-list-action-row__icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  display: grid;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: currentColor;
+  transform: translateY(-50%);
+  place-items: center;
+}
+
+.kui-list-action-row__icon svg {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.kui-list-action-row__label {
+  display: grid;
+  min-width: 0;
+  min-height: calc(
+    2.75rem - (2 * var(--kui-layout-item-padding, 0.5rem))
+  );
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.kui-list-action-row__primary-label,
+.kui-list-action-row__description,
+.kui-list-action-row__status {
+  min-width: 0;
+}
+
+.kui-list-action-row__description,
+.kui-list-action-row__status {
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 400;
+  line-height: 1.3;
+}
+
+.kui-list-action-row__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.kui-list-action-row[data-has-icon="true"] .kui-list-action-row__label {
+  margin-inline-start: calc(
+    1.5rem + var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+
+.kui-list-action-row[data-multiline="true"] .kui-list-action-row__label {
+  display: block;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.kui-list-action-row[data-multiline="true"] .kui-list-action-row__icon {
+  inset-block-start: calc(
+    var(--kui-layout-item-padding, 0.5rem) + (1lh / 2)
+  );
+}
+
+.kui-list-action-row__trailing-action {
+  display: grid;
+  width: 2.75rem;
+  min-width: 2.75rem;
+  border-radius: var(--kui-radius-pill);
+  place-items: center;
+}
+
+.kui-list-action-row[data-trailing-visibility="interaction"]
+  .kui-list-action-row__trailing-action {
+  opacity: 0;
+}
+
+.kui-list-action-row[data-trailing-visibility="interaction"]:is(
+    :hover,
+    :focus-within
+  )
+  .kui-list-action-row__trailing-action {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .kui-list-action-row[data-trailing-visibility="interaction"]
+    .kui-list-action-row__trailing-action {
+    opacity: 1;
+  }
+}
+
+.kui-list-action-row__trailing-action:hover:not(:disabled) {
+  background: var(--kui-list-action-row-trailing-hover-background);
+}
+
+.kui-list-action-row__trailing-action:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
+.kui-list-action-row__trailing-action > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+@media (forced-colors: active) {
+  .kui-list-action-row {
+    --kui-list-action-row-border: ButtonText;
+    outline: 1px solid ButtonText;
+    outline-offset: -1px;
+  }
+
+  .kui-list-action-row[data-selected="true"],
+  .kui-list-action-row[data-pressed="true"] {
+    --kui-list-action-row-selected-color: HighlightText;
+    --kui-list-action-row-selected-background: Highlight;
+  }
+}