@kerfjs/ui 5.0.0-beta.104 → 5.0.0-beta.105

package/dist/styles/disclosure-arrow.css

@@ -16,6 +16,26 @@
   height: 100%;
 }
 
+/* In a Disclosure the native <details> owns the open state, so the arrow
+   follows its live [open] rather than the render-time rotation. */
+.kui-disclosure > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(0deg);
+}
+
+.kui-disclosure[open] > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(90deg);
+}
+
+.kui-disclosure:dir(rtl) > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(180deg);
+}
+
+.kui-disclosure[open]:dir(rtl)
+  > .kui-disclosure__summary
+  > .kui-disclosure-arrow {
+  transform: rotate(90deg);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-disclosure-arrow {
     transition-duration: 0s;

package/dist/styles/disclosure.css

@@ -0,0 +1,98 @@
+/* A native <details> on the shared content-item geometry: the summary row and
+   the content share one 8px inset inside the item's 1px border, so the title
+   and the first content line up on the text column. */
+.kui-disclosure {
+  --_kui-disclosure-border: transparent;
+  --_kui-disclosure-background: transparent;
+
+  display: block;
+  min-width: 0;
+  margin: 0 var(--kui-layout-inline-margin, 0.5rem);
+  padding: 0;
+  box-sizing: border-box;
+  border: var(--kui-layout-item-border-width, 1px) solid
+    var(--_kui-disclosure-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: inherit;
+  background: var(--_kui-disclosure-background);
+}
+
+.kui-disclosure[data-appearance="framed"] {
+  --_kui-disclosure-border: var(--kui-color-neutral-border-normal);
+}
+
+.kui-disclosure[data-appearance="sunken"] {
+  --_kui-disclosure-border: var(--kui-color-neutral-border-normal);
+  --_kui-disclosure-background: var(--kui-sunken-surface);
+}
+
+.kui-disclosure__summary {
+  display: flex;
+  min-height: 2.625rem;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--kui-space-xs);
+  border-radius: inherit;
+  font-weight: var(--kui-font-weight-semibold, 500);
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* The DisclosureArrow is the marker; drop the platform's, and any marker a
+   page-wide details stylesheet (such as Web Awesome's native.css) adds. */
+.kui-disclosure__summary::after {
+  content: none;
+}
+
+.kui-disclosure__summary::-webkit-details-marker {
+  display: none;
+}
+
+.kui-disclosure__summary::marker {
+  content: "";
+}
+
+.kui-disclosure__summary:hover {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-disclosure__summary:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-disclosure__title {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+
+.kui-disclosure__detail {
+  flex: none;
+  color: var(--kui-color-text-quiet);
+  font-weight: normal;
+}
+
+/* Kerf block content (Text, a List, a ValueTable) brings the shared 1px +
+   8px inset, so the content area adds only what puts that inset on the
+   title's text column: the arrow and the summary gap, less the 1px border
+   the content draws. Its own bottom inset closes the item. */
+.kui-disclosure__content {
+  padding-inline: calc(
+      var(--kui-disclosure-arrow-size, 1.125rem) + var(--kui-space-xs) -
+        var(--kui-layout-item-border-width, 1px)
+    )
+    0;
+}
+
+@media (forced-colors: active) {
+  .kui-disclosure[data-appearance="framed"],
+  .kui-disclosure[data-appearance="sunken"] {
+    border-color: CanvasText;
+  }
+}

package/dist/styles/foundation.css

@@ -5,9 +5,7 @@
   --kui-font-sans: var(
     --wa-font-family-body,
     ui-sans-serif,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
+    system-ui,
     sans-serif
   );
   /* Kerf owns the code stack rather than deferring to Web Awesome's
@@ -24,7 +22,7 @@
   --kui-font-l: var(--wa-font-size-l, 20px);
   --kui-font-xl: var(--wa-font-size-xl, 25px);
   --kui-font-2xl: var(--wa-font-size-2xl, 32px);
-  --kui-font-weight-semibold: var(--wa-font-weight-semibold, 650);
+  --kui-font-weight-semibold: var(--wa-font-weight-semibold, 500);
   /* 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:
@@ -531,6 +529,10 @@
     --wa-shadow-s,
     0 1px 3px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.5))
   );
+  --kui-shadow-m: var(
+    --wa-shadow-m,
+    0 0.35rem 1rem light-dark(rgb(0 0 0 / 0.11), rgb(0 0 0 / 0.4))
+  );
   --kui-shadow-l: var(
     --wa-shadow-l,
     0 0.75rem 2rem light-dark(rgb(0 0 0 / 0.09), rgb(0 0 0 / 0.32))

package/dist/styles/list-detail-dialog.css

@@ -0,0 +1,11 @@
+/* Public stylesheet entry; implementation is colocated with the component.
+   ListDetailDialog adds no rules of its own (a header-less DialogSurface around
+   a SplitView of Panes), so this entry pulls in the stylesheets it renders. */
+@import "./surface-scaffold.css";
+@import "./split-view.css";
+@import "./nav-stack.css";
+@import "./pane.css";
+@import "./toolbar.css";
+@import "./toolbar-control-group.css";
+@import "./toolbar-text.css";
+@import "./lucide-icon.css";

package/dist/styles/list.css

@@ -122,12 +122,43 @@
   border-radius: var(--kui-radius-m);
 }
 
+/* `contentWidth`: a readable page column. The measure is the content's, so
+   the cap adds the list's own insets; `center` (default) centers the column. */
+.kui-list[data-content-width] {
+  width: 100%;
+  max-width: calc(
+    var(--_kui-list-content-width) + var(--_kui-list-inset-left, 0px) +
+      var(--_kui-list-inset-right, 0px)
+  );
+}
+
+.kui-list[data-content-width="compact"] {
+  --_kui-list-content-width: 27.5rem;
+}
+
+.kui-list[data-content-width="medium"] {
+  --_kui-list-content-width: 40rem;
+}
+
+.kui-list[data-content-width="wide"] {
+  --_kui-list-content-width: 54rem;
+}
+
+.kui-list[data-content-align="center"] {
+  margin-inline: auto;
+}
+
 .kui-list[data-h-align="left"] {
   align-items: flex-start;
   align-content: flex-start;
 }
 
 .kui-list[data-h-align="center"] {
+  align-items: center;
+  align-content: center;
+}
+
+.kui-list[data-h-align="around"] {
   align-items: center;
   align-content: space-around;
 }
@@ -137,7 +168,13 @@
   align-content: flex-end;
 }
 
+/* `middle` gathers the children in the middle, keeping their gap;
+   `space-around` (`around`) spreads them. */
 .kui-list[data-v-align="middle"] {
+  justify-content: center;
+}
+
+.kui-list[data-v-align="around"] {
   justify-content: space-around;
 }
 

package/dist/styles/{composer.css → message-composer.css}

@@ -5,9 +5,9 @@
    quiet hint and trailing actions. The 8px padding puts the field's text on
    the 17px text column when the composer sits 8px from a container edge. */
 
-.kui-composer {
-  --_kui-composer-min-rows: 1;
-  --_kui-composer-max-rows: 8;
+.kui-message-composer {
+  --_kui-message-composer-min-rows: 1;
+  --_kui-message-composer-max-rows: 8;
   display: flex;
   flex-direction: column;
   gap: var(--kui-layout-control-gap, 0.5rem);
@@ -25,11 +25,11 @@
 }
 
 /* The frame is the field's boundary, so it carries the focus state. */
-.kui-composer:focus-within {
+.kui-message-composer:focus-within {
   border-color: var(--kui-color-brand-border-loud);
 }
 
-.kui-composer__field {
+.kui-message-composer__field {
   display: block;
   width: 100%;
   min-width: 0;
@@ -42,57 +42,41 @@
   background: transparent;
   font: inherit;
   font-size: var(--kui-font-m, inherit);
-  line-height: var(--wa-line-height-normal, 1.6);
+  line-height: 1.6;
   resize: none;
   field-sizing: content;
-  min-height: calc(var(--_kui-composer-min-rows) * 1lh + 0.5rem);
-  max-height: calc(var(--_kui-composer-max-rows) * 1lh + 0.5rem);
+  min-height: calc(var(--_kui-message-composer-min-rows) * 1lh + 0.5rem);
+  max-height: calc(var(--_kui-message-composer-max-rows) * 1lh + 0.5rem);
   overflow-y: auto;
 }
 
 /* Engines without content sizing keep a three-line field, clamped to the
    row bounds, that scrolls once the message is longer. */
 @supports not (field-sizing: content) {
-  .kui-composer__field {
+  .kui-message-composer__field {
     height: calc(
-      clamp(var(--_kui-composer-min-rows), 3, var(--_kui-composer-max-rows)) *
+      clamp(
+          var(--_kui-message-composer-min-rows),
+          3,
+          var(--_kui-message-composer-max-rows)
+        ) *
         1lh + 0.5rem
     );
   }
 }
 
-.kui-composer__field::placeholder {
+.kui-message-composer__field::placeholder {
   color: var(--kui-color-neutral-on-quiet);
   opacity: 1;
 }
 
-.kui-composer__field:disabled {
+.kui-message-composer__field:disabled {
   color: var(--kui-color-neutral-on-quiet);
   cursor: not-allowed;
 }
 
-.kui-composer__actions {
-  display: flex;
-  align-items: center;
-  gap: var(--kui-layout-control-gap, 0.5rem);
-  min-width: 0;
-}
-
-.kui-composer__hint {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.kui-composer__trailing {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: var(--kui-layout-control-gap, 0.5rem);
-  margin-inline-start: auto;
-}
-
 @media (forced-colors: active) {
-  .kui-composer:focus-within {
+  .kui-message-composer:focus-within {
     border-color: Highlight;
     outline: 2px solid Highlight;
     outline-offset: 1px;

package/dist/styles/overlay-toast.css

@@ -0,0 +1,149 @@
+/* Toast presentation for the core `kerfjs/overlay` `toast()`. The core ships
+   no CSS: it appends each toast (`.kerf-toast`, plus `.kerf-toast--<variant>`)
+   to one body-level `.kerf-toasts` live region. This opt-in stylesheet places
+   that region above the bottom edge (clear of the safe area), stacks its
+   toasts newest last with an 8px gap, gives each toast the raised surface,
+   fades each one in as it arrives, and fades it out on the core's
+   `exitClass: 'kui-toast-exit'` with an `exitDuration` of 200. A toast whose only child is a `StateBanner` takes
+   the banner's tone and chrome instead of its own. Put `data-placement="top"`
+   on an app-owned region (passed as `container`) to stack from the top. */
+.kerf-toasts {
+  position: fixed;
+  z-index: var(--kui-overlay-toast-z-index, 1100);
+  display: flex;
+  box-sizing: border-box;
+  width: min(100%, 30rem);
+  padding: var(--kui-space-m);
+  margin: 0 auto;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--kui-space-xs);
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding-block-end: calc(
+    var(--kui-space-m) +
+      var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  /* The region spans the edge but never blocks the page; each toast takes
+     its own presses. */
+  pointer-events: none;
+}
+
+.kerf-toasts:empty {
+  display: none;
+}
+
+.kerf-toasts[data-placement="top"] {
+  flex-direction: column-reverse;
+  inset-block: 0 auto;
+  padding-block: calc(
+      var(--kui-space-m) +
+        var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+    )
+    var(--kui-space-m);
+}
+
+.kerf-toast {
+  --_kui-overlay-toast-background: var(--kui-color-surface-raised);
+  --_kui-overlay-toast-border: var(--kui-color-neutral-border-normal);
+  --_kui-overlay-toast-foreground: var(--kui-color-text);
+  --_kui-overlay-toast-tone: transparent;
+
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--kui-space-s) var(--kui-space-m);
+  border: 1px solid var(--_kui-overlay-toast-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--_kui-overlay-toast-foreground);
+  /* A tone is a quiet fill over the opaque raised surface, so the page never
+     shows through. */
+  background:
+    linear-gradient(
+      var(--_kui-overlay-toast-tone),
+      var(--_kui-overlay-toast-tone)
+    ),
+    var(--_kui-overlay-toast-background);
+  box-shadow: var(--kui-shadow-l);
+  font: inherit;
+  font-size: var(--kui-font-size-m, 1rem);
+  line-height: var(--kui-line-height-normal, 1.4);
+  overflow-wrap: anywhere;
+  pointer-events: auto;
+}
+
+.kerf-toast--info {
+  --_kui-overlay-toast-tone: var(--kui-color-brand-fill-quiet);
+  --_kui-overlay-toast-border: var(--kui-color-brand-border-quiet);
+  --_kui-overlay-toast-foreground: var(--kui-color-brand-on-fill);
+}
+
+.kerf-toast--success {
+  --_kui-overlay-toast-tone: var(--kui-color-success-fill-quiet);
+  --_kui-overlay-toast-border: var(--kui-color-success-border-normal);
+  --_kui-overlay-toast-foreground: var(--kui-color-success-on-fill);
+}
+
+.kerf-toast--warning {
+  --_kui-overlay-toast-tone: var(--kui-color-warning-fill-quiet);
+  --_kui-overlay-toast-border: var(--kui-color-warning-border-normal);
+  --_kui-overlay-toast-foreground: var(--kui-color-warning-on-fill);
+}
+
+/* A StateBanner as the toast's only content draws the tone, border, and
+   inset itself (from its own stylesheet); the toast keeps only its elevation
+   and corner. */
+.kerf-toast:has(> .kui-state-banner:only-child) {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+/* Entrance: a new toast rises from the region's edge and fades in, with no
+   class to pass. Exit: pass `exitClass: 'kui-toast-exit'` and
+   `exitDuration: 200`, and it sinks and fades out before removal. */
+.kerf-toast {
+  transition:
+    opacity 200ms ease,
+    translate 200ms ease;
+}
+
+@starting-style {
+  .kerf-toast {
+    opacity: 0;
+    translate: 0 0.75rem;
+  }
+
+  .kerf-toasts[data-placement="top"] > .kerf-toast {
+    translate: 0 -0.75rem;
+  }
+}
+
+.kerf-toast.kui-toast-exit {
+  opacity: 0;
+  translate: 0 0.75rem;
+}
+
+.kerf-toasts[data-placement="top"] > .kerf-toast.kui-toast-exit {
+  translate: 0 -0.75rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kerf-toast,
+  .kerf-toasts[data-placement="top"] > .kerf-toast {
+    translate: none !important;
+  }
+}
+
+:root[data-kui-effects="static"] .kerf-toast {
+  translate: none !important;
+  transition: none !important;
+}
+
+@media (forced-colors: active) {
+  .kerf-toast {
+    border-color: CanvasText;
+    color: CanvasText;
+    background: Canvas;
+    box-shadow: none;
+  }
+}

package/dist/styles/overlay-tooltip.css

@@ -0,0 +1,55 @@
+/* Tooltip presentation for the core `kerfjs/overlay` `tooltip()`. The core
+   ships no CSS: it shows a `.kerf-tooltip` wrapper (a `<div>`, or a
+   `[popover]` with `native: true`) that it positions next to its anchor, with
+   plain text wrapped in `.kerf-tooltip__text`. This opt-in stylesheet gives it
+   the help tag's look, the one icon-only controls already show: the loud
+   neutral fill with on-loud text at 14px, a 3px radius, and a short fade-in
+   (a scale would distort the box tooltip() measures to place it). It wraps
+   longer text at 40 characters and never takes the pointer. Pass
+   `exitClass: 'kui-tooltip-exit'` with `exitDuration: 100` and it fades out
+   as it hides. */
+.kerf-tooltip {
+  z-index: var(--kui-overlay-tooltip-z-index, 1200);
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(40ch, calc(100vw - 1rem));
+  padding: 0.25em 0.5em;
+  overflow: hidden;
+  border: 1px solid var(--kui-color-neutral-fill-loud, #48484a);
+  border-radius: 0.1875rem;
+  color: var(--kui-color-neutral-on-loud, #fff);
+  background: var(--kui-color-neutral-fill-loud, #48484a);
+  font: inherit;
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+  text-align: start;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root:not([data-kui-effects="static"]) .kerf-tooltip {
+    transition: opacity 150ms ease;
+  }
+
+  @starting-style {
+    :root:not([data-kui-effects="static"]) .kerf-tooltip {
+      opacity: 0;
+    }
+  }
+}
+
+.kerf-tooltip.kui-tooltip-exit {
+  opacity: 0;
+}
+
+@media (forced-colors: active) {
+  .kerf-tooltip {
+    border-color: CanvasText;
+    color: CanvasText;
+    background: Canvas;
+  }
+}