npm - @beeq/core - Versions diffs - 1.12.3 → 1.12.4-beta.2 - Mend

@beeq/core 1.12.3 → 1.12.4-beta.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 (465) hide show

package/dist/collection/components/switch/bq-switch.js CHANGED Viewed

@@ -37,6 +37,8 @@ import { getTextContent, isNil } from "../../shared/utils";
  * @event bqBlur - Handler to be called when the switch loses focus
  *
  * @slot - The switch label text
+ * @slot icon-on - Custom content to be displayed as the `ON` mark inside the control. It will be displayed when the `inner-label` property is set to `icon`
+ * @slot icon-off - Custom content to be displayed as the `OFF` mark inside the control. It will be displayed when the `inner-label` property is set to `icon`
  *
  * @part base - HTML `<label>` root container
  * @part control - HTML `<div>` element for the custom control
@@ -55,7 +57,6 @@ export class BqSwitch {
     // ====================
     labelElem;
     inputElem;
-    prevCheckedValue;
     // Reference to host HTML element
     // ===================================
     internals;
@@ -108,23 +109,9 @@ export class BqSwitch {
     // Component lifecycle events
     // Ordered by their natural call order
     // =====================================
-    componentWillLoad() {
-        this.prevCheckedValue = this.checked;
-    }
     componentDidLoad() {
         this.handleSlotChange();
     }
-    componentDidUpdate() {
-        /**
-         * We need to trigger the `bqChange` immediately after the first update happens
-         * so the checked attribute get applied, otherwise, a delay will happen
-         * between the event emits and when the checked attribute value gets reflected in the element host.
-         */
-        if (this.checked !== this.prevCheckedValue) {
-            this.bqChange.emit({ checked: this.checked });
-            this.prevCheckedValue = this.checked;
-        }
-    }
     formAssociatedCallback() {
         this.setFormValue(this.checked);
         this.updateFormValidity();
@@ -170,6 +157,10 @@ export class BqSwitch {
     // These methods cannot be called from the host element.
     // =======================================================
     handleChange = () => {
+        const newChecked = !this.checked;
+        const event = this.bqChange.emit({ checked: newChecked });
+        if (event.defaultPrevented)
+            return;
         this.checked = !this.checked;
         this.inputElem.setAttribute('checked', `${this.checked}`);
         this.setFormValue(this.checked);
@@ -221,15 +212,15 @@ export class BqSwitch {
             'is-disabled': this.disabled,
             'flex-row-reverse': this.reverseOrder,
         };
-        return (h(Host, { key: '50837476ffecd5a4d8fbfac516e8ef630aaae0d1', class: { 'full-width': this.fullWidth }, style: hostStyle }, h("label", { key: '2b3ff5fb4a384c255da3590ae4977844da42b3f8', class: { 'bq-switch group': true, ...labelCssClasses }, part: "base" }, h("input", { key: 'f007a6eb8b2e7d17f070e251dfb134029ced8652', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.name, checked: this.checked, class: "bq-switch--input peer !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] sr-only peer-checked:invisible", disabled: this.disabled, name: !isNil(this.name) ? this.name : undefined, onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, ref: (input) => {
+        return (h(Host, { key: 'c1b965356abda34e250a6a3b78fd75bb40b1cf52', class: { 'full-width': this.fullWidth }, style: hostStyle }, h("label", { key: '473081c24c025daf02ab238da075f5795d9d9bba', class: { 'bq-switch group': true, ...labelCssClasses }, part: "base" }, h("input", { key: '2ade928b1e6947fa3482a77d6d5a33a9c3448038', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.name, checked: this.checked, class: "bq-switch--input peer !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] sr-only peer-checked:invisible", disabled: this.disabled, name: !isNil(this.name) ? this.name : undefined, onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, ref: (input) => {
                 this.inputElem = input;
-            }, required: this.required, role: "switch", type: "checkbox", value: this.value }), h("div", { key: '1b27a1080667827d7aff194e8df2d366796d157d', class: "bq-switch--control bs-[--bq-switch--height] is-[--bq-switch--width] relative box-border flex justify-between rounded-full bg-ui-tertiary p-b-xs2 p-i-xs2 transition duration-300 group-[&.is-checked]:bg-ui-brand", part: "control" }, this.innerLabel === 'icon' && (h("bq-icon", { key: '785252cd3627a008c13cec31a816d1b887e14fa0', class: "bq-switch--control__icon on", color: "icon--alt", name: "check", part: "icon-on", title: "On" })), this.innerLabel === 'icon' && (h("bq-icon", { key: 'db1f0003ad2de0caaa6c7de864e21dca56fa62ae', class: "bq-switch--control__icon off", color: "icon--inverse", name: "x", part: "icon-off", title: "Off" })), h("div", { key: '9822fdace5e03fa4a10f8ff0e865fa93ec965367', class: "bq-switch--control__dot", part: "dot" })), h("span", { key: 'b0d090c0888f59eb86da9de35f87a13099da7182', class: {
+            }, required: this.required, role: "switch", type: "checkbox", value: this.value }), h("div", { key: '335c48f5c1364d1b8a8d0603d9f61d2116126d05', class: "bq-switch--control bs-[--bq-switch--height] is-[--bq-switch--width] relative box-border flex justify-between rounded-full bg-ui-tertiary p-b-xs2 p-i-xs2 transition duration-300 group-[&.is-checked]:bg-ui-brand", part: "control" }, h("slot", { key: 'bd55a2d646d806d27a244da2f6488b2e2c3d5ff4', class: "text-icon-alt", name: "icon-on" }, this.innerLabel === 'icon' && (h("bq-icon", { key: 'd95989a7c2b8c0cff3d59b0eaf2b690212b3dc80', class: "bq-switch--control__icon on", name: "check", part: "icon-on", title: "On" }))), h("slot", { key: 'ad8180cdcd39a7a6550aa0ed570de880989bc426', class: "text-icon-inverse", name: "icon-off" }, this.innerLabel === 'icon' && (h("bq-icon", { key: 'ec9b972815f3612303dda39fdbaa0b66a81cdb7d', class: "bq-switch--control__icon off", name: "x", part: "icon-off", title: "Off" }))), h("div", { key: '52790b0a450c5fc4a0bae3f88d1a95a98be1fc0e', class: "bq-switch--control__dot", part: "dot" })), h("span", { key: 'ac235e307da282c723672f396362e900b5fdf6f1', class: {
                 'bq-switch--label font-medium text-m text-primary leading-regular transition-colors duration-300': true,
                 'ms-s': this.hasLabel && !this.reverseOrder,
                 'me-s': this.hasLabel && this.reverseOrder,
             }, part: "label", ref: (span) => {
                 this.labelElem = span;
-            } }, h("slot", { key: 'e5d6b58367302388601d9390ea41ff95c3d2e38f', onSlotchange: this.handleSlotChange })))));
+            } }, h("slot", { key: '394e42feca19d8e832b220bc6617619c1de5a053', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bq-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/bq-switch.js.map CHANGED Viewed

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

package/dist/collection/components/switch/scss/bq-switch.css CHANGED Viewed

	@@ -1 +1 @@
1	- .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))}::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{text-size-adjust:none;font-family:var(--bq-font-family);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);line-height:var(--bq-font-line-height--regular);min-height:100vb;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}}:where(: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;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[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-100);--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}.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-950);--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}:where(.endava),:where([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,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[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-100);--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-950);--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}.absolute{position:absolute}.start-xs2{inset-inline-start:var(--bq-spacing-xs2)}.inline-block{display:inline-block}.flex{display:flex}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.items-center{align-items:center}.rounded-full{border-radius:var(--bq-radius--full)}.rounded-s{border-radius:var(--bq-radius--s)}.bg-ui-primary{background-color:var(--bq-ui--primary)}.opacity-60{opacity:.6}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bg-hover-ui-primary{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bs-\[--bq-switch--dot-size\]{block-size:var(--bq-switch--dot-size)}.is-\[--bq-switch--dot-size\]{inline-size:var(--bq-switch--dot-size)}.is-full{inline-size:100%}.p-b-2{padding-block:.5rem}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}@-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-switch--height:24px;--bq-switch--justify-content:"start";--bq-switch--width:44px;--bq-switch--dot-size:calc(var(--bq-switch--height) - var(--bq-spacing-xs2)2);display:inline-block}:host(.full-width){inline-size:100%}.bq-switch{-webkit-box-pack:var(--bq-switch--justify-content);-ms-flex-pack:var(--bq-switch--justify-content);align-items:center;border-radius:var(--bq-radius--s);cursor:pointer;display:flex;justify-content:var(--bq-switch--justify-content);padding-block:.5rem;padding-inline:.5rem;transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);user-select:none}.bq-switch.has-background:not(.is-disabled):hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-switch.is-disabled{cursor:not-allowed;opacity:.6}.bq-switch--input:not(:disabled):focus-visible~.bq-switch--control,.bq-switch--input:not(:disabled):focus~.bq-switch--control{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-switch--control__dot{background-color:var(--bq-ui--primary);block-size:var(--bq-switch--dot-size);border-radius:var(--bq-radius--full);inline-size:var(--bq-switch--dot-size);inset-inline-start:var(--bq-spacing-xs2);position:absolute;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.group.is-checked .bq-switch--control__dot{background-color:var(--bq-icon--alt);inset-inline-start:calc(100% - var(--bq-switch--dot-size) - var(--bq-spacing-xs2))}.bq-switch--control__icon{--bq-icon--size:var(--bq-switch--dot-size)!important}.bq-switch--control__icon::part(base){display:flex}.group.is-checked .group-\[\&\.is-checked\]\:start-\[calc$100\%_-_var\(--bq-switch--dot-size$_-_var$--bq-spacing-xs2$\)\]{inset-inline-start:calc(100% - var(--bq-switch--dot-size) - var(--bq-spacing-xs2))}.group.is-checked .group-\[\&\.is-checked\]\:bg-\[--bq-icon--alt\]{background-color:var(--bq-icon--alt)}.blur{--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.relative{position:relative}.me-s{margin-inline-end:var(--bq-spacing-s)}.ms-s{margin-inline-start:var(--bq-spacing-s)}.box-border{box-sizing:border-box}.flex-row-reverse{flex-direction:row-reverse}.justify-between{justify-content:space-between}.bg-ui-tertiary{background-color:var(--bq-ui--tertiary)}.text-m{font-size:var(--bq-font-size--m)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-primary{color:var(--bq-text--primary)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!bs-\[--bq-switch--dot-size\]{block-size:var(--bq-switch--dot-size)!important}.\!is-\[--bq-switch--width\]{inline-size:var(--bq-switch--width)!important}.bs-\[--bq-switch--height\]{block-size:var(--bq-switch--height)}.is-\[--bq-switch--width\]{inline-size:var(--bq-switch--width)}.p-b-xs2{padding-block:var(--bq-spacing-xs2)}.p-i-xs2{padding-inline:var(--bq-spacing-xs2)}.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}}.group.is-checked .group-\[\&\.is-checked\]\:bg-ui-brand{background-color:var(--bq-ui--brand)}.peer:checked~.peer-checked\:invisible{visibility:hidden}.text-\[--bq-icon--color\]{color:var(--bq-icon--color)}.bs-\[--bq-icon--size\]{block-size:var(--bq-icon--size)}.is-\[--bq-icon--size\]{inline-size:var(--bq-icon--size)}
1	+ .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))}::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{text-size-adjust:none;font-family:var(--bq-font-family);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);line-height:var(--bq-font-line-height--regular);min-height:100vb;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}}:where(: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;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[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-100);--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}.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-950);--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}:where(.endava),:where([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,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[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-100);--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-950);--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}.absolute{position:absolute}.start-xs2{inset-inline-start:var(--bq-spacing-xs2)}.inline-block{display:inline-block}.flex{display:flex}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.items-center{align-items:center}.rounded-full{border-radius:var(--bq-radius--full)}.rounded-s{border-radius:var(--bq-radius--s)}.bg-ui-primary{background-color:var(--bq-ui--primary)}.opacity-60{opacity:.6}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bg-hover-ui-primary{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bs-\[--bq-switch--dot-size\]{block-size:var(--bq-switch--dot-size)}.is-\[--bq-switch--dot-size\]{inline-size:var(--bq-switch--dot-size)}.is-full{inline-size:100%}.p-b-2{padding-block:.5rem}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}@-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-switch--height:24px;--bq-switch--justify-content:"start";--bq-switch--width:44px;--bq-switch--dot-size:calc(var(--bq-switch--height) - var(--bq-spacing-xs2)2);display:inline-block}:host(.full-width){inline-size:100%}.bq-switch{-webkit-box-pack:var(--bq-switch--justify-content);-ms-flex-pack:var(--bq-switch--justify-content);align-items:center;border-radius:var(--bq-radius--s);cursor:pointer;display:flex;justify-content:var(--bq-switch--justify-content);padding-block:.5rem;padding-inline:.5rem;transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);user-select:none}.bq-switch.has-background:not(.is-disabled):hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-switch.is-disabled{cursor:not-allowed;opacity:.6}.bq-switch--input:not(:disabled):focus-visible~.bq-switch--control,.bq-switch--input:not(:disabled):focus~.bq-switch--control{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-switch--control__dot{background-color:var(--bq-ui--primary);block-size:var(--bq-switch--dot-size);border-radius:var(--bq-radius--full);inline-size:var(--bq-switch--dot-size);inset-inline-start:var(--bq-spacing-xs2);position:absolute;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.group.is-checked .bq-switch--control__dot{background-color:var(--bq-icon--alt);inset-inline-start:calc(100% - var(--bq-switch--dot-size) - var(--bq-spacing-xs2))}.bq-switch--control__icon{--bq-icon--size:var(--bq-switch--dot-size)!important}.bq-switch--control__icon::part(base){display:flex}.group.is-checked .group-\[\&\.is-checked\]\:start-\[calc$100\%_-_var\(--bq-switch--dot-size$_-_var$--bq-spacing-xs2$\)\]{inset-inline-start:calc(100% - var(--bq-switch--dot-size) - var(--bq-spacing-xs2))}.group.is-checked .group-\[\&\.is-checked\]\:bg-\[--bq-icon--alt\]{background-color:var(--bq-icon--alt)}.blur{--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.relative{position:relative}.me-s{margin-inline-end:var(--bq-spacing-s)}.ms-s{margin-inline-start:var(--bq-spacing-s)}.box-border{box-sizing:border-box}.flex-row-reverse{flex-direction:row-reverse}.justify-between{justify-content:space-between}.bg-ui-tertiary{background-color:var(--bq-ui--tertiary)}.text-m{font-size:var(--bq-font-size--m)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-icon-alt{color:var(--bq-icon--alt)}.text-icon-inverse{color:var(--bq-icon--inverse)}.text-primary{color:var(--bq-text--primary)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\!bs-\[--bq-switch--dot-size\]{block-size:var(--bq-switch--dot-size)!important}.\!is-\[--bq-switch--width\]{inline-size:var(--bq-switch--width)!important}.bs-\[--bq-switch--height\]{block-size:var(--bq-switch--height)}.is-\[--bq-switch--width\]{inline-size:var(--bq-switch--width)}.p-b-xs2{padding-block:var(--bq-spacing-xs2)}.p-i-xs2{padding-inline:var(--bq-spacing-xs2)}.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}}.group.is-checked .group-\[\&\.is-checked\]\:bg-ui-brand{background-color:var(--bq-ui--brand)}.peer:checked~.peer-checked\:invisible{visibility:hidden}.text-\[--bq-icon--color\]{color:var(--bq-icon--color)}.bs-\[--bq-icon--size\]{block-size:var(--bq-icon--size)}.is-\[--bq-icon--size\]{inline-size:var(--bq-icon--size)}

package/dist/collection/components/tab/bq-tab.js CHANGED Viewed

@@ -174,15 +174,15 @@ export class BqTab {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("button", { key: '67d13243231a5a295cea5721de40176c01ca2779', "aria-controls": this.controls, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: {
+        return (h("button", { key: '119a837e49a805a6bdf46a8f5f52705c140d1e4e', "aria-controls": this.controls, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', class: {
                 [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,
                 'text-brand': this.active,
                 'text-primary': !this.active,
             }, disabled: this.disabled, id: this.tabId, onBlur: this.handleOnBlur, onClick: this.handleClick, onFocus: this.handleOnFocus, onKeyDown: this.handleOnKeyDown, part: "base", ref: (el) => {
                 this.buttonElement = el;
-            }, role: "tab", tabindex: this.tabindex, type: "button" }, h("div", { key: '07fd9dd3899db73193c2ce3b2a86294f46ce7834', class: "flex items-center justify-center", part: "content" }, h("div", { key: '54247124e7e7b97960f546ae7153520dd5da8807', class: "flex", part: "icon", ref: (span) => {
+            }, role: "tab", tabindex: this.tabindex, type: "button" }, h("div", { key: '9ed236dee09ae2d4d02284d41bd32c8632520917', class: "flex items-center justify-center", part: "content" }, h("div", { key: '908ffc9febec712a1303ee2937f6cd8b98e7ad02', class: "flex", part: "icon", ref: (span) => {
                 this.iconElement = span;
-            } }, h("slot", { key: 'e1fcf248349ca01377b81f98232bf6d492c4ca0d', name: "icon", onSlotchange: this.handleIconSlotChange })), h("div", { key: 'dc586c86b73893b95d6c83279d2b0357fe2c4714', class: { 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }, part: "text" }, h("slot", { key: '64c05d3cea1c8d39dade0b3b08ea3e6eabd14c27' })))));
+            } }, h("slot", { key: '9911ead0e9ed4e7075552b1a6702e0cef63e4b85', name: "icon", onSlotchange: this.handleIconSlotChange })), h("div", { key: 'f9e2443aaa0699d1582e7d4666c866e9b8caafdc', class: { 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }, part: "text" }, h("slot", { key: '8bb73c1a85a06102253c1fe9fe7148ae7709ff24' })))));
     }
     static get is() { return "bq-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-group/bq-tab-group.js CHANGED Viewed

@@ -194,13 +194,13 @@ export class BqTabGroup {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h(Host, { key: '14f48db35a2392ede8c5a44103ececb5e601dc98', class: { 'inline-block': this.orientation === 'vertical' } }, h("div", { key: '5639127579ae0bfccd48cb59736ea5b4533ea45a', class: {
+        return (h(Host, { key: 'c1fc13a6039e54c39634d5a57fbfd8dab3a96aee', class: { 'inline-block': this.orientation === 'vertical' } }, h("div", { key: '3bb73dce6948d4c1bbfe6f251eda997223824f54', class: {
                 [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} is-full flex`]: true,
                 'no-divider': this.disableDivider,
-            }, part: "base" }, h("div", { key: 'ee7f407248c1bcdeb6fd53569151b37518aa575b', class: {
+            }, part: "base" }, h("div", { key: 'df7746f742352586651fe8a8d4c65471bc5077fb', class: {
                 'bq-tab-group--container flex overflow-x-auto': true,
                 'flex-col': this.orientation !== 'horizontal',
-            }, part: "tabs", role: "tablist" }, h("slot", { key: 'fcb5a9e5a8df56b4b32549810778cdd19719a486' })))));
+            }, part: "tabs", role: "tablist" }, h("slot", { key: '15f253296b161bc0c4d2bf04b0b553d92d73025c' })))));
     }
     static get is() { return "bq-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/bq-tag.js CHANGED Viewed

@@ -228,15 +228,15 @@ export class BqTag {
         // Decide the tag element based on whether it's clickable or not for better semantics and accessibility
         const TagElement = this.isClickable ? 'button' : 'div';
         const ariaHidden = this.hidden ? 'true' : 'false';
-        return (h(Host, { key: '48cce67427cc8b61e7dee105d46894547a5a7975', "aria-hidden": ariaHidden, hidden: this.hidden || undefined, style: this.computedHostClasses }, h(TagElement, { key: '3c8134b4354f497a3c665906c4d91c05e5d67034', class: this.computeWrapperClasses, disabled: this.isClickable ? this.disabled : undefined, part: "wrapper", ...this.computeButtonInteractiveProps }, h("span", { key: 'c9cfdcb208165fb305e6a1c71469942b1284f13a', class: { 'bq-tag__prefix inline-flex': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
+        return (h(Host, { key: 'dfe1e464970eb6f796f74bd13913c24cb1429253', "aria-hidden": ariaHidden, hidden: this.hidden || undefined, style: this.computedHostClasses }, h(TagElement, { key: '741476eeb56fdcadd3a09f1768424e97caed52ef', class: this.computeWrapperClasses, disabled: this.isClickable ? this.disabled : undefined, part: "wrapper", ...this.computeButtonInteractiveProps }, h("span", { key: '7c1dbc8a6ebb9e8284a13a973a7ca50200dff251', class: { 'bq-tag__prefix inline-flex': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
                 this.prefixElem = spanElem;
-            } }, h("slot", { key: '7454aefdd8a19d6d3fd24398c357030b6c2818ff', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: '045d8a76324bf56636f14c3e7f2244dbe0c0e14d', class: {
+            } }, h("slot", { key: 'a56d9a12b137ea883e603fa222c0684c679c3a6e', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: '5503dbb34776916b6a0b94f21b002b991af5f875', class: {
                 'text-xs': this.size === 'xsmall',
                 'text-s': this.size === 'small',
                 'text-m': this.size === 'medium',
-            }, part: "text" }, h("slot", { key: 'f41039c96ed3f8e9c61b0ae8d392d30decc80a2f' })), this.isRemovable && !this.disabled && (
+            }, part: "text" }, h("slot", { key: 'fd24de3b43b13c45a3494cd7e98a825130540e00' })), this.isRemovable && !this.disabled && (
         // biome-ignore lint/a11y/noStaticElementInteractions: `onClick` will behave better than the custom `bqClick` inside the shadow DOM
-        h("bq-button", { key: '9afeeee50e8d84e710ab3e7e48dcf017210d4076', appearance: "text", border: "s", class: "bq-tag__close [&::part(button)]:border-none [&::part(button)]:p-0", label: "Close", onClick: this.handleClose, onlyIcon: true, part: "btn-close", size: "small" }, h("bq-icon", { key: 'e88683b1f2808ae172fb3f88b214a87007996a5e', "aria-hidden": "true", color: this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary', name: "x-circle", size: iconSize(this.size) }))))));
+        h("bq-button", { key: 'f5ecbf493c03536b886e18ca57c60a6376eeb1d6', appearance: "text", border: "s", class: "bq-tag__close [&::part(button)]:border-none [&::part(button)]:p-0", label: "Close", onClick: this.handleClose, onlyIcon: true, part: "btn-close", size: "small" }, h("bq-icon", { key: '57b485d337f11826490ead791741caf824fbd1cf', "aria-hidden": "true", color: this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary', name: "x-circle", size: iconSize(this.size) }))))));
     }
     static get is() { return "bq-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/bq-textarea.js CHANGED Viewed

@@ -298,21 +298,21 @@ export class BqTextarea {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: 'e3d5a7f7e29000b2959b5c1946f8227046915754', class: "bq-textarea flex flex-auto flex-col", part: "base" }, h("label", { key: '48ac0c9258331b1d44a4afe1803f30a9bc42e0d2', "aria-label": this.name ?? this.fallbackId, class: { 'bq-textarea__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name ?? this.fallbackId, part: "label", ref: (label) => {
+        return (h("div", { key: 'db4697980307905b65a813954fd89f632961d9e6', class: "bq-textarea flex flex-auto flex-col", part: "base" }, h("label", { key: 'a97111a164c1f5394a160ead3ed76ed854eccac8', "aria-label": this.name ?? this.fallbackId, class: { 'bq-textarea__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name ?? this.fallbackId, part: "label", ref: (label) => {
                 this.labelElem = label;
-            } }, h("slot", { key: 'b1b88f2b474ab4965f05361a7877c6696b4db96e', name: "label", onSlotchange: this.handleSlotChange })), h("textarea", { key: '79fef7eb93fb8021d1a2291a9a2c9aa7594f8fd0', autocapitalize: this.autocapitalize, autocomplete: this.autocomplete, autofocus: this.autofocus, class: {
+            } }, h("slot", { key: '6638489c4a352ccca562b516931c8fb1db7dffe4', name: "label", onSlotchange: this.handleSlotChange })), h("textarea", { key: '5a01a853c2ffeec4cbf7d7ad24f3e4367f0c302c', autocapitalize: this.autocapitalize, autocomplete: this.autocomplete, autofocus: this.autofocus, class: {
                 'bq-textarea__input': true,
                 'resize-none': this.disableResize,
                 [`validation-${this.validationStatus}`]: true,
             }, disabled: this.disabled, form: this.form, id: this.name ?? this.fallbackId, maxLength: this.maxlength > 0 ? this.maxlength : undefined, name: this.name, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, onInput: this.handleInput, part: "input", placeholder: this.placeholder, readOnly: this.readonly, ref: (elem) => {
                 this.textarea = elem;
-            }, required: this.required, rows: this.rows, spellcheck: this.spellcheck, wrap: this.wrap }, this.value), h("div", { key: 'ccf267c2b3bd8daaa6b9192a17c63b881d5b6f0f', class: {
+            }, required: this.required, rows: this.rows, spellcheck: this.spellcheck, wrap: this.wrap }, this.value), h("div", { key: '382582e307ee0059565341f29c0e3da228e5d149', class: {
                 'bq-textarea__helper flex items-center justify-between': true,
                 [`validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText && !this.maxlength,
-            }, part: "helper-info" }, h("span", { key: 'cd852d5dec02f6db0d18c011929bffcdf780ecdd', class: "bq-textarea__helper--text", part: "helper-text", ref: (span) => {
+            }, part: "helper-info" }, h("span", { key: '993b9c06e1e7f0966534767650c29b25f211a571', class: "bq-textarea__helper--text", part: "helper-text", ref: (span) => {
                 this.helperTextElem = span;
-            } }, h("slot", { key: '74d0affa4d84369647794f3a5cf014c5c1939974', name: "helper-text", onSlotchange: this.handleSlotChange })), h("span", { key: '2ab7e59c29ed618d7e5110622aa253eadd11fd0a', class: { 'bq-textarea__helper--counter [fontVariant:tabular-nums]': true, '!hidden': !this.maxlength }, part: "helper-counter" }, this.numberOfCharacters ?? 0, "/", this.maxlength))));
+            } }, h("slot", { key: 'f4cadafc3ca77131e954a9d967c208569640d90a', name: "helper-text", onSlotchange: this.handleSlotChange })), h("span", { key: 'c7027f66e0fdfcbdb90cdb60728ea9b71f2c57d2', class: { 'bq-textarea__helper--counter [fontVariant:tabular-nums]': true, '!hidden': !this.maxlength }, part: "helper-counter" }, this.numberOfCharacters ?? 0, "/", this.maxlength))));
     }
     static get is() { return "bq-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toast/bq-toast.js CHANGED Viewed

@@ -213,7 +213,7 @@ export class BqToast {
         const style = {
             ...(this.border && { '--bq-toast--border-radius': `var(--bq-radius--${this.border})` }),
         };
-        return (h(Host, { key: '0e66f9abe6800d4f76870fb402876112b4cf2af6', "aria-hidden": !this.open ? 'true' : 'false', class: { 'is-hidden': !this.open }, hidden: !this.open ? 'true' : 'false', role: "status", style: style }, h("output", { key: '693f3d06682990bb5a6b35472de473522850bf33', class: "bq-toast", part: "wrapper" }, h("div", { key: '83342a0ada8dbf7830c7962b781690c977f09006', class: { [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }, part: "icon" }, h("slot", { key: '10a0d89edc8becc70e7b2d9257381ea0403bdc46', name: "icon" }, h("bq-icon", { key: '493f40a4cc423c65a22f7adc6812af2683fcadea', exportparts: "base,svg", name: this.iconName, size: "24", slot: "icon" }))), h("slot", { key: '5293f07d309f788ad4987a4c30c1ae2d25353ec2' }))));
+        return (h(Host, { key: '1bc681e9721181df9b6051302495ee549f25ce61', "aria-hidden": !this.open ? 'true' : 'false', class: { 'is-hidden': !this.open }, hidden: !this.open ? 'true' : 'false', role: "status", style: style }, h("output", { key: 'e73aad38351bc20e7d81fca7ef136effdd2f730d', class: "bq-toast", part: "wrapper" }, h("div", { key: '2a8bf31a431c7b23c750c070ff1a19d0aca31ef5', class: { [`bq-toast--icon ${this.type}`]: true, '!hidden': this.hideIcon }, part: "icon" }, h("slot", { key: '1d2257957f07b4ca66ed724897dd17790cd6ccde', name: "icon" }, h("bq-icon", { key: '303b81e8939deaccc58477df3549673eb88ded21', exportparts: "base,svg", name: this.iconName, size: "24", slot: "icon" }))), h("slot", { key: 'a744c04d06407a9dad9846dcb0ddae114da2a8c1' }))));
     }
     static get is() { return "bq-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/bq-tooltip.js CHANGED Viewed

@@ -121,7 +121,7 @@ export class BqTooltip {
             placement: this.placement,
             distance: this.distance,
             sameWidth: this.sameWidth,
-            strategy: 'fixed',
+            strategy: 'absolute',
             skidding: 0,
         });
     }
@@ -234,13 +234,13 @@ export class BqTooltip {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '3079a9d1e04ed1f89078b986f990ccd4df706d37', class: "bq-tooltip relative", part: "base" }, h("div", { key: 'eb8d6a66ce8192cec08d528f40fe9bb654519a5b', class: "bq-tooltip--trigger", onClick: this.handleTriggerOnClick, onFocusin: this.handleTriggerFocusin, onFocusout: this.handleTriggerFocusout, onMouseEnter: this.handleTriggerMouseOver, onMouseLeave: this.handleTriggerMouseLeave, part: "trigger", ref: (el) => {
+        return (h("div", { key: 'd0bde0dcf3a4454e6ea8e8a82795ebde4c884d2e', class: "bq-tooltip relative", part: "base" }, h("div", { key: 'a5bb6d516a49ca6be7faba02a0c9baf40d7e5064', class: "bq-tooltip--trigger", onClick: this.handleTriggerOnClick, onFocusin: this.handleTriggerFocusin, onFocusout: this.handleTriggerFocusout, onMouseEnter: this.handleTriggerMouseOver, onMouseLeave: this.handleTriggerMouseLeave, part: "trigger", ref: (el) => {
                 this.trigger = el;
-            } }, h("slot", { key: 'c7b72cd12e0bb316ca0df2a53b8620163ad10e6b', name: "trigger" })), h("div", { key: '742ea5cb096e486bfadff74fcadcefacfa3b2e9c', "aria-hidden": this.isHidden, class: "bq-tooltip--panel", hidden: this.isHidden, part: "panel", ref: (el) => {
+            } }, h("slot", { key: 'a560501b98b4c05eeb195e31caa717eb189d727a', name: "trigger" })), h("div", { key: 'da2b3942c1a2347e87d3cbe0440e2a1ce3c860ce', "aria-hidden": this.isHidden, class: "bq-tooltip--panel", hidden: this.isHidden, part: "panel", ref: (el) => {
                 this.panel = el;
-            }, role: "tooltip" }, !this.hideArrow && (h("div", { key: '3a30e1942a18ebafb8a9fc264e1349322d0152b9', class: "bq-tooltip--arrow", ref: (el) => {
+            }, role: "tooltip" }, !this.hideArrow && (h("div", { key: '9cb8d3791a3e8f42535363f116d1cde568ea354b', class: "bq-tooltip--arrow", ref: (el) => {
                 this.arrow = el;
-            } })), h("slot", { key: '29f45f5c5cf311368d2c0e27101df75312dbd3f6' }))));
+            } })), h("slot", { key: '163558f41c5b16c327bb6214ff8c14f1f247201b' }))));
     }
     static get is() { return "bq-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -582,7 +582,7 @@ export class BqTooltip {
                 "name": "scroll",
                 "method": "handleDocumentScroll",
                 "target": "document",
-                "capture": false,
+                "capture": true,
                 "passive": true
             }];
     }

