@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/dist/components/ui/radio-group.js

@@ -2,7 +2,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { forwardRef } from "react";
+import { CONTROL_SIZE } from "../../styles/component-sizes.js";
 import { cn } from "../../utils/cn.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { Label } from "./label.js";
+import { useLoadingScope } from "./loading-scope.js";
 const RadioGroup = forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref });
 });
@@ -28,8 +32,27 @@ const RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+const RADIO_DOT_SIZE_CLASS = `${CONTROL_SIZE.selection} shrink-0 rounded-full`;
+const RADIO_OPTION_LABEL_CLASS = "font-[family-name:var(--font-h4-family)] text-[length:var(--font-size-h4-body)] font-[number:var(--font-h4-weight)] leading-[24px]";
+const RADIO_OPTION_DESCRIPTION_CLASS = "font-[family-name:var(--font-h6-family)] text-[length:var(--font-size-h6-caption)] font-[number:var(--font-h6-weight)] leading-[20px]";
+const RADIO_OPTION_LABEL_BAR_CLASS = "w-32 max-w-full";
+const RADIO_OPTION_DESCRIPTION_BAR_CLASS = "w-48 max-w-full";
+const RADIO_GROUP_BLOCK_SKELETON_OPTIONS = 3;
 const RadioGroupBlock = forwardRef(
-  ({ className, options, variant = "separated", orientation = "vertical", error, itemClassName, disabled, ...props }, ref) => {
+  ({
+    className,
+    options,
+    variant = "separated",
+    orientation = "vertical",
+    error,
+    itemClassName,
+    disabled,
+    loading: loadingProp,
+    skeletonCount = RADIO_GROUP_BLOCK_SKELETON_OPTIONS,
+    ...props
+  }, ref) => {
+    const loading = useLoadingScope() || !!loadingProp;
+    const rows = loading && options.length === 0 ? Array.from({ length: skeletonCount }, () => null) : options;
     const isGrouped = variant === "grouped";
     const isHorizontal = orientation === "horizontal";
     return /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full flex-col", className), children: [
@@ -47,22 +70,25 @@ const RadioGroupBlock = forwardRef(
               error ? "border-ods-error" : "border-ods-border"
             ) : cn("grid gap-2", isHorizontal && "auto-cols-fr grid-flow-col")
           ),
-          disabled,
+          disabled: disabled || loading,
           ...props,
-          children: options.map((option, index) => {
-            const itemId = `${props.name ?? "radio-block"}-${option.value}`;
-            const isDisabled = disabled || option.disabled;
-            const isLast = index === options.length - 1;
-            const hasFooter = option.footer != null;
+          children: rows.map((option, index) => {
+            const optionKey = option ? option.value : `skeleton-${index}`;
+            const itemId = `${props.name ?? "radio-block"}-${optionKey}`;
+            const isDisabled = !loading && (disabled || option?.disabled);
+            const interactive = !loading && !isDisabled;
+            const isLast = index === rows.length - 1;
+            const hasFooter = option?.footer != null;
             const row = /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
+              loading || !option ? /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "circular", className: RADIO_DOT_SIZE_CLASS }) : /* @__PURE__ */ jsx(
                 RadioGroupPrimitive.Item,
                 {
                   id: itemId,
                   value: option.value,
                   disabled: isDisabled,
                   className: cn(
-                    "h-6 w-6 shrink-0 rounded-full border-2 bg-ods-card",
+                    RADIO_DOT_SIZE_CLASS,
+                    "border-2 bg-ods-card",
                     error ? "border-ods-error" : "border-[var(--color-border-strong)]",
                     "transition-colors duration-150",
                     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card",
@@ -90,50 +116,41 @@ const RadioGroupBlock = forwardRef(
                     /* @__PURE__ */ jsx(
                       "span",
                       {
-                        className: cn(
-                          "font-[family-name:var(--font-h4-family)] text-[length:var(--font-size-h4-body)] font-[number:var(--font-h4-weight)] leading-[24px]",
-                          "select-none truncate text-ods-text-primary"
-                        ),
-                        title: typeof option.label === "string" ? option.label : void 0,
-                        children: option.label
+                        className: cn(RADIO_OPTION_LABEL_CLASS, "select-none truncate text-ods-text-primary"),
+                        title: typeof option?.label === "string" ? option.label : void 0,
+                        children: option && !(loading && option.label === null) ? option.label : /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: RADIO_OPTION_LABEL_BAR_CLASS })
                       }
                     ),
-                    option.description && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "font-[family-name:var(--font-h6-family)] text-[length:var(--font-size-h6-caption)] font-[number:var(--font-h6-weight)] leading-[20px]",
-                          "select-none text-ods-text-secondary"
-                        ),
-                        children: option.description
-                      }
-                    )
+                    loading && option?.description === null ? /* @__PURE__ */ jsx("span", { className: RADIO_OPTION_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", type: "inherit", className: RADIO_OPTION_DESCRIPTION_BAR_CLASS }) }) : option?.description && /* @__PURE__ */ jsx("span", { className: cn(RADIO_OPTION_DESCRIPTION_CLASS, "select-none text-ods-text-secondary"), children: option.description })
                   ]
                 }
               ),
-              option.trailing && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center", children: option.trailing })
+              option?.trailing && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center", children: option.trailing })
             ] });
             return /* @__PURE__ */ jsxs(
-              "label",
+              Label,
               {
-                htmlFor: itemId,
+                variant: "surface",
+                htmlFor: loading ? void 0 : itemId,
+                "data-loading-item": "",
                 "aria-disabled": isDisabled || void 0,
                 className: cn(
                   "flex w-full items-center gap-3",
                   isHorizontal && "min-w-0 flex-1",
                   "transition-colors duration-200",
-                  isDisabled ? "cursor-not-allowed" : "cursor-pointer",
+                  isDisabled && "cursor-not-allowed",
+                  interactive && "cursor-pointer",
                   // Hover / active move the BACKGROUND only, like Input and
                   // CheckboxBlock — the border stays put so an unselected row
                   // never flashes "selected" under the cursor.
-                  !isDisabled && "hover:bg-ods-bg-hover active:bg-ods-bg-active",
+                  interactive && "hover:bg-ods-bg-hover active:bg-ods-bg-active",
                   isGrouped ? cn(
                     "bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]",
                     !isLast && (isHorizontal ? "border-r" : "border-b"),
                     error ? "border-ods-error" : "border-ods-border"
                   ) : cn(
                     "rounded-[6px] border bg-ods-card p-[var(--spacing-system-sf)]",
-                    !isDisabled && "has-[[data-state=checked]]:bg-[var(--ods-system-greys-soft-grey)]/30 has-[[data-state=checked]]:border-ods-accent/40",
+                    interactive && "has-[[data-state=checked]]:bg-[var(--ods-system-greys-soft-grey)]/30 has-[[data-state=checked]]:border-ods-accent/40",
                     error ? "border-ods-error" : "border-ods-border"
                   ),
                   // Disabled matches a disabled field: flat `ods-bg` fill and
@@ -149,10 +166,10 @@ const RadioGroupBlock = forwardRef(
                 ),
                 children: [
                   hasFooter ? /* @__PURE__ */ jsx("div", { className: "flex w-full items-center gap-[var(--spacing-system-sf)]", children: row }) : row,
-                  option.footer
+                  option?.footer
                 ]
               },
-              option.value
+              optionKey
             );
           })
         }
