@haiilo/catalyst 0.12.0 → 0.14.1

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

@@ -1 +1 @@
-{"file":"cat-skeleton.js","mappings":";;AAAA,MAAM,cAAc,GAAG,g2GAAg2G;;MCU12GA,aAAW;EALxB;;;;;;;IASU,WAAM,GAAgC,OAAO,CAAC;;;;IAK9C,YAAO,GAAwD,WAAW,CAAC;;;;;IAM3E,SAAI,GAAkC,GAAG,CAAC;GAiDnD;EAxCC,MAAM;IACJ,QACE,EAAC,IAAI,QACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OACjC,WACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACjD,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACnD,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC9C,GACI,CACR,CAAC,CACG,EACP;GACH;EAED,IAAY,KAAK;IACf,QAAQ,IAAI,CAAC,OAAO;MAClB,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC;QACE,OAAO,CAAC,CAAC;KACZ;GACF;EAED,IAAY,KAAK;IACf,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;QACrD;QACE,cAAc,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG;OAC3C;QACD,SAAS,CAAC;GACf;EAEO,MAAM,CAAC,GAAW,EAAE,GAAW;IACrC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;GAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatSkeleton"],"sources":["./src/components/cat-skeleton/cat-skeleton.scss?tag=cat-skeleton&encapsulation=shadow","./src/components/cat-skeleton/cat-skeleton.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --background: The background color of the skeleton.\n   * @prop --highlight: The highlight color of the skeleton.\n   * @prop --speed: The animation speed.\n   */\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  --background: #{cat-token('color.ui.background.skeleton')};\n  --highlight: #{cat-token('color.ui.background.skeletonHighlight')};\n  --speed: 2s;\n}\n\n:host([variant='square']),\n:host([variant='circle']) {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='head']) {\n  margin-bottom: $cat-head-margin-bottom;\n}\n\n:host([variant='body']) {\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n.skeleton {\n  display: block;\n  border-radius: cat-border-radius('m');\n  background: var(--background);\n}\n\n.skeleton-circle {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n@mixin size($size, $lvl) {\n  $-text-offset: 4px;\n  .skeleton-#{$size} {\n    &.skeleton-rectangle {\n      width: var(--width, 100%);\n      height: var(--height, #{cat-size($size)});\n    }\n\n    &.skeleton-square,\n    &.skeleton-circle {\n      width: var(--width, #{cat-size($size)});\n      height: var(--height, #{cat-size($size)});\n    }\n\n    &.skeleton-head,\n    &.skeleton-body {\n      width: var(--width, var(--line-width, 100%));\n    }\n\n    &.skeleton-head {\n      height: calc(#{cat-head-font-size($lvl)} - #{$-text-offset});\n      margin: calc((#{cat-head-line-height($lvl)} - #{cat-head-font-size($lvl)} + #{$-text-offset}) * 0.5) 0;\n    }\n\n    &.skeleton-body {\n      height: calc(#{cat-body-font-size($size)} - #{$-text-offset});\n      margin: calc((#{cat-body-line-height($size)} - #{cat-body-font-size($size)} + #{$-text-offset}) * 0.5) 0;\n    }\n  }\n}\n\n@include size('xs', 5);\n@include size('s', 4);\n@include size('m', 3);\n@include size('l', 2);\n@include size('xl', 1);\n\n// ----- animation\n\n.skeleton-sheen {\n  background: linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%)\n    var(--background);\n  background-size: 300% 100%;\n  animation: sheen var(--speed) ease-in-out infinite;\n}\n\n.skeleton-pulse {\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--highlight);\n    animation: var(--speed) ease-in-out 0.5s infinite normal none running pulse;\n    opacity: 0;\n  }\n}\n\n@keyframes sheen {\n  0% {\n    background-position: right;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: 1;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n */\n@Component({\n  tag: 'cat-skeleton',\n  styleUrl: 'cat-skeleton.scss',\n  shadow: true\n})\nexport class CatSkeleton {\n  /**\n   * The animation style of the skeleton.\n   */\n  @Prop() effect: 'plain' | 'sheen' | 'pulse' = 'sheen';\n\n  /**\n   * The rendering style of the skeleton.\n   */\n  @Prop() variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body' = 'rectangle';\n\n  /**\n   * The size of the skeleton. If the variant is set to \"head\", the size values\n   * \"xs\" to \"xl\" translate to the head levels `h1` to `h5`.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The number of text lines to be rendered for \"head\" and \"body\" variants.\n   * Defaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\n   * variants.\n   */\n  @Prop() lines?: number;\n\n  render() {\n    return (\n      <Host>\n        {Array.from(Array(this.count)).map(() => (\n          <div\n            style={this.style}\n            class={{\n              skeleton: true,\n              [`skeleton-${this.effect}`]: Boolean(this.effect),\n              [`skeleton-${this.variant}`]: Boolean(this.variant),\n              [`skeleton-${this.size}`]: Boolean(this.size)\n            }}\n          ></div>\n        ))}\n      </Host>\n    );\n  }\n\n  private get count() {\n    switch (this.variant) {\n      case 'head':\n        return Math.max(1, this.lines || 1);\n      case 'body':\n        return Math.max(1, this.lines || 3);\n      default:\n        return 1;\n    }\n  }\n\n  private get style() {\n    return this.variant === 'head' || this.variant === 'body'\n      ? {\n          '--line-width': `${this.random(50, 100)}%`\n        }\n      : undefined;\n  }\n\n  private random(min: number, max: number) {\n    return Math.floor(Math.random() * (max - min + 1) + min);\n  }\n}\n"],"version":3}
+{"file":"cat-skeleton.js","mappings":";;AAAA,MAAM,cAAc,GAAG,g2GAAg2G;;MCU12GA,aAAW;EALxB;;;;;;;IASU,WAAM,GAAgC,OAAO,CAAC;;;;IAK9C,YAAO,GAAwD,WAAW,CAAC;;;;;IAM3E,SAAI,GAAkC,GAAG,CAAC;GAiDnD;EAxCC,MAAM;IACJ,QACE,EAAC,IAAI,QACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OACjC,WACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACjD,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACnD,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC9C,GACI,CACR,CAAC,CACG,EACP;GACH;EAED,IAAY,KAAK;IACf,QAAQ,IAAI,CAAC,OAAO;MAClB,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC;QACE,OAAO,CAAC,CAAC;KACZ;GACF;EAED,IAAY,KAAK;IACf,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;QACrD;QACE,cAAc,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG;OAC3C;QACD,SAAS,CAAC;GACf;EAEO,MAAM,CAAC,GAAW,EAAE,GAAW;IACrC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;GAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatSkeleton"],"sources":["./src/components/cat-skeleton/cat-skeleton.scss?tag=cat-skeleton&encapsulation=shadow","./src/components/cat-skeleton/cat-skeleton.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$skeleton-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  /**\n   * @prop --background: The background color of the skeleton.\n   * @prop --highlight: The highlight color of the skeleton.\n   * @prop --speed: The animation speed.\n   */\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  --background: #{cat-token('color.ui.background.skeleton')};\n  --highlight: #{cat-token('color.ui.background.skeletonHighlight')};\n  --speed: 2s;\n}\n\n:host([variant='square']),\n:host([variant='circle']) {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='head']) {\n  margin-bottom: $cat-head-margin-bottom;\n}\n\n:host([variant='body']) {\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n.skeleton {\n  display: block;\n  border-radius: cat-border-radius('m');\n  background: var(--background);\n}\n\n.skeleton-circle {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n@mixin size($size, $lvl) {\n  $-text-offset: 4px;\n  .skeleton-#{$size} {\n    &.skeleton-rectangle {\n      width: var(--width, 100%);\n      height: var(--height, map.get($skeleton-sizes, $size));\n    }\n\n    &.skeleton-square,\n    &.skeleton-circle {\n      width: var(--width, map.get($skeleton-sizes, $size));\n      height: var(--height, map.get($skeleton-sizes, $size));\n    }\n\n    &.skeleton-head,\n    &.skeleton-body {\n      width: var(--width, var(--line-width, 100%));\n    }\n\n    &.skeleton-head {\n      height: calc(#{cat-head-font-size($lvl)} - #{$-text-offset});\n      margin: calc((#{cat-head-line-height($lvl)} - #{cat-head-font-size($lvl)} + #{$-text-offset}) * 0.5) 0;\n    }\n\n    &.skeleton-body {\n      height: calc(#{cat-body-font-size($size)} - #{$-text-offset});\n      margin: calc((#{cat-body-line-height($size)} - #{cat-body-font-size($size)} + #{$-text-offset}) * 0.5) 0;\n    }\n  }\n}\n\n@include size('xs', 5);\n@include size('s', 4);\n@include size('m', 3);\n@include size('l', 2);\n@include size('xl', 1);\n\n// ----- animation\n\n.skeleton-sheen {\n  background: linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%)\n    var(--background);\n  background-size: 300% 100%;\n  animation: sheen var(--speed) ease-in-out infinite;\n}\n\n.skeleton-pulse {\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--highlight);\n    animation: var(--speed) ease-in-out 0.5s infinite normal none running pulse;\n    opacity: 0;\n  }\n}\n\n@keyframes sheen {\n  0% {\n    background-position: right;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: 1;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n */\n@Component({\n  tag: 'cat-skeleton',\n  styleUrl: 'cat-skeleton.scss',\n  shadow: true\n})\nexport class CatSkeleton {\n  /**\n   * The animation style of the skeleton.\n   */\n  @Prop() effect: 'plain' | 'sheen' | 'pulse' = 'sheen';\n\n  /**\n   * The rendering style of the skeleton.\n   */\n  @Prop() variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body' = 'rectangle';\n\n  /**\n   * The size of the skeleton. If the variant is set to \"head\", the size values\n   * \"xs\" to \"xl\" translate to the head levels `h1` to `h5`.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The number of text lines to be rendered for \"head\" and \"body\" variants.\n   * Defaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\n   * variants.\n   */\n  @Prop() lines?: number;\n\n  render() {\n    return (\n      <Host>\n        {Array.from(Array(this.count)).map(() => (\n          <div\n            style={this.style}\n            class={{\n              skeleton: true,\n              [`skeleton-${this.effect}`]: Boolean(this.effect),\n              [`skeleton-${this.variant}`]: Boolean(this.variant),\n              [`skeleton-${this.size}`]: Boolean(this.size)\n            }}\n          ></div>\n        ))}\n      </Host>\n    );\n  }\n\n  private get count() {\n    switch (this.variant) {\n      case 'head':\n        return Math.max(1, this.lines || 1);\n      case 'body':\n        return Math.max(1, this.lines || 3);\n      default:\n        return 1;\n    }\n  }\n\n  private get style() {\n    return this.variant === 'head' || this.variant === 'body'\n      ? {\n          '--line-width': `${this.random(50, 100)}%`\n        }\n      : undefined;\n  }\n\n  private random(min: number, max: number) {\n    return Math.floor(Math.random() * (max - min + 1) + min);\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"cat-spinner2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6nBAA6nB;;MCUtoB,UAAU;EALvB;;;;;;;IASU,SAAI,GAA6C,GAAG,CAAC;GAuB9D;EAfC,MAAM;IACJ,QACE,0BACc,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,KAAK,EAAE;QACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;OACjD,IAED,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACzD,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/cat-spinner/cat-spinner.scss?tag=cat-spinner&encapsulation=shadow","./src/components/cat-spinner/cat-spinner.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &[hidden] {\n    display: none;\n  }\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray: 135px;\n  stroke-dashoffset: 95px;\n  stroke-linecap: round;\n  stroke-width: 5px;\n  transform-origin: center center;\n  animation: spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;\n  width: 1em;\n  height: 1em;\n}\n\n// ----- sizes\n\n@mixin size($size) {\n  .spinner-#{$size} svg {\n    font-size: cat-size($size) * 0.5;\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n\n// ----- animation\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-spinner2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6nBAA6nB;;MCUtoB,UAAU;EALvB;;;;;;;IASU,SAAI,GAA6C,GAAG,CAAC;GAuB9D;EAfC,MAAM;IACJ,QACE,0BACc,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,KAAK,EAAE;QACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;OACjD,IAED,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACzD,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/cat-spinner/cat-spinner.scss?tag=cat-spinner&encapsulation=shadow","./src/components/cat-spinner/cat-spinner.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$spinner-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &[hidden] {\n    display: none;\n  }\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray: 135px;\n  stroke-dashoffset: 95px;\n  stroke-linecap: round;\n  stroke-width: 5px;\n  transform-origin: center center;\n  animation: spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;\n  width: 1em;\n  height: 1em;\n}\n\n// ----- sizes\n\n@mixin size($size) {\n  .spinner-#{$size} svg {\n    font-size: map.get($spinner-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n\n// ----- animation\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-tab.js

