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

package/dist/chunk-PE2KPZDW.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shared/popup/position-popup.ts"],"names":[],"mappings":";;;AA2BO,IAAM,qBAAA,GAAwB,8BAAA;AAG9B,IAAM,sBAAA,GAAyB,EAAA;AAM/B,SAAS,WAAA,CAAY,GAAW,CAAA,EAA2B;AAChE,EAAA,OAAO,EAAE,uBAAuB,MAAM,IAAI,QAAQ,CAAA,EAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,EAAE;AAChE;AAgBA,eAAsB,aAAA,CACpB,QACA,KAAA,EACA;AAAA,EACE,SAAA;AAAA,EACA,GAAA,GAAM,CAAA;AAAA,EACN,WAAA,GAAc,CAAA;AAAA,EACd,OAAA,GAAU;AACZ,CAAA,EACe;AAGf,EAAA,MAAM,QAAA,GAAW,MAAM,aAAA,CAAc,eAAA;AAGrC,EAAA,KAAA,CAAM,KAAA,CAAM,eAAe,YAAY,CAAA;AACvC,EAAA,KAAA,CAAM,KAAA,CAAM,eAAe,qBAAqB,CAAA;AAChD,EAAA,MAAM;AAAA,IACJ,CAAA;AAAA,IACA,CAAA;AAAA,IACA,SAAA,EAAW;AAAA,GACb,GAAI,MAAM,eAAA,CAAgB,MAAA,EAAQ,KAAA,EAAO;AAAA,IACvC,QAAA,EAAU,OAAA;AAAA,IACV,SAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV;AAAA,QACE,IAAA,EAAM,QAAA;AAAA,QACN,EAAA,EAAI,CAAC,EAAE,CAAA,EAAG,IAAI,CAAA,EAAG,EAAA,EAAI,SAAA,EAAW,OAAA,EAAQ,KAAM;AAC5C,UAAA,MAAM,WACJ,OAAA,CAAQ,UAAA,CAAW,KAAK,CAAA,IAAK,OAAA,CAAQ,WAAW,QAAQ,CAAA;AAC1D,UAAA,MAAM,IAAA,GACJ,QAAQ,UAAA,CAAW,KAAK,KAAK,OAAA,CAAQ,UAAA,CAAW,MAAM,CAAA,GAAI,EAAA,GAAK,CAAA;AAGjE,UAAA,MAAM,QAAQ,OAAA,CAAQ,QAAA,CAAS,MAAM,CAAA,GAAI,CAAC,WAAA,GAAc,WAAA;AACxD,UAAA,OAAO,WACH,EAAE,CAAA,EAAG,EAAA,GAAK,KAAA,EAAO,GAAG,EAAA,GAAK,IAAA,GAAO,GAAA,EAAI,GACpC,EAAE,CAAA,EAAG,EAAA,GAAK,OAAO,GAAA,EAAK,CAAA,EAAG,KAAK,KAAA,EAAM;AAAA,QAC1C;AAAA,OACF;AAAA,MACA,KAAK,EAAE,gBAAA,EAAkB,SAAA,EAAW,OAAA,EAAS,UAAU,CAAA;AAAA,MACvD,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,UAAU,CAAA;AAAA,MAC5C,IAAA,CAAK;AAAA,QACH,OAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAA,CAAM,EAAE,eAAA,EAAiB,cAAA,EAAe,EAAG;AACzC,UAAA,KAAA,CAAM,MAAM,SAAA,GAAY,CAAA,EAAG,KAAK,GAAA,CAAI,CAAA,EAAG,eAAe,CAAC,CAAA,EAAA,CAAA;AAEvD,UAAA,KAAA,CAAM,KAAA,CAAM,WAAA;AAAA,YACV,qBAAA;AAAA,YACA,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,cAAc,CAAC,CAAA,EAAA;AAAA,WAChC;AAAA,QACF;AAAA,OACD;AAAA;AACH,GACD,CAAA;AACD,EAAA,KAAA,CAAM,KAAA,CAAM,IAAA,GAAO,CAAA,EAAG,CAAC,CAAA,EAAA,CAAA;AACvB,EAAA,KAAA,CAAM,KAAA,CAAM,GAAA,GAAM,CAAA,EAAG,CAAC,CAAA,EAAA,CAAA;AACtB,EAAA,KAAA,CAAM,YAAA,CAAa,kBAAkB,IAAI,CAAA;AAC3C;AAOO,SAAS,YAAA,CACd,MAAA,EACA,KAAA,EACA,KAAA,EACY;AACZ,EAAA,OAAO,UAAA,CAAW,MAAA,EAAQ,KAAA,EAAO,KAAK,CAAA;AACxC;AAGO,IAAM,mBAAA,GAAsB;AAEnC,IAAM,WAAA,GAAc,CAAA;AACpB,IAAM,SAAA,GAAY,CAAA;AAcX,SAAS,oBAAA,CACd,MAAA,EACA,OAAA,EACA,QAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,OAAA,CAAQ,OAAO,QAAA,CAAS,KAAA,GAAQ,IAAI,WAAW,CAAA;AACtE,EAAA,MAAM,SAAS,OAAA,CAAQ,MAAA;AACvB,EAAA,MAAM,QAAQ,IAAA,CAAK,GAAA;AAAA,IACjB,CAAA;AAAA,IACA,QAAA,CAAS,MAAA,GAAS,MAAA,CAAO,MAAA,GAAS,SAAA,GAAY;AAAA,GAChD;AACA,EAAA,MAAM,QAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,MAAA,CAAO,GAAA,GAAM,YAAY,WAAW,CAAA;AAC9D,EAAA,MAAM,QAAA,GAAW,MAAA,IAAU,KAAA,IAAU,MAAA,GAAS,SAAS,KAAA,IAAS,KAAA;AAChE,EAAA,MAAM,eAAA,GAAkB,WAAW,KAAA,GAAQ,KAAA;AAC3C,EAAA,MAAM,IAAA,GAAO,GAAA,GAAM,MAAA,CAAO,KAAA,GAAQ,QAAQ,MAAA,CAAO,IAAA;AACjD,EAAA,OAAO;AAAA,IACL,MAAM,IAAA,CAAK,GAAA;AAAA,MACT,WAAA;AAAA,MACA,KAAK,GAAA,CAAI,IAAA,EAAM,QAAA,CAAS,KAAA,GAAQ,cAAc,KAAK;AAAA,KACrD;AAAA,IACA,GAAA,EAAK,QAAA,GACD,MAAA,CAAO,MAAA,GAAS,SAAA,GAChB,MAAA,CAAO,GAAA,GAAM,SAAA,GAAY,IAAA,CAAK,GAAA,CAAI,MAAA,EAAQ,eAAe,CAAA;AAAA,IAC7D,SAAA,EAAW,eAAA;AAAA,IACX,QAAA,EAAU,QAAA,CAAS,KAAA,GAAQ,CAAA,GAAI,WAAA;AAAA,IAC/B,SAAA,EAAW,WAAY,cAAA,GAA4B;AAAA,GACrD;AACF","file":"chunk-PE2KPZDW.js","sourcesContent":["import {\n  autoUpdate,\n  computePosition,\n  flip,\n  type Placement,\n  shift,\n  size,\n  type VirtualElement,\n} from '@floating-ui/dom';\n\n/**\n * Placement for Kerf-owned popups (a PopupMenu's menu and submenus, a\n * Select's listbox): a top-layer element positioned `fixed` against an\n * anchor, flipped to the other side when its preferred side is short,\n * shifted to stay clear of the viewport edge, and capped to the block size\n * its side has room for. The geometry matches the Web Awesome popup these\n * surfaces replaced: no gap, best-fit flip, 10px shift and size padding.\n */\n\n/** Where a popup opens: below or above its anchor, at the start, center, or end. */\nexport type PopupPlacement =\n  'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';\n\n/**\n * The custom property a placed popup's CSS reads to cap its width at the room\n * its side has; the popup also keeps any width limit of its own.\n */\nexport const POPUP_AVAILABLE_WIDTH = '--_kui-popup-available-width';\n\n/** A popup stays this far from the viewport edge when shifted or capped. */\nexport const POPUP_VIEWPORT_PADDING = 10;\n\n/** An element, or a viewport rectangle such as a context menu's pointer point. */\nexport type PopupAnchor = Element | VirtualElement;\n\n/** A zero-size anchor at a viewport point. */\nexport function pointAnchor(x: number, y: number): VirtualElement {\n  return { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) };\n}\n\nexport interface PositionPopupOptions {\n  placement: Placement;\n  /** Main-axis distance from the anchor. */\n  gap?: number;\n  /** Cross-axis offset (a submenu lifts so its first row meets its item). */\n  crossOffset?: number;\n  /** Viewport padding the flip, shift, and height cap keep. */\n  padding?: number;\n}\n\n/**\n * Position `popup` against `anchor` once. Records the placement used as\n * `data-placement`, so the popup's motion grows from its anchor side.\n */\nexport async function positionPopup(\n  anchor: PopupAnchor,\n  popup: HTMLElement,\n  {\n    placement,\n    gap = 0,\n    crossOffset = 0,\n    padding = POPUP_VIEWPORT_PADDING,\n  }: PositionPopupOptions,\n): Promise<void> {\n  // The popup is in the top layer, which no ancestor clips: only the\n  // viewport bounds it, not the scroll containers it is rendered inside.\n  const boundary = popup.ownerDocument.documentElement;\n  // Measure the natural size: a cap from an earlier, shorter side would\n  // otherwise steer the flip.\n  popup.style.removeProperty('max-height');\n  popup.style.removeProperty(POPUP_AVAILABLE_WIDTH);\n  const {\n    x,\n    y,\n    placement: used,\n  } = await computePosition(anchor, popup, {\n    strategy: 'fixed',\n    placement,\n    middleware: [\n      {\n        name: 'offset',\n        fn: ({ x: ox, y: oy, placement: current }) => {\n          const vertical =\n            current.startsWith('top') || current.startsWith('bottom');\n          const sign =\n            current.startsWith('top') || current.startsWith('left') ? -1 : 1;\n          // An end alignment (after a flip) shifts the other way, so the\n          // popup's last row meets the anchor as its first row would.\n          const cross = current.endsWith('-end') ? -crossOffset : crossOffset;\n          return vertical\n            ? { x: ox + cross, y: oy + sign * gap }\n            : { x: ox + sign * gap, y: oy + cross };\n        },\n      },\n      flip({ fallbackStrategy: 'bestFit', padding, boundary }),\n      shift({ padding, crossAxis: true, boundary }),\n      size({\n        padding,\n        boundary,\n        apply({ availableHeight, availableWidth }) {\n          popup.style.maxHeight = `${Math.max(0, availableHeight)}px`;\n          // The popup's own CSS caps its width by this and its own limit.\n          popup.style.setProperty(\n            POPUP_AVAILABLE_WIDTH,\n            `${Math.max(0, availableWidth)}px`,\n          );\n        },\n      }),\n    ],\n  });\n  popup.style.left = `${x}px`;\n  popup.style.top = `${y}px`;\n  popup.setAttribute('data-placement', used);\n}\n\n/**\n * Keep a shown popup positioned while its anchor or any scroll ancestor\n * moves, the viewport resizes, or either element changes size. Returns the\n * function that stops following.\n */\nexport function followAnchor(\n  anchor: PopupAnchor,\n  popup: HTMLElement,\n  place: () => void,\n): () => void {\n  return autoUpdate(anchor, popup, place);\n}\n\n/** Phone-width viewports place a submenu above or below its parent menu. */\nexport const PHONE_SUBMENU_QUERY = '(max-width: 480px)';\n\nconst PHONE_INSET = 8;\nconst PHONE_GAP = 4;\n\nexport interface Box {\n  readonly left: number;\n  readonly top: number;\n  readonly right: number;\n  readonly bottom: number;\n}\n\n/**\n * Place a phone-width submenu beside its parent menu in the block axis, so\n * its rows never cover the parent's: below the parent menu when it fits (or\n * when below has more room), otherwise above.\n */\nexport function phoneSubmenuPosition(\n  parent: Box,\n  submenu: { width: number; height: number },\n  viewport: { width: number; height: number },\n  rtl: boolean,\n) {\n  const width = Math.min(submenu.width, viewport.width - 2 * PHONE_INSET);\n  const height = submenu.height;\n  const below = Math.max(\n    0,\n    viewport.height - parent.bottom - PHONE_GAP - PHONE_INSET,\n  );\n  const above = Math.max(0, parent.top - PHONE_GAP - PHONE_INSET);\n  const useBelow = height <= below || (height > above && below >= above);\n  const availableHeight = useBelow ? below : above;\n  const left = rtl ? parent.right - width : parent.left;\n  return {\n    left: Math.max(\n      PHONE_INSET,\n      Math.min(left, viewport.width - PHONE_INSET - width),\n    ),\n    top: useBelow\n      ? parent.bottom + PHONE_GAP\n      : parent.top - PHONE_GAP - Math.min(height, availableHeight),\n    maxHeight: availableHeight,\n    maxWidth: viewport.width - 2 * PHONE_INSET,\n    placement: useBelow ? ('bottom-start' as const) : ('top-start' as const),\n  };\n}\n"]}

package/dist/chunk-TAHR457X.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/surfaces/surface-scaffold/surface-scaffold.tsx"],"names":[],"mappings":"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","file":"chunk-TAHR457X.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from './internal/dialog-surface-controller.js';\n\nexport type DialogSurfaceSize = 'small' | 'medium' | 'large';\n/**\n * How the dialog is presented: `modal` (default) centered on the screen,\n * `side-sheet` against the inline end, `fullscreen`, or `bottom-sheet`\n * attached to the bottom edge (square bottom corners, safe-area and\n * virtual-keyboard clearance, optionally user-resizable).\n */\nexport type DialogSurfacePresentation =\n  'modal' | 'side-sheet' | 'fullscreen' | 'bottom-sheet';\n/**\n * How a bottom sheet appears or leaves: `slide` (default) moves the panel in\n * from, or out to, the bottom edge; `standard` keeps the dialog's\n * scale-and-fade. Both honor `prefers-reduced-motion`.\n */\nexport type DialogSurfaceSheetMotion = 'slide' | 'standard';\nexport type SurfaceInset = 'none' | 'compact' | 'comfortable';\nexport type DialogSurfaceMaxHeight = CssLength | 'viewport';\n/** A definite modal height: a length or the full viewport, minus both gutters. */\nexport type DialogSurfaceHeight = CssLength | 'viewport';\n/**\n * How the dialog body lays out its children: `flow` (default) scrolls ordinary\n * content in the body; `fill` gives one child the body's whole height and\n * lets it own scrolling (a SplitView, a Pane, an editor); `fill-last` stacks\n * the leading children at their natural height and gives the last child the\n * remaining height to own its scrolling (a heading and notices above a\n * scrolling transcript).\n */\nexport type DialogSurfaceBodyLayout = 'flow' | 'fill' | 'fill-last';\n/**\n * Where the dialog footer sits: `docked` (default) below the body, or\n * `floating` over the body's block end, inset from the panel's inline and\n * block-end edges on a transparent background (a chat composer).\n */\nexport type DialogSurfaceFooterPresentation = 'docked' | 'floating';\n/**\n * Where the dialog header sits: `docked` (default) above the body, or\n * `floating` over the body's block-start edge on the translucent chrome\n * material, so content scrolls visibly beneath the title bar.\n */\nexport type DialogSurfaceHeaderPresentation = 'docked' | 'floating';\n\n/**\n * Application `data-*` identity on the DialogSurface root, such as\n * `data-key`; the surface's own configuration attributes stay protected.\n */\nexport type DialogSurfaceRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst DIALOG_SURFACE_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-presentation',\n  'data-preferred-width',\n  'data-body-inset',\n  'data-footer-inset',\n  'data-viewport-gutter',\n  'data-max-height',\n  'data-height',\n  'data-body-layout',\n  'data-footer-presentation',\n  'data-header-presentation',\n  'data-min-height',\n  'data-resizable',\n  'data-enter-motion',\n  'data-exit-motion',\n  'data-light-dismiss',\n]);\n\n/**\n * The dialog's accessible name: its `label` text (also the default title), or\n * the id of an element that names it, such as a `heading` ToolbarText.\n */\nexport type DialogSurfaceName =\n  { label: string; labelledBy?: never } | { label?: never; labelledBy: string };\n\nexport type DialogSurfaceProps = DialogSurfaceName & DialogSurfaceOptions;\n\nexport interface DialogSurfaceOptions {\n  /** The dialog's id, for `openDialog(document.getElementById(id))`. */\n  id?: string;\n  /** The body content. */\n  children: KerfUiContent;\n  /**\n   * Header title content in place of the `label` text, such as an xl\n   * `ToolbarText` with a description. The dialog keeps its `label` (or\n   * `labelledBy`) name.\n   */\n  heading?: KerfUiContent;\n  /** Controls before the close button in the header. */\n  headerActions?: KerfUiContent;\n  /** The footer, below the body (or floating over it); usually its buttons. */\n  footer?: KerfUiContent;\n  /**\n   * Render no header: no title and no close button. The content then owns its\n   * heading and a way to close (an element with `data-dialog-close`).\n   */\n  withoutHeader?: boolean;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** The close button's accessible name (default `Close`). */\n  closeLabel?: string;\n  size?: DialogSurfaceSize;\n  presentation?: DialogSurfacePresentation;\n  /** Modal preferred width. Takes precedence over size, within the viewport cap. */\n  preferredWidth?: CssLength;\n  bodyInset?: SurfaceInset;\n  footerInset?: SurfaceInset;\n  /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */\n  viewportGutter?: CssLength;\n  /**\n   * Modal height cap, bounded by the dynamic viewport minus both gutters. On a\n   * bottom sheet, the cap (and the resize ceiling), bounded by the dynamic\n   * viewport minus the top safe area and one gutter.\n   */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /**\n   * Modal definite height, bounded the same way, so a filling child has a\n   * height to fill. Takes precedence over `maxHeight`. On a bottom sheet, the\n   * height it opens at (the visible height above the safe area or keyboard).\n   */\n  height?: DialogSurfaceHeight;\n  /**\n   * A resizable bottom sheet's resize floor (default 160px), the visible\n   * height above the safe area or keyboard.\n   */\n  minHeight?: CssLength;\n  /**\n   * Let the person resize a bottom sheet by its top grabber (drag, or the\n   * arrow, Page Up/Down, Home and End keys) between `minHeight` and the\n   * sheet's cap. Needs the `/register` entry; each opening starts at `height`\n   * (or the content height). Ignored by other presentations.\n   */\n  resizable?: boolean;\n  /** How a bottom sheet appears (default `slide` up from the bottom edge). */\n  enterMotion?: DialogSurfaceSheetMotion;\n  /** How a bottom sheet is dismissed (default `slide` down off the bottom edge). */\n  exitMotion?: DialogSurfaceSheetMotion;\n  /**\n   * Body layout (default `flow`); `fill` lets one child own the body and\n   * `fill-last` stacks fixed rows above one filling last child.\n   */\n  bodyLayout?: DialogSurfaceBodyLayout;\n  /**\n   * Header placement (default `docked`); `floating` lays the dialog's header\n   * (its title and close control) over the body's block-start edge on the\n   * translucent chrome material (`--kui-chrome-material-raised`, opaque under\n   * `prefers-reduced-transparency`, increased contrast, forced colors, or\n   * without `backdrop-filter`). The `/register` entry measures the header;\n   * the body reserves that height before its own inset, so its first content\n   * rests below the title bar. A `fill`/`fill-last` child that is the body's\n   * only child and opts into block-start `scrollClearance` (a `List` or\n   * `Pane`) takes the clearance inside its own scroll area instead, published\n   * as `--kui-scroll-clearance-block-start`, so its content scrolls visibly\n   * beneath the header. Unmeasured (without the register), the header stays\n   * docked. Keep header text in the normal text color: quiet text can fall\n   * below AA over the content passing beneath it.\n   */\n  headerPresentation?: DialogSurfaceHeaderPresentation;\n  /**\n   * Footer placement (default `docked`); `floating` lays the footer over the\n   * body's block end. The body reserves the footer's measured height so its\n   * last content is never hidden beneath it. A `fill`/`fill-last` child that\n   * opts into block-end `scrollClearance` (a `List` or `Pane`) takes that\n   * clearance inside its own scroll area instead, published as\n   * `--kui-scroll-clearance-block-end`, so its content scrolls visibly beneath\n   * the transparent footer.\n   */\n  footerPresentation?: DialogSurfaceFooterPresentation;\n  /**\n   * A floating footer's clearance from the panel's inline and block-end edges\n   * (default the 16px container inset). Choose a phone value such as\n   * `remify(8)` from `deviceClass()`; the scaffold adds no breakpoint.\n   */\n  footerOffset?: CssLength;\n  /**\n   * Safe `data-*` identity on the root. Give sibling dialogs distinct\n   * `data-key`s so a re-render morphs each surface into itself instead of\n   * reusing one dialog's element for another (structurally identical roots\n   * are otherwise matched by position).\n   */\n  rootAttributes?: DialogSurfaceRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A modal dialog: a native `<dialog>` with Kerf's header, body, and footer\n * chrome, sized and presented by its props. Render it closed, then open it\n * with `openDialog()` and close it with `closeDialog()`, the close button, an\n * element with `data-dialog-close`, Escape, or (with `lightDismiss`) a press\n * on the backdrop. Import `@kerfjs/ui/surface-scaffold/register` for the\n * floating header and footer measurement, the bottom sheet's keyboard\n * clearance and grabber, and re-render resilience while open.\n */\nexport function DialogSurface({\n  id,\n  label,\n  labelledBy,\n  heading,\n  headerActions,\n  footer,\n  withoutHeader = false,\n  lightDismiss = false,\n  closeLabel = 'Close',\n  children,\n  size = 'medium',\n  presentation = 'modal',\n  preferredWidth,\n  bodyInset = 'compact',\n  footerInset = 'comfortable',\n  viewportGutter,\n  maxHeight,\n  height,\n  minHeight,\n  resizable = false,\n  enterMotion = 'slide',\n  exitMotion = 'slide',\n  bodyLayout = 'flow',\n  headerPresentation = 'docked',\n  footerPresentation = 'docked',\n  footerOffset,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: DialogSurfaceProps) {\n  const style = [\n    preferredWidth === undefined\n      ? ''\n      : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,\n    viewportGutter === undefined\n      ? ''\n      : `--_kui-dialog-surface-gutter:${viewportGutter}`,\n    maxHeight === undefined || maxHeight === 'viewport'\n      ? ''\n      : `--_kui-dialog-surface-max-height:${maxHeight}`,\n    height === undefined || height === 'viewport'\n      ? ''\n      : `--_kui-dialog-surface-height:${height}`,\n    footerOffset === undefined\n      ? ''\n      : `--_kui-dialog-surface-footer-offset:${footerOffset}`,\n    minHeight === undefined\n      ? ''\n      : `--_kui-dialog-surface-min-height:${minHeight}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <dialog\n      {...filterDataAttributes(rootAttributes, DIALOG_SURFACE_PROTECTED)}\n      id={id}\n      class={`kui-dialog-surface ${className}`.trim()}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      tabindex={-1}\n      data-light-dismiss={lightDismiss ? '' : undefined}\n      data-component=\"dialog-surface\"\n      data-size={size}\n      data-presentation={presentation}\n      data-preferred-width={preferredWidth === undefined ? undefined : ''}\n      data-body-inset={bodyInset}\n      data-footer-inset={footerInset}\n      data-viewport-gutter={viewportGutter === undefined ? undefined : ''}\n      data-max-height={maxHeight === undefined ? undefined : ''}\n      data-height={height === undefined ? undefined : ''}\n      data-body-layout={bodyLayout === 'flow' ? undefined : bodyLayout}\n      data-header-presentation={\n        headerPresentation === 'floating' ? 'floating' : undefined\n      }\n      data-footer-presentation={\n        footerPresentation === 'floating' ? 'floating' : undefined\n      }\n      data-min-height={minHeight === undefined ? undefined : ''}\n      data-resizable={resizable ? '' : undefined}\n      data-enter-motion={enterMotion === 'slide' ? undefined : enterMotion}\n      data-exit-motion={exitMotion === 'slide' ? undefined : exitMotion}\n      style={style || undefined}\n      slot={slot}\n    >\n      {withoutHeader ? null : (\n        <header class=\"kui-dialog-surface__header\">\n          {heading === undefined ? (\n            <h2 class=\"kui-dialog-surface__title\">{label}</h2>\n          ) : (\n            <div class=\"kui-dialog-surface__title\">{heading}</div>\n          )}\n          <div class=\"kui-dialog-surface__header-actions\">\n            {headerActions}\n            <button\n              type=\"button\"\n              class=\"kui-dialog-surface__close\"\n              aria-label={closeLabel}\n              data-dialog-close=\"\"\n            >\n              <LucideIcon icon={X} name=\"x\" size=\"l\" />\n            </button>\n          </div>\n        </header>\n      )}\n      {presentation === 'bottom-sheet' && resizable ? (\n        <div\n          class=\"kui-dialog-surface__sheet-handle\"\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          aria-label=\"Resize sheet\"\n          tabindex={0}\n        />\n      ) : null}\n      <div class=\"kui-dialog-surface__body\">{children}</div>\n      {footer === undefined ? null : (\n        <footer class=\"kui-dialog-surface__footer\">{footer}</footer>\n      )}\n      {/* Where kerfjs/overlay hosts a popover or tooltip opened inside the\n          modal dialog, so it stays interactive above the inert page. */}\n      <div data-kerf-overlay-host data-morph-skip style=\"display:contents\" />\n    </dialog>\n  );\n}\n\n/** Where a PopoverDialogSurface appears: the top layer, or in flow. */\nexport type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';\n\n/** Application `data-*` metadata on the surface root. */\nexport type PopoverDialogSurfaceDataAttributes = Readonly<\n  Record<`data-${string}`, string>\n>;\n\ntype PopoverDialogSurfaceName =\n  { label: string; labelledBy?: never } | { label?: never; labelledBy: string };\n\nexport type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {\n  /** The root id: what an opening control's `popovertarget` names. */\n  id?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as a title `ToolbarText`'s `descriptionId`; rendered as\n   * `aria-describedby` on the `role=\"dialog\"` root.\n   */\n  describedBy?: string;\n  children: KerfUiContent;\n  /**\n   * `overlay` (default) is a native `popover=\"auto\"` in the top layer:\n   * non-modal, light dismiss (Escape or a press outside), nothing inert.\n   * `embedded` renders the same surface in flow for a catalog or inline use.\n   */\n  presentation?: PopoverDialogSurfacePresentation;\n  /** Preferred width preset: 400px, 560px (default), or 800px. */\n  size?: DialogSurfaceSize;\n  /** Preferred width; takes precedence over `size`, within the viewport cap. */\n  preferredWidth?: CssLength;\n  /** Definite height, bounded by the dynamic viewport minus both gutters. */\n  height?: DialogSurfaceHeight;\n  /** Height cap, bounded the same way, for a surface that sizes to content. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Edge clearance on each side of the viewport (default 16px). */\n  viewportGutter?: CssLength;\n  /**\n   * Body layout (default `flow`); `fill` lets one child own the surface and\n   * `fill-last` stacks fixed rows above one filling last child.\n   */\n  bodyLayout?: DialogSurfaceBodyLayout;\n  rootAttributes?: PopoverDialogSurfaceDataAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n};\n\nconst POPOVER_DIALOG_PROTECTED = new Set([\n  'data-component',\n  'data-presentation',\n  'data-size',\n  'data-height',\n  'data-max-height',\n  'data-body-layout',\n]);\n\n/**\n * A non-modal dialog surface on the native Popover API: Kerf's dialog chrome,\n * viewport-bounded size, and single-child fill without application CSS.\n * Open it with a `popovertarget` control or `showPopover()`; it light\n * dismisses and leaves the page interactive. Use `DialogSurface` when the\n * task must block the page.\n */\nexport function PopoverDialogSurface({\n  id,\n  children,\n  label,\n  labelledBy,\n  describedBy,\n  presentation = 'overlay',\n  size = 'medium',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  bodyLayout = 'flow',\n  rootAttributes = {},\n  className = '',\n  slot,\n}: PopoverDialogSurfaceProps) {\n  const style = [\n    preferredWidth === undefined\n      ? ''\n      : `--_kui-popover-dialog-surface-preferred-width:${preferredWidth}`,\n    viewportGutter === undefined\n      ? ''\n      : `--_kui-popover-dialog-surface-gutter:${viewportGutter}`,\n    height === undefined || height === 'viewport'\n      ? ''\n      : `--_kui-popover-dialog-surface-height:${height}`,\n    maxHeight === undefined || maxHeight === 'viewport'\n      ? ''\n      : `--_kui-popover-dialog-surface-max-height:${maxHeight}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <section\n      {...filterDataAttributes(rootAttributes, POPOVER_DIALOG_PROTECTED)}\n      id={id}\n      class={`kui-popover-dialog-surface ${className}`.trim()}\n      data-component=\"popover-dialog-surface\"\n      data-presentation={presentation}\n      data-size={size}\n      data-height={height === undefined ? undefined : ''}\n      data-max-height={maxHeight === undefined ? undefined : ''}\n      data-body-layout={bodyLayout === 'flow' ? undefined : bodyLayout}\n      popover={presentation === 'overlay' ? 'auto' : undefined}\n      role=\"dialog\"\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      style={style || undefined}\n      slot={slot}\n    >\n      {children}\n    </section>\n  );\n}\n\nexport type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';\n\nexport interface PopupSurfaceProps {\n  children: KerfUiContent;\n  inset?: PopupSurfaceInset;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */\nexport function PopupSurface({\n  children,\n  inset = 'standard',\n  className = '',\n  slot,\n}: PopupSurfaceProps) {\n  return (\n    <span\n      class={`kui-popup-surface ${className}`.trim()}\n      data-component=\"popup-surface\"\n      data-inset={inset}\n      slot={slot}\n    >\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/chunk-UTCAOOXU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/actions/button/button.tsx"],"names":[],"mappings":"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","file":"chunk-UTCAOOXU.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { Badge, type BadgeTone } from '../../feedback/badge/badge.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\n\n/** The color family: `neutral` (default), `brand` for the main action, `danger` for a destructive one. */\nexport type ButtonTone = 'neutral' | 'brand' | 'danger';\n\n/**\n * How loudly it asks: `primary` (default) fills the button, `secondary`\n * outlines it, and `plain` shows only its text until hovered.\n */\nexport type ButtonEmphasis = 'primary' | 'secondary' | 'plain';\n\n/** `default` is the 44px control height; `compact` is 33px with smaller text. */\nexport type ButtonSize = 'default' | 'compact';\n\n/** Corner shape: the shared `rounded` control radius (default) or a full `pill`. */\nexport type ButtonShape = 'rounded' | 'pill';\n/** What a form button does: `button` (default), `submit`, or `reset`. */\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\nconst BUTTON_PROTECTED = new Set([\n  'data-component',\n  'data-action',\n  'data-tone',\n  'data-emphasis',\n  'data-size',\n  'data-loading',\n  'data-icon-only',\n  'data-shape',\n]);\n\n/** Application `data-*` metadata; the Button's own markers stay protected. */\nexport type ButtonRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\n/** A Button's visible label: text or rendered content, never empty. */\nexport type ButtonLabel =\n  string | Exclude<KerfUiContent, null | undefined | boolean>;\n\n/**\n * A labeled button (its label names it; `ariaLabel` only when the label is\n * not enough), or an icon-only square named by `ariaLabel`.\n */\nexport type ButtonContent =\n  | {\n      /** The label. */\n      children: ButtonLabel;\n      /** A leading icon, such as a `LucideIcon`; it is decorative. */\n      icon?: KerfUiContent;\n      ariaLabel?: string;\n    }\n  | {\n      children?: undefined;\n      /** The icon of an icon-only square button. */\n      icon: KerfUiContent;\n      /** The accessible name an icon-only button needs. */\n      ariaLabel: string;\n    };\n\nexport type ButtonProps = ButtonContent & ButtonOptions;\n\nexport interface ButtonOptions {\n  tone?: ButtonTone;\n  emphasis?: ButtonEmphasis;\n  size?: ButtonSize;\n  /** Corner shape (default `rounded`). */\n  shape?: ButtonShape;\n  /**\n   * Make it a toggle: `aria-pressed` reports the state, and a pressed look is\n   * drawn on top of the tone and emphasis. The application owns the state and\n   * flips it in its `action` handler. A link (`href`) cannot be a toggle.\n   */\n  pressed?: boolean;\n  /**\n   * Busy: a spinner replaces the label (which still names it) and the button\n   * reports `aria-busy`. Presses still reach it; the application decides\n   * what a press does while it is busy.\n   */\n  loading?: boolean;\n  disabled?: boolean;\n  /** A form button's behavior (default `button`, which never submits). */\n  type?: ButtonType;\n  name?: string;\n  value?: string;\n  /** The id of the form it belongs to, when it sits outside that form. */\n  form?: string;\n  /** Render a link with button styling instead of a `<button>`. */\n  href?: string;\n  /** Where a link opens. */\n  target?: '_self' | '_blank' | '_parent' | '_top';\n  /** Delegated `data-action` the application handles. */\n  action?: string;\n  /**\n   * A count, short text, or `true` for a text-free dot over the button's\n   * top-trailing corner, such as how many items a filter hides. It stays out\n   * of the accessible name unless `badgeLabel` names it.\n   */\n  badge?: number | string | true;\n  /** Words for the badge (\"3 hidden\"), added to the button's name. */\n  badgeLabel?: string;\n  /** The badge's tone (default `danger`). */\n  badgeTone?: BadgeTone;\n  /**\n   * Native hover text that says more than the name, such as \"More Actions\n   * for report.pdf\". An icon-only Button already gets a help tag with its\n   * `ariaLabel` (with `@kerfjs/ui/help-tags-register`); a `title` replaces\n   * that tag.\n   */\n  title?: string;\n  id?: string;\n  className?: string;\n  /** Safe `data-*` metadata (a `data-key`, `data-dialog-close`). */\n  rootAttributes?: ButtonRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A standalone action button: a native `<button>` (or a link with `href`)\n * in one of three tones and three emphases, at the 44px control height or\n * compact, with a label or as an icon-only square, rounded or pill-shaped,\n * and optionally a `pressed` toggle. Inside a\n * `ToolbarControlGroup`, use a plain `<button>`, which the group styles; use\n * Button for a dialog footer, a form, or a standalone action beside other\n * content.\n */\nexport function Button({\n  children,\n  tone = 'neutral',\n  emphasis = 'primary',\n  size = 'default',\n  shape = 'rounded',\n  pressed,\n  icon,\n  loading = false,\n  disabled = false,\n  type = 'button',\n  name,\n  value,\n  form,\n  href,\n  target,\n  action,\n  badge,\n  badgeLabel,\n  badgeTone = 'danger',\n  ariaLabel,\n  title,\n  id,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ButtonProps) {\n  const shared = {\n    ...filterDataAttributes(rootAttributes, BUTTON_PROTECTED),\n    id,\n    class: `kui-button ${className}`.trim(),\n    'data-component': 'button',\n    'data-tone': tone,\n    'data-emphasis': emphasis,\n    'data-size': size,\n    'data-loading': loading ? '' : undefined,\n    'data-icon-only': children === undefined ? '' : undefined,\n    'data-shape': shape === 'pill' ? 'pill' : undefined,\n    'data-action': action,\n    'aria-label':\n      ariaLabel && badge !== undefined && badgeLabel\n        ? `${ariaLabel}, ${badgeLabel}`\n        : ariaLabel,\n    title,\n    'aria-busy': loading ? 'true' : undefined,\n    slot,\n  };\n  const content = (\n    <>\n      {icon === undefined ? null : (\n        <span class=\"kui-button__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      )}\n      {children === undefined ? null : (\n        <span class=\"kui-button__label\">{children}</span>\n      )}\n      {badge === undefined || badge === '' ? null : badge === true ? (\n        <Badge\n          tone={badgeTone}\n          size=\"dot\"\n          placement=\"corner\"\n          {...(ariaLabel || !badgeLabel\n            ? { ariaHidden: true as const }\n            : { label: badgeLabel })}\n        />\n      ) : (\n        <Badge\n          tone={badgeTone}\n          appearance=\"solid\"\n          size=\"compact\"\n          placement=\"corner\"\n          {...(ariaLabel || !badgeLabel\n            ? { ariaHidden: true as const }\n            : { label: badgeLabel })}\n        >\n          {String(badge)}\n        </Badge>\n      )}\n      {loading ? (\n        <span class=\"kui-button__spinner\" aria-hidden=\"true\">\n          <LoadingSpinner />\n        </span>\n      ) : null}\n    </>\n  );\n  // A disabled link has no destination and is announced as disabled.\n  if (href !== undefined) {\n    if (pressed !== undefined)\n      throw new TypeError('A link Button cannot be a toggle (pressed).');\n    return (\n      <a\n        {...shared}\n        href={disabled ? undefined : href}\n        target={disabled ? undefined : target}\n        role={disabled ? 'link' : undefined}\n        aria-disabled={disabled ? 'true' : undefined}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <button\n      {...shared}\n      type={type}\n      name={name}\n      value={value}\n      form={form}\n      disabled={disabled}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n    >\n      {content}\n    </button>\n  );\n}\n"]}

package/dist/chunk-WJKHLOP5.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/actions/split-button/split-button.tsx"],"names":[],"mappings":";;;;;;AAWA,IAAM,oBAAA,uBAA2B,GAAA,CAAI;AAAA,EACnC,gBAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAC,CAAA;AAwDM,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AAAA,EACA,eAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA,GAAkB,KAAA;AAAA,EAClB,YAAA,GAAe,MAAA;AAAA,EACf,eAAA;AAAA,EACA,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,eAAA,GAAkB,KAAA;AAAA,EAClB,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,OAAA,GAAU,IAAA,mBAAO,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA,GAAK,IAAA;AAC5C,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,oBAAoB,CAAA;AAAA,MAC7D,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,IAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,2BAAA;AAAA,YACN,aAAA,EAAa,MAAA;AAAA,YACb,YAAA,EAAY,eAAA;AAAA,YACZ,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,YAC3B,KAAA;AAAA,YACA,QAAA;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,OAAA,wBACE,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAAyB,aAAA,EAAY,QAC9C,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,SAC/C;AAAA,wBACA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,2BAAA;AAAA,YACN,aAAA,EAAa,aAAA;AAAA,YACb,YAAA,EAAY,YAAA;AAAA,YACZ,eAAA,EAAe,YAAA;AAAA,YACf,eAAA,EAAe,kBAAkB,MAAA,GAAS,OAAA;AAAA,YAC1C,eAAA,EAAe,eAAA;AAAA,YACf,KAAA,EAAO,YAAA;AAAA,YACP,QAAA,EAAU,eAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,WAAA,EAAa,MAAK,cAAA,EAAe;AAAA;AAAA;AACrD;AAAA;AAAA,GACF;AAEJ","file":"chunk-WJKHLOP5.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronDown } from 'lucide';\n\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/** The loud fill the whole split button paints. */\nexport type SplitButtonTone =\n  'brand' | 'neutral' | 'success' | 'warning' | 'danger';\n\nconst splitButtonProtected = new Set([\n  'data-component',\n  'data-tone',\n  'data-fill',\n  'data-busy',\n]);\n\ntype SplitButtonRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-tone'?: never;\n    'data-fill'?: never;\n    'data-busy'?: never;\n  }\n>;\n\nexport interface SplitButtonProps {\n  /** Visible primary label. */\n  label: string;\n  /** Delegated `data-action` of the primary half. */\n  action: string;\n  /** Optional decorative leading icon of the primary half. */\n  icon?: SafeHtml;\n  /** Primary accessible name when it should say more than `label`. */\n  accessibleLabel?: string;\n  /** Accessible name (and tooltip) of the options trigger. */\n  optionsLabel: string;\n  /** Delegated `data-action` of the options trigger, which opens the app's menu. */\n  optionsAction: string;\n  /** Whether the options menu is open, exposed as `aria-expanded`. */\n  optionsExpanded?: boolean;\n  /** What the options trigger opens, exposed as `aria-haspopup`; defaults to `menu`. */\n  optionsPopup?: 'menu' | 'dialog' | 'listbox';\n  /** Element id the options trigger controls, exposed as `aria-controls`. */\n  optionsControls?: string;\n  /** The loud fill; defaults to `brand`. Switch it (for example to `neutral`) while running. */\n  tone?: SplitButtonTone;\n  /** Span the full width of the parent instead of sizing to the label. */\n  fill?: boolean;\n  /** Show work in progress: a spinner replaces the icon and the primary is `aria-busy`. */\n  busy?: boolean;\n  /** Disable the primary half. */\n  disabled?: boolean;\n  /** Disable the options trigger. */\n  optionsDisabled?: boolean;\n  /** Native tooltip of the primary half, for example why it is disabled. */\n  title?: string;\n  className?: string;\n  /** Safe `data-*` metadata; SplitButton-owned markers stay protected. */\n  rootAttributes?: SplitButtonRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A primary action with an attached options trigger on one loud, semantic\n * fill (a \"Drive\" button with a provider menu). Both halves are native\n * buttons, so `aria-expanded` and the accessible names reach assistive\n * technology directly; the application opens its own menu from the options\n * action and owns the running state.\n */\nexport function SplitButton({\n  label,\n  action,\n  icon,\n  accessibleLabel,\n  optionsLabel,\n  optionsAction,\n  optionsExpanded = false,\n  optionsPopup = 'menu',\n  optionsControls,\n  tone = 'brand',\n  fill = false,\n  busy = false,\n  disabled = false,\n  optionsDisabled = false,\n  title,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: SplitButtonProps) {\n  const leading = busy ? <LoadingSpinner /> : icon;\n  return (\n    <div\n      {...filterDataAttributes(rootAttributes, splitButtonProtected)}\n      class={`kui-split-button ${className}`.trim()}\n      data-component=\"split-button\"\n      data-tone={tone}\n      data-fill={fill ? 'true' : undefined}\n      data-busy={busy ? 'true' : undefined}\n      role=\"group\"\n      slot={slot}\n    >\n      <button\n        type=\"button\"\n        class=\"kui-split-button__primary\"\n        data-action={action}\n        aria-label={accessibleLabel}\n        aria-busy={busy ? 'true' : undefined}\n        title={title}\n        disabled={disabled}\n      >\n        {leading && (\n          <span class=\"kui-split-button__icon\" aria-hidden=\"true\">\n            {leading}\n          </span>\n        )}\n        <span class=\"kui-split-button__label\">{label}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"kui-split-button__options\"\n        data-action={optionsAction}\n        aria-label={optionsLabel}\n        aria-haspopup={optionsPopup}\n        aria-expanded={optionsExpanded ? 'true' : 'false'}\n        aria-controls={optionsControls}\n        title={optionsLabel}\n        disabled={optionsDisabled}\n      >\n        <LucideIcon icon={ChevronDown} name=\"chevron-down\" />\n      </button>\n    </div>\n  );\n}\n"]}