@haiilo/catalyst 10.26.1 → 10.27.0

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

@@ -1 +1 @@
-{"version":3,"file":"cat-spinner.js","sourceRoot":"","sources":["../../../src/components/cat-spinner/cat-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,UAAU;;oBAIoC,GAAG;;;IAQ5D,MAAM;QACJ,OAAO,CACL,2EACc,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAC3C,KAAK,EAAE;gBACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjD;YAED,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;gBACzD,+DAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cat-spinner.js","sourceRoot":"","sources":["../../../src/components/cat-spinner/cat-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,UAAU;;oBAIoC,GAAG;;qBAWd,CAAC;;IAE/C,MAAM;QACJ,OAAO,CACL,6DACE,IAAI,EAAC,aAAa,EAClB,QAAQ,EAAC,IAAI,gBACD,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,mBAC5B,IAAI,CAAC,KAAK,mBACX,GAAG,mBACH,KAAK,EACnB,KAAK,EAAE;gBACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjD;YAED,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;gBACzD,+DAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.\n   */\n  @Prop({ attribute: 'value' }) value: number = 0;\n\n  render() {\n    return (\n      <span\n        role=\"progressbar\"\n        tabindex=\"-1\"\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        aria-valuenow={this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/cat-spinner/cat-spinner.spec.js

@@ -7,7 +7,7 @@ describe('cat-spinner', () => {
             html: `<cat-spinner></cat-spinner>`
         });
         expect(page.root?.shadowRoot).toEqualLightHtml(`
-          <span aria-hidden="true" class="spinner-m">
+          <span aria-hidden="true" class="spinner-m" role="progressbar" tabindex="-1" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100">
             <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
               <circle cx="24" cy="24" r="21.5"></circle>
             </svg>

package/dist/collection/components/cat-spinner/cat-spinner.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-spinner.spec.js","sourceRoot":"","sources":["../../../src/components/cat-spinner/cat-spinner.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,gBAAgB,CAAC;;;;;;KAM9C,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatSpinner } from './cat-spinner';\n\ndescribe('cat-spinner', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatSpinner],\n      html: `<cat-spinner></cat-spinner>`\n    });\n    expect(page.root?.shadowRoot).toEqualLightHtml(`\n          <span aria-hidden=\"true\" class=\"spinner-m\">\n            <svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n            </svg>\n          </span>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"cat-spinner.spec.js","sourceRoot":"","sources":["../../../src/components/cat-spinner/cat-spinner.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,gBAAgB,CAAC;;;;;;KAM9C,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatSpinner } from './cat-spinner';\n\ndescribe('cat-spinner', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatSpinner],\n      html: `<cat-spinner></cat-spinner>`\n    });\n    expect(page.root?.shadowRoot).toEqualLightHtml(`\n          <span aria-hidden=\"true\" class=\"spinner-m\" role=\"progressbar\" tabindex=\"-1\" aria-valuemin=\"0\" aria-valuenow=\"0\" aria-valuemax=\"100\">\n            <svg viewBox=\"0 0 48 48\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n            </svg>\n          </span>\n    `);\n  });\n});\n"]}

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

@@ -58,7 +58,8 @@ export class CatTabs {
         this.activate(this.tabs[index]);
     }
     render() {
-        return (h(Host, { key: 'ffcba33b7d479bd2a282a21a51d82664e79f0743' }, this.tabs.map((tab) => {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '057726c753ef2e4d5557736488fbffb92774f26f' }, this.tabs.map((tab) => {
             return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,
@@ -86,6 +87,7 @@ export class CatTabs {
     }
     static get is() { return "cat-tabs"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["cat-tabs.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n */\n@Component({\n  tag: 'cat-tabs',\n  styleUrl: 'cat-tabs.scss',\n  shadow: true\n})\nexport class CatTabs {\n  private mutationObserver?: MutationObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() tabs: HTMLCatTabElement[] = [];\n\n  /**\n   * The ID of the active tab.\n   */\n  @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n  /**\n   * The alignment of the tabs.\n   */\n  @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  componentWillLoad(): void {\n    this.syncTabs();\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(\n      mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n    );\n    this.mutationObserver?.observe(this.hostElement, {\n      childList: true,\n      attributes: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  @Watch('activeTab')\n  onActiveTabChange(id: string) {\n    const index = this.tabs.findIndex(tab => tab.id === id);\n    this.catChange.emit({ id, index });\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n      const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);\n      const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n      const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].doFocus();\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Activates the tab with the given id.\n   *\n   * @param id The tab id.\n   */\n  @Method()\n  async setActive(id: string): Promise<void> {\n    this.activate(this.tabs.find(tab => tab.id === id));\n  }\n\n  /**\n   * Activates the tab with the given index.\n   *\n   * @param index The tab index.\n   */\n  @Method()\n  async setActiveIndex(index: number): Promise<void> {\n    this.activate(this.tabs[index]);\n  }\n\n  /**\n   * Emitted when active tab is changed.\n   */\n  @Event() catChange!: EventEmitter<{ id: string; index: number }>;\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab: HTMLCatTabElement) => {\n          return (\n            <cat-button\n              buttonId={tab.id}\n              role=\"tab\"\n              part=\"tab\"\n              class={{\n                'cat-tab': true,\n                'cat-tab-active': tab.id === this.activeTab,\n                'cat-tab-error': tab.error\n              }}\n              active={tab.id === this.activeTab}\n              color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n              variant=\"text\"\n              icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n              iconOnly={tab.iconOnly}\n              iconRight={tab.iconRight}\n              url={tab.url}\n              disabled={tab.deactivated}\n              urlTarget={tab.urlTarget}\n              onCatClick={() => this.click(tab)}\n              nativeAttributes={{ ...tab.nativeAttributes }}\n              nativeContentAttributes={{ 'data-text': tab.label }}\n              data-dropdown-no-close\n            >\n              {tab.label}\n            </cat-button>\n          );\n        })}\n      </Host>\n    );\n  }\n\n  private syncTabs() {\n    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n    this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;\n  }\n\n  private canActivate(tab?: HTMLCatTabElement): tab is HTMLCatTabElement {\n    return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n  }\n\n  private click(tab?: HTMLCatTabElement) {\n    if (this.canActivate(tab)) {\n      tab.click();\n      this.activate(tab);\n    }\n  }\n\n  private activate(tab?: HTMLCatTabElement) {\n    if (this.canActivate(tab)) {\n      this.activeTab = tab.id;\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n */\n@Component({\n  tag: 'cat-tabs',\n  styleUrl: 'cat-tabs.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatTabs {\n  private mutationObserver?: MutationObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() tabs: HTMLCatTabElement[] = [];\n\n  /**\n   * The ID of the active tab.\n   */\n  @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n  /**\n   * The alignment of the tabs.\n   */\n  @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  componentWillLoad(): void {\n    this.syncTabs();\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(\n      mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n    );\n    this.mutationObserver?.observe(this.hostElement, {\n      childList: true,\n      attributes: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  @Watch('activeTab')\n  onActiveTabChange(id: string) {\n    const index = this.tabs.findIndex(tab => tab.id === id);\n    this.catChange.emit({ id, index });\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n      const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);\n      const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n      const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].doFocus();\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Activates the tab with the given id.\n   *\n   * @param id The tab id.\n   */\n  @Method()\n  async setActive(id: string): Promise<void> {\n    this.activate(this.tabs.find(tab => tab.id === id));\n  }\n\n  /**\n   * Activates the tab with the given index.\n   *\n   * @param index The tab index.\n   */\n  @Method()\n  async setActiveIndex(index: number): Promise<void> {\n    this.activate(this.tabs[index]);\n  }\n\n  /**\n   * Emitted when active tab is changed.\n   */\n  @Event() catChange!: EventEmitter<{ id: string; index: number }>;\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <Host>\n        {this.tabs.map((tab: HTMLCatTabElement) => {\n          return (\n            <cat-button\n              buttonId={tab.id}\n              role=\"tab\"\n              part=\"tab\"\n              class={{\n                'cat-tab': true,\n                'cat-tab-active': tab.id === this.activeTab,\n                'cat-tab-error': tab.error\n              }}\n              active={tab.id === this.activeTab}\n              color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n              variant=\"text\"\n              icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n              iconOnly={tab.iconOnly}\n              iconRight={tab.iconRight}\n              url={tab.url}\n              disabled={tab.deactivated}\n              urlTarget={tab.urlTarget}\n              onCatClick={() => this.click(tab)}\n              nativeAttributes={{ ...tab.nativeAttributes }}\n              nativeContentAttributes={{ 'data-text': tab.label }}\n              data-dropdown-no-close\n            >\n              {tab.label}\n            </cat-button>\n          );\n        })}\n      </Host>\n    );\n  }\n\n  private syncTabs() {\n    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n    this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;\n  }\n\n  private canActivate(tab?: HTMLCatTabElement): tab is HTMLCatTabElement {\n    return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n  }\n\n  private click(tab?: HTMLCatTabElement) {\n    if (this.canActivate(tab)) {\n      tab.click();\n      this.activate(tab);\n    }\n  }\n\n  private activate(tab?: HTMLCatTabElement) {\n    if (this.canActivate(tab)) {\n      this.activeTab = tab.id;\n    }\n  }\n}\n"]}

package/dist/collection/components/cat-tabs/cat-tabs.spec.js

@@ -7,7 +7,7 @@ describe('cat-tabs', () => {
             html: `<cat-tabs></cat-tabs>`
         });
         expect(page.root).toEqualLightHtml(`
-      <cat-tabs></cat-tabs>
+      <cat-tabs tabindex="0"></cat-tabs>
     `);
     });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"cat-tabs.spec.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC;;KAElC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatTabs } from './cat-tabs';\n\ndescribe('cat-tabs', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatTabs],\n      html: `<cat-tabs></cat-tabs>`\n    });\n    expect(page.root).toEqualLightHtml(`\n      <cat-tabs></cat-tabs>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"cat-tabs.spec.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC;;KAElC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatTabs } from './cat-tabs';\n\ndescribe('cat-tabs', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatTabs],\n      html: `<cat-tabs></cat-tabs>`\n    });\n    expect(page.root).toEqualLightHtml(`\n      <cat-tabs tabindex=\"0\"></cat-tabs>\n    `);\n  });\n});\n"]}

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

