@haiilo/catalyst 5.3.0 → 6.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\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 */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\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  @Prop() value?: string;\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   * 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;\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    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on radio', this);\n    }\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  /**\n   * Programmatically simulate a click on the radio button.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              {...this.nativeAttributes}\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.onChange.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\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.hint || this.hasSlottedHint) && (\n          <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n        )}\n      </Host>\n    );\n  }\n\n  private onChange(event: InputEvent) {\n    this.checked = true;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}
+{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\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 */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\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  @Prop() value = '';\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   * 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    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on radio', this);\n    }\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    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              {...this.nativeAttributes}\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            />\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.hint || this.hasSlottedHint) && (\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 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"]}

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

@@ -36,7 +36,6 @@ export class CatRadioGroup {
     this.onLabelLeftChanged(this.labelLeft);
   }
   onKeydown(event) {
-    var _a, _b;
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
       const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);
       const activeElement = document.activeElement;
@@ -44,15 +43,20 @@ export class CatRadioGroup {
       const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
       const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
       targetElements[targetIdx].doFocus();
-      (_b = (_a = targetElements[targetIdx].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
+      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();
       this.updateTabIndex();
       event.preventDefault();
     }
   }
   onInput(event) {
-    const catRadioElement = this.catRadioGroup.find(value => value === event.target);
-    this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
-    this.catChange.emit();
+    const radio = this.catRadioGroup.find(radio => radio === event.target);
+    this.value = radio?.checked ? radio?.value : undefined;
+    this.catChange.emit(this.value);
+  }
+  onFocus(event) {
+    if (!event.relatedTarget) {
+      this.catBlur.emit(event);
+    }
   }
   onBlur(event) {
     if (!event.relatedTarget) {
@@ -63,11 +67,12 @@ export class CatRadioGroup {
     return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
   }
   updateTabIndex() {
-    var _a, _b;
     if (this.catRadioGroup.length) {
-      this.catRadioGroup.forEach(value => { var _a, _b; return (_b = (_a = value.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1'); });
+      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));
       const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);
-      (_b = (_a = this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot
+        ?.querySelector('input')
+        ?.setAttribute('tabindex', '0');
     }
   }
   static get is() { return "cat-radio-group"; }
@@ -185,10 +190,29 @@ export class CatRadioGroup {
           "text": "Emitted when the value is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "boolean | string",
+          "resolved": "boolean | string",
           "references": {}
         }
+      }, {
+        "method": "catFocus",
+        "name": "catFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the radio group received focus."
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
       }, {
         "method": "catBlur",
         "name": "catBlur",
@@ -239,6 +263,12 @@ export class CatRadioGroup {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "focus",
+        "method": "onFocus",
+        "target": undefined,
+        "capture": true,
+        "passive": false
       }, {
         "name": "blur",
         "method": "onBlur",

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

@@ -1 +1 @@
-{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio group loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n  }\n\n  @Watch('value')\n  onValueChanged(newValue?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n    this.updateTabIndex();\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onValueChanged(this.value);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\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      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n    this.value = catRadioElement?.value;\n    this.catChange.emit();\n  }\n\n  @Listen('blur', { capture: true })\n  onBlur(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string>;\n\n  /**\n   * Emitted when the radio group received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio group loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n  }\n\n  @Watch('value')\n  onValueChanged(newValue?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n    this.updateTabIndex();\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onValueChanged(this.value);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\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      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const radio = this.catRadioGroup.find(radio => radio === event.target);\n    this.value = radio?.checked ? radio?.value : undefined;\n    this.catChange.emit(this.value);\n  }\n\n  @Listen('focus', { capture: true })\n  onFocus(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  @Listen('blur', { capture: true })\n  onBlur(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"]}

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

@@ -42,10 +42,7 @@
 
 .scrollable-wrapper {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   pointer-events: none;
 }
 .scrollable-wrapper.cat-scrollable-top .shadow-top, .scrollable-wrapper.cat-scrollable-bottom .shadow-bottom, .scrollable-wrapper.cat-scrollable-left .shadow-left, .scrollable-wrapper.cat-scrollable-right .shadow-right {

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

@@ -89,12 +89,11 @@ export class CatScrollable {
     return 0;
   }
   toggleClass(name, value) {
-    var _a, _b;
     if (value) {
-      (_a = this.scrollWrapperElement) === null || _a === void 0 ? void 0 : _a.classList.add(name);
+      this.scrollWrapperElement?.classList.add(name);
     }
     else {
-      (_b = this.scrollWrapperElement) === null || _b === void 0 ? void 0 : _b.classList.remove(name);
+      this.scrollWrapperElement?.classList.remove(name);
     }
   }
   static get is() { return "cat-scrollable"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cat-scrollable.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { auditTime, distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';\n\n/**\n * An element to display scrollable content.\n */\n@Component({\n  tag: 'cat-scrollable',\n  styleUrl: 'cat-scrollable.scss',\n  shadow: true\n})\nexport class CatScrollable {\n  private static readonly THROTTLE = 50;\n  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\n  private readonly resizedEntries = new Subject<ResizeObserverEntry[]>();\n  private readonly resizedObserver = new ResizeObserver(entries => this.resizedEntries.next(entries));\n  private scrolled!: Observable<Event>;\n\n  /** Flags to disable/enable scroll shadowX. */\n  @Prop()\n  noShadowX = false;\n\n  /** Flags to disable/enable scroll shadowY. */\n  @Prop()\n  noShadowY = false;\n\n  /** Flags to disable/enable overflowX. */\n  @Prop()\n  noOverflowX = false;\n\n  /** Flags to disable/enable overflowY. */\n  @Prop()\n  noOverflowY = false;\n\n  /** Flag to disable/enable overscroll behavior. */\n  @Prop()\n  noOverscroll = false;\n\n  /**\n   * Flag to not fire an initial event after content initialization.\n   */\n  @Prop() noScrolledInit = false;\n\n  /**\n   * Buffer to be used to calculate the scroll distance.\n   */\n  @Prop() scrolledBuffer = 0;\n\n  /**\n   * Emitted when the content is fully scrolled to the top.\n   */\n  @Event() scrolledTop!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the left.\n   */\n  @Event() scrolledLeft!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the right.\n   */\n  @Event() scrolledRight!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the bottom.\n   */\n  @Event() scrolledBottom!: EventEmitter<void>;\n\n  componentDidRender() {\n    if (this.scrollElement) {\n      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));\n      this.resizedObserver.observe(this.scrollElement);\n    }\n    if (this.scrollWrapperElement) {\n      this.resizedObserver.observe(this.scrollWrapperElement);\n    }\n    this.attachEmitter('left', this.scrolledLeft);\n    this.attachEmitter('right', this.scrolledRight);\n    this.attachEmitter('bottom', this.scrolledBottom);\n    this.attachEmitter('top', this.scrolledTop);\n    merge(this.init, this.scrolled, this.resizedEntries)\n      .pipe(\n        auditTime(CatScrollable.THROTTLE),\n        map(() => ({\n          top: this.getScrollOffset('top') > 0,\n          left: this.getScrollOffset('left') > 0,\n          right: this.getScrollOffset('right') > 0,\n          bottom: this.getScrollOffset('bottom') > 0\n        })),\n        distinctUntilChanged(),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(({ top, left, right, bottom }) => {\n        this.toggleClass('cat-scrollable-top', top);\n        this.toggleClass('cat-scrollable-left', left);\n        this.toggleClass('cat-scrollable-right', right);\n        this.toggleClass('cat-scrollable-bottom', bottom);\n      });\n  }\n\n  componentDidLoad() {\n    if (!this.noScrolledInit) {\n      this.init.next();\n    }\n  }\n\n  disconnectedCallback() {\n    this.init.complete();\n    this.destroyed.next();\n    this.destroyed.complete();\n    this.resizedObserver.disconnect();\n  }\n\n  render() {\n    return [\n      <div class=\"scrollable-wrapper\" ref={el => (this.scrollWrapperElement = el)}>\n        {!this.noShadowY && <div class=\"shadow-top\"></div>}\n        {!this.noShadowX && <div class=\"shadow-left\"></div>}\n        {!this.noShadowX && <div class=\"shadow-right\"></div>}\n        {!this.noShadowY && <div class=\"shadow-bottom\"></div>}\n      </div>,\n      <div\n        ref={el => (this.scrollElement = el)}\n        class={{\n          'scrollable-content': true,\n          'scroll-x': !this.noOverflowX,\n          'scroll-y': !this.noOverflowY,\n          'no-overscroll': this.noOverscroll\n        }}\n      >\n        <slot></slot>\n      </div>\n    ];\n  }\n\n  private attachEmitter(from: 'top' | 'left' | 'right' | 'bottom', emitter: EventEmitter<void>) {\n    merge(this.init, this.scrolled, this.resizedEntries)\n      .pipe(\n        auditTime(CatScrollable.THROTTLE),\n        map(() => this.getScrollOffset(from)),\n        map(offset => offset <= this.scrolledBuffer),\n        distinctUntilChanged(),\n        filter(isLower => isLower),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(() => emitter.emit());\n  }\n\n  private getScrollOffset(from: 'top' | 'left' | 'right' | 'bottom') {\n    if (this.scrollElement) {\n      switch (from) {\n        case 'top':\n          return this.scrollElement.scrollTop;\n        case 'left':\n          return this.scrollElement.scrollLeft;\n        case 'right':\n          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;\n        case 'bottom':\n          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;\n        default:\n          return 0;\n      }\n    }\n    return 0;\n  }\n\n  private toggleClass(name: string, value: boolean) {\n    if (value) {\n      this.scrollWrapperElement?.classList.add(name);\n    } else {\n      this.scrollWrapperElement?.classList.remove(name);\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-scrollable.js","sourceRoot":"","sources":["../../../src/components/cat-scrollable/cat-scrollable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { fromEvent, merge, Observable, Subject } from 'rxjs';\nimport { auditTime, distinctUntilChanged, filter, map, takeUntil } from 'rxjs/operators';\n\n/**\n * An element to display scrollable content.\n */\n@Component({\n  tag: 'cat-scrollable',\n  styleUrl: 'cat-scrollable.scss',\n  shadow: true\n})\nexport class CatScrollable {\n  private static readonly THROTTLE = 50;\n  scrollElement?: HTMLElement;\n  scrollWrapperElement?: HTMLElement;\n  private readonly init = new Subject<void>();\n  private readonly destroyed = new Subject<void>();\n  private readonly resizedEntries = new Subject<ResizeObserverEntry[]>();\n  private readonly resizedObserver = new ResizeObserver(entries => this.resizedEntries.next(entries));\n  private scrolled!: Observable<Event>;\n\n  /** Flags to disable/enable scroll shadowX. */\n  @Prop()\n  noShadowX = false;\n\n  /** Flags to disable/enable scroll shadowY. */\n  @Prop()\n  noShadowY = false;\n\n  /** Flags to disable/enable overflowX. */\n  @Prop()\n  noOverflowX = false;\n\n  /** Flags to disable/enable overflowY. */\n  @Prop()\n  noOverflowY = false;\n\n  /** Flag to disable/enable overscroll behavior. */\n  @Prop()\n  noOverscroll = false;\n\n  /**\n   * Flag to not fire an initial event after content initialization.\n   */\n  @Prop() noScrolledInit = false;\n\n  /**\n   * Buffer to be used to calculate the scroll distance.\n   */\n  @Prop() scrolledBuffer = 0;\n\n  /**\n   * Emitted when the content is fully scrolled to the top.\n   */\n  @Event() scrolledTop!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the left.\n   */\n  @Event() scrolledLeft!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the right.\n   */\n  @Event() scrolledRight!: EventEmitter<void>;\n\n  /**\n   * Emitted when the content is fully scrolled to the bottom.\n   */\n  @Event() scrolledBottom!: EventEmitter<void>;\n\n  componentDidRender() {\n    if (this.scrollElement) {\n      this.scrolled = fromEvent(this.scrollElement, 'scroll').pipe(takeUntil(this.destroyed));\n      this.resizedObserver.observe(this.scrollElement);\n    }\n    if (this.scrollWrapperElement) {\n      this.resizedObserver.observe(this.scrollWrapperElement);\n    }\n    this.attachEmitter('left', this.scrolledLeft);\n    this.attachEmitter('right', this.scrolledRight);\n    this.attachEmitter('bottom', this.scrolledBottom);\n    this.attachEmitter('top', this.scrolledTop);\n    merge(this.init, this.scrolled, this.resizedEntries)\n      .pipe(\n        auditTime(CatScrollable.THROTTLE),\n        map(() => ({\n          top: this.getScrollOffset('top') > 0,\n          left: this.getScrollOffset('left') > 0,\n          right: this.getScrollOffset('right') > 0,\n          bottom: this.getScrollOffset('bottom') > 0\n        })),\n        distinctUntilChanged(),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(({ top, left, right, bottom }) => {\n        this.toggleClass('cat-scrollable-top', top);\n        this.toggleClass('cat-scrollable-left', left);\n        this.toggleClass('cat-scrollable-right', right);\n        this.toggleClass('cat-scrollable-bottom', bottom);\n      });\n  }\n\n  componentDidLoad() {\n    if (!this.noScrolledInit) {\n      this.init.next();\n    }\n  }\n\n  disconnectedCallback() {\n    this.init.complete();\n    this.destroyed.next();\n    this.destroyed.complete();\n    this.resizedObserver.disconnect();\n  }\n\n  render() {\n    return [\n      <div class=\"scrollable-wrapper\" ref={el => (this.scrollWrapperElement = el)}>\n        {!this.noShadowY && <div class=\"shadow-top\"></div>}\n        {!this.noShadowX && <div class=\"shadow-left\"></div>}\n        {!this.noShadowX && <div class=\"shadow-right\"></div>}\n        {!this.noShadowY && <div class=\"shadow-bottom\"></div>}\n      </div>,\n      <div\n        ref={el => (this.scrollElement = el)}\n        class={{\n          'scrollable-content': true,\n          'scroll-x': !this.noOverflowX,\n          'scroll-y': !this.noOverflowY,\n          'no-overscroll': this.noOverscroll\n        }}\n      >\n        <slot></slot>\n      </div>\n    ];\n  }\n\n  private attachEmitter(from: 'top' | 'left' | 'right' | 'bottom', emitter: EventEmitter<void>) {\n    merge(this.init, this.scrolled, this.resizedEntries)\n      .pipe(\n        auditTime(CatScrollable.THROTTLE),\n        map(() => this.getScrollOffset(from)),\n        map(offset => offset <= this.scrolledBuffer),\n        distinctUntilChanged(),\n        filter(isLower => isLower),\n        takeUntil(this.destroyed)\n      )\n      .subscribe(() => emitter.emit());\n  }\n\n  private getScrollOffset(from: 'top' | 'left' | 'right' | 'bottom') {\n    if (this.scrollElement) {\n      switch (from) {\n        case 'top':\n          return this.scrollElement.scrollTop;\n        case 'left':\n          return this.scrollElement.scrollLeft;\n        case 'right':\n          return this.scrollElement.scrollWidth - this.scrollElement.clientWidth - this.scrollElement.scrollLeft;\n        case 'bottom':\n          return this.scrollElement.scrollHeight - this.scrollElement.clientHeight - this.scrollElement.scrollTop;\n        default:\n          return 0;\n      }\n    }\n    return 0;\n  }\n\n  private toggleClass(name: string, value: boolean) {\n    if (value) {\n      this.scrollWrapperElement?.classList.add(name);\n    } else {\n      this.scrollWrapperElement?.classList.remove(name);\n    }\n  }\n}\n"]}

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

@@ -12,7 +12,7 @@
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
-  line-height: 1rem;
+  line-height: 1.125rem;
   font-weight: var(--cat-font-weight-body, 400);
   margin: 0 !important;
 }
@@ -382,26 +382,22 @@ label.hidden {
   align-items: flex-start;
   background: white;
   border-radius: var(--cat-border-radius-m, 0.25rem);
-  box-shadow: 0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-color));
   transition: box-shadow 0.13s linear;
   padding: 0.25rem;
+  --border-color: var(--cat-border-color-dark, 215, 219, 224);
   /* stylelint-disable property-no-vendor-prefix */
   /* stylelint-enable property-no-vendor-prefix */
 }
 .select-wrapper:not(.select-disabled):hover {
-  box-shadow: 0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224));
-}
-.select-wrapper:not(.select-disabled):hover.select-invalid {
-  box-shadow: 0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  box-shadow: inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color));
 }
-.select-wrapper:not(.select-disabled):focus-within {
+.select-wrapper:focus-within {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
-}
-.select-wrapper:not(.select-disabled):focus-within.select-invalid {
-  outline: 2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  outline-offset: -1px;
 }
 .select-wrapper.select-invalid {
-  box-shadow: 0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  --border-color: var(--cat-danger-bg, 217, 52, 13), 0.2;
 }
 .select-wrapper:has(input:-webkit-autofill), .select-wrapper:has(input:-webkit-autofill):hover, .select-wrapper:has(input:-webkit-autofill):focus {
   background-color: #e8f0fe;
@@ -509,6 +505,7 @@ cat-spinner {
   overflow: auto;
   box-shadow: 0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);
   border-radius: var(--cat-border-radius-m, 0.25rem);
+  border: 1px solid rgb(var(--cat-border-color, 235, 236, 240));
   z-index: 100;
 }