@@ -40,13 +40,13 @@ const CatTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get hostElement() { return this; }
   static get style() { return catTabCss; }
 }, [1, "cat-tab", {
-    "label": [1],
-    "icon": [1],
-    "iconOnly": [8, "icon-only"],
-    "iconRight": [4, "icon-right"],
-    "url": [1],
-    "urlTarget": [1, "url-target"],
-    "deactivated": [4]
+    "label": [513],
+    "icon": [513],
+    "iconOnly": [520, "icon-only"],
+    "iconRight": [516, "icon-right"],
+    "url": [513],
+    "urlTarget": [513, "url-target"],
+    "deactivated": [516]
   }, [[0, "click", "onClick"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"cat-tab.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mDAAmD;;ACGrE,IAAI,YAAY,GAAG,CAAC,CAAC;MAURA,QAAM;EALnB;;;;;;;;IAWU,UAAK,GAAG,EAAE,CAAC;;;;IAUX,aAAQ,GAAyB,KAAK,CAAC;;;;IAKvC,cAAS,GAAG,KAAK,CAAC;;;;IAelB,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;GACF;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTab"],"sources":["./src/components/cat-tab/cat-tab.scss?tag=cat-tab&encapsulation=shadow","./src/components/cat-tab/cat-tab.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","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"],"version":3}
+{"file":"cat-tab.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mDAAmD;;ACGrE,IAAI,YAAY,GAAG,CAAC,CAAC;MAURA,QAAM;EALnB;;;;;;;;IAW2B,UAAK,GAAG,EAAE,CAAC;;;;IAUX,aAAQ,GAAyB,KAAK,CAAC;;;;IAKvC,cAAS,GAAG,KAAK,CAAC;;;;IAelB,gBAAW,GAAG,KAAK,CAAC;GAqB9C;EAdC,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;KACnD;GACF;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTab"],"sources":["./src/components/cat-tab/cat-tab.scss?tag=cat-tab&encapsulation=shadow","./src/components/cat-tab/cat-tab.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","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({ reflect: true }) label = '';\n\n  /**\n   * The name of an icon to be displayed in the tab.\n   */\n  @Prop({ reflect: true }) icon?: string;\n\n  /**\n   * Hide the actual button content and only display the tab.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop({ reflect: true }) iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop({ reflect: true }) url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop({ reflect: true }) urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the tab should be deactivated.\n   */\n  @Prop({ reflect: true }) 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"],"version":3}

