@lablup/ui-common 0.1.0-alpha.18 → 0.1.0-alpha.19

package/dist/assets/components/Select/Select.css

@@ -0,0 +1 @@
+.select{display:inline-block;position:relative}.select--full-width{width:100%;display:block}.select--labelled{gap:var(--token-paddingXS);flex-direction:column;display:flex}.select__label{font-size:var(--token-fontSizeSM);color:var(--token-colorTextSecondary);font-weight:500}.select__trigger{justify-content:space-between;align-items:center;gap:var(--token-paddingSM);width:100%;min-height:var(--token-controlHeight);padding:var(--token-paddingXS) var(--token-padding);font-size:var(--token-fontSize);font-family:var(--token-fontFamily);color:var(--token-colorText);background-color:var(--token-colorBgContainer);border:1px solid var(--token-colorBorder);border-radius:var(--token-borderRadius);cursor:pointer;transition:all var(--token-motionDurationFast);text-align:left;display:flex}.select__trigger:hover:not(:disabled){border-color:var(--token-colorPrimary)}.select__trigger:focus{border-color:color-mix(in srgb, var(--token-colorPrimary) 70%, var(--token-colorText));box-shadow:0 0 0 2px var(--token-colorPrimaryBg);outline:none}.select--open .select__trigger{border-color:var(--token-colorPrimary);box-shadow:0 0 0 2px var(--token-colorPrimaryBg);border-bottom-right-radius:0;border-bottom-left-radius:0}.select--disabled .select__trigger{cursor:not-allowed;opacity:.6;background-color:var(--token-colorFillTertiary)}.select--small .select__trigger{min-height:var(--token-controlHeightSM);padding:var(--token-paddingXS) var(--token-paddingSM);font-size:var(--token-fontSizeSM)}.select--medium .select__trigger{min-height:var(--token-controlHeight);padding:var(--token-paddingXS) var(--token-padding);font-size:var(--token-fontSize)}.select--large .select__trigger{min-height:var(--token-controlHeightLG);padding:var(--token-paddingSM) var(--token-padding);font-size:var(--token-fontSize)}.select__trigger{min-width:120px}.select__value{align-items:center;gap:var(--token-paddingSM);flex:1;min-width:0;display:flex;overflow:hidden}.select__value-icon{color:var(--token-colorTextSecondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.select__value-label{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.select__placeholder{color:var(--token-colorTextTertiary)}.select__chevron{color:var(--token-colorTextSecondary);transition:transform var(--token-motionDurationFast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.select__chevron--open{transform:rotate(180deg)}.select__dropdown{z-index:var(--token-zIndexPopover);background:var(--token-colorBgElevated);border:1px solid var(--token-colorPrimary);border-radius:0 0 var(--token-borderRadius) var(--token-borderRadius);box-shadow:var(--token-boxShadowSecondary);border-top:none;flex-direction:column;max-height:240px;animation:.15s ease-out selectDropdownOpen;display:flex;position:absolute;top:100%;left:0;right:0;overflow:hidden}.select__dropdown--portal{border:1px solid var(--token-colorBorder);border-radius:var(--token-borderRadius);z-index:var(--token-zIndexTooltip);position:fixed}.select__search{padding:var(--token-paddingSM);background:var(--token-colorBgElevated);border-bottom:1px solid var(--token-colorBorderSecondary);flex-shrink:0}.select__search-input{box-sizing:border-box;width:100%;padding:var(--token-paddingXS) var(--token-paddingSM);font-family:var(--token-fontFamily);font-size:var(--token-fontSize);color:var(--token-colorText);background:var(--token-colorBgContainer);border:1px solid var(--token-colorBorder);border-radius:var(--token-borderRadiusSM);transition:border-color var(--token-motionDurationFast), box-shadow var(--token-motionDurationFast)}.select__search-input::placeholder{color:var(--token-colorTextPlaceholder)}.select__search-input:focus-visible{border-color:color-mix(in srgb, var(--token-colorPrimary) 70%, var(--token-colorText));box-shadow:0 0 0 2px var(--token-colorPrimaryBg);outline:none}.select__options{min-height:0;overflow-y:auto}@keyframes selectDropdownOpen{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select__options::-webkit-scrollbar{width:var(--token-scrollbarSize);height:var(--token-scrollbarSize)}.select__options::-webkit-scrollbar-track{background:0 0}.select__options::-webkit-scrollbar-thumb{background-color:var(--token-colorBorder);border-radius:var(--token-scrollbarRadius)}.select__options::-webkit-scrollbar-thumb:hover{background-color:var(--token-colorTextTertiary)}.select__option{align-items:center;gap:var(--token-paddingSM);padding:var(--token-paddingSM) var(--token-padding);font-size:var(--token-fontSize);color:var(--token-colorText);cursor:pointer;transition:background-color var(--token-motionDurationFast);-webkit-user-select:none;user-select:none;display:flex}.select__option--disabled{color:var(--token-colorTextDisabled);cursor:not-allowed}.select__option:first-child{border-radius:0}.select__option:last-child{border-radius:0 0 var(--token-borderRadius) var(--token-borderRadius)}.select__option:hover:not(.select__option--disabled),.select__option--focused:not(.select__option--disabled){background-color:var(--token-colorFillSecondary)}.select__option--selected{background-color:var(--token-colorPrimaryBg)}.select__option--selected:hover,.select__option--selected.select__option--focused{background-color:var(--token-colorPrimaryBgHover)}.select__option-icon{width:20px;height:20px;color:var(--token-colorTextSecondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.select__option--selected .select__option-icon{color:var(--token-colorPrimary)}.select__option-content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.select__option-label{font-weight:500}.select__option--selected .select__option-label{color:var(--token-colorPrimary)}.select__option-description{font-size:var(--token-fontSizeSM);color:var(--token-colorTextTertiary)}.select__option-check{color:var(--token-colorPrimary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.select__empty{padding:var(--token-padding) var(--token-paddingMD);color:var(--token-colorTextTertiary);text-align:center;font-style:italic}.select--large .select__option{padding:var(--token-paddingSM) var(--token-paddingMD);font-size:var(--token-fontSize)}.select--large .select__option-icon{width:24px;height:24px}.select--large .select__option-description{font-size:var(--token-fontSizeSM)}

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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export interface SelectOption<T extends string = string> {
+    value: T;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    /** Keep an unavailable choice visible while preventing its selection. */
+    disabled?: boolean;
+}
+export interface SelectProps<T extends string = string> {
+    value: T;
+    onChange: (value: T) => void;
+    onBlur?: () => void;
+    options: SelectOption<T>[];
+    /**
+     * Field label rendered above the trigger, the way `TextInput` renders its
+     * own. Names the trigger and the listbox through `aria-labelledby`, so a
+     * caller that supplies it does not also need `aria-label`.
+     */
+    label?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: "small" | "default" | "medium" | "large";
+    fullWidth?: boolean;
+    className?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    invalid?: boolean;
+    /**
+     * Shown in place of the list when a search matches nothing. English default,
+     * because this package cannot resolve a consumer's locale key: a product that
+     * localises passes its own words.
+     */
+    noOptionsLabel?: string;
+}
+export declare function Select<T extends string = string>({ value, onChange, onBlur, options, label, placeholder, disabled, size, fullWidth, className, searchable, searchPlaceholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, invalid, noOptionsLabel, }: SelectProps<T>): import("react").JSX.Element;

package/dist/components/Select/Select2.js

@@ -0,0 +1,313 @@
+/* empty css       */
+import { useCallback as e, useEffect as t, useId as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { createPortal as c } from "react-dom";
+//#region src/components/Select/Select.tsx
+function l({ value: l, onChange: u, onBlur: d, options: f, label: p, placeholder: ee = "Select...", disabled: m = !1, size: h = "default", fullWidth: g = !1, className: _ = "", searchable: v = !1, searchPlaceholder: y, "aria-label": b, "aria-describedby": x, invalid: S = !1, noOptionsLabel: C = "No options" }) {
+	let [w, T] = a(!1), [E, D] = a(-1), [O, k] = a(""), [A, te] = a({
+		top: 0,
+		left: 0,
+		width: 0
+	}), j = i(null), M = i(null), N = i(null), P = i(null), F = i([]), I = n(), L = n(), R = n(), z = p != null && p !== !1, B = f.find((e) => e.value === l), V = r(() => {
+		let e = O.trim().toLowerCase();
+		return !v || e.length === 0 ? f : f.filter((t) => [
+			t.label,
+			t.value,
+			t.description ?? ""
+		].some((t) => t.toLowerCase().includes(e)));
+	}, [
+		f,
+		O,
+		v
+	]), H = e((e, t) => {
+		for (let n = e; n >= 0 && n < V.length; n += t) {
+			let e = V[n];
+			if (e && !e.disabled) return n;
+		}
+		return -1;
+	}, [V]), U = (e) => `${L}-option-${String(e)}`, W = E >= 0 ? U(E) : void 0, G = e(() => {
+		if (!M.current) return;
+		let e = M.current.getBoundingClientRect();
+		te({
+			top: e.bottom + 4,
+			left: e.left,
+			width: e.width
+		});
+	}, []), K = e(() => {
+		if (m) return;
+		G(), T(!0);
+		let e = V.findIndex((e) => e.value === l && !e.disabled);
+		D(e === -1 ? H(0, 1) : e);
+	}, [
+		m,
+		V,
+		l,
+		G,
+		H
+	]), q = e(() => {
+		T(!1), D(-1), k(""), M.current?.focus();
+	}, []), J = e((e, t) => {
+		t && (t.stopPropagation(), t.preventDefault()), !e.disabled && (u(e.value), q());
+	}, [u, q]);
+	t(() => {
+		let e = (e) => {
+			if (!w) return;
+			let t = e.target, n = j.current && !j.current.contains(t), r = N.current && !N.current.contains(t);
+			n && r && q();
+		}, t = (e) => {
+			e.key === "Escape" && w && q();
+		};
+		return w && (document.addEventListener("mousedown", e), document.addEventListener("keydown", t)), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
+		};
+	}, [w, q]), t(() => {
+		if (!w) return;
+		let e = () => {
+			G();
+		};
+		return window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+			window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+		};
+	}, [w, G]), t(() => {
+		w && v && P.current?.focus();
+	}, [w, v]), t(() => {
+		if (!w || !v) return;
+		F.current = [];
+		let e = V.findIndex((e) => e.value === l && !e.disabled);
+		D(e >= 0 ? e : H(0, 1));
+	}, [
+		w,
+		O,
+		v,
+		l,
+		V,
+		H
+	]);
+	let Y = e((e) => {
+		if (!m) switch (e.key) {
+			case "Enter":
+			case " ":
+				if (e.preventDefault(), w) {
+					let e = V[E];
+					e && J(e);
+				} else K();
+				break;
+			case "Escape":
+				e.preventDefault(), w && q();
+				break;
+			case "ArrowDown":
+				if (e.preventDefault(), !w) K();
+				else {
+					let e = H(E + 1, 1);
+					e >= 0 && D(e);
+				}
+				break;
+			case "ArrowUp":
+				if (e.preventDefault(), w) {
+					let e = H(E - 1, -1);
+					e >= 0 && D(e);
+				}
+				break;
+			case "Tab": w && q();
+		}
+	}, [
+		m,
+		w,
+		E,
+		V,
+		H,
+		K,
+		q,
+		J
+	]), X = e((e) => {
+		switch (e.key) {
+			case "Enter": {
+				e.preventDefault();
+				let t = V[E];
+				t && J(t);
+				break;
+			}
+			case "Escape":
+				e.preventDefault(), e.stopPropagation(), q();
+				break;
+			case "ArrowDown":
+				e.preventDefault(), D((e) => {
+					let t = H(e + 1, 1);
+					return t >= 0 ? t : e;
+				});
+				break;
+			case "ArrowUp":
+				e.preventDefault(), D((e) => {
+					let t = H(e - 1, -1);
+					return t >= 0 ? t : e;
+				});
+				break;
+			case "Tab": q();
+		}
+	}, [
+		q,
+		E,
+		J,
+		V,
+		H
+	]);
+	t(() => {
+		let e = F.current[E];
+		w && E >= 0 && e && e.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [w, E]);
+	let Z = h === "default" ? "" : `select--${h}`, ne = g ? "select--full-width" : "", re = z ? "select--labelled" : "", Q = z ? R : void 0, $ = y ?? b;
+	return /* @__PURE__ */ s("div", {
+		ref: j,
+		className: `select ${Z} ${ne} ${re} ${w ? "select--open" : ""} ${m ? "select--disabled" : ""} ${_}`,
+		children: [
+			z && /* @__PURE__ */ o("span", {
+				className: "select__label",
+				id: R,
+				children: p
+			}),
+			/* @__PURE__ */ s("button", {
+				ref: M,
+				type: "button",
+				className: "select__trigger",
+				onClick: () => {
+					w ? q() : K();
+				},
+				onKeyDown: Y,
+				onBlur: d,
+				disabled: m,
+				"aria-haspopup": "listbox",
+				"aria-expanded": w,
+				"aria-controls": w ? I : void 0,
+				"aria-activedescendant": w ? W : void 0,
+				"aria-label": b,
+				"aria-labelledby": Q,
+				"aria-describedby": x,
+				"aria-invalid": S || void 0,
+				children: [B ? /* @__PURE__ */ s("span", {
+					className: "select__value",
+					children: [B.icon && /* @__PURE__ */ o("span", {
+						className: "select__value-icon",
+						children: B.icon
+					}), /* @__PURE__ */ o("span", {
+						className: "select__value-label",
+						children: B.label
+					})]
+				}) : /* @__PURE__ */ o("span", {
+					className: "select__placeholder",
+					children: ee
+				}), /* @__PURE__ */ o("span", {
+					className: `select__chevron ${w ? "select__chevron--open" : ""}`,
+					children: /* @__PURE__ */ o("svg", {
+						width: "10",
+						height: "6",
+						viewBox: "0 0 10 6",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ o("path", {
+							d: "M1 1L5 5L9 1",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})
+				})]
+			}),
+			w && c(/* @__PURE__ */ s("div", {
+				ref: N,
+				className: "select__dropdown select__dropdown--portal",
+				style: {
+					position: "fixed",
+					top: `${String(A.top)}px`,
+					left: `${String(A.left)}px`,
+					width: `${String(A.width)}px`
+				},
+				children: [v && /* @__PURE__ */ o("div", {
+					className: "select__search",
+					children: /* @__PURE__ */ o("input", {
+						ref: P,
+						className: "select__search-input",
+						type: "search",
+						value: O,
+						onChange: (e) => k(e.currentTarget.value),
+						onKeyDown: X,
+						placeholder: y,
+						"aria-label": $,
+						"aria-labelledby": $ ? void 0 : Q,
+						"aria-controls": I,
+						"aria-activedescendant": W,
+						autoComplete: "off",
+						spellCheck: !1
+					})
+				}), /* @__PURE__ */ o("div", {
+					className: "select__options",
+					role: "listbox",
+					id: I,
+					"aria-label": b,
+					"aria-labelledby": Q,
+					children: V.length === 0 ? /* @__PURE__ */ o("div", {
+						className: "select__empty",
+						children: C
+					}) : V.map((e, t) => /* @__PURE__ */ s("div", {
+						id: U(t),
+						ref: (e) => {
+							F.current[t] = e;
+						},
+						className: `select__option ${e.value === l ? "select__option--selected" : ""} ${t === E ? "select__option--focused" : ""} ${e.disabled ? "select__option--disabled" : ""}`,
+						role: "option",
+						"aria-selected": e.value === l,
+						"aria-disabled": e.disabled || void 0,
+						"aria-label": e.description ? e.label + ". " + e.description : void 0,
+						onClick: (t) => {
+							J(e, t);
+						},
+						onMouseEnter: () => {
+							e.disabled || D(t);
+						},
+						children: [
+							e.icon && /* @__PURE__ */ o("span", {
+								className: "select__option-icon",
+								children: e.icon
+							}),
+							/* @__PURE__ */ s("div", {
+								className: "select__option-content",
+								children: [/* @__PURE__ */ o("span", {
+									className: "select__option-label",
+									children: e.label
+								}), e.description && /* @__PURE__ */ o("span", {
+									className: "select__option-description",
+									children: e.description
+								})]
+							}),
+							e.value === l && /* @__PURE__ */ o("span", {
+								className: "select__option-check",
+								children: /* @__PURE__ */ o("svg", {
+									width: "14",
+									height: "10",
+									viewBox: "0 0 14 10",
+									fill: "none",
+									xmlns: "http://www.w3.org/2000/svg",
+									children: /* @__PURE__ */ o("path", {
+										d: "M1 5L5 9L13 1",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round"
+									})
+								})
+							})
+						]
+					}, e.value))
+				})]
+			}), document.body)
+		]
+	});
+}
+//#endregion
+export { l as Select };
+
+//# sourceMappingURL=Select2.js.map
+import "../../assets/components/Select/Select.css";

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,7 +5,7 @@ export interface SkeletonCardProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
-    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    /** Accessible name announced for the placeholder as a whole. Defaults to "Loading". */
     loadingLabel?: string;
 }
 /**

package/dist/components/Skeleton/SkeletonCard2.js

@@ -13,21 +13,22 @@ function i({ variant: i = "default", className: a = "", testId: o, loadingLabel:
 		"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, {
-				loadingLabel: s,
+				decorative: !0,
 				width: "48px",
 				height: "48px",
 				variant: "circle"
 			}), /* @__PURE__ */ r("div", {
 				className: "skeleton-card__header-text",
 				children: [/* @__PURE__ */ n(e, {
-					loadingLabel: s,
+					decorative: !0,
 					width: "60%",
 					height: "16px"
 				}), /* @__PURE__ */ n(e, {
-					loadingLabel: s,
+					decorative: !0,
 					width: "40%",
 					height: "24px"
 				})]
@@ -36,7 +37,7 @@ function i({ variant: i = "default", className: a = "", testId: o, loadingLabel:
 			/* @__PURE__ */ n("div", {
 				className: "skeleton-card__header",
 				children: /* @__PURE__ */ n(e, {
-					loadingLabel: s,
+					decorative: !0,
 					width: "70%",
 					height: "20px"
 				})
@@ -45,17 +46,17 @@ function i({ variant: i = "default", className: a = "", testId: o, loadingLabel:
 				className: "skeleton-card__content",
 				children: [
 					/* @__PURE__ */ n(e, {
-						loadingLabel: s,
+						decorative: !0,
 						width: "100%",
 						height: "16px"
 					}),
 					/* @__PURE__ */ n(e, {
-						loadingLabel: s,
+						decorative: !0,
 						width: "90%",
 						height: "16px"
 					}),
 					/* @__PURE__ */ n(e, {
-						loadingLabel: s,
+						decorative: !0,
 						width: "80%",
 						height: "16px"
 					})
@@ -64,11 +65,11 @@ function i({ variant: i = "default", className: a = "", testId: o, loadingLabel:
 			i !== "compact" && /* @__PURE__ */ r("div", {
 				className: "skeleton-card__footer",
 				children: [/* @__PURE__ */ n(e, {
-					loadingLabel: s,
+					decorative: !0,
 					width: "80px",
 					height: "32px"
 				}), /* @__PURE__ */ n(e, {
-					loadingLabel: s,
+					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  /** Accessible name for each skeleton inside. 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 className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {variant === \"stat\" ? (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton\n              loadingLabel={loadingLabel}\n              width=\"48px\"\n              height=\"48px\"\n              variant=\"circle\"\n            />\n            <div className=\"skeleton-card__header-text\">\n              <Skeleton loadingLabel={loadingLabel} width=\"60%\" height=\"16px\" />\n              <Skeleton loadingLabel={loadingLabel} width=\"40%\" height=\"24px\" />\n            </div>\n          </div>\n        </>\n      ) : (\n        <>\n          <div className=\"skeleton-card__header\">\n            <Skeleton loadingLabel={loadingLabel} width=\"70%\" height=\"20px\" />\n          </div>\n          <div className=\"skeleton-card__content\">\n            <Skeleton loadingLabel={loadingLabel} width=\"100%\" height=\"16px\" />\n            <Skeleton loadingLabel={loadingLabel} width=\"90%\" height=\"16px\" />\n            <Skeleton loadingLabel={loadingLabel} width=\"80%\" height=\"16px\" />\n          </div>\n          {variant !== \"compact\" && (\n            <div className=\"skeleton-card__footer\">\n              <Skeleton loadingLabel={loadingLabel} width=\"80px\" height=\"32px\" />\n              <Skeleton loadingLabel={loadingLabel} 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;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;IACgB;IACd,OAAM;IACN,QAAO;IACP,SAAQ;GACT,CAAA,GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,GACjE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,CAC9D;GACF,CAAA,CAAA;EACL,CAAA,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA;GAC9D,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAO,QAAO;KAAQ,CAAA;KAClE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAM,QAAO;KAAQ,CAAA;KACjE,kBAAC,GAAD;MAAwB;MAAc,OAAM;MAAM,QAAO;KAAQ,CAAA;IAC9D;;GACJ,MAAY,aACX,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,GAClE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;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,7 +9,7 @@ export interface SkeletonRowProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
-    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    /** Accessible name announced for the placeholder as a whole. Defaults to "Loading". */
     loadingLabel?: string;
 }
 /**

package/dist/components/Skeleton/SkeletonRow2.js

@@ -9,11 +9,12 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: 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, {
-					loadingLabel: l,
+					decorative: !0,
 					width: "40px",
 					height: "40px",
 					variant: "circle"
@@ -22,11 +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, {
-					loadingLabel: l,
+					decorative: !0,
 					width: "25%",
 					height: "14px"
 				}), /* @__PURE__ */ n(e, {
-					loadingLabel: l,
+					decorative: !0,
 					width: "100%",
 					height: "16px"
 				})]
@@ -34,11 +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, {
-					loadingLabel: l,
+					decorative: !0,
 					width: "32px",
 					height: "32px"
 				}), /* @__PURE__ */ n(e, {
-					loadingLabel: l,
+					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  /** Accessible name for each skeleton inside. 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        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton\n                loadingLabel={loadingLabel}\n                width=\"40px\"\n                height=\"40px\"\n                variant=\"circle\"\n              />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton loadingLabel={loadingLabel} width=\"25%\" height=\"14px\" />\n            <Skeleton loadingLabel={loadingLabel} width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton loadingLabel={loadingLabel} width=\"32px\" height=\"32px\" />\n              <Skeleton loadingLabel={loadingLabel} 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;EALZ,UAAA;GAOG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KACgB;KACd,OAAM;KACN,QAAO;KACP,SAAQ;IACT,CAAA;GACE,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,GACjE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,GAClE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;EAEJ;CA1BE,GAAA,CA0BF,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,7 +7,7 @@ export interface SkeletonTextProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
-    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    /** Accessible name announced for the placeholder as a whole. Defaults to "Loading". */
     loadingLabel?: string;
 }
 /**

package/dist/components/Skeleton/SkeletonText2.js

@@ -13,8 +13,9 @@ function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a,
 		"data-testid": a,
 		role: "status",
 		"aria-busy": "true",
+		"aria-label": o ?? "Loading",
 		children: c.map((n, r) => /* @__PURE__ */ t(e, {
-			loadingLabel: o,
+			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  /** Accessible name for each skeleton inside. 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 className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton\n          loadingLabel={loadingLabel}\n          key={index}\n          width={width}\n          height=\"1em\"\n          variant=\"text\"\n        />\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;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GACgB;GAEP;GACP,QAAO;GACP,SAAQ;EACT,GAJM,CAIN,CACF;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/index.d.ts

@@ -24,6 +24,7 @@ export * from './components/PageLayout';
 export * from './components/ProgressBar';
 export * from './components/Skeleton';
 export * from './components/SmoothHeight';
+export * from './components/Select';
 export * from './components/StatCard';
 export * from './components/StatusTag';
 export * from './components/Tabs';

package/dist/index.js

@@ -14,10 +14,11 @@ import { SkeletonText as f } from "./components/Skeleton/SkeletonText2.js";
 import { SkeletonChart as p } from "./components/Skeleton/SkeletonChart2.js";
 import { SkeletonRow as m } from "./components/Skeleton/SkeletonRow2.js";
 import { SmoothHeight as h } from "./components/SmoothHeight/SmoothHeight2.js";
-import { usePrefersReducedMotion as g } from "./hooks/usePrefersReducedMotion.js";
-import { StatCard as _ } from "./components/StatCard/StatCard2.js";
-import { formatCompactNumber as v } from "./components/StatCard/formatters.js";
-import { StatusTag as y } from "./components/StatusTag/StatusTag2.js";
-import { Tabs as b } from "./components/Tabs/Tabs2.js";
-import { Tooltip as x } from "./components/Tooltip/Tooltip2.js";
-export { t as Badge, e as BaseCard, n as Button, r as DataTable, i as Drawer, a as EmptyState, o as ErrorState, s as PageHeader, c as PageLayout, l as ProgressBar, u as Skeleton, d as SkeletonCard, p as SkeletonChart, m as SkeletonRow, f as SkeletonText, h as SmoothHeight, _ as StatCard, y as StatusTag, b as Tabs, x as Tooltip, v as formatCompactNumber, g as usePrefersReducedMotion };
+import { Select as g } from "./components/Select/Select2.js";
+import { usePrefersReducedMotion as _ } from "./hooks/usePrefersReducedMotion.js";
+import { StatCard as v } from "./components/StatCard/StatCard2.js";
+import { formatCompactNumber as y } from "./components/StatCard/formatters.js";
+import { StatusTag as b } from "./components/StatusTag/StatusTag2.js";
+import { Tabs as x } from "./components/Tabs/Tabs2.js";
+import { Tooltip as S } from "./components/Tooltip/Tooltip2.js";
+export { t as Badge, e as BaseCard, n as Button, r as DataTable, i as Drawer, a as EmptyState, o as ErrorState, s as PageHeader, c as PageLayout, l as ProgressBar, g as Select, u as Skeleton, d as SkeletonCard, p as SkeletonChart, m as SkeletonRow, f as SkeletonText, h as SmoothHeight, v as StatCard, b as StatusTag, x as Tabs, S as Tooltip, y as formatCompactNumber, _ as usePrefersReducedMotion };

package/dist/styles/base.css

@@ -131,6 +131,7 @@
   --token-colorPrimary: #ff7a00;
   --token-colorPrimaryActive: #cc6200;
   --token-colorPrimaryBg: rgba(255, 122, 0, 0.1);
+  --token-colorPrimaryBgHover: rgba(255, 122, 0, 0.16);
   --token-colorPrimaryBorder: rgba(255, 122, 0, 0.2);
   --token-colorSuccess: #007a63;
   --token-colorSuccessActive: #005244;
@@ -140,6 +141,12 @@
   --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15);
   --token-colorWarning: #9a5d00;
   --token-colorText: #141414;
+  /* Both #767676 rather than the #bfbfbf a disabled or placeholder value is
+   * usually given: that measures 2.2:1 on white, and text a reader is expected
+   * to read (a placeholder naming the field, a disabled value explaining why it
+   * cannot be changed) is not exempt from the 4.5:1 floor. */
+  --token-colorTextDisabled: #767676;
+  --token-colorTextPlaceholder: #767676;
   --token-colorTextQuaternary: #bfbfbf;
   --token-colorTextSecondary: #595959;
   --token-colorTextTertiary: #737373;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lablup/ui-common",
-  "version": "0.1.0-alpha.18",
+  "version": "0.1.0-alpha.19",
   "description": "Shared, product-neutral UI components and design tokens for Lablup products",
   "license": "Apache-2.0",
   "author": "Lablup Inc.",