@haiilo/catalyst 1.2.1 → 1.2.3

package/dist/components/cat-skeleton2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const catSkeletonCss = ":host{display:flex;flex-direction:column;position:relative;--background:#ebecf0;--highlight:#d7dbe0;--speed:2s}:host([variant=square]),:host([variant=circle]){display:inline-flex}:host([hidden]){display:none}:host([variant=head]){margin-bottom:0.5rem}:host([variant=body]){margin-bottom:1rem}.skeleton{display:block;border-radius:0.25rem;background:var(--background)}.skeleton-circle{border-radius:10rem}.skeleton-xs.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-square,.skeleton-xs.skeleton-circle{width:var(--width, 1.5rem);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-head,.skeleton-xs.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xs.skeleton-head{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-xs.skeleton-body{height:calc(0.75rem - 4px);margin:calc((1rem - 0.75rem + 4px) * 0.5) 0}.skeleton-s.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2rem)}.skeleton-s.skeleton-square,.skeleton-s.skeleton-circle{width:var(--width, 2rem);height:var(--height, 2rem)}.skeleton-s.skeleton-head,.skeleton-s.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-s.skeleton-head{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-s.skeleton-body{height:calc(0.875rem - 4px);margin:calc((1rem - 0.875rem + 4px) * 0.5) 0}.skeleton-m.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2.5rem)}.skeleton-m.skeleton-square,.skeleton-m.skeleton-circle{width:var(--width, 2.5rem);height:var(--height, 2.5rem)}.skeleton-m.skeleton-head,.skeleton-m.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-m.skeleton-head{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-m.skeleton-body{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-l.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3rem)}.skeleton-l.skeleton-square,.skeleton-l.skeleton-circle{width:var(--width, 3rem);height:var(--height, 3rem)}.skeleton-l.skeleton-head,.skeleton-l.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-l.skeleton-head{height:calc(1.5rem - 4px);margin:calc((1.75rem - 1.5rem + 4px) * 0.5) 0}.skeleton-l.skeleton-body{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-square,.skeleton-xl.skeleton-circle{width:var(--width, 3.5rem);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-head,.skeleton-xl.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xl.skeleton-head{height:calc(1.75rem - 4px);margin:calc((2rem - 1.75rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-body{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-sheen{background:linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);background-size:300% 100%;animation:sheen var(--speed) ease-in-out infinite}.skeleton-pulse{position:relative;overflow:hidden}.skeleton-pulse::before{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:var(--highlight);animation:var(--speed) ease-in-out 0.5s infinite normal none running pulse;opacity:0}@keyframes sheen{0%{background-position:right}}@keyframes pulse{50%{opacity:1}}";
+const catSkeletonCss = ":host{display:flex;flex-direction:column;position:relative;--background:#ebecf0;--highlight:#d7dbe0;--speed:2s}:host([variant=square]),:host([variant=circle]){display:inline-flex}:host([hidden]){display:none}:host([variant=head]){margin-bottom:0.5rem}:host([variant=body]){margin-bottom:1rem}.skeleton{display:block;border-radius:var(--cat-border-radius-m, 0.25rem);background:var(--background)}.skeleton-circle{border-radius:10rem}.skeleton-xs.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-square,.skeleton-xs.skeleton-circle{width:var(--width, 1.5rem);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-head,.skeleton-xs.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xs.skeleton-head{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-xs.skeleton-body{height:calc(0.75rem - 4px);margin:calc((1rem - 0.75rem + 4px) * 0.5) 0}.skeleton-s.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2rem)}.skeleton-s.skeleton-square,.skeleton-s.skeleton-circle{width:var(--width, 2rem);height:var(--height, 2rem)}.skeleton-s.skeleton-head,.skeleton-s.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-s.skeleton-head{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-s.skeleton-body{height:calc(0.875rem - 4px);margin:calc((1rem - 0.875rem + 4px) * 0.5) 0}.skeleton-m.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2.5rem)}.skeleton-m.skeleton-square,.skeleton-m.skeleton-circle{width:var(--width, 2.5rem);height:var(--height, 2.5rem)}.skeleton-m.skeleton-head,.skeleton-m.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-m.skeleton-head{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-m.skeleton-body{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-l.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3rem)}.skeleton-l.skeleton-square,.skeleton-l.skeleton-circle{width:var(--width, 3rem);height:var(--height, 3rem)}.skeleton-l.skeleton-head,.skeleton-l.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-l.skeleton-head{height:calc(1.5rem - 4px);margin:calc((1.75rem - 1.5rem + 4px) * 0.5) 0}.skeleton-l.skeleton-body{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-square,.skeleton-xl.skeleton-circle{width:var(--width, 3.5rem);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-head,.skeleton-xl.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xl.skeleton-head{height:calc(1.75rem - 4px);margin:calc((2rem - 1.75rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-body{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-sheen{background:linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);background-size:300% 100%;animation:sheen var(--speed) ease-in-out infinite}.skeleton-pulse{position:relative;overflow:hidden}.skeleton-pulse::before{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:var(--highlight);animation:var(--speed) ease-in-out 0.5s infinite normal none running pulse;opacity:0}@keyframes sheen{0%{background-position:right}}@keyframes pulse{50%{opacity:1}}";
 
 const CatSkeleton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cat-skeleton2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,g2GAAg2G;;MCU12G,WAAW;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":[],"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}
