@omni-design/components 0.12.0 → 0.14.0

package/dist/types/components/BackgroundPicker.d.ts

@@ -1,5 +1,5 @@
 export function BackgroundPicker({ theme, onThemeChange, surface, onSurfaceChange, surfaces, size, }: {
-    theme?: any;
+    theme?: string;
     onThemeChange: any;
     surface?: string;
     onSurfaceChange: any;

package/dist/types/components/BrandIcon/BrandIcon.d.ts

@@ -0,0 +1,23 @@
+/** Does this build have a mark for that name? */
+export function hasBrandIcon(name: any): boolean;
+/**
+ * @param name   lowercase, hyphenated, as Figma's text layer holds it:
+ *               'github', 'x-twitter', 'linkedin', 'dribbble', 'instagram'
+ * @param icon   a Font Awesome icon object, if you would rather import it
+ *               yourself. Takes precedence over `name`.
+ * @param size   any CSS length. Defaults to 1em so it rides the text beside it.
+ * @param color  any CSS color or token. Defaults to currentColor.
+ * @param title  accessible name. Omit for decoration beside a visible label —
+ *               the icon is then aria-hidden, which is the common case in a
+ *               footer where the link text already says "GitHub".
+ */
+export function BrandIcon({ name, icon, size, color, title, ...props }: {
+    [x: string]: any;
+    name: any;
+    icon: any;
+    size?: string;
+    color?: string;
+    title: any;
+}): JSX.Element;
+export const BRAND_ICON_NAMES: any[];
+export default BrandIcon;

package/dist/types/components/BrandIcon/BrandIconShowcase.d.ts

@@ -0,0 +1,2 @@
+export function BrandIconShowcase(): JSX.Element;
+export default BrandIconShowcase;

package/dist/types/components/BrandIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { BrandIconShowcase } from "./BrandIconShowcase";
+export { BrandIcon, BRAND_ICON_NAMES, hasBrandIcon, default } from "./BrandIcon";

package/dist/types/components/Button/Button.d.ts

@@ -1,69 +1,38 @@
 export function normalizeButtonVariant(variant: any): string;
-export function Button({ variant, size, elevated, selected, fullWidth, disabled, contentType, iconOnly, letterNumber, avatar, swatch, swatchColor, startIcon, endIcon, startDecorator, endDecorator, badge, badgeContent, badgeVariant, badgeSize, badgeDot, badgeMax, badgeAnchorOrigin, children, className, sx, ...props }: {
-    [x: string]: any;
-    variant?: string;
-    size?: string;
-    elevated?: boolean;
-    selected?: boolean;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    contentType: any;
-    iconOnly?: boolean;
-    letterNumber?: boolean;
-    avatar?: boolean;
-    swatch?: boolean;
-    swatchColor: any;
-    startIcon: any;
-    endIcon: any;
-    startDecorator: any;
-    endDecorator: any;
-    badge?: boolean;
-    badgeContent: any;
-    badgeVariant?: string;
-    badgeSize: any;
-    badgeDot?: boolean;
-    badgeMax?: number;
-    badgeAnchorOrigin?: {
-        vertical: string;
-        horizontal: string;
-    };
-    children: any;
-    className?: string;
-    sx?: {};
-}): JSX.Element;
 export const BUTTON_CONTENT_TYPES: string[];
-export function DefaultButton(p: any): JSX.Element;
-export function DefaultOutlineButton(p: any): JSX.Element;
-export function PrimaryButton(p: any): JSX.Element;
-export function SecondaryButton(p: any): JSX.Element;
-export function TertiaryButton(p: any): JSX.Element;
-export function NeutralButton(p: any): JSX.Element;
-export function InfoButton(p: any): JSX.Element;
-export function SuccessButton(p: any): JSX.Element;
-export function WarningButton(p: any): JSX.Element;
-export function ErrorButton(p: any): JSX.Element;
-export function DangerButton(p: any): JSX.Element;
-export function PrimaryOutlineButton(p: any): JSX.Element;
-export function SecondaryOutlineButton(p: any): JSX.Element;
-export function TertiaryOutlineButton(p: any): JSX.Element;
-export function NeutralOutlineButton(p: any): JSX.Element;
-export function InfoOutlineButton(p: any): JSX.Element;
-export function SuccessOutlineButton(p: any): JSX.Element;
-export function WarningOutlineButton(p: any): JSX.Element;
-export function ErrorOutlineButton(p: any): JSX.Element;
-export function PrimaryLightButton(p: any): JSX.Element;
-export function SecondaryLightButton(p: any): JSX.Element;
-export function TertiaryLightButton(p: any): JSX.Element;
-export function NeutralLightButton(p: any): JSX.Element;
-export function InfoLightButton(p: any): JSX.Element;
-export function SuccessLightButton(p: any): JSX.Element;
-export function WarningLightButton(p: any): JSX.Element;
-export function ErrorLightButton(p: any): JSX.Element;
-export function GhostButton(p: any): JSX.Element;
-export function TextButton(p: any): JSX.Element;
-export function OutlineButton(p: any): JSX.Element;
-export function IconButton(p: any): JSX.Element;
-export function LetterButton(p: any): JSX.Element;
-export function AvatarButton(p: any): JSX.Element;
-export function SwatchButton(p: any): JSX.Element;
+export const Button: any;
+export const DefaultButton: any;
+export const DefaultOutlineButton: any;
+export const PrimaryButton: any;
+export const SecondaryButton: any;
+export const TertiaryButton: any;
+export const NeutralButton: any;
+export const InfoButton: any;
+export const SuccessButton: any;
+export const WarningButton: any;
+export const ErrorButton: any;
+export const DangerButton: any;
+export const PrimaryOutlineButton: any;
+export const SecondaryOutlineButton: any;
+export const TertiaryOutlineButton: any;
+export const NeutralOutlineButton: any;
+export const InfoOutlineButton: any;
+export const SuccessOutlineButton: any;
+export const WarningOutlineButton: any;
+export const ErrorOutlineButton: any;
+export const PrimaryLightButton: any;
+export const SecondaryLightButton: any;
+export const TertiaryLightButton: any;
+export const NeutralLightButton: any;
+export const InfoLightButton: any;
+export const SuccessLightButton: any;
+export const WarningLightButton: any;
+export const ErrorLightButton: any;
+export const GhostButton: any;
+export const TextButton: any;
+export const OutlineButton: any;
+export const IconButton: any;
+export const LetterButton: any;
+export const AvatarButton: any;
+export const SwatchButton: any;
 export default Button;

package/dist/types/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,4 @@
-export function ButtonGroup({ variant, color, size, disabled, orientation, separated, spacing, fit, fullWidth, equalWidth, multiple, value: controlledValue, defaultValue, onChange, children, className, sx, "aria-label": ariaLabel, ...props }: {
+export function ButtonGroup({ variant, color, size, disabled, orientation, separated, spacing, fit, fullWidth, equalWidth, multiple, allowEmpty, __selectionOwner, value: controlledValue, defaultValue, onChange, children, className, sx, "aria-label": ariaLabel, ...props }: {
     [x: string]: any;
     variant?: string;
     color?: string;
@@ -11,6 +11,8 @@ export function ButtonGroup({ variant, color, size, disabled, orientation, separ
     fullWidth?: boolean;
     equalWidth?: boolean;
     multiple?: boolean;
+    allowEmpty?: boolean;
+    __selectionOwner?: boolean;
     value: any;
     defaultValue: any;
     onChange: any;

package/dist/types/components/Charts/tokens.d.ts

@@ -16,7 +16,7 @@ export namespace CHART_TOKENS {
  *
  * Brand accents lead, because a category has no inherent meaning and should
  * not borrow one — a green wedge next to a red one reads as pass/fail whether
- * or not that is what the data says. The state colours are still available for
+ * or not that is what the data says. The state colors are still available for
  * charts with more categories than accents, and a caller can pass its own
  * subset (or reorder it) via the `colors` prop when the categories DO carry
  * semantics: `colors={['Success', 'Warning', 'Error']}`.

package/dist/types/components/CodeBlock/index.d.ts

@@ -0,0 +1 @@
+export { CodeBlock, CopyButton, default } from "./CodeBlock";

package/dist/types/components/Footer/Footer.d.ts

@@ -1,10 +1,12 @@
-export function Footer({ color, brand, address, columns, socialLinks, subscribe, copyrightName, copyrightYear, className, style, ...rest }: {
+export function Footer({ color, brand, address, columns, socialLinks, copyright, children, subscribe, copyrightName, copyrightYear, className, style, ...rest }: {
     [x: string]: any;
     color?: string;
     brand: any;
     address: any;
     columns?: any[];
     socialLinks?: any[];
+    copyright?: boolean;
+    children: any;
     subscribe: any;
     copyrightName: any;
     copyrightYear: any;

package/dist/types/components/Foundations/FoundationTopic.d.ts

@@ -0,0 +1,4 @@
+export function FoundationTopic({ topic }: {
+    topic: any;
+}): JSX.Element;
+export default FoundationTopic;

package/dist/types/components/Foundations/HowToSlot.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @param src     path under public/, e.g. "/images/figma-surface-mode.png".
+ *                Omit it to render the placeholder. A .mp4/.mov/.webm plays.
+ * @param title   what the shot should show, in a few words.
+ * @param shows   one line on what the viewer should come away knowing.
+ * @param aspect  placeholder shape. Panel crops are tall; default suits them.
+ * @param maxWidth cap in px. Panel crops are narrow, so the default is too.
+ */
+export function HowToSlot({ src, title, shows, aspect, maxWidth }: {
+    src: any;
+    title: any;
+    shows: any;
+    aspect?: string;
+    maxWidth?: number;
+}): JSX.Element;
+export default HowToSlot;

package/dist/types/components/Foundations/TokenRoles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * One swatch per role, painted from the token itself.
+ *
+ * The chip renders the REAL variable rather than a copy of its value, so it
+ * re-resolves with the theme and surface pickers above — which is the only way
+ * to show that these are roles and not colors.
+ */
+export function RoleSwatches({ title, note, roles, tokenFor }: {
+    title: any;
+    note: any;
+    roles: any;
+    tokenFor: any;
+}): JSX.Element;
+export function StyleTable({ styles, tokensFor, defaultColorFor, render }: {
+    styles: any;
+    tokensFor: any;
+    defaultColorFor: any;
+    render: any;
+}): JSX.Element;

package/dist/types/components/Foundations/TypographySummary.d.ts

@@ -0,0 +1,2 @@
+export function TypographySummary(): JSX.Element;
+export default TypographySummary;

package/dist/types/components/List/List.d.ts

@@ -5,7 +5,7 @@ export function ListItemDecorator({ children, size, isButton, onAction, ariaLabe
     onAction: any;
     ariaLabel: any;
 }): JSX.Element;
-export function ListItem({ children, startDecorator, endDecorator, startDecoratorIsButton, endDecoratorIsButton, onStartDecoratorAction, onEndDecoratorAction, startDecoratorAriaLabel, endDecoratorAriaLabel, size, variant, color, eyebrow, overline, secondary, clickable, disabled, selected, selectionMode, onSelect, onClick, bottomBorder, rightBorder, sx, ...props }: {
+export function ListItem({ children, startDecorator, endDecorator, startDecoratorIsButton, endDecoratorIsButton, onStartDecoratorAction, onEndDecoratorAction, startDecoratorAriaLabel, endDecoratorAriaLabel, size, variant, color, eyebrow, overline, secondary, clickable, disabled, selected, selectionMode, onSelect, onClick, bottomBorder, rightBorder, component, sx, ...props }: {
     [x: string]: any;
     children: any;
     startDecorator: any;
@@ -30,6 +30,7 @@ export function ListItem({ children, startDecorator, endDecorator, startDecorato
     onClick: any;
     bottomBorder?: boolean;
     rightBorder?: boolean;
+    component?: string;
     sx?: {};
 }): JSX.Element;
 export function List({ children, items, variant, color, size, orientation, dividers, selectionMode, loading, skeletonRows, empty, error, selectedIndices, onSelectionChange, clickable, component, className, sx, ...props }: {

package/dist/types/components/Rail/Rail.d.ts

@@ -1,4 +1,4 @@
-export function Rail({ items, sections, value: controlledValue, defaultValue, onChange, expandable, expandedWidth, defaultExpanded, fabAction, labelStyle, size, className, sx, ...props }: {
+export function Rail({ items, sections, value: controlledValue, defaultValue, onChange, expandable, expandedWidth, defaultExpanded, fabAction, labelStyle, variant, size, className, sx, ...props }: {
     [x: string]: any;
     items?: any[];
     sections: any;
@@ -10,6 +10,7 @@ export function Rail({ items, sections, value: controlledValue, defaultValue, on
     defaultExpanded?: boolean;
     fabAction: any;
     labelStyle?: string;
+    variant?: string;
     size?: string;
     className?: string;
     sx?: {};

package/dist/types/components/ShowcaseHeader.d.ts

@@ -0,0 +1,5 @@
+export function ShowcaseHeader({ title, component }: {
+    title: any;
+    component: any;
+}): JSX.Element;
+export default ShowcaseHeader;

package/dist/types/components/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-export function Slider({ theme, surface, variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
+export function Slider({ theme, surface, variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, fill, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
     [x: string]: any;
     theme: any;
     surface: any;
@@ -14,6 +14,7 @@ export function Slider({ theme, surface, variant, size, value, defaultValue, onC
     marks?: boolean;
     valueLabelDisplay?: string;
     orientation?: string;
+    fill: any;
     track?: string;
     disabled?: boolean;
     label: any;
@@ -32,7 +33,7 @@ export function InfoSlider(p: any): JSX.Element;
 export function SuccessSlider(p: any): JSX.Element;
 export function WarningSlider(p: any): JSX.Element;
 export function ErrorSlider(p: any): JSX.Element;
-export function SliderInput({ theme, surface, variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
+export function SliderInput({ theme, surface, variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, fill, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
     [x: string]: any;
     theme: any;
     surface: any;
@@ -48,6 +49,7 @@ export function SliderInput({ theme, surface, variant, size, value, defaultValue
     marks?: boolean;
     valueLabelDisplay?: string;
     orientation?: string;
+    fill: any;
     track?: string;
     disabled?: boolean;
     label: any;
@@ -57,7 +59,7 @@ export function SliderInput({ theme, surface, variant, size, value, defaultValue
     "aria-label": any;
     "aria-labelledby": any;
 }): JSX.Element;
-export function RangeSlider({ theme, surface, variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
+export function RangeSlider({ theme, surface, variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, fill, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
     [x: string]: any;
     theme: any;
     surface: any;
@@ -73,6 +75,7 @@ export function RangeSlider({ theme, surface, variant, size, value, defaultValue
     marks?: boolean;
     valueLabelDisplay?: string;
     orientation?: string;
+    fill: any;
     track?: string;
     disabled?: boolean;
     label: any;

package/dist/types/components/TextField/TextField.d.ts

@@ -92,7 +92,7 @@ export function URLTextField({ label, placeholder, ...props }: {
  *   - error / errorMessage where Input has validation / validationMessage, so
  *     the same state was spelled two ways depending on which control you
  *     reached for.
- *   - No size, no variant, no colour, no adornments, no floating label.
+ *   - No size, no variant, no color, no adornments, no floating label.
  *
  * Input already takes multiline / rows / maxRows and renders a <textarea>, so
  * there was never a second thing to build — only a second thing to maintain.

package/dist/types/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,11 +1,14 @@
-/** @deprecated Use ButtonGroup. */
-export function ToggleButtonGroup({ variant, exclusive, onChange, ...props }: {
+export function ToggleButtonGroup({ variant, color, exclusive, multiple, onChange, allowEmpty, separated, ...props }: {
     [x: string]: any;
-    variant?: string;
-    exclusive?: boolean;
+    variant: any;
+    color: any;
+    exclusive: any;
+    multiple: any;
     onChange: any;
+    allowEmpty?: boolean;
+    separated?: boolean;
 }): JSX.Element;
-/** @deprecated Use Button with a `value` prop as a ButtonGroup segment. */
+/** A segment. Button already is one — this name ships publicly, so it stays. */
 export function ToggleButton(props: any): JSX.Element;
 export function DefaultToggleButtonGroup(p: any): JSX.Element;
 export namespace DefaultToggleButtonGroup {

package/dist/types/components/ToggleButtonGroup/ToggleButtonGroupShowcase.d.ts

@@ -0,0 +1,2 @@
+export function ToggleButtonGroupShowcase(): JSX.Element;
+export default ToggleButtonGroupShowcase;

package/dist/types/components/ToggleButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleButtonGroupShowcase } from "./ToggleButtonGroupShowcase";
+export { ToggleButtonGroup, ToggleButton, DefaultToggleButtonGroup, PrimaryToggleButtonGroup, SecondaryToggleButtonGroup, TertiaryToggleButtonGroup, NeutralToggleButtonGroup, BlackWhiteToggleButtonGroup, InfoToggleButtonGroup, SuccessToggleButtonGroup, WarningToggleButtonGroup, ErrorToggleButtonGroup, default } from "./ToggleButtonGroup";

package/dist/types/components/Typography/Typography.d.ts

@@ -1,8 +1,9 @@
-export function Typography({ children, textStyle, color, width, component, noWrap, gutterBottom, className, sx, ...props }: {
+export function Typography({ children, textStyle, color, altMode, width, component, noWrap, gutterBottom, className, sx, ...props }: {
     [x: string]: any;
     children: any;
     textStyle?: string;
     color: any;
+    altMode: any;
     width: any;
     component: any;
     noWrap?: boolean;
@@ -11,6 +12,39 @@ export function Typography({ children, textStyle, color, width, component, noWra
     sx?: {};
 }): JSX.Element;
 export const STYLE_MAP: {
+    'alt-display-large': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+        altDisplay: boolean;
+    };
+    'alt-display-medium': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+        altDisplay: boolean;
+    };
+    'alt-display-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+        altDisplay: boolean;
+    };
     'display-large': {
         component: string;
         fontFamily: string;
@@ -427,6 +461,22 @@ export const STYLE_ALIASES: {
     'subtitle-medium': string;
 };
 export const TYPOGRAPHY_STYLES: string[];
+/**
+ * Every CSS variable each style reads, derived from the style's own config.
+ *
+ * Generated rather than listed, because a hand-kept table is a second source
+ * of truth that drifts the first time someone adds a style — and the docs in
+ * this repo have been wrong about bindings often enough today to make that a
+ * real cost rather than a theoretical one. The config strings already contain
+ * the token names; this just reads them back out.
+ */
+export const STYLE_TOKENS: {
+    [k: string]: string[];
+};
+/** 'header' or 'standard' — which color role a style takes by default. */
+export const STYLE_DEFAULT_COLOR: {
+    [k: string]: string;
+};
 export const HEADER_COLORS: string[];
 export const TEXT_COLORS: string[];
 export const CAP_HEIGHT_TRIM: {
@@ -440,6 +490,9 @@ export const CAP_HEIGHT_TRIM: {
 export function DisplayLarge(p: any): JSX.Element;
 export function DisplayMedium(p: any): JSX.Element;
 export function DisplaySmall(p: any): JSX.Element;
+export function AltDisplayLarge(p: any): JSX.Element;
+export function AltDisplayMedium(p: any): JSX.Element;
+export function AltDisplaySmall(p: any): JSX.Element;
 export function H1(p: any): JSX.Element;
 export function H2(p: any): JSX.Element;
 export function H3(p: any): JSX.Element;

package/dist/types/components/Typography/index.d.ts

@@ -1,2 +1,2 @@
 export { TypographyShowcase } from "./TypographyShowcase";
-export { Typography, TYPOGRAPHY_STYLES, CAP_HEIGHT_TRIM, H1, H2, H3, H4, H5, H6, Heading, DisplayLarge, DisplayMedium, DisplaySmall, Subtitle, SubtitleSmall, SubtitleMedium, SubtitleLarge, Subtitle1, Subtitle2, Body, BodySmall, BodyLarge, BodySemibold, BodyBold, BodySmallSemibold, BodySmallBold, BodyLargeSemibold, BodyLargeBold, Body1, Body2, Label, LabelSmall, LabelLarge, LabelExtraSmall, Caption, CaptionBold, Legal, LegalSemibold, Button, ButtonSmall, ButtonExtraSmall, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberLarge, NumberMedium, NumberSmall, default } from "./Typography";
+export { TEXT_COLORS, HEADER_COLORS, Typography, TYPOGRAPHY_STYLES, STYLE_TOKENS, STYLE_DEFAULT_COLOR, CAP_HEIGHT_TRIM, H1, H2, H3, H4, H5, H6, Heading, DisplayLarge, DisplayMedium, DisplaySmall, AltDisplayLarge, AltDisplayMedium, AltDisplaySmall, Subtitle, SubtitleSmall, SubtitleMedium, SubtitleLarge, Subtitle1, Subtitle2, Body, BodySmall, BodyLarge, BodySemibold, BodyBold, BodySmallSemibold, BodySmallBold, BodyLargeSemibold, BodyLargeBold, Body1, Body2, Label, LabelSmall, LabelLarge, LabelExtraSmall, Caption, CaptionBold, Legal, LegalSemibold, Button, ButtonSmall, ButtonExtraSmall, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberLarge, NumberMedium, NumberSmall, default } from "./Typography";

package/dist/types/components/_states.d.ts

@@ -3,7 +3,7 @@
  *
  * @param {object}  [opts]
  * @param {string}  [opts.selectedBg]    resting fill when selected
- * @param {string}  [opts.selectedText]  text colour when selected
+ * @param {string}  [opts.selectedText]  text color when selected
  * @param {string}  [opts.selectedHover] fill on hover while selected
  * @param {string}  [opts.selectedPressed] fill on press while selected
  * @param {string}  [opts.muiPrefix]     'Mui' to use MUI's class-based

package/dist/types/components/a11yPanel.d.ts

@@ -0,0 +1,58 @@
+export function ContrastBadge({ ratio, threshold }: {
+    ratio: any;
+    threshold?: number;
+}): JSX.Element;
+/**
+ * What the numbers below are a verdict ON.
+ *
+ * Every ratio in this tab is measured against the component AS CONFIGURED IN
+ * THE PLAYGROUND — the variant, color, size and surface currently selected
+ * there — not against the component in general. Change a control and these
+ * numbers change with it.
+ *
+ * Saying so matters because the two readings lead opposite ways. A FAIL here
+ * means "this combination fails", which is a thing the user chose and can
+ * change; read as "this component fails" it becomes a bug report against the
+ * library for a configuration nobody shipped. And a PASS on the default
+ * configuration says nothing about the eight palettes the user did not look
+ * at — so a tab that stated no scope was quietly inviting both mistakes.
+ *
+ * One component, one place: the wording lives here rather than in 54
+ * showcases, so it can be corrected once.
+ */
+export function A11yScopeNote({ configuration }: {
+    configuration: any;
+}): JSX.Element;
+export function A11yRow({ label, ratio, threshold, note }: {
+    label: any;
+    ratio: any;
+    threshold: any;
+    note: any;
+}): JSX.Element;
+export function A11yCheckRow({ label, pass, detail, note }: {
+    label: any;
+    pass: any;
+    detail: any;
+    note: any;
+}): JSX.Element;
+/**
+ * Read resolved CSS custom properties off a mounted element.
+ *
+ * Deferred with setTimeout and NOT requestAnimationFrame: rAF does not fire in
+ * a background or hidden tab, so a page opened in one measured nothing, and
+ * because the deps do not change afterwards it never retried — every row read
+ * "--" forever, even once the tab was focused.
+ *
+ * It also RETRIES, because the element can mount later than the effect: the
+ * preview often lives inside the Playground tab while the landing tab is
+ * Summary, so on first paint there is nothing to measure. Returning early used
+ * to end it permanently. Forty tries at 50ms, then stop, so a component with no
+ * preview does not poll forever.
+ *
+ * @param ref   ref to the element whose computed style is read
+ * @param read  (v) => data, where v(name) resolves one custom property
+ * @param deps  re-measure when these change
+ */
+export function useMeasuredTokens(ref: any, read: any, deps: any): {};
+export { getContrast };
+import { getContrast } from './contrast';

package/dist/types/components/index.d.ts

@@ -1,5 +1,6 @@
 export { Colors } from "./Colors";
 export { Spacing } from "./Spacing";
+export { BrandIcon } from "./BrandIcon";
 export { Swatch } from "./Swatch";
 export { MiniSwatch } from "./MiniSwatch";
 export { IconBadge } from "./IconBadge";
@@ -29,7 +30,7 @@ export { OmniStack as DynoStack } from "./Stack/Stack";
 export { OmniTreeView as DynoTreeView } from "./TreeView/TreeView";
 export * as chartGeometry from "./Charts/geometry";
 export { StateMessage } from "./StateMessage";
-export { Typography, CAP_HEIGHT_TRIM, Heading, DisplayLarge, DisplayMedium, DisplaySmall, H1, H2, H3, H4, H5, H6, Body, Body1, Body2, BodySemibold, BodyBold, BodySmall, BodySmallSemibold, BodySmallBold, BodyLarge, BodyLargeSemibold, BodyLargeBold, Caption, CaptionBold, Subtitle, Subtitle1, Subtitle2, SubtitleSmall, SubtitleMedium, SubtitleLarge, Legal, LegalSemibold, Label, LabelExtraSmall, LabelSmall, LabelLarge, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberSmall, NumberMedium, NumberLarge, Button as ButtonText, ButtonSmall } from "./Typography";
+export { Typography, CAP_HEIGHT_TRIM, Heading, DisplayLarge, DisplayMedium, AltDisplayLarge, AltDisplayMedium, AltDisplaySmall, DisplaySmall, H1, H2, H3, H4, H5, H6, Body, Body1, Body2, BodySemibold, BodyBold, BodySmall, BodySmallSemibold, BodySmallBold, BodyLarge, BodyLargeSemibold, BodyLargeBold, Caption, CaptionBold, Subtitle, Subtitle1, Subtitle2, SubtitleSmall, SubtitleMedium, SubtitleLarge, Legal, LegalSemibold, Label, LabelExtraSmall, LabelSmall, LabelLarge, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberSmall, NumberMedium, NumberLarge, Button as ButtonText, ButtonSmall } from "./Typography";
 export { Icon, IconShowcase } from "./Icon";
 export { Fab, FabShowcase } from "./Fab";
 export { Rail, RailShowcase } from "./Rail";
@@ -79,4 +80,4 @@ export { OmniDesignProvider, useOmniDesign, ThemedZone, Surfaced } from "../Omni
 export { CodeBlock, CopyButton } from "./CodeBlock/CodeBlock";
 export { BarChart, LineChart, PieChart, CHART_TOKENS, CHART_LABEL_TYPE } from "./Charts";
 export { Ghost, useGhost, ghostBlockSx } from "./_ghost";
-export { COMPONENT_DOCS, FOUNDATIONS, renderFoundations, renderColourSystem, renderComponentDoc, COLOUR_COLLECTIONS, docsSlug, componentDocsUrl, componentDocsIndexUrl, DOCS_ORIGIN, EXAMPLES, hasExample } from "../docs";
+export { COMPONENT_DOCS, FOUNDATIONS, renderFoundations, renderColorSystem, renderColorSystem as renderColourSystem, renderComponentDoc, COLOR_COLLECTIONS, COLOR_COLLECTIONS as COLOUR_COLLECTIONS, docsSlug, componentDocsUrl, componentDocsIndexUrl, DOCS_ORIGIN, EXAMPLES, hasExample } from "../docs";

package/dist/types/docs/DocPanels.d.ts

@@ -14,20 +14,6 @@ export function docFor(component: any): {
     accessibility: any;
     gotchas: any;
 };
-/**
- * Everything written about the component, in reading order — led by ONE live
- * example.
- *
- * The example is here because a page of prose gives no recognition: you cannot
- * tell what a component IS from its prop table. It renders in the theme and
- * surface currently selected, so the picture matches the pickers rather than
- * showing some other configuration. It is the default instance and is not
- * interactive — the Playground tab is where you change things.
- *
- * Components that need state or a portal to be shown honestly (Modal, Drawer,
- * Snackbar) have no example, and simply lead with the summary instead of
- * rendering a half-working one.
- */
 export function DocSummary({ component, theme, surface }: {
     component: any;
     theme?: any;