udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/esm/udp-ag-scatter-chart.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cgpvu-iV.js';
+import { v4 } from 'uuid';
+import { AgCharts, ModuleRegistry, AllCommunityModule } from 'ag-charts-community';
+import { b as buildUdpChartTheme, a as applySeriesColors } from './charts-theme-B2HoYVMf.js';
+import './theme-manager-DeVqiL0i.js';
+import '@fluentui/web-components';
+import '@fluentui/tokens';
+
+const udpAgScatterChartCss = () => `:host{display:block;position:relative;width:100%;min-width:0;min-height:0;box-sizing:border-box}.chart-mount{position:absolute;inset:0}`;
+
+let agChartsModulesRegistered = false;
+const ensureAgChartsModules = () => {
+    if (agChartsModulesRegistered)
+        return;
+    ModuleRegistry.registerModules([AllCommunityModule]);
+    agChartsModulesRegistered = true;
+};
+const sizeStyle = (value, fallback) => value == null ? fallback : typeof value === 'number' ? `${value}px` : value;
+const UdpAgScatterChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Mount-node id for the internal chart container. Auto-generated; override only when a stable id is needed (e.g. tests). */
+        this.chartId = `udp-ag-scatter-chart-${v4()}`;
+        /**
+         * Colour + visual-weight variant applied via the brand theme:
+         * `default` (balanced categorical palette for multi-category charts,
+         * the exact brand colour for a single series), `soft` (same palette
+         * lightened, for dense low-emphasis surfaces), `bold` (same palette
+         * deepened, for a hero chart), `mono` (a single brand-hue ramp for
+         * sequential / magnitude data), and `colorful` (each label hashed to a
+         * stable Fluent avatar hue, so the same label keeps its colour across
+         * charts). Per-series colours on `chartOptions` always win.
+         */
+        this.appearance = 'default';
+        /**
+         * Geometry roundness, mirroring the button/input shape tokens: `square`
+         * or `rounded`. Scatter markers are unaffected; this only shapes any
+         * bar / line / area series sharing the chart. Per-series geometry on
+         * `chartOptions` still wins.
+         */
+        this.shape = 'square';
+        /**
+         * Chrome density. `full` keeps axes, gridlines, legend and padding;
+         * `flush` strips all chrome and zeroes padding so the plot bleeds to the
+         * container edges (the KPI-card "sparkline" look). Pair with a
+         * `udp-fluent-card` `preview` slot or `bodyPadding={false}`.
+         */
+        this.chrome = 'full';
+        // Re-theme on a live light/dark switch. `theme-manager` dispatches
+        // `theme-changed` on the window after updating the brand CSS variables;
+        // reuse the prop-watch rebuild path so buildOptions() re-reads them (and the
+        // current mode via getCurrentThemeMode()).
+        this.handleThemeChanged = () => {
+            this.handleOptionsChanged();
+        };
+    }
+    handleOptionsChanged() {
+        if (!this.chart)
+            return;
+        const options = this.buildOptions();
+        if (options)
+            this.chart.update(options);
+    }
+    componentDidLoad() {
+        var _a, _b;
+        ensureAgChartsModules();
+        const container = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!container)
+            return;
+        const options = this.buildOptions(container);
+        if (!options)
+            return;
+        this.chart = AgCharts.create(options);
+        window.addEventListener('theme-changed', this.handleThemeChanged);
+    }
+    disconnectedCallback() {
+        var _a;
+        window.removeEventListener('theme-changed', this.handleThemeChanged);
+        (_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.chart = undefined;
+    }
+    buildOptions(container) {
+        var _a, _b;
+        const target = container !== null && container !== void 0 ? container : (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.chartId);
+        if (!target)
+            return null;
+        const merged = Object.assign(Object.assign({ theme: buildUdpChartTheme(this.el, {
+                appearance: this.appearance,
+                shape: this.shape,
+                chrome: this.chrome,
+            }), background: { visible: false } }, this.chartOptions), { container: target });
+        return applySeriesColors(merged, this.el, this.appearance);
+    }
+    render() {
+        return (h(Host, { key: 'c4ccf0d39f29d899a7962e8fdaf24886eeff8b57', style: {
+                width: sizeStyle(this.customWidth, '100%'),
+                height: sizeStyle(this.customHeight, '100%'),
+            } }, h("div", { key: 'f69041a8f525c3bbfc607080c6d5740543cf5e6a', id: this.chartId, class: "chart-mount" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "chartOptions": [{
+                "handleOptionsChanged": 0
+            }],
+        "appearance": [{
+                "handleOptionsChanged": 0
+            }],
+        "shape": [{
+                "handleOptionsChanged": 0
+            }],
+        "chrome": [{
+                "handleOptionsChanged": 0
+            }]
+    }; }
+};
+UdpAgScatterChart.style = udpAgScatterChartCss();
+
+export { UdpAgScatterChart as udp_ag_scatter_chart };

package/dist/esm/udp-attachment-item_2.entry.js

@@ -99,7 +99,7 @@ const UdpEmptyStateDisplay = class {
         this.imageWidth = '100px';
     }
     render() {
-        return (h("div", { key: '90ed726e2cfba61cac88fb25198bc982a5834be2', class: "container" }, this.imageSrc ? (h("img", { src: this.imageSrc, alt: "empty state", class: "image", style: { width: this.imageWidth } })) : (h("udp-icon", { iconName: this.iconName })), this.primaryText && (h("div", { key: 'f7b7d07056ba6a11b901be1b1e86a82eecb0f304', class: "text-wrapper" }, h("unity-typography", { key: '1bf84cf8cfb21aed5b9951adda0a01a787330dc9', variant: 'h6' }, this.primaryText))), this.secondaryText && (h("div", { key: 'b46c25588140b37d44534296a3379488a13190c5', class: "text-wrapper" }, h("unity-typography", { key: 'b3a88bf021c205f8d8539c016df52cd1593b3527', variant: "body", class: "secondary-text" }, this.secondaryText))), this.actionLabel && (h("div", { key: '402ec4260148201308b55d1a3f6f7b381d64d0ce', class: "action-wrapper" }, h("udp-button", { key: '64cb2f280dbf53dfa47f536f62835f77b8777778', onClick: this.actionClick, variant: "outlined", color: "secondary" }, this.actionLabel)))));
+        return (h("div", { key: 'b47c3e90f2b2a33d9b6ad909f762ffe530a8bedf', class: "container" }, this.imageSrc ? (h("img", { src: this.imageSrc, alt: "empty state", class: "image", style: { width: this.imageWidth } })) : (h("udp-icon", { iconName: this.iconName })), this.primaryText && (h("div", { key: '80c6175de2463a57bbc96e20ddf14b788317aebb', class: "text-wrapper" }, h("unity-typography", { key: '8f535deb5ebc29aaf2a8caf68c363b5b971e6c93', variant: 'h6' }, this.primaryText))), this.secondaryText && (h("div", { key: '00d2f83fc03e0c8381008cf9bcf8a977a26a5128', class: "text-wrapper" }, h("unity-typography", { key: '1669f2d729b2e77eefcace3a14b9c230e2e1bfb2', variant: "body", class: "secondary-text" }, this.secondaryText))), this.actionLabel && (h("div", { key: '857f81a6c884371a4544952da68264fe6c56bf3f', class: "action-wrapper" }, h("udp-button", { key: 'c9aa699065142a107a22416399f2d985049ba46f', onClick: this.actionClick, variant: "outlined", color: "secondary" }, this.actionLabel)))));
     }
 };
 UdpEmptyStateDisplay.style = udpEmptyStateDisplayCss();

package/dist/esm/udp-bar-chart.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, a as getElement } from './index-Cgpvu-iV.js';
+import { v4 } from 'uuid';
+
+const udpBarChartCss = () => ``;
+
+const UdpBarChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.data = undefined;
+        this.valueField = undefined;
+        this.labelField = undefined;
+        this.title = undefined;
+        this.subheader = undefined;
+        this.customCardStyle = {};
+        this.kpisPosition = 'left';
+        this.kpis = undefined;
+        this.xAxisLabel = undefined;
+        this.yAxisLabel = undefined;
+        this.hideAdornment = false;
+        this.valueFields = undefined;
+        this.stacked = false;
+        this.showBullets = false;
+        this.barWidth = undefined;
+        this.xDataType = undefined;
+        this.yDataType = undefined;
+        this.distBetweenGridLines = undefined;
+        this.hideLegend = true;
+        this.hideBorder = false;
+        this.removePadding = false;
+        this.chartId = v4();
+    }
+    render() {
+        return (h("udp-xy-chart", { key: 'd3bb0613440cc1442838f3fa36370da61f8c946c', title: this.title, subheader: this.subheader, data: this.data, chartId: this.chartId, kpis: this.kpis, customWidth: this.customWidth, customHeight: this.customHeight, customCardWidth: this.customCardWidth, customCardStyle: this.customCardStyle, kpisPosition: this.kpisPosition, hideAdornment: this.hideAdornment, labelField: this.labelField, valueField: this.valueField, showBullets: this.showBullets, xDataType: this.xDataType, yDataType: this.yDataType, hideLegend: this.hideLegend, hideBorder: this.hideBorder, removePadding: this.removePadding, chartType: 'Column', xAxisLabel: this.xAxisLabel, yAxisLabel: this.yAxisLabel }));
+    }
+    get el() { return getElement(this); }
+};
+UdpBarChart.style = udpBarChartCss();
+
+export { UdpBarChart as udp_bar_chart };