package/dist/components/cat-tabs.js

@@ -10,8 +10,8 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.tabs = [];
     this.buttons = [];
+    this.tabs = [];
     /**
      * The ID of the active tab.
      */
@@ -26,11 +26,24 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     activeTab === null || activeTab === void 0 ? void 0 : activeTab.click();
   }
   componentWillLoad() {
-    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+    this.syncTabs();
     if (this.tabs.length) {
       this.activeTabId = this.activeTab;
     }
   }
+  componentDidLoad() {
+    var _a;
+    this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
+      childList: true,
+      attributes: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   onKeydown(event) {
     var _a;
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
@@ -60,6 +73,9 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.buttons.push(button);
     }
   }
+  syncTabs() {
+    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+  }
   get hostElement() { return this; }
   static get watchers() { return {
     "activeTabId": ["onActiveTabChanged"]
@@ -68,6 +84,7 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "cat-tabs", {
     "activeTab": [1, "active-tab"],
     "tabsAlign": [1, "tabs-align"],
+    "tabs": [32],
     "activeTabId": [32]
   }, [[0, "keydown", "onKeydown"]]]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"cat-tabs.js","mappings":"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","names":["CatTabs"],"sources":["./src/components/cat-tabs/cat-tabs.scss?tag=cat-tabs&encapsulation=shadow","./src/components/cat-tabs/cat-tabs.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.tabs');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([tabs-align='center']) {\n  justify-content: center;\n}\n\n:host([tabs-align='right']) {\n  justify-content: end;\n}\n\n:host([tabs-align='justify']) {\n  cat-button {\n    flex: 1 0 auto;\n  }\n}\n\n.tab {\n  padding: 0.5rem;\n\n  &.tab-active {\n    box-shadow: inset 0 -3px 0 0 cat-token('color.ui.border.activeTab');\n  }\n}\n","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"],"version":3}
