@beeq/core 1.12.2-beta.0 → 1.12.3-beta.0

package/dist/cjs/bq-switch.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bq-switch.cjs.entry.js","mappings":"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","names":["slot","isNil","getTextContent","_jsx","Host","_jsxs"],"sources":["../../packages/beeq/src/components/switch/scss/bq-switch.scss?tag=bq-switch&encapsulation=shadow","../../packages/beeq/src/components/switch/bq-switch.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Switch styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-switch.variables';\n\n:host {\n  @apply inline-block;\n}\n\n:host(.full-width) {\n  @apply is-full;\n}\n\n.bq-switch {\n  @apply flex cursor-pointer select-none items-center rounded-s transition-colors duration-300 p-b-2 p-i-2;\n\n  justify-content: var(--bq-switch--justify-content);\n\n  // Display background on hover (if enabled)\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  &.is-disabled {\n    @apply cursor-not-allowed opacity-60;\n  }\n}\n\n.bq-switch--input:not(:disabled):focus,\n.bq-switch--input:not(:disabled):focus-visible {\n  ~ .bq-switch--control {\n    @apply focus;\n  }\n}\n\n.bq-switch--control__dot {\n  @apply absolute start-xs2 rounded-full bg-ui-primary bs-[--bq-switch--dot-size] is-[--bq-switch--dot-size];\n  @apply group-[&.is-checked]:start-[calc(100%_-_var(--bq-switch--dot-size)_-_var(--bq-spacing-xs2))] group-[&.is-checked]:bg-[--bq-icon--alt];\n  @apply transition-all duration-300;\n}\n\n.bq-switch--control__icon {\n  --bq-icon--size: var(--bq-switch--dot-size) !important;\n\n  &::part(base) {\n    @apply flex;\n  }\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { getTextContent, isNil } from '../../shared/utils';\nimport type { TSwitchInnerLabel, TSwitchJustifyContent } from './bq-switch.types';\n\n/**\n * Toggle switches are digital on/off switches.\n * They should provide immediate results, giving users the freedom to control their preferences as needed.\n *\n * @example How to use it\n * ```html\n * <bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\n *   Toggle me!\n * </bq-switch>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/49d9c9-switch\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {boolean} background-on-hover - If `true`, a background will be displayed on hover\n * @attr {boolean} checked - It indicates whether if the switch is `ON` by default (when the page loads)\n * @attr {boolean} disabled - If `true`, the switch control will be disabled and no interaction will be allowed\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} full-width - If `true`, the component will take the full width space available on the parent container\n * @attr {\"default\" | \"icon\"} inner-label - It indicates how to to display the on/off marks inside the control, with icons or none (default)\n * @attr {\"start\" | \"end\" | \"center\" | \"space-between\" | \"space-around\" | \"space-evenly\"} justify-content - It defines how to distribute the space between and around the control and the label text\n * @attr {string} name - Name of the form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted\n * @attr {boolean} reverse-order - If `true`, the order of the control and the label text will be changed\n * @attr {string} value - The input control's value, submitted as a name/value pair with form data\n *\n * @event bqChange - Handler to be called when the switch state changes\n * @event bqFocus - Handler to be called when the switch gets focus\n * @event bqBlur - Handler to be called when the switch loses focus\n *\n * @slot - The switch label text\n *\n * @part base - HTML `<label>` root container\n * @part control - HTML `<div>` element for the custom control\n * @part dot - HTML `<div>` element that acts as changing dot\n * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label\n * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label\n * @part label - HTML `<span>` element that holds the label text\n *\n * @cssprop --bq-switch--height - Switch height\n * @cssprop --bq-switch--justify-content - Switch justify content\n * @cssprop --bq-switch--width - Switch width\n * @cssprop --bq-switch--dot-size - Switch dot size\n */\n@Component({\n  tag: 'bq-switch',\n  styleUrl: './scss/bq-switch.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSwitch {\n  // Own Properties\n  // ====================\n\n  private labelElem: HTMLSpanElement;\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqSwitchElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasLabel = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, a background will be displayed on hover */\n  @Prop({ reflect: true }) backgroundOnHover?: boolean = false;\n\n  /** It indicates whether if the switch is `ON` by default (when the page loads) */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n\n  /** If true, the switch control will be disabled and no interaction will be allowed */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true, the component will take the full width space available on the parent container */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /** It indicates how to to display the on/off marks inside the control, with icons or none (default)  */\n  @Prop({ reflect: true }) innerLabel?: TSwitchInnerLabel = 'default';\n\n  /**\n   * It defines how to distribute the space between and around the control and the label text\n   * (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\n   */\n  @Prop({ reflect: true }) justifyContent?: TSwitchJustifyContent = 'start';\n\n  /** Name of the form control. Submitted with the form as part of a name/value pair */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean = false;\n\n  /** If true, the order of the control and the label text will be changed  */\n  @Prop({ reflect: true }) reverseOrder?: boolean = false;\n\n  /** The input control's value, submitted as a name/value pair with form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('required')\n  handleRequiredChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the switch state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the switch gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqSwitchElement>;\n\n  /** Handler to be called when the switch loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSwitchElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      this.bqChange.emit({ checked: this.checked });\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.inputElem.setAttribute('checked', `${this.checked}`);\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    const slot = this.labelElem?.querySelector('slot') ?? null;\n    if (isNil(slot)) return;\n\n    this.hasLabel = !!getTextContent(slot, { recurse: true }).length;\n  };\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the component (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the switch component is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const hostStyle = {\n      ...(this.justifyContent && { '--bq-switch--justify-content': this.justifyContent }),\n    };\n\n    const labelCssClasses = {\n      'has-background': this.backgroundOnHover,\n      'is-checked': this.checked,\n      'is-disabled': this.disabled,\n      'flex-row-reverse': this.reverseOrder,\n    };\n\n    return (\n      <Host class={{ 'full-width': this.fullWidth }} style={hostStyle}>\n        <label class={{ 'bq-switch group': true, ...labelCssClasses }} part=\"base\">\n          {/* Hidden native HTML input */}\n          <input\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            aria-label={this.name}\n            checked={this.checked}\n            class=\"bq-switch--input peer !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] sr-only peer-checked:invisible\"\n            disabled={this.disabled}\n            name={!isNil(this.name) ? this.name : undefined}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            ref={(input) => {\n              this.inputElem = input;\n            }}\n            required={this.required}\n            role=\"switch\"\n            type=\"checkbox\"\n            value={this.value}\n          />\n          {/* Control */}\n          <div\n            class=\"bq-switch--control bs-[--bq-switch--height] is-[--bq-switch--width] relative box-border flex justify-between rounded-full bg-ui-tertiary p-b-xs2 p-i-xs2 transition duration-300 group-[&.is-checked]:bg-ui-brand\"\n            part=\"control\"\n          >\n            {this.innerLabel === 'icon' && (\n              <bq-icon class=\"bq-switch--control__icon on\" color=\"icon--alt\" name=\"check\" part=\"icon-on\" title=\"On\" />\n            )}\n            {this.innerLabel === 'icon' && (\n              <bq-icon\n                class=\"bq-switch--control__icon off\"\n                color=\"icon--inverse\"\n                name=\"x\"\n                part=\"icon-off\"\n                title=\"Off\"\n              />\n            )}\n            {/* Dot */}\n            <div class=\"bq-switch--control__dot\" part=\"dot\" />\n          </div>\n          {/* Label */}\n          <span\n            class={{\n              'bq-switch--label font-medium text-m text-primary leading-regular transition-colors duration-300': true,\n              'ms-s': this.hasLabel && !this.reverseOrder,\n              'me-s': this.hasLabel && this.reverseOrder,\n            }}\n            part=\"label\"\n            ref={(span) => {\n              this.labelElem = span;\n            }}\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-switch.cjs.entry.js","mappings":"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","names":["slot","isNil","getTextContent","h","Host"],"sources":["../../packages/beeq/src/components/switch/scss/bq-switch.scss?tag=bq-switch&encapsulation=shadow","../../packages/beeq/src/components/switch/bq-switch.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Switch styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-switch.variables';\n\n:host {\n  @apply inline-block;\n}\n\n:host(.full-width) {\n  @apply is-full;\n}\n\n.bq-switch {\n  @apply flex cursor-pointer select-none items-center rounded-s transition-colors duration-300 p-b-2 p-i-2;\n\n  justify-content: var(--bq-switch--justify-content);\n\n  // Display background on hover (if enabled)\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  &.is-disabled {\n    @apply cursor-not-allowed opacity-60;\n  }\n}\n\n.bq-switch--input:not(:disabled):focus,\n.bq-switch--input:not(:disabled):focus-visible {\n  ~ .bq-switch--control {\n    @apply focus;\n  }\n}\n\n.bq-switch--control__dot {\n  @apply absolute start-xs2 rounded-full bg-ui-primary bs-[--bq-switch--dot-size] is-[--bq-switch--dot-size];\n  @apply group-[&.is-checked]:start-[calc(100%_-_var(--bq-switch--dot-size)_-_var(--bq-spacing-xs2))] group-[&.is-checked]:bg-[--bq-icon--alt];\n  @apply transition-all duration-300;\n}\n\n.bq-switch--control__icon {\n  --bq-icon--size: var(--bq-switch--dot-size) !important;\n\n  &::part(base) {\n    @apply flex;\n  }\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { getTextContent, isNil } from '../../shared/utils';\nimport type { TSwitchInnerLabel, TSwitchJustifyContent } from './bq-switch.types';\n\n/**\n * Toggle switches are digital on/off switches.\n * They should provide immediate results, giving users the freedom to control their preferences as needed.\n *\n * @example How to use it\n * ```html\n * <bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\n *   Toggle me!\n * </bq-switch>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/49d9c9-switch\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {boolean} background-on-hover - If `true`, a background will be displayed on hover\n * @attr {boolean} checked - It indicates whether if the switch is `ON` by default (when the page loads)\n * @attr {boolean} disabled - If `true`, the switch control will be disabled and no interaction will be allowed\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} full-width - If `true`, the component will take the full width space available on the parent container\n * @attr {\"default\" | \"icon\"} inner-label - It indicates how to to display the on/off marks inside the control, with icons or none (default)\n * @attr {\"start\" | \"end\" | \"center\" | \"space-between\" | \"space-around\" | \"space-evenly\"} justify-content - It defines how to distribute the space between and around the control and the label text\n * @attr {string} name - Name of the form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted\n * @attr {boolean} reverse-order - If `true`, the order of the control and the label text will be changed\n * @attr {string} value - The input control's value, submitted as a name/value pair with form data\n *\n * @event bqChange - Handler to be called when the switch state changes\n * @event bqFocus - Handler to be called when the switch gets focus\n * @event bqBlur - Handler to be called when the switch loses focus\n *\n * @slot - The switch label text\n *\n * @part base - HTML `<label>` root container\n * @part control - HTML `<div>` element for the custom control\n * @part dot - HTML `<div>` element that acts as changing dot\n * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label\n * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label\n * @part label - HTML `<span>` element that holds the label text\n *\n * @cssprop --bq-switch--height - Switch height\n * @cssprop --bq-switch--justify-content - Switch justify content\n * @cssprop --bq-switch--width - Switch width\n * @cssprop --bq-switch--dot-size - Switch dot size\n */\n@Component({\n  tag: 'bq-switch',\n  styleUrl: './scss/bq-switch.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSwitch {\n  // Own Properties\n  // ====================\n\n  private labelElem: HTMLSpanElement;\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqSwitchElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasLabel = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, a background will be displayed on hover */\n  @Prop({ reflect: true }) backgroundOnHover?: boolean = false;\n\n  /** It indicates whether if the switch is `ON` by default (when the page loads) */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n\n  /** If true, the switch control will be disabled and no interaction will be allowed */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true, the component will take the full width space available on the parent container */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /** It indicates how to to display the on/off marks inside the control, with icons or none (default)  */\n  @Prop({ reflect: true }) innerLabel?: TSwitchInnerLabel = 'default';\n\n  /**\n   * It defines how to distribute the space between and around the control and the label text\n   * (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\n   */\n  @Prop({ reflect: true }) justifyContent?: TSwitchJustifyContent = 'start';\n\n  /** Name of the form control. Submitted with the form as part of a name/value pair */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean = false;\n\n  /** If true, the order of the control and the label text will be changed  */\n  @Prop({ reflect: true }) reverseOrder?: boolean = false;\n\n  /** The input control's value, submitted as a name/value pair with form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('required')\n  handleRequiredChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the switch state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the switch gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqSwitchElement>;\n\n  /** Handler to be called when the switch loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSwitchElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      this.bqChange.emit({ checked: this.checked });\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.inputElem.setAttribute('checked', `${this.checked}`);\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    const slot = this.labelElem?.querySelector('slot') ?? null;\n    if (isNil(slot)) return;\n\n    this.hasLabel = !!getTextContent(slot, { recurse: true }).length;\n  };\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the component (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the switch component is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const hostStyle = {\n      ...(this.justifyContent && { '--bq-switch--justify-content': this.justifyContent }),\n    };\n\n    const labelCssClasses = {\n      'has-background': this.backgroundOnHover,\n      'is-checked': this.checked,\n      'is-disabled': this.disabled,\n      'flex-row-reverse': this.reverseOrder,\n    };\n\n    return (\n      <Host class={{ 'full-width': this.fullWidth }} style={hostStyle}>\n        <label class={{ 'bq-switch group': true, ...labelCssClasses }} part=\"base\">\n          {/* Hidden native HTML input */}\n          <input\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            aria-label={this.name}\n            checked={this.checked}\n            class=\"bq-switch--input peer !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] sr-only peer-checked:invisible\"\n            disabled={this.disabled}\n            name={!isNil(this.name) ? this.name : undefined}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            ref={(input) => {\n              this.inputElem = input;\n            }}\n            required={this.required}\n            role=\"switch\"\n            type=\"checkbox\"\n            value={this.value}\n          />\n          {/* Control */}\n          <div\n            class=\"bq-switch--control bs-[--bq-switch--height] is-[--bq-switch--width] relative box-border flex justify-between rounded-full bg-ui-tertiary p-b-xs2 p-i-xs2 transition duration-300 group-[&.is-checked]:bg-ui-brand\"\n            part=\"control\"\n          >\n            {this.innerLabel === 'icon' && (\n              <bq-icon class=\"bq-switch--control__icon on\" color=\"icon--alt\" name=\"check\" part=\"icon-on\" title=\"On\" />\n            )}\n            {this.innerLabel === 'icon' && (\n              <bq-icon\n                class=\"bq-switch--control__icon off\"\n                color=\"icon--inverse\"\n                name=\"x\"\n                part=\"icon-off\"\n                title=\"Off\"\n              />\n            )}\n            {/* Dot */}\n            <div class=\"bq-switch--control__dot\" part=\"dot\" />\n          </div>\n          {/* Label */}\n          <span\n            class={{\n              'bq-switch--label font-medium text-m text-primary leading-regular transition-colors duration-300': true,\n              'ms-s': this.hasLabel && !this.reverseOrder,\n              'me-s': this.hasLabel && this.reverseOrder,\n            }}\n            part=\"label\"\n            ref={(span) => {\n              this.labelElem = span;\n            }}\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bq-tab-group.cjs.entry.js

@@ -4,8 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-BwvwUnfB.js');
-var index$1 = require('./index-C09ZVaB4.js');
+var index = require('./index-Bp6IQmE_.js');
 var debounce = require('./debounce-D0tIpUuS.js');
 var getNextElement = require('./getNextElement-Bcdj4jIn.js');
 var isHTMLElement = require('./isHTMLElement-CtkOWsTF.js');
@@ -176,13 +175,13 @@ const BqTabGroup = class {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (index$1.jsx(index.Host, { class: { 'inline-block': this.orientation === 'vertical' }, children: index$1.jsx("div", { class: {
-                    [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} is-full flex`]: true,
-                    'no-divider': this.disableDivider,
-                }, part: "base", children: index$1.jsx("div", { class: {
-                        'bq-tab-group--container flex overflow-x-auto': true,
-                        'flex-col': this.orientation !== 'horizontal',
-                    }, part: "tabs", role: "tablist", children: index$1.jsx("slot", {}, 'c6a50f259ecaab21d223cc188f390a7d186ce2f8') }, '71ba00dd69ed2cbaf547ca46a745dad58a4434c1') }, '4f7c13e06144d733c851f1b8e62238bfdd4aabcd') }, '50d10913b0d057c1f9272e4c577e65739e8b714a'));
+        return (index.h(index.Host, { key: '14f48db35a2392ede8c5a44103ececb5e601dc98', class: { 'inline-block': this.orientation === 'vertical' } }, index.h("div", { key: '5639127579ae0bfccd48cb59736ea5b4533ea45a', class: {
+                [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} is-full flex`]: true,
+                'no-divider': this.disableDivider,
+            }, part: "base" }, index.h("div", { key: 'ee7f407248c1bcdeb6fd53569151b37518aa575b', class: {
+                'bq-tab-group--container flex overflow-x-auto': true,
+                'flex-col': this.orientation !== 'horizontal',
+            }, part: "tabs", role: "tablist" }, index.h("slot", { key: 'fcb5a9e5a8df56b4b32549810778cdd19719a486' })))));
     }
     static get watchers() { return {
         "debounceTime": [{

package/dist/cjs/bq-tab-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bq-tab-group.cjs.entry.js","mappings":"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","names":["debounce","validatePropValue","TAB_SIZE","TAB_ORIENTATION","TAB_PLACEMENT","isNil","isHTMLElement","getNextElement","_jsx","Host"],"sources":["../../packages/beeq/src/components/tab-group/scss/bq-tab-group.scss?tag=bq-tab-group&encapsulation=shadow","../../packages/beeq/src/components/tab-group/bq-tab-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Tab styles                               */\n/* -------------------------------------------------------------------------- */\n\n:host {\n  @apply block;\n}\n\n.bq-tab-group {\n  @apply relative;\n\n  &::after {\n    @apply absolute flex border-0 border-solid border-primary content-empty;\n  }\n\n  &--horizontal-start,\n  &--horizontal-end {\n    &::after {\n      @apply is-full inset-be-0 [border-block-end-width:--bq-stroke-s];\n    }\n  }\n\n  &--horizontal-start {\n    @apply justify-start;\n  }\n\n  &--horizontal-end {\n    @apply justify-end;\n  }\n\n  &--vertical-start::after {\n    @apply end-0 bs-full is-0 [border-block-end-width:0px] [border-inline-end-width:--bq-stroke-s];\n  }\n\n  &--vertical-end::after {\n    @apply start-0 bs-full is-0 [border-block-end-width:0px] [border-inline-start-width:--bq-stroke-s];\n  }\n}\n\n.bq-tab-group.no-divider {\n  &::after {\n    @apply content-none;\n  }\n}\n\n.bq-tab-group--container {\n  @include hide-scrollbar;\n  @apply gap-xs2 p-xs2; // This will avoid cutting the outline focus style\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Host, Listen, Prop, Watch } from '@stencil/core';\n\nimport { debounce, getNextElement, isHTMLElement, isNil, type TDebounce, validatePropValue } from '../../shared/utils';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from '../tab/bq-tab.types';\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from '../tab/bq-tab.types';\n\n/**\n * The tab group is a user interface element that allows users wrap a set of tab items.\n *\n * @example How to use it\n * ```html\n * <bq-tab-group value=\"5\">\n *   <bq-tab tab-id=\"1\">Tab</bq-tab>\n *   <bq-tab tab-id=\"2\" active>Tab</bq-tab>\n *   <bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n *   <bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n * </bq-tab-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n *\n * @attr {number} debounce-time - A number representing the delay value applied to bqChange event handler\n * @attr {boolean} disable-divider - If true, the underline divider below the tabs won't be shown\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} value - A string representing the id of the selected tab.\n *\n * @event bqChange - Handler to be called when the tab value changes\n *\n * @slot - The bq-tab items\n *\n * @part base - The HTML div wrapper inside the shadow DOM.\n * @part tabs - The HTML div used to hold the tab buttons.\n */\n@Component({\n  tag: 'bq-tab-group',\n  styleUrl: './scss/bq-tab-group.scss',\n  shadow: true,\n})\nexport class BqTabGroup {\n  // Own Properties\n  // ====================\n\n  private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqTabElement }>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTabGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** A number representing the delay value applied to bqChange event handler */\n  @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n  /** If true, the underline divider below the tabs won't be shown  */\n  @Prop({ reflect: true }) disableDivider = false;\n\n  /** The direction that tab should be render */\n  @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n  /** The placement that tab should be render */\n  @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n  /** The size of the tab */\n  @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n  /** A string representing the id of the selected tab. */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('debounceTime')\n  checkDebounceChange() {\n    if (this.debounceTime < 0) {\n      this.debounceTime = Math.max(0, this.debounceTime);\n    }\n\n    if (this.debouncedBqChange) {\n      this.debouncedBqChange.cancel();\n    }\n\n    this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n      this.bqChange.emit(event);\n    }, this.debounceTime);\n  }\n\n  @Watch('size')\n  @Watch('value')\n  @Watch('orientation')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n\n    this.bqTabElements.forEach((bqTabElement) => {\n      bqTabElement.size = this.size;\n      bqTabElement.orientation = this.orientation;\n      bqTabElement.placement = this.placement;\n      bqTabElement.active = !isNil(this.value) ? bqTabElement.tabId === this.value : false;\n    });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the tab value changes */\n  @Event() bqChange: EventEmitter<{ target: HTMLBqTabElement; value: string }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkDebounceChange();\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('keyup', { target: 'body', passive: true, capture: true })\n  onKeyUp(event: KeyboardEvent) {\n    const { target } = event;\n    if (!isHTMLElement(target, 'bq-tab')) return;\n\n    this.makeTabsFocusable();\n  }\n\n  @Listen('bqClick', { passive: true })\n  onBqClick(event: CustomEvent<HTMLBqTabElement>) {\n    const { detail: target } = event;\n    this.bqTabElements.forEach((bqTabElement) => {\n      bqTabElement.active = bqTabElement === target;\n    });\n    this.debouncedBqChange({ value: target.tabId, target });\n    this.selectTab(target);\n  }\n\n  @Listen('bqKeyDown', { passive: true })\n  async onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n    const { target } = event;\n\n    // NOTE: ensures the target is an HTML element with the tag name 'bq-tab'\n    if (!isHTMLElement(target, 'bq-tab')) return;\n\n    const keyActions: { [key: string]: 'forward' | 'backward' } = {\n      ArrowDown: 'forward',\n      ArrowRight: 'forward',\n      ArrowUp: 'backward',\n      ArrowLeft: 'backward',\n    };\n\n    // NOTE: gets the direction based on key pressed\n    const direction = keyActions[event.detail.key];\n\n    if (!direction) return;\n\n    await this.focusTabSibling(target, direction);\n  }\n\n  @Listen('bqBlur', { capture: true, passive: true })\n  onBqBlur() {\n    this.restoreTabsFocus();\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private focusTabSibling = async (\n    currentTarget: HTMLBqTabElement,\n    direction: 'forward' | 'backward',\n  ): Promise<void> => {\n    let target: HTMLBqTabElement | null = null;\n\n    this.bqTabElements.forEach((bqTabElement, index, elements) => {\n      bqTabElement.active = false;\n\n      if (bqTabElement === currentTarget) {\n        target = getNextElement(elements, index, direction);\n      }\n    });\n\n    if (target) {\n      await target.vFocus();\n      this.selectTab(target);\n    }\n  };\n\n  private makeTabsFocusable = (): void => {\n    this.bqTabElements.forEach((bqTabElement) => {\n      if (bqTabElement.disabled) return;\n\n      /**\n       * This is a \"fire and forget\" operation. The callback itself doesn't do anything special\n       * with the asynchronous code (doesn't await it or do anything with the result)\n       * Details: https://stackoverflow.com/a/63488201\n       */\n      (async () => {\n        await bqTabElement.enableFocus(true);\n      })();\n    });\n  };\n\n  private restoreTabsFocus = (): void => {\n    this.bqTabElements.forEach((bqTabElement) => {\n      if (bqTabElement.disabled || bqTabElement.active) return;\n\n      /** @See line #173 */\n      (async () => {\n        await bqTabElement.enableFocus(false);\n      })();\n    });\n  };\n\n  private get bqTabElements(): HTMLBqTabElement[] {\n    return Array.from(this.el.querySelectorAll('bq-tab'));\n  }\n\n  private selectTab = (target: HTMLBqTabElement): void => {\n    const { tabId } = target;\n    target.active = true;\n    this.value = tabId;\n    this.debouncedBqChange({ value: tabId, target });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host class={{ 'inline-block': this.orientation === 'vertical' }}>\n        <div\n          class={{\n            [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} is-full flex`]: true,\n            'no-divider': this.disableDivider,\n          }}\n          part=\"base\"\n        >\n          <div\n            class={{\n              'bq-tab-group--container flex overflow-x-auto': true,\n              'flex-col': this.orientation !== 'horizontal',\n            }}\n            part=\"tabs\"\n            role=\"tablist\"\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-tab-group.cjs.entry.js","mappings":"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","names":["debounce","validatePropValue","TAB_SIZE","TAB_ORIENTATION","TAB_PLACEMENT","isNil","isHTMLElement","getNextElement","h","Host"],"sources":["../../packages/beeq/src/components/tab-group/scss/bq-tab-group.scss?tag=bq-tab-group&encapsulation=shadow","../../packages/beeq/src/components/tab-group/bq-tab-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Tab styles                               */\n/* -------------------------------------------------------------------------- */\n\n:host {\n  @apply block;\n}\n\n.bq-tab-group {\n  @apply relative;\n\n  &::after {\n    @apply absolute flex border-0 border-solid border-primary content-empty;\n  }\n\n  &--horizontal-start,\n  &--horizontal-end {\n    &::after {\n      @apply is-full inset-be-0 [border-block-end-width:--bq-stroke-s];\n    }\n  }\n\n  &--horizontal-start {\n    @apply justify-start;\n  }\n\n  &--horizontal-end {\n    @apply justify-end;\n  }\n\n  &--vertical-start::after {\n    @apply end-0 bs-full is-0 [border-block-end-width:0px] [border-inline-end-width:--bq-stroke-s];\n  }\n\n  &--vertical-end::after {\n    @apply start-0 bs-full is-0 [border-block-end-width:0px] [border-inline-start-width:--bq-stroke-s];\n  }\n}\n\n.bq-tab-group.no-divider {\n  &::after {\n    @apply content-none;\n  }\n}\n\n.bq-tab-group--container {\n  @include hide-scrollbar;\n  @apply gap-xs2 p-xs2; // This will avoid cutting the outline focus style\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Host, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport { debounce, getNextElement, isHTMLElement, isNil, type TDebounce, validatePropValue } from '../../shared/utils';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from '../tab/bq-tab.types';\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from '../tab/bq-tab.types';\n\n/**\n * The tab group is a user interface element that allows users wrap a set of tab items.\n *\n * @example How to use it\n * ```html\n * <bq-tab-group value=\"5\">\n *   <bq-tab tab-id=\"1\">Tab</bq-tab>\n *   <bq-tab tab-id=\"2\" active>Tab</bq-tab>\n *   <bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n *   <bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n * </bq-tab-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n *\n * @attr {number} debounce-time - A number representing the delay value applied to bqChange event handler\n * @attr {boolean} disable-divider - If true, the underline divider below the tabs won't be shown\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} value - A string representing the id of the selected tab.\n *\n * @event bqChange - Handler to be called when the tab value changes\n *\n * @slot - The bq-tab items\n *\n * @part base - The HTML div wrapper inside the shadow DOM.\n * @part tabs - The HTML div used to hold the tab buttons.\n */\n@Component({\n  tag: 'bq-tab-group',\n  styleUrl: './scss/bq-tab-group.scss',\n  shadow: true,\n})\nexport class BqTabGroup {\n  // Own Properties\n  // ====================\n\n  private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqTabElement }>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTabGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** A number representing the delay value applied to bqChange event handler */\n  @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n  /** If true, the underline divider below the tabs won't be shown  */\n  @Prop({ reflect: true }) disableDivider = false;\n\n  /** The direction that tab should be render */\n  @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n  /** The placement that tab should be render */\n  @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n  /** The size of the tab */\n  @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n  /** A string representing the id of the selected tab. */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('debounceTime')\n  checkDebounceChange() {\n    if (this.debounceTime < 0) {\n      this.debounceTime = Math.max(0, this.debounceTime);\n    }\n\n    if (this.debouncedBqChange) {\n      this.debouncedBqChange.cancel();\n    }\n\n    this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n      this.bqChange.emit(event);\n    }, this.debounceTime);\n  }\n\n  @Watch('size')\n  @Watch('value')\n  @Watch('orientation')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n\n    this.bqTabElements.forEach((bqTabElement) => {\n      bqTabElement.size = this.size;\n      bqTabElement.orientation = this.orientation;\n      bqTabElement.placement = this.placement;\n      bqTabElement.active = !isNil(this.value) ? bqTabElement.tabId === this.value : false;\n    });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the tab value changes */\n  @Event() bqChange: EventEmitter<{ target: HTMLBqTabElement; value: string }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkDebounceChange();\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('keyup', { target: 'body', passive: true, capture: true })\n  onKeyUp(event: KeyboardEvent) {\n    const { target } = event;\n    if (!isHTMLElement(target, 'bq-tab')) return;\n\n    this.makeTabsFocusable();\n  }\n\n  @Listen('bqClick', { passive: true })\n  onBqClick(event: CustomEvent<HTMLBqTabElement>) {\n    const { detail: target } = event;\n    this.bqTabElements.forEach((bqTabElement) => {\n      bqTabElement.active = bqTabElement === target;\n    });\n    this.debouncedBqChange({ value: target.tabId, target });\n    this.selectTab(target);\n  }\n\n  @Listen('bqKeyDown', { passive: true })\n  async onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n    const { target } = event;\n\n    // NOTE: ensures the target is an HTML element with the tag name 'bq-tab'\n    if (!isHTMLElement(target, 'bq-tab')) return;\n\n    const keyActions: { [key: string]: 'forward' | 'backward' } = {\n      ArrowDown: 'forward',\n      ArrowRight: 'forward',\n      ArrowUp: 'backward',\n      ArrowLeft: 'backward',\n    };\n\n    // NOTE: gets the direction based on key pressed\n    const direction = keyActions[event.detail.key];\n\n    if (!direction) return;\n\n    await this.focusTabSibling(target, direction);\n  }\n\n  @Listen('bqBlur', { capture: true, passive: true })\n  onBqBlur() {\n    this.restoreTabsFocus();\n  }\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private focusTabSibling = async (\n    currentTarget: HTMLBqTabElement,\n    direction: 'forward' | 'backward',\n  ): Promise<void> => {\n    let target: HTMLBqTabElement | null = null;\n\n    this.bqTabElements.forEach((bqTabElement, index, elements) => {\n      bqTabElement.active = false;\n\n      if (bqTabElement === currentTarget) {\n        target = getNextElement(elements, index, direction);\n      }\n    });\n\n    if (target) {\n      await target.vFocus();\n      this.selectTab(target);\n    }\n  };\n\n  private makeTabsFocusable = (): void => {\n    this.bqTabElements.forEach((bqTabElement) => {\n      if (bqTabElement.disabled) return;\n\n      /**\n       * This is a \"fire and forget\" operation. The callback itself doesn't do anything special\n       * with the asynchronous code (doesn't await it or do anything with the result)\n       * Details: https://stackoverflow.com/a/63488201\n       */\n      (async () => {\n        await bqTabElement.enableFocus(true);\n      })();\n    });\n  };\n\n  private restoreTabsFocus = (): void => {\n    this.bqTabElements.forEach((bqTabElement) => {\n      if (bqTabElement.disabled || bqTabElement.active) return;\n\n      /** @See line #173 */\n      (async () => {\n        await bqTabElement.enableFocus(false);\n      })();\n    });\n  };\n\n  private get bqTabElements(): HTMLBqTabElement[] {\n    return Array.from(this.el.querySelectorAll('bq-tab'));\n  }\n\n  private selectTab = (target: HTMLBqTabElement): void => {\n    const { tabId } = target;\n    target.active = true;\n    this.value = tabId;\n    this.debouncedBqChange({ value: tabId, target });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host class={{ 'inline-block': this.orientation === 'vertical' }}>\n        <div\n          class={{\n            [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} is-full flex`]: true,\n            'no-divider': this.disableDivider,\n          }}\n          part=\"base\"\n        >\n          <div\n            class={{\n              'bq-tab-group--container flex overflow-x-auto': true,\n              'flex-col': this.orientation !== 'horizontal',\n            }}\n            part=\"tabs\"\n            role=\"tablist\"\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bq-tab.cjs.entry.js

@@ -4,8 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-BwvwUnfB.js');
-var index$1 = require('./index-C09ZVaB4.js');
+var index = require('./index-Bp6IQmE_.js');
 var props = require('./props-DzFXZXSF.js');
 var slot = require('./slot-DKWrtk4b.js');
 var bqTab_types = require('./bq-tab.types-EbesjHYK.js');
@@ -137,15 +136,15 @@ const BqTab = class {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (index$1.jsx("button", { "aria-controls": this.controls, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: {
+        return (index.h("button", { key: '67d13243231a5a295cea5721de40176c01ca2779', "aria-controls": this.controls, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: {
                 [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,
                 'text-brand': this.active,
                 'text-primary': !this.active,
             }, disabled: this.disabled, id: this.tabId, onBlur: this.handleOnBlur, onClick: this.handleClick, onFocus: this.handleOnFocus, onKeyDown: this.handleOnKeyDown, part: "base", ref: (el) => {
                 this.buttonElement = el;
-            }, role: "tab", tabindex: this.tabindex, type: "button", children: index$1.jsxs("div", { class: "flex items-center justify-center", part: "content", children: [index$1.jsx("div", { class: "flex", part: "icon", ref: (span) => {
-                            this.iconElement = span;
-                        }, children: index$1.jsx("slot", { name: "icon", onSlotchange: this.handleIconSlotChange }, '144351d38ab99d788f2c04d286c81e19263abbcf') }, '5462cbb560afa80f0d8b22d9c847c2fbf1348d00'), index$1.jsx("div", { class: { 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }, part: "text", children: index$1.jsx("slot", {}, '37ab727d5173f02cbc051929c3efed8978848be9') }, 'a9766b4227fa5a523e68a60f70832823de767443')] }, '367f49f97fe2efb9cabc01c2419294be2877c07f') }, '9e4ce6f25820c62647bc3e287b10aeb8a96503c9'));
+            }, role: "tab", tabindex: this.tabindex, type: "button" }, index.h("div", { key: '07fd9dd3899db73193c2ce3b2a86294f46ce7834', class: "flex items-center justify-center", part: "content" }, index.h("div", { key: '54247124e7e7b97960f546ae7153520dd5da8807', class: "flex", part: "icon", ref: (span) => {
+                this.iconElement = span;
+            } }, index.h("slot", { key: 'e1fcf248349ca01377b81f98232bf6d492c4ca0d', name: "icon", onSlotchange: this.handleIconSlotChange })), index.h("div", { key: 'dc586c86b73893b95d6c83279d2b0357fe2c4714', class: { 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }, part: "text" }, index.h("slot", { key: '64c05d3cea1c8d39dade0b3b08ea3e6eabd14c27' })))));
     }
     static get watchers() { return {
         "size": [{

package/dist/cjs/bq-tab.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bq-tab.cjs.entry.js","mappings":"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","names":["validatePropValue","TAB_SIZE","TAB_ORIENTATION","TAB_PLACEMENT","hasSlotContent","_jsx","_jsxs"],"sources":["../../packages/beeq/src/components/tab/scss/bq-tab.scss?tag=bq-tab&encapsulation=shadow","../../packages/beeq/src/components/tab/bq-tab.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Tab styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tab.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-tab {\n  @apply relative flex cursor-pointer items-center justify-center rounded-s disabled:cursor-not-allowed disabled:opacity-60;\n  @apply text-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&:not([disabled])]:hover:bg-hover-ui-primary [&:not([disabled])]:hover:text-hover-brand;\n  @apply border-0 bg-transparent focus-visible:focus;\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n\n  &::after {\n    @apply absolute z-[1] block bg-brand opacity-0 content-empty -inset-be-1;\n    @apply transition-opacity duration-300 ease-linear;\n  }\n\n  &--horizontal-start,\n  &--horizontal-end {\n    &::after {\n      /**\n     * This hack will make the underline larger so it fits till the tab bar edges for the first and last tab button,\n     * because the parent container applies some padding to not cut the focus outline style.\n     */\n      @apply -start-xs3 bs-[2px] is-[calc(100%_+_var(--bq-spacing-xs2))];\n    }\n  }\n\n  &--vertical-start {\n    @apply justify-end is-full;\n\n    &::after {\n      @apply -end-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n    }\n  }\n\n  &--vertical-end {\n    @apply justify-start is-full;\n\n    &::after {\n      @apply -start-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n    }\n  }\n\n  &[aria-selected='true']::after {\n    @apply opacity-100;\n  }\n\n  &--small {\n    @apply p-b-[--bq-tab--padding-vertical-small] p-i-[--bq-tab--padding-horizontal-small];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-small) #{!important};\n    }\n  }\n\n  &--medium {\n    @apply p-b-[--bq-tab--padding-vertical-medium] p-i-[--bq-tab--padding-horizontal-medium];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-medium) #{!important};\n    }\n  }\n\n  &--large {\n    @apply text-l p-b-[--bq-tab--padding-vertical-large] p-i-[--bq-tab--padding-horizontal-large];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-large) #{!important};\n    }\n  }\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from './bq-tab.types';\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from './bq-tab.types';\n\n/**\n * The tab is a user interface element that allows users to navigate between different sections of a page.\n * It should be used inside `<bq-tab-group>` component.\n *\n * @example How to use it\n * ```html\n * <bq-tab tab-id=\"1\" controls=\"panel-1\">Tab 1</bq-tab>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n *\n * @attr {boolean} active - If `true` tab is active\n * @attr {string} controls - The tab panel id that the tab controls\n * @attr {boolean} disabled - If `true` tab is disabled\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} tab-id - The id of the tab\n *\n * @event bqClick - Handler to be called when the tab state changes\n * @event bqFocus - Handler to be called when the tab gets focus\n * @event bqBlur - Handler to be called when the tab loses focus\n * @event bqKeyDown - Handler to be called when the tab key is pressed\n *\n * @method vClick - Simulate a click event on the native `<button>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<button>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<button>` HTML element used under the hood\n *\n * @part base - The HTML button used under the hood.\n * @part content - The HTML `<div>` element that holds the content.\n * @part icon - The HTML `<div>` element that holds the icon content.\n * @part text - The HTML `<div>` element that holds the text content.\n * @part underline - The HTML `<div>` element that display active state.\n *\n * @cssprop --bq-tab--font-size - Font size\n * @cssprop --bq-tab--font-weight - Font weight\n * @cssprop --bq-tab--icon-size-large - Icon size for large tab\n * @cssprop --bq-tab--icon-size-medium - Icon size for medium tab\n * @cssprop --bq-tab--icon-size-small - Icon size for small tab\n * @cssprop --bq-tab--label-icon-gap - Gap between label and icon\n * @cssprop --bq-tab--line-height - Line height\n * @cssprop --bq-tab--padding-horizontal-large - Horizontal padding for large tab\n * @cssprop --bq-tab--padding-horizontal-medium - Horizontal padding for medium tab\n * @cssprop --bq-tab--padding-horizontal-small - Horizontal padding for small tab\n * @cssprop --bq-tab--padding-vertical-large - Vertical padding for large tab\n * @cssprop --bq-tab--padding-vertical-medium - Vertical padding for medium tab\n * @cssprop --bq-tab--padding-vertical-small - Vertical padding for small tab\n */\n@Component({\n  tag: 'bq-tab',\n  styleUrl: './scss/bq-tab.scss',\n  shadow: true,\n})\nexport class BqTab {\n  // Own Properties\n  // ====================\n\n  private buttonElement: HTMLButtonElement;\n  private iconElement: HTMLSpanElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTabElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() tabIndex: number | null = null;\n  @State() hasIcon: boolean = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true tab is active */\n  @Prop({ reflect: true, mutable: true }) active?: boolean;\n\n  /** The tab panel id that the tab controls */\n  @Prop({ reflect: true }) controls!: string;\n\n  /** If true tab is disabled */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The direction that tab should be render */\n  @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n  /** The placement that tab should be render */\n  @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n  /** The size of the tab */\n  @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n  /** The id of the tab */\n  @Prop({ reflect: true }) tabId!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('orientation')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the tab state changes */\n  @Event() bqClick: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab key is pressed */\n  @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleIconSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n  /**\n   * Simulate a click event on the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.buttonElement?.click();\n  }\n\n  /**\n   * Sets focus on the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.buttonElement?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.buttonElement?.blur();\n  }\n\n  /**\n   * @internal Sets tabindex on the native `<button>` HTML element used under the hood.\n   * This method is used inside `<bq-tab-group>` to make tab focusable after the active one is focused\n   */\n  @Method()\n  async enableFocus(value: boolean) {\n    this.tabIndex = value ? 0 : null;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClick = () => {\n    this.active = true;\n    this.bqClick.emit(this.el);\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleOnKeyDown = (event: KeyboardEvent) => {\n    this.bqKeyDown.emit(event);\n  };\n\n  private handleIconSlotChange = () => {\n    this.hasIcon = hasSlotContent(this.iconElement, 'icon');\n  };\n\n  private get tabindex(): string {\n    // NOTE: this.active is undefined when is not part of bq-tab-group\n    return `${this.tabIndex ?? -1 + +(this.active ?? 1)}`;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <button\n        aria-controls={this.controls}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-selected={this.active ? 'true' : 'false'}\n        class={{\n          [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,\n          'text-brand': this.active,\n          'text-primary': !this.active,\n        }}\n        disabled={this.disabled}\n        id={this.tabId}\n        onBlur={this.handleOnBlur}\n        onClick={this.handleClick}\n        onFocus={this.handleOnFocus}\n        onKeyDown={this.handleOnKeyDown}\n        part=\"base\"\n        ref={(el) => {\n          this.buttonElement = el;\n        }}\n        role=\"tab\"\n        tabindex={this.tabindex}\n        type=\"button\"\n      >\n        <div class=\"flex items-center justify-center\" part=\"content\">\n          <div\n            class=\"flex\"\n            part=\"icon\"\n            ref={(span: HTMLSpanElement) => {\n              this.iconElement = span;\n            }}\n          >\n            <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n          </div>\n          <div class={{ 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }} part=\"text\">\n            <slot />\n          </div>\n        </div>\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-tab.cjs.entry.js","mappings":"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","names":["validatePropValue","TAB_SIZE","TAB_ORIENTATION","TAB_PLACEMENT","hasSlotContent","h"],"sources":["../../packages/beeq/src/components/tab/scss/bq-tab.scss?tag=bq-tab&encapsulation=shadow","../../packages/beeq/src/components/tab/bq-tab.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Tab styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tab.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-tab {\n  @apply relative flex cursor-pointer items-center justify-center rounded-s disabled:cursor-not-allowed disabled:opacity-60;\n  @apply text-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&:not([disabled])]:hover:bg-hover-ui-primary [&:not([disabled])]:hover:text-hover-brand;\n  @apply border-0 bg-transparent focus-visible:focus;\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n\n  &::after {\n    @apply absolute z-[1] block bg-brand opacity-0 content-empty -inset-be-1;\n    @apply transition-opacity duration-300 ease-linear;\n  }\n\n  &--horizontal-start,\n  &--horizontal-end {\n    &::after {\n      /**\n     * This hack will make the underline larger so it fits till the tab bar edges for the first and last tab button,\n     * because the parent container applies some padding to not cut the focus outline style.\n     */\n      @apply -start-xs3 bs-[2px] is-[calc(100%_+_var(--bq-spacing-xs2))];\n    }\n  }\n\n  &--vertical-start {\n    @apply justify-end is-full;\n\n    &::after {\n      @apply -end-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n    }\n  }\n\n  &--vertical-end {\n    @apply justify-start is-full;\n\n    &::after {\n      @apply -start-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n    }\n  }\n\n  &[aria-selected='true']::after {\n    @apply opacity-100;\n  }\n\n  &--small {\n    @apply p-b-[--bq-tab--padding-vertical-small] p-i-[--bq-tab--padding-horizontal-small];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-small) #{!important};\n    }\n  }\n\n  &--medium {\n    @apply p-b-[--bq-tab--padding-vertical-medium] p-i-[--bq-tab--padding-horizontal-medium];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-medium) #{!important};\n    }\n  }\n\n  &--large {\n    @apply text-l p-b-[--bq-tab--padding-vertical-large] p-i-[--bq-tab--padding-horizontal-large];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-large) #{!important};\n    }\n  }\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from './bq-tab.types';\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from './bq-tab.types';\n\n/**\n * The tab is a user interface element that allows users to navigate between different sections of a page.\n * It should be used inside `<bq-tab-group>` component.\n *\n * @example How to use it\n * ```html\n * <bq-tab tab-id=\"1\" controls=\"panel-1\">Tab 1</bq-tab>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n *\n * @attr {boolean} active - If `true` tab is active\n * @attr {string} controls - The tab panel id that the tab controls\n * @attr {boolean} disabled - If `true` tab is disabled\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} tab-id - The id of the tab\n *\n * @event bqClick - Handler to be called when the tab state changes\n * @event bqFocus - Handler to be called when the tab gets focus\n * @event bqBlur - Handler to be called when the tab loses focus\n * @event bqKeyDown - Handler to be called when the tab key is pressed\n *\n * @method vClick - Simulate a click event on the native `<button>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<button>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<button>` HTML element used under the hood\n *\n * @part base - The HTML button used under the hood.\n * @part content - The HTML `<div>` element that holds the content.\n * @part icon - The HTML `<div>` element that holds the icon content.\n * @part text - The HTML `<div>` element that holds the text content.\n * @part underline - The HTML `<div>` element that display active state.\n *\n * @cssprop --bq-tab--font-size - Font size\n * @cssprop --bq-tab--font-weight - Font weight\n * @cssprop --bq-tab--icon-size-large - Icon size for large tab\n * @cssprop --bq-tab--icon-size-medium - Icon size for medium tab\n * @cssprop --bq-tab--icon-size-small - Icon size for small tab\n * @cssprop --bq-tab--label-icon-gap - Gap between label and icon\n * @cssprop --bq-tab--line-height - Line height\n * @cssprop --bq-tab--padding-horizontal-large - Horizontal padding for large tab\n * @cssprop --bq-tab--padding-horizontal-medium - Horizontal padding for medium tab\n * @cssprop --bq-tab--padding-horizontal-small - Horizontal padding for small tab\n * @cssprop --bq-tab--padding-vertical-large - Vertical padding for large tab\n * @cssprop --bq-tab--padding-vertical-medium - Vertical padding for medium tab\n * @cssprop --bq-tab--padding-vertical-small - Vertical padding for small tab\n */\n@Component({\n  tag: 'bq-tab',\n  styleUrl: './scss/bq-tab.scss',\n  shadow: true,\n})\nexport class BqTab {\n  // Own Properties\n  // ====================\n\n  private buttonElement: HTMLButtonElement;\n  private iconElement: HTMLSpanElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTabElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() tabIndex: number | null = null;\n  @State() hasIcon: boolean = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true tab is active */\n  @Prop({ reflect: true, mutable: true }) active?: boolean;\n\n  /** The tab panel id that the tab controls */\n  @Prop({ reflect: true }) controls!: string;\n\n  /** If true tab is disabled */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The direction that tab should be render */\n  @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n  /** The placement that tab should be render */\n  @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n  /** The size of the tab */\n  @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n  /** The id of the tab */\n  @Prop({ reflect: true }) tabId!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('orientation')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the tab state changes */\n  @Event() bqClick: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab key is pressed */\n  @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleIconSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n  /**\n   * Simulate a click event on the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.buttonElement?.click();\n  }\n\n  /**\n   * Sets focus on the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.buttonElement?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.buttonElement?.blur();\n  }\n\n  /**\n   * @internal Sets tabindex on the native `<button>` HTML element used under the hood.\n   * This method is used inside `<bq-tab-group>` to make tab focusable after the active one is focused\n   */\n  @Method()\n  async enableFocus(value: boolean) {\n    this.tabIndex = value ? 0 : null;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClick = () => {\n    this.active = true;\n    this.bqClick.emit(this.el);\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleOnKeyDown = (event: KeyboardEvent) => {\n    this.bqKeyDown.emit(event);\n  };\n\n  private handleIconSlotChange = () => {\n    this.hasIcon = hasSlotContent(this.iconElement, 'icon');\n  };\n\n  private get tabindex(): string {\n    // NOTE: this.active is undefined when is not part of bq-tab-group\n    return `${this.tabIndex ?? -1 + +(this.active ?? 1)}`;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <button\n        aria-controls={this.controls}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-selected={this.active ? 'true' : 'false'}\n        class={{\n          [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,\n          'text-brand': this.active,\n          'text-primary': !this.active,\n        }}\n        disabled={this.disabled}\n        id={this.tabId}\n        onBlur={this.handleOnBlur}\n        onClick={this.handleClick}\n        onFocus={this.handleOnFocus}\n        onKeyDown={this.handleOnKeyDown}\n        part=\"base\"\n        ref={(el) => {\n          this.buttonElement = el;\n        }}\n        role=\"tab\"\n        tabindex={this.tabindex}\n        type=\"button\"\n      >\n        <div class=\"flex items-center justify-center\" part=\"content\">\n          <div\n            class=\"flex\"\n            part=\"icon\"\n            ref={(span: HTMLSpanElement) => {\n              this.iconElement = span;\n            }}\n          >\n            <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n          </div>\n          <div class={{ 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }} part=\"text\">\n            <slot />\n          </div>\n        </div>\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bq-textarea.cjs.entry.js

@@ -4,8 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-BwvwUnfB.js');
-var index$1 = require('./index-C09ZVaB4.js');
+var index = require('./index-Bp6IQmE_.js');
 var debounce = require('./debounce-D0tIpUuS.js');
 var isHTMLElement = require('./isHTMLElement-CtkOWsTF.js');
 var isNil = require('./isNil-CFhdj92S.js');
@@ -250,21 +249,21 @@ const BqTextarea = class {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (index$1.jsxs("div", { class: "bq-textarea flex flex-auto flex-col", part: "base", children: [index$1.jsx("label", { "aria-label": this.name ?? this.fallbackId, class: { 'bq-textarea__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name ?? this.fallbackId, part: "label", ref: (label) => {
-                        this.labelElem = label;
-                    }, children: index$1.jsx("slot", { name: "label", onSlotchange: this.handleSlotChange }, '6d02974de11bf31ebb6da60e7608b659ac2d462d') }, '8121cff062625dc74d01afe61afd734cbda953ac'), index$1.jsx("textarea", { autocapitalize: this.autocapitalize, autocomplete: this.autocomplete, autofocus: this.autofocus, class: {
-                        'bq-textarea__input': true,
-                        'resize-none': this.disableResize,
-                        [`validation-${this.validationStatus}`]: true,
-                    }, disabled: this.disabled, form: this.form, id: this.name ?? this.fallbackId, maxLength: this.maxlength > 0 ? this.maxlength : undefined, name: this.name, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, onInput: this.handleInput, part: "input", placeholder: this.placeholder, readOnly: this.readonly, ref: (elem) => {
-                        this.textarea = elem;
-                    }, required: this.required, rows: this.rows, spellcheck: this.spellcheck, wrap: this.wrap, children: this.value }, '28fd67642c49deae46c0e8966df132b752b56725'), index$1.jsxs("div", { class: {
-                        'bq-textarea__helper flex items-center justify-between': true,
-                        [`validation-${this.validationStatus}`]: true,
-                        '!hidden': !this.hasHelperText && !this.maxlength,
-                    }, part: "helper-info", children: [index$1.jsx("span", { class: "bq-textarea__helper--text", part: "helper-text", ref: (span) => {
-                                this.helperTextElem = span;
-                            }, children: index$1.jsx("slot", { name: "helper-text", onSlotchange: this.handleSlotChange }, '31765c8f2f546ffbc95ba26c50830ff86d84d062') }, 'e331426d3eec275ccaa37c451968cf3c6d1beb67'), index$1.jsxs("span", { class: { 'bq-textarea__helper--counter [fontVariant:tabular-nums]': true, '!hidden': !this.maxlength }, part: "helper-counter", children: [this.numberOfCharacters ?? 0, "/", this.maxlength] }, '050123325d09fbadee93eda14b406012faaa998b')] }, '2eb37a48714447275eea400a61f78785ba824cf2')] }, '79dbf4a3fefa9a9ecc04cfe88a789bfc832a40c6'));
+        return (index.h("div", { key: 'e3d5a7f7e29000b2959b5c1946f8227046915754', class: "bq-textarea flex flex-auto flex-col", part: "base" }, index.h("label", { key: '48ac0c9258331b1d44a4afe1803f30a9bc42e0d2', "aria-label": this.name ?? this.fallbackId, class: { 'bq-textarea__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name ?? this.fallbackId, part: "label", ref: (label) => {
+                this.labelElem = label;
+            } }, index.h("slot", { key: 'b1b88f2b474ab4965f05361a7877c6696b4db96e', name: "label", onSlotchange: this.handleSlotChange })), index.h("textarea", { key: '79fef7eb93fb8021d1a2291a9a2c9aa7594f8fd0', autocapitalize: this.autocapitalize, autocomplete: this.autocomplete, autofocus: this.autofocus, class: {
+                'bq-textarea__input': true,
+                'resize-none': this.disableResize,
+                [`validation-${this.validationStatus}`]: true,
+            }, disabled: this.disabled, form: this.form, id: this.name ?? this.fallbackId, maxLength: this.maxlength > 0 ? this.maxlength : undefined, name: this.name, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, onInput: this.handleInput, part: "input", placeholder: this.placeholder, readOnly: this.readonly, ref: (elem) => {
+                this.textarea = elem;
+            }, required: this.required, rows: this.rows, spellcheck: this.spellcheck, wrap: this.wrap }, this.value), index.h("div", { key: 'ccf267c2b3bd8daaa6b9192a17c63b881d5b6f0f', class: {
+                'bq-textarea__helper flex items-center justify-between': true,
+                [`validation-${this.validationStatus}`]: true,
+                '!hidden': !this.hasHelperText && !this.maxlength,
+            }, part: "helper-info" }, index.h("span", { key: 'cd852d5dec02f6db0d18c011929bffcdf780ecdd', class: "bq-textarea__helper--text", part: "helper-text", ref: (span) => {
+                this.helperTextElem = span;
+            } }, index.h("slot", { key: '74d0affa4d84369647794f3a5cf014c5c1939974', name: "helper-text", onSlotchange: this.handleSlotChange })), index.h("span", { key: '2ab7e59c29ed618d7e5110622aa253eadd11fd0a', class: { 'bq-textarea__helper--counter [fontVariant:tabular-nums]': true, '!hidden': !this.maxlength }, part: "helper-counter" }, this.numberOfCharacters ?? 0, "/", this.maxlength))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/cjs/bq-textarea.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bq-textarea.cjs.entry.js","mappings":"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","names":["isHTMLElement","debounce","hasSlotContent","isNil","_jsxs","_jsx"],"sources":["../../packages/beeq/src/components/textarea/scss/bq-textarea.scss?tag=bq-textarea&encapsulation=shadow","../../packages/beeq/src/components/textarea/bq-textarea.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Textarea styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-textarea.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__label {\n  @apply text-[length:--bq-textarea--label-text-size] text-[color:--bq-textarea--label-text-color] m-be-[--bq-textarea--label-margin-bottom];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                        Native HTML Textarea control                        */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__input {\n  @apply flex-auto resize-y bg-[--bq-textarea--background-color] bs-[inherit];\n  // Border\n  @apply rounded-[--bq-textarea--border-radius] border-[length:--bq-textarea--border-width] border-[color:--bq-textarea--border-color];\n  // Padding\n  @apply pe-[--bq-textarea--padding-end] ps-[--bq-textarea--padding-start] p-b-[--bq-textarea--paddingY];\n  // Text\n  @apply text-[length:--bq-textarea--text-size] text-[color:--bq-textarea--text-color] placeholder:text-[color:--bq-textarea--text-placeholder-color];\n  // Transition\n  @apply transition-colors ease-in-out;\n  // Hover\n  @apply [&:not([disabled]):not(:focus-within)]:hover:border-hover-brand;\n  // Disabled\n  @apply disabled:cursor-not-allowed disabled:opacity-60;\n  // Focus\n  &:not([disabled]):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-textarea--border-color-focus);\n\n    @apply focus border-[color:--bq-ring-color-focus];\n  }\n}\n\n/* ------------------------------- Validations ------------------------------- */\n\n.bq-textarea__input.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-textarea__input.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-textarea__input.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 Helper text                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__helper {\n  @apply text-[length:--bq-textarea--helper-text-size] text-[color:--bq-textarea--helper-text-color] m-bs-[--bq-textarea--helper-margin-top];\n}\n\n/* ------------------------------- Validations ------------------------------ */\n\n.bq-textarea__helper.validation-error {\n  @apply text-danger;\n}\n\n.bq-textarea__helper.validation-success {\n  @apply text-success;\n}\n\n.bq-textarea__helper.validation-warning {\n  @apply text-warning;\n}\n\n/* ----------------------------- Helper counter ----------------------------- */\n\n/** Apply a disabled text color style to the textarea counter when the validation is none. */\n.bq-textarea__helper[class~='validation-none'] {\n  .bq-textarea__helper--counter {\n    @apply opacity-60;\n  }\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Prop, State, Watch } from '@stencil/core';\n\nimport { debounce, hasSlotContent, isHTMLElement, isNil, type TDebounce } from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\nimport type { TTextareaAutoCapitalize, TTextareaWrap } from './bq-textarea.types';\n\n/**\n * The Textarea component is a multi-line text input control that is often used in a form to collect user inputs like comments or reviews.\n *\n * @example How to use it\n * ```html\n * <bq-textarea maxlength=\"0\" name=\"textarea\" placeholder=\"Placeholder...\" rows=\"5\">\n *   <label slot=\"label\">Label</label>\n *   <span class=\"flex items-center gap-xs\" slot=\"helper-text\">\n *     <bq-icon name=\"star\"></bq-icon>\n *     Helper text\n *   </span>\n * </bq-textarea>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/16792c-textarea\n * @status stable\n *\n * @attr {string} autocapitalize - Controls whether or not the textarea field should be capitalized and how.\n * @attr {string} autocomplete - Specifies whether or not the textarea field should have autocomplete enabled.\n * @attr {boolean} autofocus - If `true`, the textarea will be focused on component render.\n * @attr {boolean} auto-grow - If `true`, the textarea will automatically grow and shrink to fit its contents.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.\n * @attr {boolean} disabled - If `true`, the user cannot interact with the textarea.\n * @attr {boolean} disable-resize - If `true`, it will block the user's ability to resize the textarea.\n * @attr {string} form - The ID of the form that the textarea field belongs to.\n * @attr {string} form-validation-message - The native form validation message.\n * @attr {number} maxlength - The maximum number of characters that can be entered into the textarea (`0`: no limit).\n * @attr {string} name - The name of the textarea element.\n * @attr {string} placeholder - The placeholder text to show when there is no value.\n * @attr {boolean} readonly - If `true`, the textarea field cannot be modified.\n * @attr {boolean} required - Indicates whether or not the textarea field is required to be filled out before submitting the form.\n * @attr {number} rows - The number of visible text lines for the control. It must be a positive integer.\n * @attr {boolean} spellcheck - If `true`, the textarea content may be checked for spelling errors.\n * @attr {\"error\" | \"none\" | \"success\" | \"warning\"} validation-status - The validation status of the textarea.\n * @attr {string} value - The value of the textarea. It can be used to reset the textarea to a previous value.\n * @attr {\"soft\" | \"hard\"} wrap - Specifies how the text in a text area is to be wrapped when submitted in a form.\n *\n * @event bqBlur - Handler to be called when the textarea loses focus.\n * @event bqChange - Handler to be called when the textarea value has changed and the textarea loses focus.\n * @event bqClear - Handler to be called when the textarea value has been cleared.\n * @event bqFocus - Handler to be called when the textarea has received focus.\n * @event bqInput - Handler to be called when the textarea value changes.\n *\n * @slot label - The textarea label.\n * @slot helper-text - The helper text.\n *\n * @part base - The component's base wrapper.\n * @part input - The textarea element.\n * @part label - The textarea label.\n * @part helper-info - The helper info container.\n * @part helper-text - The helper text.\n * @part helper-counter - The helper counter.\n *\n * @cssprop --bq-textarea--background-color - Textarea background color\n * @cssprop --bq-textarea--border-color - Textarea border color\n * @cssprop --bq-textarea--border-color-focus - Textarea border color on focus\n * @cssprop --bq-textarea--border-radius - Textarea border radius\n * @cssprop --bq-textarea--border-width - Textarea border width\n * @cssprop --bq-textarea--border-style - Textarea border style\n * @cssprop --bq-textarea--helper-margin-top - Textarea helper text margin top\n * @cssprop --bq-textarea--helper-text-color - Textarea helper text color\n * @cssprop --bq-textarea--helper-text-size - Textarea helper text size\n * @cssprop --bq-textarea--label-margin-bottom - Textarea label margin bottom\n * @cssprop --bq-textarea--label-text-color - Textarea label text color\n * @cssprop --bq-textarea--label-text-size - Textarea label text size\n * @cssprop --bq-textarea--paddingY - Textarea padding top and bottom\n * @cssprop --bq-textarea--padding-start - Textarea padding start\n * @cssprop --bq-textarea--padding-end - Textarea padding end\n * @cssprop --bq-textarea--text-color - Textarea text color\n * @cssprop --bq-textarea--text-size - Textarea text size\n * @cssprop --bq-textarea--text-placeholder-color - Textarea placeholder text color\n */\n@Component({\n  tag: 'bq-textarea',\n  styleUrl: './scss/bq-textarea.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqTextarea {\n  // Own Properties\n  // ====================\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackId = 'textarea';\n\n  private helperTextElem?: HTMLElement;\n  private labelElem?: HTMLLabelElement;\n  private textarea: HTMLTextAreaElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqTextareaElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasHelperText = false;\n  @State() private hasLabel = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the textarea field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: TTextareaAutoCapitalize = 'off';\n\n  /**\n   * Specifies whether or not the textarea field should have autocomplete enabled.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /** If true, the textarea will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean = false;\n\n  /**\n   * If `true`, the textarea will automatically grow and shrink to fit its contents.\n   * If `false`, the textarea will have a fixed height specified by the `rows` property.\n   */\n  @Prop({ reflect: true }) autoGrow: boolean = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /** If `true`, the user cannot interact with the textarea. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** If `true`, it will block the user's ability to resize the textarea. */\n  @Prop({ reflect: true }) disableResize?: boolean = false;\n\n  /** The ID of the form that the textarea field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /**\n   * The maximum number of characters that can be entered into the textarea (`0`: no limit).\n   * When enabled, a character counter will be shown underneath the textarea.\n   */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /** The name of the textarea element. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The placeholder text to show when there is no value. */\n  @Prop({ reflect: true }) placeholder!: string;\n\n  /** If true, the textarea field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean = false;\n\n  /** Indicates whether or not the textarea field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean = false;\n\n  /** The number of visible text lines for the control. It must be a positive integer. */\n  @Prop({ reflect: true }) rows: number = 5;\n\n  /** If true, the textarea content may be checked for spelling errors. */\n  @Prop({ reflect: true }) spellcheck: boolean = false;\n\n  /**\n   * The validation status of the textarea.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the textarea. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The textarea has a validation error.\n   * - `'warning'`: The textarea has a validation warning.\n   * - `'success'`: The textarea has passed validation.\n   */\n  @Prop({ reflect: true, mutable: true }) validationStatus: TInputValidation = 'none';\n\n  /** The value of the textarea. It can be used to reset the textarea to a previous value. */\n  @Prop({ mutable: true }) value: string;\n\n  /** Specifies how the text in a text area is to be wrapped when submitted in a form */\n  @Prop({ reflect: true }) wrap: TTextareaWrap = 'soft';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.textarea) return;\n    if (!this.maxlength || this.value?.length < this.maxlength) return;\n    // If the value is longer than the maxlength, we need to truncate it\n    this.value = this.value?.substring(0, this.maxlength);\n    this.textarea.value = this.value ?? '';\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the textarea loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqTextareaElement>;\n\n  /**\n   * Callback handler emitted when the textarea value has changed and the textarea loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the textarea field and then clicks outside of the textarea field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n  /** Callback handler emitted when the textarea value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqTextareaElement>;\n\n  /** Callback handler emitted when the textarea has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqTextareaElement>;\n\n  /**\n   * Callback handler emitted when the textarea value changes.\n   * This handler is called whenever the user types or pastes text into the textarea field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n    this.handleValueChange();\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.value);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    this.clearSelection();\n    // Reset the form validity state\n    this.setFormValue();\n    this.updateFormValidity();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get numberOfCharacters() {\n    if (!this.maxlength || !this.textarea) return 0;\n\n    return this.value?.length;\n  }\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'textarea')) return;\n    this.value = ev.target.value;\n    this.setFormValue(this.value);\n    this.updateFormValidity();\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'textarea')) return;\n    this.value = ev.target.value;\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n\n    this.autoResize();\n  };\n\n  private autoResize = () => {\n    if (!this.autoGrow) return;\n\n    const inputElem = this.textarea;\n    if (!inputElem) return;\n\n    inputElem.style.height = 'auto';\n    inputElem.style.height = `${inputElem.scrollHeight}px`;\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  private setFormValue = (value?: string) => {\n    this.internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, value, textarea } = this;\n\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (required && (!value || value.trim() === '')) {\n      // Set validity state to invalid\n      internals?.states.add('invalid');\n      internals?.setValidity({ valueMissing: true }, formValidationMessage, textarea);\n      return;\n    }\n\n    // Set validity state to valid if textarea has value or is not required\n    internals?.states.add('valid');\n    internals?.setValidity({});\n  };\n\n  private clearSelection = () => {\n    this.value = '';\n    this.textarea.value = this.value;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-textarea flex flex-auto flex-col\" part=\"base\">\n        <label\n          aria-label={this.name ?? this.fallbackId}\n          class={{ 'bq-textarea__label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name ?? this.fallbackId}\n          part=\"label\"\n          ref={(label: HTMLLabelElement) => {\n            this.labelElem = label;\n          }}\n        >\n          <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n        </label>\n        <textarea\n          autocapitalize={this.autocapitalize}\n          autocomplete={this.autocomplete}\n          autofocus={this.autofocus}\n          class={{\n            'bq-textarea__input': true,\n            'resize-none': this.disableResize,\n            [`validation-${this.validationStatus}`]: true,\n          }}\n          disabled={this.disabled}\n          form={this.form}\n          id={this.name ?? this.fallbackId}\n          maxLength={this.maxlength > 0 ? this.maxlength : undefined}\n          name={this.name}\n          onBlur={this.handleBlur}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onInput={this.handleInput}\n          part=\"input\"\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          ref={(elem: HTMLTextAreaElement) => {\n            this.textarea = elem;\n          }}\n          required={this.required}\n          rows={this.rows}\n          spellcheck={this.spellcheck}\n          wrap={this.wrap}\n        >\n          {this.value}\n        </textarea>\n        <div\n          class={{\n            'bq-textarea__helper flex items-center justify-between': true,\n            [`validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText && !this.maxlength,\n          }}\n          part=\"helper-info\"\n        >\n          <span\n            class=\"bq-textarea__helper--text\"\n            part=\"helper-text\"\n            ref={(span: HTMLElement) => {\n              this.helperTextElem = span;\n            }}\n          >\n            <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span\n            class={{ 'bq-textarea__helper--counter [fontVariant:tabular-nums]': true, '!hidden': !this.maxlength }}\n            part=\"helper-counter\"\n          >\n            {this.numberOfCharacters ?? 0}/{this.maxlength}\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-textarea.cjs.entry.js","mappings":"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","names":["isHTMLElement","debounce","hasSlotContent","isNil","h"],"sources":["../../packages/beeq/src/components/textarea/scss/bq-textarea.scss?tag=bq-textarea&encapsulation=shadow","../../packages/beeq/src/components/textarea/bq-textarea.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Textarea styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-textarea.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                    Label                                   */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__label {\n  @apply text-[length:--bq-textarea--label-text-size] text-[color:--bq-textarea--label-text-color] m-be-[--bq-textarea--label-margin-bottom];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                        Native HTML Textarea control                        */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__input {\n  @apply flex-auto resize-y bg-[--bq-textarea--background-color] bs-[inherit];\n  // Border\n  @apply rounded-[--bq-textarea--border-radius] border-[length:--bq-textarea--border-width] border-[color:--bq-textarea--border-color];\n  // Padding\n  @apply pe-[--bq-textarea--padding-end] ps-[--bq-textarea--padding-start] p-b-[--bq-textarea--paddingY];\n  // Text\n  @apply text-[length:--bq-textarea--text-size] text-[color:--bq-textarea--text-color] placeholder:text-[color:--bq-textarea--text-placeholder-color];\n  // Transition\n  @apply transition-colors ease-in-out;\n  // Hover\n  @apply [&:not([disabled]):not(:focus-within)]:hover:border-hover-brand;\n  // Disabled\n  @apply disabled:cursor-not-allowed disabled:opacity-60;\n  // Focus\n  &:not([disabled]):focus-within {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-textarea--border-color-focus);\n\n    @apply focus border-[color:--bq-ring-color-focus];\n  }\n}\n\n/* ------------------------------- Validations ------------------------------- */\n\n.bq-textarea__input.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-textarea__input.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-textarea__input.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 Helper text                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-textarea__helper {\n  @apply text-[length:--bq-textarea--helper-text-size] text-[color:--bq-textarea--helper-text-color] m-bs-[--bq-textarea--helper-margin-top];\n}\n\n/* ------------------------------- Validations ------------------------------ */\n\n.bq-textarea__helper.validation-error {\n  @apply text-danger;\n}\n\n.bq-textarea__helper.validation-success {\n  @apply text-success;\n}\n\n.bq-textarea__helper.validation-warning {\n  @apply text-warning;\n}\n\n/* ----------------------------- Helper counter ----------------------------- */\n\n/** Apply a disabled text color style to the textarea counter when the validation is none. */\n.bq-textarea__helper[class~='validation-none'] {\n  .bq-textarea__helper--counter {\n    @apply opacity-60;\n  }\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';\n\nimport { debounce, hasSlotContent, isHTMLElement, isNil, type TDebounce } from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\nimport type { TTextareaAutoCapitalize, TTextareaWrap } from './bq-textarea.types';\n\n/**\n * The Textarea component is a multi-line text input control that is often used in a form to collect user inputs like comments or reviews.\n *\n * @example How to use it\n * ```html\n * <bq-textarea maxlength=\"0\" name=\"textarea\" placeholder=\"Placeholder...\" rows=\"5\">\n *   <label slot=\"label\">Label</label>\n *   <span class=\"flex items-center gap-xs\" slot=\"helper-text\">\n *     <bq-icon name=\"star\"></bq-icon>\n *     Helper text\n *   </span>\n * </bq-textarea>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/16792c-textarea\n * @status stable\n *\n * @attr {string} autocapitalize - Controls whether or not the textarea field should be capitalized and how.\n * @attr {string} autocomplete - Specifies whether or not the textarea field should have autocomplete enabled.\n * @attr {boolean} autofocus - If `true`, the textarea will be focused on component render.\n * @attr {boolean} auto-grow - If `true`, the textarea will automatically grow and shrink to fit its contents.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.\n * @attr {boolean} disabled - If `true`, the user cannot interact with the textarea.\n * @attr {boolean} disable-resize - If `true`, it will block the user's ability to resize the textarea.\n * @attr {string} form - The ID of the form that the textarea field belongs to.\n * @attr {string} form-validation-message - The native form validation message.\n * @attr {number} maxlength - The maximum number of characters that can be entered into the textarea (`0`: no limit).\n * @attr {string} name - The name of the textarea element.\n * @attr {string} placeholder - The placeholder text to show when there is no value.\n * @attr {boolean} readonly - If `true`, the textarea field cannot be modified.\n * @attr {boolean} required - Indicates whether or not the textarea field is required to be filled out before submitting the form.\n * @attr {number} rows - The number of visible text lines for the control. It must be a positive integer.\n * @attr {boolean} spellcheck - If `true`, the textarea content may be checked for spelling errors.\n * @attr {\"error\" | \"none\" | \"success\" | \"warning\"} validation-status - The validation status of the textarea.\n * @attr {string} value - The value of the textarea. It can be used to reset the textarea to a previous value.\n * @attr {\"soft\" | \"hard\"} wrap - Specifies how the text in a text area is to be wrapped when submitted in a form.\n *\n * @event bqBlur - Handler to be called when the textarea loses focus.\n * @event bqChange - Handler to be called when the textarea value has changed and the textarea loses focus.\n * @event bqClear - Handler to be called when the textarea value has been cleared.\n * @event bqFocus - Handler to be called when the textarea has received focus.\n * @event bqInput - Handler to be called when the textarea value changes.\n *\n * @slot label - The textarea label.\n * @slot helper-text - The helper text.\n *\n * @part base - The component's base wrapper.\n * @part input - The textarea element.\n * @part label - The textarea label.\n * @part helper-info - The helper info container.\n * @part helper-text - The helper text.\n * @part helper-counter - The helper counter.\n *\n * @cssprop --bq-textarea--background-color - Textarea background color\n * @cssprop --bq-textarea--border-color - Textarea border color\n * @cssprop --bq-textarea--border-color-focus - Textarea border color on focus\n * @cssprop --bq-textarea--border-radius - Textarea border radius\n * @cssprop --bq-textarea--border-width - Textarea border width\n * @cssprop --bq-textarea--border-style - Textarea border style\n * @cssprop --bq-textarea--helper-margin-top - Textarea helper text margin top\n * @cssprop --bq-textarea--helper-text-color - Textarea helper text color\n * @cssprop --bq-textarea--helper-text-size - Textarea helper text size\n * @cssprop --bq-textarea--label-margin-bottom - Textarea label margin bottom\n * @cssprop --bq-textarea--label-text-color - Textarea label text color\n * @cssprop --bq-textarea--label-text-size - Textarea label text size\n * @cssprop --bq-textarea--paddingY - Textarea padding top and bottom\n * @cssprop --bq-textarea--padding-start - Textarea padding start\n * @cssprop --bq-textarea--padding-end - Textarea padding end\n * @cssprop --bq-textarea--text-color - Textarea text color\n * @cssprop --bq-textarea--text-size - Textarea text size\n * @cssprop --bq-textarea--text-placeholder-color - Textarea placeholder text color\n */\n@Component({\n  tag: 'bq-textarea',\n  styleUrl: './scss/bq-textarea.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqTextarea {\n  // Own Properties\n  // ====================\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackId = 'textarea';\n\n  private helperTextElem?: HTMLElement;\n  private labelElem?: HTMLLabelElement;\n  private textarea: HTMLTextAreaElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqTextareaElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasHelperText = false;\n  @State() private hasLabel = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the textarea field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: TTextareaAutoCapitalize = 'off';\n\n  /**\n   * Specifies whether or not the textarea field should have autocomplete enabled.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /** If true, the textarea will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean = false;\n\n  /**\n   * If `true`, the textarea will automatically grow and shrink to fit its contents.\n   * If `false`, the textarea will have a fixed height specified by the `rows` property.\n   */\n  @Prop({ reflect: true }) autoGrow: boolean = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /** If `true`, the user cannot interact with the textarea. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** If `true`, it will block the user's ability to resize the textarea. */\n  @Prop({ reflect: true }) disableResize?: boolean = false;\n\n  /** The ID of the form that the textarea field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /**\n   * The maximum number of characters that can be entered into the textarea (`0`: no limit).\n   * When enabled, a character counter will be shown underneath the textarea.\n   */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /** The name of the textarea element. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The placeholder text to show when there is no value. */\n  @Prop({ reflect: true }) placeholder!: string;\n\n  /** If true, the textarea field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean = false;\n\n  /** Indicates whether or not the textarea field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean = false;\n\n  /** The number of visible text lines for the control. It must be a positive integer. */\n  @Prop({ reflect: true }) rows: number = 5;\n\n  /** If true, the textarea content may be checked for spelling errors. */\n  @Prop({ reflect: true }) spellcheck: boolean = false;\n\n  /**\n   * The validation status of the textarea.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the textarea. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The textarea has a validation error.\n   * - `'warning'`: The textarea has a validation warning.\n   * - `'success'`: The textarea has passed validation.\n   */\n  @Prop({ reflect: true, mutable: true }) validationStatus: TInputValidation = 'none';\n\n  /** The value of the textarea. It can be used to reset the textarea to a previous value. */\n  @Prop({ mutable: true }) value: string;\n\n  /** Specifies how the text in a text area is to be wrapped when submitted in a form */\n  @Prop({ reflect: true }) wrap: TTextareaWrap = 'soft';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.textarea) return;\n    if (!this.maxlength || this.value?.length < this.maxlength) return;\n    // If the value is longer than the maxlength, we need to truncate it\n    this.value = this.value?.substring(0, this.maxlength);\n    this.textarea.value = this.value ?? '';\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the textarea loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqTextareaElement>;\n\n  /**\n   * Callback handler emitted when the textarea value has changed and the textarea loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the textarea field and then clicks outside of the textarea field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n  /** Callback handler emitted when the textarea value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqTextareaElement>;\n\n  /** Callback handler emitted when the textarea has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqTextareaElement>;\n\n  /**\n   * Callback handler emitted when the textarea value changes.\n   * This handler is called whenever the user types or pastes text into the textarea field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string; el: HTMLBqTextareaElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n    this.handleValueChange();\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.value);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    this.clearSelection();\n    // Reset the form validity state\n    this.setFormValue();\n    this.updateFormValidity();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get numberOfCharacters() {\n    if (!this.maxlength || !this.textarea) return 0;\n\n    return this.value?.length;\n  }\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'textarea')) return;\n    this.value = ev.target.value;\n    this.setFormValue(this.value);\n    this.updateFormValidity();\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'textarea')) return;\n    this.value = ev.target.value;\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n\n    this.autoResize();\n  };\n\n  private autoResize = () => {\n    if (!this.autoGrow) return;\n\n    const inputElem = this.textarea;\n    if (!inputElem) return;\n\n    inputElem.style.height = 'auto';\n    inputElem.style.height = `${inputElem.scrollHeight}px`;\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  private setFormValue = (value?: string) => {\n    this.internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, value, textarea } = this;\n\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (required && (!value || value.trim() === '')) {\n      // Set validity state to invalid\n      internals?.states.add('invalid');\n      internals?.setValidity({ valueMissing: true }, formValidationMessage, textarea);\n      return;\n    }\n\n    // Set validity state to valid if textarea has value or is not required\n    internals?.states.add('valid');\n    internals?.setValidity({});\n  };\n\n  private clearSelection = () => {\n    this.value = '';\n    this.textarea.value = this.value;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-textarea flex flex-auto flex-col\" part=\"base\">\n        <label\n          aria-label={this.name ?? this.fallbackId}\n          class={{ 'bq-textarea__label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name ?? this.fallbackId}\n          part=\"label\"\n          ref={(label: HTMLLabelElement) => {\n            this.labelElem = label;\n          }}\n        >\n          <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n        </label>\n        <textarea\n          autocapitalize={this.autocapitalize}\n          autocomplete={this.autocomplete}\n          autofocus={this.autofocus}\n          class={{\n            'bq-textarea__input': true,\n            'resize-none': this.disableResize,\n            [`validation-${this.validationStatus}`]: true,\n          }}\n          disabled={this.disabled}\n          form={this.form}\n          id={this.name ?? this.fallbackId}\n          maxLength={this.maxlength > 0 ? this.maxlength : undefined}\n          name={this.name}\n          onBlur={this.handleBlur}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onInput={this.handleInput}\n          part=\"input\"\n          placeholder={this.placeholder}\n          readOnly={this.readonly}\n          ref={(elem: HTMLTextAreaElement) => {\n            this.textarea = elem;\n          }}\n          required={this.required}\n          rows={this.rows}\n          spellcheck={this.spellcheck}\n          wrap={this.wrap}\n        >\n          {this.value}\n        </textarea>\n        <div\n          class={{\n            'bq-textarea__helper flex items-center justify-between': true,\n            [`validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText && !this.maxlength,\n          }}\n          part=\"helper-info\"\n        >\n          <span\n            class=\"bq-textarea__helper--text\"\n            part=\"helper-text\"\n            ref={(span: HTMLElement) => {\n              this.helperTextElem = span;\n            }}\n          >\n            <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span\n            class={{ 'bq-textarea__helper--counter [fontVariant:tabular-nums]': true, '!hidden': !this.maxlength }}\n            part=\"helper-counter\"\n          >\n            {this.numberOfCharacters ?? 0}/{this.maxlength}\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bq-toast.cjs.entry.js

@@ -4,8 +4,7 @@
  */
 'use strict';
 
-var index = require('./index-BwvwUnfB.js');
-var index$1 = require('./index-C09ZVaB4.js');
+var index = require('./index-Bp6IQmE_.js');
 var isClient = require('./isClient-CrXhXxbA.js');
 var debounce = require('./debounce-D0tIpUuS.js');
 var props = require('./props-DzFXZXSF.js');
@@ -180,7 +179,7 @@ const BqToast = class {
         const style = {
             ...(this.border && { '--bq-toast--border-radius': `var(--bq-radius--${this.border})` }),
         };
-        return (index$1.jsx(index.Host, { "aria-hidden": !this.open ? 'true' : 'false', class: { 'is-hidden': !this.open }, hidden: !this.open ? 'true' : 'false', role: "status", style: style, children: index$1.jsxs("output", { class: "bq-toast", part: "wrapper", children: [index$1.jsx("div", { class: { [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }, part: "icon", children: index$1.jsx("slot", { name: "icon", children: index$1.jsx("bq-icon", { exportparts: "base,svg", name: this.iconName, size: "24", slot: "icon" }, 'eaef82cdd6ca86fd451ddf11210af0a66d3d24ec') }, 'a7d298c92d2a7f27fcb92f15deecf57f6aca67b7') }, '31ddbd2d68294f701d730f8a11b92d11becc13d6'), index$1.jsx("slot", {}, 'fe5efc9cebfbc2cd431b8f4dde24560387f9eed1')] }, 'e9a0f131fa8ece43fce2711cfcac60aeeb7d32e9') }, 'f35a997399e8310322c4389463e630bb9a9d1ab5'));
+        return (index.h(index.Host, { key: '0e66f9abe6800d4f76870fb402876112b4cf2af6', "aria-hidden": !this.open ? 'true' : 'false', class: { 'is-hidden': !this.open }, hidden: !this.open ? 'true' : 'false', role: "status", style: style }, index.h("output", { key: '693f3d06682990bb5a6b35472de473522850bf33', class: "bq-toast", part: "wrapper" }, index.h("div", { key: '83342a0ada8dbf7830c7962b781690c977f09006', class: { [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }, part: "icon" }, index.h("slot", { key: '10a0d89edc8becc70e7b2d9257381ea0403bdc46', name: "icon" }, index.h("bq-icon", { key: '493f40a4cc423c65a22f7adc6812af2683fcadea', exportparts: "base,svg", name: this.iconName, size: "24", slot: "icon" }))), index.h("slot", { key: '5293f07d309f788ad4987a4c30c1ae2d25353ec2' }))));
     }
     static get watchers() { return {
         "type": [{