package/dist/esm/udp-calendar-base.entry.js

@@ -34,82 +34,48 @@ const UdpCalendarBase = class {
         this.firstDay = 0; // The day that each week begins. 0 = Sunday
         this.showNonCurrentDates = true; // In month view, whether dates in the previous or next month should be rendered at all.
         this.toggleViewOptions = 'dayGridDay,dayGridWeek,dayGridMonth,dayGridYear'; // The options for toggling view in the upper right corner
-        this.calendarSettings = {};
+        // ESCAPE HATCH: arbitrary FullCalendar options forwarded verbatim. Spread last so any
+        // option not yet given a dedicated @Prop can be passed through without a code change.
+        this.options = {};
     }
     componentDidLoad() {
         const calendarEl = this.el.shadowRoot.querySelector('#calendar');
-        // CREATE SETTINGS FROM PROPS
-        this.calendarSettings = {
-            height: this.height,
-            contentHeight: this.contentHeight,
-            aspectRatio: this.aspectRatio,
-            weekends: this.weekends,
-            hiddenDays: this.hiddenDays,
-            dayHeaders: this.dayHeaders,
-            dayMinWidth: this.dayMinWidth,
-            slotDuration: this.slotDuration,
-            slotLabelInterval: this.slotLabelInterval,
-            slotLabelFormat: this.slotLabelFormat,
-            slotMinTime: this.slotMinTime,
-            slotMaxTime: this.slotMaxTime,
-            scrollTime: this.scrollTime,
-            scrollTimeReset: this.scrollTimeReset,
-            firstDay: this.firstDay,
-            showNonCurrentDates: this.showNonCurrentDates,
-        };
-        // ADD BUTTONS TO ALLOW USER TO TOGGLE BETWEEN MONTH-WEEK VIEW
-        this.calendarSettings.headerToolbar = {
-            left: 'prev,next',
-            center: 'title',
-            right: this.toggleViewOptions,
-        };
-        this.calendarSettings.views = {
-            dayGridWeek: {
-                dayHeaderFormat: this.dayHeaderFormatWeekView ? this.dayHeaderFormatWeekView : { weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true, omitZeroMinute: true, meridiem: 'short' }
-            },
-            dayGridMonth: {
-                dayHeaderFormat: this.dayHeaderFormatMonthView ? this.dayHeaderFormatMonthView : { weekday: 'short' }
-            }
-        };
-        // ADD HOOKS TO SETTINGS
-        const hooks = [
-            { prop: 'dayHeaderClassNames', setting: 'dayHeaderClassNames' },
-            { prop: 'dayHeaderContent', setting: 'dayHeaderContent' },
-            { prop: 'dayHeaderDidMount', setting: 'dayHeaderDidMount' },
-            { prop: 'dayHeaderWillUnmount', setting: 'dayHeaderWillUnmount' },
-            { prop: 'dayCellClassNames', setting: 'dayCellClassNames' },
-            { prop: 'dayCellContent', setting: 'dayCellContent' },
-            { prop: 'dayCellDidMount', setting: 'dayCellDidMount' },
-            { prop: 'dayCellWillUnmount', setting: 'dayCellWillUnmount' },
-            { prop: 'slotLabelClassNames', setting: 'slotLabelClassNames' },
-            { prop: 'slotLabelContent', setting: 'slotLabelContent' },
-            { prop: 'slotLabelDidMount', setting: 'slotLabelDidMount' },
-            { prop: 'slotLabelWillUnmount', setting: 'slotLabelWillUnmount' },
-            { prop: 'slotLaneClassNames', setting: 'slotLaneClassNames' },
-            { prop: 'slotLaneContent', setting: 'slotLaneContent' },
-            { prop: 'slotLaneDidMount', setting: 'slotLaneDidMount' },
-            { prop: 'slotLaneWillUnmount', setting: 'slotLaneWillUnmount' },
-        ];
-        hooks.forEach(({ prop, setting }) => {
-            if (this[prop]) {
-                this.calendarSettings[setting] = (arg) => this[prop](arg);
-            }
-        });
-        if (this.datesSet) {
-            this.calendarSettings.datesSet = (dateInfo) => this.datesSet(dateInfo);
-        }
-        this.calendarSettings.events = this.events;
-        this.calendarSettings.eventSources = this.eventSources;
-        this.calendarSettings.eventContent = this.eventContent;
-        if (this.eventOnclick) {
-            this.calendarSettings.eventClick = (event) => this.eventOnclick(event);
-        }
         // ASSIGN SETTINGS AND CREATE CALENDAR
-        this.calendar = new Calendar(calendarEl, Object.assign({ plugins: [dayGridPlugin, interactionPlugin], initialView: this.initialView }, this.calendarSettings));
+        this.calendar = new Calendar(calendarEl, this.buildCalendarOptions());
         this.calendar.render();
         // Programatically scroll the current view to the given time. https://fullcalendar.io/docs/scrollToTime
-        if (this.scrollToTimeDuration)
-            (this.calendar.scrollToTime(this.scrollToTimeDuration));
+        if (this.scrollToTimeDuration) {
+            this.calendar.scrollToTime(this.scrollToTimeDuration);
+        }
+    }
+    buildCalendarOptions() {
+        var _a, _b;
+        const options = Object.assign(Object.assign({ plugins: [dayGridPlugin, interactionPlugin], initialView: this.initialView, initialDate: this.initialDate, height: this.height, contentHeight: this.contentHeight, aspectRatio: this.aspectRatio, weekends: this.weekends, hiddenDays: this.hiddenDays, dayHeaders: this.dayHeaders, dayMinWidth: this.dayMinWidth, slotDuration: this.slotDuration, slotLabelInterval: this.slotLabelInterval, slotLabelFormat: this.slotLabelFormat, slotMinTime: this.slotMinTime, slotMaxTime: this.slotMaxTime, scrollTime: this.scrollTime, scrollTimeReset: this.scrollTimeReset, firstDay: this.firstDay, showNonCurrentDates: this.showNonCurrentDates,
+            // BUTTONS TO ALLOW USER TO TOGGLE BETWEEN DAY/WEEK/MONTH/YEAR VIEW
+            headerToolbar: {
+                left: 'prev,next',
+                center: 'title',
+                right: this.toggleViewOptions,
+            }, views: {
+                dayGridWeek: {
+                    dayHeaderFormat: (_a = this.dayHeaderFormatWeekView) !== null && _a !== void 0 ? _a : { weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true, omitZeroMinute: true, meridiem: 'short' },
+                },
+                dayGridMonth: {
+                    dayHeaderFormat: (_b = this.dayHeaderFormatMonthView) !== null && _b !== void 0 ? _b : { weekday: 'short' },
+                },
+            }, events: this.events, eventSources: this.eventSources, eventContent: this.eventContent }, (this.datesSet ? { datesSet: (dateInfo) => this.datesSet(dateInfo) } : {})), (this.eventOnclick ? { eventClick: (event) => this.eventOnclick(event) } : {}));
+        // ADD RENDER HOOKS
+        const dynamic = options;
+        UdpCalendarBase.RENDER_HOOKS.forEach((hook) => {
+            if (this[hook]) {
+                dynamic[hook] = (arg) => this[hook](arg);
+            }
+        });
+        // GENERIC FORWARDING: let callers pass any other FullCalendar option through.
+        Object.assign(options, this.options);
+        // Drop undefined values so we never override FullCalendar's own defaults.
+        Object.keys(dynamic).forEach((key) => dynamic[key] === undefined && delete dynamic[key]);
+        return options;
     }
     eventsChanged(newValue) {
         if (this.calendar) {
@@ -125,7 +91,7 @@ const UdpCalendarBase = class {
     render() {
         const calendarStyle = Object.assign({}, (this.width !== null ? { width: this.width + 'px' } : {}) // Conditionally add width property
         );
-        return (h("div", { key: '54c88b068da1173e577a30a6b70f4893d34a1952', id: 'calendar', style: calendarStyle }));
+        return (h("div", { key: '1907e4392b4a52317b74745cda1fc137c1e471cc', id: 'calendar', style: calendarStyle }));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -134,6 +100,13 @@ const UdpCalendarBase = class {
             }]
     }; }
 };