+{"file":"cat-tabs.js","mappings":"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","names":["CatTabs"],"sources":["./src/components/cat-tabs/cat-tabs.scss?tag=cat-tabs&encapsulation=shadow","./src/components/cat-tabs/cat-tabs.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.tabs');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([tabs-align='center']) {\n  justify-content: center;\n}\n\n:host([tabs-align='right']) {\n  justify-content: end;\n}\n\n:host([tabs-align='justify']) {\n  cat-button {\n    flex: 1 0 auto;\n  }\n}\n\n.tab {\n  padding: 0.5rem;\n\n  &.tab-active {\n    box-shadow: inset 0 -3px 0 0 cat-token('color.ui.border.activeTab');\n  }\n}\n","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 buttons: HTMLCatButtonElement[] = [];\n  private mutationObserver?: MutationObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() tabs: HTMLCatTabElement[] = [];\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.syncTabs();\n    if (this.tabs.length) {\n      this.activeTabId = this.activeTab;\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(\n      mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n    );\n\n    this.mutationObserver?.observe(this.hostElement, {\n      childList: true,\n      attributes: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\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  private syncTabs() {\n    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n  }\n}\n"],"version":3}

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

@@ -1 +1 @@
-{"file":"cat-textarea.js","mappings":"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","names":["CatTextarea","log","autosize"],"sources":["../node_modules/autosize/dist/autosize.esm.js","./src/components/cat-textarea/cat-textarea.scss?tag=cat-textarea&encapsulation=shadow","./src/components/cat-textarea/cat-textarea.tsx"],"sourcesContent":["var e,t,n=\"function\"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event(\"test\")}catch(e){o=function(e){var t=document.createEvent(\"Event\");return t.initEvent(e,!0,!1),t}}function r(e){var t=n.get(e);t&&t.destroy()}function i(e){var t=n.get(e);t&&t.update()}var l=null;\"undefined\"==typeof window||\"function\"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&\"TEXTAREA\"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,d=function(){e.clientWidth!==i&&c()},a=function(t){window.removeEventListener(\"resize\",d,!1),e.removeEventListener(\"input\",c,!1),e.removeEventListener(\"keyup\",c,!1),e.removeEventListener(\"autosize:destroy\",a,!1),e.removeEventListener(\"autosize:update\",c,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),n.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener(\"autosize:destroy\",a,!1),\"onpropertychange\"in e&&\"oninput\"in e&&e.addEventListener(\"keyup\",c,!1),window.addEventListener(\"resize\",d,!1),e.addEventListener(\"input\",c,!1),e.addEventListener(\"autosize:update\",c,!1),e.style.overflowX=\"hidden\",e.style.wordWrap=\"break-word\",n.set(e,{destroy:a,update:c}),\"vertical\"===(t=window.getComputedStyle(e,null)).resize?e.style.resize=\"none\":\"both\"===t.resize&&(e.style.resize=\"horizontal\"),r=\"content-box\"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),c()}function u(t){var n=e.style.width;e.style.width=\"0px\",e.style.width=n,e.style.overflowY=t}function s(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(e),n=document.documentElement&&document.documentElement.scrollTop;e.style.height=\"\",e.style.height=e.scrollHeight+r+\"px\",i=e.clientWidth,t.forEach(function(e){e.node.scrollTop=e.scrollTop}),n&&(document.documentElement.scrollTop=n)}}function c(){s();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r=\"content-box\"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?\"hidden\"===n.overflowY&&(u(\"scroll\"),s(),r=\"content-box\"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):\"hidden\"!==n.overflowY&&(u(\"hidden\"),s(),r=\"content-box\"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o(\"autosize:resized\");try{e.dispatchEvent(i)}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e});var d=l;export default d;\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  align-self: flex-start;\n\n  &.hidden {\n    @include cat-visually-hidden;\n  }\n}\n\n.input-optional {\n  margin-left: 0.25rem;\n  @include cat-body('xs');\n  color: cat-token('color.ui.font.muted');\n}\n\ntextarea {\n  margin: 0;\n  padding: 0.625rem 0.75rem;\n  min-height: cat-size('m');\n  font: inherit;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  border: none;\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &:disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n    resize: none;\n  }\n\n  &:hover:not(:disabled) {\n    box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n  }\n\n  &:focus {\n    outline: 2px solid cat-token('color.ui.border.focus');\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n","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    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\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"],"version":3}
+{"file":"cat-textarea.js","mappings":";;;;AAAA,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,MAAM,EAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,GAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,GAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,MAAM,EAAE,UAAU,EAAE,OAAO,MAAM,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,UAAU,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,GAAG,CAAC,EAAE,CAAC,GAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,GAAG,CAAC,EAAE,SAAS,GAAG,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,EAAC,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,UAAU,YAAY,OAAO,EAAE,CAAC,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAS,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,EAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;;ACA7pG,MAAM,cAAc,GAAG,o1CAAo1C;;ACK32C,IAAI,YAAY,GAAG,CAAC,CAAC;MAgBRA,aAAW;EALxB;;;;;;;IAMmB,OAAE,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;IAK9C,oBAAe,GAAG,KAAK,CAAC;;;;IAKzB,aAAQ,GAAG,KAAK,CAAC;;;;IAUjB,UAAK,GAAG,EAAE,CAAC;;;;IAKX,gBAAW,GAAG,KAAK,CAAC;;;;IAepB,SAAI,GAAG,EAAE,CAAC;;;;IAUV,aAAQ,GAAG,KAAK,CAAC;;;;IAKjB,aAAQ,GAAG,KAAK,CAAC;;;;IAKjB,SAAI,GAAG,CAAC,CAAC;GAqGlB;EA/EC,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxCC,QAAG,CAAC,KAAK,CAAC,uCAAuC,EAAE,IAAI,CAAC,CAAC;KAC1D;GACF;EAED,gBAAgB;IACdC,CAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACzB;;;;;;;EASD,MAAM,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GAC9B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,KAAK,MAClC,aAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,IAC1D,YAAM,IAAI,EAAC,OAAO,IACf,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,KAAK,IAAI,CAAC,KAAK,EAClE,CAAC,IAAI,CAAC,QAAQ,KACb,YAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM,iBAExC,CACR,CACI,CACD,CACT,EACD,gBACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAyB,CAAC,EACtD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,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,GACpB,EACX,IAAI,CAAC,WAAW,CACZ,EACP;GACH;EAED,IAAY,WAAW;IACrB,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACzE,QACE,CAAC,IAAI,CAAC,IAAI,IAAI,cAAc,MAC1B,EAAC,WAAW,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CAC3F,EACD;GACH;EAEO,OAAO,CAAC,KAAY;IAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;IACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTextarea","log","autosize"],"sources":["../node_modules/autosize/dist/autosize.esm.js","./src/components/cat-textarea/cat-textarea.scss?tag=cat-textarea&encapsulation=shadow","./src/components/cat-textarea/cat-textarea.tsx"],"sourcesContent":["var e,t,n=\"function\"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event(\"test\")}catch(e){o=function(e){var t=document.createEvent(\"Event\");return t.initEvent(e,!0,!1),t}}function r(e){var t=n.get(e);t&&t.destroy()}function i(e){var t=n.get(e);t&&t.update()}var l=null;\"undefined\"==typeof window||\"function\"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&\"TEXTAREA\"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,d=function(){e.clientWidth!==i&&c()},a=function(t){window.removeEventListener(\"resize\",d,!1),e.removeEventListener(\"input\",c,!1),e.removeEventListener(\"keyup\",c,!1),e.removeEventListener(\"autosize:destroy\",a,!1),e.removeEventListener(\"autosize:update\",c,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),n.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener(\"autosize:destroy\",a,!1),\"onpropertychange\"in e&&\"oninput\"in e&&e.addEventListener(\"keyup\",c,!1),window.addEventListener(\"resize\",d,!1),e.addEventListener(\"input\",c,!1),e.addEventListener(\"autosize:update\",c,!1),e.style.overflowX=\"hidden\",e.style.wordWrap=\"break-word\",n.set(e,{destroy:a,update:c}),\"vertical\"===(t=window.getComputedStyle(e,null)).resize?e.style.resize=\"none\":\"both\"===t.resize&&(e.style.resize=\"horizontal\"),r=\"content-box\"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),c()}function u(t){var n=e.style.width;e.style.width=\"0px\",e.style.width=n,e.style.overflowY=t}function s(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(e),n=document.documentElement&&document.documentElement.scrollTop;e.style.height=\"\",e.style.height=e.scrollHeight+r+\"px\",i=e.clientWidth,t.forEach(function(e){e.node.scrollTop=e.scrollTop}),n&&(document.documentElement.scrollTop=n)}}function c(){s();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r=\"content-box\"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?\"hidden\"===n.overflowY&&(u(\"scroll\"),s(),r=\"content-box\"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):\"hidden\"!==n.overflowY&&(u(\"hidden\"),s(),r=\"content-box\"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o(\"autosize:resized\");try{e.dispatchEvent(i)}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e});var d=l;export default d;\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  align-self: flex-start;\n\n  &.hidden {\n    @include cat-visually-hidden;\n  }\n}\n\n.input-optional {\n  margin-left: 0.25rem;\n  @include cat-body('xs');\n  color: cat-token('color.ui.font.muted');\n}\n\ntextarea {\n  margin: 0;\n  padding: 0.625rem 0.75rem;\n  min-height: 2.5rem;\n  font: inherit;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  border: none;\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &:disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n    resize: none;\n  }\n\n  &:hover:not(:disabled) {\n    box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n  }\n\n  &:focus {\n    outline: 2px solid cat-token('color.ui.border.focus');\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n","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    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\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"],"version":3}

