@haiilo/catalyst 2.0.3 → 2.1.0

package/dist/esm/cat-alert_22.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-033048ed.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-c2a28ebb.js';
 import { l as loglevel, e as CatIconRegistry, b as catI18nRegistry } from './cat-icon-registry-d537b18b.js';
 import { c as createFocusTrap, t as tabbable, f as firstTabbable } from './first-tabbable-4a00de61.js';
 
@@ -380,14 +380,28 @@ const CatButton = class {
     }
   }
   /**
-   * Sets focus on the button. Use this method instead of `button.focus()`.
+   * Programmatically move focus to the button. Use this method instead of
+   * `button.focus()`.
    *
    * @param options An optional object providing options to control aspects of
    * the focusing process.
    */
-  async setFocus(options) {
+  async doFocus(options) {
     this.button.focus(options);
   }
+  /**
+   * Programmatically remove focus from the button. Use this method instead of
+   * `button.blur()`.
+   */
+  async doBlur() {
+    this.button.blur();
+  }
+  /**
+   * Programmatically simulate a click on the button.
+   */
+  async doClick() {
+    this.button.click();
+  }
   render() {
     var _a;
     if (this.url) {
@@ -546,14 +560,28 @@ const CatCheckbox = class {
     }
   }
   /**
-   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.
+   * Programmatically move focus to the checkbox. Use this method instead of
+   * `input.focus()`.
    *
    * @param options An optional object providing options to control aspects of
    * the focusing process.
    */
-  async setFocus(options) {
+  async doFocus(options) {
     this.input.focus(options);
   }
+  /**
+   * Programmatically remove focus from the checkbox. Use this method instead of
+   * `input.blur()`.
+   */
+  async doBlur() {
+    this.input.blur();
+  }
+  /**
+   * Programmatically simulate a click on the checkbox.
+   */
+  async doClick() {
+    this.input.click();
+  }
   render() {
     return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.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));
   }
@@ -1944,14 +1972,28 @@ const CatInput = class {
     }
   }
   /**
-   * Sets focus on the input. Use this method instead of `input.focus()`.
+   * Programmatically move focus to the input. Use this method instead of
+   * `input.focus()`.
    *
    * @param options An optional object providing options to control aspects of
    * the focusing process.
    */
-  async setFocus(options) {
+  async doFocus(options) {
     this.input.focus(options);
   }
+  /**
+   * Programmatically remove focus from the input. Use this method instead of
+   * `input.blur()`.
+   */
+  async doBlur() {
+    this.input.blur();
+  }
+  /**
+   * Programmatically simulate a click on the input.
+   */
+  async doClick() {
+    this.input.click();
+  }
   /**
    * Clear the input.
    */
@@ -2125,14 +2167,28 @@ const CatRadio = class {
     }
   }
   /**
-   * Sets focus on the radio. Use this method instead of `radio.focus()`.
+   * Programmatically move focus to the radio button. Use this method instead of
+   * `input.focus()`.
    *
    * @param options An optional object providing options to control aspects of
    * the focusing process.
    */
-  async setFocus(options) {
+  async doFocus(options) {
     this.input.focus(options);
   }
+  /**
+   * Programmatically remove focus from the radio button. Use this method
+   * instead of `input.blur()`.
+   */
+  async doBlur() {
+    this.input.blur();
+  }
+  /**
+   * Programmatically simulate a click on the radio button.
+   */
+  async doClick() {
+    this.input.click();
+  }
   render() {
     return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, 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));
   }
@@ -2203,7 +2259,7 @@ const CatRadioGroup = class {
       const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);
       const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
       const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
-      targetElements[targetIdx].setFocus();
+      targetElements[targetIdx].doFocus();
       (_b = (_a = targetElements[targetIdx].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
       this.updateTabIndex();
       event.preventDefault();
@@ -6175,7 +6231,7 @@ const CatTabs = class {
       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();
+      targetElements[targetIdx].doFocus();
       event.preventDefault();
     }
   }
@@ -6258,14 +6314,28 @@ const CatTextarea = class {
     d(this.textarea);
   }
   /**
-   * Sets focus on the textarea. Use this method instead of `textarea.focus()`.
+   * Programmatically move focus to the textarea. Use this method instead of
+   * `textarea.focus()`.
    *
    * @param options An optional object providing options to control aspects of
    * the focusing process.
    */
-  async setFocus(options) {
+  async doFocus(options) {
     this.textarea.focus(options);
   }
+  /**
+   * Programmatically remove focus from the textarea. Use this method instead of
+   * `textarea.blur()`.
+   */
+  async doBlur() {
+    this.textarea.blur();
+  }
+  /**
+   * Programmatically simulate a click on the textarea.
+   */
+  async doClick() {
+    this.textarea.click();
+  }
   render() {
     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" }, "(Optional)"))))), h("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) }), this.hintSection));
   }
@@ -6330,14 +6400,28 @@ const CatToggle = class {
     }
   }
   /**
-   * Sets focus on the toggle. Use this method instead of `toggle.focus()`.
+   * Programmatically move focus to the toggle. Use this method instead of
+   * `input.focus()`.
    *
    * @param options An optional object providing options to control aspects of
    * the focusing process.
    */
-  async setFocus(options) {
+  async doFocus(options) {
     this.input.focus(options);
   }
+  /**
+   * Programmatically remove focus from the toggle. Use this method instead of
+   * `input.blur()`.
+   */
+  async doBlur() {
+    this.input.blur();
+  }
+  /**
+   * Programmatically simulate a click on the toggle.
+   */
+  async doClick() {
+    this.input.click();
+  }
   render() {
     return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.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));
   }