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

package/src/components/ui/tab-selector.tsx

@@ -3,6 +3,7 @@
 import type React from 'react';
 import { cn } from '../../utils/cn';
 import { useIsInActionsMenuHeader } from './actions-menu-header-context';
+import { Button } from './button';
 import { Label } from './label';
 
 export interface TabSelectorItem {
@@ -86,37 +87,26 @@ export function TabSelector({
           const isDisabled = disabled || item.disabled;
 
           return (
-            <button
+            <Button
+              variant="tab"
               key={item.id}
               type="button"
               disabled={isDisabled}
               onClick={() => onValueChange(item.id)}
               aria-label={!item.label ? item.ariaLabel : undefined}
-              className={cn(
-                // Bold on BOTH states (text-h3 = DM Sans bold) — a medium↔bold
-                // flip between the active and inactive tabs read as inconsistent
-                // weight (and nudged label widths on every switch).
-                'flex items-center justify-center gap-[var(--spacing-system-xs)] whitespace-nowrap rounded-xs p-[var(--spacing-system-xsf)] transition-colors duration-200 text-h4',
-                // scrollable: intrinsic widths must sum past the container or
-                // nothing ever overflows (flex-1's basis-0 defeats the scroll).
-                scrollable ? 'flex-none shrink-0 basis-auto' : 'flex-1',
-                isDisabled
-                  ? isActive
-                    ? 'cursor-not-allowed bg-ods-bg-surface text-ods-text-secondary'
-                    : 'cursor-not-allowed bg-transparent text-ods-text-secondary'
-                  : isActive
-                    ? variant === 'primary'
-                      ? 'cursor-default bg-ods-accent text-ods-text-on-accent'
-                      : 'cursor-default bg-ods-bg-surface text-ods-text-primary'
-                    : 'cursor-pointer bg-transparent text-ods-text-primary hover:bg-ods-bg-hover',
-              )}
+              aria-pressed={isActive}
+              data-state={isActive ? 'active' : undefined}
+              data-emphasis={variant === 'primary' ? 'fade' : undefined}
+              // scrollable: intrinsic widths must sum past the container or nothing ever overflows (flex-1's basis-0
+              // defeats the scroll).
+              className={cn('h-full whitespace-nowrap', scrollable ? 'flex-none' : 'flex-1')}
             >
               {item.icon && (
                 <span className="flex size-4 shrink-0 items-center justify-center content-md:size-6">{item.icon}</span>
               )}
               {item.label}
               {item.badge && item.badge}
-            </button>
+            </Button>
           );
         })}
       </div>

package/src/components/ui/tabs.tsx

@@ -118,35 +118,6 @@ function TabsTriggerSkeleton({
   );
 }
 
-/**
- * A tab list whose tabs are not known until a read: the list's own frame (the bordered rail for `admin-rail`) and
- * `count` trigger skeletons.
- */
-function TabsListSkeleton({
-  variant = 'default',
-  count,
-  labels,
-  className,
-}: {
-  variant?: TabsVariant;
-  /** How many tabs, when their names are read. */
-  count?: number;
-  /** The tabs' names, when the page states them (drawn as they are). */
-  labels?: string[];
-  className?: string;
-}) {
-  const tabs: Array<string | undefined> = labels ?? Array.from({ length: count ?? 0 }, () => undefined);
-  const list = (
-    <div aria-hidden className={cn(tabsListVariantClasses[variant], className)}>
-      {tabs.map((label, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton tabs never reorder
-        <TabsTriggerSkeleton key={i} variant={variant} label={label} />
-      ))}
-    </div>
-  );
-  return variant === 'admin-rail' ? <div className={ADMIN_RAIL_WRAPPER_CLASS}>{list}</div> : list;
-}
-
 /** @deprecated Use `TabNavigation` from `components/ui/tab-navigation`. See {@link Tabs}. */
 const TabsContent = forwardRef<
   ElementRef<typeof TabsPrimitive.Content>,
@@ -163,4 +134,4 @@ const TabsContent = forwardRef<
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsTriggerSkeleton, TabsListSkeleton };
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/tag-search-input.tsx

@@ -14,6 +14,7 @@ import { useIsomorphicLayoutEffect } from '../../hooks/ui/use-isomorphic-layout-
 import { cn } from '../../utils/cn';
 import { SearchIcon } from '../icons-v2-generated/interface/search-icon';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
+import { Button } from './button';
 import { HiddenTagsPopup } from './hidden-tags-popup';
 import { Tag } from './tag';
 
