@castui/cast-ui 4.6.0 → 4.8.0

package/dist/theme/index.d.ts

@@ -1,3 +1,4 @@
 export { ThemeProvider, useTheme, type ThemeProviderProps, type Theme } from './ThemeContext';
 export { themes } from './themes';
-export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, TabsSizeTokens, TabsThemeTokens, DeepPartial, } from './types';
+export { applyCastTheme, type CastThemeFile, type CastThemeProps, } from './applyCastTheme';
+export type { DensityTheme, ComponentTokens, AccordionSizeTokens, AccordionThemeTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, TabsSizeTokens, TabsThemeTokens, SpinnerSizeTokens, SpinnerThemeTokens, BottomSheetThemeTokens, LinkSizeTokens, LinkThemeTokens, BreadcrumbsSizeTokens, BreadcrumbsThemeTokens, CodeBlockSizeTokens, CodeBlockThemeTokens, DrawerThemeTokens, MenuItemTokens, MenuGroupTokens, MenuThemeTokens, ToggleButtonGroupSizeTokens, ToggleButtonGroupThemeTokens, AppBarSizeTokens, AppBarThemeTokens, SliderSizeTokens, SliderThemeTokens, SpeedDialSizeTokens, SpeedDialThemeTokens, TableSizeTokens, TableThemeTokens, DeepPartial, } from './types';

package/dist/theme/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.themes = exports.useTheme = exports.ThemeProvider = void 0;
+exports.applyCastTheme = exports.themes = exports.useTheme = exports.ThemeProvider = void 0;
 var ThemeContext_1 = require("./ThemeContext");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeContext_1.ThemeProvider; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return ThemeContext_1.useTheme; } });
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "themes", { enumerable: true, get: function () { return themes_1.themes; } });
+var applyCastTheme_1 = require("./applyCastTheme");
+Object.defineProperty(exports, "applyCastTheme", { enumerable: true, get: function () { return applyCastTheme_1.applyCastTheme; } });

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 },
@@ -112,14 +117,78 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
         tabs: {
             listGap: 8, indicatorRadius: 9999,
             small: { gap: 4, paddingX: 8, paddingY: 4, indicatorHeight: 2 },
             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 },
@@ -218,14 +287,78 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
         tabs: {
             listGap: 16, indicatorRadius: 9999,
             small: { gap: 6, paddingX: 10, paddingY: 6, indicatorHeight: 2 },
             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 },
@@ -324,11 +457,70 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
         tabs: {
             listGap: 24, indicatorRadius: 9999,
             small: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 2 },
             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

@@ -274,10 +274,189 @@ export type TabsThemeTokens = {
     default: TabsSizeTokens;
     large: TabsSizeTokens;
 };
