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

package/dist/styles/components/navigation/tab-navigator/tab-navigator.css

@@ -5,7 +5,7 @@
   height: 100%;
   overflow: hidden;
   flex-direction: column;
-  background: var(--kui-color-surface);
+  background: var(--_kui-tab-scaffold-background, var(--kui-color-surface));
   /* Safe areas: the scenes and the bar paint through unsafe areas; the bar
      compensates for the bottom and inline edges, and the scenes for the top
      and inline edges (see pane.css for the `--kui-edge-inset-*` context). */
@@ -55,6 +55,31 @@
   background: var(--kui-sunken-panel-background, var(--kui-sunken-surface));
 }
 
+/* `background`: the navigator's color paints the root and a docked bar (the
+   overlay bar keeps the chrome material); a tab's own color paints its scene
+   and replaces its appearance's fill. A nested navigator never inherits the
+   color. Forced colors paint the system surface. */
+.kui-tab-scaffold:not([data-background]) {
+  --_kui-tab-scaffold-background: initial;
+}
+
+.kui-tab-scaffold__scene[data-kui-tint]:not([data-background]) {
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold__scene[data-background] {
+  background: var(--_kui-tab-scaffold-scene-background);
+}
+
+@media (forced-colors: active) {
+  .kui-tab-scaffold[data-background],
+  .kui-tab-scaffold[data-background]:not([data-bar-presentation="overlay"])
+    > .kui-tab-scaffold__bar,
+  .kui-tab-scaffold__scene[data-background] {
+    background: Canvas;
+  }
+}
+
 /* A scene is its region's scroll owner, so its top inset is padding inside
    the scroller. A scene whose only child is a Pane or layout (usually a
    NavStack) lets that child own the insets instead. */
@@ -138,7 +163,7 @@
      scroll divider. Changing its color never moves the bar or a tab. */
   border-block-start: 1px solid
     var(--_kui-tab-scaffold-bar-divider, transparent);
-  background: var(--kui-color-surface);
+  background: var(--_kui-tab-scaffold-background, var(--kui-color-surface));
 }
 
 .kui-tab-scaffold[data-separator="auto"]:has(
@@ -161,7 +186,10 @@
       > [data-component="pane"][data-appearance="sunken"]
   )
   > .kui-tab-scaffold__bar,
-.kui-tab-scaffold[data-separator="auto"]:not([data-chrome-dividers])
+.kui-tab-scaffold[data-separator="auto"]:not(
+    [data-chrome-dividers],
+    [data-bar-material="clear"]
+  )
   > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
 .kui-tab-scaffold[data-separator="auto"][data-chrome-dividers="always"]
   > .kui-tab-scaffold__bar {
@@ -213,6 +241,96 @@
   }
 }
 
