@haiilo/catalyst 2.0.2 → 2.1.0

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

@@ -384,19 +384,34 @@ 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) {
       return (index.h("a", { ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
           'cat-button': true,
+          'cat-button-active': this.active,
           'cat-button-icon': this.isIconButton,
           'cat-button-round': this.round,
           'cat-button-loading': this.loading,
@@ -549,14 +564,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 (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.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) }), 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));
   }
@@ -1947,14 +1976,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.
    */
@@ -2128,14 +2171,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 (index.h(index.Host, null, index.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' }, 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));
   }
@@ -2206,7 +2263,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();
@@ -6178,7 +6235,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();
     }
   }
@@ -6261,14 +6318,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 (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" }, "(Optional)"))))), index.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));
   }
@@ -6333,14 +6404,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 (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.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) }), 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));
   }