+{"file":"cat-skeleton2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,43GAA43G;;MCUt4G,WAAW;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":[],"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-tabs.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './cat-button2.js';
 import { d as defineCustomElement$3 } from './cat-icon2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
 
-const catTabsCss = ":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 0}.tab.tab-active{box-shadow:inset 0 -3px 0 0 rgb(var(--cat-primary-bg, 0, 129, 148))}";
+const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color-dark, 215, 219, 224))}: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 0}.tab.tab-active{box-shadow:inset 0 -3px 0 0 rgb(var(--cat-primary-bg, 0, 129, 148))}";
 
 const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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.dark');\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 0;\n\n  &.tab-active {\n    box-shadow: inset 0 -3px 0 0 cat-token('color.theme.primary.bg');\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              active={Boolean(this.activeTabId && tab.id === this.activeTabId)}\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}
+{"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.dark');\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 0;\n\n  &.tab-active {\n    box-shadow: inset 0 -3px 0 0 cat-token('color.theme.primary.bg');\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              active={Boolean(this.activeTabId && tab.id === this.activeTabId)}\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

@@ -4,7 +4,7 @@ import { C as CatFormHint } from './cat-form-hint.js';
 
 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;
 
-const catTextareaCss = ".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;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:0.25rem;border:none;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}textarea:disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}textarea:hover:not(:disabled){box-shadow:0 0 0 2px #d7dbe0}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catTextareaCss = ".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;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);border:none;box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear}textarea:disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}textarea:hover:not(:disabled){box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 let nextUniqueId = 0;
 const CatTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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: 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.dark');\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.dark');\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":"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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: 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.dark');\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.dark');\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-toggle.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loglevel } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 