+// Render hooks are only forwarded when a handler was actually provided.
+UdpCalendarBase.RENDER_HOOKS = [
+    'dayHeaderClassNames', 'dayHeaderContent', 'dayHeaderDidMount', 'dayHeaderWillUnmount',
+    'dayCellClassNames', 'dayCellContent', 'dayCellDidMount', 'dayCellWillUnmount',
+    'slotLabelClassNames', 'slotLabelContent', 'slotLabelDidMount', 'slotLabelWillUnmount',
+    'slotLaneClassNames', 'slotLaneContent', 'slotLaneDidMount', 'slotLaneWillUnmount',
+];
 UdpCalendarBase.style = udpCalendarBaseCss();
 
 export { UdpCalendarBase as udp_calendar_base };

package/dist/esm/udp-calendar-day.entry.js

@@ -7,10 +7,8 @@ const UdpCalendarDay = class {
         registerInstance(this, hostRef);
         this.props = {};
     }
-    componentWillLoad() {
-    }
     render() {
-        return (h("udp-calendar-base", Object.assign({ key: '59be366d12c629036900827f17ccb41f32e3b517', initialView: 'dayGridDay' }, this.props)));
+        return (h("udp-calendar-base", Object.assign({ key: 'bc4fac28f22be76210ada27a7a165346fc205c30', initialView: 'dayGridDay' }, this.props)));
     }
 };
 UdpCalendarDay.style = udpCalendarDayCss();

