npm - @beeq/core - Versions diffs - 1.3.0 → 1.3.2 - Mend

@beeq/core 1.3.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (253) hide show

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

	@@ -1 +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 { Env } from '@stencil/core';\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 = !Env.ICONS_SVG_PATH ? '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 fill-current;\n}\n","import { Component, Env, 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 } 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 /* It set the icon weight/style /\n @Prop({ reflect: true }) weight?: TIconWeight = 'regular';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n @Watch('weight')\n handlePropsChange() {\n this.loadIcon();\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 componentWillLoad() {\n this.handlePropsChange();\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 = () => {\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 { iconPath } = this.getIconDetails();\n return getBasePath(iconPath);\n };\n\n private loadIcon = () => {\n const url = this.getIconSource();\n getSvgContent(url, true).then(() => {\n this._svgContent = iconContent.get(url);\n this.svgLoaded.emit(this._svgContent);\n });\n };\n\n private getIconDetails = (): { iconName: string; iconPath: string } => {\n const REGULAR = 'regular';\n const SVG_EXTENSION = '.svg';\n const LOCAL_SVG_PATH = './svg/';\n const ENV_SVG_PATH = Env.ICONS_SVG_PATH;\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 isWeightedIcon = this.weight !== REGULAR && !ENV_SVG_PATH;\n\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\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}${SVG_EXTENSION}`;\n\n // Construct the path to the icon file.\n // Eg: if iconName is 'my-icon-bold.svg', iconPath will be './svg/my-icon-bold.svg'.\n // Eg: if iconName is 'my-icon-bold.svg' and ENV_SVG_PATH is 'https://mycdn.com/icons', iconPath will be 'https://mycdn.com/icons/my-icon-bold.svg'.\n const iconPath = !ENV_SVG_PATH ? `${LOCAL_SVG_PATH}${iconName}` : `${ENV_SVG_PATH}/${iconName}`;\n\n // Return the icon name and path.\n return { iconName, iconPath };\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 h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]\"\n innerHTML={this._svgContent}\n part=\"base\"\n role=\"img\"\n />\n </Host>\n );\n }\n}\n"],"version":3}
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 fill-current;\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 } 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 /* It set the icon weight/style /\n @Prop({ reflect: true }) weight?: TIconWeight = 'regular';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('color')\n @Watch('name')\n @Watch('size')\n @Watch('weight')\n handlePropsChange() {\n this.loadIcon();\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 componentWillLoad() {\n this.handlePropsChange();\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 = () => {\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 { iconPath } = this.getIconDetails();\n return getBasePath(iconPath);\n };\n\n private loadIcon = () => {\n const url = this.getIconSource();\n getSvgContent(url, true).then(() => {\n this._svgContent = iconContent.get(url);\n this.svgLoaded.emit(this._svgContent);\n });\n };\n\n private getIconDetails = (): { iconName: string; iconPath: string } => {\n const REGULAR = 'regular';\n const SVG_EXTENSION = '.svg';\n const LOCAL_SVG_PATH = './svg/';\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 isWeightedIcon = this.weight !== REGULAR;\n\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\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}${SVG_EXTENSION}`;\n\n // Construct the path to the icon file.\n // Eg: if iconName is 'my-icon-bold.svg', iconPath will be './svg/my-icon-bold.svg'.\n const iconPath = `${LOCAL_SVG_PATH}${iconName}`;\n\n // Return the icon name and path.\n return { iconName, iconPath };\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 h-[var(--bq-icon--size)] w-[var(--bq-icon--size)] text-[color:var(--bq-icon--color)]\"\n innerHTML={this._svgContent}\n part=\"base\"\n role=\"img\"\n />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/bq-select.js CHANGED Viewed

@@ -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 isString } from './isString.js';
 import { b as hasSlotContent, a as getTextContent } from './slot.js';
 import { d as defineCustomElement$7 } from './bq-button2.js';
 import { d as defineCustomElement$6 } from './bq-dropdown2.js';
@@ -145,6 +146,9 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
                 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); });
+            }
         };
         this.getOptionLabel = (item) => {
             const slot = item.shadowRoot.querySelector('slot:not([name])');
@@ -185,6 +189,11 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
     // Prop lifecycle events
     // =======================
     handleValueChange() {
+        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)));
+            return;
+        }
         this.syncItemsFromValue();
     }
     // Component lifecycle events
@@ -201,9 +210,6 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
         }
         this.handleValueChange();
     }
-    componentDidRender() {
-        this.syncItemsFromValue();
-    }
     // Listeners
     // ==============
     handleOpenChange(ev) {
@@ -251,7 +257,11 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
     get displayTags() {
         return this.selectedOptions.map((item, index) => {
             if (index < this.maxTagsVisible || this.maxTagsVisible < 0) {
-                return (h("bq-tag", { key: item.value, removable: true, size: "xsmall", variant: "filled", onBqClose: () => this.handleTagRemove(item),
+                return (h("bq-tag", { key: item.value, removable: true, size: "xsmall", variant: "filled", onBqClose: (event) => {
+                        // NOTE: prevents triggering bqClose on parent
+                        event.stopPropagation();
+                        this.handleTagRemove(item);
+                    },
                     // Prevent the tag from closing the panel when clicked
                     onClick: (ev) => ev.stopPropagation(), exportparts: "wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close", part: "tag" }, this.getOptionLabel(item)));
             }
@@ -275,19 +285,19 @@ const BqSelect$1 = /*@__PURE__*/ proxyCustomElement(class BqSelect extends HTMLE
     // ===================================
     render() {
         const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '02f9d50d197ecd012e03c270405457dbf14f9144', class: "bq-select", part: "base" }, h("label", { key: '7d57662924ea12872edaf0b769c42f680f16d2dd', 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: '95fd243c08024aa5ec821282b1a648e42b1ae4fc', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: '93b96ada984d062715c4a1cee51c950d7655e710', 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: '990ba26e0d8f88ecc2d4a789c5917bba6e4aa87d', class: {
+        return (h("div", { key: '93365bce60725fc80034b51de1e7ef751fe65c37', class: "bq-select", part: "base" }, h("label", { key: '0065e122f209644a1fa877fed37b96cdd43332c2', 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: '377f747dacc7fdde8a131763d6f936643675606f', name: "label", onSlotchange: this.handleLabelSlotChange })), h("bq-dropdown", { key: '5e5a1cb415f5dca1cb5bd300a97551e619e8f7ec', 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: 'e26f9abac85ac1aa4eef36866862eb9284a96aad', class: {
                 'bq-select__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '26009add5f23f3b33e6912b804428e67da347fef', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '03d70e1cd969c7c26b95b94af36958a84fb5c52d', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("div", { key: '5ac3eb995b5d5dc6fab0ac73962b260cd7834303', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: '732309cc836b6363c1dd4e30014fe19d790489e4', class: "me-xs2 flex flex-1 gap-xs2 [&>bq-tag::part(text)]:text-nowrap [&>bq-tag::part(text)]:leading-small [&>bq-tag]:inline-flex", part: "tags" }, this.displayTags)), h("input", { key: '17461304fab0315baec7afaa053b80c54d234b68', id: this.name || this.fallbackInputId, class: "bq-select__control--input w-full flex-grow", 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: '01ce8b1b75f83ab2cdec682ee2b68e1cd2cea2ab', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '0a6404d02c4cf3ea68d76cda304627629172d505', name: "prefix", onSlotchange: this.handlePrefixSlotChange })), h("div", { key: '5d9f95e9371c8dc78cbc89b519f1d523efb56fbb', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'e2a41a90ff515cb050cb50d562fd3456a0c5a971', class: "me-xs2 flex flex-1 gap-xs2 [&>bq-tag::part(text)]:text-nowrap [&>bq-tag::part(text)]:leading-small [&>bq-tag]:inline-flex", part: "tags" }, this.displayTags)), h("input", { key: '179962a0c3572cf267c5787f5258f3251d0865a9', id: this.name || this.fallbackInputId, class: "bq-select__control--input w-full flex-grow", 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: 'bcb8c3f5fad488f98abcd0ce6d650309ae579ef9', 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: '014f8b03b759e8834896d1ef3b97de5be36cff61', name: "clear-icon" }, h("bq-icon", { key: '09b481745b2c21fa3e7e025ab65d6ec65c6799ad', name: "x-circle", class: "flex" })))), h("span", { key: '3a472bb44053d4db6bd23a8903e3cf2302ba8175', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '7ab67db44451d26e47025141562f4964a959cebd', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: 'a275bc3592809db0400d4997347215cfcbe1c7ea', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: 'f35debbc5f66029cbb4e629f121cdd07d9f8d7d1', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: 'd3f0221adf2f45de44c2ac8c5b015ff9db45ee87' }))), h("div", { key: 'acacde82dfed85687cfa8b443992f79cc3f2f145', class: {
+        h("bq-button", { key: '2f94a0813747b23caaeaab20f28bd687b7cb7d3b', 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: '5b0168c7b8bce6ccc05080a8111216d098c987a7', name: "clear-icon" }, h("bq-icon", { key: 'ad6b5016896acb1226726599603465fb1b280b65', name: "x-circle", class: "flex" })))), h("span", { key: '505eebe64f8faed6b31a34b80429ea23a4517948', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: 'f4ae5ea77e67b54e32206e68735a8eb1afd4d0e1', name: "suffix", onSlotchange: this.handleSuffixSlotChange }, h("bq-icon", { key: '005e9c61ba8353db41f4aeb9ca0d5c47fae41bfe', name: "caret-down", class: "flex" })))), h("bq-option-list", { key: '206613838b1af99cbf41fe64bb9d5d008cd6fd92', id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", role: "listbox" }, h("slot", { key: '57b47f994fccfea12105b8fb45ab8f72766134a5' }))), h("div", { key: '3702dbb3eebc9485fc6089068c8aa3f318527c86', class: {
                 [`bq-select__helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
-            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: 'b94d5f1dc8769ba3f06794c2648351695887152f', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
+            }, ref: (divElem) => (this.helperTextElem = divElem), part: "helper-text" }, h("slot", { key: '9464eeac52d5252be2e6d991688e4411a29bc148', name: "helper-text", onSlotchange: this.handleHelperTextSlotChange }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/bq-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-select.js","mappings":"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","names":["BqSelect"],"sources":["../../packages/beeq/src/components/select/scss/bq-select.scss?tag=bq-select&encapsulation=shadow","../../packages/beeq/src/components/select/bq-select.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Select styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-select.variables';\n\n:host {\n @apply block w-full;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Label and Helper text /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__label {\n @apply mb-[--bq-select--label-margin-bottom] flex flex-grow items-center gap-[--var(--bq-select--gap-label)];\n @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];\n}\n\n.bq-select__helper-text {\n @apply mt-[--bq-select--helper-margin-top] text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color];\n}\n\n.bq-select__helper-text.validation-error {\n @apply text-text-danger;\n}\n\n.bq-select__helper-text.validation-success {\n @apply text-text-success;\n}\n\n.bq-select__helper-text.validation-warning {\n @apply text-text-warning;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Select input group control /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__dropdown:has(:focus-within, :focus-visible) {\n // The focus state will be controlled by the dropdown element\n // if any of its children has focus, the dropdown will set the focus state to the .bq-select__control\n .bq-select__control {\n --bq-ring-width: 1px;\n --bq-ring-offset-width: 0;\n --bq-ring-color-focus: var(--bq-select--border-color-focus);\n\n @apply focus border-[color:--bq-select--border-color-focus];\n }\n}\n\n.bq-select__control {\n @apply flex w-full items-center transition-[border-color,box-shadow];\n // Border\n @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];\n // Padding\n @apply py-[--bq-select--paddingY] pe-[--bq-select--padding-end] ps-[--bq-select--padding-start];\n // Text\n @apply select-none text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];\n // Hover\n @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-brand;\n\n border-style: var(--bq-select--border-style);\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-select__control--clear {\n @apply inline-block;\n }\n }\n}\n\n.bq-select__control.disabled {\n @apply cursor-not-allowed opacity-60;\n}\n\n/ ------------------------------- Validation ------------------------------- /\n\n.bq-select__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-select__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-select__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-select__control--input {\n @apply flex-auto cursor-[inherit] select-none appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];\n @apply m-0 min-h-[--bq-select--icon-size] min-w-[0] border-none p-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-select__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 h-auto rounded-xs border-none p-0;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Prefix and suffix /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__control--prefix,\n.bq-select__control--suffix {\n @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];\n}\n\n.bq-select__control--prefix {\n @apply me-[--bq-select--gap];\n}\n\n.bq-select__control--suffix {\n @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Slotted and internal icons /\n/ -------------------------------------------------------------------------- /\n\nbq-icon,\n::slotted(bq-icon) {\n --bq-icon--size: var(--bq-select--icon-size) !important;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { FloatingUIPlacement } from '../../services/interfaces';\nimport { debounce, getTextContent, hasSlotContent, isDefined, isHTMLElement, TDebounce } from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string \| string[];\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 input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n /\n@Component({\n tag: 'bq-select',\n styleUrl: './scss/bq-select.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSelect {\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 debounceQuery: TDebounce<void>;\n\n private fallbackInputId = 'select';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSelectElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() displayValue?: string;\n @State() hasHelperText = false;\n @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /* If true, the Select 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 Select input is disabled or not.\n * If `true`, the Select 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 /* Represents the distance (gutter or margin) between the Select panel and the input element. /\n @Prop({ reflect: true }) distance?: number = 8;\n\n /* The ID of the form that the Select input belongs to. /\n @Prop({ reflect: true }) form?: string;\n\n /* If true, the Select panel will remain open after a selection is made. /\n @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n /* The Select input name. /\n @Prop({ reflect: true }) name!: string;\n\n /* The maximum number of tags to display when multiple selection is enabled /\n @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n /* If true, the Select input will allow multiple selections. /\n @Prop({ reflect: true }) multiple?: boolean = false;\n\n /* If true, the Select panel will be visible. /\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /* When set, it will override the height of the Select panel. /\n @Prop({ reflect: true }) panelHeight?: string;\n\n /* The Select input placeholder text value /\n @Prop({ reflect: true }) placeholder?: string;\n\n /* Position of the Select panel /\n @Prop({ reflect: true }) placement?: FloatingUIPlacement = 'bottom';\n\n /* If true, the list of options cannot be filtered (searching won't be available) /\n @Prop({ reflect: true }) readonly?: boolean;\n\n /* Indicates whether or not the Select input is required to be filled out before submitting the form. /\n @Prop({ reflect: true }) required?: boolean;\n\n /* Whether the panel should have the Select same width as the input element /\n @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n /* Represents the skidding between the Select panel and the input element. /\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /* Defines the strategy to position the Select panel /\n @Prop({ reflect: true }) strategy?: 'fixed' \| 'absolute' = 'fixed';\n\n /\n The validation status of the Select input.\n \n @remarks\n * This property is used to indicate the validation status of the select 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 select input value, it can be used to reset the field to a previous value /\n @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n this.syncItemsFromValue();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the Select input loses focus /\n @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has been cleared /\n @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the Select input has received focus /\n @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has changed /\n @Event() bqSelect!: EventEmitter<{ value: string \| number \| string[]; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (this.multiple) {\n this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\n }\n }\n\n componentDidLoad() {\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n }\n\n this.handleValueChange();\n }\n\n componentDidRender() {\n this.syncItemsFromValue();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqOpen', { capture: true })\n handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n if (!ev.composedPath().includes(this.el)) return;\n\n this.open = ev.detail.open;\n }\n\n @Listen('bqFocus', { capture: true })\n @Listen('bqBlur', { capture: true })\n stopOptionFocusBlurPropagation(ev: CustomEvent) {\n // Stop propagation of focus and blur events coming from the `bq-option` elements\n if (isHTMLElement(ev.target, 'bq-select')) return;\n\n ev.stopPropagation();\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /\n Clears the selected value.\n \n @return {Promise<void>}\n * @memberof BqSelect\n /\n @Method()\n async clear(): Promise<void> {\n if (this.disabled) return;\n\n this.value = undefined;\n this.selectedOptions = [];\n if (!this.multiple) {\n this.displayValue = undefined;\n this.inputElem.value = undefined;\n }\n\n this.resetOptionsVisibility();\n this.bqClear.emit(this.el);\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 handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n if (this.disabled) return;\n\n if (this.multiple) {\n ev.stopPropagation();\n }\n\n const { value, item } = ev.detail;\n\n if (this.multiple) {\n this.handleMultipleSelection(item);\n // Clear the input value after selecting an item\n this.inputElem.value = '';\n // If multiple selection is enabled, emit the selected items array instead of relying on\n // the option list to emit the value of the selected item\n this.bqSelect.emit({ value: this.value, item });\n } else {\n this.value = value;\n }\n\n this.resetOptionsVisibility();\n this.inputElem.focus();\n };\n\n private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n const selectedOptionsSet = new Set(this.selectedOptions);\n\n if (selectedOptionsSet.has(item)) {\n selectedOptionsSet.delete(item);\n } else {\n selectedOptionsSet.add(item);\n }\n\n this.selectedOptions = Array.from(selectedOptionsSet);\n this.value = this.selectedOptions.map((item) => item.value);\n };\n\n private handleSearchFilter = (ev: Event) => {\n if (this.disabled) return;\n\n this.debounceQuery?.cancel();\n\n const query = (ev.target as HTMLInputElement).value?.toLowerCase().trim();\n\n if (!isDefined(query)) {\n this.clear();\n } else {\n this.debounceQuery = debounce(() => {\n this.options.forEach((item: HTMLBqOptionElement) => {\n const itemLabel = this.getOptionLabel(item).toLowerCase();\n item.hidden = !itemLabel.includes(query);\n });\n }, this.debounceTime);\n\n this.debounceQuery();\n }\n\n // The panel will close once a selection is made\n // so we need to make sure it's open when the user is typing and the query is not empty\n this.open = true;\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n (async () => {\n await this.clear();\n })();\n this.inputElem.focus();\n\n ev.stopPropagation();\n };\n\n private handleTagRemove = (item: HTMLBqOptionElement) => {\n if (this.disabled) return;\n\n this.handleMultipleSelection(item);\n this.bqSelect.emit({ value: this.value, item });\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 private resetOptionsVisibility = () => {\n this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n };\n\n private syncItemsFromValue = () => {\n const items = this.options;\n if (!items.length) return;\n\n // Sync selected state of the BqOption elements\n this.options.forEach((option: HTMLBqOptionElement) => {\n if (this.multiple && Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = option.value.toLowerCase() === String(this.value).toLowerCase();\n }\n });\n\n if (!this.multiple) {\n // Sync display label\n const checkedItem = items.filter((item) => item.value === this.value)[0];\n this.displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n this.inputElem.value = this.displayValue ?? '';\n }\n };\n\n private getOptionLabel = (item: HTMLBqOptionElement) => {\n const slot = item.shadowRoot.querySelector('slot:not([name])');\n if (!slot) return;\n\n return getTextContent(slot as HTMLSlotElement);\n };\n\n private get options() {\n return Array.from(this.el.querySelectorAll('bq-option'));\n }\n\n private get displayPlaceholder() {\n // Hide the placeholder when multiple selection is enabled and there are selected items\n return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n }\n\n private get displayTags() {\n return this.selectedOptions.map((item, index) => {\n if (index < this.maxTagsVisible \|\| this.maxTagsVisible < 0) {\n return (\n <bq-tag\n key={item.value}\n removable\n size=\"xsmall\"\n variant=\"filled\"\n onBqClose={() => this.handleTagRemove(item)}\n // Prevent the tag from closing the panel when clicked\n onClick={(ev: MouseEvent) => ev.stopPropagation()}\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n {this.getOptionLabel(item)}\n </bq-tag>\n );\n } else if (index === this.maxTagsVisible) {\n return (\n <bq-tag\n key=\"more\"\n size=\"xsmall\"\n variant=\"filled\"\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n +{this.selectedOptions.length - index}\n </bq-tag>\n );\n }\n\n return null;\n });\n }\n\n private get hasClearIcon() {\n if (this.disableClear \|\| this.disabled) {\n return false;\n }\n\n if (this.multiple) {\n return this.selectedOptions.length > 0;\n }\n\n return isDefined(this.displayValue);\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const labelId = `bq-select__label-${this.name \|\| this.fallbackInputId}`;\n\n return (\n <div class=\"bq-select\" part=\"base\">\n {/ Label /}\n <label\n id={labelId}\n class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}\n htmlFor={this.name \|\| this.fallbackInputId}\n ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n </label>\n {/ Select dropdown /}\n <bq-dropdown\n class=\"bq-select__dropdown w-full\"\n disabled={this.disabled}\n distance={this.distance}\n keepOpenOnSelect={this.keepOpenOnSelect}\n open={this.open}\n panelHeight={this.panelHeight}\n placement={this.placement}\n sameWidth={this.sameWidth}\n skidding={this.skidding}\n strategy={this.strategy}\n exportparts=\"panel\"\n >\n {/ Input control group /}\n <div\n class={{\n 'bq-select__control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n slot=\"trigger\"\n >\n {/ Prefix /}\n <span\n class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n </span>\n <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n {/ Display selected values using BqTags for multiple selection /}\n {this.multiple && (\n <span\n class=\"me-xs2 flex flex-1 gap-xs2 [&>bq-tag::part(text)]:text-nowrap [&>bq-tag::part(text)]:leading-small [&>bq-tag]:inline-flex\"\n part=\"tags\"\n >\n {this.displayTags}\n </span>\n )}\n {/ HTML Input /}\n <input\n id={this.name \|\| this.fallbackInputId}\n class=\"bq-select__control--input w-full flex-grow\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n autoFocus={this.autofocus}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls={`bq-options-${this.name}`}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n placeholder={this.displayPlaceholder}\n ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n readOnly={this.readonly}\n required={this.required}\n role=\"combobox\"\n spellcheck={false}\n type=\"text\"\n value={this.displayValue}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onInput={this.handleSearchFilter}\n />\n </div>\n {/ Clear Button /}\n {this.hasClearIcon && (\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-select__control--clear ms-[--bq-select--gap]\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n tabIndex={-1}\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-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange}>\n <bq-icon name=\"caret-down\" class=\"flex\" />\n </slot>\n </span>\n </div>\n <bq-option-list\n id={`bq-options-${this.name}`}\n onBqSelect={this.handleSelect}\n aria-expanded={this.open ? 'true' : 'false'}\n exportparts=\"base:option-list\"\n role=\"listbox\"\n >\n <slot />\n </bq-option-list>\n </bq-dropdown>\n {/ Helper text */}\n <div\n class={{\n [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText,\n }}\n ref={(divElem: HTMLDivElement) => (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}
1	+ {"file":"bq-select.js","mappings":"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","names":["BqSelect"],"sources":["../../packages/beeq/src/components/select/scss/bq-select.scss?tag=bq-select&encapsulation=shadow","../../packages/beeq/src/components/select/bq-select.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Select styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-select.variables';\n\n:host {\n @apply block w-full;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Label and Helper text /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__label {\n @apply mb-[--bq-select--label-margin-bottom] flex flex-grow items-center gap-[--var(--bq-select--gap-label)];\n @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];\n}\n\n.bq-select__helper-text {\n @apply mt-[--bq-select--helper-margin-top] text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color];\n}\n\n.bq-select__helper-text.validation-error {\n @apply text-text-danger;\n}\n\n.bq-select__helper-text.validation-success {\n @apply text-text-success;\n}\n\n.bq-select__helper-text.validation-warning {\n @apply text-text-warning;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Select input group control /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__dropdown:has(:focus-within, :focus-visible) {\n // The focus state will be controlled by the dropdown element\n // if any of its children has focus, the dropdown will set the focus state to the .bq-select__control\n .bq-select__control {\n --bq-ring-width: 1px;\n --bq-ring-offset-width: 0;\n --bq-ring-color-focus: var(--bq-select--border-color-focus);\n\n @apply focus border-[color:--bq-select--border-color-focus];\n }\n}\n\n.bq-select__control {\n @apply flex w-full items-center transition-[border-color,box-shadow];\n // Border\n @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];\n // Padding\n @apply py-[--bq-select--paddingY] pe-[--bq-select--padding-end] ps-[--bq-select--padding-start];\n // Text\n @apply select-none text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];\n // Hover\n @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-stroke-brand;\n\n border-style: var(--bq-select--border-style);\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-select__control--clear {\n @apply inline-block;\n }\n }\n}\n\n.bq-select__control.disabled {\n @apply cursor-not-allowed opacity-60;\n}\n\n/ ------------------------------- Validation ------------------------------- /\n\n.bq-select__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-select__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-select__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-select__control--input {\n @apply flex-auto cursor-[inherit] select-none appearance-none bg-[inherit] font-[inherit] text-[length:inherit] text-[color:inherit];\n @apply m-0 min-h-[--bq-select--icon-size] min-w-[0] border-none p-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-select__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 h-auto rounded-xs border-none p-0;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Prefix and suffix /\n/ -------------------------------------------------------------------------- /\n\n.bq-select__control--prefix,\n.bq-select__control--suffix {\n @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];\n}\n\n.bq-select__control--prefix {\n @apply me-[--bq-select--gap];\n}\n\n.bq-select__control--suffix {\n @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;\n}\n\n/ -------------------------------------------------------------------------- /\n/ Slotted and internal icons /\n/ -------------------------------------------------------------------------- /\n\nbq-icon,\n::slotted(bq-icon) {\n --bq-icon--size: var(--bq-select--icon-size) !important;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { FloatingUIPlacement } from '../../services/interfaces';\nimport {\n debounce,\n getTextContent,\n hasSlotContent,\n isDefined,\n isHTMLElement,\n isString,\n TDebounce,\n} from '../../shared/utils';\nimport { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string \| string[];\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 input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n /\n@Component({\n tag: 'bq-select',\n styleUrl: './scss/bq-select.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSelect {\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 debounceQuery: TDebounce<void>;\n\n private fallbackInputId = 'select';\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqSelectElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() displayValue?: string;\n @State() hasHelperText = false;\n @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /* If true, the Select 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 Select input is disabled or not.\n * If `true`, the Select 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 /* Represents the distance (gutter or margin) between the Select panel and the input element. /\n @Prop({ reflect: true }) distance?: number = 8;\n\n /* The ID of the form that the Select input belongs to. /\n @Prop({ reflect: true }) form?: string;\n\n /* If true, the Select panel will remain open after a selection is made. /\n @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n /* The Select input name. /\n @Prop({ reflect: true }) name!: string;\n\n /* The maximum number of tags to display when multiple selection is enabled /\n @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n /* If true, the Select input will allow multiple selections. /\n @Prop({ reflect: true }) multiple?: boolean = false;\n\n /* If true, the Select panel will be visible. /\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /* When set, it will override the height of the Select panel. /\n @Prop({ reflect: true }) panelHeight?: string;\n\n /* The Select input placeholder text value /\n @Prop({ reflect: true }) placeholder?: string;\n\n /* Position of the Select panel /\n @Prop({ reflect: true }) placement?: FloatingUIPlacement = 'bottom';\n\n /* If true, the list of options cannot be filtered (searching won't be available) /\n @Prop({ reflect: true }) readonly?: boolean;\n\n /* Indicates whether or not the Select input is required to be filled out before submitting the form. /\n @Prop({ reflect: true }) required?: boolean;\n\n /* Whether the panel should have the Select same width as the input element /\n @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n /* Represents the skidding between the Select panel and the input element. /\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /* Defines the strategy to position the Select panel /\n @Prop({ reflect: true }) strategy?: 'fixed' \| 'absolute' = 'fixed';\n\n /\n The validation status of the Select input.\n \n @remarks\n * This property is used to indicate the validation status of the select 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 select input value, it can be used to reset the field to a previous value /\n @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n if (this.multiple && isString(this.value)) {\n // NOTE: we ensure that value is an array, changing the value will trigger Watch to execute thus the return\n this.value = Array.from(JSON.parse(String(this.value)));\n return;\n }\n\n this.syncItemsFromValue();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the Select input loses focus /\n @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has been cleared /\n @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the Select input has received focus /\n @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n /* Callback handler emitted when the selected value has changed /\n @Event() bqSelect!: EventEmitter<{ value: string \| number \| string[]; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n if (this.multiple) {\n this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\n }\n }\n\n componentDidLoad() {\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n }\n\n this.handleValueChange();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqOpen', { capture: true })\n handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n if (!ev.composedPath().includes(this.el)) return;\n\n this.open = ev.detail.open;\n }\n\n @Listen('bqFocus', { capture: true })\n @Listen('bqBlur', { capture: true })\n stopOptionFocusBlurPropagation(ev: CustomEvent) {\n // Stop propagation of focus and blur events coming from the `bq-option` elements\n if (isHTMLElement(ev.target, 'bq-select')) return;\n\n ev.stopPropagation();\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /\n Clears the selected value.\n \n @return {Promise<void>}\n * @memberof BqSelect\n /\n @Method()\n async clear(): Promise<void> {\n if (this.disabled) return;\n\n this.value = undefined;\n this.selectedOptions = [];\n if (!this.multiple) {\n this.displayValue = undefined;\n this.inputElem.value = undefined;\n }\n\n this.resetOptionsVisibility();\n this.bqClear.emit(this.el);\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 handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n if (this.disabled) return;\n\n if (this.multiple) {\n ev.stopPropagation();\n }\n\n const { value, item } = ev.detail;\n\n if (this.multiple) {\n this.handleMultipleSelection(item);\n // Clear the input value after selecting an item\n this.inputElem.value = '';\n // If multiple selection is enabled, emit the selected items array instead of relying on\n // the option list to emit the value of the selected item\n this.bqSelect.emit({ value: this.value, item });\n } else {\n this.value = value;\n }\n\n this.resetOptionsVisibility();\n this.inputElem.focus();\n };\n\n private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n const selectedOptionsSet = new Set(this.selectedOptions);\n\n if (selectedOptionsSet.has(item)) {\n selectedOptionsSet.delete(item);\n } else {\n selectedOptionsSet.add(item);\n }\n\n this.selectedOptions = Array.from(selectedOptionsSet);\n this.value = this.selectedOptions.map((item) => item.value);\n };\n\n private handleSearchFilter = (ev: Event) => {\n if (this.disabled) return;\n\n this.debounceQuery?.cancel();\n\n const query = (ev.target as HTMLInputElement).value?.toLowerCase().trim();\n\n if (!isDefined(query)) {\n this.clear();\n } else {\n this.debounceQuery = debounce(() => {\n this.options.forEach((item: HTMLBqOptionElement) => {\n const itemLabel = this.getOptionLabel(item).toLowerCase();\n item.hidden = !itemLabel.includes(query);\n });\n }, this.debounceTime);\n\n this.debounceQuery();\n }\n\n // The panel will close once a selection is made\n // so we need to make sure it's open when the user is typing and the query is not empty\n this.open = true;\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n (async () => {\n await this.clear();\n })();\n this.inputElem.focus();\n\n ev.stopPropagation();\n };\n\n private handleTagRemove = (item: HTMLBqOptionElement) => {\n if (this.disabled) return;\n\n this.handleMultipleSelection(item);\n this.bqSelect.emit({ value: this.value, item });\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 private resetOptionsVisibility = () => {\n this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n };\n\n private syncItemsFromValue = () => {\n const items = this.options;\n if (!items.length) return;\n\n // Sync selected state of the BqOption elements\n this.options.forEach((option: HTMLBqOptionElement) => {\n if (this.multiple && Array.isArray(this.value)) {\n option.selected = this.value.includes(option.value);\n } else {\n option.selected = option.value.toLowerCase() === String(this.value).toLowerCase();\n }\n });\n\n if (!this.multiple) {\n // Sync display label\n const checkedItem = items.filter((item) => item.value === this.value)[0];\n this.displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n this.inputElem.value = this.displayValue ?? '';\n } else {\n this.selectedOptions = this.options.filter((item) => this.value?.includes(item.value));\n }\n };\n\n private getOptionLabel = (item: HTMLBqOptionElement) => {\n const slot = item.shadowRoot.querySelector('slot:not([name])');\n if (!slot) return;\n\n return getTextContent(slot as HTMLSlotElement);\n };\n\n private get options() {\n return Array.from(this.el.querySelectorAll('bq-option'));\n }\n\n private get displayPlaceholder() {\n // Hide the placeholder when multiple selection is enabled and there are selected items\n return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n }\n\n private get displayTags() {\n return this.selectedOptions.map((item, index) => {\n if (index < this.maxTagsVisible \|\| this.maxTagsVisible < 0) {\n return (\n <bq-tag\n key={item.value}\n removable\n size=\"xsmall\"\n variant=\"filled\"\n onBqClose={(event) => {\n // NOTE: prevents triggering bqClose on parent\n event.stopPropagation();\n this.handleTagRemove(item);\n }}\n // Prevent the tag from closing the panel when clicked\n onClick={(ev: MouseEvent) => ev.stopPropagation()}\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n {this.getOptionLabel(item)}\n </bq-tag>\n );\n } else if (index === this.maxTagsVisible) {\n return (\n <bq-tag\n key=\"more\"\n size=\"xsmall\"\n variant=\"filled\"\n exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n part=\"tag\"\n >\n +{this.selectedOptions.length - index}\n </bq-tag>\n );\n }\n\n return null;\n });\n }\n\n private get hasClearIcon() {\n if (this.disableClear \|\| this.disabled) {\n return false;\n }\n\n if (this.multiple) {\n return this.selectedOptions.length > 0;\n }\n\n return isDefined(this.displayValue);\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const labelId = `bq-select__label-${this.name \|\| this.fallbackInputId}`;\n\n return (\n <div class=\"bq-select\" part=\"base\">\n {/ Label /}\n <label\n id={labelId}\n class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}\n htmlFor={this.name \|\| this.fallbackInputId}\n ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleLabelSlotChange} />\n </label>\n {/ Select dropdown /}\n <bq-dropdown\n class=\"bq-select__dropdown w-full\"\n disabled={this.disabled}\n distance={this.distance}\n keepOpenOnSelect={this.keepOpenOnSelect}\n open={this.open}\n panelHeight={this.panelHeight}\n placement={this.placement}\n sameWidth={this.sameWidth}\n skidding={this.skidding}\n strategy={this.strategy}\n exportparts=\"panel\"\n >\n {/ Input control group /}\n <div\n class={{\n 'bq-select__control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n slot=\"trigger\"\n >\n {/ Prefix /}\n <span\n class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handlePrefixSlotChange} />\n </span>\n <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n {/ Display selected values using BqTags for multiple selection /}\n {this.multiple && (\n <span\n class=\"me-xs2 flex flex-1 gap-xs2 [&>bq-tag::part(text)]:text-nowrap [&>bq-tag::part(text)]:leading-small [&>bq-tag]:inline-flex\"\n part=\"tags\"\n >\n {this.displayTags}\n </span>\n )}\n {/ HTML Input /}\n <input\n id={this.name \|\| this.fallbackInputId}\n class=\"bq-select__control--input w-full flex-grow\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n autoFocus={this.autofocus}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls={`bq-options-${this.name}`}\n aria-expanded={this.open ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n placeholder={this.displayPlaceholder}\n ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n readOnly={this.readonly}\n required={this.required}\n role=\"combobox\"\n spellcheck={false}\n type=\"text\"\n value={this.displayValue}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onInput={this.handleSearchFilter}\n />\n </div>\n {/ Clear Button /}\n {this.hasClearIcon && (\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-select__control--clear ms-[--bq-select--gap]\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n tabIndex={-1}\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-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange}>\n <bq-icon name=\"caret-down\" class=\"flex\" />\n </slot>\n </span>\n </div>\n <bq-option-list\n id={`bq-options-${this.name}`}\n onBqSelect={this.handleSelect}\n aria-expanded={this.open ? 'true' : 'false'}\n exportparts=\"base:option-list\"\n role=\"listbox\"\n >\n <slot />\n </bq-option-list>\n </bq-dropdown>\n {/ Helper text */}\n <div\n class={{\n [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n '!hidden': !this.hasHelperText,\n }}\n ref={(divElem: HTMLDivElement) => (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-slider.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { i as isNil } from './isNil.js';
 import { i as isString } from './isString.js';
 import { d as defineCustomElement$2 } from './bq-tooltip2.js';
-const bqSliderCss = "::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.pointer-events-auto{pointer-events:auto}.box-content{box-sizing:content-box}.block{display:block}.size-\\[--bq-slider--thumb-size\\]{height:var(--bq-slider--thumb-size);width:var(--bq-slider--thumb-size)}.w-full{width:100%}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.rounded-full{border-radius:var(--bq-radius--full)}.border-2{border-width:2px}.border-solid{border-style:solid}.border-stroke-brand{border-color:var(--bq-stroke--brand)}.transition-\\[background-color\\2c border-color\\2c box-shadow\\]{transition-duration:.15s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.bg-active-ui-brand{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.border-active-stroke-brand{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%)}.border-hover-stroke-brand{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}.thumb-focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.thumb-hover{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.thumb-active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-slider--size:4px;--bq-slider--border-radius:var(--bq-radius--xs);--bq-slider--thumb-size:13px;--bq-slider--progress-color:var(--bq-ui--brand);--bq-slider--trackarea-color:var(--bq-ui--secondary);display:block;width:100%}input[type=range]::-webkit-slider-thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}input[type=range]::-webkit-slider-runnable-track{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1)}input[type=range]:focus-visible::-webkit-slider-thumb{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}input[type=range]:hover::-webkit-slider-thumb{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}input[type=range]:active::-webkit-slider-thumb{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}input[type=range][disabled]::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}input[type=range]::-moz-range-track{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1)}input[type=range]:focus-visible::-moz-range-thumb{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}input[type=range]:hover::-moz-range-thumb{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}input[type=range]:active::-moz-range-thumb{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}input[type=range][disabled]::-moz-range-thumb{cursor:not-allowed}.-translate-y-1\\/2{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-1\\/2{top:50%}.me-xs{margin-inline-end:var(--bq-spacing-xs)}.ms-xs{margin-inline-start:var(--bq-spacing-xs)}.flex{display:flex}.hidden{display:none}.size-1{width:.25rem}.h-1,.size-1{height:.25rem}.w-1\\/2{width:50%}.w-fit{width:fit-content}.min-w-8{min-width:2rem}.rounded-xs{border-radius:var(--bq-radius--xs)}.border{border-width:1px}.bg-\\[--bq-slider--progress-color\\]{background-color:var(--bq-slider--progress-color)}.bg-\\[--bq-slider--trackarea-color\\]{background-color:var(--bq-slider--trackarea-color)}.bg-transparent{background-color:transparent}.text-start{text-align:start}.text-end{text-align:end}.text-s{font-size:var(--bq-font-size--s)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-60{opacity:.6}.outline-none{outline:2px solid transparent;outline-offset:2px}.\\[font-variant\\:tabular-nums\\]{font-variant:tabular-nums}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.\\[\\&\\:\\:part\\(panel\\)\\]\\:absolute::part(panel){position:absolute}.visible{visibility:visible}.fixed{position:fixed}";
+const bqSliderCss = "::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.pointer-events-auto{pointer-events:auto}.box-content{box-sizing:content-box}.block{display:block}.size-\\[--bq-slider--thumb-size\\]{height:var(--bq-slider--thumb-size);width:var(--bq-slider--thumb-size)}.w-full{width:100%}.cursor-grabbing{cursor:grabbing}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.rounded-full{border-radius:var(--bq-radius--full)}.border-2{border-width:2px}.border-solid{border-style:solid}.border-stroke-brand{border-color:var(--bq-stroke--brand)}.transition-\\[background-color\\2c border-color\\2c box-shadow\\]{transition-duration:.15s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.bg-active-ui-brand{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.border-active-stroke-brand{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%)}.border-hover-stroke-brand{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}.thumb-focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.thumb-hover{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}.thumb-active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-slider--size:4px;--bq-slider--border-radius:var(--bq-radius--xs);--bq-slider--thumb-size:13px;--bq-slider--progress-color:var(--bq-ui--brand);--bq-slider--trackarea-color:var(--bq-ui--secondary);display:block;width:100%}input[type=range]::-webkit-slider-thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}input[type=range]::-webkit-slider-runnable-track{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1)}input[type=range]:focus-visible::-webkit-slider-thumb{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}input[type=range]:hover::-webkit-slider-thumb{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}input[type=range]:active::-webkit-slider-thumb{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}input[type=range][disabled]::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{appearance:none;background-color:var(--bq-ui--primary);border-color:var(--bq-stroke--brand);border-radius:var(--bq-radius--full);border-style:solid;border-width:2px;box-sizing:content-box;cursor:pointer;height:var(--bq-slider--thumb-size);pointer-events:auto;transition-duration:.3s;transition-property:background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--bq-slider--thumb-size)}input[type=range]::-moz-range-track{transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,1,1)}input[type=range]:focus-visible::-moz-range-thumb{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}input[type=range]:hover::-moz-range-thumb{border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-hover) 20%)}input[type=range]:active::-moz-range-thumb{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%);border-color:color-mix(in srgb,var(--bq-stroke--brand),var(--bq-active) 20%);cursor:grabbing}input[type=range][disabled]::-moz-range-thumb{cursor:not-allowed}.-translate-y-1\\/2{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.start-0{inset-inline-start:0}.top-1\\/2{top:50%}.me-xs{margin-inline-end:var(--bq-spacing-xs)}.ms-xs{margin-inline-start:var(--bq-spacing-xs)}.flex{display:flex}.hidden{display:none}.size-1{width:.25rem}.h-1,.size-1{height:.25rem}.w-1\\/2{width:50%}.w-fit{width:fit-content}.min-w-8{min-width:2rem}.rounded-xs{border-radius:var(--bq-radius--xs)}.border{border-width:1px}.bg-\\[--bq-slider--progress-color\\]{background-color:var(--bq-slider--progress-color)}.bg-\\[--bq-slider--trackarea-color\\]{background-color:var(--bq-slider--trackarea-color)}.bg-transparent{background-color:transparent}.text-start{text-align:start}.text-end{text-align:end}.text-s{font-size:var(--bq-font-size--s)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-text-primary{color:var(--bq-text--primary)}.opacity-60{opacity:.6}.outline-none{outline:2px solid transparent;outline-offset:2px}.\\[font-variant\\:tabular-nums\\]{font-variant:tabular-nums}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.\\[\\&\\:\\:part\\(panel\\)\\]\\:absolute::part(panel){position:absolute}.visible{visibility:visible}.fixed{position:fixed}";
 const BqSliderStyle0 = bqSliderCss;
 const BqSlider$1 = /*@__PURE__*/ proxyCustomElement(class BqSlider extends HTMLElement {
@@ -39,7 +39,7 @@ const BqSlider$1 = /*@__PURE__*/ proxyCustomElement(class BqSlider extends HTMLE
         };
         this.calculateMinValue = (value) => {
             var _a;
-            const isMaxValue = ((_a = this.maxValue) !== null && _a !== void 0 ? _a : value[1]) === this.max;
+            const isMaxValue = ((_a = this.minValue) !== null && _a !== void 0 ? _a : value[0]) === this.max;
             const isGapExceeded = value[0] + this.gap > this.max;
             // Make sure that the min value gets adjusted according to the gap value
             return isMaxValue || isGapExceeded ? this.max - this.gap : value[0];
@@ -76,7 +76,9 @@ const BqSlider$1 = /*@__PURE__*/ proxyCustomElement(class BqSlider extends HTMLE
             const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();
             target.value = reflectedValue;
             target.setAttribute('value', reflectedValue);
-            this.emitBqChange();
+            // Sync the prop value.
+            // This will trigger the `@Watch('value')` method and emit the `bqChange` event.
+            this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;
         };
         this.calculatePercent = (value) => {
             const totalRange = Number(this.max) - Number(this.min);
@@ -144,7 +146,7 @@ const BqSlider$1 = /*@__PURE__*/ proxyCustomElement(class BqSlider extends HTMLE
         };
         this.renderInput = (type, value, refCallback) => {
             return (h("input", { type: "range", class: {
-                    'absolute top-1/2 w-full -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed': true,
+                    'absolute start-0 top-1/2 w-full -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed': true,
                     'pointer-events-none': this.isRangeType,
                 }, disabled: this.disabled, min: this.min, max: this.max, step: this.step, ref: refCallback, onInput: (ev) => this.handleInputChange(type, ev), onBlur: this.handleBlur, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, value: value, part: `input-${type}` }));
         };
@@ -215,7 +217,7 @@ const BqSlider$1 = /*@__PURE__*/ proxyCustomElement(class BqSlider extends HTMLE
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '9408f87c933fc29816396213661129f38da4d109', "aria-disabled": this.disabled ? 'true' : 'false', class: { 'flex w-full': true, 'cursor-not-allowed opacity-60': this.disabled }, part: "base" }, this.renderLabel(this.minValue, 'start', 'me-xs text-end'), h("div", { key: '2d85ff90ea6377d45ad4c7780eeefccf42a15cc3', class: "relative w-full", part: "container" }, h("span", { key: '5ef5178ec7673a75676f247faf5da969947d6af9', class: "absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color]", ref: (elem) => (this.trackElem = elem), part: "track-area" }), h("span", { key: '09cfc93bdace0a8e33a749d97f9a1770c2ac1d35', class: "absolute top-1/2 h-1 w-1/2 -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color]", ref: (elem) => (this.progressElem = elem), part: "progress-area" }), this.enableTooltip &&
+        return (h("div", { key: '00d0d3f5aae2c226b09b953683eddee11976e083', "aria-disabled": this.disabled ? 'true' : 'false', class: { 'flex w-full': true, 'cursor-not-allowed opacity-60': this.disabled }, part: "base" }, this.renderLabel(this.minValue, 'start', 'me-xs text-end'), h("div", { key: '73de9e8e4799bb759ddba94b7aa41b26dc237a6a', class: "relative w-full", part: "container" }, h("span", { key: 'fc06180b69041faf2c633b538452ca330706e3e8', class: "absolute start-0 top-1/2 h-1 w-full -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color]", ref: (elem) => (this.trackElem = elem), part: "track-area" }), h("span", { key: 'cf39bf309deb4ff6a652074ed015f56ae8bf180a', class: "absolute top-1/2 h-1 w-1/2 -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color]", ref: (elem) => (this.progressElem = elem), part: "progress-area" }), this.enableTooltip &&
             this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem)), this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input)), this.enableTooltip &&
             this.isRangeType &&
             this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem)), this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))), this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')));