@ahrowe/ui 0.43.0 → 0.45.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @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
+
+- 5b0aefb: Button, Checkbox, VirtualList, Dropdown and KanbanBoard draw their loading state with `Loader`, so `defaultProps.Loader` on `AhroweProvider` sets the type of every loader in the app at once
+- 5b0aefb: **Breaking:** `SpinnerLoading` is replaced by `Loader`, with five animations in `LoaderType` (`Spinner`, `Comet`, `Dots`, `Bars`, `Pulse`), a `size` and a `color`, and announced as a progressbar named "Loading". See "Migration from `SpinnerLoading`" in docs/Loader.md
+- 5b0aefb: Added `LoadingOverlay`: it wraps content and frosts over it while `isLoading`, waiting 200ms before it shows and staying at least 400ms once it does, so a fast load never flashes it. See docs/LoadingOverlay.md
+
+### Patch Changes
+
+- 5b0aefb: Checkbox and VirtualList mark themselves `aria-busy` while loading, and a loading Checkbox keeps its own name instead of being read as "Loading" plus its label
+
 ## 0.43.0
 
 ### Minor Changes

package/README.md

@@ -157,7 +157,8 @@ runs where `@ahrowe/ui` is installed.
 | `InteractableDiv` | Accessible `<div>` that behaves like a button — click and keyboard (Enter/Space) events, with proper ARIA semantics |
 | `KanbanBoard`, `KanbanColumn` | Drag-and-drop board with columns — task management, workflow stages, status boards (e.g. Todo / In Progress / Done) |
 | `KlipyPicker` | GIF picker backed by the Klipy API — chat reactions, message composers, content authoring tools |
-| `SpinnerLoading` | A loading indicator for async operations: page loads, data fetching, or covering a region while it refreshes |
+| `Loader`, `LoaderType`, `ThemeColor` | A loading indicator for something in progress with no known end: a fetch, a save, a connection |
+| `LoadingOverlay`, `Loader`, `LoaderType` | Covering content while it reloads: a table refreshing, a form saving, a panel fetching its next page |
 | `Menu`, `menuHotkeys` | A list of actions hanging off a trigger — a row's "more" button, a toolbar overflow, a context menu on a card |
 | `Modal` | Full overlay dialog — forms, detail views, confirmations, wizards that need to block the rest of the UI |
 | `MultiSelect` | Pick several options from a list |
@@ -178,10 +179,10 @@ runs where `@ahrowe/ui` is installed.
 | `ScrollbarProvider` | Applies custom scrollbar styling to a scrollable region — use to keep scrollbar appearance consistent with the theme |
 | `SearchInput` | Search field with built-in debouncing and an optional result count line — list filters, search-as-you-type pages |
 | `SectionHeader`, `SectionHeaderSize` | A reusable heading block for the top of a page, panel, card, or any section — a title with an optional subtitle, a leading icon or thumbnail, and a trailing actions area |
