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

package/dist/{chunk-ZYU5WRC3.js.map → chunk-3GLYIIFR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/collections/list-item/list-item.tsx"],"names":[],"mappings":";;;;;;;AAqBA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,qBAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAC,CAAA;AA4ED,SAAS,eAAA,CAAgB;AAAA,EACvB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,KAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAU+C;AAC7C,EAAA,MAAM,QAAA,GAAW,IAAA,EAAM,IAAA,GAAO,EAAA,GAAK,EAAA;AACnC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,qBAAA;AAAA,QACN,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,IAAA,EAAM,KAAA;AAAA,QAEtC,QAAA,EAAA,WAAA,mBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAK,IAAA;AAAA,YACL,KAAA,EAAO,OAAO,QAAQ,CAAA;AAAA,YACtB,MAAA,EAAQ,OAAO,QAAQ;AAAA;AAAA,SACzB,GAEA;AAAA;AAAA,KAEJ;AAAA,oBAEF,IAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EACV,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,8BAAA,EACT,QAAA,EAAA,WAAA,uBACE,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,CAAC,GAAG,CAAA,GACtB,SAAA,GACF,cAAA,CAAe,KAAK,IAEpB,KAAA,EAEJ,CAAA;AAAA,MACC,WAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,4BAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,EAAE,CAAA,EAAG,IAAK,WAAA,EAC/C;AAAA,KAAA,EAEJ,CAAA;AAAA,IAAA,CACE,QAAQ,MAAA,IAAU,QAAA,qBAClB,IAAA,CAAC,MAAA,EAAA,EAAK,OAAM,yBAAA,EAIT,QAAA,EAAA;AAAA,MAAA,IAAA,wBAAS,cAAA,EAAA,EAAe,CAAA;AAAA,MACxB,MAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,GAAG,CAAA,EAAG,IAAK,MAAA,EAChD,CAAA;AAAA,MAED,QAAA,KAAa,8BAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,GAAG,GAAG,CAAA,GAAK,QAAA;AAAA,KAAA,EAC7D;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,UAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,kBAAA,GAAqB,YAAA;AAAA,EACrB,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,mBAAA,GAAsB,oBAAA;AAAA,IAC1B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,IAAA,GAAO,IAAA,GAAO,wBAAA,CAAyB,QAAA,EAAU,WAAW,CAAA,GAAI,IAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,mBAAA;AAAA,MACJ,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,KAAA,EAAO,cAAc,MAAA,GAAY,KAAA;AAAA,MACjC,UAAU,QAAA,IAAY,WAAA;AAAA,MACtB,QAAA,EAAU,cAAc,EAAA,GAAK,QAAA;AAAA,MAC7B,gBAAA,EAAe,WAAA;AAAA,MACf,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,MACvC,cAAA,EAAc,MAAA;AAAA,MACd,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,sBAAA,EAAsB,MAAA,CAAO,OAAA,CAAQ,WAAW,CAAC,CAAA;AAAA,MACjD,gBAAA,EAAgB,YAAY,MAAA,GAAS,MAAA;AAAA,MACrC,iBAAA,EAAiB,YAAY,kBAAA,GAAqB,MAAA;AAAA,MAClD,kBAAgB,IAAA,EAAM,IAAA;AAAA,MACtB,uBAAqB,IAAA,EAAM,IAAA;AAAA,MAC3B,cAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,mBAAA,EAAmB,WAAW,MAAA,GAAS,MAAA;AAAA,MACvC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,SAAA,EAAW,eAAA,CAAgB,SAAA,EAAW,WAAW,CAAA;AAAA,MACjD,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,oBAAA,EAAoB,YAAA;AAAA,MACpB,YAAA,EAAY,eAAA;AAAA,MACZ,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,OAAO,OAAO,CAAA;AAAA,MAChE,WAAA,EAAW,WAAA,IAAe,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC1C,IAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB;AAAA,QACf,KAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AAAA;AAAA,GACH;AAEJ;AAGO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,UAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,eAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,kBAAA,GAAqB,YAAA;AAAA,EACrB,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,mBAAA,GAAsB,oBAAA;AAAA,IAC1B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,IAAA,GAAO,IAAA,GAAO,wBAAA,CAAyB,QAAA,EAAU,WAAW,CAAA,GAAI,IAAA;AACtE,EAAA,MAAM,WAAW,QAAA,IAAY,WAAA;AAC7B,EAAA,MAAM,SAAA,GACJ,oBACC,QAAA,IAAY,OAAO,UAAU,QAAA,GAC1B,CAAA,EAAG,KAAK,CAAA,mBAAA,CAAA,GACR,MAAA,CAAA;AACN,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,mBAAA;AAAA,MACJ,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,IAAA,EAAM,WAAW,MAAA,GAAY,IAAA;AAAA,MAC7B,MAAA,EAAQ,QAAA,IAAY,CAAC,QAAA,GAAW,MAAA,GAAY,QAAA;AAAA,MAC5C,GAAA,EAAK,QAAA,IAAY,CAAC,QAAA,GAAW,MAAA,GAAY,qBAAA;AAAA,MACzC,KAAA,EAAO,cAAc,MAAA,GAAY,KAAA;AAAA,MACjC,QAAA,EAAU,WAAW,EAAA,GAAK,QAAA;AAAA,MAC1B,gBAAA,EAAe,gBAAA;AAAA,MACf,cAAA,EAAc,MAAA;AAAA,MACd,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,sBAAA,EAAsB,MAAA,CAAO,OAAA,CAAQ,WAAW,CAAC,CAAA;AAAA,MACjD,gBAAA,EAAgB,YAAY,MAAA,GAAS,MAAA;AAAA,MACrC,iBAAA,EAAiB,YAAY,kBAAA,GAAqB,MAAA;AAAA,MAClD,kBAAgB,IAAA,EAAM,IAAA;AAAA,MACtB,uBAAqB,IAAA,EAAM,IAAA;AAAA,MAC3B,cAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,mBAAA,EAAmB,WAAW,MAAA,GAAS,MAAA;AAAA,MACvC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,SAAA,EAAW,eAAA,CAAgB,SAAA,EAAW,WAAW,CAAA;AAAA,MACjD,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,oBAAA,EAAoB,YAAA;AAAA,MACpB,YAAA,EAAY,SAAA;AAAA,MACZ,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,WAAA,EAAW,WAAA,IAAe,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC1C,IAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB;AAAA,QACf,KAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AAAA;AAAA,GACH;AAEJ","file":"chunk-ZYU5WRC3.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  type ListIconTile,\n  type ListIconTilePresentation,\n  listIconTilePresentation,\n} from '../../../shared/content/list-icon-tile.js';\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { nativeDraggable } from '../../../shared/dom/draggable.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type {\n  ListIconTile,\n  ListIconTileColor,\n  ListIconTileTone,\n} from '../../../shared/content/list-icon-tile.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-has-description',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-state',\n  'data-kui-disabled',\n  'data-icon-align',\n  'data-icon-tile',\n  'data-icon-tile-tone',\n  'data-dragging',\n  'data-drop-position',\n]);\n\ntype ListItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-has-description'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-state'?: never;\n    'data-kui-disabled'?: never;\n    'data-icon-align'?: never;\n    'data-icon-tile'?: never;\n    'data-icon-tile-tone'?: never;\n    'data-dragging'?: never;\n    'data-drop-position'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  /** App-owned supporting text rendered in the component's stable label stack. */\n  description?: string | SafeHtml;\n  icon?: SafeHtml;\n  /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */\n  iconTile?: ListIconTile;\n  /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */\n  trailing?: KerfUiContent;\n  /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */\n  status?: string | SafeHtml;\n  /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */\n  busy?: boolean;\n  density?: 'standard' | 'compact' | 'spacious';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  /** Alignment of an icon beside a wrapped label. Defaults to its first line. */\n  multilineIconAlign?: 'first-line' | 'center';\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  /** Native HTML drag source (`draggable=\"true\"`); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */\n  draggable?: boolean;\n  /** Dim this row as one of the rows being dragged. */\n  dragging?: boolean;\n  /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */\n  dropPosition?: 'before' | 'after';\n  rootAttributes?: ListItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport interface ListItemLinkProps extends Omit<\n  ListItemProps,\n  'action' | 'pressed'\n> {\n  /** Native destination for this navigation row. */\n  href: string;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  action?: never;\n  pressed?: never;\n}\n\nfunction listItemContent({\n  label,\n  description,\n  icon,\n  tile,\n  trailing,\n  status,\n  busy = false,\n  multiline = false,\n  placeholder = false,\n}: Pick<\n  ListItemProps,\n  | 'label'\n  | 'description'\n  | 'icon'\n  | 'trailing'\n  | 'status'\n  | 'busy'\n  | 'multiline'\n  | 'placeholder'\n> & { tile: ListIconTilePresentation | null }) {\n  const tileSize = tile?.tile ? 32 : 18;\n  return (\n    <>\n      {icon && (\n        <span\n          class=\"kui-list-item__icon\"\n          style={placeholder ? undefined : tile?.style}\n        >\n          {placeholder ? (\n            <Skeleton\n              block\n              width={remify(tileSize)}\n              height={remify(tileSize)}\n            />\n          ) : (\n            icon\n          )}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        <span class=\"kui-list-item__primary-label\">\n          {placeholder ? (\n            <Skeleton width={em(9)} />\n          ) : multiline ? (\n            withWordBreaks(label)\n          ) : (\n            label\n          )}\n        </span>\n        {description && (\n          <span class=\"kui-list-item__description\">\n            {placeholder ? <Skeleton width={em(11)} /> : description}\n          </span>\n        )}\n      </span>\n      {(busy || status || trailing) && (\n        <span class=\"kui-list-item__trailing\">\n          {/* The busy spinner is component-owned chrome drawn from a known\n              prop, so a placeholder keeps it live. Status text and\n              author-supplied trailing content are values: skeletons. */}\n          {busy && <LoadingSpinner />}\n          {status && (\n            <span class=\"kui-list-item__status\">\n              {placeholder ? <Skeleton width={em(3.5)} /> : status}\n            </span>\n          )}\n          {trailing && (placeholder ? <Skeleton width={em(1.5)} /> : trailing)}\n        </span>\n      )}\n    </>\n  );\n}\n\nexport function ListItem({\n  label,\n  description,\n  icon,\n  iconTile,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  rootAttributes = {},\n  slot,\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const tile = icon ? listIconTilePresentation(iconTile, 'list-item') : null;\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      title={placeholder ? undefined : title}\n      disabled={disabled || placeholder}\n      tabindex={placeholder ? -1 : tabIndex}\n      data-component=\"list-item\"\n      data-action={placeholder ? undefined : action}\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-icon-tile={tile?.tile}\n      data-icon-tile-tone={tile?.tone}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        tile,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </button>\n  );\n}\n\n/** A navigation row with native link activation and ListItem geometry. */\nexport function ListItemLink({\n  href,\n  external = false,\n  label,\n  description,\n  icon,\n  iconTile,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  itemId,\n  className = '',\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  rootAttributes = {},\n  slot,\n}: ListItemLinkProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const tile = icon ? listIconTilePresentation(iconTile, 'list-item') : null;\n  const inactive = disabled || placeholder;\n  const linkLabel =\n    accessibleLabel ??\n    (external && typeof label === 'string'\n      ? `${label} (opens in new tab)`\n      : undefined);\n  return (\n    <a\n      {...extensionAttributes}\n      class={`kui-list-item ${className}`.trim()}\n      href={inactive ? undefined : href}\n      target={inactive || !external ? undefined : '_blank'}\n      rel={inactive || !external ? undefined : 'noopener noreferrer'}\n      title={placeholder ? undefined : title}\n      tabindex={inactive ? -1 : tabIndex}\n      data-component=\"list-item-link\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-icon-tile={tile?.tile}\n      data-icon-tile-tone={tile?.tone}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-label={linkLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-disabled={inactive ? 'true' : undefined}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        tile,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </a>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/collections/list-item/list-item.tsx"],"names":[],"mappings":";;;;;;;AAqBA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,qBAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAC,CAAA;AA4ED,SAAS,eAAA,CAAgB;AAAA,EACvB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,KAAA;AAAA,EACZ,WAAA,GAAc;AAChB,CAAA,EAU+C;AAC7C,EAAA,MAAM,QAAA,GAAW,IAAA,EAAM,IAAA,GAAO,EAAA,GAAK,EAAA;AACnC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,IAAA,oBACC,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAM,qBAAA;AAAA,QACN,KAAA,EAAO,WAAA,GAAc,MAAA,GAAY,IAAA,EAAM,KAAA;AAAA,QAEtC,QAAA,EAAA,WAAA,mBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAK,IAAA;AAAA,YACL,KAAA,EAAO,OAAO,QAAQ,CAAA;AAAA,YACtB,MAAA,EAAQ,OAAO,QAAQ;AAAA;AAAA,SACzB,GAEA;AAAA;AAAA,KAEJ;AAAA,oBAEF,IAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EACV,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,8BAAA,EACT,QAAA,EAAA,WAAA,uBACE,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,CAAC,GAAG,CAAA,GACtB,SAAA,GACF,cAAA,CAAe,KAAK,IAEpB,KAAA,EAEJ,CAAA;AAAA,MACC,WAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,4BAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,EAAE,CAAA,EAAG,IAAK,WAAA,EAC/C;AAAA,KAAA,EAEJ,CAAA;AAAA,IAAA,CACE,QAAQ,MAAA,IAAU,QAAA,qBAClB,IAAA,CAAC,MAAA,EAAA,EAAK,OAAM,yBAAA,EAIT,QAAA,EAAA;AAAA,MAAA,IAAA,wBAAS,cAAA,EAAA,EAAe,CAAA;AAAA,MACxB,MAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EACT,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,GAAG,CAAA,EAAG,IAAK,MAAA,EAChD,CAAA;AAAA,MAED,QAAA,KAAa,8BAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,GAAG,GAAG,CAAA,GAAK,QAAA;AAAA,KAAA,EAC7D;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAEO,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,UAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,eAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,kBAAA,GAAqB,YAAA;AAAA,EACrB,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,mBAAA,GAAsB,oBAAA;AAAA,IAC1B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,IAAA,GAAO,IAAA,GAAO,wBAAA,CAAyB,QAAA,EAAU,WAAW,CAAA,GAAI,IAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,mBAAA;AAAA,MACJ,IAAA,EAAK,QAAA;AAAA,MACL,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,KAAA,EAAO,cAAc,MAAA,GAAY,KAAA;AAAA,MACjC,UAAU,QAAA,IAAY,WAAA;AAAA,MACtB,QAAA,EAAU,cAAc,EAAA,GAAK,QAAA;AAAA,MAC7B,gBAAA,EAAe,WAAA;AAAA,MACf,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,MACvC,cAAA,EAAc,MAAA;AAAA,MACd,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,sBAAA,EAAsB,MAAA,CAAO,OAAA,CAAQ,WAAW,CAAC,CAAA;AAAA,MACjD,gBAAA,EAAgB,YAAY,MAAA,GAAS,MAAA;AAAA,MACrC,iBAAA,EAAiB,YAAY,kBAAA,GAAqB,MAAA;AAAA,MAClD,kBAAgB,IAAA,EAAM,IAAA;AAAA,MACtB,uBAAqB,IAAA,EAAM,IAAA;AAAA,MAC3B,cAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,mBAAA,EAAmB,WAAW,MAAA,GAAS,MAAA;AAAA,MACvC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,SAAA,EAAW,eAAA,CAAgB,SAAA,EAAW,WAAW,CAAA;AAAA,MACjD,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,oBAAA,EAAoB,YAAA;AAAA,MACpB,YAAA,EAAY,eAAA;AAAA,MACZ,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,OAAO,OAAO,CAAA;AAAA,MAChE,WAAA,EAAW,WAAA,IAAe,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC1C,IAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB;AAAA,QACf,KAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AAAA;AAAA,GACH;AAEJ;AAGO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,UAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,eAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,kBAAA,GAAqB,YAAA;AAAA,EACrB,KAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,YAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,mBAAA,GAAsB,oBAAA;AAAA,IAC1B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,IAAA,GAAO,IAAA,GAAO,wBAAA,CAAyB,QAAA,EAAU,WAAW,CAAA,GAAI,IAAA;AACtE,EAAA,MAAM,WAAW,QAAA,IAAY,WAAA;AAC7B,EAAA,MAAM,SAAA,GACJ,oBACC,QAAA,IAAY,OAAO,UAAU,QAAA,GAC1B,CAAA,EAAG,KAAK,CAAA,mBAAA,CAAA,GACR,MAAA,CAAA;AACN,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,mBAAA;AAAA,MACJ,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,IAAA,EAAM,WAAW,MAAA,GAAY,IAAA;AAAA,MAC7B,MAAA,EAAQ,QAAA,IAAY,CAAC,QAAA,GAAW,MAAA,GAAY,QAAA;AAAA,MAC5C,GAAA,EAAK,QAAA,IAAY,CAAC,QAAA,GAAW,MAAA,GAAY,qBAAA;AAAA,MACzC,KAAA,EAAO,cAAc,MAAA,GAAY,KAAA;AAAA,MACjC,QAAA,EAAU,WAAW,EAAA,GAAK,QAAA;AAAA,MAC1B,gBAAA,EAAe,gBAAA;AAAA,MACf,cAAA,EAAc,MAAA;AAAA,MACd,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MACnC,sBAAA,EAAsB,MAAA,CAAO,OAAA,CAAQ,WAAW,CAAC,CAAA;AAAA,MACjD,gBAAA,EAAgB,YAAY,MAAA,GAAS,MAAA;AAAA,MACrC,iBAAA,EAAiB,YAAY,kBAAA,GAAqB,MAAA;AAAA,MAClD,kBAAgB,IAAA,EAAM,IAAA;AAAA,MACtB,uBAAqB,IAAA,EAAM,IAAA;AAAA,MAC3B,cAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,mBAAA,EAAmB,WAAW,MAAA,GAAS,MAAA;AAAA,MACvC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,SAAA,EAAW,eAAA,CAAgB,SAAA,EAAW,WAAW,CAAA;AAAA,MACjD,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,oBAAA,EAAoB,YAAA;AAAA,MACpB,YAAA,EAAY,SAAA;AAAA,MACZ,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,WAAA,EAAW,WAAA,IAAe,IAAA,GAAO,MAAA,GAAS,MAAA;AAAA,MAC1C,IAAA;AAAA,MAEC,QAAA,EAAA,eAAA,CAAgB;AAAA,QACf,KAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACD;AAAA;AAAA,GACH;AAEJ","file":"chunk-3GLYIIFR.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n  type ListIconTile,\n  type ListIconTilePresentation,\n  listIconTilePresentation,\n} from '../../../shared/content/list-icon-tile.js';\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { nativeDraggable } from '../../../shared/dom/draggable.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type {\n  ListIconTile,\n  ListIconTileColor,\n  ListIconTileTone,\n} from '../../../shared/content/list-icon-tile.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n  'data-component',\n  'data-action',\n  'data-item-id',\n  'data-has-icon',\n  'data-has-description',\n  'data-multiline',\n  'data-density',\n  'data-divider',\n  'data-busy',\n  'data-state',\n  'data-kui-disabled',\n  'data-icon-align',\n  'data-icon-tile',\n  'data-icon-tile-tone',\n  'data-dragging',\n  'data-drop-position',\n]);\n\ntype ListItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-has-icon'?: never;\n    'data-has-description'?: never;\n    'data-multiline'?: never;\n    'data-density'?: never;\n    'data-divider'?: never;\n    'data-busy'?: never;\n    'data-state'?: never;\n    'data-kui-disabled'?: never;\n    'data-icon-align'?: never;\n    'data-icon-tile'?: never;\n    'data-icon-tile-tone'?: never;\n    'data-dragging'?: never;\n    'data-drop-position'?: never;\n  }\n>;\n\nexport interface ListItemProps {\n  label: string | SafeHtml;\n  /** App-owned supporting text rendered in the component's stable label stack. */\n  description?: string | SafeHtml;\n  icon?: SafeHtml;\n  /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */\n  iconTile?: ListIconTile;\n  /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */\n  trailing?: KerfUiContent;\n  /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */\n  status?: string | SafeHtml;\n  /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */\n  busy?: boolean;\n  density?: 'standard' | 'compact' | 'spacious';\n  divider?: 'none' | 'before' | 'after' | 'both';\n  selected?: boolean;\n  action: string;\n  itemId?: string;\n  className?: string;\n  pressed?: boolean;\n  accessibleLabel?: string;\n  title?: string;\n  multiline?: boolean;\n  /** Alignment of an icon beside a wrapped label. Defaults to its first line. */\n  multilineIconAlign?: 'first-line' | 'center';\n  state?: string;\n  disabled?: boolean;\n  tabIndex?: number;\n  /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */\n  placeholder?: boolean;\n  /** Native HTML drag source (`draggable=\"true\"`); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */\n  draggable?: boolean;\n  /** Dim this row as one of the rows being dragged. */\n  dragging?: boolean;\n  /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */\n  dropPosition?: 'before' | 'after';\n  rootAttributes?: ListItemRootAttributes;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport interface ListItemLinkProps extends Omit<\n  ListItemProps,\n  'action' | 'pressed'\n> {\n  /** Native destination for this navigation row. */\n  href: string;\n  /** Open in a new tab with a safe rel and announce that behavior. */\n  external?: boolean;\n  action?: never;\n  pressed?: never;\n}\n\nfunction listItemContent({\n  label,\n  description,\n  icon,\n  tile,\n  trailing,\n  status,\n  busy = false,\n  multiline = false,\n  placeholder = false,\n}: Pick<\n  ListItemProps,\n  | 'label'\n  | 'description'\n  | 'icon'\n  | 'trailing'\n  | 'status'\n  | 'busy'\n  | 'multiline'\n  | 'placeholder'\n> & { tile: ListIconTilePresentation | null }) {\n  const tileSize = tile?.tile ? 32 : 18;\n  return (\n    <>\n      {icon && (\n        <span\n          class=\"kui-list-item__icon\"\n          style={placeholder ? undefined : tile?.style}\n        >\n          {placeholder ? (\n            <Skeleton\n              block\n              width={remify(tileSize)}\n              height={remify(tileSize)}\n            />\n          ) : (\n            icon\n          )}\n        </span>\n      )}\n      <span class=\"kui-list-item__label\">\n        <span class=\"kui-list-item__primary-label\">\n          {placeholder ? (\n            <Skeleton width={em(9)} />\n          ) : multiline ? (\n            withWordBreaks(label)\n          ) : (\n            label\n          )}\n        </span>\n        {description && (\n          <span class=\"kui-list-item__description\">\n            {placeholder ? <Skeleton width={em(11)} /> : description}\n          </span>\n        )}\n      </span>\n      {(busy || status || trailing) && (\n        <span class=\"kui-list-item__trailing\">\n          {/* The busy spinner is component-owned chrome drawn from a known\n              prop, so a placeholder keeps it live. Status text and\n              author-supplied trailing content are values: skeletons. */}\n          {busy && <LoadingSpinner />}\n          {status && (\n            <span class=\"kui-list-item__status\">\n              {placeholder ? <Skeleton width={em(3.5)} /> : status}\n            </span>\n          )}\n          {trailing && (placeholder ? <Skeleton width={em(1.5)} /> : trailing)}\n        </span>\n      )}\n    </>\n  );\n}\n\nexport function ListItem({\n  label,\n  description,\n  icon,\n  iconTile,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  action,\n  itemId,\n  className = '',\n  pressed,\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  rootAttributes = {},\n  slot,\n}: ListItemProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const tile = icon ? listIconTilePresentation(iconTile, 'list-item') : null;\n  return (\n    <button\n      {...extensionAttributes}\n      type=\"button\"\n      class={`kui-list-item ${className}`.trim()}\n      title={placeholder ? undefined : title}\n      disabled={disabled || placeholder}\n      tabindex={placeholder ? -1 : tabIndex}\n      data-component=\"list-item\"\n      data-action={placeholder ? undefined : action}\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-icon-tile={tile?.tile}\n      data-icon-tile-tone={tile?.tone}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-label={accessibleLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-pressed={pressed === undefined ? undefined : String(pressed)}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        tile,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </button>\n  );\n}\n\n/** A navigation row with native link activation and ListItem geometry. */\nexport function ListItemLink({\n  href,\n  external = false,\n  label,\n  description,\n  icon,\n  iconTile,\n  trailing,\n  status,\n  busy = false,\n  density = 'standard',\n  divider = 'none',\n  selected = false,\n  itemId,\n  className = '',\n  accessibleLabel,\n  title,\n  multiline = false,\n  multilineIconAlign = 'first-line',\n  state,\n  disabled = false,\n  tabIndex,\n  placeholder = false,\n  draggable,\n  dragging = false,\n  dropPosition,\n  rootAttributes = {},\n  slot,\n}: ListItemLinkProps) {\n  const extensionAttributes = filterDataAttributes(\n    rootAttributes,\n    PROTECTED_ROOT_DATA_ATTRIBUTES,\n  );\n  const tile = icon ? listIconTilePresentation(iconTile, 'list-item') : null;\n  const inactive = disabled || placeholder;\n  const linkLabel =\n    accessibleLabel ??\n    (external && typeof label === 'string'\n      ? `${label} (opens in new tab)`\n      : undefined);\n  return (\n    <a\n      {...extensionAttributes}\n      class={`kui-list-item ${className}`.trim()}\n      href={inactive ? undefined : href}\n      target={inactive || !external ? undefined : '_blank'}\n      rel={inactive || !external ? undefined : 'noopener noreferrer'}\n      title={placeholder ? undefined : title}\n      tabindex={inactive ? -1 : tabIndex}\n      data-component=\"list-item-link\"\n      data-item-id={itemId}\n      data-has-icon={String(Boolean(icon))}\n      data-has-description={String(Boolean(description))}\n      data-multiline={multiline ? 'true' : undefined}\n      data-icon-align={multiline ? multilineIconAlign : undefined}\n      data-icon-tile={tile?.tile}\n      data-icon-tile-tone={tile?.tone}\n      data-density={density}\n      data-divider={divider}\n      data-busy={busy ? 'true' : undefined}\n      data-state={state}\n      data-kui-disabled={disabled ? 'true' : undefined}\n      data-placeholder={placeholder ? 'true' : undefined}\n      draggable={nativeDraggable(draggable, placeholder)}\n      data-dragging={dragging ? 'true' : undefined}\n      data-drop-position={dropPosition}\n      aria-label={linkLabel}\n      aria-current={selected ? 'page' : undefined}\n      aria-disabled={inactive ? 'true' : undefined}\n      aria-busy={placeholder || busy ? 'true' : undefined}\n      slot={slot}\n    >\n      {listItemContent({\n        label,\n        description,\n        icon,\n        tile,\n        trailing,\n        status,\n        busy,\n        multiline,\n        placeholder,\n      })}\n    </a>\n  );\n}\n"]}

package/dist/{chunk-5NQF35VO.js → chunk-4RECPEHI.js}

@@ -1,4 +1,4 @@
-import { createSheetHandle, wireSheetHandle } from './chunk-QTSMHH5J.js';
+import { createSheetHandle, wireSheetHandle } from './chunk-QPTJ5DOO.js';
 
 // src/components/surfaces/surface-scaffold/wiring/wire-overlay-sheets.ts
 var OVERLAY_SHEET_RESIZABLE_CLASS = "kui-overlay-sheet-resizable";
@@ -64,4 +64,4 @@ function wireSheet(wrapper) {
 
 export { wireOverlaySheets };
 
-//# sourceMappingURL=chunk-5NQF35VO.js.map
+//# sourceMappingURL=chunk-4RECPEHI.js.map

package/dist/{chunk-5NQF35VO.js.map → chunk-4RECPEHI.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/surfaces/surface-scaffold/wiring/wire-overlay-sheets.ts"],"names":[],"mappings":"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","file":"chunk-5NQF35VO.js","sourcesContent":["import {\n  createSheetHandle,\n  wireSheetHandle,\n} from '../internal/sheet-handle.js';\n\n/**\n * The class that opts a core `kerfjs/overlay` bottom sheet into resizing:\n * pass it with the default wrapper class, as\n * `className: 'kerf-overlay kui-overlay-sheet-resizable'`.\n */\nexport const OVERLAY_SHEET_RESIZABLE_CLASS = 'kui-overlay-sheet-resizable';\n\n/** The grabber's class, styled by `@kerfjs/ui/overlay-sheet.css`. */\nexport const OVERLAY_SHEET_HANDLE_CLASS = 'kui-overlay-sheet-handle';\n\n/** The wrapper variable holding a resized sheet's visible height. */\nexport const OVERLAY_SHEET_HEIGHT_PROPERTY = '--_kui-overlay-sheet-height';\n\nconst SHEET_SELECTOR = `.kerf-overlay.${OVERLAY_SHEET_RESIZABLE_CLASS}[data-presentation=\"bottom-sheet\"]`;\n\n/**\n * Give every resizable core `kerfjs/overlay` bottom sheet opened in\n * `container` the resize grabber a `resizable` `DialogSurface` sheet has: a\n * `role=\"separator\"` at the sheet's top edge that resizes its visible height\n * by drag or keyboard (arrows, Page Up/Down, Home, End), between\n * `--kui-overlay-sheet-min-height` (160px) and the sheet's cap below the top\n * safe area. A sheet opts in with the `kui-overlay-sheet-resizable` class\n * (`overlay()` and the promise dialogs alike) and opens at its content\n * height each time.\n *\n * kerf appends each overlay to its `container` (`document.body` by\n * default), so call this once per container you open sheets in. The grabber\n * is `data-morph-preserve` and returns to the top of the sheet after each\n * re-render of the overlay's content. Requires\n * `@kerfjs/ui/overlay-sheet.css`. Returns a disposer that removes every\n * grabber and stops watching.\n */\nexport function wireOverlaySheets(\n  container: ParentNode = document.body,\n): () => void {\n  const wired = new Map<HTMLElement, () => void>();\n  const sync = (): void => {\n    for (const child of container.children) {\n      if (\n        child instanceof HTMLElement &&\n        child.matches(SHEET_SELECTOR) &&\n        !wired.has(child)\n      )\n        wired.set(child, wireSheet(child));\n    }\n    for (const [wrapper, dispose] of wired) {\n      if (wrapper.parentNode === container) continue;\n      dispose();\n      wired.delete(wrapper);\n    }\n  };\n  const observer = new MutationObserver(sync);\n  observer.observe(container, { childList: true });\n  sync();\n  return () => {\n    observer.disconnect();\n    for (const dispose of wired.values()) dispose();\n    wired.clear();\n  };\n}\n\n/**\n * The sheet is the native `<dialog>` itself, or the plain wrapper's content\n * root (the wrapper is the backdrop).\n */\nfunction sheetOf(wrapper: HTMLElement): HTMLElement | null {\n  if (wrapper.localName === 'dialog') return wrapper;\n  const sheet = wrapper.firstElementChild;\n  return sheet instanceof HTMLElement ? sheet : null;\n}\n\nfunction wireSheet(wrapper: HTMLElement): () => void {\n  const handle = createSheetHandle({\n    class: OVERLAY_SHEET_HANDLE_CLASS,\n    'data-morph-preserve': '',\n  });\n  // A re-render may move the preserved grabber behind the new content, or\n  // replace the content root that held it: keep it first in the sheet, so it\n  // is the sheet's first tab stop and sticks to its top edge.\n  const place = (): void => {\n    const sheet = sheetOf(wrapper);\n    if (sheet !== null && sheet.firstChild !== handle)\n      sheet.insertBefore(handle, sheet.firstChild);\n  };\n  place();\n  const observer = new MutationObserver(place);\n  observer.observe(wrapper, { childList: true, subtree: true });\n  const unwire = wireSheetHandle(handle, {\n    // Input only reaches a connected grabber, which sits in the sheet.\n    get panel() {\n      return sheetOf(wrapper)!;\n    },\n    host: wrapper,\n    property: OVERLAY_SHEET_HEIGHT_PROPERTY,\n    enabled: () => !wrapper.inert,\n  });\n  return () => {\n    observer.disconnect();\n    unwire();\n    handle.remove();\n    wrapper.style.removeProperty(OVERLAY_SHEET_HEIGHT_PROPERTY);\n  };\n}\n"]}
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/wiring/wire-overlay-sheets.ts"],"names":[],"mappings":"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","file":"chunk-4RECPEHI.js","sourcesContent":["import {\n  createSheetHandle,\n  wireSheetHandle,\n} from '../internal/sheet-handle.js';\n\n/**\n * The class that opts a core `kerfjs/overlay` bottom sheet into resizing:\n * pass it with the default wrapper class, as\n * `className: 'kerf-overlay kui-overlay-sheet-resizable'`.\n */\nexport const OVERLAY_SHEET_RESIZABLE_CLASS = 'kui-overlay-sheet-resizable';\n\n/** The grabber's class, styled by `@kerfjs/ui/overlay-sheet.css`. */\nexport const OVERLAY_SHEET_HANDLE_CLASS = 'kui-overlay-sheet-handle';\n\n/** The wrapper variable holding a resized sheet's visible height. */\nexport const OVERLAY_SHEET_HEIGHT_PROPERTY = '--_kui-overlay-sheet-height';\n\nconst SHEET_SELECTOR = `.kerf-overlay.${OVERLAY_SHEET_RESIZABLE_CLASS}[data-presentation=\"bottom-sheet\"]`;\n\n/**\n * Give every resizable core `kerfjs/overlay` bottom sheet opened in\n * `container` the resize grabber a `resizable` `DialogSurface` sheet has: a\n * `role=\"separator\"` at the sheet's top edge that resizes its visible height\n * by drag or keyboard (arrows, Page Up/Down, Home, End), between\n * `--kui-overlay-sheet-min-height` (160px) and the sheet's cap below the top\n * safe area. A sheet opts in with the `kui-overlay-sheet-resizable` class\n * (`overlay()` and the promise dialogs alike) and opens at its content\n * height each time.\n *\n * kerf appends each overlay to its `container` (`document.body` by\n * default), so call this once per container you open sheets in. The grabber\n * is `data-morph-preserve` and returns to the top of the sheet after each\n * re-render of the overlay's content. Requires\n * `@kerfjs/ui/overlay-sheet.css`. Returns a disposer that removes every\n * grabber and stops watching.\n */\nexport function wireOverlaySheets(\n  container: ParentNode = document.body,\n): () => void {\n  const wired = new Map<HTMLElement, () => void>();\n  const sync = (): void => {\n    for (const child of container.children) {\n      if (\n        child instanceof HTMLElement &&\n        child.matches(SHEET_SELECTOR) &&\n        !wired.has(child)\n      )\n        wired.set(child, wireSheet(child));\n    }\n    for (const [wrapper, dispose] of wired) {\n      if (wrapper.parentNode === container) continue;\n      dispose();\n      wired.delete(wrapper);\n    }\n  };\n  const observer = new MutationObserver(sync);\n  observer.observe(container, { childList: true });\n  sync();\n  return () => {\n    observer.disconnect();\n    for (const dispose of wired.values()) dispose();\n    wired.clear();\n  };\n}\n\n/**\n * The sheet is the native `<dialog>` itself, or the plain wrapper's content\n * root (the wrapper is the backdrop).\n */\nfunction sheetOf(wrapper: HTMLElement): HTMLElement | null {\n  if (wrapper.localName === 'dialog') return wrapper;\n  const sheet = wrapper.firstElementChild;\n  return sheet instanceof HTMLElement ? sheet : null;\n}\n\nfunction wireSheet(wrapper: HTMLElement): () => void {\n  const handle = createSheetHandle({\n    class: OVERLAY_SHEET_HANDLE_CLASS,\n    'data-morph-preserve': '',\n  });\n  // A re-render may move the preserved grabber behind the new content, or\n  // replace the content root that held it: keep it first in the sheet, so it\n  // is the sheet's first tab stop and sticks to its top edge.\n  const place = (): void => {\n    const sheet = sheetOf(wrapper);\n    if (sheet !== null && sheet.firstChild !== handle)\n      sheet.insertBefore(handle, sheet.firstChild);\n  };\n  place();\n  const observer = new MutationObserver(place);\n  observer.observe(wrapper, { childList: true, subtree: true });\n  const unwire = wireSheetHandle(handle, {\n    // Input only reaches a connected grabber, which sits in the sheet.\n    get panel() {\n      return sheetOf(wrapper)!;\n    },\n    host: wrapper,\n    property: OVERLAY_SHEET_HEIGHT_PROPERTY,\n    enabled: () => !wrapper.inert,\n  });\n  return () => {\n    observer.disconnect();\n    unwire();\n    handle.remove();\n    wrapper.style.removeProperty(OVERLAY_SHEET_HEIGHT_PROPERTY);\n  };\n}\n"]}

package/dist/{chunk-7IUEBNCO.js → chunk-5USKCWGL.js}

@@ -16,13 +16,15 @@ var contentItemProtectedAttributes = /* @__PURE__ */ new Set([
   "data-component",
   "data-appearance",
   "data-outlined",
-  "data-bubble"
+  "data-bubble",
+  "data-grid-row"
 ]);
 var interactiveProtectedAttributes = /* @__PURE__ */ new Set([
   "data-component",
   "data-appearance",
   "data-outlined",
   "data-bubble",
+  "data-grid-row",
   "data-action",
   "data-item-id",
   "data-interactive",
@@ -43,6 +45,7 @@ function ContentItem({
   focusTarget = false,
   outlined = false,
   tabIndex,
+  gridRow = false,
   interactive = false,
   action,
   itemId,
@@ -80,6 +83,7 @@ function ContentItem({
   } : {};
   let role = ariaLabel ? "region" : void 0;
   if (interactive) role = roleForSelectionMode(selectionMode);
+  else if (gridRow) role = "row";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -91,6 +95,7 @@ function ContentItem({
       "data-appearance": appearance,
       "data-outlined": outlined ? "true" : void 0,
       "data-bubble": bubble,
+      "data-grid-row": !interactive && gridRow ? "true" : void 0,
       role,
       "aria-label": ariaLabel,
       "aria-selected": interactive && (selectionMode === "single" || selectionMode === "multiple") ? String(selected) : void 0,
@@ -98,11 +103,11 @@ function ContentItem({
       "aria-disabled": interactive && disabled ? "true" : void 0,
       tabindex: interactive ? disabled ? "-1" : "0" : tabIndex ?? (focusTarget ? "-1" : void 0),
       slot,
-      children: interactive && selectionMode === "multiple" ? /* @__PURE__ */ jsx("div", { role: "gridcell", children }) : children
+      children: interactive && selectionMode === "multiple" || !interactive && gridRow ? /* @__PURE__ */ jsx("div", { role: "gridcell", children }) : children
     }
   );
 }
 
 export { ContentItem };
 
-//# sourceMappingURL=chunk-7IUEBNCO.js.map
+//# sourceMappingURL=chunk-5USKCWGL.js.map

package/dist/chunk-5USKCWGL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/content-item/content-item.tsx"],"names":[],"mappings":"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","file":"chunk-5USKCWGL.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\n/**\n * Base surface treatment, semantic status colors, or `brand-loud`: the solid\n * brand fill with its on-loud foreground (a transcript's own messages).\n */\nexport type ContentItemAppearance =\n  'transparent' | 'surface' | 'brand-loud' | SemanticTone;\n\n/**\n * A chat-bubble layout for transcripts: the item fits its content up to 80%\n * of the row and sits at the `start` (other participants) or `end` (the\n * person's own messages) of the line.\n */\nexport type ContentItemBubble = 'start' | 'end';\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode =\n  'none' | 'single' | 'multiple' | 'toggle';\n\nfunction roleForSelectionMode(\n  mode: ContentItemSelectionMode,\n): 'option' | 'row' | 'button' {\n  switch (mode) {\n    case 'single':\n      return 'option';\n    case 'multiple':\n      return 'row';\n    case 'none':\n    case 'toggle':\n      return 'button';\n  }\n}\n\nconst contentItemProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n  'data-bubble',\n  'data-grid-row',\n]);\nconst interactiveProtectedAttributes = new Set([\n  'data-component',\n  'data-appearance',\n  'data-outlined',\n  'data-bubble',\n  'data-grid-row',\n  'data-action',\n  'data-item-id',\n  'data-interactive',\n  'data-selected',\n  'data-disabled',\n  'data-selection-mode',\n  'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-appearance'?: never;\n    'data-outlined'?: never;\n    'data-bubble'?: never;\n    'data-grid-row'?: never;\n  }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined> & {\n    'data-component'?: never;\n    'data-appearance'?: never;\n    'data-outlined'?: never;\n    'data-bubble'?: never;\n    'data-grid-row'?: never;\n    'data-action'?: never;\n    'data-item-id'?: never;\n    'data-interactive'?: never;\n    'data-selected'?: never;\n    'data-disabled'?: never;\n    'data-selection-mode'?: never;\n    'data-kui-pressed'?: never;\n  }\n>;\n\ninterface ContentItemBaseProps {\n  /**\n   * Coordinated background, border, and foreground colors. `transparent`\n   * preserves the surrounding surface; `surface` paints the base surface;\n   * semantic values match StateBanner. Defaults to `transparent`.\n   */\n  appearance?: ContentItemAppearance;\n  /** Item content; a plain string is allowed for bare copy. */\n  children?: KerfUiContent | string;\n  /**\n   * `framed` paints the standard neutral border in the 1px the item always\n   * reserves, so framing never changes geometry. Frame only an item that\n   * marks a real distinction. Defaults to `none` (transparent border).\n   */\n  frame?: ContentItemFrame;\n  /** Remove block padding and block borders while retaining inline geometry. */\n  flush?: boolean;\n  /** Corner shape. Defaults to `rounded`. */\n  shape?: ContentItemShape;\n  /**\n   * Lay the item out as a chat bubble: content width up to 80% of the row,\n   * at the `start` or `end` of the line. Pair `end` with `brand-loud` for the\n   * person's own messages. Omit for an ordinary full-width item.\n   */\n  bubble?: ContentItemBubble;\n  /** Native hover tooltip. */\n  title?: string;\n  /**\n   * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n   * ordinary item, which stays a non-landmark grouping.\n   */\n  ariaLabel?: string;\n  /**\n   * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n   * stop), for example the preferred initial focus of a NavStack view when\n   * combined with `data-nav-focus` in `rootAttributes`.\n   */\n  focusTarget?: boolean;\n  /** Keep the standard focus outline visible, such as for a drop target. */\n  outlined?: boolean;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n  (\n    | {\n        interactive?: false;\n        action?: never;\n        itemId?: never;\n        selectionMode?: never;\n        selected?: never;\n        disabled?: never;\n        /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */\n        tabIndex?: 0 | -1;\n        /**\n         * A non-selectable row of a multi-select `List` or `Grid`: renders\n         * `role=\"row\"` around a `gridcell`, with no `aria-selected` and no\n         * Tab stop of its own, for content between selectable rows (an\n         * activity group, a \"messages skipped\" divider). Its controls stay\n         * reachable by Tab; arrow keys skip it.\n         */\n        gridRow?: boolean;\n        /** Existing static `data-*` metadata remains available. */\n        rootAttributes?: ContentItemRootAttributes;\n      }\n    | {\n        /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n        interactive: true;\n        /** Delegated action dispatched by pointer, Enter, or Space. */\n        action: string;\n        itemId?: string;\n        selectionMode?: ContentItemSelectionMode;\n        selected?: boolean;\n        disabled?: boolean;\n        tabIndex?: never;\n        /** An interactive item is already a row in a multi-select grid. */\n        gridRow?: never;\n        /** Safe app metadata; interaction attributes are component-owned. */\n        rootAttributes?: ContentItemInteractiveRootAttributes;\n      }\n  );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n  appearance = 'transparent',\n  children,\n  frame = 'none',\n  flush = false,\n  shape = 'rounded',\n  bubble,\n  title,\n  ariaLabel,\n  focusTarget = false,\n  outlined = false,\n  tabIndex,\n  gridRow = false,\n  interactive = false,\n  action,\n  itemId,\n  selectionMode = 'none',\n  selected = false,\n  disabled = false,\n  className = '',\n  rootAttributes = {},\n  slot,\n}: ContentItemProps) {\n  const safeRootAttributes = filterDataAttributes(\n    rootAttributes,\n    interactive\n      ? interactiveProtectedAttributes\n      : contentItemProtectedAttributes,\n  );\n  if (interactive && !action) {\n    throw new Error('Interactive ContentItem requires an action');\n  }\n  if (interactive && selected && selectionMode === 'none') {\n    throw new Error('Selected ContentItem requires a selectionMode');\n  }\n  const cls = [\n    'kui-content-item',\n    shape === 'pill' ? 'kui-content-item--pill' : '',\n    frame === 'framed' ? 'kui-content-item--framed' : '',\n    flush ? 'kui-content-item--flush' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n  const interactiveAttributes = interactive\n    ? {\n        'data-interactive': 'true',\n        'data-action': disabled ? undefined : action,\n        'data-item-id': itemId,\n        'data-selection-mode': selectionMode,\n        'data-selected':\n          selectionMode === 'none' ? undefined : String(selected),\n        'data-disabled': disabled ? 'true' : undefined,\n      }\n    : {};\n  let role: 'option' | 'row' | 'button' | 'region' | undefined = ariaLabel\n    ? 'region'\n    : undefined;\n  if (interactive) role = roleForSelectionMode(selectionMode);\n  else if (gridRow) role = 'row';\n  return (\n    <div\n      {...safeRootAttributes}\n      {...interactiveAttributes}\n      class={cls}\n      title={title}\n      data-component=\"content-item\"\n      data-appearance={appearance}\n      data-outlined={outlined ? 'true' : undefined}\n      data-bubble={bubble}\n      data-grid-row={!interactive && gridRow ? 'true' : undefined}\n      role={role}\n      aria-label={ariaLabel}\n      aria-selected={\n        interactive &&\n        (selectionMode === 'single' || selectionMode === 'multiple')\n          ? String(selected)\n          : undefined\n      }\n      aria-pressed={\n        interactive && selectionMode === 'toggle' ? String(selected) : undefined\n      }\n      aria-disabled={interactive && disabled ? 'true' : undefined}\n      tabindex={\n        interactive\n          ? disabled\n            ? '-1'\n            : '0'\n          : (tabIndex ?? (focusTarget ? '-1' : undefined))\n      }\n      slot={slot}\n    >\n      {(interactive && selectionMode === 'multiple') ||\n      (!interactive && gridRow) ? (\n        <div role=\"gridcell\">{children}</div>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"]}

package/dist/chunk-6VVIW7VB.js

@@ -0,0 +1,69 @@
+import { SearchField } from './chunk-VEME3D7K.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { Tag } from 'lucide';
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+var tagFieldActions = {
+  edit: "edit-tag-field-tag",
+  remove: "remove-tag-field-tag",
+  clear: "clear-tag-field"
+};
+function TagField({
+  id,
+  label,
+  tags,
+  name,
+  form,
+  placeholder = "Add tag\u2026",
+  morePlaceholder = "Add another\u2026",
+  hint,
+  error,
+  max,
+  required = false,
+  disabled = false,
+  icon,
+  clearLabel = "Clear Tags",
+  className = "",
+  slot
+}) {
+  if (max !== void 0 && (!Number.isInteger(max) || max < 1))
+    throw new RangeError("TagField max must be a positive integer.");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: `kui-tag-field ${className}`.trim(),
+      "data-component": "tag-field",
+      "data-tag-field-id": id,
+      "data-max": max === void 0 ? void 0 : String(max),
+      "data-invalid": error ? "" : void 0,
+      slot,
+      children: [
+        /* @__PURE__ */ jsx(
+          SearchField,
+          {
+            id,
+            label,
+            presentation: "form-field",
+            hint: error ?? hint,
+            required,
+            tokens: tags.map((tag) => ({ value: tag, label: tag })),
+            placeholder,
+            tokenPlaceholder: morePlaceholder,
+            disabled,
+            leading: icon ?? /* @__PURE__ */ jsx(LucideIcon, { icon: Tag, name: "tag" }),
+            editAction: tagFieldActions.edit,
+            removeAction: tagFieldActions.remove,
+            clearAction: tagFieldActions.clear,
+            clearLabel,
+            editorAttributes: { "data-tag-field-editor": id }
+          }
+        ),
+        name === void 0 || disabled ? null : tags.map((tag) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tag, form }))
+      ]
+    }
+  );
+}
+
+export { TagField, tagFieldActions };
+
+//# sourceMappingURL=chunk-6VVIW7VB.js.map

package/dist/chunk-6VVIW7VB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/tag-field/tag-field.tsx"],"names":[],"mappings":";;;;;AAOO,IAAM,eAAA,GAAkB;AAAA,EAC7B,IAAA,EAAM,oBAAA;AAAA,EACN,MAAA,EAAQ,sBAAA;AAAA,EACR,KAAA,EAAO;AACT;AA2CO,SAAS,QAAA,CAAS;AAAA,EACvB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,eAAA;AAAA,EACd,eAAA,GAAkB,mBAAA;AAAA,EAClB,IAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,UAAA,GAAa,YAAA;AAAA,EACb,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAkB;AAChB,EAAA,IAAI,QAAQ,MAAA,KAAc,CAAC,OAAO,SAAA,CAAU,GAAG,KAAK,GAAA,GAAM,CAAA,CAAA;AACxD,IAAA,MAAM,IAAI,WAAW,0CAA0C,CAAA;AACjE,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACzC,gBAAA,EAAe,WAAA;AAAA,MACf,mBAAA,EAAmB,EAAA;AAAA,MACnB,UAAA,EAAU,GAAA,KAAQ,MAAA,GAAY,MAAA,GAAY,OAAO,GAAG,CAAA;AAAA,MACpD,cAAA,EAAc,QAAQ,EAAA,GAAK,MAAA;AAAA,MAC3B,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,KAAA;AAAA,YACA,YAAA,EAAa,YAAA;AAAA,YACb,MAAM,KAAA,IAAS,IAAA;AAAA,YACf,QAAA;AAAA,YACA,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,MAAS,EAAE,KAAA,EAAO,GAAA,EAAK,KAAA,EAAO,GAAA,EAAI,CAAE,CAAA;AAAA,YACtD,WAAA;AAAA,YACA,gBAAA,EAAkB,eAAA;AAAA,YAClB,QAAA;AAAA,YACA,SAAS,IAAA,oBAAQ,GAAA,CAAC,cAAW,IAAA,EAAM,GAAA,EAAK,MAAK,KAAA,EAAM,CAAA;AAAA,YACnD,YAAY,eAAA,CAAgB,IAAA;AAAA,YAC5B,cAAc,eAAA,CAAgB,MAAA;AAAA,YAC9B,aAAa,eAAA,CAAgB,KAAA;AAAA,YAC7B,UAAA;AAAA,YACA,gBAAA,EAAkB,EAAE,uBAAA,EAAyB,EAAA;AAAG;AAAA,SAClD;AAAA,QACC,SAAS,MAAA,IAAa,QAAA,GACnB,IAAA,GACA,IAAA,CAAK,IAAI,CAAC,GAAA,qBACR,GAAA,CAAC,OAAA,EAAA,EAAM,MAAK,QAAA,EAAS,IAAA,EAAY,KAAA,EAAO,GAAA,EAAK,MAAY,CAC1D;AAAA;AAAA;AAAA,GACP;AAEJ","file":"chunk-6VVIW7VB.js","sourcesContent":["import { Tag } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport { SearchField } from '../search-field/search-field.js';\n\n/** The delegated actions a TagField's controls carry; `wireTagFields` handles them. */\nexport const tagFieldActions = {\n  edit: 'edit-tag-field-tag',\n  remove: 'remove-tag-field-tag',\n  clear: 'clear-tag-field',\n} as const;\n\nexport interface TagFieldProps {\n  /** The field's id: the editor's identity and the prefix of its label and hint ids. */\n  id: string;\n  /** The visible label, which also names the field. */\n  label: string;\n  /** The tags, in order. Each is submitted as its own `name` value. */\n  tags: readonly string[];\n  /** The form field name each tag submits under. */\n  name?: string;\n  /** Associate the hidden inputs with a form outside their ancestor chain. */\n  form?: string;\n  /** Placeholder while the field is empty (default `Add tag…`). */\n  placeholder?: string;\n  /** Placeholder after the last tag (default `Add another…`). */\n  morePlaceholder?: string;\n  /** Supporting text below the field, also its description. */\n  hint?: string;\n  /** An error that replaces the hint and marks the field invalid. */\n  error?: string;\n  /** The most tags it accepts; `wireTagFields` refuses more. */\n  max?: number;\n  required?: boolean;\n  disabled?: boolean;\n  /** The leading glyph (default a Lucide `tag`). */\n  icon?: KerfUiContent;\n  /** The clear button's accessible name (default `Clear Tags`). */\n  clearLabel?: string;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A form field that collects short values as removable tags: SearchField's\n * token editor in its `form-field` presentation, with each tag a chip and a\n * hidden input that submits it under `name`. Typing then Enter (or a\n * delimiter such as a comma) adds a tag; Backspace at the start removes the\n * last one; each chip's label edits it and its × removes it. The app owns\n * the tag list: wire `wireTagFields` from `@kerfjs/ui/wire-tag-fields` and\n * re-render with the list its `onChange` reports.\n */\nexport function TagField({\n  id,\n  label,\n  tags,\n  name,\n  form,\n  placeholder = 'Add tag…',\n  morePlaceholder = 'Add another…',\n  hint,\n  error,\n  max,\n  required = false,\n  disabled = false,\n  icon,\n  clearLabel = 'Clear Tags',\n  className = '',\n  slot,\n}: TagFieldProps) {\n  if (max !== undefined && (!Number.isInteger(max) || max < 1))\n    throw new RangeError('TagField max must be a positive integer.');\n  return (\n    <div\n      class={`kui-tag-field ${className}`.trim()}\n      data-component=\"tag-field\"\n      data-tag-field-id={id}\n      data-max={max === undefined ? undefined : String(max)}\n      data-invalid={error ? '' : undefined}\n      slot={slot}\n    >\n      <SearchField\n        id={id}\n        label={label}\n        presentation=\"form-field\"\n        hint={error ?? hint}\n        required={required}\n        tokens={tags.map((tag) => ({ value: tag, label: tag }))}\n        placeholder={placeholder}\n        tokenPlaceholder={morePlaceholder}\n        disabled={disabled}\n        leading={icon ?? <LucideIcon icon={Tag} name=\"tag\" />}\n        editAction={tagFieldActions.edit}\n        removeAction={tagFieldActions.remove}\n        clearAction={tagFieldActions.clear}\n        clearLabel={clearLabel}\n        editorAttributes={{ 'data-tag-field-editor': id }}\n      />\n      {name === undefined || disabled\n        ? null\n        : tags.map((tag) => (\n            <input type=\"hidden\" name={name} value={tag} form={form} />\n          ))}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-LL45C7BB.js → chunk-7K6U6FCN.js}

@@ -119,4 +119,4 @@ function TruncateMiddle({ parts: [head, tail] }) {
 
 export { FieldLabel, Text };
 
-//# sourceMappingURL=chunk-LL45C7BB.js.map
+//# sourceMappingURL=chunk-7K6U6FCN.js.map

package/dist/chunk-7K6U6FCN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/field-label/field-label.tsx","../src/components/typography/text/text.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-7K6U6FCN.js","sourcesContent":["import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nexport type FieldLabelProps = Omit<\n  KerfBaseAttrs,\n  'children' | 'class' | 'className'\n> & {\n  children: string;\n  class?: string;\n  className?: string;\n};\n\n/** Visible field heading for a read-only preview; use its id with aria-labelledby on the preview group. */\nexport function FieldLabel({\n  children,\n  class: classValue = '',\n  className = '',\n  ...attributes\n}: FieldLabelProps) {\n  const classes = ['kui-text__field-label', classValue, className]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <div {...attributes} class={classes} data-component=\"field-label\">\n      {children}\n    </div>\n  );\n}\n","import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport type { CssForegroundColor } from '../../../shared/styles/css-values.js';\n\nexport {\n  FieldLabel,\n  type FieldLabelProps,\n} from '../../forms/field-label/field-label.js';\n\nexport type TextVariant =\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\nexport type TextTone = 'default' | 'quiet' | 'danger';\n/**\n * `compact` (xs), `default` (the element's own size), `medium` (the 16px\n * body size, for a heading such as an in-list group title), `large`, or\n * `xlarge`.\n */\nexport type TextSize = 'compact' | 'default' | 'medium' | 'large' | 'xlarge';\nexport type TextFont = 'default' | 'monospace';\nexport type TextBorder = 'transparent' | 'none';\nexport type TextLineHeight = 'default' | 'tight';\nexport type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';\n/** Inline alignment of the text's lines, in logical (writing-direction) terms. */\nexport type TextAlign = 'start' | 'center' | 'end';\n/**\n * Where `wrap=\"truncate\"` places its ellipsis: `end` (default) keeps the\n * start, `start` keeps the tail (branch names, the end of an identifier), and\n * `middle` keeps both the start and a suffix (file paths).\n */\nexport type TextTruncate = 'end' | 'middle' | 'start';\n/**\n * The suffix `truncate=\"middle\"` always keeps: a number of trailing\n * characters, or `segment` for the last path segment with its separator.\n */\nexport type TextTruncateKeep = number | 'segment';\n\nexport type TextContent =\n  KerfUiContent | string | number | readonly TextContent[];\n\ntype TextCommonProps = Omit<\n  KerfBaseAttrs,\n  'children' | 'class' | 'className'\n> & {\n  /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */\n  variant?: TextVariant;\n  /** Semantic foreground treatment. Defaults to the inherited foreground. */\n  tone?: TextTone;\n  /** Foreground color; overrides tone when supplied, or inherits when omitted. */\n  color?: CssForegroundColor;\n  /** Text sizing independent of the native semantic element. */\n  size?: TextSize;\n  /** Font family independent of the native semantic element. */\n  font?: TextFont;\n  /** Transparent alignment border or no border when embedded in owner chrome. */\n  border?: TextBorder;\n  /** Add the shared control gutter outside selected physical edges. */\n  controlMargins?: Sides;\n  /** Remove the block variant's item padding and border in compact content. */\n  flush?: boolean;\n  /** Use compact leading for short dialog or metadata copy. */\n  lineHeight?: TextLineHeight;\n  /** Inline alignment of the lines (default `start`), for centered status copy. */\n  align?: TextAlign;\n  children: TextContent;\n  class?: string;\n  className?: string;\n};\n\nexport type TextProps = TextCommonProps &\n  (\n    | {\n        /** Wrap normally or break long unbroken strings. Defaults to normal. */\n        wrap?: 'normal' | 'anywhere';\n        /** Cap wrapped text to this positive number of lines. */\n        maxLines?: number;\n        truncate?: never;\n        truncateKeep?: never;\n      }\n    | {\n        /** Keep one line without an ellipsis. */\n        wrap: 'nowrap';\n        maxLines?: never;\n        truncate?: never;\n        truncateKeep?: never;\n      }\n    | {\n        /** Keep one line with an ellipsis. */\n        wrap: 'truncate';\n        maxLines?: never;\n        /**\n         * Where the ellipsis goes (default `end`). `start` and `middle` are\n         * for left-to-right identifiers and paths, and `middle` requires\n         * string or number children so it can split them.\n         */\n        truncate?: TextTruncate;\n        /**\n         * The suffix `truncate=\"middle\"` keeps (default `segment`: the last\n         * path segment, or the last 10 characters when there is no `/` or\n         * `\\\\` separator).\n         */\n        truncateKeep?: TextTruncateKeep;\n      }\n  );\n\n/** Characters a middle truncation keeps when the text has no path separator. */\nconst MIDDLE_FALLBACK_KEEP = 10;\n\n/** Split text into the shrinkable head and the always-kept tail. */\nfunction splitMiddle(text: string, keep: TextTruncateKeep): [string, string] {\n  let tailLength: number;\n  if (keep === 'segment') {\n    // Ignore one trailing separator so `src/lib/` keeps `/lib/`.\n    const searchEnd = /[/\\\\]$/.test(text) ? text.length - 1 : text.length;\n    const separator = Math.max(\n      text.lastIndexOf('/', searchEnd - 1),\n      text.lastIndexOf('\\\\', searchEnd - 1),\n    );\n    tailLength = separator > 0 ? text.length - separator : MIDDLE_FALLBACK_KEEP;\n  } else tailLength = keep;\n  if (tailLength >= text.length) return [text, ''];\n  return [text.slice(0, -tailLength), text.slice(-tailLength)];\n}\n\n/**\n * Semantic heading, paragraph, or inline text. Block variants use the standard\n * content-item padding; `span` adds no box geometry.\n * All ordinary native heading/paragraph attributes pass through to the element.\n */\nexport function Text({\n  variant: Variant = 'p',\n  tone = 'default',\n  color,\n  size = 'default',\n  font = 'default',\n  border = 'transparent',\n  flush = false,\n  controlMargins = '',\n  lineHeight = 'default',\n  align = 'start',\n  wrap = 'normal',\n  maxLines,\n  truncate,\n  truncateKeep,\n  children,\n  class: classValue = '',\n  className = '',\n  style,\n  ...attributes\n}: TextProps) {\n  if (\n    maxLines !== undefined &&\n    (!Number.isSafeInteger(maxLines) ||\n      maxLines < 1 ||\n      wrap === 'nowrap' ||\n      wrap === 'truncate')\n  )\n    throw new RangeError(\n      'Text maxLines requires a positive integer and wrapping',\n    );\n  const position = truncate ?? 'end';\n  if (\n    (truncate !== undefined && wrap !== 'truncate') ||\n    !['end', 'middle', 'start'].includes(position)\n  )\n    throw new RangeError(\n      'Text truncate requires wrap=\"truncate\" and one of end, middle, or start',\n    );\n  if (\n    truncateKeep !== undefined &&\n    (position !== 'middle' ||\n      (truncateKeep !== 'segment' &&\n        (!Number.isSafeInteger(truncateKeep) || truncateKeep < 1)))\n  )\n    throw new RangeError(\n      'Text truncateKeep requires truncate=\"middle\" and a positive integer or \"segment\"',\n    );\n  const textValue =\n    typeof children === 'string' || typeof children === 'number'\n      ? String(children)\n      : undefined;\n  if (position === 'middle' && textValue === undefined)\n    throw new TypeError(\n      'Text truncate=\"middle\" requires string or number children',\n    );\n  // Visually clipped start/middle text keeps its full value in the DOM; the\n  // title shows it to pointer users unless the app supplied its own.\n  const title =\n    attributes.title === undefined && position !== 'end'\n      ? textValue\n      : attributes.title;\n  const classes = ['kui-text', classValue, className].filter(Boolean).join(' ');\n  return (\n    <Variant\n      {...attributes}\n      class={classes}\n      data-component=\"text\"\n      data-tone={tone}\n      data-size={size}\n      data-font={font}\n      data-border={border}\n      data-control-margins={controlMargins || undefined}\n      data-flush={flush ? 'true' : undefined}\n      data-line-height={lineHeight === 'tight' ? 'tight' : undefined}\n      data-align={align === 'start' ? undefined : align}\n      data-wrap={wrap === 'normal' ? undefined : wrap}\n      data-max-lines={maxLines === undefined ? undefined : String(maxLines)}\n      data-truncate={position === 'end' ? undefined : position}\n      title={title}\n      style={\n        color === undefined\n          ? style\n          : `${style === undefined || style === null ? '' : `${style};`}color:${color}`\n      }\n    >\n      {textBody(position, children, textValue, truncateKeep, maxLines)}\n    </Variant>\n  );\n}\n\n/** The element's content for its truncation position or line cap. */\nfunction textBody(\n  position: TextTruncate,\n  children: TextContent,\n  textValue: string | undefined,\n  truncateKeep: TextTruncateKeep | undefined,\n  maxLines: number | undefined,\n): TextContent {\n  switch (position) {\n    case 'start':\n      return (\n        <span class=\"kui-text__truncate-start\">\n          <span dir=\"ltr\">{children}</span>\n        </span>\n      );\n    case 'middle':\n      return (\n        <TruncateMiddle\n          parts={splitMiddle(textValue!, truncateKeep ?? 'segment')}\n        />\n      );\n    case 'end':\n      return maxLines === undefined ? (\n        children\n      ) : (\n        <span\n          class=\"kui-text__clamp\"\n          style={`--_kui-text-max-lines:${maxLines}`}\n        >\n          {children}\n        </span>\n      );\n  }\n}\n\nfunction TruncateMiddle({ parts: [head, tail] }: { parts: [string, string] }) {\n  return (\n    <span class=\"kui-text__truncate-middle\">\n      <span class=\"kui-text__truncate-head\">{head}</span>\n      {tail ? <span class=\"kui-text__truncate-tail\">{tail}</span> : ''}\n    </span>\n  );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}

package/dist/{chunk-HQZYKJ56.js → chunk-7W3GKMN4.js}

@@ -1,3 +1,7 @@
+import { PopupCaretGlyph, PopupSubmenuGlyph } from './chunk-AYPGXR2E.js';
+import { POPUP_MENU_CLOSE_EVENT, POPUP_MENU_OPEN_EVENT } from './chunk-HYORKKYP.js';
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { Check } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
 // src/components/actions/popup-menu/internal/popup-menu-content-cache.ts
@@ -119,131 +123,162 @@ function cachePopupMenuContent(cacheKey, content) {
     markupCache.delete(markupCache.keys().next().value);
   markupCache.set(cacheKey, content);
 }
+var isCommand = (entry) => entry.kind !== "heading" && entry.kind !== "divider";
 function hasChoice(entries) {
   return entries.some(
-    (entry) => entry.kind !== "heading" && entry.kind !== "divider" && entry.checked !== void 0
+    (entry) => isCommand(entry) && entry.checked !== void 0
   );
 }
-function renderEntry(entry, nested = false, levelHasChoice = false) {
-  if (entry.kind === "divider")
-    return /* @__PURE__ */ jsx("wa-divider", { slot: nested ? "submenu" : void 0 });
-  if (entry.kind === "heading")
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        class: "kui-popup-menu__heading",
-        slot: nested ? "submenu" : void 0,
-        children: entry.label
-      }
-    );
-  const reserveCheck = levelHasChoice && entry.checked === void 0;
-  const submenuHasChoice = entry.submenu ? hasChoice(entry.submenu) : false;
-  return /* @__PURE__ */ jsxs(
-    "wa-dropdown-item",
+function renderItem(entry, levelHasChoice) {
+  const choice = entry.checked !== void 0;
+  const item = /* @__PURE__ */ jsxs(
+    "button",
     {
       ...entry.attributes ?? {},
-      slot: nested ? "submenu" : void 0,
-      "data-check-space": reserveCheck ? "reserved" : void 0,
+      type: "button",
+      class: "kui-popup-menu__item",
+      role: choice ? "menuitemcheckbox" : "menuitem",
+      tabindex: -1,
       "data-action": entry.action,
       value: entry.value,
-      type: entry.checked === void 0 ? void 0 : "checkbox",
-      checked: entry.checked,
-      variant: entry.tone === "danger" ? "danger" : void 0,
-      disabled: entry.disabled,
+      "data-tone": entry.tone === "danger" ? "danger" : void 0,
+      "aria-checked": choice ? String(entry.checked) : void 0,
+      "aria-disabled": entry.disabled ? "true" : void 0,
+      "aria-haspopup": entry.submenu ? "menu" : void 0,
+      "aria-expanded": entry.submenu ? "false" : void 0,
       title: entry.disabled ? entry.disabledReason : void 0,
       children: [
-        reserveCheck ? /* @__PURE__ */ jsx(
-          "span",
+        levelHasChoice ? /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__check", "aria-hidden": "true", children: choice ? /* @__PURE__ */ jsx(LucideIcon, { icon: Check, name: "check" }) : null }) : null,
+        entry.icon ? /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__icon", "aria-hidden": "true", children: entry.icon }) : null,
+        /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__item-label", children: entry.label }),
+        entry.details ? /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__details", children: entry.details }) : null,
+        entry.submenu ? /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__submenu-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopupSubmenuGlyph, {}) }) : null
+      ]
+    }
+  );
+  if (!entry.submenu) return item;
+  return /* @__PURE__ */ jsxs("div", { class: "kui-popup-menu__submenu-host", role: "none", children: [
+    item,
+    renderMenu(entry.submenu, entry.label, true)
+  ] });
+}
+function renderEntries(entries) {
+  const levelHasChoice = hasChoice(entries);
+  const out = [];
+  let index = 0;
+  while (index < entries.length) {
+    const entry = entries[index];
+    if (entry.kind === "divider") {
+      out.push(/* @__PURE__ */ jsx("div", { class: "kui-popup-menu__divider", role: "separator" }));
+      index += 1;
+      continue;
+    }
+    if (entry.kind === "heading") {
+      const members = [];
+      index += 1;
+      while (index < entries.length) {
+        const member = entries[index];
+        if (!isCommand(member)) break;
+        members.push(renderItem(member, levelHasChoice));
+        index += 1;
+      }
+      out.push(
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            slot: "icon",
-            class: "kui-popup-menu__check-space",
-            "aria-hidden": "true"
+            class: "kui-popup-menu__group",
+            role: "group",
+            "aria-label": entry.label,
+            children: [
+              /* @__PURE__ */ jsx("div", { class: "kui-popup-menu__heading", "aria-hidden": "true", children: entry.label }),
+              members
+            ]
           }
-        ) : null,
-        entry.icon ? /* @__PURE__ */ jsx("span", { slot: "icon", class: "kui-popup-menu__icon", children: entry.icon }) : null,
-        entry.label,
-        entry.details ? /* @__PURE__ */ jsx("span", { slot: "details", class: "kui-popup-menu__details", children: entry.details }) : entry.submenu ? /* @__PURE__ */ jsx("span", { slot: "details" }) : null,
-        entry.submenu?.map(
-          (child) => renderEntry(child, true, submenuHasChoice)
         )
-      ]
+      );
+      continue;
+    }
+    out.push(renderItem(entry, levelHasChoice));
+    index += 1;
+  }
+  return out;
+}
+function renderMenu(entries, name, submenu) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "kui-popup-menu__menu",
+      role: "menu",
+      popover: "manual",
+      tabindex: -1,
+      "aria-label": name,
+      "data-submenu": submenu ? "" : void 0,
+      children: renderEntries(entries)
     }
   );
 }
-var pointerRestores = /* @__PURE__ */ new WeakMap();
+function requestOpen(menu, detail) {
+  menu.dispatchEvent(
+    new CustomEvent(POPUP_MENU_OPEN_EVENT, { detail })
+  );
+}
 function openPopupMenuAt(menu, x, y) {
   menu.style.setProperty("--kui-popup-menu-context-x", `${x}px`);
   menu.style.setProperty("--kui-popup-menu-context-y", `${y}px`);
-  const popup = menu.getAttribute("data-trigger") === "context" ? null : menu.shadowRoot?.querySelector("wa-popup");
-  if (popup) {
-    popup.anchor = {
-      getBoundingClientRect: () => new DOMRect(x, y, 0, 0)
-    };
-    popup.placement = "bottom-start";
-    const previous = pointerRestores.get(menu);
-    if (previous) menu.removeEventListener("wa-after-hide", previous);
-    const restore = (event) => {
-      if (event.target !== menu) return;
-      menu.removeEventListener("wa-after-hide", restore);
-      pointerRestores.delete(menu);
-      popup.anchor = void 0;
-      popup.placement = menu.getAttribute("placement") ?? "bottom-start";
-    };
-    pointerRestores.set(menu, restore);
-    menu.addEventListener("wa-after-hide", restore);
-  }
-  menu.open = true;
+  requestOpen(menu, { point: { x, y } });
 }
 function openPopupMenu(menu) {
-  menu.open = true;
+  requestOpen(menu, {});
 }
 function closePopupMenu(menu) {
-  menu.open = false;
+  menu.dispatchEvent(new CustomEvent(POPUP_MENU_CLOSE_EVENT));
 }
 function renderContent({
   context,
   label,
   icon,
+  triggerContent,
   text,
   caret,
   disabled,
   items
 }) {
-  const levelHasChoice = hasChoice(items);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     context ? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        slot: "trigger",
         class: "kui-popup-menu__context-anchor",
-        "aria-label": label,
         "aria-hidden": "true",
         tabindex: -1
       }
     ) : /* @__PURE__ */ jsxs(
-      "wa-button",
+      "button",
       {
-        slot: "trigger",
-        appearance: "plain",
-        "with-caret": caret,
+        type: "button",
+        class: "kui-popup-menu__trigger",
+        "aria-haspopup": "menu",
+        "aria-expanded": "false",
         disabled,
         children: [
           icon,
-          text ? /* @__PURE__ */ jsx("span", { children: text }) : /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__label", children: label })
+          triggerContent === void 0 ? null : /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__trigger-content", "aria-hidden": "true", children: triggerContent }),
+          text ? /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__text", children: text }) : /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__label", children: label }),
+          caret ? /* @__PURE__ */ jsx("span", { class: "kui-popup-menu__caret", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopupCaretGlyph, {}) }) : null
         ]
       }
     ),
