@smwb/ui-solid 0.11.1 → 0.12.0

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/components/stepper/stepper.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 interface StepItem {\n  label: JSX.Element;\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\nexport interface StepperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Place the label under the icon (horizontal only). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Stepper(props: StepperProps): JSX.Element {\n  const merged = mergeProps({ orientation: \"horizontal\" as const, 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  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"stepper\"\n      class={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${local.orientation}`,\n        { \"smwb-stepper_alt-label\": local.alternativeLabel && local.orientation === \"horizontal\" },\n        local.class\n      )}\n    >\n      <For each={local.steps}>\n        {(step, index) => {\n          const completed = (): boolean => index() < local.activeStep;\n          const active = (): boolean => index() === local.activeStep;\n          const isLast = (): boolean => index() === local.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 && local.orientation === \"vertical\"}>\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\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  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"}

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

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/tabs/tab/tab.entry.less";
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cn from "clsx";
 import { Ripple } from "../../../base/ripple";
@@ -22,6 +23,8 @@ function Tab(props) {
     "onClick",
     "ref"
   ]);
+  const icon = children(() => local.icon);
+  const label = children(() => local.label);
   let rippleActions;
   const active = () => ctx ? ctx.value() === index : local.isActive;
   const onClick = (event) => {
@@ -58,11 +61,11 @@ function Tab(props) {
       if (ctx?.indicatorContent) ctx.setContentRef(index, el);
     })}
   >
-        <Show when={local.icon}>
-          <span class="smwb-tab__icon">{local.icon}</span>
+        <Show when={icon()}>
+          <span class="smwb-tab__icon">{icon()}</span>
         </Show>
-        <Show when={local.label}>
-          <span class="smwb-tab__text-label">{local.label}</span>
+        <Show when={label()}>
+          <span class="smwb-tab__text-label">{label()}</span>
         </Show>
       </span>
       <Ripple actionRef={(actions) => rippleActions = actions} classes={{ child: "tab__ripple-child" }} />

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/components/tabs/tab/tab.entry.less\";\nimport { type JSX, type ParentProps, Show, 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  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  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={local.icon}>\n          <span class=\"smwb-tab__icon\">{local.icon}</span>\n        </Show>\n        <Show when={local.label}>\n          <span class=\"smwb-tab__text-label\">{local.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,SAAqC,MAAM,YAAY,kBAAkB;AACzE,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAarB,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;AAED,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,MAAM,MAAM;AAAA,UACtB,CAAC,KAAK,MAAM,kBAAkB,MAAM,KAAK,EAAxC,KAA+C;AAAA,QAClD,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,wBAAwB,MAAM,MAAM,EAA/C,KAAsD;AAAA,QACzD,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, 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"}

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

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/tabs/tabs.entry.less";
 import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from "solid-js";
 import cn from "clsx";
@@ -5,10 +6,22 @@ import { debounce } from "../../../utils/debounce";
 import { animate } from "../../../utils/animate";
 import { TabsContext } from "./tabsContext";
 import { Tab } from "./tab/tab";
+import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 const VIEW_NEXT_TAB_PX = 40;
+const SCROLL_PAGE = 0.8;
 function Tabs(props) {
-  const merged = mergeProps({ indicatorContent: false, scrollable: false }, props);
+  const merged = mergeProps(
+    {
+      indicatorContent: false,
+      scrollable: false,
+      scrollButtons: false,
+      dense: false,
+      scrollBackAriaLabel: "Scroll tabs back",
+      scrollForwardAriaLabel: "Scroll tabs forward"
+    },
+    props
+  );
   const [local, rest] = splitProps(merged, [
     "class",
     "children",
@@ -16,11 +29,17 @@ function Tabs(props) {
     "value",
     "indicatorContent",
     "scrollable",
+    "scrollButtons",
+    "dense",
+    "scrollBackAriaLabel",
+    "scrollForwardAriaLabel",
     "aria-label",
     "ref"
   ]);
   const [mounted, setMounted] = createSignal(false);
   const [indicatorStyle, setIndicatorStyle] = createSignal({ root: {} });
+  const [overflowStart, setOverflowStart] = createSignal(false);
+  const [overflowEnd, setOverflowEnd] = createSignal(false);
   let tabsEl;
   let tabListEl;
   let tabCounter = 0;
@@ -63,10 +82,24 @@ function Tabs(props) {
       setIndicatorStyle(next);
     }
   };
+  const updateOverflow = () => {
+    if (!tabsEl || !local.scrollable) {
+      setOverflowStart(false);
+      setOverflowEnd(false);
+      return;
+    }
+    const max = tabsEl.scrollWidth - tabsEl.clientWidth;
+    setOverflowStart(tabsEl.scrollLeft > 1);
+    setOverflowEnd(tabsEl.scrollLeft < max - 1);
+  };
   const scroll = (scrollValue) => {
     if (!tabsEl) return;
     animate(tabsEl, "scrollLeft", scrollValue, { duration: 300 });
   };
+  const scrollByPage = (direction) => {
+    if (!tabsEl) return;
+    scroll(tabsEl.scrollLeft + direction * tabsEl.clientWidth * SCROLL_PAGE);
+  };
   const scrollSelectedIntoView = () => {
     const { tabsMeta, tabMeta } = getTabsMeta();
     if (!tabMeta || !tabsMeta) return;
@@ -79,17 +112,24 @@ function Tabs(props) {
   onMount(() => setMounted(true));
   createEffect(on(() => local.value, () => updateIndicatorState()));
   onMount(() => {
-    const onResize = debounce(() => updateIndicatorState(), 166);
+    const onResize = debounce(() => {
+      updateIndicatorState();
+      updateOverflow();
+    }, 166);
     const view = tabsEl?.ownerDocument.defaultView;
     view?.addEventListener("resize", onResize);
+    tabsEl?.addEventListener("scroll", updateOverflow, { passive: true });
     let resizeObserver;
     if (typeof ResizeObserver !== "undefined" && tabListEl) {
       resizeObserver = new ResizeObserver(onResize);
+      if (tabsEl) resizeObserver.observe(tabsEl);
       Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));
     }
+    updateOverflow();
     onCleanup(() => {
       onResize.cancel();
       view?.removeEventListener("resize", onResize);
+      tabsEl?.removeEventListener("scroll", updateOverflow);
       resizeObserver?.disconnect();
     });
   });
@@ -106,10 +146,40 @@ function Tabs(props) {
       contentRefs[index] = el;
     }
   };
+  const showScrollButtons = () => local.scrollable && local.scrollButtons && (overflowStart() || overflowEnd());
   return <TabsContext.Provider value={contextValue}>
-      <div {...rest} class={cn("smwb-tabs", local.class)} role="tabpanel" ref={mergeRefs(local.ref)}>
+      <div
+    {...rest}
+    class={cn(
+      "smwb-tabs",
+      {
+        "smwb-tabs--dense": local.dense,
+        "smwb-tabs--overflow-start": overflowStart(),
+        "smwb-tabs--overflow-end": overflowEnd()
+      },
+      local.class
+    )}
+    role="tabpanel"
+    ref={mergeRefs(local.ref)}
+  >
+        <Show when={showScrollButtons()}>
+          <button
+    type="button"
+    class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start"
+    aria-label={local.scrollBackAriaLabel}
+    disabled={!overflowStart()}
+    onClick={() => scrollByPage(-1)}
+  >
+            <Icon name="chevron_left" size={20} />
+          </button>
+        </Show>
+        {
+    /* The scroller's class is static so it is on the element from the start:
+       a ref on Tabs can find the row by class right away. */
+  }
         <div
-    class={cn("smwb-tabs__scroller", { "smwb-tabs__scroller--scrollable": local.scrollable })}
+    class="smwb-tabs__scroller"
+    classList={{ "smwb-tabs__scroller--scrollable": local.scrollable }}
     ref={(el) => tabsEl = el}
   >
           <div class="smwb-tabs__scroll-area" ref={(el) => tabListEl = el} role="tablist" aria-label={local["aria-label"]}>
