@kerfjs/ui 5.0.0-beta.100 → 5.0.0-beta.101

package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css

@@ -420,6 +420,134 @@
   --kui-toolbar-control-color: var(--kui-color-text);
 }
 
+/* `material="glass"`: the group floats over imagery or a clear toolbar on the
+   translucent chrome material (foundation.css), blurred and saturated, the
+   per-control glass pills of overlay chrome. The fill and filter come from the
+   shared tokens, so the group inherits every opaque fallback they carry
+   (reduced transparency, increased contrast, static effects, no
+   backdrop-filter). The group's own 1px border becomes the specular edge, a
+   translucent white highlight, instead of a gray border plus a highlight; a
+   soft two-layer shadow lifts it off the content beneath.
+
+   Controls take the normal text color: over its own 80% surface material the
+   quiet control color falls below AA over the worst-case backdrop, while the
+   text color stays well above it (about 10:1 light over black, 8:1 dark over
+   white). Hover mixes a text-color tint into the material itself, so a lone
+   control's whole-group hover keeps a fill rather than replacing it with a
+   bare tint. A raised or outline selection paints an opaque surface pill, so
+   the brand selected color keeps AA over any content. A borderless group has
+   no surface and ignores the material. */
+.kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: light-dark(
+    rgb(255 255 255 / 0.72),
+    rgb(255 255 255 / 0.16)
+  );
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  box-shadow:
+    0 0.0625rem 0.1875rem light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.32)),
+    0 0.375rem 1.125rem light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.28));
+}
+
+.kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"],
+    [data-tone="dark"],
+    [data-scrim="true"]
+  ) {
+  --kui-toolbar-control-background: var(--kui-chrome-material);
+  --kui-toolbar-control-color: var(--kui-color-text);
+  --kui-toolbar-control-hover-background: color-mix(
+    in srgb,
+    var(--kui-color-text) 12%,
+    var(--kui-chrome-material)
+  );
+}
+
+/* A dark glass group keeps its loud translucent fill and on-loud colors; its
+   edge is a faint white rim in either scheme. */
+.kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: rgb(255 255 255 / 0.18);
+}
+
+.kui-toolbar-control-group[data-material="glass"][data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-background: var(--kui-color-surface);
+}
+
+/* Wherever the chrome material turns opaque, the glass edge returns to the
+   group's normal border and a dark glass group to its opaque loud fill. The
+   default glass fill already follows the material tokens. */
+@supports not (
+  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
+) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+  }
+
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+    --kui-toolbar-control-border: var(
+      --kui-toolbar-control-dark-border,
+      #353536
+    );
+  }
+}
+
+@media (prefers-reduced-transparency: reduce),
+  (prefers-contrast: more),
+  (update: slow) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+  }
+
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+      [data-appearance="borderless"]
+    ) {
+    --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+    --kui-toolbar-control-border: var(
+      --kui-toolbar-control-dark-border,
+      #353536
+    );
+  }
+}
+
+:root[data-kui-effects="static"]
+  .kui-toolbar-control-group[data-material="glass"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+}
+
+:root[data-kui-effects="static"]
+  .kui-toolbar-control-group[data-material="glass"][data-tone="dark"]:not(
+    [data-appearance="borderless"]
+  ) {
+  --kui-toolbar-control-background: var(--kui-color-neutral-fill-loud);
+  --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536);
+}
+
+@media (forced-colors: active) {
+  .kui-toolbar-control-group[data-material="glass"]:not(
+      [data-appearance="borderless"]
+    ) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    border-color: CanvasText;
+    color: CanvasText;
+    background-color: Canvas;
+    box-shadow: none;
+  }
+}
+
 /* `selectedChrome="none"`: a pressed control paints like its unpressed
    neighbors, for an icon-state toggle whose glyph already shows the state.
    One button opts out alone with `data-selected-chrome="none"`. After the

package/dist/styles/components/layout/pane/pane.css

@@ -61,6 +61,32 @@
   background: var(--kui-pane-chrome-background, var(--kui-color-surface));
 }
 
+/* `background`: an app-chosen color paints the whole pane, header and footer
+   included, and replaces the appearance's fill, so a sunken pane's content
+   and auto chrome turn transparent over it. Forced colors paint the system
+   surface instead. */
+.kui-pane[data-background] {
+  background: var(--_kui-pane-background);
+}
+
+.kui-pane[data-background][data-appearance="sunken"] > .kui-pane__content,
+.kui-pane[data-background][data-appearance="sunken"][data-chrome-placement="auto"]
+  > :is(.kui-pane__header, .kui-pane__footer) {
+  background: transparent;
+}
+
+/* `tint`: the pane paints its re-derived surface, under a sunken pane's
+   lowered layer, unless an explicit `background` already paints it. */
+.kui-pane[data-kui-tint]:not([data-background]) {
+  background: var(--kui-color-surface);
+}
+
+@media (forced-colors: active) {
+  .kui-pane[data-background] {
+    background: Canvas;
+  }
+}
+
 /* Safe areas. The pane root never pads, so its background and separators paint
    through an unsafe area; its slots compensate on the edges the pane still
    touches. The inherited `--kui-edge-inset-*` context says how far each edge
@@ -158,6 +184,9 @@
      pane edge while keeping their own content aligned with ordinary items. */
   --kui-pane-content-inset-inline-start: var(--_kui-pane-safe-inline-start);
   --kui-pane-content-inset-inline-end: var(--_kui-pane-safe-inline-end);
