@beeq/core 1.7.0 → 1.8.0-beta.1

package/dist/components/bq-icon2.js

@@ -4,37 +4,41 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getBasePath } from './assetsPath.js';
+import { i as isNil } from './isNil.js';
 import { i as isString } from './isString.js';
 import { g as getColorCSSVariable } from './cssVariables.js';
-import { i as isNil } from './isNil.js';
 
 /* -------------------------------------------------------------------------- */
 const requests = new Map();
 const fetchSvg = async (url, sanitize) => {
-    let req;
-    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
-        const rsp = await fetch(url);
-        if (rsp.ok) {
-            return rsp.text().then((svgContent) => {
-                if (svgContent && sanitize !== false)
-                    svgContent = validateContent(svgContent);
-                iconContent.set(url, svgContent || '');
-            });
+    if (typeof fetch === 'undefined' || typeof document === 'undefined')
+        return;
+    if (requests.has(url))
+        return requests.get(url);
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            iconContent.set(url, '');
+            return;
         }
+        let svgContent = (await response.text()) || '';
+        if (svgContent && sanitize !== false)
+            svgContent = validateContent(svgContent);
+        iconContent.set(url, svgContent);
+    }
+    catch (error) {
+        console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);
         iconContent.set(url, '');
-        // cache for the same requests
-        requests.set(url, req);
-        return req;
     }
