@haiilo/catalyst 0.5.13 → 0.7.0

package/dist/collection/components/cat-tab/cat-tab.js

@@ -0,0 +1,203 @@
+import { Component, h, Prop, Event, Listen, Host, Element } from '@stencil/core';
+let nextUniqueId = 0;
+/**
+ * A single tab inside a tabs component.
+ */
+export class CatTab {
+  constructor() {
+    /**
+     * The label of the tab.
+     */
+    this.label = '';
+    /**
+     * Hide the actual button content and only display the tab.
+     */
+    this.iconOnly = false;
+    /**
+     * Display the icon on the right.
+     */
+    this.iconRight = false;
+    /**
+     * Specifies that the tab should be deactivated.
+     */
+    this.deactivated = false;
+  }
+  connectedCallback() {
+    if (!this.hostElement.id) {
+      this.hostElement.id = `cat-tab-${nextUniqueId++}`;
+    }
+  }
+  onClick(event) {
+    this.tabClick.emit(event);
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "cat-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-tab.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-tab.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label of the tab."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The name of an icon to be displayed in the tab."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconOnly": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | Breakpoint",
+        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\" | boolean",
+        "references": {
+          "Breakpoint": {
+            "location": "import",
+            "path": "../../utils/breakpoints"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hide the actual button content and only display the tab."
+      },
+      "attribute": "icon-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "iconRight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display the icon on the right."
+      },
+      "attribute": "icon-right",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A destination to link to, rendered in the href attribute of a link."
+      },
+      "attribute": "url",
+      "reflect": false
+    },
+    "urlTarget": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'_blank' | '_self'",
+        "resolved": "\"_blank\" | \"_self\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies where to open the linked document."
+      },
+      "attribute": "url-target",
+      "reflect": false
+    },
+    "deactivated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies that the tab should be deactivated."
+      },
+      "attribute": "deactivated",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "tabClick",
+      "name": "tabClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when tab is clicked."
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "onClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+//# sourceMappingURL=cat-tab.js.map

