@smwb/ui-react 2.6.2 → 2.7.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      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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"}

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,13 +11,20 @@ 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;

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

@@ -1,61 +1,64 @@
-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 m } 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 y, Fragment as z } from "react";
+import w from "clsx";
+import { Icon as D } from "../../base/icon/icon.js";
+const j = 12, F = y(function({ className: h, steps: p, activeStep: d, orientation: o = "horizontal", alternativeLabel: u = !1, onStepClick: r, ...v }, f) {
+  const l = o === "auto", n = /* @__PURE__ */ s(
     "div",
     {
-      ...h,
-      ref: u,
+      ...v,
+      ref: f,
       "data-testid": "stepper",
-      className: _(
+      "data-steps": l ? String(Math.min(p.length, j)) : void 0,
+      className: w(
         "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": u && o !== "vertical" },
+        h
       ),
-      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 b;
+        const c = a < d, _ = a === d, N = a === p.length - 1, t = !!r && !e.disabled, g = (i) => {
+          t && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), r == null || r(a));
         };
-        return /* @__PURE__ */ o(y, { children: [
-          /* @__PURE__ */ o(
+        return /* @__PURE__ */ m(z, { children: [
+          /* @__PURE__ */ m(
             "div",
             {
-              className: _("smwb-stepper__step", {
-                "smwb-stepper__step_active": c,
-                "smwb-stepper__step_completed": m,
+              className: w("smwb-stepper__step", {
+                "smwb-stepper__step_active": _,
+                "smwb-stepper__step_completed": c,
                 "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": _ ? "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 ? g : 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: (b = e.icon) != null ? b : c ? /* @__PURE__ */ s(D, { name: "check", size: 16 }) : /* @__PURE__ */ s("span", { children: a + 1 }) }),
+                /* @__PURE__ */ m("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" })
+          N ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
         ] }, a);
       })
     }
   );
+  return l ? /* @__PURE__ */ s("div", { className: "smwb-stepper-auto", children: n }) : n;
 });
 export {
-  E as Stepper,
-  E as default
+  F as Stepper,
+  F 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\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}\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  { className, steps, activeStep, orientation = \"horizontal\", alternativeLabel = false, onStepClick, ...props },\n  ref\n) {\n  const auto = orientation === \"auto\";\n  const stepper = (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"stepper\"\n      data-steps={auto ? String(Math.min(steps.length, AUTO_MAX_STEPS)) : undefined}\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","props","ref","auto","stepper","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;;;AAwCA,MAAMA,IAAiB,IAEVC,IAAUC,EAAyC,SAC9D,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,IAAc,cAAc,kBAAAC,IAAmB,IAAO,aAAAC,GAAa,GAAGC,EAAA,GACtGC,GACA;AACA,QAAMC,IAAOL,MAAgB,QACvBM,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,cAAYC,IAAO,OAAO,KAAK,IAAIP,EAAM,QAAQJ,CAAc,CAAC,IAAI;AAAA,MACpE,WAAWc;AAAA,QACT;AAAA,QACAH,IAAO,8CAA8C,gBAAgBL,CAAW;AAAA,QAChF,EAAE,0BAA0BC,KAAoBD,MAAgB,WAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACW,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQX,GACpBa,IAASF,MAAUX,GACnBc,IAASH,MAAUZ,EAAM,SAAS,GAClCgB,IAAY,EAAQZ,KAAgB,CAACO,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNd,KAAA,QAAAA,EAAcQ;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,MAAMZ,KAAA,gBAAAA,EAAcQ,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,9 +1,10 @@
-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 { jsxs as m, 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 d from "react";
 import v from "clsx";
 import { Ripple as T } from "../../../base/ripple/ripple.js";
-const g = m.forwardRef(function(p, f) {
+const q = d.forwardRef(function(p, f) {
   const {
     className: w,
     label: c,
@@ -15,18 +16,18 @@ const g = m.forwardRef(function(p, f) {
     disabled: a,
     onMouseDown: t,
     ..._
-  } = p, l = m.useRef(null), h = (n) => {
+  } = p, l = d.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, {
+    var b;
+    (b = l.current) == null || b.onRipple(n);
+  }, r = e != null ? e : e || "button", N = v("smwb-tab", w, {
     "smwb-tab--active": s,
     "smwb-tab--stacked": R,
     "smwb-tab--disabled": a
   });
-  return /* @__PURE__ */ d(
-    b,
+  return /* @__PURE__ */ m(
+    r,
     {
       ref: f,
       className: N,
@@ -36,10 +37,10 @@ const g = m.forwardRef(function(p, f) {
       "aria-selected": s,
       "aria-disabled": a || void 0,
       tabIndex: s ? 0 : -1,
-      disabled: b === "button" ? a : void 0,
+      disabled: r === "button" ? a : void 0,
       ..._,
       children: [
-        /* @__PURE__ */ d("span", { className: "smwb-tab__content", ref: u, children: [
+        /* @__PURE__ */ m("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 })
         ] }),
@@ -49,6 +50,6 @@ const g = m.forwardRef(function(p, f) {
   );
 });
 export {
-  g as Tab
+  q 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    ...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":";;;;;;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,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;"}

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

@@ -4,7 +4,19 @@ export interface TabsProps {
     value: number;
     onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;
     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. */

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

@@ -1,91 +1,103 @@
-import { jsx as u, jsxs as B } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/tabs/tabs.entry.css';/* empty css                                                   */
-import s from "react";
-import v from "clsx";
-import { debounce as D } from "../../../utils/debounce.js";
-import { useEventCallback as S } from "../../../hooks/useEventCallback.js";
-import { setRef as O } from "../../../utils/setRef.js";
-import { animate as j } from "../../../utils/animate.js";
-const L = {
+import { jsxs as M, jsx as i } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/tabs/tabs.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import n from "react";
+import y from "clsx";
+import { debounce as J } from "../../../utils/debounce.js";
+import { useEventCallback as _ } from "../../../hooks/useEventCallback.js";
+import { setRef as K } from "../../../utils/setRef.js";
+import { animate as Q } from "../../../utils/animate.js";
+import { Icon as z } from "../../base/icon/icon.js";
+const x = {
   root: {},
   content: {}
-}, Q = s.forwardRef(function(M, N) {
+}, U = 0.8, ct = n.forwardRef(function(B, I) {
   const {
-    className: C,
-    children: _,
-    onChange: E,
-    value: f,
-    indicatorContent: d = !1,
-    scrollable: y = !1,
-    "aria-label": z,
-    ...T
-  } = M, [x, I] = s.useState(!1), [c, h] = s.useState(L), l = s.useRef(null), a = s.useRef(null), b = s.useRef([]), w = 40, p = () => {
+    className: T,
+    children: W,
+    onChange: k,
+    value: u,
+    indicatorContent: m = !1,
+    scrollable: w = !1,
+    scrollButtons: O = !1,
+    dense: A = !1,
+    scrollBackAriaLabel: V = "Scroll tabs back",
+    scrollForwardAriaLabel: D = "Scroll tabs forward",
+    "aria-label": P,
+    ...j
+  } = B, [F, G] = n.useState(!1), [c, R] = n.useState(x), [f, q] = n.useState({ start: !1, end: !1 }), l = n.useRef(null), d = n.useRef(null), h = n.useRef([]), S = 40, g = () => {
     const t = l.current;
     let e;
     if (t) {
-      const n = t.getBoundingClientRect();
+      const o = t.getBoundingClientRect();
       e = {
         clientWidth: t.clientWidth,
         scrollLeft: t.scrollLeft,
         scrollTop: t.scrollTop,
         scrollWidth: t.scrollWidth,
-        top: n.top,
-        bottom: n.bottom,
-        left: n.left,
-        right: n.right
+        top: o.top,
+        bottom: o.bottom,
+        left: o.left,
+        right: o.right
       };
     }
-    let r = null, o = null;
-    if (a.current || console.error("tabListRef.current is undefined"), t && a.current) {
-      const n = a.current.children;
-      if (n.length > 0) {
-        const i = n[f];
-        r = i ? i.getBoundingClientRect() : null, d && (o = b.current[f] ? b.current[f].getBoundingClientRect() : null);
+    let r = null, s = null;
+    if (d.current || console.error("tabListRef.current is undefined"), t && d.current) {
+      const o = d.current.children;
+      if (o.length > 0) {
+        const a = o[u];
+        r = a ? a.getBoundingClientRect() : null, m && (s = h.current[u] ? h.current[u].getBoundingClientRect() : null);
       }
     }
-    return { tabsMeta: e, tabMeta: r, tabContentMeta: o };
-  }, m = S(() => {
-    const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = p();
-    let o = 0;
-    e && t && (o = 1 * (e.left - t.left + t.scrollLeft));
-    const n = {
+    return { tabsMeta: e, tabMeta: r, tabContentMeta: s };
+  }, p = _(() => {
+    const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = g();
+    let s = 0;
+    e && t && (s = 1 * (e.left - t.left + t.scrollLeft));
+    const o = {
       root: {
-        left: o,
+        left: s,
         width: e ? e.width : 0
       }
     };
-    if (d && r && (n.content = {
+    if (m && r && (o.content = {
       width: r.width
     }), isNaN(c.root.left) || isNaN(c.root.width))
-      h(n);
+      R(o);
     else {
-      const i = Math.abs(c.root.left - n.root.left), W = Math.abs(c.root.width - n.root.width);
-      (i >= 1 || W >= 1) && h(n);
+      const a = Math.abs(c.root.left - o.root.left), L = Math.abs(c.root.width - o.root.width);
+      (a >= 1 || L >= 1) && R(o);
     }
-  }), R = (t, { animation: e = !0 } = {}) => {
-    l.current && (e ? j(l.current, "scrollLeft", t, {
+  }), v = (t, { animation: e = !0 } = {}) => {
+    l.current && (e ? Q(l.current, "scrollLeft", t, {
       duration: 300
     }) : l.current.scrollLeft = t);
-  }, g = S((t) => {
-    const { tabsMeta: e, tabMeta: r } = p();
+  }, b = _(() => {
+    const t = l.current, e = t ? t.scrollWidth - t.clientWidth : 0, r = t && w ? { start: t.scrollLeft > 1, end: t.scrollLeft < e - 1 } : { start: !1, end: !1 };
+    q((s) => s.start === r.start && s.end === r.end ? s : r);
+  }), N = (t) => {
+    const e = l.current;
+    e && v(e.scrollLeft + t * e.clientWidth * U);
+  }, C = _((t) => {
+    const { tabsMeta: e, tabMeta: r } = g();
     if (!(!r || !e)) {
       if (r.left < e.left) {
-        const o = e.scrollLeft + (r.left - e.left);
-        R(o - w, { animation: t });
+        const s = e.scrollLeft + (r.left - e.left);
+        v(s - S, { animation: t });
       } else if (r.right > e.right) {
-        const o = e.scrollLeft + (r.right - e.right);
-        R(o + w, { animation: t });
+        const s = e.scrollLeft + (r.right - e.right);
+        v(s + S, { animation: t });
       }
     }
   });
-  s.useEffect(() => {
-    I(!0);
-  }, []), s.useEffect(() => {
-    m();
-  }), s.useEffect(() => {
-    var o, n;
-    const t = D(() => {
-      l.current && m();
+  n.useEffect(() => {
+    G(!0);
+  }, []), n.useEffect(() => {
+    p();
+  }), n.useEffect(() => {
+    var o, a;
+    const t = J(() => {
+      l.current && (p(), b());
     }, 166);
     if (!l.current || !l.current.ownerDocument.defaultView) {
       console.error("tabsRef.current.ownerDocument.defaultView is undefined");
@@ -93,45 +105,88 @@ const L = {
     }
     const e = l.current.ownerDocument.defaultView;
     e.addEventListener("resize", t);
-    let r;
-    return typeof ResizeObserver != "undefined" && (r = new ResizeObserver(t), Array.from((n = (o = a.current) == null ? void 0 : o.children) != null ? n : []).forEach((i) => {
-      r.observe(i);
-    })), () => {
-      t.cancel(), e.removeEventListener("resize", t), r && r.disconnect();
+    const r = l.current;
+    r.addEventListener("scroll", b, { passive: !0 });
+    let s;
+    return typeof ResizeObserver != "undefined" && (s = new ResizeObserver(t), s.observe(r), Array.from((a = (o = d.current) == null ? void 0 : o.children) != null ? a : []).forEach((L) => {
+      s.observe(L);
+    })), b(), () => {
+      t.cancel(), e.removeEventListener("resize", t), r.removeEventListener("scroll", b), s && s.disconnect();
     };
-  }, [m]), s.useEffect(() => {
-    g(L !== c);
-  }, [g, c]);
-  const V = s.Children.map(
-    _,
-    (t, e) => s.cloneElement(t, {
-      isActive: f === e,
+  }, [p, b]), n.useEffect(() => {
+    C(x !== c);
+  }, [C, c]);
+  const H = n.Children.map(
+    W,
+    (t, e) => n.cloneElement(t, {
+      isActive: u === e,
       onClick: (r) => {
-        E(r, e);
+        k(r, e);
       },
-      ...d && {
+      ...m && {
         contentRef: (r) => {
-          const { contentRef: o } = t.props;
-          b.current.push(r), o && O(o, r);
+          const { contentRef: s } = t.props;
+          h.current.push(r), s && K(s, r);
         }
       }
     })
-  );
-  return /* @__PURE__ */ u("div", { className: v("smwb-tabs", C), role: "tabpanel", ref: N, ...T, children: /* @__PURE__ */ B(
+  ), E = w && O && (f.start || f.end);
+  return /* @__PURE__ */ M(
     "div",
     {
-      className: v("smwb-tabs__scroller", {
-        "smwb-tabs__scroller--scrollable": y
-      }),
-      ref: l,
+      className: y(
+        "smwb-tabs",
+        {
+          "smwb-tabs--dense": A,
+          "smwb-tabs--overflow-start": f.start,
+          "smwb-tabs--overflow-end": f.end
+        },
+        T
+      ),
+      role: "tabpanel",
+      ref: I,
+      ...j,
       children: [
-        /* @__PURE__ */ u("div", { className: "smwb-tabs__scroll-area", ref: a, role: "tablist", "aria-label": z, children: V }),
-        x && /* @__PURE__ */ u("span", { className: "smwb-tabs__indicator", style: c.root, children: /* @__PURE__ */ u("span", { className: "smwb-tabs__indicator-content", style: c.content }) })
+        E && /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--start",
+            "aria-label": V,
+            disabled: !f.start,
+            onClick: () => N(-1),
+            children: /* @__PURE__ */ i(z, { name: "chevron_left", size: 20 })
+          }
+        ),
+        /* @__PURE__ */ M(
+          "div",
+          {
+            className: y("smwb-tabs__scroller", {
+              "smwb-tabs__scroller--scrollable": w
+            }),
+            ref: l,
+            children: [
+              /* @__PURE__ */ i("div", { className: "smwb-tabs__scroll-area", ref: d, role: "tablist", "aria-label": P, children: H }),
+              F && /* @__PURE__ */ i("span", { className: "smwb-tabs__indicator", style: c.root, children: /* @__PURE__ */ i("span", { className: "smwb-tabs__indicator-content", style: c.content }) })
+            ]
+          }
+        ),
+        E && /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            className: "smwb-tabs__scroll-button smwb-tabs__scroll-button--end",
+            "aria-label": D,
+            disabled: !f.end,
+            onClick: () => N(1),
+            children: /* @__PURE__ */ i(z, { name: "chevron_right", size: 20 })
+          }
+        )
       ]
     }
-  ) });
+  );
 });
 export {
-  Q as Tabs
+  ct as Tabs
 };
 //# sourceMappingURL=tabs.js.map