@aleph-alpha/ui-library 1.14.0 → 1.15.0

package/config.d.ts

@@ -60,7 +60,7 @@ export interface UiLibraryThemeConfig {
   /**
    * Include all token-based CSS variables in addition to shadcn variables.
    * This enables classes like bg-background-surface-secondary, text-content-on-surface-primary, etc.
-   * @default false
+   * @default true
    */
   includeAllTokens?: boolean;
 }
@@ -145,24 +145,37 @@ export declare const presetUiLibraryTheme: (
  *
  * **Important:** Place this preset AFTER `presetShadcn()` to override its CSS variables.
  *
+ * This preset bundles everything needed for the UI library:
+ * - CSS variables for all design tokens (light/dark mode)
+ * - Token-based theme colors (bg-background-surface-secondary, text-content-on-surface-primary, etc.)
+ * - Semantic color overrides (background, foreground, modal, link, etc.)
+ * - Typography classes from design tokens (heading-48-bold, body-14-normal, label-12-medium, etc.)
+ * - Custom rules for Tailwind v4 CSS variable syntax (w-(--var), h-(--var), etc.)
+ *
  * @example
  * ```ts
- * // Use defaults
- * presetUiLibraryThemeFromTokens({ darkSelector: 'html.dark' })
+ * // Use defaults (recommended — includes everything)
+ * presetUiLibraryThemeFromTokens()
  *
  * // Extend defaults
  * presetUiLibraryThemeFromTokens({
- *   darkSelector: 'html.dark',
  *   extend: { light: { primary: '#ff5500' } },
  * })
  *
  * // With external config file
  * import themeConfig from './tokens.config';
- * presetUiLibraryThemeFromTokens({ ...themeConfig, darkSelector: 'html.dark' })
+ * presetUiLibraryThemeFromTokens(themeConfig)
  * ```
  */
 export declare const presetUiLibraryThemeFromTokens: (options?: UiLibraryPresetOptions) => Preset;
 
+/**
+ * UnoCSS preset with utility rules required by the UI library's components.
+ * Adds Tailwind v4 CSS variable syntax (w-(--var), h-(--var), etc.)
+ * that preset-wind4 does not yet support.
+ */
+export declare const presetUiLibraryUtils: () => Preset;
+
 /**
  * Typography shortcut tuple: [className, cssProperties]
  */

package/config.js

@@ -469,9 +469,9 @@ export const presetUiLibraryTheme = (theme, options = {}) => {
 };
 
 export const presetUiLibraryThemeFromTokens = (options = {}) => {
-  const { theme, extend, includeAllTokens = false, ...presetOptions } = options;
+  const { theme, extend, includeAllTokens = true, ...presetOptions } = options;
 
-  // If full theme override provided, use it directly
+  // If full theme override provided, use basic preset (no batteries)
   if (theme) {
     return presetUiLibraryTheme(theme, presetOptions);
   }
@@ -479,7 +479,7 @@ export const presetUiLibraryThemeFromTokens = (options = {}) => {
   // Get base shadcn theme from tokens
   const baseTheme = getUiLibraryThemeFromTokens();
 
-  // Optionally include all token-based variables
+  // Include all token-based variables (default: true)
   let finalTheme = baseTheme;
   if (includeAllTokens) {
     const tokenVars = getUiLibraryTokenVars();
@@ -492,9 +492,66 @@ export const presetUiLibraryThemeFromTokens = (options = {}) => {
   // Merge with extend overrides
   finalTheme = mergeThemes(finalTheme, extend);
 
-  return presetUiLibraryTheme(finalTheme, presetOptions);
+  // Get base preset with preflights (CSS variables)
+  const basePreset = presetUiLibraryTheme(finalTheme, presetOptions);
+
+  // Token colors for utility classes (bg-background-surface-secondary, etc.)
+  const tokenColors = getUiLibraryTokenColors();
+
+  // Semantic color overrides used by components
+  const semanticColors = {
+    background: 'oklch(var(--background))',
+    foreground: 'oklch(var(--foreground))',
+    modal: 'oklch(var(--modal))',
+    link: 'oklch(var(--link))',
+    'hover-default': 'oklch(var(--hover-default))',
+    'modal-overlay': 'oklch(var(--modal-overlay))',
+    inverse: 'oklch(var(--inverse))',
+    'inverse-foreground': 'oklch(var(--inverse-foreground))',
+    'secondary-content': 'oklch(var(--secondary-content))',
+    'input-background': 'oklch(var(--input-background))',
+    'accent-default': 'oklch(var(--accent-default))',
+    'accent-default-foreground': 'oklch(var(--accent-default-foreground))',
+  };
+
+  // Typography shortcuts from design tokens
+  const typographyShortcuts = getUiLibraryTypographyShortcuts();
+
+  // Return preset with token-related config: CSS variables, token colors, semantic overrides, typography
+  return {
+    ...basePreset,
+    theme: {
+      colors: {
+        ...tokenColors,
+        ...semanticColors,
+      },
+    },
+    rules: [
+      // Typography classes from design tokens (heading-48-bold, body-14-normal, label-12-medium, etc.)
+      ...typographyShortcuts.map(([name, css]) => [
+        new RegExp(`^${name}$`),
+        () => Object.fromEntries(css.split(';').map((p) => p.split(':').map((s) => s.trim()))),
+      ]),
+    ],
+  };
 };
 
+/**
+ * UnoCSS preset with utility rules required by the UI library's components.
+ * Adds Tailwind v4 CSS variable syntax (w-(--var), h-(--var), etc.)
+ * that preset-wind4 does not yet support.
+ */
+export const presetUiLibraryUtils = () =>
+  definePreset(() => ({
+    name: '@aleph-alpha/ui-library-utils',
+    rules: [
+      [/^w-\(--(.+)\)$/, ([, name]) => ({ width: `var(--${name})` })],
+      [/^max-w-\(--(.+)\)$/, ([, name]) => ({ 'max-width': `var(--${name})` })],
+      [/^h-\(--(.+)\)$/, ([, name]) => ({ height: `var(--${name})` })],
+      [/^origin-\(--(.+)\)$/, ([, name]) => ({ 'transform-origin': `var(--${name})` })],
+    ],
+  }))();
+
 // Typography utilities
 const fontWeightMap = {
   Regular: '400',

package/dist/system/index.d.ts

@@ -136,15 +136,11 @@ size: UiSidebarMenuSubButtonSize;
 isActive: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_124: DefineComponent<__VLS_PublicProps_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:open": (value: boolean | undefined) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_12> & Readonly<{
-"onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component_124: DefineComponent<UiSidebarProviderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiSidebarProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_125: DefineComponent<__VLS_PublicProps_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_125: DefineComponent<__VLS_PublicProps_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: number) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_13> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_12> & Readonly<{
 "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
@@ -200,9 +196,9 @@ declare const __VLS_component_142: DefineComponent<UiTabsTriggerProps, {}, {}, {
 
 declare const __VLS_component_143: DefineComponent<UiTabsContentProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiTabsContentProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_144: DefineComponent<__VLS_PublicProps_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_144: DefineComponent<__VLS_PublicProps_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string[]) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_15> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_14> & Readonly<{
 "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
 }>, {
 disabled: boolean;
@@ -212,9 +208,9 @@ declare const __VLS_component_145: DefineComponent<UiTagsInputItemProps, {}, {},
 
 declare const __VLS_component_146: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
-declare const __VLS_component_147: DefineComponent<__VLS_PublicProps_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_147: DefineComponent<__VLS_PublicProps_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_17> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_16> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 disabled: boolean;
@@ -224,9 +220,9 @@ variant: "default" | "outline";
 
 declare const __VLS_component_148: DefineComponent<UiToggleGroupItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<UiToggleGroupItemProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_149: DefineComponent<__VLS_PublicProps_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_149: DefineComponent<__VLS_PublicProps_17, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:open": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_18> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_17> & Readonly<{
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
 disabled: boolean;
@@ -245,10 +241,10 @@ declare const __VLS_component_150: DefineComponent<TooltipRootProps, {}, {}, {},
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
-declare const __VLS_component_151: DefineComponent<__VLS_Props_34, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_151: DefineComponent<__VLS_Props_33, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 escapeKeyDown: (event: KeyboardEvent) => any;
 pointerDownOutside: (event: Event) => any;
-}, string, PublicProps, Readonly<__VLS_Props_34> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_Props_33> & Readonly<{
 onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
 onPointerDownOutside?: ((event: Event) => any) | undefined;
 }>, {
@@ -781,29 +777,27 @@ declare type __VLS_Props_26 = DialogContentProps & {
     closeLabel?: string;
 };
 
-declare type __VLS_Props_27 = UiSidebarProviderProps;
+declare type __VLS_Props_27 = UiStepperProps;
 
-declare type __VLS_Props_28 = UiStepperProps;
+declare type __VLS_Props_28 = UiSwitchProps;
 
-declare type __VLS_Props_29 = UiSwitchProps;
+declare type __VLS_Props_29 = UiTagsInputProps;
 
 declare type __VLS_Props_3 = {
     class?: HTMLAttributes['class'];
 };
 
-declare type __VLS_Props_30 = UiTagsInputProps;
+declare type __VLS_Props_30 = UiTextareaProps;
 
-declare type __VLS_Props_31 = UiTextareaProps;
+declare type __VLS_Props_31 = UiToggleProps;
 
-declare type __VLS_Props_32 = UiToggleProps;
+declare type __VLS_Props_32 = UiTooltipProps;
 
-declare type __VLS_Props_33 = UiTooltipProps;
-
-declare type __VLS_Props_34 = TooltipContentProps & {
+declare type __VLS_Props_33 = TooltipContentProps & {
     class?: HTMLAttributes['class'];
 };
 
-declare type __VLS_Props_35 = UiDatePickerProps;
+declare type __VLS_Props_34 = UiDatePickerProps;
 
 declare type __VLS_Props_4 = {
     class?: HTMLAttributes['class'];
@@ -841,37 +835,33 @@ declare type __VLS_PublicProps_11 = {
 } & __VLS_Props_25;
 
 declare type __VLS_PublicProps_12 = {
-    'open'?: boolean | undefined;
+    modelValue?: number;
 } & __VLS_Props_27;
 
 declare type __VLS_PublicProps_13 = {
-    modelValue?: number;
+    modelValue?: boolean;
 } & __VLS_Props_28;
 
 declare type __VLS_PublicProps_14 = {
-    modelValue?: boolean;
+    modelValue?: string[];
 } & __VLS_Props_29;
 
 declare type __VLS_PublicProps_15 = {
-    modelValue?: string[];
+    modelValue?: string;
 } & __VLS_Props_30;
 
 declare type __VLS_PublicProps_16 = {
-    modelValue?: string;
+    modelValue?: boolean;
 } & __VLS_Props_31;
 
 declare type __VLS_PublicProps_17 = {
-    modelValue?: boolean;
+    'open'?: boolean;
 } & __VLS_Props_32;
 
 declare type __VLS_PublicProps_18 = {
-    'open'?: boolean;
-} & __VLS_Props_33;
-
-declare type __VLS_PublicProps_19 = {
     modelValue?: UiDatePickerProps['modelValue'];
     'open'?: boolean;
-} & __VLS_Props_35;
+} & __VLS_Props_34;
 
 declare type __VLS_PublicProps_2 = {
     modelValue?: UiCalendarProps['modelValue'];
@@ -4085,7 +4075,7 @@ export declare interface UiCalendarProps {
     locale?: string;
     /**
      * The day of the week to start on.
-     * @default 0 (Sunday)
+     * @default 0
      */
     weekStartsOn?: UiCalendarWeekStartsOn;
     /**
@@ -4407,10 +4397,10 @@ export declare type UiDataTableToolbarProps<TData> = {
     labels?: ToolbarLabels;
 };
 
-export declare const UiDatePicker: DefineComponent<__VLS_PublicProps_19, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const UiDatePicker: DefineComponent<__VLS_PublicProps_18, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: DateValue | DateRange | undefined) => any;
 "update:open": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_19> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_18> & Readonly<{
 "onUpdate:modelValue"?: ((value: DateValue | DateRange | undefined) => any) | undefined;
 "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
@@ -4519,7 +4509,7 @@ export declare interface UiDatePickerProps {
     locale?: string;
     /**
      * The day of the week to start on.
-     * @default 0 (Sunday)
+     * @default 0
      */
     weekStartsOn?: UiDatePickerWeekStartsOn;
     /**
@@ -6077,7 +6067,7 @@ export declare interface UiRangeCalendarProps {
     locale?: string;
     /**
      * The day of the week to start on.
-     * @default 0 (Sunday)
+     * @default 0
      */
     weekStartsOn?: UiRangeCalendarWeekStartsOn;
     /**
@@ -6578,19 +6568,17 @@ export declare interface UiSidebarProps {
 
 export declare const UiSidebarProvider: __VLS_WithTemplateSlots_124<typeof __VLS_component_124, __VLS_TemplateResult_124["slots"]>;
 
+/**
+ * Wraps the sidebar and manages its open/closed state.
+ * Omit `default-open` to use cookie-based persistence (falls back to expanded).
+ */
 export declare interface UiSidebarProviderProps {
     /**
-     * The default open state when uncontrolled.
-     * If not provided, the core provider uses cookie-based persistence
+     * The initial open state of the sidebar.
+     * If not provided, the inner provider uses cookie-based persistence
      * (falls back to expanded if no cookie exists).
      */
     defaultOpen?: boolean;
-    /**
-     * The controlled open state of the sidebar.
-     * - Omit for uncontrolled mode (component manages state internally)
-     * - Use `v-model:open` for controlled mode
-     */
-    open?: boolean;
 }
 
 export declare const UiSidebarRail: __VLS_WithTemplateSlots_116<typeof __VLS_component_116, __VLS_TemplateResult_116["slots"]>;
@@ -6829,9 +6817,9 @@ export declare type UiStepperTriggerProps = {
     asChild?: boolean;
 };
 
-export declare const UiSwitch: DefineComponent<__VLS_PublicProps_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const UiSwitch: DefineComponent<__VLS_PublicProps_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_14> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_13> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
 disabled: boolean;
@@ -7085,9 +7073,9 @@ export declare interface UiTagsInputProps extends Omit<TagsInputRootProps, 'clas
 
 export declare const UiTemplatePlaceholder: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 
-export declare const UiTextarea: DefineComponent<__VLS_PublicProps_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+export declare const UiTextarea: DefineComponent<__VLS_PublicProps_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => any;
-}, string, PublicProps, Readonly<__VLS_PublicProps_16> & Readonly<{
+}, string, PublicProps, Readonly<__VLS_PublicProps_15> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
 disabled: boolean;