@smwb/ui-solid 0.13.0 → 1.0.0

package/dist/components/navigation/commandPalette/commandPaletteNavigation.js

@@ -0,0 +1,38 @@
+function c(e, o) {
+  for (let t = 0; t < e; t++)
+    if (o(t))
+      return t;
+  return -1;
+}
+function u(e, o) {
+  for (let t = e - 1; t >= 0; t--)
+    if (o(t))
+      return t;
+  return -1;
+}
+function p(e, o, t, n) {
+  if (t < 0)
+    return n > 0 ? c(e, o) : u(e, o);
+  const i = n > 0 ? 1 : -1;
+  let l = t, f = Math.abs(n);
+  for (let r = t + i; r >= 0 && r < e && f > 0; r += i)
+    o(r) && (l = r, f--);
+  return l;
+}
+function g(e, o) {
+  for (let t = e.parentElement; t; t = t.parentElement) {
+    if (t.scrollHeight > t.clientHeight) {
+      const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+      i.top < n.top ? t.scrollTop -= n.top - i.top : i.bottom > n.bottom && (t.scrollTop += i.bottom - n.bottom);
+    }
+    if (t === o)
+      break;
+  }
+}
+export {
+  c as firstOption,
+  g as keepInView,
+  u as lastOption,
+  p as moveOption
+};
+//# sourceMappingURL=commandPaletteNavigation.js.map

package/dist/components/navigation/commandPalette/commandPaletteNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commandPaletteNavigation.js","sources":["../../../../src/components/navigation/commandPalette/commandPaletteNavigation.ts"],"sourcesContent":["// Moves of the active option over the palette's options, by index in the order they are drawn.\n// A disabled option is passed over. A copy of the helpers of the select field's listbox: importing\n// them from there would make the palette depend on the select field's styles.\n\nexport type IsOptionEnabled = (index: number) => boolean;\n\n/** The first enabled option, or -1. */\nexport function firstOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = 0; index < count; index++) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/** The last enabled option, or -1. */\nexport function lastOption(count: number, isEnabled: IsOptionEnabled): number {\n  for (let index = count - 1; index >= 0; index--) {\n    if (isEnabled(index)) {\n      return index;\n    }\n  }\n  return -1;\n}\n\n/**\n * The enabled option `steps` options after `from` (before it for a negative\n * count), stopping at the first or the last one. With no active option, a move\n * down starts at the first option and a move up at the last.\n */\nexport function moveOption(count: number, isEnabled: IsOptionEnabled, from: number, steps: number): number {\n  if (from < 0) {\n    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);\n  }\n  const direction = steps > 0 ? 1 : -1;\n  let result = from;\n  let left = Math.abs(steps);\n  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {\n    if (isEnabled(index)) {\n      result = index;\n      left--;\n    }\n  }\n  return result;\n}\n\n/** Scrolls each scrolling box from the element up to `root` so the element shows. */\nexport function keepInView(element: HTMLElement, root: HTMLElement | null) {\n  for (let box = element.parentElement; box; box = box.parentElement) {\n    if (box.scrollHeight > box.clientHeight) {\n      const outer = box.getBoundingClientRect();\n      const inner = element.getBoundingClientRect();\n      if (inner.top < outer.top) {\n        box.scrollTop -= outer.top - inner.top;\n      } else if (inner.bottom > outer.bottom) {\n        box.scrollTop += inner.bottom - outer.bottom;\n      }\n    }\n    if (box === root) {\n      break;\n    }\n  }\n}\n"],"names":["firstOption","count","isEnabled","index","lastOption","moveOption","from","steps","direction","result","left","keepInView","element","root","box","outer","inner"],"mappings":"AAOO,SAASA,EAAYC,GAAeC,GAAoC;AAC7E,WAASC,IAAQ,GAAGA,IAAQF,GAAOE;AACjC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAGO,SAASC,EAAWH,GAAeC,GAAoC;AAC5E,WAASC,IAAQF,IAAQ,GAAGE,KAAS,GAAGA;AACtC,QAAID,EAAUC,CAAK;AACjB,aAAOA;AAGX,SAAO;AACT;AAOO,SAASE,EAAWJ,GAAeC,GAA4BI,GAAcC,GAAuB;AACzG,MAAID,IAAO;AACT,WAAOC,IAAQ,IAAIP,EAAYC,GAAOC,CAAS,IAAIE,EAAWH,GAAOC,CAAS;AAEhF,QAAMM,IAAYD,IAAQ,IAAI,IAAI;AAClC,MAAIE,IAASH,GACTI,IAAO,KAAK,IAAIH,CAAK;AACzB,WAASJ,IAAQG,IAAOE,GAAWL,KAAS,KAAKA,IAAQF,KAASS,IAAO,GAAGP,KAASK;AACnF,IAAIN,EAAUC,CAAK,MACjBM,IAASN,GACTO;AAGJ,SAAOD;AACT;AAGO,SAASE,EAAWC,GAAsBC,GAA0B;AACzE,WAASC,IAAMF,EAAQ,eAAeE,GAAKA,IAAMA,EAAI,eAAe;AAClE,QAAIA,EAAI,eAAeA,EAAI,cAAc;AACvC,YAAMC,IAAQD,EAAI,sBAAA,GACZE,IAAQJ,EAAQ,sBAAA;AACtB,MAAII,EAAM,MAAMD,EAAM,MACpBD,EAAI,aAAaC,EAAM,MAAMC,EAAM,MAC1BA,EAAM,SAASD,EAAM,WAC9BD,EAAI,aAAaE,EAAM,SAASD,EAAM;AAAA,IAE1C;AACA,QAAID,MAAQD;AACV;AAAA,EAEJ;AACF;"}