@@ -71,7 +71,8 @@ export class CatTag {
         }
     }
     render() {
-        return (h(Host, { key: '04de7eb41f8c5517c927a416d2d34afd092abed7' }, h("div", { key: 'a459eec9bdb227075df6d9ccfc81508ccd60467d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'f012f015e602b52ea6b57662bf8f9b3789fbc20d', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: '3302bde705d78c59003650af8c85ad415997b2af', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '2f8bbb5696d92268d04b162023fdc37a27d62cde', name: "label" })) || this.label, h("div", { key: '8804dd6eaf4c8057c5318694d856d3c28d63a812', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '682da9fc4cfb49b945eaf296d63f9774df570efa', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '860bca7b5fc8cf0c7c555a5e45ce34312362400e', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '04197f0876dac237f865ba4f5948a444a27f2f2e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: 'b85aa4cd1520f4e477d649f9fd8300eb25fe2d3b', class: "input-inner-wrapper" }, h("input", { key: 'a4a28b1ca647e68970f1a6e3c6d852df7e43d00d', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (h("cat-button", { key: 'e29fdad3d4ad47db287ada8544cf71baa12add40', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && h("cat-icon", { key: '8b443ee821d4dfbdaeec41a945c70d60760ffa42', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: '5f8f1115296726c536849ec4c574e8beaa53b157', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))));
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: 'c30f59f0da021ea37a9b94904da318ff28d9d699' }, h("div", { key: '6f837dcf33c6b726d4d9755b384815552f4b597f', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '78f5ce85bda81da097187483121d23f9779f96c9', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: 'dae093aaa4cc7bb26ff015bf389361fda1fd6d5c', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '9eef396375eaff2e21613a79640bd1692a0a7fe8', name: "label" })) || this.label, h("div", { key: '6045ab7f98162d8d32fb5ef72c515661750aa844', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '1fb2271ffe1ddeb4acac516a2dfde5bf96265e5b', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '2ae27a41f03a9bcf5899064fe482a127221e3c10', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '5b0dacaa15194f59ad7ac76b5435debf7b8bc3fa', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: '9869bd7ec1de2d7ef45cfd747fbccc7b9e1a0558', class: "input-inner-wrapper" }, h("input", { key: '1c61ce7e90f374e7442c888bab489c956d02d774', ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (h("cat-button", { key: '8c61da4726d290f06cb1452ab9f34a2ee291ceac', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && h("cat-icon", { key: 'ef3ba1cc1c2eaec1562fcff5f64d15ae9b8290e1', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: '2f92bb6d804a45328af1efb97750b5ae79b0c0b1', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -146,6 +147,7 @@ export class CatTag {
     }
     static get is() { return "cat-tag"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["cat-tag.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"cat-tag.js","sourceRoot":"","sources":["../../../src/components/cat-tag/cat-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * An input that allows multiple values to be entered as tags.\n *\n * @part input - The native input element.\n * @part label - The native label element.\n */\n@Component({\n  tag: 'cat-tag',\n  styleUrl: 'cat-tag.scss',\n  shadow: true\n})\nexport class CatTag {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap | true;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() tags: string[] = [];\n\n  @State() errorMap?: ErrorMap | true;\n\n  /**\n   * Whether the label need a marker to shown if the select is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the select is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placeholder text to display within the select.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the select.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the select.\n   */\n  @Prop() label = '';\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\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 value is required or must be checked for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string[];\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n   * Pasted values will also be split by those chars.\n   * Defaults to `[' ']`.\n   */\n  @Prop() tagCreationChars: string[] = [' '];\n\n  /**\n   * Whether new tag is added when the input is blurred.\n   */\n  @Prop() addOnBlur = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string[]>;\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  componentWillLoad(): void {\n    this.onErrorsChanged(this.errors, undefined, false);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent): void {\n    const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n    if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n      event.preventDefault();\n      this.addInputValue();\n    } else if (\n      ['Backspace'].includes(event.key) &&\n      this.input?.selectionStart === 0 &&\n      (this.value?.length ?? 0) > 0 &&\n      isInputFocused\n    ) {\n      this.value = this.value?.slice(0, -1) ?? [];\n      this.catChange.emit(this.value);\n    }\n  }\n\n  @Watch('errors')\n  onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(newValue)\n        ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : newValue || undefined;\n      if (update) {\n        this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker?.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n          {this.value?.map(value => (\n            <div class=\"tag-pill\">\n              <span>{value}</span>\n              {!this.disabled && (\n                <cat-button\n                  size=\"xs\"\n                  variant=\"text\"\n                  icon=\"$cat:select-clear\"\n                  iconOnly\n                  a11yLabel={i18n.t('select.deselect')}\n                  onClick={() => this.deselect(value)}\n                  tabIndex={-1}\n                ></cat-button>\n              )}\n            </div>\n          ))}\n          <div class=\"input-inner-wrapper\">\n            <input\n              {...this.nativeAttributes}\n              part=\"input\"\n              id={`tags-${this.id}-input`}\n              class=\"tags-input\"\n              role=\"combobox\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              aria-invalid={this.invalid ? 'true' : undefined}\n              aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              onInput={this.onInput.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n            ></input>\n            {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"$cat:input-close\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n                data-dropdown-no-close\n              ></cat-button>\n            )}\n            {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n          </div>\n        </div>\n        {this.hasHint && (\n          <CatFormHint\n            id={this.id}\n            hint={this.hint}\n            slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n            errorMap={this.errorMap}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    const currentValue = [\n      ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n    ].filter(value => !!value && !this.value?.includes(value));\n    if (currentValue.length > 1) {\n      this.value = [...(this.value ?? []), ...currentValue];\n      this.catChange.emit(this.value);\n      if (this.input) {\n        this.input.value = '';\n      }\n    }\n  }\n\n  private onBlur() {\n    if (this.addOnBlur) {\n      this.addInputValue();\n    }\n  }\n\n  private addInputValue() {\n    const inputValue = this.input?.value.trim();\n    if (inputValue && !this.value?.includes(inputValue)) {\n      this.value = [...(this.value ?? []), inputValue];\n      this.catChange.emit(this.value);\n    }\n    if (this.input) {\n      this.input.value = '';\n    }\n  }\n\n  private clear() {\n    this.value = [];\n    this.catChange.emit(this.value);\n    if (this.input) {\n      this.input.value = '';\n    }\n  }\n\n  private deselect(value: string) {\n    this.value = this.value?.filter(element => element !== value);\n    this.catChange.emit(this.value);\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n\n  private createSplitRegex(delimiters: string[]): RegExp {\n    // Escape special regex characters in the array\n    const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));\n\n    // Add newline characters to the list of delimiters\n    escapedDelimiters.push('\\\\n', '\\\\r');\n\n    // Join the escaped delimiters to create a character class\n    const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n    return new RegExp(regexPattern, 'g');\n  }\n}\n"]}
+{"version":3,"file":"cat-tag.js","sourceRoot":"","sources":["../../../src/components/cat-tag/cat-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * An input that allows multiple values to be entered as tags.\n *\n * @part input - The native input element.\n * @part label - The native label element.\n */\n@Component({\n  tag: 'cat-tag',\n  styleUrl: 'cat-tag.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatTag {\n  private readonly _id = `cat-input-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n  private errorMapSrc?: ErrorMap | true;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() tags: string[] = [];\n\n  @State() errorMap?: ErrorMap | true;\n\n  /**\n   * Whether the label need a marker to shown if the select is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the select is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The placeholder text to display within the select.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the select.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the select.\n   */\n  @Prop() label = '';\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\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 value is required or must be checked for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string[];\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.\n   * Pasted values will also be split by those chars.\n   * Defaults to `[' ']`.\n   */\n  @Prop() tagCreationChars: string[] = [' '];\n\n  /**\n   * Whether new tag is added when the input is blurred.\n   */\n  @Prop() addOnBlur = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string[]>;\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  componentWillLoad(): void {\n    this.onErrorsChanged(this.errors, undefined, false);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent): void {\n    const isInputFocused = this.hostElement.shadowRoot?.activeElement === this.input;\n    if (['Enter', ...this.tagCreationChars].includes(event.key) && isInputFocused) {\n      event.preventDefault();\n      this.addInputValue();\n    } else if (\n      ['Backspace'].includes(event.key) &&\n      this.input?.selectionStart === 0 &&\n      (this.value?.length ?? 0) > 0 &&\n      isInputFocused\n    ) {\n      this.value = this.value?.slice(0, -1) ?? [];\n      this.catChange.emit(this.value);\n    }\n  }\n\n  @Watch('errors')\n  onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(newValue)\n        ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : newValue || undefined;\n      if (update) {\n        this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n      }\n    }\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <Host>\n        <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n          {(this.hasSlottedLabel || this.label) && (\n            <label htmlFor={`tags-${this.id}-input`} part=\"label\">\n              <span class=\"label-wrapper\">\n                {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                <div class=\"label-metadata\">\n                  {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.optional')})\n                    </span>\n                  )}\n                  {this.required && this.requiredMarker?.startsWith('required') && (\n                    <span class=\"label-optional\" aria-hidden=\"true\">\n                      ({i18n.t('input.required')})\n                    </span>\n                  )}\n                </div>\n              </span>\n            </label>\n          )}\n        </div>\n        <div class={{ 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid }}>\n          {this.value?.map(value => (\n            <div class=\"tag-pill\">\n              <span>{value}</span>\n              {!this.disabled && (\n                <cat-button\n                  size=\"xs\"\n                  variant=\"text\"\n                  icon=\"$cat:select-clear\"\n                  iconOnly\n                  a11yLabel={i18n.t('select.deselect')}\n                  onClick={() => this.deselect(value)}\n                  tabIndex={-1}\n                ></cat-button>\n              )}\n            </div>\n          ))}\n          <div class=\"input-inner-wrapper\">\n            <input\n              {...this.nativeAttributes}\n              part=\"input\"\n              id={`tags-${this.id}-input`}\n              class=\"tags-input\"\n              role=\"combobox\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              aria-invalid={this.invalid ? 'true' : undefined}\n              aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              onInput={this.onInput.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n            ></input>\n            {this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"$cat:input-close\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n                data-dropdown-no-close\n              ></cat-button>\n            )}\n            {this.invalid && <cat-icon icon=\"$cat:input-error\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>}\n          </div>\n        </div>\n        {this.hasHint && (\n          <CatFormHint\n            id={this.id}\n            hint={this.hint}\n            slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n            errorMap={this.errorMap}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    const currentValue = [\n      ...new Set(this.input?.value?.split(this.createSplitRegex(this.tagCreationChars)) ?? [])\n    ].filter(value => !!value && !this.value?.includes(value));\n    if (currentValue.length > 1) {\n      this.value = [...(this.value ?? []), ...currentValue];\n      this.catChange.emit(this.value);\n      if (this.input) {\n        this.input.value = '';\n      }\n    }\n  }\n\n  private onBlur() {\n    if (this.addOnBlur) {\n      this.addInputValue();\n    }\n  }\n\n  private addInputValue() {\n    const inputValue = this.input?.value.trim();\n    if (inputValue && !this.value?.includes(inputValue)) {\n      this.value = [...(this.value ?? []), inputValue];\n      this.catChange.emit(this.value);\n    }\n    if (this.input) {\n      this.input.value = '';\n    }\n  }\n\n  private clear() {\n    this.value = [];\n    this.catChange.emit(this.value);\n    if (this.input) {\n      this.input.value = '';\n    }\n  }\n\n  private deselect(value: string) {\n    this.value = this.value?.filter(element => element !== value);\n    this.catChange.emit(this.value);\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n\n  private createSplitRegex(delimiters: string[]): RegExp {\n    // Escape special regex characters in the array\n    const escapedDelimiters = delimiters.map(delimiter => delimiter.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'));\n\n    // Add newline characters to the list of delimiters\n    escapedDelimiters.push('\\\\n', '\\\\r');\n\n    // Join the escaped delimiters to create a character class\n    const regexPattern = `[${escapedDelimiters.join('')}]`;\n\n    return new RegExp(regexPattern, 'g');\n  }\n}\n"]}

package/dist/collection/components/cat-tag/cat-tag.spec.js

@@ -7,7 +7,7 @@ describe('cat-tag', () => {
             html: `<cat-tag></cat-tag>`
         });
         expect(page.root).toEqualHtml(`
-        <cat-tag>
+        <cat-tag tabindex="0">
          <mock:shadow-root>
            <div class="label-container"></div>
            <div class="input-wrapper">

package/dist/collection/components/cat-tag/cat-tag.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-tag.spec.js","sourceRoot":"","sources":["../../../src/components/cat-tag/cat-tag.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,qBAAqB;SAC5B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatTag } from './cat-tag';\n\ndescribe('cat-tag', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatTag],\n      html: `<cat-tag></cat-tag>`\n    });\n    expect(page.root).toEqualHtml(`\n        <cat-tag>\n         <mock:shadow-root>\n           <div class=\"label-container\"></div>\n           <div class=\"input-wrapper\">\n            <div class=\"input-inner-wrapper\">\n             <input class=\"tags-input\" id=\"tags-cat-input-0-input\" part=\"input\" role=\"combobox\">\n            </div>\n           </div>\n         </mock:shadow-root>\n        </cat-tag>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"cat-tag.spec.js","sourceRoot":"","sources":["../../../src/components/cat-tag/cat-tag.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;YACpB,IAAI,EAAE,qBAAqB;SAC5B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CatTag } from './cat-tag';\n\ndescribe('cat-tag', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatTag],\n      html: `<cat-tag></cat-tag>`\n    });\n    expect(page.root).toEqualHtml(`\n        <cat-tag tabindex=\"0\">\n         <mock:shadow-root>\n           <div class=\"label-container\"></div>\n           <div class=\"input-wrapper\">\n            <div class=\"input-inner-wrapper\">\n             <input class=\"tags-input\" id=\"tags-cat-input-0-input\" part=\"input\" role=\"combobox\">\n            </div>\n           </div>\n         </mock:shadow-root>\n        </cat-tag>\n    `);\n  });\n});\n"]}

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

@@ -90,15 +90,16 @@ export class CatTextarea {
         }
     }
     render() {
-        return (h(Host, { key: '5e2569d36f6faec841701fd9acb640737f5be4bd' }, h("div", { key: '8bfd630114a41d5128f546c4596a2fc0de7b0f46', class: {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '7baa83d9d2722e629503623daa7d64f669d9d14b' }, h("div", { key: '7e23d71bea6eb4b3c1f512ce6e6052c4d0c93675', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, h("div", { key: '5d61d594bf5dd54a61d67e567d7f75d10e81fc16', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'ce7a20106b85c6ac1993154bcac3b045ac9db4b7', htmlFor: this.id, part: "label" }, h("span", { key: 'b6a5faa611b0b5fc1d2e4b34cb0b87ef48b76510', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'd6ac0138ad90af2d80933237f1244560b4678c10', name: "label" })) || this.label, h("div", { key: 'a3034e991a35206aaad04a068056a7b25a3ef0d0', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '8231926224217c999493c56656ee360453865ee5', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '666ea1ef5ac684c1ddfa854605afb3f15d1bb31a', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { key: '09b4afa39cb26371d179095c3e703ab5437309d2', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: 'f4640f6761d044ea29810b89604d5d40101427e1', class: "textarea-container" }, h("div", { key: '51bac1b86b0aaa37e2bc80fade34478e0da9f04b', class: {
+            } }, h("div", { key: '51da73044afe3fb0100c921556f4bc60f4823597', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '21efe02e678b15577efbd4e6889ed278e519f6e1', htmlFor: this.id, part: "label" }, h("span", { key: '35e58dc082d073296563ec6473734ec7bb995b5e', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'f32da2b24d1d50b06a7d55d4d15185441feb285a', name: "label" })) || this.label, h("div", { key: 'ed4abb4e4b492130a990fca89699fea9838c758c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '97dfc883e7a8af4d2090bb4b40208e0886585da6', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '9c74951359ccab83ec46bbd868bccefaf1356f6f', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { key: '702c2c4a8238430927882a11490cd5be399bd3f5', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: '3f2aa62a32dd8b775b9826fe8c92129219135dcb', class: "textarea-container" }, h("div", { key: '270d8f0b27b99f7388e17edc88affe7daab15438', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, h("textarea", { key: '5248d353acf90ea7efbbe99bf4faf7d411373189', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '8b3cf0397ff8813be35c6344e079057fd5d1b032', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '9cd285c4aac61a812e8308f3d005d3f95c8c6d97', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, h("textarea", { key: 'a0091c3f756c983d416ee12bf777cf7101c07b48', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '9ff1a0a8b7bf6ae5deb8b489f4426053d5ff54b9', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: 'badc9780d07df9f6645c7f4bbdcfe97610db6741', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -140,6 +141,7 @@ export class CatTextarea {
     }
     static get is() { return "cat-textarea"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["cat-textarea.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"cat-textarea.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport autosize from 'autosize';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @slot hint - Optional hint element to be displayed with the textarea.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The native label element.\n * @part textarea - The native textarea element.\n */\n@Component({\n  tag: 'cat-textarea',\n  styleUrl: 'cat-textarea.scss',\n  shadow: true\n})\nexport class CatTextarea {\n  private readonly _id = `cat-textarea-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private textarea!: HTMLTextAreaElement;\n  private errorMapSrc?: ErrorMap | true;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap | true;\n\n  /**\n   * Whether the label need a marker to shown if the textarea is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Whether the textarea is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the textarea.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the textarea.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Specifies the initial number of lines in the textarea.\n   */\n  @Prop() rows = 3;\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML textarea element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the textarea received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onErrorsChanged(this.errors, undefined, false);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  componentDidLoad(): void {\n    autosize(this.textarea);\n  }\n\n  /**\n   * Programmatically move focus to the textarea. Use this method instead of\n   * `textarea.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.textarea.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the textarea. Use this method instead of\n   * `textarea.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.textarea.blur();\n  }\n\n  /**\n   * Clear the textarea.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n    this.catChange.emit(this.value);\n  }\n\n  @Watch('errors')\n  onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(newValue)\n        ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : newValue || undefined;\n      if (update) {\n        this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'textarea-field': true,\n            'textarea-horizontal': this.horizontal\n          }}\n        >\n          <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n            {(this.hasSlottedLabel || this.label) && (\n              <label htmlFor={this.id} part=\"label\">\n                <span class=\"label-wrapper\">\n                  {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                  <div class=\"label-metadata\">\n                    {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                      <span class=\"label-optional\" aria-hidden=\"true\">\n                        ({i18n.t('input.optional')})\n                      </span>\n                    )}\n                    {this.required && this.requiredMarker?.startsWith('required') && (\n                      <span class=\"label-optional\" aria-hidden=\"true\">\n                        ({i18n.t('input.required')})\n                      </span>\n                    )}\n                    {this.maxLength && (\n                      <div class=\"label-character-count\" aria-hidden=\"true\">\n                        {this.value?.length ?? 0}/{this.maxLength}\n                      </div>\n                    )}\n                  </div>\n                </span>\n              </label>\n            )}\n          </div>\n          <div class=\"textarea-container\">\n            <div\n              class={{\n                'textarea-wrapper': true,\n                'textarea-readonly': this.readonly,\n                'textarea-disabled': this.disabled,\n                'textarea-invalid': this.invalid\n              }}\n            >\n              <textarea\n                {...this.nativeAttributes}\n                part=\"textarea\"\n                ref={el => (this.textarea = el as HTMLTextAreaElement)}\n                id={this.id}\n                disabled={this.disabled}\n                maxlength={this.maxLength}\n                minlength={this.minLength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readonly={this.readonly}\n                required={this.required}\n                rows={this.rows}\n                value={this.value}\n                onInput={this.onInput.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n                onBlur={this.onBlur.bind(this)}\n                aria-invalid={this.invalid ? 'true' : undefined}\n                aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              ></textarea>\n              {this.invalid && (\n                <cat-icon\n                  icon=\"$cat:input-error\"\n                  class=\"icon-suffix cat-text-danger\"\n                  size=\"l\"\n                  onClick={() => this.textarea.focus()}\n                ></cat-icon>\n              )}\n            </div>\n            {this.hasHint && (\n              <CatFormHint\n                id={this.id}\n                hint={this.hint}\n                slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n                errorMap={this.errorMap}\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    this.value = this.textarea.value;\n    this.catChange.emit(this.value);\n    this.showErrorsIfTimeout();\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    if (coerceBoolean(this.errorUpdate)) {\n      this.showErrors();\n    }\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.textarea;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-textarea.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport autosize from 'autosize';\nimport { coerceBoolean, coerceNumber } from '../../utils/coerce';\nimport { CatFormHint, ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Textarea specifies a control that allows user to write text over multiple\n * rows. Used when the expected user input is long. For shorter input, use the\n * input component.\n *\n * @slot hint - Optional hint element to be displayed with the textarea.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The native label element.\n * @part textarea - The native textarea element.\n */\n@Component({\n  tag: 'cat-textarea',\n  styleUrl: 'cat-textarea.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatTextarea {\n  private readonly _id = `cat-textarea-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private textarea!: HTMLTextAreaElement;\n  private errorMapSrc?: ErrorMap | true;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() errorMap?: ErrorMap | true;\n\n  /**\n   * Whether the label need a marker to shown if the textarea is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = false;\n\n  /**\n   * Whether the textarea is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the textarea.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label for the textarea.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Specifies the initial number of lines in the textarea.\n   */\n  @Prop() rows = 3;\n\n  /**\n   * The initial value of the control.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML textarea element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  /**\n   * Emitted when the textarea received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the textarea loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onErrorsChanged(this.errors, undefined, false);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  componentDidLoad(): void {\n    autosize(this.textarea);\n  }\n\n  /**\n   * Programmatically move focus to the textarea. Use this method instead of\n   * `textarea.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.textarea.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the textarea. Use this method instead of\n   * `textarea.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.textarea.blur();\n  }\n\n  /**\n   * Clear the textarea.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n    this.catChange.emit(this.value);\n  }\n\n  @Watch('errors')\n  onErrorsChanged(newValue?: boolean | string[] | ErrorMap, _oldValue?: unknown, update: boolean = true) {\n    if (!coerceBoolean(this.errorUpdate)) {\n      this.errorMap = undefined;\n    } else {\n      this.errorMapSrc = Array.isArray(newValue)\n        ? (newValue as string[]).reduce((acc, err) => ({ ...acc, [err]: undefined }), {})\n        : newValue || undefined;\n      if (update) {\n        this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();\n      }\n    }\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <Host>\n        <div\n          class={{\n            'textarea-field': true,\n            'textarea-horizontal': this.horizontal\n          }}\n        >\n          <div class={{ 'label-container': true, hidden: this.labelHidden }}>\n            {(this.hasSlottedLabel || this.label) && (\n              <label htmlFor={this.id} part=\"label\">\n                <span class=\"label-wrapper\">\n                  {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n                  <div class=\"label-metadata\">\n                    {!this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (\n                      <span class=\"label-optional\" aria-hidden=\"true\">\n                        ({i18n.t('input.optional')})\n                      </span>\n                    )}\n                    {this.required && this.requiredMarker?.startsWith('required') && (\n                      <span class=\"label-optional\" aria-hidden=\"true\">\n                        ({i18n.t('input.required')})\n                      </span>\n                    )}\n                    {this.maxLength && (\n                      <div class=\"label-character-count\" aria-hidden=\"true\">\n                        {this.value?.length ?? 0}/{this.maxLength}\n                      </div>\n                    )}\n                  </div>\n                </span>\n              </label>\n            )}\n          </div>\n          <div class=\"textarea-container\">\n            <div\n              class={{\n                'textarea-wrapper': true,\n                'textarea-readonly': this.readonly,\n                'textarea-disabled': this.disabled,\n                'textarea-invalid': this.invalid\n              }}\n            >\n              <textarea\n                {...this.nativeAttributes}\n                part=\"textarea\"\n                ref={el => (this.textarea = el as HTMLTextAreaElement)}\n                id={this.id}\n                disabled={this.disabled}\n                maxlength={this.maxLength}\n                minlength={this.minLength}\n                name={this.name}\n                placeholder={this.placeholder}\n                readonly={this.readonly}\n                required={this.required}\n                rows={this.rows}\n                value={this.value}\n                onInput={this.onInput.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n                onBlur={this.onBlur.bind(this)}\n                aria-invalid={this.invalid ? 'true' : undefined}\n                aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n              ></textarea>\n              {this.invalid && (\n                <cat-icon\n                  icon=\"$cat:input-error\"\n                  class=\"icon-suffix cat-text-danger\"\n                  size=\"l\"\n                  onClick={() => this.textarea.focus()}\n                ></cat-icon>\n              )}\n            </div>\n            {this.hasHint && (\n              <CatFormHint\n                id={this.id}\n                hint={this.hint}\n                slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>}\n                errorMap={this.errorMap}\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint || this.invalid;\n  }\n\n  private get invalid() {\n    return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;\n  }\n\n  private onInput() {\n    this.value = this.textarea.value;\n    this.catChange.emit(this.value);\n    this.showErrorsIfTimeout();\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    if (coerceBoolean(this.errorUpdate)) {\n      this.showErrors();\n    }\n  }\n\n  private showErrors() {\n    this.errorMap = this.errorMapSrc;\n  }\n\n  private errorUpdateTimeoutId?: number;\n  private showErrorsIfTimeout() {\n    const errorUpdate = coerceNumber(this.errorUpdate, null);\n    if (errorUpdate !== null) {\n      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n      this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);\n      return true;\n    }\n    return false;\n  }\n\n  private showErrorsIfNoFocus() {\n    const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.textarea;\n    if (!hasFocus) {\n      this.showErrors();\n    }\n  }\n}\n"]}

package/dist/collection/components/cat-textarea/cat-textarea.spec.js

@@ -8,7 +8,7 @@ describe('cat-textarea', () => {
             html: `<cat-textarea label="Label"></cat-textarea>`
         });
         expect(page.root).toEqualLightHtml(`
-      <cat-textarea label="Label"></cat-textarea>
+      <cat-textarea label="Label" tabindex="0"></cat-textarea>
     `);
     });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"cat-textarea.spec.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.spec.tsx"],"names":[],"mappings":"AAAA,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,6CAA6C;SACpD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC;;KAElC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["jest.mock('../cat-i18n/cat-i18n-registry');\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { CatTextarea } from './cat-textarea';\n\ndescribe('cat-textarea', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatTextarea],\n      html: `<cat-textarea label=\"Label\"></cat-textarea>`\n    });\n    expect(page.root).toEqualLightHtml(`\n      <cat-textarea label=\"Label\"></cat-textarea>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"cat-textarea.spec.js","sourceRoot":"","sources":["../../../src/components/cat-textarea/cat-textarea.spec.tsx"],"names":[],"mappings":"AAAA,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,6CAA6C;SACpD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC;;KAElC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["jest.mock('../cat-i18n/cat-i18n-registry');\n\nimport { newSpecPage } from '@stencil/core/testing';\nimport { CatTextarea } from './cat-textarea';\n\ndescribe('cat-textarea', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CatTextarea],\n      html: `<cat-textarea label=\"Label\"></cat-textarea>`\n    });\n    expect(page.root).toEqualLightHtml(`\n      <cat-textarea label=\"Label\" tabindex=\"0\"></cat-textarea>\n    `);\n  });\n});\n"]}

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

@@ -25,6 +25,7 @@
 
 .cat-time-addon {
   margin-left: -1px;
+  display: flex;
 }
 
 nav {

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

@@ -141,14 +141,15 @@ export class CatTime {
         this.input?.clear();
     }
     render() {
-        return (h(Host, { key: 'b71fce8999b68ab9372e79cff859e00c3c3b5ae3' }, h("cat-input", { key: 'cb824f43ba631809d3229e57fe70ad3d89d25e25', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: '245d373d89a8b03d3bbc772bd35e260c35cc3c26', slot: "label" }, this.hasSlottedLabel && h("slot", { key: 'b9717682f61035f64a7230fe775267f723f8ecb2', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '747a7a112450391f3ba970cb7faefd904877e1a5', class: "label-aria" }, " (HH:mm)")), h("div", { key: '15c380b767ef28aade17e1ac21a2134677060772', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '63d2eef4a5e69c15e23233f57912b4a20e869470', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: '581392dc8dc6ce127fdafc75676f6c9ab46925fb', slot: "addon", placement: this.placement }, h("cat-button", { key: 'f563afde31e991f8f1533ad0d3a50ee34eee81b4', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: 'baa0539c318511783cd5c4d85d39b310df7016d4', slot: "content", class: "cat-nav" }, h("ul", { key: '10af19bdc805117f96ab2d67ef76065c0cc02bff' }, this.timeArray().map(time => {
+        this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
+        return (h(Host, { key: '9f7564ec41354b98ec0779dde23198a18689f1a3' }, h("cat-input", { key: '776a76b393d92278a5afd389602c767c319c9238', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: '016bab3b23282fa4a5aeb764e4b80b337d2f9cca', slot: "label" }, this.hasSlottedLabel && h("slot", { key: '233b40757fe0c822716b87c23538b5b02371d9d2', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '6ae7d40f0fbf4cf729e29ad124df6f3cdd8b22f8', class: "label-aria" }, " (HH:mm)")), h("div", { key: '7aaab9d8ee9e06a8a68a9f94e664ba12422a18c5', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: '9130d436847a0fb250b28d5630e7c3a403ec494a', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: '10948ba2be73ffcde722fb22c5a4b9f3891b329d', slot: "addon", placement: this.placement }, h("cat-button", { key: '3e4d74066110ca2b7141d809a1a276f78d0382a1', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: '27a2a17080a09e8148b5cae0af36d03735b8afcf', slot: "content", class: "cat-nav" }, h("ul", { key: '8181974cae0ed2c3cc99c43d51f3ccbc5e188592' }, this.timeArray().map(time => {
             const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (h("li", null, h("cat-button", { class: {
                     'cat-nav-item': true,
                     'time-disabled': disabled
                 }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
-        }))))), this.hasSlottedHint && (h("span", { key: 'f66debdaced2d5c33af41d7c435f67c4831e98a4', slot: "hint" }, h("slot", { key: 'f66d541b07a9b822a414447ff7888f3d4df0e63c', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (h("span", { key: 'cd316e5045ad3298aac0e4056c865f7bd6b1dcf3', slot: "hint" }, h("slot", { key: '7fa90c7b83032013bfc9d1626bc8b53072e9aa85', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -211,6 +212,7 @@ export class CatTime {
     }
     static get is() { return "cat-time"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["cat-time.scss"]

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

@@ -1 +1 @@
-{"version":3,"file":"cat-time.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { formatIso, getLocale } from './cat-time-locale';\nimport { clampTime, isAfter, isBefore } from './cat-time-math';\n\n/**\n * A time input component to select a time in a dropdown.\n */\n@Component({\n  tag: 'cat-time',\n  styleUrl: 'cat-time.scss',\n  shadow: true\n})\nexport class CatTime {\n  private readonly language = i18n.getLocale();\n  private readonly locale = getLocale(this.language);\n  private input?: HTMLCatInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() selectionTime: Date | null = null;\n\n  @State() isAm = true;\n\n  @State() valueChangedBySelection = false;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = 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   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\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 time value given in HH:mm format.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value given in HH:mm format.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\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   * The value of the control given in HH:mm format\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-end';\n\n  /**\n   * The step size for times in minutes.\n   */\n  @Prop() step = 30;\n\n  @Watch('min')\n  onMinChanged(min?: string, oldMin?: string) {\n    if (min !== oldMin) {\n      this.reclamp('min', min);\n    }\n  }\n\n  @Watch('max')\n  onMaxChanged(max?: string, oldMax?: string) {\n    if (max !== oldMax) {\n      this.reclamp('max', max);\n    }\n  }\n\n  @Watch('value')\n  onValueChanged(value: string, oldValue: string) {\n    if (this.valueChangedBySelection) {\n      this.valueChangedBySelection = false;\n    } else if (value !== oldValue) {\n      this.set12hFormat();\n      this.syncValue(value ?? '');\n    }\n  }\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\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  componentWillLoad() {\n    this.set12hFormat();\n    this.syncValue(this.value ?? '');\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  componentDidLoad() {\n    this.input?.mask({\n      time: true,\n      timeFormat: this.locale.timeFormat,\n      timePattern: ['h', 'm']\n    });\n  }\n\n  @Listen('catOpen')\n  onOpen() {\n    const query = (selector: string) => this.hostElement.shadowRoot?.querySelector<HTMLCatButtonElement>(selector);\n    const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);\n    const elem1 = query(`[data-time=\"${formatIso(time)}\"]`);\n    time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);\n    const elem2 = query(`[data-time=\"${formatIso(time)}\"]`);\n    setTimeout(() => {\n      (elem2 ?? elem1)?.doFocus();\n      (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);\n    }); // not entirely sure why this is necessary\n  }\n\n  /**\n   * Select a time in the picker.\n   *\n   * @param date The time to select.\n   */\n  @Method()\n  async select(date: Date | null): Promise<void> {\n    const oldValue = this.value;\n    let newValue = this.value;\n    if (!date) {\n      this.selectionTime = null;\n      newValue = undefined;\n    } else {\n      const time = clampTime(this.min ?? null, date, this.max ?? null);\n      this.isAm = this.format(time).toLowerCase().includes('am');\n      this.selectionTime = time;\n      newValue = formatIso(time);\n    }\n    // we need to set the input explicitly to sync the input even without a\n    // rerender (if the value is not changed)\n    if (this.input) {\n      this.input.value = this.format(this.selectionTime, false);\n    }\n    if (oldValue !== newValue) {\n      this.valueChangedBySelection = true;\n      this.value = newValue;\n      this.catChange.emit(this.value);\n    } else {\n      this.valueChangedBySelection = false;\n    }\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input?.doBlur();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.input?.clear();\n  }\n\n  render() {\n    return (\n      <Host>\n        <cat-input\n          class=\"cat-time-input\"\n          ref={el => (this.input = el as HTMLCatInputElement)}\n          requiredMarker={this.requiredMarker}\n          horizontal={this.horizontal}\n          autoComplete={this.autoComplete}\n          clearable={this.clearable}\n          disabled={this.disabled}\n          hint={this.hint}\n          icon={this.icon}\n          iconRight={this.iconRight}\n          identifier={this.identifier}\n          label={this.label}\n          labelHidden={this.labelHidden}\n          name={this.name}\n          placeholder={this.placeholder}\n          textPrefix={this.textPrefix}\n          textSuffix={this.textSuffix}\n          readonly={this.readonly}\n          required={this.required}\n          value={this.format(this.selectionTime, false)}\n          errors={this.errors}\n          errorUpdate={this.errorUpdate}\n          nativeAttributes={this.nativeAttributes}\n          onCatFocus={e => this.catFocus.emit(e.detail)}\n          onCatBlur={e => this.onInputBlur(e.detail)}\n        >\n          <span slot=\"label\">\n            {this.hasSlottedLabel && <slot name=\"label\"></slot>}\n            {!this.hasSlottedLabel && this.label}\n            <span class=\"label-aria\"> (HH:mm)</span>\n          </span>\n          <div slot=\"addon\" class=\"cat-time-addon\">\n            {this.locale.timeFormat === '12' && (\n              <cat-button\n                class=\"cat-time-format\"\n                disabled={this.disabled || this.readonly}\n                onCatClick={() => this.toggleAm()}\n              >\n                {this.isAm ? 'AM' : 'PM'}\n              </cat-button>\n            )}\n            <cat-dropdown slot=\"addon\" placement={this.placement}>\n              <cat-button\n                slot=\"trigger\"\n                class=\"cat-time-toggle\"\n                disabled={this.disabled || this.readonly}\n                icon=\"$cat:timepicker-clock\"\n                iconOnly\n                a11yLabel={\n                  this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose\n                }\n              ></cat-button>\n              <nav slot=\"content\" class=\"cat-nav\">\n                <ul>\n                  {this.timeArray().map(time => {\n                    const isoTime = formatIso(time);\n                    const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);\n                    return (\n                      <li>\n                        <cat-button\n                          class={{\n                            'cat-nav-item': true,\n                            'time-disabled': disabled\n                          }}\n                          disabled={disabled}\n                          active={isoTime === this.value}\n                          color={isoTime === this.value ? 'primary' : 'secondary'}\n                          variant={isoTime === this.value ? 'filled' : 'outlined'}\n                          onCatClick={() => this.select(time)}\n                          data-time={isoTime}\n                        >\n                          {this.format(time)}\n                        </cat-button>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </nav>\n            </cat-dropdown>\n          </div>\n          {this.hasSlottedHint && (\n            <span slot=\"hint\">\n              <slot name=\"hint\"></slot>\n            </span>\n          )}\n        </cat-input>\n      </Host>\n    );\n  }\n\n  private timeArray() {\n    const result = [];\n    const start = new Date(2000, 5, 1, 0, 0, 0);\n    let time = new Date(start.getTime());\n    while (time.getDate() === start.getDate()) {\n      result.push(time);\n      time = new Date(time.getTime() + this.step * 60000);\n    }\n    return result;\n  }\n\n  private syncValue(value: string) {\n    const [, hh, mm] = value.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n    if (hh === undefined || mm === undefined) {\n      this.select(null);\n      return;\n    }\n\n    this.select(\n      this.locale.timeFormat === '24'\n        ? new Date(2000, 5, 1, hh, mm, 0)\n        : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0)\n    );\n  }\n\n  private set12hFormat() {\n    const [, hh] = this.value?.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n    if (this.locale.timeFormat === '12') {\n      this.isAm = hh === 0 || hh < 12;\n    }\n  }\n\n  private toggleAm() {\n    if (this.selectionTime) {\n      this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));\n    } else {\n      this.isAm = !this.isAm;\n    }\n  }\n\n  private onInputBlur(e: FocusEvent) {\n    this.syncValue(this.input?.value ?? '');\n    this.catBlur.emit(e);\n  }\n\n  private format(date: Date | null, includeAmPm = true) {\n    const str = date\n      ? new Intl.DateTimeFormat(this.language, {\n          hour: '2-digit',\n          minute: '2-digit'\n        }).format(date)\n      : '';\n    return includeAmPm ? str : str.replace(/\\s?(am|pm)/i, '');\n  }\n\n  private reclamp(mode: 'min' | 'max', limit: string | undefined) {\n    if (!this.value) return;\n    const min = (mode === 'min' ? limit : this.min) ?? null;\n    const max = (mode === 'max' ? limit : this.max) ?? null;\n    const [match, hh, mm] = this.value.match(/(\\d{2}):(\\d{2})/) ?? [];\n    const newValue = match ? formatIso(clampTime(min, new Date(2000, 5, 1, Number(hh), Number(mm)), max)) : undefined;\n    if (this.value !== newValue) {\n      this.syncValue(newValue ?? '');\n      this.catChange.emit(newValue);\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-time.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { formatIso, getLocale } from './cat-time-locale';\nimport { clampTime, isAfter, isBefore } from './cat-time-math';\n\n/**\n * A time input component to select a time in a dropdown.\n */\n@Component({\n  tag: 'cat-time',\n  styleUrl: 'cat-time.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatTime {\n  private readonly language = i18n.getLocale();\n  private readonly locale = getLocale(this.language);\n  private input?: HTMLCatInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  @State() selectionTime: Date | null = null;\n\n  @State() isAm = true;\n\n  @State() valueChangedBySelection = false;\n\n  /**\n   * Whether the label need a marker to shown if the input is required or optional.\n   */\n  @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n  /**\n   * Whether the label is on top or left.\n   */\n  @Prop() horizontal = 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   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\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 time value given in HH:mm format.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value given in HH:mm format.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name?: string;\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   * The value of the control given in HH:mm format\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The validation errors for this input. Will render a hint under the input\n   * with the translated error message(s) `error.${key}`. If an object is\n   * passed, the keys will be used as error keys and the values translation\n   * parameters.\n   * If the value is `true`, the input will be marked as invalid without any\n   * hints under the input.\n   */\n  @Prop() errors?: boolean | string[] | ErrorMap;\n\n  /**\n   * Fine-grained control over when the errors are shown. Can be `false` to\n   * never show errors, `true` to show errors on blur, or a number to show\n   * errors change with the given delay in milliseconds or immediately on blur.\n   */\n  @Prop() errorUpdate: boolean | number = 0;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-end';\n\n  /**\n   * The step size for times in minutes.\n   */\n  @Prop() step = 30;\n\n  @Watch('min')\n  onMinChanged(min?: string, oldMin?: string) {\n    if (min !== oldMin) {\n      this.reclamp('min', min);\n    }\n  }\n\n  @Watch('max')\n  onMaxChanged(max?: string, oldMax?: string) {\n    if (max !== oldMax) {\n      this.reclamp('max', max);\n    }\n  }\n\n  @Watch('value')\n  onValueChanged(value: string, oldValue: string) {\n    if (this.valueChangedBySelection) {\n      this.valueChangedBySelection = false;\n    } else if (value !== oldValue) {\n      this.set12hFormat();\n      this.syncValue(value ?? '');\n    }\n  }\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\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  componentWillLoad() {\n    this.set12hFormat();\n    this.syncValue(this.value ?? '');\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  componentDidLoad() {\n    this.input?.mask({\n      time: true,\n      timeFormat: this.locale.timeFormat,\n      timePattern: ['h', 'm']\n    });\n  }\n\n  @Listen('catOpen')\n  onOpen() {\n    const query = (selector: string) => this.hostElement.shadowRoot?.querySelector<HTMLCatButtonElement>(selector);\n    const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);\n    const elem1 = query(`[data-time=\"${formatIso(time)}\"]`);\n    time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);\n    const elem2 = query(`[data-time=\"${formatIso(time)}\"]`);\n    setTimeout(() => {\n      (elem2 ?? elem1)?.doFocus();\n      (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);\n    }); // not entirely sure why this is necessary\n  }\n\n  /**\n   * Select a time in the picker.\n   *\n   * @param date The time to select.\n   */\n  @Method()\n  async select(date: Date | null): Promise<void> {\n    const oldValue = this.value;\n    let newValue = this.value;\n    if (!date) {\n      this.selectionTime = null;\n      newValue = undefined;\n    } else {\n      const time = clampTime(this.min ?? null, date, this.max ?? null);\n      this.isAm = this.format(time).toLowerCase().includes('am');\n      this.selectionTime = time;\n      newValue = formatIso(time);\n    }\n    // we need to set the input explicitly to sync the input even without a\n    // rerender (if the value is not changed)\n    if (this.input) {\n      this.input.value = this.format(this.selectionTime, false);\n    }\n    if (oldValue !== newValue) {\n      this.valueChangedBySelection = true;\n      this.value = newValue;\n      this.catChange.emit(this.value);\n    } else {\n      this.valueChangedBySelection = false;\n    }\n  }\n\n  /**\n   * Programmatically move focus to the input. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the input. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input?.doBlur();\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.input?.clear();\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <Host>\n        <cat-input\n          class=\"cat-time-input\"\n          ref={el => (this.input = el as HTMLCatInputElement)}\n          requiredMarker={this.requiredMarker}\n          horizontal={this.horizontal}\n          autoComplete={this.autoComplete}\n          clearable={this.clearable}\n          disabled={this.disabled}\n          hint={this.hint}\n          icon={this.icon}\n          iconRight={this.iconRight}\n          identifier={this.identifier}\n          label={this.label}\n          labelHidden={this.labelHidden}\n          name={this.name}\n          placeholder={this.placeholder}\n          textPrefix={this.textPrefix}\n          textSuffix={this.textSuffix}\n          readonly={this.readonly}\n          required={this.required}\n          value={this.format(this.selectionTime, false)}\n          errors={this.errors}\n          errorUpdate={this.errorUpdate}\n          nativeAttributes={this.nativeAttributes}\n          onCatFocus={e => this.catFocus.emit(e.detail)}\n          onCatBlur={e => this.onInputBlur(e.detail)}\n        >\n          <span slot=\"label\">\n            {this.hasSlottedLabel && <slot name=\"label\"></slot>}\n            {!this.hasSlottedLabel && this.label}\n            <span class=\"label-aria\"> (HH:mm)</span>\n          </span>\n          <div slot=\"addon\" class=\"cat-time-addon\">\n            {this.locale.timeFormat === '12' && (\n              <cat-button\n                class=\"cat-time-format\"\n                disabled={this.disabled || this.readonly}\n                onCatClick={() => this.toggleAm()}\n              >\n                {this.isAm ? 'AM' : 'PM'}\n              </cat-button>\n            )}\n            <cat-dropdown slot=\"addon\" placement={this.placement}>\n              <cat-button\n                slot=\"trigger\"\n                class=\"cat-time-toggle\"\n                disabled={this.disabled || this.readonly}\n                icon=\"$cat:timepicker-clock\"\n                iconOnly\n                a11yLabel={\n                  this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose\n                }\n              ></cat-button>\n              <nav slot=\"content\" class=\"cat-nav\">\n                <ul>\n                  {this.timeArray().map(time => {\n                    const isoTime = formatIso(time);\n                    const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);\n                    return (\n                      <li>\n                        <cat-button\n                          class={{\n                            'cat-nav-item': true,\n                            'time-disabled': disabled\n                          }}\n                          disabled={disabled}\n                          active={isoTime === this.value}\n                          color={isoTime === this.value ? 'primary' : 'secondary'}\n                          variant={isoTime === this.value ? 'filled' : 'outlined'}\n                          onCatClick={() => this.select(time)}\n                          data-time={isoTime}\n                        >\n                          {this.format(time)}\n                        </cat-button>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </nav>\n            </cat-dropdown>\n          </div>\n          {this.hasSlottedHint && (\n            <span slot=\"hint\">\n              <slot name=\"hint\"></slot>\n            </span>\n          )}\n        </cat-input>\n      </Host>\n    );\n  }\n\n  private timeArray() {\n    const result = [];\n    const start = new Date(2000, 5, 1, 0, 0, 0);\n    let time = new Date(start.getTime());\n    while (time.getDate() === start.getDate()) {\n      result.push(time);\n      time = new Date(time.getTime() + this.step * 60000);\n    }\n    return result;\n  }\n\n  private syncValue(value: string) {\n    const [, hh, mm] = value.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n    if (hh === undefined || mm === undefined) {\n      this.select(null);\n      return;\n    }\n\n    this.select(\n      this.locale.timeFormat === '24'\n        ? new Date(2000, 5, 1, hh, mm, 0)\n        : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0)\n    );\n  }\n\n  private set12hFormat() {\n    const [, hh] = this.value?.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n    if (this.locale.timeFormat === '12') {\n      this.isAm = hh === 0 || hh < 12;\n    }\n  }\n\n  private toggleAm() {\n    if (this.selectionTime) {\n      this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));\n    } else {\n      this.isAm = !this.isAm;\n    }\n  }\n\n  private onInputBlur(e: FocusEvent) {\n    this.syncValue(this.input?.value ?? '');\n    this.catBlur.emit(e);\n  }\n\n  private format(date: Date | null, includeAmPm = true) {\n    const str = date\n      ? new Intl.DateTimeFormat(this.language, {\n          hour: '2-digit',\n          minute: '2-digit'\n        }).format(date)\n      : '';\n    return includeAmPm ? str : str.replace(/\\s?(am|pm)/i, '');\n  }\n\n  private reclamp(mode: 'min' | 'max', limit: string | undefined) {\n    if (!this.value) return;\n    const min = (mode === 'min' ? limit : this.min) ?? null;\n    const max = (mode === 'max' ? limit : this.max) ?? null;\n    const [match, hh, mm] = this.value.match(/(\\d{2}):(\\d{2})/) ?? [];\n    const newValue = match ? formatIso(clampTime(min, new Date(2000, 5, 1, Number(hh), Number(mm)), max)) : undefined;\n    if (this.value !== newValue) {\n      this.syncValue(newValue ?? '');\n      this.catChange.emit(newValue);\n    }\n  }\n}\n"]}