@haiilo/catalyst 8.1.0 → 8.2.0

package/dist/components/cat-toggle.js

@@ -6,113 +6,113 @@ const catToggleCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-
 
 let nextUniqueId = 0;
 const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class CatToggle extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catChange = createEvent(this, "catChange", 7);
-    this.catFocus = createEvent(this, "catFocus", 7);
-    this.catBlur = createEvent(this, "catBlur", 7);
-    this._id = `cat-toggle-${nextUniqueId++}`;
-    this.hasSlottedLabel = false;
-    this.hasSlottedHint = false;
-    this.checked = false;
-    this.disabled = false;
-    this.identifier = undefined;
-    this.label = '';
-    this.labelHidden = false;
-    this.name = undefined;
-    this.required = false;
-    this.value = undefined;
-    this.noValue = undefined;
-    this.resolvedValue = null;
-    this.hint = undefined;
-    this.labelLeft = false;
-    this.nativeAttributes = undefined;
-  }
-  get id() {
-    return this.identifier || this._id;
-  }
-  componentWillLoad() {
-    this.updateResolved();
-  }
-  componentWillRender() {
-    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
-    this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    if (!this.label && !this.hasSlottedLabel) {
-      loglevel.warn('[A11y] Missing ARIA label on toggle', this);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catChange = createEvent(this, "catChange", 7);
+        this.catFocus = createEvent(this, "catFocus", 7);
+        this.catBlur = createEvent(this, "catBlur", 7);
+        this._id = `cat-toggle-${nextUniqueId++}`;
+        this.hasSlottedLabel = false;
+        this.hasSlottedHint = false;
+        this.checked = false;
+        this.disabled = false;
+        this.identifier = undefined;
+        this.label = '';
+        this.labelHidden = false;
+        this.name = undefined;
+        this.required = false;
+        this.value = undefined;
+        this.noValue = undefined;
+        this.resolvedValue = null;
+        this.hint = undefined;
+        this.labelLeft = false;
+        this.nativeAttributes = undefined;
     }
-  }
-  /**
-   * 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 doFocus(options) {
-    this.input.focus(options);
-  }
-  /**
-   * Programmatically remove focus from the toggle. Use this method instead of
-   * `input.blur()`.
-   */
-  async doBlur() {
-    this.input.blur();
-  }
-  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", { ...this.nativeAttributes, part: "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), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { class: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
-  }
-  get hasHint() {
-    return !!this.hint || !!this.hasSlottedHint;
-  }
-  onInput() {
-    this.checked = this.input.checked;
-    this.updateResolved();
-    this.catChange.emit(this.resolvedValue);
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onBlur(event) {
-    this.catBlur.emit(event);
-  }
-  updateResolved() {
-    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
-  }
-  get hostElement() { return this; }
-  static get style() { return catToggleCss; }
+    get id() {
+        return this.identifier || this._id;
+    }
+    componentWillLoad() {
+        this.updateResolved();
+    }
+    componentWillRender() {
+        this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+        this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+        if (!this.label && !this.hasSlottedLabel) {
+            loglevel.warn('[A11y] Missing ARIA label on toggle', this);
+        }
+    }
+    /**
+     * 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 doFocus(options) {
+        this.input.focus(options);
+    }
+    /**
+     * Programmatically remove focus from the toggle. Use this method instead of
+     * `input.blur()`.
+     */
+    async doBlur() {
+        this.input.blur();
+    }
+    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", { ...this.nativeAttributes, part: "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), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { class: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+    }
+    get hasHint() {
+        return !!this.hint || !!this.hasSlottedHint;
+    }
+    onInput() {
+        this.checked = this.input.checked;
+        this.updateResolved();
+        this.catChange.emit(this.resolvedValue);
+    }
+    onFocus(event) {
+        this.catFocus.emit(event);
+    }
+    onBlur(event) {
+        this.catBlur.emit(event);
+    }
+    updateResolved() {
+        this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
+    }
+    get hostElement() { return this; }
+    static get style() { return catToggleCss; }
 }, [1, "cat-toggle", {
-    "checked": [1028],
-    "disabled": [4],
-    "identifier": [1],
-    "label": [1],
-    "labelHidden": [4, "label-hidden"],
-    "name": [1],
-    "required": [4],
-    "value": [8],
-    "noValue": [8, "no-value"],
-    "resolvedValue": [1032, "resolved-value"],
-    "hint": [1],
-    "labelLeft": [4, "label-left"],
-    "nativeAttributes": [16],
-    "hasSlottedLabel": [32],
-    "hasSlottedHint": [32],
-    "doFocus": [64],
-    "doBlur": [64]
-  }]);
+        "checked": [1028],
+        "disabled": [4],
+        "identifier": [1],
+        "label": [1],
+        "labelHidden": [4, "label-hidden"],
+        "name": [1],
+        "required": [4],
+        "value": [8],
+        "noValue": [8, "no-value"],
+        "resolvedValue": [1032, "resolved-value"],
+        "hint": [1],
+        "labelLeft": [4, "label-left"],
+        "nativeAttributes": [16],
+        "hasSlottedLabel": [32],
+        "hasSlottedHint": [32],
+        "doFocus": [64],
+        "doBlur": [64]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-toggle"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-toggle":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatToggle$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatToggle$1);
+            }
+            break;
+    } });
 }
 
 const CatToggle = CatToggle$1;