package/dist/components/cat-toast-demo.js

@@ -447,8 +447,10 @@ var toastify = createCommonjsModule(function (module) {
 var TypeIcons;
 (function (TypeIcons) {
   TypeIcons["success"] = "check-circle-filled";
-  TypeIcons["error"] = "sparkle-filled";
-  TypeIcons["info"] = "sparkle-filled";
+  TypeIcons["error"] = "cross-circle-filled";
+  TypeIcons["info"] = "danger-filled";
+  TypeIcons["primary"] = "star-circle-filled";
+  TypeIcons["secondary"] = "info-circle-filled";
 })(TypeIcons || (TypeIcons = {}));
 const ToastPositions = {
   'top-left': {
@@ -477,16 +479,36 @@ const ToastPositions = {
   }
 };
 class CatNotificationService {
+  error(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    toastify(toastOptions).showToast();
+  }
+  success(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    toastify(toastOptions).showToast();
+  }
+  info(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    toastify(toastOptions).showToast();
+  }
+  primary(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    toastify(toastOptions).showToast();
+  }
+  secondary(title, message = ' ', options) {
+    const toastOptions = this.extractOptions(title, message, options);
+    toastify(toastOptions).showToast();
+  }
   toastHTMLTemplate(title, message = ' ', options) {
     var _a;
     const template = document.createElement('template');
-    const typeIcon = (options === null || options === void 0 ? void 0 : options.type) ? TypeIcons[options.type] : TypeIcons.info;
+    const typeIcon = (options === null || options === void 0 ? void 0 : options.type) ? TypeIcons[options.type] : TypeIcons.secondary;
     title = title.trim();
     message = message.trim();
     const hasMessage = message && message !== '';
     const hasMessageClass = hasMessage ? 'has-message' : '';
     template.innerHTML = `<div class="cat-toastify-wrapper">
-        <div class="cat-toastify-icon-wrapper ${(_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'info'}">
+        <div class="cat-toastify-icon-wrapper ${(_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'secondary'}">
              <cat-icon icon="${typeIcon}"></cat-icon>
         </div>
         <div class="cat-toastify-title-wrapper ${hasMessageClass}">
@@ -495,58 +517,35 @@ class CatNotificationService {
       </div>`;
     return template.content.firstChild;
   }
-  error(title, message = ' ', options) {
-    const position = this.getPosition(options);
-    const toastOptions = {
-      node: (options === null || options === void 0 ? void 0 : options.content) ? options.content : this.toastHTMLTemplate(title, message, options),
-      duration: CatNotificationService.DURATION,
-      close: true,
-      className: 'cat-toastify',
-      gravity: position.gravity,
-      position: position.position,
-      stopOnFocus: true
-    };
-    toastify(toastOptions).showToast();
-  }
-  success(title, message = ' ', options) {
-    const position = this.getPosition(options);
-    const toastOptions = {
-      node: (options === null || options === void 0 ? void 0 : options.content) ? options.content : this.toastHTMLTemplate(title, message, options),
-      duration: CatNotificationService.DURATION,
-      close: true,
-      className: 'cat-toastify',
-      gravity: position.gravity,
-      position: position.position,
-      stopOnFocus: true
+  getPosition(options) {
+    const position = {
+      gravity: 'bottom',
+      position: 'left'
     };
-    toastify(toastOptions).showToast();
+    if ((options === null || options === void 0 ? void 0 : options.position) && ToastPositions[options.position]) {
+      position.position = ToastPositions[options.position].position;
+      position.gravity = ToastPositions[options.position].gravity;
+    }
+    return position;
   }
-  info(title, message = ' ', options) {
+  extractOptions(title, message = ' ', options) {
     const position = this.getPosition(options);
-    const toastOptions = {
+    return {
       node: (options === null || options === void 0 ? void 0 : options.content) ? options.content : this.toastHTMLTemplate(title, message, options),
       duration: CatNotificationService.DURATION,
       close: true,
       className: 'cat-toastify',
       gravity: position.gravity,
       position: position.position,
-      stopOnFocus: true
-    };
-    toastify(toastOptions).showToast();
-  }
-  getPosition(options) {
-    const position = {
-      gravity: 'bottom',
-      position: 'right'
+      stopOnFocus: true,
+      offset: {
+        x: '1.5rem',
+        y: '1.5rem'
+      }
     };
-    if ((options === null || options === void 0 ? void 0 : options.position) && ToastPositions[options.position]) {
-      position.position = ToastPositions[options.position].position;
-      position.gravity = ToastPositions[options.position].gravity;
-    }
-    return position;
   }
 }
-CatNotificationService.DURATION = 8000;
+CatNotificationService.DURATION = 80000;
 const NotificationsService = new CatNotificationService();
 
 const catToastDemoCss = ":host{display:block}";
@@ -561,7 +560,8 @@ const CatToastDemo$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   onClick() {
     const infoOptions = {
-      position: 'top-left'
+      position: 'top-left',
+      type: 'info'
     };
     const errorOptions = {
       position: 'top-center',
@@ -582,6 +582,16 @@ const CatToastDemo$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       type: 'success',
       content: template.content.firstChild
     };
+    const primaryOptions = {
+      position: 'bottom-right',
+      type: 'primary'
+    };
+    const secondaryOptions = {
+      position: 'bottom-right',
+      type: 'secondary'
+    };
+    NotificationsService.secondary('Secondary Click', 'secondary info', secondaryOptions);
+    NotificationsService.primary('primary Click', 'secondary info', primaryOptions);
     NotificationsService.error('Default Click');
     NotificationsService.error('Long default title, long default title, long default title, long default title');
     NotificationsService.info('Info Click', 'Info message', infoOptions);