@k2b/ui 0.31.0 → 0.33.0

package/dist/base.css

@@ -64,6 +64,7 @@
     --k2b-danger-text: light-dark(#b91c1c, #fca5a5);
     /* light-dark() only takes colors, so the shadow switches with the theme attribute. */
     --k2b-shadow-float: 0 18px 48px rgb(9 9 11 / 0.18);
+    --k2b-shadow-side: -14px 0 36px rgb(9 9 11 / 0.16);
     /* What an inspected mark's color mixes with: darker in light, lighter in dark. */
     --k2b-chart-highlight-mix: light-dark(black, white);
   }
@@ -71,6 +72,7 @@
   :root[data-theme="dark"] {
     color-scheme: dark;
     --k2b-shadow-float: 0 22px 56px rgb(0 0 0 / 0.52);
+    --k2b-shadow-side: -16px 0 40px rgb(0 0 0 / 0.5);
   }
 
   *,

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;
@@ -667,15 +734,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)) {
-      event.preventDefault();
-    } else if (event.key === "Home" || event.key === "End") {
+    if (focusMenuRow(items, event.key) || focusRowSegment(items, event.key)) {
       event.preventDefault();
-      focusMenuItem(menuRef, event.key === "Home" ? 0 : -1);
     } else if (event.key === "Escape") {
       event.preventDefault();
       returnFocus(triggerRef, triggerRing);
@@ -725,12 +785,12 @@ 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);
@@ -739,33 +799,33 @@ function DropdownRoot(props) {
         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, {
+      typeof _ref$ === "function" ? _$use(_ref$, _el$38) : menuRef = _el$38;
+      _$setAttribute(_el$38, "id", menuId);
+      _$insert(_el$38, _$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 +837,7 @@ function DropdownRoot(props) {
         s: undefined
       });
       _$runHydrationEvents();
-      return _el$27;
+      return _el$37;
     }
   });
 }