@k2b/ui 0.27.0 → 0.29.0

package/dist/browser/surfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/index.ts"],"sourcesContent":["export type { AvatarProps, AvatarSize } from \"./Avatar\";\nexport { Avatar } from \"./Avatar\";\nexport type { DescriptionListItem, DescriptionListProps } from \"./DescriptionList\";\nexport { DescriptionList } from \"./DescriptionList\";\nexport type { LinkCardColor, LinkCardProps } from \"./LinkCard\";\nexport { LinkCard } from \"./LinkCard\";\nexport type { NotFoundStateAction, NotFoundStateProps } from \"./NotFoundState\";\nexport { NotFoundState } from \"./NotFoundState\";\nexport type { NoticeCardProps, NoticeGridProps, NoticeTone } from \"./NoticeCard\";\nexport { NOTICE_CARD_CLASSES, NoticeCard } from \"./NoticeCard\";\nexport type { PaperProps, PaperTag } from \"./Paper\";\nexport { Paper } from \"./Paper\";\nexport type {\n  PlaceholderAlign,\n  PlaceholderProps,\n  PlaceholderState,\n  PlaceholderSurface,\n  PlaceholderVariant,\n} from \"./Placeholder\";\nexport { default as Placeholder } from \"./Placeholder\";\nexport type { ProgressBarProps, ProgressBarTone } from \"./ProgressBar\";\nexport { ProgressBar } from \"./ProgressBar\";\nexport type { ProgressRingProps, ProgressRingTone } from \"./ProgressRing\";\nexport { ProgressRing } from \"./ProgressRing\";\nexport type { ResourceCardProps, ResourceCardState } from \"./ResourceCard\";\nexport { ResourceCard } from \"./ResourceCard\";\nexport type { StatCellAccent, StatCellProps, StatCellTone } from \"./StatCell\";\nexport { StatCell } from \"./StatCell\";\nexport type {\n  StatGridAction,\n  StatGridColumns,\n  StatGridProps,\n  StatGridSize,\n  StatGridSurface,\n} from \"./StatGrid\";\nexport { StatGrid } from \"./StatGrid\";\nexport type { StatusBadgeProps, StatusTone } from \"./StatusBadge\";\nexport { StatusBadge } from \"./StatusBadge\";\nexport type { TagProps, TagSize } from \"./Tag\";\nexport { Tag } from \"./Tag\";\n"],"mappings":"AACA,SAAS,MAAM,QAAQ,UAAU;AAEjC,SAAS,eAAe,QAAQ,mBAAmB;AAEnD,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,aAAa,QAAQ,iBAAiB;AAE/C,SAAS,mBAAmB,EAAE,UAAU,QAAQ,cAAc;AAE9D,SAAS,KAAK,QAAQ,SAAS;AAQ/B,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,YAAY,QAAQ,gBAAgB;AAE7C,SAAS,YAAY,QAAQ,gBAAgB;AAE7C,SAAS,QAAQ,QAAQ,YAAY;AAQrC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,GAAG,QAAQ,OAAO","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/index.ts"],"sourcesContent":["export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize } from \"./Avatar\";\nexport { Avatar } from \"./Avatar\";\nexport type { AvatarStackPerson, AvatarStackProps } from \"./AvatarStack\";\nexport { AvatarStack } from \"./AvatarStack\";\nexport type { DescriptionListItem, DescriptionListProps } from \"./DescriptionList\";\nexport { DescriptionList } from \"./DescriptionList\";\nexport type { LinkCardColor, LinkCardProps } from \"./LinkCard\";\nexport { LinkCard } from \"./LinkCard\";\nexport type { NotFoundStateAction, NotFoundStateProps } from \"./NotFoundState\";\nexport { NotFoundState } from \"./NotFoundState\";\nexport type { NoticeCardProps, NoticeGridProps, NoticeTone } from \"./NoticeCard\";\nexport { NOTICE_CARD_CLASSES, NoticeCard } from \"./NoticeCard\";\nexport type { PaperProps, PaperTag } from \"./Paper\";\nexport { Paper } from \"./Paper\";\nexport type {\n  PlaceholderAlign,\n  PlaceholderProps,\n  PlaceholderState,\n  PlaceholderSurface,\n  PlaceholderVariant,\n} from \"./Placeholder\";\nexport { default as Placeholder } from \"./Placeholder\";\nexport type { ProgressBarProps, ProgressBarTone } from \"./ProgressBar\";\nexport { ProgressBar } from \"./ProgressBar\";\nexport type { ProgressRingProps, ProgressRingTone } from \"./ProgressRing\";\nexport { ProgressRing } from \"./ProgressRing\";\nexport type { ResourceCardProps, ResourceCardState } from \"./ResourceCard\";\nexport { ResourceCard } from \"./ResourceCard\";\nexport type { StatCellAccent, StatCellProps, StatCellTone } from \"./StatCell\";\nexport { StatCell } from \"./StatCell\";\nexport type {\n  StatGridAction,\n  StatGridColumns,\n  StatGridProps,\n  StatGridSize,\n  StatGridSurface,\n} from \"./StatGrid\";\nexport { StatGrid } from \"./StatGrid\";\nexport type { StatusBadgeProps, StatusTone } from \"./StatusBadge\";\nexport { StatusBadge } from \"./StatusBadge\";\nexport type { TagProps, TagSize } from \"./Tag\";\nexport { Tag } from \"./Tag\";\n"],"mappings":"AACA,SAAS,MAAM,QAAQ,UAAU;AAEjC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,eAAe,QAAQ,mBAAmB;AAEnD,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,aAAa,QAAQ,iBAAiB;AAE/C,SAAS,mBAAmB,EAAE,UAAU,QAAQ,cAAc;AAE9D,SAAS,KAAK,QAAQ,SAAS;AAQ/B,SAAS,OAAO,IAAI,WAAW,QAAQ,eAAe;AAEtD,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,YAAY,QAAQ,gBAAgB;AAE7C,SAAS,YAAY,QAAQ,gBAAgB;AAE7C,SAAS,QAAQ,QAAQ,YAAY;AAQrC,SAAS,QAAQ,QAAQ,YAAY;AAErC,SAAS,WAAW,QAAQ,eAAe;AAE3C,SAAS,GAAG,QAAQ,OAAO","ignoreList":[]}

package/dist/browser/widgets/Widget.js

