@haiilo/catalyst 2.0.3 → 2.1.0

package/dist/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-033048ed.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c2a28ebb.js';
 
 /*
  Stencil Client Patch Esm v2.17.4 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["cat-alert_22",[[1,"cat-select-demo"],[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[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"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-modal",[[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}]]]], options);
+  return bootstrapLazy([["cat-alert_22",[[1,"cat-select-demo"],[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[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"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-modal",[[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}]]]], options);
   });
 };
 

package/dist/types/components/cat-button/cat-button.d.ts

@@ -119,12 +119,22 @@ export declare class CatButton {
   componentWillRender(): void;
   haltDisabledEvents(event: Event): void;
   /**
-   * 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.
    */
-  setFocus(options?: FocusOptions): Promise<void>;
+  doFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Programmatically remove focus from the button. Use this method instead of
+   * `button.blur()`.
+   */
+  doBlur(): Promise<void>;
+  /**
+   * Programmatically simulate a click on the button.
+   */
+  doClick(): Promise<void>;
   render(): any;
   private get iconSize();
   private get spinnerSize();

package/dist/types/components/cat-checkbox/cat-checkbox.d.ts

@@ -68,12 +68,22 @@ export declare class CatCheckbox {
   componentDidLoad(): void;
   componentWillRender(): void;
   /**
-   * 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.
    */
-  setFocus(options?: FocusOptions): Promise<void>;
+  doFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Programmatically remove focus from the checkbox. Use this method instead of
+   * `input.blur()`.
+   */
+  doBlur(): Promise<void>;
+  /**
+   * Programmatically simulate a click on the checkbox.
+   */
+  doClick(): Promise<void>;
   render(): any;
   private get hintSection();
   private onInput;

package/dist/types/components/cat-input/cat-input.d.ts

@@ -114,12 +114,22 @@ export declare class CatInput {
   catBlur: EventEmitter<FocusEvent>;
   componentWillRender(): void;
   /**
-   * 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.
    */
-  setFocus(options?: FocusOptions): Promise<void>;
+  doFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Programmatically remove focus from the input. Use this method instead of
+   * `input.blur()`.
+   */
+  doBlur(): Promise<void>;
+  /**
+   * Programmatically simulate a click on the input.
+   */
+  doClick(): Promise<void>;
   /**
    * Clear the input.
    */

package/dist/types/components/cat-radio/cat-radio.d.ts

@@ -62,12 +62,22 @@ export declare class CatRadio {
   catBlur: EventEmitter<FocusEvent>;
   componentWillRender(): void;
   /**
-   * 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.
    */
-  setFocus(options?: FocusOptions): Promise<void>;
+  doFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Programmatically remove focus from the radio button. Use this method
+   * instead of `input.blur()`.
+   */
+  doBlur(): Promise<void>;
+  /**
+   * Programmatically simulate a click on the radio button.
+   */
+  doClick(): Promise<void>;
   render(): any;
   private get hintSection();
   private onChange;

package/dist/types/components/cat-textarea/cat-textarea.d.ts

@@ -76,12 +76,22 @@ export declare class CatTextarea {
   componentWillRender(): void;
   componentDidLoad(): void;
   /**
-   * 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.
    */
-  setFocus(options?: FocusOptions): Promise<void>;
+  doFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Programmatically remove focus from the textarea. Use this method instead of
+   * `textarea.blur()`.
+   */
+  doBlur(): Promise<void>;
+  /**
+   * Programmatically simulate a click on the textarea.
+   */
+  doClick(): Promise<void>;
   render(): any;
   private get hintSection();
   private onInput;

package/dist/types/components/cat-toggle/cat-toggle.d.ts

@@ -63,12 +63,22 @@ export declare class CatToggle {
   catBlur: EventEmitter<FocusEvent>;
   componentWillRender(): void;
   /**
-   * 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.
    */
-  setFocus(options?: FocusOptions): Promise<void>;
+  doFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Programmatically remove focus from the toggle. Use this method instead of
+   * `input.blur()`.
+   */
+  doBlur(): Promise<void>;
+  /**
+   * Programmatically simulate a click on the toggle.
+   */
+  doClick(): Promise<void>;
   render(): any;
   private get hintSection();
   private onInput;

package/dist/types/components.d.ts

@@ -106,6 +106,19 @@ export namespace Components {
           * Specifies that the button should be disabled. A disabled button is unusable and un-clickable. Corresponds with the native HTML disabled attribute.
          */
         "disabled": boolean;
+        /**
+          * Programmatically remove focus from the button. Use this method instead of `button.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically simulate a click on the button.
+         */
+        "doClick": () => Promise<void>;
+        /**
+          * 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.
+         */
+        "doFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * The name of an icon to be displayed in the button.
          */
@@ -134,11 +147,6 @@ export namespace Components {
           * Use round button edges.
          */
         "round": boolean;
-        /**
-          * Sets focus on the button. Use this method instead of `button.focus()`.
-          * @param options An optional object providing options to control aspects of the focusing process.
-         */
-        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * The size of the button.
          */
@@ -175,6 +183,19 @@ export namespace Components {
           * Disabled state of the checkbox
          */
         "disabled": boolean;
+        /**
+          * Programmatically remove focus from the checkbox. Use this method instead of `input.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically simulate a click on the checkbox.
+         */
+        "doClick": () => Promise<void>;
+        /**
+          * 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.
+         */
+        "doFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * Optional hint text(s) to be displayed with the checkbox.
          */
@@ -203,11 +224,6 @@ export namespace Components {
           * Required state of the checkbox
          */
         "required": boolean;
-        /**
-          * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.
-          * @param options An optional object providing options to control aspects of the focusing process.
-         */
-        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * The value of the checkbox
          */
@@ -262,6 +278,19 @@ export namespace Components {
           * Whether the input is disabled.
          */
         "disabled": boolean;
+        /**
+          * Programmatically remove focus from the input. Use this method instead of `input.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically simulate a click on the input.
+         */
+        "doClick": () => Promise<void>;
+        /**
+          * 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.
+         */
+        "doFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * Optional hint text(s) to be displayed with the input.
          */
@@ -318,11 +347,6 @@ export namespace Components {
           * Use round input edges.
          */
         "round": boolean;
-        /**
-          * Sets focus on the input. Use this method instead of `input.focus()`.
-          * @param options An optional object providing options to control aspects of the focusing process.
-         */
-        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * A textual prefix to be displayed in the input.
          */
@@ -401,6 +425,19 @@ export namespace Components {
           * Whether this radio is disabled.
          */
         "disabled": boolean;
+        /**
+          * Programmatically remove focus from the radio button. Use this method instead of `input.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically simulate a click on the radio button.
+         */
+        "doClick": () => Promise<void>;
+        /**
+          * 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.
+         */
+        "doFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * Optional hint text(s) to be displayed with the radio.
          */
@@ -425,11 +462,6 @@ export namespace Components {
           * Whether the radio is required.
          */
         "required": boolean;
-        /**
-          * Sets focus on the radio. Use this method instead of `radio.focus()`.
-          * @param options An optional object providing options to control aspects of the focusing process.
-         */
-        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * The value of the radio component.
          */
@@ -625,6 +657,19 @@ export namespace Components {
           * Whether the textarea is disabled.
          */
         "disabled": boolean;
+        /**
+          * Programmatically remove focus from the textarea. Use this method instead of `textarea.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically simulate a click on the textarea.
+         */
+        "doClick": () => Promise<void>;
+        /**
+          * 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.
+         */
+        "doFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * Optional hint text(s) to be displayed with the textarea.
          */
@@ -665,11 +710,6 @@ export namespace Components {
           * Specifies the initial number of lines in the textarea.
          */
         "rows": number;
-        /**
-          * Sets focus on the textarea. Use this method instead of `textarea.focus()`.
-          * @param options An optional object providing options to control aspects of the focusing process.
-         */
-        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * The initial value of the control.
          */
@@ -684,6 +724,19 @@ export namespace Components {
           * Disabled state of the toggle.
          */
         "disabled": boolean;
+        /**
+          * Programmatically remove focus from the toggle. Use this method instead of `input.blur()`.
+         */
+        "doBlur": () => Promise<void>;
+        /**
+          * Programmatically simulate a click on the toggle.
+         */
+        "doClick": () => Promise<void>;
+        /**
+          * 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.
+         */
+        "doFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * Optional hint text(s) to be displayed with the toggle.
          */
@@ -708,11 +761,6 @@ export namespace Components {
           * Required state of the toggle.
          */
         "required": boolean;
-        /**
-          * Sets focus on the toggle. Use this method instead of `toggle.focus()`.
-          * @param options An optional object providing options to control aspects of the focusing process.
-         */
-        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
         /**
           * The value of the toggle
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.0.3",
-    "@haiilo/catalyst-tokens": "2.0.3",
+    "@haiilo/catalyst-tokens": "2.1.0",
     "@stencil/core": "2.17.4",
     "autosize": "5.0.1",
     "autosize-input": "1.0.2",

package/dist/catalyst/p-270fd91d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,a as i,h as a,g as o}from"./p-692e49d6.js";import{c as s,f as e}from"./p-60a20ebe.js";const d=":host{display:block}:host([hidden]){display:none}.modal-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgb(rgb(var(--cat-bg-backdrop, 0, 0, 0)), var(--cat-opacity-backdrop, 0.6));z-index:2;display:flex}.modal-wrapper[aria-hidden=true]{display:none}.modal{margin:auto;z-index:2;position:relative;background-color:white;border-radius:var(--cat-border-radius-l, 0.5rem);max-width:100%;padding:32px}.modal-header{display:flex;justify-content:end;align-self:stretch}.modal-header .close-button::part(button){box-shadow:unset}.modal-content{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;margin:16px 0}.modal-s{width:400px}.modal-m{width:600px}.modal-l{width:800px}";const l=class{constructor(i){t(this,i);this.isVisible=false;this.size="m"}componentDidLoad(){if(this.modal){this.trap=s(this.modal,{tabbableOptions:{getShadowRoot:true},initialFocus:e(this.closeButton),allowOutsideClick:true,clickOutsideDeactivates:t=>!this.modal||!t.composedPath().includes(this.modal),onDeactivate:()=>this.isVisible=false,setReturnFocus:t=>t instanceof i?e(t):t})}}componentDidUpdate(){var t;if(this.isVisible)(t=this.trap)===null||t===void 0?void 0:t.activate();this.updateAccessibility(this.hostElement)}async show(){this.isVisible=true}render(){return a("div",{"aria-modal":true,role:"dialog","aria-hidden":!this.isVisible?"true":"false",class:"modal-wrapper"},a("div",{ref:t=>this.modal=t,class:{modal:true,[`modal-${this.size}`]:Boolean(this.size)}},a("div",{class:"modal-header"},a("cat-button",{ref:t=>this.closeButton=t,icon:"cross-outlined",class:"close-button",size:"s",iconOnly:true,a11yLabel:"close",onCatClick:this.onClick.bind(this)})),a("div",{class:"modal-content"},a("slot",null))))}onClick(){var t;(t=this.trap)===null||t===void 0?void 0:t.deactivate()}updateAccessibility(t){if(t.parentElement){Array.from(t.parentElement.children).forEach((i=>{if(i!==t){this.isVisible?i.setAttribute("aria-hidden","true"):i.removeAttribute("aria-hidden")}}));if(t.parentElement!==document.body){this.updateAccessibility(t.parentElement)}}}get hostElement(){return o(this)}};l.style=d;export{l as cat_modal};
-//# sourceMappingURL=p-270fd91d.entry.js.map