@haiilo/catalyst 0.7.2 → 0.8.0

package/dist/collection/scss/fonts/_fonts.mixins.dm.scss

@@ -5,14 +5,14 @@
   @if list.index($weights, 400) {
     @font-face {
       font-family: 'DM Sans';
-      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2Regular")}') format('woff2');
+      src: url('#{$path}/#{cat-token("asset.font.dmSans.woff2Regular")}') format('woff2');
       font-style: normal;
       font-weight: 400;
       @content;
     }
     @font-face {
       font-family: 'DM Sans';
-      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2Italic")}') format('woff2');
+      src: url('#{$path}/#{cat-token("asset.font.dmSans.woff2Italic")}') format('woff2');
       font-style: italic;
       font-weight: 400;
       @content;
@@ -21,14 +21,14 @@
   @if list.index($weights, 500) {
     @font-face {
       font-family: 'DM Sans';
-      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2Medium")}') format('woff2');
+      src: url('#{$path}/#{cat-token("asset.font.dmSans.woff2Medium")}') format('woff2');
       font-style: normal;
       font-weight: 500;
       @content;
     }
     @font-face {
       font-family: 'DM Sans';
-      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2MediumItalic")}') format('woff2');
+      src: url('#{$path}/#{cat-token("asset.font.dmSans.woff2MediumItalic")}') format('woff2');
       font-style: italic;
       font-weight: 500;
       @content;
@@ -37,14 +37,14 @@
   @if list.index($weights, 700) {
     @font-face {
       font-family: 'DM Sans';
-      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2Bold")}') format('woff2');
+      src: url('#{$path}/#{cat-token("asset.font.dmSans.woff2Bold")}') format('woff2');
       font-style: normal;
       font-weight: 700;
       font-display: swap;
     }
     @font-face {
       font-family: 'DM Sans';
-      src: url('#{$path}#{cat-token("asset.font.dmSans.woff2BoldItalic")}') format('woff2');
+      src: url('#{$path}/#{cat-token("asset.font.dmSans.woff2BoldItalic")}') format('woff2');
       font-style: italic;
       font-weight: 700;
       font-display: swap;

package/dist/collection/scss/fonts/_fonts.mixins.lato.scss

@@ -5,8 +5,8 @@
   @if list.index($weights, 100) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Hairline")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffHairline")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Hairline")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffHairline")}') format('woff');
       font-style: normal;
       font-weight: 100;
       text-rendering: optimizeLegibility;
@@ -14,8 +14,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2HairlineItalic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffHairlineItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2HairlineItalic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffHairlineItalic")}') format('woff');
       font-style: italic;
       font-weight: 100;
       text-rendering: optimizeLegibility;
@@ -25,8 +25,8 @@
   @if list.index($weights, 200) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Thin")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffThin")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Thin")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffThin")}') format('woff');
       font-style: normal;
       font-weight: 200;
       text-rendering: optimizeLegibility;
@@ -34,8 +34,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2ThinItalic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffThinItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2ThinItalic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffThinItalic")}') format('woff');
       font-style: italic;
       font-weight: 200;
       text-rendering: optimizeLegibility;
@@ -45,8 +45,8 @@
   @if list.index($weights, 300) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Light")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffLight")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Light")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffLight")}') format('woff');
       font-style: normal;
       font-weight: 300;
       text-rendering: optimizeLegibility;
@@ -54,8 +54,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2LightItalic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffLightItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2LightItalic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffLightItalic")}') format('woff');
       font-style: italic;
       font-weight: 300;
       text-rendering: optimizeLegibility;
@@ -65,8 +65,8 @@
   @if list.index($weights, 400) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Regular")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffRegular")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Regular")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffRegular")}') format('woff');
       font-style: normal;
       font-weight: 400;
       text-rendering: optimizeLegibility;
@@ -74,8 +74,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Italic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Italic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffItalic")}') format('woff');
       font-style: italic;
       font-weight: 400;
       text-rendering: optimizeLegibility;
@@ -85,8 +85,8 @@
   @if list.index($weights, 500) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Medium")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffMedium")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Medium")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffMedium")}') format('woff');
       font-style: normal;
       font-weight: 500;
       text-rendering: optimizeLegibility;
@@ -94,8 +94,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2MediumItalic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffMediumItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2MediumItalic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffMediumItalic")}') format('woff');
       font-style: italic;
       font-weight: 500;
       text-rendering: optimizeLegibility;