+/* `barPresentation="clear"`: an overlay bar (the same measuring and edge
+   inset as above) that is fully transparent, for a bar over imagery. With
+   `scrollEdge="material"` a pseudo-element carrying the chrome material
+   fades in (opacity only) while the active scene continues beneath the bar,
+   and out once it is scrolled to its end. A clear bar draws no scroll
+   divider. */
+.kui-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  background: transparent;
+}
+
+:where(.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge])
+  > .kui-tab-scaffold__bar {
+  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-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  inset: 0;
+  opacity: var(--kui-scroll-edge-progress, 0);
+  pointer-events: none;
+}
+
+.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge="material"]
+  > .kui-tab-scaffold__bar::before {
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material);
+}
+
+.kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge="surface"]
+  > .kui-tab-scaffold__bar::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-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar::before {
+  opacity: 0;
+}
+
+:root[data-kui-effects="static"]
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+  > .kui-tab-scaffold__bar[data-scroll-divider*="t"]::before {
+  opacity: 1;
+}
+
+@media (update: slow) {
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar::before {
+    opacity: 0;
+  }
+
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar[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-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+    background: var(--kui-chrome-material);
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-tab-scaffold[data-bar-material="clear"] > .kui-tab-scaffold__bar {
+    background: Canvas;
+    border-block-start-color: CanvasText;
+  }
+
+  .kui-tab-scaffold[data-bar-material="clear"][data-scroll-edge]
+    > .kui-tab-scaffold__bar::before {
+    content: none;
+  }
+}
+
 .kui-tab-scaffold__tab {
   display: flex;
   flex: 1 1 0;

package/dist/styles/components/surfaces/backdrop-image/backdrop-image.css

@@ -0,0 +1,241 @@
+/* An image block at the top of a scrolling Pane or NavStack view. The root
+   paints fadeTo, so the image fades into it and the content below sits on the
+   same color. It bleeds to the Pane's resolved inline insets (the safe area)
+   and hands them back to its overlay and content, so their own items keep
+   the ordinary text axis. */
+.kui-backdrop-image {
+  --_kui-backdrop-image-height: 20rem;
+  --_kui-backdrop-image-fade-to: transparent;
+  --_kui-backdrop-image-parallax: 0;
+  --_kui-backdrop-image-position: center;
+  --_kui-backdrop-image-fit: cover;
+  --_kui-backdrop-image-inset-start: var(
+    --kui-pane-content-inset-inline-start,
+    0px
+  );
+  --_kui-backdrop-image-inset-end: var(
+    --kui-pane-content-inset-inline-end,
+    0px
+  );
+  --_kui-backdrop-image-bleed-block-start: 0px;
+  display: flow-root;
+  position: relative;
+  min-width: 0;
+  margin-inline: calc(-1 * var(--_kui-backdrop-image-inset-start))
+    calc(-1 * var(--_kui-backdrop-image-inset-end));
+  background-color: var(--_kui-backdrop-image-fade-to);
+  isolation: isolate;
+}
+
+/* `underChrome`: the block runs up beneath the scroller's block-start inset
+   (overlay or clear chrome clearance plus the top safe area, as the Pane
+   publishes it) and the hero grows by the same amount, so the visible image
+   keeps its height below the chrome and the overlay stays where it was. */
+.kui-backdrop-image[data-under-chrome="true"] {
+  --_kui-backdrop-image-bleed-block-start: var(
+    --kui-pane-content-inset-block-start,
+    0px
+  );
+  margin-block-start: calc(-1 * var(--_kui-backdrop-image-bleed-block-start));
+}
+
+/* The view timeline's inset defaults to the scroller's scroll padding, which
+   is the chrome clearance this image now runs beneath; measured from there,
+   the parallax would start part-way through at rest and shift the image
+   down. Measure from the scroller's real edge instead. */
+.kui-backdrop-image[data-under-chrome="true"] .kui-backdrop-image__hero {
+  view-timeline-inset: 0px;
+}
+
+/* The hero is the scroll-timeline subject: its own block of scroll drives
+   the parallax, whatever sits above it and however tall it is. */
+.kui-backdrop-image__hero {
+  display: grid;
+  position: relative;
+  min-height: calc(
+    var(--_kui-backdrop-image-height) +
+      var(--_kui-backdrop-image-bleed-block-start)
+  );
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+  view-timeline: --kui-backdrop-image block;
+}
+
+.kui-backdrop-image__backdrop {
+  position: absolute;
+  inset: 0;
+  overflow: clip;
+  pointer-events: none;
+}
+
+/* The fade is a mask on the backdrop, not a painted gradient, so the image
+   dissolves into whatever fadeTo is without a visible band. */
+.kui-backdrop-image[data-fade="true"] .kui-backdrop-image__backdrop {
+  mask-image: linear-gradient(to bottom, #000 50%, transparent);
+}
+
+/* The moving layer: everything that lags the scroll. */
+.kui-backdrop-image__layers {
+  position: absolute;
+  inset: 0;
+}
+
+.kui-backdrop-image__media,
+.kui-backdrop-image__blurred {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--_kui-backdrop-image-fit);
+  object-position: var(--_kui-backdrop-image-position);
+  background-position: var(--_kui-backdrop-image-position);
+}
+
+/* Progressive blur: a copy over the sharp image, blurred once and hidden
+   until the scroll timeline fades it in. A filtered copy overhangs the block
+   by its radius on every side, so the blur's transparent fringe falls outside
+   the clip instead of letting the sharp edge show through. The dim layer
+   darkens toward its peak opacity with it. */
+.kui-backdrop-image__blurred {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+}
+
+.kui-backdrop-image[data-blur="filter"] .kui-backdrop-image__blurred {
+  inset: calc(-1 * var(--_kui-backdrop-image-blur)) auto auto
+    calc(-1 * var(--_kui-backdrop-image-blur));
+  width: calc(100% + 2 * var(--_kui-backdrop-image-blur));
+  height: calc(100% + 2 * var(--_kui-backdrop-image-blur));
+  filter: blur(var(--_kui-backdrop-image-blur));
+}
+
+.kui-backdrop-image__dim {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / var(--_kui-backdrop-image-dim));
+  opacity: 0;
+}
+
+.kui-backdrop-image__scrim {
+  position: absolute;
+  inset: 0;
+}
+
+.kui-backdrop-image[data-scrim="bottom"] .kui-backdrop-image__scrim {
+  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.5));
+}
+
+.kui-backdrop-image[data-scrim="full"] .kui-backdrop-image__scrim {
+  background: rgb(0 0 0 / 0.35);
+}
+
+.kui-backdrop-image__overlay {
+  position: relative;
+  min-width: 0;
+  align-self: end;
+  padding-inline: var(--_kui-backdrop-image-inset-start)
+    var(--_kui-backdrop-image-inset-end);
+}
+
+/* A scrim is dark in both color schemes, so the content laid over it takes
+   the dark scheme: default-tone titles and controls resolve their light
+   foregrounds whatever the page's scheme. */
+.kui-backdrop-image:is([data-scrim="bottom"], [data-scrim="full"])
+  .kui-backdrop-image__overlay {
+  color-scheme: dark;
+  color: var(--kui-color-text);
+}
+
+.kui-backdrop-image__content {
+  min-width: 0;
+  padding-inline: var(--_kui-backdrop-image-inset-start)
+    var(--_kui-backdrop-image-inset-end);
+}
+
+/* Parallax: as the hero scrolls out past the scroller's start edge, the
+   layer slides down by the lag factor of that distance, so the image moves
+   slower than the content. The blurred copy and dim layer fade in over the
+   same range. Only transform and opacity animate, on a scroll-driven
+   timeline the compositor runs; the blur filter is never animated, and there
+   is no scroll listener and no background-attachment: fixed. Without
+   scroll-driven animations (Firefox today) or with reduced motion the image
+   stays static and sharp. */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .kui-backdrop-image[data-parallax="scroll"] .kui-backdrop-image__layers {
+      animation: kui-backdrop-image-parallax linear both;
+      animation-timeline: --kui-backdrop-image;
+      animation-range: exit-crossing 0% exit-crossing 100%;
+    }
+
+    /* The blur reaches full strength halfway through the exit, while most
+       of the image is still in view; ramping over the whole exit left it
+       barely visible before the image had scrolled away. */
+    .kui-backdrop-image[data-blur]
+      :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {
+      animation: kui-backdrop-image-reveal linear both;
+      animation-timeline: --kui-backdrop-image;
+      animation-range: exit-crossing 0% exit-crossing 50%;
+    }
+  }
+}
+
+@keyframes kui-backdrop-image-parallax {
+  from {
+    transform: none;
+  }
+  to {
+    transform: translateY(calc(var(--_kui-backdrop-image-parallax) * 100%));
+  }
+}
+
+@keyframes kui-backdrop-image-reveal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* The document-wide static-effects switch and slow-update displays (e-ink,
+   print) get the same static, sharp image as reduced motion. */
+:root[data-kui-effects="static"]
+  .kui-backdrop-image[data-parallax="scroll"]
+  .kui-backdrop-image__layers,
+:root[data-kui-effects="static"]
+  .kui-backdrop-image[data-blur]
+  :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {
+  animation: none;
+}
+
+@media (update: slow) {
+  .kui-backdrop-image[data-parallax="scroll"] .kui-backdrop-image__layers,
+  .kui-backdrop-image[data-blur]
+    :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {
+    animation: none;
+  }
+}
+
+/* Reduced transparency or increased contrast: no dissolve. The image ends on
+   a hard edge over solid fadeTo, and overlay content sits on a solid fadeTo
+   band instead of the image, so text chosen for the fade color stays
+   legible. */
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .kui-backdrop-image[data-fade="true"] .kui-backdrop-image__backdrop {
+    mask-image: none;
+  }
+
+  .kui-backdrop-image[data-fade="true"] .kui-backdrop-image__overlay {
+    background-color: var(--_kui-backdrop-image-fade-to);
+  }
+
+  /* Over that solid band the overlay keeps the page's scheme. */
+  .kui-backdrop-image[data-fade="true"]:is(
+      [data-scrim="bottom"],
+      [data-scrim="full"]
+    )
+    .kui-backdrop-image__overlay {
+    color-scheme: inherit;
+    color: inherit;
+  }
+}