package/dist/components/cat-toggle.js.map

@@ -1 +1 @@
-{"file":"cat-toggle.js","mappings":"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","names":["CatToggle","log"],"sources":["src/components/cat-toggle/cat-toggle.scss?tag=cat-toggle&encapsulation=shadow","src/components/cat-toggle/cat-toggle.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$toggle-width: 2rem;\n$toggle-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\ninput {\n  position: absolute;\n  margin: 0;\n  width: $toggle-width;\n  height: $toggle-height;\n  opacity: 0;\n  cursor: inherit;\n}\n\n.toggle-placeholder {\n  width: calc($toggle-width + 1px);\n}\n\n.toggle {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: $toggle-width;\n  height: $toggle-height;\n  border-radius: 10rem;\n  background-color: cat-token('color.ui.border.dark');\n  transition: background-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 1rem;\n    height: 1rem;\n    background: #fff;\n    border-radius: 10rem;\n    transform: translateX(calc(2px - 0.5rem));\n    transition: transform cat-token('time.transition.s') linear;\n    @include cat-elevation(2);\n\n    :checked + & {\n      transform: translateX(calc(-2px + 0.5rem));\n      background: cat-token('color.theme.primary.fill');\n    }\n  }\n\n  .is-disabled & {\n    background-color: cat-token('color.ui.border.dark');\n  }\n}\n\n:host(.cat-error) {\n  .toggle {\n    background-color: cat-token('color.theme.danger.bg', 0.2);\n  }\n\n  :checked + .toggle {\n    background-color: cat-token('color.theme.danger.bg');\n\n    &::after {\n      background: cat-token('color.theme.danger.fill');\n    }\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the toggle, based on the checked state, value and noValue.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) resolvedValue: any = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            part=\"input\"\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private updateResolved() {\n    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n  }\n}\n"],"version":3}
+{"file":"cat-toggle.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,uvEAAuvE;;ACI5wE,IAAI,YAAY,GAAG,CAAC,CAAC;MAgBRA,WAAS;;;;;;;;QACH,QAAG,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;+BAS3B,KAAK;8BAEN,KAAK;uBAKI,KAAK;wBAKrB,KAAK;;qBAUR,EAAE;2BAKI,KAAK;;wBAUR,KAAK;;;6BAkBsB,IAAI;;yBAU9B,KAAK;;;IAzEzB,IAAY,EAAE;QACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;KACpC;IA8FD,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACxE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACxCC,QAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;SACvD;KACF;;;;;;;;IAUD,MAAM,OAAO,CAAC,OAAsB;QAClC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC3B;;;;;IAOD,MAAM,MAAM;QACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACnB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACH,aACE,OAAO,EAAE,IAAI,CAAC,EAAE,EAChB,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IAEpG,gBACM,IAAI,CAAC,gBAAgB,EACzB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,sBACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,GAAG,OAAO,GAAG,SAAS,GAC9D,EACF,YAAM,KAAK,EAAC,QAAQ,GAAQ,EAC5B,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,KAAK,IAAI,CAAC,KAAK,CAC9D,CACD,EACP,IAAI,CAAC,OAAO,KACX,WAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,IAChE,WAAK,KAAK,EAAC,oBAAoB,GAAO,EACtC,EAAC,WAAW,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CACxG,CACP,CACI,EACP;KACH;IAED,IAAY,OAAO;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;KAC7C;IAEO,OAAO;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACzC;IAEO,OAAO,CAAC,KAAiB;QAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B;IAEO,MAAM,CAAC,KAAiB;QAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B;IAEO,cAAc;QACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC;KAChF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatToggle","log"],"sources":["src/components/cat-toggle/cat-toggle.scss?tag=cat-toggle&encapsulation=shadow","src/components/cat-toggle/cat-toggle.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$toggle-width: 2rem;\n$toggle-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\ninput {\n  position: absolute;\n  margin: 0;\n  width: $toggle-width;\n  height: $toggle-height;\n  opacity: 0;\n  cursor: inherit;\n}\n\n.toggle-placeholder {\n  width: calc($toggle-width + 1px);\n}\n\n.toggle {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: $toggle-width;\n  height: $toggle-height;\n  border-radius: 10rem;\n  background-color: cat-token('color.ui.border.dark');\n  transition: background-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 1rem;\n    height: 1rem;\n    background: #fff;\n    border-radius: 10rem;\n    transform: translateX(calc(2px - 0.5rem));\n    transition: transform cat-token('time.transition.s') linear;\n    @include cat-elevation(2);\n\n    :checked + & {\n      transform: translateX(calc(-2px + 0.5rem));\n      background: cat-token('color.theme.primary.fill');\n    }\n  }\n\n  .is-disabled & {\n    background-color: cat-token('color.ui.border.dark');\n  }\n}\n\n:host(.cat-error) {\n  .toggle {\n    background-color: cat-token('color.theme.danger.bg', 0.2);\n  }\n\n  :checked + .toggle {\n    background-color: cat-token('color.theme.danger.bg');\n\n    &::after {\n      background: cat-token('color.theme.danger.fill');\n    }\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the toggle, based on the checked state, value and noValue.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) resolvedValue: any = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            part=\"input\"\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n\n  private updateResolved() {\n    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n  }\n}\n"],"version":3}

