@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/Select/Select2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select2.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["/**\n * Select Component\n *\n * Single-select listbox with an optional search filter, icons, descriptions and\n * a disabled-but-visible option state. The listbox is portalled, so a select\n * near the bottom of a scrolling panel is not clipped by it.\n *\n * Every string it renders arrives as a prop with an English default, so the\n * component resolves no locale key of its own.\n */\n\nimport { useState, useRef, useEffect, useCallback, useId, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./Select.css\";\n\nexport interface SelectOption<T extends string = string> {\n  value: T;\n  label: string;\n  description?: string;\n  icon?: ReactNode;\n  /** Keep an unavailable choice visible while preventing its selection. */\n  disabled?: boolean;\n}\n\nexport interface SelectProps<T extends string = string> {\n  value: T;\n  onChange: (value: T) => void;\n  onBlur?: () => void;\n  options: SelectOption<T>[];\n  /**\n   * Field label rendered above the trigger, the way `TextInput` renders its\n   * own. Names the trigger and the listbox through `aria-labelledby`, so a\n   * caller that supplies it does not also need `aria-label`.\n   */\n  label?: ReactNode;\n  placeholder?: string;\n  disabled?: boolean;\n  size?: \"small\" | \"default\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  className?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  invalid?: boolean;\n  /**\n   * Shown in place of the list when a search matches nothing. English default,\n   * because this package cannot resolve a consumer's locale key: a product that\n   * localises passes its own words.\n   */\n  noOptionsLabel?: string;\n}\n\nexport function Select<T extends string = string>({\n  value,\n  onChange,\n  onBlur,\n  options,\n  label,\n  placeholder = \"Select...\",\n  disabled = false,\n  size = \"default\",\n  fullWidth = false,\n  className = \"\",\n  searchable = false,\n  searchPlaceholder,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  invalid = false,\n  noOptionsLabel = \"No options\",\n}: SelectProps<T>) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [dropdownPosition, setDropdownPosition] = useState({\n    top: 0,\n    left: 0,\n    width: 0,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const optionsRef = useRef<(HTMLDivElement | null)[]>([]);\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n  const labelId = useId();\n  const hasLabel = label !== undefined && label !== null && label !== false;\n\n  // Find selected option\n  const selectedOption = options.find((opt) => opt.value === value);\n  const visibleOptions = useMemo(() => {\n    const normalizedQuery = searchQuery.trim().toLowerCase();\n    if (!searchable || normalizedQuery.length === 0) return options;\n    return options.filter((option) =>\n      [option.label, option.value, option.description ?? \"\"].some((candidate) =>\n        candidate.toLowerCase().includes(normalizedQuery),\n      ),\n    );\n  }, [options, searchQuery, searchable]);\n\n  const findEnabledIndex = useCallback(\n    (start: number, step: 1 | -1): number => {\n      for (\n        let index = start;\n        index >= 0 && index < visibleOptions.length;\n        index += step\n      ) {\n        const option = visibleOptions[index];\n        if (option && !option.disabled) return index;\n      }\n      return -1;\n    },\n    [visibleOptions],\n  );\n\n  // Generate unique option ID\n  const getOptionId = (index: number) => `${optionIdPrefix}-option-${String(index)}`;\n\n  // Get active descendant ID for screen readers\n  const activeDescendantId = focusedIndex >= 0 ? getOptionId(focusedIndex) : undefined;\n\n  // Calculate dropdown position\n  const updateDropdownPosition = useCallback(() => {\n    if (!triggerRef.current) return;\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    setDropdownPosition({\n      top: rect.bottom + 4,\n      left: rect.left,\n      width: rect.width, // Use trigger width as minimum, but allow expansion\n    });\n  }, []);\n\n  // Open dropdown\n  const openDropdown = useCallback(() => {\n    if (disabled) return;\n    updateDropdownPosition();\n    setIsOpen(true);\n    const selectedIndex = visibleOptions.findIndex(\n      (opt) => opt.value === value && !opt.disabled,\n    );\n    setFocusedIndex(selectedIndex !== -1 ? selectedIndex : findEnabledIndex(0, 1));\n  }, [disabled, visibleOptions, value, updateDropdownPosition, findEnabledIndex]);\n\n  // Close dropdown\n  const closeDropdown = useCallback(() => {\n    setIsOpen(false);\n    setFocusedIndex(-1);\n    setSearchQuery(\"\");\n    triggerRef.current?.focus();\n  }, []);\n\n  // Handle option selection\n  const selectOption = useCallback(\n    (option: SelectOption<T>, e?: React.MouseEvent) => {\n      if (e) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n      if (option.disabled) return;\n      onChange(option.value);\n      closeDropdown();\n    },\n    [onChange, closeDropdown],\n  );\n\n  // Handle click outside to close\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!isOpen) return;\n      const target = event.target as Node;\n      // Check if click is outside both the container and the dropdown (which is portaled)\n      const isOutsideContainer =\n        containerRef.current && !containerRef.current.contains(target);\n      const isOutsideDropdown =\n        dropdownRef.current && !dropdownRef.current.contains(target);\n      if (isOutsideContainer && isOutsideDropdown) {\n        closeDropdown();\n      }\n    };\n\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && isOpen) {\n        closeDropdown();\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      document.addEventListener(\"keydown\", handleEscape);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, closeDropdown]);\n\n  // Handle window resize/scroll to update dropdown position\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handlePositionUpdate = () => {\n      updateDropdownPosition();\n    };\n\n    window.addEventListener(\"resize\", handlePositionUpdate);\n    window.addEventListener(\"scroll\", handlePositionUpdate, true);\n\n    return () => {\n      window.removeEventListener(\"resize\", handlePositionUpdate);\n      window.removeEventListener(\"scroll\", handlePositionUpdate, true);\n    };\n  }, [isOpen, updateDropdownPosition]);\n\n  useEffect(() => {\n    if (isOpen && searchable) {\n      searchInputRef.current?.focus();\n    }\n  }, [isOpen, searchable]);\n\n  useEffect(() => {\n    if (!isOpen || !searchable) return;\n    optionsRef.current = [];\n    const selectedIndex = visibleOptions.findIndex(\n      (option) => option.value === value && !option.disabled,\n    );\n    setFocusedIndex(selectedIndex >= 0 ? selectedIndex : findEnabledIndex(0, 1));\n  }, [isOpen, searchQuery, searchable, value, visibleOptions, findEnabledIndex]);\n\n  // Keyboard navigation\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case \"Enter\":\n        case \" \":\n          e.preventDefault();\n          if (isOpen) {\n            const focusedOption = visibleOptions[focusedIndex];\n            if (focusedOption) {\n              selectOption(focusedOption);\n            }\n          } else {\n            openDropdown();\n          }\n          break;\n\n        case \"Escape\":\n          e.preventDefault();\n          if (isOpen) {\n            closeDropdown();\n          }\n          break;\n\n        case \"ArrowDown\":\n          e.preventDefault();\n          if (!isOpen) {\n            openDropdown();\n          } else {\n            const nextIndex = findEnabledIndex(focusedIndex + 1, 1);\n            if (nextIndex >= 0) setFocusedIndex(nextIndex);\n          }\n          break;\n\n        case \"ArrowUp\":\n          e.preventDefault();\n          if (isOpen) {\n            const previousIndex = findEnabledIndex(focusedIndex - 1, -1);\n            if (previousIndex >= 0) setFocusedIndex(previousIndex);\n          }\n          break;\n\n        case \"Tab\":\n          if (isOpen) {\n            closeDropdown();\n          }\n          break;\n      }\n    },\n    [\n      disabled,\n      isOpen,\n      focusedIndex,\n      visibleOptions,\n      findEnabledIndex,\n      openDropdown,\n      closeDropdown,\n      selectOption,\n    ],\n  );\n\n  const handleSearchKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      switch (event.key) {\n        case \"Enter\": {\n          event.preventDefault();\n          const focusedOption = visibleOptions[focusedIndex];\n          if (focusedOption) selectOption(focusedOption);\n          break;\n        }\n        case \"Escape\":\n          event.preventDefault();\n          event.stopPropagation();\n          closeDropdown();\n          break;\n        case \"ArrowDown\":\n          event.preventDefault();\n          setFocusedIndex((current) => {\n            const nextIndex = findEnabledIndex(current + 1, 1);\n            return nextIndex >= 0 ? nextIndex : current;\n          });\n          break;\n        case \"ArrowUp\":\n          event.preventDefault();\n          setFocusedIndex((current) => {\n            const previousIndex = findEnabledIndex(current - 1, -1);\n            return previousIndex >= 0 ? previousIndex : current;\n          });\n          break;\n        case \"Tab\":\n          closeDropdown();\n          break;\n      }\n    },\n    [closeDropdown, focusedIndex, selectOption, visibleOptions, findEnabledIndex],\n  );\n\n  // Scroll focused option into view\n  useEffect(() => {\n    const focusedElement = optionsRef.current[focusedIndex];\n    if (isOpen && focusedIndex >= 0 && focusedElement) {\n      focusedElement.scrollIntoView({\n        block: \"nearest\",\n        behavior: \"smooth\",\n      });\n    }\n  }, [isOpen, focusedIndex]);\n\n  const sizeClass = size !== \"default\" ? `select--${size}` : \"\";\n  const widthClass = fullWidth ? \"select--full-width\" : \"\";\n  const labelledClass = hasLabel ? \"select--labelled\" : \"\";\n  // aria-labelledby wins over aria-label in the accessible-name calculation,\n  // so a caller may pass either; the rendered label is preferred when present.\n  const labelledBy = hasLabel ? labelId : undefined;\n  const searchFieldLabel = searchPlaceholder ?? ariaLabel;\n\n  return (\n    <div\n      ref={containerRef}\n      className={`select ${sizeClass} ${widthClass} ${labelledClass} ${isOpen ? \"select--open\" : \"\"} ${disabled ? \"select--disabled\" : \"\"} ${className}`}\n    >\n      {hasLabel && (\n        <span className=\"select__label\" id={labelId}>\n          {label}\n        </span>\n      )}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className=\"select__trigger\"\n        onClick={() => {\n          if (isOpen) {\n            closeDropdown();\n          } else {\n            openDropdown();\n          }\n        }}\n        onKeyDown={handleKeyDown}\n        onBlur={onBlur}\n        disabled={disabled}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? listboxId : undefined}\n        aria-activedescendant={isOpen ? activeDescendantId : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-invalid={invalid || undefined}\n      >\n        {selectedOption ? (\n          <span className=\"select__value\">\n            {selectedOption.icon && (\n              <span className=\"select__value-icon\">{selectedOption.icon}</span>\n            )}\n            <span className=\"select__value-label\">{selectedOption.label}</span>\n          </span>\n        ) : (\n          <span className=\"select__placeholder\">{placeholder}</span>\n        )}\n        <span className={`select__chevron ${isOpen ? \"select__chevron--open\" : \"\"}`}>\n          <svg\n            width=\"10\"\n            height=\"6\"\n            viewBox=\"0 0 10 6\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M1 1L5 5L9 1\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {isOpen &&\n        createPortal(\n          <div\n            ref={dropdownRef}\n            className=\"select__dropdown select__dropdown--portal\"\n            style={{\n              position: \"fixed\",\n              top: `${String(dropdownPosition.top)}px`,\n              left: `${String(dropdownPosition.left)}px`,\n              width: `${String(dropdownPosition.width)}px`,\n            }}\n          >\n            {searchable && (\n              <div className=\"select__search\">\n                <input\n                  ref={searchInputRef}\n                  className=\"select__search-input\"\n                  type=\"search\"\n                  value={searchQuery}\n                  onChange={(event) => setSearchQuery(event.currentTarget.value)}\n                  onKeyDown={handleSearchKeyDown}\n                  placeholder={searchPlaceholder}\n                  aria-label={searchFieldLabel}\n                  aria-labelledby={searchFieldLabel ? undefined : labelledBy}\n                  aria-controls={listboxId}\n                  aria-activedescendant={activeDescendantId}\n                  autoComplete=\"off\"\n                  spellCheck={false}\n                />\n              </div>\n            )}\n            <div\n              className=\"select__options\"\n              role=\"listbox\"\n              id={listboxId}\n              aria-label={ariaLabel}\n              aria-labelledby={labelledBy}\n            >\n              {visibleOptions.length === 0 ? (\n                <div className=\"select__empty\">{noOptionsLabel}</div>\n              ) : (\n                visibleOptions.map((option, index) => (\n                  <div\n                    key={option.value}\n                    id={getOptionId(index)}\n                    ref={(el) => {\n                      optionsRef.current[index] = el;\n                    }}\n                    className={`select__option ${\n                      option.value === value ? \"select__option--selected\" : \"\"\n                    } ${index === focusedIndex ? \"select__option--focused\" : \"\"} ${option.disabled ? \"select__option--disabled\" : \"\"}`}\n                    role=\"option\"\n                    aria-selected={option.value === value}\n                    aria-disabled={option.disabled || undefined}\n                    aria-label={\n                      option.description\n                        ? option.label + \". \" + option.description\n                        : undefined\n                    }\n                    onClick={(e) => {\n                      selectOption(option, e);\n                    }}\n                    onMouseEnter={() => {\n                      if (!option.disabled) setFocusedIndex(index);\n                    }}\n                  >\n                    {option.icon && (\n                      <span className=\"select__option-icon\">{option.icon}</span>\n                    )}\n                    <div className=\"select__option-content\">\n                      <span className=\"select__option-label\">{option.label}</span>\n                      {option.description && (\n                        <span className=\"select__option-description\">\n                          {option.description}\n                        </span>\n                      )}\n                    </div>\n                    {option.value === value && (\n                      <span className=\"select__option-check\">\n                        <svg\n                          width=\"14\"\n                          height=\"10\"\n                          viewBox=\"0 0 14 10\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                          <path\n                            d=\"M1 5L5 9L13 1\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                      </span>\n                    )}\n                  </div>\n                ))\n              )}\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectOption, SelectProps } from './Select';

package/dist/components/Select/index.js

@@ -0,0 +1,2 @@
+import { Select as e } from "./Select2.js";
+export { e as Select };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -11,6 +11,16 @@ export interface SkeletonProps {
     testId?: string;
     /** Accessible label announced while the skeleton is visible. Default: "Loading" */
     loadingLabel?: string;
+    /**
+     * Render as decoration: `aria-hidden`, with no role, no `aria-busy` and no
+     * label.
+     *
+     * For a shape inside a composite that announces the wait itself. `role="status"`
+     * is an implicit polite live region, so a composite that fills its own region
+     * with named primitives mounts one live region per shape and announces the
+     * same wait once per shape.
+     */
+    decorative?: boolean;
 }
 /**
  * Skeleton provides a loading placeholder with shimmer animation.
@@ -21,5 +31,5 @@ export interface SkeletonProps {
  * - Multiple shape variants
  * - Accessible via aria-busy and aria-label
  */
-export declare function Skeleton({ width, height, variant, className, testId, loadingLabel, }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ width, height, variant, className, testId, loadingLabel, decorative, }: SkeletonProps): import("react").JSX.Element;
 export default Skeleton;