package/dist/collection/components/tooltip/bq-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-tooltip.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/tooltip/bq-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\nimport { isEventTargetChildOfElement } from '../../shared/utils';\n\n/*\n The Tooltip component is a small pop-up box that appears when a user hovers over or clicks on an element, providing additional information or context.\n \n @example How to use it\n * ```html\n * <bq-tooltip visible>\n * Yuhu! I'm a tooltip 🙃\n * <bq-button slot=\"trigger\">Hover me!</bq-button>\n * </bq-tooltip>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/64c562-tooltip\n * @status stable\n \n @attr {boolean} always-visible - If true, the tooltip will always be visible\n * @attr {number} distance - Distance between trigger element and tooltip\n * @attr {boolean} hide-arrow - If true, the arrow on the tooltip content won't be shown\n * @attr {\"top\" \| \"right\" \| \"bottom\" \| \"left\"} placement - Defines the position of the tooltip\n * @attr {boolean} same-width - Whether the tooltip should have the same width as the trigger element (applicable only for content shorter than the trigger element)\n * @attr {\"click\" \| \"hover\"} display-on - Set the action when the tooltip should be displayed, on hover (default) or click\n * @attr {boolean} visible - Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger\n \n @method show - Shows the tooltip\n * @method hide - Hides the tooltip\n \n @slot trigger - The element which displays tooltip on hover\n * @slot - The tooltip content\n \n @part base - The component wrapper container inside the shadow DOM\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover\n * @part panel - The `<div>` container that holds the tooltip content\n \n @cssprop --bq-tooltip--background-color - Tooltip background color\n * @cssprop --bq-tooltip--box-shadow - Tooltip box shadow\n * @cssprop --bq-tooltip--font-size - Tooltip font size\n * @cssprop --bq-tooltip--line-height - Tooltip line height\n * @cssprop --bq-tooltip--text-color - Tooltip text color\n * @cssprop --bq-tooltip--paddingX - Tooltip horizontal padding\n * @cssprop --bq-tooltip--paddingY - Tooltip vertical padding\n * @cssprop --bq-tooltip--border-color - Tooltip border color\n * @cssprop --bq-tooltip--border-radius - Tooltip border radius\n * @cssprop --bq-tooltip--border-style - Tooltip border style\n * @cssprop --bq-tooltip--border-width - Tooltip border width\n * @cssprop --bq-tooltip--z-index: Tooltip z-index\n /\n@Component({\n tag: 'bq-tooltip',\n styleUrl: './scss/bq-tooltip.scss',\n shadow: true,\n})\nexport class BqTooltip {\n // Own Properties\n // ====================\n private trigger: HTMLElement;\n private panel: HTMLElement;\n private arrow: HTMLElement;\n private floatingUI: FloatingUI;\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqTooltipElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true, the tooltip will always be visible /\n @Prop() alwaysVisible?: boolean = false;\n\n /* Distance between trigger element and tooltip /\n @Prop({ reflect: true }) distance?: number = 10;\n\n /* If true, the arrow on the tooltip content won't be shown /\n @Prop({ reflect: true }) hideArrow?: boolean = false;\n\n / Defines the position of the tooltip /\n @Prop({ reflect: true }) placement?: Placement = 'top';\n\n /* Whether the tooltip should have the same width as the trigger element\n * (applicable only for content shorter than the trigger element) /\n @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n /* Set the action when the tooltip should be displayed, on hover (default) or click /\n @Prop({ reflect: true }) displayOn: 'click' \| 'hover' = 'hover';\n\n /\n Indicates whether or not the tooltip is visible when the component is first rendered,\n * and when interacting with the trigger\n /\n @Prop({ reflect: true, mutable: true }) visible? = false;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('visible')\n async handleVisibleChange() {\n if (!this.visible && !this.alwaysVisible) {\n return await this.hide();\n }\n\n await this.show();\n }\n\n @Watch('distance')\n @Watch('hideArrow')\n @Watch('placement')\n @Watch('sameWidth')\n handleFloatingUIOptionsChange() {\n this.floatingUI.init({\n placement: this.placement,\n distance: this.distance,\n sameWidth: this.sameWidth,\n strategy: 'fixed',\n });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Emitted when the tooltip trigger is clicked /\n @Event() bqClick: EventEmitter<HTMLBqTooltipElement>;\n\n /* Emitted when the tooltip trigger is focused in /\n @Event() bqFocusIn: EventEmitter<HTMLBqTooltipElement>;\n\n /* Emitted when the tooltip trigger is focused out /\n @Event() bqFocusOut: EventEmitter<HTMLBqTooltipElement>;\n\n /* Emitted when the tooltip trigger is hovered in /\n @Event() bqHoverIn: EventEmitter<HTMLBqTooltipElement>;\n\n /* Emitted when the tooltip trigger is hovered out /\n @Event() bqHoverOut: EventEmitter<HTMLBqTooltipElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.floatingUI = new FloatingUI(this.trigger, this.panel, {\n ...(!this.hideArrow && { arrow: this.arrow }),\n placement: this.placement,\n distance: this.distance,\n sameWidth: this.sameWidth,\n strategy: 'fixed',\n skidding: 0,\n });\n }\n\n disconnectedCallback() {\n this.floatingUI?.destroy();\n }\n // Listeners\n // ==============\n\n @Listen('keydown', { target: 'document' })\n handleDocumentKeyDown(event: KeyboardEvent) {\n // Early returns for performance optimization\n if (this.alwaysVisible \|\| !this.visible \|\| this.displayOn !== 'click') return;\n // Hide tooltip when the user presses the escape key, but only if the displayOn is click and the tooltip is visible\n if (event.key !== 'Escape') return;\n\n this.hide();\n }\n\n @Listen('mousedown', { target: 'document' })\n handleDocumentMouseDown(event: MouseEvent) {\n // Early returns for performance optimization\n if (this.alwaysVisible \|\| !this.visible) return;\n // Hide tooltip when the user clicks outside of the tooltip, but only if the displayOn is click and the tooltip is visible\n if (isEventTargetChildOfElement(event, this.el)) return;\n\n this.hide();\n }\n\n @Listen('scroll', { target: 'document', passive: true })\n handleDocumentScroll() {\n // Early returns for performance optimization\n if (this.alwaysVisible \|\| !this.visible) return;\n // Hide tooltip when the user scrolls, but only if the the tooltip is visible\n this.hide();\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 /* Shows the tooltip /\n @Method()\n async show() {\n this.visible = true;\n this.showTooltip();\n }\n\n /* Hides the tooltip /\n @Method()\n async hide() {\n if (this.alwaysVisible) return;\n\n this.visible = false;\n this.hideTooltip();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleTriggerMouseOver = async () => {\n if (this.displayOn !== 'hover') return;\n\n const hoverEvent = this.bqHoverIn.emit(this.el);\n if (hoverEvent.defaultPrevented) return;\n\n await this.show();\n };\n\n private handleTriggerMouseLeave = async () => {\n if (this.displayOn !== 'hover') return;\n\n const hoverEvent = this.bqHoverOut.emit(this.el);\n if (hoverEvent.defaultPrevented) return;\n\n await this.hide();\n };\n\n private handleTriggerOnClick = async () => {\n if (this.displayOn !== 'click') return;\n\n const clickEvent = this.bqClick.emit(this.el);\n if (clickEvent.defaultPrevented) return;\n\n await (this.visible ? this.hide() : this.show());\n };\n\n private handleTriggerFocusin = async () => {\n if (this.visible \|\| this.displayOn === 'click') return;\n\n const focusEvent = this.bqFocusIn.emit(this.el);\n if (focusEvent.defaultPrevented) return;\n\n await this.show();\n };\n\n private handleTriggerFocusout = async () => {\n if (!this.visible \|\| this.displayOn === 'click') return;\n\n const focusEvent = this.bqFocusOut.emit(this.el);\n if (focusEvent.defaultPrevented) return;\n\n await this.hide();\n };\n\n private showTooltip = () => {\n if (!this.panel) return;\n this.floatingUI?.update();\n };\n\n private hideTooltip = () => {\n if (!this.panel) return;\n this.visible = false;\n };\n\n private get isHidden() {\n return !this.visible && !this.alwaysVisible;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-tooltip relative\" part=\"base\">\n {/ TRIGGER /}\n {/\n NOTE: We could use a native HTML button as trigger container, but it causes issues with\n * certain interactive elements inside the trigger slot (e.g., buttons, links, inputs...).\n * This is because nested interactive elements are not allowed inside a button.\n * Also, that will force the user to focus twice to reach the inner interactive element.\n /}\n {/* biome-ignore lint/a11y/noStaticElementInteractions: bypass the \"Static Elements should not be interactive.\" rule /}\n {/* biome-ignore lint/a11y/useKeyWithClickEvents: bypass the \"Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.\" rule /}\n <div\n class=\"bq-tooltip--trigger\"\n onClick={this.handleTriggerOnClick}\n onFocusin={this.handleTriggerFocusin}\n onFocusout={this.handleTriggerFocusout}\n onMouseEnter={this.handleTriggerMouseOver}\n onMouseLeave={this.handleTriggerMouseLeave}\n part=\"trigger\"\n ref={(el: HTMLDivElement) => {\n this.trigger = el;\n }}\n >\n <slot name=\"trigger\" />\n </div>\n {/ PANEL */}\n <div\n aria-hidden={this.isHidden}\n class=\"bq-tooltip--panel\"\n hidden={this.isHidden}\n part=\"panel\"\n ref={(el: HTMLDivElement) => {\n this.panel = el;\n }}\n role=\"tooltip\"\n >\n {!this.hideArrow && (\n <div\n class=\"bq-tooltip--arrow\"\n ref={(el: HTMLDivElement) => {\n this.arrow = el;\n }}\n />\n )}\n <slot />\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-tooltip.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/tooltip/bq-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\nimport { isEventTargetChildOfElement } from '../../shared/utils';\n\n/*\n The Tooltip component is a small pop-up box that appears when a user hovers over or clicks on an element, providing additional information or context.\n \n @example How to use it\n * ```html\n * <bq-tooltip visible>\n * Yuhu! I'm a tooltip 🙃\n * <bq-button slot=\"trigger\">Hover me!</bq-button>\n * </bq-tooltip>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/64c562-tooltip\n * @status stable\n \n @attr {boolean} always-visible - If true, the tooltip will always be visible\n * @attr {number} distance - Distance between trigger element and tooltip\n * @attr {boolean} hide-arrow - If true, the arrow on the tooltip content won't be shown\n * @attr {\"top\" \| \"right\" \| \"bottom\" \| \"left\"} placement - Defines the position of the tooltip\n * @attr {boolean} same-width - Whether the tooltip should have the same width as the trigger element (applicable only for content shorter than the trigger element)\n * @attr {\"click\" \| \"hover\"} display-on - Set the action when the tooltip should be displayed, on hover (default) or click\n * @attr {boolean} visible - Indicates whether or not the tooltip is visible when the component is first rendered, and when interacting with the trigger\n \n @method show - Shows the tooltip\n * @method hide - Hides the tooltip\n \n @slot trigger - The element which displays tooltip on hover\n * @slot - The tooltip content\n \n @part base - The component wrapper container inside the shadow DOM\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover\n * @part panel - The `<div>` container that holds the tooltip content\n \n @cssprop --bq-tooltip--background-color - Tooltip background color\n * @cssprop --bq-tooltip--box-shadow - Tooltip box shadow\n * @cssprop --bq-tooltip--font-size - Tooltip font size\n * @cssprop --bq-tooltip--line-height - Tooltip line height\n * @cssprop --bq-tooltip--text-color - Tooltip text color\n * @cssprop --bq-tooltip--paddingX - Tooltip horizontal padding\n * @cssprop --bq-tooltip--paddingY - Tooltip vertical padding\n * @cssprop --bq-tooltip--border-color - Tooltip border color\n * @cssprop --bq-tooltip--border-radius - Tooltip border radius\n * @cssprop --bq-tooltip--border-style - Tooltip border style\n * @cssprop --bq-tooltip--border-width - Tooltip border width\n * @cssprop --bq-tooltip--z-index: Tooltip z-index\n /\n@Component({\n tag: 'bq-tooltip',\n styleUrl: './scss/bq-tooltip.scss',\n shadow: true,\n})\nexport class BqTooltip {\n // Own Properties\n // ====================\n private trigger: HTMLElement;\n private panel: HTMLElement;\n private arrow: HTMLElement;\n private floatingUI: FloatingUI;\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqTooltipElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true, the tooltip will always be visible /\n @Prop() alwaysVisible?: boolean = false;\n\n /* Distance between trigger element and tooltip /\n @Prop({ reflect: true }) distance?: number = 10;\n\n /* If true, the arrow on the tooltip content won't be shown /\n @Prop({ reflect: true }) hideArrow?: boolean = false;\n\n / Defines the position of the tooltip /\n @Prop({ reflect: true }) placement?: Placement = 'top';\n\n /* Whether the tooltip should have the same width as the trigger element\n * (applicable only for content shorter than the trigger element) /\n @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n /* Set the action when the tooltip should be displayed, on hover (default) or click /\n @Prop({ reflect: true }) displayOn: 'click' \| 'hover' = 'hover';\n\n /\n Indicates whether or not the tooltip is visible when the component is first rendered,\n * and when interacting with the trigger\n /\n @Prop({ reflect: true, mutable: true }) visible? = false;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('visible')\n async handleVisibleChange() {\n if (!this.visible && !this.alwaysVisible) {\n return await this.hide();\n }\n\n await this.show();\n }\n\n @Watch('distance')\n @Watch('hideArrow')\n @Watch('placement')\n @Watch('sameWidth')\n handleFloatingUIOptionsChange() {\n this.floatingUI.init({\n placement: this.placement,\n distance: this.distance,\n sameWidth: this.sameWidth,\n strategy: 'fixed',\n });\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Emitted when the tooltip trigger is clicked /\n @Event() bqClick: EventEmitter<HTMLBqTooltipElement>;\n\n /* Emitted when the tooltip trigger is focused in /\n @Event() bqFocusIn: EventEmitter<HTMLBqTooltipElement>;\n\n /* Emitted when the tooltip trigger is focused out /\n @Event() bqFocusOut: EventEmitter<HTMLBqTooltipElement>;\n\n /* Emitted when the tooltip trigger is hovered in /\n @Event() bqHoverIn: EventEmitter<HTMLBqTooltipElement>;\n\n /* Emitted when the tooltip trigger is hovered out /\n @Event() bqHoverOut: EventEmitter<HTMLBqTooltipElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.floatingUI = new FloatingUI(this.trigger, this.panel, {\n ...(!this.hideArrow && { arrow: this.arrow }),\n placement: this.placement,\n distance: this.distance,\n sameWidth: this.sameWidth,\n strategy: 'absolute',\n skidding: 0,\n });\n }\n\n disconnectedCallback() {\n this.floatingUI?.destroy();\n }\n\n // Listeners\n // ==============\n\n @Listen('keydown', { target: 'document' })\n handleDocumentKeyDown(event: KeyboardEvent) {\n // Early returns for performance optimization\n if (this.alwaysVisible \|\| !this.visible \|\| this.displayOn !== 'click') return;\n // Hide tooltip when the user presses the escape key, but only if the displayOn is click and the tooltip is visible\n if (event.key !== 'Escape') return;\n\n this.hide();\n }\n\n @Listen('mousedown', { target: 'document' })\n handleDocumentMouseDown(event: MouseEvent) {\n // Early returns for performance optimization\n if (this.alwaysVisible \|\| !this.visible) return;\n // Hide tooltip when the user clicks outside of the tooltip, but only if the displayOn is click and the tooltip is visible\n if (isEventTargetChildOfElement(event, this.el)) return;\n\n this.hide();\n }\n\n @Listen('scroll', { target: 'document', passive: true, capture: true })\n handleDocumentScroll() {\n // Early returns for performance optimization\n if (this.alwaysVisible \|\| !this.visible) return;\n // Hide tooltip when the user scrolls, but only if the the tooltip is visible\n this.hide();\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 /* Shows the tooltip /\n @Method()\n async show() {\n this.visible = true;\n this.showTooltip();\n }\n\n /* Hides the tooltip /\n @Method()\n async hide() {\n if (this.alwaysVisible) return;\n\n this.visible = false;\n this.hideTooltip();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleTriggerMouseOver = async () => {\n if (this.displayOn !== 'hover') return;\n\n const hoverEvent = this.bqHoverIn.emit(this.el);\n if (hoverEvent.defaultPrevented) return;\n\n await this.show();\n };\n\n private handleTriggerMouseLeave = async () => {\n if (this.displayOn !== 'hover') return;\n\n const hoverEvent = this.bqHoverOut.emit(this.el);\n if (hoverEvent.defaultPrevented) return;\n\n await this.hide();\n };\n\n private handleTriggerOnClick = async () => {\n if (this.displayOn !== 'click') return;\n\n const clickEvent = this.bqClick.emit(this.el);\n if (clickEvent.defaultPrevented) return;\n\n await (this.visible ? this.hide() : this.show());\n };\n\n private handleTriggerFocusin = async () => {\n if (this.visible \|\| this.displayOn === 'click') return;\n\n const focusEvent = this.bqFocusIn.emit(this.el);\n if (focusEvent.defaultPrevented) return;\n\n await this.show();\n };\n\n private handleTriggerFocusout = async () => {\n if (!this.visible \|\| this.displayOn === 'click') return;\n\n const focusEvent = this.bqFocusOut.emit(this.el);\n if (focusEvent.defaultPrevented) return;\n\n await this.hide();\n };\n\n private showTooltip = () => {\n if (!this.panel) return;\n this.floatingUI?.update();\n };\n\n private hideTooltip = () => {\n if (!this.panel) return;\n this.visible = false;\n };\n\n private get isHidden() {\n return !this.visible && !this.alwaysVisible;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-tooltip relative\" part=\"base\">\n {/ TRIGGER /}\n {/\n NOTE: We could use a native HTML button as trigger container, but it causes issues with\n * certain interactive elements inside the trigger slot (e.g., buttons, links, inputs...).\n * This is because nested interactive elements are not allowed inside a button.\n * Also, that will force the user to focus twice to reach the inner interactive element.\n /}\n {/* biome-ignore lint/a11y/noStaticElementInteractions: bypass the \"Static Elements should not be interactive.\" rule /}\n {/* biome-ignore lint/a11y/useKeyWithClickEvents: bypass the \"Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.\" rule /}\n <div\n class=\"bq-tooltip--trigger\"\n onClick={this.handleTriggerOnClick}\n onFocusin={this.handleTriggerFocusin}\n onFocusout={this.handleTriggerFocusout}\n onMouseEnter={this.handleTriggerMouseOver}\n onMouseLeave={this.handleTriggerMouseLeave}\n part=\"trigger\"\n ref={(el: HTMLDivElement) => {\n this.trigger = el;\n }}\n >\n <slot name=\"trigger\" />\n </div>\n {/ PANEL */}\n <div\n aria-hidden={this.isHidden}\n class=\"bq-tooltip--panel\"\n hidden={this.isHidden}\n part=\"panel\"\n ref={(el: HTMLDivElement) => {\n this.panel = el;\n }}\n role=\"tooltip\"\n >\n {!this.hideArrow && (\n <div\n class=\"bq-tooltip--arrow\"\n ref={(el: HTMLDivElement) => {\n this.arrow = el;\n }}\n />\n )}\n <slot />\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/services/interfaces/floating-ui.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"floating-ui.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/services/interfaces/floating-ui.ts"],"names":[],"mappings":"","sourcesContent":["import type { Placement, Strategy } from '@floating-ui/core';\n\nexport interface FloatingUIOptions {\n distance?: number;\n placement?: Placement;\n arrow?: HTMLElement;\n strategy: Strategy;\n sameWidth?: boolean;\n skidding?: number;\n onPositionChange?: (placement: Placement) => void;\n}\nexport type { Placement };\n"]}
1	+ {"version":3,"file":"floating-ui.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/services/interfaces/floating-ui.ts"],"names":[],"mappings":"","sourcesContent":["import type { Placement, Strategy } from '@floating-ui/core';\n\nexport interface FloatingUIOptions {\n distance?: number;\n placement?: Placement;\n arrow?: HTMLElement;\n strategy: Strategy;\n sameWidth?: boolean;\n skidding?: number;\n onPositionChange?: (placement: Placement) => void;\n}\n\nexport type { Placement };\n"]}

