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

package/dist/{chunk-YXDHVHB2.cjs → chunk-KWV23THO.cjs}

@@ -1,17 +1,26 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkFL2RMEDXcjs = require('./chunk-FL2RMEDX.cjs');
+var _chunkT4ZVKEDPcjs = require('./chunk-T4ZVKEDP.cjs');
 
 
 
-var _chunkXFRBEXQNcjs = require('./chunk-XFRBEXQN.cjs');
 
 
-var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
+var _chunkYNDH72VUcjs = require('./chunk-YNDH72VU.cjs');
 
-// src/components/ui/required-mark.tsx
+
+
+var _chunkN6YCOBLKcjs = require('./chunk-N6YCOBLK.cjs');
+
+// src/components/ui/field-value-skeleton.tsx
 var _jsxruntime = require('react/jsx-runtime');
+function FieldValueSkeleton() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYNDH72VUcjs.TextLineSkeleton, { type: "h4", className: _chunkYNDH72VUcjs.FIELD_VALUE_SKELETON_CLASS });
+}
+
+// src/components/ui/required-mark.tsx
+
 function RequiredMark() {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "aria-hidden": true, className: "text-ods-accent", children: "*" });
 }
@@ -39,14 +48,14 @@ var FieldWrapper = _react.forwardRef.call(void 0,
     children
   }, ref) => {
     const hasChrome = label != null || error != null || errorSlot;
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, hasChrome ? "relative flex w-full flex-col" : "contents", className), children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, className: _chunkN6YCOBLKcjs.cn.call(void 0, hasChrome ? "relative flex w-full flex-col" : "contents", className), children: [
       label && // Default is text-h6, NOT text-h4: `Field` (ui/field.tsx) renders its label via
       // `Label variant="small"` = text-h6, and every form that mixes
       // Field-wrapped controls with `label=`-prop controls showed two label
       // sizes side by side — the exact inconsistency the admin editors kept
       // reporting. One label scale, owned here and in Field together.
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _chunkFL2RMEDXcjs.Label,
+        _chunkT4ZVKEDPcjs.Label,
         {
           id: htmlFor ? fieldLabelId(htmlFor) : void 0,
           className: "mb-1",
@@ -62,7 +71,7 @@ var FieldWrapper = _react.forwardRef.call(void 0,
       error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "p",
         {
-          className: _chunk65VVJSQZcjs.cn.call(void 0, 
+          className: _chunkN6YCOBLKcjs.cn.call(void 0, 
             "absolute bottom-0 left-0 right-0 translate-y-full truncate text-h6",
             errorVariantClasses[errorVariant]
           ),
@@ -94,18 +103,22 @@ var Input = _react.forwardRef.call(void 0, (allProps, ref) => {
     labelVariant,
     error,
     errorVariant = "error",
-    loading = false,
+    pending: pendingProp = false,
+    loading: deprecatedLoading = false,
+    userValue = false,
     ...props
   } = allProps;
+  const pending = pendingProp || deprecatedLoading;
   const errorSlot = "error" in allProps;
   const variantIsInvalid = errorVariant === "error" || errorVariant === "warning";
   const isInvalid = invalid || !!error && variantIsInvalid;
+  const inScope = _chunkN6YCOBLKcjs.useLoadingScope.call(void 0, ) && !userValue;
   if (type === "range") {
     const rangeInput = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "input",
       {
         type: "range",
-        className: _chunk65VVJSQZcjs.cn.call(void 0, 
+        className: _chunkN6YCOBLKcjs.cn.call(void 0, 
           "h-1 w-full cursor-pointer appearance-none rounded-full bg-white/30",
           // Webkit (Chrome/Safari) thumb
           "[&::-webkit-slider-thumb]:appearance-none",
@@ -139,14 +152,15 @@ var Input = _react.forwardRef.call(void 0, (allProps, ref) => {
     ) : rangeInput;
   }
   const content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "label",
+    _chunkT4ZVKEDPcjs.Label,
     {
+      variant: "surface",
       "data-invalid": isInvalid || void 0,
-      className: _chunk65VVJSQZcjs.cn.call(void 0, 
+      className: _chunkN6YCOBLKcjs.cn.call(void 0, 
         // Layout & spacing
         "flex w-full cursor-text items-center gap-2 border px-3",
-        _chunkXFRBEXQNcjs.INPUT_HEIGHT_CLASS,
-        _chunkXFRBEXQNcjs.INPUT_RADIUS_CLASS,
+        _chunkYNDH72VUcjs.INPUT_HEIGHT_CLASS,
+        _chunkYNDH72VUcjs.INPUT_RADIUS_CLASS,
         // Focus-within states
         "has-[:focus-visible]:outline-none",
         "group",
@@ -171,11 +185,13 @@ var Input = _react.forwardRef.call(void 0, (allProps, ref) => {
       ),
       children: [
         startAdornment && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment }),
+        inScope && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FieldValueSkeleton, {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
             type,
-            className: _chunk65VVJSQZcjs.cn.call(void 0, 
+            hidden: inScope || props.hidden,
+            className: _chunkN6YCOBLKcjs.cn.call(void 0, 
               // Layout
               "min-w-0 flex-1 border-none bg-transparent outline-none",
               // Typography
@@ -195,8 +211,8 @@ var Input = _react.forwardRef.call(void 0, (allProps, ref) => {
             ...props
           }
         ),
-        loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Loader2, { className: "size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" }),
-        !loading && endAdornment && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: endAdornment })
+        pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Loader2, { className: "size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" }),
+        !pending && endAdornment && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: endAdornment })
       ]
     }
   );
@@ -219,4 +235,5 @@ Input.displayName = "Input";
 
 
 
-exports.RequiredMark = RequiredMark; exports.fieldLabelId = fieldLabelId; exports.FieldWrapper = FieldWrapper; exports.Input = Input;
+
+exports.FieldValueSkeleton = FieldValueSkeleton; exports.RequiredMark = RequiredMark; exports.fieldLabelId = fieldLabelId; exports.FieldWrapper = FieldWrapper; exports.Input = Input;

package/dist/{chunk-XIFEZ2JT.cjs → chunk-L4XOCV7S.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
 
 
-var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
+var _chunkN6YCOBLKcjs = require('./chunk-N6YCOBLK.cjs');
 
 // src/components/ui/portal-container.tsx
 var _react = require('react');
@@ -33,7 +33,7 @@ var DropdownMenuSubTrigger = _react.forwardRef.call(void 0, ({ className, inset,
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
-    className: _chunk65VVJSQZcjs.cn.call(void 0, 
+    className: _chunkN6YCOBLKcjs.cn.call(void 0, 
       "flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 outline-none text-h6 hover:bg-ods-bg-hover focus:bg-ods-bg-hover data-[state=open]:bg-ods-bg-hover [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
@@ -57,7 +57,7 @@ var DropdownMenuSubContent = _react.forwardRef.call(void 0, ({ className, collis
       collisionBoundary: resolvedBoundary,
       collisionPadding: _nullishCoalesce(collisionPadding, () => ( (resolvedBoundary ? COLLISION_PADDING_PX : void 0))),
       hideWhenDetached: _nullishCoalesce(hideWhenDetached, () => ( (resolvedBoundary ? true : void 0))),
-      className: _chunk65VVJSQZcjs.cn.call(void 0, 
+      className: _chunkN6YCOBLKcjs.cn.call(void 0, 
         "z-50 min-w-[8rem] overflow-hidden rounded-md border border-ods-border bg-ods-card p-1 text-ods-text-primary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       ),
@@ -78,7 +78,7 @@ var DropdownMenuContent = _react.forwardRef.call(void 0, ({ className, sideOffse
       collisionBoundary: resolvedBoundary,
       collisionPadding: _nullishCoalesce(collisionPadding, () => ( (resolvedBoundary ? COLLISION_PADDING_PX : void 0))),
       hideWhenDetached: _nullishCoalesce(hideWhenDetached, () => ( (resolvedBoundary ? true : void 0))),
-      className: _chunk65VVJSQZcjs.cn.call(void 0, 
+      className: _chunkN6YCOBLKcjs.cn.call(void 0, 
         "z-50 min-w-[8rem] overflow-hidden rounded-md border border-ods-border bg-ods-card p-1 text-ods-text-primary shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       ),
@@ -91,7 +91,7 @@ var DropdownMenuItem = _react.forwardRef.call(void 0, ({ className, inset, ...pr
   DropdownMenuPrimitive.Item,
   {
     ref,
-    className: _chunk65VVJSQZcjs.cn.call(void 0, 
+    className: _chunkN6YCOBLKcjs.cn.call(void 0, 
       "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-ods-text-primary outline-none transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
@@ -104,7 +104,7 @@ var DropdownMenuCheckboxItem = _react.forwardRef.call(void 0, ({ className, chil
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
-    className: _chunk65VVJSQZcjs.cn.call(void 0, 
+    className: _chunkN6YCOBLKcjs.cn.call(void 0, 
       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-ods-text-primary outline-none transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -121,7 +121,7 @@ var DropdownMenuRadioItem = _react.forwardRef.call(void 0, ({ className, childre
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
-    className: _chunk65VVJSQZcjs.cn.call(void 0, 
+    className: _chunkN6YCOBLKcjs.cn.call(void 0, 
       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-ods-text-primary outline-none transition-colors text-h6 hover:bg-ods-bg-hover hover:text-ods-text-primary focus:bg-ods-bg-hover focus:text-ods-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
@@ -137,15 +137,15 @@ var DropdownMenuLabel = _react.forwardRef.call(void 0, ({ className, inset, ...p
   DropdownMenuPrimitive.Label,
   {
     ref,
-    className: _chunk65VVJSQZcjs.cn.call(void 0, "px-2 py-1.5 font-semibold text-ods-text-secondary text-h6", inset && "pl-8", className),
+    className: _chunkN6YCOBLKcjs.cn.call(void 0, "px-2 py-1.5 font-semibold text-ods-text-secondary text-h6", inset && "pl-8", className),
     ...props
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.Separator, { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "-mx-1 my-1 h-px bg-ods-border", className), ...props }));
+var DropdownMenuSeparator = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownMenuPrimitive.Separator, { ref, className: _chunkN6YCOBLKcjs.cn.call(void 0, "-mx-1 my-1 h-px bg-ods-border", className), ...props }));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunk65VVJSQZcjs.cn.call(void 0, "ml-auto text-ods-text-secondary opacity-60 text-h6", className), ...props });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunkN6YCOBLKcjs.cn.call(void 0, "ml-auto text-ods-text-secondary opacity-60 text-h6", className), ...props });
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 

package/dist/{chunk-U5VQFKRZ.cjs → chunk-LDGR5VCK.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkS3YDUX2Icjs = require('./chunk-S3YDUX2I.cjs');
+var _chunkHLZUBJPLcjs = require('./chunk-HLZUBJPL.cjs');
 
 
-var _chunkTZP7PSPGcjs = require('./chunk-TZP7PSPG.cjs');
+var _chunkFWJ5YECNcjs = require('./chunk-FWJ5YECN.cjs');
 
 
 var _chunk5GJM7VRRcjs = require('./chunk-5GJM7VRR.cjs');
@@ -44,7 +44,7 @@ function isSummaryData(value) {
 }
 function TicketLiveProvider({ children, enabled = true }) {
   const runtime = _chunkUJ7AXHRZcjs.useChatRuntime.call(void 0, );
-  const identity = _chunkTZP7PSPGcjs.useChatIdentity.call(void 0, enabled);
+  const identity = _chunkFWJ5YECNcjs.useChatIdentity.call(void 0, enabled);
   const queryClient = _reactquery.useQueryClient.call(void 0, );
   const streamUrl = _nullishCoalesce(_optionalChain([runtime, 'optionalAccess', _ => _.endpoints, 'access', _2 => _2.ticketStreamUrl]), () => ( TICKET_STREAM_ENDPOINT));
   const readUrl = _nullishCoalesce(_optionalChain([runtime, 'optionalAccess', _3 => _3.endpoints, 'access', _4 => _4.ticketReadUrl]), () => ( TICKET_READ_ENDPOINT));
@@ -160,7 +160,7 @@ function TicketLiveProvider({ children, enabled = true }) {
   _react2.default.useEffect(() => {
     if (!streamEnabled) return void 0;
     if (typeof window === "undefined") return void 0;
-    subscriptionRef.current = _chunkS3YDUX2Icjs.createSseSubscription.call(void 0, {
+    subscriptionRef.current = _chunkHLZUBJPLcjs.createSseSubscription.call(void 0, {
       url: streamUrl,
       onEvent: (name, data) => handlersRef.current.onEvent(name, data),
       onStatusChange: (status) => handlersRef.current.onStatus(status),

package/dist/chunk-N6YCOBLK.cjs

@@ -0,0 +1,252 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+// src/utils/cn.ts
+var _clsx = require('clsx');
+var _tailwindmerge = require('tailwind-merge');
+var twMerge = _tailwindmerge.extendTailwindMerge.call(void 0, {
+  extend: {
+    classGroups: {
+      "ods-typography": ["text-h1", "text-h2", "text-h3", "text-h4", "text-h5", "text-h6", "text-code", "text-badge"]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(_clsx.clsx.call(void 0, inputs));
+}
+
+// src/components/ui/loading-scope.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var LoadingScopeContext = _react.createContext.call(void 0, false);
+function LoadingScope({
+  children,
+  className,
+  bare = false,
+  active,
+  as: Tag = "div"
+}) {
+  const outer = _react.useContext.call(void 0, LoadingScopeContext);
+  const on = outer || (_nullishCoalesce(active, () => ( true)));
+  if (bare) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingScopeContext.Provider, { value: on, children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingScopeContext.Provider, { value: on, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Tag,
+    {
+      "aria-busy": on && !outer ? "true" : void 0,
+      "aria-hidden": on || void 0,
+      inert: on || void 0,
+      className: cn(on && "pointer-events-none select-none", className),
+      children
+    }
+  ) });
+}
+function useLoadingScope() {
+  return _react.useContext.call(void 0, LoadingScopeContext);
+}
+function LoadingWhen({
+  loading,
+  label,
+  as,
+  className,
+  children
+}) {
+  if (label === void 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingScope, { bare: true, active: loading, children });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AnnouncedLoadingScope, { label, active: loading, as, className, children });
+}
+function AnnouncedLoadingScope({
+  label,
+  status = true,
+  active = true,
+  as,
+  className,
+  children
+}) {
+  const outer = useLoadingScope();
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    status && active && !outer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingStatus, { label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingScope, { active, as, className, children })
+  ] });
+}
+function InertWhileLoading({
+  loading = true,
+  className = "inline-flex shrink-0",
+  children
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { inert: loading || void 0, "aria-hidden": loading || void 0, className, children });
+}
+var LOADING_NOOP = () => void 0;
+function LoadingStatus({ label }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "status", "aria-live": "polite", className: "sr-only", children: label });
+}
+function loadingItemProps(props) {
+  return Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith("data-")));
+}
+function LoadingItems({ count, children }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: children(index) }, index)) });
+}
+
+// src/components/ui/button/button-styles.ts
+var buttonSurfaceClasses = {
+  accent: "bg-ods-accent text-ods-text-on-accent hover:bg-ods-accent-hover active:bg-ods-accent-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
+  outline: "bg-ods-card text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-ods-card disabled:text-ods-text-disabled aria-disabled:bg-ods-card aria-disabled:text-ods-text-disabled",
+  transparent: "bg-transparent text-ods-text-primary hover:bg-ods-bg-hover active:bg-ods-bg-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
+  destructive: "bg-ods-error text-ods-text-on-accent hover:bg-ods-error-hover active:bg-ods-error-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
+  warning: "bg-ods-warning text-ods-text-on-accent hover:bg-ods-warning-hover active:bg-ods-warning-active disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
+  // The page's colours swapped: light on a dark theme, dark on a light one. A
+  // strong action that must NOT be the accent, for a surface that already
+  // holds the one accent call to action (an "Approve" inside a product demo).
+  inverted: "bg-ods-text-primary text-ods-bg hover:bg-ods-text-secondary active:bg-ods-text-secondary disabled:bg-ods-disabled aria-disabled:bg-ods-disabled",
+  // A self-contained glyph (play badge, unmute glyph) that already carries its
+  // own scrim: no button surface at all, in any state. Distinct from
+  // `transparent`, whose hover/active fills would paint a rectangle behind the
+  // glyph — which is why call sites were undoing them with
+  // `hover:bg-transparent active:bg-transparent`.
+  glyph: "bg-transparent text-ods-text-primary hover:bg-transparent active:bg-transparent disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
+  // A quiet inline text action (a "Show all" / "Show less" disclosure, a
+  // secondary "Clear" beside a field): secondary text that takes the accent on
+  // hover, and no surface in any state. Promoted to a variant because the
+  // disclosure toggle was a primitive <button> restating these classes. Pair
+  // with size="compact" and noPaddingX so the label aligns with the text above.
+  link: "bg-transparent text-ods-text-secondary hover:bg-transparent hover:text-ods-accent active:bg-transparent active:text-ods-accent-active disabled:bg-transparent disabled:text-ods-text-disabled aria-disabled:bg-transparent aria-disabled:text-ods-text-disabled",
+  // Chrome that sits ON media (video cards, image lightboxes): a scrim disc so
+  // the glyph stays legible over an arbitrary frame. Promoted to a variant
+  // because the walkthrough card, its theater and the bite cards were each
+  // stacking the same classes at the call site.
+  overlay: "rounded-full bg-ods-overlay text-ods-text-primary backdrop-blur-sm hover:text-ods-accent active:text-ods-accent-active disabled:text-ods-text-disabled aria-disabled:text-ods-text-disabled"
+};
+var outlineBorderClasses = "border border-ods-border hover:border-ods-border-hover active:border-ods-border-active disabled:border-ods-border aria-disabled:border-ods-border";
+var splitGlyphSizeClasses = "[&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6";
+var splitGlyphSizeBySize = {
+  default: splitGlyphSizeClasses,
+  small: "[&_svg]:h-4 [&_svg]:w-4"
+};
+var splitDividerColorClasses = {
+  accent: "border-ods-accent-active",
+  outline: "border-ods-border",
+  transparent: "border-ods-border",
+  destructive: "border-ods-error-active",
+  warning: "border-ods-warning-active"
+};
+var BUTTON_SIZE_CLASS = {
+  default: "h-11 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 md:h-12",
+  small: "h-6 p-[var(--spacing-system-xs)] text-h5 md:h-8",
+  // The CHILD is the affordance (a badge, a chip, a thumbnail): the button
+  // contributes the hit target, the focus ring and the keyboard/ARIA
+  // semantics, and NO box of its own. Without this, call sites reached for
+  // a `className="h-auto p-0"` override to cancel the default box.
+  wrap: "h-auto p-0",
+  "small-legacy": "h-10 px-[var(--spacing-system-m)] py-[var(--spacing-system-xs)] text-[14px] font-bold",
+  // Temporary alias for "small" — deprecated; grep size="small-legacy" (lib + hub) and migrate the remaining consumers before removal
+  // 24px pill for slim strips (announcement/promo bars, inline banner
+  // actions — Primer banner / Polaris banner / Vercel-bar convention).
+  // The label matches the strip's MESSAGE type ramp exactly (DM Sans
+  // regular, 13px -> md:14px, snug leading — the announcement bar's
+  // subtitle styling): in-strip CTAs must never read louder than the
+  // message beside them, so this deliberately uses neither the
+  // mono-uppercase control style of "small" nor a heavier weight.
+  // Pinned h-6 across breakpoints (24px = the WCAG 2.5.8 target-size
+  // floor) with horizontal-dominant padding and a 14px glyph.
+  compact: "h-6 px-[var(--spacing-system-sf)] py-0 font-normal text-h6 [&_svg]:h-3.5 [&_svg]:w-3.5",
+  icon: "h-11 w-11 p-[var(--spacing-system-sf)] md:h-12 md:w-12 [&_svg]:h-4 [&_svg]:w-4 md:[&_svg]:h-6 md:[&_svg]:w-6",
+  // Quiet 32px icon target with a 16px glyph, fixed across breakpoints
+  // (Carbon ghost sm / Primer medium / shadcn icon-sm all pin 32px;
+  // ≥ the 24px WCAG 2.5.8 target floor). For icon actions that read as
+  // metadata rather than CTAs — author-page social rows, share rows.
+  // Pair with variant="transparent" for the ghost treatment.
+  // `BUTTON_ICON_SM_SIZE` states the same 32px for a layout that must clear one.
+  "icon-sm": "h-8 w-8 p-[var(--spacing-system-xxs)] [&_svg]:h-4 [&_svg]:w-4",
+  // 20px inline glyph for affordances that sit INSIDE a line of text —
+  // an info hint beside a badge, a copy glyph after an id. `icon-sm`'s
+  // 32px target is correct for a metadata row but visually swamps a
+  // 10px badge or a 14px label, so hosts were reaching for className
+  // overrides to shrink it. Below the WCAG 2.5.8 target floor on purpose:
+  // this is only for glyphs whose information is ALSO available another
+  // way (tooltip content mirrored into an aria-describedby node), never
+  // for a sole means of performing an action.
+  "icon-inline": "h-5 min-h-0 w-5 min-w-0 shrink-0 p-0 [&_svg]:h-3.5 [&_svg]:w-3.5",
+  // Bare 56px media glyph (play / unmute over video). A size variant so
+  // hosts stop re-implementing a <button> to escape the 20px svg cap.
+  "icon-glyph": "h-14 w-14 p-0 [&_svg]:h-14 [&_svg]:w-14"
+};
+var KIND_FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus";
+var KIND_FOCUS_INSET = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus";
+var BUTTON_KIND_CLASS = {
+  // A control drawn as a form field (a date picker's, a searchable select's, a popup's trigger): Input's box, border
+  // and states, the value on the left.
+  field: [
+    "flex w-full items-center gap-[var(--spacing-system-xsf)] border px-[var(--spacing-system-sf)] text-left",
+    "h-11 rounded-[6px] md:h-12",
+    "border-ods-border bg-ods-card text-ods-text-primary text-h4 transition-colors duration-200",
+    "enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active",
+    "data-[state=open]:border-ods-accent aria-expanded:border-ods-accent",
+    "data-[invalid]:border-ods-error enabled:data-[invalid]:hover:border-ods-error",
+    "disabled:cursor-not-allowed disabled:bg-ods-bg disabled:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
+    "outline-none focus-visible:border-ods-accent",
+    "[&_svg]:shrink-0"
+  ].join(" "),
+  // A clickable row of a list, a menu or a navigation: full width, its content on the left, the hover and the
+  // selected surface of the list.
+  row: [
+    "flex w-full items-center gap-[var(--spacing-system-s)] rounded-md px-[var(--spacing-system-m)] py-[var(--spacing-system-s)] text-left",
+    "bg-transparent text-ods-text-primary text-h4 transition-colors duration-150",
+    "hover:bg-ods-bg-hover active:bg-ods-bg-active data-[state=active]:bg-ods-bg-active",
+    "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-transparent",
+    KIND_FOCUS_INSET,
+    "[&_svg]:shrink-0"
+  ].join(" "),
+  // A tab of a tab strip or a tab list: secondary until it is the open one. A strip that marks its open and hovered
+  // tab with the accent fade (the admin strip) says so on each tab with `data-emphasis="fade"`. ODS colour vars hold
+  // hex values, so a Tailwind alpha modifier would produce no CSS; color-mix() derives the 10% stop from the token.
+  tab: [
+    "group relative flex shrink-0 items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]",
+    "bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200",
+    "hover:text-ods-text-primary data-[state=active]:text-ods-text-primary",
+    "data-[emphasis=fade]:data-[state=active]:bg-gradient-to-b data-[emphasis=fade]:data-[state=active]:from-transparent data-[emphasis=fade]:data-[state=active]:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]",
+    "data-[emphasis=fade]:hover:bg-gradient-to-b data-[emphasis=fade]:hover:from-transparent data-[emphasis=fade]:hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]",
+    "disabled:cursor-not-allowed disabled:text-ods-text-disabled",
+    KIND_FOCUS_INSET,
+    "[&_svg]:shrink-0"
+  ].join(" "),
+  // A choice drawn as a pill (a filter, a quick question, an answer option): bordered, the accent when picked.
+  chip: [
+    "inline-flex h-8 items-center gap-[var(--spacing-system-xxs)] rounded-full border px-[var(--spacing-system-sf)]",
+    "border-ods-border bg-ods-card text-ods-text-primary text-h6 transition-colors duration-200",
+    "hover:border-ods-border-hover hover:bg-ods-bg-hover",
+    "aria-pressed:border-ods-accent data-[state=active]:border-ods-accent",
+    "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:hover:bg-ods-card",
+    KIND_FOCUS,
+    "[&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0"
+  ].join(" "),
+  // A whole card or tile that is one click target (a card's hit area, a media tile, a summary that expands): the
+  // content is the look; the button gives it the click, the keyboard and the focus ring.
+  card: ["relative block w-full rounded-md text-left text-ods-text-primary", KIND_FOCUS].join(" "),
+  // A cell of a bar (a header's or a chat's top bar): the bar's full height, an icon or a short label, secondary
+  // until hovered or pressed.
+  cell: [
+    "flex h-full shrink-0 items-center justify-center gap-[var(--spacing-system-xsf)] px-[var(--spacing-system-m)]",
+    "bg-transparent text-ods-text-secondary text-h4 transition-colors duration-200",
+    "hover:bg-ods-bg-hover hover:text-ods-text-primary aria-pressed:text-ods-accent aria-expanded:text-ods-text-primary data-[state=active]:text-ods-accent",
+    KIND_FOCUS_INSET,
+    "[&_svg]:h-6 [&_svg]:w-6 [&_svg]:shrink-0"
+  ].join(" ")
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.cn = cn; exports.LoadingScope = LoadingScope; exports.useLoadingScope = useLoadingScope; exports.LoadingWhen = LoadingWhen; exports.AnnouncedLoadingScope = AnnouncedLoadingScope; exports.InertWhileLoading = InertWhileLoading; exports.LOADING_NOOP = LOADING_NOOP; exports.LoadingStatus = LoadingStatus; exports.loadingItemProps = loadingItemProps; exports.LoadingItems = LoadingItems; exports.buttonSurfaceClasses = buttonSurfaceClasses; exports.outlineBorderClasses = outlineBorderClasses; exports.splitGlyphSizeBySize = splitGlyphSizeBySize; exports.splitDividerColorClasses = splitDividerColorClasses; exports.BUTTON_SIZE_CLASS = BUTTON_SIZE_CLASS; exports.BUTTON_KIND_CLASS = BUTTON_KIND_CLASS;