@@ -130,6 +200,17 @@ function Tabs(props) {
             </span>
           </Show>
         </div>
+        <Show when={showScrollButtons()}>
+          <button
+    type="button"
+    class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end"
+    aria-label={local.scrollForwardAriaLabel}
+    disabled={!overflowEnd()}
+    onClick={() => scrollByPage(1)}
+  >
+            <Icon name="chevron_right" size={20} />
+          </button>
+        </Show>
       </div>
     </TabsContext.Provider>;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/tabs/tabs.entry.less\";\nimport { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { animate } from \"../../../utils/animate\";\nimport { TabsContext, type TabsContextValue } from \"./tabsContext\";\nimport { Tab } from \"./tab/tab\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent?: boolean;\n  scrollable?: boolean;\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface IndicatorStyle {\n  root: { left?: number; width?: number };\n  content?: { width: number };\n}\n\nconst VIEW_NEXT_TAB_PX = 40;\n\nexport function Tabs(props: ParentProps<TabsProps>): JSX.Element {\n  const merged = mergeProps({ indicatorContent: false, scrollable: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"value\",\n    \"indicatorContent\",\n    \"scrollable\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const [mounted, setMounted] = createSignal(false);\n  const [indicatorStyle, setIndicatorStyle] = createSignal<IndicatorStyle>({ root: {} });\n\n  let tabsEl: HTMLDivElement | undefined;\n  let tabListEl: HTMLDivElement | undefined;\n  let tabCounter = 0;\n  const contentRefs: HTMLSpanElement[] = [];\n\n  const getTabsMeta = () => {\n    let tabsMeta: { clientWidth: number; scrollLeft: number; left: number; right: number } | undefined;\n    if (tabsEl) {\n      const rect = tabsEl.getBoundingClientRect();\n      tabsMeta = { clientWidth: tabsEl.clientWidth, scrollLeft: tabsEl.scrollLeft, left: rect.left, right: rect.right };\n    }\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n    if (tabsEl && tabListEl && tabListEl.children.length > 0) {\n      const tab = tabListEl.children[local.value];\n      tabMeta = tab ? tab.getBoundingClientRect() : null;\n      if (local.indicatorContent) {\n        tabContentMeta = contentRefs[local.value]?.getBoundingClientRect() ?? null;\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = (): void => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n    if (tabMeta && tabsMeta) {\n      startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;\n    }\n    const next: IndicatorStyle = { root: { left: startValue, width: tabMeta ? tabMeta.width : 0 } };\n    if (local.indicatorContent && tabContentMeta) {\n      next.content = { width: tabContentMeta.width };\n    }\n    const prev = indicatorStyle();\n    if (prev.root.left === undefined || prev.root.width === undefined) {\n      setIndicatorStyle(next);\n      return;\n    }\n    const dStart = Math.abs((prev.root.left ?? 0) - (next.root.left ?? 0));\n    const dSize = Math.abs((prev.root.width ?? 0) - (next.root.width ?? 0));\n    if (dStart >= 1 || dSize >= 1) {\n      setIndicatorStyle(next);\n    }\n  };\n\n  const scroll = (scrollValue: number): void => {\n    if (!tabsEl) return;\n    animate(tabsEl, \"scrollLeft\", scrollValue, { duration: 300 });\n  };\n\n  const scrollSelectedIntoView = (): void => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) return;\n    if (tabMeta.left < tabsMeta.left) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);\n    } else if (tabMeta.right > tabsMeta.right) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);\n    }\n  };\n\n  onMount(() => setMounted(true));\n\n  // Re-measure when the active value changes (and on mount).\n  createEffect(on(() => local.value, () => updateIndicatorState()));\n\n  // Keep the indicator in sync with resize.\n  onMount(() => {\n    const onResize = debounce(() => updateIndicatorState(), 166);\n    const view = tabsEl?.ownerDocument.defaultView;\n    view?.addEventListener(\"resize\", onResize);\n    let resizeObserver: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\" && tabListEl) {\n      resizeObserver = new ResizeObserver(onResize);\n      Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));\n    }\n    onCleanup(() => {\n      onResize.cancel();\n      view?.removeEventListener(\"resize\", onResize);\n      resizeObserver?.disconnect();\n    });\n  });\n\n  // Scroll the selected tab into view when the indicator moves.\n  createEffect(() => {\n    indicatorStyle();\n    scrollSelectedIntoView();\n  });\n\n  const contextValue: TabsContextValue = {\n    value: () => local.value,\n    onChange: local.onChange,\n    indicatorContent: local.indicatorContent,\n    registerTab: () => tabCounter++,\n    setContentRef: (index, el) => {\n      contentRefs[index] = el;\n    },\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div {...rest} class={cn(\"smwb-tabs\", local.class)} role=\"tabpanel\" ref={mergeRefs(local.ref)}>\n        <div\n          class={cn(\"smwb-tabs__scroller\", { \"smwb-tabs__scroller--scrollable\": local.scrollable })}\n          ref={(el) => (tabsEl = el)}\n        >\n          <div class=\"smwb-tabs__scroll-area\" ref={(el) => (tabListEl = el)} role=\"tablist\" aria-label={local[\"aria-label\"]}>\n            {local.children}\n          </div>\n          <Show when={mounted()}>\n            <span\n              class=\"smwb-tabs__indicator\"\n              style={{\n                left: `${indicatorStyle().root.left ?? 0}px`,\n                width: `${indicatorStyle().root.width ?? 0}px`,\n              }}\n            >\n              <span\n                class=\"smwb-tabs__indicator-content\"\n                style={indicatorStyle().content ? { width: `${indicatorStyle().content?.width ?? 0}px` } : {}}\n              />\n            </span>\n          </Show>\n        </div>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport { Tab };\nexport type { TabProps } from \"./tab/tab\";\nexport default Tabs;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,MAAM,cAAc,cAAc,YAAY,IAAI,WAAW,SAAS,kBAAkB;AAC7H,OAAO,QAAQ;AACf,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,mBAA0C;AACnD,SAAS,WAAW;AACpB,SAAS,iBAA2B;AAkBpC,MAAM,mBAAmB;AAElB,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS,WAAW,EAAE,kBAAkB,OAAO,YAAY,MAAM,GAAG,KAAK;AAC/E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,KAAK;AAChD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAA6B,EAAE,MAAM,CAAC,EAAE,CAAC;AAErF,MAAI;AACJ,MAAI;AACJ,MAAI,aAAa;AACjB,QAAM,cAAiC,CAAC;AAExC,QAAM,cAAc,MAAM;AACxB,QAAI;AACJ,QAAI,QAAQ;AACV,YAAM,OAAO,OAAO,sBAAsB;AAC1C,iBAAW,EAAE,aAAa,OAAO,aAAa,YAAY,OAAO,YAAY,MAAM,KAAK,MAAM,OAAO,KAAK,MAAM;AAAA,IAClH;AACA,QAAI,UAA0B;AAC9B,QAAI,iBAAiC;AACrC,QAAI,UAAU,aAAa,UAAU,SAAS,SAAS,GAAG;AACxD,YAAM,MAAM,UAAU,SAAS,MAAM,KAAK;AAC1C,gBAAU,MAAM,IAAI,sBAAsB,IAAI;AAC9C,UAAI,MAAM,kBAAkB;AAC1B,yBAAiB,YAAY,MAAM,KAAK,GAAG,sBAAsB,KAAK;AAAA,MACxE;AAAA,IACF;AACA,WAAO,EAAE,UAAU,SAAS,eAAe;AAAA,EAC7C;AAEA,QAAM,uBAAuB,MAAY;AACvC,UAAM,EAAE,UAAU,SAAS,eAAe,IAAI,YAAY;AAC1D,QAAI,aAAa;AACjB,QAAI,WAAW,UAAU;AACvB,mBAAa,QAAQ,OAAO,SAAS,OAAO,SAAS;AAAA,IACvD;AACA,UAAM,OAAuB,EAAE,MAAM,EAAE,MAAM,YAAY,OAAO,UAAU,QAAQ,QAAQ,EAAE,EAAE;AAC9F,QAAI,MAAM,oBAAoB,gBAAgB;AAC5C,WAAK,UAAU,EAAE,OAAO,eAAe,MAAM;AAAA,IAC/C;AACA,UAAM,OAAO,eAAe;AAC5B,QAAI,KAAK,KAAK,SAAS,UAAa,KAAK,KAAK,UAAU,QAAW;AACjE,wBAAkB,IAAI;AACtB;AAAA,IACF;AACA,UAAM,SAAS,KAAK,KAAK,KAAK,KAAK,QAAQ,MAAM,KAAK,KAAK,QAAQ,EAAE;AACrE,UAAM,QAAQ,KAAK,KAAK,KAAK,KAAK,SAAS,MAAM,KAAK,KAAK,SAAS,EAAE;AACtE,QAAI,UAAU,KAAK,SAAS,GAAG;AAC7B,wBAAkB,IAAI;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,SAAS,CAAC,gBAA8B;AAC5C,QAAI,CAAC,OAAQ;AACb,YAAQ,QAAQ,cAAc,aAAa,EAAE,UAAU,IAAI,CAAC;AAAA,EAC9D;AAEA,QAAM,yBAAyB,MAAY;AACzC,UAAM,EAAE,UAAU,QAAQ,IAAI,YAAY;AAC1C,QAAI,CAAC,WAAW,CAAC,SAAU;AAC3B,QAAI,QAAQ,OAAO,SAAS,MAAM;AAChC,aAAO,SAAS,cAAc,QAAQ,OAAO,SAAS,QAAQ,gBAAgB;AAAA,IAChF,WAAW,QAAQ,QAAQ,SAAS,OAAO;AACzC,aAAO,SAAS,cAAc,QAAQ,QAAQ,SAAS,SAAS,gBAAgB;AAAA,IAClF;AAAA,EACF;AAEA,UAAQ,MAAM,WAAW,IAAI,CAAC;AAG9B,eAAa,GAAG,MAAM,MAAM,OAAO,MAAM,qBAAqB,CAAC,CAAC;AAGhE,UAAQ,MAAM;AACZ,UAAM,WAAW,SAAS,MAAM,qBAAqB,GAAG,GAAG;AAC3D,UAAM,OAAO,QAAQ,cAAc;AACnC,UAAM,iBAAiB,UAAU,QAAQ;AACzC,QAAI;AACJ,QAAI,OAAO,mBAAmB,eAAe,WAAW;AACtD,uBAAiB,IAAI,eAAe,QAAQ;AAC5C,YAAM,KAAK,UAAU,QAAQ,EAAE,QAAQ,CAAC,UAAU,gBAAgB,QAAQ,KAAK,CAAC;AAAA,IAClF;AACA,cAAU,MAAM;AACd,eAAS,OAAO;AAChB,YAAM,oBAAoB,UAAU,QAAQ;AAC5C,sBAAgB,WAAW;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAGD,eAAa,MAAM;AACjB,mBAAe;AACf,2BAAuB;AAAA,EACzB,CAAC;AAED,QAAM,eAAiC;AAAA,IACrC,OAAO,MAAM,MAAM;AAAA,IACnB,UAAU,MAAM;AAAA,IAChB,kBAAkB,MAAM;AAAA,IACxB,aAAa,MAAM;AAAA,IACnB,eAAe,CAAC,OAAO,OAAO;AAC5B,kBAAY,KAAK,IAAI;AAAA,IACvB;AAAA,EACF;AAEA,SACE,CAAC,YAAY,SAAS,OAAO,cAAc;AAAA,MACzC,CAAC,QAAQ,MAAM,OAAO,GAAG,aAAa,MAAM,KAAK,GAAG,KAAK,WAAW,KAAK,UAAU,MAAM,GAAG,GAAG;AAAA,QAC7F,CAAC;AAAA,IACC,OAAO,GAAG,uBAAuB,EAAE,mCAAmC,MAAM,WAAW,CAAC;AAAA,IACxF,KAAK,CAAC,OAAQ,SAAS;AAAA,GACxB;AAAA,UACC,CAAC,IAAI,MAAM,yBAAyB,KAAK,CAAC,OAAQ,YAAY,IAAK,KAAK,UAAU,YAAY,MAAM,YAAY,GAAG;AAAA,aAChH,MAAM,SAAS;AAAA,UAClB,EAFC,IAEK;AAAA,UACN,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,YACrB,CAAC;AAAA,IACC,MAAM;AAAA,IACN,OAAO;AAAA,MACL,MAAM,GAAG,eAAe,EAAE,KAAK,QAAQ,CAAC;AAAA,MACxC,OAAO,GAAG,eAAe,EAAE,KAAK,SAAS,CAAC;AAAA,IAC5C;AAAA,GACD;AAAA,cACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,OAAO,eAAe,EAAE,UAAU,EAAE,OAAO,GAAG,eAAe,EAAE,SAAS,SAAS,CAAC,KAAK,IAAI,CAAC;AAAA,EAC9F,EAAE;AAAA,YACJ,EAXC,KAWM;AAAA,UACT,EAbC,KAaM;AAAA,QACT,EArBC,IAqBK;AAAA,MACR,EAvBC,IAuBK;AAAA,IACR,EAzBC,YAAY;AA2BjB;AAIA,IAAO,eAAQ;","names":[],"file":"tabs.jsx"}