-| `Skeleton`, `SkeletonVariant`, `SkeletonAnimation` | Content-shaped loading placeholder, shown while real content is being fetched — more polished than a spinner for content-heavy pages (lists, cards, profile headers) |
+| `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

@@ -26,6 +26,8 @@ import { ChipProps } from '../chip/chip.types.js';
 import { CardProps } from '../card/card.types.js';
 import { SectionHeaderProps } from '../sectionHeader/sectionHeader.types.js';
 import { SkeletonProps } from '../skeleton/skeleton.types.js';
+import { LoaderProps } from '../loader/loader.types.js';
+import { LoadingOverlayProps } from '../loadingOverlay/loadingOverlay.types.js';
 import { AccordionProps } from '../accordion/accordion.types.js';
 import { DividerProps } from '../divider/divider.types.js';
 import { AlertProps } from '../alert/alert.types.js';
@@ -46,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.
@@ -105,6 +108,8 @@ export interface ComponentDefaults {
     Card?: Partial<CardProps>;
     SectionHeader?: Partial<SectionHeaderProps>;
     Skeleton?: Partial<SkeletonProps>;
+    Loader?: Partial<LoaderProps>;
+    LoadingOverlay?: Partial<LoadingOverlayProps>;
     Accordion?: Partial<AccordionProps>;
     Divider?: Partial<DividerProps>;
     Alert?: Partial<AlertProps>;
@@ -127,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/loader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './loader.js';
+export * from './loader.types.js';

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

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { LoaderProps } from './loader.types.js';
+declare function Loader(props: LoaderProps): ReactElement;
+export default Loader;

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

@@ -0,0 +1,31 @@
+import { CSSProperties } from 'react';
+import { HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+export declare enum LoaderType {
+    /** An arc that grows and shrinks on a faint track. The default, and the one that reads at any size. */
+    Spinner = "spinner",
+    /** A glowing head trailing a fading tail round a ring. For a hero spot: a page, a panel, an overlay. */
+    Comet = "comet",
+    /** Three dots in a wave. For a line of text or a chat reply being written. */
+    Dots = "dots",
+    /** Bars rising and falling like an equaliser. For media, uploads and data being processed. */
+    Bars = "bars",
+    /** Rings rippling out from a core. For waiting on something outside the app: a device, a connection, a search. */
+    Pulse = "pulse"
+}
+export interface LoaderLabels {
+    /** The loader's accessible name. */
+    loading?: string;
+}
+export interface LoaderProps extends HtmlProps<HTMLSpanElement> {
+    /** The animation. Defaults to `LoaderType.Spinner`. */
+    type?: LoaderType;
+    /** Width and height: any CSS length, or a number of pixels. Defaults to `'2.5em'`, so it follows the font size around it. */
+    size?: number | string;
+    /** A `ThemeColor` or any CSS colour. Defaults to `ThemeColor.Primary`; `ThemeColor.Neutral` takes the colour of the text around it. */
+    color?: ColorValue;
+    /** Text the loader produces itself. See `LoaderLabels`. */
+    labels?: LoaderLabels;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/cjs-types/common/loadingOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './loadingOverlay.js';
+export * from './loadingOverlay.types.js';

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

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { LoadingOverlayProps } from './loadingOverlay.types.js';
+declare function LoadingOverlay(props: LoadingOverlayProps): ReactElement;
+export default LoadingOverlay;

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

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type LoadingOverlaySlots = 'content' | 'backdrop' | 'panel' | 'message';
+export interface LoadingOverlayProps extends HtmlProps<HTMLDivElement> {
+    /** Covers the content, blocks the pointer and marks it `aria-busy`. Defaults to `false`. */
+    isLoading?: boolean;
+    /** What the overlay covers. */
+    children?: ReactNode;
+    /** Shown in place of the default `Loader`: a `Loader` of another type, an `AnimatedLogo`, anything. */
+    loader?: ReactNode;
+    /** Text under the loader, with a highlight sweeping across it. Also the default loader's accessible name. */
+    message?: ReactNode;
+    /** Milliseconds `isLoading` has to stay true before the overlay shows, so a fast load never flashes it. Once shown, it stays at least 400ms. Defaults to `200`. */
+    delay?: number;
+    className?: string;
+    style?: CSSProperties;
+    /** Classes for the inner elements. See `LoadingOverlaySlots`. */
+    classNames?: SlotClassNames<LoadingOverlaySlots>;
+    /** Inline styles for the inner elements. See `LoadingOverlaySlots`. */
+    styles?: SlotStyles<LoadingOverlaySlots>;
+}

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. */
@@ -232,6 +220,10 @@ export interface ThemeVariables {
     /** Width a column collapses to once it has no cards (see `collapseEmptyColumns`). Falls back to 140px. */
     '--kanban-empty-column-width'?: string;
     '--option-picker-padding'?: string;
+    /** Veil over the content while it loads. Falls back to --background at 50%. */
+    '--loading-overlay-background'?: string;
+    /** How far the content under the veil is blurred. Falls back to 4px; 0px turns the blur off. */
+    '--loading-overlay-blur'?: string;
     /** Track (unfilled) background colour. Falls back to --background-accent. */
     '--progress-bar-track-color'?: string;
     /** Canvas behind the plan. Falls back to --background. */

package/dist/cjs-types/index.d.ts

@@ -76,7 +76,10 @@ export { default as KanbanBoard } from './common/kanbanBoard/index.js';
 export * from './common/kanbanBoard/index.js';
 export { default as KlipyPicker } from './common/klipyPicker/index.js';
 export * from './common/klipyPicker/index.js';
-export * from './common/loading/index.js';
+export { default as Loader } from './common/loader/index.js';
+export * from './common/loader/index.js';
+export { default as LoadingOverlay } from './common/loadingOverlay/index.js';
+export * from './common/loadingOverlay/index.js';
 export { default as Menu } from './common/menu/index.js';
 export * from './common/menu/index.js';
 export { default as Modal } from './common/modal/index.js';

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"../loading/spinnerLoading/index.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,{className:i.buttonLoadingIcon})}):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 SpinnerLoading from 'components/common/loading/spinnerLoading';\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                <SpinnerLoading className={styles.buttonLoadingIcon} />\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":"6kBAcA,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,CAAgB,UAAW,EAAO,iBAAoB,CAAA,CACnD,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-loading-icon_1pTTz`,i=`button-content_Q-0-4`,a=`button-loading_TY6y7`,o=`button-loading-container_pMSta`,s=`button-withIcon_IXEKA`,c=`button-style-filled_gsaJ4`,l=`button-style-light_HBi34`,u=`button-style-outlined_OSfMq`,d=`button-style-plain_CUtTy`,f=`button-background_9Vfo5`,p=`button-size-default_N4HG9`,m=`button-size-small_mn6jE`,h=`button-size-medium_gNVDM`,g=`button-size-large_xSIcS`,_=`button-size-icon_pkqwl`,v=`button-ripple_UGtt8`,y={button:e,"button-notAllowed":`button-notAllowed_xGT-E`,buttonNotAllowed:t,"button-disabled":`button-disabled_XDm5w`,buttonDisabled:n,"button-loading-icon":`button-loading-icon_1pTTz`,buttonLoadingIcon:r,"button-content":`button-content_Q-0-4`,buttonContent:i,"button-loading":`button-loading_TY6y7`,buttonLoading:a,"button-loading-container":`button-loading-container_pMSta`,buttonLoadingContainer:o,"button-withIcon":`button-withIcon_IXEKA`,buttonWithIcon:s,"button-style-filled":`button-style-filled_gsaJ4`,buttonStyleFilled:c,"button-style-light":`button-style-light_HBi34`,buttonStyleLight:l,"button-style-outlined":`button-style-outlined_OSfMq`,buttonStyleOutlined:u,"button-style-plain":`button-style-plain_CUtTy`,buttonStylePlain:d,"button-background":`button-background_9Vfo5`,buttonBackground:f,"button-size-default":`button-size-default_N4HG9`,buttonSizeDefault:p,"button-size-small":`button-size-small_mn6jE`,buttonSizeSmall:m,"button-size-medium":`button-size-medium_gNVDM`,buttonSizeMedium:h,"button-size-large":`button-size-large_xSIcS`,buttonSizeLarge:g,"button-size-icon":`button-size-icon_pkqwl`,buttonSizeIcon:_,"button-ripple":`button-ripple_UGtt8`,buttonRipple:v};export{e as button,f as buttonBackground,i as buttonContent,n as buttonDisabled,a as buttonLoading,o as buttonLoadingContainer,r as buttonLoadingIcon,t as buttonNotAllowed,v as buttonRipple,p as buttonSizeDefault,_ as buttonSizeIcon,g as buttonSizeLarge,h as buttonSizeMedium,m as buttonSizeSmall,c as buttonStyleFilled,l as buttonStyleLight,u as buttonStyleOutlined,d as buttonStylePlain,s as buttonWithIcon,y 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  &-loading-icon {\n    width: 100% !important;\n    height: 100% !important;\n    stroke: currentcolor;\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/checkbox/checkbox.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../loading/spinnerLoading/index.mjs";import n from"../ripple/ripple.mjs";import r from"./checkbox.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{label:d=``,selected:f=!1,onToggle:p=()=>{},className:m=``,style:h,disabled:g=!1,lineHeight:_=``,title:v=``,tabIndex:y=0,cursorDefault:b=!1,width:x,height:S,formValidator:C=null,children:w=null,background:T=null,isLoading:E=!1,classNames:D,styles:O,...k}=e(`Checkbox`,u),A=a(null),[,j]=o(0);i(()=>{if(!C)return;let e=()=>j(e=>e+1);return C.registerOnUpdateListener(e),()=>C.removeOnUpdateListener(e)},[C]);function M(e){g||E||(A.current?.addRipple(),C&&C.set(!C.value),p(!f,e))}let N=C?C.value:f;return l(`div`,{...k,className:s(r.checkbox,{[r.checkboxDisabled]:g,[r.checkboxPointer]:!b},m),style:{...x?{"--checkbox-size":x}:null,...h},onClick:M,onKeyPress:e=>{e.key===`Enter`&&M(e)},role:`checkbox`,"aria-checked":N,"aria-disabled":g||void 0,tabIndex:y,children:[c(`div`,{title:v,className:s(r.checkboxIcon,E?r.checkboxLoading:null,D?.icon),style:O?.icon,children:E?c(`div`,{className:r.checkboxLoadingBox,style:{width:x,height:S},children:c(t,{className:r.checkboxLoadingSpinner})}):l(`div`,{style:{width:x,height:S,...T?{"--checkbox-fill":T}:null,...O?.checkmark},className:s(r.checkboxCheckmark,N&&r.checkboxCheckmarkChecked,D?.checkmark),children:[c(n,{ref:A,manualOnly:!0,overflowHidden:!1,rippleAnimationLength:.3,rippleBackground:`radial-gradient(transparent, var(--primary-color))`}),c(`svg`,{strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.5 -1.5 4 2.6`,children:c(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})]})}),c(`div`,{className:D?.label,style:{lineHeight:_||`100%`,...O?.label},children:w||d})]})}export{u as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../loader/loader.mjs";import n from"../ripple/ripple.mjs";import r from"./checkbox.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{label:d=``,selected:f=!1,onToggle:p=()=>{},className:m=``,style:h,disabled:g=!1,lineHeight:_=``,title:v=``,tabIndex:y=0,cursorDefault:b=!1,width:x,height:S,formValidator:C=null,children:w=null,background:T=null,isLoading:E=!1,classNames:D,styles:O,...k}=e(`Checkbox`,u),A=a(null),[,j]=o(0);i(()=>{if(!C)return;let e=()=>j(e=>e+1);return C.registerOnUpdateListener(e),()=>C.removeOnUpdateListener(e)},[C]);function M(e){g||E||(A.current?.addRipple(),C&&C.set(!C.value),p(!f,e))}let N=C?C.value:f;return l(`div`,{...k,className:s(r.checkbox,{[r.checkboxDisabled]:g,[r.checkboxPointer]:!b},m),style:{...x?{"--checkbox-size":x}:null,...h},onClick:M,onKeyPress:e=>{e.key===`Enter`&&M(e)},role:`checkbox`,"aria-checked":N,"aria-disabled":g||void 0,"aria-busy":E||k[`aria-busy`]||void 0,tabIndex:y,children:[c(`div`,{title:v,className:s(r.checkboxIcon,E?r.checkboxLoading:null,D?.icon),style:O?.icon,children:E?c(`div`,{className:r.checkboxLoadingBox,style:{width:x,height:S},children:c(t,{size:`100%`,"aria-hidden":!0})}):l(`div`,{style:{width:x,height:S,...T?{"--checkbox-fill":T}:null,...O?.checkmark},className:s(r.checkboxCheckmark,N&&r.checkboxCheckmarkChecked,D?.checkmark),children:[c(n,{ref:A,manualOnly:!0,overflowHidden:!1,rippleAnimationLength:.3,rippleBackground:`radial-gradient(transparent, var(--primary-color))`}),c(`svg`,{strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.5 -1.5 4 2.6`,children:c(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})]})}),c(`div`,{className:D?.label,style:{lineHeight:_||`100%`,...O?.label},children:w||d})]})}export{u as default};
 //# sourceMappingURL=checkbox.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport { useComponentDefaults } from '../configProvider';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox(props: CheckboxProps): ReactElement {\n  const {\n    label = '',\n    selected = false,\n    onToggle = () => {},\n    className = '',\n    style,\n    disabled = false,\n    lineHeight = '',\n    title = '',\n    tabIndex = 0,\n    cursorDefault = false,\n    width,\n    height,\n    formValidator = null,\n    children = null,\n    background = null,\n    isLoading = false,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Checkbox', props);\n  const rippleRef = useRef<{ addRipple: () => void }>(null);\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  function handleToggle(event?: React.MouseEvent | React.KeyboardEvent) {\n    if (disabled || isLoading) return;\n    rippleRef.current?.addRipple();\n    if (formValidator) {\n      formValidator.set(!formValidator.value);\n    }\n    onToggle(!selected, event);\n  }\n\n  const currSelected = (formValidator ? formValidator.value : selected) as boolean;\n\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.checkbox,\n        {\n          [styles.checkboxDisabled]: disabled,\n          [styles.checkboxPointer]: !cursorDefault,\n        },\n        className,\n      )}\n      /* Through the variable, so the border and the spinner follow width too, not just the box. */\n      style={{ ...(width ? ({ '--checkbox-size': width } as React.CSSProperties) : null), ...style }}\n      onClick={handleToggle}\n      onKeyPress={(e) => {\n        if (e.key === 'Enter') handleToggle(e);\n      }}\n      role='checkbox'\n      aria-checked={currSelected}\n      aria-disabled={disabled || undefined}\n      tabIndex={tabIndex}\n    >\n      <div\n        title={title}\n        className={cx(styles.checkboxIcon, isLoading ? styles.checkboxLoading : null, classNames?.icon)}\n        style={slotStyles?.icon}\n      >\n        {isLoading ? (\n          <div className={styles.checkboxLoadingBox} style={{ width, height }}>\n            <SpinnerLoading className={styles.checkboxLoadingSpinner} />\n          </div>\n        ) : (\n          <div\n            style={{\n              width,\n              height,\n              ...(background ? ({ '--checkbox-fill': background } as React.CSSProperties) : null),\n              ...slotStyles?.checkmark,\n            }}\n            className={cx(\n              styles.checkboxCheckmark,\n              currSelected && styles.checkboxCheckmarkChecked,\n              classNames?.checkmark,\n            )}\n          >\n            <Ripple\n              ref={rippleRef}\n              manualOnly\n              overflowHidden={false}\n              rippleAnimationLength={0.3}\n              rippleBackground='radial-gradient(transparent, var(--primary-color))'\n            />\n            <svg\n              strokeLinejoin='round'\n              strokeLinecap='round'\n              xmlns='http://www.w3.org/2000/svg'\n              viewBox='-0.5 -1.5 4 2.6'\n            >\n              <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n            </svg>\n          </div>\n        )}\n      </div>\n      <div className={classNames?.label} style={{ lineHeight: lineHeight || '100%', ...slotStyles?.label }}>\n        {children || label}\n      </div>\n    </div>\n  );\n}\n\nexport default Checkbox;\n"],"mappings":"mWASA,SAAS,EAAS,EAAoC,CACpD,GAAM,CACJ,QAAQ,GACR,WAAW,GACX,eAAiB,CAAC,EAClB,YAAY,GACZ,QACA,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,EACX,gBAAgB,GAChB,QACA,SACA,gBAAgB,KAChB,WAAW,KACX,aAAa,KACb,YAAY,GACZ,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,WAAY,CAAK,EACpC,EAAY,EAAkC,IAAI,EAClD,EAAG,GAAe,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,SAAS,EAAa,EAAgD,CAChE,GAAY,IAChB,EAAU,SAAS,UAAU,EACzB,GACF,EAAc,IAAI,CAAC,EAAc,KAAK,EAExC,EAAS,CAAC,EAAU,CAAK,EAC3B,CAEA,IAAM,EAAgB,EAAgB,EAAc,MAAQ,EAE5D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,kBAAmB,GAC1B,EAAO,iBAAkB,CAAC,CAC7B,EACA,CACF,EAEA,MAAO,CAAE,GAAI,EAAS,CAAE,kBAAmB,CAAM,EAA4B,KAAO,GAAG,CAAM,EAC7F,QAAS,EACT,WAAa,GAAM,CACb,EAAE,MAAQ,SAAS,EAAa,CAAC,CACvC,EACA,KAAK,WACL,eAAc,EACd,gBAAe,GAAY,IAAA,GACjB,WAnBZ,SAAA,CAqBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,KAElB,SAAA,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAoB,MAAO,CAAE,QAAO,QAAO,EAChE,SAAA,EAAC,EAAD,CAAgB,UAAW,EAAO,sBAAyB,CAAA,CACxD,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CACL,QACA,SACA,GAAI,EAAc,CAAE,kBAAmB,CAAW,EAA4B,KAC9E,GAAG,GAAY,SACjB,EACA,UAAW,EACT,EAAO,kBACP,GAAgB,EAAO,yBACvB,GAAY,SACd,EAXF,SAAA,CAaE,EAAC,EAAD,CACE,IAAK,EACL,WAAA,GACA,eAAgB,GAChB,sBAAuB,GACvB,iBAAiB,oDAClB,CAAA,EACD,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBAER,SAAA,EAAC,OAAD,CAAM,EAAE,qBAAqB,YAAY,MAAM,KAAK,MAAQ,CAAA,CACzD,CAAA,CACF,GAEJ,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,CAAE,WAAY,GAAc,OAAQ,GAAG,GAAY,KAAM,EAChG,SAAA,GAAY,CACV,CAAA,CACF,GAET"}
+{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport Loader from '../loader';\nimport { useComponentDefaults } from '../configProvider';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox(props: CheckboxProps): ReactElement {\n  const {\n    label = '',\n    selected = false,\n    onToggle = () => {},\n    className = '',\n    style,\n    disabled = false,\n    lineHeight = '',\n    title = '',\n    tabIndex = 0,\n    cursorDefault = false,\n    width,\n    height,\n    formValidator = null,\n    children = null,\n    background = null,\n    isLoading = false,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Checkbox', props);\n  const rippleRef = useRef<{ addRipple: () => void }>(null);\n  const [, forceUpdate] = useState(0);\n\n  useEffect(() => {\n    if (!formValidator) return;\n    const listener = () => forceUpdate((n) => n + 1);\n    formValidator.registerOnUpdateListener(listener);\n    return () => formValidator.removeOnUpdateListener(listener);\n  }, [formValidator]);\n\n  function handleToggle(event?: React.MouseEvent | React.KeyboardEvent) {\n    if (disabled || isLoading) return;\n    rippleRef.current?.addRipple();\n    if (formValidator) {\n      formValidator.set(!formValidator.value);\n    }\n    onToggle(!selected, event);\n  }\n\n  const currSelected = (formValidator ? formValidator.value : selected) as boolean;\n\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.checkbox,\n        {\n          [styles.checkboxDisabled]: disabled,\n          [styles.checkboxPointer]: !cursorDefault,\n        },\n        className,\n      )}\n      /* Through the variable, so the border and the spinner follow width too, not just the box. */\n      style={{ ...(width ? ({ '--checkbox-size': width } as React.CSSProperties) : null), ...style }}\n      onClick={handleToggle}\n      onKeyPress={(e) => {\n        if (e.key === 'Enter') handleToggle(e);\n      }}\n      role='checkbox'\n      aria-checked={currSelected}\n      aria-disabled={disabled || undefined}\n      aria-busy={isLoading || rest['aria-busy'] || undefined}\n      tabIndex={tabIndex}\n    >\n      <div\n        title={title}\n        className={cx(styles.checkboxIcon, isLoading ? styles.checkboxLoading : null, classNames?.icon)}\n        style={slotStyles?.icon}\n      >\n        {isLoading ? (\n          <div className={styles.checkboxLoadingBox} style={{ width, height }}>\n            {/* Hidden: a checkbox takes its name from its content, and would be read as \"Loading <label>\". */}\n            <Loader size='100%' aria-hidden />\n          </div>\n        ) : (\n          <div\n            style={{\n              width,\n              height,\n              ...(background ? ({ '--checkbox-fill': background } as React.CSSProperties) : null),\n              ...slotStyles?.checkmark,\n            }}\n            className={cx(\n              styles.checkboxCheckmark,\n              currSelected && styles.checkboxCheckmarkChecked,\n              classNames?.checkmark,\n            )}\n          >\n            <Ripple\n              ref={rippleRef}\n              manualOnly\n              overflowHidden={false}\n              rippleAnimationLength={0.3}\n              rippleBackground='radial-gradient(transparent, var(--primary-color))'\n            />\n            <svg\n              strokeLinejoin='round'\n              strokeLinecap='round'\n              xmlns='http://www.w3.org/2000/svg'\n              viewBox='-0.5 -1.5 4 2.6'\n            >\n              <path d='M 0 0 l 1 1 l 2 -2' strokeWidth='0.4' fill='none' />\n            </svg>\n          </div>\n        )}\n      </div>\n      <div className={classNames?.label} style={{ lineHeight: lineHeight || '100%', ...slotStyles?.label }}>\n        {children || label}\n      </div>\n    </div>\n  );\n}\n\nexport default Checkbox;\n"],"mappings":"oVASA,SAAS,EAAS,EAAoC,CACpD,GAAM,CACJ,QAAQ,GACR,WAAW,GACX,eAAiB,CAAC,EAClB,YAAY,GACZ,QACA,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,EACX,gBAAgB,GAChB,QACA,SACA,gBAAgB,KAChB,WAAW,KACX,aAAa,KACb,YAAY,GACZ,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,WAAY,CAAK,EACpC,EAAY,EAAkC,IAAI,EAClD,EAAG,GAAe,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,SAAS,EAAa,EAAgD,CAChE,GAAY,IAChB,EAAU,SAAS,UAAU,EACzB,GACF,EAAc,IAAI,CAAC,EAAc,KAAK,EAExC,EAAS,CAAC,EAAU,CAAK,EAC3B,CAEA,IAAM,EAAgB,EAAgB,EAAc,MAAQ,EAE5D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,kBAAmB,GAC1B,EAAO,iBAAkB,CAAC,CAC7B,EACA,CACF,EAEA,MAAO,CAAE,GAAI,EAAS,CAAE,kBAAmB,CAAM,EAA4B,KAAO,GAAG,CAAM,EAC7F,QAAS,EACT,WAAa,GAAM,CACb,EAAE,MAAQ,SAAS,EAAa,CAAC,CACvC,EACA,KAAK,WACL,eAAc,EACd,gBAAe,GAAY,IAAA,GAC3B,YAAW,GAAa,EAAK,cAAgB,IAAA,GACnC,WApBZ,SAAA,CAsBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,KAElB,SAAA,EACC,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAoB,MAAO,CAAE,QAAO,QAAO,EAEhE,SAAA,EAAC,EAAD,CAAQ,KAAK,OAAO,cAAA,EAAa,CAAA,CAC9B,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CACL,QACA,SACA,GAAI,EAAc,CAAE,kBAAmB,CAAW,EAA4B,KAC9E,GAAG,GAAY,SACjB,EACA,UAAW,EACT,EAAO,kBACP,GAAgB,EAAO,yBACvB,GAAY,SACd,EAXF,SAAA,CAaE,EAAC,EAAD,CACE,IAAK,EACL,WAAA,GACA,eAAgB,GAChB,sBAAuB,GACvB,iBAAiB,oDAClB,CAAA,EACD,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBAER,SAAA,EAAC,OAAD,CAAM,EAAE,qBAAqB,YAAY,MAAM,KAAK,MAAQ,CAAA,CACzD,CAAA,CACF,GAEJ,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,CAAE,WAAY,GAAc,OAAQ,GAAG,GAAY,KAAM,EAChG,SAAA,GAAY,CACV,CAAA,CACF,GAET"}

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

@@ -1,2 +1,2 @@
-"use client";var e=`checkbox_VO3c2`,t=`checkbox-icon_7O0Hm`,n=`checkbox-loading_4t2-w`,r=`checkbox-loading-box_XBIHw`,i=`checkbox-loading-spinner_XzXt4`,a=`checkbox-pointer_XnO8e`,o=`checkbox-disabled_ML2rR`,s=`checkbox-checkmark_Xclv9`,c=`checkbox-checkmark-checked_mD4FI`,l={checkbox:e,"checkbox-icon":`checkbox-icon_7O0Hm`,checkboxIcon:t,"checkbox-loading":`checkbox-loading_4t2-w`,checkboxLoading:n,"checkbox-loading-box":`checkbox-loading-box_XBIHw`,checkboxLoadingBox:r,"checkbox-loading-spinner":`checkbox-loading-spinner_XzXt4`,checkboxLoadingSpinner:i,"checkbox-pointer":`checkbox-pointer_XnO8e`,checkboxPointer:a,"checkbox-disabled":`checkbox-disabled_ML2rR`,checkboxDisabled:o,"checkbox-checkmark":`checkbox-checkmark_Xclv9`,checkboxCheckmark:s,"checkbox-checkmark-checked":`checkbox-checkmark-checked_mD4FI`,checkboxCheckmarkChecked:c};export{e as checkbox,s as checkboxCheckmark,c as checkboxCheckmarkChecked,o as checkboxDisabled,t as checkboxIcon,n as checkboxLoading,r as checkboxLoadingBox,i as checkboxLoadingSpinner,a as checkboxPointer,l as default};
+"use client";var e=`checkbox_VO3c2`,t=`checkbox-icon_7O0Hm`,n=`checkbox-loading_4t2-w`,r=`checkbox-loading-box_XBIHw`,i=`checkbox-pointer_XnO8e`,a=`checkbox-disabled_ML2rR`,o=`checkbox-checkmark_Xclv9`,s=`checkbox-checkmark-checked_mD4FI`,c={checkbox:e,"checkbox-icon":`checkbox-icon_7O0Hm`,checkboxIcon:t,"checkbox-loading":`checkbox-loading_4t2-w`,checkboxLoading:n,"checkbox-loading-box":`checkbox-loading-box_XBIHw`,checkboxLoadingBox:r,"checkbox-pointer":`checkbox-pointer_XnO8e`,checkboxPointer:i,"checkbox-disabled":`checkbox-disabled_ML2rR`,checkboxDisabled:a,"checkbox-checkmark":`checkbox-checkmark_Xclv9`,checkboxCheckmark:o,"checkbox-checkmark-checked":`checkbox-checkmark-checked_mD4FI`,checkboxCheckmarkChecked:s};export{e as checkbox,o as checkboxCheckmark,s as checkboxCheckmarkChecked,a as checkboxDisabled,t as checkboxIcon,n as checkboxLoading,r as checkboxLoadingBox,i as checkboxPointer,c as default};
 //# sourceMappingURL=checkbox.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":[".checkbox {\n  --custom-checkbox-size: var(--checkbox-size, 1.375em);\n  --custom-checkbox-gap: var(--checkbox-gap, 0.5em);\n\n  user-select: none;\n  display: flex;\n  align-items: center;\n  column-gap: var(--custom-checkbox-gap);\n  margin: -1px;\n  border: 1px solid transparent;\n  width: fit-content;\n\n  /* The visible checkmark box (below) is nested inside this root, not directly on it — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --checkmark-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-icon {\n    color: var(--text-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background-color: var(--light-background-color);\n    width: fit-content;\n    height: fit-content;\n  }\n\n  &-loading {\n    background: transparent;\n\n    /* The spinner fills its box, so the box has to carry the checkmark's own size. */\n    &-box {\n      width: var(--custom-checkbox-size);\n      height: var(--custom-checkbox-size);\n    }\n\n    &-spinner {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  &-pointer {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &:focus-visible {\n    outline: none;\n    border: 1px solid var(--focus-border-color, var(--primary-color));\n    border-radius: 6px;\n  }\n\n  &-disabled {\n    filter: brightness(0.8);\n    cursor: not-allowed;\n  }\n\n  &-checkmark {\n    width: var(--custom-checkbox-size);\n    height: var(--custom-checkbox-size);\n    border: 0.1125em solid var(--border-color);\n    border-radius: var(--checkmark-radius);\n    position: relative;\n\n    /* The tick only. The fill is the box's own background below, which is what keeps the\n       checked and empty states the same size: an svg sized to be the fill sat proud of it. */\n    svg {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      padding: 0.125em;\n      stroke: var(--text-on-primary);\n      stroke-dasharray: 5;\n      stroke-dashoffset: 5;\n      transition:\n        transform 0.1s,\n        stroke-dashoffset 0.4s;\n      transition-delay: 0s, 0.2s;\n      transform: scale(0);\n    }\n\n    &-checked {\n      background: var(--checkbox-fill, var(--primary-color));\n      border-color: var(--checkbox-fill, var(--primary-color));\n\n      svg {\n        stroke-dashoffset: 0;\n        transform: scale(1);\n      }\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox-checkmark svg {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":[".checkbox {\n  --custom-checkbox-size: var(--checkbox-size, 1.375em);\n  --custom-checkbox-gap: var(--checkbox-gap, 0.5em);\n\n  user-select: none;\n  display: flex;\n  align-items: center;\n  column-gap: var(--custom-checkbox-gap);\n  margin: -1px;\n  border: 1px solid transparent;\n  width: fit-content;\n\n  /* The visible checkmark box (below) is nested inside this root, not directly on it — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --checkmark-radius: var(--group-radius-tl, var(--default-border-radius))\n    var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n    var(--group-radius-bl, var(--default-border-radius));\n\n  &-icon {\n    color: var(--text-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    background-color: var(--light-background-color);\n    width: fit-content;\n    height: fit-content;\n  }\n\n  &-loading {\n    background: transparent;\n\n    /* The spinner fills its box, so the box has to carry the checkmark's own size. */\n    &-box {\n      width: var(--custom-checkbox-size);\n      height: var(--custom-checkbox-size);\n    }\n  }\n\n  &-pointer {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &:focus-visible {\n    outline: none;\n    border: 1px solid var(--focus-border-color, var(--primary-color));\n    border-radius: 6px;\n  }\n\n  &-disabled {\n    filter: brightness(0.8);\n    cursor: not-allowed;\n  }\n\n  &-checkmark {\n    width: var(--custom-checkbox-size);\n    height: var(--custom-checkbox-size);\n    border: 0.1125em solid var(--border-color);\n    border-radius: var(--checkmark-radius);\n    position: relative;\n\n    /* The tick only. The fill is the box's own background below, which is what keeps the\n       checked and empty states the same size: an svg sized to be the fill sat proud of it. */\n    svg {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      padding: 0.125em;\n      stroke: var(--text-on-primary);\n      stroke-dasharray: 5;\n      stroke-dashoffset: 5;\n      transition:\n        transform 0.1s,\n        stroke-dashoffset 0.4s;\n      transition-delay: 0s, 0.2s;\n      transform: scale(0);\n    }\n\n    &-checked {\n      background: var(--checkbox-fill, var(--primary-color));\n      border-color: var(--checkbox-fill, var(--primary-color));\n\n      svg {\n        stroke-dashoffset: 0;\n        transform: scale(1);\n      }\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox-checkmark svg {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/dropdown/dropdown.mjs

@@ -1,2 +1,2 @@
-"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import r from"../loading/spinnerLoading/index.mjs";import i from"../styles/sheet.module.mjs";import{PopoverAlign as ee,PopoverPlacement as te}from"../popover/popover.types.mjs";import ne from"../hooks/useSheet.mjs";import re from"../popover/popover.mjs";import ie from"../tooltip/tooltip.mjs";import{edgeIndex as ae,nextIndex as oe,scrollOptionIntoView as se}from"../utils/listNavigation.mjs";import{useInfiniteScroll as ce}from"../infiniteBlock/useInfiniteScroll.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useId as le,useLayoutEffect as ue,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as de}from"@fortawesome/react-fontawesome";import{faChevronDown as fe}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var pe=500;function f(f){let{errorMessage:p=``,className:me=``,style:he,label:m=``,value:ge=``,isValid:_e=!0,tabIndex:ve=0,isRequired:ye=!1,customProps:h={},isRow:be=!1,disabled:g=!1,readOnly:_=!1,onScroll:xe=()=>Promise.resolve(),onClick:v,onChange:y,onFocus:Se=null,onBlur:Ce=null,onMouseEnter:we=null,onMouseLeave:Te=null,dropdownLabel:Ee,isDropdownListWider:b=!1,formValidator:x=null,classNames:S,styles:C,items:w=[],useMatLabelStyle:T=!0,alwaysFloatLabel:E=!1,placeholder:D=``,plainStyle:O=!1,scrollToSelected:De=!1,presentation:Oe,reactRef:ke,...Ae}=e(`Dropdown`,f),[je,Me]=c(!1),[Ne,Pe]=c(!1),[,Fe]=c(0),k=s(x),A=s(null),j=s(null),M=s(null),[Ie,Le]=c(!1),[N,P]=c(null),F=s({buffer:``,at:0}),I=le(),L=`${I}-listbox`,R=`${I}-label`,z=e=>`${I}-option-${e}`,B=!g&&!_,V=Ie&&B,{isLoading:Re,sentinelRef:ze}=ce(M,xe,!1),Be=t(),H=Oe??Be??n.Default,{isSheet:U}=ne(H);ue(()=>{let e=A.current,t=j.current;V&&!U&&e&&t&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[V,U]),o(()=>{if(k.current=x,!k.current)return;k.current.label=m??``,k.current.validate();let e=()=>Fe(e=>e+1);return k.current.registerOnUpdateListener(e),()=>k.current?.removeOnUpdateListener(e)},[x,m]);let W=x?x.value:ge,G=w.findIndex(e=>e.key===W);o(()=>{V&&N!==null&&se(M.current,document.getElementById(z(N)))},[V,N]);let Ve=e=>{Pe(!0),we?.(e)},He=e=>{Pe(!1),Te?.(e)},Ue=e=>{Me(!0),Se?.(e)},We=e=>{k.current&&(k.current.touched=!0),Me(!1),Ce?.(e)},Ge=()=>x?x.touched&&x.hasError():!_e||!!p,K=()=>!!(ye||x?.validators.find(e=>e.validatorId===`required`)),Ke=e=>{x?(x.set(e),y?.(x.value,h)):y?.(e,h)};function q(e){(!e||B)&&(Le(e),e?P(De&&G>=0?G:null):F.current={buffer:``,at:0})}function J(e){e.disabled||(Ke(e.key),q(!1))}let qe={isDisabled:e=>!!w[e].disabled};function Je(e){let t=Date.now(),n=t-F.current.at>pe?e:F.current.buffer+e;F.current={buffer:n,at:t};let r=n.toLowerCase(),i=w.findIndex(e=>!e.disabled&&typeof e.label==`string`&&e.label.toLowerCase().startsWith(r));i!==-1&&(V?P(i):J(w[i]))}function Ye(e){if(B){if(!V){e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`||e.key===` `?(e.preventDefault(),q(!0)):e.key.length===1&&Je(e.key);return}if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),P(oe(N,e.key===`ArrowDown`?1:-1,w.length,qe));else if(e.key===`Home`||e.key===`End`)e.preventDefault(),P(ae(e.key===`Home`?`first`:`last`,w.length,qe));else if(e.key===`Enter`||e.key===` `){e.preventDefault();let t=N===null?void 0:w[N];t?J(t):q(!1)}else e.key===`Escape`||e.key===`Tab`?q(!1):e.key.length===1&&Je(e.key)}}let Y=Ee,X=Ge();w.forEach(e=>{e.key===W&&(Y=e.label)});let Z=Y||W,Q=Z==null||typeof Z==`string`&&Z.trim()===``,Xe=K()?u(`span`,{className:a.requiredMark,children:`*`}):null,Ze=m&&K()?`${m} *`:m,$=je&&!_;return d(`div`,{...Ae,className:l(me,S?.root,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!be}),style:{...he,...C?.root},onMouseEnter:Ve,onMouseLeave:He,children:[u(`div`,{children:u(re,{isOpen:V,onOpenChange:q,disabled:!B,placement:te.Bottom,align:ee.Start,offset:0,withArrow:!1,constrainWidth:!1,width:`trigger`,focusOnOpen:!1,presentation:H,classNames:{panel:a.dropdownPanel},content:u(`div`,{ref:j,className:l(!U&&a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:b&&!U}),children:d(`div`,{ref:M,id:L,role:`listbox`,"aria-label":m||D||void 0,className:l(a.dropdownInputList,U&&i.sheetScroll,S?.list),style:C?.list,children:[w.map((e,t)=>u(`div`,{id:z(t),role:`option`,"aria-selected":e.key===W,"aria-disabled":e.disabled||void 0,style:C?.option,className:l(a.dropdownInputListItem,S?.option,{[a.dropdownInputListItemActive]:N===t,[a.dropdownInputListItemSelected]:e.key===W,[a.dropdownInputListItemDisabled]:!!e.disabled}),onMouseDown:e=>e.preventDefault(),onMouseEnter:()=>P(t),onClick:()=>J(e),children:e.label},e.key)),u(`div`,{ref:ze,className:a.dropdownSentinel,"aria-hidden":`true`}),Re&&u(`div`,{className:a.dropdownLoadMore,"aria-hidden":`true`,children:u(r,{className:a.dropdownLoadMoreSpinner})})]})}),children:d(`div`,{ref:A,onFocus:Ue,onBlur:We,className:l(a.dropdownInput,{[a.dropdownInputPlain]:O,[a.dropdownInputReadOnly]:_&&!g},S?.field),style:C?.field,children:[u(`button`,{tabIndex:ve,type:`button`,disabled:g,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":V,"aria-controls":L,"aria-activedescendant":V&&N!==null?z(N):void 0,"aria-labelledby":m?R:void 0,"aria-label":m?void 0:D||void 0,"aria-readonly":_||void 0,className:l(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:g,[a.dropdownInputButtonReadOnly]:_&&!g},S?.control),style:{...b?{padding:`6px`,border:`none`}:{},...C?.control},onKeyDown:Ye,onClick:v,ref:ke,children:Q?`\xA0`:Z}),u(`button`,{type:`button`,tabIndex:-1,disabled:g,"aria-hidden":`true`,className:l(a.dropdownInputButtonIcon,S?.icon),style:C?.icon,onMouseDown:e=>e.preventDefault(),onClick:v,children:!g&&!_&&u(de,{icon:fe,className:l(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:V})})}),u(`fieldset`,{className:l(a.dropdownFieldset,{[a.dropdownBorderPlain]:O,[a.dropdownBorderFocused]:$,[a.dropdownBorderInvalid]:X,[a.dropdownBorderError]:X}),children:u(`legend`,{className:l(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:T&&(E||$||!Q)}),children:u(`span`,{children:Ze})})}),T&&m&&d(`div`,{id:R,className:l(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:E||$||!Q},S?.label),style:C?.label,children:[m,Xe]}),T&&D&&u(`div`,{className:l(a.dropdownPlaceholder,$&&!Y&&a.dropdownPlaceholderShown),children:D})]})})}),m&&!T&&d(`div`,{id:R,className:l(a.dropdownLabelText,S?.label),style:C?.label,children:[m,Xe]}),u(ie,{variant:`error`,message:x?x.getCurrentErrorMessage():p||``,isVisible:X&&(je||Ne)})]})}export{f as default};
+"use client";import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{usePresentationDefault as t}from"../configProvider/usePresentationDefault.mjs";import{Presentation as n}from"../configProvider/presentation.types.mjs";import r from"../loader/loader.mjs";import i from"../styles/sheet.module.mjs";import{PopoverAlign as ee,PopoverPlacement as te}from"../popover/popover.types.mjs";import ne from"../hooks/useSheet.mjs";import re from"../popover/popover.mjs";import ie from"../tooltip/tooltip.mjs";import{edgeIndex as ae,nextIndex as oe,scrollOptionIntoView as se}from"../utils/listNavigation.mjs";import{useInfiniteScroll as ce}from"../infiniteBlock/useInfiniteScroll.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useId as le,useLayoutEffect as ue,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as de}from"@fortawesome/react-fontawesome";import{faChevronDown as fe}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var pe=500;function f(f){let{errorMessage:p=``,className:me=``,style:he,label:m=``,value:ge=``,isValid:_e=!0,tabIndex:ve=0,isRequired:ye=!1,customProps:h={},isRow:be=!1,disabled:g=!1,readOnly:_=!1,onScroll:xe=()=>Promise.resolve(),onClick:v,onChange:y,onFocus:Se=null,onBlur:Ce=null,onMouseEnter:we=null,onMouseLeave:Te=null,dropdownLabel:Ee,isDropdownListWider:b=!1,formValidator:x=null,classNames:S,styles:C,items:w=[],useMatLabelStyle:T=!0,alwaysFloatLabel:E=!1,placeholder:D=``,plainStyle:O=!1,scrollToSelected:De=!1,presentation:Oe,reactRef:ke,...Ae}=e(`Dropdown`,f),[je,Me]=c(!1),[Ne,Pe]=c(!1),[,Fe]=c(0),k=s(x),A=s(null),j=s(null),M=s(null),[Ie,Le]=c(!1),[N,P]=c(null),F=s({buffer:``,at:0}),I=le(),L=`${I}-listbox`,R=`${I}-label`,z=e=>`${I}-option-${e}`,B=!g&&!_,V=Ie&&B,{isLoading:Re,sentinelRef:ze}=ce(M,xe,!1),Be=t(),H=Oe??Be??n.Default,{isSheet:U}=ne(H);ue(()=>{let e=A.current,t=j.current;V&&!U&&e&&t&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[V,U]),o(()=>{if(k.current=x,!k.current)return;k.current.label=m??``,k.current.validate();let e=()=>Fe(e=>e+1);return k.current.registerOnUpdateListener(e),()=>k.current?.removeOnUpdateListener(e)},[x,m]);let W=x?x.value:ge,G=w.findIndex(e=>e.key===W);o(()=>{V&&N!==null&&se(M.current,document.getElementById(z(N)))},[V,N]);let Ve=e=>{Pe(!0),we?.(e)},He=e=>{Pe(!1),Te?.(e)},Ue=e=>{Me(!0),Se?.(e)},We=e=>{k.current&&(k.current.touched=!0),Me(!1),Ce?.(e)},Ge=()=>x?x.touched&&x.hasError():!_e||!!p,K=()=>!!(ye||x?.validators.find(e=>e.validatorId===`required`)),Ke=e=>{x?(x.set(e),y?.(x.value,h)):y?.(e,h)};function q(e){(!e||B)&&(Le(e),e?P(De&&G>=0?G:null):F.current={buffer:``,at:0})}function J(e){e.disabled||(Ke(e.key),q(!1))}let qe={isDisabled:e=>!!w[e].disabled};function Je(e){let t=Date.now(),n=t-F.current.at>pe?e:F.current.buffer+e;F.current={buffer:n,at:t};let r=n.toLowerCase(),i=w.findIndex(e=>!e.disabled&&typeof e.label==`string`&&e.label.toLowerCase().startsWith(r));i!==-1&&(V?P(i):J(w[i]))}function Ye(e){if(B){if(!V){e.key===`ArrowDown`||e.key===`ArrowUp`||e.key===`Enter`||e.key===` `?(e.preventDefault(),q(!0)):e.key.length===1&&Je(e.key);return}if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),P(oe(N,e.key===`ArrowDown`?1:-1,w.length,qe));else if(e.key===`Home`||e.key===`End`)e.preventDefault(),P(ae(e.key===`Home`?`first`:`last`,w.length,qe));else if(e.key===`Enter`||e.key===` `){e.preventDefault();let t=N===null?void 0:w[N];t?J(t):q(!1)}else e.key===`Escape`||e.key===`Tab`?q(!1):e.key.length===1&&Je(e.key)}}let Y=Ee,X=Ge();w.forEach(e=>{e.key===W&&(Y=e.label)});let Z=Y||W,Q=Z==null||typeof Z==`string`&&Z.trim()===``,Xe=K()?u(`span`,{className:a.requiredMark,children:`*`}):null,Ze=m&&K()?`${m} *`:m,$=je&&!_;return d(`div`,{...Ae,className:l(me,S?.root,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!be}),style:{...he,...C?.root},onMouseEnter:Ve,onMouseLeave:He,children:[u(`div`,{children:u(re,{isOpen:V,onOpenChange:q,disabled:!B,placement:te.Bottom,align:ee.Start,offset:0,withArrow:!1,constrainWidth:!1,width:`trigger`,focusOnOpen:!1,presentation:H,classNames:{panel:a.dropdownPanel},content:u(`div`,{ref:j,className:l(!U&&a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:b&&!U}),children:d(`div`,{ref:M,id:L,role:`listbox`,"aria-label":m||D||void 0,className:l(a.dropdownInputList,U&&i.sheetScroll,S?.list),style:C?.list,children:[w.map((e,t)=>u(`div`,{id:z(t),role:`option`,"aria-selected":e.key===W,"aria-disabled":e.disabled||void 0,style:C?.option,className:l(a.dropdownInputListItem,S?.option,{[a.dropdownInputListItemActive]:N===t,[a.dropdownInputListItemSelected]:e.key===W,[a.dropdownInputListItemDisabled]:!!e.disabled}),onMouseDown:e=>e.preventDefault(),onMouseEnter:()=>P(t),onClick:()=>J(e),children:e.label},e.key)),u(`div`,{ref:ze,className:a.dropdownSentinel,"aria-hidden":`true`}),Re&&u(`div`,{className:a.dropdownLoadMore,"aria-hidden":`true`,children:u(r,{size:32})})]})}),children:d(`div`,{ref:A,onFocus:Ue,onBlur:We,className:l(a.dropdownInput,{[a.dropdownInputPlain]:O,[a.dropdownInputReadOnly]:_&&!g},S?.field),style:C?.field,children:[u(`button`,{tabIndex:ve,type:`button`,disabled:g,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":V,"aria-controls":L,"aria-activedescendant":V&&N!==null?z(N):void 0,"aria-labelledby":m?R:void 0,"aria-label":m?void 0:D||void 0,"aria-readonly":_||void 0,className:l(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:g,[a.dropdownInputButtonReadOnly]:_&&!g},S?.control),style:{...b?{padding:`6px`,border:`none`}:{},...C?.control},onKeyDown:Ye,onClick:v,ref:ke,children:Q?`\xA0`:Z}),u(`button`,{type:`button`,tabIndex:-1,disabled:g,"aria-hidden":`true`,className:l(a.dropdownInputButtonIcon,S?.icon),style:C?.icon,onMouseDown:e=>e.preventDefault(),onClick:v,children:!g&&!_&&u(de,{icon:fe,className:l(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:V})})}),u(`fieldset`,{className:l(a.dropdownFieldset,{[a.dropdownBorderPlain]:O,[a.dropdownBorderFocused]:$,[a.dropdownBorderInvalid]:X,[a.dropdownBorderError]:X}),children:u(`legend`,{className:l(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:T&&(E||$||!Q)}),children:u(`span`,{children:Ze})})}),T&&m&&d(`div`,{id:R,className:l(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:E||$||!Q},S?.label),style:C?.label,children:[m,Xe]}),T&&D&&u(`div`,{className:l(a.dropdownPlaceholder,$&&!Y&&a.dropdownPlaceholderShown),children:D})]})})}),m&&!T&&d(`div`,{id:R,className:l(a.dropdownLabelText,S?.label),style:C?.label,children:[m,Xe]}),u(ie,{variant:`error`,message:x?x.getCurrentErrorMessage():p||``,isVisible:X&&(je||Ne)})]})}export{f as default};
 //# sourceMappingURL=dropdown.mjs.map