@haiilo/catalyst 5.3.0 → 6.0.0

package/dist/collection/components/cat-datepicker/cat-datepicker.locale.js

@@ -0,0 +1,51 @@
+import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
+export function getHour12(language) {
+  const dateStr = new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' })
+    .format(new Date())
+    .toLowerCase();
+  return dateStr.includes('am') || dateStr.includes('pm');
+}
+function getFirstDayOfWeek(language) {
+  const locale = new Intl.Locale(language);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const weekInfo = locale.getWeekInfo?.() ?? locale.weekInfo;
+  return weekInfo?.firstDay ?? 1;
+}
+function daysForLocale(language, weekday = 'long') {
+  const date = new Date();
+  const firstDayOfWeek = date.getUTCDate() - date.getUTCDay();
+  const format = new Intl.DateTimeFormat(language, { weekday }).format;
+  return [...Array(7).keys()].map(day => format(date.setUTCDate(firstDayOfWeek + day)));
+}
+function monthsForLocale(language, month = 'long') {
+  const date = new Date();
+  const format = new Intl.DateTimeFormat(language, { month }).format;
+  return [...Array(12).keys()].map(month => format(date.setUTCMonth(month)));
+}
+export function getLocale(language) {
+  return {
+    firstDayOfWeek: getFirstDayOfWeek(language),
+    rangeSeparator: ' – ',
+    weekAbbreviation: '',
+    yearAriaLabel: i18n.t('datepicker.year'),
+    monthAriaLabel: i18n.t('datepicker.month'),
+    hourAriaLabel: i18n.t('datepicker.hour'),
+    minuteAriaLabel: i18n.t('datepicker.minute'),
+    toggleTitle: i18n.t('datepicker.toggle'),
+    scrollTitle: i18n.t('datepicker.scroll'),
+    time_24hr: !getHour12(language),
+    weekdays: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      shorthand: daysForLocale(language, 'short'),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      longhand: daysForLocale(language, 'long')
+    },
+    months: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      shorthand: monthsForLocale(language, 'short'),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      longhand: monthsForLocale(language, 'long')
+    }
+  };
+}
+//# sourceMappingURL=cat-datepicker.locale.js.map

package/dist/collection/components/cat-datepicker/cat-datepicker.locale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-datepicker.locale.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker/cat-datepicker.locale.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CustomLocale } from 'flatpickr/dist/types/locale';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nexport function getHour12(language: string): boolean {\n  const dateStr = new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' })\n    .format(new Date())\n    .toLowerCase();\n  return dateStr.includes('am') || dateStr.includes('pm');\n}\n\nfunction getFirstDayOfWeek(language: string): number {\n  const locale = new Intl.Locale(language);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const weekInfo = (locale as any).getWeekInfo?.() ?? (locale as any).weekInfo;\n  return weekInfo?.firstDay ?? 1;\n}\n\nfunction daysForLocale(language: string, weekday: 'long' | 'short' | 'narrow' = 'long') {\n  const date = new Date();\n  const firstDayOfWeek = date.getUTCDate() - date.getUTCDay();\n  const format = new Intl.DateTimeFormat(language, { weekday }).format;\n  return [...Array(7).keys()].map(day => format(date.setUTCDate(firstDayOfWeek + day)));\n}\n\nfunction monthsForLocale(language: string, month: 'long' | 'short' = 'long') {\n  const date = new Date();\n  const format = new Intl.DateTimeFormat(language, { month }).format;\n  return [...Array(12).keys()].map(month => format(date.setUTCMonth(month)));\n}\n\nexport function getLocale(language: string): CustomLocale {\n  return {\n    firstDayOfWeek: getFirstDayOfWeek(language),\n    rangeSeparator: ' – ',\n    weekAbbreviation: '',\n    yearAriaLabel: i18n.t('datepicker.year'),\n    monthAriaLabel: i18n.t('datepicker.month'),\n    hourAriaLabel: i18n.t('datepicker.hour'),\n    minuteAriaLabel: i18n.t('datepicker.minute'),\n    toggleTitle: i18n.t('datepicker.toggle'),\n    scrollTitle: i18n.t('datepicker.scroll'),\n    time_24hr: !getHour12(language),\n    weekdays: {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      shorthand: daysForLocale(language, 'short') as any,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      longhand: daysForLocale(language, 'long') as any\n    },\n    months: {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      shorthand: monthsForLocale(language, 'short') as any,\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      longhand: monthsForLocale(language, 'long') as any\n    }\n  };\n}\n"]}

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

@@ -30,6 +30,7 @@
   max-height: calc(100vh - 48px);
   box-shadow: 0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);
   border-radius: var(--cat-border-radius-m, 0.25rem);