+{"version":3,"sources":["../../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/tabs/tabs.entry.less\";\nimport { type JSX, type ParentProps, Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { debounce } from \"../../../utils/debounce\";\nimport { animate } from \"../../../utils/animate\";\nimport { TabsContext, type TabsContextValue } from \"./tabsContext\";\nimport { Tab } from \"./tab/tab\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface TabsProps {\n  value: number;\n  onChange: (event: MouseEvent & { currentTarget: HTMLElement; target: Element }, index: number) => void;\n  indicatorContent?: boolean;\n  /**\n   * Let the tab row scroll sideways instead of clipping it. The edge beyond which\n   * more tabs are hidden fades out.\n   */\n  scrollable?: boolean;\n  /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */\n  scrollButtons?: boolean;\n  /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */\n  dense?: boolean;\n  /** Accessible label of the button that scrolls back. */\n  scrollBackAriaLabel?: string;\n  /** Accessible label of the button that scrolls forward. */\n  scrollForwardAriaLabel?: string;\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface IndicatorStyle {\n  root: { left?: number; width?: number };\n  content?: { width: number };\n}\n\nconst VIEW_NEXT_TAB_PX = 40;\n/** A scroll button moves the row by this share of its visible width. */\nconst SCROLL_PAGE = 0.8;\n\nexport function Tabs(props: ParentProps<TabsProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      indicatorContent: false,\n      scrollable: false,\n      scrollButtons: false,\n      dense: false,\n      scrollBackAriaLabel: \"Scroll tabs back\",\n      scrollForwardAriaLabel: \"Scroll tabs forward\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"value\",\n    \"indicatorContent\",\n    \"scrollable\",\n    \"scrollButtons\",\n    \"dense\",\n    \"scrollBackAriaLabel\",\n    \"scrollForwardAriaLabel\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const [mounted, setMounted] = createSignal(false);\n  const [indicatorStyle, setIndicatorStyle] = createSignal<IndicatorStyle>({ root: {} });\n  // Whether tabs are hidden past the start / the end of a scrollable row. Only\n  // measured in the browser, so the server markup shows neither.\n  const [overflowStart, setOverflowStart] = createSignal(false);\n  const [overflowEnd, setOverflowEnd] = createSignal(false);\n\n  let tabsEl: HTMLDivElement | undefined;\n  let tabListEl: HTMLDivElement | undefined;\n  let tabCounter = 0;\n  const contentRefs: HTMLSpanElement[] = [];\n\n  const getTabsMeta = () => {\n    let tabsMeta: { clientWidth: number; scrollLeft: number; left: number; right: number } | undefined;\n    if (tabsEl) {\n      const rect = tabsEl.getBoundingClientRect();\n      tabsMeta = { clientWidth: tabsEl.clientWidth, scrollLeft: tabsEl.scrollLeft, left: rect.left, right: rect.right };\n    }\n    let tabMeta: DOMRect | null = null;\n    let tabContentMeta: DOMRect | null = null;\n    if (tabsEl && tabListEl && tabListEl.children.length > 0) {\n      const tab = tabListEl.children[local.value];\n      tabMeta = tab ? tab.getBoundingClientRect() : null;\n      if (local.indicatorContent) {\n        tabContentMeta = contentRefs[local.value]?.getBoundingClientRect() ?? null;\n      }\n    }\n    return { tabsMeta, tabMeta, tabContentMeta };\n  };\n\n  const updateIndicatorState = (): void => {\n    const { tabsMeta, tabMeta, tabContentMeta } = getTabsMeta();\n    let startValue = 0;\n    if (tabMeta && tabsMeta) {\n      startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft;\n    }\n    const next: IndicatorStyle = { root: { left: startValue, width: tabMeta ? tabMeta.width : 0 } };\n    if (local.indicatorContent && tabContentMeta) {\n      next.content = { width: tabContentMeta.width };\n    }\n    const prev = indicatorStyle();\n    if (prev.root.left === undefined || prev.root.width === undefined) {\n      setIndicatorStyle(next);\n      return;\n    }\n    const dStart = Math.abs((prev.root.left ?? 0) - (next.root.left ?? 0));\n    const dSize = Math.abs((prev.root.width ?? 0) - (next.root.width ?? 0));\n    if (dStart >= 1 || dSize >= 1) {\n      setIndicatorStyle(next);\n    }\n  };\n\n  const updateOverflow = (): void => {\n    if (!tabsEl || !local.scrollable) {\n      setOverflowStart(false);\n      setOverflowEnd(false);\n      return;\n    }\n    const max = tabsEl.scrollWidth - tabsEl.clientWidth;\n    setOverflowStart(tabsEl.scrollLeft > 1);\n    setOverflowEnd(tabsEl.scrollLeft < max - 1);\n  };\n\n  const scroll = (scrollValue: number): void => {\n    if (!tabsEl) return;\n    animate(tabsEl, \"scrollLeft\", scrollValue, { duration: 300 });\n  };\n\n  const scrollByPage = (direction: -1 | 1): void => {\n    if (!tabsEl) return;\n    scroll(tabsEl.scrollLeft + direction * tabsEl.clientWidth * SCROLL_PAGE);\n  };\n\n  const scrollSelectedIntoView = (): void => {\n    const { tabsMeta, tabMeta } = getTabsMeta();\n    if (!tabMeta || !tabsMeta) return;\n    if (tabMeta.left < tabsMeta.left) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);\n    } else if (tabMeta.right > tabsMeta.right) {\n      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);\n    }\n  };\n\n  onMount(() => setMounted(true));\n\n  // Re-measure when the active value changes (and on mount).\n  createEffect(on(() => local.value, () => updateIndicatorState()));\n\n  // Keep the indicator and the overflow state in sync with resizes: of the\n  // window, of the row, and of each tab (a label can grow with its data).\n  onMount(() => {\n    const onResize = debounce(() => {\n      updateIndicatorState();\n      updateOverflow();\n    }, 166);\n    const view = tabsEl?.ownerDocument.defaultView;\n    view?.addEventListener(\"resize\", onResize);\n    tabsEl?.addEventListener(\"scroll\", updateOverflow, { passive: true });\n    let resizeObserver: ResizeObserver | undefined;\n    if (typeof ResizeObserver !== \"undefined\" && tabListEl) {\n      resizeObserver = new ResizeObserver(onResize);\n      if (tabsEl) resizeObserver.observe(tabsEl);\n      Array.from(tabListEl.children).forEach((child) => resizeObserver?.observe(child));\n    }\n    updateOverflow();\n    onCleanup(() => {\n      onResize.cancel();\n      view?.removeEventListener(\"resize\", onResize);\n      tabsEl?.removeEventListener(\"scroll\", updateOverflow);\n      resizeObserver?.disconnect();\n    });\n  });\n\n  // Scroll the selected tab into view when the indicator moves.\n  createEffect(() => {\n    indicatorStyle();\n    scrollSelectedIntoView();\n  });\n\n  const contextValue: TabsContextValue = {\n    value: () => local.value,\n    onChange: local.onChange,\n    indicatorContent: local.indicatorContent,\n    registerTab: () => tabCounter++,\n    setContentRef: (index, el) => {\n      contentRefs[index] = el;\n    },\n  };\n\n  const showScrollButtons = (): boolean => local.scrollable && local.scrollButtons && (overflowStart() || overflowEnd());\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div\n        {...rest}\n        class={cn(\n          \"smwb-tabs\",\n          {\n            \"smwb-tabs--dense\": local.dense,\n            \"smwb-tabs--overflow-start\": overflowStart(),\n            \"smwb-tabs--overflow-end\": overflowEnd(),\n          },\n          local.class\n        )}\n        role=\"tabpanel\"\n        ref={mergeRefs(local.ref)}\n      >\n        <Show when={showScrollButtons()}>\n          <button\n            type=\"button\"\n            class=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--start\"\n            aria-label={local.scrollBackAriaLabel}\n            disabled={!overflowStart()}\n            onClick={() => scrollByPage(-1)}\n          >\n            <Icon name=\"chevron_left\" size={20} />\n          </button>\n        </Show>\n        {/* The scroller's class is static so it is on the element from the start:\n            a ref on Tabs can find the row by class right away. */}\n        <div\n          class=\"smwb-tabs__scroller\"\n          classList={{ \"smwb-tabs__scroller--scrollable\": local.scrollable }}\n          ref={(el) => (tabsEl = el)}\n        >\n          <div class=\"smwb-tabs__scroll-area\" ref={(el) => (tabListEl = el)} role=\"tablist\" aria-label={local[\"aria-label\"]}>\n            {local.children}\n          </div>\n          <Show when={mounted()}>\n            <span\n              class=\"smwb-tabs__indicator\"\n              style={{\n                left: `${indicatorStyle().root.left ?? 0}px`,\n                width: `${indicatorStyle().root.width ?? 0}px`,\n              }}\n            >\n              <span\n                class=\"smwb-tabs__indicator-content\"\n                style={indicatorStyle().content ? { width: `${indicatorStyle().content?.width ?? 0}px` } : {}}\n              />\n            </span>\n          </Show>\n        </div>\n        <Show when={showScrollButtons()}>\n          <button\n            type=\"button\"\n            class=\"smwb-tabs__scroll-button smwb-tabs__scroll-button--end\"\n            aria-label={local.scrollForwardAriaLabel}\n            disabled={!overflowEnd()}\n            onClick={() => scrollByPage(1)}\n          >\n            <Icon name=\"chevron_right\" size={20} />\n          </button>\n        </Show>\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport { Tab };\nexport type { TabProps } from \"./tab/tab\";\nexport default Tabs;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,cAAc,cAAc,YAAY,IAAI,WAAW,SAAS,kBAAkB;AAC7H,OAAO,QAAQ;AACf,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,mBAA0C;AACnD,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB,SAAS,iBAA2B;AA8BpC,MAAM,mBAAmB;AAEzB,MAAM,cAAc;AAEb,SAAS,KAAK,OAA4C;AAC/D,QAAM,SAAS;AAAA,IACb;AAAA,MACE,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,MACP,qBAAqB;AAAA,MACrB,wBAAwB;AAAA,IAC1B;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,SAAS,UAAU,IAAI,aAAa,KAAK;AAChD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAA6B,EAAE,MAAM,CAAC,EAAE,CAAC;AAGrF,QAAM,CAAC,eAAe,gBAAgB,IAAI,aAAa,KAAK;AAC5D,QAAM,CAAC,aAAa,cAAc,IAAI,aAAa,KAAK;AAExD,MAAI;AACJ,MAAI;AACJ,MAAI,aAAa;AACjB,QAAM,cAAiC,CAAC;AAExC,QAAM,cAAc,MAAM;AACxB,QAAI;AACJ,QAAI,QAAQ;AACV,YAAM,OAAO,OAAO,sBAAsB;AAC1C,iBAAW,EAAE,aAAa,OAAO,aAAa,YAAY,OAAO,YAAY,MAAM,KAAK,MAAM,OAAO,KAAK,MAAM;AAAA,IAClH;AACA,QAAI,UAA0B;AAC9B,QAAI,iBAAiC;AACrC,QAAI,UAAU,aAAa,UAAU,SAAS,SAAS,GAAG;AACxD,YAAM,MAAM,UAAU,SAAS,MAAM,KAAK;AAC1C,gBAAU,MAAM,IAAI,sBAAsB,IAAI;AAC9C,UAAI,MAAM,kBAAkB;AAC1B,yBAAiB,YAAY,MAAM,KAAK,GAAG,sBAAsB,KAAK;AAAA,MACxE;AAAA,IACF;AACA,WAAO,EAAE,UAAU,SAAS,eAAe;AAAA,EAC7C;AAEA,QAAM,uBAAuB,MAAY;AACvC,UAAM,EAAE,UAAU,SAAS,eAAe,IAAI,YAAY;AAC1D,QAAI,aAAa;AACjB,QAAI,WAAW,UAAU;AACvB,mBAAa,QAAQ,OAAO,SAAS,OAAO,SAAS;AAAA,IACvD;AACA,UAAM,OAAuB,EAAE,MAAM,EAAE,MAAM,YAAY,OAAO,UAAU,QAAQ,QAAQ,EAAE,EAAE;AAC9F,QAAI,MAAM,oBAAoB,gBAAgB;AAC5C,WAAK,UAAU,EAAE,OAAO,eAAe,MAAM;AAAA,IAC/C;AACA,UAAM,OAAO,eAAe;AAC5B,QAAI,KAAK,KAAK,SAAS,UAAa,KAAK,KAAK,UAAU,QAAW;AACjE,wBAAkB,IAAI;AACtB;AAAA,IACF;AACA,UAAM,SAAS,KAAK,KAAK,KAAK,KAAK,QAAQ,MAAM,KAAK,KAAK,QAAQ,EAAE;AACrE,UAAM,QAAQ,KAAK,KAAK,KAAK,KAAK,SAAS,MAAM,KAAK,KAAK,SAAS,EAAE;AACtE,QAAI,UAAU,KAAK,SAAS,GAAG;AAC7B,wBAAkB,IAAI;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAY;AACjC,QAAI,CAAC,UAAU,CAAC,MAAM,YAAY;AAChC,uBAAiB,KAAK;AACtB,qBAAe,KAAK;AACpB;AAAA,IACF;AACA,UAAM,MAAM,OAAO,cAAc,OAAO;AACxC,qBAAiB,OAAO,aAAa,CAAC;AACtC,mBAAe,OAAO,aAAa,MAAM,CAAC;AAAA,EAC5C;AAEA,QAAM,SAAS,CAAC,gBAA8B;AAC5C,QAAI,CAAC,OAAQ;AACb,YAAQ,QAAQ,cAAc,aAAa,EAAE,UAAU,IAAI,CAAC;AAAA,EAC9D;AAEA,QAAM,eAAe,CAAC,cAA4B;AAChD,QAAI,CAAC,OAAQ;AACb,WAAO,OAAO,aAAa,YAAY,OAAO,cAAc,WAAW;AAAA,EACzE;AAEA,QAAM,yBAAyB,MAAY;AACzC,UAAM,EAAE,UAAU,QAAQ,IAAI,YAAY;AAC1C,QAAI,CAAC,WAAW,CAAC,SAAU;AAC3B,QAAI,QAAQ,OAAO,SAAS,MAAM;AAChC,aAAO,SAAS,cAAc,QAAQ,OAAO,SAAS,QAAQ,gBAAgB;AAAA,IAChF,WAAW,QAAQ,QAAQ,SAAS,OAAO;AACzC,aAAO,SAAS,cAAc,QAAQ,QAAQ,SAAS,SAAS,gBAAgB;AAAA,IAClF;AAAA,EACF;AAEA,UAAQ,MAAM,WAAW,IAAI,CAAC;AAG9B,eAAa,GAAG,MAAM,MAAM,OAAO,MAAM,qBAAqB,CAAC,CAAC;AAIhE,UAAQ,MAAM;AACZ,UAAM,WAAW,SAAS,MAAM;AAC9B,2BAAqB;AACrB,qBAAe;AAAA,IACjB,GAAG,GAAG;AACN,UAAM,OAAO,QAAQ,cAAc;AACnC,UAAM,iBAAiB,UAAU,QAAQ;AACzC,YAAQ,iBAAiB,UAAU,gBAAgB,EAAE,SAAS,KAAK,CAAC;AACpE,QAAI;AACJ,QAAI,OAAO,mBAAmB,eAAe,WAAW;AACtD,uBAAiB,IAAI,eAAe,QAAQ;AAC5C,UAAI,OAAQ,gBAAe,QAAQ,MAAM;AACzC,YAAM,KAAK,UAAU,QAAQ,EAAE,QAAQ,CAAC,UAAU,gBAAgB,QAAQ,KAAK,CAAC;AAAA,IAClF;AACA,mBAAe;AACf,cAAU,MAAM;AACd,eAAS,OAAO;AAChB,YAAM,oBAAoB,UAAU,QAAQ;AAC5C,cAAQ,oBAAoB,UAAU,cAAc;AACpD,sBAAgB,WAAW;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAGD,eAAa,MAAM;AACjB,mBAAe;AACf,2BAAuB;AAAA,EACzB,CAAC;AAED,QAAM,eAAiC;AAAA,IACrC,OAAO,MAAM,MAAM;AAAA,IACnB,UAAU,MAAM;AAAA,IAChB,kBAAkB,MAAM;AAAA,IACxB,aAAa,MAAM;AAAA,IACnB,eAAe,CAAC,OAAO,OAAO;AAC5B,kBAAY,KAAK,IAAI;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAe,MAAM,cAAc,MAAM,kBAAkB,cAAc,KAAK,YAAY;AAEpH,SACE,CAAC,YAAY,SAAS,OAAO,cAAc;AAAA,MACzC,CAAC;AAAA,QACK;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,oBAAoB,MAAM;AAAA,QAC1B,6BAA6B,cAAc;AAAA,QAC3C,2BAA2B,YAAY;AAAA,MACzC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,KAAK;AAAA,IACL,KAAK,UAAU,MAAM,GAAG;AAAA,GACzB;AAAA,QACC,CAAC,KAAK,MAAM,kBAAkB,GAAG;AAAA,UAC/B,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM;AAAA,IAClB,UAAU,CAAC,cAAc;AAAA,IACzB,SAAS,MAAM,aAAa,EAAE;AAAA,GAC/B;AAAA,YACC,CAAC,KAAK,KAAK,eAAe,MAAM,IAAI,EAAE;AAAA,UACxC,EARC,OAQQ;AAAA,QACX,EAVC,KAUM;AAAA;AAAA;AAAA;AAAA,GAEoD;AAAA,QAC3D,CAAC;AAAA,IACC,MAAM;AAAA,IACN,WAAW,EAAE,mCAAmC,MAAM,WAAW;AAAA,IACjE,KAAK,CAAC,OAAQ,SAAS;AAAA,GACxB;AAAA,UACC,CAAC,IAAI,MAAM,yBAAyB,KAAK,CAAC,OAAQ,YAAY,IAAK,KAAK,UAAU,YAAY,MAAM,YAAY,GAAG;AAAA,aAChH,MAAM,SAAS;AAAA,UAClB,EAFC,IAEK;AAAA,UACN,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,YACrB,CAAC;AAAA,IACC,MAAM;AAAA,IACN,OAAO;AAAA,MACL,MAAM,GAAG,eAAe,EAAE,KAAK,QAAQ,CAAC;AAAA,MACxC,OAAO,GAAG,eAAe,EAAE,KAAK,SAAS,CAAC;AAAA,IAC5C;AAAA,GACD;AAAA,cACC,CAAC;AAAA,IACC,MAAM;AAAA,IACN,OAAO,eAAe,EAAE,UAAU,EAAE,OAAO,GAAG,eAAe,EAAE,SAAS,SAAS,CAAC,KAAK,IAAI,CAAC;AAAA,EAC9F,EAAE;AAAA,YACJ,EAXC,KAWM;AAAA,UACT,EAbC,KAaM;AAAA,QACT,EAtBC,IAsBK;AAAA,QACN,CAAC,KAAK,MAAM,kBAAkB,GAAG;AAAA,UAC/B,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM;AAAA,IAClB,UAAU,CAAC,YAAY;AAAA,IACvB,SAAS,MAAM,aAAa,CAAC;AAAA,GAC9B;AAAA,YACC,CAAC,KAAK,KAAK,gBAAgB,MAAM,IAAI,EAAE;AAAA,UACzC,EARC,OAQQ;AAAA,QACX,EAVC,KAUM;AAAA,MACT,EA7DC,IA6DK;AAAA,IACR,EA/DC,YAAY;AAiEjB;AAIA,IAAO,eAAQ;","names":[],"file":"tabs.jsx"}

package/dist/source/connects/rt/table/table.jsx

@@ -99,6 +99,10 @@ function Table(props) {
     return settings ? { paginationSettings: settings } : {};
   });
   const align = () => local.cellAlign ?? "left";