@@ -105,8 +105,8 @@
   @if list.index($weights, 600) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Semibold")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffSemibold")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Semibold")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffSemibold")}') format('woff');
       font-style: normal;
       font-weight: 600;
       text-rendering: optimizeLegibility;
@@ -114,8 +114,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2SemiboldItalic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffSemiboldItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2SemiboldItalic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffSemiboldItalic")}') format('woff');
       font-style: italic;
       font-weight: 600;
       text-rendering: optimizeLegibility;
@@ -125,8 +125,8 @@
   @if list.index($weights, 700) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Bold")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffBold")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Bold")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffBold")}') format('woff');
       font-style: normal;
       font-weight: 700;
       text-rendering: optimizeLegibility;
@@ -134,8 +134,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2BoldItalic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffBoldItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2BoldItalic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffBoldItalic")}') format('woff');
       font-style: italic;
       font-weight: 700;
       text-rendering: optimizeLegibility;
@@ -145,8 +145,8 @@
   @if list.index($weights, 800) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Heavy")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffHeavy")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Heavy")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffHeavy")}') format('woff');
       font-style: normal;
       font-weight: 800;
       text-rendering: optimizeLegibility;
@@ -154,8 +154,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2HeavyItalic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffHeavyItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2HeavyItalic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffHeavyItalic")}') format('woff');
       font-style: italic;
       font-weight: 800;
       text-rendering: optimizeLegibility;
@@ -165,8 +165,8 @@
   @if list.index($weights, 900) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2Black")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffBlack")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Black")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffBlack")}') format('woff');
       font-style: normal;
       font-weight: 900;
       text-rendering: optimizeLegibility;
@@ -174,8 +174,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}#{cat-token("asset.font.lato.woff2BlackItalic")}') format('woff2'),
-        url('#{$path}#{cat-token("asset.font.lato.woffBlackItalic")}') format('woff');
+      src: url('#{$path}/#{cat-token("asset.font.lato.woff2BlackItalic")}') format('woff2'),
+        url('#{$path}/#{cat-token("asset.font.lato.woffBlackItalic")}') format('woff');
       font-style: italic;
       font-weight: 900;
       text-rendering: optimizeLegibility;

package/dist/collection/scss/index.scss

@@ -1,32 +1,35 @@
 // -- Reset
 
-@use '~sanitize.css/sanitize.css';
-@use '~sanitize.css/assets.css';
-@use '~sanitize.css/reduce-motion.css';
+@import '~sanitize.css/sanitize.css';
+@import '~sanitize.css/assets.css';
+@import '~sanitize.css/reduce-motion.css';
 
 // -- Vendor
 
-@use '~toastify-js/src/toastify.css';
+@import '~toastify-js/src/toastify.css';
 
-// -- Core
+// -- Fonts
 
-@use 'core/base' as *;
-@use 'core/nav' as *;
-@use 'core/typography' as *;
+@import 'fonts/fonts-mixins';
 
-// -- Fonts
+// -- Core
 
-@use 'fonts/fonts' as *;
+@import 'core/base';
+@import 'core/nav';
+@import 'core/toast';
+@import 'core/typography';
 
 // -- Utils
 
-@use 'utils/color';
-@use 'utils/display';
-@use 'utils/elevation';
-@use 'utils/layout';
-@use 'utils/sizing';
-@use 'utils/spacing';
-@use 'utils/typography';
-@use 'utils/visibility';
-@use 'utils/ratio';
-@use 'utils/toast';
+@import 'utils/color';
+@import 'utils/display';
+@import 'utils/elevation';
+@import 'utils/layout';
+@import 'utils/sizing';
+@import 'utils/spacing';
+@import 'utils/typography';
+@import 'utils/visibility';
+@import 'utils/ratio';
+
+$cat-font-path: 'assets/fonts' !default;
+@include cat-fonts($cat-font-path);

package/dist/components/cat-avatar.js