package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css

@@ -5,6 +5,21 @@
     var(--_kui-dialog-surface-gutter, 1rem)
   );
   --width: min(35rem, calc(100vw - 2rem));
+  /* Concentric with a pill ToolbarControlGroup at the body inset: 22px + 8px
+     compact, 22px + 16px comfortable. */
+  --_kui-dialog-surface-radius: calc(
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
+      var(--kui-wa-surface-inset, 0.5rem)
+  );
+}
+.kui-dialog-surface[data-body-inset="comfortable"] > wa-dialog {
+  --_kui-dialog-surface-radius: calc(
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
+      var(--kui-wa-container-inset, 1rem)
+  );
+}
+.kui-dialog-surface > wa-dialog::part(dialog) {
+  border-radius: var(--_kui-dialog-surface-radius);
 }
 .kui-dialog-surface[data-size="small"] > wa-dialog {
   --_kui-dialog-surface-width: 25rem;
@@ -281,7 +296,8 @@
   height: 100dvh;
   max-height: 100dvh;
   margin-inline-end: 0;
-  border-radius: var(--kui-radius-l) 0 0 var(--kui-radius-l);
+  border-radius: var(--_kui-dialog-surface-radius) 0 0
+    var(--_kui-dialog-surface-radius);
 }
 .kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog {
   --width: 100vw;
@@ -293,6 +309,149 @@
   max-height: 100dvh;
   border-radius: 0;
 }
