npm - @beeq/core - Versions diffs - 1.11.0-beta.2 → 1.11.1 - Mend

@beeq/core 1.11.0-beta.2 → 1.11.1

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 (629) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-button.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/button/bq-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGxG,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQhG,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEnG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AASH,MAAM,OAAO,QAAQ;IACnB,iBAAiB;IACjB,uBAAuB;IAEf,UAAU,CAAc;IACxB,UAAU,CAAc;IAEhC,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAuB;IACjB,SAAS,CAAoB;IAEhD,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAEzB,SAAS,GAAG,KAAK,CAAC;IAClB,SAAS,GAAG,KAAK,CAAC;IAEnC,sBAAsB;IACtB,2BAA2B;IAE3B,kDAAkD;IACzB,UAAU,GAAsB,SAAS,CAAC;IAEnE,kEAAkE;IACzC,KAAK,GAAY,KAAK,CAAC;IAEhD,sCAAsC;IACb,MAAM,GAAwB,GAAG,CAAC;IAE3D,oEAAoE;IAC5D,QAAQ,GAAG,KAAK,CAAC;IAEzB;;;OAGG;IACK,QAAQ,CAAU;IAE1B,4GAA4G;IACnF,IAAI,CAAS;IAEtC,uDAAuD;IAC9B,cAAc,GAAgC,QAAQ,CAAC;IAEhF,8DAA8D;IACtD,OAAO,GAAG,KAAK,CAAC;IAExB,6BAA6B;IACJ,IAAI,GAAgB,QAAQ,CAAC;IAEtD;;;OAGG;IACsB,MAAM,CAA0C;IAEzE,yCAAyC;IAChB,IAAI,GAAgB,QAAQ,CAAC;IAEtD,0GAA0G;IACjF,OAAO,GAAmB,UAAU,CAAC;IAE9D,wBAAwB;IACxB,0BAA0B;IAM1B,eAAe;QACb,iBAAiB,CAAC,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC;QACvE,iBAAiB,CAAC,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QAC1D,iBAAiB,CAAC,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QAC1D,iBAAiB,CAAC,cAAc,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IACpE,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,wDAAwD;IAC/C,MAAM,CAAoC;IAEnD,uDAAuD;IAC9C,OAAO,CAAoC;IAEpD,uDAAuD;IAC9C,OAAO,CAAoC;IAEpD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAElD,UAAU,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEM,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEM,WAAW,GAAG,CAAC,EAAS,EAAE,EAAE;QAClC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEhD,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QAED,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACtC,IAAI,YAAY,CAAC,gBAAgB,EAAE,CAAC;YAClC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;YACtB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEM,gBAAgB;QACtB,MAAM,EACJ,IAAI,EACJ,SAAS,EAAE,EAAE,IAAI,EAAE,GACpB,GAAG,IAAI,CAAC;QACT,IAAI,KAAK,CAAC,IAAI,CAAC;YAAE,OAAO;QAExB,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,KAAK,CAAC,UAAU,CAAC;YAAE,OAAO;QAE9B,UAAU,EAAE,CAAC;IACf,CAAC;IAEO,WAAW,GAAG,CAAC,IAAqB,EAAE,EAAE,CAAC,CAAC;QAChD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC;QAC7C,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC1B,CAAC,CAAC;IAEK,oBAAoB,GAAG,CAAC,IAAqB,EAAE,EAAE;QACvD,IAAI,CAAC,QAAQ,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC;YAAE,OAAO;QAEvC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC7C,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAEjB,GAAG,CAAC,KAAK,EAAE,CAAC;QACZ,GAAG,CAAC,MAAM,EAAE,CAAC;IACf,CAAC,CAAC;IAEM,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3D,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEM,YAAY,CAAC,EAAS;QAC5B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,EAAE,CAAC,eAAe,EAAE,CAAC;IACvB,CAAC;IAED,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QACxC,MAAM,KAAK,GAAG;YACZ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,4BAA4B,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SACzF,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,EAAC,OAAO,qDACN,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI;oBACjB,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;oBACvC,CAAC,WAAW,IAAI,CAAC,cAAc,EAAE,CAAC,EAAE,IAAI;oBACxC,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;oBACzB,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;oBACtB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,YAAY,EAAE,IAAI,CAAC,SAAS;oBAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;oBAC5B,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB,mBACc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACpC,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EAC9D,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACxC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW;gBAEzB,6DAAM,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAC,QAAQ;oBAC5F,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACtD;gBACP,6DAAM,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,OAAO;oBACzC,8DAAQ,CACH;gBACP,6DAAM,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAC,QAAQ;oBAC5F,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACtD;gBACN,IAAI,CAAC,OAAO,IAAI,gEAAS,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,aAAa,GAAG,CACjE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\nimport type {\n TButtonAppearance,\n TButtonBorderRadius,\n TButtonSize,\n TButtonType,\n TButtonVariant,\n} from './bq-button.types';\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\n\n/*\n Buttons are designed for users to take action on a page or a screen.\n \n @example How to use it\n * ```html\n * <bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n * <bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\n * Go back\n * </bq-button>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/286b43-buttons\n * @status stable\n \n @dependency bq-icon\n \n @attr {\"primary\" \| \"secondary\" \| \"link\" \| \"text\"} appearance - The appearance style to apply to the button\n * @attr {boolean} block - If `true`, it will make the button fit to its parent width.\n * @attr {string} border - The corner radius of the button\n * @attr {boolean} disabled - If `true`, the button will be disabled (no interaction allowed)\n * @attr {string} download - Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`\n * @attr {\"left\" \| \"center\" \| \"right\"} justify-content - It determinate how the content should be aligned\n * @attr {boolean} loading - If `true` it will display the button in a loading state\n * @attr {\"small\" \| \"medium\" \| \"large\"} size - The size of the button\n * @attr {\"_blank\" \| \"_parent\" \| \"_self\" \| \"_top\"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * @attr {\"button\" \| \"submit\" \| \"reset\"} type - The default behavior of the button\n * @attr {\"standard\" \| \"ghost\" \| \"danger\"} variant - The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`)\n \n @event bqBlur - Handler to be called when the button loses focus\n * @event bqFocus - Handler to be called when button gets focus\n * @event bqClick - Handler to be called when the button is clicked\n \n @slot prefix - The prefix content to be displayed before the button label\n * @slot - The button label content\n * @slot suffix - The suffix content to be displayed after the button label\n \n @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n \n @cssprop --bq-button--border-color - Button border color\n * @cssprop --bq-button--border-radius - Button border radius\n * @cssprop --bq-button--border-style - Button border style\n * @cssprop --bq-button--border-width - Button border width\n * @cssprop --bq-button--small-height - Button small height\n * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)\n * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)\n * @cssprop --bq-button--small-font-size - Button small font size\n * @cssprop --bq-button--medium-height - Button medium height\n * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)\n * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)\n * @cssprop --bq-button--medium-font-size - Button medium font size\n * @cssprop --bq-button--large-height - Button large height\n * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)\n * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)\n * @cssprop --bq-button--large-font-size - Button large font size\n /\n@Component({\n tag: 'bq-button',\n styleUrl: './scss/bq-button.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqButton {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n private suffixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqButtonElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n\n // Public Property API\n // ========================\n\n /* The appearance style to apply to the button /\n @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n /* If `true`, it will make the button fit to its parent width. /\n @Prop({ reflect: true }) block: boolean = false;\n\n /* The corner radius of the button /\n @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n /* If true, the button will be disabled (no interaction allowed) /\n @Prop() disabled = false;\n\n /\n Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n /\n @Prop() download?: string;\n\n /* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` /\n @Prop({ reflect: true }) href: string;\n\n /* It determinate how the content should be aligned /\n @Prop({ reflect: true }) justifyContent: 'left' \| 'center' \| 'right' = 'center';\n\n /* If `true` it will display the button in a loading state /\n @Prop() loading = false;\n\n /* The size of the button /\n @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n /\n Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n /\n @Prop({ reflect: true }) target: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* The default behavior of the button /\n @Prop({ reflect: true }) type: TButtonType = 'button';\n\n /* The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) /\n @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('appearance')\n @Watch('type')\n @Watch('size')\n @Watch('variant')\n checkPropValues() {\n validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the button loses focus. /\n @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button gets focus. /\n @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button is clicked. */\n @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleClick = (ev: Event) => {\n const { disabled, loading, bqClick, el } = this;\n\n if (disabled \|\| loading) {\n this.preventEvent(ev);\n return;\n }\n\n const bqClickEvent = bqClick.emit(el);\n if (bqClickEvent.defaultPrevented) {\n this.preventEvent(ev);\n return;\n }\n\n this.handleFormAction();\n };\n\n private handleFormAction() {\n const {\n type,\n internals: { form },\n } = this;\n if (isNil(form)) return;\n\n const formAction = this.formActions(form)[type];\n if (isNil(formAction)) return;\n\n formAction();\n }\n\n private formActions = (form: HTMLFormElement) => ({\n submit: () => this.submitAssociatedForm(form),\n reset: () => form.reset(),\n });\n\n private submitAssociatedForm = (form: HTMLFormElement) => {\n if (!isClient() \|\| isNil(form)) return;\n\n const btn = document.createElement('button');\n btn.type = this.type;\n btn.hidden = true;\n form.append(btn);\n\n btn.click();\n btn.remove();\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private preventEvent(ev: Event) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const isLink = isDefined(this.href);\n const TagElem = isLink ? 'a' : 'button';\n const style = {\n ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host style={style}>\n <TagElem\n class={{\n 'bq-button': true,\n [`bq-button--${this.appearance}`]: true,\n [`content-${this.justifyContent}`]: true,\n [`${this.variant}`]: true,\n [`${this.size}`]: true,\n block: this.block,\n disabled: this.disabled,\n 'has-prefix': this.hasPrefix,\n 'has-suffix': this.hasSuffix,\n loading: this.loading,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n disabled={this.disabled}\n download={isLink ? this.download : undefined}\n href={isLink ? this.href : undefined}\n part=\"button\"\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n target={isLink ? this.target : undefined}\n type={this.type}\n tabIndex={this.disabled ? -1 : 0}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <span class=\"bq-button__prefix\" ref={(spanElem) => (this.prefixElem = spanElem)} part=\"prefix\">\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <span class=\"bq-button__label\" part=\"label\">\n <slot />\n </span>\n <span class=\"bq-button__suffix\" ref={(spanElem) => (this.suffixElem = spanElem)} part=\"suffix\">\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </span>\n {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n </TagElem>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-button.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/button/bq-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\nimport type {\n TButtonAppearance,\n TButtonBorderRadius,\n TButtonSize,\n TButtonType,\n TButtonVariant,\n} from './bq-button.types';\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\n\n/*\n Buttons are designed for users to take action on a page or a screen.\n \n @example How to use it\n * ```html\n * <bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n * <bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\n * Go back\n * </bq-button>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/286b43-buttons\n * @status stable\n \n @dependency bq-icon\n \n @attr {\"primary\" \| \"secondary\" \| \"link\" \| \"text\"} appearance - The appearance style to apply to the button\n * @attr {boolean} block - If `true`, it will make the button fit to its parent width.\n * @attr {string} border - The corner radius of the button\n * @attr {boolean} disabled - If `true`, the button will be disabled (no interaction allowed)\n * @attr {string} download - Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`\n * @attr {\"left\" \| \"center\" \| \"right\"} justify-content - It determinate how the content should be aligned\n * @attr {boolean} loading - If `true` it will display the button in a loading state\n * @attr {\"small\" \| \"medium\" \| \"large\"} size - The size of the button\n * @attr {\"_blank\" \| \"_parent\" \| \"_self\" \| \"_top\"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * @attr {\"button\" \| \"submit\" \| \"reset\"} type - The default behavior of the button\n * @attr {\"standard\" \| \"ghost\" \| \"danger\"} variant - The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`)\n \n @event bqBlur - Handler to be called when the button loses focus\n * @event bqFocus - Handler to be called when button gets focus\n * @event bqClick - Handler to be called when the button is clicked\n \n @slot prefix - The prefix content to be displayed before the button label\n * @slot - The button label content\n * @slot suffix - The suffix content to be displayed after the button label\n \n @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n \n @cssprop --bq-button--border-color - Button border color\n * @cssprop --bq-button--border-radius - Button border radius\n * @cssprop --bq-button--border-style - Button border style\n * @cssprop --bq-button--border-width - Button border width\n * @cssprop --bq-button--small-height - Button small height\n * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)\n * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)\n * @cssprop --bq-button--small-font-size - Button small font size\n * @cssprop --bq-button--medium-height - Button medium height\n * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)\n * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)\n * @cssprop --bq-button--medium-font-size - Button medium font size\n * @cssprop --bq-button--large-height - Button large height\n * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)\n * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)\n * @cssprop --bq-button--large-font-size - Button large font size\n /\n@Component({\n tag: 'bq-button',\n styleUrl: './scss/bq-button.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqButton {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n private suffixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqButtonElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n\n // Public Property API\n // ========================\n\n /* The appearance style to apply to the button /\n @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n /* If `true`, it will make the button fit to its parent width. /\n @Prop({ reflect: true }) block: boolean = false;\n\n /* The corner radius of the button /\n @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n /* If true, the button will be disabled (no interaction allowed) /\n @Prop() disabled = false;\n\n /\n Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n /\n @Prop() download?: string;\n\n /* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` /\n @Prop({ reflect: true }) href: string;\n\n /* It determinate how the content should be aligned /\n @Prop({ reflect: true }) justifyContent: 'left' \| 'center' \| 'right' = 'center';\n\n /* If `true` it will display the button in a loading state /\n @Prop() loading = false;\n\n /* The size of the button /\n @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n /\n Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n /\n @Prop({ reflect: true }) target: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* The default behavior of the button /\n @Prop({ reflect: true }) type: TButtonType = 'button';\n\n /* The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) /\n @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('appearance')\n @Watch('type')\n @Watch('size')\n @Watch('variant')\n checkPropValues() {\n validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the button loses focus. /\n @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button gets focus. /\n @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button is clicked. */\n @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleClick = (ev: Event) => {\n const { disabled, loading, bqClick, el } = this;\n\n if (disabled \|\| loading) {\n this.preventEvent(ev);\n return;\n }\n\n const bqClickEvent = bqClick.emit(el);\n if (bqClickEvent.defaultPrevented) {\n this.preventEvent(ev);\n return;\n }\n\n this.handleFormAction();\n };\n\n private handleFormAction() {\n const {\n type,\n internals: { form },\n } = this;\n if (isNil(form)) return;\n\n const formAction = this.formActions(form)[type];\n if (isNil(formAction)) return;\n\n formAction();\n }\n\n private formActions = (form: HTMLFormElement) => ({\n submit: () => this.submitAssociatedForm(form),\n reset: () => form.reset(),\n });\n\n private submitAssociatedForm = (form: HTMLFormElement) => {\n if (!isClient() \|\| isNil(form)) return;\n\n const btn = document.createElement('button');\n btn.type = this.type;\n btn.hidden = true;\n form.append(btn);\n\n btn.click();\n btn.remove();\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private preventEvent(ev: Event) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const isLink = isDefined(this.href);\n const TagElem = isLink ? 'a' : 'button';\n const style = {\n ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host style={style}>\n <TagElem\n aria-disabled={this.disabled ? 'true' : 'false'}\n class={{\n 'bq-button': true,\n [`bq-button--${this.appearance}`]: true,\n [`content-${this.justifyContent}`]: true,\n [`${this.variant}`]: true,\n [`${this.size}`]: true,\n block: this.block,\n disabled: this.disabled,\n 'has-prefix': this.hasPrefix,\n 'has-suffix': this.hasSuffix,\n loading: this.loading,\n }}\n disabled={this.disabled}\n download={isLink ? this.download : undefined}\n href={isLink ? this.href : undefined}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n part=\"button\"\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n tabIndex={this.disabled ? -1 : 0}\n target={isLink ? this.target : undefined}\n type={this.type}\n >\n <span\n class=\"bq-button__prefix\"\n part=\"prefix\"\n ref={(spanElem) => {\n this.prefixElem = spanElem;\n }}\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <span class=\"bq-button__label\" part=\"label\">\n <slot />\n </span>\n <span\n class=\"bq-button__suffix\"\n part=\"suffix\"\n ref={(spanElem) => {\n this.suffixElem = spanElem;\n }}\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </span>\n {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n </TagElem>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/button/scss/bq-button.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}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.cursor-\[inherit\]{cursor:inherit}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.rounded-\[--bq-button--border-radius\]{border-radius:var(--bq-button--border-radius)}.border-\[length\:--bq-button--border-width\]{border-width:var(--bq-button--border-width)}.border-m{border-width:var(--bq-stroke-m)}.border-solid{border-style:solid}.border-\[color\:--bq-button--border-color\]{border-color:var(--bq-button--border-color)}.border-brand{border-color:var(--bq-stroke--brand)}.border-tertiary{border-color:var(--bq-stroke--tertiary)}.bg-transparent{background-color:transparent}.bg-ui-brand{background-color:var(--bq-ui--brand)}.bg-ui-danger{background-color:var(--bq-ui--danger)}.bg-ui-secondary{background-color:var(--bq-ui--secondary)}.pe-xs2{padding-inline-end:var(--bq-spacing-xs2)}.ps-xs2{padding-inline-start:var(--bq-spacing-xs2)}.text-\[length\:--bq-button--large-font-size\]{font-size:var(--bq-button--large-font-size)}.text-\[length\:--bq-button--medium-font-size\]{font-size:var(--bq-button--medium-font-size)}.text-\[length\:--bq-button--small-font-size\]{font-size:var(--bq-button--small-font-size)}.font-medium{font-weight:var(--bq-font-weight--medium)}.text-brand{color:var(--bq-text--brand)}.opacity-60{opacity:.6}.transition-\[background-color\2c border-color\2c color\]{transition-duration:.15s;transition-property:background-color,border-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bs-\[--bq-button--large-height\]{block-size:var(--bq-button--large-height)}.bs-\[--bq-button--medium-height\]{block-size:var(--bq-button--medium-height)}.bs-\[--bq-button--small-height\]{block-size:var(--bq-button--small-height)}.is-auto{inline-size:auto}.is-full{inline-size:100%}.p-b-\[--bq-button--large-paddingY\]{padding-block:var(--bq-button--large-paddingY)}.p-b-\[--bq-button--medium-paddingY\]{padding-block:var(--bq-button--medium-paddingY)}.p-b-\[--bq-button--small-paddingY\]{padding-block:var(--bq-button--small-paddingY)}.p-i-\[--bq-button--large-paddingX\]{padding-inline:var(--bq-button--large-paddingX)}.p-i-\[--bq-button--medium-paddingX\]{padding-inline:var(--bq-button--medium-paddingX)}.p-i-\[--bq-button--small-paddingX\]{padding-inline:var(--bq-button--small-paddingX)}.bq-button{align-items:center;border-color:var(--bq-button--border-color);border-radius:var(--bq-button--border-radius);border-width:var(--bq-button--border-width);box-sizing:border-box;cursor:inherit;display:flex;font-weight:var(--bq-font-weight--medium);justify-content:center;line-height:var(--bq-font-line-height--regular);transition-duration:.3s;transition-property:background-color,border-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-button:disabled{cursor:not-allowed;opacity:.6}.bq-button:focus-visible{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-button--border-color:transparent;--bq-button--border-radius:var(--bq-radius--m);--bq-button--border-style:solid;--bq-button--border-width:0;--bq-button--small-height:32px;--bq-button--small-paddingX:var(--bq-spacing-xs);--bq-button--small-paddingY:var(--bq-spacing-xs2);--bq-button--small-font-size:var(--bq-font-size--m);--bq-button--medium-height:48px;--bq-button--medium-paddingX:var(--bq-spacing-m);--bq-button--medium-paddingY:var(--bq-spacing-s);--bq-button--medium-font-size:var(--bq-font-size--m);--bq-button--large-height:56px;--bq-button--large-paddingX:var(--bq-spacing-l);--bq-button--large-paddingY:var(--bq-spacing-m);--bq-button--large-font-size:var(--bq-font-size--m);cursor:pointer;display:inline-block;inline-size:auto;position:relative}.block,:host([block]){inline-size:100%}.bq-button--primary{background-color:var(--bq-ui--brand);color:var(--bq-text--alt)}.bq-button--primary:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-hover) 20%)}.bq-button--primary:enabled:active,.bq-button--primary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.bq-button--primary.ghost{background-color:transparent;border-color:var(--bq-stroke--brand);border-style:solid;border-width:var(--bq-stroke-m);color:var(--bq-text--brand)}.bq-button--primary.ghost:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--primary.ghost:enabled:active,.bq-button--primary.ghost:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.bq-button--primary.danger{background-color:var(--bq-ui--danger);color:var(--bq-text--alt)}.bq-button--primary.danger:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-hover) 20%)}.bq-button--primary.danger:enabled:active,.bq-button--primary.danger:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.bq-button--secondary{background-color:var(--bq-ui--secondary);color:var(--bq-text--primary)}.bq-button--secondary:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-button--secondary:enabled:active,.bq-button--secondary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.bq-button--secondary.ghost{background-color:transparent;border-color:var(--bq-stroke--tertiary);border-style:solid;border-width:var(--bq-stroke-m);color:var(--bq-text--primary)}.bq-button--secondary.ghost:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-button--secondary.ghost:enabled:active,.bq-button--secondary.ghost:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.bq-button--link{background-color:transparent;color:var(--bq-text--brand);text-decoration-line:none}.bq-button--link:hover:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--link:active:not(.disabled),.bq-button--link:hover:active:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.bq-button--link.disabled{cursor:not-allowed;opacity:.6}.bq-button--text{background-color:transparent;color:var(--bq-text--primary)}.bq-button--text:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--text:enabled:active,.bq-button--text:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.small{block-size:var(--bq-button--small-height);font-size:var(--bq-button--small-font-size);padding-block:var(--bq-button--small-paddingY);padding-inline:var(--bq-button--small-paddingX)}.medium{block-size:var(--bq-button--medium-height);font-size:var(--bq-button--medium-font-size);padding-block:var(--bq-button--medium-paddingY);padding-inline:var(--bq-button--medium-paddingX)}.large{block-size:var(--bq-button--large-height);font-size:var(--bq-button--large-font-size);padding-block:var(--bq-button--large-paddingY);padding-inline:var(--bq-button--large-paddingX)}.bq-button__label ::slotted(bq-icon){display:flex}.content-left{justify-content:flex-start}.content-right{justify-content:flex-end}.bq-button__prefix,.bq-button__suffix{align-items:center;display:flex;flex-basis:auto;flex-grow:0;flex-shrink:0;pointer-events:none}.bq-button.has-prefix .bq-button__label{padding-inline-start:var(--bq-spacing-xs2)}.bq-button.has-suffix .bq-button__label{padding-inline-end:var(--bq-spacing-xs2)}.bq-button.loading{cursor:wait;position:relative}.bq-button.loading .bq-button__label,.bq-button.loading .bq-button__prefix,.bq-button.loading .bq-button__suffix{visibility:hidden}.bq-button__loader{-webkit-animation:spin 1s linear 0s infinite;animation:spin 1s linear 0s infinite;position:absolute}.focus-visible\:focus:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.active\:enabled\:bg-active-ui-brand:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.active\:enabled\:bg-active-ui-danger:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.active\:enabled\:bg-active-ui-primary:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.active\:enabled\:bg-active-ui-secondary:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.active\:enabled\:hover\:bg-active-ui-brand:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.active\:enabled\:hover\:bg-active-ui-danger:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.active\:enabled\:hover\:bg-active-ui-primary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.active\:enabled\:hover\:bg-active-ui-secondary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.\[\&\:not$\.disabled$\]\:active\:bg-active-ui-secondary:active:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.static{position:static}.inline{display:inline}.hidden{display:none}.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}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.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}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.cursor-\[inherit\]{cursor:inherit}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.rounded-\[--bq-button--border-radius\]{border-radius:var(--bq-button--border-radius)}.border-\[length\:--bq-button--border-width\]{border-width:var(--bq-button--border-width)}.border-m{border-width:var(--bq-stroke-m)}.border-solid{border-style:solid}.border-\[color\:--bq-button--border-color\]{border-color:var(--bq-button--border-color)}.border-brand{border-color:var(--bq-stroke--brand)}.border-tertiary{border-color:var(--bq-stroke--tertiary)}.bg-transparent{background-color:transparent}.bg-ui-brand{background-color:var(--bq-ui--brand)}.bg-ui-danger{background-color:var(--bq-ui--danger)}.bg-ui-secondary{background-color:var(--bq-ui--secondary)}.pe-xs2{padding-inline-end:var(--bq-spacing-xs2)}.ps-xs2{padding-inline-start:var(--bq-spacing-xs2)}.text-\[length\:--bq-button--large-font-size\]{font-size:var(--bq-button--large-font-size)}.text-\[length\:--bq-button--medium-font-size\]{font-size:var(--bq-button--medium-font-size)}.text-\[length\:--bq-button--small-font-size\]{font-size:var(--bq-button--small-font-size)}.font-medium{font-weight:var(--bq-font-weight--medium)}.text-brand{color:var(--bq-text--brand)}.opacity-60{opacity:.6}.transition-\[background-color\2c border-color\2c color\]{transition-duration:.15s;transition-property:background-color,border-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bs-\[--bq-button--large-height\]{block-size:var(--bq-button--large-height)}.bs-\[--bq-button--medium-height\]{block-size:var(--bq-button--medium-height)}.bs-\[--bq-button--small-height\]{block-size:var(--bq-button--small-height)}.is-auto{inline-size:auto}.is-full{inline-size:100%}.p-b-\[--bq-button--large-paddingY\]{padding-block:var(--bq-button--large-paddingY)}.p-b-\[--bq-button--medium-paddingY\]{padding-block:var(--bq-button--medium-paddingY)}.p-b-\[--bq-button--small-paddingY\]{padding-block:var(--bq-button--small-paddingY)}.p-i-\[--bq-button--large-paddingX\]{padding-inline:var(--bq-button--large-paddingX)}.p-i-\[--bq-button--medium-paddingX\]{padding-inline:var(--bq-button--medium-paddingX)}.p-i-\[--bq-button--small-paddingX\]{padding-inline:var(--bq-button--small-paddingX)}.bq-button{align-items:center;border-color:var(--bq-button--border-color);border-radius:var(--bq-button--border-radius);border-width:var(--bq-button--border-width);box-sizing:border-box;cursor:inherit;display:flex;font-weight:var(--bq-font-weight--medium);justify-content:center;line-height:var(--bq-font-line-height--regular);transition-duration:.3s;transition-property:background-color,border-color,color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-button:disabled{cursor:not-allowed;opacity:.6}.bq-button:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-button ::slotted(bq-icon){--bq-icon--color:var(--bq-button--icon-color,currentColor)}.bq-button:hover:not(:disabled) ::slotted(bq-icon){--bq-icon--color:var(--bq-button-hover--icon-color,var(--bq-button--icon-color,currentColor))}@-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-button--border-color:transparent;--bq-button--border-radius:var(--bq-radius--m);--bq-button--border-style:solid;--bq-button--border-width:0;--bq-button--small-height:32px;--bq-button--small-paddingX:var(--bq-spacing-xs);--bq-button--small-paddingY:var(--bq-spacing-xs2);--bq-button--small-font-size:var(--bq-font-size--m);--bq-button--medium-height:48px;--bq-button--medium-paddingX:var(--bq-spacing-m);--bq-button--medium-paddingY:var(--bq-spacing-s);--bq-button--medium-font-size:var(--bq-font-size--m);--bq-button--large-height:56px;--bq-button--large-paddingX:var(--bq-spacing-l);--bq-button--large-paddingY:var(--bq-spacing-m);--bq-button--large-font-size:var(--bq-font-size--m);cursor:pointer;display:inline-block;inline-size:auto;position:relative}.block,:host([block]){inline-size:100%}.bq-button--primary{background-color:var(--bq-ui--brand);color:var(--bq-text--alt)}.bq-button--primary:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-hover) 20%)}.bq-button--primary:enabled:active,.bq-button--primary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.bq-button--primary.ghost{background-color:transparent;border-color:var(--bq-stroke--brand);border-style:solid;border-width:var(--bq-stroke-m);color:var(--bq-text--brand)}.bq-button--primary.ghost:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--primary.ghost:enabled:active,.bq-button--primary.ghost:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.bq-button--primary.danger{background-color:var(--bq-ui--danger);color:var(--bq-text--alt)}.bq-button--primary.danger:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-hover) 20%)}.bq-button--primary.danger:enabled:active,.bq-button--primary.danger:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.bq-button--secondary{background-color:var(--bq-ui--secondary);color:var(--bq-text--primary)}.bq-button--secondary:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-button--secondary:enabled:active,.bq-button--secondary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.bq-button--secondary.ghost{background-color:transparent;border-color:var(--bq-stroke--tertiary);border-style:solid;border-width:var(--bq-stroke-m);color:var(--bq-text--primary)}.bq-button--secondary.ghost:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-button--secondary.ghost:enabled:active,.bq-button--secondary.ghost:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.bq-button--link{background-color:transparent;color:var(--bq-text--brand);text-decoration-line:none}.bq-button--link:hover:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--link:active:not(.disabled),.bq-button--link:hover:active:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.bq-button--link.disabled{cursor:not-allowed;opacity:.6}.bq-button--text{background-color:transparent;color:var(--bq-text--primary)}.bq-button--text:enabled:hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-button--text:enabled:active,.bq-button--text:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.small{block-size:var(--bq-button--small-height);font-size:var(--bq-button--small-font-size);padding-block:var(--bq-button--small-paddingY);padding-inline:var(--bq-button--small-paddingX)}.medium{block-size:var(--bq-button--medium-height);font-size:var(--bq-button--medium-font-size);padding-block:var(--bq-button--medium-paddingY);padding-inline:var(--bq-button--medium-paddingX)}.large{block-size:var(--bq-button--large-height);font-size:var(--bq-button--large-font-size);padding-block:var(--bq-button--large-paddingY);padding-inline:var(--bq-button--large-paddingX)}.bq-button__label ::slotted(bq-icon){display:flex}.content-left{justify-content:flex-start}.content-right{justify-content:flex-end}.bq-button__prefix,.bq-button__suffix{align-items:center;display:flex;flex-basis:auto;flex-grow:0;flex-shrink:0;pointer-events:none}.bq-button.has-prefix .bq-button__label{padding-inline-start:var(--bq-spacing-xs2)}.bq-button.has-suffix .bq-button__label{padding-inline-end:var(--bq-spacing-xs2)}.bq-button.loading{cursor:wait;position:relative}.bq-button.loading .bq-button__label,.bq-button.loading .bq-button__prefix,.bq-button.loading .bq-button__suffix{visibility:hidden}.bq-button__loader{-webkit-animation:spin 1s linear 0s infinite;animation:spin 1s linear 0s infinite;position:absolute}.focus-visible\:focus:focus-visible{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.active\:enabled\:bg-active-ui-brand:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.active\:enabled\:bg-active-ui-danger:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.active\:enabled\:bg-active-ui-primary:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.active\:enabled\:bg-active-ui-secondary:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.active\:enabled\:hover\:bg-active-ui-brand:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--brand),var(--bq-active) 20%)}.active\:enabled\:hover\:bg-active-ui-danger:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--danger),var(--bq-active) 20%)}.active\:enabled\:hover\:bg-active-ui-primary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-active) 20%)}.active\:enabled\:hover\:bg-active-ui-secondary:hover:enabled:active{background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.\[\&\:not$\.disabled$\]\:active\:bg-active-ui-secondary:active:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-active) 20%)}.\[\&_\:\:slotted$bq-icon$\]\:\[--bq-icon--color\:_var$--bq-button--icon-color\2c _currentColor$\] ::slotted(bq-icon){--bq-icon--color:var(--bq-button--icon-color,currentColor)}.static{position:static}.inline{display:inline}.hidden{display:none}.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}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.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/card/bq-card.js CHANGED Viewed

@@ -2,9 +2,9 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h, Host } from "@stencil/core";
-import { CARD_TYPE } from "./bq-card.types";
+import { Host, h } from "@stencil/core";
 import { validatePropValue } from "../../shared/utils";
+import { CARD_TYPE } from "./bq-card.types";
 /**
  * The Card component serves as a versatile container designed for flexible content presentation within user interfaces.
  * Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.
@@ -87,7 +87,7 @@ export class BqCard {
             ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),
         };
         return (h(Host, { key: '3ac2ef6895a154485e2123b9ea6298d437e0918a', style: style }, h("div", { key: '1b8ccdca965fec742339ff11869e080cb49d9bb3', class: {
-                'bq-card rounded-[--bq-card--borderRadius] border-[length:--bq-card--borderWidth] border-[color:--bq-card--borderColor] bg-[--bq-card--background]': true,
+                'bq-card rounded-[--bq-card--borderRadius] border-[color:--bq-card--borderColor] border-[length:--bq-card--borderWidth] bg-[--bq-card--background]': true,
                 'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',
                 // Remove padding for minimal card type
                 'p-b-0 p-i-0': this.type === 'minimal',
@@ -109,7 +109,6 @@ export class BqCard {
         return {
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TCardType",
@@ -131,11 +130,11 @@ export class BqCard {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "'default'"
             },
             "border": {
                 "type": "string",
-                "attribute": "border",
                 "mutable": false,
                 "complexType": {
                     "original": "TCardBorderRadius",
@@ -157,6 +156,7 @@ export class BqCard {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "border",
                 "defaultValue": "'m'"
             }
         };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-card.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/card/bq-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,~~CAAC~~,EAAE,~~IAAI~~,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,~~iBAAiB~~,CAAC;~~AAE5C~~,OAAO,EAAE,~~iBAAiB~~,EAAE,MAAM,~~oBAAoB~~,CAAC;~~AAEvD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,MAAM;IACjB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAqB;IAElC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,6BAA6B;IACJ,IAAI,GAAc,SAAS,CAAC;IAErD,8CAA8C;IACrB,MAAM,GAAsB,GAAG,CAAC;IAEzD,wBAAwB;IACxB,0BAA0B;IAG1B,cAAc;QACZ,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,yBAAyB,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SACtF,CAAC;QACF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,4DACE,KAAK,EAAE;oBACL,mJAAmJ,EAAE,IAAI;oBACzJ,mDAAmD,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC5E,uCAAuC;oBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;iBACvC,EACD,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, ~~Host~~, Prop, Watch } from '@stencil/core';\n\nimport { ~~CARD_TYPE~~ } from '~~./bq-card.types~~';\nimport type { TCardBorderRadius, TCardType } from './bq-card.types';\nimport { ~~validatePropValue~~ } from '~~../../shared/utils~~';\n\n/*\n The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\n * Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n \n @example How to use it\n * ```html\n * <bq-card type=\"default\" border=\"m\">\n * <div class=\"p-m\">\n * <h3 class=\"text-xl font-bold\">Card Title</h3>\n * <p class=\"text-m\">Card content goes here</p>\n * </div>\n * </bq-card>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/522abb-card\n * @status stable\n \n @attr {\"default\" \| \"minimal\"} type - Type of card component\n * @attr {\"none\" \| \"xs2\" \| \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"full\"} border - The corner radius of the card component\n \n @slot - The content of the card component\n \n @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @cssprop --bq-card--borderColor - Card border color\n * @cssprop --bq-card--borderRadius - Card border radius\n * @cssprop --bq-card--borderStyle - Card border style\n * @cssprop --bq-card--borderWidth - Card border width\n \n @cssprop --bq-card--padding - Card padding\n * @cssprop --bq-card--paddingMinimal - Minimal card padding\n * @cssprop --bq-card--background - Card background color\n /\n@Component({\n tag: 'bq-card',\n styleUrl: './scss/bq-card.scss',\n shadow: true,\n})\nexport class BqCard {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqCardElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* Type of card component /\n @Prop({ reflect: true }) type: TCardType = 'default';\n\n /* The corner radius of the card component */\n @Prop({ reflect: true }) border: TCardBorderRadius = 'm';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('type')\n checkPropValue() {\n validatePropValue(CARD_TYPE, 'default', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValue();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),\n };\n return (\n <Host style={style}>\n <div\n class={{\n 'bq-card rounded-[--bq-card--borderRadius] border-[~~length~~:--bq-card--~~borderWidth~~] border-[~~color~~:--bq-card--~~borderColor~~] bg-[--bq-card--background]': true,\n 'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',\n // Remove padding for minimal card type\n 'p-b-0 p-i-0': this.type === 'minimal',\n }}\n part=\"wrapper\"\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-card.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/card/bq-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,MAAM;IACjB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAqB;IAElC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,6BAA6B;IACJ,IAAI,GAAc,SAAS,CAAC;IAErD,8CAA8C;IACrB,MAAM,GAAsB,GAAG,CAAC;IAEzD,wBAAwB;IACxB,0BAA0B;IAG1B,cAAc;QACZ,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,yBAAyB,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SACtF,CAAC;QACF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,4DACE,KAAK,EAAE;oBACL,mJAAmJ,EAAE,IAAI;oBACzJ,mDAAmD,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC5E,uCAAuC;oBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;iBACvC,EACD,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';\n\nimport { validatePropValue } from '../../shared/utils';\nimport type { TCardBorderRadius, TCardType } from './bq-card.types';\nimport { CARD_TYPE } from './bq-card.types';\n\n/*\n The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\n * Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n \n @example How to use it\n * ```html\n * <bq-card type=\"default\" border=\"m\">\n * <div class=\"p-m\">\n * <h3 class=\"text-xl font-bold\">Card Title</h3>\n * <p class=\"text-m\">Card content goes here</p>\n * </div>\n * </bq-card>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/522abb-card\n * @status stable\n \n @attr {\"default\" \| \"minimal\"} type - Type of card component\n * @attr {\"none\" \| \"xs2\" \| \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"full\"} border - The corner radius of the card component\n \n @slot - The content of the card component\n \n @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @cssprop --bq-card--borderColor - Card border color\n * @cssprop --bq-card--borderRadius - Card border radius\n * @cssprop --bq-card--borderStyle - Card border style\n * @cssprop --bq-card--borderWidth - Card border width\n \n @cssprop --bq-card--padding - Card padding\n * @cssprop --bq-card--paddingMinimal - Minimal card padding\n * @cssprop --bq-card--background - Card background color\n /\n@Component({\n tag: 'bq-card',\n styleUrl: './scss/bq-card.scss',\n shadow: true,\n})\nexport class BqCard {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqCardElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* Type of card component /\n @Prop({ reflect: true }) type: TCardType = 'default';\n\n /* The corner radius of the card component */\n @Prop({ reflect: true }) border: TCardBorderRadius = 'm';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('type')\n checkPropValue() {\n validatePropValue(CARD_TYPE, 'default', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValue();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),\n };\n return (\n <Host style={style}>\n <div\n class={{\n 'bq-card rounded-[--bq-card--borderRadius] border-[color:--bq-card--borderColor] border-[length:--bq-card--borderWidth] bg-[--bq-card--background]': true,\n 'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',\n // Remove padding for minimal card type\n 'p-b-0 p-i-0': this.type === 'minimal',\n }}\n part=\"wrapper\"\n >\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -203,13 +203,15 @@ export class BqCheckbox {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("label", { key: 'ac095d204487e115cb1d11cf63f5688dc30be6ba', class: {
+        return (h("label", { key: 'ac095d204487e115cb1d11cf63f5688dc30be6ba', "aria-label": this.name || 'checkbox', class: {
                 'bq-checkbox group': true,
                 'is-checked': this.checked,
                 'is-indeterminate': this.indeterminate,
                 'is-disabled !cursor-not-allowed': this.disabled,
                 'has-background': this.backgroundOnHover,
-            }, "aria-label": this.name || 'checkbox', part: "base" }, h("div", { key: '2de34c0b5f1d2d67df7a10d3825bdfbd000cf9d3', class: "bq-checkbox__control relative box-border flex items-center justify-center bs-[--bq-checkbox--size] is-[--bq-checkbox--size] p-b-xs3 p-i-xs3", part: "control" }, h("input", { key: '85d5831391cab6f4770281ac36d01111ccb97d68', type: "checkbox", class: "bq-checkbox__input pointer-events-none absolute opacity-0 p-b-0 p-i-0 m-b-0 m-i-0", name: !isNil(this.name) ? this.name : undefined, checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate, form: this.formId, required: this.required, value: this.value, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', ref: (input) => (this.inputElem = input), onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", tabindex: "0" }), h("span", { key: '04af6da865c30e9b47c375ccecbde8c8a0a7f1b8', class: "bq-checkbox__checkbox relative box-border flex items-center justify-center bs-full is-[--bq-checkbox--size]", part: "checkbox" }, this.checked && (h("svg", { key: 'd53dcdf684021a09688cfc7febaced608e8eae0a', xmlns: "http://www.w3.org/2000/svg", class: "absolute text-neutral-white bs-full is-full", viewBox: "0 0 256 256" }, h("path", { key: 'c1e5f25d7350d7aaef1494d6f5051d998d31d8d3', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'af53a3df384aae1bf2fbc0280d2da8abcf633c8f', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M216 72 104 184l-56-56" }))), !this.checked && this.indeterminate && (h("svg", { key: 'cb1c51f3bf96860bee520b459d33a9b992ba939f', xmlns: "http://www.w3.org/2000/svg", class: "absolute text-neutral-white bs-full is-full", viewBox: "0 0 256 256", fill: "currentColor" }, h("path", { key: 'a3072c2ff8e1877753d1cb6d99434a2827e8f443', fill: "none", d: "M0 0h256v256H0z" }), h("path", { key: 'ad3d3dcee97b4a062229b64b657bbc774b1a9418', fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M40 128h176" }))))), h("span", { key: '52b11adcf7e6c76bc6bc67ffcc9a104a57c4730f', class: "bq-checkbox__label ps-xs text-start font-medium leading-regular text-primary group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60", part: "label" }, h("slot", { key: '804a2c1a7f92377fa2285d498b696e3004528ed1' }))));
+            }, part: "base" }, h("div", { key: '2de34c0b5f1d2d67df7a10d3825bdfbd000cf9d3', class: "bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3", part: "control" }, h("input", { key: 'eedf7c8931a93a33fea19a7472cd199c7198732a', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', checked: this.checked, class: "bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0", disabled: this.disabled, form: this.formId, indeterminate: this.indeterminate, name: !isNil(this.name) ? this.name : undefined, onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", ref: (input) => {
+                this.inputElem = input;
+            }, required: this.required, tabindex: "0", type: "checkbox", value: this.value }), h("span", { key: '6316510ffdb21d195f8ed0aa7ae46e02c5746266', class: "bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center", part: "checkbox" }, this.checked && (h("svg", { key: '11dfd11d0cac62b824169cf8312222348c5bd39c', "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0de7ed79d17f4a26356ad4cd4e61a4a8c573f9da', d: "M0 0h256v256H0z", fill: "none" }), h("path", { key: 'b74ec0b4fded0752a4d494ed264c30beb97026e3', d: "M216 72 104 184l-56-56", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }))), !this.checked && this.indeterminate && (h("svg", { key: '5eb4937e2654ce5d87521303d1d21583c31c3394', "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", fill: "currentColor", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a2205d8f2d4212c6c06590ea9cf1e3c7f9d72f6a', d: "M0 0h256v256H0z", fill: "none" }), h("path", { key: '1001683358e518ca20ffdd0fe18a276452a2f69f', d: "M40 128h176", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }))))), h("span", { key: '0735d4ebff84e967c511f23ea3c4700217b0e37a', class: "bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60", part: "label" }, h("slot", { key: 'a212b9b8b092b87a537575048156c5cd590e5976' }))));
     }
     static get is() { return "bq-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -229,7 +231,6 @@ export class BqCheckbox {
         return {
             "backgroundOnHover": {
                 "type": "boolean",
-                "attribute": "background-on-hover",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -245,11 +246,11 @@ export class BqCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "background-on-hover",
                 "defaultValue": "false"
             },
             "formId": {
                 "type": "string",
-                "attribute": "form-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -264,11 +265,11 @@ export class BqCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "form-id"
             },
             "formValidationMessage": {
                 "type": "string",
-                "attribute": "form-validation-message",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -283,11 +284,11 @@ export class BqCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "form-validation-message"
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -302,11 +303,11 @@ export class BqCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "checked"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -322,11 +323,11 @@ export class BqCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "indeterminate": {
                 "type": "boolean",
-                "attribute": "indeterminate",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -342,11 +343,11 @@ export class BqCheckbox {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "indeterminate",
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -361,11 +362,11 @@ export class BqCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "name"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -380,11 +381,11 @@ export class BqCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "required"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -399,7 +400,8 @@ export class BqCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "value"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-checkbox.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnG,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AASH,MAAM,OAAO,UAAU;IACrB,iBAAiB;IACjB,uBAAuB;IAEf,SAAS,CAAmB;IAC5B,gBAAgB,CAAU;IAElC,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAyB;IACnB,SAAS,CAAoB;IAEhD,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,oDAAoD;IAC3B,iBAAiB,GAAI,KAAK,CAAC;IAEpD,uDAAuD;IAC9B,MAAM,CAAU;IAEzC,yCAAyC;IAChB,qBAAqB,CAAU;IAExD,kCAAkC;IACM,OAAO,CAAW;IAE1D,mCAAmC;IACV,QAAQ,GAAI,KAAK,CAAC;IAE3C,oDAAoD;IACZ,aAAa,GAAI,KAAK,CAAC;IAE/D,kGAAkG;IACzE,IAAI,CAAU;IAEvC,8HAA8H;IACrG,QAAQ,CAAW;IAE5C,8IAA8I;IACrH,KAAK,CAAU;IAExC,wBAAwB;IACxB,0BAA0B;IAG1B,6BAA6B;QAC3B,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAE5B,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QAClD,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAGD,wBAAwB;QACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,2DAA2D;IAClD,QAAQ,CAAqC;IAEtD,wDAAwD;IAC/C,OAAO,CAAsC;IAEtD,yDAAyD;IAChD,MAAM,CAAsC;IAErD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAED,kBAAkB;QAChB;;;;WAIG;QACH,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;YAChD,CAAC;YACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;QACvC,CAAC;IACH,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,0CAA0C;QAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAC1C,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD;;;OAGG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAElD,YAAY,GAAG,CAAC,OAAgB,EAAE,EAAE;QAC1C,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QACzC,4CAA4C;QAC5C,8FAA8F;QAC9F,0FAA0F;QAC1F,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IACzD,CAAC,CAAC;IAEM,kBAAkB,GAAG,GAAG,EAAE;QAChC,MAAM,EAAE,qBAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAChF,2BAA2B;QAC3B,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;QAE1B,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5B,iFAAiF;YACjF,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC/B,SAAS,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,sEAAsE;QACtE,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACjC,SAAS,EAAE,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,qBAAqB,EAAE,SAAS,CAAC,CAAC;IACnF,CAAC,CAAC;IAEM,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAE3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEM,aAAa,GAAG,GAAG,EAAE;QAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEM,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,OAAO,CACL,8DACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,YAAY,EAAE,IAAI,CAAC,OAAO;gBAC1B,kBAAkB,EAAE,IAAI,CAAC,aAAa;gBACtC,iCAAiC,EAAE,IAAI,CAAC,QAAQ;gBAChD,gBAAgB,EAAE,IAAI,CAAC,iBAAiB;aACzC,gBACW,IAAI,CAAC,IAAI,IAAI,UAAU,EACnC,IAAI,EAAC,MAAM;YAEX,4DACE,KAAK,EAAC,6IAA6I,EACnJ,IAAI,EAAC,SAAS;gBAEd,8DACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,mFAAmF,EACzF,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC/C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,GAAG,EAAE,CAAC,KAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC1D,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAC,GAAG,GACZ;gBACF,6DACE,KAAK,EAAC,6GAA6G,EACnH,IAAI,EAAC,UAAU;oBAMd,IAAI,CAAC,OAAO,IAAI,CACf,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,6CAA6C,EACnD,OAAO,EAAC,aAAa;wBAErB,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,iBAAiB,GAAG;wBACxC,6DACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,oBACN,OAAO,qBACN,OAAO,kBACV,IAAI,EACjB,CAAC,EAAC,wBAAwB,GAC1B,CACE,CACP;oBACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,IAAI,CACtC,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,6CAA6C,EACnD,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,cAAc;wBAEnB,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,iBAAiB,GAAG;wBACxC,6DACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,oBACN,OAAO,qBACN,OAAO,kBACV,IAAI,EACjB,CAAC,EAAC,aAAa,GACf,CACE,CACP,CACI,CACH;YACN,6DACE,KAAK,EAAC,mKAAmK,EACzK,IAAI,EAAC,OAAO;gBAEZ,8DAAQ,CACH,CACD,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Method, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/*\n The checkbox is a UI component that allows users to select one or more options from a list of choices.\n * It is commonly used in forms, surveys, and settings pages.\n \n @example How to use it\n * ```html\n * <bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\n * Checkbox label\n * </bq-checkbox>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox\n * @status stable\n \n @attr {boolean} background-on-hover - If true checkbox displays background on hover\n * @attr {string} form-id - The form ID that the checkbox is associated with\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} checked - If true checkbox is checked\n * @attr {boolean} disabled - If true checkbox is disabled\n * @attr {boolean} indeterminate - A state that is neither checked nor unchecked\n * @attr {string} name - Name of the HTML input 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 specify a value for the checkbox before the owning form can be submitted\n * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name\n \n @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n \n @event bqChange - Handler to be called when the checkbox state changes\n * @event bqFocus - Handler to be called when the checkbox gets focus\n * @event bqBlur - Handler to be called when the checkbox loses focus\n \n @slot - The content of the checkbox component\n \n @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n \n @cssprop --bq-checkbox--size - Checkbox size\n * @cssprop --bq-checkbox--border-radius - Checkbox border radius\n * @cssprop --bq-checkbox--border-width - Checkbox border width\n /\n@Component({\n tag: 'bq-checkbox',\n styleUrl: './scss/bq-checkbox.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqCheckbox {\n // Own Properties\n // ====================\n\n private inputElem: HTMLInputElement;\n private prevCheckedValue: boolean;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqCheckboxElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true checkbox displays background on hover /\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /* The form ID that the checkbox is associated with /\n @Prop({ reflect: true }) formId?: string;\n\n /* The native form validation message /\n @Prop({ mutable: true }) formValidationMessage?: string;\n\n /* If true checkbox is checked /\n @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n /* If true checkbox is disabled /\n @Prop({ reflect: true }) disabled? = false;\n\n /* A state that is neither checked nor unchecked /\n @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n /* Name of the HTML input 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 specify a value for the checkbox before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean;\n\n /* A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @Prop({ reflect: true }) value!: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('indeterminate')\n handleIndeterminatePropChange() {\n if (!this.inputElem) return;\n\n this.inputElem.indeterminate = this.indeterminate;\n if (this.indeterminate) {\n this.checked = false;\n }\n }\n\n @Watch('required')\n handleRequiredPropChange() {\n this.updateFormValidity();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the checkbox state changes /\n @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n /* Handler to be called when the checkbox gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n /* Handler to be called when the checkbox loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.prevCheckedValue = this.checked;\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 if (!this.indeterminate) {\n this.bqChange.emit({ checked: this.checked });\n }\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.indeterminate = 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 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 checkbox (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 checkbox 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 private handleChange = () => {\n this.checked = !this.checked;\n this.indeterminate = false;\n\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 // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <label\n class={{\n 'bq-checkbox group': true,\n 'is-checked': this.checked,\n 'is-indeterminate': this.indeterminate,\n 'is-disabled !cursor-not-allowed': this.disabled,\n 'has-background': this.backgroundOnHover,\n }}\n aria-label={this.name \|\| 'checkbox'}\n part=\"base\"\n >\n <div\n class=\"bq-checkbox__control relative box-border flex items-center justify-center bs-[--bq-checkbox--size] is-[--bq-checkbox--size] p-b-xs3 p-i-xs3\"\n part=\"control\"\n >\n <input\n type=\"checkbox\"\n class=\"bq-checkbox__input pointer-events-none absolute opacity-0 p-b-0 p-i-0 m-b-0 m-i-0\"\n name={!isNil(this.name) ? this.name : undefined}\n checked={this.checked}\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n form={this.formId}\n required={this.required}\n value={this.value}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n ref={(input: HTMLInputElement) => (this.inputElem = input)}\n onBlur={this.handleOnBlur}\n onChange={this.handleChange}\n onFocus={this.handleOnFocus}\n part=\"input\"\n tabindex=\"0\"\n />\n <span\n class=\"bq-checkbox__checkbox relative box-border flex items-center justify-center bs-full is-[--bq-checkbox--size]\"\n part=\"checkbox\"\n >\n {/\n We could move these SVGs to separated functional components, but it seems there's a weird issue with\n Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n */}\n {this.checked && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"absolute text-neutral-white bs-full is-full\"\n viewBox=\"0 0 256 256\"\n >\n <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n d=\"M216 72 104 184l-56-56\"\n />\n </svg>\n )}\n {!this.checked && this.indeterminate && (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"absolute text-neutral-white bs-full is-full\"\n viewBox=\"0 0 256 256\"\n fill=\"currentColor\"\n >\n <path fill=\"none\" d=\"M0 0h256v256H0z\" />\n <path\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n d=\"M40 128h176\"\n />\n </svg>\n )}\n </span>\n </div>\n <span\n class=\"bq-checkbox__label ps-xs text-start font-medium leading-regular text-primary group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60\"\n part=\"label\"\n >\n <slot />\n </span>\n </label>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-checkbox.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/*\n The checkbox is a UI component that allows users to select one or more options from a list of choices.\n * It is commonly used in forms, surveys, and settings pages.\n \n @example How to use it\n * ```html\n * <bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\n * Checkbox label\n * </bq-checkbox>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox\n * @status stable\n \n @attr {boolean} background-on-hover - If true checkbox displays background on hover\n * @attr {string} form-id - The form ID that the checkbox is associated with\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} checked - If true checkbox is checked\n * @attr {boolean} disabled - If true checkbox is disabled\n * @attr {boolean} indeterminate - A state that is neither checked nor unchecked\n * @attr {string} name - Name of the HTML input 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 specify a value for the checkbox before the owning form can be submitted\n * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name\n \n @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n \n @event bqChange - Handler to be called when the checkbox state changes\n * @event bqFocus - Handler to be called when the checkbox gets focus\n * @event bqBlur - Handler to be called when the checkbox loses focus\n \n @slot - The content of the checkbox component\n \n @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n \n @cssprop --bq-checkbox--size - Checkbox size\n * @cssprop --bq-checkbox--border-radius - Checkbox border radius\n * @cssprop --bq-checkbox--border-width - Checkbox border width\n /\n@Component({\n tag: 'bq-checkbox',\n styleUrl: './scss/bq-checkbox.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqCheckbox {\n // Own Properties\n // ====================\n\n private inputElem: HTMLInputElement;\n private prevCheckedValue: boolean;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqCheckboxElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If true checkbox displays background on hover /\n @Prop({ reflect: true }) backgroundOnHover? = false;\n\n /* The form ID that the checkbox is associated with /\n @Prop({ reflect: true }) formId?: string;\n\n /* The native form validation message /\n @Prop({ mutable: true }) formValidationMessage?: string;\n\n /* If true checkbox is checked /\n @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n /* If true checkbox is disabled /\n @Prop({ reflect: true }) disabled? = false;\n\n /* A state that is neither checked nor unchecked /\n @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n /* Name of the HTML input 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 specify a value for the checkbox before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean;\n\n /* A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name. /\n @Prop({ reflect: true }) value!: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('indeterminate')\n handleIndeterminatePropChange() {\n if (!this.inputElem) return;\n\n this.inputElem.indeterminate = this.indeterminate;\n if (this.indeterminate) {\n this.checked = false;\n }\n }\n\n @Watch('required')\n handleRequiredPropChange() {\n this.updateFormValidity();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the checkbox state changes /\n @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n /* Handler to be called when the checkbox gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n /* Handler to be called when the checkbox loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.prevCheckedValue = this.checked;\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 if (!this.indeterminate) {\n this.bqChange.emit({ checked: this.checked });\n }\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.indeterminate = 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 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 checkbox (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 checkbox 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 private handleChange = () => {\n this.checked = !this.checked;\n this.indeterminate = false;\n\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 // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <label\n aria-label={this.name \|\| 'checkbox'}\n class={{\n 'bq-checkbox group': true,\n 'is-checked': this.checked,\n 'is-indeterminate': this.indeterminate,\n 'is-disabled !cursor-not-allowed': this.disabled,\n 'has-background': this.backgroundOnHover,\n }}\n part=\"base\"\n >\n <div\n class=\"bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3\"\n part=\"control\"\n >\n <input\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n checked={this.checked}\n class=\"bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0\"\n disabled={this.disabled}\n form={this.formId}\n indeterminate={this.indeterminate}\n name={!isNil(this.name) ? this.name : undefined}\n onBlur={this.handleOnBlur}\n onChange={this.handleChange}\n onFocus={this.handleOnFocus}\n part=\"input\"\n ref={(input: HTMLInputElement) => {\n this.inputElem = input;\n }}\n required={this.required}\n tabindex=\"0\"\n type=\"checkbox\"\n value={this.value}\n />\n <span\n class=\"bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center\"\n part=\"checkbox\"\n >\n {/\n We could move these SVGs to separated functional components, but it seems there's a weird issue with\n Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n */}\n {this.checked && (\n <svg\n aria-hidden=\"true\"\n class=\"bs-full is-full absolute text-neutral-white\"\n viewBox=\"0 0 256 256\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n <path\n d=\"M216 72 104 184l-56-56\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n />\n </svg>\n )}\n {!this.checked && this.indeterminate && (\n <svg\n aria-hidden=\"true\"\n class=\"bs-full is-full absolute text-neutral-white\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n <path\n d=\"M40 128h176\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"32\"\n />\n </svg>\n )}\n </span>\n </div>\n <span\n class=\"bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60\"\n part=\"label\"\n >\n <slot />\n </span>\n </label>\n );\n }\n}\n"]}