@@ -170,6 +187,7 @@ const RadioGroupBlock = forwardRef(
 );
 RadioGroupBlock.displayName = "RadioGroupBlock";
 export {
+  RADIO_GROUP_BLOCK_SKELETON_OPTIONS,
   RadioGroup,
   RadioGroupBlock,
   RadioGroupItem

package/dist/components/ui/release-changelog-section.d.ts

@@ -37,24 +37,5 @@ interface ReleaseChangelogSectionProps {
     loadingOptional?: boolean;
 }
 export declare function ReleaseChangelogSection({ title, entries, isBreaking, hideTitle, collapsible, defaultCollapsed, previewFirst, icon, MarkdownRenderer, loadingOptional, }: ReleaseChangelogSectionProps): React.JSX.Element | null;
-export interface ReleaseChangelogSectionSkeletonProps {
-    /** The section's heading (static copy: drawn for real). */
-    title: string;
-    /** Entries drawn when not `previewFirst` (the first fold). Default 1. */
-    count?: number;
-    isBreaking?: boolean;
-    hideTitle?: boolean;
-    collapsible?: boolean;
-    defaultCollapsed?: boolean;
-    /** The preview-first mode: the first entry clamped to the preview height, then the toggle row. */
-    previewFirst?: boolean;
-    icon?: React.ReactNode;
-    className?: string;
-}
-/**
- * A changelog section while it is read: the real icon and heading, the count badge as a chip, the first entry (title
- * line and description lines) as bars, clamped to the preview height with FadePreview's toggle row in preview mode.
- */
-export declare function ReleaseChangelogSectionSkeleton({ title, count, isBreaking, hideTitle, collapsible, defaultCollapsed, previewFirst, icon, className, }: ReleaseChangelogSectionSkeletonProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=release-changelog-section.d.ts.map

package/dist/components/ui/release-changelog-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"release-changelog-section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/release-changelog-section.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AASlE,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iFAC6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;;sCAQkC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;6DAIyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;wEAGoE;IACpE,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,uGAAuG;IACvG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAmCD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,SAAiB,EACjB,WAAmB,EACnB,gBAAuB,EACvB,YAAoB,EACpB,IAAI,EACJ,gBAAuC,EACvC,eAAuB,GACxB,EAAE,4BAA4B,4BAsE9B;AA+CD,MAAM,WAAW,oCAAoC;IACnD,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kGAAkG;IAClG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,+BAA+B,CAAC,EAC9C,KAAK,EACL,KAAkC,EAClC,UAAkB,EAClB,SAAiB,EACjB,WAAmB,EACnB,gBAAuB,EACvB,YAAoB,EACpB,IAAI,EACJ,SAAS,GACV,EAAE,oCAAoC,qBAoCtC"}
+{"version":3,"file":"release-changelog-section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/release-changelog-section.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AASlE,UAAU,4BAA4B;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;iFAC6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;;;sCAQkC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;6DAIyD;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;wEAGoE;IACpE,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,uGAAuG;IACvG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAoCD,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,SAAiB,EACjB,WAAmB,EACnB,gBAAuB,EACvB,YAAoB,EACpB,IAAI,EACJ,gBAAuC,EACvC,eAAuB,GACxB,EAAE,4BAA4B,4BAsE9B"}

package/dist/components/ui/release-changelog-section.js

@@ -4,10 +4,10 @@ import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
-import { Badge, BadgeSkeleton } from "./badge.js";
+import { Badge } from "./badge.js";
 import { Button } from "./button/index.js";
 import { FadePreview } from "./fade-preview.js";
-import { useLoadingScope } from "./loading-scope.js";
+import { LoadingItems, useLoadingScope } from "./loading-scope.js";
 import { RichMarkdownRenderer } from "./markdown/index.js";
 const PREVIEW_COLLAPSED_HEIGHT = 120;
 const SECTION_CLASS = "space-y-4";
@@ -101,7 +101,7 @@ function ChangelogEntryList({
   entries,
   MarkdownRenderer
 }) {
-  return /* @__PURE__ */ jsx("ul", { className: ENTRY_LIST_CLASS, children: entries.map((entry, index) => /* @__PURE__ */ jsxs("li", { className: ENTRY_CLASS, children: [
+  return /* @__PURE__ */ jsx("ul", { className: ENTRY_LIST_CLASS, children: entries.map((entry, index) => /* @__PURE__ */ jsxs("li", { className: ENTRY_CLASS, "data-loading-item": true, children: [
     /* @__PURE__ */ jsx("div", { className: ENTRY_TITLE_CLASS, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: entry.title }) }),
     entry.description && /* Entry description — body text matches the main release
        summary at the SAME 14/18px responsive `text-h4` scale.
@@ -115,7 +115,6 @@ function ChangelogEntryList({
 }
 function ReleaseChangelogSectionSkeleton({
   title,
-  count = CHANGELOG_SKELETON_ENTRIES,
   isBreaking = false,
   hideTitle = false,
   collapsible = false,
@@ -127,11 +126,11 @@ function ReleaseChangelogSectionSkeleton({
   const heading = /* @__PURE__ */ jsxs("h2", { className: titleClass(isBreaking), children: [
     icon,
     title,
-    /* @__PURE__ */ jsx(BadgeSkeleton, { className: cn(COUNT_BADGE_CLASS, "w-[2ch]") })
+    /* @__PURE__ */ jsx(Badge, { loading: true, className: cn(COUNT_BADGE_CLASS, "w-[2ch]") })
   ] });
   const inPreviewMode = previewFirst && !collapsible;
   const showEntries = !collapsible || !defaultCollapsed;
-  const list = /* @__PURE__ */ jsx(ChangelogEntryListSkeleton, { count: inPreviewMode ? 1 : count });
+  const list = /* @__PURE__ */ jsx(ChangelogEntryListSkeleton, {});
   return /* @__PURE__ */ jsxs("div", { className: cn(SECTION_CLASS, className), "aria-hidden": true, children: [
     !hideTitle && (collapsible ? /* @__PURE__ */ jsxs("div", { className: COLLAPSIBLE_TITLE_ROW_CLASS, children: [
       heading,
@@ -143,16 +142,12 @@ function ReleaseChangelogSectionSkeleton({
     ] }) : list)
   ] });
 }
-function ChangelogEntryListSkeleton({ count }) {
-  return /* @__PURE__ */ jsx("ul", { className: ENTRY_LIST_CLASS, children: Array.from({ length: count }, (_, index) => (
-    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton entries never reorder
-    /* @__PURE__ */ jsxs("li", { className: ENTRY_CLASS, children: [
-      /* @__PURE__ */ jsx("div", { className: ENTRY_TITLE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-2/3" }) }),
-      /* @__PURE__ */ jsx("div", { className: ENTRY_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", lines: 5, className: "w-full" }) })
-    ] }, index)
-  )) });
+function ChangelogEntryListSkeleton() {
+  return /* @__PURE__ */ jsx("ul", { className: ENTRY_LIST_CLASS, children: /* @__PURE__ */ jsx(LoadingItems, { count: CHANGELOG_SKELETON_ENTRIES, children: () => /* @__PURE__ */ jsxs("li", { className: ENTRY_CLASS, "data-loading-item": true, children: [
+    /* @__PURE__ */ jsx("div", { className: ENTRY_TITLE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-2/3" }) }),
+    /* @__PURE__ */ jsx("div", { className: ENTRY_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", lines: 5, className: "w-full" }) })
+  ] }) }) });
 }
 export {
-  ReleaseChangelogSection,
-  ReleaseChangelogSectionSkeleton
+  ReleaseChangelogSection
 };

package/dist/components/ui/search-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/search-input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/search-input.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/search-input.js

@@ -17,7 +17,9 @@ import { SearchIcon } from "../icons-v2-generated/index.js";
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon.js";
 import { LoadingRegion } from "../loading/loading-region.js";
 import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { Button } from "./button/index.js";
 import { HiddenTagsPopup } from "./hidden-tags-popup.js";
+import { LoadingItems } from "./loading-scope.js";
 import { Tag } from "./tag.js";
 const SEARCH_RESULT_ROW_CLASS = "flex min-h-10 items-center border-b border-ods-border px-3 last:border-b-0";
 const SEARCH_RESULTS_LOADING_ROWS = 8;
@@ -235,6 +237,7 @@ function SearchInput({
     return /* @__PURE__ */ jsx(
       "div",
       {
+        "data-loading-item": true,
         role: "option",
         "aria-selected": isHighlighted,
         className: cn(
@@ -252,10 +255,7 @@ function SearchInput({
   };
   const renderDropdownContent = () => {
     if (isLoading) {
-      return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading results", children: Array.from({ length: loadingRows }, (_, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-        /* @__PURE__ */ jsx("div", { className: SEARCH_RESULT_ROW_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-2/3" }) }, i)
-      )) });
+      return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading results", children: /* @__PURE__ */ jsx(LoadingItems, { count: loadingRows, children: () => /* @__PURE__ */ jsx("div", { className: SEARCH_RESULT_ROW_CLASS, "aria-hidden": true, "data-loading-item": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-2/3" }) }) }) });
     }
     if (flatResults.length === 0) {
       return /* @__PURE__ */ jsx("div", { className: "px-4 py-3 text-ods-text-secondary text-h6", children: emptyResultsText });
@@ -302,20 +302,16 @@ function SearchInput({
                 chip.id
               )),
               hiddenCount > 0 && /* @__PURE__ */ jsx("div", { ref: hiddenTagsRef, className: "shrink-0", children: /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
+                  variant: "chip",
                   ref: badgeRef,
                   type: "button",
+                  "aria-expanded": showHiddenTags,
                   onClick: (e) => {
                     e.stopPropagation();
                     setShowHiddenTags((prev) => !prev);
                   },
-                  className: cn(
-                    "flex h-8 items-center px-2",
-                    "rounded-[6px] border border-ods-border bg-ods-card",
-                    "text-ods-text-secondary text-h5",
-                    "cursor-pointer transition-colors hover:bg-ods-bg-hover"
-                  ),
                   "aria-label": `${hiddenCount} more selected filters`,
                   children: getLimitTagsText(hiddenCount)
                 }
@@ -341,13 +337,14 @@ function SearchInput({
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [
               hasValue && !disabled && /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
+                  variant: "transparent",
+                  size: "icon-sm",
                   type: "button",
                   onClick: handleClear,
-                  className: "flex items-center justify-center transition-opacity hover:opacity-70",
                   "aria-label": "Clear search",
-                  children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "text-ods-text-secondary", size: 24 })
+                  children: /* @__PURE__ */ jsx(XmarkCircleIcon, { className: "text-ods-text-secondary" })
                 }
               ),
               endAdornment

package/dist/components/ui/searchable-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/searchable-select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAA4B,MAAM,OAAO,CAAC;AAuBjE,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;qEACiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,kFAAkF;AAClF,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wGAAwG;IACxG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yGAAyG;IACzG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;uDACmD;IACnD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAClF,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,+BA4N/D"}
+{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/searchable-select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAA4B,MAAM,OAAO,CAAC;AAyBjE,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;qEACiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,kFAAkF;AAClF,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wGAAwG;IACxG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,yGAAyG;IACzG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACnC,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;uDACmD;IACnD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAClF,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,+BAuN/D"}

package/dist/components/ui/searchable-select.js

@@ -8,13 +8,16 @@ import { CheckIcon, SearchIcon } from "../icons-v2-generated/index.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-icon.js";
 import { LoadingRegion } from "../loading/loading-region.js";
 import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { BUTTON_KIND_CLASS, Button } from "./button/index.js";
 import { FieldWrapper } from "./field-wrapper.js";
 import { Input } from "./input.js";
+import { LoadingItems } from "./loading-scope.js";
 import { usePortalContainer } from "./portal-container.js";
-const SELECT_ROW_CLASS = "flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left";
-const SELECT_TILE_CLASS = "flex min-w-0 flex-col items-center justify-center gap-[var(--spacing-system-xxs)] border-b border-r border-ods-border p-[var(--spacing-system-xs)]";
-const SELECT_LOADING_ROWS = 8;
-const SELECT_LOADING_TILES = 12;
+const SELECT_TILE_LAYOUT = "min-w-0 flex-col justify-center";
+const SELECT_ROW_CLASS = BUTTON_KIND_CLASS.row;
+const SELECT_TILE_CLASS = cn(BUTTON_KIND_CLASS.row, SELECT_TILE_LAYOUT);
+const SELECT_SKELETON_ROWS = 8;
+const SELECT_SKELETON_TILES = 12;
 function SearchableSelect(allProps) {
   const {
     options,
@@ -64,35 +67,35 @@ function SearchableSelect(allProps) {
     setIsOpen(false);
   };
   const defaultTrigger = /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
+      variant: "field",
       id: triggerId,
       type: "button",
       disabled,
       "data-invalid": isInvalid || void 0,
-      className: cn(
-        // Mirrors SelectTrigger so the closed state is indistinguishable from
-        // the regular Select.
-        "flex h-11 w-full items-center justify-between gap-2 rounded-md border px-3 text-left outline-none md:h-12",
-        "border-ods-border bg-ods-card text-h4",
-        selectedOption ? "text-ods-text-primary" : "text-ods-text-secondary",
-        "enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active",
-        !isInvalid && "data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
-        "group cursor-pointer transition-colors duration-200 disabled:!cursor-not-allowed disabled:bg-ods-bg",
-        isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:active:border-ods-error data-[state=open]:border-ods-error",
-        className
-      ),
+      className,
       children: [
         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
           selectedOption?.icon,
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder })
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "truncate",
+                disabled ? "text-ods-text-disabled" : selectedOption ? "text-ods-text-primary" : "text-ods-text-secondary"
+              ),
+              children: selectedOption ? selectedOption.label : placeholder
+            }
+          )
         ] }),
         /* @__PURE__ */ jsx(
           Chevron02DownIcon,
           {
             className: cn(
-              "shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180",
-              isInvalid ? "text-ods-error" : "group-data-[state=open]:text-ods-accent"
+              "shrink-0 transition-all duration-200",
+              isOpen && "rotate-180",
+              isInvalid ? "text-ods-error" : isOpen ? "text-ods-accent" : "text-ods-text-secondary"
             ),
             size: 24
           }
@@ -126,6 +129,7 @@ function SearchableSelect(allProps) {
           /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-ods-border", children: /* @__PURE__ */ jsx(
             Input,
             {
+              userValue: true,
               autoFocus: true,
               value: search,
               onChange: (e) => setSearch(e.target.value),
@@ -150,27 +154,20 @@ function SearchableSelect(allProps) {
               children: isLoading ? (
                 // The options while they are read: the list's own rows (or tiles), a label bar each; `loadingText` is
                 // what a screen reader hears.
-                /* @__PURE__ */ jsx(LoadingRegion, { label: loadingText, className: "contents", children: Array.from(
-                  { length: loadingRows ?? (isGrid ? SELECT_LOADING_TILES : SELECT_LOADING_ROWS) },
-                  (_, i) => (
-                    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
-                    /* @__PURE__ */ jsx("div", { className: isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: isGrid ? "h6" : "h4", className: isGrid ? "w-full" : "w-2/3" }) }, i)
-                  )
-                ) })
+                /* @__PURE__ */ jsx(LoadingRegion, { label: loadingText, className: "contents", children: /* @__PURE__ */ jsx(LoadingItems, { count: loadingRows ?? (isGrid ? SELECT_SKELETON_TILES : SELECT_SKELETON_ROWS), children: () => /* @__PURE__ */ jsx("div", { "data-loading-item": true, className: isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: isGrid ? "h6" : "h4", className: isGrid ? "w-full" : "w-2/3" }) }) }) })
               ) : filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: statusClass, children: emptyText }) : filtered.map((opt) => {
                 const isSelected = value === opt.value;
                 return /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
+                    variant: "row",
+                    "data-loading-item": true,
                     type: "button",
                     role: "option",
                     "aria-selected": isSelected,
+                    "data-state": isSelected ? "active" : void 0,
                     onClick: () => handleSelect(opt.value),
-                    className: cn(
-                      "transition-colors hover:bg-ods-bg-hover",
-                      isGrid ? SELECT_TILE_CLASS : SELECT_ROW_CLASS,
-                      isSelected && "bg-ods-bg-hover"
-                    ),
+                    className: isGrid ? SELECT_TILE_LAYOUT : void 0,
                     children: renderOption ? renderOption(opt, isSelected) : isGrid ? /* @__PURE__ */ jsxs(Fragment, { children: [
                       opt.icon,
                       /* @__PURE__ */ jsx(

package/dist/components/ui/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAiF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtH,QAAA,MAAM,MAAM,iDAAuB,CAAC;AAEpC,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAE1C,QAAA,MAAM,WAAW,8HAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa;cAGL,OAAO;YACT,MAAM;IACd,yGAAyG;mBAC1F,SAAS,GAAG,OAAO;YAC1B,MAAM;qDA2DhB,CAAC;AAGH,QAAA,MAAM,oBAAoB,mMAWxB,CAAC;AAGH,QAAA,MAAM,sBAAsB,qMAW1B,CAAC;AAGH,QAAA,MAAM,aAAa,4LA6BjB,CAAC;AAGH,QAAA,MAAM,WAAW,0LAKf,CAAC;AAGH,QAAA,MAAM,UAAU;IAGZ;;;;;;OAMG;kBACW,SAAS;kDAkCzB,CAAC;AAGH,QAAA,MAAM,eAAe,8LAKnB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAiF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAStH,QAAA,MAAM,MAAM,iDAAuB,CAAC;AAEpC,QAAA,MAAM,WAAW,6HAAwB,CAAC;AAE1C,QAAA,MAAM,WAAW,8HAAwB,CAAC;AAE1C,QAAA,MAAM,aAAa;cAGL,OAAO;YACT,MAAM;IACd,yGAAyG;mBAC1F,SAAS,GAAG,OAAO;YAC1B,MAAM;qDA8DhB,CAAC;AAGH,QAAA,MAAM,oBAAoB,mMAWxB,CAAC;AAGH,QAAA,MAAM,sBAAsB,qMAW1B,CAAC;AAGH,QAAA,MAAM,aAAa,4LA6BjB,CAAC;AAGH,QAAA,MAAM,WAAW,0LAKf,CAAC;AAGH,QAAA,MAAM,UAAU;IAGZ;;;;;;OAMG;kBACW,SAAS;kDAkCzB,CAAC;AAGH,QAAA,MAAM,eAAe,8LAKnB,CAAC;AAGH,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}

package/dist/components/ui/select.js

@@ -6,7 +6,9 @@ import { forwardRef } from "react";
 import { cn } from "../../utils/cn.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/arrows/chevron-02-down-icon.js";
 import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/check-icon.js";
+import { FieldValueSkeleton } from "./field-value-skeleton.js";
 import { FieldWrapper } from "./field-wrapper.js";
+import { useLoadingScope } from "./loading-scope.js";
 import { usePortalContainer } from "./portal-container.js";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
@@ -15,6 +17,7 @@ const SelectTrigger = forwardRef((allProps, ref) => {
   const { className, children, invalid, label, labelVariant, error, ...props } = allProps;
   const errorSlot = "error" in allProps;
   const isInvalid = invalid || !!error;
+  const inScope = useLoadingScope();
   const trigger = /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
     {
@@ -48,7 +51,7 @@ const SelectTrigger = forwardRef((allProps, ref) => {
       ),
       ...props,
       children: [
-        children,
+        inScope ? /* @__PURE__ */ jsx(FieldValueSkeleton, {}) : children,
         /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
           Chevron02DownIcon,
           {

package/dist/components/ui/service-card.d.ts

@@ -22,7 +22,15 @@ export interface ServiceCardProps {
     icon?: React.ReactNode;
     tag?: ServiceCardTag;
     rows: ServiceCardRow[];
+    /**
+     * The values are still being read: the frame, icon, title, subtitle, tag and each row's label are drawn for real
+     * (an empty title is a bar), and each row's value is a bar in the row's own value box, without its actions. A
+     * loading scope does the same.
+     */
+    loading?: boolean;
     className?: string;
+    /** `data-*` markers (`data-loading-item` on a read list's card), on the card's root in both forms. */
+    [key: `data-${string}`]: unknown;
 }
-export declare function ServiceCard({ title, subtitle, icon, tag, rows, className }: ServiceCardProps): React.JSX.Element;
+export declare function ServiceCard({ title, subtitle, icon, tag, rows, loading: loadingProp, className, ...props }: ServiceCardProps): React.JSX.Element;
 //# sourceMappingURL=service-card.d.ts.map

package/dist/components/ui/service-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"service-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/service-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,qBAyC5F"}
+{"version":3,"file":"service-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/service-card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sGAAsG;IACtG,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAClC;AAoBD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,OAAO,EAAE,WAAW,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAgDlB"}