+/** Spinner geometry for one size variant. Both values are keyed by the `size`
+ * prop and constant across density (like Progress track-height / Tabs
+ * indicator-height — bound to a primitive `size/*`). */
+export type SpinnerSizeTokens = {
+    diameter: number;
+    stroke: number;
+};
+/** Spinner tokens — diameter + ring stroke vary by the `size` prop and are
+ * constant across density. No density-varying spacing. */
+export type SpinnerThemeTokens = {
+    small: SpinnerSizeTokens;
+    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;
@@ -297,6 +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/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;
@@ -200,6 +205,18 @@ export type ColorScheme = {
     tabs: {
         track: string;
     };
+    /** Spinner colours — track ring background (the arc uses the intent system) */
+    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;
@@ -218,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;
@@ -267,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;
@@ -378,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;

package/dist/tokens/colors.js

@@ -15,7 +15,7 @@
  * the light-scheme values, kept for backwards compatibility.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.listColors = exports.skeletonColors = exports.avatarColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.radioColors = exports.checkboxColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
+exports.listColors = exports.tableColors = exports.sliderColors = exports.skeletonColors = exports.avatarColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.radioColors = exports.checkboxColors = exports.errorTokens = exports.tagTokens = exports.menuColors = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
 // ---------------------------------------------------------------------------
 // Light scheme — semantic-light mode
 // ---------------------------------------------------------------------------
@@ -96,6 +96,16 @@ exports.lightColors = {
         },
         separator: '#E5E7EB',
     },
+    menu: {
+        item: {
+            default: { bg: 'transparent', fg: '#374151' },
+            hover: { bg: '#F9FAFB', fg: '#111827' },
+            selected: { bg: '#EFF6FF', fg: '#1D4ED8' },
+            selectedHover: { bg: '#DBEAFE', fg: '#1D4ED8' },
+            disabled: { bg: 'transparent', fg: '#9CA3AF' },
+        },
+        separator: '#E5E7EB',
+    },
     tag: {
         bg: '#F3F4F6',
         fg: '#374151',
@@ -141,6 +151,8 @@ exports.lightColors = {
     },
     progress: { track: '#E5E7EB' }, // control/progress/track/bg → cool-grey/200
     tabs: { track: '#E5E7EB' }, // control/tabs/track/bg → cool-grey/200
+    spinner: { track: '#E5E7EB' }, // control/spinner/track/bg → cool-grey/200
+    bottomSheet: { handle: '#D1D5DB' }, // control/bottom-sheet/handle/bg → cool-grey/300
     avatar: { bg: '#F3F4F6', fg: '#374151' },
     skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
     list: {
@@ -156,6 +168,15 @@ exports.lightColors = {
         separator: '#E5E7EB',
         containerBg: '#FFFFFF',
     },
+    slider: { track: '#E5E7EB' }, // control/slider/track/bg -> cool-grey/200
+    table: {
+        headerBg: '#F3F4F6',
+        border: '#E5E7EB',
+        rowHover: '#F3F4F6',
+        stripe: '#F9FAFB',
+        selectedBg: '#EFF6FF',
+        selectedHoverBg: '#DBEAFE',
+    },
 };
 // ---------------------------------------------------------------------------
 // Dark scheme — semantic-dark mode
@@ -239,6 +260,16 @@ exports.darkColors = {
         },
         separator: '#374151',
     },
+    menu: {
+        item: {
+            default: { bg: 'transparent', fg: '#E5E7EB' },
+            hover: { bg: '#374151', fg: '#F9FAFB' },
+            selected: { bg: '#1E3A8A', fg: '#93C5FD' },
+            selectedHover: { bg: '#1E40AF', fg: '#93C5FD' },
+            disabled: { bg: 'transparent', fg: '#6B7280' },
+        },
+        separator: '#374151',
+    },
     tag: {
         bg: '#374151',
         fg: '#E5E7EB',
@@ -284,6 +315,8 @@ exports.darkColors = {
     },
     progress: { track: '#374151' }, // control/progress/track/bg → cool-grey/700
     tabs: { track: '#374151' }, // control/tabs/track/bg → cool-grey/700
+    spinner: { track: '#374151' }, // control/spinner/track/bg → cool-grey/700
+    bottomSheet: { handle: '#4B5563' }, // control/bottom-sheet/handle/bg → cool-grey/600
     avatar: { bg: '#374151', fg: '#E5E7EB' },
     skeleton: { bg: '#1F2937', highlight: '#374151' },
     list: {
@@ -299,6 +332,15 @@ exports.darkColors = {
         separator: '#374151',
         containerBg: '#1F2937',
     },
+    slider: { track: '#374151' }, // control/slider/track/bg -> cool-grey/700
+    table: {
+        headerBg: '#1F2937',
+        border: '#374151',
+        rowHover: '#374151',
+        stripe: '#111827',
+        selectedBg: '#1E3A8A',
+        selectedHoverBg: '#1E40AF',
+    },
 };
 /** Scheme lookup by colour mode */
 exports.colorSchemes = {
@@ -332,6 +374,8 @@ exports.overlayTokens = {
 };
 /** Option state colours — used by SelectOption (neutral intent) */
 exports.selectColors = exports.lightColors.select;
+/** Menu colours — item state colours + separator (mirrors select). */
+exports.menuColors = exports.lightColors.menu;
 /** Tag tokens — multi-select pill styling (constant across densities) */
 exports.tagTokens = exports.lightColors.tag;
 /** Error/danger colour for form field borders and helper text */
@@ -350,5 +394,9 @@ exports.tabsColors = exports.lightColors.tabs;
 exports.avatarColors = exports.lightColors.avatar;
 /** Skeleton colours — placeholder surface for loading states */
 exports.skeletonColors = exports.lightColors.skeleton;
+/** Slider colours — track background (fill comes from the intent system). */
+exports.sliderColors = exports.lightColors.slider;
+/** Table colours — header, borders, and row states. */
+exports.tableColors = exports.lightColors.table;
 /** List colours — used by List / ListItem / ListSubheader */
 exports.listColors = exports.lightColors.list;

package/dist/tokens/index.d.ts

@@ -1,3 +1,3 @@
-export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
+export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, menuColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, sliderColors, tableColors, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
 export { fontFamily, fontWeight, label, title, body, heading, display, caption, type LabelSize, } from './typography';
 export { iconSize, type IconSize } from './icon';