@haiilo/catalyst 1.3.0 → 2.0.0

package/dist/components/cat-dropdown2.js

@@ -0,0 +1,195 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom.esm.js';
+import { c as createFocusTrap } from './focus-trap.esm.js';
+import { t as tabbable, f as firstTabbable } from './first-tabbable.js';
+
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+const timeTransitionS = 125;
+
+const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding-top:0.5rem;padding-bottom:0.5rem;min-width:8rem;max-width:16rem}.content{position:absolute;background:white;display:none;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100;opacity:0;transition:transform 0.13s cubic-bezier(0.3, 0, 0.8, 0.15), opacity 0.13s cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform:translateY(1rem)}.content[data-placement^=left]{transform:translateX(1rem)}.content[data-placement^=right]{transform:translateX(-1rem)}.content[data-placement^=bottom]{transform:translateY(-1rem)}.content.show{opacity:1;transform:translateX(0);transform:translateY(0);transition:transform 0.5s cubic-bezier(0.05, 0.7, 0.1, 1), opacity 0.5s cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
+
+let nextUniqueId = 0;
+const CatDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.catOpen = createEvent(this, "catOpen", 7);
+    this.catClose = createEvent(this, "catClose", 7);
+    this.id = nextUniqueId++;
+    this.isOpen = false;
+    /**
+     * The placement of the dropdown.
+     */
+    this.placement = 'bottom-start';
+    /**
+     * Do not close the dropdown on outside clicks.
+     */
+    this.noAutoClose = false;
+    /**
+     * Allow overflow when dropdown is open.
+     */
+    this.overflow = false;
+  }
+  clickHandler(event) {
+    // we need to delay the initialization of the trigger until first,
+    // interaction because the element might still be hidden (and thus not
+    // tabbable) if contained in another Stencil web component
+    if (!this.trigger) {
+      this.initTrigger();
+      this.toggle();
+    }
+    // hide dropdown on button click
+    if (!this.noAutoClose && event.composedPath().includes(this.content)) {
+      this.close();
+    }
+  }
+  /**
+   * Toggles the dropdown.
+   */
+  async toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  /**
+   * Opens the dropdown.
+   */
+  async open() {
+    if (this.isOpen === null) {
+      return; // busy
+    }
+    this.isOpen = null;
+    this.content.style.display = 'block';
+    // give CSS transition time to apply
+    setTimeout(() => {
+      var _a;
+      this.isOpen = true;
+      this.content.classList.add('show');
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
+      this.catOpen.emit();
+      this.trap = this.trap
+        ? this.trap.updateContainerElements(this.content)
+        : createFocusTrap(this.content, {
+          tabbableOptions: {
+            getShadowRoot: true
+          },
+          allowOutsideClick: true,
+          clickOutsideDeactivates: event => !this.noAutoClose &&
+            !event.composedPath().includes(this.content) &&
+            (!this.trigger || !event.composedPath().includes(this.trigger)),
+          onPostDeactivate: () => this.close()
+        });
+      this.trap.activate();
+    });
+  }
+  /**
+   * Closes the dropdown.
+   */
+  async close() {
+    if (this.isOpen === null) {
+      return; // busy
+    }
+    this.isOpen = null;
+    this.content.classList.remove('show');
+    // give CSS transition time to apply
+    setTimeout(() => {
+      var _a, _b;
+      this.isOpen = false;
+      this.content.classList.remove('show');
+      this.content.style.display = '';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
+      this.catClose.emit();
+    }, timeTransitionS);
+  }
+  componentDidLoad() {
+    this.keyListener = event => {
+      if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
+        const activeElement = firstTabbable(document.activeElement);
+        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
+        const activeOff = event.key === 'ArrowDown' ? 1 : -1;
+        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+        targetElements[targetIdx].focus();
+        event.preventDefault();
+      }
+    };
+    document.addEventListener('keydown', this.keyListener);
+  }
+  disconnectedCallback() {
+    if (this.keyListener) {
+      document.removeEventListener('keydown', this.keyListener);
+    }
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { name: "content" }))));
+  }
+  get contentId() {
+    return `cat-dropdown-${this.id}`;
+  }
+  initTrigger() {
+    this.trigger = this.findTrigger();
+    this.trigger.setAttribute('aria-haspopup', 'true');
+    this.trigger.setAttribute('aria-expanded', 'false');
+    this.trigger.setAttribute('aria-controls', this.contentId);
+    this.trigger.addEventListener('click', () => this.toggle());
+    autoUpdate(this.trigger, this.content, () => this.update());
+  }
+  findTrigger() {
+    var _a, _b, _c;
+    let trigger;
+    const elems = ((_b = (_a = this.triggerSlot) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
+    while (!trigger && elems.length) {
+      const elem = elems.shift();
+      trigger = (elem === null || elem === void 0 ? void 0 : elem.hasAttribute('data-trigger'))
+        ? elem
+        : (_c = elem === null || elem === void 0 ? void 0 : elem.querySelector('[data-trigger]')) !== null && _c !== void 0 ? _c : undefined;
+    }
+    if (!trigger) {
+      trigger = firstTabbable(this.triggerSlot);
+    }
+    if (!trigger) {
+      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
+    }
+    return trigger;
+  }
+  update() {
+    if (this.trigger) {
+      computePosition(this.trigger, this.content, {
+        placement: this.placement,
+        middleware: [offset(CatDropdown.OFFSET), flip()]
+      }).then(({ x, y, placement }) => {
+        this.content.dataset.placement = placement;
+        Object.assign(this.content.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+      });
+    }
+  }
+  static get style() { return catDropdownCss; }
+}, [1, "cat-dropdown", {
+    "placement": [1],
+    "noAutoClose": [4, "no-auto-close"],
+    "overflow": [4],
+    "close": [64]
+  }, [[0, "catClick", "clickHandler"]]]);
+CatDropdown.OFFSET = 4;
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatDropdown);
+      }
+      break;
+  } });
+}
+
+export { CatDropdown as C, defineCustomElement as d };
+
+//# sourceMappingURL=cat-dropdown2.js.map

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

