@haiilo/catalyst 0.6.0 → 0.7.0

package/dist/cjs/{cat-alert_16.cjs.entry.js → cat-alert_18.cjs.entry.js}

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-5d72f0e4.js');
+const index = require('./index-499bad41.js');
 const loglevel = require('./loglevel-c9b2d01f.js');
+const catFormHint = require('./cat-form-hint-93a6936b.js');
 const catIconRegistry = require('./cat-icon-registry-49b11b51.js');
 const catNotification = require('./cat-notification-156f4cf5.js');
 
@@ -463,16 +464,17 @@ const CatCard = class {
 };
 CatCard.style = catCardCss;
 
-const catCheckboxCss = ":host{display:flex;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{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}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.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, 105, 118, 135))}";
+const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{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}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.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, 105, 118, 135))}";
 
-let nextUniqueId$5 = 0;
+let nextUniqueId$6 = 0;
 const CatCheckbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId$5++}`;
+    this.id = `cat-checkbox-${nextUniqueId$6++}`;
+    this.hasSlottedLabel = false;
     /**
      * Checked state of the checkbox
      */
@@ -504,7 +506,7 @@ const CatCheckbox = class {
     }
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.loglevel.error('[A11y] Missing ARIA label on checkbox', this);
     }
   }
@@ -518,9 +520,14 @@ const CatCheckbox = class {
     this.input.focus(options);
   }
   render() {
-    return (index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, index.h("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, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), index.h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, index.h("svg", { class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { points: "1.5 5 10.5 5" }))), index.h("span", { class: "label", part: "label" }, this.label)));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, index.h("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, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), index.h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, index.h("svg", { class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { points: "1.5 5 10.5 5" }))), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onInput(event) {
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -529,6 +536,7 @@ const CatCheckbox = class {
   onBlur(event) {
     this.catBlur.emit(event);
   }
+  get hostElement() { return index.getElement(this); }
 };
 CatCheckbox.style = catCheckboxCss;
 
@@ -556,9 +564,9 @@ const CatIcon = class {
 };
 CatIcon.style = catIconCss;
 
-const catInputCss = ":host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.input-hint{font-size:0.875rem;line-height:1rem;margin:0}";
+const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 
-let nextUniqueId$4 = 0;
+let nextUniqueId$5 = 0;
 const CatInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -566,8 +574,8 @@ const CatInput = class {
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this.i18n = catIconRegistry.CatI18nRegistry.getInstance();
-    this.id = `cat-input-${nextUniqueId$4++}`;
-    this.inputValue = '';
+    this.id = `cat-input-${nextUniqueId$5++}`;
+    this.hasSlottedLabel = false;
     /**
      * Whether the input should show a clear button.
      */
@@ -609,14 +617,8 @@ const CatInput = class {
      */
     this.type = 'text';
   }
-  onValueChange(value) {
-    this.inputValue = '' + (value !== null && value !== void 0 ? value : '');
-  }
-  componentWillLoad() {
-    this.onValueChange(this.value);
-  }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.loglevel.error('[A11y] Missing ARIA label on input', this);
     }
   }
@@ -633,19 +635,23 @@ const CatInput = class {
    * Clear the input.
    */
   async clear() {
-    this.inputValue = '';
+    this.value = '';
   }
   render() {
-    return (index.h(index.Host, null, this.label && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.getMessage('input.optional'), ")"))))), index.h("div", { class: {
+    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.getMessage('input.optional'), ")"))))), index.h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled
       }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && index.h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), index.h("div", { class: "input-inner-wrapper" }, index.h("input", { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.inputValue, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.inputValue && (index.h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.getMessage('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && index.h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (index.h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hint && index.h("p", { class: "input-hint" }, this.hint)));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (index.h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.getMessage('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && index.h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (index.h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onInput(event) {
-    this.inputValue = this.input.value;
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -654,9 +660,7 @@ const CatInput = class {
   onBlur(event) {
     this.catBlur.emit(event);
   }
-  static get watchers() { return {
-    "value": ["onValueChange"]
-  }; }
+  get hostElement() { return index.getElement(this); }
 };
 CatInput.style = catInputCss;
 
@@ -2895,13 +2899,13 @@ const firstTabbable = (container) => {
 
 const catMenuCss = ":host{display:contents}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}";
 
-let nextUniqueId$3 = 0;
+let nextUniqueId$4 = 0;
 const CatMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.catOpen = index.createEvent(this, "catOpen", 7);
     this.catClose = index.createEvent(this, "catClose", 7);
-    this.id = nextUniqueId$3++;
+    this.id = nextUniqueId$4++;
     /**
      * The placement of the menu.
      */
@@ -2996,16 +3000,17 @@ const CatMenu = class {
 CatMenu.OFFSET = 4;
 CatMenu.style = catMenuCss;
 
-const catRadioCss = ":host{display:flex;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.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, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
+const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.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, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
 
-let nextUniqueId$2 = 0;
+let nextUniqueId$3 = 0;
 const CatRadio = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-radio-${++nextUniqueId$2}`;
