@wpic/ui 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.6.0 — 2026-09-08
+
+- Add WTrendBadge and optional below-value trends in WStatCard, with green/rose tinted pills, directional markers and keyboard-accessible comparison tooltips.
+- Add customizable trendPositive/trendNegative colors, independent of the brand accent.
+- Apply shared UI5 tokens to segmented controls, modals and tooltips, including nested teleported overlays and explicit theme overrides.
+- Retain existing metric change props and unthemed component presentation; WTable structure is unchanged.
+
+
+## 0.5.3 — 2026-09-08
+
+- Add compact themed metric cards with the same surface, radius and ring.
+- Add optional label-level variation and comparison tooltip through changePosition and changeTitle; existing value-level variation remains the default.
+
+
 ## 0.5.2 — 2026-09-08
 
 - Fix the default date-range size to md so the shared theme applies the same 36px height as other fields and buttons. Explicit small and large sizes remain supported.

package/COMPONENTS.md

@@ -682,3 +682,13 @@ delay?: number
 ### UI5 metric cards (0.5.1)
 
 Inside WThemeProvider, WStatCard uses the approved UI5 composition. Use `featured` for an accent label band, `change` for a variation beside the value, and `changeTone="negative"` for a negative variation. Values retain the normal text color unless `color` is explicitly provided. Existing `sub`, `unit` and color props are preserved.
+
+For a shorter metric card, use `compact`. Use `changePosition="label"` to align the variation with the label and `changeTitle` for the previous-value tooltip. Both sizes share their card surface and ring.
+
+### Trend badges and overlay theming (0.6.0)
+
+`WTrendBadge` accepts `value` (percentage or null), `inverse` (lower is favorable) and `description` (comparison tooltip). Direction follows the value; color follows favorable/unfavorable meaning. Zero and missing values are neutral.
+
+`WStatCard` accepts `trend`, `trendInverse`, `trendLabel`, `trendTitle` to display this badge beneath the value. Existing `change`/`changePosition` props still work.
+
+`trendPositive` and `trendNegative` are optional color overrides in WThemeProvider. WModal, WTooltip and WSegmentedControl now follow the same theme. Teleported overlays preserve explicit and custom themes.

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

@@ -1,4 +1,11 @@
 type __VLS_Props = {
+    trend?: number | null;
+    trendInverse?: boolean;
+    trendLabel?: string;
+    trendTitle?: string;
+    compact?: boolean;
+    changePosition?: 'value' | 'label';
+    changeTitle?: string;
     featured?: boolean;
     change?: string;
     changeTone?: 'positive' | 'negative' | 'neutral';

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    value?: number | null;
+    inverse?: boolean;
+    description?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/index.d.ts

@@ -85,3 +85,4 @@ 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';
+export { default as WTrendBadge } from './components/WTrendBadge.vue';

package/dist/theme/index.d.ts

@@ -24,6 +24,8 @@ export interface WThemeColors {
     switchOff: string;
     switchDisabled: string;
     switchThumb: string;
+    trendPositive: string;
+    trendNegative: string;
     focusRing: string;
     positive: string;
     negative: string;