package/dist/collection/components/cat-tab/cat-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-tab.js","sourceRoot":"","sources":["../../../src/components/cat-tab/cat-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAMH,MAAM,OAAO,MAAM;EALnB;IAQE;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAOnB;;OAEG;IACK,aAAQ,GAAyB,KAAK,CAAC;IAE/C;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;IAY1B;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;GAqB7B;EAdC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;KACnD;EACH,CAAC;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A single tab inside a tabs component.\n */\n@Component({\n  tag: 'cat-tab',\n  styleUrl: 'cat-tab.scss',\n  shadow: true\n})\nexport class CatTab {\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The label of the tab.\n   */\n  @Prop() label = '';\n\n  /**\n   * The name of an icon to be displayed in the tab.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the tab.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the tab should be deactivated.\n   */\n  @Prop() deactivated = false;\n\n  /**\n   * Emitted when tab is clicked.\n   */\n  @Event() tabClick!: EventEmitter<MouseEvent>;\n\n  connectedCallback() {\n    if (!this.hostElement.id) {\n      this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    this.tabClick.emit(event);\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}

package/dist/collection/components/cat-tabs/cat-tabs.css

@@ -0,0 +1,33 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: flex;
+  flex-direction: row;
+  box-shadow: inset 0 -1px 0 0 #d7dbe0;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([tabs-align=center]) {
+  justify-content: center;
+}
+
+:host([tabs-align=right]) {
+  justify-content: end;
+}
+
+:host([tabs-align=justify]) cat-button {
+  flex: 1 0 auto;
+}
+
+.tab {
+  padding: 0.5rem;
+}
+.tab.tab-active {
+  box-shadow: inset 0 -3px 0 0 #207f8a;
+}

package/dist/collection/components/cat-tabs/cat-tabs.js

@@ -0,0 +1,122 @@
+import { Component, h, Element, State, Watch, Listen, Host, Prop } from '@stencil/core';
+/**
+ * Tabs are used to display multiple panels to be contained within a single
+ * window, using tabs as a navigational element.
+ *
+ * @part tab - The header of the tab.
+ */
+export class CatTabs {
+  constructor() {
+    this.tabs = [];
+    this.buttons = [];
+    /**
+     * The ID of the active tab.
+     */
+    this.activeTab = '';
+    /**
+     * The alignment of the tabs.
+     */
+    this.tabsAlign = 'left';
+  }
+  onActiveTabChanged(newActiveTab) {
+    const activeTab = this.tabs.find(value => value.id === newActiveTab);
+    activeTab === null || activeTab === void 0 ? void 0 : activeTab.click();
+  }
+  componentWillLoad() {
+    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+    if (this.tabs.length) {
+      this.activeTabId = this.activeTab;
+    }
+  }
+  onKeydown(event) {
+    var _a;
+    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
+      const targetElements = this.buttons.filter(button => !button.disabled);
+      const activeElement = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+      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();
+      event.preventDefault();
+    }
+  }
+  render() {
+    return (h(Host, null, this.tabs.map((tab) => {
+      return (h("cat-button", { ref: el => el && this.updateButtonsRef(el), buttonId: tab.id, role: "tab", part: "tab", class: {
+          tab: true,
+          'tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)
+        }, color: this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => (this.activeTabId = tab.id) }, tab.label));
+    })));
+  }
+  updateButtonsRef(button) {
+    const indexOf = this.buttons.indexOf(button);
+    if (indexOf >= 0) {
+      this.buttons[indexOf] = button;
+    }
+    else {
+      this.buttons.push(button);
+    }
+  }
+  static get is() { return "cat-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-tabs.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-tabs.css"]
+  }; }
+  static get properties() { return {
+    "activeTab": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ID of the active tab."
+      },
+      "attribute": "active-tab",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "tabsAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'center' | 'right' | 'justify'",
+        "resolved": "\"center\" | \"justify\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The alignment of the tabs."
+      },
+      "attribute": "tabs-align",
+      "reflect": false,
+      "defaultValue": "'left'"
+    }
+  }; }
+  static get states() { return {
+    "activeTabId": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "activeTabId",
+      "methodName": "onActiveTabChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+//# sourceMappingURL=cat-tabs.js.map

package/dist/collection/components/cat-tabs/cat-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Watch, Listen, Host, Prop } from '@stencil/core';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n */\n@Component({\n  tag: 'cat-tabs',\n  styleUrl: 'cat-tabs.scss',\n  shadow: true\n})\nexport class CatTabs {\n  private tabs: HTMLCatTabElement[] = [];\n  private buttons: HTMLCatButtonElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() activeTabId?: string;\n\n  /**\n   * The ID of the active tab.\n   */\n  @Prop() activeTab = '';\n\n  /**\n   * The alignment of the tabs.\n   */\n  @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  @Watch('activeTabId')\n  onActiveTabChanged(newActiveTab: string): void {\n    const activeTab = this.tabs.find(value => value.id === newActiveTab);\n    activeTab?.click();\n  }\n\n  componentWillLoad(): void {\n    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n    if (this.tabs.length) {\n      this.activeTabId = this.activeTab;\n    }\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      const targetElements = this.buttons.filter(button => !button.disabled);\n      const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n      const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].setFocus();\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab: HTMLCatTabElement) => {\n          return (\n            <cat-button\n              ref={el => el && this.updateButtonsRef(el)}\n              buttonId={tab.id}\n              role=\"tab\"\n              part=\"tab\"\n              class={{\n                tab: true,\n                'tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)\n              }}\n              color={this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary'}\n              variant=\"text\"\n              icon={tab.icon}\n              iconOnly={tab.iconOnly}\n              iconRight={tab.iconRight}\n              url={tab.url}\n              disabled={tab.deactivated}\n              urlTarget={tab.urlTarget}\n              onCatClick={() => (this.activeTabId = tab.id)}\n            >\n              {tab.label}\n            </cat-button>\n          );\n        })}\n      </Host>\n    );\n  }\n\n  private updateButtonsRef(button: HTMLCatButtonElement) {\n    const indexOf = this.buttons.indexOf(button);\n\n    if (indexOf >= 0) {\n      this.buttons[indexOf] = button;\n    } else {\n      this.buttons.push(button);\n    }\n  }\n}\n"]}

package/dist/collection/components/cat-textarea/cat-textarea.css

@@ -3,6 +3,18 @@
  */
 /* stylelint-disable value-keyword-case */
 /* stylelint-enable value-keyword-case */
+.hint-section {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+}
+.hint-section .input-hint,
+.hint-section ::slotted([slot=hint]) {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  margin: 0;
+}
+
 :host {
   display: flex;
   flex-direction: column;
@@ -63,10 +75,4 @@ textarea:focus {
 }
 textarea::placeholder {
   color: rgb(var(--cat-font-color-muted, 105, 118, 135));
-}
-
-.input-hint {
-  font-size: 0.875rem;
-  line-height: 1rem;
-  margin: 0;
 }

package/dist/collection/components/cat-textarea/cat-textarea.js

@@ -1,17 +1,21 @@
-import { Component, Event, h, Host, Method, Prop } from '@stencil/core';
-import log from 'loglevel';
+import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
 import autosize from 'autosize';
+import log from 'loglevel';
+import { CatFormHint } from '../cat-form-hint/cat-form-hint';
 let nextUniqueId = 0;
 /**
  * Textarea specifies a control that allows user to write text over multiple
  * rows. Used when the expected user input is long. For shorter input, use the
  * input component.
  *
+ * @slot hint - Optional hint element to be displayed with the textarea.
+ * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
  * @part label - The label content.
  */
 export class CatTextarea {
   constructor() {
     this.id = `cat-textarea-${nextUniqueId++}`;
+    this.hasSlottedLabel = false;
     /**
      * Whether the textarea is disabled.
      */
@@ -42,7 +46,7 @@ export class CatTextarea {
     this.rows = 3;
   }
   componentWillRender() {
-    if (!this.label) {
+    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
       log.error('[A11y] Missing ARIA label on textarea', this);
     }
   }
@@ -58,24 +62,21 @@ export class CatTextarea {
   async setFocus(options) {
     this.textarea.focus(options);
   }
-  // /**
-  //  * Clear the input.
-  //  */
-  // @Method()
-  // async clear(): Promise<void> {
-  //   this.inputValue = '';
-  // }
   render() {
     return (h(Host, null,
-      this.label && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } },
+      (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } },
         h("span", { part: "label" },
-          this.label,
+          (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label,
           !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))),
       h("textarea", { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
-      this.hint && h("p", { class: "input-hint" }, this.hint)));
+      this.hintSection));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
-    // this.inputValue = πthis.input.value;
+    this.value = this.textarea.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -115,15 +116,15 @@ export class CatTextarea {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
+        "original": "string | string[]",
+        "resolved": "string | string[] | undefined",
         "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Optional hint text to be displayed with the textarea."
+        "text": "Optional hint text(s) to be displayed with the textarea."
       },
       "attribute": "hint",
       "reflect": false
@@ -289,7 +290,7 @@ export class CatTextarea {
     },
     "value": {
       "type": "any",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string | number",
         "resolved": "number | string | undefined",
@@ -305,6 +306,9 @@ export class CatTextarea {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "hasSlottedLabel": {}
+  }; }
   static get events() { return [{
       "method": "catChange",
       "name": "catChange",
@@ -389,5 +393,6 @@ export class CatTextarea {
       }
     }
   }; }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=cat-textarea.js.map

package/dist/collection/components/cat-textarea/cat-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-textarea.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport log from 'loglevel';\nimport autosize from 'autosize';\n\nlet nextUniqueId = 0;\n\n/**\n * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-textarea',\n  styleUrl: 'cat-textarea.scss',\n  shadow: true\n})\nexport class CatTextarea {\n  private readonly id = `cat-textarea-${nextUniqueId++}`;\n  private textarea!: HTMLTextAreaElement;\n\n  /**\n   * Whether the textarea is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text to be displayed with the textarea.\n   */\n  @Prop() hint?: string;\n\n  /**\n   * The label for the textarea.\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   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name = '';\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Specifies the initial number of lines in the textarea.\n   */\n  @Prop() rows = 3;\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop() value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the textarea received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.error('[A11y] Missing ARIA label on textarea', this);\n    }\n  }\n\n  componentDidLoad(): void {\n    autosize(this.textarea);\n  }\n\n  /**\n   * Sets focus on the textarea. Use this method instead of `textarea.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.textarea.focus(options);\n  }\n\n  // /**\n  //  * Clear the input.\n  //  */\n  // @Method()\n  // async clear(): Promise<void> {\n  //   this.inputValue = '';\n  // }\n\n  render() {\n    return (\n      <Host>\n        {this.label && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  (Optional)\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <textarea\n          ref={el => (this.textarea = el as HTMLTextAreaElement)}\n          id={this.id}\n          disabled={this.disabled}\n          maxlength={this.maxLength}\n          minlength={this.minLength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readonly={this.readonly}\n          required={this.required}\n          rows={this.rows}\n          value={this.value}\n          onInput={this.onInput.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        ></textarea>\n        {this.hint && <p class=\"input-hint\">{this.hint}</p>}\n      </Host>\n    );\n  }\n\n  private onInput(event: Event) {\n    // this.inputValue = πthis.input.value;\n    this.catChange.emit(event);\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"]}
+{"version":3,"file":"cat-textarea.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport autosize from 'autosize';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @slot hint - Optional hint element to be displayed with the textarea.\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 */\n@Component({\n  tag: 'cat-textarea',\n  styleUrl: 'cat-textarea.scss',\n  shadow: true\n})\nexport class CatTextarea {\n  private readonly id = `cat-textarea-${nextUniqueId++}`;\n  private textarea!: HTMLTextAreaElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Whether the textarea is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the textarea.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The label for the textarea.\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   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name = '';\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Specifies the initial number of lines in the textarea.\n   */\n  @Prop() rows = 3;\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the textarea received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    if (!this.label && !this.hostElement.querySelector('[slot=\"label\"]')) {\n      log.error('[A11y] Missing ARIA label on textarea', this);\n    }\n  }\n\n  componentDidLoad(): void {\n    autosize(this.textarea);\n  }\n\n  /**\n   * Sets focus on the textarea. Use this method instead of `textarea.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.textarea.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  (Optional)\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <textarea\n          ref={el => (this.textarea = el as HTMLTextAreaElement)}\n          id={this.id}\n          disabled={this.disabled}\n          maxlength={this.maxLength}\n          minlength={this.minLength}\n          name={this.name}\n          placeholder={this.placeholder}\n          readonly={this.readonly}\n          required={this.required}\n          rows={this.rows}\n          value={this.value}\n          onInput={this.onInput.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        ></textarea>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.textarea.value;\n    this.catChange.emit(event);\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"]}

package/dist/collection/components/cat-toggle/cat-toggle.css

@@ -3,8 +3,22 @@
  */
 /* stylelint-disable value-keyword-case */
 /* stylelint-enable value-keyword-case */
+.hint-section {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+}
+.hint-section .input-hint,
+.hint-section ::slotted([slot=hint]) {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  margin: 0;
+}
+
 :host {
   display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   margin-bottom: 1rem;
 }