package/dist/collection/services/libraries/floating-ui/index.js CHANGED Viewed

@@ -14,7 +14,7 @@ export class FloatingUI {
         this.options = {
             distance: 20,
             placement: 'bottom',
-            strategy: 'fixed',
+            strategy: 'absolute',
             sameWidth: false,
             ...options,
         };

package/dist/collection/services/libraries/floating-ui/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/beeq/src/services/libraries/floating-ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,UAAU,EACV,eAAe,EACf,IAAI,EACJ,IAAI,EAEJ,MAAM,EAEN,KAAK,EACL,IAAI,GACL,MAAM,kBAAkB,CAAC;AAI1B,MAAM,OAAO,UAAU;IACrB,KAAK,CAAc;IACnB,OAAO,CAAmB;IAC1B,OAAO,CAAoB;IAC3B,OAAO,CAAa;IAEpB,YAAY,OAAyB,EAAE,KAAkB,EAAE,OAA2B;QACpF,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,OAAO,GAAG;YACb,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,QAAQ;YACnB,QAAQ,EAAE,~~OAAO~~;~~YACjB~~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","sourcesContent":["import {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n hide,\n type MiddlewareData,\n offset,\n type ReferenceElement,\n shift,\n size,\n} from '@floating-ui/dom';\n\nimport type { FloatingUIOptions } from '../../interfaces';\n\nexport class FloatingUI {\n panel: HTMLElement;\n trigger: ReferenceElement;\n options: FloatingUIOptions;\n cleanUp: () => void;\n\n constructor(trigger: ReferenceElement, panel: HTMLElement, options?: FloatingUIOptions) {\n this.trigger = trigger;\n this.panel = panel;\n this.options = {\n distance: 20,\n placement: 'bottom',\n strategy: '~~fixed~~',\n sameWidth: false,\n ...options,\n };\n this.init(options);\n }\n\n init(options: FloatingUIOptions) {\n this.options = Object.assign(this.options, options);\n this.update();\n }\n\n update() {\n this.cleanUp = autoUpdate(this.trigger, this.panel, () => {\n (async () => {\n const { x, y, placement, middlewareData } = await computePosition(this.trigger, this.panel, {\n placement: this.options.placement,\n strategy: this.options.strategy,\n middleware: [\n offset({ mainAxis: this.options.distance, crossAxis: this.options.skidding }),\n flip(),\n shift(),\n size(\n this.options.sameWidth && {\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n });\n },\n },\n ),\n arrow({ element: this.options.arrow \|\| null }),\n this.positionChange(),\n hide(),\n ],\n });\n\n this.applyPanelPosition(x, y);\n this.applyArrowPosition(placement, middlewareData);\n this.applyVisibility(middlewareData);\n })();\n });\n }\n\n destroy() {\n if (!this.cleanUp) return;\n this.cleanUp();\n }\n\n positionChange() {\n return {\n name: 'positionChange',\n fn: ({ placement: position }) => {\n if (typeof this.options.onPositionChange !== 'function') return {};\n this.options.onPositionChange(position);\n return {};\n },\n };\n }\n\n private applyPanelPosition(x: number, y: number) {\n Object.assign(this.panel.style, {\n top: '0',\n left: '0',\n transform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`,\n });\n }\n\n private applyArrowPosition(placement: string, middlewareData: MiddlewareData) {\n if (!this.options.arrow) return;\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n Object.assign(this.options.arrow.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-4px',\n });\n }\n\n private applyVisibility(middlewareData: MiddlewareData) {\n const { referenceHidden } = middlewareData.hide;\n Object.assign(this.panel.style, {\n visibility: referenceHidden ? 'hidden' : 'visible',\n });\n }\n\n private roundByDPR(value: number) {\n const dpr = window.devicePixelRatio \|\| 1;\n return Math.round(value * dpr) / dpr;\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/beeq/src/services/libraries/floating-ui/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n hide,\n type MiddlewareData,\n offset,\n type ReferenceElement,\n shift,\n size,\n} from '@floating-ui/dom';\n\nimport type { FloatingUIOptions } from '../../interfaces';\n\nexport class FloatingUI {\n panel: HTMLElement;\n trigger: ReferenceElement;\n options: FloatingUIOptions;\n cleanUp: () => void;\n\n constructor(trigger: ReferenceElement, panel: HTMLElement, options?: FloatingUIOptions) {\n this.trigger = trigger;\n this.panel = panel;\n this.options = {\n distance: 20,\n placement: 'bottom',\n strategy: 'absolute',\n sameWidth: false,\n ...options,\n };\n this.init(options);\n }\n\n init(options: FloatingUIOptions) {\n this.options = Object.assign(this.options, options);\n this.update();\n }\n\n update() {\n this.cleanUp = autoUpdate(this.trigger, this.panel, () => {\n (async () => {\n const { x, y, placement, middlewareData } = await computePosition(this.trigger, this.panel, {\n placement: this.options.placement,\n strategy: this.options.strategy,\n middleware: [\n offset({ mainAxis: this.options.distance, crossAxis: this.options.skidding }),\n flip(),\n shift(),\n size(\n this.options.sameWidth && {\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n });\n },\n },\n ),\n arrow({ element: this.options.arrow \|\| null }),\n this.positionChange(),\n hide(),\n ],\n });\n\n this.applyPanelPosition(x, y);\n this.applyArrowPosition(placement, middlewareData);\n this.applyVisibility(middlewareData);\n })();\n });\n }\n\n destroy() {\n if (!this.cleanUp) return;\n this.cleanUp();\n }\n\n positionChange() {\n return {\n name: 'positionChange',\n fn: ({ placement: position }) => {\n if (typeof this.options.onPositionChange !== 'function') return {};\n this.options.onPositionChange(position);\n return {};\n },\n };\n }\n\n private applyPanelPosition(x: number, y: number) {\n Object.assign(this.panel.style, {\n top: '0',\n left: '0',\n transform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`,\n });\n }\n\n private applyArrowPosition(placement: string, middlewareData: MiddlewareData) {\n if (!this.options.arrow) return;\n\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n const staticSide = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n Object.assign(this.options.arrow.style, {\n left: arrowX != null ? `${arrowX}px` : '',\n top: arrowY != null ? `${arrowY}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-4px',\n });\n }\n\n private applyVisibility(middlewareData: MiddlewareData) {\n const { referenceHidden } = middlewareData.hide;\n Object.assign(this.panel.style, {\n visibility: referenceHidden ? 'hidden' : 'visible',\n });\n }\n\n private roundByDPR(value: number) {\n const dpr = window.devicePixelRatio \|\| 1;\n return Math.round(value * dpr) / dpr;\n }\n}\n"]}