@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/split-view.d.ts

@@ -1,17 +1,67 @@
-import { SafeHtml } from 'kerfjs';
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { N as NavStackProps, a as NavStackView } from './nav-stack-CU_0dKtI.js';
+import { ResizableRegionProps } from './resizable-region.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './css-values.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
 
-interface SplitViewResizable {
+/**
+ * The roomy list pane's `ResizableRegion`: its committed `size` and `min` /
+ * `max` limits, plus the region configuration that forwards unchanged
+ * (`separator`, `handleIcon`, `contentOverflow`, and collapse:
+ * `collapsed`, `transitioning`, `collapseMotion`, `restoreControl`,
+ * `restorePosition`). Omitted options keep the region's defaults.
+ */
+interface SplitViewResizable extends Pick<ResizableRegionProps, 'separator' | 'handleIcon' | 'contentOverflow' | 'collapsed' | 'transitioning' | 'collapseMotion' | 'restoreControl' | 'restorePosition'> {
     size: number;
     min: number;
     max: number;
 }
+/**
+ * One compact view's top- and bottom-toolbar content and pinned footer (see
+ * `NavStackView`).
+ */
+type SplitViewCompactViewToolbars = Pick<NavStackView, 'toolbar' | 'bottomToolbar' | 'footer'>;
+/**
+ * The compact `NavStack`'s configuration: its toolbar configuration, back
+ * control, persistent bottom toolbar, chrome dividers, and chrome and
+ * bottom-toolbar presentations forward to the stack, and `list` / `detail`
+ * give each view its own toolbar groups.
+ */
+interface SplitViewCompactStack extends Pick<NavStackProps, 'toolbarConfig' | 'backIcon' | 'backText' | 'hideToolbar' | 'bottomToolbar' | 'chromeDividers' | 'chromePresentation' | 'bottomToolbarPresentation'> {
+    /** Toolbar content for the list (root) view. */
+    list?: SplitViewCompactViewToolbars;
+    /** Toolbar content for the pushed detail view. */
+    detail?: SplitViewCompactViewToolbars;
+}
+/**
+ * The fixed list column's width: a size in CSS pixels, or that size capped
+ * at a fraction of the SplitView's own width so a narrow container (a
+ * dialog, a small window) always leaves the detail in view.
+ */
+type SplitViewListWidth = number | {
+    /** Preferred width in CSS pixels. */
+    size: number;
+    /** Largest share of the SplitView's width, greater than 0 and at most 1. */
+    maxFraction?: number;
+};
 interface SplitViewProps {
     id: string;
     label: string;
     /** The list (primary) pane. */
-    list: SafeHtml;
+    list: KerfUiContent;
     /** The detail (secondary) pane. */
-    detail: SafeHtml;
+    detail: KerfUiContent;
     /**
      * Compact ("one pane at a time") classes — a handset or portrait tablet.
      * Derive from `deviceClass().value.compact`. When true the split collapses to
@@ -26,9 +76,19 @@ interface SplitViewProps {
     detailTitle?: string;
     /** Back label for the compact NavStack (default "Back"). */
     backLabel?: string;
+    /** Compact NavStack configuration and per-view toolbars. */
+    compactStack?: SplitViewCompactStack;
     /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */
     resizable?: SplitViewResizable;
+    /**
+     * The fixed split's list column width (default 320px). A number is CSS
+     * pixels; `{ size, maxFraction }` caps it at that share of the SplitView's
+     * width. A resizable split sizes its list with `resizable` instead.
+     */
+    listWidth?: SplitViewListWidth;
     className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
 /**
  * A list-detail split. On roomy classes it shows both panes side
@@ -37,6 +97,6 @@ interface SplitViewProps {
  * resizable wiring with `wireResizableRegions` and the compact back with
  * `wireNavStack`.
  */
-declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, resizable, className }: SplitViewProps): SafeHtml;
+declare function SplitView({ id, label, list, detail, compact, detailActive, listTitle, detailTitle, backLabel, compactStack, resizable, listWidth, className, slot, }: SplitViewProps): kerfjs.SafeHtml;
 