@@ -0,0 +1 @@
+{"file":"cat-dropdown2.js","mappings":"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","names":["focusTrap.createFocusTrap"],"sources":["../tokens/dist/js/variables.js","./src/components/cat-dropdown/cat-dropdown.scss?tag=cat-dropdown&encapsulation=shadow","./src/components/cat-dropdown/cat-dropdown.tsx"],"sourcesContent":["/**\n * Auto-generated file. Do not edit directly.\n */\n\nexport const assetFontDmSansName = \"DM Sans\";\nexport const assetFontDmSansWoff2Bold = \"DMSans-Bold.woff2\";\nexport const assetFontDmSansWoff2BoldItalic = \"DMSans-BoldItalic.woff2\";\nexport const assetFontDmSansWoff2Italic = \"DMSans-Italic.woff2\";\nexport const assetFontDmSansWoff2Medium = \"DMSans-Medium.woff2\";\nexport const assetFontDmSansWoff2MediumItalic = \"DMSans-MediumItalic.woff2\";\nexport const assetFontDmSansWoff2Regular = \"DMSans-Regular.woff2\";\nexport const assetFontLatoName = \"Lato\";\nexport const assetFontLatoWoffBlack = \"Lato-Black.woff\";\nexport const assetFontLatoWoff2Black = \"Lato-Black.woff2\";\nexport const assetFontLatoWoffBlackItalic = \"Lato-BlackItalic.woff\";\nexport const assetFontLatoWoff2BlackItalic = \"Lato-BlackItalic.woff2\";\nexport const assetFontLatoWoffBold = \"Lato-Bold.woff\";\nexport const assetFontLatoWoff2Bold = \"Lato-Bold.woff2\";\nexport const assetFontLatoWoffBoldItalic = \"Lato-BoldItalic.woff\";\nexport const assetFontLatoWoff2BoldItalic = \"Lato-BoldItalic.woff2\";\nexport const assetFontLatoWoffHairline = \"Lato-Hairline.woff\";\nexport const assetFontLatoWoff2Hairline = \"Lato-Hairline.woff2\";\nexport const assetFontLatoWoffHairlineItalic = \"Lato-HairlineItalic.woff\";\nexport const assetFontLatoWoff2HairlineItalic = \"Lato-HairlineItalic.woff2\";\nexport const assetFontLatoWoffHeavy = \"Lato-Heavy.woff\";\nexport const assetFontLatoWoff2Heavy = \"Lato-Heavy.woff2\";\nexport const assetFontLatoWoffHeavyItalic = \"Lato-HeavyItalic.woff\";\nexport const assetFontLatoWoff2HeavyItalic = \"Lato-HeavyItalic.woff2\";\nexport const assetFontLatoWoffItalic = \"Lato-Italic.woff\";\nexport const assetFontLatoWoff2Italic = \"Lato-Italic.woff2\";\nexport const assetFontLatoWoffLight = \"Lato-Light.woff\";\nexport const assetFontLatoWoff2Light = \"Lato-Light.woff2\";\nexport const assetFontLatoWoffLightItalic = \"Lato-LightItalic.woff\";\nexport const assetFontLatoWoff2LightItalic = \"Lato-LightItalic.woff2\";\nexport const assetFontLatoWoffMedium = \"Lato-Medium.woff\";\nexport const assetFontLatoWoff2Medium = \"Lato-Medium.woff2\";\nexport const assetFontLatoWoffMediumItalic = \"Lato-MediumItalic.woff\";\nexport const assetFontLatoWoff2MediumItalic = \"Lato-MediumItalic.woff2\";\nexport const assetFontLatoWoffRegular = \"Lato-Regular.woff\";\nexport const assetFontLatoWoff2Regular = \"Lato-Regular.woff2\";\nexport const assetFontLatoWoffSemibold = \"Lato-Semibold.woff\";\nexport const assetFontLatoWoff2Semibold = \"Lato-Semibold.woff2\";\nexport const assetFontLatoWoffSemiboldItalic = \"Lato-SemiboldItalic.woff\";\nexport const assetFontLatoWoff2SemiboldItalic = \"Lato-SemiboldItalic.woff2\";\nexport const assetFontLatoWoffThin = \"Lato-Thin.woff\";\nexport const assetFontLatoWoff2Thin = \"Lato-Thin.woff2\";\nexport const assetFontLatoWoffThinItalic = \"Lato-ThinItalic.woff\";\nexport const assetFontLatoWoff2ThinItalic = \"Lato-ThinItalic.woff2\";\nexport const assetFontAzeretMonoName = \"Azeret Mono\";\nexport const assetFontAzeretMonoWoff2Regular = \"AzeretMono-Regular.woff2\";\nexport const colorBaseWhite = \"#ffffff\";\nexport const colorBaseBlack = \"#000000\";\nexport const colorBaseNeutral100 = \"#f2f4f7\";\nexport const colorBaseNeutral200 = \"#ebecf0\";\nexport const colorBaseNeutral300 = \"#d7dbe0\";\nexport const colorBaseNeutral400 = \"#697687\";\nexport const colorBaseNeutral500 = \"#515c6c\";\nexport const colorBaseNeutral600 = \"#394251\";\nexport const colorBaseNeutral700 = \"#1b1f26\";\nexport const colorBaseNeutralDark400 = \"#697687\";\nexport const colorBaseBrand100 = \"#c9e5e8\";\nexport const colorBaseBrand200 = \"#2db3c3\";\nexport const colorBaseBrand300 = \"#29a3b1\";\nexport const colorBaseBrand400 = \"#008194\";\nexport const colorBaseBrand500 = \"#017384\";\nexport const colorBaseBrand600 = \"#026371\";\nexport const colorBaseBrand700 = \"#175b63\";\nexport const colorBaseBrandDark400 = \"#93b4f2\";\nexport const colorBaseBrandDark500 = \"#93b4f2\";\nexport const colorBaseBrandDark600 = \"#93b4f2\";\nexport const colorBaseGreen100 = \"#d4ede4\";\nexport const colorBaseGreen200 = \"#00bb7d\";\nexport const colorBaseGreen300 = \"#00aa71\";\nexport const colorBaseGreen400 = \"#008458\";\nexport const colorBaseGreen500 = \"#00754e\";\nexport const colorBaseGreen600 = \"#006946\";\nexport const colorBaseGreen700 = \"#005f40\";\nexport const colorBaseOrange100 = \"#ffdea8\";\nexport const colorBaseOrange200 = \"#ffd694\";\nexport const colorBaseOrange300 = \"#ffce80\";\nexport const colorBaseOrange400 = \"#ebb663\";\nexport const colorBaseOrange500 = \"#d6a75a\";\nexport const colorBaseOrange600 = \"#b0853e\";\nexport const colorBaseOrange700 = \"#9f6100\";\nexport const colorBaseRed100 = \"#fbc7bb\";\nexport const colorBaseRed200 = \"#f68368\";\nexport const colorBaseRed300 = \"#f46a49\";\nexport const colorBaseRed400 = \"#d9340d\";\nexport const colorBaseRed500 = \"#c22e0b\";\nexport const colorBaseRed600 = \"#ae2a0a\";\nexport const colorBaseRed700 = \"#9e2609\";\nexport const colorThemePrimaryBg = \"#008194\";\nexport const colorThemePrimaryBgHover = \"#017384\";\nexport const colorThemePrimaryBgActive = \"#026371\";\nexport const colorThemePrimaryFill = \"#ffffff\";\nexport const colorThemePrimaryFillHover = \"#ffffff\";\nexport const colorThemePrimaryFillActive = \"#ffffff\";\nexport const colorThemePrimaryText = \"#008194\";\nexport const colorThemePrimaryTextHover = \"#017384\";\nexport const colorThemePrimaryTextActive = \"#026371\";\nexport const colorThemePrimaryDarkBg = \"#93b4f2\";\nexport const colorThemePrimaryDarkBgHover = \"#93b4f2\";\nexport const colorThemePrimaryDarkBgActive = \"#93b4f2\";\nexport const colorThemePrimaryDarkFill = \"#000000\";\nexport const colorThemePrimaryDarkFillHover = \"#000000\";\nexport const colorThemePrimaryDarkFillActive = \"#000000\";\nexport const colorThemePrimaryDarkText = \"#93b4f2\";\nexport const colorThemePrimaryDarkTextHover = \"#93b4f2\";\nexport const colorThemePrimaryDarkTextActive = \"#93b4f2\";\nexport const colorThemeSecondaryBg = \"#697687\";\nexport const colorThemeSecondaryBgHover = \"#697687\";\nexport const colorThemeSecondaryBgActive = \"#697687\";\nexport const colorThemeSecondaryFill = \"#ffffff\";\nexport const colorThemeSecondaryFillHover = \"#ffffff\";\nexport const colorThemeSecondaryFillActive = \"#ffffff\";\nexport const colorThemeSecondaryText = \"#000000\";\nexport const colorThemeSecondaryTextHover = \"#000000\";\nexport const colorThemeSecondaryTextActive = \"#000000\";\nexport const colorThemeSecondaryDarkBg = \"#697687\";\nexport const colorThemeSecondaryDarkBgHover = \"#697687\";\nexport const colorThemeSecondaryDarkBgActive = \"#697687\";\nexport const colorThemeSecondaryDarkFill = \"#000000\";\nexport const colorThemeSecondaryDarkFillHover = \"#000000\";\nexport const colorThemeSecondaryDarkFillActive = \"#000000\";\nexport const colorThemeSecondaryDarkText = \"#ffffff\";\nexport const colorThemeSecondaryDarkTextHover = \"#ffffff\";\nexport const colorThemeSecondaryDarkTextActive = \"#ffffff\";\nexport const colorThemeSuccessBg = \"#008458\";\nexport const colorThemeSuccessBgHover = \"#00754e\";\nexport const colorThemeSuccessBgActive = \"#006946\";\nexport const colorThemeSuccessFill = \"#ffffff\";\nexport const colorThemeSuccessFillHover = \"#ffffff\";\nexport const colorThemeSuccessFillActive = \"#ffffff\";\nexport const colorThemeSuccessText = \"#008458\";\nexport const colorThemeSuccessTextHover = \"#00754e\";\nexport const colorThemeSuccessTextActive = \"#006946\";\nexport const colorThemeWarningBg = \"#ffce80\";\nexport const colorThemeWarningBgHover = \"#ffd694\";\nexport const colorThemeWarningBgActive = \"#ffdea8\";\nexport const colorThemeWarningFill = \"#000000\";\nexport const colorThemeWarningFillHover = \"#000000\";\nexport const colorThemeWarningFillActive = \"#000000\";\nexport const colorThemeWarningText = \"#9f6100\";\nexport const colorThemeWarningTextHover = \"#9f6100\";\nexport const colorThemeWarningTextActive = \"#9f6100\";\nexport const colorThemeDangerBg = \"#d9340d\";\nexport const colorThemeDangerBgHover = \"#c22e0b\";\nexport const colorThemeDangerBgActive = \"#ae2a0a\";\nexport const colorThemeDangerFill = \"#ffffff\";\nexport const colorThemeDangerFillHover = \"#ffffff\";\nexport const colorThemeDangerFillActive = \"#ffffff\";\nexport const colorThemeDangerText = \"#d9340d\";\nexport const colorThemeDangerTextHover = \"#c22e0b\";\nexport const colorThemeDangerTextActive = \"#ae2a0a\";\nexport const colorUiBackgroundCanvas = \"#f2f4f7\";\nexport const colorUiBackgroundBody = \"#ffffff\";\nexport const colorUiBackgroundBodyDark = \"#1b1f26\";\nexport const colorUiBackgroundMuted = \"#ebecf0\";\nexport const colorUiBackgroundInput = \"#ffffff\";\nexport const colorUiBackgroundInputDisabled = \"#f2f4f7\";\nexport const colorUiBackgroundSkeleton = \"#ebecf0\";\nexport const colorUiBackgroundSkeletonHighlight = \"#d7dbe0\";\nexport const colorUiBackgroundTooltip = \"#000000\";\nexport const colorUiBackgroundBackdrop = \"#000000\";\nexport const colorUiBackgroundSelectPill = \"#f2f4f7\";\nexport const colorUiBorderLight = \"#f2f4f7\";\nexport const colorUiBorderDefault = \"#ebecf0\";\nexport const colorUiBorderDark = \"#d7dbe0\";\nexport const colorUiBorderFocus = \"#0071ff\";\nexport const colorUiFontHead = \"#000000\";\nexport const colorUiFontHeadDark = \"#ffffff\";\nexport const colorUiFontBody = \"#000000\";\nexport const colorUiFontBodyDark = \"#ffffff\";\nexport const colorUiFontMono = \"#000000\";\nexport const colorUiFontMonoDark = \"#ffffff\";\nexport const colorUiFontMuted = \"#697687\";\nexport const colorUiFontQuote = \"#697687\";\nexport const colorUiFontTooltip = \"#ffffff\";\nexport const fontFamilyHead = \"Lato\";\nexport const fontFamilyBody = \"Lato\";\nexport const fontFamilyMono = \"Azeret Mono\";\nexport const fontFamilyEmoji = \"''\";\nexport const fontWeightHead = 500;\nexport const fontWeightBody = 400;\nexport const fontWeightMono = 400;\nexport const fontDecorationLink = \"none\";\nexport const fontDecorationLinkHover = \"underline\";\nexport const fontDecorationLinkButton = \"none\";\nexport const fontDecorationLinkButtonHover = \"none\";\nexport const opacityDisabled = 0.65;\nexport const opacityBackdrop = 0.6;\nexport const opacityTooltip = 1;\nexport const sizeBorderRadiusL = \"0.5rem\";\nexport const sizeBorderRadiusM = \"0.25rem\";\nexport const sizeBorderRadiusS = \"0.125rem\";\nexport const sizeFontHead1 = \"1.75rem\";\nexport const sizeFontHead2 = \"1.5rem\";\nexport const sizeFontHead3 = \"1.25rem\";\nexport const sizeFontHead4 = \"1.125rem\";\nexport const sizeFontHead5 = \"0.9375rem\";\nexport const sizeFontHead6 = \"0.875rem\";\nexport const sizeFontBodyXl = \"1.25rem\";\nexport const sizeFontBodyL = \"1.125rem\";\nexport const sizeFontBodyM = \"0.9375rem\";\nexport const sizeFontBodyS = \"0.875rem\";\nexport const sizeFontBodyXs = \"0.75rem\";\nexport const sizeFontMonoXl = \"1.125rem\";\nexport const sizeFontMonoL = \"0.9375rem\";\nexport const sizeFontMonoM = \"0.875rem\";\nexport const sizeFontMonoS = \"0.75rem\";\nexport const sizeFontMonoXs = \"0.625rem\";\nexport const sizeLineHead1 = \"2rem\";\nexport const sizeLineHead2 = \"1.75rem\";\nexport const sizeLineHead3 = \"1.5rem\";\nexport const sizeLineHead4 = \"1.5rem\";\nexport const sizeLineHead5 = \"1.25rem\";\nexport const sizeLineHead6 = \"1rem\";\nexport const sizeLineBodyXl = \"1.5rem\";\nexport const sizeLineBodyL = \"1.5rem\";\nexport const sizeLineBodyM = \"1.25rem\";\nexport const sizeLineBodyS = \"1rem\";\nexport const sizeLineBodyXs = \"1rem\";\nexport const sizeLineMonoXl = \"1.5rem\";\nexport const sizeLineMonoL = \"1.25rem\";\nexport const sizeLineMonoM = \"1.125rem\";\nexport const sizeLineMonoS = \"1rem\";\nexport const sizeLineMonoXs = \"0.875rem\";\nexport const sizeModalS = \"400rem\";\nexport const sizeModalM = \"600rem\";\nexport const sizeModalL = \"800rem\";\nexport const sizeScreenXs = \"540rem\";\nexport const sizeScreenS = \"768rem\";\nexport const sizeScreenM = \"992rem\";\nexport const sizeScreenL = \"1200rem\";\nexport const sizeScreenXl = \"1400rem\";\nexport const sizeSpacingXl = \"2rem\";\nexport const sizeSpacingL = \"1.5rem\";\nexport const sizeSpacingM = \"1rem\";\nexport const sizeSpacingS = \"0.5rem\";\nexport const sizeSpacingXs = \"0.25rem\";\nexport const timeTransitionL = 500;\nexport const timeTransitionM = 250;\nexport const timeTransitionS = 125;\nexport const timeDelayL = 500;\nexport const timeDelayM = 250;\nexport const timeDelayS = 125;\nexport const timeDurationL = 1000;\nexport const timeDurationM = 500;\nexport const timeDurationS = 250;","@import 'variables';\n@import 'mixins';\n\n$-min-width: 8rem;\n$-max-width: 16rem;\n$-min-height: 2rem;\n$-max-height: calc(100vh - 48px);\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(nav) {\n  padding-top: $cat-body-margin-bottom * 0.5;\n  padding-bottom: $cat-body-margin-bottom * 0.5;\n  min-width: $-min-width;\n  max-width: $-max-width;\n}\n\n.content {\n  position: absolute;\n  background: cat-token('color.ui.background.body');\n  display: none;\n  -webkit-overflow-scrolling: touch;\n  min-height: $-min-height;\n  max-height: $-max-height;\n  @include cat-elevation(1);\n  border-radius: cat-border-radius('m');\n  z-index: $cat-dropdown-z-index;\n  opacity: 0;\n  transition: transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15),\n    opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15);\n\n  &[data-placement^='top'] {\n    transform: translateY(1rem);\n  }\n\n  &[data-placement^='left'] {\n    transform: translateX(1rem);\n  }\n\n  &[data-placement^='right'] {\n    transform: translateX(-1rem);\n  }\n\n  &[data-placement^='bottom'] {\n    transform: translateY(-1rem);\n  }\n\n  &.show {\n    opacity: 1;\n    transform: translateX(0);\n    transform: translateY(0);\n    transition: transform cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1),\n      opacity cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1);\n  }\n\n  &.overflow-auto {\n    overflow: auto;\n  }\n}\n","import { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-dropdown',\n  styleUrl: 'cat-dropdown.scss',\n  shadow: true\n})\nexport class CatDropdown {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot!: HTMLSlotElement;\n  private trigger?: FocusableElement;\n  private content!: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private keyListener?: (event: KeyboardEvent) => void;\n  private isOpen: boolean | null = false;\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Do not close the dropdown on outside clicks.\n   */\n  @Prop() noAutoClose = false;\n\n  /**\n   * Allow overflow when dropdown is open.\n   */\n  @Prop() overflow = false;\n\n  /**\n   * Emitted when the dropdown is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    // we need to delay the initialization of the trigger until first,\n    // interaction because the element might still be hidden (and thus not\n    // tabbable) if contained in another Stencil web component\n    if (!this.trigger) {\n      this.initTrigger();\n      this.toggle();\n    }\n\n    // hide dropdown on button click\n    if (!this.noAutoClose && event.composedPath().includes(this.content)) {\n      this.close();\n    }\n  }\n\n  /**\n   * Toggles the dropdown.\n   */\n  async toggle(): Promise<void> {\n    this.isOpen ? this.close() : this.open();\n  }\n\n  /**\n   * Opens the dropdown.\n   */\n  async open(): Promise<void> {\n    if (this.isOpen === null) {\n      return; // busy\n    }\n\n    this.isOpen = null;\n    this.content.style.display = 'block';\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this.isOpen = true;\n      this.content.classList.add('show');\n      this.trigger?.setAttribute('aria-expanded', 'true');\n      this.catOpen.emit();\n      this.trap = this.trap\n        ? this.trap.updateContainerElements(this.content)\n        : focusTrap.createFocusTrap(this.content, {\n            tabbableOptions: {\n              getShadowRoot: true\n            },\n            allowOutsideClick: true,\n            clickOutsideDeactivates: event =>\n              !this.noAutoClose &&\n              !event.composedPath().includes(this.content) &&\n              (!this.trigger || !event.composedPath().includes(this.trigger)),\n            onPostDeactivate: () => this.close()\n          });\n      this.trap.activate();\n    });\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async close(): Promise<void> {\n    if (this.isOpen === null) {\n      return; // busy\n    }\n\n    this.isOpen = null;\n    this.content.classList.remove('show');\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this.isOpen = false;\n      this.content.classList.remove('show');\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.trap?.deactivate();\n      this.catClose.emit();\n    }, timeTransitionS);\n  }\n\n  componentDidLoad(): void {\n    this.keyListener = event => {\n      if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n        const activeElement = firstTabbable(document.activeElement);\n        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n        const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n        targetElements[targetIdx].focus();\n        event.preventDefault();\n      }\n    };\n    document.addEventListener('keydown', this.keyListener);\n  }\n\n  disconnectedCallback(): void {\n    if (this.keyListener) {\n      document.removeEventListener('keydown', this.keyListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n        <div\n          id={this.contentId}\n          class={{ content: true, 'overflow-auto': !this.overflow }}\n          ref={el => (this.content = el as HTMLElement)}\n        >\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-dropdown-${this.id}`;\n  }\n\n  private initTrigger() {\n    this.trigger = this.findTrigger();\n    this.trigger.setAttribute('aria-haspopup', 'true');\n    this.trigger.setAttribute('aria-expanded', 'false');\n    this.trigger.setAttribute('aria-controls', this.contentId);\n    this.trigger.addEventListener('click', () => this.toggle());\n    autoUpdate(this.trigger, this.content, () => this.update());\n  }\n\n  private findTrigger() {\n    let trigger: FocusableElement | undefined;\n    const elems = this.triggerSlot?.assignedElements?.() || [];\n    while (!trigger && elems.length) {\n      const elem = elems.shift();\n      trigger = elem?.hasAttribute('data-trigger')\n        ? (elem as HTMLElement)\n        : elem?.querySelector('[data-trigger]') ?? undefined;\n    }\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    if (!trigger) {\n      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n    }\n    return trigger;\n  }\n\n  private update() {\n    if (this.trigger) {\n      computePosition(this.trigger, this.content, {\n        placement: this.placement,\n        middleware: [offset(CatDropdown.OFFSET), flip()]\n      }).then(({ x, y, placement }) => {\n        this.content.dataset.placement = placement;\n        Object.assign(this.content.style, {\n          left: `${x}px`,\n          top: `${y}px`\n        });\n      });\n    }\n  }\n}\n"],"version":3}

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

