@oods/components-react 0.3.2 → 0.4.0

package/dist/table.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var componentContracts = require('@oods/component-contracts');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -24,306 +25,6 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/table.tsx
-
-// src/status-map.json
-var status_map_default = {
-  domains: {
-    subscription: {
-      future: {
-        description: "Subscription is scheduled but not yet active.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.scheduled"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.scheduled"
-        }
-      },
-      trialing: {
-        description: "Subscription is in a trial period before billing begins.",
-        chip: {
-          foreground: "color.text.accent",
-          background: "color.background.accent.subtle",
-          border: "color.border.accent",
-          icon: "icon.status.trial"
-        },
-        banner: {
-          foreground: "color.text.accent",
-          background: "color.background.surface.default",
-          border: "color.border.accent",
-          icon: "icon.status.trial"
-        }
-      },
-      active: {
-        description: "Subscription is paid and service is provisioned.",
-        chip: {
-          foreground: "color.text.positive",
-          background: "color.background.positive.subtle",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        },
-        banner: {
-          foreground: "color.text.positive",
-          background: "color.background.surface.default",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        }
-      },
-      paused: {
-        description: "Billing paused temporarily by finance or customer request.",
-        chip: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.paused"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.surface.muted",
-          border: "color.border.neutral",
-          icon: "icon.status.paused"
-        }
-      },
-      pending_cancellation: {
-        description: "Subscription will cancel at period end but remains active now.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        }
-      },
-      past_due: {
-        description: "Renewal payment failed; smart retries ongoing and access retained during the grace window.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.warning"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.warning"
-        }
-      },
-      unpaid: {
-        description: "Payment retries exhausted; service access revoked.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        }
-      },
-      terminated: {
-        description: "Subscription ended; service access revoked and billing stopped.",
-        chip: {
-          foreground: "color.text.disabled",
-          background: "color.background.disabled",
-          border: "color.border.disabled",
-          icon: "icon.status.canceled"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.canceled"
-        }
-      }
-    },
-    invoice: {
-      draft: {
-        description: "Invoice is editable and not yet finalized.",
-        chip: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.draft"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.surface.muted",
-          border: "color.border.neutral",
-          icon: "icon.status.draft"
-        }
-      },
-      posted: {
-        description: "Invoice finalized with terms before collection.",
-        chip: {
-          foreground: "color.text.info",
-          background: "color.background.info.subtle",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        },
-        banner: {
-          foreground: "color.text.info",
-          background: "color.background.surface.default",
-          border: "color.border.info",
-          icon: "icon.status.pending"
-        }
-      },
-      paid: {
-        description: "Invoice collected successfully in full.",
-        chip: {
-          foreground: "color.text.positive",
-          background: "color.background.positive.subtle",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        },
-        banner: {
-          foreground: "color.text.positive",
-          background: "color.background.surface.default",
-          border: "color.border.positive",
-          icon: "icon.status.success"
-        }
-      },
-      past_due: {
-        description: "Invoice is unpaid past its due date.",
-        chip: {
-          foreground: "color.text.danger",
-          background: "color.background.danger.subtle",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        },
-        banner: {
-          foreground: "color.text.onbold",
-          background: "color.background.danger.bold",
-          border: "color.border.danger",
-          icon: "icon.status.error"
-        }
-      },
-      void: {
-        description: "Invoice canceled and no longer payable.",
-        chip: {
-          foreground: "color.text.disabled",
-          background: "color.background.disabled",
-          border: "color.border.disabled",
-          icon: "icon.status.void"
-        },
-        banner: {
-          foreground: "color.text.neutral",
-          background: "color.background.neutral.subtle",
-          border: "color.border.neutral",
-          icon: "icon.status.void"
-        }
-      }
-    }
-  }
-};
-
-// src/status.ts
-var TONE_ALIASES = {
-  info: "info",
-  informational: "info",
-  accent: "accent",
-  highlight: "accent",
-  positive: "success",
-  success: "success",
-  ok: "success",
-  warning: "warning",
-  caution: "warning",
-  danger: "critical",
-  critical: "critical",
-  error: "critical",
-  negative: "critical",
-  neutral: "neutral",
-  pending: "info"
-};
-var toLabel = (status) => status.split(/[_-]/).filter(Boolean).map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join(" ");
-var inferTone = (entry) => {
-  if (!entry) return "neutral";
-  for (const reference of [entry.foreground, entry.background, entry.border]) {
-    const segments = reference.replace(/^\{|\}$/g, "").split(/[\s./_-]+/).reverse();
-    for (const segment of segments) {
-      const tone = TONE_ALIASES[segment.toLowerCase()];
-      if (tone) return tone;
-    }
-  }
-  return "neutral";
-};
-var componentTokenSet = (tone) => {
-  const normalized = tone === "positive" ? "success" : tone === "danger" ? "critical" : tone;
-  return {
-    background: `var(--sys-status-${normalized}-surface)`,
-    border: `var(--sys-status-${normalized}-border)`,
-    foreground: `var(--sys-status-${normalized}-text)`
-  };
-};
-var rawTokenSet = (entry) => {
-  const tone = inferTone(entry);
-  return componentTokenSet(tone);
-};
-var bannerFallback = (tone) => tone === "neutral" ? {
-  background: "var(--cmp-banner-background)",
-  border: "var(--cmp-banner-border)",
-  foreground: "var(--cmp-banner-text)"
-} : componentTokenSet(tone);
-var fallback = (domain, status, tone = "neutral") => ({
-  domain,
-  status,
-  label: toLabel(status || "Unknown"),
-  description: "Status not found in registry; falling back to the requested token set.",
-  tone,
-  badge: { subtle: componentTokenSet(tone), solid: componentTokenSet(tone) },
-  banner: { subtle: bannerFallback(tone), solid: componentTokenSet(tone) }
-});
-var registry = /* @__PURE__ */ new Map();
-for (const [domain, entries] of Object.entries(status_map_default.domains)) {
-  const domainEntries = /* @__PURE__ */ new Map();
-  for (const [status, entry] of Object.entries(entries)) {
-    const tone = inferTone(entry.chip);
-    domainEntries.set(status.toLowerCase(), {
-      domain,
-      status,
-      label: toLabel(status),
-      description: entry.description,
-      tone,
-      iconName: entry.chip.icon ?? entry.banner?.icon,
-      badge: { subtle: rawTokenSet(entry.chip), solid: componentTokenSet(tone) },
-      banner: {
-        subtle: entry.banner ? rawTokenSet(entry.banner) : bannerFallback(tone),
-        solid: componentTokenSet(tone)
-      }
-    });
-  }
-  registry.set(domain, domainEntries);
-}
-var LEGACY_STATUS_ALIASES = {
-  subscription: { delinquent: "unpaid" }
-};
-Object.freeze([...registry.keys()]);
-function getStatusPresentation(domain, status) {
-  const entries = registry.get(domain);
-  if (!entries) return fallback(domain, status);
-  const normalized = status.toLowerCase();
-  const direct = entries.get(normalized);
-  if (direct) return direct;
-  const alias = LEGACY_STATUS_ALIASES[domain]?.[normalized];
-  const aliased = alias ? entries.get(alias) : void 0;
-  return aliased ? { ...aliased, status, label: toLabel(status) } : fallback(domain, status);
-}
-function getToneTokenSet(tone) {
-  return componentTokenSet(tone);
-}
 var classes = (...values) => values.filter(Boolean).join(" ");
 var TableHead = React__namespace.forwardRef(
   ({ className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: classes("oods-table__header", className), ...rest })
@@ -406,9 +107,9 @@ var TableCell = React__namespace.forwardRef(
     title,
     ...rest
   }, ref) => {
-    const presentation = status ? getStatusPresentation(statusDomain, status) : void 0;
+    const presentation = status ? componentContracts.getStatusPresentation(statusDomain, status) : void 0;
     const tone = toneOverride ?? presentation?.tone;
-    const tokens = tone ? getToneTokenSet(tone) : void 0;
+    const tokens = tone ? componentContracts.getToneTokenSet(tone) : void 0;
     const statusStyle = tokens ? statusEmphasis === "text" ? { "--table-cell-status-foreground": tokens.foreground } : {
       "--table-cell-status-background": tokens.background,
       "--table-cell-status-border": tokens.border,
@@ -442,6 +143,7 @@ TableCell.displayName = "OODS.Table.Cell";
 var TableRoot = React__namespace.forwardRef(
   ({
     caption,
+    showCaption = true,
     columns,
     rows,
     density = "comfortable",
@@ -467,8 +169,8 @@ var TableRoot = React__namespace.forwardRef(
           "data-density": density,
           ...rest,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { children: caption }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
+            caption ? /* @__PURE__ */ jsxRuntime.jsx(TableCaption, { "data-visually-hidden": showCaption ? void 0 : "true", children: caption }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: columns?.map((column) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { numeric: column.numeric, children: column.label }, column.key)) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: (rows?.length ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "oods-table__row", children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: Math.max(columns?.length ?? 0, 1), children: "No rows available." }) }) : rows?.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
               "tr",
               {

package/dist/table.js

@@ -1,2 +1,2 @@
-export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-YCI5AEWL.js';
-import './chunk-G74PKSW3.js';
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-XEX22E24.js';
+import './chunk-2VEQWKGK.js';

package/dist/types.d.cts

@@ -3,6 +3,8 @@ import * as React from 'react';
 type ComponentTone = 'neutral' | 'info' | 'accent' | 'positive' | 'success' | 'warning' | 'critical' | 'danger';
 type ComponentEmphasis = 'subtle' | 'solid';
 type ComponentSize = 'sm' | 'md' | 'lg';
+type ButtonSize = 'xs' | ComponentSize;
+type ButtonIntent = 'neutral' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'warning' | 'danger';
 type FieldDensity = 'compact' | 'comfortable';
 type FieldValidation = {
     readonly state: 'error' | 'warning' | 'success' | 'info';
@@ -39,10 +41,29 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     readonly content?: React.ReactNode;
     readonly children?: React.ReactNode;
     readonly asChild?: boolean;
-    readonly intent?: 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
-    readonly size?: ComponentSize;
+    readonly intent?: ButtonIntent;
+    readonly size?: ButtonSize;
     readonly onActivate?: React.MouseEventHandler<HTMLElement>;
 }
+type NativeDialogProps = Omit<React.DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'title' | 'children' | 'className' | 'style' | 'onClose' | 'onCancel'>;
+/**
+ * s222-m02 (#2502 ruling 11): a native dialog whose consumer owns open. onClose reports the close control, Escape or a
+ * browser close request; modal (default true) opens it with showModal(), and modal false shows it in place.
+ */
+interface DialogProps extends NativeDialogProps {
+    readonly id?: string;
+    readonly open?: boolean;
+    readonly modal?: boolean;
+    readonly title: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly dismissLabel?: string;
+    readonly size?: 'sm' | 'md' | 'lg';
+    readonly actions?: React.ReactNode;
+    readonly children?: React.ReactNode;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly onClose?: () => void;
+}
 type SafeContainerElement = 'div' | 'section' | 'article' | 'aside' | 'main';
 interface CardProps extends React.HTMLAttributes<HTMLElement> {
     readonly elevated?: boolean;
@@ -98,6 +119,17 @@ interface VizAreaPreviewProps extends React.HTMLAttributes<HTMLElement> {
     readonly svgNarrow?: string;
     /** The same chart rendered at the wide size; the figure shows it instead of svg when its own inline size is at least 900px. */
     readonly svgWide?: string;
+    /**
+     * s222-m02 (F7): the same chart rendered in the dark and high-contrast themes, at the design, narrow and wide sizes. With
+     * any of them, svg, svgNarrow and svgWide are the light renders, and the figure shows the renders of the theme the
+     * nearest [data-theme] names.
+     */
+    readonly svgDark?: string;
+    readonly svgDarkNarrow?: string;
+    readonly svgDarkWide?: string;
+    readonly svgHc?: string;
+    readonly svgHcNarrow?: string;
+    readonly svgHcWide?: string;
     readonly description?: string;
     readonly width?: number;
     readonly height?: number;
@@ -342,6 +374,22 @@ interface CheckboxProps extends NativeCheckboxProps, CommonFieldProps {
     readonly onCheckedChange?: (checked: boolean) => void;
     readonly onUpdate?: (checked: boolean) => void;
 }
+type NativeSwitchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'type' | 'role' | 'value' | 'children' | 'className' | 'style' | 'onChange'>;
+/** s222-m02 (#2502 ruling 11): Checkbox's field API on a button with role switch; native button props reach the button. */
+interface SwitchProps extends NativeSwitchProps {
+    readonly id: string;
+    readonly label: React.ReactNode;
+    readonly checked?: boolean;
+    readonly defaultChecked?: boolean;
+    readonly required?: boolean;
+    readonly help?: React.ReactNode;
+    readonly validation?: FieldValidation;
+    readonly size?: 'sm' | 'md';
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly onCheckedChange?: (checked: boolean) => void;
+    readonly onUpdate?: (checked: boolean) => void;
+}
 type SelectOption = {
     readonly value: string;
     readonly label: React.ReactNode;
@@ -390,6 +438,7 @@ type TableColumn<Row extends TableRowData = TableRowData> = {
 };
 interface TableProps<Row extends TableRowData = TableRowData> extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'children'> {
     readonly caption?: React.ReactNode;
+    readonly showCaption?: boolean;
     readonly columns?: readonly TableColumn<Row>[];
     readonly rows?: readonly Row[];
     readonly density?: FieldDensity;
@@ -577,4 +626,4 @@ interface PriceCardMetaProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly billingInterval?: string;
 }
 
-export type { AddressCollectionPanelProps, AddressEditorProps, AddressEditorValue, AddressSummaryBadgeProps, AddressValidationTimelineProps, ArchivePillProps, ArchiveSummaryProps, AuditEventProps, BadgeProps, BannerProps, ButtonProps, CancellationBadgeProps, CancellationFormProps, CardHeaderProps, CardProps, CheckboxProps, ClassificationBadgeProps, ClassificationEditorProps, ClassificationPanelProps, ColorSwatchProps, ColorizedBadgeProps, CommonFieldProps, ComponentEmphasis, ComponentSize, ComponentTone, DatePickerProps, DetailHeaderProps, FieldDensity, FieldValidation, FilterDescriptor, FilterPanelProps, FormLabelGroupProps, GridProps, HeaderElement, HeaderLevel, InlineLabelProps, InputProps, LabelCellProps, LayoutGap, MembershipAuditTimelineProps, MembershipPanelProps, MessageEventTimelineProps, MessageStatusBadgeProps, OwnerBadgeProps, OwnershipMetaProps, OwnershipSummaryProps, PanelSectionProps, PreferenceEditorProps, PreferencePanelProps, PreferenceSummaryBadgeProps, PreferenceTimelineProps, PriceCardMetaProps, PriceSummaryProps, RoleAssignmentFormProps, RoleBadgeListProps, SafeContainerElement, SafeTextElement, SelectOption, SelectProps, StackProps, StatusSelectorProps, TabItem, TableBodyProps, TableCaptionProps, TableCellProps, TableColumn, TableCompound, TableHeadProps, TableHeaderCellProps, TableProps, TableRowData, TableRowProps, TabsProps, TagInputProps, TagManagerProps, TagPillsProps, TagSummaryProps, TemplatePickerProps, TextProps, TextareaProps, VizAreaPreviewProps };
+export type { AddressCollectionPanelProps, AddressEditorProps, AddressEditorValue, AddressSummaryBadgeProps, AddressValidationTimelineProps, ArchivePillProps, ArchiveSummaryProps, AuditEventProps, BadgeProps, BannerProps, ButtonIntent, ButtonProps, ButtonSize, CancellationBadgeProps, CancellationFormProps, CardHeaderProps, CardProps, CheckboxProps, ClassificationBadgeProps, ClassificationEditorProps, ClassificationPanelProps, ColorSwatchProps, ColorizedBadgeProps, CommonFieldProps, ComponentEmphasis, ComponentSize, ComponentTone, DatePickerProps, DetailHeaderProps, DialogProps, FieldDensity, FieldValidation, FilterDescriptor, FilterPanelProps, FormLabelGroupProps, GridProps, HeaderElement, HeaderLevel, InlineLabelProps, InputProps, LabelCellProps, LayoutGap, MembershipAuditTimelineProps, MembershipPanelProps, MessageEventTimelineProps, MessageStatusBadgeProps, OwnerBadgeProps, OwnershipMetaProps, OwnershipSummaryProps, PanelSectionProps, PreferenceEditorProps, PreferencePanelProps, PreferenceSummaryBadgeProps, PreferenceTimelineProps, PriceCardMetaProps, PriceSummaryProps, RoleAssignmentFormProps, RoleBadgeListProps, SafeContainerElement, SafeTextElement, SelectOption, SelectProps, StackProps, StatusSelectorProps, SwitchProps, TabItem, TableBodyProps, TableCaptionProps, TableCellProps, TableColumn, TableCompound, TableHeadProps, TableHeaderCellProps, TableProps, TableRowData, TableRowProps, TabsProps, TagInputProps, TagManagerProps, TagPillsProps, TagSummaryProps, TemplatePickerProps, TextProps, TextareaProps, VizAreaPreviewProps };

package/dist/types.d.ts

@@ -3,6 +3,8 @@ import * as React from 'react';
 type ComponentTone = 'neutral' | 'info' | 'accent' | 'positive' | 'success' | 'warning' | 'critical' | 'danger';
 type ComponentEmphasis = 'subtle' | 'solid';
 type ComponentSize = 'sm' | 'md' | 'lg';
+type ButtonSize = 'xs' | ComponentSize;
+type ButtonIntent = 'neutral' | 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'warning' | 'danger';
 type FieldDensity = 'compact' | 'comfortable';
 type FieldValidation = {
     readonly state: 'error' | 'warning' | 'success' | 'info';
@@ -39,10 +41,29 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     readonly content?: React.ReactNode;
     readonly children?: React.ReactNode;
     readonly asChild?: boolean;
-    readonly intent?: 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
-    readonly size?: ComponentSize;
+    readonly intent?: ButtonIntent;
+    readonly size?: ButtonSize;
     readonly onActivate?: React.MouseEventHandler<HTMLElement>;
 }
+type NativeDialogProps = Omit<React.DialogHTMLAttributes<HTMLDialogElement>, 'open' | 'title' | 'children' | 'className' | 'style' | 'onClose' | 'onCancel'>;
+/**
+ * s222-m02 (#2502 ruling 11): a native dialog whose consumer owns open. onClose reports the close control, Escape or a
+ * browser close request; modal (default true) opens it with showModal(), and modal false shows it in place.
+ */
+interface DialogProps extends NativeDialogProps {
+    readonly id?: string;
+    readonly open?: boolean;
+    readonly modal?: boolean;
+    readonly title: React.ReactNode;
+    readonly description?: React.ReactNode;
+    readonly dismissLabel?: string;
+    readonly size?: 'sm' | 'md' | 'lg';
+    readonly actions?: React.ReactNode;
+    readonly children?: React.ReactNode;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly onClose?: () => void;
+}
 type SafeContainerElement = 'div' | 'section' | 'article' | 'aside' | 'main';
 interface CardProps extends React.HTMLAttributes<HTMLElement> {
     readonly elevated?: boolean;
@@ -98,6 +119,17 @@ interface VizAreaPreviewProps extends React.HTMLAttributes<HTMLElement> {
     readonly svgNarrow?: string;
     /** The same chart rendered at the wide size; the figure shows it instead of svg when its own inline size is at least 900px. */
     readonly svgWide?: string;
+    /**
+     * s222-m02 (F7): the same chart rendered in the dark and high-contrast themes, at the design, narrow and wide sizes. With
+     * any of them, svg, svgNarrow and svgWide are the light renders, and the figure shows the renders of the theme the
+     * nearest [data-theme] names.
+     */
+    readonly svgDark?: string;
+    readonly svgDarkNarrow?: string;
+    readonly svgDarkWide?: string;
+    readonly svgHc?: string;
+    readonly svgHcNarrow?: string;
+    readonly svgHcWide?: string;
     readonly description?: string;
     readonly width?: number;
     readonly height?: number;
@@ -342,6 +374,22 @@ interface CheckboxProps extends NativeCheckboxProps, CommonFieldProps {
     readonly onCheckedChange?: (checked: boolean) => void;
     readonly onUpdate?: (checked: boolean) => void;
 }
+type NativeSwitchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'type' | 'role' | 'value' | 'children' | 'className' | 'style' | 'onChange'>;
+/** s222-m02 (#2502 ruling 11): Checkbox's field API on a button with role switch; native button props reach the button. */
+interface SwitchProps extends NativeSwitchProps {
+    readonly id: string;
+    readonly label: React.ReactNode;
+    readonly checked?: boolean;
+    readonly defaultChecked?: boolean;
+    readonly required?: boolean;
+    readonly help?: React.ReactNode;
+    readonly validation?: FieldValidation;
+    readonly size?: 'sm' | 'md';
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly onCheckedChange?: (checked: boolean) => void;
+    readonly onUpdate?: (checked: boolean) => void;
+}
 type SelectOption = {
     readonly value: string;
     readonly label: React.ReactNode;
@@ -390,6 +438,7 @@ type TableColumn<Row extends TableRowData = TableRowData> = {
 };
 interface TableProps<Row extends TableRowData = TableRowData> extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'children'> {
     readonly caption?: React.ReactNode;
+    readonly showCaption?: boolean;
     readonly columns?: readonly TableColumn<Row>[];
     readonly rows?: readonly Row[];
     readonly density?: FieldDensity;
@@ -577,4 +626,4 @@ interface PriceCardMetaProps extends React.HTMLAttributes<HTMLDivElement> {
     readonly billingInterval?: string;
 }
 
-export type { AddressCollectionPanelProps, AddressEditorProps, AddressEditorValue, AddressSummaryBadgeProps, AddressValidationTimelineProps, ArchivePillProps, ArchiveSummaryProps, AuditEventProps, BadgeProps, BannerProps, ButtonProps, CancellationBadgeProps, CancellationFormProps, CardHeaderProps, CardProps, CheckboxProps, ClassificationBadgeProps, ClassificationEditorProps, ClassificationPanelProps, ColorSwatchProps, ColorizedBadgeProps, CommonFieldProps, ComponentEmphasis, ComponentSize, ComponentTone, DatePickerProps, DetailHeaderProps, FieldDensity, FieldValidation, FilterDescriptor, FilterPanelProps, FormLabelGroupProps, GridProps, HeaderElement, HeaderLevel, InlineLabelProps, InputProps, LabelCellProps, LayoutGap, MembershipAuditTimelineProps, MembershipPanelProps, MessageEventTimelineProps, MessageStatusBadgeProps, OwnerBadgeProps, OwnershipMetaProps, OwnershipSummaryProps, PanelSectionProps, PreferenceEditorProps, PreferencePanelProps, PreferenceSummaryBadgeProps, PreferenceTimelineProps, PriceCardMetaProps, PriceSummaryProps, RoleAssignmentFormProps, RoleBadgeListProps, SafeContainerElement, SafeTextElement, SelectOption, SelectProps, StackProps, StatusSelectorProps, TabItem, TableBodyProps, TableCaptionProps, TableCellProps, TableColumn, TableCompound, TableHeadProps, TableHeaderCellProps, TableProps, TableRowData, TableRowProps, TabsProps, TagInputProps, TagManagerProps, TagPillsProps, TagSummaryProps, TemplatePickerProps, TextProps, TextareaProps, VizAreaPreviewProps };
+export type { AddressCollectionPanelProps, AddressEditorProps, AddressEditorValue, AddressSummaryBadgeProps, AddressValidationTimelineProps, ArchivePillProps, ArchiveSummaryProps, AuditEventProps, BadgeProps, BannerProps, ButtonIntent, ButtonProps, ButtonSize, CancellationBadgeProps, CancellationFormProps, CardHeaderProps, CardProps, CheckboxProps, ClassificationBadgeProps, ClassificationEditorProps, ClassificationPanelProps, ColorSwatchProps, ColorizedBadgeProps, CommonFieldProps, ComponentEmphasis, ComponentSize, ComponentTone, DatePickerProps, DetailHeaderProps, DialogProps, FieldDensity, FieldValidation, FilterDescriptor, FilterPanelProps, FormLabelGroupProps, GridProps, HeaderElement, HeaderLevel, InlineLabelProps, InputProps, LabelCellProps, LayoutGap, MembershipAuditTimelineProps, MembershipPanelProps, MessageEventTimelineProps, MessageStatusBadgeProps, OwnerBadgeProps, OwnershipMetaProps, OwnershipSummaryProps, PanelSectionProps, PreferenceEditorProps, PreferencePanelProps, PreferenceSummaryBadgeProps, PreferenceTimelineProps, PriceCardMetaProps, PriceSummaryProps, RoleAssignmentFormProps, RoleBadgeListProps, SafeContainerElement, SafeTextElement, SelectOption, SelectProps, StackProps, StatusSelectorProps, SwitchProps, TabItem, TableBodyProps, TableCaptionProps, TableCellProps, TableColumn, TableCompound, TableHeadProps, TableHeaderCellProps, TableProps, TableRowData, TableRowProps, TabsProps, TagInputProps, TagManagerProps, TagPillsProps, TagSummaryProps, TemplatePickerProps, TextProps, TextareaProps, VizAreaPreviewProps };