+  /* The resolved block-start inset (safe area, deep inset, and the clearance
+     of overlay or clear chrome), so a first child can run up beneath it. */
+  --kui-pane-content-inset-block-start: var(--_kui-pane-content-block-start);
   --_kui-pane-deep-block-inset: 0px;
   --_kui-pane-clearance-block-start: 0px;
   --_kui-pane-clearance-block-end: 0px;
@@ -263,6 +292,97 @@
   }
 }
 
+/* `headerPresentation="clear"`: an overlay header (the same measuring,
+   placement, and clearance as above) that is fully transparent, for chrome
+   laid over imagery. Legibility comes from glass control groups or a scrim
+   in the content, not from the header. With `scrollEdge="material"` a
+   pseudo-element carrying the chrome material fades in (opacity only, never
+   the filter) while `wireScrollDividers` reports content scrolled beneath
+   the header, and out at rest; the clear header draws no scroll divider. */
+.kui-pane[data-header-material="clear"] > .kui-pane__header {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+}
+
+:where(.kui-pane[data-header-material="clear"][data-scroll-edge])
+  > .kui-pane__header {
+  position: relative;
+  isolation: isolate;
+}
+
+/* The scroll edge fades in as content scrolls beneath the bar: the wiring
+   publishes `--kui-scroll-edge-progress` (0 at rest, 1 once content has
+   scrolled `scrollEdgeDistance` past the edge) and only the layer's opacity
+   follows it; the filter never animates. Unwired, it stays clear. */
+.kui-pane[data-header-material="clear"][data-scroll-edge]
+  > .kui-pane__header::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  inset: 0;
+  opacity: var(--kui-scroll-edge-progress, 0);
+  pointer-events: none;
+}
+
+.kui-pane[data-header-material="clear"][data-scroll-edge="material"]
+  > .kui-pane__header::before {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-pane[data-header-material="clear"][data-scroll-edge="surface"]
+  > .kui-pane__header::before {
+  background: var(--kui-color-surface);
+}
+
+/* Static effects and slow displays snap the edge on once content lies
+   beneath the bar instead of tracking the scroll. */
+:root[data-kui-effects="static"]
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+  > .kui-pane__header::before {
+  opacity: 0;
+}
+
+:root[data-kui-effects="static"]
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+  > .kui-pane__header[data-scroll-divider*="b"]::before {
+  opacity: 1;
+}
+
+@media (update: slow) {
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+    > .kui-pane__header::before {
+    opacity: 0;
+  }
+
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+    > .kui-pane__header[data-scroll-divider*="b"]::before {
+    opacity: 1;
+  }
+}
+
+/* Clear chrome turns opaque where transparency would hurt, like the
+   material itself. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .kui-pane[data-header-material="clear"] > .kui-pane__header {
+    background: var(--kui-chrome-material);
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-pane[data-header-material="clear"] > .kui-pane__header {
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+
+  .kui-pane[data-header-material="clear"][data-scroll-edge]
+    > .kui-pane__header::before {
+    content: none;
+  }
+}
+
 /* Add one outer gutter without changing the inherited item-margin token.
    Nested Row, List, and Grid therefore keep their own default 8px insets. */
 .kui-pane[data-deep-inset="true"] > .kui-pane__content {
@@ -313,7 +433,7 @@
   box-shadow: inset 0 1px var(--_kui-pane-chrome-divider);
 }
 
-.kui-pane:not([data-chrome-dividers])
+.kui-pane:not([data-chrome-dividers], [data-header-material="clear"])
   > :is(.kui-pane__header, .kui-pane__toolbar)[data-scroll-divider*="b"],
 .kui-pane:not([data-chrome-dividers])
   > .kui-pane__footer[data-scroll-divider*="t"],

package/dist/styles/components/navigation/nav-stack/nav-stack.css

@@ -6,7 +6,7 @@
   height: 100%;
   overflow: hidden;
   flex-direction: column;
-  background: var(--kui-color-surface);
+  background: var(--_kui-nav-stack-background, var(--kui-color-surface));
   /* Safe areas: the stack's surfaces paint through unsafe areas; its chrome,
      bottom toolbar, and each view compensate for the edges the stack still
      touches (see pane.css for the `--kui-edge-inset-*` edge context). */
@@ -60,6 +60,25 @@
   opacity: 0;
 }
 
