@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/src/components/ui/feature-card.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import type React from 'react';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Card } from './card';
+import { useLoadingScope } from './loading-scope';
 import { StatusBadge } from './status-badge';
 
 export interface FeatureCardItem {
@@ -57,6 +58,27 @@ export interface FeatureCardGridProps {
   subtitleClassName?: string;
   /** The subtitle's colour. Defaults to the platform accent. */
   accentClassName?: string;
+  /**
+   * The shape of the grid while its items are read (a page's loading state, where `items` is empty): how many
+   * items, and which of their parts they carry. Defaults to one row of title-only items.
+   */
+  skeleton?: FeatureCardGridSkeletonShape;
+}
+
+/** The parts each item of a loading grid carries; every read word is a bar of its own line height. */
+export interface FeatureCardGridSkeletonShape {
+  /** Items drawn. Defaults to one row (`columns`). */
+  count?: number;
+  /** An eyebrow above the title: a bar, or `'index'` for the item's own number ("01", "02"), drawn for real. */
+  eyebrow?: boolean | 'index';
+  /** A subtitle under the title. */
+  subtitle?: boolean;
+  /** A picture beside the title block: the classes of its box (its size and radius), drawn as a box. */
+  media?: string;
+  /** Lines of body copy under the title. */
+  contentLines?: 1 | 2 | 3;
+  /** The type step of that copy. Defaults to `h4`. */
+  contentType?: 'h4' | 'h6';
 }
 
 const GRID_COLUMNS = {
@@ -83,7 +105,7 @@ function fourColumnBorders(index: number, count: number): string {
   return ` ${classes.join(' ')}`;
 }
 
-export function FeatureCardGrid({
+function FeatureCardGridView({
   items,
   columns = 3,
   className = '',
@@ -98,7 +120,11 @@ export function FeatureCardGrid({
   titleClassName = '',
   subtitleClassName = '',
   accentClassName = 'text-ods-accent',
-}: FeatureCardGridProps) {
+  loadingKeepsEyebrow = false,
+}: Omit<FeatureCardGridProps, 'skeleton'> & {
+  /** While `loading`: the eyebrow is the item's own number, drawn for real. */
+  loadingKeepsEyebrow?: boolean;
+}) {
   const gridCols = GRID_COLUMNS[columns];
   const itemsPerRow = columns;
   const rows = Math.ceil(items.length / itemsPerRow);
@@ -226,8 +252,8 @@ export function FeatureCardGrid({
                         <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xsf)]">
                           {item.eyebrow && (
                             <span className="text-ods-text-secondary text-h5">
-                              {loading ? (
-                                <UnifiedSkeleton as="span" className="block h-[1lh] w-6 rounded" />
+                              {loading && !loadingKeepsEyebrow ? (
+                                <TextLineSkeleton type="inherit" as="span" className="w-6" />
                               ) : (
                                 item.eyebrow
                               )}
@@ -235,7 +261,7 @@ export function FeatureCardGrid({
                           )}
                           <h3 className={`text-ods-text-primary text-h2 ${titleClassName}`}>
                             {loading ? (
-                              <UnifiedSkeleton as="span" className="block h-[1lh] w-1/2 rounded" />
+                              <TextLineSkeleton type="inherit" as="span" className="w-1/2" />
                             ) : (
                               item.title
                             )}
@@ -243,7 +269,7 @@ export function FeatureCardGrid({
                           {item.subtitle && (
                             <p className={`text-h4 ${accentClassName} ${subtitleClassName}`}>
                               {loading ? (
-                                <UnifiedSkeleton as="span" className="block h-[1lh] w-3/4 rounded" />
+                                <TextLineSkeleton type="inherit" as="span" className="w-3/4" />
                               ) : (
                                 item.subtitle
                               )}
@@ -256,20 +282,20 @@ export function FeatureCardGrid({
                       <div className="flex flex-col gap-[var(--spacing-system-xsf)]">
                         {item.eyebrow && (
                           <span className="text-ods-text-secondary text-h5">
-                            {loading ? (
-                              <UnifiedSkeleton as="span" className="block h-[1lh] w-6 rounded" />
+                            {loading && !loadingKeepsEyebrow ? (
+                              <TextLineSkeleton type="inherit" as="span" className="w-6" />
                             ) : (
                               item.eyebrow
                             )}
                           </span>
                         )}
                         <h3 className={`whitespace-pre-line text-ods-text-primary text-h2 ${titleClassName}`}>
-                          {loading ? <UnifiedSkeleton as="span" className="block h-[1lh] w-1/2 rounded" /> : item.title}
+                          {loading ? <TextLineSkeleton type="inherit" as="span" className="w-1/2" /> : item.title}
                         </h3>
                         {item.subtitle && (
                           <p className={`text-h4 ${accentClassName} ${subtitleClassName}`}>
                             {loading ? (
-                              <UnifiedSkeleton as="span" className="block h-[1lh] w-3/4 rounded" />
+                              <TextLineSkeleton type="inherit" as="span" className="w-3/4" />
                             ) : (
                               item.subtitle
                             )}
@@ -277,7 +303,9 @@ export function FeatureCardGrid({
                         )}
                       </div>
                     ) : (
-                      <h3 className="whitespace-pre-line text-ods-text-primary text-h2">{item.title}</h3>
+                      <h3 className="whitespace-pre-line text-ods-text-primary text-h2">
+                        {loading ? <TextLineSkeleton type="inherit" as="span" className="w-1/2" /> : item.title}
+                      </h3>
                     )}
 
                     {!item.media && item.content}
@@ -293,3 +321,40 @@ export function FeatureCardGrid({
     </Card>
   );
 }
+
+/**
+ * FeatureCardGrid: a grid of items split by hairlines. In a page's loading state with no items yet (they are
+ * read) it draws its skeleton, `FeatureCardGridSkeleton` of `skeleton`'s shape; items it is given there are the
+ * page's own copy and draw as they are.
+ */
+export function FeatureCardGrid({ skeleton, ...props }: FeatureCardGridProps) {
+  const inScope = useLoadingScope();
+  if (inScope && props.items.length === 0) {
+    const { items: _items, loading: _loading, ...grid } = props;
+    return <FeatureCardGridSkeleton {...grid} {...skeleton} />;
+  }
+  return <FeatureCardGridView {...props} />;
+}
+
+/**
+ * A FeatureCardGrid while its items are read: the same grid (its columns, hairlines and item padding), each
+ * item's eyebrow, title, subtitle and copy a bar of its own line height, its picture a box.
+ */
+export function FeatureCardGridSkeleton({
+  count,
+  eyebrow,
+  subtitle,
+  media,
+  contentLines,
+  contentType = 'h4',
+  ...grid
+}: Omit<FeatureCardGridProps, 'items' | 'loading' | 'skeleton'> & FeatureCardGridSkeletonShape) {
+  const items: FeatureCardItem[] = Array.from({ length: count ?? grid.columns ?? 3 }, (_, index) => ({
+    title: '',
+    eyebrow: eyebrow ? String(index + 1).padStart(2, '0') : undefined,
+    subtitle: subtitle ? '-' : undefined,
+    media: media ? <UnifiedSkeleton className={media} /> : undefined,
+    content: contentLines ? <TextLineSkeleton type={contentType} lines={contentLines} className="w-full" /> : null,
+  }));
+  return <FeatureCardGridView {...grid} items={items} loading loadingKeepsEyebrow={eyebrow === 'index'} />;
+}

package/src/components/ui/feature-list.tsx

@@ -1,8 +1,11 @@
 'use client';
 
 import type React from 'react';
+import { cn } from '../../utils/cn';
+import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
-import { NumberedStep } from './numbered-step';
+import { useLoadingScope } from './loading-scope';
+import { NumberedStep, NumberedStepSkeleton } from './numbered-step';
 
 export interface FeatureListItemData {
   /** Shown in the boxed slot. Not used by the `numbered` variant. */
@@ -37,8 +40,21 @@ export interface FeatureListProps {
    * (a demo jumps to that step). Omit for a list that is only read.
    */
   onSelect?: (index: number) => void;
+  /** Rows drawn while the items are read (a page's loading state, where `items` is empty). */
+  skeletonCount?: number;
 }
 
+/** Rows a loading list draws when its caller names no count. */
+export const FEATURE_LIST_SKELETON_COUNT = 3;
+
+/** The list's frames, read by the list and by its skeleton. */
+const NUMBERED_LIST_CLASS = 'flex flex-col gap-[var(--spacing-system-lf)]';
+const BOXED_LIST_CLASS = 'flex flex-col overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg';
+const BOXED_ROW_CLASS = 'flex w-full items-start gap-4 bg-ods-card p-4';
+const BOXED_ROW_DIVIDER_CLASS = 'border-b border-ods-border';
+const ICON_BOX_CLASS = 'flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-bg';
+const BOXED_TEXT_CLASS = 'flex min-w-0 flex-1 flex-col gap-1';
+
 export function FeatureList({
   items,
   className = '',
@@ -47,11 +63,19 @@ export function FeatureList({
   activeIndex,
   accent,
   onSelect,
+  skeletonCount = FEATURE_LIST_SKELETON_COUNT,
 }: FeatureListProps) {
+  // Items given in a loading scope are the page's own copy; none means they are read.
+  const inScope = useLoadingScope();
+  if (inScope && items.length === 0) {
+    return (
+      <FeatureListSkeleton count={skeletonCount} variant={variant} iconBoxSize={iconBoxSize} className={className} />
+    );
+  }
   if (variant === 'numbered') {
     const dims = typeof activeIndex === 'number';
     return (
-      <ol className={`flex flex-col gap-[var(--spacing-system-lf)] ${className}`}>
+      <ol className={`${NUMBERED_LIST_CLASS} ${className}`}>
         {items.map((item, index) => {
           const current = dims && index === activeIndex;
           // Every numbered step on a page is the one `NumberedStep`.
@@ -90,21 +114,19 @@ export function FeatureList({
   }
 
   return (
-    <div className={`flex flex-col overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg ${className}`}>
+    <div className={`${BOXED_LIST_CLASS} ${className}`}>
       {items.map((item, index) => (
         <div
           key={index}
-          className={`flex w-full items-start gap-4 bg-ods-card p-4 ${
-            index < items.length - 1 ? 'border-b border-ods-border' : ''
-          }`}
+          className={`${BOXED_ROW_CLASS} ${index < items.length - 1 ? BOXED_ROW_DIVIDER_CLASS : ''}`}
         >
           <div
-            className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-bg"
+            className={ICON_BOX_CLASS}
             style={{ width: iconBoxSize, height: iconBoxSize }}
           >
             {item.icon}
           </div>
-          <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className={BOXED_TEXT_CLASS}>
             <p className="text-ods-text-primary text-h3">{item.title}</p>
             <p className="normal-case tracking-normal text-ods-text-secondary text-h6">{item.description}</p>
           </div>
@@ -113,3 +135,45 @@ export function FeatureList({
     </div>
   );
 }
+
+/**
+ * A FeatureList while its items are read: the same list, `count` rows. A numbered row keeps its number; a boxed
+ * row's icon is a box of the icon's frame; every title and description is a bar of its own line height.
+ */
+export function FeatureListSkeleton({
+  count = FEATURE_LIST_SKELETON_COUNT,
+  variant = 'boxed',
+  iconBoxSize = 72,
+  className = '',
+}: {
+  count?: number;
+  variant?: FeatureListProps['variant'];
+  iconBoxSize?: number;
+  className?: string;
+}) {
+  const rows = Array.from({ length: count }, (_, index) => index);
+  if (variant === 'numbered') {
+    return (
+      <ol className={`${NUMBERED_LIST_CLASS} ${className}`} aria-hidden>
+        {rows.map(index => (
+          <li key={index}>
+            <NumberedStepSkeleton number={index + 1} />
+          </li>
+        ))}
+      </ol>
+    );
+  }
+  return (
+    <div className={`${BOXED_LIST_CLASS} ${className}`} aria-hidden>
+      {rows.map(index => (
+        <div key={index} className={cn(BOXED_ROW_CLASS, index < count - 1 && BOXED_ROW_DIVIDER_CLASS)}>
+          <UnifiedSkeleton className="shrink-0 rounded-[6px]" width={iconBoxSize} height={iconBoxSize} />
+          <div className={BOXED_TEXT_CLASS}>
+            <TextLineSkeleton type="h3" className="w-1/2" />
+            <TextLineSkeleton type="h6" className="w-3/4" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/field-wrapper.tsx

@@ -61,6 +61,13 @@ export interface FieldWrapperProps {
   children: ReactNode;
 }
 
+/**
+ * The id `FieldWrapper` gives its label when it names a control (`htmlFor`), so
+ * a control that a `<label for>` cannot name (a group of chips) can point at it
+ * with `aria-labelledby`.
+ */
+export const fieldLabelId = (htmlFor: string): string => `${htmlFor}-label`;
+
 const errorVariantClasses = {
   error: 'text-ods-error',
   warning: 'text-ods-warning',
@@ -93,7 +100,12 @@ const FieldWrapper = forwardRef<HTMLDivElement, FieldWrapperProps>(
           // 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.
-          <Label className="mb-1" htmlFor={htmlFor} variant={labelVariant}>
+          <Label
+            id={htmlFor ? fieldLabelId(htmlFor) : undefined}
+            className="mb-1"
+            htmlFor={htmlFor}
+            variant={labelVariant}
+          >
             {label}
             {required && <RequiredMark />}
           </Label>

package/src/components/ui/filter-checkbox-item.tsx

@@ -2,8 +2,18 @@
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import type { ReactNode } from 'react';
+import { CONTROL_SIZE } from '../../styles/component-sizes';
 import { cn } from '../../utils/cn';
 import { CheckboxCheckmarkIcon } from '../icons-v2-generated/signs-and-symbols/checkbox-checkmark-icon';
+import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { useLoadingScope } from './loading-scope';
+
+/** The item's row, box and text, read by the item and by its skeleton, so the skeleton is the item's size. */
+const ITEM_ROW_CLASS = 'flex items-center gap-3 border-b border-ods-border bg-ods-card last:border-b-0';
+const ITEM_BOX_CLASS = `${CONTROL_SIZE.selection} shrink-0 rounded-[6px] border-2`;
+const ITEM_LABEL_CLASS = 'min-w-0 flex-1 text-ods-text-primary text-h4';
+const ITEM_COUNT_CLASS = 'shrink-0 text-ods-text-secondary text-h5';
+const itemPaddingClass = (hasCount: boolean) => (hasCount ? 'px-4 py-3' : 'p-3');
 
 export interface FilterCheckboxItemProps {
   /** Text, or a richer label (an icon with a word and a tooltip). */
@@ -27,12 +37,23 @@ export function FilterCheckboxItem({
   disabled,
   className,
 }: FilterCheckboxItemProps) {
+  // In a page's loading state the item is its skeleton: a label the page states is drawn for real, a read one
+  // ('' there) and the count are bars.
+  if (useLoadingScope()) {
+    return (
+      <FilterCheckboxItemSkeleton
+        label={typeof label === 'string' ? label || undefined : label}
+        count={count !== undefined}
+        className={className}
+      />
+    );
+  }
   return (
     <div
       className={cn(
-        'flex items-center gap-3 border-b border-ods-border bg-ods-card last:border-b-0',
+        ITEM_ROW_CLASS,
         disabled ? 'cursor-wait opacity-70' : 'cursor-pointer transition-colors hover:bg-ods-bg-hover',
-        count !== undefined ? 'px-4 py-3' : 'p-3',
+        itemPaddingClass(count !== undefined),
         className,
       )}
       onClick={() => !disabled && onChange(!checked)}
@@ -43,7 +64,7 @@ export function FilterCheckboxItem({
         aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}
         onCheckedChange={c => onChange(c === true)}
         className={cn(
-          'h-6 w-6 shrink-0 rounded-[6px] border-2',
+          ITEM_BOX_CLASS,
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
           checked ? 'border-ods-accent bg-ods-accent' : 'border-ods-text-secondary bg-ods-card',
         )}
@@ -53,9 +74,39 @@ export function FilterCheckboxItem({
           <CheckboxCheckmarkIcon size={10} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <span className="min-w-0 flex-1 text-ods-text-primary text-h4">{label}</span>
-      {count !== undefined && (
-        <span className="shrink-0 text-ods-text-secondary text-h5">{count.toLocaleString()}</span>
+      <span className={ITEM_LABEL_CLASS}>{label}</span>
+      {count !== undefined && <span className={ITEM_COUNT_CLASS}>{count.toLocaleString()}</span>}
+    </div>
+  );
+}
+
+/**
+ * A filter checkbox while its facet is read: the same row and an unchecked box, the label for real when given (else
+ * a bar), and with `count` the count as a bar.
+ */
+export function FilterCheckboxItemSkeleton({
+  label,
+  count = false,
+  className,
+}: {
+  label?: ReactNode;
+  count?: boolean;
+  className?: string;
+}) {
+  return (
+    <div className={cn(ITEM_ROW_CLASS, itemPaddingClass(count), className)} aria-hidden>
+      <span className={cn(ITEM_BOX_CLASS, 'border-ods-text-secondary bg-ods-card')} />
+      {label ? (
+        <span className={ITEM_LABEL_CLASS}>{label}</span>
+      ) : (
+        <span className="min-w-0 flex-1">
+          <TextLineSkeleton type="h4" className="w-32" />
+        </span>
+      )}
+      {count && (
+        <span className={ITEM_COUNT_CLASS}>
+          <TextLineSkeleton type="inherit" as="span" className="inline-block w-6 align-top" />
+        </span>
       )}
     </div>
   );

package/src/components/ui/filter-modal.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-
+import type { DateRange } from 'react-day-picker';
 import { cn } from '../../utils/cn';
 import { Filter02Icon } from '../icons-v2-generated/sort-and-filter/filter-02-icon';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
-import { DateFilterPanel, type DateFilterResult, type DateRange } from './date-picker';
+import { DateFilterPanel, type DateFilterResult } from './date-picker';
 import { FilterCheckboxItem } from './filter-checkbox-item';
 import { ModalV2, ModalV2Content, ModalV2Footer, ModalV2Header, ModalV2Title } from './modal-v2';
 import { ScrollFadeOverlay, useScrollFade } from './scroll-fade';
@@ -14,10 +14,6 @@ import { SortColumnItem, type SortConfig, type SortDirection } from './sort-colu
 import type { TableFilters } from './table/types';
 import { TagKeyValueFilter, type TagKeyConfig } from './tag-key-value-filter';
 
-// Re-export sub-component types for consumers
-export type { SortableColumn, SortConfig, SortDirection } from './sort-column-item';
-export type { TagKeyConfig, TagValueOption } from './tag-key-value-filter';
-
 export interface FilterModalOption {
   id: string;
   label: string;

package/src/components/ui/filter-pill-row.tsx

@@ -14,8 +14,9 @@
 
 import { Filter } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { InteractiveSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from './button';
+import { useLoadingScope } from './loading-scope';
 
 export interface FilterPillRowOption {
   value: string;
@@ -35,6 +36,41 @@ export interface FilterPillRowProps {
   countLabel?: string;
   /** Optional children to render instead of options (for custom filter content). */
   children?: ReactNode;
+  /** The options are read on the client and have not arrived: the row draws its skeleton, as in a loading scope. */
+  loading?: boolean;
+}
+
+/** The row's shell, label and count line, read by the row and by its skeleton, so the skeleton is the row's box. */
+const FILTER_ROW_CLASS = 'flex flex-wrap items-center gap-3 rounded-lg border border-ods-border bg-ods-card p-4';
+const FILTER_COUNT_CLASS = 'ml-auto shrink-0 text-ods-text-secondary text-h6';
+/** The pill's button size, read by the pill and by its skeleton (`InteractiveSkeleton.Button size`). */
+const FILTER_PILL_SIZE = 'small-legacy';
+
+function FilterPillRowFrame({ label, children, inert }: { label: string; children: ReactNode; inert?: boolean }) {
+  return (
+    <div className={FILTER_ROW_CLASS} aria-hidden={inert || undefined} inert={inert || undefined}>
+      <div className="flex items-center gap-2">
+        <Filter className="h-4 w-4 text-ods-accent" />
+        <span className="text-ods-text-secondary text-h5">{label}</span>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function FilterPill({ label, selected, onClick }: { label: string; selected: boolean; onClick?: () => void }) {
+  return (
+    <Button
+      type="button"
+      variant={selected ? 'accent' : 'outline'}
+      size={FILTER_PILL_SIZE}
+      onClick={onClick}
+      tabIndex={onClick ? undefined : -1}
+      className="text-h3"
+    >
+      {label}
+    </Button>
+  );
 }
 
 export function FilterPillRow({
@@ -44,45 +80,63 @@ export function FilterPillRow({
   options,
   countLabel,
   children,
+  loading = false,
 }: FilterPillRowProps) {
+  // In a page's loading state the row is its skeleton: options the page states are its own words (drawn for
+  // real), read ones arrive empty (boxes), and a count label is read data (a bar).
+  if ((useLoadingScope() || loading) && !children) {
+    return (
+      <FilterPillRowSkeleton
+        label={label}
+        options={options.length > 0 ? options.map(opt => opt.label) : undefined}
+        count={countLabel !== undefined}
+      />
+    );
+  }
   return (
-    <div className="flex flex-wrap items-center gap-3 rounded-lg border border-ods-border bg-ods-card p-4">
-      <div className="flex items-center gap-2">
-        <Filter className="h-4 w-4 text-ods-accent" />
-        <span className="text-ods-text-secondary text-h5">{label}</span>
-      </div>
+    <FilterPillRowFrame label={label}>
       {children ||
         options.map(opt => (
-          <Button
+          <FilterPill
             key={opt.value}
-            type="button"
-            variant={selectedValue === opt.value ? 'accent' : 'outline'}
-            size="small-legacy"
+            label={opt.label}
+            selected={selectedValue === opt.value}
             onClick={() => onValueChange(opt.value)}
-            className="text-h3"
-          >
-            {opt.label}
-          </Button>
+          />
         ))}
-      {countLabel && <div className="ml-auto shrink-0 text-ods-text-secondary text-h6">{countLabel}</div>}
-    </div>
+      {countLabel && <div className={FILTER_COUNT_CLASS}>{countLabel}</div>}
+    </FilterPillRowFrame>
   );
 }
 
-const noop = () => {};
-
 /**
  * The loading state of a SERVED pill row (facets that arrive with the data):
- * the same row shell with placeholder pills, so the filters never pop in under
- * the content. The row renders its children INSTEAD of options, which is
- * exactly what a skeleton wants.
+ * the same row shell, its label real, the `options` it states as real pills,
+ * else `pills` boxes of a pill's size, so the filters never pop in under the
+ * content. With `count` the count line is a bar.
  */
-export function FilterPillRowSkeleton({ label, pills = 5 }: { label: string; pills?: number }) {
+export function FilterPillRowSkeleton({
+  label,
+  options,
+  pills = 5,
+  count = false,
+}: {
+  label: string;
+  /** Option labels the page states itself: real pills in place of the boxes. */
+  options?: string[];
+  pills?: number;
+  count?: boolean;
+}) {
   return (
-    <FilterPillRow label={label} selectedValue="" onValueChange={noop} options={[]}>
-      {Array.from({ length: pills }, (_, i) => (
-        <UnifiedSkeleton key={i} className="h-8 w-24 rounded" />
-      ))}
-    </FilterPillRow>
+    <FilterPillRowFrame label={label} inert>
+      {options
+        ? options.map(option => <FilterPill key={option} label={option} selected={false} />)
+        : Array.from({ length: pills }, (_, i) => <InteractiveSkeleton.Button key={i} size={FILTER_PILL_SIZE} />)}
+      {count && (
+        <div className={FILTER_COUNT_CLASS}>
+          <TextLineSkeleton type="h6" className="w-40" />
+        </div>
+      )}
+    </FilterPillRowFrame>
   );
 }

package/src/components/ui/incident-feed.tsx

@@ -60,9 +60,17 @@ export interface IncidentFeedProps {
   className?: string;
 }
 
+/** The feed's frame and its open item. */
+const FEED_CLASS = 'flex min-h-0 flex-1 flex-col gap-3 overflow-hidden p-4 md:px-5';
+const FEED_BOTTOM_CLASS = 'justify-end [mask-image:linear-gradient(180deg,transparent_0,#000_48px)]';
+const OPEN_ITEM_CLASS = 'flex flex-col gap-1.5 rounded-md border border-ods-border bg-ods-bg px-4 py-3.5';
+const META_CLASS = 'flex items-center justify-between gap-3';
+const SOURCE_TAG_CLASS =
+  'inline-flex shrink-0 rounded-md border border-ods-border px-2 py-1 text-ods-text-secondary text-h5';
+
 function SourceTag({ children }: { children: ReactNode }) {
   return (
-    <span className="inline-flex shrink-0 rounded-md border border-ods-border px-2 py-1 text-ods-text-secondary text-h5">
+    <span className={SOURCE_TAG_CLASS}>
       {children}
     </span>
   );
@@ -72,7 +80,7 @@ function SourceTag({ children }: { children: ReactNode }) {
 function ItemMeta({ item }: { item: IncidentFeedItem }) {
   if (!item.source && !item.time) return null;
   return (
-    <div className="flex items-center justify-between gap-3">
+    <div className={META_CLASS}>
       {item.source ? <SourceTag>{item.source}</SourceTag> : <span />}
       {item.time && <span className="shrink-0 text-ods-text-secondary text-h6">{item.time}</span>}
     </div>
@@ -85,16 +93,16 @@ function ItemMeta({ item }: { item: IncidentFeedItem }) {
  * to a single row each. An item that is waiting on a person stays open even
  * after newer ones arrive, because it is still the thing to look at.
  */
-export function IncidentFeed({ items, statusLabels, emptyLabel, anchor = 'top', className }: IncidentFeedProps) {
+export function IncidentFeed({
+  items,
+  statusLabels,
+  emptyLabel,
+  anchor = 'top',
+  className,
+}: IncidentFeedProps) {
   const lastIndex = items.length - 1;
   return (
-    <div
-      className={cn(
-        'flex min-h-0 flex-1 flex-col gap-3 overflow-hidden p-4 md:px-5',
-        anchor === 'bottom' && 'justify-end [mask-image:linear-gradient(180deg,transparent_0,#000_48px)]',
-        className,
-      )}
-    >
+    <div className={cn(FEED_CLASS, anchor === 'bottom' && FEED_BOTTOM_CLASS, className)}>
       {items.length === 0 && emptyLabel && <AnalyzingState label={emptyLabel} className="m-auto" />}
       {items.map((item, index) => {
         const open = index === lastIndex || item.status === 'waiting';
@@ -115,7 +123,7 @@ export function IncidentFeed({ items, statusLabels, emptyLabel, anchor = 'top',
         return (
           <div
             key={item.id}
-            className="flex flex-col gap-1.5 rounded-md border border-ods-border bg-ods-bg px-4 py-3.5 duration-300 animate-in fade-in motion-reduce:animate-none"
+            className={cn(OPEN_ITEM_CLASS, 'duration-300 animate-in fade-in motion-reduce:animate-none')}
           >
             <ItemMeta item={item} />
             <span className="flex items-start gap-2.5">
@@ -138,3 +146,4 @@ export function IncidentFeed({ items, statusLabels, emptyLabel, anchor = 'top',
     </div>
   );
 }
+