@haiilo/catalyst 10.30.2 → 10.31.0

package/dist/components/cat-radio.js

@@ -28,6 +28,7 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class CatRadio extends HTMLE
         this.labelLeft = false;
         this.alignment = 'top';
         this.nativeAttributes = undefined;
+        this.testId = undefined;
     }
     get id() {
         return this.identifier || this._id;
@@ -55,13 +56,13 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class CatRadio extends HTMLE
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '875be66c1a340d478bb55b15822415df919591ad' }, h("label", { key: 'dc4577b45f79f373d621b83a83c09d214cd01251', htmlFor: this.id, class: {
+        return (h(Host, { key: 'ca329dab3b08cf59911216e6d1d89e931d4c6836' }, h("label", { key: '0fae08dcf9b6017f1052342f22989a9218437a82', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '5c9bc1aa0f3746f29a4dbf219e241b6c1779a5c7', class: "radio" }, h("input", { key: 'bb633c685be46657acae7a7376069b7a95de7401', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'd6863f415ce0999c31276e8dc6e05b3ed7298193', class: "circle" })), h("span", { key: 'c82183168cd245b781f2a4273c38ef20247d10c1', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'd5a556eff95f4471371c6162a0b101c1fb82e0cc', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'a236fefd50ea65e63643e5747a72a1f0b0dfbbb2', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '77ae0d9af2ff86becdb0b3a487c37689fe63af66', class: "circle-placeholder" }), h(CatFormHint, { key: '5e90f290fe70136ee19fe287db749abc8e7ec024', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'eed2cf5a6e64d64770466bbfcd5fd0f6e7e329d9', class: "radio" }, h("input", { key: '02a288466717c319419f94e2f9607ab63575e9d5', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'f75aa8f50e723b8aa90b60001190638d3d56234a', class: "circle" })), h("span", { key: '52de52cc932bb531440862a04ede38cdf2b29a3a', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '3c66d88d6517721590a342001258b5375f274714', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'b86904829302d22f22ce51f42bd147504b6e387f', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'dcca2f05ea10d9cbf731c7b59f82e33916014327', class: "circle-placeholder" }), h(CatFormHint, { key: 'e7b29ec3c4675b1e077fc783fe90780b5794f78a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -92,6 +93,7 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class CatRadio extends HTMLE
         "labelLeft": [4, "label-left"],
         "alignment": [1],
         "nativeAttributes": [16],
+        "testId": [1, "test-id"],
         "hasSlottedLabel": [32],
         "hasSlottedHint": [32],
         "doFocus": [64],

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

@@ -1 +1 @@
-{"file":"cat-radio.js","mappings":"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","names":["CatRadio"],"sources":["src/components/cat-radio/cat-radio.scss?tag=cat-radio&encapsulation=shadow","src/components/cat-radio/cat-radio.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$radio-width: 1.25rem;\n$radio-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\n.radio {\n  display: flex;\n  position: relative;\n  align-self: flex-start;\n}\n\n.circle-placeholder {\n  width: calc($radio-width + 1px);\n  flex-shrink: 0;\n}\n\n.circle {\n  position: absolute;\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: cat-token('color.theme.primary.bg');\n  border-radius: 10rem;\n  top: calc(50% - 0.375rem);\n  left: calc(50% - 0.375rem);\n  visibility: hidden;\n  pointer-events: none;\n}\n\ninput {\n  margin: 0;\n  width: $radio-width;\n  height: $radio-height;\n  appearance: none;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.dark');\n  border-radius: 10rem;\n  cursor: inherit;\n\n  &:checked {\n    border-color: cat-token('color.theme.primary.bg');\n\n    + .circle {\n      visibility: visible;\n    }\n  }\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n:host(.cat-error) {\n  input {\n    border-color: cat-token('color.theme.danger.bg');\n  }\n\n  .circle {\n    background-color: cat-token('color.theme.danger.bg');\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n\n  input {\n    background-color: cat-token('color.ui.background.muted');\n\n    &:checked {\n      border-color: cat-token('color.ui.border.dark');\n    }\n  }\n\n  .circle {\n    background-color: cat-token('color.ui.border.dark');\n  }\n}\n\n.align-center .radio {\n  align-self: center;\n}\n\n.align-end .radio {\n  align-self: flex-end;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatRadio {\n  private readonly _id = `cat-radio-${++nextUniqueId}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value: any = '';\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the radio component.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * The alignment of the checkbox.\n   */\n  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string>;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  /**\n   * Programmatically move focus to the radio button. 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.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the radio button. Use this method\n   * instead of `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{\n            'is-hidden': this.labelHidden,\n            'is-disabled': this.disabled,\n            'label-left': this.labelLeft,\n            'align-center': this.alignment === 'center',\n            'align-end': this.alignment === 'bottom'\n          }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              {...this.nativeAttributes}\n              part=\"input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.identifier || this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n              aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"circle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = true;\n    this.catChange.emit(this.value);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-radio.js","mappings":"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","names":["CatRadio"],"sources":["src/components/cat-radio/cat-radio.scss?tag=cat-radio&encapsulation=shadow","src/components/cat-radio/cat-radio.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$radio-width: 1.25rem;\n$radio-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  cursor: pointer;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n}\n\n.radio {\n  display: flex;\n  position: relative;\n  align-self: flex-start;\n}\n\n.circle-placeholder {\n  width: calc($radio-width + 1px);\n  flex-shrink: 0;\n}\n\n.circle {\n  position: absolute;\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: cat-token('color.theme.primary.bg');\n  border-radius: 10rem;\n  top: calc(50% - 0.375rem);\n  left: calc(50% - 0.375rem);\n  visibility: hidden;\n  pointer-events: none;\n}\n\ninput {\n  margin: 0;\n  width: $radio-width;\n  height: $radio-height;\n  appearance: none;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.dark');\n  border-radius: 10rem;\n  cursor: inherit;\n\n  &:checked {\n    border-color: cat-token('color.theme.primary.bg');\n\n    + .circle {\n      visibility: visible;\n    }\n  }\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n:host(.cat-error) {\n  input {\n    border-color: cat-token('color.theme.danger.bg');\n  }\n\n  .circle {\n    background-color: cat-token('color.theme.danger.bg');\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n\n  input {\n    background-color: cat-token('color.ui.background.muted');\n\n    &:checked {\n      border-color: cat-token('color.ui.border.dark');\n    }\n  }\n\n  .circle {\n    background-color: cat-token('color.ui.border.dark');\n  }\n}\n\n.align-center .radio {\n  align-self: center;\n}\n\n.align-end .radio {\n  align-self: flex-end;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatRadio {\n  private readonly _id = `cat-radio-${++nextUniqueId}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value: any = '';\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the radio component.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * The alignment of the checkbox.\n   */\n  @Prop() alignment: 'center' | 'top' | 'bottom' = 'top';\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * A unique identifier for the underlying native element that is used for\n   * testing purposes. The attribute is added as `data-test` attribute and acts\n   * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n   */\n  @Prop() testId?: string;\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string>;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n  }\n\n  /**\n   * Programmatically move focus to the radio button. 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.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the radio button. Use this method\n   * instead of `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{\n            'is-hidden': this.labelHidden,\n            'is-disabled': this.disabled,\n            'label-left': this.labelLeft,\n            'align-center': this.alignment === 'center',\n            'align-end': this.alignment === 'bottom'\n          }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              data-test={this.testId}\n              {...this.nativeAttributes}\n              part=\"input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.identifier || this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n              aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"circle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = true;\n    this.catChange.emit(this.value);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}

package/dist/components/cat-select2.js

@@ -372,6 +372,7 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
         this.errors = undefined;
         this.errorUpdate = 0;
         this.nativeAttributes = undefined;
+        this.testId = undefined;
     }
     get id() {
         return this.identifier || this._id;
@@ -637,18 +638,18 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '1ecf402adc273d133bfe829aea9fc28c6f63bc79' }, h("div", { key: '5c209d893e31472fabda8dc0aab1294693ba4b0b', class: {
+        return (h(Host, { key: '4ffaec1ec7c59635d3e923912e5bb5b554661973' }, h("div", { key: 'ad9ad59ff47ab4fe9c9485da344b0be8f030f824', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal,
                 'select-multiple': this.multiple
-            } }, h("div", { key: '51755c54effe1bd8216e656bc95f6bf57814219a', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'e4835aa21b0bde58f40e9130122826e6ade1e739', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '8bdbd5c021b0c4fd864cc7b8d84e0230707cd016', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6e7ad3025b1cee315cf10c85e907cca128ec3922', name: "label" })) || this.label, h("div", { key: '1536c12184aec8b8825d24a0635bb08baa976b6d', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f90e3b62becfab3e586718ef201f9596e78c820b', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'db0bfd7582529e57fb18266f5014a73c92584c84', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'ce84b362fe92abcd2e65388b457a5ed25def1e3e', class: "select-container" }, h("div", { key: '1a0d2031a1f71d77b371e96d27ad608da1f3d1a4', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '5b92f786919140fe0f4329a3b846e24007b980e7', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+            } }, h("div", { key: 'd87e3451ded9630ef471c6a0d0230f73bf2001f0', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '0eb6bd92232da327fd11a5b8fa5108064216b98d', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '29b3bc2a6300cf116e85b598c43bc3d590bfca40', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '105d69c1c4ebce966d207248d0919713402775fc', name: "label" })) || this.label, h("div", { key: '60d737d4bc621e64c4d60a4454c81d5cd2f14036', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '3ff4fc174c6769300fecde9b4f3785e7f510b3c5', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '44beff5fb235a6ecfe4d3bde6173309ab9374b7d', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'ca853307f93adc14b4ebe5de1f0b5cd255d438d7', class: "select-container" }, h("div", { key: 'fc56c44f4d6b27ca4d7d1c3f344bef6c5495ae84', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '77d3a48ea7ad111136fb1513aaeb6c3b15533436', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: '61d9e8ae5063a517ca57dc796273284ae15cad31', ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: 'e4d0a6073a1af4480c116bd1525c56716976da24' }), this.invalid && (h("cat-icon", { key: 'bb894fea7607b7b6b3dc950dde171faac3627a07', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'a4e438192ecee41d5acf77de45a1526876409a0f', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '04d53d0d39bc429a6ac9a479c46f42c6b03a9283' }), this.invalid && (h("cat-icon", { key: 'd21136d141632914fc176ea1939164a4d40dc446', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '6179bb7c28759db151265a35be142e1e89749d61', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: '5d449c11b58c01c1f6760448bc46474d8bb889cb', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'e50a9fa50cc46fc444fd3ec1b52c409fcfb0278f', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'dd07d6ef4fbd6352b88cb2d15802a4b382c3409f', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'bac0e34fa3603ed07a3f9cc2d9346349c2b31201', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'cd5c84bbc7b04b28acda86d656b2ea9835cbb439', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'd0f3f4f080abf2136e681161802f0b332591a30a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '1fb0555801f6793b6351dbc19f2eba12c7292593', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '8eea85eea2b000f29d690aafc7fbae106bf275e5', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'fa0415a3459967bc8a8591c94e3227c8fb99443d', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catI18nRegistry.t('select.empty')))))))));
@@ -1017,6 +1018,7 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
         "errors": [4],
         "errorUpdate": [8, "error-update"],
         "nativeAttributes": [16],
+        "testId": [1, "test-id"],
         "connector": [32],
         "state": [32],
         "hasSlottedLabel": [32],