-    iconContent.set(url, '');
-    return Promise.resolve();
 };
 const iconContent = new Map();
 const getSvgContent = async (url, sanitize) => {
-    // see if we already have a request for this SVG file
-    const req = await requests.get(url);
-    if (!req)
-        return fetchSvg(url, sanitize);
+    let req = requests.get(url);
+    // NOTE: if the request does not exists we will cache it
+    if (isNil(req)) {
+        req = fetchSvg(url, sanitize);
+        requests.set(url, req);
+    }
     return req;
 };
 const validateContent = (svgContent) => {

package/dist/components/bq-icon2.js.map

@@ -1 +1 @@
-{"file":"bq-icon2.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n  let req: Promise<unknown>;\n\n  if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {\n    const rsp = await fetch(url);\n    if (rsp.ok) {\n      return rsp.text().then((svgContent) => {\n        if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n        iconContent.set(url, svgContent || '');\n      });\n    }\n    iconContent.set(url, '');\n    // cache for the same requests\n    requests.set(url, req);\n    return req;\n  }\n\n  iconContent.set(url, '');\n  return Promise.resolve();\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n  // see if we already have a request for this SVG file\n  const req = await requests.get(url);\n  if (!req) return fetchSvg(url, sanitize);\n\n  return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n  const svgTag = 'svg';\n  const iconCssClass = 'bq-icon__svg';\n\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n    // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n    const othersCssClasses = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n    // set the shadow DOM part for the SVG element\n    svgElm.setAttribute('part', svgTag);\n\n    // remove height and width attribute, if for some reason they are still present in the SVG tag\n    svgElm.removeAttribute('height');\n    svgElm.removeAttribute('width');\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n  }\n\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n  if (elm.nodeType === Node.ELEMENT_NODE) {\n    if (elm.nodeName.toLowerCase() === 'script') return false;\n\n    for (const attribute of Array.from(elm.attributes)) {\n      const value = attribute.value;\n      if (isString(value) && value.toLowerCase().startsWith('on')) {\n        return false;\n      }\n    }\n\n    for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n      if (!isValid(childNode)) return false;\n    }\n  }\n  return true;\n};\n","/* -------------------------------------------------------------------------- */\n/*                                 Icon styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n  @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n  @apply scale-x-[--bq-icon--direction];\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\n\n/**\n * Icons are simplified images that graphically explain the meaning of an object on the screen.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n */\n@Component({\n  assetsDirs: ['svg'],\n  tag: 'bq-icon',\n  styleUrl: './scss/bq-icon.scss',\n  shadow: true,\n})\nexport class BqIcon {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private _svgContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** Label for the icon, used for accessibility */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n  @Prop({ reflect: true }) name!: string;\n\n  /** Set the size of the SVG */\n  @Prop({ reflect: true }) size?: string | number = 24;\n\n  /** Set the source of the SVG. If the source is set, the name property will be ignored */\n  @Prop({ reflect: true }) src?: string;\n\n  /** @deprecated It set the icon weight/style */\n  @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('color')\n  @Watch('name')\n  @Watch('size')\n  handlePropsChange() {\n    this.loadIcon(this.name);\n  }\n\n  /**\n   * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n   * We need to maintain retro-compatibility until the next major release\n   */\n  @Watch('weight')\n  handleWeightChange() {\n    if (this.name.includes(this.weight)) return;\n\n    console.warn(\n      `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n       For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n    );\n    // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n    // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n    const REGULAR = 'regular';\n    const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n    // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n    // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n    const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n    // Construct the icon name by appending the weight suffix (if any) and the file extension.\n    // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n    const iconName = `${this.name}${weightSuffix}`;\n    this.loadIcon(iconName);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the SVG has loaded */\n  @Event() svgLoaded: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.handlePropsChange();\n\n    // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n    if (!isNil(this.weight)) this.handleWeightChange();\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 getIconSource = (name: string) => {\n    if (!this.name && !this.src) return;\n    // Return the src if it is set\n    if (this.src) return this.src;\n\n    const SVG_EXTENSION = '.svg';\n    const iconFileName = `${name}${SVG_EXTENSION}`;\n\n    return getBasePath(iconFileName);\n  };\n\n  private loadIcon = (name: string) => {\n    const url = this.getIconSource(name);\n    getSvgContent(url, true).then(() => {\n      this._svgContent = iconContent.get(url);\n      this.svgLoaded.emit(this._svgContent);\n    });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n      ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          aria-label={this.label ?? `${this.name} icon`}\n          class=\"flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]\"\n          innerHTML={this._svgContent}\n          part=\"base\"\n          role=\"img\"\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-icon2.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/icon/helper/request.ts","../../packages/beeq/src/components/icon/scss/bq-icon.scss?tag=bq-icon&encapsulation=shadow","../../packages/beeq/src/components/icon/bq-icon.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                             Icon request helper                            */\n/* -------------------------------------------------------------------------- */\n\nimport { isNil, isString } from '../../../shared/utils';\n\nconst requests = new Map<string, Promise<unknown>>();\n\nconst fetchSvg = async (url: string, sanitize: boolean): Promise<unknown> => {\n  if (typeof fetch === 'undefined' || typeof document === 'undefined') return;\n\n  if (requests.has(url)) return requests.get(url);\n\n  try {\n    const response = await fetch(url);\n\n    if (!response.ok) {\n      iconContent.set(url, '');\n      return;\n    }\n\n    let svgContent = (await response.text()) || '';\n\n    if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);\n\n    iconContent.set(url, svgContent);\n  } catch (error) {\n    console.error(`[BqIcon] Failed to fetch SVG from ${url}:`, error);\n    iconContent.set(url, '');\n  }\n};\n\nexport const iconContent = new Map<string, string>();\n\nexport const getSvgContent = async (url: string, sanitize: boolean) => {\n  let req = requests.get(url);\n\n  // NOTE: if the request does not exists we will cache it\n  if (isNil(req)) {\n    req = fetchSvg(url, sanitize);\n    requests.set(url, req);\n  }\n  return req;\n};\n\nexport const validateContent = (svgContent: string): string => {\n  const svgTag = 'svg';\n  const iconCssClass = 'bq-icon__svg';\n\n  const div = document.createElement('div');\n  div.innerHTML = svgContent;\n\n  for (let i = div.childNodes.length - 1; i >= 0; i--) {\n    if (div.childNodes[i].nodeName.toLowerCase() !== svgTag) {\n      div.removeChild(div.childNodes[i]);\n    }\n  }\n\n  // must only have 1 root element\n  const svgElm = div.firstElementChild;\n  if (svgElm && svgElm.nodeName.toLowerCase() === svgTag) {\n    // keep other CSS classes (if there's any) and add the `bq-icon__svg` CSS class\n    const othersCssClasses = svgElm.getAttribute('class') || '';\n    svgElm.setAttribute('class', `${othersCssClasses} ${iconCssClass}`.trim());\n    // set the shadow DOM part for the SVG element\n    svgElm.setAttribute('part', svgTag);\n\n    // remove height and width attribute, if for some reason they are still present in the SVG tag\n    svgElm.removeAttribute('height');\n    svgElm.removeAttribute('width');\n\n    // root element must be an svg\n    // lets double check we've got valid elements\n    // do not allow scripts\n    if (isValid(svgElm as HTMLElement)) return div.innerHTML;\n  }\n\n  return '';\n};\n\nexport const isValid = (elm: HTMLElement): boolean => {\n  if (elm.nodeType === Node.ELEMENT_NODE) {\n    if (elm.nodeName.toLowerCase() === 'script') return false;\n\n    for (const attribute of Array.from(elm.attributes)) {\n      const value = attribute.value;\n      if (isString(value) && value.toLowerCase().startsWith('on')) {\n        return false;\n      }\n    }\n\n    for (const childNode of Array.from(elm.children) as HTMLElement[]) {\n      if (!isValid(childNode)) return false;\n    }\n  }\n  return true;\n};\n","/* -------------------------------------------------------------------------- */\n/*                                 Icon styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-icon.variables';\n\n:host {\n  @apply inline-block;\n}\n\n/**\n * This class is added on packages/beeq/src/components/icon/helper/request.ts\n * See lines 42 and 58 for details.\n */\n.bq-icon__svg {\n  @apply scale-x-[--bq-icon--direction];\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { TIconWeight } from './bq-icon.types';\nimport { getSvgContent, iconContent } from './helper/request';\nimport { getBasePath, getColorCSSVariable, isNil } from '../../shared/utils';\n\n/**\n * Icons are simplified images that graphically explain the meaning of an object on the screen.\n *\n * @part base - The component's internal wrapper that holds the icon SVG content.\n * @part svg - The `<svg>` tag element inside the component.\n */\n@Component({\n  assetsDirs: ['svg'],\n  tag: 'bq-icon',\n  styleUrl: './scss/bq-icon.scss',\n  shadow: true,\n})\nexport class BqIcon {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private _svgContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** Label for the icon, used for accessibility */\n  @Prop({ reflect: true }) label?: string;\n\n  /** Set the stroke color of the SVG. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */\n  @Prop({ reflect: true }) name!: string;\n\n  /** Set the size of the SVG */\n  @Prop({ reflect: true }) size?: string | number = 24;\n\n  /** Set the source of the SVG. If the source is set, the name property will be ignored */\n  @Prop({ reflect: true }) src?: string;\n\n  /** @deprecated It set the icon weight/style */\n  @Prop({ reflect: true }) weight?: TIconWeight = undefined;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('color')\n  @Watch('name')\n  @Watch('size')\n  handlePropsChange() {\n    this.loadIcon(this.name);\n  }\n\n  /**\n   * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\n   * We need to maintain retro-compatibility until the next major release\n   */\n  @Watch('weight')\n  handleWeightChange() {\n    if (this.name.includes(this.weight)) return;\n\n    console.warn(\n      `❗️ [bq-icon]: the 'weight' property is deprecated, you should add the weight to the icon name.\\n\n       For example, '<bq-icon name=\"bell-fill\"></bq-icon>' instead of '<bq-icon name=\"bell\" weight=\"fill\"></bq-icon>'`,\n    );\n    // Check if the icon is weighted. An icon is considered weighted if its weight is not 'regular' and ENV_SVG_PATH is not set.\n    // Eg: if the weight is 'bold' and ENV_SVG_PATH is not set, isWeightedIcon will be true.\n    const REGULAR = 'regular';\n    const isWeightedIcon = !isNil(this.weight) && this.weight !== REGULAR;\n    // If the icon is weighted, append the weight to the icon name. Otherwise, append nothing.\n    // Eg: if isWeightedIcon is true and the weight is 'bold', weightSuffix will be '-bold'.\n    const weightSuffix = isWeightedIcon ? `-${this.weight}` : '';\n    // Construct the icon name by appending the weight suffix (if any) and the file extension.\n    // Eg: if the name is 'my-icon' and weightSuffix is '-bold', iconName will be 'my-icon-bold.svg'.\n    const iconName = `${this.name}${weightSuffix}`;\n    this.loadIcon(iconName);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the SVG has loaded */\n  @Event() svgLoaded: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.handlePropsChange();\n\n    // !TO BE REMOVED: Delete this once the deprecated `weight` property is removed\n    if (!isNil(this.weight)) this.handleWeightChange();\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 getIconSource = (name: string) => {\n    if (!this.name && !this.src) return;\n    // Return the src if it is set\n    if (this.src) return this.src;\n\n    const SVG_EXTENSION = '.svg';\n    const iconFileName = `${name}${SVG_EXTENSION}`;\n\n    return getBasePath(iconFileName);\n  };\n\n  private loadIcon = (name: string) => {\n    const url = this.getIconSource(name);\n    getSvgContent(url, true).then(() => {\n      this._svgContent = iconContent.get(url);\n      this.svgLoaded.emit(this._svgContent);\n    });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.color && { '--bq-icon--color': getColorCSSVariable(this.color) }),\n      ...(this.size && { '--bq-icon--size': `${this.size}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          aria-label={this.label ?? `${this.name} icon`}\n          class=\"flex text-[color:--bq-icon--color] bs-[--bq-icon--size] is-[--bq-icon--size]\"\n          innerHTML={this._svgContent}\n          part=\"base\"\n          role=\"img\"\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bq-input.js

@@ -7,6 +7,7 @@ import './assetsPath.js';
 import { d as debounce } from './debounce.js';
 import { i as isDefined } from './isDefined.js';
 import { i as isHTMLElement } from './isHTMLElement.js';
+import { i as isNil } from './isNil.js';
 import { b as hasSlotContent } from './slot.js';
 import { d as defineCustomElement$3 } from './bq-button2.js';
 import { d as defineCustomElement$2 } from './bq-icon2.js';
@@ -24,6 +25,7 @@ const BqInput$1 = /*@__PURE__*/ proxyCustomElement(class BqInput extends HTMLEle
         this.bqClear = createEvent(this, "bqClear", 7);
         this.bqFocus = createEvent(this, "bqFocus", 7);
         this.bqInput = createEvent(this, "bqInput", 7);
+        this.internals = this.attachInternals();
         this.fallbackInputId = 'input';
         // Listeners
         // ==============
@@ -55,6 +57,7 @@ const BqInput$1 = /*@__PURE__*/ proxyCustomElement(class BqInput extends HTMLEle
             if (!isHTMLElement(ev.target, 'input'))
                 return;
             this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;
+            this.internals.setFormValue(`${this.value}`);
             this.debounceBqInput = debounce(() => {
                 this.bqInput.emit({ value: this.value, el: this.el });
             }, this.debounceTime);
@@ -66,18 +69,29 @@ const BqInput$1 = /*@__PURE__*/ proxyCustomElement(class BqInput extends HTMLEle
             if (!isHTMLElement(ev.target, 'input'))
                 return;
             this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;
+            this.internals.setFormValue(`${this.value}`);
             this.bqChange.emit({ value: this.value, el: this.el });
         };
-        this.handleClearClick = (ev) => {
+        this.handleClear = () => {
             if (this.disabled)
                 return;
-            this.inputElem.value = '';
-            this.value = this.inputElem.value;
-            this.bqClear.emit(this.el);
-            this.bqInput.emit({ value: this.value, el: this.el });
-            this.bqChange.emit({ value: this.value, el: this.el });
-            this.inputElem.focus();
+            const { inputElem, internals } = this;
+            // Clear input element value
+            inputElem.value = '';
+            this.value = inputElem.value;
+            // Update associated form control value
+            internals.setFormValue(undefined);
+        };
+        this.handleClearClick = (ev) => {
             ev.stopPropagation();
+            this.handleClear();
+            const { bqClear, bqChange, bqInput, el, inputElem } = this;
+            // Emit events
+            bqClear.emit(el);
+            bqInput.emit({ value: this.value, el });
+            bqChange.emit({ value: this.value, el });
+            // Refocus input element
+            inputElem.focus();
         };
         this.handleLabelSlotChange = () => {
             this.hasLabel = hasSlotContent(this.labelElem);
@@ -125,41 +139,49 @@ const BqInput$1 = /*@__PURE__*/ proxyCustomElement(class BqInput extends HTMLEle
     handleValueChange() {
         if (Array.isArray(this.value)) {
             this.hasValue = this.value.some((val) => val.length > 0);
+            this.internals.setFormValue(this.value.join(','));
             return;
         }
         this.hasValue = isDefined(this.value);
+        this.internals.setFormValue(`${this.value}`);
     }
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
-    componentDidLoad() {
+    componentWillLoad() {
         this.handleValueChange();
     }
+    formResetCallback() {
+        if (isNil(this.value))
+            return;
+        this.handleClear();
+    }
     // render() function
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '1ae2deecd4fa19bd61218aa9d19f904484920f41', class: "bq-input", part: "base" }, h("label", { key: '9de5803ed7c8d8a8a891f9e18956ea35c826c8f4', class: { 'bq-input--label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '7f0c67232346e6f3b4406a85dc32f8cff07bf92f', name: "label", onSlotchange: this.handleLabelSlotChange })), h("div", { key: '81fc67ce7d417e3bd058b002084b5d4caf4d34b3', class: {
+        return (h("div", { key: 'c9d184b8abfbaebda3478f7b8892c7d2bf024fdc', class: "bq-input", part: "base" }, h("label", { key: 'a938804cb78f78b65c1c2139d90fd98e5edecb52', class: { 'bq-input--label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '37c407ab1b0399be8371629431d839f138f751df', name: "label", onSlotchange: this.handleLabelSlotChange })), h("div", { key: '130305745ed36bbe2d1012508f3ae2653b6794b2', class: {
                 'bq-input--control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control" }, h("span", { key: '21bfb1ba4c4696c903d89912a9792a516229065e', class: { 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '6c1e6fadf86ac71e4625a76ef4db47145f7f0536', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("input", { key: '2a9f590bebc2e4ee3c499f9b886fbb8e93c5dd4e', id: this.name || this.fallbackInputId, class: "bq-input--control__input", "aria-disabled": this.disabled ? 'true' : 'false', autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, disabled: this.disabled, form: this.form, inputMode: this.inputmode, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, ref: (inputElem) => (this.inputElem = inputElem), readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, part: "input",
+            }, part: "control" }, h("span", { key: '59c8d5f28373cae3741f4420da1fbc4744869806', class: { 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '4f6a705b9a4e7deb46e334c11c6b242b091afec6', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("input", { key: '6c238b5c2329d3f77dd4cb8a0aac9ffbfc937aad', id: this.name || this.fallbackInputId, class: "bq-input--control__input", "aria-disabled": this.disabled ? 'true' : 'false', autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, disabled: this.disabled, form: this.form, inputMode: this.inputmode, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, ref: (inputElem) => (this.inputElem = inputElem), readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: this.value, part: "input",
             // Events
             onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, onInput: this.handleInput }), this.hasValue && !this.disabled && !this.disableClear && (
         // The clear button will be visible as long as the input has a value
         // and the parent group is hovered or has focus-within
-        h("bq-button", { key: 'bf70483fba3d6702235ef13cc233264d54e2ee56', class: "bq-input--control__clear ms-[--bq-input--gap] hidden", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button" }, h("slot", { key: 'c373c061079d75103a196ad5e02abc5d1b6b6419', name: "clear-icon" }, h("bq-icon", { key: 'd95569e369733dd13595fbe1e48ae52dea01f86f', name: "x-circle", class: "flex" })))), h("span", { key: 'ef24c4e495c264be6568fcd69eb26bdb8759cd45', class: { 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '387273312fe4b196a2ab360af65a625761396a74', name: "suffix", onSlotchange: this.handleSuffixSlotChange }))), h("div", { key: '1d053fcabb1ea861b787af8a6e859592d04a1ed7', class: {
+        h("bq-button", { key: 'bae89f316a8c7cfb04d1bcff8df6e418c93fa838', class: "bq-input--control__clear ms-[--bq-input--gap] hidden", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button" }, h("slot", { key: 'd00287e78d20d2fdcbac8aa89a3bb30c40c6b8f1', name: "clear-icon" }, h("bq-icon", { key: '9be1f57ece6cea670a5c7adc76fb70feb66663c5', name: "x-circle", class: "flex" })))), h("span", { key: '93421c6d1e061e2a19315d1d8aadbcc2a01f19c3', class: { 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'ccb589bdc3b227467885d728c82f3fcedacb1695', name: "suffix", onSlotchange: this.handleSuffixSlotChange }))), h("div", { key: 'b0374c936b4e3839ed936ade23ad59aa3c69cf9a', class: {
                 [`bq-input--helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
-            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: '71c49f2521db11b80a1c0dc8ae4466411a732ea6', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
+            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: 'a0a8c8d546efa959d6126e96ddf97a702263026f', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
     }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     get el() { return this; }
     static get watchers() { return {
         "value": ["handleValueChange"]
     }; }
     static get style() { return BqInputStyle0; }
-}, [17, "bq-input", {
+}, [81, "bq-input", {
         "autocapitalize": [513],
         "autocomplete": [513],
         "autocorrect": [513],

package/dist/components/bq-input.js.map

@@ -1 +1 @@
-{"file":"bq-input.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,UAAU,GAAG,0p5BAA0p5B,CAAC;AAC9q5B,sBAAe,UAAU;;MCsBZA,SAAO;;;;;;;;;;QAWV,oBAAe,GAAG,OAAO,CAAC;;;;;;;;;;;;;QAoM1B,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC3B,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC5B,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAS;;YAC9B,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,MAAA,IAAI,CAAC,eAAe,0CAAE,MAAM,EAAE,CAAC;YAE/B,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;gBAAE,OAAO;YAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;YAEhF,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;gBAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;aACvD,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACtB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,CAAC;QAEM,iBAAY,GAAG,CAAC,EAAS;YAC/B,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;gBAAE,OAAO;YAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;YAEhF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;SACxD,CAAC;QAEM,qBAAgB,GAAG,CAAC,EAAe;YACzC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;YAElC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;YACtD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;YACvD,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;YAEvB,EAAE,CAAC,eAAe,EAAE,CAAC;SACtB,CAAC;QAEM,0BAAqB,GAAG;YAC9B,IAAI,CAAC,QAAQ,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAChD,CAAC;QAEM,2BAAsB,GAAG;YAC/B,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAClD,CAAC;QAEM,2BAAsB,GAAG;YAC/B,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAClD,CAAC;QAEM,+BAA0B,GAAG;YACnC,IAAI,CAAC,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC1D,CAAC;6BAxPuB,KAAK;wBACV,KAAK;yBACJ,KAAK;yBACL,KAAK;wBACN,KAAK;8BAUyB,KAAK;4BAMP,KAAK;2BAMA,KAAK;;gCAMb,aAAa;4BAMF,CAAC;wBAMX,KAAK;4BAGV,KAAK;;;;;;;;;;;;;oBA4DF,MAAM;gCAYY,MAAM;;;;;IASpE,iBAAiB;QACf,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACzD,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACvC;;;;IA+BD,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;;;;IAsFD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,MAAM,IAE/B,8DACE,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC7D,OAAO,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EAC1C,GAAG,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,EAChD,IAAI,EAAC,OAAO,IAEZ,6DAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAAI,CACzD,EAER,4DACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,CAAC,cAAc,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI;gBAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,IAAI,EAAC,SAAS,IAGd,6DACE,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACxE,GAAG,EAAE,CAAC,QAAQ,MAAM,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAC/C,IAAI,EAAC,QAAQ,IAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,GAAI,CAC5D,EAEP,8DACE,EAAE,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,EACrC,KAAK,EAAC,0BAA0B,mBACjB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,EAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAC,OAAO;;YAEZ,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,EAED,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY;;;QAGpD,kEACE,KAAK,EAAC,sDAAsD,EAC5D,UAAU,EAAC,MAAM,gBACL,IAAI,CAAC,gBAAgB,EACjC,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,IAAI,EAAC,WAAW,EAChB,WAAW,EAAC,QAAQ,IAEpB,6DAAM,IAAI,EAAC,YAAY,IACrB,gEAAS,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,GAAG,CACnC,CACG,CACb,EAED,6DACE,KAAK,EAAE,EAAE,2BAA2B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACxE,GAAG,EAAE,CAAC,QAAQ,MAAM,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAC/C,IAAI,EAAC,QAAQ,IAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,GAAI,CAC5D,CACH,EAEN,4DACE,KAAK,EAAE;gBACL,CAAC,oCAAoC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI;gBACnE,SAAS,EAAE,CAAC,IAAI,CAAC,aAAa;aAC/B,EACD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,EACjD,IAAI,EAAC,aAAa,IAElB,6DAAM,IAAI,EAAC,aAAa,EAAC,YAAY,EAAE,IAAI,CAAC,0BAA0B,GAAI,CACtE,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BqInput"],"sources":["../../packages/beeq/src/components/input/scss/bq-input.scss?tag=bq-input&encapsulation=shadow","../../packages/beeq/src/components/input/bq-input.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Input styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-input.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Label and Helper text                           */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--label {\n  @apply flex flex-grow items-center m-be-[--bq-input--label-margin-bottom];\n  @apply text-[length:--bq-input--label-text-size] text-[color:--bq-input--label-text-color];\n}\n\n.bq-input--helper-text {\n  @apply text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color] m-bs-[--bq-input--helper-margin-top];\n}\n\n.bq-input--helper-text.validation-error {\n  @apply text-text-danger;\n}\n\n.bq-input--helper-text.validation-success {\n  @apply text-text-success;\n}\n\n.bq-input--helper-text.validation-warning {\n  @apply text-text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                             Input group control                            */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color];\n  // Padding\n  @apply pe-[--bq-input--padding-end] ps-[--bq-input--padding-start] p-b-[--bq-input--paddingY];\n  // Text\n  @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-brand;\n\n  border-style: var(--bq-input--border-style);\n\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-input--border-color-focus);\n\n    @apply focus border-[color:--bq-input--border-color-focus];\n  }\n\n  // Enable clear button whenever the input group control is hovered or has focus\n  &:not(.disabled):hover,\n  &:not(.disabled):focus-within {\n    .bq-input--control__clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-input--control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-input--control.validation-error {\n  @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.danger);\n\n    @apply border-active-stroke-danger;\n  }\n}\n\n.bq-input--control.validation-success {\n  @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.success);\n\n    @apply border-active-stroke-success;\n  }\n}\n\n.bq-input--control.validation-warning {\n  @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.warning);\n\n    @apply border-active-stroke-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__input {\n  @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];\n  @apply border-none min-bs-[--bq-input--icon-size] min-is-0 m-b-0 m-i-0 p-b-0 p-i-0 focus:outline-none focus-visible:outline-none;\n\n  box-shadow: none;\n  font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__clear::part(button) {\n  // Since the clear button is inside the input group control,\n  // we need to reset the focus ring styles\n  --bq-ring-width: initial;\n  --bq-ring-offset-width: initial;\n  --bq-ring-color-focus: initial;\n\n  @apply rounded-xs border-none bs-auto p-b-0 p-i-0;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__prefix,\n.bq-input--control__suffix {\n  @apply pointer-events-none flex items-center text-[color:--bq-input--text-color];\n}\n\n.bq-input--control__prefix {\n  @apply me-[--bq-input--gap];\n}\n\n.bq-input--control__suffix {\n  @apply ms-[--bq-input--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-input--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                          Hide webkit clear button                          */\n/* -------------------------------------------------------------------------- */\n\n/* Remove clear controls from search input */\n\n.bq-input--control__input::-moz-search-cancel {\n  @apply hidden appearance-none;\n}\n\n.bq-input--control__input::-webkit-search-decoration,\n.bq-input--control__input::-webkit-search-cancel-button,\n.bq-input--control__input::-webkit-search-results-button,\n.bq-input--control__input::-webkit-search-results-decoration {\n  @apply hidden appearance-none;\n}\n\n/* Remove native control extra padding from input date and datetime */\n\n.bq-input--control__input::-webkit-datetime-edit-fields-wrapper,\n.bq-input--control__input::-webkit-datetime-edit,\n.bq-input--control__input::-webkit-datetime-edit-year-field,\n.bq-input--control__input::-webkit-datetime-edit-month-field,\n.bq-input--control__input::-webkit-datetime-edit-day-field,\n.bq-input--control__input::-webkit-datetime-edit-hour-field,\n.bq-input--control__input::-webkit-datetime-edit-minute-field,\n.bq-input--control__input::-webkit-datetime-edit-second-field,\n.bq-input--control__input::-webkit-datetime-edit-millisecond-field,\n.bq-input--control__input::-webkit-datetime-edit-meridiem-field {\n  @apply p-b-0 p-i-0;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TInputType, TInputValidation, TInputValue } from './bq-input.types';\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, TDebounce } from '../../shared/utils';\n\n/**\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n */\n@Component({\n  tag: 'bq-input',\n  styleUrl: './scss/bq-input.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqInput {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackInputId = 'input';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqInputElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasHelperText = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the input field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n  /**\n   * Specifies whether or not the input field should have autocomplete enabled.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /**\n   * Controls whether or not the input field should have autocorrect enabled.\n   * Possible values are 'on' and 'off'.\n   */\n  @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n  /** If true, the input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /**\n   * Indicates whether the input is disabled or not.\n   * If `true`, the input is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** The ID of the form that the input field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /**\n   * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n   * This allows a browser to display an appropriate virtual keyboard while editing.\n   * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n   */\n  @Prop() inputmode?: string;\n\n  /**\n   * The maximum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) max?: number | string;\n\n  /** The maximum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /**\n   * The minimum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) min?: number | string;\n\n  /** The minimum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The input field name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /**\n   * Specifies a regular expression the form control's value should match.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n   */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /** The input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** If true, the input field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /**\n   * A number that specifies the granularity that the value must adhere to.\n   * Valid for date, month, week, time, datetime-local, number, and range.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @Prop({ reflect: true }) step: number | 'any';\n\n  /**\n   * The type attribute specifies the type of input field to display.\n   * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   */\n  @Prop({ reflect: true }) type: TInputType = 'text';\n\n  /**\n   * The validation status of the input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The input value, it can be used to reset the input to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    if (Array.isArray(this.value)) {\n      this.hasValue = this.value.some((val) => val.length > 0);\n      return;\n    }\n\n    this.hasValue = isDefined(this.value);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value changes.\n   * This handler is called whenever the user types or pastes text into the input field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleValueChange();\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 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 handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.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\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    if (this.disabled) return;\n\n    this.inputElem.value = '';\n    this.value = this.inputElem.value;\n\n    this.bqClear.emit(this.el);\n    this.bqInput.emit({ value: this.value, el: this.el });\n    this.bqChange.emit({ value: this.value, el: this.el });\n    this.inputElem.focus();\n\n    ev.stopPropagation();\n  };\n\n  private handleLabelSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n  };\n\n  private handlePrefixSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n  };\n\n  private handleSuffixSlotChange = () => {\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n  };\n\n  private handleHelperTextSlotChange = () => {\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-input\" part=\"base\">\n        {/* Label */}\n        <label\n          class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name || this.fallbackInputId}\n          ref={(labelElem) => (this.labelElem = labelElem)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n        </label>\n        {/* Input control group */}\n        <div\n          class={{\n            'bq-input--control': true,\n            [`validation-${this.validationStatus}`]: true,\n            disabled: this.disabled,\n          }}\n          part=\"control\"\n        >\n          {/* Prefix */}\n          <span\n            class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n            ref={(spanElem) => (this.prefixElem = spanElem)}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n          </span>\n          {/* HTML Input */}\n          <input\n            id={this.name || this.fallbackInputId}\n            class=\"bq-input--control__input\"\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            disabled={this.disabled}\n            form={this.form}\n            inputMode={this.inputmode}\n            max={this.max}\n            maxLength={this.maxlength}\n            min={this.min}\n            minLength={this.minlength}\n            name={this.name}\n            pattern={this.pattern}\n            placeholder={this.placeholder}\n            ref={(inputElem) => (this.inputElem = inputElem)}\n            readOnly={this.readonly}\n            required={this.required}\n            step={this.step}\n            type={this.type}\n            value={this.value}\n            part=\"input\"\n            // Events\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onInput={this.handleInput}\n          />\n          {/* Clear Button */}\n          {this.hasValue && !this.disabled && !this.disableClear && (\n            // The clear button will be visible as long as the input has a value\n            // and the parent group is hovered or has focus-within\n            <bq-button\n              class=\"bq-input--control__clear ms-[--bq-input--gap] hidden\"\n              appearance=\"text\"\n              aria-label={this.clearButtonLabel}\n              size=\"small\"\n              onBqClick={this.handleClearClick}\n              part=\"clear-btn\"\n              exportparts=\"button\"\n            >\n              <slot name=\"clear-icon\">\n                <bq-icon name=\"x-circle\" class=\"flex\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* Suffix */}\n          <span\n            class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n            ref={(spanElem) => (this.suffixElem = spanElem)}\n            part=\"suffix\"\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n          </span>\n        </div>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          ref={(divElem) => (this.helperTextElem = divElem)}\n          part=\"helper-text\"\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-input.js","mappings":"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","names":["BqInput"],"sources":["../../packages/beeq/src/components/input/scss/bq-input.scss?tag=bq-input&encapsulation=shadow","../../packages/beeq/src/components/input/bq-input.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Input styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-input.variables';\n\n:host {\n  @apply block is-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Label and Helper text                           */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--label {\n  @apply flex flex-grow items-center m-be-[--bq-input--label-margin-bottom];\n  @apply text-[length:--bq-input--label-text-size] text-[color:--bq-input--label-text-color];\n}\n\n.bq-input--helper-text {\n  @apply text-[length:--bq-input--helper-text-size] text-[color:--bq-input--helper-text-color] m-bs-[--bq-input--helper-margin-top];\n}\n\n.bq-input--helper-text.validation-error {\n  @apply text-text-danger;\n}\n\n.bq-input--helper-text.validation-success {\n  @apply text-text-success;\n}\n\n.bq-input--helper-text.validation-warning {\n  @apply text-text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                             Input group control                            */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-input--border-radius] border-[length:--bq-input--border-width] border-[color:--bq-input--border-color];\n  // Padding\n  @apply pe-[--bq-input--padding-end] ps-[--bq-input--padding-start] p-b-[--bq-input--paddingY];\n  // Text\n  @apply text-[length:--bq-input--text-size] text-[color:--bq-input--text-color] placeholder:text-[color:--bq-input--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-brand;\n\n  border-style: var(--bq-input--border-style);\n\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-input--border-color-focus);\n\n    @apply focus border-[color:--bq-input--border-color-focus];\n  }\n\n  // Enable clear button whenever the input group control is hovered or has focus\n  &:not(.disabled):hover,\n  &:not(.disabled):focus-within {\n    .bq-input--control__clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-input--control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-input--control.validation-error {\n  @apply border-stroke-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.danger);\n\n    @apply border-active-stroke-danger;\n  }\n}\n\n.bq-input--control.validation-success {\n  @apply border-stroke-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.success);\n\n    @apply border-active-stroke-success;\n  }\n}\n\n.bq-input--control.validation-warning {\n  @apply border-stroke-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(colors.stroke.warning);\n\n    @apply border-active-stroke-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__input {\n  @apply flex-auto cursor-[inherit] appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];\n  @apply border-none min-bs-[--bq-input--icon-size] min-is-0 m-b-0 m-i-0 p-b-0 p-i-0 focus:outline-none focus-visible:outline-none;\n\n  box-shadow: none;\n  font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__clear::part(button) {\n  // Since the clear button is inside the input group control,\n  // we need to reset the focus ring styles\n  --bq-ring-width: initial;\n  --bq-ring-offset-width: initial;\n  --bq-ring-color-focus: initial;\n\n  @apply rounded-xs border-none bs-auto p-b-0 p-i-0;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-input--control__prefix,\n.bq-input--control__suffix {\n  @apply pointer-events-none flex items-center text-[color:--bq-input--text-color];\n}\n\n.bq-input--control__prefix {\n  @apply me-[--bq-input--gap];\n}\n\n.bq-input--control__suffix {\n  @apply ms-[--bq-input--gap];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-input--icon-size) !important;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                          Hide webkit clear button                          */\n/* -------------------------------------------------------------------------- */\n\n/* Remove clear controls from search input */\n\n.bq-input--control__input::-moz-search-cancel {\n  @apply hidden appearance-none;\n}\n\n.bq-input--control__input::-webkit-search-decoration,\n.bq-input--control__input::-webkit-search-cancel-button,\n.bq-input--control__input::-webkit-search-results-button,\n.bq-input--control__input::-webkit-search-results-decoration {\n  @apply hidden appearance-none;\n}\n\n/* Remove native control extra padding from input date and datetime */\n\n.bq-input--control__input::-webkit-datetime-edit-fields-wrapper,\n.bq-input--control__input::-webkit-datetime-edit,\n.bq-input--control__input::-webkit-datetime-edit-year-field,\n.bq-input--control__input::-webkit-datetime-edit-month-field,\n.bq-input--control__input::-webkit-datetime-edit-day-field,\n.bq-input--control__input::-webkit-datetime-edit-hour-field,\n.bq-input--control__input::-webkit-datetime-edit-minute-field,\n.bq-input--control__input::-webkit-datetime-edit-second-field,\n.bq-input--control__input::-webkit-datetime-edit-millisecond-field,\n.bq-input--control__input::-webkit-datetime-edit-meridiem-field {\n  @apply p-b-0 p-i-0;\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TInputType, TInputValidation, TInputValue } from './bq-input.types';\nimport { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, TDebounce } from '../../shared/utils';\n\n/**\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part helper-text - The helper text slot container.\n * @part label - The label slot container.\n * @part input - The native HTML input element used under the hood.\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n */\n@Component({\n  tag: 'bq-input',\n  styleUrl: './scss/bq-input.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqInput {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceBqInput: TDebounce<void>;\n  private fallbackInputId = 'input';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqInputElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasHelperText = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /**\n   * Controls whether or not the input field should be capitalized and how.\n   * Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize\n   */\n  @Prop({ reflect: true }) autocapitalize: string = 'off';\n\n  /**\n   * Specifies whether or not the input field should have autocomplete enabled.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values\n   */\n  @Prop({ reflect: true }) autocomplete: string = 'off';\n\n  /**\n   * Controls whether or not the input field should have autocorrect enabled.\n   * Possible values are 'on' and 'off'.\n   */\n  @Prop({ reflect: true }) autocorrect: 'on' | 'off' = 'off';\n\n  /** If true, the input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /**\n   * Indicates whether the input is disabled or not.\n   * If `true`, the input is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** The ID of the form that the input field belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /**\n   * The inputmode attribute specifies what kind of input mechanism would be most helpful for users entering content into the input field.\n   * This allows a browser to display an appropriate virtual keyboard while editing.\n   * Possible values are 'none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url', and 'date'.\n   */\n  @Prop() inputmode?: string;\n\n  /**\n   * The maximum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) max?: number | string;\n\n  /** The maximum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) maxlength: number;\n\n  /**\n   * The minimum value that the input field can accept.\n   * Only applies to date and number input types.\n   */\n  @Prop({ reflect: true }) min?: number | string;\n\n  /** The minimum number of characters that the input field can accept. */\n  @Prop({ reflect: true }) minlength: number;\n\n  /** The input field name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /**\n   * Specifies a regular expression the form control's value should match.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern\n   */\n  @Prop({ reflect: true }) pattern?: string;\n\n  /** The input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** If true, the input field cannot be modified. */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the input field is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /**\n   * A number that specifies the granularity that the value must adhere to.\n   * Valid for date, month, week, time, datetime-local, number, and range.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n   */\n  @Prop({ reflect: true }) step: number | 'any';\n\n  /**\n   * The type attribute specifies the type of input field to display.\n   * Possible values are 'text', 'password', 'email', 'number', 'tel', 'search', 'url', and more.\n   * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n   */\n  @Prop({ reflect: true }) type: TInputType = 'text';\n\n  /**\n   * The validation status of the input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The input value, it can be used to reset the input to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TInputValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    if (Array.isArray(this.value)) {\n      this.hasValue = this.value.some((val) => val.length > 0);\n      this.internals.setFormValue(this.value.join(','));\n      return;\n    }\n\n    this.hasValue = isDefined(this.value);\n    this.internals.setFormValue(`${this.value}`);\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value has changed and the input loses focus.\n   * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n   */\n  @Event() bqChange!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  /** Callback handler emitted when the input value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqInputElement>;\n\n  /** Callback handler emitted when the input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqInputElement>;\n\n  /**\n   * Callback handler emitted when the input value changes.\n   * This handler is called whenever the user types or pastes text into the input field.\n   */\n  @Event() bqInput!: EventEmitter<{ value: string | number | string[]; el: HTMLBqInputElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleValueChange();\n  }\n\n  formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.handleClear();\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 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 handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    this.debounceBqInput?.cancel();\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n    this.internals.setFormValue(`${this.value}`);\n\n    this.debounceBqInput = debounce(() => {\n      this.bqInput.emit({ value: this.value, el: this.el });\n    }, this.debounceTime);\n    this.debounceBqInput();\n  };\n\n  private handleChange = (ev: Event) => {\n    if (this.disabled) return;\n\n    if (!isHTMLElement(ev.target, 'input')) return;\n    this.value = this.type === 'number' ? Number(ev.target.value) : ev.target.value;\n    this.internals.setFormValue(`${this.value}`);\n\n    this.bqChange.emit({ value: this.value, el: this.el });\n  };\n\n  private handleClear = () => {\n    if (this.disabled) return;\n\n    const { inputElem, internals } = this;\n\n    // Clear input element value\n    inputElem.value = '';\n    this.value = inputElem.value;\n\n    // Update associated form control value\n    internals.setFormValue(undefined);\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    ev.stopPropagation();\n    this.handleClear();\n\n    const { bqClear, bqChange, bqInput, el, inputElem } = this;\n    // Emit events\n    bqClear.emit(el);\n    bqInput.emit({ value: this.value, el });\n    bqChange.emit({ value: this.value, el });\n    // Refocus input element\n    inputElem.focus();\n  };\n\n  private handleLabelSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n  };\n\n  private handlePrefixSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n  };\n\n  private handleSuffixSlotChange = () => {\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n  };\n\n  private handleHelperTextSlotChange = () => {\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div class=\"bq-input\" part=\"base\">\n        {/* Label */}\n        <label\n          class={{ 'bq-input--label': true, '!hidden': !this.hasLabel }}\n          htmlFor={this.name || this.fallbackInputId}\n          ref={(labelElem) => (this.labelElem = labelElem)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n        </label>\n        {/* Input control group */}\n        <div\n          class={{\n            'bq-input--control': true,\n            [`validation-${this.validationStatus}`]: true,\n            disabled: this.disabled,\n          }}\n          part=\"control\"\n        >\n          {/* Prefix */}\n          <span\n            class={{ 'bq-input--control__prefix': true, '!hidden': !this.hasPrefix }}\n            ref={(spanElem) => (this.prefixElem = spanElem)}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n          </span>\n          {/* HTML Input */}\n          <input\n            id={this.name || this.fallbackInputId}\n            class=\"bq-input--control__input\"\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            autoCapitalize={this.autocapitalize}\n            autoComplete={this.autocomplete}\n            autoCorrect={this.autocorrect}\n            autoFocus={this.autofocus}\n            disabled={this.disabled}\n            form={this.form}\n            inputMode={this.inputmode}\n            max={this.max}\n            maxLength={this.maxlength}\n            min={this.min}\n            minLength={this.minlength}\n            name={this.name}\n            pattern={this.pattern}\n            placeholder={this.placeholder}\n            ref={(inputElem) => (this.inputElem = inputElem)}\n            readOnly={this.readonly}\n            required={this.required}\n            step={this.step}\n            type={this.type}\n            value={this.value}\n            part=\"input\"\n            // Events\n            onBlur={this.handleBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onInput={this.handleInput}\n          />\n          {/* Clear Button */}\n          {this.hasValue && !this.disabled && !this.disableClear && (\n            // The clear button will be visible as long as the input has a value\n            // and the parent group is hovered or has focus-within\n            <bq-button\n              class=\"bq-input--control__clear ms-[--bq-input--gap] hidden\"\n              appearance=\"text\"\n              aria-label={this.clearButtonLabel}\n              size=\"small\"\n              onBqClick={this.handleClearClick}\n              part=\"clear-btn\"\n              exportparts=\"button\"\n            >\n              <slot name=\"clear-icon\">\n                <bq-icon name=\"x-circle\" class=\"flex\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* Suffix */}\n          <span\n            class={{ 'bq-input--control__suffix': true, '!hidden': !this.hasSuffix }}\n            ref={(spanElem) => (this.suffixElem = spanElem)}\n            part=\"suffix\"\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n          </span>\n        </div>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-input--helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          ref={(divElem) => (this.helperTextElem = divElem)}\n          part=\"helper-text\"\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleHelperTextSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bq-select.js

@@ -7,8 +7,9 @@ import './assetsPath.js';
 import { d as debounce } from './debounce.js';
 import { i as isDefined } from './isDefined.js';
 import { i as isHTMLElement } from './isHTMLElement.js';
+import { i as isNil } from './isNil.js';
 import { i as isString } from './isString.js';
-import { b as hasSlotContent, a as getTextContent } from './slot.js';
+import { b as hasSlotContent } from './slot.js';
 import { d as defineCustomElement$7 } from './bq-button2.js';
 import { d as defineCustomElement$6 } from './bq-dropdown2.js';
 import { d as defineCustomElement$5 } from './bq-icon2.js';
@@ -28,6 +29,7 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
         this.bqClear = createEvent(this, "bqClear", 7);
         this.bqFocus = createEvent(this, "bqFocus", 7);
         this.bqSelect = createEvent(this, "bqSelect", 7);
+        this.internals = this.attachInternals();
         this.fallbackInputId = 'select';
         // Local methods
         // Internal business logic.
@@ -127,34 +129,58 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
             this.options.forEach((item) => (item.hidden = false));
         };
         this.syncItemsFromValue = () => {
-            var _a;
-            const items = this.options;
-            if (!items.length)
+            const { internals, options, value } = this;
+            if (!options.length)
                 return;
             // Sync selected state of the BqOption elements
-            this.options.forEach((option) => {
-                if (this.multiple && Array.isArray(this.value)) {
-                    option.selected = this.value.includes(option.value);
+            this.syncSelectedOptionsState();
+            if (this.multiple) {
+                // Sync selected options for multiple selection mode
+                this.selectedOptions = options.filter((option) => { var _a; return (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(option.value); });
+            }
+            else {
+                // Sync display label for single selection mode
+                this.updateDisplayLabel();
+            }
+            internals.setFormValue(!isNil(value) ? `${value}` : undefined);
+        };
+        /**
+         * Syncs the selected state of the BqOption elements which value is included in the `value` property.
+         * Notice that value can be a string or an array of strings.
+         *
+         * @private
+         * @memberof BqSelect
+         */
+        this.syncSelectedOptionsState = () => {
+            const { options, multiple, value } = this;
+            const lowerCaseValue = String(value).toLowerCase();
+            options.forEach((option) => {
+                if (multiple && Array.isArray(value)) {
+                    option.selected = value.includes(option.value);
                 }
                 else {
-                    option.selected = option.value.toLowerCase() === String(this.value).toLowerCase();
+                    option.selected = option.value.toLowerCase() === lowerCaseValue;
                 }
             });
-            if (!this.multiple) {
-                // Sync display label
-                const checkedItem = items.filter((item) => item.value === this.value)[0];
-                this.displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';
-                this.inputElem.value = (_a = this.displayValue) !== null && _a !== void 0 ? _a : '';
-            }
-            else {
-                this.selectedOptions = this.options.filter((item) => { var _a; return (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item.value); });
-            }
+        };
+        /**
+         * Updates the display value of the input element based on the selected option.
+         *
+         * @private
+         * @memberof BqSelect
+         */
+        this.updateDisplayLabel = () => {
+            const { value, options, inputElem } = this;
+            const checkedItem = options.find((item) => item.value === value);
+            const displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';
+            inputElem.value = displayValue;
+            this.displayValue = displayValue;
         };
         this.getOptionLabel = (item) => {
-            const slot = item.shadowRoot.querySelector('slot:not([name])');
-            if (!slot)
+            var _a;
+            if (!item)
                 return;
-            return getTextContent(slot);
+            return (_a = item.innerText.trim()) !== null && _a !== void 0 ? _a : '';
         };
         this.displayValue = undefined;
         this.hasHelperText = false;
@@ -192,6 +218,7 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
         if (this.multiple && isString(this.value)) {
             // NOTE: we ensure that value is an array, changing the value will trigger Watch to execute thus the return
             this.value = Array.from(JSON.parse(String(this.value)));
+            this.internals.setFormValue(this.value.join(','));
             return;
         }
         this.syncItemsFromValue();
@@ -210,6 +237,16 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
         }
         this.handleValueChange();
     }
+    formAssociatedCallback() {
+        this.internals.role = 'combobox';
+        this.internals.ariaExpanded = this.open ? 'true' : 'false';
+    }
+    async formResetCallback() {
+        if (isNil(this.value))
+            return;
+        this.internals.setValidity({});
+        this.clear();
+    }
     // Listeners
     // ==============
     handleOpenChange(ev) {
@@ -238,14 +275,19 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
     async clear() {
         if (this.disabled)
             return;
+        const { multiple, inputElem, bqClear, el } = this;
+        // Clear value and selected options
         this.value = undefined;
         this.selectedOptions = [];
-        if (!this.multiple) {
+        // Clear display value and input element if not multiple
+        if (!multiple) {
             this.displayValue = undefined;
-            this.inputElem.value = undefined;
+            inputElem.value = undefined;
         }
+        // Update form value and reset options visibility
         this.resetOptionsVisibility();
-        this.bqClear.emit(this.el);
+        // Emit clear event
+        bqClear.emit(el);
     }
     get options() {
         return Array.from(this.el.querySelectorAll('bq-option'));
@@ -285,27 +327,28 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
     // ===================================
     render() {
         const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '7fe45a350c812326e4c0d354a10428526acf3dab', class: "bq-select", part: "base" }, h("label", { key: '0fc5472d31a357442190386917746e57366576d3', id: labelId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: 'e17c800558900192e3f5d2f278a70eeb94c31c42', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: '29ac93789cbbed8fb381b576a247c78ce444b9bc', class: "bq-select__dropdown w-full", disabled: this.disabled, distance: this.distance, keepOpenOnSelect: this.keepOpenOnSelect, open: this.open, panelHeight: this.panelHeight, placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy, exportparts: "panel" }, h("div", { key: '5cebdda4786fbb0d47355f8a41b4b0a19d5974ad', class: {
+        return (h("div", { key: 'b0822a6c3f418c4baadbdd0fffe0678c85d4a858', class: "bq-select", part: "base" }, h("label", { key: '1cdf1bbf83b43cc794b08ba4fe175317cd562930', id: labelId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '98b253b36c68a4ab56f269959f50f0539ddaf9b3', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: 'b614f2d5b71c6d1b246c19b716cebca8a5776c63', class: "bq-select__dropdown w-full", disabled: this.disabled, distance: this.distance, keepOpenOnSelect: this.keepOpenOnSelect, open: this.open, panelHeight: this.panelHeight, placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy, exportparts: "panel" }, h("div", { key: 'c0f4ea4d05b2411ebe95f32393702e1b566203c4', class: {
                 'bq-select__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '80b821225b8f498f34e918715e40633d3f442b18', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '04f266b634aa2ae77892f3de9ceb648966795bbe', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("div", { key: '62cad8517118b225d6c35b7620565262ea9f7355', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: '22a2750d5fe67baa59a0ac007426ba84ae1b2454', class: "bq-select__tags", part: "tags" }, h("slot", { key: 'd05869bf1d4375acc7b70a26ebea3b13531dd3c9', name: "tags" }, this.displayTags))), h("input", { key: '04488420c90a56708717ae70628d484b99208ed6', id: this.name || this.fallbackInputId, class: "bq-select__control--input flex-grow is-full", autoComplete: "off", autoCapitalize: "off", autoFocus: this.autofocus, "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `bq-options-${this.name}`, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", disabled: this.disabled, form: this.form, name: this.name, placeholder: this.displayPlaceholder, ref: (inputElem) => (this.inputElem = inputElem), readOnly: this.readonly, required: this.required, role: "combobox", spellcheck: false, type: "text", value: this.displayValue, part: "input",
+            }, part: "control", slot: "trigger" }, h("span", { key: 'e87b700d7682189ae49c28ce5f0341ca32944827', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'b2117317d53f0fd3c62880fb73f47d8a0032bd0e', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("div", { key: '22c024d6ab811d60930217b4e0f0397f47f4af4e', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: '230c6552acbcb80cd15dc2b712da9b48b4fb0a87', class: "bq-select__tags", part: "tags" }, h("slot", { key: 'd466eb5a20ef181e6c7671a9c4f177d6e2e3bd30', name: "tags" }, this.displayTags))), h("input", { key: 'f7b1dd41dfa8a87cbc5747fd9b3f8d965c1702c9', id: this.name || this.fallbackInputId, class: "bq-select__control--input flex-grow is-full", autoComplete: "off", autoCapitalize: "off", autoFocus: this.autofocus, "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `bq-options-${this.name}`, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", disabled: this.disabled, form: this.form, name: this.name, placeholder: this.displayPlaceholder, ref: (inputElem) => (this.inputElem = inputElem), readOnly: this.readonly, required: this.required, role: "combobox", spellcheck: false, type: "text", value: this.displayValue, part: "input",
             // Events
             onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleSearchFilter })), this.hasClearIcon && (
         // The clear button will be visible as long as the input has a value
         // and the parent group is hovered or has focus-within
-        h("bq-button", { key: '64461843191cdf3935c464d28d93d3fff050c491', class: "bq-select__control--clear ms-[--bq-select--gap]", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button", tabIndex: -1 }, h("slot", { key: 'a0dfdde0bd4276bf42aae558fbd640ca652038ce', name: "clear-icon" }, h("bq-icon", { key: 'f147f74f440efe09bba58b20887f4b3a4b44d367', name: "x-circle", class: "flex" })))), h("span", { key: '6fcb1a3e3f3e91538acbe1b397d42403b0b3da79', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '2bfa95fd7b42673ae8926ff1cc32cb69a54aaf2e', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '5cefb7d796850bdc69db617462eeebd1ef30ce0a', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: 'dc4afacc19225ee195a92c5f79f6da798231cb7f', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: '95a0fe75c20d2d6f43b795926a281c9c20b8eb29' }))), h("div", { key: '237548a08bdaef24d61c0e4b0d0d53b75cd8b71b', class: {
+        h("bq-button", { key: 'a414e48a85ecb319fbd2dfa92303d56139281947', class: "bq-select__control--clear ms-[--bq-select--gap]", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button", tabIndex: -1 }, h("slot", { key: 'adb12a220b55c1b0b772f1309b0dfcf1f3543879', name: "clear-icon" }, h("bq-icon", { key: '9f4c77e3f7547b39f7015a34d99f44acae1ff552', name: "x-circle", class: "flex" })))), h("span", { key: '57f5b28c0cdb54098c683b437a9e9b18df122d99', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'a897f738544a13d4283232d7e6601210477884fa', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '4d92c46edda852f4290f4d26294a4d396e3359c8', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: 'e1d33bd852ccddb2b11871a8a589bfd7424659ca', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: 'efc2746ae6ed636498a93f02852c2b5f9b6810ed' }))), h("div", { key: '7af06c40296fb14b27d53f903a84acb879a0c48c', class: {
                 [`bq-select__helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
-            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: 'a02b29c26ce956e1621a5fa6e411b01715ea7a9a', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
+            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: '82a339ec99ea0d9fbc991644f609e93fddf0aed1', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
     }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     get el() { return this; }
     static get watchers() { return {
         "value": ["handleValueChange"]
     }; }
     static get style() { return BqSelectStyle0; }
-}, [17, "bq-select", {
+}, [81, "bq-select", {
         "autofocus": [516],
         "clearButtonLabel": [513, "clear-button-label"],
         "debounceTime": [1538, "debounce-time"],