@haiilo/catalyst 11.0.0 → 12.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 { 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,"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 { 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"]}

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

@@ -5,10 +5,13 @@ import { h } from "@stencil/core";
 export class CatRadioGroup {
     constructor() {
         this.catRadioGroup = [];
-        this.name = undefined;
-        this.value = undefined;
+        /**
+         * Whether this radio group is disabled.
+         */
         this.disabled = false;
-        this.a11yLabel = undefined;
+        /**
+         * Whether the label of the radios should appear to the left of them.
+         */
         this.labelLeft = false;
     }
     onNameChanged(newName) {
@@ -101,6 +104,7 @@ export class CatRadioGroup {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -113,11 +117,13 @@ export class CatRadioGroup {
                     "tags": [],
                     "text": "The name of the radio group component."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -130,11 +136,13 @@ export class CatRadioGroup {
                     "tags": [],
                     "text": "The value of the radio group."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -147,12 +155,14 @@ export class CatRadioGroup {
                     "tags": [],
                     "text": "Whether this radio group is disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "a11yLabel": {
                 "type": "string",
+                "attribute": "a11y-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -165,11 +175,13 @@ export class CatRadioGroup {
                     "tags": [],
                     "text": "Adds an accessible label for the radio group that\nit is only shown in assistive technologies, like screen readers."
                 },
-                "attribute": "a11y-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "labelLeft": {
                 "type": "boolean",
+                "attribute": "label-left",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -182,7 +194,8 @@ export class CatRadioGroup {
                     "tags": [],
                     "text": "Whether the label of the radios should appear to the left of them."
                 },
-                "attribute": "label-left",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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  private mutationObserver?: MutationObserver;\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) value?: any;\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 = catRadio.disabled || disabled));\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.labelLeft = catRadio.labelLeft || labelLeft));\n  }\n\n  componentDidLoad(): void {\n    this.init();\n    this.mutationObserver = new MutationObserver(\n      mutations => mutations.some(value => value.target.nodeName === 'CAT-RADIO') && this.init()\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  @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    if (radio?.localName === 'cat-radio') {\n      this.value = radio?.checked ? radio?.value : undefined;\n      this.catChange.emit(this.value);\n    }\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 init() {\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  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  private mutationObserver?: MutationObserver;\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  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) value?: any;\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 = catRadio.disabled || disabled));\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.labelLeft = catRadio.labelLeft || labelLeft));\n  }\n\n  componentDidLoad(): void {\n    this.init();\n    this.mutationObserver = new MutationObserver(\n      mutations => mutations.some(value => value.target.nodeName === 'CAT-RADIO') && this.init()\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  @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    if (radio?.localName === 'cat-radio') {\n      this.value = radio?.checked ? radio?.value : undefined;\n      this.catChange.emit(this.value);\n    }\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 init() {\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  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.js

@@ -10,12 +10,23 @@ export class CatScrollable {
         this.destroyed = new Subject();
         this.resizedEntries = new Subject();
         this.resizedObserver = new ResizeObserver(entries => this.resizedEntries.next(entries));
+        /** Flags to disable/enable scroll shadowX. */
         this.noShadowX = false;
+        /** Flags to disable/enable scroll shadowY. */
         this.noShadowY = false;
+        /** Flags to disable/enable overflowX. */
         this.noOverflowX = false;
+        /** Flags to disable/enable overflowY. */
         this.noOverflowY = false;
+        /** Flag to disable/enable overscroll behavior. */
         this.noOverscroll = false;
+        /**
+         * Flag to not fire an initial event after content initialization.
+         */
         this.noScrolledInit = false;
+        /**
+         * Buffer to be used to calculate the scroll distance.
+         */
         this.scrolledBuffer = 0;
     }
     componentDidRender() {
@@ -124,6 +135,7 @@ export class CatScrollable {
         return {
             "noShadowX": {
                 "type": "boolean",
+                "attribute": "no-shadow-x",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -136,12 +148,14 @@ export class CatScrollable {
                     "tags": [],
                     "text": "Flags to disable/enable scroll shadowX."
                 },
-                "attribute": "no-shadow-x",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noShadowY": {
                 "type": "boolean",
+                "attribute": "no-shadow-y",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -154,12 +168,14 @@ export class CatScrollable {
                     "tags": [],
                     "text": "Flags to disable/enable scroll shadowY."
                 },
-                "attribute": "no-shadow-y",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noOverflowX": {
                 "type": "boolean",
+                "attribute": "no-overflow-x",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -172,12 +188,14 @@ export class CatScrollable {
                     "tags": [],
                     "text": "Flags to disable/enable overflowX."
                 },
-                "attribute": "no-overflow-x",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noOverflowY": {
                 "type": "boolean",
+                "attribute": "no-overflow-y",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -190,12 +208,14 @@ export class CatScrollable {
                     "tags": [],
                     "text": "Flags to disable/enable overflowY."
                 },
-                "attribute": "no-overflow-y",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noOverscroll": {
                 "type": "boolean",
+                "attribute": "no-overscroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -208,12 +228,14 @@ export class CatScrollable {
                     "tags": [],
                     "text": "Flag to disable/enable overscroll behavior."
                 },
-                "attribute": "no-overscroll",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noScrolledInit": {
                 "type": "boolean",
+                "attribute": "no-scrolled-init",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -226,12 +248,14 @@ export class CatScrollable {
                     "tags": [],
                     "text": "Flag to not fire an initial event after content initialization."
                 },
-                "attribute": "no-scrolled-init",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "scrolledBuffer": {
                 "type": "number",
+                "attribute": "scrolled-buffer",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -244,7 +268,8 @@ export class CatScrollable {
                     "tags": [],
                     "text": "Buffer to be used to calculate the scroll distance."
                 },
-                "attribute": "scrolled-buffer",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "0"
             }

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          // 5px used to avoid shadow bug on Windows\n          top: this.getScrollOffset('top') > 5,\n          left: this.getScrollOffset('left') > 5,\n          right: this.getScrollOffset('right') > 5,\n          bottom: this.getScrollOffset('bottom') > 5\n        })),\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        filter(isLower => isLower),\n        map(() => {\n          switch (from) {\n            case 'top':\n              return this.getScrollOffset('bottom');\n            case 'left':\n              return this.getScrollOffset('right');\n            case 'right':\n              return this.getScrollOffset('left');\n            case 'bottom':\n              return this.getScrollOffset('top');\n          }\n        }),\n        distinctUntilChanged(),\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          // 5px used to avoid shadow bug on Windows\n          top: this.getScrollOffset('top') > 5,\n          left: this.getScrollOffset('left') > 5,\n          right: this.getScrollOffset('right') > 5,\n          bottom: this.getScrollOffset('bottom') > 5\n        })),\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        filter(isLower => isLower),\n        map(() => {\n          switch (from) {\n            case 'top':\n              return this.getScrollOffset('bottom');\n            case 'left':\n              return this.getScrollOffset('right');\n            case 'right':\n              return this.getScrollOffset('left');\n            case 'bottom':\n              return this.getScrollOffset('top');\n          }\n        }),\n        distinctUntilChanged(),\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"]}