@limetech/lime-elements 39.10.4 → 39.11.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [39.11.1](https://github.com/Lundalogik/lime-elements/compare/v39.11.0...v39.11.1) (2026-04-08)
+
+### Performance Improvements
+
+
+* **date-picker:** defer flatpickr destroy to survive portal-driven DOM moves ([48c5462](https://github.com/Lundalogik/lime-elements/commit/48c5462a349633137fcb2957acb26620934f2196))
+
+## [39.11.0](https://github.com/Lundalogik/lime-elements/compare/v39.10.4...v39.11.0) (2026-04-07)
+
+### Features
+
+
+* **checkbox:** enable consumers to control label's `overflow-wrap` ([09f2f3a](https://github.com/Lundalogik/lime-elements/commit/09f2f3af6fc30ef0cda4628ad05489a9ab6d5bd8))
+* **switch:** enable consumers to control label's `overflow-wrap` ([06f10ef](https://github.com/Lundalogik/lime-elements/commit/06f10ef9e97b4db2551bfbf50647f5ca5adffc17))
+
 ## [39.10.4](https://github.com/Lundalogik/lime-elements/compare/v39.10.3...v39.10.4) (2026-04-02)
 
 ### Bug Fixes

package/dist/cjs/limel-checkbox.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-BjHIBY-I.js');
 var randomString = require('./random-string-BTzDB2ee.js');
 var checkbox_template = require('./checkbox.template-CHtKKyY1.js');
 
-const checkboxCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox{}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}`;
+const checkboxCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;overflow-wrap:var(--limel-boolean-input-label-overflow-wrap, normal);font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){--limel-boolean-input-label-overflow-wrap:var(       --checkbox-label-overflow-wrap,       normal   );min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox{}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}`;
 
 const Checkbox = class {
     constructor(hostRef) {

package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js

@@ -6502,16 +6502,19 @@ class Picker {
         this.flatpickr = flatpickr(element, config);
     }
     setValue(value) {
-        this.flatpickr.setDate(value, false);
+        var _a;
+        (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.setDate(value, false);
     }
     redraw() {
-        this.flatpickr.redraw();
+        var _a;
+        (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.redraw();
     }
     destroy() {
         if (!this.flatpickr) {
             return;
         }
         this.flatpickr.destroy();
+        this.flatpickr = null;
     }
     handleClose(selectedDates) {
         return new Promise((resolve) => {
@@ -6555,7 +6558,8 @@ class Picker {
         return moment.moment(date).isoWeek();
     }
     handleOnClose() {
-        this.flatpickr.element.focus();
+        var _a;
+        (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.element.focus();
     }
 }
 
@@ -7111,11 +7115,11 @@ class MonthPicker extends Picker {
     }
     destroy() {
         var _a, _b, _c, _d;
-        super.destroy();
         if (!this.nativePicker) {
             (_b = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.prevMonthNav) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.prevYear);
             (_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYear);
         }
+        super.destroy();
     }
     getConfig(nativePicker) {
         const config = {
@@ -7223,11 +7227,11 @@ class QuarterPicker extends Picker {
     }
     destroy() {
         var _a, _b, _c, _d;
-        super.destroy();
         if (!this.nativePicker) {
             (_b = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.prevMonthNav) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.prevYear);
             (_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYear);
         }
+        super.destroy();
     }
     getConfig(nativePicker) {
         const config = {
@@ -7494,11 +7498,11 @@ class YearPicker extends Picker {
     }
     destroy() {
         var _a, _b, _c, _d;
-        super.destroy();
         if (!this.nativePicker) {
             (_b = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.prevMonthNav) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.prevYears);
             (_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYears);
         }
+        super.destroy();
     }
     addYears(nbrYears) {
         for (const year of this.years) {
@@ -7592,6 +7596,38 @@ class YearPicker extends Picker {
     }
 }
 
+/**
+ * Defers a destroy callback so that portal-driven DOM moves
+ * (disconnect + reconnect in the same microtask) can cancel the
+ * destroy before it fires.
+ */
+class DeferredDestroy {
+    constructor() {
+        this.pendingDestroyTimer = null;
+    }
+    /**
+     * Schedule a deferred destroy callback. Any previously pending
+     * callback is cancelled first.
+     * @param callback
+     */
+    schedule(callback) {
+        this.cancel();
+        this.pendingDestroyTimer = setTimeout(() => {
+            this.pendingDestroyTimer = null;
+            callback();
+        }, 0);
+    }
+    /**
+     * Cancel the pending destroy callback, if any.
+     */
+    cancel() {
+        if (this.pendingDestroyTimer !== null) {
+            clearTimeout(this.pendingDestroyTimer);
+            this.pendingDestroyTimer = null;
+        }
+    }
+}
+
 const flatpickrAdapterCss = () => `@charset "UTF-8";:root{--mdc-theme-primary:#6200ee;--mdc-theme-secondary:#018786;--mdc-theme-background:#fff;--mdc-theme-surface:#fff;--mdc-theme-error:#b00020;--mdc-theme-on-primary:#fff;--mdc-theme-on-secondary:#fff;--mdc-theme-on-surface:#000;--mdc-theme-on-error:#fff;--mdc-theme-text-primary-on-background:rgba(0, 0, 0, 0.87);--mdc-theme-text-secondary-on-background:rgba(0, 0, 0, 0.54);--mdc-theme-text-hint-on-background:rgba(0, 0, 0, 0.38);--mdc-theme-text-disabled-on-background:rgba(0, 0, 0, 0.38);--mdc-theme-text-icon-on-background:rgba(0, 0, 0, 0.38);--mdc-theme-text-primary-on-light:rgba(0, 0, 0, 0.87);--mdc-theme-text-secondary-on-light:rgba(0, 0, 0, 0.54);--mdc-theme-text-hint-on-light:rgba(0, 0, 0, 0.38);--mdc-theme-text-disabled-on-light:rgba(0, 0, 0, 0.38);--mdc-theme-text-icon-on-light:rgba(0, 0, 0, 0.38);--mdc-theme-text-primary-on-dark:white;--mdc-theme-text-secondary-on-dark:rgba(255, 255, 255, 0.7);--mdc-theme-text-hint-on-dark:rgba(255, 255, 255, 0.5);--mdc-theme-text-disabled-on-dark:rgba(255, 255, 255, 0.5);--mdc-theme-text-icon-on-dark:rgba(255, 255, 255, 0.5)}.mdc-theme--primary{color:#6200ee  !important;color:var(--mdc-theme-primary, #6200ee) !important}.mdc-theme--secondary{color:#018786  !important;color:var(--mdc-theme-secondary, #018786) !important}.mdc-theme--background{background-color:#fff;background-color:var(--mdc-theme-background, #fff)}.mdc-theme--surface{background-color:#fff;background-color:var(--mdc-theme-surface, #fff)}.mdc-theme--error{color:#b00020  !important;color:var(--mdc-theme-error, #b00020) !important}.mdc-theme--on-primary{color:#fff  !important;color:var(--mdc-theme-on-primary, #fff) !important}.mdc-theme--on-secondary{color:#fff  !important;color:var(--mdc-theme-on-secondary, #fff) !important}.mdc-theme--on-surface{color:#000  !important;color:var(--mdc-theme-on-surface, #000) !important}.mdc-theme--on-error{color:#fff  !important;color:var(--mdc-theme-on-error, #fff) !important}.mdc-theme--text-primary-on-background{color:rgba(0, 0, 0, 0.87)  !important;color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)) !important}.mdc-theme--text-secondary-on-background{color:rgba(0, 0, 0, 0.54)  !important;color:var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54)) !important}.mdc-theme--text-hint-on-background{color:rgba(0, 0, 0, 0.38)  !important;color:var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38)) !important}.mdc-theme--text-disabled-on-background{color:rgba(0, 0, 0, 0.38)  !important;color:var(--mdc-theme-text-disabled-on-background, rgba(0, 0, 0, 0.38)) !important}.mdc-theme--text-icon-on-background{color:rgba(0, 0, 0, 0.38)  !important;color:var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38)) !important}.mdc-theme--text-primary-on-light{color:rgba(0, 0, 0, 0.87)  !important;color:var(--mdc-theme-text-primary-on-light, rgba(0, 0, 0, 0.87)) !important}.mdc-theme--text-secondary-on-light{color:rgba(0, 0, 0, 0.54)  !important;color:var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, 0.54)) !important}.mdc-theme--text-hint-on-light{color:rgba(0, 0, 0, 0.38)  !important;color:var(--mdc-theme-text-hint-on-light, rgba(0, 0, 0, 0.38)) !important}.mdc-theme--text-disabled-on-light{color:rgba(0, 0, 0, 0.38)  !important;color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38)) !important}.mdc-theme--text-icon-on-light{color:rgba(0, 0, 0, 0.38)  !important;color:var(--mdc-theme-text-icon-on-light, rgba(0, 0, 0, 0.38)) !important}.mdc-theme--text-primary-on-dark{color:white  !important;color:var(--mdc-theme-text-primary-on-dark, white) !important}.mdc-theme--text-secondary-on-dark{color:rgba(255, 255, 255, 0.7)  !important;color:var(--mdc-theme-text-secondary-on-dark, rgba(255, 255, 255, 0.7)) !important}.mdc-theme--text-hint-on-dark{color:rgba(255, 255, 255, 0.5)  !important;color:var(--mdc-theme-text-hint-on-dark, rgba(255, 255, 255, 0.5)) !important}.mdc-theme--text-disabled-on-dark{color:rgba(255, 255, 255, 0.5)  !important;color:var(--mdc-theme-text-disabled-on-dark, rgba(255, 255, 255, 0.5)) !important}.mdc-theme--text-icon-on-dark{color:rgba(255, 255, 255, 0.5)  !important;color:var(--mdc-theme-text-icon-on-dark, rgba(255, 255, 255, 0.5)) !important}.mdc-theme--primary-bg{background-color:#6200ee  !important;background-color:var(--mdc-theme-primary, #6200ee) !important}.mdc-theme--secondary-bg{background-color:#018786  !important;background-color:var(--mdc-theme-secondary, #018786) !important}.flatpickr-calendar{text-align:center;direction:ltr;font-size:14px;line-height:24px;width:307.875px;-ms-touch-action:manipulation;touch-action:manipulation}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar:focus{outline:0}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none !important}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:transparent;height:34px;line-height:1;text-align:center;position:relative;user-select:none;overflow:hidden;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{user-select:none;text-decoration:none;cursor:pointer}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;height:50%;line-height:50%;opacity:0;cursor:pointer;box-sizing:border-box}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57, 57, 57, 0.6)}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57, 57, 57, 0.6)}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper:hover{background:rgba(0, 0, 0, 0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 0.5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled]{font-size:100%;background:transparent;pointer-events:none}.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;cursor:pointer;font-family:inherit;font-weight:300;height:auto;line-height:inherit;outline:none;position:relative;vertical-align:initial;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{display:flex;align-items:center;height:28px}span.flatpickr-weekday{font-size:90%;font-weight:bolder}.flatpickr-days{position:relative}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange{border-radius:50px}.flatpickr-day.flatpickr-disabled,.flatpickr-day.notAllowed{opacity:0.4;background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled.prevMonthDay,.flatpickr-day.flatpickr-disabled.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{background:transparent;border-color:transparent;cursor:default}.flatpickr-day.week.selected{border-radius:0}.flatpickr-day.hidden{visibility:hidden}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day{display:block;width:100%;max-width:none;background:transparent;cursor:default;border:none}.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:flex}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;font-size:14px;position:relative;box-sizing:border-box;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator{height:inherit;float:left;line-height:inherit;font-weight:bold;width:2%;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;user-select:none;align-self:center;outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-input[readonly]{cursor:pointer}:host(limel-flatpickr-adapter){--calendar-text-color:rgb(var(--contrast-1400));color:var(--calendar-text-color)}:host(limel-flatpickr-adapter) *{box-sizing:border-box}svg{fill:var(--calendar-text-color) !important}.flatpickr-calendar{isolation:isolate;border-radius:0.25rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.flatpickr-weekwrapper .flatpickr-day,.flatpickr-weekwrapper .flatpickr-weekday{color:rgb(var(--contrast-700))}.flatpickr-weeks{padding:0 0.5rem;box-shadow:1px 0 0 rgb(var(--contrast-300))}.flatpickr-weekdaycontainer,.dayContainer{flex-grow:1;display:grid;grid-template-columns:repeat(7, 1fr)}.dayContainer .flatpickr-day{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.dayContainer .flatpickr-day:hover,.dayContainer .flatpickr-day:focus,.dayContainer .flatpickr-day:focus-visible{will-change:color, background-color, box-shadow, transform}.dayContainer .flatpickr-day:hover,.dayContainer .flatpickr-day:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.dayContainer .flatpickr-day:hover{box-shadow:var(--button-shadow-hovered)}.dayContainer .flatpickr-day:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.dayContainer .flatpickr-day:hover,.dayContainer .flatpickr-day:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.flatpickr-day{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--calendar-text-color);border:1px solid transparent;border-radius:2.5rem;width:2.5rem;height:2.5rem;line-height:2.5rem}.flatpickr-day:hover{z-index:1}.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:rgb(var(--contrast-800))}.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange{opacity:0.6}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.inRange,.flatpickr-day.selected:hover{border-color:var(--lime-primary-color, var(--limel-theme-primary-color));color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));background:var(--lime-primary-color, var(--limel-theme-primary-color))}.flatpickr-day.today{border-color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));box-shadow:0 0 0 0.125rem var(--lime-primary-color, var(--limel-theme-primary-color))}.flatpickr-day.today:hover:not(.selected){background-color:transparent;color:var(--lime-primary-color, var(--limel-theme-primary-color))}.flatpickr-day.today:hover:before{top:-60%;opacity:1}.flatpickr-day.today:before{transition:opacity 0.2s ease, top 0.2s ease;pointer-events:none;content:var(--today-label);display:inline-block;position:absolute;inset:auto;top:-50%;height:1.25rem;line-height:1.25rem;font-size:0.75rem;color:rgb(var(--contrast-1100));border-radius:1rem;padding:0.125rem 0.5rem;background-color:rgb(var(--contrast-100), 0.9);box-shadow:var(--shadow-depth-16);opacity:0}.flatpickr-day.inRange{transition-duration:0s}.flatpickr-time{border-top:1px solid rgb(var(--contrast-400))}.flatpickr-time input{color:var(--limel-theme-on-surface-color)}.flatpickr-time input:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{background:rgb(var(--contrast-100))}.flatpickr-weekdays{background-color:rgb(var(--contrast-300))}.flatpickr-months{justify-items:center;padding:0.125rem;color:var(--calendar-text-color) !important;border-bottom:1px solid rgb(var(--contrast-300))}.flatpickr-months svg{height:0.75rem;width:0.75rem}.flatpickr-months .flatpickr-month{display:flex;align-items:stretch}.flatpickr-months .flatpickr-current-month{display:flex;justify-content:space-evenly;align-items:stretch;gap:1rem;inset:0;height:unset;width:100%;padding:0.25rem}.flatpickr-months .flatpickr-current-month .numInputWrapper{width:4rem;border-radius:0.25rem}.flatpickr-months .flatpickr-current-month .numInputWrapper:hover{background-color:rgb(var(--contrast-300))}.flatpickr-months .flatpickr-current-month input{height:100%}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{position:relative;display:flex;align-items:center;justify-content:center;width:2rem}.flatpickr-monthDropdown-months,.flatpickr-prev-month,.flatpickr-next-month,.arrowUp,.arrowDown{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.flatpickr-monthDropdown-months:hover,.flatpickr-monthDropdown-months:focus,.flatpickr-monthDropdown-months:focus-visible,.flatpickr-prev-month:hover,.flatpickr-prev-month:focus,.flatpickr-prev-month:focus-visible,.flatpickr-next-month:hover,.flatpickr-next-month:focus,.flatpickr-next-month:focus-visible,.arrowUp:hover,.arrowUp:focus,.arrowUp:focus-visible,.arrowDown:hover,.arrowDown:focus,.arrowDown:focus-visible{will-change:color, background-color, box-shadow, transform}.flatpickr-monthDropdown-months:hover,.flatpickr-monthDropdown-months:focus-visible,.flatpickr-prev-month:hover,.flatpickr-prev-month:focus-visible,.flatpickr-next-month:hover,.flatpickr-next-month:focus-visible,.arrowUp:hover,.arrowUp:focus-visible,.arrowDown:hover,.arrowDown:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.flatpickr-monthDropdown-months:hover,.flatpickr-prev-month:hover,.flatpickr-next-month:hover,.arrowUp:hover,.arrowDown:hover{box-shadow:var(--button-shadow-hovered)}.flatpickr-monthDropdown-months:active,.flatpickr-prev-month:active,.flatpickr-next-month:active,.arrowUp:active,.arrowDown:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.flatpickr-monthDropdown-months:hover,.flatpickr-monthDropdown-months:active,.flatpickr-prev-month:hover,.flatpickr-prev-month:active,.flatpickr-next-month:hover,.flatpickr-next-month:active,.arrowUp:hover,.arrowUp:active,.arrowDown:hover,.arrowDown:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.flatpickr-monthDropdown-months,.flatpickr-prev-month,.flatpickr-next-month,.arrowUp,.arrowDown{border-radius:0.25rem}.arrowUp{border-radius:0 0.25rem 0 0}.arrowDown{border-radius:0 0 0.25rem 0}.numInputWrapper{border-radius:0.25rem}.numInputWrapper span{display:flex;align-items:center;justify-content:center;width:1rem}.numInputWrapper span.arrowUp:after{border-bottom-color:rgb(var(--contrast-1400))}.numInputWrapper span.arrowDown:after{border-top-color:rgb(var(--contrast-1400))}.datepicker-months-container,.datepicker-quarters-container,.datepicker-years-container{display:grid;gap:0.5rem;padding:0.5rem}.datepicker-months-container{grid-template-columns:repeat(6, 1fr)}.datepicker-quarters-container{grid-template-columns:repeat(4, 1fr)}.datepicker-years-container{grid-template-columns:repeat(5, 1fr)}.datepicker-month,.datepicker-quarter,.datepicker-year{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.datepicker-month:hover,.datepicker-month:focus,.datepicker-month:focus-visible,.datepicker-quarter:hover,.datepicker-quarter:focus,.datepicker-quarter:focus-visible,.datepicker-year:hover,.datepicker-year:focus,.datepicker-year:focus-visible{will-change:color, background-color, box-shadow, transform}.datepicker-month:hover,.datepicker-month:focus-visible,.datepicker-quarter:hover,.datepicker-quarter:focus-visible,.datepicker-year:hover,.datepicker-year:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.datepicker-month:hover,.datepicker-quarter:hover,.datepicker-year:hover{box-shadow:var(--button-shadow-hovered)}.datepicker-month:active,.datepicker-quarter:active,.datepicker-year:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.datepicker-month:hover,.datepicker-month:active,.datepicker-quarter:hover,.datepicker-quarter:active,.datepicker-year:hover,.datepicker-year:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.datepicker-month,.datepicker-quarter,.datepicker-year{min-width:0;text-align:center}.datepicker-month.selected,.datepicker-quarter.selected,.datepicker-year.selected{color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));background:var(--lime-primary-color, var(--limel-theme-primary-color))}.datepicker-month-heading,.datepicker-quarter-heading,.datepicker-year-heading{align-self:center}.datepicker-month{padding:0.125rem 0.5rem;border-radius:2rem}.datepicker-quarter{padding:0.75rem 0;border-radius:1rem}.datepicker-year{padding:0.125rem 0.25rem;border-radius:2rem}.datepicker-quarter{font-weight:bold;font-size:1rem}.datepicker-month-in-quarter{opacity:0.7;display:block;font-size:0.75rem;font-weight:normal}.datepicker-month-in-quarter:first-of-type{margin-top:0.5rem}`;
 
 const DatePickerCalendar = class {
@@ -7608,6 +7644,7 @@ const DatePickerCalendar = class {
          */
         this.language = 'en';
         this.flatPickrCreated = false;
+        this.deferredDestroy = new DeferredDestroy();
     }
     componentWillLoad() {
         switch (this.type) {
@@ -7666,12 +7703,17 @@ const DatePickerCalendar = class {
         this.picker.init(this.inputElement, this.container, this.value);
         this.flatPickrCreated = true;
     }
+    connectedCallback() {
+        this.deferredDestroy.cancel();
+    }
     disconnectedCallback() {
-        this.picker.destroy();
-        this.flatPickrCreated = false;
+        this.deferredDestroy.schedule(() => {
+            this.picker.destroy();
+            this.flatPickrCreated = false;
+        });
     }
     render() {
-        return (index.h("div", { key: '95bd84a535e4bcbf91a356e47b2fbaf440daf15d', class: "container", ref: (el) => (this.container = el), style: {
+        return (index.h("div", { key: '29b3541d525a21143cec1c2d296bb7ae12e10043', class: "container", ref: (el) => (this.container = el), style: {
                 '--today-label': `"${translations.translate.get('date-picker.today')}"`,
             } }));
     }

package/dist/cjs/limel-list-item.cjs.entry.js

@@ -6,7 +6,7 @@ var randomString = require('./random-string-BTzDB2ee.js');
 var checkbox_template = require('./checkbox.template-CHtKKyY1.js');
 var translations = require('./translations-Bu_0fli7.js');
 
-const listItemCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox{}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item{transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:var(--list-item-image-border-radius, 50%);width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input,limel-radio-button{width:var(--limel-boolean-input-box-size) !important;margin-left:-0.25rem !important}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input .boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}`;
+const listItemCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;overflow-wrap:var(--limel-boolean-input-label-overflow-wrap, normal);font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){--limel-boolean-input-label-overflow-wrap:var(       --checkbox-label-overflow-wrap,       normal   );min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox{}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item{transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:var(--list-item-image-border-radius, 50%);width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input,limel-radio-button{width:var(--limel-boolean-input-box-size) !important;margin-left:-0.25rem !important}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input .boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}`;
 
 const ListItemComponent = class {
     constructor(hostRef) {

package/dist/cjs/limel-radio-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-BjHIBY-I.js');
 
-const radioButtonCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}.radio-button{--limel-boolean-input-box-border-radius:var(       --limel-boolean-input-box-size   )}.radio-button .box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}`;
+const radioButtonCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;overflow-wrap:var(--limel-boolean-input-label-overflow-wrap, normal);font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}.radio-button{--limel-boolean-input-box-border-radius:var(       --limel-boolean-input-box-size   )}.radio-button .box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}`;
 
 const RadioButtonComponent = class {
     constructor(hostRef) {

package/dist/cjs/limel-switch.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-BjHIBY-I.js');
 var randomString = require('./random-string-BTzDB2ee.js');
 var makeEnterClickable = require('./make-enter-clickable-NuTMC9MU.js');
 
-const switchCss = () => `@charset "UTF-8";:host(limel-switch){min-height:1.75rem;display:flex;flex-direction:column;align-items:flex-start}.switch{display:grid;grid-template-columns:auto 1fr;gap:0.5rem;align-items:center;width:100%;min-height:1.75rem}button{border:none;outline:none;cursor:pointer;transition:background-color calc(0.2s + 0.2s) ease;flex-shrink:0;display:inline-flex;align-items:center;padding:0;width:2.25rem;height:1.25rem;border-radius:1.25rem;background-color:rgb(var(--contrast-700))}:host([disabled]) button{opacity:0.4;cursor:not-allowed}button[aria-checked=true]{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.handle{position:relative;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;transition:transform 0.2s cubic-bezier(0.46, 0.52, 0.27, 1.55), box-shadow 0.2s ease, background-color 0.2s ease;transform:translateX(0)}button[aria-checked=true] .handle{transform:translateX(1rem)}button:focus-visible .handle{background-color:rgb(var(--color-white), 0.6);box-shadow:var(--shadow-depth-8-focused), var(--shadow-brighten-edges-inside)}.handle:after{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:0.125rem;border-radius:50%;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal), var(--button-shadow-normal)}button:hover:not(:disabled) .handle:after{box-shadow:var(--button-shadow-normal), var(--button-shadow-hovered)}svg{width:0.625rem;height:0.625rem;fill:var(--lime-elevated-surface-background-color)}label{font-size:var(--limel-theme-default-font-size);cursor:pointer;width:fit-content}:host([disabled]) label{cursor:not-allowed;opacity:0.4}:host(limel-switch:focus),:host(limel-switch:focus-visible),:host(limel-switch:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-switch){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-switch:focus) limel-helper-line,:host(limel-switch:focus-visible) limel-helper-line,:host(limel-switch:focus-within) limel-helper-line,:host(limel-switch:hover) limel-helper-line{will-change:grid-template-rows}`;
+const switchCss = () => `@charset "UTF-8";:host(limel-switch){min-height:1.75rem;display:flex;flex-direction:column;align-items:flex-start}.switch{display:grid;grid-template-columns:auto 1fr;gap:0.5rem;align-items:center;width:100%;min-height:1.75rem}button{border:none;outline:none;cursor:pointer;transition:background-color calc(0.2s + 0.2s) ease;flex-shrink:0;display:inline-flex;align-items:center;padding:0;width:2.25rem;height:1.25rem;border-radius:1.25rem;background-color:rgb(var(--contrast-700))}:host([disabled]) button{opacity:0.4;cursor:not-allowed}button[aria-checked=true]{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.handle{position:relative;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;transition:transform 0.2s cubic-bezier(0.46, 0.52, 0.27, 1.55), box-shadow 0.2s ease, background-color 0.2s ease;transform:translateX(0)}button[aria-checked=true] .handle{transform:translateX(1rem)}button:focus-visible .handle{background-color:rgb(var(--color-white), 0.6);box-shadow:var(--shadow-depth-8-focused), var(--shadow-brighten-edges-inside)}.handle:after{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:0.125rem;border-radius:50%;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal), var(--button-shadow-normal)}button:hover:not(:disabled) .handle:after{box-shadow:var(--button-shadow-normal), var(--button-shadow-hovered)}svg{width:0.625rem;height:0.625rem;fill:var(--lime-elevated-surface-background-color)}label{font-size:var(--limel-theme-default-font-size);cursor:pointer;width:fit-content;overflow-wrap:var(--switch-label-overflow-wrap, normal);max-width:100%;min-width:0}:host([disabled]) label{cursor:not-allowed;opacity:0.4}:host(limel-switch:focus),:host(limel-switch:focus-visible),:host(limel-switch:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-switch){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-switch:focus) limel-helper-line,:host(limel-switch:focus-visible) limel-helper-line,:host(limel-switch:focus-within) limel-helper-line,:host(limel-switch:hover) limel-helper-line{will-change:grid-template-rows}`;
 
 const Switch = class {
     constructor(hostRef) {

package/dist/collection/components/checkbox/checkbox.css

@@ -114,6 +114,7 @@
   */
 /**
 * @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.
+* @prop --checkbox-label-overflow-wrap: Controls how long unbreakable words (e.g. camelCase strings with no spaces) wrap within the label. Accepts any valid `overflow-wrap` value. Defaults to `normal`.
 */
 /**
 * :::important
@@ -179,6 +180,7 @@ label.boolean-input-label {
   cursor: pointer;
   position: relative;
   width: 100%;
+  overflow-wrap: var(--limel-boolean-input-label-overflow-wrap, normal);
   font-size: var(--limel-theme-default-small-font-size);
   color: var(--limel-theme-text-primary-on-background-color);
   padding-left: calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size));
@@ -296,6 +298,10 @@ label.boolean-input-label {
 }
 
 :host(limel-checkbox) {
+  --limel-boolean-input-label-overflow-wrap: var(
+      --checkbox-label-overflow-wrap,
+      normal
+  );
   min-height: var(--limel-checkbox-min-height, 2.5rem);
 }
 

package/dist/collection/components/date-picker/flatpickr-adapter/deferred-destroy.js

@@ -0,0 +1,31 @@
+/**
+ * Defers a destroy callback so that portal-driven DOM moves
+ * (disconnect + reconnect in the same microtask) can cancel the
+ * destroy before it fires.
+ */
+export class DeferredDestroy {
+    constructor() {
+        this.pendingDestroyTimer = null;
+    }
+    /**
+     * Schedule a deferred destroy callback. Any previously pending
+     * callback is cancelled first.
+     * @param callback
+     */
+    schedule(callback) {
+        this.cancel();
+        this.pendingDestroyTimer = setTimeout(() => {
+            this.pendingDestroyTimer = null;
+            callback();
+        }, 0);
+    }
+    /**
+     * Cancel the pending destroy callback, if any.
+     */
+    cancel() {
+        if (this.pendingDestroyTimer !== null) {
+            clearTimeout(this.pendingDestroyTimer);
+            this.pendingDestroyTimer = null;
+        }
+    }
+}

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js

@@ -7,6 +7,7 @@ import { QuarterPicker } from "../pickers/quarter-picker";
 import { TimePicker } from "../pickers/time-picker";
 import { WeekPicker } from "../pickers/week-picker";
 import { YearPicker } from "../pickers/year-picker";
+import { DeferredDestroy } from "./deferred-destroy";
 /**
  * This component is internal and only supposed to be used by
  * the limel-date-picker. This component is needed in order for us
@@ -26,6 +27,7 @@ export class DatePickerCalendar {
          */
         this.language = 'en';
         this.flatPickrCreated = false;
+        this.deferredDestroy = new DeferredDestroy();
     }
     componentWillLoad() {
         switch (this.type) {
@@ -84,12 +86,17 @@ export class DatePickerCalendar {
         this.picker.init(this.inputElement, this.container, this.value);
         this.flatPickrCreated = true;
     }
+    connectedCallback() {
+        this.deferredDestroy.cancel();
+    }
     disconnectedCallback() {
-        this.picker.destroy();
-        this.flatPickrCreated = false;
+        this.deferredDestroy.schedule(() => {
+            this.picker.destroy();
+            this.flatPickrCreated = false;
+        });
     }
     render() {
-        return (h("div", { key: '95bd84a535e4bcbf91a356e47b2fbaf440daf15d', class: "container", ref: (el) => (this.container = el), style: {
+        return (h("div", { key: '29b3541d525a21143cec1c2d296bb7ae12e10043', class: "container", ref: (el) => (this.container = el), style: {
                 '--today-label': `"${translate.get('date-picker.today')}"`,
             } }));
     }

package/dist/collection/components/date-picker/pickers/month-picker.js

@@ -23,11 +23,11 @@ export class MonthPicker extends Picker {
     }
     destroy() {
         var _a, _b, _c, _d;
-        super.destroy();
         if (!this.nativePicker) {
             (_b = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.prevMonthNav) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.prevYear);
             (_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYear);
         }
+        super.destroy();
     }
     getConfig(nativePicker) {
         const config = {

package/dist/collection/components/date-picker/pickers/picker.js

@@ -36,16 +36,19 @@ export class Picker {
         this.flatpickr = flatpickr(element, config);
     }
     setValue(value) {
-        this.flatpickr.setDate(value, false);
+        var _a;
+        (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.setDate(value, false);
     }
     redraw() {
-        this.flatpickr.redraw();
+        var _a;
+        (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.redraw();
     }
     destroy() {
         if (!this.flatpickr) {
             return;
         }
         this.flatpickr.destroy();
+        this.flatpickr = null;
     }
     handleClose(selectedDates) {
         return new Promise((resolve) => {
@@ -89,6 +92,7 @@ export class Picker {
         return moment(date).isoWeek();
     }
     handleOnClose() {
-        this.flatpickr.element.focus();
+        var _a;
+        (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.element.focus();
     }
 }

package/dist/collection/components/date-picker/pickers/quarter-picker.js

@@ -25,11 +25,11 @@ export class QuarterPicker extends Picker {
     }
     destroy() {
         var _a, _b, _c, _d;
-        super.destroy();
         if (!this.nativePicker) {
             (_b = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.prevMonthNav) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.prevYear);
             (_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYear);
         }
+        super.destroy();
     }
     getConfig(nativePicker) {
         const config = {

package/dist/collection/components/date-picker/pickers/year-picker.js

@@ -30,11 +30,11 @@ export class YearPicker extends Picker {
     }
     destroy() {
         var _a, _b, _c, _d;
-        super.destroy();
         if (!this.nativePicker) {
             (_b = (_a = this.flatpickr) === null || _a === void 0 ? void 0 : _a.prevMonthNav) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousedown', this.prevYears);
             (_d = (_c = this.flatpickr) === null || _c === void 0 ? void 0 : _c.nextMonthNav) === null || _d === void 0 ? void 0 : _d.removeEventListener('mousedown', this.nextYears);
         }
+        super.destroy();
     }
     addYears(nbrYears) {
         for (const year of this.years) {

package/dist/collection/components/list-item/list-item.css

@@ -126,6 +126,7 @@
 */
 /**
 * @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.
+* @prop --checkbox-label-overflow-wrap: Controls how long unbreakable words (e.g. camelCase strings with no spaces) wrap within the label. Accepts any valid `overflow-wrap` value. Defaults to `normal`.
 */
 /**
  * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.
@@ -173,6 +174,7 @@ label.boolean-input-label {
   cursor: pointer;
   position: relative;
   width: 100%;
+  overflow-wrap: var(--limel-boolean-input-label-overflow-wrap, normal);
   font-size: var(--limel-theme-default-small-font-size);
   color: var(--limel-theme-text-primary-on-background-color);
   padding-left: calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size));
@@ -290,6 +292,10 @@ label.boolean-input-label {
 }
 
 :host(limel-checkbox) {
+  --limel-boolean-input-label-overflow-wrap: var(
+      --checkbox-label-overflow-wrap,
+      normal
+  );
   min-height: var(--limel-checkbox-min-height, 2.5rem);
 }
 

package/dist/collection/components/radio-button-group/radio-button.css

@@ -176,6 +176,7 @@ label.boolean-input-label {
   cursor: pointer;
   position: relative;
   width: 100%;
+  overflow-wrap: var(--limel-boolean-input-label-overflow-wrap, normal);
   font-size: var(--limel-theme-default-small-font-size);
   color: var(--limel-theme-text-primary-on-background-color);
   padding-left: calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size));

package/dist/collection/components/switch/switch.css

@@ -88,6 +88,9 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
+/**
+* @prop --switch-label-overflow-wrap: Controls how long unbreakable words (e.g. camelCase strings with no spaces) wrap within the label. Accepts any valid `overflow-wrap` value. Defaults to `normal`.
+*/
 :host(limel-switch) {
   min-height: 1.75rem;
   display: flex;
@@ -167,6 +170,9 @@ label {
   font-size: var(--limel-theme-default-font-size);
   cursor: pointer;
   width: fit-content;
+  overflow-wrap: var(--switch-label-overflow-wrap, normal);
+  max-width: 100%;
+  min-width: 0;
 }
 :host([disabled]) label {
   cursor: not-allowed;

package/dist/collection/style/internal/boolean-input.scss

@@ -41,6 +41,7 @@ label.boolean-input-label {
     cursor: pointer;
     position: relative;
     width: 100%;
+    overflow-wrap: var(--limel-boolean-input-label-overflow-wrap, normal);
 
     font-size: var(--limel-theme-default-small-font-size);
     color: var(--limel-theme-text-primary-on-background-color);

package/dist/esm/limel-checkbox.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, a as getElement } from './i
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
 import { C as CheckboxTemplate } from './checkbox.template-CfWJ3CAC.js';
 
-const checkboxCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox{}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}`;
+const checkboxCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;overflow-wrap:var(--limel-boolean-input-label-overflow-wrap, normal);font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){--limel-boolean-input-label-overflow-wrap:var(       --checkbox-label-overflow-wrap,       normal   );min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox{}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}`;
 
 const Checkbox = class {
     constructor(hostRef) {