@@ -9,7 +9,7 @@ import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-widget__heading><span class=k2b-widget__title></span><!$><!/>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<i class="ti ti-chevron-right k2b-widget__chevron"aria-hidden=true>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-widget__icon><i aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class="k2b-widget__icon k2b-icon-tile"aria-hidden=true><i>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-widget__meta>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-widget__body>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-widget__header>`),

package/dist/browser/widgets/Widget.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["widgets/Widget.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Paper } from \"../surfaces/Paper\";\n\n/**\n * `standard` is 25rem high and `compact` 14rem; `fill` takes the height its container gives it, such as a grid cell,\n * and `content` has no fixed height. Every size except `content` scrolls body content taller than itself.\n */\nexport type WidgetSize = \"content\" | \"compact\" | \"standard\" | \"fill\";\n\nexport type WidgetProps = {\n  title: string;\n  icon?: string;\n  href?: string;\n  meta?: string;\n  size?: WidgetSize;\n  children: JSX.Element;\n};\n\nfunction Header(props: WidgetProps): JSX.Element {\n  return (\n    <>\n      <Show when={props.icon}>\n        {(icon) => (\n          <span class=\"k2b-widget__icon\">\n            <i class={icon()} aria-hidden=\"true\" />\n          </span>\n        )}\n      </Show>\n      <span class=\"k2b-widget__heading\">\n        <span class=\"k2b-widget__title\">{props.title}</span>\n        <Show when={props.meta}>{(meta) => <span class=\"k2b-widget__meta\">{meta()}</span>}</Show>\n      </span>\n      <Show when={props.href}>\n        <i class=\"ti ti-chevron-right k2b-widget__chevron\" aria-hidden=\"true\" />\n      </Show>\n    </>\n  );\n}\n\nexport function Widget(props: WidgetProps): JSX.Element {\n  return (\n    <Paper class=\"k2b-widget\" data-size={props.size ?? \"standard\"}>\n      <Show\n        when={props.href}\n        fallback={\n          <div class=\"k2b-widget__header\">\n            <Header {...props} />\n          </div>\n        }\n      >\n        {(href) => (\n          <a href={href()} class=\"k2b-widget__header\">\n            <Header {...props} />\n          </a>\n        )}\n      </Show>\n      <div class=\"k2b-widget__body\">{props.children}</div>\n    </Paper>\n  );\n}\n\nexport default Widget;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,SAAS,KAAK,QAAQ,mBAAmB;;AAEzC;AACA;AACA;AACA;;AAYA,SAAS,MAAM,CAAC,KAAkB,EAAe;EAC/C,0BAEK,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA,UAClB,IAAI;MAAA;QAAA;MAAA,kCAEQ,IAAI,CAAC,CAAC;MAAA;IAAA;EAEnB;IAAA;MAAA;MAAA;MAAA;IAAA,sBAGgC,KAAK,CAAC,KAAK;IAAA,iCAC3C,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,IAAI;MAAA;MAAA,UAAI,IAAI;QAAA;QAAA,gBAAqC,IAAI;QAAA;MAAA;IAAU;IAAA;EAAA,wBAElF,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA;MAAA;IAAA;EAAA;AAK5B;AAEA,OAAO,SAAS,MAAM,CAAC,KAAkB,EAAe;EACtD,yBACG,KAAK;IAAA;IAAA;MAAA,OAA+B,KAAK,CAAC,IAAI,IAAI,UAAU;IAAA;IAAA;MAAA,0BAC1D,IAAI;QAAA,IACH,IAAI;UAAA,OAAE,KAAK,CAAC,IAAI;QAAA;QAAA,IAChB,QAAQ;UAAA;YAAA;YAAA,kCAEH,MAAM,EAAK,KAAK;YAAA;UAAA;QAAA;QAAA,UAInB,IAAI;UAAA;UAAA,kCAED,MAAM,EAAK,KAAK;UAAA,6CADV,IAAI,CAAC,CAAC;UAAA;QAAA;MAGhB;QAAA;QAAA,sBAE4B,KAAK,CAAC,QAAQ;QAAA;MAAA;IAAA;EAAA;AAGnD;AAEA,eAAe,MAAM","ignoreList":[]}
+{"version":3,"names":[],"sources":["widgets/Widget.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Paper } from \"../surfaces/Paper\";\n\n/**\n * `standard` is 25rem high and `compact` 14rem; `fill` takes the height its container gives it, such as a grid cell,\n * and `content` has no fixed height. Every size except `content` scrolls body content taller than itself.\n */\nexport type WidgetSize = \"content\" | \"compact\" | \"standard\" | \"fill\";\n\nexport type WidgetProps = {\n  title: string;\n  icon?: string;\n  href?: string;\n  meta?: string;\n  size?: WidgetSize;\n  children: JSX.Element;\n};\n\nfunction Header(props: WidgetProps): JSX.Element {\n  return (\n    <>\n      <Show when={props.icon}>\n        {(icon) => (\n          <span class=\"k2b-widget__icon k2b-icon-tile\" aria-hidden=\"true\">\n            <i class={icon()} />\n          </span>\n        )}\n      </Show>\n      <span class=\"k2b-widget__heading\">\n        <span class=\"k2b-widget__title\">{props.title}</span>\n        <Show when={props.meta}>{(meta) => <span class=\"k2b-widget__meta\">{meta()}</span>}</Show>\n      </span>\n      <Show when={props.href}>\n        <i class=\"ti ti-chevron-right k2b-widget__chevron\" aria-hidden=\"true\" />\n      </Show>\n    </>\n  );\n}\n\nexport function Widget(props: WidgetProps): JSX.Element {\n  return (\n    <Paper class=\"k2b-widget\" data-size={props.size ?? \"standard\"}>\n      <Show\n        when={props.href}\n        fallback={\n          <div class=\"k2b-widget__header\">\n            <Header {...props} />\n          </div>\n        }\n      >\n        {(href) => (\n          <a href={href()} class=\"k2b-widget__header\">\n            <Header {...props} />\n          </a>\n        )}\n      </Show>\n      <div class=\"k2b-widget__body\">{props.children}</div>\n    </Paper>\n  );\n}\n\nexport default Widget;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,SAAS,KAAK,QAAQ,mBAAmB;;AAEzC;AACA;AACA;AACA;;AAYA,SAAS,MAAM,CAAC,KAAkB,EAAe;EAC/C,0BAEK,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA,UAClB,IAAI;MAAA;QAAA;MAAA,kCAEQ,IAAI,CAAC,CAAC;MAAA;IAAA;EAEnB;IAAA;MAAA;MAAA;MAAA;IAAA,sBAGgC,KAAK,CAAC,KAAK;IAAA,iCAC3C,IAAI;MAAA,IAAC,IAAI;QAAA,OAAE,KAAK,CAAC,IAAI;MAAA;MAAA,UAAI,IAAI;QAAA;QAAA,gBAAqC,IAAI;QAAA;MAAA;IAAU;IAAA;EAAA,wBAElF,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA;MAAA;IAAA;EAAA;AAK5B;AAEA,OAAO,SAAS,MAAM,CAAC,KAAkB,EAAe;EACtD,yBACG,KAAK;IAAA;IAAA;MAAA,OAA+B,KAAK,CAAC,IAAI,IAAI,UAAU;IAAA;IAAA;MAAA,0BAC1D,IAAI;QAAA,IACH,IAAI;UAAA,OAAE,KAAK,CAAC,IAAI;QAAA;QAAA,IAChB,QAAQ;UAAA;YAAA;YAAA,kCAEH,MAAM,EAAK,KAAK;YAAA;UAAA;QAAA;QAAA,UAInB,IAAI;UAAA;UAAA,kCAED,MAAM,EAAK,KAAK;UAAA,6CADV,IAAI,CAAC,CAAC;UAAA;QAAA;MAGhB;QAAA;QAAA,sBAE4B,KAAK,CAAC,QAAQ;QAAA;MAAA;IAAA;EAAA;AAGnD;AAEA,eAAe,MAAM","ignoreList":[]}

package/dist/ssr/actions/ContextMenu.js

@@ -4,17 +4,27 @@ import { ssr as _$ssr } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<div", " role=\"group\"", " aria-haspopup=\"menu\"", ">", "</div>"],
-  _tmpl$2 = ["<div", " class=\"k2b-ui k2b-context-menu\" role=\"menu\"", " style=\"", "\">", "</div>"];
+  _tmpl$2 = ["<div class=\"k2b-context-menu__title\" aria-hidden=\"true\">", "</div>"],
+  _tmpl$3 = ["<div", " class=\"k2b-ui k2b-context-menu\" role=\"menu\"", " style=\"", "\">", "", "</div>"];
 import { createMemo, createSignal, createUniqueId, onCleanup, onMount, Show } from "solid-js";
 import { Portal } from "solid-js/web";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
 import { useUiMessages } from "../intl/messages";
-import { DropdownItems, dropdownPosition, focusRowSegment } from "./Dropdown";
+import { DropdownItems, dropdownPosition } from "./Dropdown";
+import { focusRowSegment } from "./menu-rows";
 let closeActiveContextMenu;
 const focusableItems = menu => menu ? Array.from(menu.querySelectorAll(["[role='menuitem']:not([aria-disabled='true'])", "[role='menuitemcheckbox']:not([aria-disabled='true'])", "[role='menuitemradio']:not([aria-disabled='true'])"].join(", "))) : [];
 
 /** Right-click menu with keyboard invocation, one-open-at-a-time behavior, and viewport clamping. */
 export function ContextMenu(props) {
+  return ContextMenuBase(props);
+}
+
+/**
+ * Package-internal, not exported from the package index: `openAt` lets GestureMenu open the menu at a held finger, and
+ * `title` names what was pressed above the entries, since the finger covers it.
+ */
+export function ContextMenuBase(props) {
   const messages = useUiMessages();
   const generatedId = `k2b-context-${createUniqueId()}`;
   const menuId = `${generatedId}-menu`;
@@ -148,6 +158,12 @@ export function ContextMenu(props) {
       close();
     }
   };
+  props.openAt?.(open);
+  // A close from outside, such as a drag taking over the press, returns focus that sits in the menu to where it came from.
+  props.closeWith?.(() => {
+    if (isOpen() && menu?.contains(document.activeElement)) returnFocus(opener?.isConnected ? opener : host, hostRing);
+    close();
+  });
   onMount(() => {
     onCleanup(() => {
       detachOpenListeners();
@@ -160,7 +176,14 @@ export function ContextMenu(props) {
     },
     children: point => _$createComponent(Portal, {
       get children() {
-        return _$ssr(_tmpl$2, _$ssrAttribute("id", _$escape(menuId, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().contextMenu, true), false), _$ssrStyleProperty("left:", `${_$escape(point().x, true)}px`) + _$ssrStyleProperty(";top:", `${_$escape(point().y, true)}px`), _$escape(_$createComponent(DropdownItems, {
+        return _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(menuId, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().contextMenu, true), false), _$ssrStyleProperty("left:", `${_$escape(point().x, true)}px`) + _$ssrStyleProperty(";top:", `${_$escape(point().y, true)}px`), _$escape(_$createComponent(Show, {
+          get when() {
+            return props.title;
+          },
+          get children() {
+            return _$ssr(_tmpl$2, _$escape(props.title));
+          }
+        })), _$escape(_$createComponent(DropdownItems, {
           get items() {
             return items();
           },

package/dist/ssr/actions/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/ContextMenu.tsx"],"sourcesContent":["import { createMemo, createSignal, createUniqueId, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { type DropdownItem, DropdownItems, type DropdownPosition, dropdownPosition, focusRowSegment } from \"./Dropdown\";\n\nexport type ContextMenuProps = {\n  items: readonly DropdownItem[];\n  children: JSX.Element;\n  class?: string | ((isOpen: boolean) => string);\n  /** Tab order of the context-menu host. Descendant-focused composite widgets use -1. */\n  tabIndex?: number;\n  disabled?: boolean;\n  onClose?: () => void;\n  onOpen?: () => void;\n  id?: string;\n  label?: string;\n};\n\nlet closeActiveContextMenu: (() => void) | undefined;\n\nconst focusableItems = (menu: HTMLElement | undefined): HTMLElement[] =>\n  menu\n    ? Array.from(\n        menu.querySelectorAll<HTMLElement>(\n          [\n            \"[role='menuitem']:not([aria-disabled='true'])\",\n            \"[role='menuitemcheckbox']:not([aria-disabled='true'])\",\n            \"[role='menuitemradio']:not([aria-disabled='true'])\",\n          ].join(\", \"),\n        ),\n      )\n    : [];\n\n/** Right-click menu with keyboard invocation, one-open-at-a-time behavior, and viewport clamping. */\nexport function ContextMenu(props: ContextMenuProps): JSX.Element {\n  const messages = useUiMessages();\n  const generatedId = `k2b-context-${createUniqueId()}`;\n  const menuId = `${generatedId}-menu`;\n  const [position, setPosition] = createSignal<{ x: number; y: number }>();\n  let host: HTMLDivElement | undefined;\n  let menu: HTMLDivElement | undefined;\n  let listenersAttached = false;\n  let hostRing = true;\n  /** The element inside the host that had focus as the menu opened, such as a row or a day of a composite widget. */\n  let opener: HTMLElement | undefined;\n  let anchor = { x: 0, y: 0 };\n  let viewport = { width: 0, height: 0 };\n  let resizeObserver: ResizeObserver | undefined;\n\n  const isOpen = () => position() !== undefined;\n  const hostClass = createMemo(() => (typeof props.class === \"function\" ? props.class(isOpen()) : props.class));\n  const items = createMemo<readonly DropdownItem[]>(() => props.items);\n\n  const dismiss = (event: PointerEvent) => {\n    if (menu?.contains(event.target as Node)) return;\n    close();\n  };\n  const closeOnScroll = (event: Event) => {\n    const target = event.target;\n    if (target instanceof Node && menu?.contains(target)) return;\n    close();\n  };\n  // A resize event may leave the viewport's size unchanged; headless Chromium\n  // was seen to fire one on a fresh page. The clamped menu is still in place.\n  const closeOnResize = () => {\n    if (window.innerWidth === viewport.width && window.innerHeight === viewport.height) return;\n    close();\n  };\n  const attachOpenListeners = () => {\n    if (listenersAttached) return;\n    listenersAttached = true;\n    document.addEventListener(\"pointerdown\", dismiss);\n    document.addEventListener(\"keydown\", keyDown);\n    window.addEventListener(\"resize\", closeOnResize);\n    window.addEventListener(\"scroll\", closeOnScroll, true);\n  };\n  const detachOpenListeners = () => {\n    if (!listenersAttached) return;\n    listenersAttached = false;\n    document.removeEventListener(\"pointerdown\", dismiss);\n    document.removeEventListener(\"keydown\", keyDown);\n    window.removeEventListener(\"resize\", closeOnResize);\n    window.removeEventListener(\"scroll\", closeOnScroll, true);\n    resizeObserver?.disconnect();\n  };\n  /** Clamps the rendered menu into the viewport beside the point that opened it. */\n  const place = () => {\n    if (!isOpen() || !menu?.isConnected) return;\n    const point = dropdownPosition(\n      new DOMRect(anchor.x, anchor.y, 0, 0),\n      menu.getBoundingClientRect(),\n      \"bottom-right\" satisfies DropdownPosition,\n      { width: window.innerWidth, height: window.innerHeight },\n      0,\n    );\n    setPosition({ x: point.left, y: point.top });\n  };\n  const close = () => {\n    detachOpenListeners();\n    if (!isOpen()) return;\n    setPosition();\n    if (closeActiveContextMenu === close) closeActiveContextMenu = undefined;\n    props.onClose?.();\n  };\n  const focusItem = (index: number) => {\n    const items = focusableItems(menu);\n    if (items.length === 0) return;\n    items[(index + items.length) % items.length]?.focus();\n  };\n  const open = (x: number, y: number) => {\n    if (props.disabled) return;\n    closeActiveContextMenu?.();\n    // Focus may sit on a descendant of the host, as in composite widgets; Escape returns it there.\n    const focused = document.activeElement;\n    opener = focused instanceof HTMLElement && focused !== host && host?.contains(focused) ? focused : undefined;\n    hostRing = ringOnReturn(focused);\n    anchor = { x, y };\n    viewport = { width: window.innerWidth, height: window.innerHeight };\n    setPosition({ x, y });\n    closeActiveContextMenu = close;\n    attachOpenListeners();\n    props.onOpen?.();\n    // The menu sizes to its entries, so it is measured once rendered and\n    // clamped into the viewport before the next paint, and again whenever its\n    // entries change its size while it is open.\n    queueMicrotask(() => {\n      if (!isOpen() || !menu?.isConnected) return;\n      place();\n      if (typeof ResizeObserver !== \"undefined\") {\n        resizeObserver ??= new ResizeObserver(place);\n        resizeObserver.observe(menu);\n      }\n      focusItem(0);\n    });\n  };\n  const keyDown = (event: KeyboardEvent) => {\n    if (!isOpen()) return;\n    const items = focusableItems(menu);\n    const current = items.indexOf(document.activeElement as HTMLElement);\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusItem(current + (event.key === \"ArrowDown\" ? 1 : -1));\n    } else if (focusRowSegment(items, event.key)) {\n      event.preventDefault();\n    } else if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      focusItem(event.key === \"Home\" ? 0 : -1);\n    } else if (event.key === \"Escape\") {\n      event.preventDefault();\n      close();\n      returnFocus(opener?.isConnected ? opener : host, hostRing);\n    } else if (event.key === \"Tab\") {\n      close();\n    }\n  };\n\n  onMount(() => {\n    onCleanup(() => {\n      detachOpenListeners();\n      if (closeActiveContextMenu === close) closeActiveContextMenu = undefined;\n    });\n  });\n\n  return (\n    <>\n      {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: the named group owns the context-menu relationship without pretending arbitrary children form one button. */}\n      <div\n        ref={host}\n        id={props.id ?? generatedId}\n        class={hostClass()}\n        role=\"group\"\n        tabIndex={props.disabled ? undefined : (props.tabIndex ?? 0)}\n        aria-label={props.label ?? messages().contextMenu}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen()}\n        aria-controls={isOpen() ? menuId : undefined}\n        aria-disabled={props.disabled ? \"true\" : undefined}\n        onContextMenu={(event) => {\n          if (props.disabled) return;\n          event.preventDefault();\n          event.stopPropagation();\n          open(event.clientX, event.clientY);\n        }}\n        onKeyDown={(event) => {\n          if (props.disabled || (event.key !== \"ContextMenu\" && !(event.shiftKey && event.key === \"F10\"))) return;\n          event.preventDefault();\n          // Beside the focused element, such as a row of a composite widget, rather than the corner of the whole host.\n          const focused = document.activeElement;\n          const rect = (focused instanceof HTMLElement && host?.contains(focused) ? focused : host)?.getBoundingClientRect();\n          if (rect) open(rect.left + 12, rect.top + 12);\n        }}\n      >\n        {props.children}\n      </div>\n      <Show when={position()}>\n        {(point) => (\n          <Portal>\n            <div\n              ref={menu}\n              id={menuId}\n              class=\"k2b-ui k2b-context-menu\"\n              role=\"menu\"\n              aria-label={props.label ?? messages().contextMenu}\n              style={{ left: `${point().x}px`, top: `${point().y}px` }}\n              onPointerDown={(event) => event.stopPropagation()}\n            >\n              <DropdownItems items={items()} close={close} />\n            </div>\n          </Portal>\n        )}\n      </Show>\n    </>\n  );\n}\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/ContextMenu.tsx"],"sourcesContent":["import { createMemo, createSignal, createUniqueId, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { type DropdownItem, DropdownItems, type DropdownPosition, dropdownPosition } from \"./Dropdown\";\nimport { focusRowSegment } from \"./menu-rows\";\n\nexport type ContextMenuProps = {\n  items: readonly DropdownItem[];\n  children: JSX.Element;\n  class?: string | ((isOpen: boolean) => string);\n  /** Tab order of the context-menu host. Descendant-focused composite widgets use -1. */\n  tabIndex?: number;\n  disabled?: boolean;\n  onClose?: () => void;\n  onOpen?: () => void;\n  id?: string;\n  label?: string;\n};\n\nlet closeActiveContextMenu: (() => void) | undefined;\n\nconst focusableItems = (menu: HTMLElement | undefined): HTMLElement[] =>\n  menu\n    ? Array.from(\n        menu.querySelectorAll<HTMLElement>(\n          [\n            \"[role='menuitem']:not([aria-disabled='true'])\",\n            \"[role='menuitemcheckbox']:not([aria-disabled='true'])\",\n            \"[role='menuitemradio']:not([aria-disabled='true'])\",\n          ].join(\", \"),\n        ),\n      )\n    : [];\n\n/** Right-click menu with keyboard invocation, one-open-at-a-time behavior, and viewport clamping. */\nexport function ContextMenu(props: ContextMenuProps): JSX.Element {\n  return ContextMenuBase(props);\n}\n\n/**\n * Package-internal, not exported from the package index: `openAt` lets GestureMenu open the menu at a held finger, and\n * `title` names what was pressed above the entries, since the finger covers it.\n */\nexport function ContextMenuBase(\n  props: ContextMenuProps & {\n    openAt?: (open: (x: number, y: number) => void) => void;\n    title?: string;\n    closeWith?: (close: () => void) => void;\n  },\n): JSX.Element {\n  const messages = useUiMessages();\n  const generatedId = `k2b-context-${createUniqueId()}`;\n  const menuId = `${generatedId}-menu`;\n  const [position, setPosition] = createSignal<{ x: number; y: number }>();\n  let host: HTMLDivElement | undefined;\n  let menu: HTMLDivElement | undefined;\n  let listenersAttached = false;\n  let hostRing = true;\n  /** The element inside the host that had focus as the menu opened, such as a row or a day of a composite widget. */\n  let opener: HTMLElement | undefined;\n  let anchor = { x: 0, y: 0 };\n  let viewport = { width: 0, height: 0 };\n  let resizeObserver: ResizeObserver | undefined;\n\n  const isOpen = () => position() !== undefined;\n  const hostClass = createMemo(() => (typeof props.class === \"function\" ? props.class(isOpen()) : props.class));\n  const items = createMemo<readonly DropdownItem[]>(() => props.items);\n\n  const dismiss = (event: PointerEvent) => {\n    if (menu?.contains(event.target as Node)) return;\n    close();\n  };\n  const closeOnScroll = (event: Event) => {\n    const target = event.target;\n    if (target instanceof Node && menu?.contains(target)) return;\n    close();\n  };\n  // A resize event may leave the viewport's size unchanged; headless Chromium\n  // was seen to fire one on a fresh page. The clamped menu is still in place.\n  const closeOnResize = () => {\n    if (window.innerWidth === viewport.width && window.innerHeight === viewport.height) return;\n    close();\n  };\n  const attachOpenListeners = () => {\n    if (listenersAttached) return;\n    listenersAttached = true;\n    document.addEventListener(\"pointerdown\", dismiss);\n    document.addEventListener(\"keydown\", keyDown);\n    window.addEventListener(\"resize\", closeOnResize);\n    window.addEventListener(\"scroll\", closeOnScroll, true);\n  };\n  const detachOpenListeners = () => {\n    if (!listenersAttached) return;\n    listenersAttached = false;\n    document.removeEventListener(\"pointerdown\", dismiss);\n    document.removeEventListener(\"keydown\", keyDown);\n    window.removeEventListener(\"resize\", closeOnResize);\n    window.removeEventListener(\"scroll\", closeOnScroll, true);\n    resizeObserver?.disconnect();\n  };\n  /** Clamps the rendered menu into the viewport beside the point that opened it. */\n  const place = () => {\n    if (!isOpen() || !menu?.isConnected) return;\n    const point = dropdownPosition(\n      new DOMRect(anchor.x, anchor.y, 0, 0),\n      menu.getBoundingClientRect(),\n      \"bottom-right\" satisfies DropdownPosition,\n      { width: window.innerWidth, height: window.innerHeight },\n      0,\n    );\n    setPosition({ x: point.left, y: point.top });\n  };\n  const close = () => {\n    detachOpenListeners();\n    if (!isOpen()) return;\n    setPosition();\n    if (closeActiveContextMenu === close) closeActiveContextMenu = undefined;\n    props.onClose?.();\n  };\n  const focusItem = (index: number) => {\n    const items = focusableItems(menu);\n    if (items.length === 0) return;\n    items[(index + items.length) % items.length]?.focus();\n  };\n  const open = (x: number, y: number) => {\n    if (props.disabled) return;\n    closeActiveContextMenu?.();\n    // Focus may sit on a descendant of the host, as in composite widgets; Escape returns it there.\n    const focused = document.activeElement;\n    opener = focused instanceof HTMLElement && focused !== host && host?.contains(focused) ? focused : undefined;\n    hostRing = ringOnReturn(focused);\n    anchor = { x, y };\n    viewport = { width: window.innerWidth, height: window.innerHeight };\n    setPosition({ x, y });\n    closeActiveContextMenu = close;\n    attachOpenListeners();\n    props.onOpen?.();\n    // The menu sizes to its entries, so it is measured once rendered and\n    // clamped into the viewport before the next paint, and again whenever its\n    // entries change its size while it is open.\n    queueMicrotask(() => {\n      if (!isOpen() || !menu?.isConnected) return;\n      place();\n      if (typeof ResizeObserver !== \"undefined\") {\n        resizeObserver ??= new ResizeObserver(place);\n        resizeObserver.observe(menu);\n      }\n      focusItem(0);\n    });\n  };\n  const keyDown = (event: KeyboardEvent) => {\n    if (!isOpen()) return;\n    const items = focusableItems(menu);\n    const current = items.indexOf(document.activeElement as HTMLElement);\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      focusItem(current + (event.key === \"ArrowDown\" ? 1 : -1));\n    } else if (focusRowSegment(items, event.key)) {\n      event.preventDefault();\n    } else if (event.key === \"Home\" || event.key === \"End\") {\n      event.preventDefault();\n      focusItem(event.key === \"Home\" ? 0 : -1);\n    } else if (event.key === \"Escape\") {\n      event.preventDefault();\n      close();\n      returnFocus(opener?.isConnected ? opener : host, hostRing);\n    } else if (event.key === \"Tab\") {\n      close();\n    }\n  };\n\n  props.openAt?.(open);\n  // A close from outside, such as a drag taking over the press, returns focus that sits in the menu to where it came from.\n  props.closeWith?.(() => {\n    if (isOpen() && menu?.contains(document.activeElement)) returnFocus(opener?.isConnected ? opener : host, hostRing);\n    close();\n  });\n\n  onMount(() => {\n    onCleanup(() => {\n      detachOpenListeners();\n      if (closeActiveContextMenu === close) closeActiveContextMenu = undefined;\n    });\n  });\n\n  return (\n    <>\n      {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: the named group owns the context-menu relationship without pretending arbitrary children form one button. */}\n      <div\n        ref={host}\n        id={props.id ?? generatedId}\n        class={hostClass()}\n        role=\"group\"\n        tabIndex={props.disabled ? undefined : (props.tabIndex ?? 0)}\n        aria-label={props.label ?? messages().contextMenu}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen()}\n        aria-controls={isOpen() ? menuId : undefined}\n        aria-disabled={props.disabled ? \"true\" : undefined}\n        onContextMenu={(event) => {\n          if (props.disabled) return;\n          event.preventDefault();\n          event.stopPropagation();\n          open(event.clientX, event.clientY);\n        }}\n        onKeyDown={(event) => {\n          if (props.disabled || (event.key !== \"ContextMenu\" && !(event.shiftKey && event.key === \"F10\"))) return;\n          event.preventDefault();\n          // Beside the focused element, such as a row of a composite widget, rather than the corner of the whole host.\n          const focused = document.activeElement;\n          const rect = (focused instanceof HTMLElement && host?.contains(focused) ? focused : host)?.getBoundingClientRect();\n          if (rect) open(rect.left + 12, rect.top + 12);\n        }}\n      >\n        {props.children}\n      </div>\n      <Show when={position()}>\n        {(point) => (\n          <Portal>\n            <div\n              ref={menu}\n              id={menuId}\n              class=\"k2b-ui k2b-context-menu\"\n              role=\"menu\"\n              aria-label={props.label ?? messages().contextMenu}\n              style={{ left: `${point().x}px`, top: `${point().y}px` }}\n              onPointerDown={(event) => event.stopPropagation()}\n            >\n              {/* The menu carries the same name for assistive technology. */}\n              <Show when={props.title}>\n                <div class=\"k2b-context-menu__title\" aria-hidden=\"true\">\n                  {props.title}\n                </div>\n              </Show>\n              <DropdownItems items={items()} close={close} />\n            </div>\n          </Portal>\n        )}\n      </Show>\n    </>\n  );\n}\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/actions/DragAndDrop.js

@@ -0,0 +1,63 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<div class=\"", "\"", ">", "</div>"],
+  _tmpl$2 = ["<div class=\"", "\">", "</div>"];
+import { createEffect, onCleanup, onMount } from "solid-js";
+import { bindDragSource, registerDropTarget, startKeyboardDrag } from "./drag-and-drop";
+import { useDragAndDropMessages } from "./drag-and-drop-messages";
+export { activeDrag } from "./drag-and-drop";
+export function DragSource(props) {
+  const messages = useDragAndDropMessages();
+  let source;
+  onMount(() => onCleanup(bindDragSource(source, () => ({
+    payload: props.payload,
+    disabled: props.disabled,
+    messages: messages()
+  }))));
+  return _$ssr(_tmpl$, `k2b-drag-source${props.class ? ` ${_$escape(props.class, true)}` : ""}`, _$ssrAttribute("data-drag-disabled", props.disabled ? "" : _$escape(undefined, true), false), _$escape(props.children));
+}
+export function DropTarget(props) {
+  // Resolve the inherited locale in the component's owner, as DragSource and the keyboard hook do.
+  const messages = useDragAndDropMessages();
+  let element;
+  onMount(() => {
+    const read = () => {
+      const accept = props.accept;
+      const onDrop = props.onDrop;
+      return {
+        accept,
+        label: props.label,
+        messages: messages(),
+        disabled: props.disabled,
+        drop: payload => {
+          // Only this membership guard narrows the opaque payload type at the registry boundary.
+          const type = accept.find(type => type === payload.type);
+          if (type !== undefined) onDrop({
+            ...payload,
+            type
+          });
+        }
+      };
+    };
+    const target = registerDropTarget(element, read());
+    createEffect(() => target.update(read()));
+    onCleanup(() => target.dispose());
+  });
+  return _$ssr(_tmpl$2, `k2b-drop-target${props.class ? ` ${_$escape(props.class, true)}` : ""}`, _$escape(props.children));
+}
+
+/**
+ * Starts the optional keyboard pick-up sequence from a menu entry. Focus returns to `origin` afterwards, or to its
+ * nearest focusable ancestor, such as the group of a `GestureMenu`.
+ */
+export function useKeyboardDrag() {
+  const messages = useDragAndDropMessages();
+  let cancel;
+  onCleanup(() => cancel?.());
+  return (payload, origin) => {
+    cancel?.();
+    cancel = startKeyboardDrag(payload, origin, messages());
+  };
+}
+//# sourceMappingURL=DragAndDrop.js.map

package/dist/ssr/actions/DragAndDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["actions/DragAndDrop.tsx"],"sourcesContent":["import { createEffect, type JSX, onCleanup, onMount } from \"solid-js\";\nimport { bindDragSource, type DragPayload, registerDropTarget, startKeyboardDrag } from \"./drag-and-drop\";\nimport { useDragAndDropMessages } from \"./drag-and-drop-messages\";\n\nexport type { DragPayload } from \"./drag-and-drop\";\nexport { activeDrag } from \"./drag-and-drop\";\n\nexport type DragSourceProps<Type extends string = string> = {\n  /** Read when the drag starts, so a selection can decide what is dragged. */\n  payload: DragPayload<Type>;\n  disabled?: boolean;\n  class?: string;\n  children: JSX.Element;\n};\nexport type DropTargetProps<Type extends string = string> = {\n  /** The payload types this target takes. */\n  accept: readonly Type[];\n  /** Names the target in announcements and in the keyboard path, such as \"Archive\". */\n  label: string;\n  onDrop: (payload: DragPayload<Type>) => void;\n  /** The target takes nothing now, for example without access; it refuses every drop. */\n  disabled?: boolean;\n  class?: string;\n  children: JSX.Element;\n};\n\nexport function DragSource<Type extends string = string>(props: DragSourceProps<Type>): JSX.Element {\n  const messages = useDragAndDropMessages();\n  let source!: HTMLDivElement;\n  onMount(() => onCleanup(bindDragSource(source, () => ({ payload: props.payload, disabled: props.disabled, messages: messages() }))));\n  return (\n    <div ref={source} class={`k2b-drag-source${props.class ? ` ${props.class}` : \"\"}`} data-drag-disabled={props.disabled ? \"\" : undefined}>\n      {props.children}\n    </div>\n  );\n}\n\nexport function DropTarget<Type extends string = string>(props: DropTargetProps<Type>): JSX.Element {\n  // Resolve the inherited locale in the component's owner, as DragSource and the keyboard hook do.\n  const messages = useDragAndDropMessages();\n  let element!: HTMLDivElement;\n  onMount(() => {\n    const read = () => {\n      const accept = props.accept;\n      const onDrop = props.onDrop;\n      return {\n        accept,\n        label: props.label,\n        messages: messages(),\n        disabled: props.disabled,\n        drop: (payload: DragPayload) => {\n          // Only this membership guard narrows the opaque payload type at the registry boundary.\n          const type = accept.find((type) => type === payload.type);\n          if (type !== undefined) onDrop({ ...payload, type });\n        },\n      };\n    };\n    const target = registerDropTarget(element, read());\n    createEffect(() => target.update(read()));\n    onCleanup(() => target.dispose());\n  });\n  return (\n    <div ref={element} class={`k2b-drop-target${props.class ? ` ${props.class}` : \"\"}`}>\n      {props.children}\n    </div>\n  );\n}\n\n/**\n * Starts the optional keyboard pick-up sequence from a menu entry. Focus returns to `origin` afterwards, or to its\n * nearest focusable ancestor, such as the group of a `GestureMenu`.\n */\nexport function useKeyboardDrag(): (payload: DragPayload, origin: HTMLElement) => void {\n  const messages = useDragAndDropMessages();\n  let cancel: (() => void) | undefined;\n  onCleanup(() => cancel?.());\n  return (payload, origin) => {\n    cancel?.();\n    cancel = startKeyboardDrag(payload, origin, messages());\n  };\n}\n"],"mappings":";;;;;AAAA,SAAS,YAAY,EAAY,SAAS,EAAE,OAAO,QAAQ,UAAU;AACrE,SAAS,cAAc,EAAoB,kBAAkB,EAAE,iBAAiB,QAAQ,iBAAiB;AACzG,SAAS,sBAAsB,QAAQ,0BAA0B;AAGjE,SAAS,UAAU,QAAQ,iBAAiB;AAqB5C,OAAO,SAAS,UAAU,CAA+B,KAA4B,EAAe;EAClG,MAAM,QAAQ,GAAG,sBAAsB,CAAC,CAAC;EACzC,IAAI,MAAuB;EAC3B,OAAO,CAAC,MAAM,SAAS,CAAC,cAAc,CAAC,MAAM,EAAE,OAAO;IAAE,OAAO,EAAE,KAAK,CAAC,OAAO;IAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ;IAAE,QAAQ,EAAE,QAAQ,CAAC;EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;EACpI,qBAC2B,kBAAkB,KAAK,CAAC,KAAK,GAAG,aAAI,KAAK,CAAC,KAAK,SAAE,GAAG,EAAE,EAAE,uCAAsB,KAAK,CAAC,QAAQ,GAAG,EAAE,YAAG,SAAS,0BACnI,KAAK,CAAC,QAAQ;AAGrB;AAEA,OAAO,SAAS,UAAU,CAA+B,KAA4B,EAAe;EAClG;EACA,MAAM,QAAQ,GAAG,sBAAsB,CAAC,CAAC;EACzC,IAAI,OAAwB;EAC5B,OAAO,CAAC,MAAM;IACZ,MAAM,IAAI,GAAG,MAAM;MACjB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM;MAC3B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM;MAC3B,OAAO;QACL,MAAM;QACN,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,IAAI,EAAG,OAAoB,IAAK;UAC9B;UACA,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAE,IAAI,IAAK,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC;UACzD,IAAI,IAAI,KAAK,SAAS,EAAE,MAAM,CAAC;YAAE,GAAG,OAAO;YAAE;UAAK,CAAC,CAAC;QACtD;MACF,CAAC;IACH,CAAC;IACD,MAAM,MAAM,GAAG,kBAAkB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAClD,YAAY,CAAC,MAAM,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACzC,SAAS,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;EACnC,CAAC,CAAC;EACF,sBAC4B,kBAAkB,KAAK,CAAC,KAAK,GAAG,aAAI,KAAK,CAAC,KAAK,SAAE,GAAG,EAAE,EAAE,WAC/E,KAAK,CAAC,QAAQ;AAGrB;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAAS,eAAe,GAAwD;EACrF,MAAM,QAAQ,GAAG,sBAAsB,CAAC,CAAC;EACzC,IAAI,MAAgC;EACpC,SAAS,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC;EAC3B,OAAO,CAAC,OAAO,EAAE,MAAM,KAAK;IAC1B,MAAM,GAAG,CAAC;IACV,MAAM,GAAG,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;EACzD,CAAC;AACH","ignoreList":[]}

