@smwb/ui-solid 0.12.1 → 0.14.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/navigation/pagination/pagination.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/pagination/pagination.entry.less\";\nimport { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type PaginationColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface PaginationProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Total number of pages. */\n  count: number;\n  /** Current page (1-based). */\n  page: number;\n  /** Pages shown on each side of the current page. */\n  siblingCount?: number;\n  /** Pages always shown at the start and end. */\n  boundaryCount?: number;\n  size?: \"small\" | \"medium\";\n  /** Item style. */\n  variant?: \"filled\" | \"outlined\";\n  /** Item shape. */\n  shape?: \"rounded\" | \"circular\";\n  color?: PaginationColor;\n  disabled?: boolean;\n  showFirstButton?: boolean;\n  showLastButton?: boolean;\n  hidePrevButton?: boolean;\n  hideNextButton?: boolean;\n  onChange?: (page: number) => void;\n  ref?: Ref<HTMLElement>;\n}\n\ntype PaginationItem = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);\n\nconst buildItems = (count: number, page: number, siblingCount: number, boundaryCount: number): PaginationItem[] => {\n  const startPages = range(1, Math.min(boundaryCount, count));\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0]! - 2 : count - 1\n  );\n\n  return [\n    ...startPages,\n    ...(siblingsStart > boundaryCount + 2\n      ? ([\"start-ellipsis\"] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? ([\"end-ellipsis\"] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ];\n};\n\nexport function Pagination(props: PaginationProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      siblingCount: 1,\n      boundaryCount: 1,\n      size: \"medium\" as const,\n      variant: \"filled\" as const,\n      shape: \"circular\" as const,\n      color: \"default\" as PaginationColor,\n      disabled: false,\n      showFirstButton: false,\n      showLastButton: false,\n      hidePrevButton: false,\n      hideNextButton: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"count\",\n    \"page\",\n    \"siblingCount\",\n    \"boundaryCount\",\n    \"size\",\n    \"variant\",\n    \"shape\",\n    \"color\",\n    \"disabled\",\n    \"showFirstButton\",\n    \"showLastButton\",\n    \"hidePrevButton\",\n    \"hideNextButton\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  let navEl: HTMLElement | undefined;\n\n  const go = (target: number): void => {\n    if (local.disabled || target === local.page || target < 1 || target > local.count) return;\n    local.onChange?.(target);\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) return;\n    const buttons = Array.from(\n      navEl?.querySelectorAll<HTMLButtonElement>(\"button.smwb-pagination__item:not(:disabled)\") ?? []\n    );\n    if (buttons.length === 0) return;\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    let next = current;\n    if (event.key === \"ArrowRight\") next = Math.min(current + 1, buttons.length - 1);\n    else if (event.key === \"ArrowLeft\") next = Math.max(current - 1, 0);\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = buttons.length - 1;\n    event.preventDefault();\n    buttons[next]?.focus();\n  };\n\n  const items = (): PaginationItem[] => buildItems(local.count, local.page, local.siblingCount, local.boundaryCount);\n\n  const navButton = (label: string, target: number, iconName: string, hidden?: boolean): JSX.Element => (\n    <Show when={!hidden}>\n      <li>\n        <button\n          type=\"button\"\n          class=\"smwb-pagination__item smwb-pagination__nav\"\n          aria-label={label}\n          disabled={local.disabled || target < 1 || target > local.count}\n          onClick={() => go(target)}\n        >\n          <Icon name={iconName} size={local.size === \"small\" ? 16 : 18} />\n        </button>\n      </li>\n    </Show>\n  );\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (navEl = el))}\n      data-testid=\"pagination\"\n      aria-label=\"pagination\"\n      class={cn(\n        \"smwb-pagination\",\n        `smwb-pagination_${local.size}`,\n        `smwb-pagination_${local.variant}`,\n        `smwb-pagination_shape-${local.shape}`,\n        local.color !== \"default\" && `smwb-pagination_color-${local.color}`,\n        { \"smwb-pagination_disabled\": local.disabled },\n        local.class\n      )}\n    >\n      <ul class=\"smwb-pagination__list\" onKeyDown={onKeyDown}>\n        {navButton(\"First page\", 1, \"first_page\", !local.showFirstButton)}\n        {navButton(\"Previous page\", local.page - 1, \"chevron_left\", local.hidePrevButton)}\n        <For each={items()}>\n          {(item) => (\n            <Show\n              when={typeof item === \"number\"}\n              fallback={\n                <li class=\"smwb-pagination__ellipsis\" aria-hidden=\"true\">\n                  …\n                </li>\n              }\n            >\n              <li>\n                <button\n                  type=\"button\"\n                  class={cn(\"smwb-pagination__item\", { \"smwb-pagination__item_selected\": item === local.page })}\n                  aria-current={item === local.page ? \"page\" : undefined}\n                  disabled={local.disabled}\n                  onClick={() => go(item as number)}\n                >\n                  {item}\n                </button>\n              </li>\n            </Show>\n          )}\n        </For>\n        {navButton(\"Next page\", local.page + 1, \"chevron_right\", local.hideNextButton)}\n        {navButton(\"Last page\", local.count, \"last_page\", !local.showLastButton)}\n      </ul>\n    </nav>\n  );\n}\n\nexport default Pagination;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,MAAM,YAAY,kBAAkB;AAC5D,OAAO,QAAQ;AACf,SAAS,YAAY;AACrB,SAAS,iBAA2B;AA8BpC,MAAM,QAAQ,CAAC,OAAe,QAC5B,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,MAAM,QAAQ,CAAC;AAE1E,MAAM,aAAa,CAAC,OAAe,MAAc,cAAsB,kBAA4C;AACjH,QAAM,aAAa,MAAM,GAAG,KAAK,IAAI,eAAe,KAAK,CAAC;AAC1D,QAAM,WAAW,MAAM,KAAK,IAAI,QAAQ,gBAAgB,GAAG,gBAAgB,CAAC,GAAG,KAAK;AAEpF,QAAM,gBAAgB,KAAK;AAAA,IACzB,KAAK,IAAI,OAAO,cAAc,QAAQ,gBAAgB,eAAe,IAAI,CAAC;AAAA,IAC1E,gBAAgB;AAAA,EAClB;AACA,QAAM,cAAc,KAAK;AAAA,IACvB,KAAK,IAAI,OAAO,cAAc,gBAAgB,eAAe,IAAI,CAAC;AAAA,IAClE,SAAS,SAAS,IAAI,SAAS,CAAC,IAAK,IAAI,QAAQ;AAAA,EACnD;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAI,gBAAgB,gBAAgB,IAC/B,CAAC,gBAAgB,IAClB,gBAAgB,IAAI,QAAQ,gBAC1B,CAAC,gBAAgB,CAAC,IAClB,CAAC;AAAA,IACP,GAAG,MAAM,eAAe,WAAW;AAAA,IACnC,GAAI,cAAc,QAAQ,gBAAgB,IACrC,CAAC,cAAc,IAChB,QAAQ,gBAAgB,gBACtB,CAAC,QAAQ,aAAa,IACtB,CAAC;AAAA,IACP,GAAG;AAAA,EACL;AACF;AAEO,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS;AAAA,IACb;AAAA,MACE,cAAc;AAAA,MACd,eAAe;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAClB;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,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,KAAK,CAAC,WAAyB;AACnC,QAAI,MAAM,YAAY,WAAW,MAAM,QAAQ,SAAS,KAAK,SAAS,MAAM,MAAO;AACnF,UAAM,WAAW,MAAM;AAAA,EACzB;AAEA,QAAM,YAA+D,CAAC,UAAU;AAC9E,QAAI,CAAC,CAAC,aAAa,cAAc,QAAQ,KAAK,EAAE,SAAS,MAAM,GAAG,EAAG;AACrE,UAAM,UAAU,MAAM;AAAA,MACpB,OAAO,iBAAoC,6CAA6C,KAAK,CAAC;AAAA,IAChG;AACA,QAAI,QAAQ,WAAW,EAAG;AAC1B,UAAM,UAAU,QAAQ,QAAQ,SAAS,aAAkC;AAC3E,QAAI,OAAO;AACX,QAAI,MAAM,QAAQ,aAAc,QAAO,KAAK,IAAI,UAAU,GAAG,QAAQ,SAAS,CAAC;AAAA,aACtE,MAAM,QAAQ,YAAa,QAAO,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,aACzD,MAAM,QAAQ,OAAQ,QAAO;AAAA,aAC7B,MAAM,QAAQ,MAAO,QAAO,QAAQ,SAAS;AACtD,UAAM,eAAe;AACrB,YAAQ,IAAI,GAAG,MAAM;AAAA,EACvB;AAEA,QAAM,QAAQ,MAAwB,WAAW,MAAM,OAAO,MAAM,MAAM,MAAM,cAAc,MAAM,aAAa;AAEjH,QAAM,YAAY,CAAC,OAAe,QAAgB,UAAkB,WAClE,CAAC,KAAK,MAAM,CAAC,QAAQ;AAAA,MACnB,CAAC,GAAG;AAAA,QACF,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU,MAAM,YAAY,SAAS,KAAK,SAAS,MAAM;AAAA,IACzD,SAAS,MAAM,GAAG,MAAM;AAAA,GACzB;AAAA,UACC,CAAC,KAAK,MAAM,UAAU,MAAM,MAAM,SAAS,UAAU,KAAK,IAAI,EAAE;AAAA,QAClE,EARC,OAQQ;AAAA,MACX,EAVC,GAUI;AAAA,IACP,EAZC;AAeH,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,KAAK,CAAC,OAAQ,QAAQ,EAAG;AAAA,IAC9C,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB,MAAM,IAAI;AAAA,MAC7B,mBAAmB,MAAM,OAAO;AAAA,MAChC,yBAAyB,MAAM,KAAK;AAAA,MACpC,MAAM,UAAU,aAAa,yBAAyB,MAAM,KAAK;AAAA,MACjE,EAAE,4BAA4B,MAAM,SAAS;AAAA,MAC7C,MAAM;AAAA,IACR;AAAA,GACD;AAAA,MACC,CAAC,GAAG,MAAM,wBAAwB,WAAW,WAAW;AAAA,SACrD,UAAU,cAAc,GAAG,cAAc,CAAC,MAAM,eAAe,EAAE;AAAA,SACjE,UAAU,iBAAiB,MAAM,OAAO,GAAG,gBAAgB,MAAM,cAAc,EAAE;AAAA,QAClF,CAAC,IAAI,MAAM,MAAM,GAAG;AAAA,WACjB,CAAC,SACA,CAAC;AAAA,IACC,MAAM,OAAO,SAAS;AAAA,IACtB,UACE,CAAC,GAAG,MAAM,4BAA4B,YAAY,OAAO;AAAA;AAAA,gBAEzD,EAFC;AAAA,GAIJ;AAAA,cACC,CAAC,GAAG;AAAA,gBACF,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,GAAG,yBAAyB,EAAE,kCAAkC,SAAS,MAAM,KAAK,CAAC;AAAA,IAC5F,cAAc,SAAS,MAAM,OAAO,SAAS;AAAA,IAC7C,UAAU,MAAM;AAAA,IAChB,SAAS,MAAM,GAAG,IAAc;AAAA,GACjC;AAAA,mBACE,KAAK;AAAA,gBACR,EARC,OAQQ;AAAA,cACX,EAVC,GAUI;AAAA,YACP,EAnBC,MAoBD;AAAA,QACJ,EAvBC,IAuBK;AAAA,SACL,UAAU,aAAa,MAAM,OAAO,GAAG,iBAAiB,MAAM,cAAc,EAAE;AAAA,SAC9E,UAAU,aAAa,MAAM,OAAO,aAAa,CAAC,MAAM,cAAc,EAAE;AAAA,MAC3E,EA7BC,GA6BI;AAAA,IACP,EA7CC;AA+CL;AAEA,IAAO,qBAAQ;","names":[],"file":"pagination.jsx"}
+{"version":3,"sources":["../../../../../src/components/navigation/pagination/pagination.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/pagination/pagination.entry.less\";\nimport { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type PaginationColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface PaginationProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"onChange\"> {\n  /** Total number of pages. */\n  count: number;\n  /** Current page (1-based). */\n  page: number;\n  /** Pages shown on each side of the current page. */\n  siblingCount?: number;\n  /** Pages always shown at the start and end. */\n  boundaryCount?: number;\n  size?: \"small\" | \"medium\";\n  /** Item style. */\n  variant?: \"filled\" | \"outlined\";\n  /** Item shape. */\n  shape?: \"rounded\" | \"circular\";\n  color?: PaginationColor;\n  disabled?: boolean;\n  showFirstButton?: boolean;\n  showLastButton?: boolean;\n  hidePrevButton?: boolean;\n  hideNextButton?: boolean;\n  onChange?: (page: number) => void;\n  /** Test id of the root `<nav>`; `pagination` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\ntype PaginationItem = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);\n\nconst buildItems = (count: number, page: number, siblingCount: number, boundaryCount: number): PaginationItem[] => {\n  const startPages = range(1, Math.min(boundaryCount, count));\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0]! - 2 : count - 1\n  );\n\n  return [\n    ...startPages,\n    ...(siblingsStart > boundaryCount + 2\n      ? ([\"start-ellipsis\"] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? ([\"end-ellipsis\"] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ];\n};\n\nexport function Pagination(props: PaginationProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      siblingCount: 1,\n      boundaryCount: 1,\n      size: \"medium\" as const,\n      variant: \"filled\" as const,\n      shape: \"circular\" as const,\n      color: \"default\" as PaginationColor,\n      disabled: false,\n      showFirstButton: false,\n      showLastButton: false,\n      hidePrevButton: false,\n      hideNextButton: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"count\",\n    \"page\",\n    \"siblingCount\",\n    \"boundaryCount\",\n    \"size\",\n    \"variant\",\n    \"shape\",\n    \"color\",\n    \"disabled\",\n    \"showFirstButton\",\n    \"showLastButton\",\n    \"hidePrevButton\",\n    \"hideNextButton\",\n    \"onChange\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  let navEl: HTMLElement | undefined;\n\n  const go = (target: number): void => {\n    if (local.disabled || target === local.page || target < 1 || target > local.count) return;\n    local.onChange?.(target);\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLUListElement, KeyboardEvent> = (event) => {\n    if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) return;\n    const buttons = Array.from(\n      navEl?.querySelectorAll<HTMLButtonElement>(\"button.smwb-pagination__item:not(:disabled)\") ?? []\n    );\n    if (buttons.length === 0) return;\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    let next = current;\n    if (event.key === \"ArrowRight\") next = Math.min(current + 1, buttons.length - 1);\n    else if (event.key === \"ArrowLeft\") next = Math.max(current - 1, 0);\n    else if (event.key === \"Home\") next = 0;\n    else if (event.key === \"End\") next = buttons.length - 1;\n    event.preventDefault();\n    buttons[next]?.focus();\n  };\n\n  const items = (): PaginationItem[] => buildItems(local.count, local.page, local.siblingCount, local.boundaryCount);\n\n  const navButton = (label: string, target: number, iconName: string, hidden?: boolean): JSX.Element => (\n    <Show when={!hidden}>\n      <li>\n        <button\n          type=\"button\"\n          class=\"smwb-pagination__item smwb-pagination__nav\"\n          aria-label={label}\n          disabled={local.disabled || target < 1 || target > local.count}\n          onClick={() => go(target)}\n        >\n          <Icon name={iconName} size={local.size === \"small\" ? 16 : 18} />\n        </button>\n      </li>\n    </Show>\n  );\n\n  return (\n    <nav\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => (navEl = el))}\n      data-testid={local[\"data-testid\"] ?? \"pagination\"}\n      // A default the caller's own replaces, to name it in their language; an\n      // explicit undefined keeps it.\n      aria-label={rest[\"aria-label\"] ?? \"pagination\"}\n      class={cn(\n        \"smwb-pagination\",\n        `smwb-pagination_${local.size}`,\n        `smwb-pagination_${local.variant}`,\n        `smwb-pagination_shape-${local.shape}`,\n        local.color !== \"default\" && `smwb-pagination_color-${local.color}`,\n        { \"smwb-pagination_disabled\": local.disabled },\n        local.class\n      )}\n    >\n      <ul class=\"smwb-pagination__list\" onKeyDown={onKeyDown}>\n        {navButton(\"First page\", 1, \"first_page\", !local.showFirstButton)}\n        {navButton(\"Previous page\", local.page - 1, \"chevron_left\", local.hidePrevButton)}\n        <For each={items()}>\n          {(item) => (\n            <Show\n              when={typeof item === \"number\"}\n              fallback={\n                <li class=\"smwb-pagination__ellipsis\" aria-hidden=\"true\">\n                  …\n                </li>\n              }\n            >\n              <li>\n                <button\n                  type=\"button\"\n                  class={cn(\"smwb-pagination__item\", { \"smwb-pagination__item_selected\": item === local.page })}\n                  aria-current={item === local.page ? \"page\" : undefined}\n                  disabled={local.disabled}\n                  onClick={() => go(item as number)}\n                >\n                  {item}\n                </button>\n              </li>\n            </Show>\n          )}\n        </For>\n        {navButton(\"Next page\", local.page + 1, \"chevron_right\", local.hideNextButton)}\n        {navButton(\"Last page\", local.count, \"last_page\", !local.showLastButton)}\n      </ul>\n    </nav>\n  );\n}\n\nexport default Pagination;\n"],"mappings":"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","names":[],"file":"pagination.jsx"}

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,9 +76,10 @@ 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="menubar"
+    role={rest.role ?? "menubar"}
   >
       <Show when={local.collapsible}>
         <div class="smwb-sidebar__collapse">

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      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,IACD,KAAK;AAAA,GACN;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,EAxCC;AA0CL;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":"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","names":[],"file":"sidebar.jsx"}

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