@@ -77,8 +77,8 @@ const CatAvatar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
   }
   getInitials() {
-    var _a;
-    return ((_a = this.initials) !== null && _a !== void 0 ? _a : this.label
+    var _a, _b;
+    return ((_a = this.initials) !== null && _a !== void 0 ? _a : ((_b = this.label) !== null && _b !== void 0 ? _b : '')
       .split(' ')
       .map(n => n[0])
       .join(''));

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

@@ -1 +1 @@
-{"file":"cat-avatar.js","mappings":";;;;AAAA;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,GAAW;EAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;IACjC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACbD,MAAM,YAAY,GAAG,o5CAAo5C;;MCY55CA,WAAS;EALtB;;;;;;;IAWU,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,EAAE,CAAC;GA4FpB;EAhEC,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,OAAO,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,OAAO,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7B;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACfC,QAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;GACF;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,QACE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IAC1G,IAAI,CAAC,OAAO,CACX,EACJ;KACH;SAAM;MACL,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,EACP;KACH;GACF;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;QACxB,CAAC,IAAI,CAAC,IAAI,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC1F,EAAE,CAAC;GACR;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;GACrD;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;GACH;EAEO,WAAW;;IACjB,QACE,MAAA,IAAI,CAAC,QAAQ,mCACb,IAAI,CAAC,KAAK;OACP,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAvatar","log"],"sources":["./src/utils/load-img.ts","./src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","./src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: inline-block;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, cat-token('color.ui.font.avatar'));\n  background-color: var(--cat-avatar-bg, cat-token('color.ui.background.avatar'));\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, cat-size($size));\n    height: var(--cat-avatar-size, cat-size($size));\n    line-height: var(--cat-avatar-size, cat-size($size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\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  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      this.label\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-avatar.js","mappings":";;;;AAAA;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,GAAW;EAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;IACjC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACbD,MAAM,YAAY,GAAG,o5CAAo5C;;MCY55CA,WAAS;EALtB;;;;;;;IAWU,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,EAAE,CAAC;GA4FpB;EAhEC,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,OAAO,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,OAAO,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7B;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACfC,QAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;GACF;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,QACE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IAC1G,IAAI,CAAC,OAAO,CACX,EACJ;KACH;SAAM;MACL,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,EACP;KACH;GACF;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;QACxB,CAAC,IAAI,CAAC,IAAI,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC1F,EAAE,CAAC;GACR;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;GACrD;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;GACH;EAEO,WAAW;;IACjB,QACE,MAAA,IAAI,CAAC,QAAQ,mCACb,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE;OACd,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAvatar","log"],"sources":["./src/utils/load-img.ts","./src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","./src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: inline-block;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, cat-token('color.ui.font.avatar'));\n  background-color: var(--cat-avatar-bg, cat-token('color.ui.background.avatar'));\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, cat-size($size));\n    height: var(--cat-avatar-size, cat-size($size));\n    line-height: var(--cat-avatar-size, cat-size($size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\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  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      (this.label ?? '')\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-i18n-registry.js

@@ -2,8 +2,8 @@ import { l as loglevel } from './loglevel.js';
 
 class CatI18nRegistry {
   constructor() {
-    this.lang = 'en';
-    this.messages = new Map();
+    this._locale = 'en';
+    this._dicts = new Map();
     // hide constructor
   }
   static getInstance() {
@@ -12,45 +12,39 @@ class CatI18nRegistry {
     }
     return CatI18nRegistry.instance;
   }
-  getLanguage() {
-    return this.lang;
-  }
-  setLanguage(lang) {
-    this.lang = lang;
-  }
-  getMessage(key) {
-    var _a;
-    const message = (_a = this.messages.get(this.lang)) === null || _a === void 0 ? void 0 : _a.get(key);
-    if (!message) {
-      loglevel.error(`[CatI18nRegistry] Unknown message for lang ${this.lang}: ${key}`);
+  locale(locale) {
+    if (locale) {
+      this._locale = locale;
+      loglevel.info(`[CatI18nRegistry] Locale set to ${locale}`);
+      window.dispatchEvent(this.buildEvent('cat-i18n-locale', { locale }));
     }
-    return message;
-  }
-  addMessage(lang, key, message) {
-    this.getDict(lang).set(key, message);
-    loglevel.info(`[CatI18nRegistry] Added message for lang ${lang}: ${key}`);
-    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, key }));
-    return this;
+    return this._locale;
   }
-  addMessages(lang, i18n) {
-    const dict = this.getDict(lang);
+  register(locale, i18n) {
+    const dict = this.getDict(locale);
     Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));
-    loglevel.info(`[CatI18nRegistry] Added message for lang ${lang}: ${Object.keys(i18n).concat(', ')}`);
-    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys: Object.keys(i18n) }));
-    return this;
+    loglevel.info(`[CatI18nRegistry] Registered messages for ${locale}`, i18n);
+    window.dispatchEvent(this.buildEvent('cat-i18n-register', { i18n }));
   }
