@smwb/ui-solid 0.13.0 → 1.0.0

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

@@ -0,0 +1,54 @@
+function firstOption(count, isEnabled) {
+  for (let index = 0; index < count; index++) {
+    if (isEnabled(index)) {
+      return index;
+    }
+  }
+  return -1;
+}
+function lastOption(count, isEnabled) {
+  for (let index = count - 1; index >= 0; index--) {
+    if (isEnabled(index)) {
+      return index;
+    }
+  }
+  return -1;
+}
+function moveOption(count, isEnabled, from, steps) {
+  if (from < 0) {
+    return steps > 0 ? firstOption(count, isEnabled) : lastOption(count, isEnabled);
+  }
+  const direction = steps > 0 ? 1 : -1;
+  let result = from;
+  let left = Math.abs(steps);
+  for (let index = from + direction; index >= 0 && index < count && left > 0; index += direction) {
+    if (isEnabled(index)) {
+      result = index;
+      left--;
+    }
+  }
+  return result;
+}
+function keepInView(element, root) {
+  for (let box = element.parentElement; box; box = box.parentElement) {
+    if (box.scrollHeight > box.clientHeight) {
+      const outer = box.getBoundingClientRect();
+      const inner = element.getBoundingClientRect();
+      if (inner.top < outer.top) {
+        box.scrollTop -= outer.top - inner.top;
+      } else if (inner.bottom > outer.bottom) {
+        box.scrollTop += inner.bottom - outer.bottom;
+      }
+    }
+    if (box === root) {
+      break;
+    }
+  }
+}
+export {
+  firstOption,
+  keepInView,
+  lastOption,
+  moveOption
+};
+//# sourceMappingURL=commandPaletteNavigation.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "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"],
+  "mappings": "AAOO,SAAS,YAAY,OAAe,WAAoC;AAC7E,WAAS,QAAQ,GAAG,QAAQ,OAAO,SAAS;AAC1C,QAAI,UAAU,KAAK,GAAG;AACpB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,WAAW,OAAe,WAAoC;AAC5E,WAAS,QAAQ,QAAQ,GAAG,SAAS,GAAG,SAAS;AAC/C,QAAI,UAAU,KAAK,GAAG;AACpB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAOO,SAAS,WAAW,OAAe,WAA4B,MAAc,OAAuB;AACzG,MAAI,OAAO,GAAG;AACZ,WAAO,QAAQ,IAAI,YAAY,OAAO,SAAS,IAAI,WAAW,OAAO,SAAS;AAAA,EAChF;AACA,QAAM,YAAY,QAAQ,IAAI,IAAI;AAClC,MAAI,SAAS;AACb,MAAI,OAAO,KAAK,IAAI,KAAK;AACzB,WAAS,QAAQ,OAAO,WAAW,SAAS,KAAK,QAAQ,SAAS,OAAO,GAAG,SAAS,WAAW;AAC9F,QAAI,UAAU,KAAK,GAAG;AACpB,eAAS;AACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,WAAW,SAAsB,MAA0B;AACzE,WAAS,MAAM,QAAQ,eAAe,KAAK,MAAM,IAAI,eAAe;AAClE,QAAI,IAAI,eAAe,IAAI,cAAc;AACvC,YAAM,QAAQ,IAAI,sBAAsB;AACxC,YAAM,QAAQ,QAAQ,sBAAsB;AAC5C,UAAI,MAAM,MAAM,MAAM,KAAK;AACzB,YAAI,aAAa,MAAM,MAAM,MAAM;AAAA,MACrC,WAAW,MAAM,SAAS,MAAM,QAAQ;AACtC,YAAI,aAAa,MAAM,SAAS,MAAM;AAAA,MACxC;AAAA,IACF;AACA,QAAI,QAAQ,MAAM;AAChB;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/source/components/navigation/commandPalette/commandPaletteTypes.js

@@ -0,0 +1 @@
+//# sourceMappingURL=commandPaletteTypes.js.map

package/dist/source/components/navigation/commandPalette/commandPaletteTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/source/components/navigation/commandPalette/index.js

@@ -0,0 +1,11 @@
+import { CommandPalette, default as default2 } from "./commandPalette";
+import { commandPaletteFilter, normalizeSearchText } from "./commandPaletteFilter";
+import { createKeyboardShortcut } from "../../../primitives/createKeyboardShortcut";
+export {
+  CommandPalette,
+  commandPaletteFilter,
+  createKeyboardShortcut,
+  default2 as default,
+  normalizeSearchText
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/navigation/commandPalette/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/navigation/commandPalette/index.ts"],
+  "sourcesContent": ["export { CommandPalette, default } from \"./commandPalette\";\nexport type { CommandPaletteProps } from \"./commandPalette\";\nexport type {\n  CommandPaletteFilter,\n  CommandPaletteGroup,\n  CommandPaletteItem,\n  CommandPaletteSource,\n} from \"./commandPaletteTypes\";\nexport { commandPaletteFilter, normalizeSearchText } from \"./commandPaletteFilter\";\nexport { createKeyboardShortcut } from \"../../../primitives/createKeyboardShortcut\";\nexport type { CreateKeyboardShortcutOptions } from \"../../../primitives/createKeyboardShortcut\";\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,WAAAA,gBAAe;AAQxC,SAAS,sBAAsB,2BAA2B;AAC1D,SAAS,8BAA8B;",
+  "names": ["default"]
+}

package/dist/source/components/navigation/sidebar/sidebar.jsx

@@ -38,7 +38,8 @@ function Sidebar(props) {
       defaultActiveItem: null,
       collapsible: false,
       defaultCollapsed: false,
-      collapseToggleAriaLabel: "Toggle navigation"
+      collapseToggleAriaLabel: "Toggle navigation",
+      contained: false
     },
     props
   );