package/dist/components/navigation/commandPalette/commandPaletteTypes.d.ts

@@ -0,0 +1,39 @@
+import type { JSX } from "solid-js";
+export interface CommandPaletteItem {
+    /** Identifies the item within its group: keeps it active across result updates; also `data-item-id`. */
+    id: string;
+    /** The item's text. Names its option and is searched by the default filter. */
+    label: string;
+    /** A second, quieter line, e.g. a path or the project a run belongs to. Searched; describes the option. */
+    subtitle?: string | undefined;
+    /** Extra words the default filter matches on (synonyms, ids, the group name). Not shown. */
+    keywords?: string[] | undefined;
+    /** An icon name from the smwb set, or a node, drawn before the label. Hidden from assistive technology. */
+    icon?: string | JSX.Element | undefined;
+    /**
+     * The item's own shortcut in `Kbd` key names, e.g. `["Mod", "Shift", "P"]`, drawn with `Kbd` at the end of the row.
+     * Display only: the palette does not bind it.
+     */
+    shortcut?: string[] | undefined;
+    /** Drawn dimmed, skipped by the arrow keys, and cannot be chosen. */
+    disabled?: boolean | undefined;
+    /** Runs when the item is chosen (Enter or a click), after the palette has asked to close. */
+    onSelect?: (() => void) | undefined;
+}
+export interface CommandPaletteGroup {
+    /** Stable key of the group; its label when not given. Item ids need to be unique only within a group. */
+    id?: string | undefined;
+    /** The group heading; also the accessible name of the group. */
+    label: string;
+    /** The group's items in the order they are shown. */
+    items: CommandPaletteItem[];
+}
+/**
+ * Loads results for `query` (already trimmed). Called after the debounce; `signal` is aborted when a newer query,
+ * a close or an unmount makes the answer useless. Rejecting with anything but an abort shows the error state.
+ */
+export type CommandPaletteSource = (query: string, context: {
+    signal: AbortSignal;
+}) => Promise<CommandPaletteGroup[]>;
+/** Decides whether `item` matches `query` (the raw query; may be empty). */
+export type CommandPaletteFilter = (item: CommandPaletteItem, query: string) => boolean;

package/dist/components/navigation/commandPalette/index.d.ts

@@ -0,0 +1,6 @@
+export { CommandPalette, default } from "./commandPalette";
+export type { CommandPaletteProps } from "./commandPalette";
+export type { CommandPaletteFilter, CommandPaletteGroup, CommandPaletteItem, CommandPaletteSource, } from "./commandPaletteTypes";
+export { commandPaletteFilter, normalizeSearchText } from "./commandPaletteFilter";
+export { createKeyboardShortcut } from "../../../primitives/createKeyboardShortcut";
+export type { CreateKeyboardShortcutOptions } from "../../../primitives/createKeyboardShortcut";

package/dist/components/navigation/sidebar/sidebar.d.ts

@@ -29,6 +29,16 @@ export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
     onCollapsedChange?: (collapsed: boolean) => void;
     /** Accessible label for the built-in collapse toggle. */
     collapseToggleAriaLabel?: string;
+    /**
+     * Place the rail inside its container instead of pinning it to the window.
+     * The sidebar stays in the page flow (`position: relative`), keeps its
+     * variant width as a non-shrinking flex item and scrolls a long menu inside
+     * itself, so sibling content flows beside it and reflows when it collapses.
+     * Give the container a definite height (e.g. a fixed-height flex row) to
+     * make the rail fill it; with an auto-height container the rail sizes
+     * itself to the menu. Defaults to `false`: the sidebar stays viewport-fixed.
+     */
+    contained?: boolean;
     ref?: Ref<HTMLElement>;
 }
 export declare function Sidebar(props: SidebarProps): JSX.Element;