+/* `background`: the stack's color paints the stack, its docked chrome and
+   bottom toolbar, and every view (a view's own `pane.background` paints over
+   it). Overlay chrome keeps the chrome material. A nested stack never
+   inherits the color. Forced colors paint the system surface. */
+.kui-nav-stack:not([data-background]) {
+  --_kui-nav-stack-background: initial;
+}
+
+@media (forced-colors: active) {
+  .kui-nav-stack[data-background],
+  .kui-nav-stack[data-background]
+    > :is(.kui-nav-stack__chrome, .kui-nav-stack__bottom),
+  .kui-nav-stack[data-background]
+    > .kui-nav-stack__viewport
+    > .kui-nav-stack__view {
+    background: Canvas;
+  }
+}
+
 /* The chrome hosts the stack's real top Toolbar. It hands that toolbar the
    edges the stack still touches through the edge context (never the bottom,
    which the viewport owns); the toolbar pads for the sides it claims with
@@ -68,7 +87,7 @@
   --kui-edge-inset-block-start: var(--_kui-nav-stack-safe-block-start);
   --kui-edge-inset-inline-start: var(--_kui-nav-stack-safe-inline-start);
   --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
-  background: var(--kui-color-surface);
+  background: var(--_kui-nav-stack-background, var(--kui-color-surface));
 }
 
 .kui-nav-stack__viewport {
@@ -97,7 +116,7 @@
 .kui-nav-stack__view {
   position: absolute;
   overflow: auto;
-  background: var(--kui-color-surface);
+  background: var(--_kui-nav-stack-background, var(--kui-color-surface));
   transition: transform var(--kui-nav-stack-transition-duration, 200ms) ease;
   inset: 0;
 }
@@ -179,7 +198,7 @@
   --kui-edge-inset-inline-end: var(--_kui-nav-stack-safe-inline-end);
   border-block-start: 1px solid
     var(--_kui-nav-stack-bottom-divider, transparent);
-  background: var(--kui-color-surface);
+  background: var(--_kui-nav-stack-background, var(--kui-color-surface));
 }
 
 /* The live chrome is the containing block of its scroll divider; a
@@ -272,6 +291,182 @@
   }
 }
 
+/* `clear` chrome and bottom toolbar: overlay bars (the same measuring,
+   placement, and edge insets as above) that are fully transparent, for
+   chrome over imagery. With `scrollEdge="material"` a pseudo-element
+   carrying the chrome material fades in (opacity only) while the active
+   view's content lies beneath the bar, as `wireScrollDividers` reports, and
+   out at rest. Clear bars draw no scroll divider. */
+.kui-nav-stack[data-chrome-material="clear"] > .kui-nav-stack__chrome {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+}
+
+:where(.kui-nav-stack[data-chrome-material="clear"][data-scroll-edge])
+  > .kui-nav-stack__chrome:not(.kui-nav-stack__chrome-copy) {
+  position: relative;
+  isolation: isolate;
+}
+
+/* The scroll edge fades in as content scrolls beneath the bar: the wiring
+   publishes `--kui-scroll-edge-progress` (0 at rest, 1 once content lies
+   `scrollEdgeDistance` beyond the bar) and only the layer's opacity follows
+   it; the filter never animates. Unwired, it stays clear. */
+.kui-nav-stack[data-chrome-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__chrome::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  inset: 0;
+  opacity: var(--kui-scroll-edge-progress, 0);
+  pointer-events: none;
+}
+
+.kui-nav-stack[data-chrome-material="clear"][data-scroll-edge="material"]
+  > .kui-nav-stack__chrome::before {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-nav-stack[data-chrome-material="clear"][data-scroll-edge="surface"]
+  > .kui-nav-stack__chrome::before {
+  background: var(--kui-color-surface);
+}
+
+/* Static effects and slow displays snap the edge on while content lies
+   beneath the bar instead of tracking the scroll. */
+:root[data-kui-effects="static"]
+  .kui-nav-stack[data-chrome-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__chrome::before {
+  opacity: 0;
+}
+
+:root[data-kui-effects="static"]
+  .kui-nav-stack[data-chrome-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__chrome[data-scroll-divider*="b"]::before {
+  opacity: 1;
+}
+
+@media (update: slow) {
+  .kui-nav-stack[data-chrome-material="clear"][data-scroll-edge]
+    > .kui-nav-stack__chrome::before {
+    opacity: 0;
+  }
+
+  .kui-nav-stack[data-chrome-material="clear"][data-scroll-edge]
+    > .kui-nav-stack__chrome[data-scroll-divider*="b"]::before {
+    opacity: 1;
+  }
+}
+
+/* Clear chrome turns opaque where transparency would hurt, like the
+   material itself. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .kui-nav-stack[data-chrome-material="clear"] > .kui-nav-stack__chrome {
+    background: var(--kui-chrome-material);
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-nav-stack[data-chrome-material="clear"] > .kui-nav-stack__chrome {
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+
+  .kui-nav-stack[data-chrome-material="clear"][data-scroll-edge]
+    > .kui-nav-stack__chrome::before {
+    content: none;
+  }
+}
+
+.kui-nav-stack[data-bottom-toolbar-material="clear"] > .kui-nav-stack__bottom {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+}
+
+:where(.kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge])
+  > .kui-nav-stack__bottom:not(.kui-nav-stack__chrome-copy) {
+  position: relative;
+  isolation: isolate;
+}
+
+/* The scroll edge fades in as content scrolls beneath the bar: the wiring
+   publishes `--kui-scroll-edge-progress` (0 at rest, 1 once content lies
+   `scrollEdgeDistance` beyond the bar) and only the layer's opacity follows
+   it; the filter never animates. Unwired, it stays clear. */
+.kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__bottom::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  inset: 0;
+  opacity: var(--kui-scroll-edge-progress, 0);
+  pointer-events: none;
+}
+
+.kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge="material"]
+  > .kui-nav-stack__bottom::before {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge="surface"]
+  > .kui-nav-stack__bottom::before {
+  background: var(--kui-color-surface);
+}
+
+/* Static effects and slow displays snap the edge on while content lies
+   beneath the bar instead of tracking the scroll. */
+:root[data-kui-effects="static"]
+  .kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__bottom::before {
+  opacity: 0;
+}
+
+:root[data-kui-effects="static"]
+  .kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge]
+  > .kui-nav-stack__bottom[data-scroll-divider*="t"]::before {
+  opacity: 1;
+}
+
+@media (update: slow) {
+  .kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge]
+    > .kui-nav-stack__bottom::before {
+    opacity: 0;
+  }
+
+  .kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge]
+    > .kui-nav-stack__bottom[data-scroll-divider*="t"]::before {
+    opacity: 1;
+  }
+}
+
+/* Clear chrome turns opaque where transparency would hurt, like the
+   material itself. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .kui-nav-stack[data-bottom-toolbar-material="clear"]
+    > .kui-nav-stack__bottom {
+    background: var(--kui-chrome-material);
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-nav-stack[data-bottom-toolbar-material="clear"]
+    > .kui-nav-stack__bottom {
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+
+  .kui-nav-stack[data-bottom-toolbar-material="clear"][data-scroll-edge]
+    > .kui-nav-stack__bottom::before {
+    content: none;
+  }
+}
+
 /* Chrome dividers: with `chromeDividers="scroll"` (the default, no
    attribute) the top chrome draws a line along its bottom edge while the
    active view's content is scrolled beneath it, and the bottom toolbar
@@ -290,7 +485,10 @@
       > [data-component="pane"][data-appearance="sunken"]
   )
   > .kui-nav-stack__chrome::after,
-.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
+.kui-nav-stack[data-separator="auto"]:not(
+    [data-chrome-dividers],
+    [data-chrome-material="clear"]
+  )
   > .kui-nav-stack__chrome[data-scroll-divider*="b"]::after,
 .kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
   > .kui-nav-stack__chrome::after {
@@ -309,7 +507,10 @@
       > [data-component="pane"][data-appearance="sunken"]
   )
   > .kui-nav-stack__bottom,
-.kui-nav-stack[data-separator="auto"]:not([data-chrome-dividers])
+.kui-nav-stack[data-separator="auto"]:not(
+    [data-chrome-dividers],
+    [data-bottom-toolbar-material="clear"]
+  )
   > .kui-nav-stack__bottom[data-scroll-divider*="t"],
 .kui-nav-stack[data-separator="auto"][data-chrome-dividers="always"]
   > .kui-nav-stack__bottom {