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

package/dist/index.js

@@ -30,7 +30,7 @@ export { Select } from './chunk-ZX2QQJXD.js';
 export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
 export { MessageComposer } from './chunk-4OV272LF.js';
 export { RadioGroup } from './chunk-OHPYT2BH.js';
-export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-6CDILXF4.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-VGECEXM6.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
 export { EmptyState } from './chunk-B53PS2LE.js';
@@ -39,7 +39,7 @@ export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
 export { Grid } from './chunk-KCS6NJ3O.js';
 
 export { ListActionRow } from './chunk-JCCN3U6X.js';
-export { ContentItem } from './chunk-5USKCWGL.js';
+export { ContentItem } from './chunk-WD6KABEU.js';
 export { ContentSwap } from './chunk-EIET4QLK.js';
 export { CornerStatus } from './chunk-G3J7JDP6.js';
 export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
@@ -48,8 +48,8 @@ export { ChoiceChips } from './chunk-ITUQC4FW.js';
 export { ColumnTrack } from './chunk-QYMJHS4K.js';
 export { Combobox } from './chunk-BKUMG2KB.js';
 export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
-export { BackdropImage } from './chunk-SCDWURBO.js';
-export { Button } from './chunk-KPINJHIC.js';
+export { BackdropImage } from './chunk-SOBRGH7T.js';
+export { Button } from './chunk-PS24PVR6.js';
 export { Switch } from './chunk-LTBVP6VN.js';
 export { Row } from './chunk-AMIHGFLP.js';
 export { SearchField, placeSearchFieldCaret, readSearchField } from './chunk-VEME3D7K.js';