-export { SplitView, type SplitViewProps, type SplitViewResizable };
+export { SplitView, type SplitViewCompactStack, type SplitViewCompactViewToolbars, type SplitViewListWidth, type SplitViewProps, type SplitViewResizable };

package/dist/split-view.js

@@ -1,21 +1,20 @@
-import { NavStack } from './chunk-BLK3UEEI.js';
+export { SplitView } from './chunk-P7EJ4CAD.js';
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-import { ResizableRegion } from './chunk-M5JRI6MN.js';
 
-import { jsx, jsxs } from 'kerfjs/jsx-runtime';
 
-function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = "", detailTitle = "", backLabel = "Back", resizable, className = "" }) {
-  if (compact) {
-    const views = detailActive ? [{ key: "list", title: listTitle, content: list }, { key: "detail", title: detailTitle, content: detail }] : [{ key: "list", title: listTitle, content: list }];
-    return /* @__PURE__ */ jsx("div", { class: `kui-split-view kui-split-view--compact ${className}`.trim(), id, "data-component": "split-view", "data-split-mode": "compact", children: /* @__PURE__ */ jsx(NavStack, { id: `${id}-stack`, label, views, backLabel }) });
-  }
-  const listPane = resizable ? /* @__PURE__ */ jsx(ResizableRegion, { id: `${id}-list`, label: listTitle || "List", size: resizable.size, min: resizable.min, max: resizable.max, children: /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list }) }) : /* @__PURE__ */ jsx("div", { class: "kui-split-view__list kui-pane", "data-split-list": true, children: list });
-  return /* @__PURE__ */ jsxs("div", { class: `kui-split-view ${className}`.trim(), id, "data-component": "split-view", "data-split-mode": "split", "aria-label": label, children: [
-    listPane,
-    /* @__PURE__ */ jsx("div", { class: "kui-split-view__detail kui-pane", "data-split-detail": true, "aria-label": detailTitle || void 0, children: detail })
-  ] });
-}
 
-export { SplitView };
 
 //# sourceMappingURL=split-view.js.map