-  removeMessage(lang, key) {
-    this.getDict(lang).delete(key);
-    loglevel.info(`[CatI18nRegistry] Removed message for lang ${lang}: ${key}`);
-    window.dispatchEvent(this.buildEvent('cat-i18n-removed', { lang, key }));
-    return this;
+  clear(locale) {
+    if (locale) {
+      this.getDict(locale).clear();
+      loglevel.info(`[CatI18nRegistry] Cleared messages for ${locale}`);
+      window.dispatchEvent(this.buildEvent('cat-i18n-clear', { locale }));
+    }
+    else {
+      this._dicts.clear();
+      loglevel.info(`[CatI18nRegistry] Cleared messages`);
+      window.dispatchEvent(this.buildEvent('cat-i18n-clear'));
+    }
   }
-  removeMessages(lang, keys) {
-    const dict = this.getDict(lang);
-    keys.forEach(key => dict.delete(key));
-    loglevel.info(`[CatI18nRegistry] Removed messages for lang ${lang}: ${keys.concat(', ')}`);
-    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys }));
-    return this;
+  t(key, params) {
+    var _a;
+    const message = (_a = this._dicts.get(this._locale)) === null || _a === void 0 ? void 0 : _a.get(key);
+    if (!message) {
+      loglevel.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);
+    }
+    return (message === null || message === void 0 ? void 0 : message.replace(/{{\s*([-a-zA-Z._]+)\s*}}/g, (_match, key) => { var _a; return `${(_a = params === null || params === void 0 ? void 0 : params[key]) !== null && _a !== void 0 ? _a : ''}`; })) || '';
   }
   buildEvent(name, detail) {
     return new CustomEvent(name, {
@@ -60,12 +54,12 @@ class CatI18nRegistry {
     });
   }
   getDict(lang) {
-    let messages = this.messages.get(lang);
-    if (!messages) {
-      messages = new Map();
-      this.messages.set(lang, messages);
+    let dict = this._dicts.get(lang);
+    if (!dict) {
+      dict = new Map();
+      this._dicts.set(lang, dict);
     }
-    return messages;
+    return dict;
   }
 }
 

package/dist/components/cat-i18n-registry.js.map

@@ -1 +1 @@
-{"file":"cat-i18n-registry.js","mappings":"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","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private lang = 'en';\n  private readonly messages: Map<string, Map<string, string>> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatI18nRegistry {\n    if (!CatI18nRegistry.instance) {\n      CatI18nRegistry.instance = new CatI18nRegistry();\n    }\n    return CatI18nRegistry.instance;\n  }\n\n  getLanguage(): string {\n    return this.lang;\n  }\n\n  setLanguage(lang: string): void {\n    this.lang = lang;\n  }\n\n  getMessage(key: string): string | undefined {\n    const message = this.messages.get(this.lang)?.get(key);\n    if (!message) {\n      log.error(`[CatI18nRegistry] Unknown message for lang ${this.lang}: ${key}`);\n    }\n    return message;\n  }\n\n  addMessage(lang: string, key: string, message: string): CatI18nRegistry {\n    this.getDict(lang).set(key, message);\n    log.info(`[CatI18nRegistry] Added message for lang ${lang}: ${key}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, key }));\n    return this;\n  }\n\n  addMessages(lang: string, i18n: { [key: string]: string }): CatI18nRegistry {\n    const dict = this.getDict(lang);\n    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));\n    log.info(`[CatI18nRegistry] Added message for lang ${lang}: ${Object.keys(i18n).concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys: Object.keys(i18n) }));\n    return this;\n  }\n\n  removeMessage(lang: string, key: string): CatI18nRegistry {\n    this.getDict(lang).delete(key);\n    log.info(`[CatI18nRegistry] Removed message for lang ${lang}: ${key}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-removed', { lang, key }));\n    return this;\n  }\n\n  removeMessages(lang: string, keys: string[]): CatI18nRegistry {\n    const dict = this.getDict(lang);\n    keys.forEach(key => dict.delete(key));\n    log.info(`[CatI18nRegistry] Removed messages for lang ${lang}: ${keys.concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys }));\n    return this;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n\n  private getDict(lang: string) {\n    let messages = this.messages.get(lang);\n    if (!messages) {\n      messages = new Map();\n      this.messages.set(lang, messages);\n    }\n    return messages;\n  }\n}\n"],"version":3}
+{"file":"cat-i18n-registry.js","mappings":"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","names":["log"],"sources":["./src/components/cat-i18n/cat-i18n-registry.ts"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private _locale = 'en';\n  private readonly _dicts: Map<string, Map<string, string>> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatI18nRegistry {\n    if (!CatI18nRegistry.instance) {\n      CatI18nRegistry.instance = new CatI18nRegistry();\n    }\n    return CatI18nRegistry.instance;\n  }\n\n  locale(locale?: string): string {\n    if (locale) {\n      this._locale = locale;\n      log.info(`[CatI18nRegistry] Locale set to ${locale}`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-locale', { locale }));\n    }\n    return this._locale;\n  }\n\n  register(locale: string, i18n: { [key: string]: string }): void {\n    const dict = this.getDict(locale);\n    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));\n    log.info(`[CatI18nRegistry] Registered messages for ${locale}`, i18n);\n    window.dispatchEvent(this.buildEvent('cat-i18n-register', { i18n }));\n  }\n\n  clear(locale?: string): void {\n    if (locale) {\n      this.getDict(locale).clear();\n      log.info(`[CatI18nRegistry] Cleared messages for ${locale}`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-clear', { locale }));\n    } else {\n      this._dicts.clear();\n      log.info(`[CatI18nRegistry] Cleared messages`);\n      window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n    }\n  }\n\n  t(key: string, params?: { [key: string]: string | number }): string {\n    const message = this._dicts.get(this._locale)?.get(key);\n    if (!message) {\n      log.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);\n    }\n    return message?.replace(/{{\\s*([-a-zA-Z._]+)\\s*}}/g, (_match, key) => `${params?.[key] ?? ''}`) || '';\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n\n  private getDict(lang: string) {\n    let dict = this._dicts.get(lang);\n    if (!dict) {\n      dict = new Map();\n      this._dicts.set(lang, dict);\n    }\n    return dict;\n  }\n}\n"],"version":3}