@@ -69,12 +69,13 @@ export { Skeleton } from './chunk-CVD5IZGB.js';
 export { DisclosureArrow } from './chunk-TKNVL53O.js';
 export { ToolbarActionLink, ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
 export { Toolbar } from './chunk-ZN7KUMPY.js';
-export { Pane } from './chunk-HQZG3OFL.js';
+export { Pane } from './chunk-XRZSK2WC.js';
 
 export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
 export { List } from './chunk-NB6POCFH.js';
 
 
+
 export { LoadingSpinner } from './chunk-WVS6CUCT.js';
 export { Badge } from './chunk-RMWNO6BA.js';
 export { CheckboxGroup } from './chunk-HU5IHXCI.js';

package/dist/list-detail-dialog.d.ts

@@ -4,9 +4,10 @@ import { CssLength } from './css-values.js';
 import { SplitViewListWidth } from './split-view.js';
 import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
 export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
-import './nav-stack-CU_0dKtI.js';
+import './nav-stack-CrZF95VO.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/list-detail-dialog.js

@@ -1,5 +1,5 @@
-import { SplitView } from './chunk-P7EJ4CAD.js';
-import { DialogSurface } from './chunk-6CDILXF4.js';
+import { SplitView } from './chunk-ETFP7HAR.js';
+import { DialogSurface } from './chunk-VGECEXM6.js';
 export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
 
 
@@ -9,7 +9,8 @@ import { ToolbarText } from './chunk-EKHDLBRP.js';
 
 import { ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
 import { Toolbar } from './chunk-ZN7KUMPY.js';
-import { Pane } from './chunk-HQZG3OFL.js';
+import { Pane } from './chunk-XRZSK2WC.js';
+
 
 
 

package/dist/list-detail-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/list-detail-dialog/list-detail-dialog.tsx"],"names":[],"mappings":"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","file":"list-detail-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { Toolbar } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport {\n  SplitView,\n  type SplitViewListWidth,\n} from '../../layout/split-view/split-view.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/** The list column: a secondary title, its own controls, and the list. */\nexport interface ListDetailDialogList {\n  /**\n   * The column's title, at the default toolbar size so it reads as pane\n   * identity beside the detail's primary title. On compact devices it titles\n   * the root view.\n   */\n  title: string;\n  /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */\n  toolbar?: KerfUiContent;\n  /** The list, usually a `List` of selectable `ListItem`s. */\n  content: KerfUiContent;\n  /** Content pinned below the list, such as an add control. */\n  footer?: KerfUiContent;\n  /**\n   * The column's width on roomy devices (default 280px, at most 40% of the\n   * dialog's width).\n   */\n  width?: SplitViewListWidth;\n}\n\n/** The detail column: the dialog's primary title, actions, and close control. */\nexport interface ListDetailDialogDetail {\n  /**\n   * The dialog's primary title: an xl heading at the top of the detail\n   * column on roomy devices, and the pushed view's title on compact devices.\n   */\n  title: string;\n  /** A short supporting line under the roomy title. */\n  description?: string;\n  /**\n   * Header controls before the close control, such as a\n   * `ToolbarControlGroup`. Primary record actions usually go in `footer`.\n   */\n  actions?: KerfUiContent;\n  /** The selected item's detail. */\n  content: KerfUiContent;\n  /** Content pinned below the detail, usually its buttons. */\n  footer?: KerfUiContent;\n}\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface ListDetailDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. Also\n   * prefixes the ids of the split and the detail title.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as app-owned summary copy. The detail's `description` describes the\n   * selection, not the dialog, so it is not wired automatically.\n   */\n  describedBy?: string;\n  list: ListDetailDialogList;\n  detail: ListDetailDialogDetail;\n  /**\n   * One pane at a time: derive from `deviceClass().value.compact`. The dialog\n   * fills the screen and drills from the list into the detail as a\n   * `NavStack`; every view keeps the close control.\n   */\n  compact?: boolean;\n  /** On compact devices, whether the detail is pushed over the list. */\n  detailActive?: boolean;\n  /** The compact back control's accessible name (default `Back`). */\n  backLabel?: string;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  rootAttributes?: ListDetailDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_LIST_WIDTH: SplitViewListWidth = { size: 280, maxFraction: 0.4 };\n\nfunction closeGroup(closeLabel: string) {\n  return (\n    <ToolbarControlGroup appearance=\"borderless\" single>\n      <button type=\"button\" aria-label={closeLabel} data-dialog-close=\"\">\n        <LucideIcon icon={X} name=\"x\" />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * A list-detail dialog: a modal whose list column and detail column each run\n * its full height. The list column carries a secondary title and its own\n * controls; the detail column carries the dialog's primary title, its\n * actions, and the close control, so the divider between them runs from top\n * to bottom. On compact devices it fills the screen and becomes a `NavStack`\n * that drills from the list into the detail. Open it with `openDialog()`;\n * the app owns the selection and, on compact devices, `detailActive` (the\n * stack's back control dispatches `nav-back`). Built from `DialogSurface`,\n * `SplitView`, and `Pane`.\n */\nexport function ListDetailDialog({\n  id,\n  label,\n  describedBy,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  backLabel = 'Back',\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  rootAttributes,\n  className = '',\n  slot,\n}: ListDetailDialogProps) {\n  const close = closeGroup(closeLabel);\n  const split = compact ? (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      compact\n      detailActive={detailActive}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      backLabel={backLabel}\n      compactStack={{\n        list: {\n          toolbar: {\n            trailing: (\n              <>\n                {list.toolbar}\n                {close}\n              </>\n            ),\n          },\n          footer: list.footer,\n        },\n        detail: {\n          toolbar: {\n            trailing: (\n              <>\n                {detail.actions}\n                {close}\n              </>\n            ),\n          },\n          footer: detail.footer,\n        },\n      }}\n      list={list.content}\n      detail={detail.content}\n    />\n  ) : (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      listWidth={list.width ?? DEFAULT_LIST_WIDTH}\n      list={\n        <Pane\n          label={list.title}\n          header={\n            <Toolbar\n              label={list.title}\n              leading={<ToolbarText text={list.title} />}\n              trailing={list.toolbar}\n            />\n          }\n          footer={list.footer}\n        >\n          {list.content}\n        </Pane>\n      }\n      detail={\n        <Pane\n          label={detail.title}\n          header={\n            <Toolbar\n              label={detail.title}\n              leading={\n                <ToolbarText\n                  text={detail.title}\n                  description={detail.description}\n                  size=\"xlarge\"\n                  id={`${id}-title`}\n                  headingLevel={2}\n                />\n              }\n              trailing={\n                <>\n                  {detail.actions}\n                  {close}\n                </>\n              }\n            />\n          }\n          footer={detail.footer}\n        >\n          {detail.content}\n        </Pane>\n      }\n    />\n  );\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={describedBy}\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'list-detail',\n      }}\n      className={className}\n      slot={slot}\n    >\n      {split}\n    </DialogSurface>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/list-detail-dialog/list-detail-dialog.tsx"],"names":[],"mappings":"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","file":"list-detail-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { Toolbar } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport {\n  SplitView,\n  type SplitViewListWidth,\n} from '../../layout/split-view/split-view.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/** The list column: a secondary title, its own controls, and the list. */\nexport interface ListDetailDialogList {\n  /**\n   * The column's title, at the default toolbar size so it reads as pane\n   * identity beside the detail's primary title. On compact devices it titles\n   * the root view.\n   */\n  title: string;\n  /** Controls after the title in the column's header, such as a `ToolbarControlGroup`. */\n  toolbar?: KerfUiContent;\n  /** The list, usually a `List` of selectable `ListItem`s. */\n  content: KerfUiContent;\n  /** Content pinned below the list, such as an add control. */\n  footer?: KerfUiContent;\n  /**\n   * The column's width on roomy devices (default 280px, at most 40% of the\n   * dialog's width).\n   */\n  width?: SplitViewListWidth;\n}\n\n/** The detail column: the dialog's primary title, actions, and close control. */\nexport interface ListDetailDialogDetail {\n  /**\n   * The dialog's primary title: an xl heading at the top of the detail\n   * column on roomy devices, and the pushed view's title on compact devices.\n   */\n  title: string;\n  /** A short supporting line under the roomy title. */\n  description?: string;\n  /**\n   * Header controls before the close control, such as a\n   * `ToolbarControlGroup`. Primary record actions usually go in `footer`.\n   */\n  actions?: KerfUiContent;\n  /** The selected item's detail. */\n  content: KerfUiContent;\n  /** Content pinned below the detail, usually its buttons. */\n  footer?: KerfUiContent;\n}\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type ListDetailDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface ListDetailDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. Also\n   * prefixes the ids of the split and the detail title.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as app-owned summary copy. The detail's `description` describes the\n   * selection, not the dialog, so it is not wired automatically.\n   */\n  describedBy?: string;\n  list: ListDetailDialogList;\n  detail: ListDetailDialogDetail;\n  /**\n   * One pane at a time: derive from `deviceClass().value.compact`. The dialog\n   * fills the screen and drills from the list into the detail as a\n   * `NavStack`; every view keeps the close control.\n   */\n  compact?: boolean;\n  /** On compact devices, whether the detail is pushed over the list. */\n  detailActive?: boolean;\n  /** The compact back control's accessible name (default `Back`). */\n  backLabel?: string;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  rootAttributes?: ListDetailDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nconst DEFAULT_LIST_WIDTH: SplitViewListWidth = { size: 280, maxFraction: 0.4 };\n\nfunction closeGroup(closeLabel: string) {\n  return (\n    <ToolbarControlGroup appearance=\"borderless\" single>\n      <button type=\"button\" aria-label={closeLabel} data-dialog-close=\"\">\n        <LucideIcon icon={X} name=\"x\" />\n      </button>\n    </ToolbarControlGroup>\n  );\n}\n\n/**\n * A list-detail dialog: a modal whose list column and detail column each run\n * its full height. The list column carries a secondary title and its own\n * controls; the detail column carries the dialog's primary title, its\n * actions, and the close control, so the divider between them runs from top\n * to bottom. On compact devices it fills the screen and becomes a `NavStack`\n * that drills from the list into the detail. Open it with `openDialog()`;\n * the app owns the selection and, on compact devices, `detailActive` (the\n * stack's back control dispatches `nav-back`). Built from `DialogSurface`,\n * `SplitView`, and `Pane`.\n */\nexport function ListDetailDialog({\n  id,\n  label,\n  describedBy,\n  list,\n  detail,\n  compact = false,\n  detailActive = false,\n  backLabel = 'Back',\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  rootAttributes,\n  className = '',\n  slot,\n}: ListDetailDialogProps) {\n  const close = closeGroup(closeLabel);\n  const split = compact ? (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      compact\n      detailActive={detailActive}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      backLabel={backLabel}\n      compactStack={{\n        list: {\n          toolbar: {\n            trailing: (\n              <>\n                {list.toolbar}\n                {close}\n              </>\n            ),\n          },\n          footer: list.footer,\n        },\n        detail: {\n          toolbar: {\n            trailing: (\n              <>\n                {detail.actions}\n                {close}\n              </>\n            ),\n          },\n          footer: detail.footer,\n        },\n      }}\n      list={list.content}\n      detail={detail.content}\n    />\n  ) : (\n    <SplitView\n      id={`${id}-split`}\n      label={label}\n      listTitle={list.title}\n      detailTitle={detail.title}\n      listWidth={list.width ?? DEFAULT_LIST_WIDTH}\n      list={\n        <Pane\n          label={list.title}\n          header={\n            <Toolbar\n              label={list.title}\n              leading={<ToolbarText text={list.title} />}\n              trailing={list.toolbar}\n            />\n          }\n          footer={list.footer}\n        >\n          {list.content}\n        </Pane>\n      }\n      detail={\n        <Pane\n          label={detail.title}\n          header={\n            <Toolbar\n              label={detail.title}\n              leading={\n                <ToolbarText\n                  text={detail.title}\n                  description={detail.description}\n                  size=\"xlarge\"\n                  id={`${id}-title`}\n                  headingLevel={2}\n                />\n              }\n              trailing={\n                <>\n                  {detail.actions}\n                  {close}\n                </>\n              }\n            />\n          }\n          footer={detail.footer}\n        >\n          {detail.content}\n        </Pane>\n      }\n    />\n  );\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      describedBy={describedBy}\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'list-detail',\n      }}\n      className={className}\n      slot={slot}\n    >\n      {split}\n    </DialogSurface>\n  );\n}\n"]}

package/dist/{nav-stack-CU_0dKtI.d.ts → nav-stack-CrZF95VO.d.ts}

@@ -1,9 +1,10 @@
 import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
-import { PaneConfig, ScrollEdge, SurfaceTint } from './pane.js';
+import { PaneConfig, ScrollEdge } from './pane.js';
 import { ListConfig } from './list.js';
 import { c as PanelBottomToolbar } from './panel-toolbar-vg6Ir5Dy.js';
 import { CssColor } from './css-values.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
 import { ToolbarConfig } from './toolbar.js';
 import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
 

package/dist/nav-stack.d.ts

@@ -1,9 +1,10 @@
-export { c as NavStack, d as NavStackBottomToolbarPresentation, e as NavStackChromePresentation, N as NavStackProps, f as NavStackToolbarConfig, a as NavStackView, g as NavStackViewBottomToolbar, h as NavStackViewToolbar } from './nav-stack-CU_0dKtI.js';
+export { c as NavStack, d as NavStackBottomToolbarPresentation, e as NavStackChromePresentation, N as NavStackProps, f as NavStackToolbarConfig, a as NavStackView, g as NavStackViewBottomToolbar, h as NavStackViewToolbar } from './nav-stack-CrZF95VO.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/nav-stack.js

@@ -1,4 +1,5 @@
-export { NavStack } from './chunk-SOFPUW3O.js';
+export { NavStack } from './chunk-IIQ2XIMU.js';
+
 
 
 

package/dist/pane.d.ts

@@ -2,6 +2,8 @@ import * as kerfjs from 'kerfjs';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
 import { CssColor } from './css-values.js';
+import { S as SurfaceTint } from './surface-tint-DQgYCaP9.js';
+export { a as SurfaceTintScheme } from './surface-tint-DQgYCaP9.js';
 
 /**
  * What clear (fully transparent) chrome fades in as content scrolls beneath
@@ -12,28 +14,6 @@ import { CssColor } from './css-values.js';
  */
 type ScrollEdge = 'none' | 'material' | 'surface';
 
-/** The color scheme an app declares for a {@link SurfaceTint}'s color. */
-type SurfaceTintScheme = 'light' | 'dark';
-/**
- * A scoped tint for a layout surface: the app's color (usually sampled from
- * artwork it already knows) and the scheme that color belongs to. Kerf does no
- * color detection; `scheme` says whether the color reads as a light or a dark
- * surface. Inside the scope the surface, raised surface, text, quiet text, and
- * everything built on them (quiet fills, separators' backdrop, the chrome
- * material) re-derive from the color, with lightness clamped so text keeps
- * WCAG AA over any color.
- */
-interface SurfaceTint {
-    color: CssColor;
-    scheme: SurfaceTintScheme;
-    /**
-     * An optional accent (usually the artwork's most vivid color). The scope's
-     * brand ramp re-derives from it: loud fills and their text, brand text and
-     * links, text on brand fills, and the focus ring, each clamped to keep AA.
-     */
-    accent?: CssColor;
-}
-
 /**
  * Logical pane sides: where a {@link Pane} can show a separator and where it can
  * compensate for a device safe-area inset.
@@ -255,4 +235,4 @@ type PaneConfig = Pick<PaneProps, 'contentElement' | 'contentLabel' | 'separator
  */
 declare function Pane({ header, children, footer, chromePlacement, chromeDividers, compactChrome, compactChromeOpen, headerPresentation, scrollEdge, scrollEdgeDistance, appearance, background, tint, deepInset, scrollClearance, tabIndex, outlined, element, contentElement, separators, safeAreaEdges, id, label, contentLabel, className, headerClassName, contentClassName, footerClassName, rootAttributes, slot, }: PaneProps): kerfjs.SafeHtml;
 
-export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, type SurfaceTint, type SurfaceTintScheme };
+export { Pane, type PaneAppearance, type PaneChromeDividers, type PaneChromePlacement, type PaneCompactChrome, type PaneCompactChromePolicy, type PaneConfig, type PaneContentElement, type PaneElement, type PaneHeaderPresentation, type PaneProps, type PaneSeparatorSide, ScrollClearance, type ScrollEdge, SurfaceTint };

package/dist/pane.js

@@ -1,4 +1,5 @@
-export { Pane } from './chunk-HQZG3OFL.js';
+export { Pane } from './chunk-XRZSK2WC.js';
+
 
 
 

package/dist/split-view.d.ts

@@ -1,10 +1,11 @@
 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 { N as NavStackProps, a as NavStackView } from './nav-stack-CrZF95VO.js';
 import { ResizableRegionProps } from './resizable-region.js';
 import './pane.js';
 import './scroll-clearance-BikHljTc.js';
 import './css-values.js';
+import './surface-tint-DQgYCaP9.js';
 import './list.js';
 import './extension-attributes-mu8MFUl0.js';
 import './flex-alignment-4ms8ZbV8.js';

package/dist/split-view.js

@@ -1,4 +1,5 @@
-export { SplitView } from './chunk-P7EJ4CAD.js';
+export { SplitView } from './chunk-ETFP7HAR.js';
+
 
 
 

package/dist/styles/backdrop-image.css

@@ -27,6 +27,11 @@
   isolation: isolate;
 }
 