package/dist/components/navigation/sidebar/sidebar.js

@@ -1,7 +1,7 @@
 import { use as k, spread as y, mergeProps as A, insert as c, createComponent as n, effect as R, setAttribute as C, template as p, Dynamic as T, delegateEvents as D } from "solid-js/web";
 import '../../../assets/styles/less/components/sidebar/sidebar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import { mergeProps as L, splitProps as I, Show as v, For as S, children as V } from "solid-js";
+import { mergeProps as L, splitProps as I, Show as d, For as S, children as V } from "solid-js";
 import $ from "clsx";
 import { createControllableState as w } from "../../../primitives/createControllableState.js";
 import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
@@ -30,7 +30,7 @@ function x(u) {
     }
   }, e, {
     get children() {
-      return [n(v, {
+      return [n(d, {
         get when() {
           return m();
         },
@@ -38,7 +38,7 @@ function x(u) {
           var t = M();
           return c(t, m), t;
         }
-      }), n(v, {
+      }), n(d, {
         get when() {
           return l.title;
         },
@@ -58,8 +58,9 @@ function X(u) {
     defaultActiveItem: null,
     collapsible: !1,
     defaultCollapsed: !1,
-    collapseToggleAriaLabel: "Toggle navigation"
-  }, u), [e, s] = I(l, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "ref"]), [m, d] = w({
+    collapseToggleAriaLabel: "Toggle navigation",
+    contained: !1
+  }, u), [e, s] = I(l, ["class", "variant", "menuItems", "activeItem", "defaultActiveItem", "onActiveItemChange", "collapsible", "collapsed", "defaultCollapsed", "onCollapsedChange", "collapseToggleAriaLabel", "contained", "ref"]), [m, v] = w({
     value: () => e.activeItem,
     defaultValue: e.defaultActiveItem,
     onChange: (r) => {
@@ -76,13 +77,14 @@ function X(u) {
       get class() {
         return $("smwb-sidebar", e.class, `smwb-${f()}`, {
           "smwb-sidebar_collapsible": e.collapsible,
-          "smwb-sidebar_collapsed": e.collapsible && t()
+          "smwb-sidebar_collapsed": e.collapsible && t(),
+          "smwb-sidebar_contained": e.contained
         });
       },
       get role() {
         return s.role ?? "menubar";
       }
-    }), !1, !0), c(r, n(v, {
+    }), !1, !0), c(r, n(d, {
       get when() {
         return e.collapsible;
       },
@@ -94,8 +96,8 @@ function X(u) {
           },
           size: 20
         })), R((o) => {
-          var h = e.collapseToggleAriaLabel, _ = !t();
-          return h !== o.e && C(i, "aria-label", o.e = h), _ !== o.t && C(i, "aria-expanded", o.t = _), o;
+          var _ = e.collapseToggleAriaLabel, h = !t();
+          return _ !== o.e && C(i, "aria-label", o.e = _), h !== o.t && C(i, "aria-expanded", o.t = h), o;
         }, {
           e: void 0,
           t: void 0
@@ -113,7 +115,7 @@ function X(u) {
           return m() === i();
         },
         onClick: (o) => {
-          d(i()), typeof a.onClick == "function" && a.onClick(o);
+          v(i()), typeof a.onClick == "function" && a.onClick(o);
         },
         get icon() {
           return a.icon;

package/dist/components/navigation/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SidebarVariant = \"compact\" | \"default\" | \"compactMini\";\n\nexport interface SidebarMenuItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title: string;\n  isActive?: boolean;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  as?: string | undefined;\n  href?: string | undefined;\n  variant?: SidebarVariant | undefined;\n}\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: SidebarVariant;\n  menuItems?: SidebarMenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nfunction NavItem(props: SidebarMenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"variant\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  // Resolve the icon in THIS item's context. A pre-created element passed via\n  // menuItems is keyed at the consumer's position but rendered here, so under\n  // SSR the hydration walk can't find it; children() realigns the key sequence.\n  const icon = children(() => local.icon);\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"sidebar__nav__item\", \"smwb-nav-item\", local.variant, { active: local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-nav-item__icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-nav-item__title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"default\" as SidebarVariant,\n      defaultActiveItem: null as number | null,\n      collapsible: false,\n      defaultCollapsed: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"menuItems\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"collapsible\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseToggleAriaLabel\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant.\n  const effectiveVariant = (): SidebarVariant => (local.collapsible && collapsed() ? \"compactMini\" : local.variant);\n\n  return (\n    <aside\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-sidebar\", local.class, `smwb-${effectiveVariant()}`, {\n        \"smwb-sidebar_collapsible\": local.collapsible,\n        \"smwb-sidebar_collapsed\": local.collapsible && collapsed(),\n      })}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"menubar\"}\n    >\n      <Show when={local.collapsible}>\n        <div class=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            class=\"smwb-sidebar__collapse-btn\"\n            aria-label={local.collapseToggleAriaLabel}\n            aria-expanded={!collapsed()}\n            onClick={() => setCollapsed(!collapsed())}\n          >\n            <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      </Show>\n      <nav class=\"smwb-sidebar__nav\">\n        <For each={local.menuItems ?? []}>\n          {(item, idx) => (\n            <NavItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                if (typeof item.onClick === \"function\") item.onClick(event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant()}\n            />\n          )}\n        </For>\n      </nav>\n    </aside>\n  );\n}\n\nexport default Sidebar;\n"],"names":["NavItem","props","local","rest","splitProps","rippleActions","icon","children","_$createComponent","Dynamic","_$mergeProps","component","as","href","role","cn","variant","active","isActive","onPointerDown","event","onRipple","Show","when","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","Sidebar","merged","mergeProps","defaultActiveItem","collapsible","defaultCollapsed","collapseToggleAriaLabel","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","collapsed","setCollapsed","onCollapsedChange","effectiveVariant","_el$3","_tmpl$4","_el$6","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","class","_el$4","_tmpl$3","_el$5","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","For","each","menuItems","item","idx","onClick","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import { type JSX, For, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SidebarVariant = \"compact\" | \"default\" | \"compactMini\";\n\nexport interface SidebarMenuItemProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: JSX.Element;\n  title: string;\n  isActive?: boolean;\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  as?: string | undefined;\n  href?: string | undefined;\n  variant?: SidebarVariant | undefined;\n}\n\nexport interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: SidebarVariant;\n  menuItems?: SidebarMenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  /**\n   * Place the rail inside its container instead of pinning it to the window.\n   * The sidebar stays in the page flow (`position: relative`), keeps its\n   * variant width as a non-shrinking flex item and scrolls a long menu inside\n   * itself, so sibling content flows beside it and reflows when it collapses.\n   * Give the container a definite height (e.g. a fixed-height flex row) to\n   * make the rail fill it; with an auto-height container the rail sizes\n   * itself to the menu. Defaults to `false`: the sidebar stays viewport-fixed.\n   */\n  contained?: boolean;\n  ref?: Ref<HTMLElement>;\n}\n\nfunction NavItem(props: SidebarMenuItemProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\"isActive\", \"icon\", \"title\", \"as\", \"href\", \"variant\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  // Resolve the icon in THIS item's context. A pre-created element passed via\n  // menuItems is keyed at the consumer's position but rendered here, so under\n  // SSR the hydration walk can't find it; children() realigns the key sequence.\n  const icon = children(() => local.icon);\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <Dynamic\n      component={local.as ?? \"div\"}\n      href={local.href}\n      role=\"menuitem\"\n      class={cn(\"sidebar__nav__item\", \"smwb-nav-item\", local.variant, { active: local.isActive })}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      <Show when={icon()}>\n        <span class=\"smwb-nav-item__icon\">{icon()}</span>\n      </Show>\n      <Show when={local.title}>\n        <span class=\"smwb-nav-item__title\">{local.title}</span>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </Dynamic>\n  );\n}\n\nexport function Sidebar(props: SidebarProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"default\" as SidebarVariant,\n      defaultActiveItem: null as number | null,\n      collapsible: false,\n      defaultCollapsed: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      contained: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"menuItems\",\n    \"activeItem\",\n    \"defaultActiveItem\",\n    \"onActiveItemChange\",\n    \"collapsible\",\n    \"collapsed\",\n    \"defaultCollapsed\",\n    \"onCollapsedChange\",\n    \"collapseToggleAriaLabel\",\n    \"contained\",\n    \"ref\",\n  ]);\n\n  const [activeItem, setActiveItem] = createControllableState<number | null>({\n    value: () => local.activeItem,\n    defaultValue: local.defaultActiveItem,\n    onChange: (next) => {\n      if (next !== null) local.onActiveItemChange?.(next);\n    },\n  });\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.collapsed,\n    defaultValue: local.defaultCollapsed,\n    onChange: (next) => local.onCollapsedChange?.(next),\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant.\n  const effectiveVariant = (): SidebarVariant => (local.collapsible && collapsed() ? \"compactMini\" : local.variant);\n\n  return (\n    <aside\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-sidebar\", local.class, `smwb-${effectiveVariant()}`, {\n        \"smwb-sidebar_collapsible\": local.collapsible,\n        \"smwb-sidebar_collapsed\": local.collapsible && collapsed(),\n        \"smwb-sidebar_contained\": local.contained,\n      })}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"menubar\"}\n    >\n      <Show when={local.collapsible}>\n        <div class=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            class=\"smwb-sidebar__collapse-btn\"\n            aria-label={local.collapseToggleAriaLabel}\n            aria-expanded={!collapsed()}\n            onClick={() => setCollapsed(!collapsed())}\n          >\n            <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      </Show>\n      <nav class=\"smwb-sidebar__nav\">\n        <For each={local.menuItems ?? []}>\n          {(item, idx) => (\n            <NavItem\n              as={item.as}\n              isActive={activeItem() === idx()}\n              onClick={(event) => {\n                setActiveItem(idx());\n                if (typeof item.onClick === \"function\") item.onClick(event);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant()}\n            />\n          )}\n        </For>\n      </nav>\n    </aside>\n  );\n}\n\nexport default Sidebar;\n"],"names":["NavItem","props","local","rest","splitProps","rippleActions","icon","children","_$createComponent","Dynamic","_$mergeProps","component","as","href","role","cn","variant","active","isActive","onPointerDown","event","onRipple","Show","when","_el$","_tmpl$","_$insert","title","_el$2","_tmpl$2","Ripple","actionRef","actions","Sidebar","merged","mergeProps","defaultActiveItem","collapsible","defaultCollapsed","collapseToggleAriaLabel","contained","activeItem","setActiveItem","createControllableState","value","defaultValue","onChange","next","onActiveItemChange","collapsed","setCollapsed","onCollapsedChange","effectiveVariant","_el$3","_tmpl$4","_el$6","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","class","_el$4","_tmpl$3","_el$5","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","For","each","menuItems","item","idx","onClick","_$delegateEvents"],"mappings":"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"}

package/dist/components/navigation/tabs/index.d.ts

@@ -1,6 +1,8 @@
 export { Tabs } from "./tabs";
 export type { TabsProps } from "./tabs";
 export { Tab } from "./tab/tab";
-export type { TabProps } from "./tab/tab";
+export type { TabActionsApi, TabCloseReason, TabProps } from "./tab/tab";
+export { TabPanel } from "./tabPanel/tabPanel";
+export type { TabPanelProps } from "./tabPanel/tabPanel";
 export { TabsContext, useTabsContext } from "./tabsContext";
 export type { TabsContextValue } from "./tabsContext";

package/dist/components/navigation/tabs/tab/tab.d.ts

@@ -1,15 +1,102 @@
 import { type JSX, type ParentProps } from "solid-js";
+import { type TabCloseReason } from "../tabsContext";
 import { type Ref } from "../../../../primitives/mergeRefs";
-export interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+export type { TabCloseReason };
+/** What a function given as `actions` receives. */
+export interface TabActionsApi {
+    /**
+     * Ask for the tab to close, as its close button does: `onClose` is called with this event and the
+     * reason "actions", and `Tabs` moves focus on to the neighbour once the tab goes, even though focus
+     * is in a menu drawn outside the row. Call it from the item that closes the tab ("Terminate"), with
+     * that item's event. It works on a tab that is not `closable`.
+     */
+    close: (event: Event) => void;
+}
+export interface TabProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, "onClose"> {
     label?: JSX.Element;
     isActive?: boolean;
+    /**
+     * Whether the tab is the one in the page's Tab order (`tabindex` 0, the others -1). `Tabs` sets
+     * it: the focused tab while focus is in the row, the selected one otherwise. On its own a tab
+     * is the stop while `isActive`.
+     */
+    tabStop?: boolean;
     contentRef?: Ref<HTMLSpanElement>;
+    /**
+     * A decorative status marker drawn left of the label (a running/done/failed icon). Its
+     * wrapper renders `aria-hidden="true"`, so the tab's accessible name stays the label
+     * alone: the icon is not announced on top of it. To have the status read out, put it
+     * in the `label` itself.
+     */
     icon?: JSX.Element;
     stacked?: boolean;
+    /** The element to render. A tab with an `href` is an `a` unless you say otherwise. */
     tag?: string;
-    /** With `tag="a"`: where the link goes, so the tab stays a real link. */
+    /**
+     * Navigation mode: where the tab goes. The tab is then a real link (`<a href role="tab">`, with
+     * no `target`: a tab never opens another window), so it opens in place and middle click, copy
+     * link and the like work. A router takes over the plain click in `onClick` with
+     * `event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click
+     * (Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as
+     * "open in a new tab": the router must let it through, and `Tabs` does not call `onChange`.
+     * The one exception is a middle press on a `closable` tab: it closes the tab instead, as in an
+     * editor, and its default is prevented so nothing opens.
+     */
     href?: string;
     disabled?: boolean;
+    /**
+     * Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too
+     * (Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A
+     * middle click on the tab closes it as well (`reason` "middleClick"): the browser's own
+     * middle-click action (autoscroll, opening a link tab in a new window) is suppressed, and the
+     * click never selects. The tab does not close itself: `onClose` asks for it and the owner
+     * removes the `Tab`. The button is a sibling of the tab, not inside its `role="tab"`, so the
+     * tab's accessible name is its label alone.
+     * It is out of the Tab order (`tabindex` -1), so the row keeps one tab stop, and a press on it takes
+     * no focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the
+     * tab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab
+     * has a disabled button.
+     *
+     * The button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user
+     * who cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its
+     * tab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly
+     * (axe `aria-required-children`) can flag the button, and whatever `actions` holds.
+     *
+     * To switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or
+     * `actions` is wrapped in an item with them, a tab given neither is not, and moving between the two
+     * recreates the tab and drops its focus.
+     */
+    closable?: boolean;
+    /**
+     * Asks for the tab to close, and receives what asked for it: the close button's click (`reason`
+     * "button"), the key press of Delete or Backspace on the tab (`reason` "key", its default is
+     * prevented), the middle press on the tab (`reason` "middleClick", its default is prevented too),
+     * or the event passed to `close` by the tab's `actions` (`reason` "actions"). The owner removes
+     * the `Tab`.
+     */
+    onClose?: (event: Event, reason: TabCloseReason) => void;
+    /** Accessible label of the close button. English by default; set it to localise, or to name the tab ("Close Terminal 1"). */
+    closeLabel?: string;
+    /**
+     * Content after the tab, before the close button: a trigger with a `Menu` ("Rename", "Terminate"),
+     * or any control. Give a function to get `{ close }` (see `TabActionsApi`); it is called once.
+     * Like the close button the content is a sibling of the tab, so it is not part of the tab's name;
+     * the tab's own `ref`, `class` and handlers stay on the `role="tab"` element. It stays in the
+     * accessibility tree as written, inside the tab list (see `closable`).
+     *
+     * The row has one tab stop, so give the trigger `tabindex={-1}`. Shift+F10 or the Menu key on the
+     * focused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`
+     * and clicks it, unless that control says `aria-expanded="true"` (it is already open). If the
+     * control names its popup in `aria-controls`, the first enabled `menuitem` in that element then
+     * takes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and
+     * Escape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.
+     *
+     * The row clips what overflows it: draw the menu in a `Portal`, anchored to the trigger and with
+     * the `id` the trigger names. A choice that removes the tab ("Terminate") should call `close` with
+     * its event, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab
+     * removed some other way leaves focus on the page.
+     */
+    actions?: JSX.Element | ((api: TabActionsApi) => JSX.Element);
     ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
 }
 export declare function Tab(props: ParentProps<TabProps>): JSX.Element;

package/dist/components/navigation/tabs/tab/tab.js

@@ -1,18 +1,31 @@
-import { createComponent as s, Dynamic as x, mergeProps as C, use as A, insert as a, memo as D, template as l } from "solid-js/web";
+import { createComponent as i, insert as n, effect as A, setAttribute as P, className as z, template as c, Dynamic as H, mergeProps as U, use as R, memo as k, delegateEvents as J } from "solid-js/web";
 import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
 /* empty css                                                         */
-import { createSignal as y, mergeProps as T, splitProps as S, children as f, Show as u } from "solid-js";
-import H from "clsx";
-import { useTabsContext as j } from "../tabsContext.js";
-import { mergeRefs as g } from "../../../../primitives/mergeRefs.js";
-import { callHandler as _ } from "../../../../primitives/callHandler.js";
-import { Ripple as q } from "../../../base/ripple/ripple.js";
-var z = /* @__PURE__ */ l("<span class=smwb-tab__icon>"), B = /* @__PURE__ */ l("<span class=smwb-tab__text-label>"), E = /* @__PURE__ */ l("<span class=smwb-tab__content>");
-function Q(w) {
-  const r = j(), [v, h] = y(), c = r ? r.registerTab(v) : () => -1, $ = T({
+import { createSignal as Q, mergeProps as V, splitProps as X, children as _, Show as u } from "solid-js";
+import T from "clsx";
+import { useTabsContext as Y } from "../tabsContext.js";
+import { mergeRefs as B } from "../../../../primitives/mergeRefs.js";
+import { callHandler as p } from "../../../../primitives/callHandler.js";
+import { Icon as Z } from "../../../base/icon/icon.js";
+import { Ripple as ee } from "../../../base/ripple/ripple.js";
+var te = /* @__PURE__ */ c("<span class=smwb-tab__icon aria-hidden=true>"), oe = /* @__PURE__ */ c("<span class=smwb-tab__text-label>"), re = /* @__PURE__ */ c("<span class=smwb-tab__content>"), ae = /* @__PURE__ */ c("<span class=smwb-tab__actions>"), le = /* @__PURE__ */ c("<button type=button class=smwb-tab__close tabindex=-1>"), ne = /* @__PURE__ */ c("<div>");
+const ie = (a) => a.button !== 0 || a.ctrlKey || a.metaKey || a.shiftKey || a.altKey, se = (a) => a.ctrlKey || a.metaKey || a.altKey || a.shiftKey, ce = 'button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), [tabindex]', de = '[role^="menuitem"]:not([aria-disabled="true"])', be = (a) => {
+  for (const l of a.getAttribute("aria-controls")?.split(/\s+/) ?? []) {
+    const f = l ? a.ownerDocument.getElementById(l)?.querySelector(de) : null;
+    if (f) {
+      f.focus({
+        preventScroll: !0
+      });
+      return;
+    }
+  }
+};
+function ve(a) {
+  const l = Y(), [f, I] = Q(), E = V({
     isActive: !1,
-    stacked: !1
-  }, w), [t, k] = S($, [
+    stacked: !1,
+    closeLabel: "Close tab"
+  }, a), [t, q] = X(E, [
     "class",
     "label",
     "isActive",
@@ -20,79 +33,186 @@ function Q(w) {
     "icon",
     "stacked",
     "tag",
+    "href",
+    "tabStop",
     "disabled",
+    // `Tabs` owns this: it is the item that drags, not the tab. The caller's value
+    // is dropped, as in the React `Tab`.
+    "draggable",
+    "closable",
+    "onClose",
+    "closeLabel",
+    "actions",
+    "id",
+    "aria-controls",
+    // A tab opens in place: a caller's target is dropped, not passed on.
+    "target",
     "onClick",
+    "onKeyDown",
     "ref",
     // The tab sets this on its root too; its own handler calls the caller's first.
-    "onPointerDown"
-  ]), m = f(() => t.icon), p = f(() => t.label);
-  let b;
-  const i = () => r ? r.value() === c() : t.isActive, P = (e) => {
-    _(t.onClick, e), r?.onChange(e, c());
-  }, R = (e) => {
-    _(t.onPointerDown, e), b?.onRipple(e);
-  }, d = () => t.tag ?? "button";
-  return s(x, C({
+    "onPointerDown",
+    "onMouseDown"
+  ]), s = l ? l.registerTab(f, {
+    id: () => t.id,
+    disabled: () => !!t.disabled || a["aria-disabled"] === !0 || a["aria-disabled"] === "true",
+    closable: () => !!t.closable,
+    requestClose: (e) => d(e, "key")
+  }) : () => -1, v = _(() => t.icon), D = _(() => t.label), F = {
+    close: (e) => d(e, "actions")
+  }, h = _(() => {
+    const e = t.actions;
+    return typeof e == "function" ? e(F) : e;
+  }), y = () => h.toArray().length > 0;
+  let C, w;
+  const m = () => l ? l.value() === s() : t.isActive, g = () => t.tag ?? (t.href !== void 0 ? "a" : "button"), S = () => !!t.disabled && g() !== "button", L = (e) => {
+    if (S()) {
+      e.preventDefault();
+      return;
+    }
+    p(t.onClick, e), !(t.href !== void 0 && ie(e)) && l?.onChange(e, s());
+  }, d = (e, o) => {
+    l?.closing(s(), o), t.onClose?.(e, o);
+  }, N = (e) => {
+    if (p(t.onKeyDown, e), !(t.disabled || e.defaultPrevented || e.target !== e.currentTarget)) {
+      if (g() !== "button" && e.key === " ")
+        e.preventDefault(), e.currentTarget.click();
+      else if (t.closable && (e.key === "Delete" || e.key === "Backspace") && !se(e))
+        e.preventDefault(), d(e, "key");
+      else if (y() && (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey)) {
+        const o = w?.querySelector(ce);
+        o && (e.preventDefault(), o.focus(), o.getAttribute("aria-expanded") !== "true" && o.click(), be(o));
+      }
+    }
+  }, G = (e) => {
+    p(t.onPointerDown, e), C?.onRipple(e);
+  }, O = (e) => {
+    p(t.onMouseDown, e), e.button === 1 && t.closable && !t.disabled && (e.preventDefault(), d(e, "middleClick"));
+  }, W = () => l ? l.tabStop(s()) : t.tabStop ?? m(), j = () => [a["aria-keyshortcuts"], !t.disabled && t.closable ? "Delete Backspace" : void 0, !t.disabled && y() ? "Shift+F10 ContextMenu" : void 0, !t.disabled && t.closable ? "Meta+W Control+W" : void 0, t.disabled ? void 0 : "Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]"].filter(Boolean).join(" ") || void 0, $ = () => t.closable !== void 0 || h() !== void 0, K = () => l?.reorderable() && !t.disabled && a["aria-disabled"] !== !0 && a["aria-disabled"] !== "true" ? !0 : void 0, M = () => i(H, U({
     get component() {
-      return d();
+      return g();
     }
-  }, k, {
+  }, q, {
     ref(e) {
-      var n = g(t.ref, h);
-      typeof n == "function" && n(e);
+      var o = B(t.ref, I);
+      typeof o == "function" && o(e);
     },
     get class() {
-      return H("smwb-tab", t.class, {
-        "smwb-tab--active": i(),
+      return T("smwb-tab", t.class, {
+        "smwb-tab--active": m(),
         "smwb-tab--stacked": t.stacked,
         "smwb-tab--disabled": t.disabled
       });
     },
-    onClick: P,
-    onPointerDown: R,
+    get id() {
+      return t.id ?? l?.tabId(s());
+    },
+    get "aria-controls"() {
+      return t["aria-controls"] ?? (l?.hasPanels() ? l.panelId(s()) : void 0);
+    },
+    get href() {
+      return k(() => !!S())() ? void 0 : t.href;
+    },
+    get draggable() {
+      return k(() => !!$())() ? void 0 : K();
+    },
+    onClick: L,
+    onKeyDown: N,
+    onPointerDown: G,
+    onMouseDown: O,
     role: "tab",
     get "aria-selected"() {
-      return i();
+      return m();
     },
     get "aria-disabled"() {
       return t.disabled || void 0;
     },
+    get "aria-keyshortcuts"() {
+      return j();
+    },
     get tabindex() {
-      return i() ? 0 : -1;
+      return W() ? 0 : -1;
     },
     get disabled() {
-      return D(() => d() === "button")() ? t.disabled : void 0;
+      return k(() => g() === "button")() ? t.disabled : void 0;
     },
     get children() {
       return [(() => {
-        var e = E(), n = g(t.contentRef);
-        return typeof n == "function" && A(n, e), a(e, s(u, {
+        var e = re(), o = B(t.contentRef);
+        return typeof o == "function" && R(o, e), n(e, i(u, {
           get when() {
-            return m();
+            return v();
           },
           get children() {
-            var o = z();
-            return a(o, m), o;
+            var r = te();
+            return n(r, v), r;
           }
-        }), null), a(e, s(u, {
+        }), null), n(e, i(u, {
           get when() {
-            return p();
+            return D();
           },
           get children() {
-            var o = B();
-            return a(o, p), o;
+            var r = oe();
+            return n(r, D), r;
           }
         }), null), e;
-      })(), s(q, {
-        actionRef: (e) => b = e,
+      })(), i(ee, {
+        actionRef: (e) => C = e,
         classes: {
           child: "tab__ripple-child"
         }
       })];
     }
   }));
+  return i(u, {
+    get when() {
+      return $();
+    },
+    get fallback() {
+      return M();
+    },
+    get children() {
+      var e = ne();
+      return n(e, M, null), n(e, i(u, {
+        get when() {
+          return y();
+        },
+        get children() {
+          var o = ae(), r = w;
+          return typeof r == "function" ? R(r, o) : w = o, n(o, h), o;
+        }
+      }), null), n(e, i(u, {
+        get when() {
+          return t.closable;
+        },
+        get children() {
+          var o = le();
+          return o.$$click = (r) => d(r, "button"), o.$$mousedown = (r) => r.preventDefault(), n(o, i(Z, {
+            name: "close",
+            size: 16
+          })), A((r) => {
+            var b = t.closeLabel, x = !!t.disabled;
+            return b !== r.e && P(o, "aria-label", r.e = b), x !== r.t && (o.disabled = r.t = x), r;
+          }, {
+            e: void 0,
+            t: void 0
+          }), o;
+        }
+      }), null), A((o) => {
+        var r = T("smwb-tab-item", {
+          "smwb-tab-item--active": m(),
+          "smwb-tab-item--disabled": t.disabled
+        }), b = K();
+        return r !== o.e && z(e, o.e = r), b !== o.t && P(e, "draggable", o.t = b), o;
+      }, {
+        e: void 0,
+        t: void 0
+      }), e;
+    }
+  });
 }
+J(["mousedown", "click"]);
 export {
-  Q as Tab
+  ve as Tab
 };
 //# sourceMappingURL=tab.js.map