@haiilo/catalyst 2.0.3 → 2.1.1

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2134f1b.js');
+const index = require('./index-e540e911.js');
 const catIconRegistry = require('./cat-icon-registry-2a54df3d.js');
 const firstTabbable = require('./first-tabbable-7966cf1c.js');
 
@@ -384,14 +384,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) {
@@ -550,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));
   }
@@ -1948,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.
    */
@@ -2129,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));
   }
@@ -2207,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();
@@ -6179,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();
     }
   }
@@ -6262,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));
   }
@@ -6334,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));
   }
@@ -6368,13 +6452,14 @@ CatToggle.style = catToggleCss;
 
 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
-const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
+const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-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}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
 
 let nextUniqueId = 0;
 const CatTooltip = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.id = `cat-tooltip-${nextUniqueId++}`;
+    this.hidden = false;
     /**
      * The content of the tooltip.
      */
@@ -6433,6 +6518,9 @@ const CatTooltip = class {
       (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseleave', this.hideListener.bind(this));
     }
   }
+  componentWillRender() {
+    this.hidden = !this.content || this.disabled;
+  }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e, _f;
     if (isTouchDevice) {
@@ -6448,11 +6536,12 @@ const CatTooltip = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, index.h("slot", null)), this.content && !this.disabled && (index.h("div", { ref: el => (this.tooltip = el), id: this.id, class: {
+    return (index.h(index.Host, null, index.h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, index.h("slot", null)), index.h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
         tooltip: true,
+        'tooltip-hidden': this.hidden,
         'tooltip-round': this.round,
         [`tooltip-${this.size}`]: Boolean(this.size)
-      } }, this.content))));
+      } }, this.content)));
   }
   get isTabbable() {
     return firstTabbable.firstTabbable(this.trigger);
@@ -6475,8 +6564,7 @@ const CatTooltip = class {
   showListener() {
     window.clearTimeout(this.hideTimeout);
     this.showTimeout = window.setTimeout(() => {
-      var _a;
-      (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
+      this.showTooltip();
     }, this.showDelay);
   }
   hideListener() {
@@ -6489,8 +6577,7 @@ const CatTooltip = class {
   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.showTooltip();
     }, this.longTouchDuration);
   }
   touchEndListener() {
@@ -6502,6 +6589,10 @@ const CatTooltip = class {
     var _a;
     (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
   }
+  showTooltip() {
+    var _a;
+    !this.hidden && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show'));
+  }
 };
 CatTooltip.OFFSET = 4;
 CatTooltip.style = catTooltipCss;