@smwb/ui-react 2.6.3 → 2.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n  className?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n  menuItems?: MenuItemProps[];\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\nexport const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(\n  {\n    className,\n    variant = \"default\",\n    menuItems,\n    activeItem: activeItemProp,\n    defaultActiveItem = null,\n    onActiveItemChange,\n    collapsible = false,\n    collapsed: collapsedProp,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    ...rest\n  },\n  ref\n) {\n  const isControlled = activeItemProp !== undefined;\n  const [activeItemState, setActiveItemState] = useState<number | null>(defaultActiveItem);\n  const activeItem = isControlled ? activeItemProp : activeItemState;\n\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant,\n  // otherwise it honours the requested variant.\n  const effectiveVariant = collapsible && collapsed ? \"compactMini\" : variant;\n\n  return (\n    <aside\n      ref={ref}\n      className={cn(\"smwb-sidebar\", className, `smwb-${effectiveVariant}`, {\n        \"smwb-sidebar_collapsible\": collapsible,\n        \"smwb-sidebar_collapsed\": collapsible && collapsed,\n      })}\n      role=\"menubar\"\n      {...rest}\n    >\n      {collapsible && (\n        <div className=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            className=\"smwb-sidebar__collapse-btn\"\n            aria-label={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      )}\n      <nav className=\"smwb-sidebar__nav\">\n        {menuItems &&\n          menuItems?.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              as={item.as}\n              isActive={activeItem === idx}\n              onClick={(e) => {\n                if (!isControlled) {\n                  setActiveItemState(idx);\n                }\n                onActiveItemChange?.(idx);\n                item.onClick?.(e);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant}\n            />\n          ))}\n      </nav>\n    </aside>\n  );\n});\n\nexport default Sidebar;\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  title: string;\n  isActive?: boolean;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  as?: React.ElementType;\n  href?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n}\n\nfunction MenuItem({\n  isActive,\n  icon,\n  title,\n  as = \"div\",\n  href,\n  onMouseDown: onMouseDownProp,\n  variant,\n  ...rest\n}: MenuItemProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const rippleElement = <Ripple actionRef={rippleRef} />;\n\n  const ElementType = as;\n\n  return (\n    <ElementType\n      href={href}\n      role=\"menuitem\"\n      className={cn(\"sidebar__nav__item\", \"smwb-nav-item\", variant, { active: isActive })}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {icon && <span className=\"smwb-nav-item__icon\">{icon}</span>}\n      {title && <span className=\"smwb-nav-item__title\">{title}</span>}\n      {rippleElement}\n    </ElementType>\n  );\n}\n"],"names":["Sidebar","forwardRef","className","variant","menuItems","activeItemProp","defaultActiveItem","onActiveItemChange","collapsible","collapsedProp","defaultCollapsed","onCollapsedChange","collapseToggleAriaLabel","rest","ref","isControlled","activeItemState","setActiveItemState","useState","activeItem","collapsed","setCollapsed","useControllableState","effectiveVariant","jsxs","cn","jsx","Icon","item","idx","MenuItem","e","_a","isActive","icon","title","as","href","onMouseDownProp","rippleRef","React","onMouseDown","event","onPointerDown","rippleElement","Ripple"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n  className?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n  menuItems?: MenuItemProps[];\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\nexport const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(\n  {\n    className,\n    variant = \"default\",\n    menuItems,\n    activeItem: activeItemProp,\n    defaultActiveItem = null,\n    onActiveItemChange,\n    collapsible = false,\n    collapsed: collapsedProp,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    ...rest\n  },\n  ref\n) {\n  const isControlled = activeItemProp !== undefined;\n  const [activeItemState, setActiveItemState] = useState<number | null>(defaultActiveItem);\n  const activeItem = isControlled ? activeItemProp : activeItemState;\n\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant,\n  // otherwise it honours the requested variant.\n  const effectiveVariant = collapsible && collapsed ? \"compactMini\" : variant;\n\n  return (\n    <aside\n      ref={ref}\n      className={cn(\"smwb-sidebar\", className, `smwb-${effectiveVariant}`, {\n        \"smwb-sidebar_collapsible\": collapsible,\n        \"smwb-sidebar_collapsed\": collapsible && collapsed,\n      })}\n      {...rest}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"menubar\"}\n    >\n      {collapsible && (\n        <div className=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            className=\"smwb-sidebar__collapse-btn\"\n            aria-label={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      )}\n      <nav className=\"smwb-sidebar__nav\">\n        {menuItems &&\n          menuItems?.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              as={item.as}\n              isActive={activeItem === idx}\n              onClick={(e) => {\n                if (!isControlled) {\n                  setActiveItemState(idx);\n                }\n                onActiveItemChange?.(idx);\n                item.onClick?.(e);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant}\n            />\n          ))}\n      </nav>\n    </aside>\n  );\n});\n\nexport default Sidebar;\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  title: string;\n  isActive?: boolean;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  as?: React.ElementType;\n  href?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n}\n\nfunction MenuItem({\n  isActive,\n  icon,\n  title,\n  as = \"div\",\n  href,\n  onMouseDown: onMouseDownProp,\n  variant,\n  ...rest\n}: MenuItemProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const rippleElement = <Ripple actionRef={rippleRef} />;\n\n  const ElementType = as;\n\n  return (\n    <ElementType\n      href={href}\n      role=\"menuitem\"\n      className={cn(\"sidebar__nav__item\", \"smwb-nav-item\", variant, { active: isActive })}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {icon && <span className=\"smwb-nav-item__icon\">{icon}</span>}\n      {title && <span className=\"smwb-nav-item__title\">{title}</span>}\n      {rippleElement}\n    </ElementType>\n  );\n}\n"],"names":["Sidebar","forwardRef","className","variant","menuItems","activeItemProp","defaultActiveItem","onActiveItemChange","collapsible","collapsedProp","defaultCollapsed","onCollapsedChange","collapseToggleAriaLabel","rest","ref","isControlled","activeItemState","setActiveItemState","useState","activeItem","collapsed","setCollapsed","useControllableState","effectiveVariant","jsxs","cn","_a","jsx","Icon","item","idx","MenuItem","e","isActive","icon","title","as","href","onMouseDownProp","rippleRef","React","onMouseDown","event","onPointerDown","rippleElement","Ripple"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from "react";
 export interface StepItem {
     label: ReactNode;
+    /** Longer text under the label, in every orientation. */
     description?: ReactNode;
     optional?: ReactNode;
     /** Marks the step as errored. */
@@ -10,16 +11,25 @@ export interface StepItem {
     /** Custom icon overriding the default number/check. */
     icon?: ReactNode;
 }
+/**
+ * `auto` lays the steps out in a row while the stepper's container is wide
+ * enough for them — about 8rem per step, a theme variable — and in a column when
+ * it is not. It is a CSS container query, so the server renders the same markup
+ * and nothing changes on hydration.
+ */
+export type StepperOrientation = "horizontal" | "vertical" | "auto";
 export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     steps: StepItem[];
     /** Index of the active (current) step. */
     activeStep: number;
-    orientation?: "horizontal" | "vertical";
-    /** Place the label under the icon (horizontal only). */
+    orientation?: StepperOrientation;
+    /** Place the label under the icon (in a row: horizontal, or auto while wide). */
     alternativeLabel?: boolean;
     /** Makes steps clickable; receives the clicked step index. */
     onStepClick?: (index: number) => void;
+    /** Test id of the stepper `<div>`; `stepper` unless given. */
+    "data-testid"?: string;
 }
 export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Stepper;

package/dist/components/navigation/stepper/stepper.js

@@ -1,61 +1,73 @@
-import { jsx as s, jsxs as o } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/stepper/stepper.entry.css';/* empty css                                                         */
-import { forwardRef as N, Fragment as y } from "react";
-import _ from "clsx";
-import { Icon as z } from "../../base/icon/icon.js";
-const E = N(function({ className: b, steps: i, activeStep: d, orientation: l = "horizontal", alternativeLabel: w = !1, onStepClick: r, ...h }, u) {
-  return /* @__PURE__ */ s(
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/stepper/stepper.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                         */
+import { forwardRef as z, Fragment as D } from "react";
+import h from "clsx";
+import { Icon as j } from "../../base/icon/icon.js";
+const A = 12, L = z(function({
+  className: u,
+  steps: p,
+  activeStep: m,
+  orientation: o = "horizontal",
+  alternativeLabel: v = !1,
+  onStepClick: r,
+  "data-testid": f = "stepper",
+  ...n
+}, N) {
+  const l = o === "auto", c = /* @__PURE__ */ s(
     "div",
     {
-      ...h,
-      ref: u,
-      "data-testid": "stepper",
-      className: _(
+      ...n,
+      ref: N,
+      "data-testid": f,
+      "data-steps": l ? String(Math.min(p.length, A)) : n["data-steps"],
+      className: h(
         "smwb-stepper",
-        `smwb-stepper_${l}`,
-        { "smwb-stepper_alt-label": w && l === "horizontal" },
-        b
+        l ? "smwb-stepper_horizontal smwb-stepper_auto" : `smwb-stepper_${o}`,
+        { "smwb-stepper_alt-label": v && o !== "vertical" },
+        u
       ),
-      children: i.map((e, a) => {
-        var n;
-        const m = a < d, c = a === d, v = a === i.length - 1, t = !!r && !e.disabled, f = (p) => {
-          t && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), r == null || r(a));
+      children: p.map((e, a) => {
+        var w;
+        const _ = a < m, b = a === m, g = a === p.length - 1, t = !!r && !e.disabled, y = (i) => {
+          t && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), r == null || r(a));
         };
-        return /* @__PURE__ */ o(y, { children: [
-          /* @__PURE__ */ o(
+        return /* @__PURE__ */ d(D, { children: [
+          /* @__PURE__ */ d(
             "div",
             {
-              className: _("smwb-stepper__step", {
-                "smwb-stepper__step_active": c,
-                "smwb-stepper__step_completed": m,
+              className: h("smwb-stepper__step", {
+                "smwb-stepper__step_active": b,
+                "smwb-stepper__step_completed": _,
                 "smwb-stepper__step_error": e.error,
                 "smwb-stepper__step_disabled": e.disabled,
                 "smwb-stepper__step_clickable": t
               }),
-              "aria-current": c ? "step" : void 0,
+              "aria-current": b ? "step" : void 0,
               "aria-disabled": e.disabled || void 0,
               role: t ? "button" : void 0,
               tabIndex: t ? 0 : void 0,
               onClick: t ? () => r == null ? void 0 : r(a) : void 0,
-              onKeyDown: t ? f : void 0,
+              onKeyDown: t ? y : void 0,
               children: [
-                /* @__PURE__ */ s("div", { className: "smwb-stepper__icon", "aria-hidden": "true", children: (n = e.icon) != null ? n : m ? /* @__PURE__ */ s(z, { name: "check", size: 16 }) : /* @__PURE__ */ s("span", { children: a + 1 }) }),
-                /* @__PURE__ */ o("div", { className: "smwb-stepper__text", children: [
+                /* @__PURE__ */ s("div", { className: "smwb-stepper__icon", "aria-hidden": "true", children: (w = e.icon) != null ? w : _ ? /* @__PURE__ */ s(j, { name: "check", size: 16 }) : /* @__PURE__ */ s("span", { children: a + 1 }) }),
+                /* @__PURE__ */ d("div", { className: "smwb-stepper__text", children: [
                   /* @__PURE__ */ s("span", { className: "smwb-stepper__label", children: e.label }),
                   e.optional ? /* @__PURE__ */ s("span", { className: "smwb-stepper__optional", children: e.optional }) : null,
-                  e.description && l === "vertical" ? /* @__PURE__ */ s("span", { className: "smwb-stepper__description", children: e.description }) : null
+                  e.description ? /* @__PURE__ */ s("span", { className: "smwb-stepper__description", children: e.description }) : null
                 ] })
               ]
             }
           ),
-          v ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
+          g ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
         ] }, a);
       })
     }
   );
+  return l ? /* @__PURE__ */ s("div", { className: "smwb-stepper-auto", children: c }) : c;
 });
 export {
-  E as Stepper,
-  E as default
+  L as Stepper,
+  L as default
 };
 //# sourceMappingURL=stepper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sources":["../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { forwardRef, Fragment, HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface StepItem {\n  label: ReactNode;\n  description?: ReactNode;\n  optional?: ReactNode;\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?: ReactNode;\n}\n\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\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}\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  { className, steps, activeStep, orientation = \"horizontal\", alternativeLabel = false, onStepClick, ...props },\n  ref\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"stepper\"\n      className={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${orientation}`,\n        { \"smwb-stepper_alt-label\": alternativeLabel && orientation === \"horizontal\" },\n        className\n      )}\n    >\n      {steps.map((step, index) => {\n        const completed = index < activeStep;\n        const active = index === activeStep;\n        const isLast = index === steps.length - 1;\n        const clickable = Boolean(onStepClick) && !step.disabled;\n\n        const onStepKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n          if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n            event.preventDefault();\n            onStepClick?.(index);\n          }\n        };\n\n        return (\n          <Fragment key={index}>\n            <div\n              className={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 ? () => onStepClick?.(index) : undefined}\n              onKeyDown={clickable ? onStepKeyDown : undefined}\n            >\n              <div className=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                {step.icon ?? (completed ? <Icon name=\"check\" size={16} /> : <span>{index + 1}</span>)}\n              </div>\n              <div className=\"smwb-stepper__text\">\n                <span className=\"smwb-stepper__label\">{step.label}</span>\n                {step.optional ? <span className=\"smwb-stepper__optional\">{step.optional}</span> : null}\n                {step.description && orientation === \"vertical\" ? (\n                  <span className=\"smwb-stepper__description\">{step.description}</span>\n                ) : null}\n              </div>\n            </div>\n            {!isLast ? <div className=\"smwb-stepper__connector\" aria-hidden=\"true\" /> : null}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default Stepper;\n"],"names":["Stepper","forwardRef","className","steps","activeStep","orientation","alternativeLabel","onStepClick","props","ref","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;;AA6BO,MAAMA,IAAUC,EAAyC,SAC9D,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,IAAc,cAAc,kBAAAC,IAAmB,IAAO,aAAAC,GAAa,GAAGC,EAAA,GACtGC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACA,gBAAgBN,CAAW;AAAA,QAC3B,EAAE,0BAA0BC,KAAoBD,MAAgB,aAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACS,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQT,GACpBW,IAASF,MAAUT,GACnBY,IAASH,MAAUV,EAAM,SAAS,GAClCc,IAAY,EAAQV,KAAgB,CAACK,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNZ,KAAA,QAAAA,EAAcM;AAAA,QAElB;AAEA,iCACGO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWV,EAAG,sBAAsB;AAAA,gBAClC,6BAA6BI;AAAA,gBAC7B,gCAAgCD;AAAA,gBAChC,4BAA4BF,EAAK;AAAA,gBACjC,+BAA+BA,EAAK;AAAA,gBACpC,gCAAgCK;AAAA,cAAA,CACjC;AAAA,cACD,gBAAcF,IAAS,SAAS;AAAA,cAChC,iBAAeH,EAAK,YAAY;AAAA,cAChC,MAAMK,IAAY,WAAW;AAAA,cAC7B,UAAUA,IAAY,IAAI;AAAA,cAC1B,SAASA,IAAY,MAAMV,KAAA,gBAAAA,EAAcM,KAAS;AAAA,cAClD,WAAWI,IAAYC,IAAgB;AAAA,cAEvC,UAAA;AAAA,gBAAA,gBAAAR,EAAC,SAAI,WAAU,sBAAqB,eAAY,QAC7C,WAAAY,IAAAV,EAAK,SAAL,OAAAU,IAAcR,IAAY,gBAAAJ,EAACa,KAAK,MAAK,SAAQ,MAAM,GAAA,CAAI,sBAAM,QAAA,EAAM,UAAAV,IAAQ,GAAE,EAAA,CAChF;AAAA,gBACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,kBAAA,gBAAAX,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAE,EAAK,OAAM;AAAA,kBACjDA,EAAK,WAAW,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAE,EAAK,UAAS,IAAU;AAAA,kBAClFA,EAAK,eAAeP,MAAgB,aACnC,gBAAAK,EAAC,UAAK,WAAU,6BAA6B,UAAAE,EAAK,YAAA,CAAY,IAC5D;AAAA,gBAAA,EAAA,CACN;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEAI,IAA0E,OAAjE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,QAAK,EAAA,GA3B/DG,CA4Bf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"stepper.js","sources":["../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { forwardRef, Fragment, HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface StepItem {\n  label: ReactNode;\n  /** Longer text under the label, in every orientation. */\n  description?: ReactNode;\n  optional?: ReactNode;\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?: ReactNode;\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\ntype DataAttributes = Record<`data-${string}`, unknown>;\n\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\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;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    className,\n    steps,\n    activeStep,\n    orientation = \"horizontal\",\n    alternativeLabel = false,\n    onStepClick,\n    \"data-testid\": dataTestId = \"stepper\",\n    ...props\n  },\n  ref\n) {\n  const auto = orientation === \"auto\";\n  const stepper = (\n    <div\n      {...props}\n      ref={ref}\n      data-testid={dataTestId}\n      // The auto layout's step count wins; without it, the caller's data-steps stays.\n      data-steps={auto ? String(Math.min(steps.length, AUTO_MAX_STEPS)) : (props as DataAttributes)[\"data-steps\"]}\n      className={cn(\n        \"smwb-stepper\",\n        auto ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${orientation}`,\n        { \"smwb-stepper_alt-label\": alternativeLabel && orientation !== \"vertical\" },\n        className\n      )}\n    >\n      {steps.map((step, index) => {\n        const completed = index < activeStep;\n        const active = index === activeStep;\n        const isLast = index === steps.length - 1;\n        const clickable = Boolean(onStepClick) && !step.disabled;\n\n        const onStepKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n          if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n            event.preventDefault();\n            onStepClick?.(index);\n          }\n        };\n\n        return (\n          <Fragment key={index}>\n            <div\n              className={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 ? () => onStepClick?.(index) : undefined}\n              onKeyDown={clickable ? onStepKeyDown : undefined}\n            >\n              <div className=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                {step.icon ?? (completed ? <Icon name=\"check\" size={16} /> : <span>{index + 1}</span>)}\n              </div>\n              <div className=\"smwb-stepper__text\">\n                <span className=\"smwb-stepper__label\">{step.label}</span>\n                {step.optional ? <span className=\"smwb-stepper__optional\">{step.optional}</span> : null}\n                {step.description ? <span className=\"smwb-stepper__description\">{step.description}</span> : null}\n              </div>\n            </div>\n            {!isLast ? <div className=\"smwb-stepper__connector\" aria-hidden=\"true\" /> : null}\n          </Fragment>\n        );\n      })}\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 auto ? <div className=\"smwb-stepper-auto\">{stepper}</div> : stepper;\n});\n\nexport default Stepper;\n"],"names":["AUTO_MAX_STEPS","Stepper","forwardRef","className","steps","activeStep","orientation","alternativeLabel","onStepClick","dataTestId","props","ref","auto","stepper","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;;;AA4CA,MAAMA,IAAiB,IAEVC,IAAUC,EAAyC,SAC9D;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,kBAAAC,IAAmB;AAAA,EACnB,aAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAON,MAAgB,QACvBO,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MAEb,cAAYG,IAAO,OAAO,KAAK,IAAIR,EAAM,QAAQJ,CAAc,CAAC,IAAKU,EAAyB,YAAY;AAAA,MAC1G,WAAWK;AAAA,QACT;AAAA,QACAH,IAAO,8CAA8C,gBAAgBN,CAAW;AAAA,QAChF,EAAE,0BAA0BC,KAAoBD,MAAgB,WAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACY,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQZ,GACpBc,IAASF,MAAUZ,GACnBe,IAASH,MAAUb,EAAM,SAAS,GAClCiB,IAAY,EAAQb,KAAgB,CAACQ,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNf,KAAA,QAAAA,EAAcS;AAAA,QAElB;AAEA,iCACGO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWV,EAAG,sBAAsB;AAAA,gBAClC,6BAA6BI;AAAA,gBAC7B,gCAAgCD;AAAA,gBAChC,4BAA4BF,EAAK;AAAA,gBACjC,+BAA+BA,EAAK;AAAA,gBACpC,gCAAgCK;AAAA,cAAA,CACjC;AAAA,cACD,gBAAcF,IAAS,SAAS;AAAA,cAChC,iBAAeH,EAAK,YAAY;AAAA,cAChC,MAAMK,IAAY,WAAW;AAAA,cAC7B,UAAUA,IAAY,IAAI;AAAA,cAC1B,SAASA,IAAY,MAAMb,KAAA,gBAAAA,EAAcS,KAAS;AAAA,cAClD,WAAWI,IAAYC,IAAgB;AAAA,cAEvC,UAAA;AAAA,gBAAA,gBAAAR,EAAC,SAAI,WAAU,sBAAqB,eAAY,QAC7C,WAAAY,IAAAV,EAAK,SAAL,OAAAU,IAAcR,IAAY,gBAAAJ,EAACa,KAAK,MAAK,SAAQ,MAAM,GAAA,CAAI,sBAAM,QAAA,EAAM,UAAAV,IAAQ,GAAE,EAAA,CAChF;AAAA,gBACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,kBAAA,gBAAAX,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAE,EAAK,OAAM;AAAA,kBACjDA,EAAK,WAAW,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAE,EAAK,UAAS,IAAU;AAAA,kBAClFA,EAAK,cAAc,gBAAAF,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAE,EAAK,aAAY,IAAU;AAAA,gBAAA,EAAA,CAC9F;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEAI,IAA0E,OAAjE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,QAAK,EAAA,GAzB/DG,CA0Bf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAML,SAAOL,IAAO,gBAAAE,EAAC,OAAA,EAAI,WAAU,qBAAqB,aAAQ,IAASD;AACrE,CAAC;"}

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

@@ -6,6 +6,8 @@ export interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLA
     icon?: React.ReactNode;
     stacked?: boolean;
     tag?: React.ElementType;
+    /** With `tag="a"`: where the link goes, so the tab stays a real link. */
+    href?: string;
     disabled?: boolean;
 }
 export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

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

@@ -1,54 +1,57 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';/* empty css                                                         */
-import m from "react";
-import v from "clsx";
-import { Ripple as T } from "../../../base/ripple/ripple.js";
-const g = m.forwardRef(function(p, f) {
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
+/* empty css                                                         */
+import f from "react";
+import j from "clsx";
+import { Ripple as k } from "../../../base/ripple/ripple.js";
+const y = f.forwardRef(function(w, u) {
   const {
-    className: w,
-    label: c,
-    isActive: s = !1,
-    contentRef: u,
-    icon: i,
-    stacked: R = !1,
-    tag: e,
-    disabled: a,
-    onMouseDown: t,
-    ..._
-  } = p, l = m.useRef(null), h = (n) => {
-    t == null || t(n);
-  }, x = (n) => {
-    var r;
-    (r = l.current) == null || r.onRipple(n);
-  }, b = e != null ? e : e || "button", N = v("smwb-tab", w, {
-    "smwb-tab--active": s,
-    "smwb-tab--stacked": R,
-    "smwb-tab--disabled": a
+    className: R,
+    label: i,
+    isActive: e = !1,
+    contentRef: _,
+    icon: l,
+    stacked: h = !1,
+    tag: s,
+    disabled: t,
+    onMouseDown: n,
+    // The tab sets this on its root too; its own handler calls the caller's first.
+    onPointerDown: c,
+    ...b
+  } = w, r = f.useRef(null), x = (a) => {
+    n == null || n(a);
+  }, N = (a) => {
+    var m;
+    c == null || c(a), (m = r.current) == null || m.onRipple(a);
+  }, d = s != null ? s : s || "button", T = j("smwb-tab", R, {
+    "smwb-tab--active": e,
+    "smwb-tab--stacked": h,
+    "smwb-tab--disabled": t
   });
-  return /* @__PURE__ */ d(
-    b,
+  return /* @__PURE__ */ p(
+    d,
     {
-      ref: f,
-      className: N,
-      onMouseDown: h,
-      onPointerDown: x,
+      ...b,
+      ref: u,
+      className: T,
+      onMouseDown: x,
+      onPointerDown: N,
       role: "tab",
-      "aria-selected": s,
-      "aria-disabled": a || void 0,
-      tabIndex: s ? 0 : -1,
-      disabled: b === "button" ? a : void 0,
-      ..._,
+      "aria-selected": e,
+      "aria-disabled": t || b["aria-disabled"],
+      tabIndex: e ? 0 : -1,
+      disabled: d === "button" ? t : void 0,
       children: [
-        /* @__PURE__ */ d("span", { className: "smwb-tab__content", ref: u, children: [
-          i && /* @__PURE__ */ o("span", { className: "smwb-tab__icon", children: i }),
-          c && /* @__PURE__ */ o("span", { className: "smwb-tab__text-label", children: c })
+        /* @__PURE__ */ p("span", { className: "smwb-tab__content", ref: _, children: [
+          l && /* @__PURE__ */ o("span", { className: "smwb-tab__icon", children: l }),
+          i && /* @__PURE__ */ o("span", { className: "smwb-tab__text-label", children: i })
         ] }),
-        /* @__PURE__ */ o(T, { actionRef: l, classes: { child: "tab__ripple-child" } })
+        /* @__PURE__ */ o(k, { actionRef: r, classes: { child: "tab__ripple-child" } })
       ]
     }
   );
 });
 export {
-  g as Tab
+  y as Tab
 };
 //# sourceMappingURL=tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || undefined}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n      {...rest}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;;AAeO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA,IACb,GAAGC;AAAA,EAAA,IACDX,GACEY,IAAYb,EAAM,OAAyB,IAAI,GAE/Cc,IAAc,CAACC,MAAmE;AACtF,IAAAJ,KAAA,QAAAA,EAAkBI;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMT,KAAA,OAAAA,IAAQA,KAAO,UACrBU,IAAUC,EAAG,YAAYjB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAW;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,WAAWiB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MACA,MAAM;AAAA,MACN,iBAAeX;AAAA,MACf,iBAAeK,KAAY;AAAA,MAC3B,UAAUL,IAAW,IAAI;AAAA,MACzB,UAAUa,MAAQ,WAAWR,IAAW;AAAA,MACvC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKf,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAe,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAf,GAAK;AAAA,UAC/CH,KAAS,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAlB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAkB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}
+{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  /** With `tag=\"a\"`: where the link goes, so the tab stays a real link. */\n  href?: string;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    // The tab sets this on its root too; its own handler calls the caller's first.\n    onPointerDown: onPointerDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n    onPointerDownProp?.(event);\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      {...rest}\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      // The role, the selection and the roving tabIndex belong to the tab list:\n      // they win over the caller's. A tab that is not disabled keeps the\n      // caller's aria-disabled.\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || rest[\"aria-disabled\"]}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","onPointerDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;;;AAkBO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA;AAAA,IAEb,eAAeC;AAAA,IACf,GAAGC;AAAA,EAAA,IACDZ,GACEa,IAAYd,EAAM,OAAyB,IAAI,GAE/Ce,IAAc,CAACC,MAAmE;AACtF,IAAAL,KAAA,QAAAA,EAAkBK;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,IAAAJ,KAAA,QAAAA,EAAoBI,KACpBE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMV,KAAA,OAAAA,IAAQA,KAAO,UACrBW,IAAUC,EAAG,YAAYlB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAY;AAAA,IAACH;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,KAAAX;AAAA,MACA,WAAWkB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MAIA,MAAM;AAAA,MACN,iBAAeZ;AAAA,MACf,iBAAeK,KAAYG,EAAK,eAAe;AAAA,MAC/C,UAAUR,IAAW,IAAI;AAAA,MACzB,UAAUc,MAAQ,WAAWT,IAAW;AAAA,MAExC,UAAA;AAAA,QAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKhB,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAgB,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAhB,GAAK;AAAA,UAC/CH,KAAS,gBAAAmB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAnB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAmB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}

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

@@ -1,10 +1,28 @@
 import React from "react";
 import { Tab, TabProps } from "./tab/tab";
 export interface TabsProps {
+    /**
+     * Index of the selected tab. Tabs count in the order they render: a tab left out,
+     * such as `{show && <Tab />}` while `show` is false, takes no index.
+     */
     value: number;
+    /** Called with the index of the clicked tab, counted as for `value`. */
     onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;
+    /** Draw the indicator as wide as the selected tab's label rather than the whole tab. */
     indicatorContent?: boolean;
+    /**
+     * Let the tab row scroll sideways instead of clipping it. The edge beyond which
+     * more tabs are hidden fades out.
+     */
     scrollable?: boolean;
+    /** With `scrollable`: buttons at both ends that scroll the row while it overflows. */
+    scrollButtons?: boolean;
+    /** Compact tabs: labels as written (no capitals, no letter spacing) and less padding. */
+    dense?: boolean;
+    /** Accessible label of the button that scrolls back. */
+    scrollBackAriaLabel?: string;
+    /** Accessible label of the button that scrolls forward. */
+    scrollForwardAriaLabel?: string;
     className?: string;
     children?: React.ReactNode;
     /** Accessible label for the tab list. */