package/dist/esm/udp-calendar-month.entry.js

@@ -7,10 +7,8 @@ const UdpCalendarMonth = class {
         registerInstance(this, hostRef);
         this.props = {};
     }
-    componentWillLoad() {
-    }
     render() {
-        return (h("udp-calendar-base", Object.assign({ key: 'e996ecdd3b2989ac0b76e9c7f2a013090e2f9b3d', initialView: 'dayGridMonth' }, this.props)));
+        return (h("udp-calendar-base", Object.assign({ key: 'f8600795230fb42b29070324673dea0b463da21a', initialView: 'dayGridMonth' }, this.props)));
     }
 };
 UdpCalendarMonth.style = udpCalendarMonthCss();

package/dist/esm/udp-calendar-week.entry.js

@@ -7,10 +7,8 @@ const UdpCalendarWeek = class {
         registerInstance(this, hostRef);
         this.props = {};
     }
-    componentWillLoad() {
-    }
     render() {
-        return (h("udp-calendar-base", Object.assign({ key: '853f779edb5f0db6ea247adf65628d9be5e6be79', initialView: 'dayGridWeek' }, this.props)));
+        return (h("udp-calendar-base", Object.assign({ key: '76f64d90052d07dc7f913b8f2540dbcbc7b142ea', initialView: 'dayGridWeek' }, this.props)));
     }
 };
 UdpCalendarWeek.style = udpCalendarWeekCss();

package/dist/esm/udp-calendar-year.entry.js

@@ -7,10 +7,8 @@ const UdpCalendarYear = class {
         registerInstance(this, hostRef);
         this.props = {};
     }
-    componentWillLoad() {
-    }
     render() {
-        return (h("udp-calendar-base", Object.assign({ key: '1a3a3f243480dc0b8edb378706c4992e4739d85f', initialView: 'dayGridYear' }, this.props)));
+        return (h("udp-calendar-base", Object.assign({ key: 'c6f3dce188614b66fbccf5c2443347306fbed08f', initialView: 'dayGridYear' }, this.props)));
     }
 };
 UdpCalendarYear.style = udpCalendarYearCss();

package/dist/esm/udp-card-action-area.entry.js

@@ -7,7 +7,7 @@ const UdpCardActionArea = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '4117146e6d479958341d03e1fd30d4f6d929272d' }, h("button", { key: '7eb9705825a46a23a554c5cff0265faef80f7c56', class: "button" }, h("slot", { key: '4d9cc53b3737747e2370a9c9eea67eb8896cadde' }))));
+        return (h(Host, { key: 'eeb455776017155226717fe117268a85e3553642' }, h("button", { key: '1ac1160639ecc7ee943cb9ed67e057f7e9d007d4', class: "button" }, h("slot", { key: 'ebbfe339a097a75249739ffd34efd3ed9fcbc68a' }))));
     }
 };
 UdpCardActionArea.style = udpCardActionAreaCss();

