@wpic/ui 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.5.0 — 2026-09-08
+
+- Add opt-in `WThemeProvider`, UI5 light/dark tokens, typed color overrides, `themeVariables`, and chart palettes. Existing consumers keep their default appearance.
+- Add `WPageHeader` with actions, metadata and unframed filters.
+- Apply the validated controls, monochrome primary/neutral secondary buttons, subtle cards and white-thumb switches inside the provider.
+- Carry themes into all shared popovers, including calendars, date ranges and editable tags. Add nested Escape handling and safe outside-listener cleanup.
+- Make date clear actions keyboard accessible; preserve date bounds, emitted values and legacy props. Fix local date serialization in date-range calendars.
+- Ensure packaged CSS always includes the public token declarations, even when compiled utilities already reference their names.
+- Add packaged-browser regression coverage for light/dark scopes, customization, nested panels, switches, dates and backwards-compatible semantic components.
+
+
 ## 0.4.0 — 2026-09-08
 
 ### Banners, tags and badges

package/COMPONENTS.md

@@ -1,5 +1,50 @@
 # COMPONENTS.md — wpic-ui component reference
-Use this as reference when writing Vue components. Updated for 0.4.0.
+Use this as reference when writing Vue components. Updated for 0.5.0.
+
+
+## Theme provider and customization (0.5)
+
+The UI5 preset is **opt-in**. Existing consumers without `WThemeProvider` keep their current styling and existing component props/events. Import the packaged stylesheet; no host Tailwind scanning is required.
+
+```vue
+<script setup lang="ts">
+import { WThemeProvider, WButton, type WThemeOverrides } from '@wpic/ui'
+import '@wpic/ui/style.css'
+const colors: WThemeOverrides = {
+  light: { accent: '#85C531', primary: '#171717', onPrimary: '#FFFFFF' },
+  dark: { surface: '#151515', popover: '#1F201D', raised: '#2A2A28', primary: '#FFFFFF', onPrimary: '#171717' },
+}
+</script>
+<template>
+  <WThemeProvider mode="auto" :colors="colors">
+    <WButton>Save</WButton>
+  </WThemeProvider>
+</template>
+```
+
+`mode` accepts `auto` (inherits a parent provider or the document `.dark` class), `light`, or `dark`. `preset` currently accepts `ui5`. `colors` is a partial map per mode; unspecified entries use the preset. A nested provider can preview another theme without changing the document or saved application preference.
+
+Color keys (`WThemeColors`): `canvas`, `surface`, `input`, `raised`, `popover`, `border`, `borderHover`, `text`, `muted`, `dim`, `accent`, `onAccent`, `primary`, `primaryHover`, `onPrimary`, `secondary`, `secondaryHover`, `onSecondary`, `secondaryShadow`, `switchOn`, `switchOff`, `switchDisabled`, `switchThumb`, `focusRing`, `positive`, `negative`. Secondary and switch backgrounds accept CSS gradients. `focusRing` defaults to the accent at 18% opacity. Change both foreground and background when customizing contrast.
+
+The provider supplies prefixed CSS variables and the existing surface/text aliases. `--wpic-primary` remains an accent alias for legacy components; monochrome action buttons use `--wpic-button-primary`. `themeVariables(mode, overrides)` exposes the same mapping for document-level integration. Use the provider's **colors prop** for scoped overrides that must follow teleports. Direct DOM CSS overrides are not copied to teleported panels.
+
+`WPopover`, date calendars, ranges, month pickers, selects and editable-tag option panels receive the provider context directly. Panels inherit the selected palette even outside the provider's DOM subtree. Nested popovers keep their parent open when selecting a child option; Escape closes the innermost visible panel and returns focus to its anchor.
+
+UI5 uses 36px default controls (explicit small/large sizes and plain selects retain their sizing), standard button radii, subtle card contours, uniform input fills, and a 1px accent focus border plus a 3px translucent ring. Disabled and validation states remain distinct. `WTable` structure and behavior are unchanged.
+
+### WPageHeader
+
+Props: `title: string`, `description?: string`, `headingLevel?: 1 | 2` (default 1). Slots: `actions`, `metadata`, `filters`. Titles wrap, actions can move to the next line, filters have no border or internal padding. The consumer supplies outer page spacing. Existing application headers can forward their slots through this component.
+
+### Chart palettes
+
+`chartPalettes.light` and `.dark` contain six stable series colors: blue, teal, violet, amber, rose, slate. WPIC green is reserved for UI accents. Choose by theme and keep series-to-color assignments stable; retain labels/legends when displaying multiple series. Consumers can supply their own palette arrays.
+
+### Date and switch additions
+
+- `WDatePicker`: a selected, clearable date shows one trailing clear button instead of a chevron. `clearLabel` localizes its accessible name (default `Clear date`). Clear emits the existing empty-string model/change values and closes the panel. Date bounds and output format remain unchanged.
+- `WDateRangePicker`: retains `DateRange | null`, presets and custom ranges; adds `disabled`, `ariaLabel`, and `clearLabel` (default `Clear date range`). Clear emits `null`. Calendar dates use local year/month/day, avoiding UTC day shifts in positive time zones.
+- `WToggle`: retains boolean v-model, default label slot and `disabled`; adds `ariaLabel`. The actual button has `role="switch"` and `aria-checked`. The UI5 disabled track is dark in dark mode, with a white thumb.
 
 ## Banners, tags and badges: usage
 