-    items.map((entry) => renderEntry(entry, false, levelHasChoice))
+    renderMenu(items, text ?? label, false)
   ] });
 }
 function PopupMenu({
   text,
   label,
   icon,
+  triggerContent,
   items,
   placement = "bottom-start",
-  caret = true,
+  caret = triggerContent === void 0,
   disabled = false,
   rootAttributes = {},
   slot,
@@ -261,7 +296,9 @@ function PopupMenu({
       String(icon ?? ""),
       String(caret),
       String(disabled),
-      String(context)
+      String(context),
+      // Only a content trigger adds a part, so other menus keep their keys.
+      ...triggerContent === void 0 ? [] : [String(triggerContent)]
     ],
     items
   );
@@ -271,6 +308,7 @@ function PopupMenu({
       context,
       label,
       icon,
+      triggerContent,
       text,
       caret,
       disabled,
@@ -279,18 +317,16 @@ function PopupMenu({
     cachePopupMenuContent(cacheKey, content);
   }
   return /* @__PURE__ */ jsx(
-    "wa-dropdown",
+    "span",
     {
-      size: "m",
       ...rootAttributes,
       class: "kui-popup-menu",
       "data-component": "popup-menu",
       "data-key": key,
       "data-morph-skip-children": true,
-      "data-trigger": context ? "context" : "button",
-      "data-menu-label": text ?? label,
+      "data-trigger": context ? "context" : triggerContent === void 0 ? "button" : "content",
+      "data-placement": placement,
       style: anchor ? `--kui-popup-menu-context-x:${anchor.x}px;--kui-popup-menu-context-y:${anchor.y}px` : void 0,
-      placement,
       slot,
       children: content
     }
@@ -299,4 +335,4 @@ function PopupMenu({
 
 export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt };
 
-//# sourceMappingURL=chunk-HQZYKJ56.js.map
+//# sourceMappingURL=chunk-7W3GKMN4.js.map