@@ -54,6 +55,7 @@ function Sidebar(props) {
     "defaultCollapsed",
     "onCollapsedChange",
     "collapseToggleAriaLabel",
+    "contained",
     "ref"
   ]);
   const [activeItem, setActiveItem] = createControllableState({
@@ -74,7 +76,8 @@ function Sidebar(props) {
     ref={mergeRefs(local.ref)}
     class={cn("smwb-sidebar", local.class, `smwb-${effectiveVariant()}`, {
       "smwb-sidebar_collapsible": local.collapsible,
-      "smwb-sidebar_collapsed": local.collapsible && collapsed()
+      "smwb-sidebar_collapsed": local.collapsible && collapsed(),
+      "smwb-sidebar_contained": local.contained
     })}
     role={rest.role ?? "menubar"}
   >

package/dist/source/components/navigation/sidebar/sidebar.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/sidebar/sidebar.entry.less\";\nimport { 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"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,MAAM,UAAU,YAAY,kBAAkB;AACtE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,iBAA2B;AAoCpC,SAAS,QAAQ,OAA0C;AACzD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,QAAQ,SAAS,MAAM,QAAQ,SAAS,CAAC;AAC9F,MAAI;AAKJ,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AAEtC,QAAM,gBAAgB,CAAC,UAA8B;AACnD,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,IACC,WAAW,MAAM,MAAM;AAAA,IACvB,MAAM,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,GAAG,sBAAsB,iBAAiB,MAAM,SAAS,EAAE,QAAQ,MAAM,SAAS,CAAC;AAAA,IAC1F,eAAe;AAAA,QACX;AAAA,GACL;AAAA,MACC,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,uBAAuB,KAAK,EAAE,EAAzC,KAAgD;AAAA,MACnD,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,KAAK,MAAM,wBAAwB,MAAM,MAAM,EAA/C,KAAsD;AAAA,MACzD,EAFC,KAEM;AAAA,MACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EAfC;AAiBL;AAEO,SAAS,QAAQ,OAAkC;AACxD,QAAM,SAAS;AAAA,IACb;AAAA,MACE,SAAS;AAAA,MACT,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb,kBAAkB;AAAA,MAClB,yBAAyB;AAAA,IAC3B;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,YAAY,aAAa,IAAI,wBAAuC;AAAA,IACzE,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS;AAClB,UAAI,SAAS,KAAM,OAAM,qBAAqB,IAAI;AAAA,IACpD;AAAA,EACF,CAAC;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,wBAAiC;AAAA,IACjE,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS,MAAM,oBAAoB,IAAI;AAAA,EACpD,CAAC;AAGD,QAAM,mBAAmB,MAAuB,MAAM,eAAe,UAAU,IAAI,gBAAgB,MAAM;AAEzG,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,gBAAgB,MAAM,OAAO,QAAQ,iBAAiB,CAAC,IAAI;AAAA,MACnE,4BAA4B,MAAM;AAAA,MAClC,0BAA0B,MAAM,eAAe,UAAU;AAAA,IAC3D,CAAC;AAAA,IAED,MAAM,KAAK,QAAQ;AAAA,GACpB;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,aAAa;AAAA,QAC7B,CAAC,IAAI,MAAM,yBAAyB;AAAA,UAClC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM;AAAA,IAClB,eAAe,CAAC,UAAU;AAAA,IAC1B,SAAS,MAAM,aAAa,CAAC,UAAU,CAAC;AAAA,GACzC;AAAA,YACC,CAAC,KAAK,MAAM,UAAU,IAAI,kBAAkB,gBAAgB,MAAM,IAAI,EAAE;AAAA,UAC1E,EARC,OAQQ;AAAA,QACX,EAVC,IAUK;AAAA,MACR,EAZC,KAYM;AAAA,MACP,CAAC,IAAI,MAAM,oBAAoB;AAAA,QAC7B,CAAC,IAAI,MAAM,MAAM,aAAa,CAAC,GAAG;AAAA,WAC/B,CAAC,MAAM,QACN,CAAC;AAAA,IACC,IAAI,KAAK;AAAA,IACT,UAAU,WAAW,MAAM,IAAI;AAAA,IAC/B,SAAS,CAAC,UAAU;AAClB,oBAAc,IAAI,CAAC;AACnB,UAAI,OAAO,KAAK,YAAY,WAAY,MAAK,QAAQ,KAAK;AAAA,IAC5D;AAAA,IACA,MAAM,KAAK;AAAA,IACX,OAAO,KAAK;AAAA,IACZ,MAAM,KAAK;AAAA,IACX,SAAS,iBAAiB;AAAA,EAC5B,GACA;AAAA,QACJ,EAfC,IAeK;AAAA,MACR,EAjBC,IAiBK;AAAA,IACR,EAzCC;AA2CL;AAEA,IAAO,kBAAQ;","names":[],"file":"sidebar.jsx"}
+{"version":3,"sources":["../../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/sidebar/sidebar.entry.less\";\nimport { 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"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,MAAM,UAAU,YAAY,kBAAkB;AACtE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,iBAA2B;AA8CpC,SAAS,QAAQ,OAA0C;AACzD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,QAAQ,SAAS,MAAM,QAAQ,SAAS,CAAC;AAC9F,MAAI;AAKJ,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AAEtC,QAAM,gBAAgB,CAAC,UAA8B;AACnD,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,IACC,WAAW,MAAM,MAAM;AAAA,IACvB,MAAM,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,GAAG,sBAAsB,iBAAiB,MAAM,SAAS,EAAE,QAAQ,MAAM,SAAS,CAAC;AAAA,IAC1F,eAAe;AAAA,QACX;AAAA,GACL;AAAA,MACC,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,QAClB,CAAC,KAAK,MAAM,uBAAuB,KAAK,EAAE,EAAzC,KAAgD;AAAA,MACnD,EAFC,KAEM;AAAA,MACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,KAAK,MAAM,wBAAwB,MAAM,MAAM,EAA/C,KAAsD;AAAA,MACzD,EAFC,KAEM;AAAA,MACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EAfC;AAiBL;AAEO,SAAS,QAAQ,OAAkC;AACxD,QAAM,SAAS;AAAA,IACb;AAAA,MACE,SAAS;AAAA,MACT,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb,kBAAkB;AAAA,MAClB,yBAAyB;AAAA,MACzB,WAAW;AAAA,IACb;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,YAAY,aAAa,IAAI,wBAAuC;AAAA,IACzE,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS;AAClB,UAAI,SAAS,KAAM,OAAM,qBAAqB,IAAI;AAAA,IACpD;AAAA,EACF,CAAC;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,wBAAiC;AAAA,IACjE,OAAO,MAAM,MAAM;AAAA,IACnB,cAAc,MAAM;AAAA,IACpB,UAAU,CAAC,SAAS,MAAM,oBAAoB,IAAI;AAAA,EACpD,CAAC;AAGD,QAAM,mBAAmB,MAAuB,MAAM,eAAe,UAAU,IAAI,gBAAgB,MAAM;AAEzG,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,gBAAgB,MAAM,OAAO,QAAQ,iBAAiB,CAAC,IAAI;AAAA,MACnE,4BAA4B,MAAM;AAAA,MAClC,0BAA0B,MAAM,eAAe,UAAU;AAAA,MACzD,0BAA0B,MAAM;AAAA,IAClC,CAAC;AAAA,IAED,MAAM,KAAK,QAAQ;AAAA,GACpB;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,aAAa;AAAA,QAC7B,CAAC,IAAI,MAAM,yBAAyB;AAAA,UAClC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM;AAAA,IAClB,eAAe,CAAC,UAAU;AAAA,IAC1B,SAAS,MAAM,aAAa,CAAC,UAAU,CAAC;AAAA,GACzC;AAAA,YACC,CAAC,KAAK,MAAM,UAAU,IAAI,kBAAkB,gBAAgB,MAAM,IAAI,EAAE;AAAA,UAC1E,EARC,OAQQ;AAAA,QACX,EAVC,IAUK;AAAA,MACR,EAZC,KAYM;AAAA,MACP,CAAC,IAAI,MAAM,oBAAoB;AAAA,QAC7B,CAAC,IAAI,MAAM,MAAM,aAAa,CAAC,GAAG;AAAA,WAC/B,CAAC,MAAM,QACN,CAAC;AAAA,IACC,IAAI,KAAK;AAAA,IACT,UAAU,WAAW,MAAM,IAAI;AAAA,IAC/B,SAAS,CAAC,UAAU;AAClB,oBAAc,IAAI,CAAC;AACnB,UAAI,OAAO,KAAK,YAAY,WAAY,MAAK,QAAQ,KAAK;AAAA,IAC5D;AAAA,IACA,MAAM,KAAK;AAAA,IACX,OAAO,KAAK;AAAA,IACZ,MAAM,KAAK;AAAA,IACX,SAAS,iBAAiB;AAAA,EAC5B,GACA;AAAA,QACJ,EAfC,IAeK;AAAA,MACR,EAjBC,IAiBK;AAAA,IACR,EA1CC;AA4CL;AAEA,IAAO,kBAAQ;","names":[],"file":"sidebar.jsx"}

package/dist/source/components/navigation/tabs/index.js

@@ -1,8 +1,10 @@
 import { Tabs } from "./tabs";
 import { Tab } from "./tab/tab";
+import { TabPanel } from "./tabPanel/tabPanel";
 import { TabsContext, useTabsContext } from "./tabsContext";
 export {
   Tab,
+  TabPanel,
   Tabs,
   TabsContext,
   useTabsContext

package/dist/source/components/navigation/tabs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/navigation/tabs/index.ts"],
-  "sourcesContent": ["export { Tabs } from \"./tabs\";\nexport type { TabsProps } from \"./tabs\";\nexport { Tab } from \"./tab/tab\";\nexport type { TabProps } from \"./tab/tab\";\nexport { TabsContext, useTabsContext } from \"./tabsContext\";\nexport type { TabsContextValue } from \"./tabsContext\";\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,WAAW;AAEpB,SAAS,aAAa,sBAAsB;",
+  "sourcesContent": ["export { Tabs } from \"./tabs\";\nexport type { TabsProps } from \"./tabs\";\nexport { Tab } from \"./tab/tab\";\nexport type { TabActionsApi, TabCloseReason, TabProps } from \"./tab/tab\";\nexport { TabPanel } from \"./tabPanel/tabPanel\";\nexport type { TabPanelProps } from \"./tabPanel/tabPanel\";\nexport { TabsContext, useTabsContext } from \"./tabsContext\";\nexport type { TabsContextValue } from \"./tabsContext\";\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,WAAW;AAEpB,SAAS,gBAAgB;AAEzB,SAAS,aAAa,sBAAsB;",
   "names": []
 }

package/dist/source/components/navigation/tabs/tab/tab.jsx

@@ -4,14 +4,27 @@ import { Show, children, createSignal, mergeProps, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cn from "clsx";
 import { Ripple } from "../../../base/ripple";
+import { Icon } from "../../../base/icon";
 import { useTabsContext } from "../tabsContext";
 import { mergeRefs } from "../../../../primitives/mergeRefs";
 import { callHandler } from "../../../../primitives/callHandler";
+const isModifiedClick = (event) => event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
+const hasModifier = (event) => event.ctrlKey || event.metaKey || event.altKey || event.shiftKey;
+const ACTIONS_TRIGGER = 'button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), [tabindex]';
+const FIRST_MENU_ITEM = '[role^="menuitem"]:not([aria-disabled="true"])';
+const focusPopupOf = (trigger) => {
+  for (const id of trigger.getAttribute("aria-controls")?.split(/\s+/) ?? []) {
+    const item = id ? trigger.ownerDocument.getElementById(id)?.querySelector(FIRST_MENU_ITEM) : null;
+    if (item) {
+      item.focus({ preventScroll: true });
+      return;
+    }
+  }
+};
 function Tab(props) {
   const ctx = useTabsContext();
   const [root, setRoot] = createSignal();
-  const index = ctx ? ctx.registerTab(root) : () => -1;
-  const merged = mergeProps({ isActive: false, stacked: false }, props);
+  const merged = mergeProps({ isActive: false, stacked: false, closeLabel: "Close tab" }, props);
   const [local, rest] = splitProps(merged, [
     "class",
     "label",
@@ -20,26 +33,102 @@ function Tab(props) {
     "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"
+    "onPointerDown",
+    "onMouseDown"
   ]);
+  const index = ctx ? ctx.registerTab(root, {
+    id: () => local.id,
+    disabled: () => Boolean(local.disabled) || props["aria-disabled"] === true || props["aria-disabled"] === "true",
+    closable: () => Boolean(local.closable),
+    requestClose: (event) => close(event, "key")
+  }) : () => -1;
   const icon = children(() => local.icon);
   const label = children(() => local.label);
+  const actionsApi = { close: (event) => close(event, "actions") };
+  const actions = children(() => {
+    const given = local.actions;
+    return typeof given === "function" ? given(actionsApi) : given;
+  });
+  const hasActions = () => actions.toArray().length > 0;
   let rippleActions;
+  let actionsEl;
   const active = () => ctx ? ctx.value() === index() : local.isActive;
+  const tag = () => local.tag ?? (local.href !== void 0 ? "a" : "button");
+  const inert = () => Boolean(local.disabled) && tag() !== "button";
   const onClick = (event) => {
+    if (inert()) {
+      event.preventDefault();
+      return;
+    }
     callHandler(local.onClick, event);
+    if (local.href !== void 0 && isModifiedClick(event)) return;
     ctx?.onChange(event, index());
   };
+  const close = (event, reason) => {
+    ctx?.closing(index(), reason);
+    local.onClose?.(event, reason);
+  };
+  const onKeyDown = (event) => {
+    callHandler(local.onKeyDown, event);
+    if (local.disabled || event.defaultPrevented || event.target !== event.currentTarget) return;
+    if (tag() !== "button" && event.key === " ") {
+      event.preventDefault();
+      event.currentTarget.click();
+    } else if (local.closable && (event.key === "Delete" || event.key === "Backspace") && !hasModifier(event)) {
+      event.preventDefault();
+      close(event, "key");
+    } else if (hasActions() && (event.key === "ContextMenu" || event.key === "F10" && event.shiftKey)) {
+      const trigger = actionsEl?.querySelector(ACTIONS_TRIGGER);
+      if (trigger) {
+        event.preventDefault();
+        trigger.focus();
+        if (trigger.getAttribute("aria-expanded") !== "true") {
+          trigger.click();
+        }
+        focusPopupOf(trigger);
+      }
+    }
+  };
   const onPointerDown = (event) => {
     callHandler(local.onPointerDown, event);
     rippleActions?.onRipple(event);
   };
-  const tag = () => local.tag ?? "button";
-  return <Dynamic
+  const onMouseDown = (event) => {
+    callHandler(local.onMouseDown, event);
+    if (event.button === 1 && local.closable && !local.disabled) {
+      event.preventDefault();
+      close(event, "middleClick");
+    }
+  };
+  const tabStop = () => ctx ? ctx.tabStop(index()) : local.tabStop ?? active();
+  const keyshortcuts = () => [
+    props["aria-keyshortcuts"],
+    !local.disabled && local.closable ? "Delete Backspace" : void 0,
+    !local.disabled && hasActions() ? "Shift+F10 ContextMenu" : void 0,
+    !local.disabled && local.closable ? "Meta+W Control+W" : void 0,
+    !local.disabled ? "Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]" : void 0
+  ].filter(Boolean).join(" ") || void 0;
+  const wrapped = () => local.closable !== void 0 || actions() !== void 0;
+  const draggable = () => ctx?.reorderable() && !local.disabled && props["aria-disabled"] !== true && props["aria-disabled"] !== "true" ? true : void 0;
+  const renderTab = () => <Dynamic
     component={tag()}
     {...rest}
     ref={mergeRefs(local.ref, setRoot)}
@@ -48,24 +137,62 @@ function Tab(props) {
       "smwb-tab--stacked": local.stacked,
       "smwb-tab--disabled": local.disabled
     })}
+    id={local.id ?? ctx?.tabId(index())}
+    aria-controls={local["aria-controls"] ?? (ctx?.hasPanels() ? ctx.panelId(index()) : void 0)}
+    href={inert() ? void 0 : local.href}
+    draggable={wrapped() ? void 0 : draggable()}
     onClick={onClick}
+    onKeyDown={onKeyDown}
     onPointerDown={onPointerDown}
+    onMouseDown={onMouseDown}
     role="tab"
     aria-selected={active()}
     aria-disabled={local.disabled || void 0}
-    tabindex={active() ? 0 : -1}
+    aria-keyshortcuts={keyshortcuts()}
+    tabindex={tabStop() ? 0 : -1}
     disabled={tag() === "button" ? local.disabled : void 0}
   >
       <span class="smwb-tab__content" ref={mergeRefs(local.contentRef)}>
         <Show when={icon()}>
-          <span class="smwb-tab__icon">{icon()}</span>
+          <span class="smwb-tab__icon" aria-hidden="true">
+            {icon()}
+          </span>
         </Show>
         <Show when={label()}>
           <span class="smwb-tab__text-label">{label()}</span>
         </Show>
       </span>
-      <Ripple actionRef={(actions) => rippleActions = actions} classes={{ child: "tab__ripple-child" }} />
+      <Ripple actionRef={(api) => rippleActions = api} classes={{ child: "tab__ripple-child" }} />
     </Dynamic>;
+  return <Show when={wrapped()} fallback={renderTab()}>
+      <div
+    class={cn("smwb-tab-item", {
+      "smwb-tab-item--active": active(),
+      "smwb-tab-item--disabled": local.disabled
+    })}
+    draggable={draggable()}
+  >
+        {renderTab()}
+        <Show when={hasActions()}>
+          <span class="smwb-tab__actions" ref={actionsEl}>
+            {actions()}
+          </span>
+        </Show>
+        <Show when={local.closable}>
+          <button
+    type="button"
+    class="smwb-tab__close"
+    tabindex={-1}
+    aria-label={local.closeLabel}
+    disabled={Boolean(local.disabled)}
+    onMouseDown={(event) => event.preventDefault()}
+    onClick={(event) => close(event, "button")}
+  >
+            <Icon name="close" size={16} />
+          </button>
+        </Show>
+      </div>
+    </Show>;
 }
 var tab_default = Tab;
 export {

package/dist/source/components/navigation/tabs/tab/tab.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\nimport { type JSX, type ParentProps, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../../base/ripple\";\nimport { useTabsContext } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport interface TabProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  icon?: JSX.Element;\n  stacked?: boolean;\n  tag?: string;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [root, setRoot] = createSignal<HTMLButtonElement | HTMLAnchorElement>();\n  // The tab's position in the tab list: it follows the tab when tabs around it\n  // are added, removed or reordered.\n  const index = ctx ? ctx.registerTab(root) : () => -1;\n  const merged = mergeProps({ isActive: false, stacked: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"disabled\",\n    \"onClick\",\n    \"ref\",\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n  ]);\n\n  // Read the icon and the label once: markup passed as a prop is created anew on\n  // every read, and during hydration the copy made for the <Show> test has no\n  // server DOM node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n  const label = children(() => local.label);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index() : local.isActive);\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    // Inside Tabs too the caller's onClick runs first, then the tab list picks the tab.\n    callHandler(local.onClick, event);\n    ctx?.onChange(event, index());\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    rippleActions?.onRipple(event);\n  };\n\n  const tag = (): string => local.tag ?? \"button\";\n\n  return (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref, setRoot)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      onClick={onClick}\n      onPointerDown={onPointerDown}\n      // The role, the selection and the roving tabindex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      tabindex={active() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span class=\"smwb-tab__content\" ref={mergeRefs(local.contentRef)}>\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\">{icon()}</span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\">{label()}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n}\n\nexport default Tab;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,cAAc,YAAY,kBAAkB;AACjG,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAerB,SAAS,IAAI,OAA2C;AAC7D,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,aAAoD;AAG5E,QAAM,QAAQ,MAAM,IAAI,YAAY,IAAI,IAAI,MAAM;AAClD,QAAM,SAAS,WAAW,EAAE,UAAU,OAAO,SAAS,MAAM,GAAG,KAAK;AACpE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF,CAAC;AAKD,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AAExC,MAAI;AAEJ,QAAM,SAAS,MAAgB,MAAM,IAAI,MAAM,MAAM,MAAM,IAAI,MAAM;AAErE,QAAM,UAA+E,CAAC,UAAU;AAE9F,gBAAY,MAAM,SAAS,KAAK;AAChC,SAAK,SAAS,OAAO,MAAM,CAAC;AAAA,EAC9B;AAEA,QAAM,gBAAuF,CAAC,UAAU;AACtG,gBAAY,MAAM,eAAe,KAAK;AACtC,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,QAAM,MAAM,MAAc,MAAM,OAAO;AAEvC,SACE,CAAC;AAAA,IACC,WAAW,IAAI;AAAA,QACX;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,OAAO;AAAA,IACjC,OAAO,GAAG,YAAY,MAAM,OAAO;AAAA,MACjC,oBAAoB,OAAO;AAAA,MAC3B,qBAAqB,MAAM;AAAA,MAC3B,sBAAsB,MAAM;AAAA,IAC9B,CAAC;AAAA,IACD,SAAS;AAAA,IACT,eAAe;AAAA,IAIf,KAAK;AAAA,IACL,eAAe,OAAO;AAAA,IACtB,eAAe,MAAM,YAAY;AAAA,IACjC,UAAU,OAAO,IAAI,IAAI;AAAA,IACzB,UAAU,IAAI,MAAM,WAAW,MAAM,WAAW;AAAA,GACjD;AAAA,MACC,CAAC,KAAK,MAAM,oBAAoB,KAAK,UAAU,MAAM,UAAU,GAAG;AAAA,QAChE,CAAC,KAAK,MAAM,KAAK,GAAG;AAAA,UAClB,CAAC,KAAK,MAAM,kBAAkB,KAAK,EAAE,EAApC,KAA2C;AAAA,QAC9C,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,GAAG;AAAA,UACnB,CAAC,KAAK,MAAM,wBAAwB,MAAM,EAAE,EAA3C,KAAkD;AAAA,QACrD,EAFC,KAEM;AAAA,MACT,EAPC,KAOM;AAAA,MACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,SAAS,EAAE,OAAO,oBAAoB,GAAG,EAAE;AAAA,IACxG,EA7BC;AA+BL;AAEA,IAAO,cAAQ;","names":[],"file":"tab.jsx"}
+{"version":3,"sources":["../../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/tabs/tab/tab.entry.less\";\nimport { type JSX, type ParentProps, Show, children, createSignal, 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 { useTabsContext, type TabCloseReason } from \"../tabsContext\";\nimport { mergeRefs, type Ref } from \"../../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../../primitives/callHandler\";\n\nexport type { TabCloseReason };\n\n/** What a function given as `actions` receives. */\nexport interface TabActionsApi {\n  /**\n   * Ask for the tab to close, as its close button does: `onClose` is called with this event and the\n   * reason \"actions\", and `Tabs` moves focus on to the neighbour once the tab goes, even though focus\n   * is in a menu drawn outside the row. Call it from the item that closes the tab (\"Terminate\"), with\n   * that item's event. It works on a tab that is not `closable`.\n   */\n  close: (event: Event) => void;\n}\n\n// `onClose` is the close button's, not the element's `close` event handler.\nexport interface TabProps extends Omit<JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, \"onClose\"> {\n  label?: JSX.Element;\n  isActive?: boolean;\n  /**\n   * Whether the tab is the one in the page's Tab order (`tabindex` 0, the others -1). `Tabs` sets\n   * it: the focused tab while focus is in the row, the selected one otherwise. On its own a tab\n   * is the stop while `isActive`.\n   */\n  tabStop?: boolean;\n  contentRef?: Ref<HTMLSpanElement>;\n  /**\n   * A decorative status marker drawn left of the label (a running/done/failed icon). Its\n   * wrapper renders `aria-hidden=\"true\"`, so the tab's accessible name stays the label\n   * alone: the icon is not announced on top of it. To have the status read out, put it\n   * in the `label` itself.\n   */\n  icon?: JSX.Element;\n  stacked?: boolean;\n  /** The element to render. A tab with an `href` is an `a` unless you say otherwise. */\n  tag?: string;\n  /**\n   * Navigation mode: where the tab goes. The tab is then a real link (`<a href role=\"tab\">`, with\n   * no `target`: a tab never opens another window), so it opens in place and middle click, copy\n   * link and the like work. A router takes over the plain click in `onClick` with\n   * `event.preventDefault()`; `Tabs` still calls `onChange` for it. A modified or non-primary click\n   * (Ctrl, Meta, Shift or Alt held, or a button other than the main one) is the browser's, as\n   * \"open in a new tab\": the router must let it through, and `Tabs` does not call `onChange`.\n   * The one exception is a middle press on a `closable` tab: it closes the tab instead, as in an\n   * editor, and its default is prevented so nothing opens.\n   */\n  href?: string;\n  disabled?: boolean;\n  /**\n   * Draw a close button after the tab, and let Delete or Backspace on the focused tab close it too\n   * (Backspace because a Mac has no Delete key); the tab lists them in `aria-keyshortcuts`. A\n   * middle click on the tab closes it as well (`reason` \"middleClick\"): the browser's own\n   * middle-click action (autoscroll, opening a link tab in a new window) is suppressed, and the\n   * click never selects. The tab does not close itself: `onClose` asks for it and the owner\n   * removes the `Tab`. The button is a sibling of the tab, not inside its `role=\"tab\"`, so the\n   * tab's accessible name is its label alone.\n   * It is out of the Tab order (`tabindex` -1), so the row keeps one tab stop, and a press on it takes\n   * no focus and never selects the tab. When the tab that has focus closes, `Tabs` moves focus to the\n   * tab that takes its place (the previous one if it was last), skipping disabled tabs. A disabled tab\n   * has a disabled button.\n   *\n   * The button stays in the accessibility tree, named by `closeLabel`: it is how a screen reader user\n   * who cannot press Delete, as on a touch screen, closes the tab. It sits in the tab list beside its\n   * tab, though, and ARIA 1.2 lets a `tablist` own only `tab`s: a linter that applies that strictly\n   * (axe `aria-required-children`) can flag the button, and whatever `actions` holds.\n   *\n   * To switch it off on a tab, pass `false` rather than leaving it out: a tab given `closable` or\n   * `actions` is wrapped in an item with them, a tab given neither is not, and moving between the two\n   * recreates the tab and drops its focus.\n   */\n  closable?: boolean;\n  /**\n   * Asks for the tab to close, and receives what asked for it: the close button's click (`reason`\n   * \"button\"), the key press of Delete or Backspace on the tab (`reason` \"key\", its default is\n   * prevented), the middle press on the tab (`reason` \"middleClick\", its default is prevented too),\n   * or the event passed to `close` by the tab's `actions` (`reason` \"actions\"). The owner removes\n   * the `Tab`.\n   */\n  onClose?: (event: Event, reason: TabCloseReason) => void;\n  /** Accessible label of the close button. English by default; set it to localise, or to name the tab (\"Close Terminal 1\"). */\n  closeLabel?: string;\n  /**\n   * Content after the tab, before the close button: a trigger with a `Menu` (\"Rename\", \"Terminate\"),\n   * or any control. Give a function to get `{ close }` (see `TabActionsApi`); it is called once.\n   * Like the close button the content is a sibling of the tab, so it is not part of the tab's name;\n   * the tab's own `ref`, `class` and handlers stay on the `role=\"tab\"` element. It stays in the\n   * accessibility tree as written, inside the tab list (see `closable`).\n   *\n   * The row has one tab stop, so give the trigger `tabindex={-1}`. Shift+F10 or the Menu key on the\n   * focused tab, which the tab lists in `aria-keyshortcuts`, focuses the first control in `actions`\n   * and clicks it, unless that control says `aria-expanded=\"true\"` (it is already open). If the\n   * control names its popup in `aria-controls`, the first enabled `menuitem` in that element then\n   * takes focus, as the WAI-ARIA menu button pattern asks: ArrowDown moves on, Enter chooses, and\n   * Escape hands focus back to the trigger. Without `aria-controls` focus stays on the trigger.\n   *\n   * The row clips what overflows it: draw the menu in a `Portal`, anchored to the trigger and with\n   * the `id` the trigger names. A choice that removes the tab (\"Terminate\") should call `close` with\n   * its event, so that `onClose` removes the tab and `Tabs` moves focus on to the neighbour; a tab\n   * removed some other way leaves focus on the page.\n   */\n  actions?: JSX.Element | ((api: TabActionsApi) => JSX.Element);\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\n/** A click that asks the browser for something else than \"go here\": a new tab, a new window, a download. */\nconst isModifiedClick = (event: MouseEvent): boolean =>\n  event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;\n\nconst hasModifier = (event: KeyboardEvent): boolean => event.ctrlKey || event.metaKey || event.altKey || event.shiftKey;\n\n/** What the Menu key and Shift+F10 stand for: the actions' trigger. */\nconst ACTIONS_TRIGGER = 'button:not(:disabled), a[href], [role=\"button\"]:not([aria-disabled=\"true\"]), [tabindex]';\n\n/** The item of an opened menu that takes focus first. */\nconst FIRST_MENU_ITEM = '[role^=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\n/** Focus the first item of the popup `trigger` names in `aria-controls`, if it is there. */\nconst focusPopupOf = (trigger: HTMLElement): void => {\n  for (const id of trigger.getAttribute(\"aria-controls\")?.split(/\\s+/) ?? []) {\n    const item = id ? trigger.ownerDocument.getElementById(id)?.querySelector<HTMLElement>(FIRST_MENU_ITEM) : null;\n    if (item) {\n      // The menu may not be placed yet: a scroll to it would jump to the corner it starts in.\n      item.focus({ preventScroll: true });\n      return;\n    }\n  }\n};\n\nexport function Tab(props: ParentProps<TabProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [root, setRoot] = createSignal<HTMLButtonElement | HTMLAnchorElement>();\n  const merged = mergeProps({ isActive: false, stacked: false, closeLabel: \"Close tab\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"label\",\n    \"isActive\",\n    \"contentRef\",\n    \"icon\",\n    \"stacked\",\n    \"tag\",\n    \"href\",\n    \"tabStop\",\n    \"disabled\",\n    // `Tabs` owns this: it is the item that drags, not the tab. The caller's value\n    // is dropped, as in the React `Tab`.\n    \"draggable\",\n    \"closable\",\n    \"onClose\",\n    \"closeLabel\",\n    \"actions\",\n    \"id\",\n    \"aria-controls\",\n    // A tab opens in place: a caller's target is dropped, not passed on.\n    \"target\" as keyof TabProps,\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"onMouseDown\",\n  ]);\n\n  // The tab's position in the tab list: it follows the tab when tabs around it\n  // are added, removed or reordered.\n  const index = ctx\n    ? ctx.registerTab(root, {\n        id: () => local.id,\n        disabled: () =>\n          Boolean(local.disabled) || props[\"aria-disabled\"] === true || props[\"aria-disabled\"] === \"true\",\n        closable: () => Boolean(local.closable),\n        requestClose: (event) => close(event, \"key\"),\n      })\n    : () => -1;\n\n  // Read the icon and the label once: markup passed as a prop is created anew on\n  // every read, and during hydration the copy made for the <Show> test has no\n  // server DOM node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n  const label = children(() => local.label);\n  // The actions are drawn whenever they are given, so reading them here, once, is safe. A function\n  // is the tab's to call, with its api: `children` would call it with nothing.\n  const actionsApi: TabActionsApi = { close: (event) => close(event, \"actions\") };\n  const actions = children(() => {\n    const given = local.actions;\n    return typeof given === \"function\" ? (given as (api: TabActionsApi) => JSX.Element)(actionsApi) : given;\n  });\n  const hasActions = (): boolean => actions.toArray().length > 0;\n\n  let rippleActions: RippleActionsRef | undefined;\n  let actionsEl: HTMLSpanElement | undefined;\n\n  const active = (): boolean => (ctx ? ctx.value() === index() : local.isActive);\n\n  const tag = (): string => local.tag ?? (local.href !== undefined ? \"a\" : \"button\");\n  // Anything but a button is not disabled by the attribute: its clicks are swallowed here.\n  const inert = (): boolean => Boolean(local.disabled) && tag() !== \"button\";\n\n  const onClick: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    if (inert()) {\n      event.preventDefault();\n      return;\n    }\n    // Inside Tabs too the caller's onClick runs first, then the tab list picks the tab.\n    callHandler(local.onClick, event);\n    // A link tab opens elsewhere on a modified click: the browser's, not a selection here.\n    if (local.href !== undefined && isModifiedClick(event)) return;\n    ctx?.onChange(event, index());\n  };\n\n  const close = (event: Event, reason: TabCloseReason): void => {\n    // The row notes which tab is closing before the owner removes it.\n    ctx?.closing(index(), reason);\n    local.onClose?.(event, reason);\n  };\n\n  // A button clicks on Enter and Space by itself, a link on Enter only: Space does it here.\n  const onKeyDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (local.disabled || event.defaultPrevented || event.target !== event.currentTarget) return;\n    if (tag() !== \"button\" && event.key === \" \") {\n      event.preventDefault();\n      event.currentTarget.click();\n    } else if (local.closable && (event.key === \"Delete\" || event.key === \"Backspace\") && !hasModifier(event)) {\n      event.preventDefault();\n      close(event, \"key\");\n    } else if (hasActions() && (event.key === \"ContextMenu\" || (event.key === \"F10\" && event.shiftKey))) {\n      // The Menu key, or Shift+F10: the keyboard's right click. The trigger takes focus first, so\n      // the menu it opens hands focus back to it on Escape.\n      const trigger = actionsEl?.querySelector<HTMLElement>(ACTIONS_TRIGGER);\n      if (trigger) {\n        event.preventDefault();\n        trigger.focus();\n        // The keys mean \"open\": a menu that already is open is not toggled shut.\n        if (trigger.getAttribute(\"aria-expanded\") !== \"true\") {\n          trigger.click();\n        }\n        focusPopupOf(trigger);\n      }\n    }\n  };\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    rippleActions?.onRipple(event);\n  };\n\n  // Middle click on a closable tab closes it, IDE-style: the browser's own middle-click\n  // action (autoscroll, opening a link tab in a new window) is suppressed and the tab is\n  // never selected. A middle click on a tab that is not closable is the browser's, untouched.\n  const onMouseDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, MouseEvent> = (event) => {\n    callHandler(local.onMouseDown, event);\n    if (event.button === 1 && local.closable && !local.disabled) {\n      event.preventDefault();\n      close(event, \"middleClick\");\n    }\n  };\n\n  // Inside Tabs the row decides, whatever the caller passed.\n  const tabStop = (): boolean => (ctx ? ctx.tabStop(index()) : (local.tabStop ?? active()));\n\n  // What the tab answers to, for assistive technology; the caller's own list is kept.\n  // The chords are best-effort: browsers reserve Mod+W and Mod+Shift+[/] in a page of\n  // their own tabs, and they bite only in an embedded webview.\n  const keyshortcuts = (): string | undefined =>\n    [\n      props[\"aria-keyshortcuts\"],\n      !local.disabled && local.closable ? \"Delete Backspace\" : undefined,\n      !local.disabled && hasActions() ? \"Shift+F10 ContextMenu\" : undefined,\n      !local.disabled && local.closable ? \"Meta+W Control+W\" : undefined,\n      !local.disabled ? \"Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]\" : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  // A tab given neither `closable` nor `actions` is the bare element, as it always was.\n  const wrapped = (): boolean => local.closable !== undefined || actions() !== undefined;\n\n  // Only a reorderable row makes its items draggable, and a disabled tab never — the same\n  // contract as the registration's `disabled`. Rendered on the item (the wrapper, or the\n  // bare tab when there is none), so `draggable` is in the server markup, as in React.\n  const draggable = (): boolean | undefined =>\n    ctx?.reorderable() && !local.disabled && props[\"aria-disabled\"] !== true && props[\"aria-disabled\"] !== \"true\"\n      ? true\n      : undefined;\n\n  const renderTab = (): JSX.Element => (\n    <Dynamic\n      component={tag()}\n      {...rest}\n      ref={mergeRefs(local.ref, setRoot)}\n      class={cn(\"smwb-tab\", local.class, {\n        \"smwb-tab--active\": active(),\n        \"smwb-tab--stacked\": local.stacked,\n        \"smwb-tab--disabled\": local.disabled,\n      })}\n      id={local.id ?? ctx?.tabId(index())}\n      aria-controls={local[\"aria-controls\"] ?? (ctx?.hasPanels() ? ctx.panelId(index()) : undefined)}\n      // A disabled link has no href, so it is no link to follow or to focus.\n      href={inert() ? undefined : local.href}\n      draggable={wrapped() ? undefined : draggable()}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n      onMouseDown={onMouseDown}\n      // The role, the selection and the roving tabindex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role=\"tab\"\n      aria-selected={active()}\n      aria-disabled={local.disabled || undefined}\n      aria-keyshortcuts={keyshortcuts()}\n      tabindex={tabStop() ? 0 : -1}\n      disabled={tag() === \"button\" ? local.disabled : undefined}\n    >\n      <span class=\"smwb-tab__content\" ref={mergeRefs(local.contentRef)}>\n        <Show when={icon()}>\n          <span class=\"smwb-tab__icon\" aria-hidden=\"true\">\n            {icon()}\n          </span>\n        </Show>\n        <Show when={label()}>\n          <span class=\"smwb-tab__text-label\">{label()}</span>\n        </Show>\n      </span>\n      <Ripple actionRef={(api) => (rippleActions = api)} classes={{ child: \"tab__ripple-child\" }} />\n    </Dynamic>\n  );\n\n  return (\n    <Show when={wrapped()} fallback={renderTab()}>\n      <div\n        class={cn(\"smwb-tab-item\", {\n          \"smwb-tab-item--active\": active(),\n          \"smwb-tab-item--disabled\": local.disabled,\n        })}\n        draggable={draggable()}\n      >\n        {renderTab()}\n        <Show when={hasActions()}>\n          <span class=\"smwb-tab__actions\" ref={actionsEl}>\n            {actions()}\n          </span>\n        </Show>\n        <Show when={local.closable}>\n          <button\n            type=\"button\"\n            class=\"smwb-tab__close\"\n            // Out of the Tab order, so the row keeps its one tab stop; Delete on the tab closes it.\n            tabindex={-1}\n            aria-label={local.closeLabel}\n            disabled={Boolean(local.disabled)}\n            // A press does not take focus from where it is: from the tab being closed, or the page.\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={(event) => close(event, \"button\")}\n          >\n            <Icon name=\"close\" size={16} />\n          </button>\n        </Show>\n      </div>\n    </Show>\n  );\n}\n\nexport default Tab;\n"],"mappings":"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","names":[],"file":"tab.jsx"}

package/dist/source/components/navigation/tabs/tabPanel/tabPanel.jsx

@@ -0,0 +1,30 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
+import "@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less";
+import { mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { useTabsContext } from "../tabsContext";
+function TabPanel(props) {
+  const ctx = useTabsContext();
+  const [local, rest] = splitProps(props, ["index", "class", "children"]);
+  const linked = mergeProps(
+    {
+      get id() {
+        return ctx?.panelId(local.index);
+      },
+      get "aria-labelledby"() {
+        return ctx?.tabId(local.index);
+      },
+      tabindex: 0
+    },
+    rest
+  );
+  return <div {...linked} class={cn("smwb-tab-panel", local.class)} role="tabpanel" hidden={ctx ? ctx.value() !== local.index : linked.hidden}>
+      {local.children}
+    </div>;
+}
+var tabPanel_default = TabPanel;
+export {
+  TabPanel,
+  tabPanel_default as default
+};
+//# sourceMappingURL=tabPanel.jsx.map

package/dist/source/components/navigation/tabs/tabPanel/tabPanel.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/navigation/tabs/tabPanel/tabPanel.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/tabs/tabPanel/tabPanel.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { useTabsContext } from \"../tabsContext\";\n\nexport interface TabPanelProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The tab this panel belongs to: its index, counted as for the `value` of `Tabs`. The panel\n   * shows while that tab is selected and is hidden otherwise.\n   */\n  index: number;\n  /** Extra class on the panel. */\n  class?: string;\n  /** The panel's content. It stays in the document while the panel is hidden. */\n  children?: JSX.Element;\n}\n\n/**\n * The content of one tab. Give it to the `panels` of `Tabs`, which links it to its tab: the panel\n * is `aria-labelledby` the tab and the tab `aria-controls` the panel. A panel is `role=\"tabpanel\"`\n * and a tab stop of its own (`tabindex=\"0\"`), so Tab moves from the tab list to the panel. A panel\n * placed anywhere else is not linked to any tabs and is always shown (its `hidden` is yours).\n */\nexport function TabPanel(props: ParentProps<TabPanelProps>): JSX.Element {\n  const ctx = useTabsContext();\n  const [local, rest] = splitProps(props, [\"index\", \"class\", \"children\"]);\n  // Yours win: a TabPanel outside Tabs `panels` has no ids to give, and a caller's\n  // `id`, `aria-labelledby` or `tabindex` replaces the linked ones.\n  const linked = mergeProps(\n    {\n      get id() {\n        return ctx?.panelId(local.index);\n      },\n      get \"aria-labelledby\"() {\n        return ctx?.tabId(local.index);\n      },\n      tabindex: 0,\n    },\n    rest\n  );\n\n  return (\n    <div {...linked} class={cn(\"smwb-tab-panel\", local.class)} role=\"tabpanel\" hidden={ctx ? ctx.value() !== local.index : linked.hidden}>\n      {local.children}\n    </div>\n  );\n}\n\nexport default TabPanel;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,sBAAsB;AAoBxB,SAAS,SAAS,OAAgD;AACvE,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,SAAS,SAAS,UAAU,CAAC;AAGtE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,IAAI,KAAK;AACP,eAAO,KAAK,QAAQ,MAAM,KAAK;AAAA,MACjC;AAAA,MACA,IAAI,oBAAoB;AACtB,eAAO,KAAK,MAAM,MAAM,KAAK;AAAA,MAC/B;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AAEA,SACE,CAAC,QAAQ,QAAQ,OAAO,GAAG,kBAAkB,MAAM,KAAK,GAAG,KAAK,WAAW,QAAQ,MAAM,IAAI,MAAM,MAAM,MAAM,QAAQ,OAAO,QAAQ;AAAA,OACnI,MAAM,SAAS;AAAA,IAClB,EAFC;AAIL;AAEA,IAAO,mBAAQ;","names":[],"file":"tabPanel.jsx"}