+  border: 1px solid rgb(var(--cat-border-color, 235, 236, 240));
   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);

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

@@ -21,8 +21,9 @@ export class CatDropdown {
       this.initTrigger();
       this.toggle();
     }
+    const button = event.target;
     // hide dropdown on button click
-    if (!this.noAutoClose && event.composedPath().includes(this.content)) {
+    if (!this.noAutoClose && event.composedPath().includes(this.content) && button.slot !== 'trigger') {
       this.close();
     }
   }
@@ -43,10 +44,9 @@ export class CatDropdown {
     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.trigger?.setAttribute('aria-expanded', 'true');
       this.catOpen.emit();
       this.trap = this.trap
         ? this.trap.updateContainerElements(this.content)
@@ -55,9 +55,15 @@ export class CatDropdown {
             getShadowRoot: true
           },
           allowOutsideClick: true,
-          clickOutsideDeactivates: event => !this.noAutoClose &&
-            !event.composedPath().includes(this.content) &&
-            (!this.trigger || !event.composedPath().includes(this.trigger)),
+          clickOutsideDeactivates: event => {
+            const shouldClose = !this.noAutoClose &&
+              !event.composedPath().includes(this.content) &&
+              (!this.trigger || !event.composedPath().includes(this.trigger));
+            if (shouldClose) {
+              this.close();
+            }
+            return shouldClose;
+          },
           onPostDeactivate: () => this.close()
         });
       this.trap.activate();
@@ -67,19 +73,18 @@ export class CatDropdown {
    * Closes the dropdown.
    */
   async close() {
-    if (this.isOpen === null) {
+    if (this.isOpen === null || !this.isOpen) {
       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.trigger?.setAttribute('aria-expanded', 'false');
+      this.trap?.deactivate();
       this.catClose.emit();
     }, timeTransitionS);
   }
@@ -117,14 +122,13 @@ export class CatDropdown {
     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)) || [];
