@castui/cast-ui 4.7.0 → 4.9.0

package/dist/theme/themes.js

@@ -14,6 +14,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.themes = void 0;
 exports.themes = {
     compact: {
+        accordion: {
+            small: { gap: 6, paddingX: 8, paddingY: 6 },
+            default: { gap: 8, paddingX: 12, paddingY: 8 },
+            large: { gap: 8, paddingX: 16, paddingY: 12 },
+        },
         dialog: {
             small: { padding: 16, gap: 12, iconSize: 24 },
             default: { padding: 24, gap: 16, iconSize: 32 },
@@ -123,8 +128,67 @@ exports.themes = {
             default: { gap: 6, paddingX: 10, paddingY: 6, indicatorHeight: 2 },
             large: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 4 },
         },
+        bottomSheet: {
+            borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
+            padding: 16, gap: 12,
+        },
+        link: {
+            small: { gap: 2 },
+            default: { gap: 4 },
+            large: { gap: 4 },
+        },
+        breadcrumbs: {
+            small: { gap: 4 },
+            default: { gap: 4 },
+            large: { gap: 8 },
+        },
+        codeBlock: {
+            borderRadius: 8,
+            small: { padding: 8, gap: 8 },
+            default: { padding: 12, gap: 8 },
+            large: { padding: 16, gap: 12 },
+        },
+        drawer: { padding: 16, gap: 12 },
+        menu: {
+            item: { gap: 8, paddingX: 8, paddingY: 4, borderRadius: 4 },
+            content: { paddingY: 2 },
+            group: { paddingX: 8, labelPaddingY: 6 },
+            separator: { marginY: 4 },
+        },
+        toggleButtonGroup: {
+            borderRadius: 8,
+            small: { paddingX: 6, paddingY: 2, gap: 4 },
+            default: { paddingX: 10, paddingY: 6, gap: 8 },
+            large: { paddingX: 20, paddingY: 14, gap: 16 },
+        },
+        appBar: {
+            small: { paddingX: 12, paddingY: 6, gap: 8 },
+            default: { paddingX: 16, paddingY: 8, gap: 8 },
+            large: { paddingX: 16, paddingY: 12, gap: 12 },
+        },
+        slider: {
+            borderRadius: 9999,
+            small: { trackHeight: 4, thumbSize: 12 },
+            default: { trackHeight: 6, thumbSize: 16 },
+            large: { trackHeight: 8, thumbSize: 20 },
+        },
+        speedDial: {
+            small: { fabSize: 40, actionSize: 32, gap: 6 },
+            default: { fabSize: 48, actionSize: 40, gap: 8 },
+            large: { fabSize: 64, actionSize: 48, gap: 12 },
+        },
+        table: {
+            small: { cellPaddingX: 8, cellPaddingY: 4 },
+            default: { cellPaddingX: 12, cellPaddingY: 8 },
+            large: { cellPaddingX: 16, cellPaddingY: 12 },
+        },
     },
     default: {
+        accordion: {
+            small: { gap: 8, paddingX: 12, paddingY: 8 },
+            default: { gap: 8, paddingX: 16, paddingY: 12 },
+            large: { gap: 12, paddingX: 20, paddingY: 16 },
+        },
         dialog: {
             small: { padding: 24, gap: 16, iconSize: 24 },
             default: { padding: 32, gap: 24, iconSize: 32 },
@@ -234,8 +298,67 @@ exports.themes = {
             default: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 2 },
             large: { gap: 8, paddingX: 16, paddingY: 10, indicatorHeight: 4 },
         },
+        bottomSheet: {
+            borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
+            padding: 24, gap: 16,
+        },
+        link: {
+            small: { gap: 4 },
+            default: { gap: 4 },
+            large: { gap: 8 },
+        },
+        breadcrumbs: {
+            small: { gap: 4 },
+            default: { gap: 8 },
+            large: { gap: 8 },
+        },
+        codeBlock: {
+            borderRadius: 8,
+            small: { padding: 12, gap: 8 },
+            default: { padding: 16, gap: 12 },
+            large: { padding: 24, gap: 16 },
+        },
+        drawer: { padding: 24, gap: 16 },
+        menu: {
+            item: { gap: 12, paddingX: 12, paddingY: 6, borderRadius: 4 },
+            content: { paddingY: 4 },
+            group: { paddingX: 12, labelPaddingY: 6 },
+            separator: { marginY: 4 },
+        },
+        toggleButtonGroup: {
+            borderRadius: 8,
+            small: { paddingX: 10, paddingY: 6, gap: 8 },
+            default: { paddingX: 14, paddingY: 10, gap: 12 },
+            large: { paddingX: 24, paddingY: 16, gap: 20 },
+        },
+        appBar: {
+            small: { paddingX: 16, paddingY: 8, gap: 8 },
+            default: { paddingX: 16, paddingY: 12, gap: 12 },
+            large: { paddingX: 24, paddingY: 16, gap: 16 },
+        },
+        slider: {
+            borderRadius: 9999,
+            small: { trackHeight: 4, thumbSize: 12 },
+            default: { trackHeight: 6, thumbSize: 16 },
+            large: { trackHeight: 8, thumbSize: 20 },
+        },
+        speedDial: {
+            small: { fabSize: 40, actionSize: 32, gap: 8 },
+            default: { fabSize: 48, actionSize: 40, gap: 12 },
+            large: { fabSize: 64, actionSize: 48, gap: 16 },
+        },
+        table: {
+            small: { cellPaddingX: 12, cellPaddingY: 6 },
+            default: { cellPaddingX: 16, cellPaddingY: 12 },
+            large: { cellPaddingX: 24, cellPaddingY: 16 },
+        },
     },
     comfortable: {
+        accordion: {
+            small: { gap: 8, paddingX: 16, paddingY: 12 },
+            default: { gap: 12, paddingX: 20, paddingY: 16 },
+            large: { gap: 12, paddingX: 24, paddingY: 20 },
+        },
         dialog: {
             small: { padding: 40, gap: 24, iconSize: 24 },
             default: { padding: 40, gap: 32, iconSize: 32 },
@@ -345,5 +468,59 @@ exports.themes = {
             default: { gap: 8, paddingX: 16, paddingY: 10, indicatorHeight: 2 },
             large: { gap: 12, paddingX: 20, paddingY: 12, indicatorHeight: 4 },
         },
+        bottomSheet: {
+            borderRadius: 16, handleWidth: 40, handleHeight: 4, handleGap: 8,
+            padding: 32, gap: 24,
+        },
+        link: {
+            small: { gap: 4 },
+            default: { gap: 8 },
+            large: { gap: 8 },
+        },
+        breadcrumbs: {
+            small: { gap: 8 },
+            default: { gap: 8 },
+            large: { gap: 12 },
+        },
+        codeBlock: {
+            borderRadius: 8,
+            small: { padding: 16, gap: 12 },
+            default: { padding: 24, gap: 16 },
+            large: { padding: 32, gap: 24 },
+        },
+        drawer: { padding: 32, gap: 24 },
+        menu: {
+            item: { gap: 16, paddingX: 16, paddingY: 8, borderRadius: 4 },
+            content: { paddingY: 6 },
+            group: { paddingX: 16, labelPaddingY: 6 },
+            separator: { marginY: 4 },
+        },
+        toggleButtonGroup: {
+            borderRadius: 8,
+            small: { paddingX: 14, paddingY: 10, gap: 12 },
+            default: { paddingX: 20, paddingY: 14, gap: 16 },
+            large: { paddingX: 32, paddingY: 20, gap: 24 },
+        },
+        appBar: {
+            small: { paddingX: 16, paddingY: 12, gap: 12 },
+            default: { paddingX: 24, paddingY: 16, gap: 16 },
+            large: { paddingX: 32, paddingY: 20, gap: 20 },
+        },
+        slider: {
+            borderRadius: 9999,
+            small: { trackHeight: 4, thumbSize: 12 },
+            default: { trackHeight: 6, thumbSize: 16 },
+            large: { trackHeight: 8, thumbSize: 20 },
+        },
+        speedDial: {
+            small: { fabSize: 40, actionSize: 32, gap: 12 },
+            default: { fabSize: 48, actionSize: 40, gap: 16 },
+            large: { fabSize: 64, actionSize: 48, gap: 20 },
+        },
+        table: {
+            small: { cellPaddingX: 16, cellPaddingY: 8 },
+            default: { cellPaddingX: 20, cellPaddingY: 16 },
+            large: { cellPaddingX: 32, cellPaddingY: 24 },
+        },
     },
 };

package/dist/theme/types.d.ts

@@ -288,10 +288,175 @@ export type SpinnerThemeTokens = {
     default: SpinnerSizeTokens;
     large: SpinnerSizeTokens;
 };
+/**
+ * BottomSheet tokens. The sheet hugs its content up to a max height, so there
+ * are no size variants. `padding` and `gap` vary by density. The top corner
+ * radius and the drag handle dimensions are constant across density (handle
+ * width/height are keyed to primitive `size/*`, the radius to a primitive
+ * `radius/*`, the handle gap to `space/*`).
+ */
+export type BottomSheetThemeTokens = {
+    /** Top-corner radius of the sheet. Constant. */
+    borderRadius: number;
+    /** Drag handle width. Constant. */
+    handleWidth: number;
+    /** Drag handle height. Constant. */
+    handleHeight: number;
+    /** Gap below the handle before the content. Constant. */
+    handleGap: number;
+    /** Content padding. Varies by density. */
+    padding: number;
+    /** Gap between stacked content sections. Varies by density. */
+    gap: number;
+};
+/** Spacing tokens for one accordion size variant. gap, paddingX, and paddingY
+ * all vary by density (bound to primitive space/*). The flush style has no
+ * border-radius, and the chevron / leading icon use the named Icon scale keyed
+ * by the `size` prop, so there are no constant dimension tokens. */
+export type AccordionSizeTokens = {
+    gap: number;
+    paddingX: number;
+    paddingY: number;
+};
+/** Accordion tokens — three size variants, each density-varying. */
+export type AccordionThemeTokens = {
+    small: AccordionSizeTokens;
+    default: AccordionSizeTokens;
+    large: AccordionSizeTokens;
+};
 /**
  * Component-level tokens that vary by density theme.
  * Extended as new components are added to the library.
  */
+/** Link spacing tokens for one size variant (icon/label gap, varies by density). */
+export type LinkSizeTokens = {
+    gap: number;
+};
+/** Link tokens — gap varies by size and density. */
+export type LinkThemeTokens = {
+    small: LinkSizeTokens;
+    default: LinkSizeTokens;
+    large: LinkSizeTokens;
+};
+/** Breadcrumbs spacing tokens for one size variant (row + icon gap, density). */
+export type BreadcrumbsSizeTokens = {
+    gap: number;
+};
+/** Breadcrumbs tokens — gap varies by size and density. */
+export type BreadcrumbsThemeTokens = {
+    small: BreadcrumbsSizeTokens;
+    default: BreadcrumbsSizeTokens;
+    large: BreadcrumbsSizeTokens;
+};
+/** CodeBlock spacing tokens for one size variant (padding + gap, density). */
+export type CodeBlockSizeTokens = {
+    padding: number;
+    gap: number;
+};
+/** CodeBlock tokens — padding/gap vary by size and density; radius is constant. */
+export type CodeBlockThemeTokens = {
+    borderRadius: number;
+    small: CodeBlockSizeTokens;
+    default: CodeBlockSizeTokens;
+    large: CodeBlockSizeTokens;
+};
+/**
+ * Drawer tokens. The panel hugs an edge with no size variants, like
+ * BottomSheet. padding and gap vary by density; the panel is square (no radius
+ * token), and the default width is a layout constant in code, not a token.
+ */
+export type DrawerThemeTokens = {
+    padding: number;
+    gap: number;
+};
+/** Menu item spacing tokens (density-varying). */
+export type MenuItemTokens = {
+    gap: number;
+    paddingX: number;
+    paddingY: number;
+    borderRadius: number;
+};
+/** Menu group (section label) tokens. */
+export type MenuGroupTokens = {
+    paddingX: number;
+    labelPaddingY: number;
+};
+/** Menu tokens. Mirrors the select shape, namespaced to menu. Item spacing
+ * varies by density; the size prop drives typography. */
+export type MenuThemeTokens = {
+    item: MenuItemTokens;
+    content: {
+        paddingY: number;
+    };
+    group: MenuGroupTokens;
+    separator: {
+        marginY: number;
+    };
+};
+/** Toggle button spacing tokens for one size variant (density-varying). */
+export type ToggleButtonGroupSizeTokens = {
+    paddingX: number;
+    paddingY: number;
+    gap: number;
+};
+/** Toggle button group tokens — padding/gap vary by size and density; the group
+ * border-radius is constant. */
+export type ToggleButtonGroupThemeTokens = {
+    borderRadius: number;
+    small: ToggleButtonGroupSizeTokens;
+    default: ToggleButtonGroupSizeTokens;
+    large: ToggleButtonGroupSizeTokens;
+};
+/** App bar spacing tokens for one size variant (density-varying). */
+export type AppBarSizeTokens = {
+    paddingX: number;
+    paddingY: number;
+    gap: number;
+};
+/** App bar tokens — padding/gap vary by size and density. The bar height comes
+ * from the padding, so there is no height token. */
+export type AppBarThemeTokens = {
+    small: AppBarSizeTokens;
+    default: AppBarSizeTokens;
+    large: AppBarSizeTokens;
+};
+/** Slider geometry for one size variant (constant across density). */
+export type SliderSizeTokens = {
+    trackHeight: number;
+    thumbSize: number;
+};
+/** Slider tokens — track thickness + thumb size keyed by the size prop; pill
+ * radius constant. No density-varying spacing. */
+export type SliderThemeTokens = {
+    borderRadius: number;
+    small: SliderSizeTokens;
+    default: SliderSizeTokens;
+    large: SliderSizeTokens;
+};
+/** Speed dial sizes for one size variant. fab/action sizes are constant per
+ * size; gap varies by density. */
+export type SpeedDialSizeTokens = {
+    fabSize: number;
+    actionSize: number;
+    gap: number;
+};
+/** Speed dial tokens — three size variants. */
+export type SpeedDialThemeTokens = {
+    small: SpeedDialSizeTokens;
+    default: SpeedDialSizeTokens;
+    large: SpeedDialSizeTokens;
+};
+/** Table cell padding for one size variant (density-varying). */
+export type TableSizeTokens = {
+    cellPaddingX: number;
+    cellPaddingY: number;
+};
+/** Table tokens — three size variants. */
+export type TableThemeTokens = {
+    small: TableSizeTokens;
+    default: TableSizeTokens;
+    large: TableSizeTokens;
+};
 export type ComponentTokens = {
     button: ButtonThemeTokens;
     dialog: DialogThemeTokens;
@@ -311,7 +476,19 @@ export type ComponentTokens = {
     tooltip: TooltipThemeTokens;
     progress: ProgressThemeTokens;
     tabs: TabsThemeTokens;
+    accordion: AccordionThemeTokens;
     spinner: SpinnerThemeTokens;
+    bottomSheet: BottomSheetThemeTokens;
+    link: LinkThemeTokens;
+    breadcrumbs: BreadcrumbsThemeTokens;
+    codeBlock: CodeBlockThemeTokens;
+    drawer: DrawerThemeTokens;
+    menu: MenuThemeTokens;
+    toggleButtonGroup: ToggleButtonGroupThemeTokens;
+    appBar: AppBarThemeTokens;
+    slider: SliderThemeTokens;
+    speedDial: SpeedDialThemeTokens;
+    table: TableThemeTokens;
 };
 /** Utility type for partial overrides at any depth */
 export type DeepPartial<T> = {

package/dist/tokens/breakpoints.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Breakpoint scale — named min-width thresholds in density-independent pixels.
+ *
+ * Mirrors the Figma `breakpoint/{sm,md,lg,xl}` primitive variables. This is a
+ * foundation reference scale, not a runtime theme value. The numbers do not
+ * change with density, they are not part of the ThemeProvider theme, and
+ * cast-sync does not export them. Read them with the useBreakpoint /
+ * useResponsiveValue hooks, which watch the live window width.
+ *
+ * Values follow Material 3 window size classes, which are derived from real
+ * device-width data across the whole spectrum. The scale is mobile-first: a
+ * width is "at" a breakpoint when it is greater than or equal to that
+ * breakpoint's value, and anything below `sm` is the implicit `base` tier.
+ *
+ * Device mapping (width in dp):
+ *
+ *   base  < 600   Watches, and every phone in portrait. iPhone SE 320,
+ *                 iPhone 15 390, Pro Max 430, Pixel 7 412, Apple Watch
+ *                 136-205. This is your default, design-here-first layout.
+ *   sm    >= 600  Large phones in landscape, foldables unfolded, small
+ *                 tablets in portrait.
+ *   md    >= 840  Tablets. iPad portrait ~768-834 (sits at the top of sm),
+ *                 iPad landscape and larger tablets land here and up.
+ *   lg    >= 1200 Laptops and desktops.
+ *   xl    >= 1600 Large desktops and TVs.
+ *
+ * React Native has no CSS media queries, so a breakpoint here is a width
+ * threshold you compare the window against at runtime. It does not restyle
+ * anything on its own. Small-vs-large phone differences belong to fluid layout
+ * (flex, percentages, maxWidth), not breakpoints. A watch is its own surface,
+ * not a tier: it falls into `base` and shares the default layout, which is the
+ * safe behaviour for a kit that does not target watchOS.
+ */
+/** The named breakpoint tiers. */
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+/** A breakpoint tier including the implicit below-`sm` base tier. */
+export type BreakpointKey = 'base' | Breakpoint;
+/** Min-width thresholds in dp (Material 3 window size classes). */
+export declare const breakpoints: Record<Breakpoint, number>;
+/** Tiers ordered smallest to largest, base first. */
+export declare const breakpointOrder: readonly BreakpointKey[];
+/**
+ * Resolve a raw window width (dp) to its active breakpoint tier. Mobile-first:
+ * returns the largest tier whose threshold the width has reached, or `base`
+ * below `sm`.
+ */
+export declare function resolveBreakpoint(width: number): BreakpointKey;
+/**
+ * Pick a value for a tier, mobile-first. Supply values for any subset of tiers.
+ * The chosen value is the one at the current tier or, if that tier has none,
+ * the nearest defined tier below it. If nothing is defined at or below the
+ * current tier, the smallest defined tier above is used. Returns undefined when
+ * `values` is empty.
+ *
+ *   resolveResponsiveValue({ base: 1, md: 2, xl: 4 }, 'lg') // => 2
+ */
+export declare function resolveResponsiveValue<T>(values: Partial<Record<BreakpointKey, T>>, current: BreakpointKey): T | undefined;

package/dist/tokens/breakpoints.js

@@ -0,0 +1,92 @@
+"use strict";
+/**
+ * Breakpoint scale — named min-width thresholds in density-independent pixels.
+ *
+ * Mirrors the Figma `breakpoint/{sm,md,lg,xl}` primitive variables. This is a
+ * foundation reference scale, not a runtime theme value. The numbers do not
+ * change with density, they are not part of the ThemeProvider theme, and
+ * cast-sync does not export them. Read them with the useBreakpoint /
+ * useResponsiveValue hooks, which watch the live window width.
+ *
+ * Values follow Material 3 window size classes, which are derived from real
+ * device-width data across the whole spectrum. The scale is mobile-first: a
+ * width is "at" a breakpoint when it is greater than or equal to that
+ * breakpoint's value, and anything below `sm` is the implicit `base` tier.
+ *
+ * Device mapping (width in dp):
+ *
+ *   base  < 600   Watches, and every phone in portrait. iPhone SE 320,
+ *                 iPhone 15 390, Pro Max 430, Pixel 7 412, Apple Watch
+ *                 136-205. This is your default, design-here-first layout.
+ *   sm    >= 600  Large phones in landscape, foldables unfolded, small
+ *                 tablets in portrait.
+ *   md    >= 840  Tablets. iPad portrait ~768-834 (sits at the top of sm),
+ *                 iPad landscape and larger tablets land here and up.
+ *   lg    >= 1200 Laptops and desktops.
+ *   xl    >= 1600 Large desktops and TVs.
+ *
+ * React Native has no CSS media queries, so a breakpoint here is a width
+ * threshold you compare the window against at runtime. It does not restyle
+ * anything on its own. Small-vs-large phone differences belong to fluid layout
+ * (flex, percentages, maxWidth), not breakpoints. A watch is its own surface,
+ * not a tier: it falls into `base` and shares the default layout, which is the
+ * safe behaviour for a kit that does not target watchOS.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breakpointOrder = exports.breakpoints = void 0;
+exports.resolveBreakpoint = resolveBreakpoint;
+exports.resolveResponsiveValue = resolveResponsiveValue;
+/** Min-width thresholds in dp (Material 3 window size classes). */
+exports.breakpoints = {
+    sm: 600,
+    md: 840,
+    lg: 1200,
+    xl: 1600,
+};
+/** Tiers ordered smallest to largest, base first. */
+exports.breakpointOrder = [
+    'base',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+];
+/**
+ * Resolve a raw window width (dp) to its active breakpoint tier. Mobile-first:
+ * returns the largest tier whose threshold the width has reached, or `base`
+ * below `sm`.
+ */
+function resolveBreakpoint(width) {
+    if (width >= exports.breakpoints.xl)
+        return 'xl';
+    if (width >= exports.breakpoints.lg)
+        return 'lg';
+    if (width >= exports.breakpoints.md)
+        return 'md';
+    if (width >= exports.breakpoints.sm)
+        return 'sm';
+    return 'base';
+}
+/**
+ * Pick a value for a tier, mobile-first. Supply values for any subset of tiers.
+ * The chosen value is the one at the current tier or, if that tier has none,
+ * the nearest defined tier below it. If nothing is defined at or below the
+ * current tier, the smallest defined tier above is used. Returns undefined when
+ * `values` is empty.
+ *
+ *   resolveResponsiveValue({ base: 1, md: 2, xl: 4 }, 'lg') // => 2
+ */
+function resolveResponsiveValue(values, current) {
+    const idx = exports.breakpointOrder.indexOf(current);
+    for (let i = idx; i >= 0; i--) {
+        const v = values[exports.breakpointOrder[i]];
+        if (v !== undefined)
+            return v;
+    }
+    for (let i = idx + 1; i < exports.breakpointOrder.length; i++) {
+        const v = values[exports.breakpointOrder[i]];
+        if (v !== undefined)
+            return v;
+    }
+    return undefined;
+}

package/dist/tokens/colors.d.ts

@@ -95,6 +95,11 @@ export type ColorScheme = {
         /** Separator line colour */
         separator: string;
     };
+    /** Menu colours — item state colours (neutral) + separator. Mirrors select. */
+    menu: {
+        item: OptionStateColors;
+        separator: string;
+    };
     /** Tag tokens — multi-select pill styling (layout constant across modes) */
     tag: {
         bg: string;
@@ -204,6 +209,14 @@ export type ColorScheme = {
     spinner: {
         track: string;
     };
+    /**
+     * BottomSheet colours. The card surface reuses surface.overlay; the scrim
+     * reuses overlay.scrimOpacity. The drag handle is the one bespoke colour:
+     * control/bottom-sheet/handle/bg, a primitive grey that follows colour mode.
+     */
+    bottomSheet: {
+        handle: string;
+    };
     /** Avatar colours — initials/icon fallback surface + foreground */
     avatar: {
         bg: string;
@@ -222,6 +235,19 @@ export type ColorScheme = {
         separator: string;
         containerBg: string;
     };
+    /** Slider colours — track background (the fill uses the intent system). */
+    slider: {
+        track: string;
+    };
+    /** Table colours — header, borders, and row states (neutral/brand, reused). */
+    table: {
+        headerBg: string;
+        border: string;
+        rowHover: string;
+        stripe: string;
+        selectedBg: string;
+        selectedHoverBg: string;
+    };
 };
 export declare const lightColors: ColorScheme;
 export declare const darkColors: ColorScheme;
@@ -271,6 +297,11 @@ export declare const selectColors: {
     /** Separator line colour */
     separator: string;
 };
+/** Menu colours — item state colours + separator (mirrors select). */
+export declare const menuColors: {
+    item: OptionStateColors;
+    separator: string;
+};
 /** Tag tokens — multi-select pill styling (constant across densities) */
 export declare const tagTokens: {
     bg: string;
@@ -382,6 +413,19 @@ export declare const skeletonColors: {
     bg: string;
     highlight: string;
 };
+/** Slider colours — track background (fill comes from the intent system). */
+export declare const sliderColors: {
+    track: string;
+};
+/** Table colours — header, borders, and row states. */
+export declare const tableColors: {
+    headerBg: string;
+    border: string;
+    rowHover: string;
+    stripe: string;
+    selectedBg: string;
+    selectedHoverBg: string;
+};
 /** List colours — used by List / ListItem / ListSubheader */
 export declare const listColors: {
     item: OptionStateColors;