package/dist/components/WDatePicker.vue.d.ts

@@ -11,6 +11,7 @@ type __VLS_Props = {
     ariaLabel?: string;
     disabled?: boolean;
     clearable?: boolean;
+    clearLabel?: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
@@ -24,8 +25,9 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     modelValue: string | null;
     placeholder: string;
     clearable: boolean;
+    clearLabel: string;
+    ariaLabel: string;
     locale: string;
     weekStartsOn: 0 | 1;
-    ariaLabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/WDateRangePicker.vue.d.ts

@@ -13,6 +13,9 @@ type __VLS_Props = {
     presets?: Preset[];
     placeholder?: string;
     clearable?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    clearLabel?: string;
     size?: 'sm' | 'md' | 'lg';
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -22,6 +25,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
 }>, {
     placeholder: string;
     clearable: boolean;
+    clearLabel: string;
     presets: Preset[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/WMonthPicker.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     disabled: boolean;
     modelValue: string | null;
     placeholder: string;
-    locale: string;
     ariaLabel: string;
+    locale: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/WPageHeader.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    headingLevel?: 1 | 2;
+};
+declare var __VLS_5: {}, __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    metadata?: (props: typeof __VLS_5) => any;
+} & {
+    actions?: (props: typeof __VLS_7) => any;
+} & {
+    filters?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headingLevel: 1 | 2;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/WThemeProvider.vue.d.ts

@@ -0,0 +1,21 @@
+import { WThemeMode, WThemeOverrides } from '../theme';
+type __VLS_Props = {
+    mode?: WThemeMode | 'auto';
+    preset?: 'ui5';
+    colors?: WThemeOverrides;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    mode: WThemeMode | "auto";
+    preset: "ui5";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/WToggle.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     disabled?: boolean;
+    ariaLabel?: string;
 };
 type __VLS_PublicProps = __VLS_Props & {
     modelValue?: boolean;

package/dist/index.d.ts

@@ -81,3 +81,7 @@ export type { WSegmentedControlOption } from './components/WSegmentedControl.vue
 export { default as MarketplaceIcon } from './components/icons/MarketplaceIcon.vue';
 export { default as ProviderLogo } from './components/icons/ProviderLogo.vue';
 export type { WTheme, WSemanticVariant } from './components/semantic/styles';
+export { default as WThemeProvider } from './components/WThemeProvider.vue';
+export { default as WPageHeader } from './components/WPageHeader.vue';
+export { ui5Theme, themeVariables, chartPalettes, useWTheme } from './theme';
+export type { WThemeMode, WThemeColors, WThemeOverrides } from './theme';

package/dist/theme/index.d.ts

@@ -0,0 +1,40 @@
+import { ComputedRef, InjectionKey } from 'vue';
+export type WThemeMode = 'light' | 'dark';
+export interface WThemeColors {
+    canvas: string;
+    surface: string;
+    input: string;
+    raised: string;
+    popover: string;
+    border: string;
+    borderHover: string;
+    text: string;
+    muted: string;
+    dim: string;
+    accent: string;
+    onAccent: string;
+    primary: string;
+    primaryHover: string;
+    onPrimary: string;
+    secondary: string;
+    secondaryHover: string;
+    onSecondary: string;
+    secondaryShadow: string;
+    switchOn: string;
+    switchOff: string;
+    switchDisabled: string;
+    switchThumb: string;
+    focusRing: string;
+    positive: string;
+    negative: string;
+}
+export type WThemeOverrides = Partial<Record<WThemeMode, Partial<WThemeColors>>>;
+export declare const ui5Theme: Record<WThemeMode, WThemeColors>;
+export declare const chartPalettes: Record<WThemeMode, readonly string[]>;
+export declare function themeVariables(mode: WThemeMode, overrides?: Partial<WThemeColors>): Record<string, string>;
+export interface WThemeContext {
+    mode: WThemeMode;
+    variables: Record<string, string>;
+}
+export declare const themeKey: InjectionKey<ComputedRef<WThemeContext | null>>;
+export declare function useWTheme(): ComputedRef<WThemeContext | null>;