+  const cellLabel = (column) => {
+    const label = column.meta?.label ?? (typeof column.header === "string" ? column.header : void 0);
+    return label ? { label } : {};
+  };
   return <SmwbTable
     {...rest}
     {...paginationProp()}
@@ -156,7 +160,11 @@ function Table(props) {
               {(row) => <>
                   <TableRow onClick={(event) => local.onBodyRowClick?.(row, event)}>
                     <For each={row.getVisibleCells()}>
-                      {(cell) => <TableCell cellAlign={align()} {...cell.column.columnDef.meta?.cellProps}>
+                      {(cell) => <TableCell
+    cellAlign={align()}
+    {...cellLabel(cell.column.columnDef)}
+    {...cell.column.columnDef.meta?.cellProps}
+  >
                           {flexRender(cell.column.columnDef.cell, cell.getContext())}
                         </TableCell>}
                     </For>

package/dist/source/connects/rt/table/table.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/connects/rt/table/table.tsx"],"sourcesContent":["import { For, Show, createMemo, createSignal, splitProps, type JSX } from \"solid-js\";\nimport {\n  createSolidTable,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type ColumnDef,\n  type Row,\n  type RowData,\n  type SortingState,\n  type TableOptions,\n} from \"@tanstack/solid-table\";\n\nimport {\n  Table as SmwbTable,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeadCell,\n  TableRow,\n  type SortDirection,\n  type TableProps as SmwbTableProps,\n  type TablePaginationProps,\n} from \"../../../components/dataDisplay/table\";\nimport { ProgressIndicator } from \"../../../components/feedBack/progressIndicator\";\nimport { Message } from \"../../../components/feedBack/message\";\n\ndeclare module \"@tanstack/table-core\" {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /** Extra attributes for every body cell of the column. */\n    cellProps?: JSX.ThHTMLAttributes<HTMLTableCellElement>;\n  }\n}\n\nexport interface RtTableProps<TData extends RowData, TValue = unknown> extends SmwbTableProps {\n  data: TData[];\n  columns: ColumnDef<TData, TValue>[];\n  /** Enables the sort affordance in head cells and the sorted row model. */\n  sortable?: boolean;\n  /** Initial sorting, e.g. `[{ id: \"name\", desc: false }]`. */\n  defaultSorting?: SortingState;\n  onSortingChange?: (sorting: SortingState) => void;\n  withPagination?: boolean;\n  /** Rows come from the outside page by page; the total is unknown. */\n  isInfinite?: boolean;\n  limit?: number;\n  limitOptions?: number[];\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n  expandable?: boolean;\n  getRowCanExpand?: (row: Row<TData>) => boolean;\n  renderSubComponent?: (props: { row: Row<TData> }) => JSX.Element;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  error?: string;\n  onHeadCellClick?: (column: ColumnDef<TData, TValue>) => void;\n  onBodyRowClick?: (row: Row<TData>, event: MouseEvent) => void;\n}\n\n/**\n * TanStack Table bound to the smwb table components.\n *\n * The connector owns only what the two sides must agree on — row models, the\n * sort affordance in the head cell, the pagination footer, and the loading /\n * error / empty rows. Everything else stays TanStack's: columns are plain\n * `ColumnDef`s and cells are rendered through `flexRender`, so any column\n * definition written against the React connector works here unchanged.\n *\n * `@tanstack/solid-table` is an optional peer: it ships with the connector's\n * subpath only, and a consumer that never imports the subpath never installs it.\n */\nexport function Table<TData extends RowData, TValue = unknown>(\n  props: RtTableProps<TData, TValue>\n): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"data\",\n    \"columns\",\n    \"sortable\",\n    \"defaultSorting\",\n    \"onSortingChange\",\n    \"withPagination\",\n    \"isInfinite\",\n    \"limit\",\n    \"limitOptions\",\n    \"onNextPage\",\n    \"onPrevPage\",\n    \"expandable\",\n    \"getRowCanExpand\",\n    \"renderSubComponent\",\n    \"cellAlign\",\n    \"error\",\n    \"onHeadCellClick\",\n    \"onBodyRowClick\",\n    \"isLoading\",\n  ]);\n\n  const limit = (): number => local.limit ?? 5;\n  const [sorting, setSorting] = createSignal<SortingState>(local.defaultSorting ?? []);\n\n  // Options are a getter object: Solid has no render pass to rebuild them on,\n  // so the table reads current data, columns and sorting on every access.\n  const table = createSolidTable({\n    get data() {\n      return local.data;\n    },\n    get columns() {\n      return local.columns;\n    },\n    state: {\n      get sorting() {\n        return sorting();\n      },\n    },\n    initialState: { pagination: { pageIndex: 0, pageSize: limit() } },\n    manualPagination: local.isInfinite,\n    getCoreRowModel: getCoreRowModel(),\n    onSortingChange: (updater) => {\n      const next = typeof updater === \"function\" ? updater(sorting()) : updater;\n      setSorting(next);\n      local.onSortingChange?.(next);\n    },\n    get getSortedRowModel() {\n      return local.sortable ? getSortedRowModel() : undefined;\n    },\n    get getPaginationRowModel() {\n      return local.withPagination ? getPaginationRowModel() : undefined;\n    },\n    get getExpandedRowModel() {\n      return local.expandable ? getExpandedRowModel() : undefined;\n    },\n    get getRowCanExpand() {\n      return local.expandable ? local.getRowCanExpand : undefined;\n    },\n  } as TableOptions<TData>);\n\n  const pagination = createMemo<TablePaginationProps | undefined>(() => {\n    if (!local.withPagination) return undefined;\n    const state = table.getState().pagination;\n    const base = {\n      limit: state.pageSize,\n      page: state.pageIndex + 1,\n      limitOptions: local.limitOptions ?? [5, 10, 15],\n      onNext: () => {\n        table.nextPage();\n        local.onNextPage?.();\n      },\n      onPrev: () => {\n        table.previousPage();\n        local.onPrevPage?.();\n      },\n      onLimitChange: (value: number) => table.setPageSize(value),\n    };\n    return local.isInfinite\n      ? { ...base, hasNextPage: local.data.length >= state.pageSize }\n      : { ...base, totalCount: table.getFilteredRowModel().rows.length };\n  });\n\n  const columnCount = (): number => table.getVisibleFlatColumns().length || 1;\n\n  // Spread instead of a prop: with exactOptionalPropertyTypes an explicit\n  // `undefined` is not the same as an absent prop, and the footer is absent\n  // whenever pagination is off.\n  const paginationProp = createMemo(() => {\n    const settings = pagination();\n    return settings ? { paginationSettings: settings } : {};\n  });\n\n  const align = (): \"left\" | \"right\" | \"center\" => local.cellAlign ?? \"left\";\n\n  return (\n    <SmwbTable\n      {...rest}\n      {...paginationProp()}\n      isLoading={local.isLoading ?? false}\n      hovered={!!local.onBodyRowClick}\n    >\n      <TableHead>\n        <For each={table.getHeaderGroups()}>\n          {(headerGroup) => (\n            <TableRow>\n              <For each={headerGroup.headers}>\n                {(header) => {\n                  const canSort = (): boolean => !!local.sortable && header.column.getCanSort();\n                  return (\n                    <TableHeadCell\n                      cellAlign={align()}\n                      sortable={canSort()}\n                      sortDirection={(header.column.getIsSorted() || false) as SortDirection}\n                      onSort={() => {\n                        if (canSort()) header.column.toggleSorting();\n                      }}\n                      onClick={() => {\n                        local.onHeadCellClick?.(header.column.columnDef);\n                      }}\n                      {...(header.getSize() ? { style: { width: `${header.getSize()}px` } } : {})}\n                    >\n                      <Show when={!header.isPlaceholder}>\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                      </Show>\n                    </TableHeadCell>\n                  );\n                }}\n              </For>\n            </TableRow>\n          )}\n        </For>\n      </TableHead>\n\n      <TableBody>\n        <Show\n          when={!local.isLoading}\n          fallback={\n            <TableRow class=\"smwb-table__loader__row\">\n              <TableCell class=\"smwb-table__loader\" colSpan={columnCount()}>\n                <ProgressIndicator variant=\"circular\" type=\"indeterminate\" />\n              </TableCell>\n            </TableRow>\n          }\n        >\n          <Show\n            when={!local.error}\n            fallback={\n              <TableRow class=\"smwb-table__loader__row\">\n                <TableCell class=\"smwb-table__loader\" colSpan={columnCount()}>\n                  <Message variant=\"filled\" type=\"error\">\n                    {local.error}\n                  </Message>\n                </TableCell>\n              </TableRow>\n            }\n          >\n            <For each={table.getRowModel().rows}>\n              {(row) => (\n                <>\n                  <TableRow onClick={(event: MouseEvent) => local.onBodyRowClick?.(row, event)}>\n                    <For each={row.getVisibleCells()}>\n                      {(cell) => (\n                        <TableCell cellAlign={align()} {...cell.column.columnDef.meta?.cellProps}>\n                          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                        </TableCell>\n                      )}\n                    </For>\n                  </TableRow>\n                  <Show when={row.getIsExpanded() && local.renderSubComponent}>\n                    <TableRow>\n                      <TableCell colSpan={row.getVisibleCells().length}>\n                        {local.renderSubComponent?.({ row })}\n                      </TableCell>\n                    </TableRow>\n                  </Show>\n                </>\n              )}\n            </For>\n          </Show>\n        </Show>\n      </TableBody>\n    </SmwbTable>\n  );\n}\n\nexport default Table;\n"],"mappings":"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","names":[],"file":"table.jsx"}
+{"version":3,"sources":["../../../../../src/connects/rt/table/table.tsx"],"sourcesContent":["import { For, Show, createMemo, createSignal, splitProps, type JSX } from \"solid-js\";\nimport {\n  createSolidTable,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type ColumnDef,\n  type Row,\n  type RowData,\n  type SortingState,\n  type TableOptions,\n} from \"@tanstack/solid-table\";\n\nimport {\n  Table as SmwbTable,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeadCell,\n  TableRow,\n  type SortDirection,\n  type TableProps as SmwbTableProps,\n  type TablePaginationProps,\n} from \"../../../components/dataDisplay/table\";\nimport { ProgressIndicator } from \"../../../components/feedBack/progressIndicator\";\nimport { Message } from \"../../../components/feedBack/message\";\n\ndeclare module \"@tanstack/table-core\" {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    /** Extra attributes for every body cell of the column. */\n    cellProps?: JSX.ThHTMLAttributes<HTMLTableCellElement>;\n    /** The column's name on each cell when rows stack as cards (`stackBelow`); a string `header` is used by default. */\n    label?: string;\n  }\n}\n\nexport interface RtTableProps<TData extends RowData, TValue = unknown> extends SmwbTableProps {\n  data: TData[];\n  columns: ColumnDef<TData, TValue>[];\n  /** Enables the sort affordance in head cells and the sorted row model. */\n  sortable?: boolean;\n  /** Initial sorting, e.g. `[{ id: \"name\", desc: false }]`. */\n  defaultSorting?: SortingState;\n  onSortingChange?: (sorting: SortingState) => void;\n  withPagination?: boolean;\n  /** Rows come from the outside page by page; the total is unknown. */\n  isInfinite?: boolean;\n  limit?: number;\n  limitOptions?: number[];\n  onNextPage?: () => void;\n  onPrevPage?: () => void;\n  expandable?: boolean;\n  getRowCanExpand?: (row: Row<TData>) => boolean;\n  renderSubComponent?: (props: { row: Row<TData> }) => JSX.Element;\n  cellAlign?: \"left\" | \"right\" | \"center\";\n  error?: string;\n  onHeadCellClick?: (column: ColumnDef<TData, TValue>) => void;\n  onBodyRowClick?: (row: Row<TData>, event: MouseEvent) => void;\n}\n\n/**\n * TanStack Table bound to the smwb table components.\n *\n * The connector owns only what the two sides must agree on — row models, the\n * sort affordance in the head cell, the pagination footer, and the loading /\n * error / empty rows. Everything else stays TanStack's: columns are plain\n * `ColumnDef`s and cells are rendered through `flexRender`, so any column\n * definition written against the React connector works here unchanged.\n *\n * `@tanstack/solid-table` is an optional peer: it ships with the connector's\n * subpath only, and a consumer that never imports the subpath never installs it.\n */\nexport function Table<TData extends RowData, TValue = unknown>(\n  props: RtTableProps<TData, TValue>\n): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"data\",\n    \"columns\",\n    \"sortable\",\n    \"defaultSorting\",\n    \"onSortingChange\",\n    \"withPagination\",\n    \"isInfinite\",\n    \"limit\",\n    \"limitOptions\",\n    \"onNextPage\",\n    \"onPrevPage\",\n    \"expandable\",\n    \"getRowCanExpand\",\n    \"renderSubComponent\",\n    \"cellAlign\",\n    \"error\",\n    \"onHeadCellClick\",\n    \"onBodyRowClick\",\n    \"isLoading\",\n  ]);\n\n  const limit = (): number => local.limit ?? 5;\n  const [sorting, setSorting] = createSignal<SortingState>(local.defaultSorting ?? []);\n\n  // Options are a getter object: Solid has no render pass to rebuild them on,\n  // so the table reads current data, columns and sorting on every access.\n  const table = createSolidTable({\n    get data() {\n      return local.data;\n    },\n    get columns() {\n      return local.columns;\n    },\n    state: {\n      get sorting() {\n        return sorting();\n      },\n    },\n    initialState: { pagination: { pageIndex: 0, pageSize: limit() } },\n    manualPagination: local.isInfinite,\n    getCoreRowModel: getCoreRowModel(),\n    onSortingChange: (updater) => {\n      const next = typeof updater === \"function\" ? updater(sorting()) : updater;\n      setSorting(next);\n      local.onSortingChange?.(next);\n    },\n    get getSortedRowModel() {\n      return local.sortable ? getSortedRowModel() : undefined;\n    },\n    get getPaginationRowModel() {\n      return local.withPagination ? getPaginationRowModel() : undefined;\n    },\n    get getExpandedRowModel() {\n      return local.expandable ? getExpandedRowModel() : undefined;\n    },\n    get getRowCanExpand() {\n      return local.expandable ? local.getRowCanExpand : undefined;\n    },\n  } as TableOptions<TData>);\n\n  const pagination = createMemo<TablePaginationProps | undefined>(() => {\n    if (!local.withPagination) return undefined;\n    const state = table.getState().pagination;\n    const base = {\n      limit: state.pageSize,\n      page: state.pageIndex + 1,\n      limitOptions: local.limitOptions ?? [5, 10, 15],\n      onNext: () => {\n        table.nextPage();\n        local.onNextPage?.();\n      },\n      onPrev: () => {\n        table.previousPage();\n        local.onPrevPage?.();\n      },\n      onLimitChange: (value: number) => table.setPageSize(value),\n    };\n    return local.isInfinite\n      ? { ...base, hasNextPage: local.data.length >= state.pageSize }\n      : { ...base, totalCount: table.getFilteredRowModel().rows.length };\n  });\n\n  const columnCount = (): number => table.getVisibleFlatColumns().length || 1;\n\n  // Spread instead of a prop: with exactOptionalPropertyTypes an explicit\n  // `undefined` is not the same as an absent prop, and the footer is absent\n  // whenever pagination is off.\n  const paginationProp = createMemo(() => {\n    const settings = pagination();\n    return settings ? { paginationSettings: settings } : {};\n  });\n\n  const align = (): \"left\" | \"right\" | \"center\" => local.cellAlign ?? \"left\";\n  // A body cell's label for the stacked layout: the column's meta.label, or its\n  // header when that is plain text.\n  const cellLabel = (column: ColumnDef<TData, TValue>): { label?: string } => {\n    const label = column.meta?.label ?? (typeof column.header === \"string\" ? column.header : undefined);\n    return label ? { label } : {};\n  };\n\n  return (\n    <SmwbTable\n      {...rest}\n      {...paginationProp()}\n      isLoading={local.isLoading ?? false}\n      hovered={!!local.onBodyRowClick}\n    >\n      <TableHead>\n        <For each={table.getHeaderGroups()}>\n          {(headerGroup) => (\n            <TableRow>\n              <For each={headerGroup.headers}>\n                {(header) => {\n                  const canSort = (): boolean => !!local.sortable && header.column.getCanSort();\n                  return (\n                    <TableHeadCell\n                      cellAlign={align()}\n                      sortable={canSort()}\n                      sortDirection={(header.column.getIsSorted() || false) as SortDirection}\n                      onSort={() => {\n                        if (canSort()) header.column.toggleSorting();\n                      }}\n                      onClick={() => {\n                        local.onHeadCellClick?.(header.column.columnDef);\n                      }}\n                      {...(header.getSize() ? { style: { width: `${header.getSize()}px` } } : {})}\n                    >\n                      <Show when={!header.isPlaceholder}>\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                      </Show>\n                    </TableHeadCell>\n                  );\n                }}\n              </For>\n            </TableRow>\n          )}\n        </For>\n      </TableHead>\n\n      <TableBody>\n        <Show\n          when={!local.isLoading}\n          fallback={\n            <TableRow class=\"smwb-table__loader__row\">\n              <TableCell class=\"smwb-table__loader\" colSpan={columnCount()}>\n                <ProgressIndicator variant=\"circular\" type=\"indeterminate\" />\n              </TableCell>\n            </TableRow>\n          }\n        >\n          <Show\n            when={!local.error}\n            fallback={\n              <TableRow class=\"smwb-table__loader__row\">\n                <TableCell class=\"smwb-table__loader\" colSpan={columnCount()}>\n                  <Message variant=\"filled\" type=\"error\">\n                    {local.error}\n                  </Message>\n                </TableCell>\n              </TableRow>\n            }\n          >\n            <For each={table.getRowModel().rows}>\n              {(row) => (\n                <>\n                  <TableRow onClick={(event: MouseEvent) => local.onBodyRowClick?.(row, event)}>\n                    <For each={row.getVisibleCells()}>\n                      {(cell) => (\n                        <TableCell\n                          cellAlign={align()}\n                          {...cellLabel(cell.column.columnDef as ColumnDef<TData, TValue>)}\n                          {...cell.column.columnDef.meta?.cellProps}\n                        >\n                          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                        </TableCell>\n                      )}\n                    </For>\n                  </TableRow>\n                  <Show when={row.getIsExpanded() && local.renderSubComponent}>\n                    <TableRow>\n                      <TableCell colSpan={row.getVisibleCells().length}>\n                        {local.renderSubComponent?.({ row })}\n                      </TableCell>\n                    </TableRow>\n                  </Show>\n                </>\n              )}\n            </For>\n          </Show>\n        </Show>\n      </TableBody>\n    </SmwbTable>\n  );\n}\n\nexport default Table;\n"],"mappings":"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","names":[],"file":"table.jsx"}

package/dist/source/icons/catalog.js

@@ -59,6 +59,13 @@ const iconCatalog = [
     aliases: ["user_circle"],
     keywords: ["account", "user", "profile", "avatar", "person"]
   },
+  {
+    name: "account_tree",
+    export: "accountTree",
+    category: "data",
+    aliases: ["hierarchy", "org_chart"],
+    keywords: ["tree", "hierarchy", "structure", "org chart", "nested", "parent", "child"]
+  },
   {
     name: "add",
     export: "add",
@@ -325,6 +332,13 @@ const iconCatalog = [
     aliases: ["hang_up"],
     keywords: ["call", "end", "hangup", "decline", "phone"]
   },
+  {
+    name: "call_split",
+    export: "callSplit",
+    category: "navigation",
+    aliases: ["split"],
+    keywords: ["split", "branch", "fork", "diverge", "divide"]
+  },
   {
     name: "campaign",
     export: "campaign",
@@ -535,6 +549,13 @@ const iconCatalog = [
     aliases: [],
     keywords: ["document", "file", "text", "page", "description"]
   },
+  {
+    name: "device_hub",
+    export: "deviceHub",
+    category: "device",
+    aliases: [],
+    keywords: ["hub", "device", "network", "connection", "nodes", "usb"]
+  },
   {
     name: "diversity_3",
     export: "diversity3",
@@ -605,6 +626,13 @@ const iconCatalog = [
     aliases: ["pencil"],
     keywords: ["edit", "pencil", "write", "modify", "compose"]
   },
+  {
+    name: "edit_note",
+    export: "editNote",
+    category: "editor",
+    aliases: ["note_edit"],
+    keywords: ["edit", "note", "notes", "write", "journal", "record", "pencil"]
+  },
   {
     name: "emoji_events",
     export: "emojiEvents",
@@ -717,6 +745,13 @@ const iconCatalog = [
     aliases: ["funnel"],
     keywords: ["filter", "funnel", "refine", "narrow", "sift"]
   },
+  {
+    name: "filter_list",
+    export: "filterList",
+    category: "action",
+    aliases: ["filter_lines"],
+    keywords: ["filter", "list", "refine", "narrow", "sort", "lines"]
+  },
   {
     name: "first_page",
     export: "firstPage",
@@ -752,6 +787,13 @@ const iconCatalog = [
     aliases: [],
     keywords: ["folder", "open", "directory", "browse", "files"]
   },
+  {
+    name: "fork_right",
+    export: "forkRight",
+    category: "navigation",
+    aliases: [],
+    keywords: ["fork", "branch", "right", "diverge", "road", "turn"]
+  },
   {
     name: "format_align_center",
     export: "formatAlignCenter",
@@ -857,6 +899,13 @@ const iconCatalog = [
     aliases: ["users_plus"],
     keywords: ["group", "users", "team", "add", "invite", "members"]
   },
+  {
+    name: "groups",
+    export: "groups",
+    category: "social",
+    aliases: ["team"],
+    keywords: ["groups", "team", "people", "community", "members", "staff"]
+  },
   {
     name: "headphones",
     export: "headphones",
@@ -899,6 +948,13 @@ const iconCatalog = [
     aliases: ["hourglass"],
     keywords: ["hourglass", "wait", "loading", "sand", "time"]
   },
+  {
+    name: "hub",
+    export: "hub",
+    category: "data",
+    aliases: [],
+    keywords: ["hub", "network", "center", "connections", "nodes", "graph"]
+  },
   {
     name: "image",
     export: "image",
@@ -983,6 +1039,13 @@ const iconCatalog = [
     aliases: ["tag"],
     keywords: ["label", "tag", "badge", "category", "marker"]
   },
+  {
+    name: "lan",
+    export: "lan",
+    category: "device",
+    aliases: ["network"],
+    keywords: ["lan", "network", "local", "ethernet", "topology", "connection"]
+  },
   {
     name: "language",
     export: "language",
@@ -1326,6 +1389,13 @@ const iconCatalog = [
     aliases: ["user_plus"],
     keywords: ["person", "user", "add", "invite", "new", "signup"]
   },
+  {
+    name: "person_off",
+    export: "personOff",
+    category: "social",
+    aliases: ["user_off"],
+    keywords: ["person", "user", "off", "removed", "inactive", "unassigned", "nobody"]
+  },
   {
     name: "pets",
     export: "pets",
@@ -1529,6 +1599,13 @@ const iconCatalog = [
     aliases: ["clock"],
     keywords: ["clock", "time", "schedule", "hour", "watch"]
   },
+  {
+    name: "schema",
+    export: "schema",
+    category: "data",
+    aliases: ["diagram"],
+    keywords: ["schema", "diagram", "flow", "structure", "model", "blocks"]
+  },
   {
     name: "school",
     export: "school",
@@ -2076,7 +2153,7 @@ const iconCatalog = [
     keywords: ["zoom", "magnify", "shrink", "scale", "search"]
   }
 ];
-const iconCount = 294;
+const iconCount = 305;
 export {
   iconCatalog,
   iconCategories,