package/dist/components/cat-icon.js

@@ -1,4 +1,4 @@
-import { C as CatIcon$1, d as defineCustomElement$1 } from './cat-icon2.js';
+import { a as CatIcon$1, d as defineCustomElement$1 } from './cat-icon2.js';
 
 const CatIcon = CatIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/cat-icon2.js

@@ -1,5 +1,59 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as CatIconRegistry } from './cat-icon-registry.js';
+import { l as loglevel } from './loglevel.js';
+
+class CatIconRegistry {
+  constructor() {
+    this.icons = new Map();
+    // hide constructor
+  }
+  static getInstance() {
+    if (!CatIconRegistry.instance) {
+      CatIconRegistry.instance = new CatIconRegistry();
+    }
+    return CatIconRegistry.instance;
+  }
+  getIcon(name, setName) {
+    const icon = this.icons.get(this.buildName(name, setName));
+    if (!icon) {
+      loglevel.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);
+    }
+    return icon;
+  }
+  addIcon(name, data, setName) {
+    this.icons.set(this.buildName(name, setName), data);
+    loglevel.info(`[CatIconRegistry] Added icon${setName ? ` to set ${setName}` : ''}: ${name}`);
+    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));
+    return this;
+  }
+  addIcons(icons, setName) {
+    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));
+    loglevel.info(`[CatIconRegistry] Added icons${setName ? ` to set ${setName}` : ''}: ${Object.keys(icons).concat(', ')}`);
+    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));
+    return this;
+  }
+  removeIcon(name, setName) {
+    this.icons.delete(this.buildName(name, setName));
+    loglevel.info(`[CatIconRegistry] Removed icon${setName ? ` from set ${setName}` : ''}: ${name}`);
+    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));
+    return this;
+  }
+  removeIcons(names, setName) {
+    names.forEach(name => this.icons.delete(this.buildName(name, setName)));
+    loglevel.info(`[CatIconRegistry] Removed icons${setName ? ` from set ${setName}` : ''}: ${names.concat(', ')}`);
+    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));
+    return this;
+  }
+  buildName(name, setName) {
+    return setName ? `${setName}:name` : name;
+  }
+  buildEvent(name, detail) {
+    return new CustomEvent(name, {
+      bubbles: true,
+      composed: true,
+      detail
+    });
+  }
+}
 
 const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;height:1em;width:calc(var(--cat-icon-ratio, 1) * 1em)}.icon-xs svg{font-size:0.75rem}.icon-s svg{font-size:1rem}.icon-m svg{font-size:1.25rem}.icon-l svg{font-size:1.5rem}.icon-xl svg{font-size:1.75rem}";
 