package/dist/split-view.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/split-view.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,UAAU,EAAE,EAAA,EAAI,OAAO,IAAA,EAAM,MAAA,EAAQ,UAAU,KAAA,EAAO,YAAA,GAAe,OAAO,SAAA,GAAY,EAAA,EAAI,cAAc,EAAA,EAAI,SAAA,GAAY,QAAQ,SAAA,EAAW,SAAA,GAAY,IAAG,EAAmB;AAC7L,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,MAAM,KAAA,GAAQ,YAAA,GACV,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAK,EAAG,EAAE,GAAA,EAAK,QAAA,EAAU,KAAA,EAAO,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,CAAA,GACzG,CAAC,EAAE,GAAA,EAAK,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,CAAA;AACrD,IAAA,uBAAO,GAAA,CAAC,SAAI,KAAA,EAAO,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,mBAAgB,SAAA,EACnI,QAAA,kBAAA,GAAA,CAAC,YAAS,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,KAAA,EAAc,KAAA,EAAc,SAAA,EAAsB,CAAA,EACjF,CAAA;AAAA,EACF;AACA,EAAA,MAAM,QAAA,GAAW,SAAA,mBACb,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,KAAA,EAAO,aAAa,MAAA,EAAQ,IAAA,EAAM,SAAA,CAAU,IAAA,EAAM,KAAK,SAAA,CAAU,GAAA,EAAK,GAAA,EAAK,SAAA,CAAU,KACtH,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,mBAAe,IAAA,EAAE,QAAA,EAAA,IAAA,EAAK,CAAA,EACnE,CAAA,uBACC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAgC,iBAAA,EAAe,MAAE,QAAA,EAAA,IAAA,EAAK,CAAA;AACrE,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,eAAA,EAAkB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,EAAA,EAAQ,gBAAA,EAAe,YAAA,EAAa,iBAAA,EAAgB,OAAA,EAAQ,cAAY,KAAA,EAC9H,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAI,KAAA,EAAM,iCAAA,EAAkC,qBAAiB,IAAA,EAAC,YAAA,EAAY,WAAA,IAAe,MAAA,EAAY,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC/G,CAAA;AACF","file":"split-view.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { NavStack } from './nav-stack.js';\nimport { ResizableRegion } from './resizable-region.js';\n\nexport interface SplitViewResizable {\n  size: number;\n  min: number;\n  max: number;\n}\n\nexport interface SplitViewProps {\n  id: string;\n  label: string;\n  /** The list (primary) pane. */\n  list: SafeHtml;\n  /** The detail (secondary) pane. */\n  detail: SafeHtml;\n  /**\n   * Compact (\"one pane at a time\") classes — a handset or portrait tablet.\n   * Derive from `deviceClass().value.compact`. When true the split collapses to\n   * a `NavStack`: the list is the root and the detail is pushed over it.\n   */\n  compact?: boolean;\n  /** In compact mode, whether the detail is currently pushed over the list. */\n  detailActive?: boolean;\n  /** Title/label for the list (compact NavStack root + region label). */\n  listTitle?: string;\n  /** Title/label for the detail (compact NavStack pushed view + region label). */\n  detailTitle?: string;\n  /** Back label for the compact NavStack (default \"Back\"). */\n  backLabel?: string;\n  /** A resizable separator on roomy classes (min/max px). Omit for a fixed split. */\n  resizable?: SplitViewResizable;\n  className?: string;\n}\n\n/**\n * A list-detail split. On roomy classes it shows both panes side\n * by side with an optional resizable separator; on compact classes it collapses\n * to a `NavStack` (list → detail). See `docs/23-app-layouts.md` §3.2. Compose the\n * resizable wiring with `wireResizableRegions` and the compact back with\n * `wireNavStack`.\n */\nexport function SplitView({ id, label, list, detail, compact = false, detailActive = false, listTitle = '', detailTitle = '', backLabel = 'Back', resizable, className = '' }: SplitViewProps) {\n  if (compact) {\n    const views = detailActive\n      ? [{ key: 'list', title: listTitle, content: list }, { key: 'detail', title: detailTitle, content: detail }]\n      : [{ key: 'list', title: listTitle, content: list }];\n    return <div class={`kui-split-view kui-split-view--compact ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"compact\">\n      <NavStack id={`${id}-stack`} label={label} views={views} backLabel={backLabel} />\n    </div>;\n  }\n  const listPane = resizable\n    ? <ResizableRegion id={`${id}-list`} label={listTitle || 'List'} size={resizable.size} min={resizable.min} max={resizable.max}>\n        <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>\n      </ResizableRegion>\n    : <div class=\"kui-split-view__list kui-pane\" data-split-list>{list}</div>;\n  return <div class={`kui-split-view ${className}`.trim()} id={id} data-component=\"split-view\" data-split-mode=\"split\" aria-label={label}>\n    {listPane}\n    <div class=\"kui-split-view__detail kui-pane\" data-split-detail aria-label={detailTitle || undefined}>{detail}</div>\n  </div>;\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"split-view.js"}

package/dist/state-banner.d.ts

@@ -1,17 +1,51 @@
 import { SafeHtml } from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { S as Sides } from './sides-BPSWde0A.js';
+import { S as SemanticTone } from './semantic-tone-CdW013KF.js';
 
-type StateBannerTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** @deprecated Use SemanticTone. */
+type StateBannerTone = SemanticTone;
+type StateBannerUrgency = 'status' | 'alert';
+type StateBannerCopyLayout = 'inline' | 'stacked';
+type StateBannerActionPlacement = 'trailing' | 'below';
+type StateBannerPresentation = 'card' | 'strip';
 interface StateBannerProps {
     title: string;
     detail?: string;
+    /** Optional compact status or count shown beside the title. */
+    badge?: string;
     icon?: SafeHtml;
-    action?: SafeHtml;
-    tone?: StateBannerTone;
-    urgency?: 'status' | 'alert';
+    action?: KerfUiContent;
+    tone?: SemanticTone;
+    urgency?: StateBannerUrgency;
+    /** Keep the detail beside the title, or give it its own line. */
+    copyLayout?: StateBannerCopyLayout;
+    /**
+     * `trailing` (the default) puts the action beside the copy while the copy
+     * keeps its minimum readable width, and otherwise wraps it onto its own
+     * end-aligned trailing row, at any viewport or container width. `below`
+     * always gives the action that separate trailing row.
+     */
+    actionPlacement?: StateBannerActionPlacement;
+    /**
+     * `card` (the default) is an inset, rounded, fully bordered banner beside
+     * the affected work. `strip` is a full-width band at a layout edge, such as
+     * above a workspace: square corners, no inline margin, inline padding on the
+     * shared content-text column, and only the tone-colored `dividerSides` edges.
+     */
+    presentation?: StateBannerPresentation;
+    /**
+     * Physical tone-colored divider edges of a `strip`, in canonical
+     * top/right/bottom/left order. Defaults to the bottom edge; `''` draws none.
+     * A `card` keeps its full border and ignores this.
+     */
+    dividerSides?: Sides;
     className?: string;
-    /** Render the title and detail as unanimated loading skeletons, keeping the icon and tone. */
+    /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */
     placeholder?: boolean;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-declare function StateBanner({ title, detail, icon, action, tone, urgency, className, placeholder }: StateBannerProps): SafeHtml;
+declare function StateBanner({ title, detail, badge, icon, action, tone, urgency, copyLayout, actionPlacement, presentation, dividerSides, className, placeholder, slot, }: StateBannerProps): SafeHtml;
 
-export { StateBanner, type StateBannerProps, type StateBannerTone };
+export { SemanticTone, StateBanner, type StateBannerActionPlacement, type StateBannerCopyLayout, type StateBannerPresentation, type StateBannerProps, type StateBannerTone, type StateBannerUrgency };

package/dist/state-banner.js

@@ -1,4 +1,7 @@
-export { StateBanner } from './chunk-I7INRJO4.js';
+export { StateBanner } from './chunk-2FW7D4IG.js';
+
+
+
 
 
 //# sourceMappingURL=state-banner.js.map

package/dist/styles/anchored-surface.css

@@ -0,0 +1,44 @@
+.kui-anchored-surface {
+  /* The room beside the anchor on the side the surface opened, which
+     kerfjs/overlay publishes and refreshes on every reposition. Read-only for
+     content that sizes an inner scroller to it. */
+  --kui-anchored-surface-available-height: var(
+    --kerf-anchor-available-height,
+    calc(100dvh - 2 * var(--kui-space-xs, 8px))
+  );
+
+  box-sizing: border-box;
+  inset: auto;
+  width: max-content;
+  max-width: calc(100vw - 2 * var(--kui-space-xs, 8px));
+  max-height: min(
+    calc(100dvh - 2 * var(--kui-space-xs, 8px)),
+    var(--kui-anchored-surface-available-height)
+  );
+  overflow: auto;
+  padding: var(--kui-anchored-surface-inset, var(--kui-space-xs, 8px));
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-anchored-surface-radius, var(--kui-radius-m));
+  color: var(--kui-color-text, inherit);
+  --kui-color-surface-current: var(--kui-color-surface-raised);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+  font: inherit;
+}
+
+/* Dark tone for a popup anchored to dark media chrome: the loud, inverse tone
+   of a dark ToolbarControlGroup, so the surface takes the opposite of its
+   anchor's color scheme (the script picks the class when it opens). It flips
+   only the color scheme: every semantic token is a light-dark() pair, so the
+   surface fill, border, shadow, and the content's text, borders, and focus
+   rings all resolve to the other side by inheritance. No child is styled from
+   here. */
+.kui-anchored-surface--scheme-dark {
+  color-scheme: dark;
+}
+
+.kui-anchored-surface--scheme-light {
+  color-scheme: light;
+}

package/dist/styles/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/badge.css

@@ -0,0 +1,157 @@
+.kui-badge {
+  --_kui-badge-fill-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-neutral-on-normal);
+  --_kui-badge-border: var(--kui-color-neutral-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--_kui-badge-on-quiet);
+  background: var(--_kui-badge-fill-quiet);
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* A leading icon sits 4px before the text and inherits the badge's color. */
+.kui-badge[data-has-icon="true"] {
+  gap: 0.25rem;
+}
+
+/* maxWidth caps the badge; the label truncates with an ellipsis and the
+   badge may shrink below the cap in a tight flex row. */
+.kui-badge[data-truncate="true"] {
+  max-width: var(--_kui-badge-max-width);
+  flex: 0 1 auto;
+}
+
+.kui-badge__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-badge__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
+.kui-badge[data-tone="info"] {
+  --_kui-badge-fill-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-brand-on-fill);
+  --_kui-badge-border: var(--kui-color-brand-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-brand-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="pop"] {
+  --_kui-badge-fill-quiet: var(--kui-color-pop-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-pop-on-fill);
+  --_kui-badge-border: var(--kui-color-pop-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-pop-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="success"] {
+  --_kui-badge-fill-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-success-on-fill);
+  --_kui-badge-border: var(--kui-color-success-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="warning"] {
+  --_kui-badge-fill-quiet: var(--kui-color-warning-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-warning-on-fill);
+  --_kui-badge-border: var(--kui-color-warning-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-warning-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="danger"] {
+  --_kui-badge-fill-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-danger-on-fill);
+  --_kui-badge-border: var(--kui-color-danger-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-danger-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-appearance="solid"] {
+  color: var(--_kui-badge-on-solid);
+  background: var(--_kui-badge-fill-solid);
+}
+
+.kui-badge[data-appearance="outline"] {
+  border-color: var(--_kui-badge-border);
+  color: var(--_kui-badge-on-quiet);
+  background: transparent;
+}
+
+.kui-badge[data-shape="rounded"] {
+  border-radius: var(--kui-radius-s);
+}
+
+.kui-badge[data-size="compact"] {
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0.35rem;
+  font-size: var(--kui-font-2xs);
+}
+
+/* The text-free status dot (the iOS "new content" dot): a small solid circle
+   in the tone's solid fill, without the text box's padding or minimum size. */
+.kui-badge[data-size="dot"] {
+  width: 0.5rem;
+  min-width: 0.5rem;
+  height: 0.5rem;
+  min-height: 0.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--_kui-badge-fill-solid);
+}
+
+/* A multiple icon-only Select's count badge, in the trigger after its fixed
+   icon, sits 4px from the icon (the caret keeps its 12px after it). */
+.kui-select__trigger > .kui-badge {
+  margin-inline-start: 0.25rem;
+}
+
+/* A StateBanner's badge follows its title inline and is taller than the
+   title's line. Negative block margins keep it out of the line-height
+   calculation, so a wrapped title's lines stay evenly spaced whichever line
+   the badge lands on. */
+.kui-state-banner__copy > .kui-badge {
+  margin-block: -0.5em;
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  vertical-align: baseline;
+}
+
+/* `corner`: over the top-trailing corner of the control it sits in, which
+   positions itself for it (button.css, toolbar-control-group.css). A count
+   straddles the corner, growing inward; the dot sits just inside it. */
+.kui-badge[data-placement="corner"] {
+  position: absolute;
+  inset-block-start: -0.25rem;
+  inset-inline-end: -0.25rem;
+  pointer-events: none;
+}
+
+.kui-badge[data-placement="corner"][data-size="dot"] {
+  inset-block-start: 0.125rem;
+  inset-inline-end: 0.125rem;
+}