@esphome/compose-ui 0.1.0 → 0.3.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _esphome_compose from '@esphome/compose';
-import { EspComposeElement } from '@esphome/compose';
+import { EspComposeElement, TriggerHandler } from '@esphome/compose';
 
 /**
  * Theme type definitions for the LVGL design system.
@@ -30,6 +30,17 @@ interface StatusColors {
     text: string;
     bgPressed: string;
 }
+interface PartColors {
+    /** Primary fill / track color. */
+    bg: string;
+    /** Knob / handle color. */
+    knob: string;
+}
+interface ThemeParts {
+    slider: PartColors;
+    switch: PartColors;
+    arc: PartColors;
+}
 interface ThemeColors {
     primary: StatusColors;
     secondary: StatusColors;
@@ -63,6 +74,13 @@ interface Theme {
     radii: Record<RadiusToken, number>;
     /** Component size scale. */
     sizes: Record<SizeToken, SizeDimensions>;
+    /**
+     * Widget part colors (slider indicator/knob, switch, arc).
+     *
+     * Optional — when omitted, `themeToStyleDefinitions()` derives sensible
+     * defaults from `colors.primary` and `colors.textPrimary`.
+     */
+    parts?: ThemeParts;
 }
 
 /** The theme context — defaults to `darkTheme` when no provider is present. */
@@ -130,6 +148,98 @@ declare function fontDefToLvgl(def: FontDef): string;
 /** Resolve a radius token or pass through a raw pixel value. */
 declare function resolveRadius(value: RadiusToken | number): number;
 
+/**
+ * Theme → LVGL bridge.
+ *
+ * Converts the high-level `Theme` token system into:
+ *  1. `style_definitions` — named style bundles referenced by DS components
+ *  2. `theme` — static per-widget-type defaults for unthemed raw LVGL widgets
+ *  3. `createThemeSwitchActions()` — runtime theme switching via `lvgl.style.update`
+ */
+
+interface StyleDefinition {
+    id: string;
+    [prop: string]: unknown;
+}
+/**
+ * Convert a `Theme` into an array of ESPHome `style_definitions` entries.
+ *
+ * Each entry is a plain object with snake_case keys matching the LVGL YAML
+ * schema.  Colors remain as `#RRGGBB` strings — the serializer converts them
+ * to `0xRRGGBB` automatically.
+ */
+declare function themeToStyleDefinitions(theme: Theme): StyleDefinition[];
+/**
+ * Build the LVGL `theme:` block — static defaults applied to all widgets of
+ * a given type.  This is the fallback for raw `<lvgl-*>` elements that don't
+ * use `styles:` references.
+ *
+ * NOTE: The `theme:` block is NOT runtime-updatable.  Only `style_definitions`
+ * (via `lvgl.style.update`) support runtime switching.
+ */
+declare function themeToLvglTheme(theme: Theme): Record<string, unknown>;
+/**
+ * Build the props to spread on the `<lvgl>` element.
+ *
+ * ```tsx
+ * <lvgl displays={[ref]} {...createLvglThemeProps(darkTheme)}>
+ * ```
+ */
+declare function createLvglThemeProps(theme: Theme): {
+    styleDefinitions: StyleDefinition[];
+    theme: Record<string, unknown>;
+};
+/**
+ * Apply a theme at runtime inside a trigger function.
+ *
+ * The ESPCompose compiler recognises `applyTheme()` calls inside trigger
+ * bodies and spreads the resulting `lvgl.style.update` actions into the
+ * action list.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   text="Dark mode"
+ *   onPress={() => { applyTheme(darkTheme); }}
+ * />
+ * ```
+ *
+ * @espcomposeAction applyTheme
+ */
+declare function applyTheme(theme: Theme): Array<Record<string, unknown>>;
+
+/**
+ * LVGL style definition ID constants.
+ *
+ * Every design-system component references these IDs via the LVGL `styles:`
+ * prop instead of inlining visual values.  The IDs correspond 1-to-1 with
+ * entries generated by `themeToStyleDefinitions()` in `bridge.ts`.
+ *
+ * Naming: `ds_{category}[_{variant}]`
+ * NOTE: ESPHome requires underscores in IDs — dashes are not allowed.
+ */
+
+declare const STYLE_BG = "ds_bg";
+declare const STYLE_SURFACE = "ds_surface";
+declare const STYLE_SURFACE_ALT = "ds_surface_alt";
+declare const STYLE_BORDER = "ds_border";
+declare const STYLE_TEXT_PRIMARY = "ds_text_primary";
+declare const STYLE_TEXT_SECONDARY = "ds_text_secondary";
+declare const STYLE_TEXT_DISABLED = "ds_text_disabled";
+/** Typography variant style IDs. */
+declare const STYLE_TEXT_VARIANT: Record<TextVariant, string>;
+type ButtonVariant$1 = 'solid' | 'outline';
+/** Style ID for a status button container. */
+declare function statusStyleId(status: StatusToken, variant: ButtonVariant$1): string;
+/** Style ID for a status button's inner label text. */
+declare function statusTextStyleId(status: StatusToken, variant: ButtonVariant$1): string;
+declare const STYLE_SLIDER_INDICATOR = "ds_slider_indicator";
+declare const STYLE_SLIDER_KNOB = "ds_slider_knob";
+declare const STYLE_SWITCH_INDICATOR = "ds_switch_indicator";
+declare const STYLE_SWITCH_KNOB = "ds_switch_knob";
+declare const STYLE_ARC_INDICATOR = "ds_arc_indicator";
+declare const STYLE_ARC_KNOB = "ds_arc_knob";
+
 /**
  * Intent constants for @esphome/compose-ui design system.
  *
@@ -151,7 +261,7 @@ interface ScreenProps {
     padding?: SpacingToken | number;
     /** Skip this page in the page list. */
     skip?: boolean;
-    /** Background color override (hex). If omitted, uses theme background. */
+    /** Background color override (hex). If set, overrides the style definition. */
     bgColor?: string;
     /** Border width in pixels. Default: 0. */
     borderWidth?: number;
@@ -161,7 +271,7 @@ interface ScreenProps {
 /**
  * Screen — a top-level LVGL page container.
  *
- * Applies the active theme's background color by default.
+ * Applies the active theme's background color by default via style reference.
  *
  * @example
  * <Screen padding="lg">
@@ -389,7 +499,7 @@ interface TextProps {
     text?: string;
     /** Text alignment within the label. */
     align?: 'LEFT' | 'CENTER' | 'RIGHT' | 'AUTO';
-    /** Text color (hex). If omitted, uses theme textPrimary. */
+    /** Text color (hex). If omitted, inherits from the variant style definition. */
     color?: string;
     /** Long text mode. */
     longMode?: 'WRAP' | 'DOT' | 'SCROLL' | 'SCROLL_CIRCULAR' | 'CLIP';
@@ -427,8 +537,8 @@ interface ButtonProps {
     width?: number | string;
     /** Height override. */
     height?: number | string;
-    /** Press handler (ESPHome action). */
-    onPress?: unknown;
+    /** Press handler (ESPHome trigger function). */
+    onPress?: TriggerHandler;
 }
 /**
  * Button — a styled, clickable button with a label.
@@ -445,7 +555,7 @@ interface CardProps {
     padding?: SpacingToken | number;
     /** Corner radius. Default: 'md'. */
     radius?: RadiusToken | number;
-    /** Background color (hex). Default: theme surfaceAlt. */
+    /** Background color override (hex). If set, overrides the style definition. */
     bgColor?: string;
     /** Border color (hex). */
     borderColor?: string;
@@ -475,7 +585,9 @@ interface SliderFieldProps {
     /** Bound value (sensor or entity reference). */
     value?: unknown;
     /** Change handler (ESPHome action). */
-    onChange?: unknown;
+    onChange?: TriggerHandler<{
+        x: number;
+    }>;
     /** Minimum value. Default: 0. */
     min?: number;
     /** Maximum value. Default: 100. */
@@ -493,18 +605,15 @@ interface SliderFieldProps {
  */
 declare const SliderField: _esphome_compose.IntentComponent<SliderFieldProps, readonly ["lvgl:widget"], readonly [], undefined, undefined>;
 
-/**
- * SwitchField — a label + switch in a row layout.
- *
- * Compiles to a container with a label and a switch widget.
- */
 interface SwitchFieldProps {
     /** Label text displayed next to the switch. */
     label: string;
     /** Bound value (sensor or entity reference). */
     value?: unknown;
     /** Change handler (ESPHome action). */
-    onChange?: unknown;
+    onChange?: TriggerHandler<{
+        x: boolean;
+    }>;
     /** Width of the field container. */
     width?: number | string;
 }
@@ -524,7 +633,9 @@ interface DropdownFieldProps {
     /** Bound selection index. */
     value?: unknown;
     /** Change handler (ESPHome action). */
-    onChange?: unknown;
+    onChange?: TriggerHandler<{
+        x: number;
+    }>;
     /** Gap between label and dropdown. Default: 'xs'. */
     gap?: SpacingToken | number;
     /** Width of the field container. */
@@ -538,4 +649,4 @@ interface DropdownFieldProps {
  */
 declare const DropdownField: _esphome_compose.IntentComponent<DropdownFieldProps, readonly ["lvgl:widget"], readonly [], undefined, undefined>;
 
-export { Button, COMPOSE_UI_INTENTS, Card, Col, DropdownField, type FontDef, Grid, GridItem, HStack, type RadiusToken, Row, Screen, type SizeDimensions, type SizeToken, SliderField, Space, type SpacingToken, type StatusColors, type StatusToken, SwitchField, Text, type TextVariant, type Theme, type ThemeColors, ThemeContext, ThemeProvider, type ThemeTypography, type TrackSize, VStack, darkTheme, fontDefToLvgl, lightTheme, resolveRadius, resolveSize, resolveSpacing, resolveStatus, resolveTypography, themeFromJSON, themeToJSON, useTheme };
+export { Button, COMPOSE_UI_INTENTS, Card, Col, DropdownField, type FontDef, Grid, GridItem, HStack, type PartColors, type RadiusToken, Row, STYLE_ARC_INDICATOR, STYLE_ARC_KNOB, STYLE_BG, STYLE_BORDER, STYLE_SLIDER_INDICATOR, STYLE_SLIDER_KNOB, STYLE_SURFACE, STYLE_SURFACE_ALT, STYLE_SWITCH_INDICATOR, STYLE_SWITCH_KNOB, STYLE_TEXT_DISABLED, STYLE_TEXT_PRIMARY, STYLE_TEXT_SECONDARY, STYLE_TEXT_VARIANT, Screen, type SizeDimensions, type SizeToken, SliderField, Space, type SpacingToken, type StatusColors, type StatusToken, type StyleDefinition, SwitchField, Text, type TextVariant, type Theme, type ThemeColors, ThemeContext, type ThemeParts, ThemeProvider, type ThemeTypography, type TrackSize, VStack, applyTheme, createLvglThemeProps, darkTheme, fontDefToLvgl, lightTheme, resolveRadius, resolveSize, resolveSpacing, resolveStatus, resolveTypography, statusStyleId, statusTextStyleId, themeFromJSON, themeToJSON, themeToLvglTheme, themeToStyleDefinitions, useTheme };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _esphome_compose from '@esphome/compose';
-import { EspComposeElement } from '@esphome/compose';
+import { EspComposeElement, TriggerHandler } from '@esphome/compose';
 
 /**
  * Theme type definitions for the LVGL design system.
@@ -30,6 +30,17 @@ interface StatusColors {
     text: string;
     bgPressed: string;
 }
+interface PartColors {
+    /** Primary fill / track color. */
+    bg: string;
+    /** Knob / handle color. */
+    knob: string;
+}
+interface ThemeParts {
+    slider: PartColors;
+    switch: PartColors;
+    arc: PartColors;
+}
 interface ThemeColors {
     primary: StatusColors;
     secondary: StatusColors;
@@ -63,6 +74,13 @@ interface Theme {
     radii: Record<RadiusToken, number>;
     /** Component size scale. */
     sizes: Record<SizeToken, SizeDimensions>;
+    /**
+     * Widget part colors (slider indicator/knob, switch, arc).
+     *
+     * Optional — when omitted, `themeToStyleDefinitions()` derives sensible
+     * defaults from `colors.primary` and `colors.textPrimary`.
+     */
+    parts?: ThemeParts;
 }
 
 /** The theme context — defaults to `darkTheme` when no provider is present. */
@@ -130,6 +148,98 @@ declare function fontDefToLvgl(def: FontDef): string;
 /** Resolve a radius token or pass through a raw pixel value. */
 declare function resolveRadius(value: RadiusToken | number): number;
 
+/**
+ * Theme → LVGL bridge.
+ *
+ * Converts the high-level `Theme` token system into:
+ *  1. `style_definitions` — named style bundles referenced by DS components
+ *  2. `theme` — static per-widget-type defaults for unthemed raw LVGL widgets
+ *  3. `createThemeSwitchActions()` — runtime theme switching via `lvgl.style.update`
+ */
+
+interface StyleDefinition {
+    id: string;
+    [prop: string]: unknown;
+}
+/**
+ * Convert a `Theme` into an array of ESPHome `style_definitions` entries.
+ *
+ * Each entry is a plain object with snake_case keys matching the LVGL YAML
+ * schema.  Colors remain as `#RRGGBB` strings — the serializer converts them
+ * to `0xRRGGBB` automatically.
+ */
+declare function themeToStyleDefinitions(theme: Theme): StyleDefinition[];
+/**
+ * Build the LVGL `theme:` block — static defaults applied to all widgets of
+ * a given type.  This is the fallback for raw `<lvgl-*>` elements that don't
+ * use `styles:` references.
+ *
+ * NOTE: The `theme:` block is NOT runtime-updatable.  Only `style_definitions`
+ * (via `lvgl.style.update`) support runtime switching.
+ */
+declare function themeToLvglTheme(theme: Theme): Record<string, unknown>;
+/**
+ * Build the props to spread on the `<lvgl>` element.
+ *
+ * ```tsx
+ * <lvgl displays={[ref]} {...createLvglThemeProps(darkTheme)}>
+ * ```
+ */
+declare function createLvglThemeProps(theme: Theme): {
+    styleDefinitions: StyleDefinition[];
+    theme: Record<string, unknown>;
+};
+/**
+ * Apply a theme at runtime inside a trigger function.
+ *
+ * The ESPCompose compiler recognises `applyTheme()` calls inside trigger
+ * bodies and spreads the resulting `lvgl.style.update` actions into the
+ * action list.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   text="Dark mode"
+ *   onPress={() => { applyTheme(darkTheme); }}
+ * />
+ * ```
+ *
+ * @espcomposeAction applyTheme
+ */
+declare function applyTheme(theme: Theme): Array<Record<string, unknown>>;
+
+/**
+ * LVGL style definition ID constants.
+ *
+ * Every design-system component references these IDs via the LVGL `styles:`
+ * prop instead of inlining visual values.  The IDs correspond 1-to-1 with
+ * entries generated by `themeToStyleDefinitions()` in `bridge.ts`.
+ *
+ * Naming: `ds_{category}[_{variant}]`
+ * NOTE: ESPHome requires underscores in IDs — dashes are not allowed.
+ */
+
+declare const STYLE_BG = "ds_bg";
+declare const STYLE_SURFACE = "ds_surface";
+declare const STYLE_SURFACE_ALT = "ds_surface_alt";
+declare const STYLE_BORDER = "ds_border";
+declare const STYLE_TEXT_PRIMARY = "ds_text_primary";
+declare const STYLE_TEXT_SECONDARY = "ds_text_secondary";
+declare const STYLE_TEXT_DISABLED = "ds_text_disabled";
+/** Typography variant style IDs. */
+declare const STYLE_TEXT_VARIANT: Record<TextVariant, string>;
+type ButtonVariant$1 = 'solid' | 'outline';
+/** Style ID for a status button container. */
+declare function statusStyleId(status: StatusToken, variant: ButtonVariant$1): string;
+/** Style ID for a status button's inner label text. */
+declare function statusTextStyleId(status: StatusToken, variant: ButtonVariant$1): string;
+declare const STYLE_SLIDER_INDICATOR = "ds_slider_indicator";
+declare const STYLE_SLIDER_KNOB = "ds_slider_knob";
+declare const STYLE_SWITCH_INDICATOR = "ds_switch_indicator";
+declare const STYLE_SWITCH_KNOB = "ds_switch_knob";
+declare const STYLE_ARC_INDICATOR = "ds_arc_indicator";
+declare const STYLE_ARC_KNOB = "ds_arc_knob";
+
 /**
  * Intent constants for @esphome/compose-ui design system.
  *
@@ -151,7 +261,7 @@ interface ScreenProps {
     padding?: SpacingToken | number;
     /** Skip this page in the page list. */
     skip?: boolean;
-    /** Background color override (hex). If omitted, uses theme background. */
+    /** Background color override (hex). If set, overrides the style definition. */
     bgColor?: string;
     /** Border width in pixels. Default: 0. */
     borderWidth?: number;
@@ -161,7 +271,7 @@ interface ScreenProps {
 /**
  * Screen — a top-level LVGL page container.
  *
- * Applies the active theme's background color by default.
+ * Applies the active theme's background color by default via style reference.
  *
  * @example
  * <Screen padding="lg">
@@ -389,7 +499,7 @@ interface TextProps {
     text?: string;
     /** Text alignment within the label. */
     align?: 'LEFT' | 'CENTER' | 'RIGHT' | 'AUTO';
-    /** Text color (hex). If omitted, uses theme textPrimary. */
+    /** Text color (hex). If omitted, inherits from the variant style definition. */
     color?: string;
     /** Long text mode. */
     longMode?: 'WRAP' | 'DOT' | 'SCROLL' | 'SCROLL_CIRCULAR' | 'CLIP';
@@ -427,8 +537,8 @@ interface ButtonProps {
     width?: number | string;
     /** Height override. */
     height?: number | string;
-    /** Press handler (ESPHome action). */
-    onPress?: unknown;
+    /** Press handler (ESPHome trigger function). */
+    onPress?: TriggerHandler;
 }
 /**
  * Button — a styled, clickable button with a label.
@@ -445,7 +555,7 @@ interface CardProps {
     padding?: SpacingToken | number;
     /** Corner radius. Default: 'md'. */
     radius?: RadiusToken | number;
-    /** Background color (hex). Default: theme surfaceAlt. */
+    /** Background color override (hex). If set, overrides the style definition. */
     bgColor?: string;
     /** Border color (hex). */
     borderColor?: string;
@@ -475,7 +585,9 @@ interface SliderFieldProps {
     /** Bound value (sensor or entity reference). */
     value?: unknown;
     /** Change handler (ESPHome action). */
-    onChange?: unknown;
+    onChange?: TriggerHandler<{
+        x: number;
+    }>;
     /** Minimum value. Default: 0. */
     min?: number;
     /** Maximum value. Default: 100. */
@@ -493,18 +605,15 @@ interface SliderFieldProps {
  */
 declare const SliderField: _esphome_compose.IntentComponent<SliderFieldProps, readonly ["lvgl:widget"], readonly [], undefined, undefined>;
 
-/**
- * SwitchField — a label + switch in a row layout.
- *
- * Compiles to a container with a label and a switch widget.
- */
 interface SwitchFieldProps {
     /** Label text displayed next to the switch. */
     label: string;
     /** Bound value (sensor or entity reference). */
     value?: unknown;
     /** Change handler (ESPHome action). */
-    onChange?: unknown;
+    onChange?: TriggerHandler<{
+        x: boolean;
+    }>;
     /** Width of the field container. */
     width?: number | string;
 }
@@ -524,7 +633,9 @@ interface DropdownFieldProps {
     /** Bound selection index. */
     value?: unknown;
     /** Change handler (ESPHome action). */
-    onChange?: unknown;
+    onChange?: TriggerHandler<{
+        x: number;
+    }>;
     /** Gap between label and dropdown. Default: 'xs'. */
     gap?: SpacingToken | number;
     /** Width of the field container. */
@@ -538,4 +649,4 @@ interface DropdownFieldProps {
  */
 declare const DropdownField: _esphome_compose.IntentComponent<DropdownFieldProps, readonly ["lvgl:widget"], readonly [], undefined, undefined>;
 
-export { Button, COMPOSE_UI_INTENTS, Card, Col, DropdownField, type FontDef, Grid, GridItem, HStack, type RadiusToken, Row, Screen, type SizeDimensions, type SizeToken, SliderField, Space, type SpacingToken, type StatusColors, type StatusToken, SwitchField, Text, type TextVariant, type Theme, type ThemeColors, ThemeContext, ThemeProvider, type ThemeTypography, type TrackSize, VStack, darkTheme, fontDefToLvgl, lightTheme, resolveRadius, resolveSize, resolveSpacing, resolveStatus, resolveTypography, themeFromJSON, themeToJSON, useTheme };
+export { Button, COMPOSE_UI_INTENTS, Card, Col, DropdownField, type FontDef, Grid, GridItem, HStack, type PartColors, type RadiusToken, Row, STYLE_ARC_INDICATOR, STYLE_ARC_KNOB, STYLE_BG, STYLE_BORDER, STYLE_SLIDER_INDICATOR, STYLE_SLIDER_KNOB, STYLE_SURFACE, STYLE_SURFACE_ALT, STYLE_SWITCH_INDICATOR, STYLE_SWITCH_KNOB, STYLE_TEXT_DISABLED, STYLE_TEXT_PRIMARY, STYLE_TEXT_SECONDARY, STYLE_TEXT_VARIANT, Screen, type SizeDimensions, type SizeToken, SliderField, Space, type SpacingToken, type StatusColors, type StatusToken, type StyleDefinition, SwitchField, Text, type TextVariant, type Theme, type ThemeColors, ThemeContext, type ThemeParts, ThemeProvider, type ThemeTypography, type TrackSize, VStack, applyTheme, createLvglThemeProps, darkTheme, fontDefToLvgl, lightTheme, resolveRadius, resolveSize, resolveSpacing, resolveStatus, resolveTypography, statusStyleId, statusTextStyleId, themeFromJSON, themeToJSON, themeToLvglTheme, themeToStyleDefinitions, useTheme };

package/dist/index.js

@@ -29,6 +29,20 @@ __export(index_exports, {
   GridItem: () => GridItem,
   HStack: () => HStack,
   Row: () => Row,
+  STYLE_ARC_INDICATOR: () => STYLE_ARC_INDICATOR,
+  STYLE_ARC_KNOB: () => STYLE_ARC_KNOB,
+  STYLE_BG: () => STYLE_BG,
+  STYLE_BORDER: () => STYLE_BORDER,
+  STYLE_SLIDER_INDICATOR: () => STYLE_SLIDER_INDICATOR,
+  STYLE_SLIDER_KNOB: () => STYLE_SLIDER_KNOB,
+  STYLE_SURFACE: () => STYLE_SURFACE,
+  STYLE_SURFACE_ALT: () => STYLE_SURFACE_ALT,
+  STYLE_SWITCH_INDICATOR: () => STYLE_SWITCH_INDICATOR,
+  STYLE_SWITCH_KNOB: () => STYLE_SWITCH_KNOB,
+  STYLE_TEXT_DISABLED: () => STYLE_TEXT_DISABLED,
+  STYLE_TEXT_PRIMARY: () => STYLE_TEXT_PRIMARY,
+  STYLE_TEXT_SECONDARY: () => STYLE_TEXT_SECONDARY,
+  STYLE_TEXT_VARIANT: () => STYLE_TEXT_VARIANT,
   Screen: () => Screen,
   SliderField: () => SliderField,
   Space: () => Space,
@@ -37,6 +51,8 @@ __export(index_exports, {
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
   VStack: () => VStack,
+  applyTheme: () => applyTheme,
+  createLvglThemeProps: () => createLvglThemeProps,
   darkTheme: () => darkTheme,
   fontDefToLvgl: () => fontDefToLvgl,
   lightTheme: () => lightTheme,
@@ -45,8 +61,12 @@ __export(index_exports, {
   resolveSpacing: () => resolveSpacing,
   resolveStatus: () => resolveStatus,
   resolveTypography: () => resolveTypography,
+  statusStyleId: () => statusStyleId,
+  statusTextStyleId: () => statusTextStyleId,
   themeFromJSON: () => themeFromJSON,
   themeToJSON: () => themeToJSON,
+  themeToLvglTheme: () => themeToLvglTheme,
+  themeToStyleDefinitions: () => themeToStyleDefinitions,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
@@ -98,6 +118,11 @@ var darkTheme = {
     md: { height: 44, fontSize: 16, paddingX: 16, paddingY: 8 },
     lg: { height: 52, fontSize: 18, paddingX: 20, paddingY: 10 },
     xl: { height: 64, fontSize: 22, paddingX: 24, paddingY: 12 }
+  },
+  parts: {
+    slider: { bg: "#1E88E5", knob: "#E0E0E0" },
+    switch: { bg: "#1E88E5", knob: "#E0E0E0" },
+    arc: { bg: "#1E88E5", knob: "#E0E0E0" }
   }
 };
 
@@ -152,6 +177,11 @@ var lightTheme = {
     md: { height: 44, fontSize: 16, paddingX: 16, paddingY: 8 },
     lg: { height: 52, fontSize: 18, paddingX: 20, paddingY: 10 },
     xl: { height: 64, fontSize: 22, paddingX: 24, paddingY: 12 }
+  },
+  parts: {
+    slider: { bg: "#1565C0", knob: "#212121" },
+    switch: { bg: "#1565C0", knob: "#212121" },
+    arc: { bg: "#1565C0", knob: "#212121" }
   }
 };
 
@@ -185,6 +215,169 @@ function resolveRadius(value) {
   return useTheme().radii[value];
 }
 
+// src/theme/style-ids.ts
+var STYLE_BG = "ds_bg";
+var STYLE_SURFACE = "ds_surface";
+var STYLE_SURFACE_ALT = "ds_surface_alt";
+var STYLE_BORDER = "ds_border";
+var STYLE_TEXT_PRIMARY = "ds_text_primary";
+var STYLE_TEXT_SECONDARY = "ds_text_secondary";
+var STYLE_TEXT_DISABLED = "ds_text_disabled";
+var STYLE_TEXT_VARIANT = {
+  title: "ds_text_title",
+  subtitle: "ds_text_subtitle",
+  body: "ds_text_body",
+  caption: "ds_text_caption"
+};
+function statusStyleId(status, variant) {
+  return `ds_status_${status}_${variant}`;
+}
+function statusTextStyleId(status, variant) {
+  return `ds_status_${status}_${variant}_text`;
+}
+var ALL_STATUSES = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger"
+];
+var STYLE_SLIDER_INDICATOR = "ds_slider_indicator";
+var STYLE_SLIDER_KNOB = "ds_slider_knob";
+var STYLE_SWITCH_INDICATOR = "ds_switch_indicator";
+var STYLE_SWITCH_KNOB = "ds_switch_knob";
+var STYLE_ARC_INDICATOR = "ds_arc_indicator";
+var STYLE_ARC_KNOB = "ds_arc_knob";
+
+// src/theme/bridge.ts
+function resolveParts(theme) {
+  if (theme.parts) return theme.parts;
+  return {
+    slider: { bg: theme.colors.primary.bg, knob: theme.colors.textPrimary },
+    switch: { bg: theme.colors.primary.bg, knob: theme.colors.textPrimary },
+    arc: { bg: theme.colors.primary.bg, knob: theme.colors.textPrimary }
+  };
+}
+function themeToStyleDefinitions(theme) {
+  const defs = [];
+  const bodyFont = fontDefToLvgl(theme.typography.body);
+  defs.push({ id: STYLE_BG, bg_color: theme.colors.background });
+  defs.push({ id: STYLE_SURFACE, bg_color: theme.colors.surface });
+  defs.push({ id: STYLE_SURFACE_ALT, bg_color: theme.colors.surfaceAlt });
+  defs.push({ id: STYLE_BORDER, border_color: theme.colors.border });
+  defs.push({ id: STYLE_TEXT_PRIMARY, text_color: theme.colors.textPrimary, text_font: bodyFont });
+  defs.push({ id: STYLE_TEXT_SECONDARY, text_color: theme.colors.textSecondary, text_font: bodyFont });
+  defs.push({ id: STYLE_TEXT_DISABLED, text_color: theme.colors.textDisabled, text_font: bodyFont });
+  for (const variant of ["title", "subtitle", "body", "caption"]) {
+    const font = fontDefToLvgl(theme.typography[variant]);
+    defs.push({
+      id: STYLE_TEXT_VARIANT[variant],
+      text_color: theme.colors.textPrimary,
+      text_font: font
+    });
+  }
+  for (const status of ALL_STATUSES) {
+    const sc = theme.colors[status];
+    defs.push({
+      id: statusStyleId(status, "solid"),
+      bg_color: sc.bg
+    });
+    defs.push({
+      id: statusTextStyleId(status, "solid"),
+      text_color: sc.text
+    });
+    defs.push({
+      id: statusStyleId(status, "outline"),
+      bg_opa: "TRANSP",
+      border_color: sc.bg,
+      border_width: 2
+    });
+    defs.push({
+      id: statusTextStyleId(status, "outline"),
+      text_color: sc.bg
+    });
+  }
+  const parts = resolveParts(theme);
+  defs.push({ id: STYLE_SLIDER_INDICATOR, bg_color: parts.slider.bg });
+  defs.push({ id: STYLE_SLIDER_KNOB, bg_color: parts.slider.knob });
+  defs.push({ id: STYLE_SWITCH_INDICATOR, bg_color: parts.switch.bg });
+  defs.push({ id: STYLE_SWITCH_KNOB, bg_color: parts.switch.knob });
+  defs.push({ id: STYLE_ARC_INDICATOR, bg_color: parts.arc.bg });
+  defs.push({ id: STYLE_ARC_KNOB, bg_color: parts.arc.knob });
+  return defs;
+}
+function themeToLvglTheme(theme) {
+  const bodyFont = fontDefToLvgl(theme.typography.body);
+  const parts = resolveParts(theme);
+  return {
+    label: {
+      text_color: theme.colors.textPrimary,
+      text_font: bodyFont
+    },
+    button: {
+      bg_color: theme.colors.primary.bg,
+      border_width: 0,
+      pressed: {
+        bg_color: theme.colors.primary.bgPressed
+      }
+    },
+    obj: {
+      border_width: 0,
+      bg_opa: "TRANSP"
+    },
+    slider: {
+      bg_color: theme.colors.surfaceAlt,
+      indicator: {
+        bg_color: parts.slider.bg
+      },
+      knob: {
+        bg_color: parts.slider.knob
+      }
+    },
+    switch: {
+      bg_color: theme.colors.surfaceAlt,
+      indicator: {
+        bg_color: parts.switch.bg
+      },
+      knob: {
+        bg_color: parts.switch.knob
+      }
+    },
+    arc: {
+      arc_color: theme.colors.surfaceAlt,
+      indicator: {
+        arc_color: parts.arc.bg
+      },
+      knob: {
+        bg_color: parts.arc.knob
+      }
+    },
+    dropdown: {
+      text_color: theme.colors.textPrimary,
+      text_font: bodyFont,
+      bg_color: theme.colors.surface,
+      border_color: theme.colors.border,
+      border_width: 1
+    }
+  };
+}
+function createLvglThemeProps(theme) {
+  return {
+    styleDefinitions: themeToStyleDefinitions(theme),
+    theme: themeToLvglTheme(theme)
+  };
+}
+function createThemeSwitchActions(theme) {
+  const defs = themeToStyleDefinitions(theme);
+  return defs.map((def) => {
+    const { id, ...props } = def;
+    return { "lvgl.style.update": { id, ...props } };
+  });
+}
+function applyTheme(theme) {
+  return createThemeSwitchActions(theme);
+}
+
 // src/intents.ts
 var COMPOSE_UI_INTENTS = {
   /** Col can only be placed inside Row. */
@@ -198,16 +391,16 @@ var import_compose2 = require("@esphome/compose");
 var Screen = (0, import_compose2.createIntentComponent)(
   (props) => {
     const padding = props.padding != null ? resolveSpacing(props.padding) : void 0;
-    const theme = useTheme();
-    const bgColor = props.bgColor ?? theme.colors.background;
     return {
       type: "lvgl-page",
       props: {
-        bgColor,
+        styles: STYLE_BG,
+        ...props.bgColor != null ? { bgColor: props.bgColor } : {},
         borderWidth: props.borderWidth ?? 0,
         ...props.borderColor != null ? { borderColor: props.borderColor } : {},
         ...padding != null ? { padAll: padding } : {},
         ...props.skip != null ? { skip: props.skip } : {},
+        "x:custom": { scrollbar_mode: "OFF" },
         ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
       }
     };
@@ -239,8 +432,8 @@ function buildSpaceElement(props) {
   return {
     type: "lvgl-obj",
     props: {
-      ...props.width != null ? { width: props.width } : {},
-      ...props.height != null ? { height: props.height } : {},
+      width: props.width ?? "100%",
+      height: props.height ?? "SIZE_CONTENT",
       ...padding != null ? { padAll: padding } : {},
       ...props.bgColor != null ? { bgColor: props.bgColor } : {},
       ...props.bgOpa != null ? { bgOpa: props.bgOpa } : { bgOpa: "TRANSP" },
@@ -248,6 +441,7 @@ function buildSpaceElement(props) {
       borderWidth: props.borderWidth ?? 0,
       ...props.borderColor != null ? { borderColor: props.borderColor } : {},
       "x:custom": {
+        scrollbar_mode: "OFF",
         layout: buildFlexLayout(flow, gapKey, props)
       },
       ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
@@ -407,15 +601,13 @@ var import_compose6 = require("@esphome/compose");
 var Text = (0, import_compose6.createIntentComponent)(
   (props) => {
     const variant = props.variant ?? "body";
-    const fontDef = resolveTypography(variant);
-    const color = props.color ?? useTheme().colors.textPrimary;
     return {
       type: "lvgl-label",
       props: {
+        styles: STYLE_TEXT_VARIANT[variant],
         ...props.text != null ? { text: props.text } : {},
-        textFont: fontDefToLvgl(fontDef),
         ...props.align != null ? { textAlign: props.align } : {},
-        textColor: color,
+        ...props.color != null ? { textColor: props.color } : {},
         ...props.longMode != null ? { longMode: props.longMode } : {},
         ...props.x != null ? { x: props.x } : {},
         ...props.y != null ? { y: props.y } : {},
@@ -436,32 +628,25 @@ var Button = (0, import_compose7.createIntentComponent)(
     const status = props.status ?? "primary";
     const size = props.size ?? "md";
     const variant = props.variant ?? "solid";
-    const colors = resolveStatus(status);
     const dims = resolveSize(size);
     const theme = useTheme();
-    const isSolid = variant === "solid";
+    const sc = resolveStatus(status);
     const textFont = fontDefToLvgl({ fontFamily: theme.typography.body.fontFamily, fontSize: dims.fontSize });
+    const pressed = variant === "solid" ? { bgColor: sc.bgPressed } : { bgColor: sc.bg, bgOpa: "COVER" };
     const buttonProps = {
+      styles: statusStyleId(status, variant),
       width: props.width ?? dims.paddingX * 2 + 80,
       height: props.height ?? dims.height,
+      pressed,
       ...props.x != null ? { x: props.x } : {},
       ...props.y != null ? { y: props.y } : {},
-      ...isSolid ? {
-        bgColor: colors.bg,
-        pressed: { bgColor: colors.bgPressed }
-      } : {
-        bgOpa: "TRANSP",
-        borderColor: colors.bg,
-        borderWidth: 2,
-        pressed: { bgColor: colors.bg, bgOpa: "COVER" }
-      },
       ...props.onPress != null ? { "x:custom": { on_press: props.onPress } } : {}
     };
     const label = {
       type: "lvgl-label",
       props: {
+        styles: statusTextStyleId(status, variant),
         text: props.text ?? "",
-        textColor: isSolid ? colors.text : colors.bg,
         textFont,
         align: "CENTER"
       }
@@ -486,19 +671,20 @@ var Card = (0, import_compose8.createIntentComponent)(
   (props) => {
     const padding = resolveSpacing(props.padding ?? "md");
     const radius = resolveRadius(props.radius ?? "md");
-    const theme = useTheme();
     const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
     return {
       type: "lvgl-obj",
       props: {
+        styles: STYLE_SURFACE_ALT,
         padAll: padding,
         radius,
-        bgColor: props.bgColor ?? theme.colors.surfaceAlt,
+        ...props.bgColor != null ? { bgColor: props.bgColor } : {},
         ...props.borderColor != null ? { borderColor: props.borderColor } : {},
         borderWidth: props.borderWidth ?? 0,
-        ...props.width != null ? { width: props.width } : {},
-        ...props.height != null ? { height: props.height } : {},
+        width: props.width ?? "100%",
+        height: props.height ?? "SIZE_CONTENT",
         "x:custom": {
+          scrollbar_mode: "OFF",
           layout: {
             type: "flex",
             flex_flow: "COLUMN",
@@ -520,14 +706,12 @@ var Card = (0, import_compose8.createIntentComponent)(
 var import_compose9 = require("@esphome/compose");
 var SliderField = (0, import_compose9.createIntentComponent)(
   (props) => {
-    const theme = useTheme();
     const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
     const label = {
       type: "lvgl-label",
       props: {
-        text: props.label,
-        textFont: fontDefToLvgl(theme.typography.body),
-        textColor: theme.colors.textPrimary
+        styles: STYLE_TEXT_PRIMARY,
+        text: props.label
       }
     };
     const sliderProps = {
@@ -567,13 +751,11 @@ var SliderField = (0, import_compose9.createIntentComponent)(
 var import_compose10 = require("@esphome/compose");
 var SwitchField = (0, import_compose10.createIntentComponent)(
   (props) => {
-    const theme = useTheme();
     const label = {
       type: "lvgl-label",
       props: {
-        text: props.label,
-        textFont: fontDefToLvgl(theme.typography.body),
-        textColor: theme.colors.textPrimary
+        styles: STYLE_TEXT_PRIMARY,
+        text: props.label
       }
     };
     const switchProps = {
@@ -612,14 +794,12 @@ var SwitchField = (0, import_compose10.createIntentComponent)(
 var import_compose11 = require("@esphome/compose");
 var DropdownField = (0, import_compose11.createIntentComponent)(
   (props) => {
-    const theme = useTheme();
     const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
     const label = {
       type: "lvgl-label",
       props: {
-        text: props.label,
-        textFont: fontDefToLvgl(theme.typography.body),
-        textColor: theme.colors.textPrimary
+        styles: STYLE_TEXT_PRIMARY,
+        text: props.label
       }
     };
     const dropdownProps = {
@@ -664,6 +844,20 @@ var DropdownField = (0, import_compose11.createIntentComponent)(
   GridItem,
   HStack,
   Row,
+  STYLE_ARC_INDICATOR,
+  STYLE_ARC_KNOB,
+  STYLE_BG,
+  STYLE_BORDER,
+  STYLE_SLIDER_INDICATOR,
+  STYLE_SLIDER_KNOB,
+  STYLE_SURFACE,
+  STYLE_SURFACE_ALT,
+  STYLE_SWITCH_INDICATOR,
+  STYLE_SWITCH_KNOB,
+  STYLE_TEXT_DISABLED,
+  STYLE_TEXT_PRIMARY,
+  STYLE_TEXT_SECONDARY,
+  STYLE_TEXT_VARIANT,
   Screen,
   SliderField,
   Space,
@@ -672,6 +866,8 @@ var DropdownField = (0, import_compose11.createIntentComponent)(
   ThemeContext,
   ThemeProvider,
   VStack,
+  applyTheme,
+  createLvglThemeProps,
   darkTheme,
   fontDefToLvgl,
   lightTheme,
@@ -680,7 +876,11 @@ var DropdownField = (0, import_compose11.createIntentComponent)(
   resolveSpacing,
   resolveStatus,
   resolveTypography,
+  statusStyleId,
+  statusTextStyleId,
   themeFromJSON,
   themeToJSON,
+  themeToLvglTheme,
+  themeToStyleDefinitions,
   useTheme
 });

package/dist/index.mjs

@@ -45,6 +45,11 @@ var darkTheme = {
     md: { height: 44, fontSize: 16, paddingX: 16, paddingY: 8 },
     lg: { height: 52, fontSize: 18, paddingX: 20, paddingY: 10 },
     xl: { height: 64, fontSize: 22, paddingX: 24, paddingY: 12 }
+  },
+  parts: {
+    slider: { bg: "#1E88E5", knob: "#E0E0E0" },
+    switch: { bg: "#1E88E5", knob: "#E0E0E0" },
+    arc: { bg: "#1E88E5", knob: "#E0E0E0" }
   }
 };
 
@@ -99,6 +104,11 @@ var lightTheme = {
     md: { height: 44, fontSize: 16, paddingX: 16, paddingY: 8 },
     lg: { height: 52, fontSize: 18, paddingX: 20, paddingY: 10 },
     xl: { height: 64, fontSize: 22, paddingX: 24, paddingY: 12 }
+  },
+  parts: {
+    slider: { bg: "#1565C0", knob: "#212121" },
+    switch: { bg: "#1565C0", knob: "#212121" },
+    arc: { bg: "#1565C0", knob: "#212121" }
   }
 };
 
@@ -132,6 +142,169 @@ function resolveRadius(value) {
   return useTheme().radii[value];
 }
 
+// src/theme/style-ids.ts
+var STYLE_BG = "ds_bg";
+var STYLE_SURFACE = "ds_surface";
+var STYLE_SURFACE_ALT = "ds_surface_alt";
+var STYLE_BORDER = "ds_border";
+var STYLE_TEXT_PRIMARY = "ds_text_primary";
+var STYLE_TEXT_SECONDARY = "ds_text_secondary";
+var STYLE_TEXT_DISABLED = "ds_text_disabled";
+var STYLE_TEXT_VARIANT = {
+  title: "ds_text_title",
+  subtitle: "ds_text_subtitle",
+  body: "ds_text_body",
+  caption: "ds_text_caption"
+};
+function statusStyleId(status, variant) {
+  return `ds_status_${status}_${variant}`;
+}
+function statusTextStyleId(status, variant) {
+  return `ds_status_${status}_${variant}_text`;
+}
+var ALL_STATUSES = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger"
+];
+var STYLE_SLIDER_INDICATOR = "ds_slider_indicator";
+var STYLE_SLIDER_KNOB = "ds_slider_knob";
+var STYLE_SWITCH_INDICATOR = "ds_switch_indicator";
+var STYLE_SWITCH_KNOB = "ds_switch_knob";
+var STYLE_ARC_INDICATOR = "ds_arc_indicator";
+var STYLE_ARC_KNOB = "ds_arc_knob";
+
+// src/theme/bridge.ts
+function resolveParts(theme) {
+  if (theme.parts) return theme.parts;
+  return {
+    slider: { bg: theme.colors.primary.bg, knob: theme.colors.textPrimary },
+    switch: { bg: theme.colors.primary.bg, knob: theme.colors.textPrimary },
+    arc: { bg: theme.colors.primary.bg, knob: theme.colors.textPrimary }
+  };
+}
+function themeToStyleDefinitions(theme) {
+  const defs = [];
+  const bodyFont = fontDefToLvgl(theme.typography.body);
+  defs.push({ id: STYLE_BG, bg_color: theme.colors.background });
+  defs.push({ id: STYLE_SURFACE, bg_color: theme.colors.surface });
+  defs.push({ id: STYLE_SURFACE_ALT, bg_color: theme.colors.surfaceAlt });
+  defs.push({ id: STYLE_BORDER, border_color: theme.colors.border });
+  defs.push({ id: STYLE_TEXT_PRIMARY, text_color: theme.colors.textPrimary, text_font: bodyFont });
+  defs.push({ id: STYLE_TEXT_SECONDARY, text_color: theme.colors.textSecondary, text_font: bodyFont });
+  defs.push({ id: STYLE_TEXT_DISABLED, text_color: theme.colors.textDisabled, text_font: bodyFont });
+  for (const variant of ["title", "subtitle", "body", "caption"]) {
+    const font = fontDefToLvgl(theme.typography[variant]);
+    defs.push({
+      id: STYLE_TEXT_VARIANT[variant],
+      text_color: theme.colors.textPrimary,
+      text_font: font
+    });
+  }
+  for (const status of ALL_STATUSES) {
+    const sc = theme.colors[status];
+    defs.push({
+      id: statusStyleId(status, "solid"),
+      bg_color: sc.bg
+    });
+    defs.push({
+      id: statusTextStyleId(status, "solid"),
+      text_color: sc.text
+    });
+    defs.push({
+      id: statusStyleId(status, "outline"),
+      bg_opa: "TRANSP",
+      border_color: sc.bg,
+      border_width: 2
+    });
+    defs.push({
+      id: statusTextStyleId(status, "outline"),
+      text_color: sc.bg
+    });
+  }
+  const parts = resolveParts(theme);
+  defs.push({ id: STYLE_SLIDER_INDICATOR, bg_color: parts.slider.bg });
+  defs.push({ id: STYLE_SLIDER_KNOB, bg_color: parts.slider.knob });
+  defs.push({ id: STYLE_SWITCH_INDICATOR, bg_color: parts.switch.bg });
+  defs.push({ id: STYLE_SWITCH_KNOB, bg_color: parts.switch.knob });
+  defs.push({ id: STYLE_ARC_INDICATOR, bg_color: parts.arc.bg });
+  defs.push({ id: STYLE_ARC_KNOB, bg_color: parts.arc.knob });
+  return defs;
+}
+function themeToLvglTheme(theme) {
+  const bodyFont = fontDefToLvgl(theme.typography.body);
+  const parts = resolveParts(theme);
+  return {
+    label: {
+      text_color: theme.colors.textPrimary,
+      text_font: bodyFont
+    },
+    button: {
+      bg_color: theme.colors.primary.bg,
+      border_width: 0,
+      pressed: {
+        bg_color: theme.colors.primary.bgPressed
+      }
+    },
+    obj: {
+      border_width: 0,
+      bg_opa: "TRANSP"
+    },
+    slider: {
+      bg_color: theme.colors.surfaceAlt,
+      indicator: {
+        bg_color: parts.slider.bg
+      },
+      knob: {
+        bg_color: parts.slider.knob
+      }
+    },
+    switch: {
+      bg_color: theme.colors.surfaceAlt,
+      indicator: {
+        bg_color: parts.switch.bg
+      },
+      knob: {
+        bg_color: parts.switch.knob
+      }
+    },
+    arc: {
+      arc_color: theme.colors.surfaceAlt,
+      indicator: {
+        arc_color: parts.arc.bg
+      },
+      knob: {
+        bg_color: parts.arc.knob
+      }
+    },
+    dropdown: {
+      text_color: theme.colors.textPrimary,
+      text_font: bodyFont,
+      bg_color: theme.colors.surface,
+      border_color: theme.colors.border,
+      border_width: 1
+    }
+  };
+}
+function createLvglThemeProps(theme) {
+  return {
+    styleDefinitions: themeToStyleDefinitions(theme),
+    theme: themeToLvglTheme(theme)
+  };
+}
+function createThemeSwitchActions(theme) {
+  const defs = themeToStyleDefinitions(theme);
+  return defs.map((def) => {
+    const { id, ...props } = def;
+    return { "lvgl.style.update": { id, ...props } };
+  });
+}
+function applyTheme(theme) {
+  return createThemeSwitchActions(theme);
+}
+
 // src/intents.ts
 var COMPOSE_UI_INTENTS = {
   /** Col can only be placed inside Row. */
@@ -145,16 +318,16 @@ import { createIntentComponent, LVGL_INTENTS } from "@esphome/compose";
 var Screen = createIntentComponent(
   (props) => {
     const padding = props.padding != null ? resolveSpacing(props.padding) : void 0;
-    const theme = useTheme();
-    const bgColor = props.bgColor ?? theme.colors.background;
     return {
       type: "lvgl-page",
       props: {
-        bgColor,
+        styles: STYLE_BG,
+        ...props.bgColor != null ? { bgColor: props.bgColor } : {},
         borderWidth: props.borderWidth ?? 0,
         ...props.borderColor != null ? { borderColor: props.borderColor } : {},
         ...padding != null ? { padAll: padding } : {},
         ...props.skip != null ? { skip: props.skip } : {},
+        "x:custom": { scrollbar_mode: "OFF" },
         ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
       }
     };
@@ -186,8 +359,8 @@ function buildSpaceElement(props) {
   return {
     type: "lvgl-obj",
     props: {
-      ...props.width != null ? { width: props.width } : {},
-      ...props.height != null ? { height: props.height } : {},
+      width: props.width ?? "100%",
+      height: props.height ?? "SIZE_CONTENT",
       ...padding != null ? { padAll: padding } : {},
       ...props.bgColor != null ? { bgColor: props.bgColor } : {},
       ...props.bgOpa != null ? { bgOpa: props.bgOpa } : { bgOpa: "TRANSP" },
@@ -195,6 +368,7 @@ function buildSpaceElement(props) {
       borderWidth: props.borderWidth ?? 0,
       ...props.borderColor != null ? { borderColor: props.borderColor } : {},
       "x:custom": {
+        scrollbar_mode: "OFF",
         layout: buildFlexLayout(flow, gapKey, props)
       },
       ...props.children ? { children: Array.isArray(props.children) ? props.children : [props.children] } : {}
@@ -354,15 +528,13 @@ import { createIntentComponent as createIntentComponent5, LVGL_INTENTS as LVGL_I
 var Text = createIntentComponent5(
   (props) => {
     const variant = props.variant ?? "body";
-    const fontDef = resolveTypography(variant);
-    const color = props.color ?? useTheme().colors.textPrimary;
     return {
       type: "lvgl-label",
       props: {
+        styles: STYLE_TEXT_VARIANT[variant],
         ...props.text != null ? { text: props.text } : {},
-        textFont: fontDefToLvgl(fontDef),
         ...props.align != null ? { textAlign: props.align } : {},
-        textColor: color,
+        ...props.color != null ? { textColor: props.color } : {},
         ...props.longMode != null ? { longMode: props.longMode } : {},
         ...props.x != null ? { x: props.x } : {},
         ...props.y != null ? { y: props.y } : {},
@@ -383,32 +555,25 @@ var Button = createIntentComponent6(
     const status = props.status ?? "primary";
     const size = props.size ?? "md";
     const variant = props.variant ?? "solid";
-    const colors = resolveStatus(status);
     const dims = resolveSize(size);
     const theme = useTheme();
-    const isSolid = variant === "solid";
+    const sc = resolveStatus(status);
     const textFont = fontDefToLvgl({ fontFamily: theme.typography.body.fontFamily, fontSize: dims.fontSize });
+    const pressed = variant === "solid" ? { bgColor: sc.bgPressed } : { bgColor: sc.bg, bgOpa: "COVER" };
     const buttonProps = {
+      styles: statusStyleId(status, variant),
       width: props.width ?? dims.paddingX * 2 + 80,
       height: props.height ?? dims.height,
+      pressed,
       ...props.x != null ? { x: props.x } : {},
       ...props.y != null ? { y: props.y } : {},
-      ...isSolid ? {
-        bgColor: colors.bg,
-        pressed: { bgColor: colors.bgPressed }
-      } : {
-        bgOpa: "TRANSP",
-        borderColor: colors.bg,
-        borderWidth: 2,
-        pressed: { bgColor: colors.bg, bgOpa: "COVER" }
-      },
       ...props.onPress != null ? { "x:custom": { on_press: props.onPress } } : {}
     };
     const label = {
       type: "lvgl-label",
       props: {
+        styles: statusTextStyleId(status, variant),
         text: props.text ?? "",
-        textColor: isSolid ? colors.text : colors.bg,
         textFont,
         align: "CENTER"
       }
@@ -433,19 +598,20 @@ var Card = createIntentComponent7(
   (props) => {
     const padding = resolveSpacing(props.padding ?? "md");
     const radius = resolveRadius(props.radius ?? "md");
-    const theme = useTheme();
     const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
     return {
       type: "lvgl-obj",
       props: {
+        styles: STYLE_SURFACE_ALT,
         padAll: padding,
         radius,
-        bgColor: props.bgColor ?? theme.colors.surfaceAlt,
+        ...props.bgColor != null ? { bgColor: props.bgColor } : {},
         ...props.borderColor != null ? { borderColor: props.borderColor } : {},
         borderWidth: props.borderWidth ?? 0,
-        ...props.width != null ? { width: props.width } : {},
-        ...props.height != null ? { height: props.height } : {},
+        width: props.width ?? "100%",
+        height: props.height ?? "SIZE_CONTENT",
         "x:custom": {
+          scrollbar_mode: "OFF",
           layout: {
             type: "flex",
             flex_flow: "COLUMN",
@@ -467,14 +633,12 @@ var Card = createIntentComponent7(
 import { createIntentComponent as createIntentComponent8, LVGL_INTENTS as LVGL_INTENTS8 } from "@esphome/compose";
 var SliderField = createIntentComponent8(
   (props) => {
-    const theme = useTheme();
     const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
     const label = {
       type: "lvgl-label",
       props: {
-        text: props.label,
-        textFont: fontDefToLvgl(theme.typography.body),
-        textColor: theme.colors.textPrimary
+        styles: STYLE_TEXT_PRIMARY,
+        text: props.label
       }
     };
     const sliderProps = {
@@ -514,13 +678,11 @@ var SliderField = createIntentComponent8(
 import { createIntentComponent as createIntentComponent9, LVGL_INTENTS as LVGL_INTENTS9 } from "@esphome/compose";
 var SwitchField = createIntentComponent9(
   (props) => {
-    const theme = useTheme();
     const label = {
       type: "lvgl-label",
       props: {
-        text: props.label,
-        textFont: fontDefToLvgl(theme.typography.body),
-        textColor: theme.colors.textPrimary
+        styles: STYLE_TEXT_PRIMARY,
+        text: props.label
       }
     };
     const switchProps = {
@@ -559,14 +721,12 @@ var SwitchField = createIntentComponent9(
 import { createIntentComponent as createIntentComponent10, LVGL_INTENTS as LVGL_INTENTS10 } from "@esphome/compose";
 var DropdownField = createIntentComponent10(
   (props) => {
-    const theme = useTheme();
     const gap = props.gap != null ? resolveSpacing(props.gap) : void 0;
     const label = {
       type: "lvgl-label",
       props: {
-        text: props.label,
-        textFont: fontDefToLvgl(theme.typography.body),
-        textColor: theme.colors.textPrimary
+        styles: STYLE_TEXT_PRIMARY,
+        text: props.label
       }
     };
     const dropdownProps = {
@@ -610,6 +770,20 @@ export {
   GridItem,
   HStack,
   Row,
+  STYLE_ARC_INDICATOR,
+  STYLE_ARC_KNOB,
+  STYLE_BG,
+  STYLE_BORDER,
+  STYLE_SLIDER_INDICATOR,
+  STYLE_SLIDER_KNOB,
+  STYLE_SURFACE,
+  STYLE_SURFACE_ALT,
+  STYLE_SWITCH_INDICATOR,
+  STYLE_SWITCH_KNOB,
+  STYLE_TEXT_DISABLED,
+  STYLE_TEXT_PRIMARY,
+  STYLE_TEXT_SECONDARY,
+  STYLE_TEXT_VARIANT,
   Screen,
   SliderField,
   Space,
@@ -618,6 +792,8 @@ export {
   ThemeContext,
   ThemeProvider,
   VStack,
+  applyTheme,
+  createLvglThemeProps,
   darkTheme,
   fontDefToLvgl,
   lightTheme,
@@ -626,7 +802,11 @@ export {
   resolveSpacing,
   resolveStatus,
   resolveTypography,
+  statusStyleId,
+  statusTextStyleId,
   themeFromJSON,
   themeToJSON,
+  themeToLvglTheme,
+  themeToStyleDefinitions,
   useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esphome/compose-ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "LVGL Design System components for ESPHome Compose",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -35,13 +35,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@esphome/compose": "0.1.3"
+    "@esphome/compose": "0.3.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
     "tsup": "^8.0.0",
-    "tsx": "^4.0.0",
-    "typescript": "^5.4.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
     "rimraf": "^6.1.3",
     "vitest": "^2.0.0"
   },