@@ -2,8 +2,7 @@ import { l as loglevel } from './loglevel.js';
 
 class CatI18nRegistry {
   constructor() {
-    this._locale = 'en';
-    this._dicts = new Map();
+    this.i18n = new Map();
     // hide constructor
   }
   static getInstance() {
@@ -12,38 +11,21 @@ class CatI18nRegistry {
     }
     return CatI18nRegistry.instance;
   }
-  locale(locale) {
-    if (locale) {
-      this._locale = locale;
-      loglevel.info(`[CatI18nRegistry] Locale set to ${locale}`);
-      window.dispatchEvent(this.buildEvent('cat-i18n-locale', { locale }));
-    }
-    return this._locale;
-  }
-  register(locale, i18n) {
-    const dict = this.getDict(locale);
-    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));
-    loglevel.info(`[CatI18nRegistry] Registered messages for ${locale}`, i18n);
-    window.dispatchEvent(this.buildEvent('cat-i18n-register', { i18n }));
+  set(i18n) {
+    Object.entries(i18n).forEach(([key, message]) => this.i18n.set(key, message));
+    loglevel.info(`[CatI18nRegistry] Registered messages`, i18n);
+    window.dispatchEvent(this.buildEvent('cat-i18n-set', { messages: i18n }));
   }