@@ -44,6 +98,6 @@ function defineCustomElement() {
   } });
 }
 
-export { CatIcon as C, defineCustomElement as d };
+export { CatIconRegistry as C, CatIcon as a, defineCustomElement as d };
 
 //# sourceMappingURL=cat-icon2.js.map

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

@@ -1 +1 @@
-{"file":"cat-icon2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mbAAmb;;MCczb,OAAO;EALpB;;;;IAMmB,iBAAY,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;;;;IAKtD,SAAI,GAAG,EAAE,CAAC;;;;IAKV,SAAI,GAA6C,GAAG,CAAC;GAsB9D;EAdC,MAAM;IACJ,QACE,YACE,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,gBACnC,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;OAC9C,GACK,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","./src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-icon-ratio: The aspect ratio of the avatar.\n   */\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: currentColor;\n  stroke: none;\n  transform-origin: center center;\n  height: 1em;\n  width: calc(var(--cat-icon-ratio, 1) * 1em);\n}\n\n// ----- size\n\n@mixin size($size) {\n  .icon-#{$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","import { Component, h, Prop } from '@stencil/core';\nimport { CatIconRegistry } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  private readonly iconRegistry = CatIconRegistry.getInstance();\n\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon = '';\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon 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        innerHTML={this.iconRegistry.getIcon(this.icon)}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-icon2.js","mappings":"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","names":["log"],"sources":["./src/components/cat-icon/cat-icon-registry.ts","./src/components/cat-icon/cat-icon.scss?tag=cat-icon&encapsulation=shadow","./src/components/cat-icon/cat-icon.tsx"],"sourcesContent":["import log from 'loglevel';\n\nexport class CatIconRegistry {\n  private static instance: CatIconRegistry;\n\n  private readonly icons: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatIconRegistry {\n    if (!CatIconRegistry.instance) {\n      CatIconRegistry.instance = new CatIconRegistry();\n    }\n    return CatIconRegistry.instance;\n  }\n\n  getIcon(name: string, setName?: string): string | undefined {\n    const icon = this.icons.get(this.buildName(name, setName));\n    if (!icon) {\n      log.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);\n    }\n    return icon;\n  }\n\n  addIcon(name: string, data: string, setName?: string): CatIconRegistry {\n    this.icons.set(this.buildName(name, setName), data);\n    log.info(`[CatIconRegistry] Added icon${setName ? ` to set ${setName}` : ''}: ${name}`);\n    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));\n    return this;\n  }\n\n  addIcons(icons: { [name: string]: string }, setName?: string): CatIconRegistry {\n    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n    log.info(`[CatIconRegistry] Added icons${setName ? ` to set ${setName}` : ''}: ${Object.keys(icons).concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));\n    return this;\n  }\n\n  removeIcon(name: string, setName?: string): CatIconRegistry {\n    this.icons.delete(this.buildName(name, setName));\n    log.info(`[CatIconRegistry] Removed icon${setName ? ` from set ${setName}` : ''}: ${name}`);\n    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));\n    return this;\n  }\n\n  removeIcons(names: string[], setName?: string): CatIconRegistry {\n    names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n    log.info(`[CatIconRegistry] Removed icons${setName ? ` from set ${setName}` : ''}: ${names.concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));\n    return this;\n  }\n\n  private buildName(name: string, setName?: string) {\n    return setName ? `${setName}:name` : name;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --cat-icon-ratio: The aspect ratio of the avatar.\n   */\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: currentColor;\n  stroke: none;\n  transform-origin: center center;\n  height: 1em;\n  width: calc(var(--cat-icon-ratio, 1) * 1em);\n}\n\n// ----- size\n\n@mixin size($size) {\n  .icon-#{$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","import { Component, h, Prop } from '@stencil/core';\nimport { CatIconRegistry } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  private readonly iconRegistry = CatIconRegistry.getInstance();\n\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon = '';\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon 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        innerHTML={this.iconRegistry.getIcon(this.icon)}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-input.js

@@ -83,13 +83,13 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.value = '';
   }
   render() {
-    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.getMessage('input.optional'), ")"))))), h("div", { class: {
+    return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.t('input.optional'), ")"))))), h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled
       }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.getMessage('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.t('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');