@paperless/core 2.22.0-alpha.24 → 2.22.0-alpha.25

package/dist/collection/components/molecules/calendar/calendar.component.js

@@ -1,11 +1,11 @@
+/* eslint-disable import/no-duplicates */
 import { h, } from "@stencil/core";
 import { cva } from "class-variance-authority";
-import { addDays, addMonths, addYears, endOfMonth, format, getDay, getDaysInMonth, getYear, isAfter, isBefore, isSameDay, isSameMonth, isSameYear, isValid, isWeekend, setDate, setMonth, setYear, startOfDay, startOfMonth, } from "date-fns";
-import { nl, enUS } from "date-fns/locale";
-import { cn } from "../../../utils/cn";
-import { state } from "../../../state";
+import { addDays, addMonths, addYears, endOfMonth, format, getDay, getDaysInMonth, getYear, isAfter, isBefore, isSameDay, isSameMonth, isSameYear, isValid, isWeekend, setDate, setMonth, setYear, startOfDay, startOfMonth, subYears, } from "date-fns";
+import { enUS, nl } from "date-fns/locale";
 import { ThemedHost } from "../../../internal/themed-host.component";
-import { subYears } from "date-fns";
+import { state } from "../../../state";
+import { cn } from "../../../utils/cn";
 const calendar = cva(['w-[17.5rem] flex flex-col gap-4'], {
     variants: {
         variant: {
@@ -89,7 +89,7 @@ export class Calendar {
     _maxDate;
     _disabledDates = [];
     _enableToday = true;
-    _weekDays = Array.from(Array(7).keys());
+    _weekDays = [...Array.from({ length: 7 }).keys()];
     _yearItemsRef;
     componentWillLoad() {
         if (this.disabledDates) {
@@ -187,7 +187,7 @@ export class Calendar {
         }
     }
     render() {
-        return (h(ThemedHost, { key: '4925bab37200125bfd80d9ec100d41cdf9362543' }, h("div", { key: 'a682e633885b7b9078af95a948baee0f54353f00', class: calendar({ variant: this.variant }) }, this._getView())));
+        return (h(ThemedHost, { key: 'cb86d89f72df18561c48f1e3f6190e145b82a9f7' }, h("div", { key: '1f3db7e6503b1a3591b0be7877d0e912fe5c4ac2', class: calendar({ variant: this.variant }) }, this._getView())));
     }
     _checkTodayButton() {
         if (this._maxDate && isAfter(this._today, this._maxDate)) {
@@ -220,14 +220,12 @@ export class Calendar {
         const daysInMonth = this._generateDaysInMonth();
         return (h("div", { class: view({ view: 'day' }) }, this._getHeader('day'), h("div", { class: 'grid grid-cols-7 justify-between gap-1' }, this._weekDays.map(weekday => (h("span", { class: 'w-8 text-center text-xs text-storm-200' }, format(addDays(new Date(2022, 7, 1), weekday), state.locale === 'nl' ? 'EEEEEE' : 'eee', {
             locale: state.locale === 'nl' ? nl : enUS,
-        })))), daysInMonth.map(day => {
-            return day.active ? (h("p-button", { variant: 'primary', tabIndex: -1, class: cn('w-8', `col-start-${day.offset}`), onClick: () => this._setValue(day.date) }, day.day)) : (h("time", { class: cn('normal flex items-center justify-center rounded-lg', 'h-8 w-8 text-sm font-semibold', 'text-storm-300', 'dark:bg-white/15', {
-                    'cursor-pointer hover:bg-white-600 hover:text-storm-500 dark:text-white dark:hover:bg-hurricane-300 dark:hover:text-white': !day.disabled,
-                    'dark:text-hurricane-200': day.disabled,
-                }, `col-start-${day.offset}`, { 'cursor-not-allowed opacity-60': day.disabled }, {
-                    'border border-solid border-off-white-700 bg-off-white-300 text-storm-500 dark:border-none dark:bg-hurricane-200 dark:text-white': !day.disabled && isSameDay(day.date, new Date()),
-                }), onClick: () => this._setValue(day.date) }, day.day));
-        }))));
+        })))), daysInMonth.map(day => day.active ? (h("p-button", { variant: 'primary', tabIndex: -1, class: cn('w-8', `col-start-${day.offset}`), onClick: () => this._setValue(day.date) }, day.day)) : (h("time", { class: cn('normal flex items-center justify-center rounded-lg', 'h-8 w-8 text-sm font-semibold', 'text-storm-300', 'dark:bg-white/15', {
+                'cursor-pointer hover:bg-white-600 hover:text-storm-500 dark:text-white dark:hover:bg-hurricane-300 dark:hover:text-white': !day.disabled,
+                'dark:text-hurricane-200': day.disabled,
+            }, `col-start-${day.offset}`, { 'cursor-not-allowed opacity-60': day.disabled }, {
+                'border border-solid border-off-white-700 bg-off-white-300 text-storm-500 dark:border-none dark:bg-hurricane-200 dark:text-white': !day.disabled && isSameDay(day.date, new Date()),
+            }), onClick: () => this._setValue(day.date) }, day.day))))));
     }
     _getMonthView() {
         const months = this._generateMonths();
@@ -314,7 +312,8 @@ export class Calendar {
         this.valueChange.emit(value);
     }
     _generateDaysInMonth() {
-        const days = Array.from(Array(getDaysInMonth(this._viewDate)).keys());
+        // eslint-disable-next-line unicorn/no-new-array
+        const days = [...new Array(getDaysInMonth(this._viewDate)).keys()];
         return days.map(day => {
             day = day + 1;
             const date = startOfDay(setDate(this._viewDate, day));
@@ -333,11 +332,11 @@ export class Calendar {
         return ((isBefore(day, this._minDate) && !isSameDay(day, this._maxDate)) ||
             (isAfter(day, this._maxDate) && !isSameDay(day, this._maxDate)) ||
             ((getDay(day) === 0 || getDay(day) === 6) && this.disableWeekends) ||
-            this._disabledDates.findIndex(date => isSameDay(date, day)) >= 0);
+            this._disabledDates.some(date => isSameDay(date, day)));
     }
     _generateMonths() {
         const year = getYear(this._viewDate);
-        const months = Array.from(Array(12).keys());
+        const months = [...Array.from({ length: 12 }).keys()];
         return months.map(month => {
             const date = new Date(year, month, 1);
             return {
@@ -352,7 +351,8 @@ export class Calendar {
     _generateYears() {
         const maxYear = getYear(this._maxDate) + 1;
         const minYear = getYear(this._minDate);
-        return Array.from(Array(maxYear - minYear).keys()).map(index => {
+        // eslint-disable-next-line unicorn/no-new-array
+        return [...new Array(maxYear - minYear).keys()].map(index => {
             const year = minYear + index;
             return {
                 year,

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -47,9 +47,9 @@ export class ContentSlider {
         }
     }
     render() {
-        return (h(Host, { key: '1b6d2c6557af171239da3937779392ca6c9251aa', class: 'p-content-slider' }, h("div", { key: 'a1499532e194a55b7faa00f5c8d3741c53622ab5', class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
+        return (h(Host, { key: '82853208f8862b3485a5a00b0c9c4f6986ea92ea', class: 'p-content-slider' }, h("div", { key: '3250c367ac25464a769c43d4093df28dbff8085d', class: `slider ${!this.disableDrag && 'draggable'} ${this._dragging && 'dragging'}`, style: {
                 height: `${this._outerHeight}px`,
-            }, ref: el => (this._sliderRef = el), onMouseDown: e => this._mouseDownHandler(e), onTouchStart: e => this._mouseDownHandler(e), onMouseMove: e => this._mouseMoveHandler(e), onTouchMove: e => this._mouseMoveHandler(e) }, h("div", { key: '06d7498e0e2db76f78a45cb3aabcfd7327652e91', class: 'inner-slider', ref: ref => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: '0a9c430dc04fdec25f086ca7f1c386554e94d40f', onSlotchange: () => this._slotChange() }))), h("div", { key: '1f3e452dcbe68425d55ebe5efa0fb0bc48cc9531', class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._filteredItems.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, h("div", { class: cn('block h-2 w-2 rounded-full', {
+            }, ref: el => (this._sliderRef = el), onMouseDown: e => this._mouseDownHandler(e), onTouchStart: e => this._mouseDownHandler(e), onMouseMove: e => this._mouseMoveHandler(e), onTouchMove: e => this._mouseMoveHandler(e) }, h("div", { key: 'cb82eacdfc02898e9eeaff865b5e7fa7da69a2f9', class: 'inner-slider', ref: ref => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: 'e6e5636ba8ed11665e0d623bcffb8a53bba03908', onSlotchange: () => this._slotChange() }))), h("div", { key: '9d596407cda3aaa5cbae5c0a0a19209623627edd', class: `indicator ${this.hideMobileIndicator && 'hidden'}` }, this._filteredItems.map((_, i) => (h("div", { onClick: () => this._scrollTo(i, true), class: `item ${!this.disableIndicatorClick && 'cursor-pointer'}` }, h("div", { class: cn('block h-2 w-2 rounded-full', {
                 'bg-indigo-600': i === this._visibleIndex,
                 'bg-indigo-300': i !== this._visibleIndex,
             }) })))))));
@@ -98,7 +98,7 @@ export class ContentSlider {
     }
     _slotChange() {
         const items = this._el.querySelectorAll(':scope > *');
-        this._items = Array.from(items);
+        this._items = [...items];
         setTimeout(() => {
             this._innerSliderRef.style.setProperty('--tw-translate-x', '0px');
             this._calculateWidth();
@@ -142,7 +142,7 @@ export class ContentSlider {
     }
     _checkBoundary() {
         let outer = this._sliderRef.getBoundingClientRect();
-        const left = parseInt(this._innerSliderRef.style.getPropertyValue('--tw-translate-x'));
+        const left = Number.parseInt(this._innerSliderRef.style.getPropertyValue('--tw-translate-x'));
         if (left > 0) {
             this._innerSliderRef.style.setProperty('--tw-translate-x', `0px`);
         }
@@ -203,15 +203,15 @@ export class ContentSlider {
             totalWidth += rect.width;
         }
         const sliderStyle = getComputedStyle(this._sliderRef);
-        const padding = parseInt(sliderStyle.padding) * 2;
+        const padding = Number.parseInt(sliderStyle.padding) * 2;
         const innerSliderStyle = getComputedStyle(this._innerSliderRef);
-        const gap = parseInt(innerSliderStyle.gap) * (this._filteredItems.length - 1);
+        const gap = Number.parseInt(innerSliderStyle.gap) * (this._filteredItems.length - 1);
         totalWidth += padding + gap;
         this._totalWidth = totalWidth;
     }
     _calculateHeight() {
         const items = this._filteredItems;
-        if (!items.length) {
+        if (items.length === 0) {
             return;
         }
         const outerHeight = this._filteredItems

package/dist/collection/components/molecules/cropper/cropper.component.js

@@ -1,5 +1,4 @@
 import { h, } from "@stencil/core";
-import "cropperjs";
 import { ThemedHost } from "../../../internal/themed-host.component";
 import { state } from "../../../state";
 export class Cropper {
@@ -41,7 +40,7 @@ export class Cropper {
         const themeColor = state.theme === 'dark'
             ? 'rgba(70, 75, 84, 0.5)'
             : 'rgba(255, 255, 255, 0.5)';
-        return (h(ThemedHost, { key: '3b353db13602263b101450c6a57637e3369273a8' }, this._loaded && (h("cropper-canvas", { key: '028d136a13857f99d3ee6847f7cedf94f26ee150', class: 'h-[17.5rem] w-full border-0 border-b border-solid border-off-white-700 bg-white dark:border-hurricane-200', onAction: () => this._onAction() }, h("cropper-image", { key: '680fbd3b0d5b7231b8bafec0af30859619cb5b58', src: this.value, alt: 'Picture', ref: ref => this._setImageRef(ref), scalable: true, translatable: true, crossorigin: 'anonymous' }), h("cropper-shade", { key: 'ef618b557fe0d7d6bb383a28b448da102c1c9c4e', class: 'aspect-branding rounded-full', "theme-color": themeColor, hidden: true }), h("cropper-selection", { key: 'e2d9c2efa1b2ad549a29ccad80a28467138cd9aa', "initial-coverage": '0.7', "aspect-ratio": '1', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: '138289e12ad4741750b6599e472734c049ecf30f', action: 'move', plain: true }))), h("p-range", { key: '010ccb2dec0cf21aca4c6569d2f64662d85f7c60', class: 'w-full px-14 tablet:max-w-xs tablet:px-1', value: this._currentScale, onValueChange: ev => this._onInput(ev.detail) })));
+        return (h(ThemedHost, { key: 'e400f992f259019b11e1be419a1272cc1a0dc829' }, this._loaded && (h("cropper-canvas", { key: '237161476c456cef513d709111e0571b34296ef7', class: 'h-[17.5rem] w-full border-0 border-b border-solid border-off-white-700 bg-white dark:border-hurricane-200', onAction: () => this._onAction() }, h("cropper-image", { key: '3d0693f76a4447b38025193f3f7f73f1b6286c50', src: this.value, alt: 'Picture', ref: ref => this._setImageRef(ref), scalable: true, translatable: true, crossorigin: 'anonymous' }), h("cropper-shade", { key: '4d1dcd3666bda9336ea96e4e1618661280298f75', class: 'aspect-branding rounded-full', "theme-color": themeColor, hidden: true }), h("cropper-selection", { key: '1029c31b3221664bfc2892e54620e28d6ed352a4', "initial-coverage": '0.7', "aspect-ratio": '1', ref: ref => (this._selectionRef = ref) }), h("cropper-handle", { key: 'c886a8f4453f540988daa792e7a388464219045b', action: 'move', plain: true }))), h("p-range", { key: '2281ee5a960b9fd4f924c394a095ae8531956a23', class: 'w-full px-14 tablet:max-w-xs tablet:px-1', value: this._currentScale, onValueChange: ev => this._onInput(ev.detail) })));
     }
     _setImageRef(ref) {
         if (this._imageRef) {

package/dist/collection/components/molecules/datepicker/datepicker.component.js

@@ -1,13 +1,9 @@
 import { h, } from "@stencil/core";
-import { format, isAfter, isBefore, isSameDay, isValid, isWeekend, parse, startOfDay, startOfMonth, startOfYear, } from "date-fns";
+import { format, isAfter, isBefore, isSameDay, isValid, isWeekend, parse, startOfDay, startOfMonth, startOfYear, addYears, getYear, setYear, subYears, } from "date-fns";
+import { enUS, nl } from "date-fns/locale";
+import { state } from "../../../state";
 import { childOf, isMobileBrowser } from "../../../utils";
 import { asBoolean } from "../../../utils/as-boolean";
-import { state } from "../../../state";
-import { enUS, nl } from "date-fns/locale";
-import { addYears } from "date-fns";
-import { getYear } from "date-fns";
-import { setYear } from "date-fns";
-import { subYears } from "date-fns";
 export class Datepicker {
     /**
      * The placeholder of the input
@@ -212,7 +208,7 @@ export class Datepicker {
         this.parseValue(this.value);
     }
     render() {
-        return (h("p-dropdown", { key: 'a3b7ea1be56aac9497229a7d642a0ad76aaaadd0', allowOverflow: true, strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown, isDatepicker: true }, h("p-field", { key: '06cc4e91f8d9ce1f317e8a0e689de5018c685717', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, loading: this.loading, helper: this.helper, required: asBoolean(this.required), showOptional: asBoolean(this.showOptional), error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, autoShowError: false, disabled: asBoolean(this.disabled), focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: (ev) => this._onBlur(ev), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: 'f8cbd5f6ec8bd87bce5b13cfee550a072830b1d1', slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', class: 'pointer-events-none absolute left-0 top-0 z-[-10] overflow-hidden opacity-0', onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value &&
+        return (h("p-dropdown", { key: 'a01a3bf86a26c0b909a777941c002f8db1963210', allowOverflow: true, strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown, isDatepicker: true }, h("p-field", { key: '66141e393236efcc4ce8deb36ea3083eb8f1cbe8', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, loading: this.loading, helper: this.helper, required: asBoolean(this.required), showOptional: asBoolean(this.showOptional), error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, autoShowError: false, disabled: asBoolean(this.disabled), focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: (ev) => this._onBlur(ev), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: '6c7d01a5c298b42d089ae18d06c6acb2659031cb', slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', class: 'pointer-events-none absolute left-0 top-0 z-[-10] overflow-hidden opacity-0', onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value &&
                 format(this._value, 'yyyy-MM-dd', {
                     locale: state.locale === 'nl' ? nl : enUS,
                 }), min: this._minDate &&
@@ -221,7 +217,7 @@ export class Datepicker {
                 }), max: this.maxDate &&
                 format(new Date(this.maxDate), 'yyyy-MM-dd', {
                     locale: state.locale === 'nl' ? nl : enUS,
-                }) })), h("div", { key: 'a3caba7fad60ba5e8d3b31b2f4f075960d2801cd', tabIndex: -1, slot: 'items' }, h("p-calendar", { key: '83fe68ab2ba2903043e0785a38b4acca26f14dad', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, enableToday: this.enableToday, todayText: this.todayText, mode: this.mode }))));
+                }) })), h("div", { key: 'd5a32388cee9bb272905deb090816da8217e9a41', tabIndex: -1, slot: 'items' }, h("p-calendar", { key: 'dce8bdd282632e2c38ebf13b3b07db561b27dffb', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, enableToday: this.enableToday, todayText: this.todayText, mode: this.mode }))));
     }
     documentClickHandler({ target }) {
         if (!this._showDropdown || childOf(target, this._el)) {
@@ -311,7 +307,7 @@ export class Datepicker {
             return;
         }
         if (this._isDisabledDay(value)) {
-            if (!!this._dateInputRef?.value) {
+            if (this._dateInputRef?.value) {
                 this._dateInputRef.value = this._value
                     ? format(this._value, 'yyyy-MM-dd', {
                         locale: state.locale === 'nl' ? nl : enUS,
@@ -340,7 +336,7 @@ export class Datepicker {
         return ((this.disableWeekends && isWeekend(day)) ||
             (isBefore(day, this._minDate) && !isSameDay(day, this._minDate)) ||
             (isAfter(day, this._maxDate) && !isSameDay(day, this._maxDate)) ||
-            this._disabledDates.findIndex(date => isSameDay(date, day)) >= 0);
+            this._disabledDates.some(date => isSameDay(date, day)));
     }
     _getFormattedDate() {
         if (!this._value) {

package/dist/collection/components/molecules/dropdown/dropdown.component.js

@@ -1,8 +1,8 @@
 import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
 import { h, Host, } from "@stencil/core";
 import { cva } from "class-variance-authority";
-import { childOfComposed } from "../../../utils/child-of";
 import { cn } from "../../../utils";
+import { childOfComposed } from "../../../utils/child-of";
 const dropdownContainerClass = cva(['hidden'], {
     variants: {
         strategy: {
@@ -127,40 +127,40 @@ export class Dropdown {
         this._checkItems();
     }
     render() {
-        return (h(Host, { key: '8ad204f73d619abe866f76cc921e0f1851c5f2e0', class: 'relative' }, h("div", { key: 'b52b8b42e2a6f8b783eaa35ed973aa7990c4d132', class: 'trigger', onClick: () => this._triggerClickHandler() }, h("slot", { key: '5765df266ae120a17547f88fab87da8ba45340ae', name: 'trigger' })), h("div", { key: 'e52b31973018cc81eacfa116663d14ce2e754f30', class: 'relative w-full' }, h("p-dropdown-menu-container", { key: 'ede5c3fce3a17a119547ba25ea3eb3ca46eb9b4f', variant: this.variant, maxWidth: this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable, class: cn(dropdownContainerClass({
+        return (h(Host, { key: 'a4b635c184cc8a58c74f1ba5dbb5f455df1a7b86', class: 'relative' }, h("div", { key: 'd0d1a3f05d117bb2b3a28022e8737fae2f25fcb3', class: 'trigger', onClick: () => this._triggerClickHandler() }, h("slot", { key: '5697825e61fb1c07139663c6c5ac400c48da998a', name: 'trigger' })), h("div", { key: '815b60a51d6b074e878eab047cac77cce5a3e337', class: 'relative w-full' }, h("p-dropdown-menu-container", { key: '60bf00e8beb6e42e7629b57283d317bfe0a2b40a', variant: this.variant, maxWidth: this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable, class: cn(dropdownContainerClass({
                 strategy: this.strategy,
                 maxWidth: this.applyMaxWidth,
                 fullWidth: this.applyFullWidth && !this.applyMaxWidth,
                 isDatepicker: this.isDatepicker,
-            }), this.containerClass), ref: el => this._load(el), onClick: () => this._containerClickHandler(), role: 'popover', "data-placement": this.placement, "data-strategy": this.strategy }, h("slot", { key: 'fffd997b0fe4df65536079b7977ccf88f0efe1b7', name: 'items' })))));
+            }), this.containerClass), ref: el => this._load(el), onClick: () => this._containerClickHandler(), role: 'popover', "data-placement": this.placement, "data-strategy": this.strategy }, h("slot", { key: '34a4da54cb7e3949a494b028b6188b9655b294c2', name: 'items' })))));
     }
     _checkButtons(active = false) {
         if (!this.applyChevron) {
             return;
         }
         const buttons = this._el.querySelectorAll('p-button[slot="trigger"]');
-        const isOpen = this._menu.getAttribute('data-show') !== null;
-        for (let button of [...buttons]) {
+        const isOpen = this._menu.dataset.show !== null;
+        for (let button of buttons) {
             button.disabled = this.disableTriggerClick;
             button.active = active;
             if (button.iconOnly) {
                 continue;
             }
             button.chevronPosition = this.chevronPosition;
-            button.chevron = this.chevronDirection
-                ? this.chevronDirection
-                : this.placement.indexOf('top') >= 0
-                    ? isOpen
-                        ? 'down'
-                        : 'up'
-                    : isOpen
-                        ? 'up'
-                        : 'down';
+            button.chevron =
+                this.chevronDirection ??
+                    (this.placement.includes('top')
+                        ? isOpen
+                            ? 'down'
+                            : 'up'
+                        : isOpen
+                            ? 'up'
+                            : 'down');
         }
     }
     _checkItems() {
         const items = this._el.querySelectorAll('p-dropdown-menu-item');
-        for (let item of [...items]) {
+        for (let item of items) {
             if (item.variant === 'pagination' || item.variant === 'negative') {
                 continue;
             }
@@ -178,7 +178,7 @@ export class Dropdown {
         this._show();
     }
     documentClickHandler(event) {
-        if (!this._menu.hasAttribute('data-show') ||
+        if (!Object.hasOwn(this._menu.dataset, 'show') ||
             childOfComposed(event, this._menu)) {
             return;
         }
@@ -188,7 +188,7 @@ export class Dropdown {
         if (this.insideClick) {
             return;
         }
-        if (this._menu.hasAttribute('data-show')) {
+        if (Object.hasOwn(this._menu.dataset, 'show')) {
             this._hide();
         }
     }
@@ -199,7 +199,7 @@ export class Dropdown {
         if (this.manual) {
             return;
         }
-        if (this._menu.hasAttribute('data-show')) {
+        if (Object.hasOwn(this._menu.dataset, 'show')) {
             this._hide();
             return;
         }
@@ -220,7 +220,7 @@ export class Dropdown {
             return;
         }
         this._cleanup = autoUpdate(this._el, this._menu, () => this._update());
-        this._menu.setAttribute('data-show', '');
+        this._menu.dataset.show = '';
         this._menu.classList.remove('hidden');
         this._menu.classList.add('block');
         this.isOpen.emit(true);
@@ -235,7 +235,7 @@ export class Dropdown {
             this._cleanup = null;
         }
         // Hide the popover
-        this._menu.removeAttribute('data-show');
+        delete this._menu.dataset.show;
         this._menu.classList.remove('block');
         this._menu.classList.add('hidden');
         this.isOpen.emit(false);

package/dist/collection/components/molecules/empty-state/empty-state.component.js

@@ -1,7 +1,7 @@
 import { h, } from "@stencil/core";
 import { cva } from "class-variance-authority";
-import { asBoolean } from "../../../utils/as-boolean";
 import { ThemedHost } from "../../../internal/themed-host.component";
+import { asBoolean } from "../../../utils/as-boolean";
 const emptyState = cva(['flex flex-col w-full items-center justify-start max-w-[20rem]'], {
     variants: {
         enableAction: {
@@ -59,11 +59,11 @@ export class EmptyState {
         const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
         const hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
         const hasActionSlot = !!this._el.querySelector(':scope > [slot="action"]');
-        return (h(ThemedHost, { key: 'a5b216f02c7086b814e8e234e8182141145a4f3e' }, h("div", { key: '9e24d079bc3250ed127d265708e4c20053202cbc', class: emptyState({
+        return (h(ThemedHost, { key: '580edaeaa7a1429f07840b25d2062f9e6ae9763d' }, h("div", { key: 'c08807d745ee8f4bebae2d7aec92bf110824269e', class: emptyState({
                 enableAction: asBoolean(this.enableAction, true),
             }), onClick: ev => this.enableAction && !this.actionLoading
                 ? this.action.emit(ev)
-                : undefined }, this.illustration && (h("p-illustration", { key: '31ab436e26a4b6253b0f650524f8cecd7ee12a55', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: 'my-0 text-center font-ambit text-sm font-bold text-storm-500 dark:text-white' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: 'my-0 text-center text-sm font-normal text-storm-300 dark:text-hurricane-200' }, this.content))), this.enableAction &&
+                : undefined }, this.illustration && (h("p-illustration", { key: '3434e243bb9a41e7f56982fff2450cc92013b25f', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: 'my-0 text-center font-ambit text-sm font-bold text-storm-500 dark:text-white' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: 'my-0 text-center text-sm font-normal text-storm-300 dark:text-hurricane-200' }, this.content))), this.enableAction &&
             (hasActionSlot ? (h("slot", { name: 'action' })) : (h("p-button", { class: 'mt-4', icon: this.actionIcon, iconPosition: this.actionIconPosition, loading: this.actionLoading, variant: this.actionVariant }, this.actionText))))));
     }
     static get is() { return "p-empty-state"; }
@@ -81,16 +81,16 @@ export class EmptyState {
     static get properties() {
         return {
             "illustration": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "IllustrationVariant",
-                    "resolved": "IllustrationVariant",
+                    "resolved": "\"calculator\" | \"calendar\" | \"clock\" | \"coins\" | \"file\" | \"file-invoice\" | \"file-notes\" | \"folder\" | \"payment\" | \"search\" | \"sick-leave\" | \"table\" | \"tag\" | \"task\" | \"user\"",
                     "references": {
                         "IllustrationVariant": {
                             "location": "import",
-                            "path": "../../../components",
-                            "id": "src/components.d.ts::unknown",
+                            "path": "../../../types/illustration",
+                            "id": "src/types/illustration.ts::IllustrationVariant",
                             "referenceLocation": "IllustrationVariant"
                         }
                     }
@@ -219,8 +219,8 @@ export class EmptyState {
                     "references": {
                         "IconVariant": {
                             "location": "import",
-                            "path": "../../../components",
-                            "id": "src/components.d.ts::IconVariant",
+                            "path": "../../../types/icon",
+                            "id": "src/types/icon.ts::IconVariant",
                             "referenceLocation": "IconVariant"
                         }
                     }

package/dist/collection/components/molecules/field/container/field-container.component.js

@@ -1,8 +1,8 @@
 import { h, } from "@stencil/core";
 import { cva } from "class-variance-authority";
+import { ThemedHost } from "../../../../internal/themed-host.component";
 import { cn, formatTranslation, getLocaleComponentStrings, } from "../../../../utils";
 import { asBoolean } from "../../../../utils/as-boolean";
-import { ThemedHost } from "../../../../internal/themed-host.component";
 const loader = cva(['rounded-lg w-full'], {
     variants: {
         variant: {
@@ -105,24 +105,24 @@ export class FieldContainer {
     }
     render() {
         const { hasHeaderSlot, hasErrorSlot, helper, label, errorAndErrorIsNotBoolean, } = this._getSlotInfo();
-        let contentSlot = (h("slot", { key: '6db4734d0a8f69e4952904880813ec931c45e877', slot: 'trigger', name: 'content' }));
+        let contentSlot = (h("slot", { key: 'e795f4695850003f41a5bfb815893affee00e8de', slot: 'trigger', name: 'content' }));
         if (this.loading) {
-            contentSlot = (h("p-loader", { key: '07f963ba944d8eb1c0e751fed55898dbd7c77ae2', variant: 'ghost', class: loader({ variant: this.variant, size: this.loadingSize }), slot: 'trigger' }));
+            contentSlot = (h("p-loader", { key: '1f65c3ca60cefbf0740c9d7235a18a3e69f1c788', variant: 'ghost', class: loader({ variant: this.variant, size: this.loadingSize }), slot: 'trigger' }));
         }
-        return (h(ThemedHost, { key: '0c01066b6835e30c5e5076486cbb43039f05eb8c' }, h("label", { key: 'b54558388e3bb77517bd4d5c73cf5d222c50e3c3', htmlFor: this.id, class: cn('flex w-inherit flex-col gap-1', {
+        return (h(ThemedHost, { key: '9b4ab7a1d59cead07a2065b0d6bc72be41d24287' }, h("label", { key: 'ac31d16bdd75b4b236479638efd367f4771627d1', htmlFor: this.id, class: cn('flex w-inherit flex-col gap-1', {
                 'cursor-auto': this.variant === 'read',
-            }) }, h("div", { key: '68f1096a9b8f0e815e4771b9e40bcb4c9f4d8c96', class: cn('flex items-end justify-between gap-1 empty:hidden', {
+            }) }, h("div", { key: '06a0c419582c71df7323bc3b0deb2d8a98541ca7', class: cn('flex items-end justify-between gap-1 empty:hidden', {
                 'flex-row-reverse': this.align === 'end',
-            }) }, (!!label?.length || !!helper?.length) && (h("div", { key: '4cfbcdea3f80c568d141112f305231c5313e3ddc', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: 'abd3f6c3f88a561e88cbc5bf146710dc634dd811', class: 'min-w-0 overflow-hidden text-ellipsis text-xs font-medium text-storm-300 dark:text-hurricane-200' }, label), helper && (h("p-helper", { key: '2c451541c089dbff670c04f1d383c7afef7a76e6', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
-            hasHeaderSlot) && (h("div", { key: '0f63624491b2b81997c5954c98ad8009b10837fb', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
+            }) }, (!!label?.length || !!helper?.length) && (h("div", { key: '97d2b33bb04145650b000dde1859015361855fa3', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: '4a2fc2b62dba4fc7d4a5f816944996333cff2ca3', class: 'min-w-0 overflow-hidden text-ellipsis text-xs font-medium text-storm-300 dark:text-hurricane-200' }, label), helper && (h("p-helper", { key: '1638bb0c6c3683bd2bd0836b9f4fd0ca07561baf', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
+            hasHeaderSlot) && (h("div", { key: '4f9f56fc0951dab62bd75c4cc7ea724e17ec05aa', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
             asBoolean(this.showOptional) &&
-            this.variant === 'write' && (h("span", { key: '438271d7bed566b2c5b26e91d1cfe1101937cef4', class: 'text-xs font-medium text-storm-200 dark:text-hurricane-300' }, this.optionalTemplate())), hasHeaderSlot && h("slot", { key: 'd7be494f035a0e15b97d368a2f08934775446608', name: 'header' })))), h("p-tooltip", { key: '733c671023a88cef98e3f957f02acb7368147c83', class: cn({
+            this.variant === 'write' && (h("span", { key: '5a86b8751d683868f5c6f001571c184684014741', class: 'text-xs font-medium text-storm-200 dark:text-hurricane-300' }, this.optionalTemplate())), hasHeaderSlot && h("slot", { key: '2bb4125dfcf6a346259a64f5a92000413fcd13ab', name: 'header' })))), h("p-tooltip", { key: '9ddda9fc48a0d3e95ba9953c1787728692b04b27', class: cn({
                 'w-full': this.variant === 'write' || this.loading,
                 'ml-auto': this.align === 'end',
                 'font-normal': this.variant === 'read',
                 'text-storm-500 dark:text-white': this.variant === 'read',
             }), variant: 'error', content: this.error, show: errorAndErrorIsNotBoolean &&
-                asBoolean(this.forceShowTooltip, false), enableUserInput: false, placement: this.errorPlacement }, hasErrorSlot && (h("slot", { key: '6440f0359c94e69cc632a85087008439be6ad5c9', name: 'error', slot: 'content' })), contentSlot))));
+                asBoolean(this.forceShowTooltip, false), enableUserInput: false, placement: this.errorPlacement }, hasErrorSlot && (h("slot", { key: '3670780d5e0907d655e282fbea6c43dcceea7e00', name: 'error', slot: 'content' })), contentSlot))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);

package/dist/collection/components/molecules/field/field/field.component.js

@@ -329,8 +329,8 @@ export class Field {
     }
     render() {
         const { id, prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, hasValueSlot, } = this._getSlotInfo();
-        return (h(ThemedHost, { key: 'cd6719555f83fdb25f1d0e5cca3e80f87bcfda5f' }, h("p-field-container", { key: '802af3d1027dcec188abf0c29fc357debcd6d626', forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
-                (!!this.error?.length && this.forceShowTooltip), id: id, label: this.label, align: this.align, loading: this.loading, loadingSize: this.size, helper: this.helper, error: this.error, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: '4366e85887325f5f50045c94c70bffcb5f059ca2', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '1e2afa26586e93ae7a1097e1140633b8aecd2ab8', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: '3dbf99d7d5f82f4ab2709eeda67a8f6196068af8', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: '885e7c74abd3566de386c4c8437d0e5778bc270d', name: 'error', slot: 'error' })), h("div", { key: '8fa79d544162ccc63b28552edd33331352aceca4', class: field({
+        return (h(ThemedHost, { key: '09b8254690a1603271faac4d9653c90a582a4766' }, h("p-field-container", { key: '776ed3812a980004c1cdc1b6c5b79df5908b383e', forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
+                (!!this.error?.length && this.forceShowTooltip), id: id, label: this.label, align: this.align, loading: this.loading, loadingSize: this.size, helper: this.helper, error: this.error, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: '597e07f1227421eb34575f2c35a5f752f60a66a3', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '0ec1fd3a079f51c605b593e90d8514119ae0ffa3', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'c71b52f8f6f8fc374e9d7e0c2ed4f838c9f9cb86', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: 'd62e1c5f5592540dacbb2e18cf5cc560efbbc5a4', name: 'error', slot: 'error' })), h("div", { key: '7d30604708a80bd509b5d739e46d82b5fa23b464', class: field({
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
                 focused: asBoolean(this.focused) || this._focused,
@@ -341,7 +341,7 @@ export class Field {
                 ? `${this.value}`
                 : undefined, slot: 'content' }, (this.error?.length ||
             prefix ||
-            (this.icon && this.iconPosition === 'start')) && (h("div", { key: '5ab24c6ec8006d44135e82ea3cf46bc27c098591', class: prefixAndSuffix({
+            (this.icon && this.iconPosition === 'start')) && (h("div", { key: 'b4b203ba8f20620b2d7f368d2c6367bdadea9878', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
@@ -351,7 +351,7 @@ export class Field {
             }), onClick: () => this._focusInput() }, (this.icon && this.iconPosition === 'start') ||
             this.error?.length ? (h("p-icon", { class: cn('flex', {
                 'mt-1': this.variant === 'read' && this.size === 'base',
-            }), variant: this.error?.length ? 'warning' : this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getContent(hasValueSlot, id), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: '7c073526b37f4c300e6906b2b934435e5d5482ad', class: prefixAndSuffix({
+            }), variant: this.error?.length ? 'warning' : this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getContent(hasValueSlot, id), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: '5fe27dcdc61d7ba5646ecd6e062ad51f808dc4dd', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
@@ -686,8 +686,8 @@ export class Field {
                     "references": {
                         "IconVariant": {
                             "location": "import",
-                            "path": "../../../atoms/icon/icon.component",
-                            "id": "src/components/atoms/icon/icon.component.tsx::IconVariant",
+                            "path": "../../../../types",
+                            "id": "src/types/index.ts::IconVariant",
                             "referenceLocation": "IconVariant"
                         }
                     }
@@ -712,8 +712,8 @@ export class Field {
                     "references": {
                         "IconFlipOptions": {
                             "location": "import",
-                            "path": "../../../atoms/icon/icon.component",
-                            "id": "src/components/atoms/icon/icon.component.tsx::IconFlipOptions",
+                            "path": "../../../../types",
+                            "id": "src/types/index.ts::IconFlipOptions",
                             "referenceLocation": "IconFlipOptions"
                         }
                     }

package/dist/collection/components/molecules/label/label.component.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
-import { cn } from "../../../utils/cn";
 import { ThemedHost } from "../../../internal/themed-host.component";
+import { cn } from "../../../utils/cn";
 const label = cva(['flex items-center justify-center gap-2', 'h-6 rounded-full'], {
     variants: {
         variant: {
@@ -69,14 +69,14 @@ export class Label {
      */
     keepMobileContent = false;
     render() {
-        return (h(ThemedHost, { key: '352339f0b1a3d84538d720ee440fe05ff217309e' }, h("div", { key: '16a586bd9ea9c03071c7bc24701a32dc860b7672', class: label({
+        return (h(ThemedHost, { key: '53d97bb000a19617372b807e32bc9902758de3b2' }, h("div", { key: '4f1c2e4b9dd25972a2ab5146234a6166ee71bc27', class: label({
                 variant: this.variant,
                 iconOnly: this.iconOnly,
                 keepMobileContent: this.keepMobileContent,
-            }) }, this.icon && (h("p-icon", { key: '739795aac5c2b21760322c3a19313d97721a28e4', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (h("div", { key: 'b1beb3792b5184f2a790214037176ca9fbbf51d1', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium', {
+            }) }, this.icon && (h("p-icon", { key: '24ec81f74dfeea24990a76edac38ccdc79490e88', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (h("div", { key: 'd0b89fc24b7304a8e61e5157bcf4bdae3bdb26ca', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium', {
                 hidden: !this.keepMobileContent,
                 'desktop-xs:block': !this.keepMobileContent,
-            }) }, h("slot", { key: 'c0f471b10e4129a27128f296615809bf0a50fe26' }))))));
+            }) }, h("slot", { key: 'ad87aa170cc6f7980678a1cfc25f5dbdf510127e' }))))));
     }
     static get is() { return "p-label"; }
     static get encapsulation() { return "shadow"; }
@@ -141,8 +141,8 @@ export class Label {
                     "references": {
                         "IconVariant": {
                             "location": "import",
-                            "path": "../../atoms/icon/icon.component",
-                            "id": "src/components/atoms/icon/icon.component.tsx::IconVariant",
+                            "path": "../../../types",
+                            "id": "src/types/index.ts::IconVariant",
                             "referenceLocation": "IconVariant"
                         }
                     }
@@ -167,8 +167,8 @@ export class Label {
                     "references": {
                         "IconFlipOptions": {
                             "location": "import",
-                            "path": "../../atoms/icon/icon.component",
-                            "id": "src/components/atoms/icon/icon.component.tsx::IconFlipOptions",
+                            "path": "../../../types",
+                            "id": "src/types/index.ts::IconFlipOptions",
                             "referenceLocation": "IconFlipOptions"
                         }
                     }

package/dist/collection/components/molecules/navigation/item/navigation-item.component.js

@@ -76,13 +76,13 @@ export class NavigationItem {
     render() {
         const TagType = this.as;
         const active = asBoolean(this.active) || this.class?.includes('active');
-        return (h(ThemedHost, { key: '2e7066aee617a177b242666fcadcfea3cb65df16', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '47710972a16343313540ede4722810b80cf85f47', class: navigationItem({
+        return (h(ThemedHost, { key: 'bbbc6fe9a5cbb86e272b031619120aa4de22dd1d', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '0bd8377b3e5a0d0a5ad987ecc039364935093b60', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, h("div", { key: '1a7b0bd626a8948a8a1d05af95997b6d45d93060', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: 'b5103612d94f7bbc5f03e3d56c636ed3739eaedc', variant: this.icon })), h("span", { key: '363a060ce7b0e6a5f3f1d3754a88f7a72d578f61', class: cn({
+            }), href: this.href, target: this.target }, h("div", { key: '4be9bc173eaa742240660646fb01f98ba9ccb063', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '011712d489f21e6f339e89319c6fda9582e50b7b', variant: this.icon })), h("span", { key: '5074414a36d7c7a6662ccdd49c1486a868952d0c', class: cn({
                 'has-counter': !!this.counter,
                 'w-full': this.applyFullWidth,
-            }) }, h("slot", { key: '3d05c31d3077f3f702448180d7e1343b1764222c' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: '06449bc05229257d58924f3046363c766555264f' }, this.counter)), !!this.loading && h("p-loader", { key: '117bc20bee87dc9798261f8937b20a36cb18ce61', class: 'ml-auto' }))));
+            }) }, h("slot", { key: '32ffee98ef6e055203ab5b10f1c87fc06a0afc5d' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: '5579ff2571fbabae627e34df722ee0a641b59516' }, this.counter)), !!this.loading && h("p-loader", { key: '3fbd06bbe36c9110c0707d07389e4d75d98f5b92', class: 'ml-auto' }))));
     }
     static get is() { return "p-navigation-item"; }
     static get encapsulation() { return "scoped"; }
@@ -107,8 +107,8 @@ export class NavigationItem {
                     "references": {
                         "IconVariant": {
                             "location": "import",
-                            "path": "../../../atoms/icon/icon.component",
-                            "id": "src/components/atoms/icon/icon.component.tsx::IconVariant",
+                            "path": "../../../../types/icon",
+                            "id": "src/types/icon.ts::IconVariant",
                             "referenceLocation": "IconVariant"
                         }
                     }

package/dist/collection/components/molecules/navigation/section/navigation-section.component.js

@@ -6,7 +6,7 @@ export class NavigationSection {
      */
     header;
     render() {
-        return (h(ThemedHost, { key: '0f14e413b11565881c5c7c2797656346584072a2', class: 'flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '3bfe95db110fe759949aebfb7f2eca1dbe3c6449' }, this.header)), h("div", { key: '22dd51802172cbd455913411d60e8dfd77332028', class: 'flex flex-col' }, h("slot", { key: '2b3a6468891d734102fb31a5f7f3a93fd1b15493' }))));
+        return (h(ThemedHost, { key: '48a3739b23a5667754b5ce508a4ec8d51aa279ad', class: 'flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '90d471c5dc92baf8a061e4b97704420eb7a38220' }, this.header)), h("div", { key: '2f69adac8e2c4ae37d1c5199445d577d5fcfa0e9', class: 'flex flex-col' }, h("slot", { key: '427d96574e5bdbfc4db3a0c2ff86470a6672868a' }))));
     }
     static get is() { return "p-navigation-section"; }
     static get originalStyleUrls() {