package/dist/esm/udp-card_6.entry.js

@@ -30,11 +30,11 @@ const UdpCard = class {
         const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);
         const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;
         // const hasDefaultContent = !!this.el.querySelector(':not([slot])');
-        const mainContent = (h(Fragment, { key: '2aaf79210cd6e0321debcfd67a206aba19e973bf' }, renderMedia ? h("udp-card-media", { image: this.mediaImage, title: this.mediaTitle }) : h("slot", { name: "media" }), renderHeader ? (h("udp-card-header", { cardTitle: this.cardTitle, subheader: this.subheader, avatar: this.avatar, action: this.headerAction, disableTypography: this.disableHeaderTypography, onTitleClick: this.onTitleClick })) : (h("slot", { name: "header" })), h("udp-card-content", { key: '99979132895b96ce2dbae96484e20441fb7bbf8a', disableGutter: this.disableContentGutter, disablePadding: this.disableContentPadding }, h("slot", { key: '83a346fcc6519945450767009d482f0b720a0bfd' }))));
-        return (h(Host, { key: 'b1c820d25e91bf7d20262065119f0fd0182520cc', class: {
+        const mainContent = (h(Fragment, { key: '8b5693084f1a4c6d3ff57b60984951e86f5b8724' }, renderMedia ? h("udp-card-media", { image: this.mediaImage, title: this.mediaTitle }) : h("slot", { name: "media" }), renderHeader ? (h("udp-card-header", { cardTitle: this.cardTitle, subheader: this.subheader, avatar: this.avatar, action: this.headerAction, disableTypography: this.disableHeaderTypography, onTitleClick: this.onTitleClick })) : (h("slot", { name: "header" })), h("udp-card-content", { key: '4a5b4fe9f0ee3d96ab9ee4134d778fc03aef60f6', disableGutter: this.disableContentGutter, disablePadding: this.disableContentPadding }, h("slot", { key: '1320993f4317872537f58fa6c9340abfc8478b4d' }))));
+        return (h(Host, { key: '4b7b53a17990e3165d25016f42434916a5a948b6', class: {
                 [this.variant]: true, // This adds 'elevated' or 'outlined'
                 'elevation-1': this.variant === 'elevated', // This adds a default shadow
-            } }, this.adornmentStatus && h("udp-adornment", { key: 'fd1f60bc329b10d9462dcbc41fdd069c48b102d4', status: this.adornmentStatus }), mainContent, this.actions && h("udp-card-actions", { key: 'b827b94514b6b49b4df104587dc4294de40d6bda' }, this.actions)));
+            } }, this.adornmentStatus && h("udp-adornment", { key: 'dd120c144c85bc4f879ea04469c2560d52d84346', status: this.adornmentStatus }), mainContent, this.actions && h("udp-card-actions", { key: 'c3db5b9b62899deaa88d4889523c3ee530a7c913' }, this.actions)));
     }
     get el() { return getElement(this); }
 };
@@ -51,7 +51,7 @@ const UdpCardActions = class {
         this.align = 'end';
     }
     render() {
-        return (h(Host, { key: '0755e2d60962c46a3f8c76ff9ed13908b2fe793c', class: this.align }, h("slot", { key: '14f0f0f17ec943d50084fa2a06a07bfb4c7253b3' })));
+        return (h(Host, { key: '54581a1632dec1039b0b0d86156facf0cc0f93dd', class: this.align }, h("slot", { key: 'd535f3f445b3d9891b44131d42077437555a4ceb' })));
     }
 };
 UdpCardActions.style = udpCardActionsCss();
@@ -65,7 +65,7 @@ const UdpCardContent = class {
         this.disablePadding = false;
     }
     render() {
-        return (h(Host, { key: '134eda3ad409fe3e2738e6ac5a72c60fccbda352', class: { 'disable-gutter': this.disableGutter, 'disable-padding': this.disablePadding } }, h("slot", { key: 'cda1545c6accb1e6976f153561d9a864c88a2716' })));
+        return (h(Host, { key: '7ca1c82a1f87549c1ad7a706b2f01b226067db74', class: { 'disable-gutter': this.disableGutter, 'disable-padding': this.disablePadding } }, h("slot", { key: 'ad7cba322f564a1e229103c875f74469ac64c77b' })));
     }
 };
 UdpCardContent.style = udpCardContentCss();