package/dist/components/Skeleton/Skeleton2.js

@@ -1,21 +1,23 @@
 /* empty css         */
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/Skeleton/Skeleton.tsx
-function t({ width: t = "100%", height: n = "20px", variant: r = "rect", className: i = "", testId: a, loadingLabel: o = "Loading" }) {
-	let s = [
+function t({ width: t = "100%", height: n = "20px", variant: r = "rect", className: i = "", testId: a, loadingLabel: o = "Loading", decorative: s = !1 }) {
+	let c = [
 		"skeleton",
 		`skeleton--${r}`,
 		i
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ e("div", {
-		className: s,
+		className: c,
 		style: {
 			width: t,
 			height: n
 		},
-		role: "status",
-		"aria-busy": "true",
-		"aria-label": o,
+		...s ? { "aria-hidden": !0 } : {
+			role: "status",
+			"aria-busy": !0,
+			"aria-label": o
+		},
 		"data-testid": a,
 		children: /* @__PURE__ */ e("span", { className: "skeleton__shimmer" })
 	});

package/dist/components/Skeleton/Skeleton2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton2.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/**\n * Skeleton Component\n *\n * Base skeleton component for loading states.\n * Provides a shimmer animation effect that respects prefers-reduced-motion.\n *\n * @example\n * // Basic usage\n * <Skeleton width=\"100%\" height=\"20px\" />\n *\n * @example\n * // Circle skeleton\n * <Skeleton width=\"40px\" height=\"40px\" variant=\"circle\" />\n */\n\nimport \"./Skeleton.css\";\n\nexport interface SkeletonProps {\n  /** Width of the skeleton (CSS value) */\n  width?: string;\n  /** Height of the skeleton (CSS value) */\n  height?: string;\n  /** Visual variant */\n  variant?: \"rect\" | \"circle\" | \"text\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the skeleton is visible. Default: \"Loading\" */\n  loadingLabel?: string;\n}\n\n/**\n * Skeleton provides a loading placeholder with shimmer animation.\n *\n * Features:\n * - Shimmer effect using CSS animation\n * - Reduced motion preference support\n * - Multiple shape variants\n * - Accessible via aria-busy and aria-label\n */\nexport function Skeleton({\n  width = \"100%\",\n  height = \"20px\",\n  variant = \"rect\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading\",\n}: SkeletonProps) {\n  const classNames = [\"skeleton\", `skeleton--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ width, height }}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n      data-testid={testId}\n    >\n      <span className=\"skeleton__shimmer\" />\n    </div>\n  );\n}\n\nexport default Skeleton;\n"],"mappings":";;;AAyCA,SAAgB,EAAS,EACvB,WAAQ,QACR,YAAS,QACT,aAAU,QACV,eAAY,IACZ,WACA,kBAAe,aACC;CAChB,IAAM,IAAa;EAAC;EAAY,aAAa;EAAW;CAAS,CAAC,CAC/D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO;GAAE;GAAO;EAAO;EACvB,MAAK;EACL,aAAU;EACV,cAAY;EACZ,eAAa;EAEb,UAAA,kBAAC,QAAD,EAAM,WAAU,oBAAqB,CAAA;CAClC,CAAA;AAET"}
+{"version":3,"file":"Skeleton2.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/**\n * Skeleton Component\n *\n * Base skeleton component for loading states.\n * Provides a shimmer animation effect that respects prefers-reduced-motion.\n *\n * @example\n * // Basic usage\n * <Skeleton width=\"100%\" height=\"20px\" />\n *\n * @example\n * // Circle skeleton\n * <Skeleton width=\"40px\" height=\"40px\" variant=\"circle\" />\n */\n\nimport \"./Skeleton.css\";\n\nexport interface SkeletonProps {\n  /** Width of the skeleton (CSS value) */\n  width?: string;\n  /** Height of the skeleton (CSS value) */\n  height?: string;\n  /** Visual variant */\n  variant?: \"rect\" | \"circle\" | \"text\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the skeleton is visible. Default: \"Loading\" */\n  loadingLabel?: string;\n  /**\n   * Render as decoration: `aria-hidden`, with no role, no `aria-busy` and no\n   * label.\n   *\n   * For a shape inside a composite that announces the wait itself. `role=\"status\"`\n   * is an implicit polite live region, so a composite that fills its own region\n   * with named primitives mounts one live region per shape and announces the\n   * same wait once per shape.\n   */\n  decorative?: boolean;\n}\n\n/**\n * Skeleton provides a loading placeholder with shimmer animation.\n *\n * Features:\n * - Shimmer effect using CSS animation\n * - Reduced motion preference support\n * - Multiple shape variants\n * - Accessible via aria-busy and aria-label\n */\nexport function Skeleton({\n  width = \"100%\",\n  height = \"20px\",\n  variant = \"rect\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading\",\n  decorative = false,\n}: SkeletonProps) {\n  const classNames = [\"skeleton\", `skeleton--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // A decorative shape is one of several inside a composite that already\n  // announces the wait. It keeps its size and its shimmer and leaves the\n  // accessibility tree, so a card built from seven of these is one live region\n  // rather than seven.\n  const announcement = decorative\n    ? ({ \"aria-hidden\": true } as const)\n    : ({\n        role: \"status\",\n        \"aria-busy\": true,\n        \"aria-label\": loadingLabel,\n      } as const);\n\n  return (\n    <div\n      className={classNames}\n      style={{ width, height }}\n      {...announcement}\n      data-testid={testId}\n    >\n      <span className=\"skeleton__shimmer\" />\n    </div>\n  );\n}\n\nexport default Skeleton;\n"],"mappings":";;;AAmDA,SAAgB,EAAS,EACvB,WAAQ,QACR,YAAS,QACT,aAAU,QACV,eAAY,IACZ,WACA,kBAAe,WACf,gBAAa,MACG;CAChB,IAAM,IAAa;EAAC;EAAY,aAAa;EAAW;CAAS,CAAC,CAC/D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAcX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO;GAAE;GAAO;EAAO;EACvB,GAZiB,IAChB,EAAE,eAAe,GAAK,IACtB;GACC,MAAM;GACN,aAAa;GACb,cAAc;EAChB;EAOA,eAAa;EAEb,UAAA,kBAAC,QAAD,EAAM,WAAU,oBAAqB,CAAA;CAClC,CAAA;AAET"}

package/dist/components/Skeleton/SkeletonCard.d.ts

@@ -5,6 +5,8 @@ export interface SkeletonCardProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name announced for the placeholder as a whole. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonCard provides a loading placeholder for card components.
@@ -14,5 +16,5 @@ export interface SkeletonCardProps {
  * - compact: Smaller card with reduced padding
  * - stat: Statistics card layout
  */
-export declare function SkeletonCard({ variant, className, testId, }: SkeletonCardProps): import("react").JSX.Element;
+export declare function SkeletonCard({ variant, className, testId, loadingLabel, }: SkeletonCardProps): import("react").JSX.Element;
 export default SkeletonCard;

package/dist/components/Skeleton/SkeletonCard2.js

@@ -2,29 +2,33 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css             */
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonCard.tsx
-function i({ variant: i = "default", className: a = "", testId: o }) {
-	let s = [
+function i({ variant: i = "default", className: a = "", testId: o, loadingLabel: s }) {
+	let c = [
 		"skeleton-card",
 		`skeleton-card--${i}`,
 		a
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ n("div", {
-		className: s,
+		className: c,
 		"data-testid": o,
 		role: "status",
 		"aria-busy": "true",
+		"aria-label": s ?? "Loading",
 		children: i === "stat" ? /* @__PURE__ */ n(t, { children: /* @__PURE__ */ r("div", {
 			className: "skeleton-card__header",
 			children: [/* @__PURE__ */ n(e, {
+				decorative: !0,
 				width: "48px",
 				height: "48px",
 				variant: "circle"
 			}), /* @__PURE__ */ r("div", {
 				className: "skeleton-card__header-text",
 				children: [/* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "60%",
 					height: "16px"
 				}), /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "40%",
 					height: "24px"
 				})]
@@ -33,6 +37,7 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 			/* @__PURE__ */ n("div", {
 				className: "skeleton-card__header",
 				children: /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "70%",
 					height: "20px"
 				})
@@ -41,14 +46,17 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 				className: "skeleton-card__content",
 				children: [
 					/* @__PURE__ */ n(e, {
+						decorative: !0,
 						width: "100%",
 						height: "16px"
 					}),
 					/* @__PURE__ */ n(e, {
+						decorative: !0,
 						width: "90%",
 						height: "16px"
 					}),
 					/* @__PURE__ */ n(e, {
+						decorative: !0,
 						width: "80%",
 						height: "16px"
 					})
@@ -57,9 +65,11 @@ function i({ variant: i = "default", className: a = "", testId: o }) {
 			i !== "compact" && /* @__PURE__ */ r("div", {
 				className: "skeleton-card__footer",
 				children: [/* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "80px",
 					height: "32px"
 				}), /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "80px",
 					height: "32px"
 				})]

package/dist/components/Skeleton/SkeletonCard2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonCard.tsx"],"sourcesContent":["/**\n * SkeletonCard Component\n *\n * Skeleton placeholder for card components (model cards, stat cards, etc.).\n * Mimics the structure of a typical card with header, content, and footer areas.\n *\n * @example\n * // Basic usage\n * <SkeletonCard />\n *\n * @example\n * // Compact variant\n * <SkeletonCard variant=\"compact\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonCard.css\";\n\nexport interface SkeletonCardProps {\n  /** Card size variant */\n  variant?: \"default\" | \"compact\" | \"stat\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonCard provides a loading placeholder for card components.\n *\n * Variants:\n * - default: Full card with header, content, and footer\n * - compact: Smaller card with reduced padding\n * - stat: Statistics card layout\n */\nexport function SkeletonCard({\n  variant = \"default\",\n  className = \"\",\n  testId,\n}: SkeletonCardProps) {\n  const classNames = [\"skeleton-card\", `skeleton-card--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {variant === \"stat\" ? (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton width=\"48px\" height=\"48px\" variant=\"circle\" />\n            <div className=\"skeleton-card__header-text\">\n              <Skeleton width=\"60%\" height=\"16px\" />\n              <Skeleton width=\"40%\" height=\"24px\" />\n            </div>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton width=\"70%\" height=\"20px\" />\n          </div>\n          <div className=\"skeleton-card__content\">\n            <Skeleton width=\"100%\" height=\"16px\" />\n            <Skeleton width=\"90%\" height=\"16px\" />\n            <Skeleton width=\"80%\" height=\"16px\" />\n          </div>\n          {variant !== \"compact\" && (\n            <div className=\"skeleton-card__footer\">\n              <Skeleton width=\"80px\" height=\"32px\" />\n              <Skeleton width=\"80px\" height=\"32px\" />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonCard;\n"],"mappings":";;;;AAmCA,SAAgB,EAAa,EAC3B,aAAU,WACV,eAAY,IACZ,aACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,MAAY,SACX,kBAAA,GAAA,EAAA,UACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GACvD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,GACrC,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,CAClC;GACF,CAAA,CAAA;EACL,CAAA,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA;GAClC,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;KAAQ,CAAA;KACtC,kBAAC,GAAD;MAAU,OAAM;MAAM,QAAO;KAAQ,CAAA;KACrC,kBAAC,GAAD;MAAU,OAAM;MAAM,QAAO;KAAQ,CAAA;IAClC;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,GACtC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;EAEP,EAAA,CAAA;CAED,CAAA;AAET"}
+{"version":3,"file":"SkeletonCard2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonCard.tsx"],"sourcesContent":["/**\n * SkeletonCard Component\n *\n * Skeleton placeholder for card components (model cards, stat cards, etc.).\n * Mimics the structure of a typical card with header, content, and footer areas.\n *\n * @example\n * // Basic usage\n * <SkeletonCard />\n *\n * @example\n * // Compact variant\n * <SkeletonCard variant=\"compact\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonCard.css\";\n\nexport interface SkeletonCardProps {\n  /** Card size variant */\n  variant?: \"default\" | \"compact\" | \"stat\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name announced for the placeholder as a whole. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonCard provides a loading placeholder for card components.\n *\n * Variants:\n * - default: Full card with header, content, and footer\n * - compact: Smaller card with reduced padding\n * - stat: Statistics card layout\n */\nexport function SkeletonCard({\n  variant = \"default\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonCardProps) {\n  const classNames = [\"skeleton-card\", `skeleton-card--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel ?? \"Loading\"}\n    >\n      {variant === \"stat\" ? (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton decorative width=\"48px\" height=\"48px\" variant=\"circle\" />\n            <div className=\"skeleton-card__header-text\">\n              <Skeleton decorative width=\"60%\" height=\"16px\" />\n              <Skeleton decorative width=\"40%\" height=\"24px\" />\n            </div>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton decorative width=\"70%\" height=\"20px\" />\n          </div>\n          <div className=\"skeleton-card__content\">\n            <Skeleton decorative width=\"100%\" height=\"16px\" />\n            <Skeleton decorative width=\"90%\" height=\"16px\" />\n            <Skeleton decorative width=\"80%\" height=\"16px\" />\n          </div>\n          {variant !== \"compact\" && (\n            <div className=\"skeleton-card__footer\">\n              <Skeleton decorative width=\"80px\" height=\"32px\" />\n              <Skeleton decorative width=\"80px\" height=\"32px\" />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonCard;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,aAAU,WACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY,KAAgB;EAE3B,UAAA,MAAY,SACX,kBAAA,GAAA,EAAA,UACE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,YAAA;IAAW,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GAClE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAM,QAAO;IAAQ,CAAA,GAChD,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAM,QAAO;IAAQ,CAAA,CAC7C;GACF,CAAA,CAAA;EACL,CAAA,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAM,QAAO;IAAQ,CAAA;GAC7C,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAO,QAAO;KAAQ,CAAA;KACjD,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAM,QAAO;KAAQ,CAAA;KAChD,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAM,QAAO;KAAQ,CAAA;IAC7C;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,GACjD,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC9C;;EAEP,EAAA,CAAA;CAED,CAAA;AAET"}

package/dist/components/Skeleton/SkeletonChart2.js

@@ -18,6 +18,7 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 		children: r === "pie" ? /* @__PURE__ */ n("div", {
 			className: "skeleton-chart__pie",
 			children: [/* @__PURE__ */ t(e, {
+				decorative: !0,
 				width: "100%",
 				height: "100%",
 				variant: "circle"
@@ -26,10 +27,12 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 				children: Array.from({ length: 4 }).map((r, i) => /* @__PURE__ */ n("div", {
 					className: "skeleton-chart__legend-item",
 					children: [/* @__PURE__ */ t(e, {
+						decorative: !0,
 						width: "16px",
 						height: "16px",
 						variant: "circle"
 					}), /* @__PURE__ */ t(e, {
+						decorative: !0,
 						width: "80px",
 						height: "14px"
 					})]
@@ -47,6 +50,7 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 				85,
 				65
 			].map((n, r) => /* @__PURE__ */ t(e, {
+				decorative: !0,
 				width: "100%",
 				height: `${String(n)}%`,
 				className: "skeleton-chart__bar"
@@ -54,6 +58,7 @@ function r({ variant: r = "bar", height: i = "300px", className: a = "", testId:
 		}) : /* @__PURE__ */ t("div", {
 			className: "skeleton-chart__line",
 			children: /* @__PURE__ */ t(e, {
+				decorative: !0,
 				width: "100%",
 				height: "100%"
 			})

package/dist/components/Skeleton/SkeletonChart2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonChart2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonChart.tsx"],"sourcesContent":["/**\n * SkeletonChart Component\n *\n * Skeleton placeholder for chart components.\n * Shows a simplified chart-like shape with bars or circular elements.\n *\n * @example\n * // Bar chart skeleton\n * <SkeletonChart variant=\"bar\" />\n *\n * @example\n * // Pie chart skeleton\n * <SkeletonChart variant=\"pie\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonChart.css\";\n\nexport interface SkeletonChartProps {\n  /** Chart type variant */\n  variant?: \"bar\" | \"line\" | \"pie\" | \"area\";\n  /** Chart height */\n  height?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the chart is loading. Default: \"Loading chart\" */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonChart provides a loading placeholder for chart components.\n *\n * Variants:\n * - bar: Vertical bars of varying heights\n * - line: Line graph placeholder\n * - pie: Circular chart placeholder\n * - area: Area chart placeholder\n */\nexport function SkeletonChart({\n  variant = \"bar\",\n  height = \"300px\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading chart\",\n}: SkeletonChartProps) {\n  const classNames = [\"skeleton-chart\", `skeleton-chart--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ height }}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n    >\n      {variant === \"pie\" ? (\n        <div className=\"skeleton-chart__pie\">\n          <Skeleton width=\"100%\" height=\"100%\" variant=\"circle\" />\n          <div className=\"skeleton-chart__legend\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"skeleton-chart__legend-item\">\n                <Skeleton width=\"16px\" height=\"16px\" variant=\"circle\" />\n                <Skeleton width=\"80px\" height=\"14px\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      ) : variant === \"bar\" ? (\n        <div className=\"skeleton-chart__bars\">\n          {[60, 80, 45, 90, 70, 55, 85, 65].map((barHeight, i) => (\n            <Skeleton\n              key={i}\n              width=\"100%\"\n              height={`${String(barHeight)}%`}\n              className=\"skeleton-chart__bar\"\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"skeleton-chart__line\">\n          <Skeleton width=\"100%\" height=\"100%\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonChart;\n"],"mappings":";;;;AAwCA,SAAgB,EAAc,EAC5B,aAAU,OACV,YAAS,SACT,eAAY,IACZ,WACA,kBAAe,mBACM;CACrB,IAAM,IAAa;EAAC;EAAkB,mBAAmB;EAAW;CAAS,CAAC,CAC3E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO,EAAE,UAAO;EAChB,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY;EAEX,UAAA,MAAY,QACX,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GACvD,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD;KAAa,WAAU;KAAvB,UAAA,CACE,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;MAAO,SAAQ;KAAU,CAAA,GACvD,kBAAC,GAAD;MAAU,OAAM;MAAO,QAAO;KAAQ,CAAA,CACnC;IAHK,GAAA,CAGL,CACN;GACE,CAAA,CACF;EACH,CAAA,IAAA,MAAY,QACd,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,GAAW,MAChD,kBAAC,GAAD;IAEE,OAAM;IACN,QAAQ,GAAG,OAAO,CAAS,EAAE;IAC7B,WAAU;GACX,GAJM,CAIN,CACF;EACE,CAAA,IAEL,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IAAU,OAAM;IAAO,QAAO;GAAQ,CAAA;EACnC,CAAA;CAEJ,CAAA;AAET"}
+{"version":3,"file":"SkeletonChart2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonChart.tsx"],"sourcesContent":["/**\n * SkeletonChart Component\n *\n * Skeleton placeholder for chart components.\n * Shows a simplified chart-like shape with bars or circular elements.\n *\n * @example\n * // Bar chart skeleton\n * <SkeletonChart variant=\"bar\" />\n *\n * @example\n * // Pie chart skeleton\n * <SkeletonChart variant=\"pie\" />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonChart.css\";\n\nexport interface SkeletonChartProps {\n  /** Chart type variant */\n  variant?: \"bar\" | \"line\" | \"pie\" | \"area\";\n  /** Chart height */\n  height?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the chart is loading. Default: \"Loading chart\" */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonChart provides a loading placeholder for chart components.\n *\n * Variants:\n * - bar: Vertical bars of varying heights\n * - line: Line graph placeholder\n * - pie: Circular chart placeholder\n * - area: Area chart placeholder\n */\nexport function SkeletonChart({\n  variant = \"bar\",\n  height = \"300px\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading chart\",\n}: SkeletonChartProps) {\n  const classNames = [\"skeleton-chart\", `skeleton-chart--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ height }}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n    >\n      {variant === \"pie\" ? (\n        <div className=\"skeleton-chart__pie\">\n          <Skeleton decorative width=\"100%\" height=\"100%\" variant=\"circle\" />\n          <div className=\"skeleton-chart__legend\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"skeleton-chart__legend-item\">\n                <Skeleton decorative width=\"16px\" height=\"16px\" variant=\"circle\" />\n                <Skeleton decorative width=\"80px\" height=\"14px\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      ) : variant === \"bar\" ? (\n        <div className=\"skeleton-chart__bars\">\n          {[60, 80, 45, 90, 70, 55, 85, 65].map((barHeight, i) => (\n            <Skeleton\n              decorative\n              key={i}\n              width=\"100%\"\n              height={`${String(barHeight)}%`}\n              className=\"skeleton-chart__bar\"\n            />\n          ))}\n        </div>\n      ) : (\n        <div className=\"skeleton-chart__line\">\n          <Skeleton decorative width=\"100%\" height=\"100%\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default SkeletonChart;\n"],"mappings":";;;;AAwCA,SAAgB,EAAc,EAC5B,aAAU,OACV,YAAS,SACT,eAAY,IACZ,WACA,kBAAe,mBACM;CACrB,IAAM,IAAa;EAAC;EAAkB,mBAAmB;EAAW;CAAS,CAAC,CAC3E,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO,EAAE,UAAO;EAChB,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY;EAEX,UAAA,MAAY,QACX,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,GAAD;IAAU,YAAA;IAAW,OAAM;IAAO,QAAO;IAAO,SAAQ;GAAU,CAAA,GAClE,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD;KAAa,WAAU;KAAvB,UAAA,CACE,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAO,QAAO;MAAO,SAAQ;KAAU,CAAA,GAClE,kBAAC,GAAD;MAAU,YAAA;MAAW,OAAM;MAAO,QAAO;KAAQ,CAAA,CAC9C;IAHK,GAAA,CAGL,CACN;GACE,CAAA,CACF;EACH,CAAA,IAAA,MAAY,QACd,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA;IAAC;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;IAAI;GAAE,CAAC,CAAC,KAAK,GAAW,MAChD,kBAAC,GAAD;IACE,YAAA;IAEA,OAAM;IACN,QAAQ,GAAG,OAAO,CAAS,EAAE;IAC7B,WAAU;GACX,GAJM,CAIN,CACF;EACE,CAAA,IAEL,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IAAU,YAAA;IAAW,OAAM;IAAO,QAAO;GAAQ,CAAA;EAC9C,CAAA;CAEJ,CAAA;AAET"}

package/dist/components/Skeleton/SkeletonRow.d.ts

@@ -9,6 +9,8 @@ export interface SkeletonRowProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name announced for the placeholder as a whole. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonRow provides a loading placeholder for list/table rows.
@@ -18,5 +20,5 @@ export interface SkeletonRowProps {
  * - Optional action buttons
  * - Multiple rows for lists
  */
-export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, }: SkeletonRowProps): import("react").JSX.Element;
+export declare function SkeletonRow({ showAvatar, showActions, count, className, testId, loadingLabel, }: SkeletonRowProps): import("react").JSX.Element;
 export default SkeletonRow;

package/dist/components/Skeleton/SkeletonRow2.js

@@ -2,17 +2,19 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css            */
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonRow.tsx
-function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c }) {
-	let l = Array.from({ length: o });
-	return /* @__PURE__ */ n(t, { children: l.map((t, o) => /* @__PURE__ */ r("div", {
+function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c, loadingLabel: l }) {
+	let u = Array.from({ length: o });
+	return /* @__PURE__ */ n(t, { children: u.map((t, o) => /* @__PURE__ */ r("div", {
 		className: `skeleton-row ${s}`,
 		"data-testid": c ? `${c}-${String(o)}` : void 0,
 		role: "status",
 		"aria-busy": "true",
+		"aria-label": l ?? "Loading",
 		children: [
 			i && /* @__PURE__ */ n("div", {
 				className: "skeleton-row__avatar",
 				children: /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "40px",
 					height: "40px",
 					variant: "circle"
@@ -21,9 +23,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			/* @__PURE__ */ r("div", {
 				className: "skeleton-row__content",
 				children: [/* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "25%",
 					height: "14px"
 				}), /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "100%",
 					height: "16px"
 				})]
@@ -31,9 +35,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			a && /* @__PURE__ */ r("div", {
 				className: "skeleton-row__actions",
 				children: [/* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "32px",
 					height: "32px"
 				}), /* @__PURE__ */ n(e, {
+					decorative: !0,
 					width: "32px",
 					height: "32px"
 				})]

package/dist/components/Skeleton/SkeletonRow2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n}: SkeletonRowProps) {\n  const rows = Array.from({ length: count });\n\n  return (\n    <>\n      {rows.map((_, index) => (\n        <div\n          key={index}\n          className={`skeleton-row ${className}`}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton width=\"40px\" height=\"40px\" variant=\"circle\" />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton width=\"25%\" height=\"14px\" />\n            <Skeleton width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton width=\"32px\" height=\"32px\" />\n              <Skeleton width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAuCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,aACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EALZ,UAAA;GAOG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;KAAO,SAAQ;IAAU,CAAA;GACpD,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,GACrC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,GACtC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;EAEJ;CArBE,GAAA,CAqBF,CACN,EACD,CAAA;AAEN"}
+{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name announced for the placeholder as a whole. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonRowProps) {\n  const rows = Array.from({ length: count });\n\n  return (\n    <>\n      {rows.map((_, index) => (\n        <div\n          key={index}\n          className={`skeleton-row ${className}`}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n          aria-label={loadingLabel ?? \"Loading\"}\n        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton decorative width=\"40px\" height=\"40px\" variant=\"circle\" />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton decorative width=\"25%\" height=\"14px\" />\n            <Skeleton decorative width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton decorative width=\"32px\" height=\"32px\" />\n              <Skeleton decorative width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAyCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,WACA,mBACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EACV,cAAY,KAAgB;EAN9B,UAAA;GAQG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;KAAO,SAAQ;IAAU,CAAA;GAC/D,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAM,QAAO;IAAQ,CAAA,GAChD,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC9C;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,GACjD,kBAAC,GAAD;KAAU,YAAA;KAAW,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC9C;;EAEJ;CAtBE,GAAA,CAsBF,CACN,EACD,CAAA;AAEN"}

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -7,6 +7,8 @@ export interface SkeletonTextProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name announced for the placeholder as a whole. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonText provides a loading placeholder for text content.
@@ -16,5 +18,5 @@ export interface SkeletonTextProps {
  * - Configurable line spacing
  * - Accessible via aria-busy
  */
-export declare function SkeletonText({ lines, spacing, className, testId, }: SkeletonTextProps): import("react").JSX.Element;
+export declare function SkeletonText({ lines, spacing, className, testId, loadingLabel, }: SkeletonTextProps): import("react").JSX.Element;
 export default SkeletonText;

package/dist/components/Skeleton/SkeletonText2.js

@@ -2,18 +2,20 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css             */
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonText.tsx
-function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a }) {
-	let o = [
+function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a, loadingLabel: o }) {
+	let s = [
 		"skeleton-text",
 		`skeleton-text--${r}`,
 		i
-	].filter(Boolean).join(" "), s = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
+	].filter(Boolean).join(" "), c = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
 	return /* @__PURE__ */ t("div", {
-		className: o,
+		className: s,
 		"data-testid": a,
 		role: "status",
 		"aria-busy": "true",
-		children: s.map((n, r) => /* @__PURE__ */ t(e, {
+		"aria-label": o ?? "Loading",
+		children: c.map((n, r) => /* @__PURE__ */ t(e, {
+			decorative: !0,
 			width: n,
 			height: "1em",
 			variant: "text"

package/dist/components/Skeleton/SkeletonText2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton key={index} width={width} height=\"1em\" variant=\"text\" />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,aACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GAA6B;GAAO,QAAO;GAAM,SAAQ;EAAQ,GAAlD,CAAkD,CAClE;CACE,CAAA;AAET"}
+{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name announced for the placeholder as a whole. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div\n      className={classNames}\n      data-testid={testId}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel ?? \"Loading\"}\n    >\n      {widths.map((width, index) => (\n        <Skeleton decorative key={index} width={width} height=\"1em\" variant=\"text\" />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAuCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EACE,WAAW;EACX,eAAa;EACb,MAAK;EACL,aAAU;EACV,cAAY,KAAgB;EAE3B,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GAAU,YAAA;GAA8B;GAAO,QAAO;GAAM,SAAQ;EAAQ,GAAlD,CAAkD,CAC7E;CACE,CAAA;AAET"}

package/dist/components/StatCard/StatCard.d.ts

@@ -13,6 +13,15 @@ export interface StatCardTrend {
 export interface StatCardProps {
     /** Short label rendered above the value (UPPERCASE styled) */
     label: string;
+    /**
+     * Rendered in place of `label` when the label is not plain text: a glossary
+     * term carrying its definition, a unit badge, an info affordance.
+     *
+     * `label` stays required and stays the accessible name, so the name is a
+     * string the consumer wrote rather than whatever text happens to fall out of
+     * a node. Pass the same words in both.
+     */
+    labelNode?: ReactNode;
     /** Primary metric value (number is coerced to localised string) */
     value: string | number;
     /** Optional suffix appended to the value (e.g. "/ 4", "GB") */
@@ -54,6 +63,6 @@ export interface StatCardProps {
     /** Visual weight. Default: "default" */
     emphasis?: StatCardEmphasis;
 }
-declare function StatCardComponent({ label, value, valueSuffix, hint, icon, tone, trend, onClick, loading, ariaLabel, className, testId, format, animate, sparkline, emphasis, }: StatCardProps): JSX.Element;
+declare function StatCardComponent({ label, labelNode, value, valueSuffix, hint, icon, tone, trend, onClick, loading, ariaLabel, className, testId, format, animate, sparkline, emphasis, }: StatCardProps): JSX.Element;
 export declare const StatCard: import('react').MemoExoticComponent<typeof StatCardComponent>;
 export {};

package/dist/components/StatCard/StatCard2.js

@@ -30,76 +30,76 @@ var d = {
 function f(e, t) {
 	return typeof e == "number" ? t ? t(e) : e.toLocaleString() : e;
 }
-function p({ label: r, value: i, valueSuffix: a, hint: o, icon: l, tone: p = "default", trend: m, onClick: h, loading: g = !1, ariaLabel: _, className: v = "", testId: y, format: b, animate: x = !1, sparkline: S, emphasis: C = "default" }) {
-	let w = n(), T = typeof i == "number", E = x && T && !g && !w, D = u(T ? i : 0, E), O = f(T && E ? D : i, b), k = _ ?? (g ? r : `${r}: ${f(i, b)}${a ?? ""}`), A = [
+function p({ label: r, labelNode: i, value: a, valueSuffix: o, hint: l, icon: p, tone: m = "default", trend: h, onClick: g, loading: _ = !1, ariaLabel: v, className: y = "", testId: b, format: x, animate: S = !1, sparkline: C, emphasis: w = "default" }) {
+	let T = n(), E = typeof a == "number", D = S && E && !_ && !T, O = u(E ? a : 0, D), k = f(E && D ? O : a, x), A = v ?? (_ ? r : `${r}: ${f(a, x)}${o ?? ""}`), j = [
 		"stat-card",
 		"corner-accent",
-		`stat-card--tone-${p}`,
-		C === "default" ? "" : `stat-card--${C}`,
-		v
+		`stat-card--tone-${m}`,
+		w === "default" ? "" : `stat-card--${w}`,
+		y
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ c(e, {
-		className: A,
-		onClick: h,
-		role: h ? void 0 : "group",
-		ariaLabel: k,
-		testId: y,
+		className: j,
+		onClick: g,
+		role: g ? void 0 : "group",
+		ariaLabel: A,
+		testId: b,
 		children: [
 			/* @__PURE__ */ c("div", {
 				className: "stat-card__header",
 				children: [/* @__PURE__ */ s("span", {
 					className: "stat-card__label",
-					children: r
-				}), l && /* @__PURE__ */ s("span", {
+					children: i ?? r
+				}), p && /* @__PURE__ */ s("span", {
 					className: "stat-card__icon",
 					"aria-hidden": "true",
-					children: l
+					children: p
 				})]
 			}),
 			/* @__PURE__ */ c("div", {
 				className: "stat-card__body",
-				children: [g ? /* @__PURE__ */ s(t, {
+				children: [_ ? /* @__PURE__ */ s(t, {
 					width: "60%",
 					height: "2rem"
-				}) : S ? /* @__PURE__ */ c("span", {
+				}) : C ? /* @__PURE__ */ c("span", {
 					className: "stat-card__value-line",
 					children: [/* @__PURE__ */ c("span", {
 						className: "stat-card__value-row",
 						children: [/* @__PURE__ */ s("span", {
 							className: "stat-card__value",
-							children: O
-						}), a && /* @__PURE__ */ s("span", {
+							children: k
+						}), o && /* @__PURE__ */ s("span", {
 							className: "stat-card__value-suffix",
-							children: a
+							children: o
 						})]
 					}), /* @__PURE__ */ s("span", {
 						className: "stat-card__sparkline",
-						children: S
+						children: C
 					})]
 				}) : /* @__PURE__ */ c("span", {
 					className: "stat-card__value-row",
 					children: [/* @__PURE__ */ s("span", {
 						className: "stat-card__value",
-						children: O
-					}), a && /* @__PURE__ */ s("span", {
+						children: k
+					}), o && /* @__PURE__ */ s("span", {
 						className: "stat-card__value-suffix",
-						children: a
+						children: o
 					})]
-				}), m && !g && /* @__PURE__ */ c("span", {
-					className: `stat-card__trend stat-card__trend--${m.direction}`,
-					"aria-label": m.ariaLabel ?? m.label,
+				}), h && !_ && /* @__PURE__ */ c("span", {
+					className: `stat-card__trend stat-card__trend--${h.direction}`,
+					"aria-label": h.ariaLabel ?? h.label,
 					children: [/* @__PURE__ */ s("span", {
 						"aria-hidden": "true",
-						children: d[m.direction]
-					}), /* @__PURE__ */ s("span", { children: m.label })]
+						children: d[h.direction]
+					}), /* @__PURE__ */ s("span", { children: h.label })]
 				})]
 			}),
-			o != null && /* @__PURE__ */ s("div", {
+			l != null && /* @__PURE__ */ s("div", {
 				className: "stat-card__hint",
-				children: g ? /* @__PURE__ */ s(t, {
+				children: _ ? /* @__PURE__ */ s(t, {
 					width: "80%",
 					height: "0.85rem"
-				}) : o
+				}) : l
 			})
 		]
 	});