-  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'));
-    }
+  clear() {
+    this.i18n.clear();
+    loglevel.info(`[CatI18nRegistry] Cleared messages`);
+    window.dispatchEvent(this.buildEvent('cat-i18n-clear'));
   }
   t(key, params) {
-    var _a;
-    const message = (_a = this._dicts.get(this._locale)) === null || _a === void 0 ? void 0 : _a.get(key);
+    const message = this.i18n.get(key);
     if (message === undefined) {
-      loglevel.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);
-      return '';
+      loglevel.error(`[CatI18nRegistry] Unknown message key: ${key}`);
+      return key;
     }
     return 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 : ''}`; });
   }
@@ -54,16 +36,9 @@ class CatI18nRegistry {
       detail
     });
   }
-  getDict(lang) {
-    let dict = this._dicts.get(lang);
-    if (!dict) {
-      dict = new Map();
-      this._dicts.set(lang, dict);
-    }
-    return dict;
-  }
 }
+const catI18nRegistry = CatI18nRegistry.getInstance();
 
-export { CatI18nRegistry as C };
+export { CatI18nRegistry as C, catI18nRegistry as c };
 
 //# sourceMappingURL=cat-i18n-registry.js.map

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 _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 === undefined) {\n      log.error(`[CatI18nRegistry] Unknown message for ${this._locale}: ${key}`);\n      return '';\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}
+{"file":"cat-i18n-registry.js","mappings":";;MAEa,eAAe;EAK1B;IAFiB,SAAI,GAAwB,IAAI,GAAG,EAAE,CAAC;;GAItD;EAED,OAAO,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;GACjC;EAED,GAAG,CAAC,IAA+B;IACjC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9EA,QAAG,CAAC,IAAI,CAAC,uCAAuC,EAAE,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;GAC3E;EAED,KAAK;IACH,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAClBA,QAAG,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAC/C,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;GACzD;EAED,CAAC,CAAC,GAAW,EAAE,MAA2C;IACxD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,KAAK,SAAS,EAAE;MACzBA,QAAG,CAAC,KAAK,CAAC,0CAA0C,GAAG,EAAE,CAAC,CAAC;MAC3D,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,OAAO,CAAC,OAAO,CAAC,2BAA2B,EAAE,CAAC,MAAM,EAAE,GAAG,eAAK,OAAA,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,GAAG,CAAC,mCAAI,EAAE,EAAE,CAAA,EAAA,CAAC,CAAC;GAChG;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;GACJ;CACF;MAEY,eAAe,GAAG,eAAe,CAAC,WAAW;;;;","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 readonly i18n: 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  set(i18n: { [key: string]: string }): void {\n    Object.entries(i18n).forEach(([key, message]) => this.i18n.set(key, message));\n    log.info(`[CatI18nRegistry] Registered messages`, i18n);\n    window.dispatchEvent(this.buildEvent('cat-i18n-set', { messages: i18n }));\n  }\n\n  clear(): void {\n    this.i18n.clear();\n    log.info(`[CatI18nRegistry] Cleared messages`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n  }\n\n  t(key: string, params?: { [key: string]: string | number }): string {\n    const message = this.i18n.get(key);\n    if (message === undefined) {\n      log.error(`[CatI18nRegistry] Unknown message key: ${key}`);\n      return 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\nexport const catI18nRegistry = CatI18nRegistry.getInstance();\n"],"version":3}

package/dist/components/cat-icon2.js

@@ -54,6 +54,7 @@ class CatIconRegistry {
     });
   }
 }
+const catIconRegistry = CatIconRegistry.getInstance();
 
 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}";
 
@@ -98,6 +99,6 @@ function defineCustomElement() {
   } });
 }
 
-export { CatIconRegistry as C, CatIcon as a, defineCustomElement as d };
+export { CatIconRegistry as C, CatIcon as a, catIconRegistry as c, defineCustomElement as d };
 
 //# sourceMappingURL=cat-icon2.js.map

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

@@ -1 +1 @@
-{"file":"cat-icon2.js","mappings":";;;MAEa,eAAe;EAK1B;IAFiB,UAAK,GAAwB,IAAI,GAAG,EAAE,CAAC;;GAIvD;EAED,OAAO,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;GACjC;EAED,OAAO,CAAC,IAAY,EAAE,OAAgB;IACpC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3D,IAAI,CAAC,IAAI,EAAE;MACTA,QAAG,CAAC,KAAK,CAAC,iCAAiC,OAAO,GAAG,WAAW,OAAO,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;KAC5F;IACD,OAAO,IAAI,CAAC;GACb;EAED,OAAO,CAAC,IAAY,EAAE,IAAY,EAAE,OAAgB;IAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;IACpDA,QAAG,CAAC,IAAI,CAAC,+BAA+B,OAAO,GAAG,WAAW,OAAO,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;IACxF,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAC3E,OAAO,IAAI,CAAC;GACb;EAED,QAAQ,CAAC,KAAiC,EAAE,OAAgB;IAC1D,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IACrGA,QAAG,CAAC,IAAI,CAAC,gCAAgC,OAAO,GAAG,WAAW,OAAO,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpH,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IACjG,OAAO,IAAI,CAAC;GACb;EAED,UAAU,CAAC,IAAY,EAAE,OAAgB;IACvC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IACjDA,QAAG,CAAC,IAAI,CAAC,iCAAiC,OAAO,GAAG,aAAa,OAAO,EAAE,GAAG,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;IAC5F,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAC7E,OAAO,IAAI,CAAC;GACb;EAED,WAAW,CAAC,KAAe,EAAE,OAAgB;IAC3C,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACxEA,QAAG,CAAC,IAAI,CAAC,kCAAkC,OAAO,GAAG,aAAa,OAAO,EAAE,GAAG,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC3G,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAC/E,OAAO,IAAI,CAAC;GACb;EAEO,SAAS,CAAC,IAAY,EAAE,OAAgB;IAC9C,OAAO,OAAO,GAAG,GAAG,OAAO,OAAO,GAAG,IAAI,CAAC;GAC3C;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;GACJ;;;AChEH,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":["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@use 'sass:map';\n\n$icon-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  /**\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: map.get($icon-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n","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\nexport const catIconRegistry = CatIconRegistry.getInstance();\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$icon-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  /**\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: map.get($icon-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n","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

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loglevel } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
-import { C as CatI18nRegistry } from './cat-i18n-registry.js';
+import { c as catI18nRegistry } from './cat-i18n-registry.js';
 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 catInputCss = ".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}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .input-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}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))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
+const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.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{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}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224))}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .input-wrapper{box-shadow:0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) .input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px rgb(var(--cat-danger-bg, 217, 52, 13))}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))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
 
 let nextUniqueId = 0;
 const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -17,7 +17,6 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.catChange = createEvent(this, "catChange", 7);
     this.catFocus = createEvent(this, "catFocus", 7);
     this.catBlur = createEvent(this, "catBlur", 7);
-    this.i18n = CatI18nRegistry.getInstance();
     this.id = `cat-input-${nextUniqueId++}`;
     this.hasSlottedLabel = false;
     /**
@@ -64,7 +63,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
-      loglevel.error('[A11y] Missing ARIA label on input', this);
+      loglevel.warn('[A11y] Missing ARIA label on input', this);
     }
   }
   /**
@@ -83,13 +82,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.t('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" }, "(", catI18nRegistry.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.min, 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));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, 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": catI18nRegistry.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"]');

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

@@ -1 +1 @@
-{"file":"cat-input.js","mappings":"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","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@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\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: 2.5rem;\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\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  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled) {\n    &:hover {\n      box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n    }\n\n    &:focus-within {\n      outline: 2px solid cat-token('color.ui.border.focus');\n    }\n  }\n}\n\n:host(.cat-error) {\n  .input-wrapper {\n    box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg');\n\n    &:not(.input-disabled):hover {\n      box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg');\n    }\n  }\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\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.dark');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.dark');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: 1.5rem;\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - 1rem);\n  right: -0.5rem;\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';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\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 * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-input-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * The label for the input.\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 value for date, time and numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: number | string;\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   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: 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   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The 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 input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input 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 input', this);\n    }\n  }\n\n  /**\n   * Sets focus on the input. Use this method instead of `input.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  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\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                  ({this.i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\n            'input-disabled': this.disabled\n          }}\n          onClick={() => this.input.focus()}\n        >\n          {this.textPrefix && (\n            <span class=\"text-prefix\" part=\"prefix\">\n              {this.textPrefix}\n            </span>\n          )}\n          {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\n              }}\n              autocomplete={this.autoComplete}\n              disabled={this.disabled}\n              max={this.max}\n              maxlength={this.maxLength}\n              min={this.min}\n              minlength={this.minLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.readonly}\n              required={this.required}\n              type={this.type}\n              value={this.value}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            ></input>\n            {this.clearable && !this.disabled && this.value && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={this.i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n          {this.textSuffix && (\n            <span class=\"text-suffix\" part=\"suffix\">\n              {this.textSuffix}\n            </span>\n          )}\n        </div>\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.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-input.js","mappings":"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","names":["CatInput","log","i18n"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@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\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: 2.5rem;\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\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  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled) {\n    &:hover {\n      box-shadow: 0 0 0 2px cat-token('color.ui.border.dark');\n    }\n\n    &:focus-within {\n      outline: 2px solid cat-token('color.ui.border.focus');\n    }\n  }\n}\n\n:host(.cat-error) {\n  .input-wrapper {\n    box-shadow: 0 0 0 1px cat-token('color.theme.danger.bg');\n\n    &:not(.input-disabled):hover {\n      box-shadow: 0 0 0 2px cat-token('color.theme.danger.bg');\n    }\n  }\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\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.dark');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.dark');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: 1.5rem;\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - 1rem);\n  right: -0.5rem;\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';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\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 * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly id = `cat-input-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * The label for the input.\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 value for date, time and numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: number | string;\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   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: 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   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The 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 input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input 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.warn('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Sets focus on the input. Use this method instead of `input.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  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\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                  ({i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\n            'input-disabled': this.disabled\n          }}\n          onClick={() => this.input.focus()}\n        >\n          {this.textPrefix && (\n            <span class=\"text-prefix\" part=\"prefix\">\n              {this.textPrefix}\n            </span>\n          )}\n          {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\n              }}\n              autocomplete={this.autoComplete}\n              disabled={this.disabled}\n              max={this.max}\n              maxlength={this.maxLength}\n              min={this.min}\n              minlength={this.minLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.readonly}\n              required={this.required}\n              type={this.type}\n              value={this.value}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            ></input>\n            {this.clearable && !this.disabled && this.value && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n          {this.textSuffix && (\n            <span class=\"text-suffix\" part=\"suffix\">\n              {this.textSuffix}\n            </span>\n          )}\n        </div>\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.input.value;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}

package/dist/components/{cat-toast-demo.d.ts → cat-pagination.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface CatToastDemo extends Components.CatToastDemo, HTMLElement {}
-export const CatToastDemo: {
-  prototype: CatToastDemo;
-  new (): CatToastDemo;
+interface CatPagination extends Components.CatPagination, HTMLElement {}
+export const CatPagination: {
+  prototype: CatPagination;
+  new (): CatPagination;
 };
 /**
  * Used to define this component and all nested components recursively.