@@ -94,7 +94,7 @@ const UdpCardHeader = class {
         const titleContent = this.disableTypography ? this.cardTitle : h("unity-typography", { variant: "h6" }, this.cardTitle);
         const wrappedTitleContent = this.titleHref || this.titleClick ? (h("udp-link", { href: this.titleHref, target: this.titleTarget, onLinkClick: this.handleTitleClick }, titleContent)) : (titleContent);
         const subheaderContent = this.disableTypography ? (this.subheader) : typeof this.subheader === 'string' ? (h("unity-typography", { variant: "body1", color: "textSecondary" }, this.subheader)) : (this.subheader);
-        return (h(Host, { key: 'a81aa1f48425aeed94c7e81409ffe3a5baa44bf3' }, this.avatar && h("div", { key: '88890dbe82861b44bacaa37b74376047791cf743', class: "avatar" }, this.avatar), h("div", { key: '16f1745de63a6c06d0742e34f588c7f00fffdb0e', class: "content" }, h("slot", { key: '42f1a626a62434428a4b3649791ae181a3fbc98f', name: "title" }, this.cardTitle && wrappedTitleContent), h("slot", { key: '61a001f49c2a2e0437573ff57a270260cf7c7895', name: "subheader" }, this.subheader && subheaderContent), h("slot", { key: '6a35fe50cf609a4117d8a8799800c4b200739c02' })), this.action && h("div", { key: 'a630a4c23b1fa2657e7b6c304aebc732032ab949', class: "action" }, this.action), h("slot", { key: 'a2494c61edb9b31840423f03bf8998bcc67e70a2', name: "action" })));
+        return (h(Host, { key: 'a6f80b30650b9851066e7e0d0128db236647c11d' }, this.avatar && h("div", { key: 'e586cc618cf8e3fe69fcea09bd966ef681979218', class: "avatar" }, this.avatar), h("div", { key: 'b9d47799f17b3fb8fcf0d903e372ef5b23114c5d', class: "content" }, h("slot", { key: '6f58798b9c4472c90fb24f8c90e0699be3e960de', name: "title" }, this.cardTitle && wrappedTitleContent), h("slot", { key: 'd4d269bdcc0d47b2c08fd2a08a99fe75a1c05926', name: "subheader" }, this.subheader && subheaderContent), h("slot", { key: 'cb9fdfbde687a5231c7f792d007bf465dea0967b' })), this.action && h("div", { key: 'e19fbd1226d846863bd226db8373c14916b6d5bc', class: "action" }, this.action), h("slot", { key: '4cea73ae8a4440893b84e8c4f19667c94ceef145', name: "action" })));
     }
 };
 UdpCardHeader.style = udpCardHeaderCss();
@@ -106,7 +106,7 @@ const UdpCardMedia = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '5d3839dc234c9dcd8760ff8bbc6c15900b40cc5d', role: "img", style: { backgroundImage: this.image ? `url(${this.image})` : undefined }, "aria-label": this.title }, h("slot", { key: '164ea64abf34419ac839055abc7fd88db7157e3a' })));
+        return (h(Host, { key: 'a3fe72534a756762067921aa446ea959b8be3c8c', role: "img", style: { backgroundImage: this.image ? `url(${this.image})` : undefined }, "aria-label": this.title }, h("slot", { key: '48e382d9020b4aba88c327bcb94e3895677c88ba' })));
     }
 };
 UdpCardMedia.style = udpCardMediaCss();

package/dist/esm/udp-charts-example.entry.js

@@ -1,11 +1,24 @@
 import { r as registerInstance, h, H as Host } from './index-Cgpvu-iV.js';
 
+const mockBarOptions = {
+    data: [
+        { country: 'USA', value: 1840 },
+        { country: 'China', value: 1620 },
+        { country: 'Japan', value: 920 },
+        { country: 'Germany', value: 780 },
+    ],
+    series: [{ type: 'bar', xKey: 'country', yKey: 'value' }],
+    axes: {
+        x: { type: 'category', position: 'bottom' },
+        y: { type: 'number', position: 'left' },
+    },
+};
 const UdpChartsExample = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '4324f759db05c95ade1615e6a55ab42876f730e0', style: { display: 'flex', flexWrap: 'wrap' } }, h("udp-donut-chart", { key: '9323d139a7a84f77e22ed2b0cc17a2f8ab6c5e62', kpisPosition: 'top' }), h("udp-distribution-chart", { key: '4a495563f91ee2610e606e6eef5ba50cd445b899' }), h("udp-bar-chart", { key: '126fc24bbbb32a43ec7ff440d3dce66f9b130b7e' }), h("udp-line-chart", { key: '4279ee5b883e948d7cbdd726d5f82c672d71f3fa' })));
+        return (h(Host, { key: '490255893acf9aae83ced8086c1580dc5c1a6421', style: { display: 'flex', flexWrap: 'wrap' } }, h("udp-donut-chart", { key: 'd0ab6b3088c65a9ee3e0223a44353ec47e8b3671', kpisPosition: 'top' }), h("udp-distribution-chart", { key: 'f03f7405bca21d4a1c647e5a3ce31c91419064c9' }), h("udp-ag-bar-chart", { key: 'e0004e52a0c9d57a814bc071bd8ed1c277ae6fcf', chartOptions: mockBarOptions }), h("udp-line-chart", { key: '6e8f3f7a5e860feca09aa12d0fa0e8b098913acf' })));
     }
 };
 

package/dist/esm/udp-container-query-grid-item.entry.js

@@ -18,7 +18,7 @@ const UdpContainerQueryGridItem = class {
             .join('\n');
     }
     render() {
-        return (h(Host, { key: '5cb4a4d1b0746ea467679ba496fadc4b11779754' }, h("style", { key: '871ec8c01b3a21f87a48ab15a2951635ef73b78a' }, this.getSpanStyles()), h("slot", { key: '7ff658d4da3204702e68c96f6112d8ff80f07c13' })));
+        return (h(Host, { key: '4e07bdb293b068bdb9d05dca6532343957ad437a' }, h("style", { key: '0a6e9517626e40c23b40edfd45d6f9f70ad96bd8' }, this.getSpanStyles()), h("slot", { key: '3143e751498cd1ce053a10ff2439fa2335637b90' })));
     }
 };
 UdpContainerQueryGridItem.style = udpContainerQueryGridItemCss();

package/dist/esm/udp-container-query-grid.entry.js