+    this.id = `cat-radio-${++nextUniqueId$3}`;
+    this.hasSlottedLabel = false;
     /**
      * Whether this radio is checked.
      */
@@ -3028,7 +3033,7 @@ const CatRadio = class {
     this.required = false;
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.loglevel.error('[A11y] Missing ARIA label on radio', this);
     }
   }
@@ -3042,9 +3047,14 @@ const CatRadio = class {
     this.input.focus(options);
   }
   render() {
-    return (index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, index.h("span", { class: "radio" }, index.h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), index.h("span", { class: "circle" })), index.h("span", { class: "label", part: "label" }, this.label)));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, index.h("span", { class: "radio" }, index.h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), index.h("span", { class: "circle" })), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onChange(event) {
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -3053,6 +3063,7 @@ const CatRadio = class {
   onBlur(event) {
     this.catBlur.emit(event);
   }
+  get hostElement() { return index.getElement(this); }
 };
 CatRadio.style = catRadioCss;
 
@@ -4455,6 +4466,107 @@ const CatSpinner = class {
 };
 CatSpinner.style = catSpinnerCss;
 
+const catTabCss = ":host{display:block}:host([hidden]){display:none}";
+
+let nextUniqueId$2 = 0;
+const CatTab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabClick = index.createEvent(this, "tabClick", 7);
+    /**
+     * The label of the tab.
+     */
+    this.label = '';
+    /**
+     * Hide the actual button content and only display the tab.
+     */
+    this.iconOnly = false;
+    /**
+     * Display the icon on the right.
+     */
+    this.iconRight = false;
+    /**
+     * Specifies that the tab should be deactivated.
+     */
+    this.deactivated = false;
+  }
+  connectedCallback() {
+    if (!this.hostElement.id) {
+      this.hostElement.id = `cat-tab-${nextUniqueId$2++}`;
+    }
+  }
+  onClick(event) {
+    this.tabClick.emit(event);
+  }
+  render() {
+    return index.h(index.Host, null);
+  }
+  get hostElement() { return index.getElement(this); }
+};
+CatTab.style = catTabCss;
+
+const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 #d7dbe0}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.tab{padding:0.5rem}.tab.tab-active{box-shadow:inset 0 -3px 0 0 #207f8a}";
+
+const CatTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabs = [];
+    this.buttons = [];
+    /**
+     * The ID of the active tab.
+     */
+    this.activeTab = '';
+    /**
+     * The alignment of the tabs.
+     */
+    this.tabsAlign = 'left';
+  }
+  onActiveTabChanged(newActiveTab) {
+    const activeTab = this.tabs.find(value => value.id === newActiveTab);
+    activeTab === null || activeTab === void 0 ? void 0 : activeTab.click();
+  }
+  componentWillLoad() {
+    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+    if (this.tabs.length) {
+      this.activeTabId = this.activeTab;
+    }
+  }
+  onKeydown(event) {
+    var _a;
+    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
+      const targetElements = this.buttons.filter(button => !button.disabled);
+      const activeElement = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+      const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
+      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
+      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+      targetElements[targetIdx].setFocus();
+      event.preventDefault();
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, this.tabs.map((tab) => {
+      return (index.h("cat-button", { ref: el => el && this.updateButtonsRef(el), buttonId: tab.id, role: "tab", part: "tab", class: {
+          tab: true,
+          'tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)
+        }, color: this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => (this.activeTabId = tab.id) }, tab.label));
+    })));
+  }
+  updateButtonsRef(button) {
+    const indexOf = this.buttons.indexOf(button);
+    if (indexOf >= 0) {
+      this.buttons[indexOf] = button;
+    }
+    else {
+      this.buttons.push(button);
+    }
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "activeTabId": ["onActiveTabChanged"]
+  }; }
+};
+CatTabs.style = catTabsCss;
+
 const catToastDemoCss = ":host{display:block}";
 
 const CatToastDemo = class {
@@ -4498,7 +4610,7 @@ const CatToastDemo = class {
 };
 CatToastDemo.style = catToastDemoCss;
 
-const catToggleCss = ":host{display:flex;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{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}.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:#d7dbe0;transition:background-color 0.13s ease}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 32, 127, 138))}: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 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem))}.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, 105, 118, 135))}";
+const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{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}.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:#d7dbe0;transition:background-color 0.13s ease}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 32, 127, 138))}: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 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem))}.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, 105, 118, 135))}";
 
 let nextUniqueId$1 = 0;
 const CatToggle = class {
@@ -4508,6 +4620,7 @@ const CatToggle = class {
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this.id = `cat-toggle-${nextUniqueId$1++}`;
+    this.hasSlottedLabel = false;
     /**
      * Checked state of the toggle.
      */
@@ -4530,7 +4643,7 @@ const CatToggle = class {
     this.required = false;
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.loglevel.error('[A11y] Missing ARIA label on toggle', this);
     }
   }
@@ -4544,9 +4657,14 @@ const CatToggle = class {
     this.input.focus(options);
   }
   render() {
-    return (index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, index.h("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) }), index.h("span", { class: "toggle", part: "toggle" }), index.h("span", { class: "label", part: "label" }, this.label)));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, index.h("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) }), index.h("span", { class: "toggle", part: "toggle" }), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onInput(event) {
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -4555,6 +4673,7 @@ const CatToggle = class {
   onBlur(event) {
     this.catBlur.emit(event);
   }
+  get hostElement() { return index.getElement(this); }
 };
 CatToggle.style = catToggleCss;
 
@@ -4606,6 +4725,7 @@ const CatTooltip = class {
       autoUpdate(this.trigger, this.tooltip, () => this.update());
     }
     if (isTouchDevice) {
+      window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));
       (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.addEventListener('touchstart', this.touchStartListener.bind(this));
       (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.addEventListener('touchend', this.touchEndListener.bind(this));
     }
@@ -4619,6 +4739,7 @@ const CatTooltip = class {
   disconnectedCallback() {
     var _a, _b, _c, _d, _e, _f;
     if (isTouchDevice) {
+      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));
       (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.removeEventListener('touchstart', this.touchStartListener.bind(this));
       (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchend', this.touchEndListener.bind(this));
     }
@@ -4653,28 +4774,31 @@ const CatTooltip = class {
   showListener() {
     window.clearTimeout(this.hideTimeout);
     this.showTimeout = window.setTimeout(() => {
-      var _a, _b;
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.focus();
-      (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.classList.add('tooltip-show');
+      var _a;
+      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
     }, this.showDelay);
   }
   hideListener() {
     window.clearTimeout(this.showTimeout);
     this.hideTimeout = window.setTimeout(() => {
-      var _a, _b;
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.blur();
-      (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.classList.remove('tooltip-show');
+      var _a;
+      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
     }, this.hideDelay);
   }
-  touchStartListener() {
+  touchStartListener(event) {
+    event.stopPropagation();
     this.touchTimeout = window.setTimeout(() => {
       var _a;
       (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
     }, this.longTouchDuration);
   }
   touchEndListener() {
+    if (this.touchTimeout) {
+      window.clearTimeout(this.touchTimeout);
+    }
+  }
+  windowTouchStartListener() {
     var _a;
-    window.clearTimeout(this.touchTimeout);
     (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
   }
 };
@@ -4694,8 +4818,10 @@ exports.cat_radio = CatRadio;
 exports.cat_scrollable = CatScrollable;
 exports.cat_skeleton = CatSkeleton;
 exports.cat_spinner = CatSpinner;
+exports.cat_tab = CatTab;
+exports.cat_tabs = CatTabs;
 exports.cat_toast_demo = CatToastDemo;
 exports.cat_toggle = CatToggle;
 exports.cat_tooltip = CatTooltip;
 
-//# sourceMappingURL=cat-alert_16.cjs.entry.js.map
+//# sourceMappingURL=cat-alert_18.cjs.entry.js.map