package/dist/ssr/actions/Dropdown.js

@@ -16,17 +16,20 @@ var _tmpl$ = ["<span class=\"k2b-dropdown__copy\"><span>", "</span>", "</span>"]
   _tmpl$7 = "<i class=\"ti ti-check\"></i>",
   _tmpl$8 = ["<span class=\"k2b-dropdown__checkbox\" aria-hidden=\"true\">", "</span>"],
   _tmpl$9 = ["<i class=\"ti ti-check k2b-dropdown__check\"", " aria-hidden=\"true\"></i>"],
-  _tmpl$0 = ["<button type=\"button\"", " tabindex=\"-1\" class=\"", "\"", "", ">", "", "", "<span class=\"k2b-dropdown__copy\"><span>", "</span>", "</span>", "</button>"],
-  _tmpl$1 = ["<span class=\"k2b-dropdown__color\" style=\"", "\" aria-hidden=\"true\"></span>"],
-  _tmpl$10 = ["<div class=\"k2b-dropdown__row\">", "</div>"],
-  _tmpl$11 = ["<div class=\"k2b-dropdown__section\"", " role=\"group\"", ">", "", "</div>"],
-  _tmpl$12 = ["<div class=\"k2b-dropdown__label\">", "</div>"],
-  _tmpl$13 = ["<span class=\"", "\">", "<div", " popover=\"auto\" role=\"menu\"", " class=\"", "\" style=\"", "\"", ">", "</div></span>"];
+  _tmpl$0 = ["<span class=\"k2b-dropdown__color\" style=\"", "\" aria-hidden=\"true\"></span>"],
+  _tmpl$1 = ["<div class=\"k2b-dropdown__row\">", "</div>"],
+  _tmpl$10 = ["<div class=\"k2b-dropdown__section\"", " role=\"group\"", ">", "", "</div>"],
+  _tmpl$11 = ["<div class=\"k2b-dropdown__label\">", "</div>"],
+  _tmpl$12 = ["<span class=\"", "\">", "<div", " popover=\"auto\" role=\"menu\"", " class=\"", "\" style=\"", "\"", ">", "</div></span>"];
 import { createContext, createEffect, createSignal, createUniqueId, For, onCleanup, onMount, Show, splitProps, useContext } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import { Tooltip, useLabelTooltip } from "../feedback/Tooltip";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