@@ -40,7 +40,7 @@ const UdpContainerQueryGrid = class {
                 gap: resolveGap(gapValue),
             }));
         });
-        return (h(Host, { key: '844c48c06b23ce7b87cb577974d1df9942d72493' }, h("udp-container-query", { key: 'c40e0b6254fdd158b93c5bfe72cde133270e6d9c', queries: queries }, h("div", { key: '0a8f0c8c5a8ac4a1d89aa36a19d20f2a5b8eb23b', class: "grid-container" }, h("slot", { key: '2fc3a276f0a5ae16ba3ab7263b14b5719195ba5e' })))));
+        return (h(Host, { key: '79d731f38375b0e382ac7634770b2ae1ab0d7078' }, h("udp-container-query", { key: 'a5066884b08ce9f8a0b62e49436d85d4fee27173', queries: queries }, h("div", { key: '2853db90992ab825ac7f605ca3180e4de4761dbf', class: "grid-container" }, h("slot", { key: '93c202ef4d3b8f5190d05de56d4e3233b5e0521f' })))));
     }
 };
 UdpContainerQueryGrid.style = udpContainerQueryGridCss();

package/dist/esm/udp-container-query.entry.js

@@ -25,9 +25,9 @@ const UdpContainerQuery = class {
         return styleRules;
     }
     render() {
-        return (h(Host, { key: 'c7ada38fd8aea9595f34efe1810d1b7d77fe90d2', class: {
+        return (h(Host, { key: '8488cdd4ea26bb03accf4d3ecd43c3acf062be44', class: {
                 [this.customClass]: !!this.customClass,
-            } }, h("style", { key: 'ff3ea9ab44f75ed1f2a7286b86c8659277d85689' }, this.getContainerQueryStyle()), h("slot", { key: '5a5e683855caa41142dbb9bd7214179b920db314' })));
+            } }, h("style", { key: '109b303072f6c3868fc35bc97389a42145b8e131' }, this.getContainerQueryStyle()), h("slot", { key: '387a64ae9d981524b44002b92745fb3bea99557c' })));
     }
 };
 UdpContainerQuery.style = udpContainerQueryCss();

package/dist/esm/udp-container.entry.js

@@ -19,12 +19,12 @@ const UdpContainer = class {
         this.padding = true;
     }
     render() {
-        return (h("div", { key: '07682f1ad543c759d110e3684007c2d010f8226a', class: {
+        return (h("div", { key: '8d27d811c4aa8a2fa0671bf4730b2aae26cc4fb0', class: {
                 'udp-container': true,
                 'udp-container--fluid': this.fluid,
                 'udp-container--padded': this.padding,
                 [`udp-container--${this.maxWidth}`]: true,
-            } }, h("slot", { key: 'ed106a2654c8e5d8c885d99dcc04987a557a995f' })));
+            } }, h("slot", { key: 'faad8a6bcf220fcbf5958578fabfa2eaef7c7ab0' })));
     }
 };
 UdpContainer.style = udpContainerCss();

package/dist/esm/udp-dynamic-container-with-menu.entry.js

