@k2b/ui 0.32.0 → 0.34.0

package/dist/base.css

@@ -967,10 +967,23 @@
   }
 
   .stdlib-chart :is(.stdlib-chart-tick-label, .stdlib-chart-bar-value, .stdlib-chart-axis-label) {
-    font-family: var(--k2b-font-mono);
     font-variant-numeric: tabular-nums;
   }
 
+  .stdlib-chart .stdlib-chart-category-label { font-size: 11px; opacity: 0.8; }
+  .stdlib-chart .stdlib-chart-bar-value { font-size: 11px; opacity: 0.9; }
+  .stdlib-chart .stdlib-chart-axis-label { font-weight: 500; }
+
+  /* Horizontal bar rows keep their own height; a shorter box scrolls. */
+  .k2b-chart:has(> .k2b-chart__svg > svg[data-bar-layout="rows"]) {
+    overflow-y: auto;
+  }
+
+  .k2b-chart__svg:has(> svg[data-bar-layout="rows"]) {
+    flex: none;
+    height: var(--k2b-chart-height);
+  }
+
   .stdlib-chart-series-0 { fill: var(--stdlib-chart-c1); stroke: var(--stdlib-chart-c1); }
   .stdlib-chart-series-1 { fill: var(--stdlib-chart-c2); stroke: var(--stdlib-chart-c2); }
   .stdlib-chart-series-2 { fill: var(--stdlib-chart-c3); stroke: var(--stdlib-chart-c3); }

package/dist/browser/actions/ContextMenu.js

@@ -19,6 +19,7 @@ import { returnFocus, ringOnReturn } from "../internal/focus-return";
 import { useUiMessages } from "../intl/messages";
 import { DropdownItems, dropdownPosition } from "./Dropdown";
 import { focusRowSegment } from "./menu-rows";
+const NATIVE_MENU_TARGETS = "a[href], input, textarea, select, [contenteditable]:not([contenteditable='false'])";
 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(", "))) : [];
 
@@ -52,6 +53,14 @@ export function ContextMenuBase(props) {
   };
   let resizeObserver;
   const isOpen = () => position() !== undefined;