-const catToggleCss = ".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;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:#d7dbe0;transition:background-color 0.13s ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 0, 129, 148))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem));background:rgb(var(--cat-primary-fill, 255, 255, 255))}:host(.cat-error) .toggle{background-color:rgba(217, 52, 13, 0.2)}:host(.cat-error) :checked+.toggle{background-color:#d9340d}:host(.cat-error) :checked+.toggle::after{background:white}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catToggleCss = ".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;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:rgb(var(--cat-border-color-dark, 215, 219, 224));transition:background-color 0.13s ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 0, 129, 148))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem));background:rgb(var(--cat-primary-fill, 255, 255, 255))}.is-disabled .toggle{background-color:rgb(var(--cat-border-color-dark, 215, 219, 224))}:host(.cat-error) .toggle{background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.2)}:host(.cat-error) :checked+.toggle{background-color:rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.toggle::after{background:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 let nextUniqueId = 0;
 const CatToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

@@ -1 +1 @@
-{"file":"cat-toggle.js","mappings":"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","names":["CatToggle","log"],"sources":["./src/components/cat-toggle/cat-toggle.scss?tag=cat-toggle&encapsulation=shadow","./src/components/cat-toggle/cat-toggle.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$toggle-width: 2rem;\n$toggle-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\ninput {\n  position: absolute;\n  margin: 0;\n  width: $toggle-width;\n  height: $toggle-height;\n  opacity: 0;\n  cursor: inherit;\n}\n\n.toggle {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: $toggle-width;\n  height: $toggle-height;\n  border-radius: 10rem;\n  background-color: cat-token('color.ui.border.dark');\n  transition: background-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 1rem;\n    height: 1rem;\n    background: #fff;\n    border-radius: 10rem;\n    transform: translateX(calc(2px - 0.5rem));\n    transition: transform cat-token('time.transition.s') linear;\n    @include cat-elevation(1);\n\n    :checked + & {\n      transform: translateX(calc(-2px + 0.5rem));\n      background: cat-token('color.theme.primary.fill');\n    }\n  }\n}\n\n:host(.cat-error) {\n  .toggle {\n    background-color: cat-token('color.theme.danger.bg', 0.2);\n  }\n\n  :checked + .toggle {\n    background-color: cat-token('color.theme.danger.bg');\n\n    &::after {\n      background: cat-token('color.theme.danger.fill');\n    }\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly id = `cat-toggle-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop({ mutable: true }) value?: string | boolean;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Sets focus on the toggle. Use this method instead of `toggle.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.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value !== undefined ? String(this.value) : this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\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.checked = this.input.checked;\n\n    if (!this.value || typeof this.value === 'boolean') {\n      this.value = this.checked;\n    }\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-toggle.js","mappings":"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","names":["CatToggle","log"],"sources":["./src/components/cat-toggle/cat-toggle.scss?tag=cat-toggle&encapsulation=shadow","./src/components/cat-toggle/cat-toggle.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$toggle-width: 2rem;\n$toggle-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\ninput {\n  position: absolute;\n  margin: 0;\n  width: $toggle-width;\n  height: $toggle-height;\n  opacity: 0;\n  cursor: inherit;\n}\n\n.toggle {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: $toggle-width;\n  height: $toggle-height;\n  border-radius: 10rem;\n  background-color: cat-token('color.ui.border.dark');\n  transition: background-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 1rem;\n    height: 1rem;\n    background: #fff;\n    border-radius: 10rem;\n    transform: translateX(calc(2px - 0.5rem));\n    transition: transform cat-token('time.transition.s') linear;\n    @include cat-elevation(1);\n\n    :checked + & {\n      transform: translateX(calc(-2px + 0.5rem));\n      background: cat-token('color.theme.primary.fill');\n    }\n  }\n\n  .is-disabled & {\n    background-color: cat-token('color.ui.border.dark');\n  }\n}\n\n:host(.cat-error) {\n  .toggle {\n    background-color: cat-token('color.theme.danger.bg', 0.2);\n  }\n\n  :checked + .toggle {\n    background-color: cat-token('color.theme.danger.bg');\n\n    &::after {\n      background: cat-token('color.theme.danger.fill');\n    }\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly id = `cat-toggle-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop({ mutable: true }) value?: string | boolean;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Sets focus on the toggle. Use this method instead of `toggle.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.input.focus(options);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value !== undefined ? String(this.value) : this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\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.checked = this.input.checked;\n\n    if (!this.value || typeof this.value === 'boolean') {\n      this.value = this.checked;\n    }\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-tooltip.js

@@ -4,7 +4,7 @@ import { f as firstTabbable } from './first-tabbable.js';
 
 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
-const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:black;border-radius:0.25rem;color:white;transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
+const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
 
 let nextUniqueId = 0;
 const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

@@ -1 +1 @@
-{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","isTouchScreen"],"sources":["./src/utils/is-touch-screen.ts","./src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","./src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.tooltip {\n  position: absolute;\n  @include cat-body('s', 500);\n  background-color: cat-token('color.ui.background.tooltip');\n  border-radius: cat-border-radius('m');\n  color: cat-token('color.ui.font.tooltip');\n  transition: opacity cat-token('time.transition.m') linear, visibility cat-token('time.transition.m') linear;\n  visibility: hidden;\n  opacity: 0;\n  box-shadow: $-box-shadow;\n  z-index: $cat-tooltip-z-index;\n  max-width: $-max-width;\n\n  &-show {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n// ----- round\n\n.tooltip-round {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n  padding: 0.375rem 0.5rem;\n\n  &.tooltip-round {\n    padding: 0.375rem 0.75rem;\n  }\n}\n\n.tooltip-m {\n  padding: 0.75rem;\n\n  &.tooltip-round {\n    padding: 0.75rem 1rem;\n  }\n}\n\n.tooltip-l {\n  padding: 1rem;\n\n  &.tooltip-round {\n    padding: 1rem 1.5rem;\n  }\n}\n\n// ----- trigger\n\n.tooltip-trigger {\n  display: inline-block;\n\n  &:focus {\n    outline: none;\n  }\n}\n","import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private triggerElement?: HTMLElement;\n  private trigger?: FocusableElement;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideListener();\n  }\n\n  componentDidLoad(): void {\n    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n    if (!this.isTabbable) {\n      this.trigger?.setAttribute('tabindex', '0');\n    }\n    if (this.trigger && this.tooltip) {\n      autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n          <slot />\n        </div>\n        {this.content && !this.disabled && (\n          <div\n            ref={el => (this.tooltip = el)}\n            id={this.id}\n            class={{\n              tooltip: true,\n              'tooltip-round': this.round,\n              [`tooltip-${this.size}`]: Boolean(this.size)\n            }}\n          >\n            {this.content}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private update() {\n    if (this.trigger && this.tooltip) {\n      computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.showTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.add('tooltip-show');\n    }, this.showDelay);\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.hideTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.remove('tooltip-show');\n    }, this.hideDelay);\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    this.touchTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.add('tooltip-show');\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    if (this.touchTimeout) {\n      window.clearTimeout(this.touchTimeout);\n    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n}\n"],"version":3}
+{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","isTouchScreen"],"sources":["./src/utils/is-touch-screen.ts","./src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","./src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.tooltip {\n  position: absolute;\n  @include cat-body('s', 500);\n  background-color: cat-token('color.ui.background.tooltip');\n  border-radius: cat-border-radius('m');\n  color: cat-token('color.ui.font.tooltip');\n  transition: opacity cat-token('time.transition.m') linear, visibility cat-token('time.transition.m') linear;\n  visibility: hidden;\n  opacity: 0;\n  box-shadow: $-box-shadow;\n  z-index: $cat-tooltip-z-index;\n  max-width: $-max-width;\n\n  &-show {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n// ----- round\n\n.tooltip-round {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n  padding: 0.375rem 0.5rem;\n\n  &.tooltip-round {\n    padding: 0.375rem 0.75rem;\n  }\n}\n\n.tooltip-m {\n  padding: 0.75rem;\n\n  &.tooltip-round {\n    padding: 0.75rem 1rem;\n  }\n}\n\n.tooltip-l {\n  padding: 1rem;\n\n  &.tooltip-round {\n    padding: 1rem 1.5rem;\n  }\n}\n\n// ----- trigger\n\n.tooltip-trigger {\n  display: inline-block;\n\n  &:focus {\n    outline: none;\n  }\n}\n","import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-tooltip',\n  styleUrl: 'cat-tooltip.scss',\n  shadow: true\n})\nexport class CatTooltip {\n  private static readonly OFFSET = 4;\n  private readonly id = `cat-tooltip-${nextUniqueId++}`;\n  private tooltip?: HTMLElement;\n  private triggerElement?: HTMLElement;\n  private trigger?: FocusableElement;\n  private showTimeout?: number;\n  private hideTimeout?: number;\n  private touchTimeout?: number;\n\n  /**\n   * The content of the tooltip.\n   */\n  @Prop() content = '';\n\n  /**\n   * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n   * and invisible. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placement of the tooltip.\n   */\n  @Prop() placement: Placement = 'top';\n\n  /**\n   * Use round tooltip edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The size of the tooltip.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  /**\n   * The delay time for showing tooltip in ms.\n   */\n  @Prop() showDelay = 250;\n\n  /**\n   * The delay time for hiding tooltip in ms.\n   */\n  @Prop() hideDelay = 0;\n\n  /**\n   * The duration of tap to show the tooltip.\n   */\n  @Prop() longTouchDuration = 1000;\n\n  @Listen('keydown')\n  handleKeyDown({ key }: KeyboardEvent) {\n    key === 'Escape' && this.hideListener();\n  }\n\n  componentDidLoad(): void {\n    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n    if (!this.isTabbable) {\n      this.trigger?.setAttribute('tabindex', '0');\n    }\n    if (this.trigger && this.tooltip) {\n      autoUpdate(this.trigger, this.tooltip, () => this.update());\n    }\n\n    if (isTouchScreen) {\n      window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n      this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (isTouchScreen) {\n      window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n      this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n    } else {\n      this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n      this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n      this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n      this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n          <slot />\n        </div>\n        {this.content && !this.disabled && (\n          <div\n            ref={el => (this.tooltip = el)}\n            id={this.id}\n            class={{\n              tooltip: true,\n              'tooltip-round': this.round,\n              [`tooltip-${this.size}`]: Boolean(this.size)\n            }}\n          >\n            {this.content}\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get isTabbable() {\n    return firstTabbable(this.trigger);\n  }\n\n  private update() {\n    if (this.trigger && this.tooltip) {\n      computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        middleware: [offset(CatTooltip.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.tooltip) {\n          Object.assign(this.tooltip.style, {\n            left: `${Math.max(0, x)}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private showListener() {\n    window.clearTimeout(this.hideTimeout);\n    this.showTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.add('tooltip-show');\n    }, this.showDelay);\n  }\n\n  private hideListener() {\n    window.clearTimeout(this.showTimeout);\n    this.hideTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.remove('tooltip-show');\n    }, this.hideDelay);\n  }\n\n  private touchStartListener(event: Event) {\n    event.stopPropagation();\n    this.touchTimeout = window.setTimeout(() => {\n      this.tooltip?.classList.add('tooltip-show');\n    }, this.longTouchDuration);\n  }\n\n  private touchEndListener() {\n    if (this.touchTimeout) {\n      window.clearTimeout(this.touchTimeout);\n    }\n  }\n\n  private windowTouchStartListener() {\n    this.tooltip?.classList.remove('tooltip-show');\n  }\n}\n"],"version":3}