@@ -119,7 +119,7 @@ const DynamicContainerWithMenu = class {
         this.udpChipClicked.emit(chipText);
     }
     render() {
-        return (h("div", { key: 'c9dd6101563a70e3f02180fb24b67e861e9d2f24', class: "container" }, h("div", { key: '161deb2e2a15badcd262be86b1b72c8ccfa61542', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: 'be567a029a7613a2c5bfc2e3ed2760bb1263ac27', class: "overflow" }, h("udp-pop-over", { key: '33dd43689756c36b09a3c92f7d0740a6a7274890', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: 'f8cfe64186c045897dee641ea320870a70dc7b14', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
+        return (h("div", { key: 'd564c0a886d6f6b02c1ab4611a17067057021ded', class: "container" }, h("div", { key: '7bce725d034a1ab47e4af5304c0bb1bc8672b3d6', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: '3edf0874a248dd35f6c7d2266aa24cc7b9b2fb67', class: "overflow" }, h("udp-pop-over", { key: 'a8bc2e954746aa89bdcceee623412a8d9d55abc4', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: '8bb01e6a8256754fcbc5c01d2d8179467016729a', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/udp-dynamic-form.entry.js

@@ -250,7 +250,7 @@ const UdpDynamicForm = class {
         });
     }
     render() {
-        return h("div", { key: '602a7d2fa0dca2057b50db6adbff69846e381fe8', class: "form-root" }, this.renderFormFields());
+        return h("div", { key: '9b655a0b31d3bdee12da0bce92549a43c849ec64', class: "form-root" }, this.renderFormFields());
     }
     get el() { return getElement(this); }
 };

package/dist/esm/udp-fluent-file-input.entry.js

@@ -507,21 +507,21 @@ const UdpFluentFileInput = class {
         const hasFiles = this.items.length > 0;
         const limitReached = this.maxFiles != null && this.maxFiles !== 1 && this.items.length >= this.maxFiles;
         const showDropZone = !this.readonly && !limitReached;
-        return (h(Host, { key: '72e0adf855126be24a828e5d196e2d8917137b3b', class: {
+        return (h(Host, { key: 'f354dcacff6ea8f24686dfe5930eea1e78ae4d40', class: {
                 'has-error': hasError,
                 [`view-${this.view}`]: true,
                 [`appearance-${this.appearance}`]: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("fluent-field", { key: '3defd0f86d964201f8470bc6ef69c62bce6388e4', class: { 'no-message': noMessage } }, h("div", { key: '4e8f09739d8db8ad756a049838594229e812460a', slot: "input", class: "root" }, this.label && (h("fluent-label", { key: 'b12d4baf70aeeb7530597db4f663b8c8a1b0fd8c', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("input", { key: '6b35002df8db2a1f653f5aac63d3b42ade9a877e', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange,
+            } }, h("fluent-field", { key: '590e90d7804164a55e975e42d1160d1eb09499d1', class: { 'no-message': noMessage } }, h("div", { key: 'fa2ab44d483a584739ed51c256f250a242766996', slot: "input", class: "root" }, this.label && (h("fluent-label", { key: 'bd9496e2b72d80e9c05cb7549de9e2316d61666f', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("input", { key: '975aeed3eb16151005f0619c2746a6ca93c64551', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange,
             // Containers like fluent-drawer's <dialog> call preventDefault on
             // every bubbled click. The synthetic click from .click() must not
             // reach them, or the canceled flag suppresses the file picker.
-            onClick: (e) => e.stopPropagation() }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), h("udp-text", { key: 'b382f1802365a7330fa284eea8c26c388010ab2a', slot: "message", variant: "caption1", class: {
+            onClick: (e) => e.stopPropagation() }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), h("udp-text", { key: '2297fe8bb95d794aed9f13fdbac668507d8a21fb', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 'include-error-padding': this.includeErrorPadding,
-            } }, message)), this.view === 'gallery' && (h("dialog", { key: 'f50c537ae4a75d6d9e2b56dd8e4cfc41fca05ab0', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
+            } }, message)), this.view === 'gallery' && (h("dialog", { key: 'de9555dc4c4f2348b664a48806f4f8b677a9bf2d', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
     }
     /**
      * Single dropzone container. Layout depends on state:

package/dist/esm/udp-fluent-image.entry.js

@@ -18,7 +18,7 @@ const UdpFluentImage = class {
         this.shadow = false;
     }
     render() {
-        return (h(Host, { key: 'e15162e6a2db7cd2adf51c8aaca8ef228125d381' }, h("fluent-image", { key: 'f6023b888997ccee55e0aa822017b38548ba4f8f', block: this.block, bordered: this.bordered, shadow: this.shadow, fit: this.fit, shape: this.shape }, h("slot", { key: 'ab38d953d04f53cef35ee4edea016c8b0a7ed17d' }))));
+        return (h(Host, { key: 'a9b75daa5afbc90ec287f644d1bb271da9891fb3' }, h("fluent-image", { key: '327669128e7913a1da5b098c479521a05c7c801a', block: this.block, bordered: this.bordered, shadow: this.shadow, fit: this.fit, shape: this.shape }, h("slot", { key: '6de9e3c57e22656480c064e3bb8054513f210b81' }))));
     }
 };
 

package/dist/esm/udp-fluent-inline-edit.entry.js

@@ -23,7 +23,7 @@ const UdpFluentInlineEdit = class {
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '879abc38ee965578e4952a9dd8497bd389e3a447' }, h("input", { key: 'ebf0bf56de88206d6a977461f1109d79e10c31da', ref: el => (this.inputEl = el), class: "inline-edit-input", type: "text", value: this.value, placeholder: this.placeholder, readOnly: this.readonly, maxlength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit() })));
+        return (h(Host, { key: '08168e950fcd3afde547e7fcad5c3fe6154b4a85' }, h("input", { key: 'a3c48452bd044b0ba762d2d20e3ce7ffcd0925a4', ref: el => (this.inputEl = el), class: "inline-edit-input", type: "text", value: this.value, placeholder: this.placeholder, readOnly: this.readonly, maxlength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.handleInput, onBlur: () => this.inputBlur.emit(), onFocus: () => this.inputFocus.emit() })));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/udp-fluent-link.entry.js

@@ -10,7 +10,7 @@ const UdpFluentLink = class {
         this.inline = false;
     }
     render() {
-        return (h(Host, { key: '8e4e353fedc29c8959c73e9d98fd953129876a75' }, h("fluent-link", { key: '363d4d097735d66e76428c976fb367e1013bd359', inline: this.inline, href: this.href, target: this.target, download: this.download, hreflang: this.hreflang, ping: this.ping, referrerpolicy: this.referrerpolicy, rel: this.rel, type: this.type }, h("slot", { key: '934841452c3a0dc7b04073f72c3e5dda0d0d98b3', name: "start", slot: "start" }), h("slot", { key: '0a8509f81e4c12fdfdfce33930079bdbdd82d70f' }), h("slot", { key: 'a8adc130c3374dd1aae628d79c7ea2a1c18c7fc4', name: "end", slot: "end" }))));
+        return (h(Host, { key: '09291fcdf82c0aeb386323b711198f8e0a3982eb' }, h("fluent-link", { key: '2d9e44fb8b66111f0e08e6a344f744acbe680aaf', inline: this.inline, href: this.href, target: this.target, download: this.download, hreflang: this.hreflang, ping: this.ping, referrerpolicy: this.referrerpolicy, rel: this.rel, type: this.type }, h("slot", { key: 'ace22a91cfedd35cd3861928433ce987d3f098dc', name: "start", slot: "start" }), h("slot", { key: 'b1feb5881053d751c03d63e9388a09e87ab63b2f' }), h("slot", { key: 'ec3a5aba47dcc703c327000de5eacd59d25096fb', name: "end", slot: "end" }))));
     }
 };