@@ -14,14 +14,15 @@ function Stepper(props) {
     "orientation",
     "alternativeLabel",
     "onStepClick",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const steps = createMemo(() => local.steps);
   const auto = () => local.orientation === "auto";
   const stepper = () => <div
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="stepper"
+    data-testid={local["data-testid"] ?? "stepper"}
     data-steps={auto() ? String(Math.min(steps().length, AUTO_MAX_STEPS)) : void 0}
     class={cn(
       "smwb-stepper",
@@ -36,6 +37,15 @@ function Stepper(props) {
     const active = () => index() === local.activeStep;
     const isLast = () => index() === steps().length - 1;
     const clickable = () => Boolean(local.onStepClick) && !step.disabled;
+    const onClick = () => {
+      if (clickable()) local.onStepClick?.(index());
+    };
+    const onKeyDown = (event) => {
+      if (clickable() && (event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        local.onStepClick?.(index());
+      }
+    };
     return <>
               <div
       class={cn("smwb-stepper__step", {
@@ -49,13 +59,8 @@ function Stepper(props) {
       aria-disabled={step.disabled || void 0}
       role={clickable() ? "button" : void 0}
       tabindex={clickable() ? 0 : void 0}
-      onClick={clickable() ? () => local.onStepClick?.(index()) : void 0}
-      onKeyDown={clickable() ? (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          local.onStepClick?.(index());
-        }
-      } : void 0}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
     >
                 <div class="smwb-stepper__icon" aria-hidden="true">
                   <Show when={step.icon} fallback={completed() ? <Icon name="check" size={16} /> : <span>{index() + 1}</span>}>

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/stepper/stepper.entry.less\";\nimport { type JSX, For, Show, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  /** Longer text under the label, in every orientation. */\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\n/**\n * `auto` lays the steps out in a row while the stepper's container is wide\n * enough for them — about 8rem per step, a theme variable — and in a column when\n * it is not. It is a CSS container query, so the server renders the same markup\n * and nothing changes on hydration.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\" | \"auto\";\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: StepperOrientation;\n  /** Place the label under the icon (in a row: horizontal, or auto while wide). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as StepperOrientation, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n  ]);\n\n  // Read the steps once. An inline array is re-evaluated on every read, creating\n  // the markup in it (icons, labels, descriptions) again; during hydration a copy\n  // that is not the rendered one has no server DOM node to adopt.\n  const steps = createMemo(() => local.steps);\n  const auto = (): boolean => local.orientation === \"auto\";\n\n  const stepper = (): JSX.Element => (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stepper\"\n      data-steps={auto() ? String(Math.min(steps().length, AUTO_MAX_STEPS)) : undefined}\n      class={cn(\n        \"smwb-stepper\",\n        auto() ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation !== \"vertical\" },\n        local.class\n      )}\n    >\n      <For each={steps()}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === steps().length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={clickable() ? () => local.onStepClick?.(index()) : undefined}\n                onKeyDown={\n                  clickable()\n                    ? (event) => {\n                        if (event.key === \"Enter\" || event.key === \" \") {\n                          event.preventDefault();\n                          local.onStepClick?.(index());\n                        }\n                      }\n                    : undefined\n                }\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n\n  // `auto` needs a query container around the stepper: its own flex direction is\n  // what the container query switches.\n  return (\n    <Show when={auto()} fallback={stepper()}>\n      <div class=\"smwb-stepper-auto\">{stepper()}</div>\n    </Show>\n  );\n}\n\nexport default Stepper;\n"],"mappings":"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","names":[],"file":"stepper.jsx"}
+{"version":3,"sources":["../../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/stepper/stepper.entry.less\";\nimport { type JSX, For, Show, createMemo, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface StepItem {\n  label: JSX.Element;\n  /** Longer text under the label, in every orientation. */\n  description?: JSX.Element;\n  optional?: JSX.Element;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: JSX.Element;\n}\n\n/**\n * `auto` lays the steps out in a row while the stepper's container is wide\n * enough for them — about 8rem per step, a theme variable — and in a column when\n * it is not. It is a CSS container query, so the server renders the same markup\n * and nothing changes on hydration.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\" | \"auto\";\n\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: StepperOrientation;\n  /** Place the label under the icon (in a row: horizontal, or auto while wide). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  /** Test id of the stepper `<div>`; `stepper` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as StepperOrientation, alternativeLabel: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"steps\",\n    \"activeStep\",\n    \"orientation\",\n    \"alternativeLabel\",\n    \"onStepClick\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the steps once. An inline array is re-evaluated on every read, creating\n  // the markup in it (icons, labels, descriptions) again; during hydration a copy\n  // that is not the rendered one has no server DOM node to adopt.\n  const steps = createMemo(() => local.steps);\n  const auto = (): boolean => local.orientation === \"auto\";\n\n  const stepper = (): JSX.Element => (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"stepper\"}\n      data-steps={auto() ? String(Math.min(steps().length, AUTO_MAX_STEPS)) : undefined}\n      class={cn(\n        \"smwb-stepper\",\n        auto() ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation !== \"vertical\" },\n        local.class\n      )}\n    >\n      <For each={steps()}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === steps().length - 1;\n          const clickable = (): boolean => Boolean(local.onStepClick) && !step.disabled;\n\n          // Solid binds event handlers once, so both are always attached and\n          // check `clickable()` themselves: a step can turn clickable, or stop,\n          // after it renders.\n          const onClick = (): void => {\n            if (clickable()) local.onStepClick?.(index());\n          };\n          const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n            if (clickable() && (event.key === \"Enter\" || event.key === \" \")) {\n              event.preventDefault();\n              local.onStepClick?.(index());\n            }\n          };\n\n          return (\n            <>\n              <div\n                class={cn(\"smwb-stepper__step\", {\n                  \"smwb-stepper__step_active\": active(),\n                  \"smwb-stepper__step_completed\": completed(),\n                  \"smwb-stepper__step_error\": step.error,\n                  \"smwb-stepper__step_disabled\": step.disabled,\n                  \"smwb-stepper__step_clickable\": clickable(),\n                })}\n                aria-current={active() ? \"step\" : undefined}\n                aria-disabled={step.disabled || undefined}\n                role={clickable() ? \"button\" : undefined}\n                tabindex={clickable() ? 0 : undefined}\n                onClick={onClick}\n                onKeyDown={onKeyDown}\n              >\n                <div class=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                  <Show when={step.icon} fallback={completed() ? <Icon name=\"check\" size={16} /> : <span>{index() + 1}</span>}>\n                    {step.icon}\n                  </Show>\n                </div>\n                <div class=\"smwb-stepper__text\">\n                  <span class=\"smwb-stepper__label\">{step.label}</span>\n                  <Show when={step.optional}>\n                    <span class=\"smwb-stepper__optional\">{step.optional}</span>\n                  </Show>\n                  <Show when={step.description}>\n                    <span class=\"smwb-stepper__description\">{step.description}</span>\n                  </Show>\n                </div>\n              </div>\n              <Show when={!isLast()}>\n                <div class=\"smwb-stepper__connector\" aria-hidden=\"true\" />\n              </Show>\n            </>\n          );\n        }}\n      </For>\n    </div>\n  );\n\n  // `auto` needs a query container around the stepper: its own flex direction is\n  // what the container query switches.\n  return (\n    <Show when={auto()} fallback={stepper()}>\n      <div class=\"smwb-stepper-auto\">{stepper()}</div>\n    </Show>\n  );\n}\n\nexport default Stepper;\n"],"mappings":"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","names":[],"file":"stepper.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

@@ -1,16 +1,30 @@
 import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less";
-import { Show, children, mergeProps, splitProps } from "solid-js";
+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 index = ctx ? ctx.registerTab() : -1;
-  const merged = mergeProps({ isActive: false, stacked: false }, props);
+  const [root, setRoot] = createSignal();
+  const merged = mergeProps({ isActive: false, stacked: false, closeLabel: "Close tab" }, props);
   const [local, rest] = splitProps(merged, [
     "class",
     "label",
@@ -19,57 +33,166 @@ 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",
-    "ref"
+    "onKeyDown",
+    "ref",
+    // The tab sets this on its root too; its own handler calls the caller's first.
+    "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;
-  const active = () => ctx ? ctx.value() === index : local.isActive;
+  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 (ctx) {
-      ctx.onChange(event, index);
-    } else {
-      callHandler(local.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)}
+    ref={mergeRefs(local.ref, setRoot)}
     class={cn("smwb-tab", local.class, {
       "smwb-tab--active": active(),
       "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, (el) => {
-      if (ctx?.indicatorContent) ctx.setContentRef(index, el);
-    })}
-  >
+      <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, 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 index = ctx ? ctx.registerTab() : -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  ]);\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    if (ctx) {\n      ctx.onChange(event, index);\n    } else {\n      callHandler(local.onClick, event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent): void => {\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)}\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      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\n        class=\"smwb-tab__content\"\n        ref={mergeRefs(local.contentRef, (el) => {\n          if (ctx?.indicatorContent) ctx.setContentRef(index, el as HTMLSpanElement);\n        })}\n      >\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,YAAY,kBAAkB;AACnF,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,QAAQ,MAAM,IAAI,YAAY,IAAI;AACxC,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,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,QAAQ,MAAM;AAEnE,QAAM,UAA+E,CAAC,UAAU;AAC9F,QAAI,KAAK;AACP,UAAI,SAAS,OAAO,KAAK;AAAA,IAC3B,OAAO;AACL,kBAAY,MAAM,SAAS,KAAK;AAAA,IAClC;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,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,GAAG;AAAA,IACxB,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,IACf,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;AAAA,IACC,MAAM;AAAA,IACN,KAAK,UAAU,MAAM,YAAY,CAAC,OAAO;AACvC,UAAI,KAAK,iBAAkB,KAAI,cAAc,OAAO,EAAqB;AAAA,IAC3E,CAAC;AAAA,GACF;AAAA,QACC,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,EAZC,KAYM;AAAA,MACP,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,SAAS,EAAE,OAAO,oBAAoB,GAAG,EAAE;AAAA,IACxG,EA/BC;AAiCL;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"}