+    const elems = this.triggerSlot?.assignedElements?.() || [];
     while (!trigger && elems.length) {
       const elem = elems.shift();
-      trigger = (elem === null || elem === void 0 ? void 0 : elem.hasAttribute('data-trigger'))
+      trigger = elem?.hasAttribute('data-trigger')
         ? elem
-        : (_c = elem === null || elem === void 0 ? void 0 : elem.querySelector('[data-trigger]')) !== null && _c !== void 0 ? _c : undefined;
+        : elem?.querySelector('[data-trigger]') ?? undefined;
     }
     if (!trigger) {
       trigger = firstTabbable(this.triggerSlot);

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

@@ -1 +1 @@
-{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, size } 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        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [\n          offset(CatDropdown.OFFSET),\n          flip(),\n          size({\n            padding: CatDropdown.OFFSET,\n            apply({ availableWidth, availableHeight, elements }) {\n              Object.assign(elements.floating.style, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`\n              });\n            }\n          })\n        ]\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,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, size } 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    const button = event.target as HTMLButtonElement;\n\n    // hide dropdown on button click\n    if (!this.noAutoClose && event.composedPath().includes(this.content) && button.slot !== 'trigger') {\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              const shouldClose =\n                !this.noAutoClose &&\n                !event.composedPath().includes(this.content) &&\n                (!this.trigger || !event.composedPath().includes(this.trigger));\n              if (shouldClose) {\n                this.close();\n              }\n              return shouldClose;\n            },\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 || !this.isOpen) {\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        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [\n          offset(CatDropdown.OFFSET),\n          flip(),\n          size({\n            padding: CatDropdown.OFFSET,\n            apply({ availableWidth, availableHeight, elements }) {\n              Object.assign(elements.floating.style, {\n                maxWidth: `${availableWidth}px`,\n                maxHeight: `${availableHeight}px`\n              });\n            }\n          })\n        ]\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"]}

package/dist/collection/components/cat-form-group/cat-form-group.js

@@ -8,7 +8,7 @@ export class CatFormGroup {
   }
   onRequiredMarker(newRequiredMarker) {
     const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;
-    this.formElements.forEach(element => { var _a; return !((_a = element.requiredMarker) === null || _a === void 0 ? void 0 : _a.endsWith('!')) && (element.requiredMarker = updateMarker); });
+    this.formElements.forEach(element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker));
   }
   onHorizontal(newHorizontal) {
     this.formElements.forEach(element => {
@@ -19,14 +19,13 @@ export class CatFormGroup {
     return (h(Host, { style: { '--label-size': this.labelSize } }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
   }
   onSlotChange() {
-    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label'));
+    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));
     this.onRequiredMarker(this.requiredMarker);
     this.onHorizontal(this.horizontal);
   }
   calculate(elements) {
-    const formFields = elements.filter(value => value.tagName !== 'CAT-LABEL');
-    const optionalFields = formFields.filter(value => !value.required).length;
-    const requiredFields = formFields.length - optionalFields;
+    const optionalFields = elements.filter(value => !value.required).length;
+    const requiredFields = elements.length - optionalFields;
     return requiredFields >= optionalFields ? 'optional' : 'required';
   }
   static get is() { return "cat-form-group"; }

package/dist/collection/components/cat-form-group/cat-form-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAazE,MAAM,OAAO,YAAY;;IACf,iBAAY,GAA8B,EAAE,CAAC;0BAWe,MAAM;sBAKrD,KAAK;;;EAQ1B,gBAAgB,CAAC,iBAA4D;IAC3E,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,WAAC,OAAA,CAAC,CAAA,MAAA,OAAO,CAAC,cAAc,0CAAE,QAAQ,CAAC,GAAG,CAAC,CAAA,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAAA,EAAA,CAC7F,CAAC;EACJ,CAAC;EAGD,YAAY,CAAC,aAAsB;IACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;MAClC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;IACrC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;MAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,gDAAgD,CAAC,CACvD,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EACrC,CAAC;EAEO,SAAS,CAAC,QAAmC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC;IAC3E,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IAC1E,MAAM,cAAc,GAAG,UAAU,CAAC,MAAM,GAAG,cAAc,CAAC;IAC1D,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;EACpE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n  | HTMLCatInputElement\n  | HTMLCatTextareaElement\n  | HTMLCatSelectElement\n  | HTMLCatLabelElement;\n\n@Component({\n  tag: 'cat-form-group',\n  styleUrl: 'cat-form-group.scss',\n  shadow: true\n})\nexport class CatFormGroup {\n  private formElements: HTMLCatFormFieldElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n   * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n   * - If there are more required, the optional will be marked.<br />\n   * - If there are less required, it will mark the required.<br /><br />\n   * If a form field had \"!\", the requiredMarked of the field would not change.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'auto' = 'auto';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * The space allocated to the input label\n   */\n  @Prop() labelSize?: string;\n\n  @Watch('requiredMarker')\n  onRequiredMarker(newRequiredMarker: 'none' | 'required' | 'optional' | 'auto') {\n    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n    this.formElements.forEach(\n      element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n    );\n  }\n\n  @Watch('horizontal')\n  onHorizontal(newHorizontal: boolean) {\n    this.formElements.forEach(element => {\n      element.horizontal = newHorizontal;\n    });\n  }\n\n  render() {\n    return (\n      <Host style={{ '--label-size': this.labelSize }}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(\n      this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label')\n    ) as HTMLCatFormFieldElement[];\n    this.onRequiredMarker(this.requiredMarker);\n    this.onHorizontal(this.horizontal);\n  }\n\n  private calculate(elements: HTMLCatFormFieldElement[]): 'optional' | 'required' {\n    const formFields = elements.filter(value => value.tagName !== 'CAT-LABEL');\n    const optionalFields = formFields.filter(value => !value.required).length;\n    const requiredFields = formFields.length - optionalFields;\n    return requiredFields >= optionalFields ? 'optional' : 'required';\n  }\n}\n"]}
+{"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAazE,MAAM,OAAO,YAAY;;IACf,iBAAY,GAA8B,EAAE,CAAC;0BAWe,MAAM;sBAKrD,KAAK;;;EAQ1B,gBAAgB,CAAC,iBAA4D;IAC3E,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAC7F,CAAC;EACJ,CAAC;EAGD,YAAY,CAAC,aAAsB;IACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;MAClC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;IACrC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;MAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EACrC,CAAC;EAEO,SAAS,CAAC,QAAmC;IACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;IACxD,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;EACpE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n  | HTMLCatInputElement\n  | HTMLCatTextareaElement\n  | HTMLCatSelectElement\n  | HTMLCatDatepickerElement;\n\n@Component({\n  tag: 'cat-form-group',\n  styleUrl: 'cat-form-group.scss',\n  shadow: true\n})\nexport class CatFormGroup {\n  private formElements: HTMLCatFormFieldElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n   * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n   * - If there are more required, the optional will be marked.<br />\n   * - If there are less required, it will mark the required.<br /><br />\n   * If a form field had \"!\", the requiredMarked of the field would not change.\n   */\n  @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'auto' = 'auto';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * The space allocated to the input label\n   */\n  @Prop() labelSize?: string;\n\n  @Watch('requiredMarker')\n  onRequiredMarker(newRequiredMarker: 'none' | 'required' | 'optional' | 'auto') {\n    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n    this.formElements.forEach(\n      element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n    );\n  }\n\n  @Watch('horizontal')\n  onHorizontal(newHorizontal: boolean) {\n    this.formElements.forEach(element => {\n      element.horizontal = newHorizontal;\n    });\n  }\n\n  render() {\n    return (\n      <Host style={{ '--label-size': this.labelSize }}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(\n      this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker')\n    ) as HTMLCatFormFieldElement[];\n    this.onRequiredMarker(this.requiredMarker);\n    this.onHorizontal(this.horizontal);\n  }\n\n  private calculate(elements: HTMLCatFormFieldElement[]): 'optional' | 'required' {\n    const optionalFields = elements.filter(value => !value.required).length;\n    const requiredFields = elements.length - optionalFields;\n    return requiredFields >= optionalFields ? 'optional' : 'required';\n  }\n}\n"]}

package/dist/collection/components/cat-form-hint/cat-form-hint.js

@@ -7,17 +7,13 @@ import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
  * @return a JSX.Element
  */
 export const CatFormHint = props => {
-  var _a;
   const { id, hint, slottedHint, errorMap } = props;
   const errors = Object.entries(errorMap || {});
   return (h("div", { id: id + '-hint', class: "hint-section" }, errors.length
-    ? errors.map(([key, params]) => {
-      var _a;
-      return (h("p", { class: ((_a = props.class) !== null && _a !== void 0 ? _a : '') + ' input-hint cat-text-danger' }, i18n.t(`error.${key}`, params)));
-    })
+    ? errors.map(([key, params]) => (h("p", { class: (props.class ?? '') + ' input-hint cat-text-danger' }, i18n.t(`error.${key}`, params))))
     : [
       hint &&
-        (Array.isArray(hint) ? (hint.map(item => { var _a; return h("p", { class: ((_a = props.class) !== null && _a !== void 0 ? _a : '') + ' input-hint' }, item); })) : (h("p", { class: ((_a = props.class) !== null && _a !== void 0 ? _a : '') + ' input-hint' }, hint))),
+        (Array.isArray(hint) ? (hint.map(item => h("p", { class: (props.class ?? '') + ' input-hint' }, item))) : (h("p", { class: (props.class ?? '') + ' input-hint' }, hint))),
       slottedHint
     ]));
 };

package/dist/collection/components/cat-form-hint/cat-form-hint.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-form-hint.js","sourceRoot":"","sources":["../../../src/components/cat-form-hint/cat-form-hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAmBxE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0C,KAAK,CAAC,EAAE;;EACxE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAClD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;EAC9C,OAAO,CACL,WAAK,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,KAAK,EAAC,cAAc,IACxC,MAAM,CAAC,MAAM;IACZ,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE;;MAAC,OAAA,CAC5B,SAAG,KAAK,EAAE,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,GAAG,6BAA6B,IAAG,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,MAAM,CAAC,CAAK,CACpG,CAAA;KAAA,CAAC;IACJ,CAAC,CAAC;MACE,IAAI;QACF,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACrB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,SAAG,KAAK,EAAE,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAAA,EAAA,CAAC,CAC5E,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAE,CAAC,MAAA,KAAK,CAAC,KAAK,mCAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAC1D,CAAC;MACJ,WAAW;KACZ,CACD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ErrorMap = { [key: string]: any };\n\n/**\n * Properties of CatFormHint.\n *\n * @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n */\ninterface CatFormHintProps {\n  id: string;\n  hint?: string | string[];\n  slottedHint?: HTMLSlotElement;\n  class?: string;\n  errorMap?: ErrorMap;\n}\n\n/**\n * CatFormHint is a functional component that represents the hint area of form elements.\n *\n * @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n  const { id, hint, slottedHint, errorMap } = props;\n  const errors = Object.entries(errorMap || {});\n  return (\n    <div id={id + '-hint'} class=\"hint-section\">\n      {errors.length\n        ? errors.map(([key, params]) => (\n            <p class={(props.class ?? '') + ' input-hint cat-text-danger'}>{i18n.t(`error.${key}`, params)}</p>\n          ))\n        : [\n            hint &&\n              (Array.isArray(hint) ? (\n                hint.map(item => <p class={(props.class ?? '') + ' input-hint'}>{item}</p>)\n              ) : (\n                <p class={(props.class ?? '') + ' input-hint'}>{hint}</p>\n              )),\n            slottedHint\n          ]}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"cat-form-hint.js","sourceRoot":"","sources":["../../../src/components/cat-form-hint/cat-form-hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAmBxE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0C,KAAK,CAAC,EAAE;EACxE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAClD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;EAC9C,OAAO,CACL,WAAK,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,KAAK,EAAC,cAAc,IACxC,MAAM,CAAC,MAAM;IACZ,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC5B,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,6BAA6B,IAAG,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,MAAM,CAAC,CAAK,CACpG,CAAC;IACJ,CAAC,CAAC;MACE,IAAI;QACF,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACrB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAAC,CAC5E,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAC1D,CAAC;MACJ,WAAW;KACZ,CACD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ErrorMap = { [key: string]: any };\n\n/**\n * Properties of CatFormHint.\n *\n * @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n */\ninterface CatFormHintProps {\n  id: string;\n  hint?: string | string[];\n  slottedHint?: HTMLSlotElement;\n  class?: string;\n  errorMap?: ErrorMap;\n}\n\n/**\n * CatFormHint is a functional component that represents the hint area of form elements.\n *\n * @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n  const { id, hint, slottedHint, errorMap } = props;\n  const errors = Object.entries(errorMap || {});\n  return (\n    <div id={id + '-hint'} class=\"hint-section\">\n      {errors.length\n        ? errors.map(([key, params]) => (\n            <p class={(props.class ?? '') + ' input-hint cat-text-danger'}>{i18n.t(`error.${key}`, params)}</p>\n          ))\n        : [\n            hint &&\n              (Array.isArray(hint) ? (\n                hint.map(item => <p class={(props.class ?? '') + ' input-hint'}>{item}</p>)\n              ) : (\n                <p class={(props.class ?? '') + ' input-hint'}>{hint}</p>\n              )),\n            slottedHint\n          ]}\n    </div>\n  );\n};\n"]}

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

@@ -30,6 +30,18 @@ export class CatI18nRegistry {
     }
     return CatI18nRegistry.instance;
   }
+  getLocale() {
+    return this._locale ?? window?.navigator?.language ?? 'en';
+  }
+  setLocale(locale) {
+    try {
+      this._locale = Intl.getCanonicalLocales(locale)[0];
+      log.info(`[CatI18nRegistry] Set locale: ${this._locale}`);
+    }
+    catch (err) {
+      log.error(`[CatI18nRegistry] Invalid locale: ${locale}`);
+    }
+  }
   set(i18n, silent = false) {
     const i18nEntries = Object.entries(i18n);
     i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));
@@ -47,7 +59,7 @@ export class CatI18nRegistry {
       log.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 : ''}`; });
+    return message.replace(/{{\s*([-a-zA-Z._]+)\s*}}/g, (_match, key) => `${params?.[key] ?? ''}`);
   }
   buildEvent(name, detail) {
     return new CustomEvent(name, {

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

@@ -1 +1 @@
-{"version":3,"file":"cat-i18n-registry.js","sourceRoot":"","sources":["../../../src/components/cat-i18n/cat-i18n-registry.ts"],"names":[],"mappings":"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","sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private readonly id = (Math.random() + 1).toString(36).substring(2);\n  private readonly i18n: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n\n    // In rare cases, the registry can be initialized twice. This can happen in\n    // a micro frontend architecture where the registry is initialized in the\n    // host application and in the micro frontend. To prevent the registry in\n    // one application from overwriting the registry in the other, we listen for\n    // events that are dispatched when messages are added or removed in other\n    // applications and add or remove messages if the event was not dispatched\n    // by this registry.\n    window.addEventListener('cat-i18n-set', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.set(detail.i18n, true);\n      }\n    });\n    window.addEventListener('cat-i18n-clear', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.clear(true);\n      }\n    });\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 }, silent = false): void {\n    const i18nEntries = Object.entries(i18n);\n    i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));\n    log.info(`[CatI18nRegistry] Registered ${i18nEntries.length !== 1 ? 'messages' : 'message'}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-i18n-set', { i18n, id: this.id }));\n  }\n\n  clear(silent = false): void {\n    this.i18n.clear();\n    log.info(`[CatI18nRegistry] Cleared messages`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n  }\n\n  t(key: string, params?: { [key: string]: unknown }): 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,"file":"cat-i18n-registry.js","sourceRoot":"","sources":["../../../src/components/cat-i18n/cat-i18n-registry.ts"],"names":[],"mappings":"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","sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private readonly id = (Math.random() + 1).toString(36).substring(2);\n  private readonly i18n: Map<string, string> = new Map();\n  private _locale?: string;\n\n  private constructor() {\n    // hide constructor\n\n    // In rare cases, the registry can be initialized twice. This can happen in\n    // a micro frontend architecture where the registry is initialized in the\n    // host application and in the micro frontend. To prevent the registry in\n    // one application from overwriting the registry in the other, we listen for\n    // events that are dispatched when messages are added or removed in other\n    // applications and add or remove messages if the event was not dispatched\n    // by this registry.\n    window.addEventListener('cat-i18n-set', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.set(detail.i18n, true);\n      }\n    });\n    window.addEventListener('cat-i18n-clear', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.clear(true);\n      }\n    });\n  }\n\n  static getInstance(): CatI18nRegistry {\n    if (!CatI18nRegistry.instance) {\n      CatI18nRegistry.instance = new CatI18nRegistry();\n    }\n    return CatI18nRegistry.instance;\n  }\n\n  getLocale(): string {\n    return this._locale ?? window?.navigator?.language ?? 'en';\n  }\n\n  setLocale(locale: string): void {\n    try {\n      this._locale = Intl.getCanonicalLocales(locale)[0];\n      log.info(`[CatI18nRegistry] Set locale: ${this._locale}`);\n    } catch (err) {\n      log.error(`[CatI18nRegistry] Invalid locale: ${locale}`);\n    }\n  }\n\n  set(i18n: { [key: string]: string }, silent = false): void {\n    const i18nEntries = Object.entries(i18n);\n    i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));\n    log.info(`[CatI18nRegistry] Registered ${i18nEntries.length !== 1 ? 'messages' : 'message'}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-i18n-set', { i18n, id: this.id }));\n  }\n\n  clear(silent = false): void {\n    this.i18n.clear();\n    log.info(`[CatI18nRegistry] Cleared messages`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n  }\n\n  t(key: string, params?: { [key: string]: unknown }): 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"]}

package/dist/collection/components/cat-icon/cat-icon-registry.js

@@ -1,9 +1,37 @@
+import cross16 from '@haiilo/catalyst-icons/tmp/assets/16-cross.svg';
+import alertCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/alert-circle-outlined.svg';
+import checkCircleFilled from '@haiilo/catalyst-icons/tmp/assets/check-circle-filled.svg';
+import chevronDownOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-down-outlined.svg';
+import chevronLeftOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-left-outlined.svg';
+import chevronRightOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-right-outlined.svg';
+import clockFilled from '@haiilo/catalyst-icons/tmp/assets/clock-filled.svg';
+import crossCircleFilled from '@haiilo/catalyst-icons/tmp/assets/cross-circle-filled.svg';
+import crossCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-circle-outlined.svg';
+import crossOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-outlined.svg';
+import dangerFilled from '@haiilo/catalyst-icons/tmp/assets/danger-filled.svg';
+import starCircleFilled from '@haiilo/catalyst-icons/tmp/assets/star-circle-filled.svg';
 import log from 'loglevel';
 export class CatIconRegistry {
   constructor() {
     // hide constructor
     this.id = (Math.random() + 1).toString(36).substring(2);
     this.icons = new Map();
+    // register default icons that are used in the framework by other components
+    this.addIcons({
+      'alert-danger': crossCircleFilled,
+      'alert-primary': starCircleFilled,
+      'alert-secondary': clockFilled,
+      'alert-success': checkCircleFilled,
+      'alert-warning': dangerFilled,
+      'dialog-close': crossOutlined,
+      'input-close': crossCircleOutlined,
+      'input-error': alertCircleOutlined,
+      'notification-close': crossCircleOutlined,
+      'pagination-left': chevronLeftOutlined,
+      'pagination-right': chevronRightOutlined,
+      'select-clear': cross16,
+      'select-open': chevronDownOutlined
+    }, '$cat', true);
     // In rare cases, the registry can be initialized twice. This can happen in
     // a micro frontend architecture where the registry is initialized in the
     // host application and in the micro frontend. To prevent the registry in
@@ -53,7 +81,7 @@ export class CatIconRegistry {
     return this;
   }
   buildName(name, setName) {
-    return setName ? `${setName}:name` : name;
+    return setName ? `${setName}:${name}` : name;
   }
   buildEvent(name, detail) {
     return new CustomEvent(name, {

package/dist/collection/components/cat-icon/cat-icon-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-icon-registry.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon-registry.ts"],"names":[],"mappings":"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","sourcesContent":["import log from 'loglevel';\n\nexport class CatIconRegistry {\n  private static instance: CatIconRegistry;\n\n  private readonly id = (Math.random() + 1).toString(36).substring(2);\n  private readonly icons: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n\n    // In rare cases, the registry can be initialized twice. This can happen in\n    // a micro frontend architecture where the registry is initialized in the\n    // host application and in the micro frontend. To prevent the registry in\n    // one application from overwriting the registry in the other, we listen for\n    // events that are dispatched when icons are added or removed in other\n    // applications and add or remove icons if the event was not dispatched by\n    // this registry.\n    window.addEventListener('cat-icons-added', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.addIcons(detail.icons, detail.setName, true);\n      }\n    });\n    window.addEventListener('cat-icons-removed', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.removeIcons(detail.names, detail.setName, true);\n      }\n    });\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  addIcons(icons: { [name: string]: string }, setName?: string, silent = false): CatIconRegistry {\n    const iconEntries = Object.entries(icons);\n    const iconSize = iconEntries.length;\n    iconEntries.forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n    log.info(`[CatIconRegistry] Added ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` to set ${setName}` : ''}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-icons-added', { id: this.id, icons, setName }));\n    return this;\n  }\n\n  removeIcons(names: string[], setName?: string, silent = false): CatIconRegistry {\n    const iconSize = names.length;\n    names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n    log.info(`[CatIconRegistry] Removed ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` from set ${setName}` : ''}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-icons-removed', { id: this.id, 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"]}
+{"version":3,"file":"cat-icon-registry.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon-registry.ts"],"names":[],"mappings":"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","sourcesContent":["import cross16 from '@haiilo/catalyst-icons/tmp/assets/16-cross.svg';\nimport alertCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/alert-circle-outlined.svg';\nimport checkCircleFilled from '@haiilo/catalyst-icons/tmp/assets/check-circle-filled.svg';\nimport chevronDownOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-down-outlined.svg';\nimport chevronLeftOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-left-outlined.svg';\nimport chevronRightOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-right-outlined.svg';\nimport clockFilled from '@haiilo/catalyst-icons/tmp/assets/clock-filled.svg';\nimport crossCircleFilled from '@haiilo/catalyst-icons/tmp/assets/cross-circle-filled.svg';\nimport crossCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-circle-outlined.svg';\nimport crossOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-outlined.svg';\nimport dangerFilled from '@haiilo/catalyst-icons/tmp/assets/danger-filled.svg';\nimport starCircleFilled from '@haiilo/catalyst-icons/tmp/assets/star-circle-filled.svg';\nimport log from 'loglevel';\n\nexport class CatIconRegistry {\n  private static instance: CatIconRegistry;\n\n  private readonly id = (Math.random() + 1).toString(36).substring(2);\n  private readonly icons: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n\n    // register default icons that are used in the framework by other components\n    this.addIcons(\n      {\n        'alert-danger': crossCircleFilled,\n        'alert-primary': starCircleFilled,\n        'alert-secondary': clockFilled,\n        'alert-success': checkCircleFilled,\n        'alert-warning': dangerFilled,\n        'dialog-close': crossOutlined,\n        'input-close': crossCircleOutlined,\n        'input-error': alertCircleOutlined,\n        'notification-close': crossCircleOutlined,\n        'pagination-left': chevronLeftOutlined,\n        'pagination-right': chevronRightOutlined,\n        'select-clear': cross16,\n        'select-open': chevronDownOutlined\n      },\n      '$cat',\n      true\n    );\n\n    // In rare cases, the registry can be initialized twice. This can happen in\n    // a micro frontend architecture where the registry is initialized in the\n    // host application and in the micro frontend. To prevent the registry in\n    // one application from overwriting the registry in the other, we listen for\n    // events that are dispatched when icons are added or removed in other\n    // applications and add or remove icons if the event was not dispatched by\n    // this registry.\n    window.addEventListener('cat-icons-added', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.addIcons(detail.icons, detail.setName, true);\n      }\n    });\n    window.addEventListener('cat-icons-removed', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.removeIcons(detail.names, detail.setName, true);\n      }\n    });\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  addIcons(icons: { [name: string]: string }, setName?: string, silent = false): CatIconRegistry {\n    const iconEntries = Object.entries(icons);\n    const iconSize = iconEntries.length;\n    iconEntries.forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n    log.info(`[CatIconRegistry] Added ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` to set ${setName}` : ''}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-icons-added', { id: this.id, icons, setName }));\n    return this;\n  }\n\n  removeIcons(names: string[], setName?: string, silent = false): CatIconRegistry {\n    const iconSize = names.length;\n    names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n    log.info(`[CatIconRegistry] Removed ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` from set ${setName}` : ''}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-icons-removed', { id: this.id, 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"]}

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

@@ -12,7 +12,7 @@
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
-  line-height: 1rem;
+  line-height: 1.125rem;
   font-weight: var(--cat-font-weight-body, 400);
   margin: 0 !important;
 }
@@ -362,8 +362,9 @@
   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));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-color));
   transition: box-shadow 0.13s linear;
+  --border-color: var(--cat-border-color-dark, 215, 219, 224);
   /* stylelint-disable property-no-vendor-prefix */
   /* stylelint-enable property-no-vendor-prefix */
 }
@@ -376,19 +377,14 @@
   color: rgb(var(--cat-font-color-muted, 81, 92, 108));
 }
 .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):hover.input-invalid {
-  box-shadow: 0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  box-shadow: inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color));
 }
-.input-wrapper:not(.input-disabled):focus-within {
+.input-wrapper:focus-within {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
-}
-.input-wrapper:not(.input-disabled):focus-within.input-invalid {
-  outline: 2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  outline-offset: -1px;
 }
 .input-wrapper.input-invalid {
-  box-shadow: 0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  --border-color: var(--cat-danger-bg, 217, 52, 13), 0.2;
 }
 .input-wrapper:has(input:-webkit-autofill), .input-wrapper:has(input:-webkit-autofill):hover, .input-wrapper:has(input:-webkit-autofill):focus {
   background-color: #e8f0fe;