+/* A bottom sheet rests on the viewport's block-end edge: square bottom
+   corners, the dialog's own radius on top. Its panel runs to the edge, behind
+   the home indicator and any virtual keyboard, while a block-end padding
+   (the larger of the safe area, the keyboard inset the register measures
+   from `visualViewport`, and the VirtualKeyboard API's
+   `env(keyboard-inset-height)`) keeps its content above them. `height`,
+   `minHeight` and `maxHeight` measure that visible content height; the panel
+   is capped at the dynamic viewport minus the top safe area and one gutter. */
+.kui-dialog-surface[data-presentation="bottom-sheet"]
+  > wa-dialog::part(dialog) {
+  --_kui-dialog-surface-sheet-clearance: max(
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px)),
+    var(--_kui-dialog-surface-keyboard-inset, 0px),
+    env(keyboard-inset-height, 0px)
+  );
+  --_kui-dialog-surface-sheet-cap: max(
+    0px,
+    min(
+      calc(
+        var(--_kui-dialog-surface-max-height, 100dvh) +
+          var(--_kui-dialog-surface-sheet-clearance)
+      ),
+      calc(
+        100dvh -
+          var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px)) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  box-sizing: border-box;
+  width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    100%
+  );
+  max-width: 100%;
+  /* Unset (content height) until the register publishes a resized height. */
+  height: calc(
+    var(--_kui-dialog-surface-sheet-height) +
+      var(--_kui-dialog-surface-sheet-clearance)
+  );
+  max-height: var(--_kui-dialog-surface-sheet-cap);
+  /* A modal dialog sits between both block insets, so an auto height would
+     stretch to the cap; anchored only at the bottom, a sheet with no
+     `height` (and no resized height) opens at its content height. */
+  inset-block-start: auto;
+  margin: auto auto 0;
+  padding-block-end: var(--_kui-dialog-surface-sheet-clearance);
+  border-radius: var(--_kui-dialog-surface-radius)
+    var(--_kui-dialog-surface-radius) 0 0;
+}
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-height]
+  > wa-dialog::part(dialog) {
+  height: calc(
+    var(
+        --_kui-dialog-surface-sheet-height,
+        var(--_kui-dialog-surface-height, 100dvh)
+      ) +
+      var(--_kui-dialog-surface-sheet-clearance)
+  );
+}
+/* A resizable sheet keeps a band at its top edge for the grabber the
+   register injects: a `role="separator"` that resizes the visible height
+   between `minHeight` (default 160px) and the cap by drag or keyboard. */
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+  > wa-dialog::part(dialog) {
+  min-height: min(
+    calc(
+      var(--_kui-dialog-surface-min-height, 10rem) +
+        var(--_kui-dialog-surface-sheet-clearance)
+    ),
+    var(--_kui-dialog-surface-sheet-cap)
+  );
+  padding-block-start: 0.75rem;
+}
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+  > wa-dialog::part(sheet-handle) {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 0;
+  inset-inline: 0;
+  width: 6rem;
+  height: 1.25rem;
+  margin-inline: auto;
+  border-radius: var(--kui-radius-s);
+  cursor: ns-resize;
+  touch-action: none;
+}
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+  > wa-dialog::part(sheet-handle)::before {
+  position: absolute;
+  inset-block-start: 0.375rem;
+  inset-inline: 0;
+  width: 2.25rem;
+  height: 0.3125rem;
+  margin-inline: auto;
+  border-radius: 0.15625rem;
+  background: var(--kui-color-neutral-border-loud);
+  content: "";
+}
+.kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+  > wa-dialog::part(sheet-handle):focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface[data-presentation="bottom-sheet"][data-resizable]
+    > wa-dialog::part(sheet-handle)::before {
+    background: CanvasText;
+  }
+}
+/* The sheet slides up from, and back down to, the bottom edge. Web Awesome
+   runs its show, hide and pulse animations through one slot, so the register
+   marks the host only while a show (`enter`) or hide (`exit`) runs, and only
+   those keyframes change; the hide plays them in reverse. Reduced motion and
+   the static effects mode keep Web Awesome's own animation. */
+@keyframes kui-dialog-surface-sheet-slide {
+  from {
+    translate: 0 100%;
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-presentation="bottom-sheet"]:not(
+      [data-enter-motion="standard"]
+    )
+    > wa-dialog[data-kui-sheet-motion="enter"]::part(dialog),
+  :root:not([data-kui-effects="static"])
+    .kui-dialog-surface[data-presentation="bottom-sheet"]:not(
+      [data-exit-motion="standard"]
+    )
+    > wa-dialog[data-kui-sheet-motion="exit"]::part(dialog) {
+    animation-name: kui-dialog-surface-sheet-slide;
+    /* A full-height travel needs longer than the dialog's 150ms scale. */
+    animation-duration: var(--wa-transition-slow, 300ms);
+    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+  }
+}
 /* PopoverDialogSurface: the dialog chrome and bounded geometry for a native
    popover="auto" surface (non-modal, light dismiss) or the same surface in
    flow. The UA popover rules supply the centered top-layer placement. */
@@ -325,7 +484,12 @@
   overflow: auto;
   color: var(--kui-color-text);
   border: 1px solid var(--kui-color-neutral-border-normal);
-  border-radius: var(--kui-radius-l);
+  /* Matches the modal DialogSurface corner: a pill ToolbarControlGroup at the
+     8px surface inset (22px + 8px). */
+  border-radius: calc(
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem)) +
+      var(--kui-wa-surface-inset, 0.5rem)
+  );
   background: var(--kui-color-surface-raised);
   box-shadow: var(--kui-shadow-l);
 }