@haiilo/catalyst 10.5.0 → 10.7.1

package/dist/catalyst/scss/_variables.scss

@@ -19,7 +19,6 @@ $cat-font-color-mono: rgb(var(--cat-font-color-mono));
 
 $cat-head-margin-bottom: 1rem;
 $cat-body-margin-bottom: 2rem;
-$cat-form-margin-bottom: 1.5rem;
 $cat-nav-padding-horizontal: 0.75rem;
 
 // --------

package/dist/catalyst/scss/core/_form.scss

@@ -15,11 +15,11 @@
       cat-date,
       cat-time
     ):not(:last-child) {
-    margin-bottom: calc($cat-form-margin-bottom * var(--cat-form-spacer, 1));
+    margin-bottom: calc(1rem * var(--cat-form-spacer, 1));
   }
 
   cat-radio:not(:last-child) {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
   }
 }
 

package/dist/cjs/cat-alert_29.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-13aff0b4.js');
-const of = require('./of-8163b41f.js');
+const of = require('./of-f2844da8.js');
 
 const ObjectUnsubscribedError = of.createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
     _super(this);
@@ -179,6 +179,7 @@ class AsyncAction extends Action {
         this.pending = false;
     }
     schedule(state, delay = 0) {
+        var _a;
         if (this.closed) {
             return this;
         }
@@ -190,7 +191,7 @@ class AsyncAction extends Action {
         }
         this.pending = true;
         this.delay = delay;
-        this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
+        this.id = (_a = this.id) !== null && _a !== void 0 ? _a : this.requestAsyncId(scheduler, this.id, delay);
         return this;
     }
     requestAsyncId(scheduler, _id, delay = 0) {
@@ -200,7 +201,9 @@ class AsyncAction extends Action {
         if (delay != null && this.delay === delay && this.pending === false) {
             return id;
         }
-        intervalProvider.clearInterval(id);
+        if (id != null) {
+            intervalProvider.clearInterval(id);
+        }
         return undefined;
     }
     execute(state, delay) {
@@ -263,7 +266,6 @@ class AsyncScheduler extends Scheduler {
         super(SchedulerAction, now);
         this.actions = [];
         this._active = false;
-        this._scheduled = undefined;
     }
     flush(action) {
         const { actions } = this;
@@ -653,7 +655,7 @@ function delayWhen(delayDurationSelector, subscriptionDelay) {
     if (subscriptionDelay) {
         return (source) => concat(subscriptionDelay.pipe(take(1), ignoreElements()), source.pipe(delayWhen(delayDurationSelector)));
     }
-    return mergeMap((value, index) => delayDurationSelector(value, index).pipe(take(1), mapTo(value)));
+    return mergeMap((value, index) => of.innerFrom(delayDurationSelector(value, index)).pipe(take(1), mapTo(value)));
 }
 
 function delay$1(due, scheduler = asyncScheduler) {
@@ -1265,7 +1267,7 @@ const CatFormHint = props => {
         ]));
 };
 
-const catCheckboxCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box-placeholder{width:calc(1.25rem + 2px);flex-shrink:0}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 125ms ease, border-color 125ms ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 125ms ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .check{stroke-dashoffset:16px}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 81, 92, 108))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
+const catCheckboxCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.25rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box-placeholder{width:calc(1.25rem + 2px);flex-shrink:0}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 125ms ease, border-color 125ms ease;pointer-events:none;box-sizing:border-box}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 125ms ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .check{stroke-dashoffset:16px}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 81, 92, 108))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
 const CatCheckboxStyle0 = catCheckboxCss;
 
 let nextUniqueId$8 = 0;
@@ -1488,6 +1490,16 @@ const CatDate = class {
         this.nativeAttributes = undefined;
         this.placement = 'bottom-end';
     }
