@ahrowe/ui 0.44.0 → 0.45.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @ahrowe/ui
 
+## 0.45.0
+
+### Minor Changes
+
+- d77399e: Removed `ButtonSize.Default`, which was the same size as `ButtonSize.Medium`; `Medium` is now the default for Button and SplitButton
+- c5e5b97: Stepper takes a `color` like the rest of the library; the six `--stepper-*` colour variables are removed, and upcoming steps use the theme's `--border-color` and `--text-dark`, which meet contrast in both built-in themes (see "Migration" in Stepper.md)
+- c5e5b97: `StepperStyleType.Default` is now `StepperStyleType.Filled`, the name the other components use for the same look
+- c5e5b97: Stepper's `hideLabels` hides the text visually only, so screen readers still read it, and no longer hides vertical step `content`
+- c5e5b97: Stepper takes `labels` for its "Optional" hint and its screen-reader statuses, and its props can be set app-wide through `ConfigProvider`
+- c5e5b97: Stepper: `alignment` and `StepperAlignment` are now `orientation` and `StepperOrientation`, as on ButtonGroup, RadioGroup and Divider, and the `'horizontal'`/`'vertical'` strings are gone
+
+### Patch Changes
+
+- c5e5b97: Stepper is an ordered list that reads out each step's status, clickable steps are real buttons with a focus ring that keep focus once activated, and a collapsed step body can no longer be tabbed into
+- c5e5b97: Text in a vertical Stepper's step content can be selected again, and the checkmark scales with `--stepper-marker-size`
+- c5e5b97: Fixed horizontal Stepper labels spilling past the stepper's edges and overlapping the content below it: every step now takes an equal column and its label wraps within it
+
 ## 0.44.0
 
 ### Minor Changes

package/README.md

@@ -182,7 +182,7 @@ runs where `@ahrowe/ui` is installed.
 | `Skeleton`, `SkeletonVariant`, `SkeletonAnimation` | Content-shaped loading placeholder, shown while real content is being fetched — more polished than a Loader for content-heavy pages (lists, cards, profile headers) |
 | `Slider` | Let the user pick a number from a continuous or stepped range by dragging a thumb: volume, brightness, price ranges, zoom, quality presets |
 | `SplitButton` | A primary action button with a small attached dropdown for closely related secondary actions, e.g. "Save ▾" opening "Save as draft" / "Save and close" |
-| `Stepper` | Step progress indicator for multi-step forms, onboarding flows, and checkout wizards |
+| `Stepper`, `StepperOrientation`, `StepperStyleType`, `StepperCollapse`, `StepperLabelPlacement`, `ThemeColor` | Step progress indicator for multi-step forms, onboarding flows, and checkout wizards |
 | `Sticky` | Pin a piece of content to the top of the viewport once the page scrolls past it — section headers, toolbars, filter bars, table headers |
 | `Switch` | Sliding boolean toggle — settings panels, feature flags, preference lists |
 | `TabHeader` | A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages |

package/dist/cjs-types/common/button/button.types.d.ts