+import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { Button, iconTitle } from "./Button";
+import { focusRowSegment } from "./menu-rows";
+import { openMenuSheet, prefersMenuSheet } from "./menu-sheet";
 
 // Resolved outside JSX: a conditional attribute compiles to a lazy memo, which would be created inside the click handler.
 const selectAction = item => item.action;
@@ -41,21 +44,6 @@ const focusMenuItem = (menu, index) => {
   if (items.length === 0) return;
   items[(index + items.length) % items.length]?.focus();
 };
-
-/**
- * Left and Right cycle through the segments of a row section; Up and Down leave it like any item. Returns whether
- * the key moved focus.
- */
-export const focusRowSegment = (items, key) => {
-  if (key !== "ArrowLeft" && key !== "ArrowRight") return false;
-  const active = document.activeElement;
-  const row = active?.closest(".k2b-dropdown__row");
-  if (!active || !row) return false;
-  const segments = items.filter(item => row.contains(item));
-  const next = segments.indexOf(active) + (key === "ArrowRight" ? 1 : -1);
-  segments[(next + segments.length) % segments.length]?.focus();
-  return true;
-};
 export const dropdownPosition = (trigger, menu, position, viewport, gap = 4) => {
   let left = trigger.left;
   let top = trigger.bottom + gap;
@@ -106,53 +94,103 @@ export function DropdownItem(props) {
 function DropdownChoiceItem(props) {
   const menu = useContext(MenuContext);
   const checked = () => typeof props.checked === "function" ? props.checked() : props.checked;
-  return (// biome-ignore lint/a11y/useAriaPropsSupportedByRole: the runtime role is always menuitemcheckbox or menuitemradio, both of which support aria-checked.
-    _$ssr(_tmpl$0, _$ssrAttribute("role", props.choice === "checkbox" ? "menuitemcheckbox" : "menuitemradio", false) + _$ssrAttribute("aria-label", _$escape(props.ariaLabel, true), false) + _$ssrAttribute("aria-checked", _$escape(checked(), true), false) + _$ssrAttribute("aria-disabled", props.disabled ? "true" : _$escape(undefined, true), false), `k2b-dropdown__item ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("data-selected", checked() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("disabled", props.disabled, true), _$escape(_$createComponent(Show, {
-      get when() {
-        return props.choice === "checkbox";
-      },
-      get children() {
-        return _$ssr(_tmpl$8, _$escape(_$createComponent(Show, {
-          get when() {
-            return checked();
-          },
-          get children() {
-            return _$ssr(_tmpl$7);
-          }
-        })));
-      }
-    })), _$escape(_$createComponent(Show, {
-      get when() {
-        return props.image;
-      },
-      get fallback() {
-        return _$createComponent(Show, {
-          get when() {
-            return props.icon;
-          },
-          children: icon => _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(icon(), true), false))
-        });
-      },
-      children: image => _$ssr(_tmpl$3, _$ssrAttribute("src", _$escape(image(), true), false))
-    })), _$escape(_$createComponent(Show, {
-      get when() {
-        return props.color;
-      },
-      children: color => _$ssr(_tmpl$1, _$ssrStyleProperty("--k2b-dropdown-color:", _$escape(color(), true)))
-    })), _$escape(props.label), _$escape(_$createComponent(Show, {
-      get when() {
-        return props.description;
-      },
-      children: description => _$ssr(_tmpl$4, _$escape(description()))
-    })), _$escape(_$createComponent(Show, {
-      get when() {
-        return props.choice === "radio";
-      },
-      get children() {
-        return _$ssr(_tmpl$9, _$ssrAttribute("data-hidden", checked() ? _$escape(undefined, true) : "true", false));
+  let element;
+  return _$createComponent(Dynamic, {
+    get component() {
+      return !props.disabled && props.href ? "a" : "button";
+    },
+    get href() {
+      return _$memo(() => !!!props.disabled)() ? props.href : undefined;
+    },
+    get type() {
+      return !props.disabled && props.href ? undefined : "button";
+    },
+    get role() {
+      return props.choice === "checkbox" ? "menuitemcheckbox" : "menuitemradio";
+    },
+    get ["aria-label"]() {
+      return props.ariaLabel;
+    },
+    get ["aria-checked"]() {
+      return checked();
+    },
+    get ["aria-disabled"]() {
+      return props.disabled ? "true" : undefined;
+    },
+    tabIndex: -1,
+    get ["class"]() {
+      return `k2b-dropdown__item ${props.class ?? ""}`;
+    },
+    get ["data-selected"]() {
+      return checked() ? "true" : undefined;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    onClick: event => {
+      if (props.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)) {
+        menu?.close(false);
+        return;
       }
-    })))
-  );
+      event.preventDefault();
+      event.stopPropagation();
+      if (props.closeOnSelect !== false) menu?.close();
+      props.action();
+    },
+    onKeyDown: event => {
+      // A link answers only Enter; as a menu choice it also answers Space, like the button form.
+      if (event.key !== " " || props.disabled || !props.href) return;
+      event.preventDefault();
+      element?.click();
+    },
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return props.choice === "checkbox";
+        },
+        get children() {
+          return _$ssr(_tmpl$8, _$escape(_$createComponent(Show, {
+            get when() {
+              return checked();
+            },
+            get children() {
+              return _$ssr(_tmpl$7);
+            }
+          })));
+        }
+      }), _$createComponent(Show, {
+        get when() {
+          return props.image;
+        },
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return props.icon;
+            },
+            children: icon => _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(icon(), true), false))
+          });
+        },
+        children: image => _$ssr(_tmpl$3, _$ssrAttribute("src", _$escape(image(), true), false))
+      }), _$createComponent(Show, {
+        get when() {
+          return props.color;
+        },
+        children: color => _$ssr(_tmpl$0, _$ssrStyleProperty("--k2b-dropdown-color:", _$escape(color(), true)))
+      }), _$ssr(_tmpl$, _$escape(props.label), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.description;
+        },
+        children: description => _$ssr(_tmpl$4, _$escape(description()))
+      }))), _$createComponent(Show, {
+        get when() {
+          return props.choice === "radio";
+        },
+        get children() {
+          return _$ssr(_tmpl$9, _$ssrAttribute("data-hidden", checked() ? _$escape(undefined, true) : "true", false));
+        }
+      })];
+    }
+  });
 }
 export function DropdownItems(props) {
   const messages = useUiMessages();
@@ -213,11 +251,11 @@ export function DropdownItems(props) {
             return renderItem(item);
           },
           get children() {
-            return _$ssr(_tmpl$11, _$ssrAttribute("data-divided", index() > 0 ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(item.sectionLabel ?? (item.layout === "row" ? undefined : messages().actions), true), false), _$escape(_$createComponent(Show, {
+            return _$ssr(_tmpl$10, _$ssrAttribute("data-divided", index() > 0 ? "true" : _$escape(undefined, true), false), _$ssrAttribute("aria-label", _$escape(item.sectionLabel ?? (item.layout === "row" ? undefined : messages().actions), true), false), _$escape(_$createComponent(Show, {
               get when() {
                 return item.sectionLabel;
               },
-              children: label => _$ssr(_tmpl$12, _$escape(label()))
+              children: label => _$ssr(_tmpl$11, _$escape(label()))
             })), _$escape(_$createComponent(Show, {
               get when() {
                 return item.layout === "row";
@@ -231,7 +269,7 @@ export function DropdownItems(props) {
                 });
               },
               get children() {
-                return _$ssr(_tmpl$10, _$escape(_$createComponent(For, {
+                return _$ssr(_tmpl$1, _$escape(_$createComponent(For, {
                   get each() {
                     return item.items;
                   },
@@ -366,6 +404,9 @@ function DropdownTrigger(props) {
 /** Accessible top-layer menu with explicit trigger ownership. */
 function DropdownRoot(props) {
   const messages = useUiMessages();
+  const locale = useLocale();
+  /** The open phone sheet's cancel switch: it closes when the menu goes or is disabled, as the popover does. */
+  let sheet;
   const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, "-");
   const menuId = `k2b-dropdown-${id}`;
   const [internalOpen, setInternalOpen] = createSignal(false);
@@ -413,6 +454,9 @@ function DropdownRoot(props) {
     // Before hiding, so the popover does not return focus on its own.
     if (restoreFocus) returnFocus(triggerRef, triggerRing);
     if (menuRef?.matches(":popover-open")) menuRef.hidePopover();
+    // Like `open`, expose the closed state now: the toggle event can arrive after the next key press, and a trigger
+    // that still reads as open would ignore Enter (Escape, then Enter at once, must reopen).
+    setInternalOpen(false);
     detachViewportListeners();
   };
   const open = (focus = "first") => {
@@ -433,6 +477,27 @@ function DropdownRoot(props) {
       props.onOpenChange?.(next);
       return;
     }
+    if (next && props.phone === "sheet" && prefersMenuSheet()) {
+      if (sheet) return;
+      const current = new AbortController();
+      sheet = current;
+      // The sheet is this menu's open state: the trigger reports it and the owner hears both ends.
+      setInternalOpen(true);
+      props.onOpenChange?.(true);
+      void openMenuSheet({
+        Items: DropdownItems,
+        items: props.items,
+        label: props.label ?? messages().dropdownMenu,
+        locale: locale(),
+        signal: current.signal
+      }).finally(() => {
+        sheet = undefined;
+        setInternalOpen(false);
+        props.onOpenChange?.(false);
+        props.onClose?.();
+      });
+      return;
+    }
     if (next) open(focus);else close(false);
   };
   const handleMenuKeyDown = event => {
@@ -482,17 +547,20 @@ function DropdownRoot(props) {
     if (!controlled && menuRef.matches(":popover-open")) close(false);
   });
   createEffect(() => {
-    if (mounted && props.disabled) close(false);
+    if (!props.disabled) return;
+    sheet?.abort();
+    if (mounted) close(false);
   });
   onMount(() => {
     mounted = true;
     if (props.open) open(false);
     onCleanup(detachViewportListeners);
   });
+  onCleanup(() => sheet?.abort());
   return _$createComponent(DropdownContext.Provider, {
     value: context,
     get children() {
-      return _$ssr(_tmpl$13, `k2b-dropdown ${_$escape(props.class ?? "", true)}`, _$escape(props.children), _$ssrAttribute("id", _$escape(menuId, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().dropdownMenu, true), false), `k2b-dropdown__menu ${_$escape(props.menuClass ?? "", true)}`, _$ssrStyle(props.width ? {
+      return _$ssr(_tmpl$12, `k2b-dropdown ${_$escape(props.class ?? "", true)}`, _$escape(props.children), _$ssrAttribute("id", _$escape(menuId, true), false), _$ssrAttribute("aria-label", _$escape(props.label ?? messages().dropdownMenu, true), false), `k2b-dropdown__menu ${_$escape(props.menuClass ?? "", true)}`, _$ssrStyle(props.width ? {
         "--k2b-dropdown-width": props.width
       } : undefined), _$ssrAttribute("data-width", props.width ? "fixed" : _$escape(undefined, true), false) + _$ssrAttribute("data-variant", _$escape(props.variant ?? "default", true), false) + _$ssrAttribute("data-position", _$escape(position(), true), false), _$escape(_$createComponent(DropdownItems, {
         get items() {