@@ -188,22 +189,18 @@ export function TagSearchInput<T = string>({
           {/* "+N" overflow badge */}
           {hiddenCount > 0 && (
             <div ref={hiddenTagsRef} className="shrink-0">
-              <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',
-                )}
               >
                 {getLimitTagsText(hiddenCount)}
-              </button>
+              </Button>
             </div>
           )}
 
@@ -228,14 +225,16 @@ export function TagSearchInput<T = string>({
 
         {/* Clear all — pinned right */}
         {showClearAll && hasValue && !disabled && (
-          <button
+          <Button
+            variant="transparent"
+            size="icon-sm"
             type="button"
             onClick={handleClearAll}
-            className="flex shrink-0 cursor-pointer items-center justify-center pr-3 transition-opacity hover:opacity-70"
+            className="mr-[var(--spacing-system-xxs)] shrink-0"
             aria-label="Clear all"
           >
-            <XmarkCircleIcon className="size-4 text-ods-text-secondary content-md:size-6" />
-          </button>
+            <XmarkCircleIcon className="text-ods-text-secondary" />
+          </Button>
         )}
       </div>
 

package/src/components/ui/tag-select-dropdown.tsx

@@ -130,6 +130,7 @@ export function TagSelectDropdown({
         >
           <div className="shrink-0 border-b border-ods-border">
             <Input
+              userValue
               autoFocus
               value={search}
               onChange={e => setSearch(e.target.value)}
@@ -175,7 +176,9 @@ export function TagSelectDropdown({
                   </span>
                   {isSelected && <CheckIcon className="size-4 shrink-0 text-ods-accent" />}
                   {onDelete && !isSelected && (
-                    <button
+                    <Button
+                      variant="transparent"
+                      size="icon-sm"
                       type="button"
                       aria-label={`Delete tag ${opt.label}`}
                       onClick={e => {
@@ -183,13 +186,10 @@ export function TagSelectDropdown({
                         onDelete(opt.id);
                       }}
                       disabled={isDeleting}
-                      className={cn(
-                        'shrink-0 opacity-0 transition-opacity focus-visible:opacity-100 group-hover/item:opacity-100',
-                        'disabled:pointer-events-none disabled:opacity-50',
-                      )}
+                      className="shrink-0"
                     >
-                      <TrashIcon className="size-4 text-ods-error" />
-                    </button>
+                      <TrashIcon className="text-ods-error" />
+                    </Button>
                   )}
                 </div>
               );
@@ -201,20 +201,12 @@ export function TagSelectDropdown({
                   Maximum {maxCreateLength} characters
                 </div>
               ) : (
-                <button
-                  type="button"
-                  onClick={handleCreate}
-                  disabled={isCreating}
-                  className={cn(
-                    'flex w-full items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs)] text-left',
-                    'transition-colors hover:bg-ods-bg-hover disabled:pointer-events-none disabled:opacity-50',
-                  )}
-                >
+                <Button variant="row" type="button" onClick={handleCreate} disabled={isCreating}>
                   <PlusIcon className="size-4 shrink-0 text-ods-accent" />
                   <span className="flex-1 truncate text-ods-accent text-h4" title={`Create "${query}"`}>
                     Create &ldquo;{query}&rdquo;
                   </span>
-                </button>
+                </Button>
               ))}
 
             {filtered.length === 0 && !showCreate && (

package/src/components/ui/tag.tsx

@@ -6,7 +6,9 @@ import { useIsTruncated } from '../../hooks/ui/use-is-truncated';
 import { cn } from '../../utils/cn';
 import { XmarkCircleIcon } from '../icons-v2-generated/signs-and-symbols/xmark-circle-icon';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
 import { FloatingTooltip } from './floating-tooltip';
+import { loadingItemProps, useLoadingScope } from './loading-scope';
 
 /** The tag's frame: read by `tagVariants` and by `TagSkeleton`. */
 const TAG_FRAME_CLASS = 'inline-flex items-center justify-center rounded-md';
@@ -105,6 +107,10 @@ export interface TagProps
    * `<a>` — don't combine `as="span"` + `onClose` inside an anchor.
    */
   as?: 'div' | 'span';
+  /** The label is still being read: the tag draws its `TagSkeleton` (the tag's own frame and size). In a loading
+   *  scope a tag with an EMPTY label does the same (its label is read data not here yet); a tag whose label is
+   *  written ("Beta", "Coming Soon") is static copy and stays real. */
+  loading?: boolean;
 }
 
 /**
@@ -150,8 +156,15 @@ function Tag({
   labelClassName,
   disabled,
   as: Comp = 'div',
+  loading,
   ...props
 }: TagProps) {
+  // ONE switch: while the host reads the label, or in a page's loading state when the label is not here yet, the tag
+  // is its skeleton, in its box, carrying the tag's markers (`data-loading-item`). A written label is static copy: it
+  // stays real in a scope.
+  const inScope = useLoadingScope();
+  if (!!loading || (inScope && isEmptyTagLabel(label)))
+    return <TagSkeleton size={size ?? 'default'} className={className} {...loadingItemProps(props)} />;
   return (
     <Comp
       className={cn(tagVariants({ variant, size }), disabled && disabledTagClasses, className)}
@@ -165,40 +178,49 @@ function Tag({
       )}
       <TagLabel label={label} labelClassName={labelClassName} />
       {onClose && (
-        <button
+        <Button
+          variant="transparent"
+          size="icon-inline"
           type="button"
           disabled={disabled}
           onClick={e => {
             e.stopPropagation();
             onClose();
           }}
-          className={cn(
-            'flex size-5 shrink-0 items-center justify-center rounded-full opacity-70 transition-opacity',
-            disabled ? 'cursor-not-allowed' : 'hover:opacity-100',
-          )}
           aria-label="Remove"
         >
-          <XmarkCircleIcon className="size-4" />
-        </button>
+          <XmarkCircleIcon />
+        </Button>
       )}
     </Comp>
   );
 }
 
+/** A label with nothing to show: the read has not answered yet. */
+function isEmptyTagLabel(label: React.ReactNode): boolean {
+  return label == null || label === false || (typeof label === 'string' && label.trim() === '');
+}
+
 export { Tag, tagVariants };
 
 /**
  * A tag while its label is read: one skeleton box of the tag's own frame and size (its height and padding), a fixed
- * width standing for the label.
+ * width standing for the label. Its `data-*` props (the list's `data-loading-item`) are forwarded, like the tag's.
  */
-export function TagSkeleton({
+function TagSkeleton({
   size = 'default',
   className,
+  ...props
 }: {
   size?: keyof typeof TAG_SIZE_CLASS;
   className?: string;
+  [marker: `data-${string}`]: unknown;
 }) {
   return (
-    <UnifiedSkeleton as="span" className={cn(TAG_FRAME_CLASS, TAG_SIZE_CLASS[size], 'w-16 shrink-0', className)} />
+    <UnifiedSkeleton
+      as="span"
+      className={cn(TAG_FRAME_CLASS, TAG_SIZE_CLASS[size], 'w-16 shrink-0', className)}
+      {...loadingItemProps(props)}
+    />
   );
 }

package/src/components/ui/tags-input.tsx

@@ -8,8 +8,9 @@ import { Badge } from './badge';
 import { Button } from './button';
 import { Input } from './input';
 import { Label } from './label';
+import { useLoadingScope } from './loading-scope';
 
-/** The field's layout (label, the input with its Add button, the tags, the count), shared with `TagsInputSkeleton`. */
+/** The field's layout (label, the input with its Add button, the tags, the count), shared with its loading form. */
 export const TAGS_INPUT_CLASS = 'space-y-2';
 /** The input and its Add button on one line. */
 export const TAGS_INPUT_ROW_CLASS = 'flex items-center gap-2';
@@ -40,9 +41,19 @@ interface TagsInputProps {
   inputClassName?: string;
   badgeClassName?: string;
   label?: string;
+  /** The tags are still being read: the field draws its own loading form (also inside a loading scope). */
+  loading?: boolean;
 }
 
-export function TagsInput({
+/** A field of tags. ONE switch: while its tags are read (`loading`, or a loading scope) its own loading form. */
+export function TagsInput(props: TagsInputProps) {
+  if (useLoadingScope() || props.loading) {
+    return <TagsInputSkeleton label={props.label} maxTags={props.maxTags} className={props.className} />;
+  }
+  return <LoadedTagsInput {...props} />;
+}
+
+function LoadedTagsInput({
   value = [],
   onChange,
   placeholder = 'Add a tag...',
@@ -111,14 +122,15 @@ export function TagsInput({
             <Badge key={tag} className={cn('flex items-center gap-1 py-1 pl-2 pr-1', badgeClassName)}>
               {tag}
               {!disabled && (
-                <button
+                <Button
+                  variant="transparent"
+                  size="icon-inline"
                   type="button"
                   onClick={() => handleRemoveTag(tag)}
-                  className="rounded p-0.5 transition-colors hover:bg-white/20"
                   aria-label={`Remove ${tag} tag`}
                 >
-                  <X className="h-3 w-3" />
-                </button>
+                  <X />
+                </Button>
               )}
             </Badge>
           ))}
@@ -138,11 +150,7 @@ export function TagsInput({
  * A `TagsInput` while its tags are read, in the field's own layout: the label and the Add button for real (the button
  * inert), the input's box and the tag count as skeletons. The tags themselves depend on the record and are not drawn.
  */
-export function TagsInputSkeleton({
-  label,
-  maxTags,
-  className,
-}: Pick<TagsInputProps, 'label' | 'maxTags' | 'className'>) {
+function TagsInputSkeleton({ label, maxTags, className }: Pick<TagsInputProps, 'label' | 'maxTags' | 'className'>) {
   return (
     <div className={cn(TAGS_INPUT_CLASS, className)}>
       {label && <Label>{label}</Label>}

package/src/components/ui/tags-manager.tsx

@@ -17,6 +17,7 @@ import {
 import { Button } from './button';
 import { FieldWrapper } from './field-wrapper';
 import { Input } from './input';
+import { Label } from './label';
 import { Tag } from './tag';
 
 export interface TagItem {
@@ -167,7 +168,8 @@ export function TagsManager({
         <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
           {/* Anchor container */}
           <PopoverPrimitive.Anchor asChild>
-            <label
+            <Label
+              variant="surface"
               className={cn(
                 'flex min-h-11 w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border px-3 py-1 content-md:min-h-12',
                 'transition-colors duration-200',
@@ -234,16 +236,18 @@ export function TagsManager({
 
               {/* Clear all button — shown when tags are selected */}
               {selectedTags.length > 0 && !disabled && (
-                <button
+                <Button
+                  variant="transparent"
+                  size="icon-sm"
                   type="button"
                   onClick={handleClearAll}
-                  className="flex flex-shrink-0 items-center justify-center transition-opacity hover:opacity-70 [&_svg]:size-4 content-md:[&_svg]:size-6"
+                  className="shrink-0"
                   aria-label="Clear all tags"
                 >
                   <XmarkCircleIcon className="text-ods-text-secondary" />
-                </button>
+                </Button>
               )}
-            </label>
+            </Label>
           </PopoverPrimitive.Anchor>
 
           {/* Dropdown */}
@@ -287,6 +291,7 @@ export function TagsManager({
                           className="flex items-center gap-1 border-b border-ods-border px-2 py-1 last:border-b-0"
                         >
                           <Input
+                            userValue
                             ref={editInputRef}
                             value={editingName}
                             onChange={e => setEditingName(e.target.value)}

package/src/components/ui/test-run.tsx

@@ -7,9 +7,12 @@ import { cn } from '../../utils/cn';
 import { formatTime } from '../../utils/format-date';
 import { Copy02Icon, SearchIcon } from '../icons-v2-generated';
 import { LoadingRegion } from '../loading/loading-region';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { Button } from './button';
 import { DataTable } from './data-table';
+import { DATA_TABLE_ROW_FRAME_CLASS, ROW_HEIGHT_DESKTOP, ROW_SHELL_CLASSES } from './data-table/data-table-row-classes';
 import { useDataTable } from './data-table/use-data-table';
+import { LoadingItems, useLoadingScope } from './loading-scope';
 import { NoData } from './no-data';
 import type { QueryResultRow } from './query-report-table';
 import { ScrollShadow } from './scroll-fade';
@@ -32,13 +35,17 @@ export function formatTestRunDuration(ms: number): string {
   return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
 }
 
+/** A result column's least width, in px, loaded and loading (the loaded column's class states the same value). */
 const RESULT_COLUMN_MIN_WIDTH = 176;
-const SKELETON_COLUMNS = 6;
+const RESULT_COLUMN_WIDTH_CLASS = 'flex-1 min-w-[176px]';
+/** A result set's columns are read with its rows and have no fixed count: a loading run draws a typical six (the count
+ * this skeleton has always drawn), as header bars and as its one row's cells. */
+const TEST_RESULTS_SKELETON_COLUMNS = 6;
 
-/** Column-bar skeleton (header cells + one card row): fixed 160px columns on
-    every breakpoint, scrolling horizontally when they do not fit. Bars are
-    `UnifiedSkeleton`s, like the table skeletons. */
-export function TestResultsSkeleton({
+/** Column-bar skeleton (header cells + one card row): columns `RESULT_COLUMN_MIN_WIDTH` wide (the loaded columns' least
+    width) on every breakpoint, scrolling horizontally when they do not fit. The row is the data table's own row card and shell
+    (`data-table-row-classes`); each bar a `TextLineSkeleton` of its text's type step. */
+function TestResultsSkeleton({
   region = true,
 }: {
   /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
@@ -50,22 +57,24 @@ export function TestResultsSkeleton({
         {/* No gap between the header bars and the row card — the real table's
           header and body sit flush. */}
         <div className="flex w-max min-w-full flex-col">
-          <div className="flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]">
-            {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
-              <div key={`skeleton-header-${i}`} className="flex h-12 w-[160px] shrink-0 items-center">
-                <UnifiedSkeleton className="h-4 w-3/4 rounded-sm" />
-              </div>
-            ))}
-          </div>
-          <div className="overflow-hidden rounded-[6px] border border-ods-border bg-ods-card">
-            {/* Same INNER row heights as the DataTable (66/78px + the 1px card
-              border on each side = 68/80px total, per design). */}
-            <div className="flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]">
-              {Array.from({ length: SKELETON_COLUMNS }).map((_, i) => (
-                <div key={`skeleton-cell-${i}`} className="w-[160px] shrink-0">
-                  <UnifiedSkeleton className="h-5 w-3/4 rounded-sm" />
+          <div className={cn('flex', ROW_SHELL_CLASSES)}>
+            <LoadingItems count={TEST_RESULTS_SKELETON_COLUMNS}>
+              {() => (
+                <div className="flex h-12 shrink-0 items-center" style={{ width: RESULT_COLUMN_MIN_WIDTH }}>
+                  <TextLineSkeleton type="h5" className="w-3/4" />
                 </div>
-              ))}
+              )}
+            </LoadingItems>
+          </div>
+          <div className={DATA_TABLE_ROW_FRAME_CLASS}>
+            <div className={cn('flex', ROW_SHELL_CLASSES, ROW_HEIGHT_DESKTOP)}>
+              <LoadingItems count={TEST_RESULTS_SKELETON_COLUMNS}>
+                {() => (
+                  <div data-loading-item className="shrink-0" style={{ width: RESULT_COLUMN_MIN_WIDTH }}>
+                    <TextLineSkeleton type="h4" className="w-3/4" />
+                  </div>
+                )}
+              </LoadingItems>
             </div>
           </div>
         </div>
@@ -80,7 +89,8 @@ export function TestResultsSkeleton({
  * from the keys of the returned rows; wide result sets scroll horizontally.
  * Unlike the default tables, headers stay visible on every breakpoint.
  */
-export function TestResultsTable({ rows, loading }: { rows: QueryResultRow[]; loading: boolean }) {
+export function TestResultsTable({ rows, loading: loadingProp }: { rows: QueryResultRow[]; loading: boolean }) {
+  const loading = useLoadingScope() || loadingProp;
   const columnKeys = useMemo(() => (rows.length > 0 ? Object.keys(rows[0]) : []), [rows]);
 
   const columns = useMemo<ColumnDef<QueryResultRow>[]>(() => {
@@ -98,11 +108,11 @@ export function TestResultsTable({ rows, loading }: { rows: QueryResultRow[]; lo
         );
       },
       meta: {
-        width: 'flex-1 min-w-[176px]',
+        width: RESULT_COLUMN_WIDTH_CLASS,
         // Show headers on every breakpoint; headerClassName sizes the cells
         // below lg where meta.width is not applied.
         alwaysShowHeader: true,
-        headerClassName: 'flex-1 min-w-[176px]',
+        headerClassName: RESULT_COLUMN_WIDTH_CLASS,
       },
     }));
   }, [columnKeys]);
@@ -153,14 +163,16 @@ export function TestRunErrorBanner({ error, className }: { error: string; classN
       )}
     >
       <p className="min-w-0 break-words text-ods-error text-h4">{error}</p>
-      <button
+      <Button
+        variant="transparent"
+        size="icon-sm"
         type="button"
         aria-label="Copy error message"
         onClick={() => copy(error)}
-        className="shrink-0 rounded-sm text-ods-error transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
+        className="shrink-0"
       >
-        <Copy02Icon className="size-5" />
-      </button>
+        <Copy02Icon className="text-ods-error" />
+      </Button>
     </div>
   );
 }