package/dist/components/cat-tooltip.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CatTooltip extends Components.CatTooltip, HTMLElement {}
 export const CatTooltip: {
-  prototype: CatTooltip;
-  new (): CatTooltip;
+    prototype: CatTooltip;
+    new (): CatTooltip;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cat-tooltip.js

@@ -3,170 +3,171 @@ import { c as computePosition, a as autoUpdate, o as offset, f as flip, b as shi
 
 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
-const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{--cat-font-color-head:cat-token(\"color.ui.font.tooltip\", $wrap: false);--cat-font-color-body:cat-token(\"color.ui.font.tooltip\", $wrap: false);position:fixed;width:max-content;top:0;left:0;box-sizing:border-box;font-size:0.875rem;line-height:1.125rem;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 250ms linear, visibility 250ms linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:calc(var(--cat-z-index, 1000) + 200);max-width:min(100vw - 0.5rem, 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}";
+const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{--cat-font-color-head:cat-token(\"color.ui.font.tooltip\", $wrap: false);--cat-font-color-body:cat-token(\"color.ui.font.tooltip\", $wrap: false);position:fixed;width:max-content;top:0;left:0;box-sizing:border-box;font-size:0.875rem;line-height:1.125rem;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 250ms linear, visibility 250ms linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:calc(var(--cat-z-index, 1000) + 200);max-width:min(100vw - 0.5rem, 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 p{margin:0}.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}";
 
 let nextUniqueId = 0;
 const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class CatTooltip extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.id = `cat-tooltip-${nextUniqueId++}`;
-    this.hidden = false;
-    this.hasSlottedContent = false;
-    this.content = '';
-    this.disabled = false;
-    this.placement = 'top';
-    this.round = false;
-    this.size = 'm';
-    this.showDelay = 250;
-    this.hideDelay = 0;
-    this.longTouchDuration = 1000;
-    this.boundShowListener = this.showListener.bind(this);
-    this.boundHideListener = this.hideListener.bind(this);
-    this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
-    this.boundTouchStartListener = this.touchStartListener.bind(this);
-    this.boundTouchEndListener = this.touchEndListener.bind(this);
-  }
-  handleKeyDown({ key }) {
-    key === 'Escape' && this.hideTooltip();
-  }
-  componentDidLoad() {
-    const slot = this.hostElement.shadowRoot?.querySelector('slot');
-    this.trigger = slot?.assignedElements?.()?.[0];
-    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {
-      this.trigger.setAttribute('aria-describedby', this.id);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.id = `cat-tooltip-${nextUniqueId++}`;
+        this.inactive = false;
+        this.open = false;
+        this.content = '';
+        this.disabled = false;
+        this.placement = 'top';
+        this.round = false;
+        this.size = 'm';
+        this.showDelay = 250;
+        this.hideDelay = 0;
+        this.longTouchDuration = 1000;
+        this.boundShowListener = this.showListener.bind(this);
+        this.boundHideListener = this.hideListener.bind(this);
+        this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
+        this.boundTouchStartListener = this.touchStartListener.bind(this);
+        this.boundTouchEndListener = this.touchEndListener.bind(this);
     }
-    if (isTouchDevice) {
-      window.addEventListener('touchstart', this.boundWindowTouchStartListener);
-      this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);
-      this.trigger?.addEventListener('touchend', this.boundTouchEndListener);
+    handleKeyDown({ key }) {
+        key === 'Escape' && this.hideTooltip();
     }
-    else {
-      this.trigger?.addEventListener('focusin', this.boundShowListener);
-      this.trigger?.addEventListener('focusout', this.boundHideListener);
-      this.trigger?.addEventListener('mouseenter', this.boundShowListener);
-      this.trigger?.addEventListener('mouseleave', this.boundHideListener);
+    componentDidLoad() {
+        const slot = this.hostElement.shadowRoot?.querySelector('slot');
+        this.trigger = slot?.assignedElements?.()?.[0];
+        if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {
+            this.trigger.setAttribute('aria-describedby', this.id);
+        }
+        if (isTouchDevice) {
+            window.addEventListener('touchstart', this.boundWindowTouchStartListener);
+            this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);
+            this.trigger?.addEventListener('touchend', this.boundTouchEndListener);
+        }
+        else {
+            this.trigger?.addEventListener('focusin', this.boundShowListener);
+            this.trigger?.addEventListener('focusout', this.boundHideListener);
+            this.trigger?.addEventListener('mouseenter', this.boundShowListener);
+            this.trigger?.addEventListener('mouseleave', this.boundHideListener);
+        }
+    }
+    componentWillRender() {
+        this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot="content"]'));
+    }
+    disconnectedCallback() {
+        if (isTouchDevice) {
+            window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
+            this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);
+            this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);
+        }
+        else {
+            this.trigger?.removeEventListener('mouseenter', this.boundShowListener);
+            this.trigger?.removeEventListener('mouseleave', this.boundHideListener);
+            this.trigger?.removeEventListener('focusin', this.boundShowListener);
+            this.trigger?.removeEventListener('focusout', this.boundHideListener);
+        }
     }
-  }
-  componentWillRender() {
-    this.hasSlottedContent = !!this.hostElement.querySelector('[slot="content"]');
-    this.hidden = this.disabled || (!this.content && !this.hasSlottedContent);
-  }
-  disconnectedCallback() {
-    if (isTouchDevice) {
-      window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
-      this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);
-      this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);
+    render() {
+        return (h(Host, null, h("slot", null), h("div", { ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
+                tooltip: true,
+                'tooltip-hidden': this.inactive,
+                'tooltip-round': this.round,
+                [`tooltip-${this.size}`]: Boolean(this.size)
+            } }, h("slot", { name: "content" }, h("p", null, this.content)))));
     }
-    else {
-      this.trigger?.removeEventListener('mouseenter', this.boundShowListener);
-      this.trigger?.removeEventListener('mouseleave', this.boundHideListener);
-      this.trigger?.removeEventListener('focusin', this.boundShowListener);
-      this.trigger?.removeEventListener('focusout', this.boundHideListener);
+    async update() {
+        if (this.trigger && this.tooltip) {
+            await computePosition(this.trigger, this.tooltip, {
+                strategy: 'fixed',
+                placement: this.placement,
+                middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]
+            }).then(({ x, y }) => {
+                if (this.tooltip) {
+                    Object.assign(this.tooltip.style, {
+                        left: `${Math.max(0, x)}px`,
+                        top: `${y}px`
+                    });
+                }
+            });
+        }
     }
-  }
-  render() {
-    return (h(Host, null, h("slot", null), 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.hasSlottedContent ? h("slot", { name: "content" }) : this.content)));
-  }
-  async update() {
-    if (this.trigger && this.tooltip) {
-      await computePosition(this.trigger, this.tooltip, {
-        strategy: 'fixed',
-        placement: this.placement,
-        middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]
-      }).then(({ x, y }) => {
-        if (this.tooltip) {
-          Object.assign(this.tooltip.style, {
-            left: `${Math.max(0, x)}px`,
-            top: `${y}px`
-          });
+    showListener() {
+        window.clearTimeout(this.hideTimeout);
+        this.hideTimeout = undefined;
+        if (!this.showTimeout) {
+            this.showTimeout = window.setTimeout(() => {
+                this.showTimeout = undefined;
+                this.showTooltip();
+            }, this.showDelay);
         }
-      });
     }
-  }
-  showListener() {
-    window.clearTimeout(this.hideTimeout);
-    this.hideTimeout = undefined;
-    if (!this.showTimeout) {
-      this.showTimeout = window.setTimeout(() => {
+    hideListener() {
+        window.clearTimeout(this.showTimeout);
         this.showTimeout = undefined;
-        this.showTooltip();
-      }, this.showDelay);
+        if (!this.hideTimeout) {
+            this.hideTimeout = window.setTimeout(() => {
+                this.hideTimeout = undefined;
+                this.hideTooltip();
+            }, this.hideDelay);
+        }
     }
-  }
-  hideListener() {
-    window.clearTimeout(this.showTimeout);
-    this.showTimeout = undefined;
-    if (!this.hideTimeout) {
-      this.hideTimeout = window.setTimeout(() => {
-        this.hideTimeout = undefined;
-        this.hideTooltip();
-      }, this.hideDelay);
+    touchStartListener(event) {
+        event.stopPropagation();
+        if (!this.touchTimeout) {
+            this.touchTimeout = window.setTimeout(() => {
+                this.touchTimeout = undefined;
+                this.showTooltip();
+            }, this.longTouchDuration);
+        }
     }
-  }
-  touchStartListener(event) {
-    event.stopPropagation();
-    if (!this.touchTimeout) {
-      this.touchTimeout = window.setTimeout(() => {
+    touchEndListener() {
+        window.clearTimeout(this.touchTimeout);
         this.touchTimeout = undefined;
-        this.showTooltip();
-      }, this.longTouchDuration);
+        this.hideTooltip();
     }
-  }
-  touchEndListener() {
-    window.clearTimeout(this.touchTimeout);
-    this.touchTimeout = undefined;
-    this.hideTooltip();
-  }
-  windowTouchStartListener() {
-    this.hideTooltip();
-  }
-  showTooltip() {
-    if (this.trigger && this.tooltip) {
-      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());
+    windowTouchStartListener() {
+        this.hideTooltip();
     }
-    if (!this.hidden) {
-      this.tooltip?.classList.add('tooltip-show');
+    showTooltip() {
+        if (this.trigger && this.tooltip) {
+            this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());
+        }
+        if (!this.inactive) {
+            this.open = true;
+            this.tooltip?.classList.add('tooltip-show');
+        }
     }
-  }
-  hideTooltip() {
-    this.tooltip?.classList.remove('tooltip-show');
-    this.cleanupFloatingUi?.();
-    this.cleanupFloatingUi = undefined;
-  }
-  get hostElement() { return this; }
-  static get style() { return catTooltipCss; }
+    hideTooltip() {
+        this.open = false;
+        this.tooltip?.classList.remove('tooltip-show');
+        this.cleanupFloatingUi?.();
+        this.cleanupFloatingUi = undefined;
+    }
+    get hostElement() { return this; }
+    static get style() { return catTooltipCss; }
 }, [1, "cat-tooltip", {
-    "content": [1],
-    "disabled": [4],
-    "placement": [1],
-    "round": [4],
-    "size": [1],
-    "showDelay": [2, "show-delay"],
-    "hideDelay": [2, "hide-delay"],
-    "longTouchDuration": [2, "long-touch-duration"],
-    "hasSlottedContent": [32]
-  }, [[0, "keydown", "handleKeyDown"]]]);
+        "content": [1],
+        "disabled": [4],
+        "placement": [1],
+        "round": [4],
+        "size": [1],
+        "showDelay": [2, "show-delay"],
+        "hideDelay": [2, "hide-delay"],
+        "longTouchDuration": [2, "long-touch-duration"],
+        "open": [32]
+    }, [[0, "keydown", "handleKeyDown"]]]);
 CatTooltip$1.OFFSET = 4;
 CatTooltip$1.SHIFT_PADDING = 4;
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-tooltip":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatTooltip$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatTooltip$1);
+            }
+            break;
+    } });
 }
 
 const CatTooltip = CatTooltip$1;