@haiilo/catalyst 0.6.0 → 0.7.0

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, H as Host, c as createEvent } from './index-fd12be19.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-039e6f5f.js';
 import { l as loglevel } from './loglevel-39a9e3f9.js';
+import { C as CatFormHint } from './cat-form-hint-dc443c7c.js';
 import { C as CatIconRegistry, a as CatI18nRegistry } from './cat-icon-registry-3ea75755.js';
 import { N as NotificationsService } from './cat-notification-cd98c266.js';
 
@@ -459,16 +460,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) {
     registerInstance(this, hostRef);
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId$5++}`;
+    this.id = `cat-checkbox-${nextUniqueId$6++}`;
+    this.hasSlottedLabel = false;
     /**
      * Checked state of the checkbox
      */
@@ -500,7 +502,7 @@ const CatCheckbox = class {
     }
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.error('[A11y] Missing ARIA label on checkbox', this);
     }
   }
@@ -514,9 +516,14 @@ const CatCheckbox = class {
     this.input.focus(options);
   }
   render() {
-    return (h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, 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) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, this.label)));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, 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) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -525,6 +532,7 @@ const CatCheckbox = class {
   onBlur(event) {
     this.catBlur.emit(event);
   }
+  get hostElement() { return getElement(this); }
 };
 CatCheckbox.style = catCheckboxCss;
 
@@ -552,9 +560,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) {
     registerInstance(this, hostRef);
@@ -562,8 +570,8 @@ const CatInput = class {
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
     this.i18n = 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.
      */
@@ -605,14 +613,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.error('[A11y] Missing ARIA label on input', this);
     }
   }
@@ -629,19 +631,23 @@ const CatInput = class {
    * Clear the input.
    */
   async clear() {
-    this.inputValue = '';
+    this.value = '';
   }
   render() {
-    return (h(Host, null, this.label && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.getMessage('input.optional'), ")"))))), h("div", { class: {
+    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.getMessage('input.optional'), ")"))))), h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled
       }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, 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 && (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 && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hint && 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 && (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 && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
-    this.inputValue = this.input.value;
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -650,9 +656,7 @@ const CatInput = class {
   onBlur(event) {
     this.catBlur.emit(event);
   }
-  static get watchers() { return {
-    "value": ["onValueChange"]
-  }; }
+  get hostElement() { return getElement(this); }
 };
 CatInput.style = catInputCss;
 
@@ -2891,13 +2895,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) {
     registerInstance(this, hostRef);
     this.catOpen = createEvent(this, "catOpen", 7);
     this.catClose = createEvent(this, "catClose", 7);
-    this.id = nextUniqueId$3++;
+    this.id = nextUniqueId$4++;
     /**
      * The placement of the menu.
      */
@@ -2992,16 +2996,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) {
     registerInstance(this, hostRef);
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.id = `cat-radio-${++nextUniqueId$2}`;
+    this.id = `cat-radio-${++nextUniqueId$3}`;
+    this.hasSlottedLabel = false;
     /**
      * Whether this radio is checked.
      */
@@ -3024,7 +3029,7 @@ const CatRadio = class {
     this.required = false;
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.error('[A11y] Missing ARIA label on radio', this);
     }
   }
@@ -3038,9 +3043,14 @@ const CatRadio = class {
     this.input.focus(options);
   }
   render() {
-    return (h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("span", { class: "radio" }, 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) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, this.label)));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("span", { class: "radio" }, 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) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onChange(event) {
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -3049,6 +3059,7 @@ const CatRadio = class {
   onBlur(event) {
     this.catBlur.emit(event);
   }
+  get hostElement() { return getElement(this); }
 };
 CatRadio.style = catRadioCss;
 
@@ -4451,6 +4462,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) {
+    registerInstance(this, hostRef);
+    this.tabClick = 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 h(Host, null);
+  }
+  get hostElement() { return 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) {
+    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 (h(Host, null, this.tabs.map((tab) => {
+      return (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 getElement(this); }
+  static get watchers() { return {
+    "activeTabId": ["onActiveTabChanged"]
+  }; }
+};
+CatTabs.style = catTabsCss;
+
 const catToastDemoCss = ":host{display:block}";
 
 const CatToastDemo = class {
@@ -4494,7 +4606,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 {
@@ -4504,6 +4616,7 @@ const CatToggle = class {
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
     this.id = `cat-toggle-${nextUniqueId$1++}`;
+    this.hasSlottedLabel = false;
     /**
      * Checked state of the toggle.
      */
@@ -4526,7 +4639,7 @@ const CatToggle = class {
     this.required = false;
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       loglevel.error('[A11y] Missing ARIA label on toggle', this);
     }
   }
@@ -4540,9 +4653,14 @@ const CatToggle = class {
     this.input.focus(options);
   }
   render() {
-    return (h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, 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) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, this.label)));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, 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) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
+    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -4551,6 +4669,7 @@ const CatToggle = class {
   onBlur(event) {
     this.catBlur.emit(event);
   }
+  get hostElement() { return getElement(this); }
 };
 CatToggle.style = catToggleCss;
 
@@ -4602,6 +4721,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));
     }
@@ -4615,6 +4735,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));
     }
@@ -4649,34 +4770,37 @@ 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');
   }
 };
 CatTooltip.OFFSET = 4;
 CatTooltip.style = catTooltipCss;
 
-export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatRadio as cat_radio, CatScrollable as cat_scrollable, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
+export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatRadio as cat_radio, CatScrollable as cat_scrollable, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
 
-//# sourceMappingURL=cat-alert_16.entry.js.map
+//# sourceMappingURL=cat-alert_18.entry.js.map