+    onMinChanged(min, oldMin) {
+        if (min !== oldMin) {
+            this.reclamp('min', min);
+        }
+    }
+    onMaxChanged(max, oldMax) {
+        if (max !== oldMax) {
+            this.reclamp('max', max);
+        }
+    }
     get inputValue() {
         const [match, year, month, day] = this.value?.match(/^(\d{4})-(\d{2})-(\d{2})/) ?? [];
         if (match) {
@@ -1536,7 +1548,13 @@ const CatDate = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: '6f8ed88396eb9932a91f26e1f32086a573f82add' }, index.h("cat-input", { key: 'e73ec2bceb1cd648e14d8917ebf7fb6c99079408', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, value: this.inputValue, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '8fb02c395b64728db2a2f5d4896e3151b3dc5aec', slot: "label" }, this.label, index.h("span", { key: 'f08e83d369b1f35d45fb4c0b2c39a9ad52b68b77', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '48ee8472fab9d59b511df69afbbc348aa7b04828', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'b12ea88e170c2c8d916e9553b0bb205fae5e5d45', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '9173b680adcf83c32a7c10e818acbab188cfd979', slot: "content" }, index.h("cat-date-inline", { key: '997bc3bb5137d860893732234442feda61cd3d21', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
+        return (index.h(index.Host, { key: 'd588c96f031fc8ab9518d13dfaac730a0d424caa' }, index.h("cat-input", { key: 'f49f0682e2f2fe3dfcd89477bda91fe46ed44dfa', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, value: this.inputValue, onCatFocus: e => {
+                e.stopPropagation();
+                this.catFocus.emit(e.detail);
+            }, onCatBlur: e => {
+                e.stopPropagation();
+                this.onInputBlur(e.detail);
+            } }, index.h("span", { key: '68ef0708d25128b9a52d60c5b1a7b34e0ffb2ef1', slot: "label" }, this.label, index.h("span", { key: 'ac017335567a4e0059631e7535455d52f61f2e43', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '16a6e95f6e4f6a9b0ddd7716f0b713c8fac3fdff', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'cf7f2aaa2c5775b23f3e8826e9b0e722c4ce8be6', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: 'f90eef976a3102855801df5ffeee770d45e7eaba', slot: "content" }, index.h("cat-date-inline", { key: '853b3adee0ea8f9c9b2a1276a10fcaa299044b42', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
     }
     getTriggerA11yLabel() {
         const date = this.locale.fromLocalISO(this.value);
@@ -1565,6 +1583,7 @@ const CatDate = class {
         this.catBlur.emit(e);
     }
     onDateChange(e) {
+        e.stopPropagation();
         const oldValue = this.value;
         const date = e.detail ? new Date(e.detail) : null;
         this.value = date ? this.locale.toLocalISO(date) : undefined;
@@ -1587,7 +1606,25 @@ const CatDate = class {
         }
         return new Date(year, month - 1, day);
     }
+    reclamp(mode, limit) {
+        const oldValue = this.value;
+        const oldDate = this.locale.fromLocalISO(oldValue);
+        const limitDate = this.locale.fromLocalISO(limit);
+        if (!oldDate || !limitDate) {
+            return;
+        }
+        const newDate = clampDate(mode === 'min' ? limitDate : null, oldDate, mode === 'max' ? limitDate : null);
+        const newValue = this.locale.toLocalISO(newDate);
+        if (oldValue !== newValue) {
+            this.value = newValue;
+            this.catChange.emit(newValue);
+        }
+    }
     get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "min": ["onMinChanged"],
+        "max": ["onMaxChanged"]
+    }; }
 };
 CatDate.style = CatDateStyle0;
 
@@ -1620,18 +1657,19 @@ const CatDateInline = class {
         return all ? new Date(Number(year), Number(month) - 1, Number(day)) : null;
     }
     componentWillLoad() {
-        // select the initial value
         const [startDate, endDate] = this.getValue();
-        this.select(startDate);
-        if (this.range && endDate) {
-            this.select(endDate);
+        if (endDate) {
+            this.focus(endDate);
+        }
+        else if (startDate) {
+            this.focus(startDate);
         }
     }
     componentDidRender() {
         if (this.focusDate) {
             // re-focus the previously focused date after re-render
             this.hostElement.shadowRoot
-                ?.querySelector(`[data-date="${this.locale.toLocalStr(this.focusDate)}"]`)
+                ?.querySelector(`[data-date="${this.locale.toLocalISO(this.focusDate)}"]`)
                 ?.doFocus();
             this.focusDate = null;
         }
@@ -1714,9 +1752,9 @@ const CatDateInline = class {
         const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
         const [dateStart, dateEnd] = this.getValue();
-        return (index.h(index.Host, { key: '2b21e43ebc9a69988b475f2eae1eb2f2aeee97cb' }, index.h("div", { key: '3f256483614d09440bee07be4e8996bc1c187d2b', class: { picker: true, 'picker-small': this.size === 's', 'picker-weeks': !this.noWeeks } }, index.h("div", { key: 'c9d82a518d78439164e99240fa13afabcc81e267', class: "picker-head" }, index.h("cat-button", { key: 'bcc803acb0ac2d7947fa53615ca105d77063e9f9', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '3626bbe3e1a79c08d7a6257cb78ce398ceb1b750', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: '92462a6702792afd573c91f0c12e2bae599378ae' }, this.getHeadline()), index.h("cat-button", { key: '4ce63e1451b820098feea0ff2f45d9b7d0b5cc28', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '97adedac70ce8f19ba0725ca6a1bb836a1d8c0c3', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: '9bbc58c07f911e928cd231a784604abada3698ea', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '2eff946487bfdbce49521b513d6065bd42c78ac0', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => (index.h("abbr", { title: this.locale.days.long[i] }, this.locale.days.short[i])))), !this.noWeeks && (index.h("div", { class: "picker-grid-weeks" }, dateGrid
+        return (index.h(index.Host, { key: 'a7d905c8e87ff74d81dfc74af7ba373297e236f0' }, index.h("div", { key: '1da4117e24b346e7c8b0fb02bee21cf4ab0b4811', class: { picker: true, 'picker-small': this.size === 's', 'picker-weeks': !this.noWeeks } }, index.h("div", { key: 'fc0b889a89e79962ae83e871678b8994b110df26', class: "picker-head" }, index.h("cat-button", { key: '6a12fb84c1047342bed4c27919bb3e5581c628ef', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '40d96782ca7d4f2c6ea2e4fbc7ebe51a2c8c1eba', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: 'd40d0418bee1337559939c56ef22dcdfbf9afa3d' }, this.getHeadline()), index.h("cat-button", { key: '1265b3ee5423afef7006ed9e590c42fec5a461c0', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'a0872674a56e6b9a48206d9bd05f669dc2b720f2', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: 'a2f5d372f4693bfbd95c305add8a5ae9d2b93016', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '8ce7da396804f56ffbddeca8f106ed7bcdd0a82c', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => (index.h("abbr", { title: this.locale.days.long[i] }, this.locale.days.short[i])))), !this.noWeeks && (index.h("div", { class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '48f7b239e8ccb0d56b4f7c80d8892b79c2908990', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '94446fe590c51c48b73e6d482a3f1d4d4fb03a82', class: "picker-grid-days" }, dateGrid.map(day => {
             const isStartDate = isSameDay(dateStart, day);
             const isEndDate = isSameDay(dateEnd, day);
             const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
@@ -1731,7 +1769,7 @@ const CatDateInline = class {
                     'date-focusable': this.canFocus(day),
                     'date-disabled': !this.canClick(day)
                 }, size: this.size, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
-        }))), index.h("div", { key: 'e6c30b78568d92d3a17936fdff4c7fec1ac4965f', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), !this.noHint && index.h("p", { class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: 'e31cabf38ed3545ddd4acc32c2540eb5706bc17c', class: "cursor-aria", "aria-live": "polite" })));
+        }))), index.h("div", { key: '2c3386a794b6ebdfb644a41e892448fd454d7aaa', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), !this.noHint && index.h("p", { class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '6193ca5ae8ff21d847a377ad7c269f22bc52d9a8', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date) {
         const [minDate, maxDate] = this.getMinMaxDate();
@@ -4633,8 +4671,18 @@ function getLocale$1(language) {
     };
 }
 
-const min$1 = Math.min;
-const max$1 = Math.max;
+/**
+ * Custom positioning reference element.
+ * @see https://floating-ui.com/docs/virtual-elements
+ */
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const floor = Math.floor;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
 const oppositeSideMap = {
   left: 'right',
   right: 'left',
@@ -4646,7 +4694,7 @@ const oppositeAlignmentMap = {
   end: 'start'
 };
 function clamp(start, value, end) {
-  return max$1(start, min$1(value, end));
+  return max(start, min(value, end));
 }
 function evaluate(value, param) {
   return typeof value === 'function' ? value(param) : value;
@@ -4805,7 +4853,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
 
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain positioning strategy.
+ * next to a given reference element.
  *
  * This export does not have any `platform` interface logic. You will need to
  * write one for the platform you are using Floating UI with.
@@ -4883,7 +4931,6 @@ const computePosition$1 = async (reference, floating, config) => {
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
       i = -1;
-      continue;
     }
   }
   return {
@@ -4946,6 +4993,7 @@ async function detectOverflow(state, options) {
     y: 1
   };
   const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
     rect,
     offsetParent,
     strategy
@@ -5075,6 +5123,7 @@ const flip$1 = function (options) {
 
 // For type backwards-compatibility, the `OffsetOptions` type was also
 // Derivable.
+
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -5088,8 +5137,6 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
-
-  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -5131,15 +5178,27 @@ const offset = function (options) {
     name: 'offset',
     options,
     async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
-        y
+        y,
+        placement,
+        middlewareData
       } = state;
       const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
-        data: diffCoords
+        data: {
+          ...diffCoords,
+          placement
+        }
       };
     }
   };
@@ -5267,20 +5326,20 @@ const size$1 = function (options) {
       let availableWidth = overflowAvailableWidth;
       if (isYAxis) {
         const maximumClippingWidth = width - overflow.left - overflow.right;
-        availableWidth = alignment || noShift ? min$1(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
+        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
       } else {
         const maximumClippingHeight = height - overflow.top - overflow.bottom;
-        availableHeight = alignment || noShift ? min$1(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
+        availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
       }
       if (noShift && !alignment) {
-        const xMin = max$1(overflow.left, 0);
-        const xMax = max$1(overflow.right, 0);
-        const yMin = max$1(overflow.top, 0);
-        const yMax = max$1(overflow.bottom, 0);
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
         if (isYAxis) {
-          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right));
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
         } else {
-          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max$1(overflow.top, overflow.bottom));
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
         }
       }
       await apply({
@@ -5301,19 +5360,6 @@ const size$1 = function (options) {
   };
 };
 
-/**
- * Custom positioning reference element.
- * @see https://floating-ui.com/docs/virtual-elements
- */
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-const floor = Math.floor;
-const createCoords = v => ({
-  x: v,
-  y: v
-});
-
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -7856,6 +7902,7 @@ const CatDropdown = class {
         this.arrowNavigation = 'vertical';
         this.noResize = false;
         this.overflow = false;
+        this.noInitialFocus = false;
     }
     clickHandler(event) {
         // we need to delay the initialization of the trigger until first
@@ -7887,6 +7934,9 @@ const CatDropdown = class {
      * Opens the dropdown.
      */
     async open() {
+        if (!this.trigger) {
+            this.initTrigger();
+        }
         if (this.isOpen === null || this.isOpen) {
             return; // busy or open
         }
@@ -7927,7 +7977,8 @@ const CatDropdown = class {
                             return true;
                         }
                         return event.key === 'Tab' && event.shiftKey;
-                    }
+                    },
+                    initialFocus: () => (this.noInitialFocus ? false : undefined)
                 });
             this.trap.activate();
         });
@@ -7952,7 +8003,7 @@ const CatDropdown = class {
         }, timeTransitionS);
     }
     render() {
-        return (index.h(index.Host, { key: '5e8a36f00643aa9717333a38ef215b27d328c167' }, index.h("slot", { key: '86a79d3b71d98a57e78be7c94caf35bbf8dbdfdd', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '1367ba9d60feb7abb4ae5993ba0b5c48ee44e308', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '816d07aa40e29aff294b1110370286f2b968fc46', name: "content" }))));
+        return (index.h(index.Host, { key: '6cde42e7f7bfc2df858b7179157a1f52e0c23e0e' }, index.h("slot", { key: '91633464f448a8142f52b6e1e62420974a929e84', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '2ed9bd2dcc58b83ec1e7781959456e67d9397c48', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: 'a91710cd8455cb006f60e48dd49aee7f6d114877', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -9895,7 +9946,7 @@ const CatPagination = class {
 };
 CatPagination.style = CatPaginationStyle0;
 
-const catRadioCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle-placeholder{width:calc(1.25rem + 1px);flex-shrink:0}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .circle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.is-disabled input{background-color:#f2f4f7}.is-disabled input:checked{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.is-disabled .circle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}";
+const catRadioCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.25rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle-placeholder{width:calc(1.25rem + 1px);flex-shrink:0}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .circle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.is-disabled input{background-color:#f2f4f7}.is-disabled input:checked{border-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}.is-disabled .circle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}";
 const CatRadioStyle0 = catRadioCss;
 
 let nextUniqueId$5 = 0;
@@ -12660,6 +12711,9 @@ function getLocale(language) {
         timeFormat: getHour12(language) ? '12' : '24'
     };
 }
+function formatIso(date) {
+    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+}
 
 function clampTime(min, date, max) {
     const [, hhMin, mmMin] = min?.match(/(\d{2}):(\d{2})/)?.map(Number) ?? [];
@@ -12730,6 +12784,16 @@ const CatTime = class {
         this.placement = 'bottom-end';
         this.step = 30;
     }
+    onMinChanged(min, oldMin) {
+        if (min !== oldMin) {
+            this.reclamp('min', min);
+        }
+    }
+    onMaxChanged(max, oldMax) {
+        if (max !== oldMax) {
+            this.reclamp('max', max);
+        }
+    }
     componentWillLoad() {
         this.syncValue(this.value ?? '');
     }
@@ -12747,9 +12811,9 @@ const CatTime = class {
     onOpen() {
         const query = (selector) => this.hostElement.shadowRoot?.querySelector(selector);
         const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);
-        const elem1 = query(`[data-time="${this.formatIso(time)}"]`);
+        const elem1 = query(`[data-time="${formatIso(time)}"]`);
         time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);
-        const elem2 = query(`[data-time="${this.formatIso(time)}"]`);
+        const elem2 = query(`[data-time="${formatIso(time)}"]`);
         setTimeout(() => {
             (elem2 ?? elem1)?.doFocus();
             (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);
@@ -12770,7 +12834,7 @@ const CatTime = class {
             const time = clampTime(this.min ?? null, date, this.max ?? null);
             this.isAm = this.format(time).toLowerCase().includes('am');
             this.selectionTime = time;
-            this.value = this.formatIso(time);
+            this.value = formatIso(time);
         }
         // we need to set the input explicitly to sync the input even without a
         // rerender (if the value is not changed)
@@ -12805,8 +12869,8 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: '899fb8f5f263ba560bacb99d111792e9219e057a' }, index.h("cat-input", { key: 'e2b84c644e265cdc166c7ec50cb873d79ddeb12e', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '097ee8e93a2d05d35051ddc1aa105b1e9ebf0528', slot: "label" }, this.hasSlottedLabel && index.h("slot", { name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '5d526fe661331f8eb1a887ddc0eabc3f3338747a', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '28fcd51b6e297d552e121a01813c92c564cccbda', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: 'f93687883da3f3c32027edcd89d6989caad8e504', slot: "addon", placement: this.placement }, index.h("cat-button", { key: 'eae27c8538ff6564d6b5a735b30e8c2aac07751d', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: 'a334804d935c713bb95e3bb88fce40fa7f05724c', slot: "content", class: "cat-nav" }, index.h("ul", { key: '713181fc8597cf4b9486f2fb7aa63fb412180054' }, this.timeArray().map(time => {
-            const isoTime = this.formatIso(time);
+        return (index.h(index.Host, { key: 'c7ebe7c00d372720ce9c34907438f47150df0820' }, index.h("cat-input", { key: 'e83d9bddbdff4d1e0c97531f3684618e0f4251a8', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '504e24bcf7d7fa3e0eddb7df91261778e720cc87', slot: "label" }, this.hasSlottedLabel && index.h("slot", { name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: 'c617e13394f44bd851beae13e809f791a56dfa42', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '601bd57b6137a44901a3d32ce10f881aae67a2a8', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: 'ecdd2fb5987eb30890c9258ece4bd1e176b2d6c6', slot: "addon", placement: this.placement }, index.h("cat-button", { key: 'a38158d199940ff276b5263833c39cdbea04d194', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: 'e2e77112f74467cc2db37d24f38165389888978a', slot: "content", class: "cat-nav" }, index.h("ul", { key: 'c005ac2b43037f3e5953117e968a967ce60be477' }, this.timeArray().map(time => {
+            const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (index.h("li", null, index.h("cat-button", { class: {
                     'cat-nav-item': true,
@@ -12855,14 +12919,27 @@ const CatTime = class {
             : '';
         return includeAmPm ? str : str.replace(/\s?(am|pm)/i, '');
     }
-    formatIso(date) {
-        return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+    reclamp(mode, limit) {
+        if (!this.value)
+            return;
+        const min = (mode === 'min' ? limit : this.min) ?? null;
+        const max = (mode === 'max' ? limit : this.max) ?? null;
+        const [match, hh, mm] = this.value.match(/(\d{2}):(\d{2})/) ?? [];
+        const newValue = match ? formatIso(clampTime(min, new Date(2000, 5, 1, Number(hh), Number(mm)), max)) : undefined;
+        if (this.value !== newValue) {
+            this.syncValue(newValue ?? '');
+            this.catChange.emit(newValue);
+        }
     }
     get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "min": ["onMinChanged"],
+        "max": ["onMaxChanged"]
+    }; }
 };
 CatTime.style = CatTimeStyle0;
 
-const catToggleCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle-placeholder{width:calc(2rem + 1px);flex-shrink:0}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:rgb(var(--cat-border-color-dark, 215, 219, 224));transition:background-color 125ms ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 0, 129, 148))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 125ms linear;box-shadow:0 1px 2px rgba(27, 31, 38, 0.06), 0 1px 3px rgba(27, 31, 38, 0.1)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem));background:rgb(var(--cat-primary-fill, 255, 255, 255))}.is-disabled .toggle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}:host(.cat-error) .toggle{background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}:host(.cat-error) :checked+.toggle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.toggle::after{background:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
+const catToggleCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.25rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle-placeholder{width:calc(2rem + 1px);flex-shrink:0}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:rgb(var(--cat-border-color-dark, 215, 219, 224));transition:background-color 125ms ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 0, 129, 148))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 125ms linear;box-shadow:0 1px 2px rgba(27, 31, 38, 0.06), 0 1px 3px rgba(27, 31, 38, 0.1)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem));background:rgb(var(--cat-primary-fill, 255, 255, 255))}.is-disabled .toggle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}:host(.cat-error) .toggle{background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}:host(.cat-error) :checked+.toggle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.toggle::after{background:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
 const CatToggleStyle0 = catToggleCss;
 
 let nextUniqueId$1 = 0;