+.kui-backdrop-image[data-inline-bleed="false"] {
+  --_kui-backdrop-image-inset-start: 0px;
+  --_kui-backdrop-image-inset-end: 0px;
+}
+
 /* `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
@@ -60,6 +65,11 @@
   view-timeline: --kui-backdrop-image block;
 }
 
+.kui-backdrop-image[data-aspect-ratio="true"] .kui-backdrop-image__hero {
+  min-height: 0;
+  aspect-ratio: var(--_kui-backdrop-image-ratio);
+}
+
 .kui-backdrop-image__backdrop {
   position: absolute;
   inset: 0;
@@ -89,6 +99,10 @@
   background-position: var(--_kui-backdrop-image-position);
 }
 
+.kui-backdrop-image__blurred[data-image-error="true"] {
+  display: none;
+}
+
 /* 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
@@ -208,7 +222,10 @@
   animation: none;
 }
 
-@media (update: slow) {
+@media (update: slow),
+  (prefers-reduced-transparency: reduce),
+  (prefers-contrast: more),
+  (forced-colors: active) {
   .kui-backdrop-image[data-parallax="scroll"] .kui-backdrop-image__layers,
   .kui-backdrop-image[data-blur]
     :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {

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

@@ -27,6 +27,11 @@
   isolation: isolate;
 }
 
+.kui-backdrop-image[data-inline-bleed="false"] {
+  --_kui-backdrop-image-inset-start: 0px;
+  --_kui-backdrop-image-inset-end: 0px;
+}
+
 /* `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
@@ -60,6 +65,11 @@
   view-timeline: --kui-backdrop-image block;
 }
 
+.kui-backdrop-image[data-aspect-ratio="true"] .kui-backdrop-image__hero {
+  min-height: 0;
+  aspect-ratio: var(--_kui-backdrop-image-ratio);
+}
+
 .kui-backdrop-image__backdrop {
   position: absolute;
   inset: 0;
@@ -89,6 +99,10 @@
   background-position: var(--_kui-backdrop-image-position);
 }
 
+.kui-backdrop-image__blurred[data-image-error="true"] {
+  display: none;
+}
+
 /* 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
@@ -208,7 +222,10 @@
   animation: none;
 }
 
-@media (update: slow) {
+@media (update: slow),
+  (prefers-reduced-transparency: reduce),
+  (prefers-contrast: more),
+  (forced-colors: active) {
   .kui-backdrop-image[data-parallax="scroll"] .kui-backdrop-image__layers,
   .kui-backdrop-image[data-blur]
     :is(.kui-backdrop-image__blurred, .kui-backdrop-image__dim) {

package/dist/styles/components/surfaces/content-item/content-item.css

@@ -17,6 +17,54 @@
   background: var(--kui-content-item-background, transparent);
 }
 
+/* BackdropImage supplies the image, overlay, fade, and per-card view timeline.
+   ContentItem owns only how that media block meets the card's geometry. */
+.kui-content-item__media {
+  overflow: clip;
+  border-radius: max(0px, calc(var(--kui-content-item-radius, 12px) - 9px));
+}
+
+.kui-content-item[data-media-edge="true"] .kui-content-item__media {
+  margin-inline: calc(-1 * var(--kui-layout-item-padding, 0.5rem));
+  margin-block-start: calc(-1 * var(--kui-layout-item-padding, 0.5rem));
+  border-start-start-radius: max(
+    0px,
+    calc(var(--kui-content-item-radius, 12px) - 1px)
+  );
+  border-start-end-radius: max(
+    0px,
+    calc(var(--kui-content-item-radius, 12px) - 1px)
+  );
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.kui-content-item__body {
+  min-width: 0;
+  margin-block-start: var(--kui-space-xs);
+}
+
+.kui-content-item[data-media-state][data-kui-tint][data-appearance="transparent"] {
+  --kui-content-item-background: var(--kui-color-surface);
+}
+
+.kui-content-item[data-media-state="error"] .kui-content-item__media {
+  display: none;
+}
+
+.kui-content-item[data-media-state="error"] .kui-content-item__body {
+  margin-block-start: 0;
+}
+
+@media (forced-colors: active) {
+  .kui-content-item .kui-content-item__media {
+    display: none;
+  }
+  .kui-content-item__body {
+    margin-block-start: 0;
+  }
+}
+
 .kui-content-item--pill {
   --kui-content-item-radius: var(
     --kui-layout-pill-radius,
@@ -95,6 +143,10 @@
   --kui-content-item-foreground: var(--kui-color-danger-on-fill);
 }
 
+.kui-content-item[data-media-fade="true"]:not([data-media-state="error"]) {
+  --kui-content-item-background: var(--_kui-content-item-media-fade-to);
+}
+
 .kui-content-item[data-interactive="true"] {
   color: var(--kui-content-item-foreground, var(--kui-color-neutral-on-normal));
   cursor: pointer;

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

@@ -173,15 +173,23 @@ h2.kui-dialog-surface__title {
   background: transparent;
   cursor: pointer;
 }
+.kui-dialog-surface__close[data-emphasis="quiet"] {
+  color: var(--kui-color-text-quiet);
+}
 .kui-dialog-surface__close:hover {
   background-color: var(--kui-color-neutral-fill-normal);
 }
+.kui-dialog-surface__close[data-emphasis="quiet"]:is(:hover, :focus-visible) {
+  color: var(--kui-color-neutral-on-quiet);
+}
 .kui-dialog-surface__close:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: var(--kui-focus-ring-offset, 1px);
 }
 @media (forced-colors: active) {
-  .kui-dialog-surface__close {
+  .kui-dialog-surface__close,
+  .kui-dialog-surface__close[data-emphasis="quiet"]:is(:hover, :focus-visible),
+  .kui-dialog-surface__close[data-emphasis="quiet"] {
     color: ButtonText;
   }
 }

package/dist/styles/content-item.css

@@ -1,168 +1,3 @@
-/* One self-contained content-item: 8px inline margin, a real 1px border
-   (transparent unless framed), 8px padding, and a rounded or pill radius.
-   Rendered by ContentItem; the classes stay public for other elements. */
-
-.kui-content-item {
-  min-width: 0;
-  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
-  padding: var(--kui-layout-item-padding, 0.5rem);
-  box-sizing: border-box;
-  border: var(--kui-layout-item-border-width, 1px) solid
-    var(--kui-content-item-border, transparent);
-  border-radius: var(
-    --kui-content-item-radius,
-    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
-  );
-  color: var(--kui-content-item-foreground, inherit);
-  background: var(--kui-content-item-background, transparent);
-}
-
-.kui-content-item--pill {
-  --kui-content-item-radius: var(
-    --kui-layout-pill-radius,
-    calc(1px + 1.3125rem)
-  );
-}
-
-.kui-content-item--flush {
-  padding-block: 0;
-  border-block-width: 0;
-}
-
-/* A visible frame for a content item that marks a real distinction: the
-   standard neutral border, same geometry (the border is always reserved). */
-.kui-content-item--framed {
-  --kui-content-item-border: var(--kui-color-neutral-border-normal);
-}
-
-.kui-content-item[data-appearance="surface"] {
-  --kui-content-item-border: var(--kui-color-neutral-border-normal);
-  --kui-content-item-background: var(--kui-color-surface);
-  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
-}
-
-.kui-content-item[data-appearance="neutral"] {
-  --kui-content-item-border: var(--kui-color-neutral-border-normal);
-  --kui-content-item-background: var(--kui-color-neutral-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
-}
-
-.kui-content-item[data-appearance="info"] {
-  --kui-content-item-border: var(--kui-color-brand-border-quiet);
-  --kui-content-item-background: var(--kui-color-brand-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-brand-on-fill);
-}
-
-.kui-content-item[data-appearance="pop"] {
-  --kui-content-item-border: var(--kui-color-pop-border-normal);
-  --kui-content-item-background: var(--kui-color-pop-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-pop-on-fill);
-}
-
-.kui-content-item[data-appearance="success"] {
-  --kui-content-item-border: var(--kui-color-success-border-normal);
-  --kui-content-item-background: var(--kui-color-success-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-success-on-fill);
-}
-
-.kui-content-item[data-appearance="warning"] {
-  --kui-content-item-border: var(--kui-color-warning-border-normal);
-  --kui-content-item-background: var(--kui-color-warning-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-warning-on-fill);
-}
-
-.kui-content-item[data-appearance="brand-loud"] {
-  --kui-content-item-border: var(--kui-color-brand-border-loud);
-  --kui-content-item-background: var(--kui-color-brand-fill-loud);
-  --kui-content-item-foreground: var(--kui-color-brand-on-loud);
-}
-
-/* Chat bubble: the item shrinks to its content up to 80% of the row and sits
-   at the start or end of the line; long unbroken text wraps inside it. */
-.kui-content-item[data-bubble] {
-  width: fit-content;
-  max-width: 80%;
-  overflow-wrap: anywhere;
-}
-
-.kui-content-item[data-bubble="end"] {
-  margin-inline-start: auto;
-}
-
-.kui-content-item[data-appearance="danger"] {
-  --kui-content-item-border: var(--kui-color-danger-border-quiet);
-  --kui-content-item-background: var(--kui-color-danger-fill-quiet);
-  --kui-content-item-foreground: var(--kui-color-danger-on-fill);
-}
-
-.kui-content-item[data-interactive="true"] {
-  color: var(--kui-content-item-foreground, var(--kui-color-neutral-on-normal));
-  cursor: pointer;
-}
-
-.kui-content-item[data-interactive="true"]:hover:not(
-    [data-disabled="true"],
-    [data-selected="true"]
-  ),
-.kui-content-item[data-interactive="true"][data-kui-pressed="true"]:not(
-    [data-selected="true"]
-  ) {
-  --kui-content-item-border: var(--kui-color-neutral-border-normal);
-  --kui-content-item-background: var(--kui-color-neutral-fill-normal);
-  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
-}
-
-.kui-content-item[data-interactive="true"]:active:not([data-disabled="true"]) {
-  --kui-content-item-background: color-mix(
-    in srgb,
-    var(--kui-color-neutral-fill-normal) 75%,
-    var(--kui-color-neutral-fill-loud)
-  );
-}
-
-.kui-content-item[data-interactive="true"][data-selected="true"] {
-  --kui-content-item-border: var(--kui-color-brand-border-quiet);
-  --kui-content-item-background: var(--kui-color-brand-fill-normal);
-  --kui-content-item-foreground: var(--kui-color-brand-on-fill);
-}
-
-/* The surface context follows the fill an item paints: a quiet appearance,
-   a hover, press, or selection. A transparent item keeps its parent's
-   context; a brand-loud fill shares the focus ring's hue, so a control on it
-   keeps the surface line. A surface appearance is opaque, so it resets. */
-.kui-content-item:is(
-  [data-appearance]:not(
-    [data-appearance="transparent"],
-    [data-appearance="brand-loud"]
-  ),
-  [data-interactive="true"]:hover:not([data-disabled="true"]),
-  [data-interactive="true"]:is(
-    [data-kui-pressed="true"],
-    [data-selected="true"]
-  )
-) {
-  --kui-color-surface-current-tint: var(--kui-content-item-background);
-}
-
-.kui-content-item[data-appearance="surface"]:not(
-    [data-interactive="true"]:is(
-      :hover,
-      [data-kui-pressed="true"],
-      [data-selected="true"]
-    )
-  ) {
-  --kui-color-surface-current: var(--kui-color-surface);
-  --kui-color-surface-current-region: transparent;
-  --kui-color-surface-current-tint: transparent;
-}
-
-.kui-content-item:is(:focus-visible, [data-outlined="true"]) {
-  outline: var(--kui-focus-ring);
-  outline-offset: 1px;
-}
-
-.kui-content-item[data-interactive="true"][data-disabled="true"] {
-  color: var(--kui-color-neutral-on-quiet);
-  opacity: 0.58;
-  cursor: not-allowed;
-}
+/* Public stylesheet entry; implementation is colocated with the component. */
+@import "./backdrop-image.css";
+@import "./components/surfaces/content-item/content-item.css";

package/dist/styles/foundation.css

@@ -223,7 +223,7 @@
   --kui-color-text: var(--wa-color-text-normal, light-dark(#1d1d1f, #f5f5f7));
   --kui-color-text-quiet: var(
     --wa-color-text-quiet,
-    light-dark(#6e6e73, #aeaeb2)
+    light-dark(#646469, #aeaeb2)
   );
   --kui-color-text-link: var(
     --wa-color-text-link,
@@ -525,7 +525,7 @@
   );
   --kui-color-danger-on-quiet: var(
     --wa-color-danger-on-quiet,
-    light-dark(#c20b20, #ff696c)
+    light-dark(#c20b20, #ff8588)
   );
   --kui-color-danger-on-normal: var(
     --wa-color-danger-on-normal,
@@ -538,8 +538,8 @@
   /* Danger text placed ON a danger fill (e.g. the danger StateBanner) and the
      danger Badge's solid fill. The light value matches danger-on-quiet, which
      already clears WCAG AA (5.7:1) over danger-fill-quiet. The dark value is
-     lighter than danger-on-quiet (#ff696c), which reached only 5.7:1 over the
-     dark fill-quiet (4.0:1 as dimmed banner detail) and left the solid badge's
+     lighter than danger-on-quiet (#ff8588); the former #ff696c reached only
+     5.7:1 over the dark fill-quiet (4.0:1 as dimmed banner detail) and left the solid badge's
      dark text and placeholder skeleton the weakest of any tone on a mid-red
      fill; #ffa0a2 matches the other tones' pale dark on-fill values. */
   --kui-color-danger-on-fill: light-dark(#c20b20, #ffa0a2);

package/dist/styles/surface-scaffold.css

@@ -173,15 +173,23 @@ h2.kui-dialog-surface__title {
   background: transparent;
   cursor: pointer;
 }
+.kui-dialog-surface__close[data-emphasis="quiet"] {
+  color: var(--kui-color-text-quiet);
+}
 .kui-dialog-surface__close:hover {
   background-color: var(--kui-color-neutral-fill-normal);
 }
+.kui-dialog-surface__close[data-emphasis="quiet"]:is(:hover, :focus-visible) {
+  color: var(--kui-color-neutral-on-quiet);
+}
 .kui-dialog-surface__close:focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: var(--kui-focus-ring-offset, 1px);
 }
 @media (forced-colors: active) {
-  .kui-dialog-surface__close {
+  .kui-dialog-surface__close,
+  .kui-dialog-surface__close[data-emphasis="quiet"]:is(:hover, :focus-visible),
+  .kui-dialog-surface__close[data-emphasis="quiet"] {
     color: ButtonText;
   }
 }