@haiilo/catalyst 10.20.0 → 10.21.0

package/dist/collection/components/cat-radio/cat-radio.js

@@ -53,13 +53,13 @@ export class CatRadio {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: 'e49a46a798bf9e1763c3bb7d393d017bc717b867' }, h("label", { key: '2c54e7ce7635e828d08c57a6dec3dac6f9655ea7', htmlFor: this.id, class: {
+        return (h(Host, { key: '9eb9e711c531675c5a2dde8f4ac0f112cbbf0ddc' }, h("label", { key: '7b46353f5d46952b552a318b1f3f39e05f9e5208', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '750a09db89be9e14bd0b830f6ab9d667b5154faa', class: "radio" }, h("input", { key: 'd34a558d03b1af53eb8afe65f33cdf400a38dd8a', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '4da4710794e6a1939e947461986798f952a43c28', class: "circle" })), h("span", { key: '812920e2ce41d6415fb39306a3c5c90c547292ed', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '141e716d778a2838dc5da2f36342483a07a887e0', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '84e7ed4970ff487801c96dfdd16fbc5bf5fa7ee0', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '7067ca10bf24d84beaf5f89a8e2e65a22766784c', class: "circle-placeholder" }), h(CatFormHint, { key: 'a6a006b626516a1fa3f86d25eb6ae5da93ff9d66', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '5702eb824f57f52107fee5534bd7823c4b5c822b', class: "radio" }, h("input", { key: 'be68de703d148e592c7fd1ebee9e49f606e0c2ee', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'c6a8a3e11c8a7f663bd861190f8b3fc6d8649dfd', class: "circle" })), h("span", { key: 'f6679db9d033cf373a6341c1ea3ea1b2a8c3e154', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'acf496e1f124bec52dff12d3b7e9206b8c455680', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '9ab26eb79feeefaf0f143836df8711e1335255bc', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '27ab2cadf0cbecd1803c12221d78b9fd68ac5bf8', class: "circle-placeholder" }), h(CatFormHint, { key: '2c89013ef175c063ebac67f0f1dcaa9d3ff311bc', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;

package/dist/collection/components/cat-radio-group/cat-radio-group.js

@@ -67,7 +67,7 @@ export class CatRadioGroup {
         }
     }
     render() {
-        return (h("div", { key: '3ca0cc9f011a75bbe5fbe78f3ccc34f2b89cfa0d', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: 'ab891802eba920792de0dbbd645df119cbbfd35a' })));
+        return (h("div", { key: '03889f6f1d8a995b4a58f2cecc52a880955e33bd', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '30ba95aa4f5a0e1a206e4b6819c5bca2d60d1b73' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));

package/dist/collection/components/cat-scrollable/cat-scrollable.js

@@ -57,13 +57,13 @@ export class CatScrollable {
     }
     render() {
         return [
-            h("div", { key: '1639675c47648368c53430e764a8add07e9452ae', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: '1ee0d5c5bfc7b726addac6474b098237ff447c3c', class: "shadow-top" }), !this.noShadowX && h("div", { key: '266026a4369bdcd9464deb4aa44d1e438a05e191', class: "shadow-left" }), !this.noShadowX && h("div", { key: 'd4ec793e68cde3ca8aa14e4eec57995112722d9b', class: "shadow-right" }), !this.noShadowY && h("div", { key: 'c30408dc0b5e10a9dceece389ce0729d46fdcbe2', class: "shadow-bottom" })),
-            h("div", { key: '8e17123e46a59b561122d07a2124ab20bf0cc58f', ref: el => (this.scrollElement = el), class: {
+            h("div", { key: 'fb45dc6ff06b062e3afd7b87faabf5a153cf1fdb', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: '9ac0e11c95067c51658055a405be4ccd3e0c2c5c', class: "shadow-top" }), !this.noShadowX && h("div", { key: '288081b27ab2fe6f097f4c294ae345c5ff2c0b71', class: "shadow-left" }), !this.noShadowX && h("div", { key: 'ce8c8fc14f609159956b297802d9341abef06aa0', class: "shadow-right" }), !this.noShadowY && h("div", { key: '040f6d1126096cf0506e108e6ce6f5c7869b2ad1', class: "shadow-bottom" })),
+            h("div", { key: '91405bb6b4b42f6ae550fd6d2dc11245f4364955', ref: el => (this.scrollElement = el), class: {
                     'scrollable-content': true,
                     'scroll-x': !this.noOverflowX,
                     'scroll-y': !this.noOverflowY,
                     'no-overscroll': this.noOverscroll
-                } }, h("slot", { key: '026b0d81a1de88cbd4b401bde7fb98caaabfe811' }))
+                } }, h("slot", { key: '3e57c7cdb12a9ea1cf0afcb5317f7937a8f58cf7' }))
         ];
     }
     attachEmitter(from, emitter) {

package/dist/collection/components/cat-select/cat-select.css

@@ -387,7 +387,8 @@
 .label-container {
   flex-basis: var(--label-size, 33.33%);
 }
-.label-container .label-wrapper {
+
+.label-wrapper {
   display: flex;
   gap: 0.25rem;
 }

package/dist/collection/components/cat-select-demo/cat-select-demo.js

@@ -139,7 +139,7 @@ export class CatSelectTest {
         setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
     }
     render() {
-        return (h(Host, { key: '4d1262f7c176a3699eec1b24dcfd24eb73e4794d', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: '50af5fabe85cf9d5cabc22e8eaac0fd79ca37ef6', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: 'd0b3ff47fa0ae1fcaca58fa1c978d160bd90ec25', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: '8b279857cb7bc615049315d3347ad2167f79f515', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '8133ad06671dda0dec6847558cc5f2298ffd0910', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'fe7e7c01ed578dbccea9dedb77722ccc873aa882', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'f632770bcf0100328294b4722bf788619d381ba9', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: 'b38796d22f1f88bead1e97820d48214b7ba3f649', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: '24bff1c9438de8a2bce7801b161c6e0ed40a0f53', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: '263cf8e741c9f16f2602150cb2bc054b11deff3b', overflow: true }, h("cat-button", { key: '7bc7b524dfb08bb1691e3ebb391e44229345a98b', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: '81565908aa8e60a82727269b3af83f9d9cc00e89', slot: "content", style: { width: '400px' } }, h("cat-select", { key: '530b39c7402fd04af9a92a8860994babbb26ca16', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
+        return (h(Host, { key: '153bf14c997db207ab1587e6ad37c44afa095be5', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: '6b7cb480ed99aad82fe0f95037a4bc81fe0bc034', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: '1d6c5c130f5740dc46129ba4a8b7ea570b9adf6b', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: 'b749ef3019ef6835ea6065e2d453eb5df9357c16', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '472c8da7c61e2295ceb6987ca45fc54711f5c5e5', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'ff7a037bad1b8a3eb10f275a7cbef072a8b2a186', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '28fbc5b535a83f5b0bfb1d820409630f58c9fe10', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: '95badaa01a9aa50111b13d4168cc89a32d6958d7', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: 'a2540116218b9d96fa5f3d7fc2a3c1dd32987296', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: 'add3df944b9d4475d6d002ce76690565b0ddadeb', overflow: true }, h("cat-button", { key: '3acbf50077f5da1d6585ca9aa3e4239c18ae83a1', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: 'c5a3d0da15494d2c5c46a64d893c010a6435a13a', slot: "content", style: { width: '400px' } }, h("cat-select", { key: '8d379ddcd1db5eddb718ef195f4a1e4e6e241e20', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
     }
     get countryConnector() {
         return {

package/dist/collection/components/cat-skeleton/cat-skeleton.js

@@ -10,7 +10,7 @@ export class CatSkeleton {
         this.lines = undefined;
     }
     render() {
-        return (h(Host, { key: 'aed2e7fe276bc83e749cddeba379a495040850ea' }, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
+        return (h(Host, { key: '63780b104eecc534aab9673dc6cd55c3639eecbd' }, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
                 skeleton: true,
                 [`skeleton-${this.effect}`]: Boolean(this.effect),
                 [`skeleton-${this.variant}`]: Boolean(this.variant),

package/dist/collection/components/cat-spinner/cat-spinner.js

@@ -8,9 +8,9 @@ export class CatSpinner {
         this.a11yLabel = undefined;
     }
     render() {
-        return (h("span", { key: '1cbc0ce9b663ba8edec261bc23822da72bca0e09', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        return (h("span", { key: '951ac5770487a3b326092d21f36a7cb439db273e', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
                 [`spinner-${this.size}`]: this.size !== 'inline'
-            } }, h("svg", { key: '8f282cdab11de5ae0ce0d5c33e8261d28642e8b3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: '1b283f2cca79367c1bbb284954f4c62b422d18ae', cx: "24", cy: "24", r: "21.5" }))));
+            } }, h("svg", { key: 'abe773a06ff9c3df6b7d60eb186f71b9a3d3788d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: 'd3dce1b2232b56124ec26f5705d00802bbbf1a89', cx: "24", cy: "24", r: "21.5" }))));
     }
     static get is() { return "cat-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cat-tab/cat-tab.js

@@ -24,7 +24,7 @@ export class CatTab {
         this.catClick.emit(event);
     }
     render() {
-        return h(Host, { key: '3a0763022fe3c66e8405914f3212ba1d19fe1549' });
+        return h(Host, { key: '2b8e751066061cda8d276a7789f580953b5ec15e' });
     }
     static get is() { return "cat-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cat-tabs/cat-tabs.js

@@ -58,7 +58,7 @@ export class CatTabs {
         this.activate(this.tabs[index]);
     }
     render() {
-        return (h(Host, { key: '16cb1359d4242593e1caf1b2475c0fe24b91a69b' }, this.tabs.map((tab) => {
+        return (h(Host, { key: '92ef86bc234601a9c2f8464ed148380919d1b15e' }, this.tabs.map((tab) => {
             return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,

package/dist/collection/components/cat-textarea/cat-textarea.css

@@ -387,7 +387,8 @@
 .label-container {
   flex-basis: var(--label-size, 33.33%);
 }
-.label-container .label-wrapper {
+
+.label-wrapper {
   display: flex;
   gap: 0.25rem;
 }

package/dist/collection/components/cat-textarea/cat-textarea.js

@@ -88,15 +88,15 @@ export class CatTextarea {
         }
     }
     render() {
-        return (h(Host, { key: 'fda117cd95fc6e41b9cd939b65ab22f977dde6ef' }, h("div", { key: '1f96b31c31880e8a75c8ad67c4057fb3010b1c9e', class: {
+        return (h(Host, { key: '3fb70b99dd5e227421428c44b4a2f1b78e3a9624' }, h("div", { key: '1779847f30a6f47cfe36565dc3a73f13c25efb74', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, h("div", { key: '524ec0321e709ad45216275d0c554b7efde80f19', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '3aa9116de299d6eadf551159788cd0e244b5e919', htmlFor: this.id, part: "label" }, h("span", { key: 'ae397abd1be97bbb5c58fa35f4b560506cbbd5d1', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '81bb3f8151354ae9c6539f6816d963700beb861b', name: "label" })) || this.label, h("div", { key: '96000f760849536cb97eedd704e8a1bec14c15fa', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '1ab3077d0d7a94c2459a2d5b6717cc4a3857b122', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '73944c3f9366064342fca115ae50612b9c75489e', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { key: 'fe11e06174bcbf8e1957771be702fc052a4e5114', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: '94a9992673d408933040f359335f642fcc053182', class: "textarea-container" }, h("div", { key: 'df53a47f398d48cec2b50dff469eb9a91c59bc72', class: {
+            } }, h("div", { key: '3e52881679e5718256ae474de772e4ff6b7a6e04', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '5a91b34d85f90d4ae0c1430d4824f48dd6345e1d', htmlFor: this.id, part: "label" }, h("span", { key: 'da5084e4e79b564795e534f7ab4928ca6b660f0b', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '63caadae96c67353d319524bec69caa39aaed134', name: "label" })) || this.label, h("div", { key: '2487576ec974be3157ea2bd88b351a7a2c69549e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'e79283c2e1776f88a64be12b56e9360a579ddb01', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '667b799f8d9650853bc9acc7be5fa2f5050b6533', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { key: '715ff632acb1c2f33d3839ecbbf38b96ab0b1f94', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: '3c235dd0387974ec8319985a4faa14a62f130f5e', class: "textarea-container" }, h("div", { key: 'b57634d98428025e07df6a77e41545c08afa1d16', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, h("textarea", { key: 'd7d7f168763ea7194b97ddb505b4741b4ba0d91a', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: 'f9d4fc754bf0da656ee08f2b5b68fedba99c727c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '3112b8a801c9b5e51129df6349f89c097beb6f0d', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, h("textarea", { key: 'eea177cb65a95b65e95458056bc24af8879207ee', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '9d21adf9b86a2c7487f7e3c976bd88773114322c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '04c7af649b204b083ea83cfdcaf9a05829de5671', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;

package/dist/collection/components/cat-time/cat-time.js

@@ -141,14 +141,14 @@ export class CatTime {
         this.input?.clear();
     }
     render() {
-        return (h(Host, { key: '257e8034002a6c0cfd53d2d8b99d32953ecd229a' }, h("cat-input", { key: 'b0572967e133b2b099e9010f6e9ce67168f9592c', 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) }, h("span", { key: '5b21ff245c6f582803756c7b5177d735a1e360fb', slot: "label" }, this.hasSlottedLabel && h("slot", { key: 'e5dfa72756d8698f1e0bfc55e45fb0791c272157', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: 'ea2ac13fb8bddf7168448d7f3f50bd2703391393', class: "label-aria" }, " (HH:mm)")), h("div", { key: '50cedc1bf604b00ba062dff0881cad36f3eb62d3', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '238e1a4005a877ab8dd0fa2d23d2cafdf48dab38', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: '42367ea0ef47e851555ca3aae23d51169069158b', slot: "addon", placement: this.placement }, h("cat-button", { key: '8cd18784f5f4077b66dd0f5e134ff6fae83ce79b', 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 }), h("nav", { key: 'e89d88df8d6612eb48bb211954ef4b924f9e2d15', slot: "content", class: "cat-nav" }, h("ul", { key: '631bcc9f06b20e71fd175951671c66abaafaf5c0' }, this.timeArray().map(time => {
+        return (h(Host, { key: '4a30c978fb4c4aa6f1c412084013ab86316feb5a' }, h("cat-input", { key: 'a41b9ee3fde454364ef48689b12359e11ebb58c8', 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) }, h("span", { key: '9d8f9b3984b2ad08c45dce0e24c0b70c1db0e4cd', slot: "label" }, this.hasSlottedLabel && h("slot", { key: '676c762a9769f97e1eb9df102fbbd72dfd1c54c2', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '4af7aa9f2ad7b46af678cfea678d86d9b0248739', class: "label-aria" }, " (HH:mm)")), h("div", { key: 'ac9ab4a5ff2fed403c013b99a96a9cc6f4f99f8c', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '5ac32c5a59ac3bb4ca0489fda5fbbe4cf547901a', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: 'e68a03d15d25585829ea5f9b5972c9b463709ac5', slot: "addon", placement: this.placement }, h("cat-button", { key: '36d65533a6a5081513350a3c52283477a96613b8', 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 }), h("nav", { key: 'd90d221857f4c5508cdc68476a732f62ba7a1c04', slot: "content", class: "cat-nav" }, h("ul", { key: '255fe6f4fe316000b2b79ebb4638feec636ea230' }, this.timeArray().map(time => {
             const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (h("li", null, h("cat-button", { class: {
                     'cat-nav-item': true,
                     'time-disabled': disabled
                 }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
-        }))))), this.hasSlottedHint && (h("span", { key: 'f2d0bf13097fac363af4a309ac69b77114b01168', slot: "hint" }, h("slot", { key: 'e44ce224148d9bf82803a4eff9bbed89fbb04dc2', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (h("span", { key: '708612e8b91925ca2bce0c6e997fea9de5316ef2', slot: "hint" }, h("slot", { key: '13736745e51441ccfd65172a41b0aec13ec07d32', name: "hint" }))))));
     }
     timeArray() {
         const result = [];

package/dist/collection/components/cat-toggle/cat-toggle.js

@@ -58,13 +58,13 @@ export class CatToggle {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '021e20f2f3e8a37d085a11966df3980758fd4662' }, h("label", { key: '8454945f873a5cef9b0ab52fd533289059d5d77c', htmlFor: this.id, class: {
+        return (h(Host, { key: 'b906a3bd143e55e0863dc0ac70fc46a376f4db43' }, h("label", { key: 'b02e86fbbced890b105613308913e3cb6a6a4b6f', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: '7eb1ab9de417cf27856caf257422be3221c17d94', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'eb6c4b072ca903fd7df8a30e570be54c6df4133e', class: "toggle" }), h("span", { key: 'b07bb543bb4ac09fecd8ce1c0f0c1276846aa1e1', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '199cc06d3b54bb910c15449185b63d04f91163fd', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '43145cb96e769390309ed4003e94b04c1bea1a53', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'f0cbb265cec353a7f68432e369f0f2c7d042c3c7', class: "toggle-placeholder" }), h(CatFormHint, { key: '06692bcf33bf7a3202cc8977238003b96b9e4b8c', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: '002b1e2d072dd6af928f8f5a2d7587e9aff5c0ef', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'de90b93a6b57dafbf9b94b2a703561fa2fc1ad35', class: "toggle" }), h("span", { key: '728a1e8610898618ec56477d9b00b558e9273c43', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'feb997c081900bc9fb9d6673b8c95309d1cd5fd5', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '5c3836d9c44c4c69858afd27d9bddaaa88fc0ec8', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '72d2727df085f120545889f1742fdd8c5600c8d1', class: "toggle-placeholder" }), h(CatFormHint, { key: '30f07216d0c4b9b19c425089c8b009b5a8ee6d75', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;

package/dist/collection/scss/_snippets/_form-label.scss

@@ -18,11 +18,11 @@ $cat-input-height: 2.5rem;
 
 .label-container {
   flex-basis: var(--label-size, 33.33%);
+}
 
-  .label-wrapper {
-    display: flex;
-    gap: 0.25rem;
-  }
+.label-wrapper {
+  display: flex;
+  gap: 0.25rem;
 }
 
 .label-metadata {

package/dist/components/cat-checkbox2.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { C as CatFormHint } from './cat-form-hint.js';
+import { c as catI18nRegistry } from './cat-i18n-registry.js';
 
-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))}.align-center{align-items:center}.align-end{align-items:flex-end}";
+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}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{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}.label-container{flex-basis:var(--label-size, 33.33%)}.label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.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}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}: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))}.align-center{align-items:center}.align-end{align-items:flex-end}";
 const CatCheckboxStyle0 = catCheckboxCss;
 
 let nextUniqueId = 0;
@@ -31,6 +32,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends H
         this.labelLeft = false;
         this.alignment = 'top';
         this.nativeAttributes = undefined;
+        this.requiredMarker = 'none';
     }
     get id() {
         return this.identifier || this._id;
@@ -60,13 +62,13 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends H
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '93377a710ae9dca69f2377c48d18786f0d603479' }, h("label", { key: 'ee24cfed4f031089d3ab23611315634b584bf847', htmlFor: this.id, class: {
+        return (h(Host, { key: '8c0eb5c93eb3c1afd12a482cef1d00b693aaaa6b' }, h("label", { key: 'b547cfd3a6aec8c312f4cfbb12304749f4bb130a', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: '01bfbcdf293f523835d1610359a211adfcf2a954', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'e46c25bca3339feb71a2f59f7aef4ec757394131', class: "box", "aria-hidden": "true" }, h("svg", { key: '7ac0adfde7c9b388f0a2207d5320b95250efd940', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: 'a60caaa7644dc3607410634d505eecf836241da3', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '151c84f2ba3e0ea9a32ffb1a6cff3378d12bb802', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '057ca182a51794ced52f1034e9e9eb305da9797f', points: "1.5 5 10.5 5" }))), h("span", { key: 'c4fe4df0fd4e2cc1d3c2efc408a7216ddbb4c2f1', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '44578da3c031ab6c1393b20beaf3f930ed4c3c84', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'f8c397dd0db96c87a5d07a9cd9b6ef21015ce07c', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'b7860816d92e4738ae5865304e9177e11749331c', class: "box-placeholder" }), h(CatFormHint, { key: '6ca384cd514070939e9cafcd60091ecfc009a738', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: 'ba2e7b5af1943fe8c6ad4489edc2a0973ddda065', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '9df445a24845020c80a0f52383de1720dd7d867e', class: "box", "aria-hidden": "true" }, h("svg", { key: '30000e8be49bec99d68a543963cf351c7ff3fd7c', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: '793e1b85f1df92af1168696f5470c74b4ac56ebb', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '28519cf606fd5c4f1ce87e6682c49192d9c7ccdd', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: 'ef38c2175504c86bbcc930ab4e3e259600675849', points: "1.5 5 10.5 5" }))), h("span", { key: '34b01f1d76b7d840245822340e6cf15a3745d948', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: '088699ea29bf4fc53b784b798afc698f848343d2', name: "label" })) || this.label, h("span", { key: '4e4dfcc4b985ab4962fe42e88c09abd60170e5f2', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '5762ff2168f759ff2fd0d566eb99bd23e9a3154d', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '11b3596d3b6e7ae1b4356fc029f861e2407ff9ab', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: '8814d349c83078c76a948bd91fb66a593824ba87', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '99fc171926a6d467140824b22fb3d66848c9a1a3', class: "box-placeholder" }), h(CatFormHint, { key: '09b2a51545a4d0f731f0d42930c9d18f5e0cb512', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -104,6 +106,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends H
         "labelLeft": [4, "label-left"],
         "alignment": [1],
         "nativeAttributes": [16],
+        "requiredMarker": [1, "required-marker"],
         "hasSlottedLabel": [32],
         "hasSlottedHint": [32],
         "doFocus": [64],

package/dist/components/cat-checkbox2.js.map

@@ -1 +1 @@
-{"file":"cat-checkbox2.js","mappings":"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","names":[],"sources":["src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n  position: relative;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n\n  input {\n    right: 1px;\n    left: unset;\n  }\n}\n\ninput {\n  position: absolute;\n  width: $checkbox-width;\n  height: $checkbox-height;\n  margin: 0;\n  opacity: 0;\n  cursor: inherit;\n  left: 1px;\n  top: 0.5px;\n}\n\n.box-placeholder {\n  width: calc($checkbox-width + 2px);\n  flex-shrink: 0;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: $checkbox-height;\n  width: $checkbox-width;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.dark');\n  border-radius: cat-border-radius(s);\n  transition:\n    background-color cat-token('time.transition.s') ease,\n    border-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n  box-sizing: border-box;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 16px;\n    }\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  .is-disabled & {\n    background-color: cat-token('color.ui.background.muted');\n    border-color: cat-token('color.ui.border.dark');\n    stroke: cat-token('color.ui.font.muted');\n  }\n}\n\n:host(.cat-error) {\n  .box {\n    border: 1px solid cat-token('color.theme.danger.bg');\n  }\n\n  :checked + .box,\n  :indeterminate + .box {\n    background-color: cat-token('color.theme.danger.bg');\n    border-color: cat-token('color.theme.danger.bg');\n    stroke: cat-token('color.theme.danger.fill');\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n  min-width: 0;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n\n.align-center {\n  align-items: center;\n}\n\n.align-end {\n  align-items: flex-end;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly _id = `cat-checkbox-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop({ mutable: true }) indeterminate = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * Label of the checkbox which is presented in the UI\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the checkbox.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked checkbox.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked checkbox.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the checkbox, based on the checked state and value.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) resolvedValue: any = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the checkbox.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * The alignment of the checkbox.\n   */\n  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  /**\n   * Programmatically move focus to the checkbox. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the checkbox. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{\n            'is-hidden': this.labelHidden,\n            'is-disabled': this.disabled,\n            'label-left': this.labelLeft,\n            'align-center': this.alignment === 'center',\n            'align-end': this.alignment === 'bottom'\n          }}\n        >\n          <input\n            {...this.nativeAttributes}\n            part=\"input\"\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"box\" aria-hidden=\"true\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"box-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.indeterminate = this.input.indeterminate;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private updateResolved() {\n    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n  }\n}\n"],"version":3}
+{"file":"cat-checkbox2.js","mappings":"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","names":["i18n"],"sources":["src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n@use '_snippets/form-label';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n  position: relative;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n\n  input {\n    right: 1px;\n    left: unset;\n  }\n}\n\ninput {\n  position: absolute;\n  width: $checkbox-width;\n  height: $checkbox-height;\n  margin: 0;\n  opacity: 0;\n  cursor: inherit;\n  left: 1px;\n  top: 0.5px;\n}\n\n.box-placeholder {\n  width: calc($checkbox-width + 2px);\n  flex-shrink: 0;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: $checkbox-height;\n  width: $checkbox-width;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.dark');\n  border-radius: cat-border-radius(s);\n  transition:\n    background-color cat-token('time.transition.s') ease,\n    border-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n  box-sizing: border-box;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 16px;\n    }\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  .is-disabled & {\n    background-color: cat-token('color.ui.background.muted');\n    border-color: cat-token('color.ui.border.dark');\n    stroke: cat-token('color.ui.font.muted');\n  }\n}\n\n:host(.cat-error) {\n  .box {\n    border: 1px solid cat-token('color.theme.danger.bg');\n  }\n\n  :checked + .box,\n  :indeterminate + .box {\n    background-color: cat-token('color.theme.danger.bg');\n    border-color: cat-token('color.theme.danger.bg');\n    stroke: cat-token('color.theme.danger.fill');\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n  min-width: 0;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n\n.align-center {\n  align-items: center;\n}\n\n.align-end {\n  align-items: flex-end;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly _id = `cat-checkbox-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop({ mutable: true }) indeterminate = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * Label of the checkbox which is presented in the UI\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the checkbox.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked checkbox.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked checkbox.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the checkbox, based on the checked state and value.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) resolvedValue: any = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the checkbox.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * The alignment of the checkbox.\n   */\n  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'none';\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  /**\n   * Programmatically move focus to the checkbox. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the checkbox. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{\n            'is-hidden': this.labelHidden,\n            'is-disabled': this.disabled,\n            'label-left': this.labelLeft,\n            'align-center': this.alignment === 'center',\n            'align-end': this.alignment === 'bottom'\n          }}\n        >\n          <input\n            {...this.nativeAttributes}\n            part=\"input\"\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"box\" aria-hidden=\"true\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </span>\n          <span class={{ label: true, 'label-wrapper': !this.hasSlottedLabel }} part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n            <span class=\"label-metadata\">\n              {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                <span class=\"label-optional\" aria-hidden=\"true\">\n                  ({i18n.t('input.optional')})\n                </span>\n              )}\n              {this.required && this.requiredMarker?.startsWith('required') && (\n                <span class=\"label-optional\" aria-hidden=\"true\">\n                  ({i18n.t('input.required')})\n                </span>\n              )}\n            </span>\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"box-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.indeterminate = this.input.indeterminate;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private updateResolved() {\n    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n  }\n}\n"],"version":3}

package/dist/components/cat-date-inline2.js

@@ -107,7 +107,7 @@ function clampDate(min, date, max) {
     return new Date(Math.min(Math.max(date.getTime(), min?.getTime() ?? -Infinity), max?.getTime() ?? Infinity));
 }
 
-const catDateInlineCss = "/**\n * Auto-generated file. Do not edit directly.\n */\n/* stylelint-disable value-keyword-case */\n/* stylelint-enable value-keyword-case */\n.label {\n  overflow: hidden;\n  word-wrap: break-word;\n  word-break: break-word;\n}\n\n.input-field:not(.input-horizontal) .label-container.hidden,\n.textarea-field:not(.textarea-horizontal) .label-container.hidden,\n.select-field:not(.select-horizontal) .label-container.hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.label-container {\n  flex-basis: var(--label-size, 33.33%);\n}\n.label-container .label-wrapper {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.label-metadata {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 1;\n  justify-content: space-between;\n  gap: 0.25rem;\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108));\n}\n\n.label-optional,\n.label-character-count {\n  display: inline-flex;\n  align-items: center;\n  max-height: 1.25rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.label-character-count {\n  margin-left: auto;\n}\n\n.input-horizontal .label-container.hidden label,\n.textarea-horizontal .label-container.hidden label,\n.select-horizontal .label-container.hidden label {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n.input-horizontal .label-wrapper,\n.textarea-horizontal .label-wrapper,\n.select-horizontal .label-wrapper {\n  flex-direction: column;\n}\n.input-horizontal label,\n.textarea-horizontal label,\n.select-horizontal label {\n  min-height: 2.5rem;\n  display: inline-flex;\n  align-items: center;\n}\n.input-horizontal .label-metadata,\n.textarea-horizontal .label-metadata,\n.select-horizontal .label-metadata {\n  justify-content: flex-start;\n}\n.input-horizontal .label-metadata .label-character-count,\n.textarea-horizontal .label-metadata .label-character-count,\n.select-horizontal .label-metadata .label-character-count {\n  margin-left: 0;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.label-hidden,\n.label-container:empty {\n  display: none;\n}\n\n.picker {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.picker-head {\n  display: flex;\n  align-items: center;\n  container-type: inline-size;\n}\n.picker-head > :not(:last-child) {\n  margin-right: 0.25rem;\n}\n.picker-head h3 {\n  font-size: 0.9375rem;\n  line-height: 1.25rem;\n  font-weight: var(--cat-font-weight-head, 600);\n  font-feature-settings: \"pnum\";\n  flex: 1;\n  text-align: center;\n  margin-block: 0;\n}\n@container (min-width: 20rem) {\n  .picker-head h3 {\n    font-size: 1.125rem;\n    line-height: 1.5rem;\n    font-weight: var(--cat-font-weight-head, 600);\n    font-feature-settings: \"pnum\";\n  }\n  .picker-head > :not(:last-child) {\n    margin-right: 0.5rem;\n  }\n}\n\n.picker-grid {\n  display: grid;\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n  grid-template-rows: 2rem repeat(6, 1fr);\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-areas: \"h h h h h h h\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\";\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n.picker-weeks .picker-grid {\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n  grid-template-columns: 2rem repeat(7, 1fr);\n  grid-template-areas: \". h h h h h h h\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\";\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n\n.picker-grid-head {\n  grid-area: h;\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  place-items: end center;\n  padding-bottom: 0.5rem;\n}\n\n.picker-grid-weeks {\n  grid-area: w;\n  display: grid;\n  grid-template-rows: repeat(6, 1fr);\n  place-items: center right;\n  padding-right: 0.5rem;\n}\n\n.picker-grid-days {\n  grid-area: d;\n  display: grid;\n  grid-template-rows: repeat(6, 1fr);\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.picker-grid-head > *,\n.picker-grid-weeks > * {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: 600;\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n  text-decoration: none;\n}\n\n.date-other {\n  opacity: 0.5;\n}\n\n.date-disabled {\n  opacity: 0.25;\n}\n\n.picker-foot {\n  display: flex;\n  align-items: center;\n  width: min-content;\n  min-width: 100%;\n  justify-content: space-between;\n  container-type: inline-size;\n}\n.picker-foot > :not(:last-child) {\n  margin-right: 0.25rem;\n}\n@container (min-width: 20rem) {\n  .picker-foot > :not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  .picker-foot .cursor-help {\n    font-size: 0.875rem;\n    line-height: 1.125rem;\n    font-weight: var(--cat-font-weight-body, 400);\n  }\n}\n\n.cursor-help {\n  margin-block: 0;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: var(--cat-font-weight-body, 400);\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n  text-align: center;\n  flex: 1;\n}\n.cursor-help:first-child {\n  text-align: left;\n}\n.cursor-help:last-child {\n  text-align: right;\n}\n.cursor-help:only-child {\n  text-align: center;\n}\n\n.cursor-aria {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.date-range {\n  --cat-border-radius-m: 0;\n}";
+const catDateInlineCss = "/**\n * Auto-generated file. Do not edit directly.\n */\n/* stylelint-disable value-keyword-case */\n/* stylelint-enable value-keyword-case */\n.label {\n  overflow: hidden;\n  word-wrap: break-word;\n  word-break: break-word;\n}\n\n.input-field:not(.input-horizontal) .label-container.hidden,\n.textarea-field:not(.textarea-horizontal) .label-container.hidden,\n.select-field:not(.select-horizontal) .label-container.hidden {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.label-container {\n  flex-basis: var(--label-size, 33.33%);\n}\n\n.label-wrapper {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.label-metadata {\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 1;\n  justify-content: space-between;\n  gap: 0.25rem;\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108));\n}\n\n.label-optional,\n.label-character-count {\n  display: inline-flex;\n  align-items: center;\n  max-height: 1.25rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.label-character-count {\n  margin-left: auto;\n}\n\n.input-horizontal .label-container.hidden label,\n.textarea-horizontal .label-container.hidden label,\n.select-horizontal .label-container.hidden label {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n.input-horizontal .label-wrapper,\n.textarea-horizontal .label-wrapper,\n.select-horizontal .label-wrapper {\n  flex-direction: column;\n}\n.input-horizontal label,\n.textarea-horizontal label,\n.select-horizontal label {\n  min-height: 2.5rem;\n  display: inline-flex;\n  align-items: center;\n}\n.input-horizontal .label-metadata,\n.textarea-horizontal .label-metadata,\n.select-horizontal .label-metadata {\n  justify-content: flex-start;\n}\n.input-horizontal .label-metadata .label-character-count,\n.textarea-horizontal .label-metadata .label-character-count,\n.select-horizontal .label-metadata .label-character-count {\n  margin-left: 0;\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.label-hidden,\n.label-container:empty {\n  display: none;\n}\n\n.picker {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.picker-head {\n  display: flex;\n  align-items: center;\n  container-type: inline-size;\n}\n.picker-head > :not(:last-child) {\n  margin-right: 0.25rem;\n}\n.picker-head h3 {\n  font-size: 0.9375rem;\n  line-height: 1.25rem;\n  font-weight: var(--cat-font-weight-head, 600);\n  font-feature-settings: \"pnum\";\n  flex: 1;\n  text-align: center;\n  margin-block: 0;\n}\n@container (min-width: 20rem) {\n  .picker-head h3 {\n    font-size: 1.125rem;\n    line-height: 1.5rem;\n    font-weight: var(--cat-font-weight-head, 600);\n    font-feature-settings: \"pnum\";\n  }\n  .picker-head > :not(:last-child) {\n    margin-right: 0.5rem;\n  }\n}\n\n.picker-grid {\n  display: grid;\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n  grid-template-rows: 2rem repeat(6, 1fr);\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-areas: \"h h h h h h h\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\";\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n.picker-weeks .picker-grid {\n  /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n  grid-template-columns: 2rem repeat(7, 1fr);\n  grid-template-areas: \". h h h h h h h\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\";\n  /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n\n.picker-grid-head {\n  grid-area: h;\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  place-items: end center;\n  padding-bottom: 0.5rem;\n}\n\n.picker-grid-weeks {\n  grid-area: w;\n  display: grid;\n  grid-template-rows: repeat(6, 1fr);\n  place-items: center right;\n  padding-right: 0.5rem;\n}\n\n.picker-grid-days {\n  grid-area: d;\n  display: grid;\n  grid-template-rows: repeat(6, 1fr);\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.picker-grid-head > *,\n.picker-grid-weeks > * {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: 600;\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n  text-decoration: none;\n}\n\n.date-other {\n  opacity: 0.5;\n}\n\n.date-disabled {\n  opacity: 0.25;\n}\n\n.picker-foot {\n  display: flex;\n  align-items: center;\n  width: min-content;\n  min-width: 100%;\n  justify-content: space-between;\n  container-type: inline-size;\n}\n.picker-foot > :not(:last-child) {\n  margin-right: 0.25rem;\n}\n@container (min-width: 20rem) {\n  .picker-foot > :not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  .picker-foot .cursor-help {\n    font-size: 0.875rem;\n    line-height: 1.125rem;\n    font-weight: var(--cat-font-weight-body, 400);\n  }\n}\n\n.cursor-help {\n  margin-block: 0;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  font-weight: var(--cat-font-weight-body, 400);\n  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n  text-align: center;\n  flex: 1;\n}\n.cursor-help:first-child {\n  text-align: left;\n}\n.cursor-help:last-child {\n  text-align: right;\n}\n.cursor-help:only-child {\n  text-align: center;\n}\n\n.cursor-aria {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.date-range {\n  --cat-border-radius-m: 0;\n}";
 const CatDateInlineStyle0 = catDateInlineCss;
 
 let nextUniqueId = 0;
@@ -260,12 +260,12 @@ const CatDateInline = /*@__PURE__*/ proxyCustomElement(class CatDateInline exten
         const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
         const [dateStart, dateEnd] = this.getValue();
-        return (h(Host, { key: 'fb573205f50b9f793bcd8f88107be6e28d0b9dad', "aria-label": this.label || undefined }, h("div", { key: '81d5094ccc8f56c93d160a72c928c530da9bf947', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'ebd2d90309e689ed7461a91fd68ecd6c8dedd24d', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: '12e9aef96e6ec5db1007f7060e54cea4d490d495', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6120e89de299fedf25649c9293b9f1aad3e53c96', name: "label" })) || this.label, h("div", { key: '91c833bee02d1cdadee631df24794bd3625544fc', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f8fd54451ab0a7d62c5a572d5052377357dbdc2d', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '5dfb4b3ae8ac7276ba5b119bbe0ae50627f17fb9', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '3015096d18e1eb2fc3ad151602971393300142cf', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: '85232561729e6cad9f0c689255cbcaad3fdb41d2', class: "picker-head" }, h("cat-button", { key: 'e504a2e13094f3b286ab642dda5811e36469ab16', 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 }), h("cat-button", { key: '6edbea5866ebb34842f3854b2f01d491baf13f9a', 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 }), h("h3", { key: '8b4a2621adedf1cbe7843a060b095c7c13b8f1ba' }, this.getHeadline()), h("cat-button", { key: 'af5053d050c8f2b90c1296a85f933a48bda5316b', 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 }), h("cat-button", { key: '518c7da2705b55c55856446d481a61ae08b6326f', 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 })), h("div", { key: '70b0c1c279d3ecebf76d8df4b082c3df348aab32', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: 'e931b9d0e668673f1b954f8f59e1c35fa4389152', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+        return (h(Host, { key: '9d620285ba53ed8e71422cd8bdd443abe3188d70', "aria-label": this.label || undefined }, h("div", { key: '432bde580b38ff16a11381e9c93a53aa87a8f13d', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'b5229cb6bdf4a8a60bf323c3ca8285a145d83b48', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: 'd856310892880ed04f4d59868f6810544f20c5ec', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '4b971a43d555287c1c84a932e2846669feb59129', name: "label" })) || this.label, h("div", { key: '0ac7e6b8d0f40681430eff6807386610e2657ea5', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '12adc7368d44ddf22dfc2dcfe4b654a65c738ce3', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '28c34cf75a5c95e06e700d239d14ce34feedd907', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '8bb8a2c5ef998e404fbb6aecc2846bc4d65793ca', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: '36a79738e2cac2f3c3593ec64f14acf6f63e897c', class: "picker-head" }, h("cat-button", { key: 'c848ad038ccd38ae53b69fd5e7a8d2ac7438151d', 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 }), h("cat-button", { key: '0311f4cb24217cec5dbc4f59b0535140760d6d66', 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 }), h("h3", { key: 'd124526bee1d7be554038fb3205e4f5b1ae8c7c4' }, this.getHeadline()), h("cat-button", { key: '9f78c01028aeb550b15d594df0a3f15f6e953a76', 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 }), h("cat-button", { key: '9eab9639f408474cbef57fc70c902a10ecd97d2e', 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 })), h("div", { key: '2ce6761f92b3fc8eb7a9b966a65ddc65005a61ad', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: 'd919897bc9a357c272cfef3757a39cecd26f928e', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
             const day = (i + this.locale.weekInfo.firstDay) % 7;
             return h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
-        })), this.weeks && (h("div", { key: '4c9d503a6d6b51e52a06f5110c49d531e38ad8f3', class: "picker-grid-weeks" }, dateGrid
+        })), this.weeks && (h("div", { key: '61db2a1150d5f69ace95c997f8abc63e6859985a', class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: 'c617bb9cb7d02f93f063111d8245ce2adff80bb9', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '2e6bfa22e2f60b99e0d257be840471417adc15d5', 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;
@@ -282,7 +282,7 @@ const CatDateInline = /*@__PURE__*/ proxyCustomElement(class CatDateInline exten
                     'date-focusable': this.canFocus(day),
                     'date-disabled': !this.canClick(day)
                 }, 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()));
-        }))), h("div", { key: '9a5ebf824cda12748ca74812976c660404277f75', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: '84547723903adbe887b9e03a9849f15efbf5ac76', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '3b959f5d28bc5330687a1243c283a913feb54120', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: '25e7894bf4b153169f103e9350a2e52446d3a085', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '8ff0cfbb0d94fbdbcdb825462c12e2ab5d6497ea', class: "cursor-aria", "aria-live": "polite" })));
+        }))), h("div", { key: '66a6723cc2227fbed1c3f5632bfe6e9a85ca9a18', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: '2c980e8089f56cbd31a29359d2ef37ede1697250', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '4f8be893d801f2ca00229e5f8c6d366ac9d1abe9', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: 'ea6f3f3eb9621ca5b70ac1cefa84b4cfa0a3ac7f', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '0de5016aa28abbf3f8c159e807026e0e0c6d7b4e', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date, focus = true) {
         const [minDate, maxDate] = this.getMinMaxDate();