@@ -14,8 +14,8 @@ export declare enum ButtonStyleType {
     Plain = "plain"
 }
 export declare enum ButtonSize {
-    Default = "default",
     Small = "small",
+    /** The default. */
     Medium = "medium",
     Large = "large",
     /** Square, padding-free button for a lone icon. Give it its own width/height. */

package/dist/cjs-types/common/configProvider/configProvider.types.d.ts

@@ -48,6 +48,7 @@ import { RoomDrawerProps } from '../roomDrawer/roomDrawer.types.js';
 import { RoomViewerProps } from '../roomViewer/roomViewer.types.js';
 import { PopoverProps } from '../popover/popover.types.js';
 import { ModalProps } from '../modal/modal.types.js';
+import { StepperProps } from '../stepper/stepper.types.js';
 import { Presentation } from '../configProvider/presentation.types.js';
 /**
  * Global default props keyed by component name.
@@ -131,6 +132,7 @@ export interface ComponentDefaults {
     Modal?: Partial<ModalProps>;
     CommandPalette?: Partial<CommandPaletteProps>;
     WeatherIcon?: Partial<WeatherIconProps>;
+    Stepper?: Partial<StepperProps>;
 }
 export interface ConfigProviderProps {
     children: React.ReactNode;

package/dist/cjs-types/common/stepper/stepper.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { StepperProps } from './stepper.types.js';
-export default function Stepper({ steps, currentStep, alignment, onStepClicked, nonLinear, hideLabels, styleType, collapse, labelPlacement, className, style, classNames, styles: slotStyles, ...rest }: StepperProps): React.JSX.Element;
+export default function Stepper(props: StepperProps): React.JSX.Element;

package/dist/cjs-types/common/stepper/stepper.types.d.ts

@@ -1,16 +1,17 @@
 import { default as React } from 'react';
 import { IconContent } from '../types/icon.types.js';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
-/** Layout direction of the stepper. */
-export declare enum StepperAlignment {
+import { ColorValue } from '../themeProvider/color.types.js';
+/** Direction the steps run in. */
+export declare enum StepperOrientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
-/** Visual preset for the step markers and connectors. */
+/** How the step markers are drawn. */
 export declare enum StepperStyleType {
-    /** Numbered markers, filled solid on completion (the default look). */
-    Default = "default",
-    /** Numbered markers that stay ringed when completed (a coloured check, no solid fill). */
+    /** Numbered markers, filled solid on completion. The default. */
+    Filled = "filled",
+    /** Numbered markers that stay ringed when completed, with a check in the colour. */
     Outlined = "outlined",
     /** Minimal dots without numbers, for a compact onboarding or carousel style. */
     Dots = "dots"
@@ -39,6 +40,16 @@ export declare enum StepperLabelPlacement {
     Right = "right"
 }
 export type StepperSlots = 'root' | 'entry' | 'entryNumber' | 'entryLabel' | 'connector' | 'description' | 'content' | 'optional' | 'icon';
+export interface StepperLabels {
+    /** Hint under the label of a step with `optional: true`. */
+    optional?: string;
+    /** Status of a completed step, read out by screen readers. */
+    completed?: string;
+    /** Status of a step not reached yet, read out by screen readers. */
+    notCompleted?: string;
+    /** Status of a step with `error`, read out by screen readers. */
+    error?: string;
+}
 export interface StepperStep {
     /** Primary label for the step. */
     label: React.ReactNode;
@@ -48,28 +59,33 @@ export interface StepperStep {
     content?: React.ReactNode;
     /** Icon shown in the marker instead of the step number — a FontAwesome icon or any node. */
     icon?: IconContent;
-    /** Marks the step as errored, recolouring the marker with `--stepper-error-color`. */
+    /** Marks the step as errored, drawing its marker in the theme's `--error-color`. */
     error?: boolean;
-    /** `true` renders an "Optional" hint; a node renders custom hint text. */
+    /** `true` renders the `optional` label as a hint; a node renders custom hint text. */
     optional?: boolean | React.ReactNode;
     /** Disables this step: never clickable, dimmed. */
     disabled?: boolean;
 }
-export interface StepperProps extends HtmlProps {
+export interface StepperProps extends HtmlProps<HTMLOListElement> {
     steps?: StepperStep[];
+    /** Zero-based index of the current step. `steps.length` marks every step completed. */
     currentStep?: number;
-    alignment?: StepperAlignment | 'horizontal' | 'vertical';
+    /** Direction the steps run in (default `Horizontal`). */
+    orientation?: StepperOrientation;
     onStepClicked?: ((index: number) => void) | null;
     /** Allow clicking any step, not just completed ones. */
     nonLinear?: boolean;
-    /** Hide the label text (and description) beneath each step entry. */
+    /** Hide each step's label, description and hint visually. Screen readers still read them. */
     hideLabels?: boolean;
-    /** Visual preset for markers and connectors (default `Default`). */
+    /** How the markers are drawn (default `Filled`). */
     styleType?: StepperStyleType;
+    /** A `ThemeColor` (default `Primary`) or any CSS colour, such as `'var(--brand)'`. */
+    color?: ColorValue;
     /** Which step bodies are expanded. Vertical `content` only (default `None`). */
     collapse?: StepperCollapse;
     /** Label position relative to the marker (default: horizontal `Bottom`, vertical `Right`). */
     labelPlacement?: StepperLabelPlacement;
+    labels?: StepperLabels;
     className?: string;
     style?: React.CSSProperties;
     classNames?: SlotClassNames<StepperSlots>;

package/dist/cjs-types/common/themeProvider/theme.types.d.ts

@@ -125,24 +125,12 @@ export interface ThemeVariables {
     '--stepper-marker-size'?: string;
     /** Step marker corner radius. Falls back to --default-border-radius. */
     '--stepper-marker-radius'?: string;
-    /** Idle (upcoming) marker/connector colour. Falls back to --primary-lighter. */
-    '--stepper-idle-color'?: string;
-    /** Current-step marker colour. Falls back to --primary-color. */
-    '--stepper-active-color'?: string;
-    /** Completed-step marker fill/colour. Falls back to --primary-color. */
-    '--stepper-done-color'?: string;
-    /** Errored-step marker colour. Falls back to --error-color. */
-    '--stepper-error-color'?: string;
-    /** Completed connector colour. Falls back to --primary-color. */
-    '--stepper-connector-color'?: string;
     /** Completed connector thickness. Falls back to 3px. */
     '--stepper-connector-thickness'?: string;
     /** Not-yet-reached connector thickness. Falls back to 1px. */
     '--stepper-connector-idle-thickness'?: string;
     /** Gap between marker and label, and grid column gap. Falls back to 12px. */
     '--stepper-gap'?: string;
-    /** Text/check colour on a filled marker. Falls back to --text-on-primary. */
-    '--stepper-text-on-marker'?: string;
     /** Timer ring track (unfilled) colour. Falls back to --background-accent-light. */
     '--timer-track-color'?: string;
     /** Timer ring progress (remaining time) colour. Falls back to --primary-color. */

package/dist/esm/common/button/button.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{ThemeColor as t}from"../themeProvider/color.types.mjs";import{toneProps as n,useToneCheck as r}from"../styles/tone.mjs";import i from"./button.module.mjs";import a from"../loader/loader.mjs";import{ButtonSize as o,ButtonStyleType as s,ButtonType as c}from"./button.types.mjs";import l from"../ripple/ripple.mjs";import{renderIcon as u}from"../utils/renderIcon.mjs";import{useRef as d}from"react";import f from"classnames";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h={filled:i.buttonStyleFilled,light:i.buttonStyleLight,outlined:i.buttonStyleOutlined,plain:i.buttonStylePlain},g={default:i.buttonSizeDefault,small:i.buttonSizeSmall,medium:i.buttonSizeMedium,large:i.buttonSizeLarge,icon:i.buttonSizeIcon},_=`color-mix(in srgb, currentcolor 20%, transparent)`;function v(v){let{className:y,style:b,type:x=c.Button,styleType:S=s.Outlined,color:C=t.Primary,size:w=o.Default,onClick:T=()=>{},children:E,icon:D,isLoading:O=!1,disabled:k=!1,title:A=void 0,ref:j,classNames:M,styles:N,...P}=e(`Button`,v),F=d(null),I=n(C);r(`Button`,[C]);function L(e){return e.detail===0&&F.current?.addRipple(),T(e)}return p(`button`,{...P,className:f(i.button,h[S],I.className,g[w],{[i.buttonNotAllowed]:O||k,[i.buttonDisabled]:k},y),style:{...I.style,...b},type:x,onClick:L,disabled:k||O,title:A,ref:j,children:p(l,{ref:F,className:i.buttonRipple,disabled:O||k,rippleBackground:_,children:p(`div`,{className:f(i.buttonBackground,M?.background),style:N?.background,children:m(`div`,{className:f(i.buttonContent,M?.content),style:N?.content,children:[O?p(`div`,{className:f(i.buttonLoadingContainer,M?.loadingContainer),style:N?.loadingContainer,children:p(a,{size:`1.2em`,color:t.Neutral})}):null,m(`div`,{className:f(M?.label,{[i.buttonLoading]:O,[i.buttonWithIcon]:!!D}),style:N?.label,children:[D?u(D):null,E]})]})})})})}v.StyleType=s,v.Size=o,v.Type=c;export{v as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{ThemeColor as t}from"../themeProvider/color.types.mjs";import{toneProps as n,useToneCheck as r}from"../styles/tone.mjs";import i from"./button.module.mjs";import a from"../loader/loader.mjs";import{ButtonSize as o,ButtonStyleType as s,ButtonType as c}from"./button.types.mjs";import l from"../ripple/ripple.mjs";import{renderIcon as u}from"../utils/renderIcon.mjs";import{useRef as d}from"react";import f from"classnames";import{jsx as p,jsxs as m}from"react/jsx-runtime";var h={filled:i.buttonStyleFilled,light:i.buttonStyleLight,outlined:i.buttonStyleOutlined,plain:i.buttonStylePlain},g={small:i.buttonSizeSmall,medium:i.buttonSizeMedium,large:i.buttonSizeLarge,icon:i.buttonSizeIcon},_=`color-mix(in srgb, currentcolor 20%, transparent)`;function v(v){let{className:y,style:b,type:x=c.Button,styleType:S=s.Outlined,color:C=t.Primary,size:w=o.Medium,onClick:T=()=>{},children:E,icon:D,isLoading:O=!1,disabled:k=!1,title:A=void 0,ref:j,classNames:M,styles:N,...P}=e(`Button`,v),F=d(null),I=n(C);r(`Button`,[C]);function L(e){return e.detail===0&&F.current?.addRipple(),T(e)}return p(`button`,{...P,className:f(i.button,h[S],I.className,g[w],{[i.buttonNotAllowed]:O||k,[i.buttonDisabled]:k},y),style:{...I.style,...b},type:x,onClick:L,disabled:k||O,title:A,ref:j,children:p(l,{ref:F,className:i.buttonRipple,disabled:O||k,rippleBackground:_,children:p(`div`,{className:f(i.buttonBackground,M?.background),style:N?.background,children:m(`div`,{className:f(i.buttonContent,M?.content),style:N?.content,children:[O?p(`div`,{className:f(i.buttonLoadingContainer,M?.loadingContainer),style:N?.loadingContainer,children:p(a,{size:`1.2em`,color:t.Neutral})}):null,m(`div`,{className:f(M?.label,{[i.buttonLoading]:O,[i.buttonWithIcon]:!!D}),style:N?.label,children:[D?u(D):null,E]})]})})})})}v.StyleType=s,v.Size=o,v.Type=c;export{v as default};
 //# sourceMappingURL=button.mjs.map

package/dist/esm/common/button/button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.mjs","names":[],"sources":["../../../../package/common/button/button.tsx"],"sourcesContent":["import cx from 'classnames';\nimport { useRef, type ReactElement } from 'react';\n\nimport styles from './button.module.pcss';\nimport Loader from '../loader';\nimport { ButtonStyleType, ButtonSize, ButtonType } from './button.types';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport type { ButtonProps } from './button.types';\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport { useComponentDefaults } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nconst CLASS_BY_STYLE: Record<ButtonStyleType, string> = {\n  filled: styles.buttonStyleFilled,\n  light: styles.buttonStyleLight,\n  outlined: styles.buttonStyleOutlined,\n  plain: styles.buttonStylePlain,\n};\n\nconst CLASS_BY_SIZE: Record<ButtonSize, string> = {\n  default: styles.buttonSizeDefault,\n  small: styles.buttonSizeSmall,\n  medium: styles.buttonSizeMedium,\n  large: styles.buttonSizeLarge,\n  icon: styles.buttonSizeIcon,\n};\n\n// Ripple's own default is white, which vanishes on a transparent button over a light page.\nconst RIPPLE_BACKGROUND = 'color-mix(in srgb, currentcolor 20%, transparent)';\n\nfunction Button(props: ButtonProps): ReactElement {\n  const {\n    className,\n    style,\n    type = ButtonType.Button,\n    styleType = ButtonStyleType.Outlined,\n    color = ThemeColor.Primary,\n    size = ButtonSize.Default,\n    onClick = (): void => {},\n    children,\n    icon,\n    isLoading = false,\n    disabled = false,\n    title = undefined,\n    ref,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Button', props);\n\n  const rippleRef = useRef<RippleHandle>(null);\n  const tone = toneProps(color);\n  useToneCheck('Button', [color]);\n\n  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n    if (event.detail === 0) rippleRef.current?.addRipple();\n    return onClick(event);\n  }\n\n  return (\n    <button\n      {...rest}\n      className={cx(\n        styles.button,\n        CLASS_BY_STYLE[styleType],\n        tone.className,\n        CLASS_BY_SIZE[size],\n        {\n          [styles.buttonNotAllowed]: isLoading || disabled,\n          [styles.buttonDisabled]: disabled,\n        },\n        className,\n      )}\n      style={{ ...tone.style, ...style }}\n      type={type}\n      onClick={handleClick}\n      disabled={disabled || isLoading}\n      title={title}\n      ref={ref}\n    >\n      <Ripple\n        ref={rippleRef}\n        className={styles.buttonRipple}\n        disabled={isLoading || disabled}\n        rippleBackground={RIPPLE_BACKGROUND}\n      >\n        <div className={cx(styles.buttonBackground, classNames?.background)} style={slotStyles?.background}>\n          <div className={cx(styles.buttonContent, classNames?.content)} style={slotStyles?.content}>\n            {isLoading ? (\n              <div\n                className={cx(styles.buttonLoadingContainer, classNames?.loadingContainer)}\n                style={slotStyles?.loadingContainer}\n              >\n                <Loader size='1.2em' color={ThemeColor.Neutral} />\n              </div>\n            ) : null}\n            <div\n              className={cx(classNames?.label, {\n                [styles.buttonLoading]: isLoading,\n                [styles.buttonWithIcon]: !!icon,\n              })}\n              style={slotStyles?.label}\n            >\n              {icon ? renderIcon(icon) : null}\n              {children}\n            </div>\n          </div>\n        </div>\n      </Ripple>\n    </button>\n  );\n}\n\nButton.StyleType = ButtonStyleType;\nButton.Size = ButtonSize;\nButton.Type = ButtonType;\n\nexport default Button;\n"],"mappings":"8jBAcA,IAAM,EAAkD,CACtD,OAAQ,EAAO,kBACf,MAAO,EAAO,iBACd,SAAU,EAAO,oBACjB,MAAO,EAAO,gBAChB,EAEM,EAA4C,CAChD,QAAS,EAAO,kBAChB,MAAO,EAAO,gBACd,OAAQ,EAAO,iBACf,MAAO,EAAO,gBACd,KAAM,EAAO,cACf,EAGM,EAAoB,oDAE1B,SAAS,EAAO,EAAkC,CAChD,GAAM,CACJ,YACA,QACA,OAAO,EAAW,OAClB,YAAY,EAAgB,SAC5B,QAAQ,EAAW,QACnB,OAAO,EAAW,QAClB,cAAsB,CAAC,EACvB,WACA,OACA,YAAY,GACZ,WAAW,GACX,QAAQ,IAAA,GACR,MACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,SAAU,CAAK,EAElC,EAAY,EAAqB,IAAI,EACrC,EAAO,EAAU,CAAK,EAC5B,EAAa,SAAU,CAAC,CAAK,CAAC,EAE9B,SAAS,EAAY,EAA4C,CAE/D,OADI,EAAM,SAAW,GAAG,EAAU,SAAS,UAAU,EAC9C,EAAQ,CAAK,CACtB,CAEA,OACE,EAAC,SAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,OACP,EAAe,GACf,EAAK,UACL,EAAc,GACd,EACG,EAAO,kBAAmB,GAAa,GACvC,EAAO,gBAAiB,CAC3B,EACA,CACF,EACA,MAAO,CAAE,GAAG,EAAK,MAAO,GAAG,CAAM,EAC3B,OACN,QAAS,EACT,SAAU,GAAY,EACf,QACF,MAEL,SAAA,EAAC,EAAD,CACE,IAAK,EACL,UAAW,EAAO,aAClB,SAAU,GAAa,EACvB,iBAAkB,EAElB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,UAAU,EAAG,MAAO,GAAY,WACtF,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,cAAe,GAAY,OAAO,EAAG,MAAO,GAAY,QAAlF,SAAA,CACG,EACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,uBAAwB,GAAY,gBAAgB,EACzE,MAAO,GAAY,iBAEnB,SAAA,EAAC,EAAD,CAAQ,KAAK,QAAQ,MAAO,EAAW,OAAU,CAAA,CAC9C,CAAA,EACH,KACJ,EAAC,MAAD,CACE,UAAW,EAAG,GAAY,MAAO,EAC9B,EAAO,eAAgB,GACvB,EAAO,gBAAiB,CAAC,CAAC,CAC7B,CAAC,EACD,MAAO,GAAY,MALrB,SAAA,CAOG,EAAO,EAAW,CAAI,EAAI,KAC1B,CACE,CACF,CAAA,CAAA,GACF,CAAA,CACC,CAAA,CACF,CAAA,CAEZ,CAEA,EAAO,UAAY,EACnB,EAAO,KAAO,EACd,EAAO,KAAO"}
+{"version":3,"file":"button.mjs","names":[],"sources":["../../../../package/common/button/button.tsx"],"sourcesContent":["import cx from 'classnames';\nimport { useRef, type ReactElement } from 'react';\n\nimport styles from './button.module.pcss';\nimport Loader from '../loader';\nimport { ButtonStyleType, ButtonSize, ButtonType } from './button.types';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport type { ButtonProps } from './button.types';\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport { useComponentDefaults } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nconst CLASS_BY_STYLE: Record<ButtonStyleType, string> = {\n  filled: styles.buttonStyleFilled,\n  light: styles.buttonStyleLight,\n  outlined: styles.buttonStyleOutlined,\n  plain: styles.buttonStylePlain,\n};\n\nconst CLASS_BY_SIZE: Record<ButtonSize, string> = {\n  small: styles.buttonSizeSmall,\n  medium: styles.buttonSizeMedium,\n  large: styles.buttonSizeLarge,\n  icon: styles.buttonSizeIcon,\n};\n\n// Ripple's own default is white, which vanishes on a transparent button over a light page.\nconst RIPPLE_BACKGROUND = 'color-mix(in srgb, currentcolor 20%, transparent)';\n\nfunction Button(props: ButtonProps): ReactElement {\n  const {\n    className,\n    style,\n    type = ButtonType.Button,\n    styleType = ButtonStyleType.Outlined,\n    color = ThemeColor.Primary,\n    size = ButtonSize.Medium,\n    onClick = (): void => {},\n    children,\n    icon,\n    isLoading = false,\n    disabled = false,\n    title = undefined,\n    ref,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Button', props);\n\n  const rippleRef = useRef<RippleHandle>(null);\n  const tone = toneProps(color);\n  useToneCheck('Button', [color]);\n\n  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n    if (event.detail === 0) rippleRef.current?.addRipple();\n    return onClick(event);\n  }\n\n  return (\n    <button\n      {...rest}\n      className={cx(\n        styles.button,\n        CLASS_BY_STYLE[styleType],\n        tone.className,\n        CLASS_BY_SIZE[size],\n        {\n          [styles.buttonNotAllowed]: isLoading || disabled,\n          [styles.buttonDisabled]: disabled,\n        },\n        className,\n      )}\n      style={{ ...tone.style, ...style }}\n      type={type}\n      onClick={handleClick}\n      disabled={disabled || isLoading}\n      title={title}\n      ref={ref}\n    >\n      <Ripple\n        ref={rippleRef}\n        className={styles.buttonRipple}\n        disabled={isLoading || disabled}\n        rippleBackground={RIPPLE_BACKGROUND}\n      >\n        <div className={cx(styles.buttonBackground, classNames?.background)} style={slotStyles?.background}>\n          <div className={cx(styles.buttonContent, classNames?.content)} style={slotStyles?.content}>\n            {isLoading ? (\n              <div\n                className={cx(styles.buttonLoadingContainer, classNames?.loadingContainer)}\n                style={slotStyles?.loadingContainer}\n              >\n                <Loader size='1.2em' color={ThemeColor.Neutral} />\n              </div>\n            ) : null}\n            <div\n              className={cx(classNames?.label, {\n                [styles.buttonLoading]: isLoading,\n                [styles.buttonWithIcon]: !!icon,\n              })}\n              style={slotStyles?.label}\n            >\n              {icon ? renderIcon(icon) : null}\n              {children}\n            </div>\n          </div>\n        </div>\n      </Ripple>\n    </button>\n  );\n}\n\nButton.StyleType = ButtonStyleType;\nButton.Size = ButtonSize;\nButton.Type = ButtonType;\n\nexport default Button;\n"],"mappings":"8jBAcA,IAAM,EAAkD,CACtD,OAAQ,EAAO,kBACf,MAAO,EAAO,iBACd,SAAU,EAAO,oBACjB,MAAO,EAAO,gBAChB,EAEM,EAA4C,CAChD,MAAO,EAAO,gBACd,OAAQ,EAAO,iBACf,MAAO,EAAO,gBACd,KAAM,EAAO,cACf,EAGM,EAAoB,oDAE1B,SAAS,EAAO,EAAkC,CAChD,GAAM,CACJ,YACA,QACA,OAAO,EAAW,OAClB,YAAY,EAAgB,SAC5B,QAAQ,EAAW,QACnB,OAAO,EAAW,OAClB,cAAsB,CAAC,EACvB,WACA,OACA,YAAY,GACZ,WAAW,GACX,QAAQ,IAAA,GACR,MACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,SAAU,CAAK,EAElC,EAAY,EAAqB,IAAI,EACrC,EAAO,EAAU,CAAK,EAC5B,EAAa,SAAU,CAAC,CAAK,CAAC,EAE9B,SAAS,EAAY,EAA4C,CAE/D,OADI,EAAM,SAAW,GAAG,EAAU,SAAS,UAAU,EAC9C,EAAQ,CAAK,CACtB,CAEA,OACE,EAAC,SAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,OACP,EAAe,GACf,EAAK,UACL,EAAc,GACd,EACG,EAAO,kBAAmB,GAAa,GACvC,EAAO,gBAAiB,CAC3B,EACA,CACF,EACA,MAAO,CAAE,GAAG,EAAK,MAAO,GAAG,CAAM,EAC3B,OACN,QAAS,EACT,SAAU,GAAY,EACf,QACF,MAEL,SAAA,EAAC,EAAD,CACE,IAAK,EACL,UAAW,EAAO,aAClB,SAAU,GAAa,EACvB,iBAAkB,EAElB,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,UAAU,EAAG,MAAO,GAAY,WACtF,SAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,cAAe,GAAY,OAAO,EAAG,MAAO,GAAY,QAAlF,SAAA,CACG,EACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,uBAAwB,GAAY,gBAAgB,EACzE,MAAO,GAAY,iBAEnB,SAAA,EAAC,EAAD,CAAQ,KAAK,QAAQ,MAAO,EAAW,OAAU,CAAA,CAC9C,CAAA,EACH,KACJ,EAAC,MAAD,CACE,UAAW,EAAG,GAAY,MAAO,EAC9B,EAAO,eAAgB,GACvB,EAAO,gBAAiB,CAAC,CAAC,CAC7B,CAAC,EACD,MAAO,GAAY,MALrB,SAAA,CAOG,EAAO,EAAW,CAAI,EAAI,KAC1B,CACE,CACF,CAAA,CAAA,GACF,CAAA,CACC,CAAA,CACF,CAAA,CAEZ,CAEA,EAAO,UAAY,EACnB,EAAO,KAAO,EACd,EAAO,KAAO"}

package/dist/esm/common/button/button.module.mjs

@@ -1,2 +1,2 @@
-"use client";var e=`button_wYLPJ`,t=`button-notAllowed_xGT-E`,n=`button-disabled_XDm5w`,r=`button-content_Q-0-4`,i=`button-loading_TY6y7`,a=`button-loading-container_pMSta`,o=`button-withIcon_IXEKA`,s=`button-style-filled_gsaJ4`,c=`button-style-light_HBi34`,l=`button-style-outlined_OSfMq`,u=`button-style-plain_CUtTy`,d=`button-background_9Vfo5`,f=`button-size-default_N4HG9`,p=`button-size-small_mn6jE`,m=`button-size-medium_gNVDM`,h=`button-size-large_xSIcS`,g=`button-size-icon_pkqwl`,_=`button-ripple_UGtt8`,v={button:e,"button-notAllowed":`button-notAllowed_xGT-E`,buttonNotAllowed:t,"button-disabled":`button-disabled_XDm5w`,buttonDisabled:n,"button-content":`button-content_Q-0-4`,buttonContent:r,"button-loading":`button-loading_TY6y7`,buttonLoading:i,"button-loading-container":`button-loading-container_pMSta`,buttonLoadingContainer:a,"button-withIcon":`button-withIcon_IXEKA`,buttonWithIcon:o,"button-style-filled":`button-style-filled_gsaJ4`,buttonStyleFilled:s,"button-style-light":`button-style-light_HBi34`,buttonStyleLight:c,"button-style-outlined":`button-style-outlined_OSfMq`,buttonStyleOutlined:l,"button-style-plain":`button-style-plain_CUtTy`,buttonStylePlain:u,"button-background":`button-background_9Vfo5`,buttonBackground:d,"button-size-default":`button-size-default_N4HG9`,buttonSizeDefault:f,"button-size-small":`button-size-small_mn6jE`,buttonSizeSmall:p,"button-size-medium":`button-size-medium_gNVDM`,buttonSizeMedium:m,"button-size-large":`button-size-large_xSIcS`,buttonSizeLarge:h,"button-size-icon":`button-size-icon_pkqwl`,buttonSizeIcon:g,"button-ripple":`button-ripple_UGtt8`,buttonRipple:_};export{e as button,d as buttonBackground,r as buttonContent,n as buttonDisabled,i as buttonLoading,a as buttonLoadingContainer,t as buttonNotAllowed,_ as buttonRipple,f as buttonSizeDefault,g as buttonSizeIcon,h as buttonSizeLarge,m as buttonSizeMedium,p as buttonSizeSmall,s as buttonStyleFilled,c as buttonStyleLight,l as buttonStyleOutlined,u as buttonStylePlain,o as buttonWithIcon,v as default};
+"use client";var e=`button_wYLPJ`,t=`button-notAllowed_xGT-E`,n=`button-disabled_XDm5w`,r=`button-content_Q-0-4`,i=`button-loading_TY6y7`,a=`button-loading-container_pMSta`,o=`button-withIcon_IXEKA`,s=`button-style-filled_gsaJ4`,c=`button-style-light_HBi34`,l=`button-style-outlined_OSfMq`,u=`button-style-plain_CUtTy`,d=`button-background_9Vfo5`,f=`button-size-small_mn6jE`,p=`button-size-medium_gNVDM`,m=`button-size-large_xSIcS`,h=`button-size-icon_pkqwl`,g=`button-ripple_UGtt8`,_={button:e,"button-notAllowed":`button-notAllowed_xGT-E`,buttonNotAllowed:t,"button-disabled":`button-disabled_XDm5w`,buttonDisabled:n,"button-content":`button-content_Q-0-4`,buttonContent:r,"button-loading":`button-loading_TY6y7`,buttonLoading:i,"button-loading-container":`button-loading-container_pMSta`,buttonLoadingContainer:a,"button-withIcon":`button-withIcon_IXEKA`,buttonWithIcon:o,"button-style-filled":`button-style-filled_gsaJ4`,buttonStyleFilled:s,"button-style-light":`button-style-light_HBi34`,buttonStyleLight:c,"button-style-outlined":`button-style-outlined_OSfMq`,buttonStyleOutlined:l,"button-style-plain":`button-style-plain_CUtTy`,buttonStylePlain:u,"button-background":`button-background_9Vfo5`,buttonBackground:d,"button-size-small":`button-size-small_mn6jE`,buttonSizeSmall:f,"button-size-medium":`button-size-medium_gNVDM`,buttonSizeMedium:p,"button-size-large":`button-size-large_xSIcS`,buttonSizeLarge:m,"button-size-icon":`button-size-icon_pkqwl`,buttonSizeIcon:h,"button-ripple":`button-ripple_UGtt8`,buttonRipple:g};export{e as button,d as buttonBackground,r as buttonContent,n as buttonDisabled,i as buttonLoading,a as buttonLoadingContainer,t as buttonNotAllowed,g as buttonRipple,h as buttonSizeIcon,m as buttonSizeLarge,p as buttonSizeMedium,f as buttonSizeSmall,s as buttonStyleFilled,c as buttonStyleLight,l as buttonStyleOutlined,u as buttonStylePlain,o as buttonWithIcon,_ as default};
 //# sourceMappingURL=button.module.mjs.map

package/dist/esm/common/button/button.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.module.mjs","names":[],"sources":["../../../../package/common/button/button.module.pcss"],"sourcesContent":[".button {\n  appearance: none;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  font-size: var(--default-font-size);\n  background: transparent;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: var(--default-font);\n  border-radius: var(--default-border-radius);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  overflow: hidden;\n  min-width: min-content;\n\n  /* Hover and press layer in currentcolor, so one rule fits every style. On the root, which a\n     stretched button's inner element would not fill; under the Ripple wrapper, which comes later. */\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity 0.15s;\n    pointer-events: none;\n  }\n\n  &-notAllowed {\n    cursor: not-allowed;\n  }\n\n  /* Disabled only, not loading: a faded spinner would read as disabled rather than working. */\n  &-disabled {\n    opacity: 0.5;\n  }\n\n  /* Inside the edge: outside, a ButtonGroup neighbour with the same fill swallows the ring. A\n     Filled button draws it in its text colour instead, as Pagination's active item does. */\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: -4px;\n  }\n\n  /* (hover: hover) because on touch a tap latches :hover until the next tap elsewhere. */\n  @media (hover: hover) {\n    &:hover:not(:disabled)::before {\n      opacity: 0.08;\n    }\n  }\n\n  /* After the hover rule, which it ties on specificity: a press is a hover too. */\n  &:active:not(:disabled)::before {\n    opacity: 0.16;\n  }\n\n  &-content {\n    position: relative;\n    white-space: break-spaces;\n  }\n\n  &-loading {\n    visibility: hidden;\n\n    &-container {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  &-withIcon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5em;\n  }\n\n  &-style {\n    &-filled {\n      background: var(--tone-fill);\n\n      /* Must follow the shorthand above, which resets background-image. */\n      background-image: var(--tone-gradient);\n      color: var(--tone-contrast);\n\n      /* After the base :focus-visible rule, which it ties on specificity. */\n      &:focus-visible {\n        outline-color: currentcolor;\n      }\n    }\n\n    &-light {\n      background: var(--tone-light);\n      color: var(--tone-text);\n    }\n\n    &-outlined {\n      color: var(--tone-text);\n      border-color: var(--tone-outline);\n    }\n\n    &-plain {\n      color: var(--tone-text);\n    }\n  }\n\n  &-background {\n    display: block;\n    padding: 0.5em 0.75em;\n  }\n\n  /* Multiples of the theme's base, not em: an em on font-size resolves against the parent,\n     so these would follow whatever the button sits in rather than the theme. */\n  &-size {\n    &-default {\n      font-size: var(--default-font-size);\n    }\n\n    &-small {\n      font-size: calc(var(--default-font-size) * 0.75);\n    }\n\n    &-medium {\n      /* Medium button is same as default for now */\n      font-size: var(--default-font-size);\n    }\n\n    &-large {\n      font-size: calc(var(--default-font-size) * 1.25);\n    }\n\n    /* Square, padding-free button for a lone icon; the caller sets the box size. */\n    &-icon {\n      display: inline-flex;\n\n      /* Inherits, unlike the other sizes: a hardcoded px value would have to be out-specified\n         from another stylesheet, a specificity tie decided only by bundle order. */\n      font-size: inherit;\n\n      .button-ripple,\n      .button-background,\n      .button-content {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        padding: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"button.module.mjs","names":[],"sources":["../../../../package/common/button/button.module.pcss"],"sourcesContent":[".button {\n  appearance: none;\n  -webkit-appearance: none;\n  box-sizing: border-box;\n  font-size: var(--default-font-size);\n  background: transparent;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: var(--default-font);\n  border-radius: var(--default-border-radius);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  overflow: hidden;\n  min-width: min-content;\n\n  /* Hover and press layer in currentcolor, so one rule fits every style. On the root, which a\n     stretched button's inner element would not fill; under the Ripple wrapper, which comes later. */\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: currentcolor;\n    opacity: 0;\n    transition: opacity 0.15s;\n    pointer-events: none;\n  }\n\n  &-notAllowed {\n    cursor: not-allowed;\n  }\n\n  /* Disabled only, not loading: a faded spinner would read as disabled rather than working. */\n  &-disabled {\n    opacity: 0.5;\n  }\n\n  /* Inside the edge: outside, a ButtonGroup neighbour with the same fill swallows the ring. A\n     Filled button draws it in its text colour instead, as Pagination's active item does. */\n  &:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: -4px;\n  }\n\n  /* (hover: hover) because on touch a tap latches :hover until the next tap elsewhere. */\n  @media (hover: hover) {\n    &:hover:not(:disabled)::before {\n      opacity: 0.08;\n    }\n  }\n\n  /* After the hover rule, which it ties on specificity: a press is a hover too. */\n  &:active:not(:disabled)::before {\n    opacity: 0.16;\n  }\n\n  &-content {\n    position: relative;\n    white-space: break-spaces;\n  }\n\n  &-loading {\n    visibility: hidden;\n\n    &-container {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  &-withIcon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5em;\n  }\n\n  &-style {\n    &-filled {\n      background: var(--tone-fill);\n\n      /* Must follow the shorthand above, which resets background-image. */\n      background-image: var(--tone-gradient);\n      color: var(--tone-contrast);\n\n      /* After the base :focus-visible rule, which it ties on specificity. */\n      &:focus-visible {\n        outline-color: currentcolor;\n      }\n    }\n\n    &-light {\n      background: var(--tone-light);\n      color: var(--tone-text);\n    }\n\n    &-outlined {\n      color: var(--tone-text);\n      border-color: var(--tone-outline);\n    }\n\n    &-plain {\n      color: var(--tone-text);\n    }\n  }\n\n  &-background {\n    display: block;\n    padding: 0.5em 0.75em;\n  }\n\n  /* Multiples of the theme's base, not em: an em on font-size resolves against the parent,\n     so these would follow whatever the button sits in rather than the theme. */\n  &-size {\n    &-small {\n      font-size: calc(var(--default-font-size) * 0.75);\n    }\n\n    &-medium {\n      font-size: var(--default-font-size);\n    }\n\n    &-large {\n      font-size: calc(var(--default-font-size) * 1.25);\n    }\n\n    /* Square, padding-free button for a lone icon; the caller sets the box size. */\n    &-icon {\n      display: inline-flex;\n\n      /* Inherits, unlike the other sizes: a hardcoded px value would have to be out-specified\n         from another stylesheet, a specificity tie decided only by bundle order. */\n      font-size: inherit;\n\n      .button-ripple,\n      .button-background,\n      .button-content {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        padding: 0;\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/esm/common/button/button.types.mjs

@@ -1,2 +1,2 @@
-"use client";var e=function(e){return e.Filled=`filled`,e.Light=`light`,e.Outlined=`outlined`,e.Plain=`plain`,e}({}),t=function(e){return e.Default=`default`,e.Small=`small`,e.Medium=`medium`,e.Large=`large`,e.Icon=`icon`,e}({}),n=function(e){return e.Button=`button`,e.Reset=`reset`,e.Submit=`submit`,e}({});export{t as ButtonSize,e as ButtonStyleType,n as ButtonType};
+"use client";var e=function(e){return e.Filled=`filled`,e.Light=`light`,e.Outlined=`outlined`,e.Plain=`plain`,e}({}),t=function(e){return e.Small=`small`,e.Medium=`medium`,e.Large=`large`,e.Icon=`icon`,e}({}),n=function(e){return e.Button=`button`,e.Reset=`reset`,e.Submit=`submit`,e}({});export{t as ButtonSize,e as ButtonStyleType,n as ButtonType};
 //# sourceMappingURL=button.types.mjs.map

package/dist/esm/common/button/button.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.types.mjs","names":[],"sources":["../../../../package/common/button/button.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { CSSProperties } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types';\nimport type { ColorValue } from '../themeProvider/color.types';\n\n/** How much the button stands out. Independent of its colour. */\nexport enum ButtonStyleType {\n  /** Solid fill, for the one main action. */\n  Filled = 'filled',\n  /** A light tint of the colour behind text in the colour. */\n  Light = 'light',\n  /** Border and text in the colour, no fill. The default. */\n  Outlined = 'outlined',\n  /** Text in the colour, no fill and no border. For toolbar, icon and close buttons. */\n  Plain = 'plain',\n}\n\nexport enum ButtonSize {\n  Default = 'default',\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n  /** Square, padding-free button for a lone icon. Give it its own width/height. */\n  Icon = 'icon',\n}\n\nexport enum ButtonType {\n  Button = 'button',\n  Reset = 'reset',\n  Submit = 'submit',\n}\n\nexport type ButtonSlots = 'background' | 'content' | 'loadingContainer' | 'label';\n\n/**\n * `DataProps` supplies the `data-*` index signature, which `ButtonHTMLAttributes` doesn't cover.\n * `type`, `color` and `onClick` below deliberately narrow their inherited counterparts.\n */\nexport interface ButtonProps extends DataProps, React.ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  style?: CSSProperties;\n  type?: ButtonType;\n  /** Emphasis: `Filled`, `Light`, `Outlined` (default) or `Plain`. */\n  styleType?: ButtonStyleType;\n  /** A `ThemeColor` (default `Primary`) or any CSS colour, such as `'var(--brand)'`. */\n  color?: ColorValue;\n  size?: ButtonSize;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  children?: React.ReactNode;\n  icon?: IconContent;\n  isLoading?: boolean;\n  disabled?: boolean;\n  title?: string;\n  ref?: React.Ref<HTMLButtonElement>;\n  classNames?: SlotClassNames<ButtonSlots>;\n  styles?: SlotStyles<ButtonSlots>;\n}\n"],"mappings":"aAOA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,SAEA,EAAA,MAAA,QAEA,EAAA,SAAA,WAEA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,MAAA,QAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,OAAA,SACA,EAAA,MAAA,QACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"button.types.mjs","names":[],"sources":["../../../../package/common/button/button.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { CSSProperties } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types';\nimport type { ColorValue } from '../themeProvider/color.types';\n\n/** How much the button stands out. Independent of its colour. */\nexport enum ButtonStyleType {\n  /** Solid fill, for the one main action. */\n  Filled = 'filled',\n  /** A light tint of the colour behind text in the colour. */\n  Light = 'light',\n  /** Border and text in the colour, no fill. The default. */\n  Outlined = 'outlined',\n  /** Text in the colour, no fill and no border. For toolbar, icon and close buttons. */\n  Plain = 'plain',\n}\n\nexport enum ButtonSize {\n  Small = 'small',\n  /** The default. */\n  Medium = 'medium',\n  Large = 'large',\n  /** Square, padding-free button for a lone icon. Give it its own width/height. */\n  Icon = 'icon',\n}\n\nexport enum ButtonType {\n  Button = 'button',\n  Reset = 'reset',\n  Submit = 'submit',\n}\n\nexport type ButtonSlots = 'background' | 'content' | 'loadingContainer' | 'label';\n\n/**\n * `DataProps` supplies the `data-*` index signature, which `ButtonHTMLAttributes` doesn't cover.\n * `type`, `color` and `onClick` below deliberately narrow their inherited counterparts.\n */\nexport interface ButtonProps extends DataProps, React.ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  style?: CSSProperties;\n  type?: ButtonType;\n  /** Emphasis: `Filled`, `Light`, `Outlined` (default) or `Plain`. */\n  styleType?: ButtonStyleType;\n  /** A `ThemeColor` (default `Primary`) or any CSS colour, such as `'var(--brand)'`. */\n  color?: ColorValue;\n  size?: ButtonSize;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;\n  children?: React.ReactNode;\n  icon?: IconContent;\n  isLoading?: boolean;\n  disabled?: boolean;\n  title?: string;\n  ref?: React.Ref<HTMLButtonElement>;\n  classNames?: SlotClassNames<ButtonSlots>;\n  styles?: SlotStyles<ButtonSlots>;\n}\n"],"mappings":"aAOA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,SAEA,EAAA,MAAA,QAEA,EAAA,SAAA,WAEA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QAEA,EAAA,OAAA,SACA,EAAA,MAAA,QAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA,EAEY,EAAL,SAAA,EAAA,OACL,GAAA,OAAA,SACA,EAAA,MAAA,QACA,EAAA,OAAA,UACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/splitButton/splitButton.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ThemeColor as n}from"../themeProvider/color.types.mjs";import{ButtonSize as r,ButtonStyleType as i}from"../button/button.types.mjs";import a from"../button/button.mjs";import{PopoverAlign as o,PopoverPlacement as s}from"../popover/popover.types.mjs";import c from"../buttonGroup/buttonGroup.mjs";import l from"../menu/menu.mjs";import u from"./splitButton.module.mjs";import{useState as d}from"react";import f from"classnames";import{faChevronDown as p}from"@fortawesome/free-solid-svg-icons";import{jsx as m,jsxs as h}from"react/jsx-runtime";var g={moreActions:`More actions`};function _(_){let{children:v,onClick:y=()=>{},actions:b=[],styleType:x=i.Filled,color:S=n.Primary,size:C=r.Default,disabled:w=!1,isLoading:T=!1,align:E=o.End,className:D,style:O,classNames:k,styles:A,labels:j,...M}=e(`SplitButton`,_),N=t(`SplitButton`,j,g),[P,F]=d(!1),[I,L]=d(w);return w!==I&&(L(w),w&&F(!1)),h(c,{...M,className:f(u.splitButton,k?.root,D),style:{...O,...A?.root},children:[m(a,{styleType:x,color:S,size:C,disabled:w,isLoading:T,onClick:y,className:f(u.splitButtonPrimary,k?.primaryButton),style:A?.primaryButton,children:v}),m(l,{items:b,isOpen:P,onOpenChange:F,placement:s.Bottom,align:E,classNames:{menu:k?.menu,item:k?.menuItem},styles:{menu:A?.menu,item:A?.menuItem},children:m(a,{styleType:x,color:S,size:C,disabled:w,icon:p,"aria-label":N.moreActions,className:f(u.splitButtonTrigger,k?.triggerButton),style:A?.triggerButton})})]})}export{_ as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ThemeColor as n}from"../themeProvider/color.types.mjs";import{ButtonSize as r,ButtonStyleType as i}from"../button/button.types.mjs";import a from"../button/button.mjs";import{PopoverAlign as o,PopoverPlacement as s}from"../popover/popover.types.mjs";import c from"../buttonGroup/buttonGroup.mjs";import l from"../menu/menu.mjs";import u from"./splitButton.module.mjs";import{useState as d}from"react";import f from"classnames";import{faChevronDown as p}from"@fortawesome/free-solid-svg-icons";import{jsx as m,jsxs as h}from"react/jsx-runtime";var g={moreActions:`More actions`};function _(_){let{children:v,onClick:y=()=>{},actions:b=[],styleType:x=i.Filled,color:S=n.Primary,size:C=r.Medium,disabled:w=!1,isLoading:T=!1,align:E=o.End,className:D,style:O,classNames:k,styles:A,labels:j,...M}=e(`SplitButton`,_),N=t(`SplitButton`,j,g),[P,F]=d(!1),[I,L]=d(w);return w!==I&&(L(w),w&&F(!1)),h(c,{...M,className:f(u.splitButton,k?.root,D),style:{...O,...A?.root},children:[m(a,{styleType:x,color:S,size:C,disabled:w,isLoading:T,onClick:y,className:f(u.splitButtonPrimary,k?.primaryButton),style:A?.primaryButton,children:v}),m(l,{items:b,isOpen:P,onOpenChange:F,placement:s.Bottom,align:E,classNames:{menu:k?.menu,item:k?.menuItem},styles:{menu:A?.menu,item:A?.menuItem},children:m(a,{styleType:x,color:S,size:C,disabled:w,icon:p,"aria-label":N.moreActions,className:f(u.splitButtonTrigger,k?.triggerButton),style:A?.triggerButton})})]})}export{_ as default};
 //# sourceMappingURL=splitButton.mjs.map

package/dist/esm/common/splitButton/splitButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"splitButton.mjs","names":[],"sources":["../../../../package/common/splitButton/splitButton.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown } from '@fortawesome/free-solid-svg-icons';\n\nimport Button from '../button';\nimport { ButtonStyleType, ButtonSize } from '../button/button.types';\nimport ButtonGroup from '../buttonGroup';\nimport Menu from '../menu';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { SplitButtonLabels, SplitButtonProps } from './splitButton.types';\n\nimport styles from './splitButton.module.pcss';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<SplitButtonLabels> = {\n  moreActions: 'More actions',\n};\n\nfunction SplitButton(props: SplitButtonProps) {\n  const {\n    children,\n    onClick = () => {},\n    actions = [],\n    styleType = ButtonStyleType.Filled,\n    color = ThemeColor.Primary,\n    size = ButtonSize.Default,\n    disabled = false,\n    isLoading = false,\n    align = PopoverAlign.End,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('SplitButton', props);\n  const text = useLabels('SplitButton', labels, DEFAULT_LABELS);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  // Adjusting state during render (not in an effect) on a prop change is the documented React\n  // pattern for this: closing the menu as soon as `disabled` becomes true, without an extra\n  // render tick or a setState-in-effect lint violation.\n  const [prevDisabled, setPrevDisabled] = useState(disabled);\n  if (disabled !== prevDisabled) {\n    setPrevDisabled(disabled);\n    if (disabled) setIsOpen(false);\n  }\n\n  return (\n    <ButtonGroup\n      {...rest}\n      className={cx(styles.splitButton, classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <Button\n        styleType={styleType}\n        color={color}\n        size={size}\n        disabled={disabled}\n        isLoading={isLoading}\n        onClick={onClick}\n        className={cx(styles.splitButtonPrimary, classNames?.primaryButton)}\n        style={slotStyles?.primaryButton}\n      >\n        {children}\n      </Button>\n\n      {/* The list, its keys, its focus and its menu semantics are Menu's; this\n          component only welds a second button to the first. */}\n      <Menu\n        items={actions}\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        placement={PopoverPlacement.Bottom}\n        align={align}\n        classNames={{ menu: classNames?.menu, item: classNames?.menuItem }}\n        styles={{ menu: slotStyles?.menu, item: slotStyles?.menuItem }}\n      >\n        <Button\n          styleType={styleType}\n          color={color}\n          size={size}\n          disabled={disabled}\n          icon={faChevronDown}\n          aria-label={text.moreActions}\n          className={cx(styles.splitButtonTrigger, classNames?.triggerButton)}\n          style={slotStyles?.triggerButton}\n        />\n      </Menu>\n    </ButtonGroup>\n  );\n}\n\nexport default SplitButton;\n"],"mappings":"isBAeA,IAAM,EAA8C,CAClD,YAAa,cACf,EAEA,SAAS,EAAY,EAAyB,CAC5C,GAAM,CACJ,WACA,cAAgB,CAAC,EACjB,UAAU,CAAC,EACX,YAAY,EAAgB,OAC5B,QAAQ,EAAW,QACnB,OAAO,EAAW,QAClB,WAAW,GACX,YAAY,GACZ,QAAQ,EAAa,IACrB,YACA,QACA,aACA,OAAQ,EACR,SACA,GAAG,GACD,EAAqB,cAAe,CAAK,EACvC,EAAO,EAAU,cAAe,EAAQ,CAAc,EAEtD,CAAC,EAAQ,GAAa,EAAS,EAAK,EAKpC,CAAC,EAAc,GAAmB,EAAS,CAAQ,EAMzD,OALI,IAAa,IACf,EAAgB,CAAQ,EACpB,GAAU,EAAU,EAAK,GAI7B,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,YAAa,GAAY,KAAM,CAAS,EAC7D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAHzC,SAAA,CAKE,EAAC,EAAD,CACa,YACJ,QACD,OACI,WACC,YACF,UACT,UAAW,EAAG,EAAO,mBAAoB,GAAY,aAAa,EAClE,MAAO,GAAY,cAElB,UACK,CAAA,EAIR,EAAC,EAAD,CACE,MAAO,EACC,SACR,aAAc,EACd,UAAW,EAAiB,OACrB,QACP,WAAY,CAAE,KAAM,GAAY,KAAM,KAAM,GAAY,QAAS,EACjE,OAAQ,CAAE,KAAM,GAAY,KAAM,KAAM,GAAY,QAAS,EAE7D,SAAA,EAAC,EAAD,CACa,YACJ,QACD,OACI,WACV,KAAM,EACN,aAAY,EAAK,YACjB,UAAW,EAAG,EAAO,mBAAoB,GAAY,aAAa,EAClE,MAAO,GAAY,aACpB,CAAA,CACG,CAAA,CACK,GAEjB"}
+{"version":3,"file":"splitButton.mjs","names":[],"sources":["../../../../package/common/splitButton/splitButton.tsx"],"sourcesContent":["import { useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronDown } from '@fortawesome/free-solid-svg-icons';\n\nimport Button from '../button';\nimport { ButtonStyleType, ButtonSize } from '../button/button.types';\nimport ButtonGroup from '../buttonGroup';\nimport Menu from '../menu';\nimport { PopoverAlign, PopoverPlacement } from '../popover/popover.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport type { SplitButtonLabels, SplitButtonProps } from './splitButton.types';\n\nimport styles from './splitButton.module.pcss';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst DEFAULT_LABELS: Required<SplitButtonLabels> = {\n  moreActions: 'More actions',\n};\n\nfunction SplitButton(props: SplitButtonProps) {\n  const {\n    children,\n    onClick = () => {},\n    actions = [],\n    styleType = ButtonStyleType.Filled,\n    color = ThemeColor.Primary,\n    size = ButtonSize.Medium,\n    disabled = false,\n    isLoading = false,\n    align = PopoverAlign.End,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    labels,\n    ...rest\n  } = useComponentDefaults('SplitButton', props);\n  const text = useLabels('SplitButton', labels, DEFAULT_LABELS);\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  // Adjusting state during render (not in an effect) on a prop change is the documented React\n  // pattern for this: closing the menu as soon as `disabled` becomes true, without an extra\n  // render tick or a setState-in-effect lint violation.\n  const [prevDisabled, setPrevDisabled] = useState(disabled);\n  if (disabled !== prevDisabled) {\n    setPrevDisabled(disabled);\n    if (disabled) setIsOpen(false);\n  }\n\n  return (\n    <ButtonGroup\n      {...rest}\n      className={cx(styles.splitButton, classNames?.root, className)}\n      style={{ ...style, ...slotStyles?.root }}\n    >\n      <Button\n        styleType={styleType}\n        color={color}\n        size={size}\n        disabled={disabled}\n        isLoading={isLoading}\n        onClick={onClick}\n        className={cx(styles.splitButtonPrimary, classNames?.primaryButton)}\n        style={slotStyles?.primaryButton}\n      >\n        {children}\n      </Button>\n\n      {/* The list, its keys, its focus and its menu semantics are Menu's; this\n          component only welds a second button to the first. */}\n      <Menu\n        items={actions}\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n        placement={PopoverPlacement.Bottom}\n        align={align}\n        classNames={{ menu: classNames?.menu, item: classNames?.menuItem }}\n        styles={{ menu: slotStyles?.menu, item: slotStyles?.menuItem }}\n      >\n        <Button\n          styleType={styleType}\n          color={color}\n          size={size}\n          disabled={disabled}\n          icon={faChevronDown}\n          aria-label={text.moreActions}\n          className={cx(styles.splitButtonTrigger, classNames?.triggerButton)}\n          style={slotStyles?.triggerButton}\n        />\n      </Menu>\n    </ButtonGroup>\n  );\n}\n\nexport default SplitButton;\n"],"mappings":"isBAeA,IAAM,EAA8C,CAClD,YAAa,cACf,EAEA,SAAS,EAAY,EAAyB,CAC5C,GAAM,CACJ,WACA,cAAgB,CAAC,EACjB,UAAU,CAAC,EACX,YAAY,EAAgB,OAC5B,QAAQ,EAAW,QACnB,OAAO,EAAW,OAClB,WAAW,GACX,YAAY,GACZ,QAAQ,EAAa,IACrB,YACA,QACA,aACA,OAAQ,EACR,SACA,GAAG,GACD,EAAqB,cAAe,CAAK,EACvC,EAAO,EAAU,cAAe,EAAQ,CAAc,EAEtD,CAAC,EAAQ,GAAa,EAAS,EAAK,EAKpC,CAAC,EAAc,GAAmB,EAAS,CAAQ,EAMzD,OALI,IAAa,IACf,EAAgB,CAAQ,EACpB,GAAU,EAAU,EAAK,GAI7B,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,YAAa,GAAY,KAAM,CAAS,EAC7D,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,EAHzC,SAAA,CAKE,EAAC,EAAD,CACa,YACJ,QACD,OACI,WACC,YACF,UACT,UAAW,EAAG,EAAO,mBAAoB,GAAY,aAAa,EAClE,MAAO,GAAY,cAElB,UACK,CAAA,EAIR,EAAC,EAAD,CACE,MAAO,EACC,SACR,aAAc,EACd,UAAW,EAAiB,OACrB,QACP,WAAY,CAAE,KAAM,GAAY,KAAM,KAAM,GAAY,QAAS,EACjE,OAAQ,CAAE,KAAM,GAAY,KAAM,KAAM,GAAY,QAAS,EAE7D,SAAA,EAAC,EAAD,CACa,YACJ,QACD,OACI,WACV,KAAM,EACN,aAAY,EAAK,YACjB,UAAW,EAAG,EAAO,mBAAoB,GAAY,aAAa,EAClE,MAAO,GAAY,aACpB,CAAA,CACG,CAAA,CACK,GAEjB"}

package/dist/esm/common/stepper/stepper.mjs

@@ -1,2 +1,2 @@
-"use client";import{renderIcon as e}from"../utils/renderIcon.mjs";import t from"./stepper.module.mjs";import{StepperAlignment as n,StepperCollapse as r,StepperLabelPlacement as i,StepperStyleType as a}from"./stepper.types.mjs";import o,{useEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";var m={[a.Default]:t.stepperDefault,[a.Outlined]:t.stepperOutlined,[a.Dots]:t.stepperDots},h={[i.Top]:t.stepperLabelTop,[i.Bottom]:t.stepperLabelBottom,[i.Left]:t.stepperLabelLeft,[i.Right]:t.stepperLabelRight};function g(){return f(`svg`,{className:t.stepperCheckmark,strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.2 -1.2 3.4 2`,height:`20px`,width:`20px`,children:f(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})}function _({open:e,className:n,style:r,children:i}){let a=c(null),[o,d]=l(null);return s(()=>{let e=a.current;if(!e)return;let t=new ResizeObserver(()=>d(e.offsetHeight));return t.observe(e),()=>t.disconnect()},[]),f(`div`,{className:u(t.stepperContent,n),style:{...r,height:e?o??`auto`:0},"aria-hidden":!e,children:f(`div`,{ref:a,className:t.stepperContentInner,children:i})})}function v(e,t){let n=[i.Left,i.Right];return t?e&&n.includes(e)?e:i.Right:e&&!n.includes(e)?e:i.Bottom}function y({steps:i=[],currentStep:s=0,alignment:c=n.Horizontal,onStepClicked:l=null,nonLinear:y=!1,hideLabels:b=!1,styleType:x=a.Default,collapse:S=r.None,labelPlacement:C,className:w,style:T,classNames:E,styles:D,...O}){let k=c===n.Vertical,A=v(C,k);return f(`div`,{...O,className:u(t.stepper,m[x],h[A],{[t.stepperVertical]:k},E?.root,w),style:{...D?.root,...T},children:i.map((n,a)=>{let c=a<s,m=a<=s,h=!!n.error,v=!!l&&!n.disabled&&(y?a!==s:c),x=u(t.stepperEntry,{[t.stepperEntryActive]:m},{[t.stepperEntryDone]:c&&!h},{[t.stepperEntryError]:h},{[t.stepperEntryDisabled]:n.disabled},{[t.stepperClickable]:v},E?.entry),C=n.icon?e(n.icon,{className:E?.icon,style:D?.icon}):c&&!h?f(g,{}):a+1,w=f(`div`,{className:u(t.stepperEntryNumber,{[t.stepperEntryNumberDone]:c&&!h},E?.entryNumber),style:D?.entryNumber,children:C}),T=n.optional===!0?`Optional`:n.optional===!1?null:n.optional,O=!b&&p(`div`,{className:t.stepperEntryLabels,children:[f(`div`,{className:u(t.stepperEntryLabel,E?.entryLabel),style:D?.entryLabel,children:n.label}),n.description!=null&&f(`div`,{className:u(t.stepperDescription,E?.description),style:D?.description,children:n.description}),T!=null&&f(`div`,{className:u(t.stepperOptional,E?.optional),style:D?.optional,children:T})]}),A=v?{role:`button`,tabIndex:0,onClick:()=>l?.(a),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),l?.(a))}}:{},j=e=>f(`div`,{className:x,style:D?.entry,"aria-current":a===s?`step`:void 0,"aria-invalid":h||void 0,...A,children:e}),M=a<i.length-1&&f(`div`,{className:u(t.stepperConnector,{[t.stepperConnectorFilled]:c},E?.connector),style:D?.connector});if(k){let e=a===0,o=a===i.length-1,l=S===r.None?!0:S===r.ActiveOnly?a===s:!c,h=n=>{let r=n===`lead`?e:o,i=n===`lead`?m:c;return f(`div`,{className:u(t.stepperRailSegment,{[t.stepperRailFilled]:!r&&i,[t.stepperRailHidden]:r})})},g=p(`div`,{className:t.stepperMarkerCell,children:[h(`lead`),w,h(`trail`)]});return p(`div`,{className:t.stepperStep,children:[j(p(d,{children:[g,O]})),M,n.content!=null&&!b&&f(_,{open:l,className:E?.content,style:D?.content,children:n.content})]},a)}return p(o.Fragment,{children:[j(p(d,{children:[w,O]})),M]},a)})})}export{y as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{useLabels as t}from"../configProvider/useLabels.mjs";import{ThemeColor as n}from"../themeProvider/color.types.mjs";import{toneProps as r,useToneCheck as i}from"../styles/tone.mjs";import{renderIcon as a}from"../utils/renderIcon.mjs";import o from"./stepper.module.mjs";import{StepperCollapse as s,StepperLabelPlacement as c,StepperOrientation as l,StepperStyleType as u}from"./stepper.types.mjs";import{useEffect as d,useRef as f,useState as p}from"react";import m from"classnames";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";var v={[u.Filled]:o.stepperFilled,[u.Outlined]:o.stepperOutlined,[u.Dots]:o.stepperDots},y={[c.Top]:o.stepperLabelTop,[c.Bottom]:o.stepperLabelBottom,[c.Left]:o.stepperLabelLeft,[c.Right]:o.stepperLabelRight},b={optional:`Optional`,completed:`Completed`,notCompleted:`Not completed`,error:`Error`},x=r(n.Error);function S(){return g(`svg`,{className:o.stepperCheckmark,strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.2 -1.2 3.4 2`,children:g(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})}function C({open:e,className:t,style:n,children:r}){let i=f(null),[a,s]=p(null);return d(()=>{let e=i.current;if(!e)return;let t=new ResizeObserver(()=>s(e.offsetHeight));return t.observe(e),()=>t.disconnect()},[]),g(`div`,{className:m(o.stepperContent,t),style:{...n,height:e?a??`auto`:0},inert:!e,children:g(`div`,{ref:i,className:o.stepperContentInner,children:r})})}function w(e,t){let n=[c.Left,c.Right];return t?e&&n.includes(e)?e:c.Right:e&&!n.includes(e)?e:c.Bottom}function T(c){let{steps:d=[],currentStep:f=0,orientation:p=l.Horizontal,onStepClicked:T=null,nonLinear:E=!1,hideLabels:D=!1,styleType:O=u.Filled,color:k=n.Primary,collapse:A=s.None,labelPlacement:j,labels:M,className:N,style:P,classNames:F,styles:I,...L}=e(`Stepper`,c),R=t(`Stepper`,M,b),z=r(k);i(`Stepper`,[k]);let B=p===l.Vertical,V=w(j,B);return g(`ol`,{...L,role:`list`,className:m(o.stepper,z.className,v[O],y[V],{[o.stepperVertical]:B},F?.root,N),style:{...z.style,...I?.root,...P},children:d.map((e,t)=>{let n=t===f,r=t<f,i=t<=f,c=!!e.error,l=!!T&&!e.disabled&&(E?!n:r),u=l||!!T&&!e.disabled&&n,p=c?R.error:r?R.completed:n?null:R.notCompleted,v=e.icon?a(e.icon,{className:F?.icon,style:I?.icon}):r&&!c?g(S,{}):t+1,y=g(`span`,{"aria-hidden":!0,className:m(o.stepperEntryNumber,c&&x.className,F?.entryNumber),style:I?.entryNumber,children:v}),b=e.optional===!0?R.optional:e.optional===!1?null:e.optional,w=_(`span`,{className:m(o.stepperEntryLabels,{[o.stepperVisuallyHidden]:D}),children:[g(`span`,{className:m(o.stepperEntryLabel,F?.entryLabel),style:I?.entryLabel,children:e.label}),e.description!=null&&_(h,{children:[` `,g(`span`,{className:m(o.stepperDescription,F?.description),style:I?.description,children:e.description})]}),b!=null&&_(h,{children:[` `,g(`span`,{className:m(o.stepperOptional,F?.optional),style:I?.optional,children:b})]}),p!=null&&_(h,{children:[` `,g(`span`,{className:o.stepperVisuallyHidden,children:p})]})]}),O=e=>{let n=e===`lead`?t===0:t===d.length-1,a=e===`lead`?i:r;return g(`span`,{className:m(o.stepperRailSegment,{[o.stepperRailFilled]:!n&&a,[o.stepperRailHidden]:n})})},k=_(h,{children:[B?_(`span`,{className:o.stepperMarkerCell,children:[O(`lead`),y,O(`trail`)]}):y,w]}),j=m(o.stepperEntry,{[o.stepperEntryReached]:i},{[o.stepperEntryDone]:r&&!c},{[o.stepperEntryError]:c},{[o.stepperEntryDisabled]:e.disabled},{[o.stepperClickable]:l},F?.entry);return _(`li`,{className:o.stepperStep,"aria-current":n&&!u?`step`:void 0,children:[u?g(`button`,{type:`button`,className:j,style:I?.entry,"aria-current":n?`step`:void 0,"aria-disabled":!l||void 0,onClick:l?()=>T?.(t):void 0,children:k}):g(`div`,{className:j,style:I?.entry,children:k}),t<d.length-1&&g(`div`,{className:m(o.stepperConnector,{[o.stepperConnectorFilled]:r},F?.connector),style:I?.connector}),B&&e.content!=null&&g(C,{open:A===s.None||(A===s.ActiveOnly?n:!r),className:F?.content,style:I?.content,children:e.content})]},t)})})}export{T as default};
 //# sourceMappingURL=stepper.mjs.map

package/dist/esm/common/stepper/stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport styles from './stepper.module.pcss';\nimport {\n  StepperAlignment,\n  StepperCollapse,\n  StepperLabelPlacement,\n  StepperStyleType,\n  type StepperProps,\n  type StepperStep,\n} from './stepper.types';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst STYLE_CLASS: Record<StepperStyleType, string> = {\n  [StepperStyleType.Default]: styles.stepperDefault,\n  [StepperStyleType.Outlined]: styles.stepperOutlined,\n  [StepperStyleType.Dots]: styles.stepperDots,\n};\n\nconst PLACEMENT_CLASS: Record<StepperLabelPlacement, string> = {\n  [StepperLabelPlacement.Top]: styles.stepperLabelTop,\n  [StepperLabelPlacement.Bottom]: styles.stepperLabelBottom,\n  [StepperLabelPlacement.Left]: styles.stepperLabelLeft,\n  [StepperLabelPlacement.Right]: styles.stepperLabelRight,\n};\n\nfunction Checkmark() {\n  return (\n    <svg\n      className={styles.stepperCheckmark}\n      strokeLinejoin='round'\n      strokeLinecap='round'\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='-0.2 -1.2 3.4 2'\n      height='20px'\n      width='20px'\n    >\n      <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n    </svg>\n  );\n}\n\nfunction StepBody({\n  open,\n  className,\n  style,\n  children,\n}: {\n  open: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}) {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    const el = innerRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver(() => setHeight(el.offsetHeight));\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      className={cx(styles.stepperContent, className)}\n      style={{ ...style, height: open ? (height ?? 'auto') : 0 }}\n      aria-hidden={!open}\n    >\n      <div ref={innerRef} className={styles.stepperContentInner}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction resolvePlacement(placement: StepperLabelPlacement | undefined, isVertical: boolean): StepperLabelPlacement {\n  const verticalValues = [StepperLabelPlacement.Left, StepperLabelPlacement.Right];\n  if (isVertical) {\n    return placement && verticalValues.includes(placement) ? placement : StepperLabelPlacement.Right;\n  }\n  return placement && !verticalValues.includes(placement) ? placement : StepperLabelPlacement.Bottom;\n}\n\nexport default function Stepper({\n  steps = [],\n  currentStep = 0,\n  alignment = StepperAlignment.Horizontal,\n  onStepClicked = null,\n  nonLinear = false,\n  hideLabels = false,\n  styleType = StepperStyleType.Default,\n  collapse = StepperCollapse.None,\n  labelPlacement,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: StepperProps) {\n  const isVertical = alignment === StepperAlignment.Vertical;\n  const placement = resolvePlacement(labelPlacement, isVertical);\n\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.stepper,\n        STYLE_CLASS[styleType],\n        PLACEMENT_CLASS[placement],\n        { [styles.stepperVertical]: isVertical },\n        classNames?.root,\n        className,\n      )}\n      style={{ ...slotStyles?.root, ...style }}\n    >\n      {steps.map((step: StepperStep, index: number) => {\n        const isDone = index < currentStep;\n        const isActive = index <= currentStep;\n        const hasError = !!step.error;\n        // nonLinear: every enabled step except the current one is clickable.\n        // linear: only completed steps are clickable.\n        const isClickable = !!onStepClicked && !step.disabled && (nonLinear ? index !== currentStep : isDone);\n\n        const entryClassName = cx(\n          styles.stepperEntry,\n          { [styles.stepperEntryActive]: isActive },\n          { [styles.stepperEntryDone]: isDone && !hasError },\n          { [styles.stepperEntryError]: hasError },\n          { [styles.stepperEntryDisabled]: step.disabled },\n          { [styles.stepperClickable]: isClickable },\n          classNames?.entry,\n        );\n\n        const markerContent = step.icon ? (\n          renderIcon(step.icon, { className: classNames?.icon, style: slotStyles?.icon })\n        ) : isDone && !hasError ? (\n          <Checkmark />\n        ) : (\n          index + 1\n        );\n\n        const marker = (\n          <div\n            className={cx(\n              styles.stepperEntryNumber,\n              { [styles.stepperEntryNumberDone]: isDone && !hasError },\n              classNames?.entryNumber,\n            )}\n            style={slotStyles?.entryNumber}\n          >\n            {markerContent}\n          </div>\n        );\n\n        const optionalNode = step.optional === true ? 'Optional' : step.optional !== false ? step.optional : null;\n\n        const labels = !hideLabels && (\n          <div className={styles.stepperEntryLabels}>\n            <div className={cx(styles.stepperEntryLabel, classNames?.entryLabel)} style={slotStyles?.entryLabel}>\n              {step.label}\n            </div>\n            {step.description != null && (\n              <div className={cx(styles.stepperDescription, classNames?.description)} style={slotStyles?.description}>\n                {step.description}\n              </div>\n            )}\n            {optionalNode != null && (\n              <div className={cx(styles.stepperOptional, classNames?.optional)} style={slotStyles?.optional}>\n                {optionalNode}\n              </div>\n            )}\n          </div>\n        );\n\n        const interactiveProps: React.HTMLAttributes<HTMLDivElement> = isClickable\n          ? {\n              role: 'button',\n              tabIndex: 0,\n              onClick: () => onStepClicked?.(index),\n              onKeyDown: (e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  onStepClicked?.(index);\n                }\n              },\n            }\n          : {};\n\n        const wrapHeader = (inner: React.ReactNode) => (\n          <div\n            className={entryClassName}\n            style={slotStyles?.entry}\n            aria-current={index === currentStep ? 'step' : undefined}\n            aria-invalid={hasError || undefined}\n            {...interactiveProps}\n          >\n            {inner}\n          </div>\n        );\n\n        const connector = index < steps.length - 1 && (\n          <div\n            className={cx(styles.stepperConnector, { [styles.stepperConnectorFilled]: isDone }, classNames?.connector)}\n            style={slotStyles?.connector}\n          />\n        );\n\n        if (isVertical) {\n          const isFirst = index === 0;\n          const isLast = index === steps.length - 1;\n          const bodyOpen =\n            collapse === StepperCollapse.None\n              ? true\n              : collapse === StepperCollapse.ActiveOnly\n                ? index === currentStep\n                : !isDone;\n\n          const railSegment = (variant: 'lead' | 'trail') => {\n            const hidden = variant === 'lead' ? isFirst : isLast;\n            const filled = variant === 'lead' ? isActive : isDone;\n            return (\n              <div\n                className={cx(styles.stepperRailSegment, {\n                  [styles.stepperRailFilled]: !hidden && filled,\n                  [styles.stepperRailHidden]: hidden,\n                })}\n              />\n            );\n          };\n\n          const markerCell = (\n            <div className={styles.stepperMarkerCell}>\n              {railSegment('lead')}\n              {marker}\n              {railSegment('trail')}\n            </div>\n          );\n\n          return (\n            <div key={index} className={styles.stepperStep}>\n              {wrapHeader(\n                <>\n                  {markerCell}\n                  {labels}\n                </>,\n              )}\n              {connector}\n              {step.content != null && !hideLabels && (\n                <StepBody open={bodyOpen} className={classNames?.content} style={slotStyles?.content}>\n                  {step.content}\n                </StepBody>\n              )}\n            </div>\n          );\n        }\n\n        return (\n          <React.Fragment key={index}>\n            {wrapHeader(\n              <>\n                {marker}\n                {labels}\n              </>,\n            )}\n            {connector}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"stepper.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport styles from './stepper.module.pcss';\nimport {\n  StepperCollapse,\n  StepperLabelPlacement,\n  StepperOrientation,\n  StepperStyleType,\n  type StepperLabels,\n  type StepperProps,\n  type StepperStep,\n} from './stepper.types';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst STYLE_CLASS: Record<StepperStyleType, string> = {\n  [StepperStyleType.Filled]: styles.stepperFilled,\n  [StepperStyleType.Outlined]: styles.stepperOutlined,\n  [StepperStyleType.Dots]: styles.stepperDots,\n};\n\nconst PLACEMENT_CLASS: Record<StepperLabelPlacement, string> = {\n  [StepperLabelPlacement.Top]: styles.stepperLabelTop,\n  [StepperLabelPlacement.Bottom]: styles.stepperLabelBottom,\n  [StepperLabelPlacement.Left]: styles.stepperLabelLeft,\n  [StepperLabelPlacement.Right]: styles.stepperLabelRight,\n};\n\nconst DEFAULT_LABELS: Required<StepperLabels> = {\n  optional: 'Optional',\n  completed: 'Completed',\n  notCompleted: 'Not completed',\n  error: 'Error',\n};\n\nconst ERROR_TONE = toneProps(ThemeColor.Error);\n\nfunction Checkmark() {\n  return (\n    <svg\n      className={styles.stepperCheckmark}\n      strokeLinejoin='round'\n      strokeLinecap='round'\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='-0.2 -1.2 3.4 2'\n    >\n      <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n    </svg>\n  );\n}\n\nfunction StepBody({\n  open,\n  className,\n  style,\n  children,\n}: {\n  open: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}) {\n  const innerRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState<number | null>(null);\n\n  useEffect(() => {\n    const el = innerRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver(() => setHeight(el.offsetHeight));\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      className={cx(styles.stepperContent, className)}\n      style={{ ...style, height: open ? (height ?? 'auto') : 0 }}\n      inert={!open}\n    >\n      <div ref={innerRef} className={styles.stepperContentInner}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction resolvePlacement(placement: StepperLabelPlacement | undefined, isVertical: boolean): StepperLabelPlacement {\n  const verticalValues = [StepperLabelPlacement.Left, StepperLabelPlacement.Right];\n  if (isVertical) {\n    return placement && verticalValues.includes(placement) ? placement : StepperLabelPlacement.Right;\n  }\n  return placement && !verticalValues.includes(placement) ? placement : StepperLabelPlacement.Bottom;\n}\n\nexport default function Stepper(props: StepperProps) {\n  const {\n    steps = [],\n    currentStep = 0,\n    orientation = StepperOrientation.Horizontal,\n    onStepClicked = null,\n    nonLinear = false,\n    hideLabels = false,\n    styleType = StepperStyleType.Filled,\n    color = ThemeColor.Primary,\n    collapse = StepperCollapse.None,\n    labelPlacement,\n    labels,\n    className,\n    style,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Stepper', props);\n  const text = useLabels('Stepper', labels, DEFAULT_LABELS);\n  const tone = toneProps(color);\n  useToneCheck('Stepper', [color]);\n  const isVertical = orientation === StepperOrientation.Vertical;\n  const placement = resolvePlacement(labelPlacement, isVertical);\n\n  return (\n    <ol\n      {...rest}\n      // WebKit drops the list role from a list styled `list-style: none`.\n      role='list'\n      className={cx(\n        styles.stepper,\n        tone.className,\n        STYLE_CLASS[styleType],\n        PLACEMENT_CLASS[placement],\n        { [styles.stepperVertical]: isVertical },\n        classNames?.root,\n        className,\n      )}\n      style={{ ...tone.style, ...slotStyles?.root, ...style }}\n    >\n      {steps.map((step: StepperStep, index: number) => {\n        const isCurrent = index === currentStep;\n        const isDone = index < currentStep;\n        const isReached = index <= currentStep;\n        const hasError = !!step.error;\n        // nonLinear: every enabled step except the current one is clickable.\n        // linear: only completed steps are clickable.\n        const isClickable = !!onStepClicked && !step.disabled && (nonLinear ? !isCurrent : isDone);\n        // The current step stays a button, aria-disabled rather than `disabled`: the step just\n        // activated becomes current, and swapping or disabling its button drops focus to the body.\n        const isButton = isClickable || (!!onStepClicked && !step.disabled && isCurrent);\n        const status = hasError ? text.error : isDone ? text.completed : isCurrent ? null : text.notCompleted;\n\n        const markerContent = step.icon ? (\n          renderIcon(step.icon, { className: classNames?.icon, style: slotStyles?.icon })\n        ) : isDone && !hasError ? (\n          <Checkmark />\n        ) : (\n          index + 1\n        );\n\n        // Hidden from screen readers: the list already gives the position, and the status text\n        // says what the checkmark shows.\n        const marker = (\n          <span\n            aria-hidden\n            className={cx(styles.stepperEntryNumber, hasError && ERROR_TONE.className, classNames?.entryNumber)}\n            style={slotStyles?.entryNumber}\n          >\n            {markerContent}\n          </span>\n        );\n\n        const optionalNode = step.optional === true ? text.optional : step.optional !== false ? step.optional : null;\n\n        // The {' '}s keep the parts apart in a button's accessible name (\"Account Completed\", not\n        // \"AccountCompleted\"). A flex container does not render white space, so the layout is unchanged.\n        const labelBlock = (\n          <span className={cx(styles.stepperEntryLabels, { [styles.stepperVisuallyHidden]: hideLabels })}>\n            <span className={cx(styles.stepperEntryLabel, classNames?.entryLabel)} style={slotStyles?.entryLabel}>\n              {step.label}\n            </span>\n            {step.description != null && (\n              <>\n                {' '}\n                <span\n                  className={cx(styles.stepperDescription, classNames?.description)}\n                  style={slotStyles?.description}\n                >\n                  {step.description}\n                </span>\n              </>\n            )}\n            {optionalNode != null && (\n              <>\n                {' '}\n                <span className={cx(styles.stepperOptional, classNames?.optional)} style={slotStyles?.optional}>\n                  {optionalNode}\n                </span>\n              </>\n            )}\n            {status != null && (\n              <>\n                {' '}\n                <span className={styles.stepperVisuallyHidden}>{status}</span>\n              </>\n            )}\n          </span>\n        );\n\n        const railSegment = (variant: 'lead' | 'trail') => {\n          const hidden = variant === 'lead' ? index === 0 : index === steps.length - 1;\n          const filled = variant === 'lead' ? isReached : isDone;\n          return (\n            <span\n              className={cx(styles.stepperRailSegment, {\n                [styles.stepperRailFilled]: !hidden && filled,\n                [styles.stepperRailHidden]: hidden,\n              })}\n            />\n          );\n        };\n\n        const entryContent = (\n          <>\n            {isVertical ? (\n              <span className={styles.stepperMarkerCell}>\n                {railSegment('lead')}\n                {marker}\n                {railSegment('trail')}\n              </span>\n            ) : (\n              marker\n            )}\n            {labelBlock}\n          </>\n        );\n\n        const entryClassName = cx(\n          styles.stepperEntry,\n          { [styles.stepperEntryReached]: isReached },\n          { [styles.stepperEntryDone]: isDone && !hasError },\n          { [styles.stepperEntryError]: hasError },\n          { [styles.stepperEntryDisabled]: step.disabled },\n          { [styles.stepperClickable]: isClickable },\n          classNames?.entry,\n        );\n\n        return (\n          <li key={index} className={styles.stepperStep} aria-current={isCurrent && !isButton ? 'step' : undefined}>\n            {isButton ? (\n              <button\n                type='button'\n                className={entryClassName}\n                style={slotStyles?.entry}\n                aria-current={isCurrent ? 'step' : undefined}\n                aria-disabled={!isClickable || undefined}\n                onClick={isClickable ? () => onStepClicked?.(index) : undefined}\n              >\n                {entryContent}\n              </button>\n            ) : (\n              <div className={entryClassName} style={slotStyles?.entry}>\n                {entryContent}\n              </div>\n            )}\n            {index < steps.length - 1 && (\n              <div\n                className={cx(\n                  styles.stepperConnector,\n                  { [styles.stepperConnectorFilled]: isDone },\n                  classNames?.connector,\n                )}\n                style={slotStyles?.connector}\n              />\n            )}\n            {isVertical && step.content != null && (\n              <StepBody\n                open={\n                  collapse === StepperCollapse.None || (collapse === StepperCollapse.ActiveOnly ? isCurrent : !isDone)\n                }\n                className={classNames?.content}\n                style={slotStyles?.content}\n              >\n                {step.content}\n              </StepBody>\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/common/stepper/stepper.module.mjs

@@ -1,2 +1,2 @@
-"use client";var e=`stepper_kiS2A`,t=`stepper-vertical_2y9rg`,n=`stepper-label-bottom_lDfhy`,r=`stepper-label-top_sBw4-`,i=`stepper-entry_KD4JJ`,a=`stepper-clickable_Nm6fP`,o=`stepper-entry-disabled_T9S5R`,s=`stepper-entry-number_J168Q`,c=`stepper-entry-active_V1aRt`,l=`stepper-entry-done_M3wb5`,u=`stepper-entry-error_xjGSr`,d=`stepper-checkmark_iKCap`,f=`showCheckmark_Rd0oW`,p=`stepper-marker-cell_reOS7`,m=`stepper-rail-segment_U-ZgF`,h=`stepper-rail-filled_wCImi`,g=`stepper-rail-hidden_l17t6`,_=`stepper-entry-labels_nQT8D`,v=`stepper-entry-label_b94eg`,y=`stepper-description_5Q0YP`,b=`stepper-optional_N8mkW`,x=`stepper-connector_J2FwZ`,S=`stepper-connector-filled_W8UZS`,C=`stepper-step_nUfsV`,w=`stepper-content_yjlFH`,T=`stepper-label-left_yGbjC`,E=`stepper-content-inner_0w2wP`,D=`stepper-outlined_V7UjP`,O=`stepper-dots_s4cgN`,k={stepper:e,"stepper-vertical":`stepper-vertical_2y9rg`,stepperVertical:t,"stepper-label-bottom":`stepper-label-bottom_lDfhy`,stepperLabelBottom:n,"stepper-label-top":`stepper-label-top_sBw4-`,stepperLabelTop:r,"stepper-entry":`stepper-entry_KD4JJ`,stepperEntry:i,"stepper-clickable":`stepper-clickable_Nm6fP`,stepperClickable:a,"stepper-entry-disabled":`stepper-entry-disabled_T9S5R`,stepperEntryDisabled:o,"stepper-entry-number":`stepper-entry-number_J168Q`,stepperEntryNumber:s,"stepper-entry-active":`stepper-entry-active_V1aRt`,stepperEntryActive:c,"stepper-entry-done":`stepper-entry-done_M3wb5`,stepperEntryDone:l,"stepper-entry-error":`stepper-entry-error_xjGSr`,stepperEntryError:u,"stepper-checkmark":`stepper-checkmark_iKCap`,stepperCheckmark:d,showCheckmark:f,"stepper-marker-cell":`stepper-marker-cell_reOS7`,stepperMarkerCell:p,"stepper-rail-segment":`stepper-rail-segment_U-ZgF`,stepperRailSegment:m,"stepper-rail-filled":`stepper-rail-filled_wCImi`,stepperRailFilled:h,"stepper-rail-hidden":`stepper-rail-hidden_l17t6`,stepperRailHidden:g,"stepper-entry-labels":`stepper-entry-labels_nQT8D`,stepperEntryLabels:_,"stepper-entry-label":`stepper-entry-label_b94eg`,stepperEntryLabel:v,"stepper-description":`stepper-description_5Q0YP`,stepperDescription:y,"stepper-optional":`stepper-optional_N8mkW`,stepperOptional:b,"stepper-connector":`stepper-connector_J2FwZ`,stepperConnector:x,"stepper-connector-filled":`stepper-connector-filled_W8UZS`,stepperConnectorFilled:S,"stepper-step":`stepper-step_nUfsV`,stepperStep:C,"stepper-content":`stepper-content_yjlFH`,stepperContent:w,"stepper-label-left":`stepper-label-left_yGbjC`,stepperLabelLeft:T,"stepper-content-inner":`stepper-content-inner_0w2wP`,stepperContentInner:E,"stepper-outlined":`stepper-outlined_V7UjP`,stepperOutlined:D,"stepper-dots":`stepper-dots_s4cgN`,stepperDots:O};export{k as default,f as showCheckmark,e as stepper,d as stepperCheckmark,a as stepperClickable,x as stepperConnector,S as stepperConnectorFilled,w as stepperContent,E as stepperContentInner,y as stepperDescription,O as stepperDots,i as stepperEntry,c as stepperEntryActive,o as stepperEntryDisabled,l as stepperEntryDone,u as stepperEntryError,v as stepperEntryLabel,_ as stepperEntryLabels,s as stepperEntryNumber,n as stepperLabelBottom,T as stepperLabelLeft,r as stepperLabelTop,p as stepperMarkerCell,b as stepperOptional,D as stepperOutlined,h as stepperRailFilled,g as stepperRailHidden,m as stepperRailSegment,C as stepperStep,t as stepperVertical};
+"use client";var e=`stepper_kiS2A`,t=`stepper-vertical_2y9rg`,n=`stepper-step_nUfsV`,r=`stepper-entry_KD4JJ`,i=`stepper-clickable_Nm6fP`,a=`stepper-entry-disabled_T9S5R`,o=`stepper-entry-number_J168Q`,s=`stepper-entry-reached_VCUw4`,c=`stepper-entry-done_M3wb5`,l=`stepper-entry-error_xjGSr`,u=`stepper-checkmark_iKCap`,d=`showCheckmark_Rd0oW`,f=`stepper-entry-labels_nQT8D`,p=`stepper-entry-label_b94eg`,m=`stepper-description_5Q0YP`,h=`stepper-optional_N8mkW`,g=`stepper-visually-hidden_AOd1K`,_=`stepper-connector_J2FwZ`,v=`stepper-connector-filled_W8UZS`,y=`stepper-label-top_sBw4-`,b=`stepper-marker-cell_reOS7`,x=`stepper-rail-segment_U-ZgF`,S=`stepper-rail-filled_wCImi`,C=`stepper-rail-hidden_l17t6`,w=`stepper-content_yjlFH`,T=`stepper-label-left_yGbjC`,E=`stepper-content-inner_0w2wP`,D=`stepper-outlined_V7UjP`,O=`stepper-dots_s4cgN`,k={stepper:e,"stepper-vertical":`stepper-vertical_2y9rg`,stepperVertical:t,"stepper-step":`stepper-step_nUfsV`,stepperStep:n,"stepper-entry":`stepper-entry_KD4JJ`,stepperEntry:r,"stepper-clickable":`stepper-clickable_Nm6fP`,stepperClickable:i,"stepper-entry-disabled":`stepper-entry-disabled_T9S5R`,stepperEntryDisabled:a,"stepper-entry-number":`stepper-entry-number_J168Q`,stepperEntryNumber:o,"stepper-entry-reached":`stepper-entry-reached_VCUw4`,stepperEntryReached:s,"stepper-entry-done":`stepper-entry-done_M3wb5`,stepperEntryDone:c,"stepper-entry-error":`stepper-entry-error_xjGSr`,stepperEntryError:l,"stepper-checkmark":`stepper-checkmark_iKCap`,stepperCheckmark:u,showCheckmark:d,"stepper-entry-labels":`stepper-entry-labels_nQT8D`,stepperEntryLabels:f,"stepper-entry-label":`stepper-entry-label_b94eg`,stepperEntryLabel:p,"stepper-description":`stepper-description_5Q0YP`,stepperDescription:m,"stepper-optional":`stepper-optional_N8mkW`,stepperOptional:h,"stepper-visually-hidden":`stepper-visually-hidden_AOd1K`,stepperVisuallyHidden:g,"stepper-connector":`stepper-connector_J2FwZ`,stepperConnector:_,"stepper-connector-filled":`stepper-connector-filled_W8UZS`,stepperConnectorFilled:v,"stepper-label-top":`stepper-label-top_sBw4-`,stepperLabelTop:y,"stepper-marker-cell":`stepper-marker-cell_reOS7`,stepperMarkerCell:b,"stepper-rail-segment":`stepper-rail-segment_U-ZgF`,stepperRailSegment:x,"stepper-rail-filled":`stepper-rail-filled_wCImi`,stepperRailFilled:S,"stepper-rail-hidden":`stepper-rail-hidden_l17t6`,stepperRailHidden:C,"stepper-content":`stepper-content_yjlFH`,stepperContent:w,"stepper-label-left":`stepper-label-left_yGbjC`,stepperLabelLeft:T,"stepper-content-inner":`stepper-content-inner_0w2wP`,stepperContentInner:E,"stepper-outlined":`stepper-outlined_V7UjP`,stepperOutlined:D,"stepper-dots":`stepper-dots_s4cgN`,stepperDots:O};export{k as default,d as showCheckmark,e as stepper,u as stepperCheckmark,i as stepperClickable,_ as stepperConnector,v as stepperConnectorFilled,w as stepperContent,E as stepperContentInner,m as stepperDescription,O as stepperDots,r as stepperEntry,a as stepperEntryDisabled,c as stepperEntryDone,l as stepperEntryError,p as stepperEntryLabel,f as stepperEntryLabels,o as stepperEntryNumber,s as stepperEntryReached,T as stepperLabelLeft,y as stepperLabelTop,b as stepperMarkerCell,h as stepperOptional,D as stepperOutlined,S as stepperRailFilled,C as stepperRailHidden,x as stepperRailSegment,n as stepperStep,t as stepperVertical,g as stepperVisuallyHidden};
 //# sourceMappingURL=stepper.module.mjs.map

package/dist/esm/common/stepper/stepper.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n  /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n     public `--stepper-*` variables via ThemeProvider (theme-wide) or `style`\n     (per instance) to override; unset ones fall back to the values below. */\n  --custom-stepper-marker-size: var(--stepper-marker-size, 40px);\n  --custom-stepper-marker-radius: var(--stepper-marker-radius, var(--default-border-radius));\n  --custom-stepper-idle-color: var(--stepper-idle-color, var(--primary-lighter));\n  --custom-stepper-active-color: var(--stepper-active-color, var(--primary-color));\n  --custom-stepper-done-color: var(--stepper-done-color, var(--primary-color));\n  --custom-stepper-error-color: var(--stepper-error-color, var(--error-color));\n  --custom-stepper-connector-color: var(--stepper-connector-color, var(--primary-color));\n  --custom-stepper-connector-thickness: var(--stepper-connector-thickness, 3px);\n  --custom-stepper-connector-idle-thickness: var(--stepper-connector-idle-thickness, 1px);\n  --custom-stepper-gap: var(--stepper-gap, 12px);\n  --custom-stepper-text-on-marker: var(--stepper-text-on-marker, var(--text-on-primary));\n\n  user-select: none;\n  color: var(--text-color);\n\n  &-vertical {\n    display: flex;\n    flex-flow: column;\n  }\n\n  &:not(.stepper-vertical) {\n    display: flex;\n    align-items: center;\n  }\n\n  &-label-bottom:not(.stepper-vertical) {\n    padding-bottom: 46px;\n  }\n\n  &-label-top:not(.stepper-vertical) {\n    padding-top: 46px;\n  }\n\n  /* Entry --------------------------------------------------------------- */\n  &-entry {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--custom-stepper-gap);\n    box-sizing: border-box;\n  }\n\n  &:not(.stepper-vertical) &-entry {\n    position: relative;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: 0;\n  }\n\n  &-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &-entry-disabled {\n    opacity: 0.5;\n  }\n\n  &-entry-number {\n    width: var(--custom-stepper-marker-size);\n    height: var(--custom-stepper-marker-size);\n    box-sizing: border-box;\n    flex-shrink: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--custom-stepper-idle-color);\n    color: var(--custom-stepper-idle-color);\n    border-radius: var(--custom-stepper-marker-radius);\n    font-weight: 600;\n    font-size: calc(var(--custom-stepper-marker-size) * 0.4);\n    box-shadow: inset 0 0 0 var(--custom-stepper-done-color);\n    transition: all 0.4s;\n  }\n\n  &-entry-active &-entry-number {\n    border: 2px solid var(--custom-stepper-active-color);\n    color: var(--custom-stepper-active-color);\n    transform: scale3d(1.1, 1.1, 1);\n  }\n\n  &-entry-done &-entry-number {\n    border-color: var(--custom-stepper-done-color);\n    color: var(--custom-stepper-text-on-marker);\n    background-color: var(--custom-stepper-done-color);\n    box-shadow: inset 0 0 0 30px var(--custom-stepper-done-color);\n    transform: none;\n  }\n\n  &-entry-error &-entry-number {\n    border: 2px solid var(--custom-stepper-error-color);\n    color: var(--custom-stepper-error-color);\n    box-shadow: inset 0 0 0 var(--custom-stepper-error-color);\n    transform: none;\n  }\n\n  &-checkmark path {\n    stroke: var(--custom-stepper-text-on-marker);\n    stroke-dasharray: 5;\n    stroke-dashoffset: 5;\n    animation: showCheckmark 0.4s 0.2s forwards;\n  }\n\n  &-marker-cell {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-shrink: 0;\n    width: var(--custom-stepper-marker-size);\n  }\n\n  &-rail-segment {\n    flex: 1 1 0;\n    min-height: 0;\n    width: var(--custom-stepper-connector-idle-thickness);\n    background-size: 100% 200%;\n    background-image: linear-gradient(\n      180deg,\n      var(--custom-stepper-connector-color) 0 50%,\n      var(--custom-stepper-idle-color) 50% 100%\n    );\n    background-position: 0 100%;\n    transition:\n      background-position 0.4s,\n      width 0.4s;\n  }\n\n  &-rail-filled {\n    width: var(--custom-stepper-connector-thickness);\n    background-position: 0 0;\n  }\n\n  &-rail-hidden {\n    background-image: none;\n    background-color: transparent;\n  }\n\n  &-entry-labels {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    align-self: center;\n  }\n\n  &-entry-label {\n    color: var(--text-color);\n  }\n\n  &-description {\n    color: var(--text-dark);\n    font-size: var(--text-small-font-size, 0.85em);\n  }\n\n  &-optional {\n    color: var(--text-light);\n    font-size: var(--text-small-font-size, 0.85em);\n    font-style: italic;\n  }\n\n  &:not(.stepper-vertical) &-entry-labels {\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    width: max-content;\n    max-width: 160px;\n    text-align: center;\n    align-items: center;\n  }\n\n  &-label-bottom:not(.stepper-vertical) &-entry-labels {\n    top: calc(var(--custom-stepper-marker-size) + 6px);\n  }\n\n  &-label-top:not(.stepper-vertical) &-entry-labels {\n    bottom: calc(var(--custom-stepper-marker-size) + 6px);\n  }\n\n  &-connector {\n    flex: 1 1 auto;\n    min-width: 24px;\n    height: var(--custom-stepper-connector-idle-thickness);\n    background-size: 200% 100%;\n    background-image: linear-gradient(\n      90deg,\n      var(--custom-stepper-connector-color) 0 50%,\n      var(--custom-stepper-idle-color) 50% 100%\n    );\n    background-position: 100% 0;\n    transition:\n      background-position 0.6s,\n      height 0.4s,\n      width 0.4s;\n\n    &-filled {\n      height: var(--custom-stepper-connector-thickness);\n      background-position: 0 0;\n    }\n  }\n\n  &-step {\n    display: grid;\n    grid-template-columns: var(--custom-stepper-marker-size) 1fr;\n    column-gap: var(--custom-stepper-gap);\n  }\n\n  &-vertical &-entry {\n    grid-column: 1 / -1;\n    align-items: stretch;\n  }\n\n  &-vertical &-connector {\n    grid-column: 1;\n    justify-self: center;\n    flex: none;\n    width: var(--custom-stepper-connector-idle-thickness);\n    min-width: 0;\n    height: 100%;\n    min-height: 24px;\n    background-size: 100% 200%;\n    background-image: linear-gradient(\n      180deg,\n      var(--custom-stepper-connector-color) 0 50%,\n      var(--custom-stepper-idle-color) 50% 100%\n    );\n    background-position: 0 100%;\n    transition:\n      background-position 0.4s,\n      width 0.4s;\n\n    &-filled {\n      width: var(--custom-stepper-connector-thickness);\n      background-position: 0 0;\n    }\n  }\n\n  &-vertical &-content {\n    grid-column: 2;\n  }\n\n  &-vertical.stepper-label-left &-step {\n    grid-template-columns: 1fr var(--custom-stepper-marker-size);\n  }\n\n  &-vertical.stepper-label-left &-entry {\n    flex-direction: row-reverse;\n  }\n\n  &-vertical.stepper-label-left &-connector {\n    grid-column: 2;\n  }\n\n  &-vertical.stepper-label-left &-content {\n    grid-column: 1;\n    text-align: right;\n  }\n\n  &-content {\n    overflow: hidden;\n    transition: height 0.25s ease;\n  }\n\n  &-content-inner {\n    padding: 4px 0 12px;\n  }\n\n  /* Outlined: completed markers stay ringed (a coloured check, no solid fill) */\n  &-outlined {\n    --stepper-text-on-marker: var(--custom-stepper-done-color);\n\n    & .stepper-entry-done .stepper-entry-number {\n      box-shadow: none;\n      background-color: transparent;\n      color: var(--custom-stepper-done-color);\n    }\n  }\n\n  &-dots {\n    --stepper-marker-size: 16px;\n    --stepper-marker-radius: 50%;\n    --stepper-gap: 10px;\n\n    & .stepper-entry-number {\n      font-size: 0;\n      border-width: 2px;\n    }\n\n    /* The dots variant shows no marker content at all: the number is killed by\n       font-size: 0 above, and every element child (the checkmark, a FontAwesome\n       icon, a custom icon element) is hidden here — matching on `svg` alone would\n       miss a custom icon that isn't one. */\n    & .stepper-entry-number > * {\n      display: none;\n    }\n  }\n}\n\n@keyframes showCheckmark {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .stepper-content {\n    transition: none;\n  }\n\n  .stepper-entry-number,\n  .stepper-connector,\n  .stepper-rail-segment {\n    transition: none;\n  }\n\n  .stepper-checkmark path {\n    animation: none;\n    stroke-dashoffset: 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"stepper.module.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.module.pcss"],"sourcesContent":[".stepper {\n  /* Shape tokens resolved once, each with a built-in fallback. Set any of the public\n     `--stepper-*` variables via ThemeProvider (theme-wide) or `style` (per instance) to\n     override. The colours come from `color`, through the --tone properties. */\n  --custom-stepper-marker-size: var(--stepper-marker-size, 40px);\n  --custom-stepper-marker-radius: var(--stepper-marker-radius, var(--default-border-radius));\n  --custom-stepper-connector-thickness: var(--stepper-connector-thickness, 3px);\n  --custom-stepper-connector-idle-thickness: var(--stepper-connector-idle-thickness, 1px);\n  --custom-stepper-gap: var(--stepper-gap, 12px);\n\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--text-color);\n\n  /* Keeps a horizontal connector's z-index: -1 inside the stepper, rather than behind whatever\n     the stepper sits on. */\n  isolation: isolate;\n\n  &-vertical {\n    flex-direction: column;\n  }\n\n  &-step {\n    position: relative;\n  }\n\n  /* Entry: the marker and its labels. A <button> when clickable, so it resets one. */\n  &-entry {\n    display: flex;\n    gap: var(--custom-stepper-gap);\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    background: none;\n    color: inherit;\n    font: inherit;\n    text-align: inherit;\n    user-select: none;\n  }\n\n  &-clickable {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Not on -clickable: the current step is a focusable button too, disabled through ARIA. */\n  &-entry:focus-visible {\n    outline: 2px solid var(--focus-border-color, var(--primary-color));\n    outline-offset: 4px;\n    border-radius: var(--default-border-radius);\n  }\n\n  &-entry-disabled {\n    opacity: 0.5;\n  }\n\n  /* Marker --------------------------------------------------------------- */\n  &-entry-number {\n    width: var(--custom-stepper-marker-size);\n    height: var(--custom-stepper-marker-size);\n    box-sizing: border-box;\n    flex-shrink: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border: 1px solid var(--border-color);\n    color: var(--text-dark);\n    border-radius: var(--custom-stepper-marker-radius);\n    font-weight: 600;\n    font-size: calc(var(--custom-stepper-marker-size) * 0.4);\n    box-shadow: inset 0 0 0 0 var(--tone-fill);\n    transition:\n      border-color 0.4s,\n      color 0.4s,\n      background-color 0.4s,\n      box-shadow 0.4s,\n      transform 0.4s;\n  }\n\n  &-entry-reached &-entry-number {\n    border: 2px solid var(--tone);\n    color: var(--tone-text);\n    transform: scale3d(1.1, 1.1, 1);\n  }\n\n  /* Fills from the border inward, an inset shadow grown past the centre. 0.75 of the marker is\n     the old 30px at the default 40px, so the fill closes before the transition ends. */\n  &-entry-done &-entry-number {\n    border-color: var(--tone-fill);\n    color: var(--tone-contrast);\n    background-color: var(--tone-fill);\n    box-shadow: inset 0 0 0 calc(var(--custom-stepper-marker-size) * 0.75) var(--tone-fill);\n    transform: none;\n  }\n\n  /* The marker carries the error tone class itself, so --tone is the error colour here. */\n  &-entry-error &-entry-number {\n    border: 2px solid var(--tone);\n    color: var(--tone-text);\n    transform: none;\n  }\n\n  /* 1.25em of the marker's font-size, which is 0.4 of the marker: half the marker. */\n  &-checkmark {\n    width: 1.25em;\n    height: 1.25em;\n  }\n\n  &-checkmark path {\n    stroke: currentcolor;\n    stroke-dasharray: 5;\n    stroke-dashoffset: 5;\n    animation: showCheckmark 0.4s 0.2s forwards;\n  }\n\n  /* Labels --------------------------------------------------------------- */\n  &-entry-labels {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    align-self: center;\n    overflow-wrap: anywhere;\n  }\n\n  &-entry-label {\n    color: var(--text-color);\n  }\n\n  &-description {\n    color: var(--text-dark);\n    font-size: var(--text-small-font-size, 0.85em);\n  }\n\n  &-optional {\n    color: var(--text-light);\n    font-size: var(--text-small-font-size, 0.85em);\n    font-style: italic;\n  }\n\n  &-visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* Connector ------------------------------------------------------------ */\n  &-connector {\n    height: var(--custom-stepper-connector-idle-thickness);\n    background-size: 200% 100%;\n    background-image: linear-gradient(90deg, var(--tone) 0 50%, var(--border-color) 50% 100%);\n    background-position: 100% 0;\n    transition:\n      background-position 0.6s,\n      height 0.4s,\n      width 0.4s;\n\n    &-filled {\n      height: var(--custom-stepper-connector-thickness);\n      background-position: 0 0;\n    }\n  }\n\n  /* Horizontal ------------------------------------------------------------ */\n  &:not(.stepper-vertical) {\n    align-items: flex-start;\n  }\n\n  &-label-top:not(.stepper-vertical) {\n    align-items: flex-end;\n  }\n\n  /* Equal columns, so a label wraps within its step's share of the width instead of spilling\n     past the stepper's edge or into the next label. */\n  &:not(.stepper-vertical) &-step {\n    flex: 1 1 0;\n    min-width: 0;\n    display: flex;\n    justify-content: center;\n  }\n\n  &:not(.stepper-vertical) &-entry {\n    flex-direction: column;\n    align-items: center;\n    min-width: 0;\n    gap: calc(var(--custom-stepper-gap) / 2);\n    text-align: center;\n  }\n\n  &-label-top:not(.stepper-vertical) &-entry {\n    flex-direction: column-reverse;\n  }\n\n  /* From this marker's edge to the next one's: the steps are equal columns, so the next marker's\n     centre is 100% further along. Under the markers (z-index), because the current one's\n     scale(1.1) reaches over the connector's ends. */\n  &:not(.stepper-vertical) &-connector {\n    position: absolute;\n    z-index: -1;\n    top: calc(var(--custom-stepper-marker-size) / 2);\n    left: calc(50% + var(--custom-stepper-marker-size) / 2);\n    right: calc(var(--custom-stepper-marker-size) / 2 - 50%);\n    translate: 0 -50%;\n  }\n\n  &-label-top:not(.stepper-vertical) &-connector {\n    top: auto;\n    bottom: calc(var(--custom-stepper-marker-size) / 2);\n    translate: 0 50%;\n  }\n\n  /* Vertical -------------------------------------------------------------- */\n  &-vertical &-step {\n    display: grid;\n    grid-template-columns: var(--custom-stepper-marker-size) 1fr;\n    column-gap: var(--custom-stepper-gap);\n  }\n\n  &-vertical &-entry {\n    grid-column: 1 / -1;\n    align-items: stretch;\n  }\n\n  &-marker-cell {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-shrink: 0;\n    width: var(--custom-stepper-marker-size);\n  }\n\n  &-rail-segment {\n    flex: 1 1 0;\n    min-height: 0;\n    width: var(--custom-stepper-connector-idle-thickness);\n    background-size: 100% 200%;\n    background-image: linear-gradient(180deg, var(--tone) 0 50%, var(--border-color) 50% 100%);\n    background-position: 0 100%;\n    transition:\n      background-position 0.4s,\n      width 0.4s;\n  }\n\n  &-rail-filled {\n    width: var(--custom-stepper-connector-thickness);\n    background-position: 0 0;\n  }\n\n  &-rail-hidden {\n    background-image: none;\n    background-color: transparent;\n  }\n\n  &-vertical &-connector {\n    grid-column: 1;\n    justify-self: center;\n    width: var(--custom-stepper-connector-idle-thickness);\n    height: 100%;\n    min-height: 24px;\n    background-size: 100% 200%;\n    background-image: linear-gradient(180deg, var(--tone) 0 50%, var(--border-color) 50% 100%);\n    background-position: 0 100%;\n    transition:\n      background-position 0.4s,\n      width 0.4s;\n\n    &-filled {\n      width: var(--custom-stepper-connector-thickness);\n      background-position: 0 0;\n    }\n  }\n\n  &-vertical &-content {\n    grid-column: 2;\n  }\n\n  &-vertical.stepper-label-left &-step {\n    grid-template-columns: 1fr var(--custom-stepper-marker-size);\n  }\n\n  &-vertical.stepper-label-left &-entry {\n    flex-direction: row-reverse;\n  }\n\n  &-vertical.stepper-label-left &-connector {\n    grid-column: 2;\n  }\n\n  &-vertical.stepper-label-left &-content {\n    grid-column: 1;\n    text-align: right;\n  }\n\n  &-content {\n    overflow: hidden;\n    transition: height 0.25s ease;\n  }\n\n  &-content-inner {\n    padding: 4px 0 12px;\n  }\n\n  /* Style types ------------------------------------------------------------ */\n  &-outlined &-entry-done &-entry-number {\n    border-color: var(--tone);\n    color: var(--tone-text);\n    background-color: transparent;\n    box-shadow: none;\n  }\n\n  &-dots {\n    --stepper-marker-size: 16px;\n    --stepper-marker-radius: 50%;\n    --stepper-gap: 10px;\n\n    & .stepper-entry-number {\n      font-size: 0;\n      border-width: 2px;\n    }\n\n    /* The dots variant shows no marker content at all: the number is killed by\n       font-size: 0 above, and every element child (the checkmark, a FontAwesome\n       icon, a custom icon element) is hidden here — matching on `svg` alone would\n       miss a custom icon that isn't one. */\n    & .stepper-entry-number > * {\n      display: none;\n    }\n  }\n}\n\n@keyframes showCheckmark {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .stepper-content,\n  .stepper-entry-number,\n  .stepper-connector,\n  .stepper-rail-segment {\n    transition: none;\n  }\n\n  .stepper-checkmark path {\n    animation: none;\n    stroke-dashoffset: 0;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/stepper/stepper.types.mjs

@@ -1,2 +1,2 @@
-"use client";var e=function(e){return e.Horizontal=`horizontal`,e.Vertical=`vertical`,e}({}),t=function(e){return e.Default=`default`,e.Outlined=`outlined`,e.Dots=`dots`,e}({}),n=function(e){return e.None=`none`,e.ActiveOnly=`activeOnly`,e.Completed=`completed`,e}({}),r=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({});export{e as StepperAlignment,n as StepperCollapse,r as StepperLabelPlacement,t as StepperStyleType};
+"use client";var e=function(e){return e.Horizontal=`horizontal`,e.Vertical=`vertical`,e}({}),t=function(e){return e.Filled=`filled`,e.Outlined=`outlined`,e.Dots=`dots`,e}({}),n=function(e){return e.None=`none`,e.ActiveOnly=`activeOnly`,e.Completed=`completed`,e}({}),r=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({});export{n as StepperCollapse,r as StepperLabelPlacement,e as StepperOrientation,t as StepperStyleType};
 //# sourceMappingURL=stepper.types.mjs.map

package/dist/esm/common/stepper/stepper.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.types.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Layout direction of the stepper. */\nexport enum StepperAlignment {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\n/** Visual preset for the step markers and connectors. */\nexport enum StepperStyleType {\n  /** Numbered markers, filled solid on completion (the default look). */\n  Default = 'default',\n  /** Numbered markers that stay ringed when completed (a coloured check, no solid fill). */\n  Outlined = 'outlined',\n  /** Minimal dots without numbers, for a compact onboarding or carousel style. */\n  Dots = 'dots',\n}\n\n/**\n * Which step bodies (`step.content`) are expanded. Only affects vertical\n * steppers with per-step `content`; ignored otherwise.\n */\nexport enum StepperCollapse {\n  /** Every step body stays expanded. */\n  None = 'none',\n  /** Only the current step's body is expanded (classic vertical wizard). */\n  ActiveOnly = 'activeOnly',\n  /** Completed (past) step bodies collapse; current and upcoming stay expanded. */\n  Completed = 'completed',\n}\n\n/**\n * Where the label block sits relative to the marker. Horizontal steppers use\n * `Top`/`Bottom`; vertical steppers use `Left`/`Right`. An out-of-orientation\n * value falls back to that orientation's default.\n */\nexport enum StepperLabelPlacement {\n  Top = 'top',\n  Bottom = 'bottom',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type StepperSlots =\n  | 'root'\n  | 'entry'\n  | 'entryNumber'\n  | 'entryLabel'\n  | 'connector'\n  | 'description'\n  | 'content'\n  | 'optional'\n  | 'icon';\n\nexport interface StepperStep {\n  /** Primary label for the step. */\n  label: React.ReactNode;\n  /** Secondary line shown under the label. */\n  description?: React.ReactNode;\n  /** Collapsible body content, rendered under the label (vertical only). */\n  content?: React.ReactNode;\n  /** Icon shown in the marker instead of the step number — a FontAwesome icon or any node. */\n  icon?: IconContent;\n  /** Marks the step as errored, recolouring the marker with `--stepper-error-color`. */\n  error?: boolean;\n  /** `true` renders an \"Optional\" hint; a node renders custom hint text. */\n  optional?: boolean | React.ReactNode;\n  /** Disables this step: never clickable, dimmed. */\n  disabled?: boolean;\n}\n\nexport interface StepperProps extends HtmlProps {\n  steps?: StepperStep[];\n  currentStep?: number;\n  alignment?: StepperAlignment | 'horizontal' | 'vertical';\n  onStepClicked?: ((index: number) => void) | null;\n  /** Allow clicking any step, not just completed ones. */\n  nonLinear?: boolean;\n  /** Hide the label text (and description) beneath each step entry. */\n  hideLabels?: boolean;\n  /** Visual preset for markers and connectors (default `Default`). */\n  styleType?: StepperStyleType;\n  /** Which step bodies are expanded. Vertical `content` only (default `None`). */\n  collapse?: StepperCollapse;\n  /** Label position relative to the marker (default: horizontal `Bottom`, vertical `Right`). */\n  labelPlacement?: StepperLabelPlacement;\n  className?: string;\n  style?: React.CSSProperties;\n  classNames?: SlotClassNames<StepperSlots>;\n  styles?: SlotStyles<StepperSlots>;\n}\n"],"mappings":"aAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,WAAA,aACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OAEL,GAAA,QAAA,UAEA,EAAA,SAAA,WAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA,EAMY,EAAL,SAAA,EAAA,OAEL,GAAA,KAAA,OAEA,EAAA,WAAA,aAEA,EAAA,UAAA,aACF,EAAA,CAAA,CAAA,EAOY,EAAL,SAAA,EAAA,OACL,GAAA,IAAA,MACA,EAAA,OAAA,SACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
+{"version":3,"file":"stepper.types.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { ColorValue } from '../themeProvider/color.types';\n\n/** Direction the steps run in. */\nexport enum StepperOrientation {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\n/** How the step markers are drawn. */\nexport enum StepperStyleType {\n  /** Numbered markers, filled solid on completion. The default. */\n  Filled = 'filled',\n  /** Numbered markers that stay ringed when completed, with a check in the colour. */\n  Outlined = 'outlined',\n  /** Minimal dots without numbers, for a compact onboarding or carousel style. */\n  Dots = 'dots',\n}\n\n/**\n * Which step bodies (`step.content`) are expanded. Only affects vertical\n * steppers with per-step `content`; ignored otherwise.\n */\nexport enum StepperCollapse {\n  /** Every step body stays expanded. */\n  None = 'none',\n  /** Only the current step's body is expanded (classic vertical wizard). */\n  ActiveOnly = 'activeOnly',\n  /** Completed (past) step bodies collapse; current and upcoming stay expanded. */\n  Completed = 'completed',\n}\n\n/**\n * Where the label block sits relative to the marker. Horizontal steppers use\n * `Top`/`Bottom`; vertical steppers use `Left`/`Right`. An out-of-orientation\n * value falls back to that orientation's default.\n */\nexport enum StepperLabelPlacement {\n  Top = 'top',\n  Bottom = 'bottom',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport type StepperSlots =\n  | 'root'\n  | 'entry'\n  | 'entryNumber'\n  | 'entryLabel'\n  | 'connector'\n  | 'description'\n  | 'content'\n  | 'optional'\n  | 'icon';\n\nexport interface StepperLabels {\n  /** Hint under the label of a step with `optional: true`. */\n  optional?: string;\n  /** Status of a completed step, read out by screen readers. */\n  completed?: string;\n  /** Status of a step not reached yet, read out by screen readers. */\n  notCompleted?: string;\n  /** Status of a step with `error`, read out by screen readers. */\n  error?: string;\n}\n\nexport interface StepperStep {\n  /** Primary label for the step. */\n  label: React.ReactNode;\n  /** Secondary line shown under the label. */\n  description?: React.ReactNode;\n  /** Collapsible body content, rendered under the label (vertical only). */\n  content?: React.ReactNode;\n  /** Icon shown in the marker instead of the step number — a FontAwesome icon or any node. */\n  icon?: IconContent;\n  /** Marks the step as errored, drawing its marker in the theme's `--error-color`. */\n  error?: boolean;\n  /** `true` renders the `optional` label as a hint; a node renders custom hint text. */\n  optional?: boolean | React.ReactNode;\n  /** Disables this step: never clickable, dimmed. */\n  disabled?: boolean;\n}\n\nexport interface StepperProps extends HtmlProps<HTMLOListElement> {\n  steps?: StepperStep[];\n  /** Zero-based index of the current step. `steps.length` marks every step completed. */\n  currentStep?: number;\n  /** Direction the steps run in (default `Horizontal`). */\n  orientation?: StepperOrientation;\n  onStepClicked?: ((index: number) => void) | null;\n  /** Allow clicking any step, not just completed ones. */\n  nonLinear?: boolean;\n  /** Hide each step's label, description and hint visually. Screen readers still read them. */\n  hideLabels?: boolean;\n  /** How the markers are drawn (default `Filled`). */\n  styleType?: StepperStyleType;\n  /** A `ThemeColor` (default `Primary`) or any CSS colour, such as `'var(--brand)'`. */\n  color?: ColorValue;\n  /** Which step bodies are expanded. Vertical `content` only (default `None`). */\n  collapse?: StepperCollapse;\n  /** Label position relative to the marker (default: horizontal `Bottom`, vertical `Right`). */\n  labelPlacement?: StepperLabelPlacement;\n  labels?: StepperLabels;\n  className?: string;\n  style?: React.CSSProperties;\n  classNames?: SlotClassNames<StepperSlots>;\n  styles?: SlotStyles<StepperSlots>;\n}\n"],"mappings":"aAMA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,WAAA,aACA,EAAA,SAAA,YACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,SAEA,EAAA,SAAA,WAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA,EAMY,EAAL,SAAA,EAAA,OAEL,GAAA,KAAA,OAEA,EAAA,WAAA,aAEA,EAAA,UAAA,aACF,EAAA,CAAA,CAAA,EAOY,EAAL,SAAA,EAAA,OACL,GAAA,IAAA,MACA,EAAA,OAAA,SACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}