+  const keepsNativeMenu = target => {
+    if (!props.keepNativeMenu || !(target instanceof Node)) return false;
+    const element = target instanceof Element ? target : target.parentElement;
+    const native = element?.closest(NATIVE_MENU_TARGETS);
+    if (native && host?.contains(native)) return true;
+    const selection = window.getSelection();
+    return Boolean(selection && !selection.isCollapsed && selection.toString().trim() && selection.containsNode(target, true));
+  };
   const hostClass = createMemo(() => typeof props.class === "function" ? props.class(isOpen()) : props.class);
   const items = createMemo(() => props.items);
   const dismiss = event => {
@@ -181,6 +190,8 @@ export function ContextMenuBase(props) {
     var _el$ = _$getNextElement(_tmpl$);
     _el$.$$keydown = event => {
       if (props.disabled || event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return;
+      // A nested context menu already opened its own; a field keeps the browser's.
+      if (event.defaultPrevented || props.keepNativeMenu && event.target instanceof Element && event.target.closest(NATIVE_MENU_TARGETS)) return;
       event.preventDefault();
       // Beside the focused element, such as a row of a composite widget, rather than the corner of the whole host.
       const focused = document.activeElement;
@@ -189,6 +200,8 @@ export function ContextMenuBase(props) {
     };
     _el$.$$contextmenu = event => {
       if (props.disabled) return;
+      // An enclosing context menu must not take over the browser's own either.
+      if (keepsNativeMenu(event.target)) return void event.stopPropagation();
       event.preventDefault();
       event.stopPropagation();
       open(event.clientX, event.clientY);

package/dist/browser/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 } 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":[]}
+{"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   * Links, form fields, editable text, and selected text inside the host keep the browser's own menu, with its Copy,\n   * Paste, and Open link. Use it where the host wraps readable content rather than one row.\n   */\n  keepNativeMenu?: boolean;\n};\n\nconst NATIVE_MENU_TARGETS = \"a[href], input, textarea, select, [contenteditable]:not([contenteditable='false'])\";\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 keepsNativeMenu = (target: EventTarget | null): boolean => {\n    if (!props.keepNativeMenu || !(target instanceof Node)) return false;\n    const element = target instanceof Element ? target : target.parentElement;\n    const native = element?.closest(NATIVE_MENU_TARGETS);\n    if (native && host?.contains(native)) return true;\n    const selection = window.getSelection();\n    return Boolean(selection && !selection.isCollapsed && selection.toString().trim() && selection.containsNode(target, true));\n  };\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          // An enclosing context menu must not take over the browser's own either.\n          if (keepsNativeMenu(event.target)) return void event.stopPropagation();\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          // A nested context menu already opened its own; a field keeps the browser's.\n          if (\n            event.defaultPrevented ||\n            (props.keepNativeMenu && event.target instanceof Element && event.target.closest(NATIVE_MENU_TARGETS))\n          )\n            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/browser/actions/Dropdown.js

@@ -3,8 +3,8 @@ import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
-import { mergeProps as _$mergeProps } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
@@ -21,15 +21,17 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-dropdown__copy><span></spa
   _tmpl$4 = /*#__PURE__*/_$template(`<small>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<button type=button role=menuitem tabindex=-1>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<a role=menuitem tabindex=-1>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<i class="ti ti-check">`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__checkbox aria-hidden=true>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<i class="ti ti-check k2b-dropdown__check"aria-hidden=true>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__color aria-hidden=true>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__row>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__section role=group><!$><!/><!$><!/>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__label>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<button>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<span><!$><!/><div popover=auto role=menu>`);
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__pair><!$><!/><!$><!/>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-check">`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__checkbox aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<i class="ti ti-check k2b-dropdown__check"aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-dropdown__color aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__row>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__section role=group><!$><!/><!$><!/>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-dropdown__label>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div class="k2b-dropdown__label k2b-dropdown__label--action"><span></span><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<button>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span><!$><!/><div popover=auto role=menu>`);
 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";
@@ -37,19 +39,21 @@ 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 { focusMenuRow, 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;
 
+/** A second, smaller action at the end of a row, such as "Only" beside a checkbox; it keeps the menu open. */
+
 /** Declarative radio or checkbox row for compact action menus. */
 
 const MenuContext = createContext();
 const DropdownContext = createContext();
 const actionableItems = 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(", "))) : [];
 const focusMenuItem = (menu, index) => {
-  const items = actionableItems(menu);
+  const items = actionableItems(menu).filter(item => !item.classList.contains("k2b-dropdown__secondary"));
   if (items.length === 0) return;
   items[(index + items.length) % items.length]?.focus();
 };
@@ -188,6 +192,51 @@ export function DropdownItem(props) {
   });
 }
 function DropdownChoiceItem(props) {
+  return _$createComponent(Show, {
+    get when() {
+      return props.secondary;
+    },
+    get fallback() {
+      return _$createComponent(DropdownChoiceRow, props);
+    },
+    children: secondary => (() => {
+      var _el$0 = _$getNextElement(_tmpl$7),
+        _el$1 = _el$0.firstChild,
+        [_el$10, _co$2] = _$getNextMarker(_el$1.nextSibling),
+        _el$11 = _el$10.nextSibling,
+        [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling);
+      _$insert(_el$0, _$createComponent(DropdownChoiceRow, props), _el$10, _co$2);
+      _$insert(_el$0, _$createComponent(DropdownSecondaryButton, _$mergeProps(secondary, {
+        "class": "k2b-dropdown__secondary"
+      })), _el$12, _co$3);
+      return _el$0;
+    })()
+  });
+}
+function DropdownSecondaryButton(props) {
+  return (() => {
+    var _el$13 = _$getNextElement(_tmpl$5);
+    _el$13.$$click = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      props.action();
+    };
+    _$insert(_el$13, () => props.label);
+    _$effect(_p$ => {
+      var _v$10 = props.class,
+        _v$11 = props.ariaLabel;
+      _v$10 !== _p$.e && _$className(_el$13, _p$.e = _v$10);
+      _v$11 !== _p$.t && _$setAttribute(_el$13, "aria-label", _p$.t = _v$11);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    _$runHydrationEvents();
+    return _el$13;
+  })();
+}
+function DropdownChoiceRow(props) {
   const menu = useContext(MenuContext);
   const checked = () => typeof props.checked === "function" ? props.checked() : props.checked;
   let element;
@@ -248,16 +297,16 @@ function DropdownChoiceItem(props) {
           return props.choice === "checkbox";
         },
         get children() {
-          var _el$0 = _$getNextElement(_tmpl$8);
-          _$insert(_el$0, _$createComponent(Show, {
+          var _el$14 = _$getNextElement(_tmpl$9);
+          _$insert(_el$14, _$createComponent(Show, {
             get when() {
               return checked();
             },
             get children() {
-              return _$getNextElement(_tmpl$7);
+              return _$getNextElement(_tmpl$8);
             }
           }));
-          return _el$0;
+          return _el$14;
         }
       }), _$createComponent(Show, {
         get when() {
@@ -269,51 +318,51 @@ function DropdownChoiceItem(props) {
               return props.icon;
             },
             children: icon => (() => {
-              var _el$15 = _$getNextElement(_tmpl$2);
-              _$effect(() => _$className(_el$15, icon()));
-              return _el$15;
+              var _el$21 = _$getNextElement(_tmpl$2);
+              _$effect(() => _$className(_el$21, icon()));
+              return _el$21;
             })()
           });
         },
         children: image => (() => {
-          var _el$16 = _$getNextElement(_tmpl$3);
-          _$effect(() => _$setAttribute(_el$16, "src", image()));
-          return _el$16;
+          var _el$22 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$setAttribute(_el$22, "src", image()));
+          return _el$22;
         })()
       }), _$createComponent(Show, {
         get when() {
           return props.color;
         },
         children: color => (() => {
-          var _el$17 = _$getNextElement(_tmpl$0);
-          _$effect(_$p => _$setStyleProperty(_el$17, "--k2b-dropdown-color", color()));
-          return _el$17;
+          var _el$23 = _$getNextElement(_tmpl$1);
+          _$effect(_$p => _$setStyleProperty(_el$23, "--k2b-dropdown-color", color()));
+          return _el$23;
         })()
       }), (() => {
-        var _el$10 = _$getNextElement(_tmpl$),
-          _el$11 = _el$10.firstChild,
-          _el$12 = _el$11.nextSibling,
-          [_el$13, _co$2] = _$getNextMarker(_el$12.nextSibling);
-        _$insert(_el$11, () => props.label);
-        _$insert(_el$10, _$createComponent(Show, {
+        var _el$16 = _$getNextElement(_tmpl$),
+          _el$17 = _el$16.firstChild,
+          _el$18 = _el$17.nextSibling,
+          [_el$19, _co$4] = _$getNextMarker(_el$18.nextSibling);
+        _$insert(_el$17, () => props.label);
+        _$insert(_el$16, _$createComponent(Show, {
           get when() {
             return props.description;
           },
           children: description => (() => {
-            var _el$18 = _$getNextElement(_tmpl$4);
-            _$insert(_el$18, description);
-            return _el$18;
+            var _el$24 = _$getNextElement(_tmpl$4);
+            _$insert(_el$24, description);
+            return _el$24;
           })()
-        }), _el$13, _co$2);
-        return _el$10;
+        }), _el$19, _co$4);
+        return _el$16;
       })(), _$memo(() => props.trailing), _$createComponent(Show, {
         get when() {
           return props.choice === "radio";
         },
         get children() {
-          var _el$14 = _$getNextElement(_tmpl$9);
-          _$effect(() => _$setAttribute(_el$14, "data-hidden", checked() ? undefined : "true"));
-          return _el$14;
+          var _el$20 = _$getNextElement(_tmpl$0);
+          _$effect(() => _$setAttribute(_el$20, "data-hidden", checked() ? undefined : "true"));
+          return _el$20;
         }
       })];
     }
@@ -381,22 +430,40 @@ export function DropdownItems(props) {
             return renderItem(item);
           },
           get children() {
-            var _el$19 = _$getNextElement(_tmpl$10),
-              _el$21 = _el$19.firstChild,
-              [_el$22, _co$3] = _$getNextMarker(_el$21.nextSibling),
-              _el$23 = _el$22.nextSibling,
-              [_el$24, _co$4] = _$getNextMarker(_el$23.nextSibling);
-            _$insert(_el$19, _$createComponent(Show, {
+            var _el$25 = _$getNextElement(_tmpl$11),
+              _el$27 = _el$25.firstChild,
+              [_el$28, _co$5] = _$getNextMarker(_el$27.nextSibling),
+              _el$29 = _el$28.nextSibling,
+              [_el$30, _co$6] = _$getNextMarker(_el$29.nextSibling);
+            _$insert(_el$25, _$createComponent(Show, {
               get when() {
                 return item.sectionLabel;
               },
-              children: label => (() => {
-                var _el$25 = _$getNextElement(_tmpl$11);
-                _$insert(_el$25, label);
-                return _el$25;
-              })()
-            }), _el$22, _co$3);
-            _$insert(_el$19, _$createComponent(Show, {
+              children: label => _$createComponent(Show, {
+                get when() {
+                  return item.labelAction;
+                },
+                get fallback() {
+                  return (() => {
+                    var _el$31 = _$getNextElement(_tmpl$12);
+                    _$insert(_el$31, label);
+                    return _el$31;
+                  })();
+                },
+                children: action => (() => {
+                  var _el$32 = _$getNextElement(_tmpl$13),
+                    _el$33 = _el$32.firstChild,
+                    _el$34 = _el$33.nextSibling,
+                    [_el$35, _co$7] = _$getNextMarker(_el$34.nextSibling);
+                  _$insert(_el$33, label);
+                  _$insert(_el$32, _$createComponent(DropdownSecondaryButton, _$mergeProps(action, {
+                    "class": "k2b-dropdown__label-action"
+                  })), _el$35, _co$7);
+                  return _el$32;
+                })()
+              })
+            }), _el$28, _co$5);
+            _$insert(_el$25, _$createComponent(Show, {
               get when() {
                 return item.layout === "row";
               },
@@ -409,27 +476,27 @@ export function DropdownItems(props) {
                 });
               },
               get children() {
-                var _el$20 = _$getNextElement(_tmpl$1);
-                _$insert(_el$20, _$createComponent(For, {
+                var _el$26 = _$getNextElement(_tmpl$10);
+                _$insert(_el$26, _$createComponent(For, {
                   get each() {
                     return item.items;
                   },
                   children: renderItem
                 }));
-                return _el$20;
+                return _el$26;
               }
-            }), _el$24, _co$4);
+            }), _el$30, _co$6);
             _$effect(_p$ => {
-              var _v$10 = index() > 0 ? "true" : undefined,
-                _v$11 = item.sectionLabel ?? (item.layout === "row" ? undefined : messages().actions);
-              _v$10 !== _p$.e && _$setAttribute(_el$19, "data-divided", _p$.e = _v$10);
-              _v$11 !== _p$.t && _$setAttribute(_el$19, "aria-label", _p$.t = _v$11);
+              var _v$12 = index() > 0 ? "true" : undefined,
+                _v$13 = item.sectionLabel ?? (item.layout === "row" ? undefined : messages().actions);
+              _v$12 !== _p$.e && _$setAttribute(_el$25, "data-divided", _p$.e = _v$12);
+              _v$13 !== _p$.t && _$setAttribute(_el$25, "aria-label", _p$.t = _v$13);
               return _p$;
             }, {
               e: undefined,
               t: undefined
             });
-            return _el$19;
+            return _el$25;
           }
         })
       });
@@ -506,9 +573,9 @@ function DropdownTrigger(props) {
     }));
   }
   return [(() => {
-    var _el$26 = _$getNextElement(_tmpl$12);
-    _$use(register, _el$26);
-    _$spread(_el$26, _$mergeProps(rest, {
+    var _el$36 = _$getNextElement(_tmpl$14);
+    _$use(register, _el$36);
+    _$spread(_el$36, _$mergeProps(rest, {
       get ["aria-controls"]() {
         return context.menuId;
       },
@@ -539,9 +606,9 @@ function DropdownTrigger(props) {
         return iconTitle(local.title, tooltip());
       }
     }), false, true);
-    _$insert(_el$26, () => local.children);
+    _$insert(_el$36, () => local.children);
     _$runHydrationEvents();
-    return _el$26;
+    return _el$36;
   })(), _$createComponent(Show, {
     get when() {
       return _$memo(() => tooltip() !== false)() && tooltip() !== undefined;
@@ -575,6 +642,7 @@ function DropdownRoot(props) {
   const id = createUniqueId().replace(/[^a-zA-Z0-9_-]/g, "-");
   const menuId = `k2b-dropdown-${id}`;
   const [internalOpen, setInternalOpen] = createSignal(false);
+  const [entriesShown, setEntriesShown] = createSignal(!props.lazy);
   let triggerRef;
   let menuRef;
   let triggerRing = true;
@@ -627,6 +695,8 @@ function DropdownRoot(props) {
   const open = (focus = "first") => {
     if (props.disabled || !menuRef || menuRef.matches(":popover-open")) return;
     triggerRing = ringOnReturn(triggerRef);
+    // A lazy menu's entries exist before it shows, so it places and focuses them as any other.
+    setEntriesShown(true);
     menuRef.showPopover();
     // The toggle event arrives a task later; expose the open state before focus moves into the menu.
     setInternalOpen(true);
@@ -667,15 +737,8 @@ function DropdownRoot(props) {
   };
   const handleMenuKeyDown = event => {
     const items = actionableItems(menuRef);
-    const current = items.indexOf(document.activeElement);
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      focusMenuItem(menuRef, current + (event.key === "ArrowDown" ? 1 : -1));
-    } else if (focusRowSegment(items, event.key)) {
+    if (focusMenuRow(items, event.key) || focusRowSegment(items, event.key)) {
       event.preventDefault();
-    } else if (event.key === "Home" || event.key === "End") {
-      event.preventDefault();
-      focusMenuItem(menuRef, event.key === "Home" ? 0 : -1);
     } else if (event.key === "Escape") {
       event.preventDefault();
       returnFocus(triggerRef, triggerRing);
@@ -725,47 +788,55 @@ function DropdownRoot(props) {
   return _$createComponent(DropdownContext.Provider, {
     value: context,
     get children() {
-      var _el$27 = _$getNextElement(_tmpl$13),
-        _el$29 = _el$27.firstChild,
-        [_el$30, _co$5] = _$getNextMarker(_el$29.nextSibling),
-        _el$28 = _el$30.nextSibling;
-      _$insert(_el$27, () => props.children, _el$30, _co$5);
-      _el$28.addEventListener("toggle", event => {
+      var _el$37 = _$getNextElement(_tmpl$15),
+        _el$39 = _el$37.firstChild,
+        [_el$40, _co$8] = _$getNextMarker(_el$39.nextSibling),
+        _el$38 = _el$40.nextSibling;
+      _$insert(_el$37, () => props.children, _el$40, _co$8);
+      _el$38.addEventListener("toggle", event => {
         const nextOpen = event.newState === "open";
         const wasOpen = event.oldState === "open";
         setInternalOpen(nextOpen);
+        if (nextOpen) setEntriesShown(true);
         if (nextOpen) attachViewportListeners();else detachViewportListeners();
         if (props.open === undefined || props.open !== nextOpen) props.onOpenChange?.(nextOpen);
         if (wasOpen && !nextOpen) props.onClose?.();
         if (!nextOpen && props.open === true) queueMicrotask(() => props.open === true && open(false));
       });
-      _el$28.$$keydown = handleMenuKeyDown;
+      _el$38.$$keydown = handleMenuKeyDown;
       var _ref$ = menuRef;
-      typeof _ref$ === "function" ? _$use(_ref$, _el$28) : menuRef = _el$28;
-      _$setAttribute(_el$28, "id", menuId);
-      _$insert(_el$28, _$createComponent(DropdownItems, {
-        get items() {
-          return props.items;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$38) : menuRef = _el$38;
+      _$setAttribute(_el$38, "id", menuId);
+      _$insert(_el$38, _$createComponent(Show, {
+        get when() {
+          return entriesShown();
         },
-        close: close
+        get children() {
+          return _$createComponent(DropdownItems, {
+            get items() {
+              return props.items;
+            },
+            close: close
+          });
+        }
       }));
       _$effect(_p$ => {
-        var _v$12 = `k2b-dropdown ${props.class ?? ""}`,
-          _v$13 = props.label ?? messages().dropdownMenu,
-          _v$14 = `k2b-dropdown__menu ${props.menuClass ?? ""}`,
-          _v$15 = props.width ? {
+        var _v$14 = `k2b-dropdown ${props.class ?? ""}`,
+          _v$15 = props.label ?? messages().dropdownMenu,
+          _v$16 = `k2b-dropdown__menu ${props.menuClass ?? ""}`,
+          _v$17 = props.width ? {
             "--k2b-dropdown-width": props.width
           } : undefined,
-          _v$16 = props.width ? "fixed" : undefined,
-          _v$17 = props.variant ?? "default",
-          _v$18 = position();
-        _v$12 !== _p$.e && _$className(_el$27, _p$.e = _v$12);
-        _v$13 !== _p$.t && _$setAttribute(_el$28, "aria-label", _p$.t = _v$13);
-        _v$14 !== _p$.a && _$className(_el$28, _p$.a = _v$14);
-        _p$.o = _$style(_el$28, _v$15, _p$.o);
-        _v$16 !== _p$.i && _$setAttribute(_el$28, "data-width", _p$.i = _v$16);
-        _v$17 !== _p$.n && _$setAttribute(_el$28, "data-variant", _p$.n = _v$17);
-        _v$18 !== _p$.s && _$setAttribute(_el$28, "data-position", _p$.s = _v$18);
+          _v$18 = props.width ? "fixed" : undefined,
+          _v$19 = props.variant ?? "default",
+          _v$20 = position();
+        _v$14 !== _p$.e && _$className(_el$37, _p$.e = _v$14);
+        _v$15 !== _p$.t && _$setAttribute(_el$38, "aria-label", _p$.t = _v$15);
+        _v$16 !== _p$.a && _$className(_el$38, _p$.a = _v$16);
+        _p$.o = _$style(_el$38, _v$17, _p$.o);
+        _v$18 !== _p$.i && _$setAttribute(_el$38, "data-width", _p$.i = _v$18);
+        _v$19 !== _p$.n && _$setAttribute(_el$38, "data-variant", _p$.n = _v$19);
+        _v$20 !== _p$.s && _$setAttribute(_el$38, "data-position", _p$.s = _v$20);
         return _p$;
       }, {
         e: undefined,
@@ -777,7 +848,7 @@ function DropdownRoot(props) {
         s: undefined
       });
       _$runHydrationEvents();
-      return _el$27;
+      return _el$37;
     }
   });
 }