@beeq/core 1.8.0-beta.15 → 1.8.0-beta.16

package/dist/collection/components/step-item/bq-step-item.js

@@ -7,9 +7,41 @@ import { STEP_ITEM_STATUS } from "./bq-step-item.types";
 import { isHTMLElement, validatePropValue } from "../../shared/utils";
 import { STEPS_SIZE } from "../steps/bq-steps.types";
 /**
+ * The Step Item Component is a UI element used to display a single step or stage in a process or task.
+ * It should be used inside the Steps component.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-step-item status="completed">
+ *   <bq-icon slot="prefix" name="check-circle"></bq-icon>
+ *   <span>Title</span>
+ *   <span slot="description">Description</span>
+ * </bq-step-item>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
+ * @status stable
+ *
+ * @attr {"small" | "medium"} size - It defines prefix size
+ * @attr {"completed" | "current" | "error" | "default" | "disabled"} status - It defines step item appearance based on its status
+ * @attr {"numeric" | "icon" | "dot"} type - It defines the step item type used
+ *
+ * @event bqClick - Callback handler emitted when the step item is clicked
+ *
+ * @slot - The step item content
+ * @slot prefix - The step item prefix
+ * @slot description - The step item description
+ *
  * @part base - The component's base wrapper.
  * @part title - The component's title.
  * @part description - The component's description.
+ *
+ * @cssprop --bq-step-item--prefix-color - Color of the prefix icon
+ * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current
+ * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed
+ * @cssprop --bq-step-item--prefix-color-error - Color of the prefix icon when error
+ * @cssprop --bq-step-item--prefix-num-size - Size of the prefix number
+ * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number
  */
 export class BqStepItem {
     constructor() {
@@ -75,18 +107,18 @@ export class BqStepItem {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("div", { key: '0b83690a453edf783ee752888c0557ef8619c04f', class: {
+        return (h("div", { key: '1161a3c603b431caa096ef8e0e8e5ab929173c80', class: {
                 'bq-step-item flex gap-s': true,
                 [`bq-step-item--${this.status}`]: true,
                 'pointer-events-none opacity-60': this.isDisabled,
-            }, part: "base" }, h("div", { key: 'c20c2a316726878841679080075f38b7c840662d', class: `bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}` }, h("slot", { key: 'd1964706f6b54b97f5d0ee553e502e7cc58fd08a', name: "prefix", onSlotchange: this.handleIconPrefix })), h("div", { key: '81e1d2d5465b7b2f6d5db1a138e70e895c40139a', class: "bq-step-item__content" }, h("div", { key: '5701bc95e68376ac83bafa00a2a413786a62fbd3', class: {
+            }, part: "base" }, h("div", { key: '84901faf3c3b314f9fbe6f5169a9ba7b3bc2cf75', class: `bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}` }, h("slot", { key: '1e8f12cbbd3f87a439b4c71653c5ab592c3f62e4', name: "prefix", onSlotchange: this.handleIconPrefix })), h("div", { key: '4411789c420bc5b25c16cf5c159a3b7960df6974', class: "bq-step-item__content" }, h("div", { key: '84449ef9359c2f46620e4f4fabd3cab4dfc0a4a5', class: {
                 'bq-step-item__content--title pe-xs3 text-m leading-regular text-primary': true,
                 'pointer-events-none': this.isDisabled,
                 'text-brand': this.isCurrent,
-            }, part: "title" }, h("slot", { key: '027b7bd5777d656bbdff56f8c083dde98e049274' })), h("div", { key: 'c64e30109b64ff5c9c98601cc6ac6c06c1ad0fa3', class: {
+            }, part: "title" }, h("slot", { key: 'b26efa3c0d9bdb6e3691d947d018597114103b2b' })), h("div", { key: 'cfe3ba67018815d685815bf52d75d1225d81b113', class: {
                 'bq-step-item__content--description text-s leading-regular opacity-60': true,
                 'opacity-60': this.isDisabled,
-            }, part: "description" }, h("slot", { key: '72c833051e1ab88aad6f33a9d46b84f09915a943', name: "description" })))));
+            }, part: "description" }, h("slot", { key: '97be3adf391e9f125c65435fd5e8a8db2b029dad', name: "description" })))));
     }
     static get is() { return "bq-step-item"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +154,8 @@ export class BqStepItem {
                     "tags": [],
                     "text": "It defines prefix size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
@@ -146,6 +180,8 @@ export class BqStepItem {
                     "tags": [],
                     "text": "It defines step item appearance based on its status"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": true,
                 "defaultValue": "'default'"
@@ -170,6 +206,8 @@ export class BqStepItem {
                     "tags": [],
                     "text": "It defines the step item type used"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true
             }

package/dist/collection/components/step-item/bq-step-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-step-item.js","sourceRoot":"","sources":["../../../../../../src/components/step-item/bq-step-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS, TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE, TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/**\n * @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n */\n@Component({\n  tag: 'bq-step-item',\n  styleUrl: './scss/bq-step-item.scss',\n  shadow: true,\n})\nexport class BqStepItem {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqStepItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It defines prefix size */\n  @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n  /** It defines step item appearance based on its status */\n  @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n  /** It defines the step item type used */\n  @Prop({ reflect: true }) type?: TStepsType;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('status')\n  checkPropValues() {\n    validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n    validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n    this.handleIconPrefix();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the step item is clicked */\n  @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleIconPrefix();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get isDisabled(): boolean {\n    return this.status === 'disabled';\n  }\n\n  private get isCurrent(): boolean {\n    return this.status === 'current';\n  }\n\n  private handleIconPrefix = () => {\n    const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n    if (!iconElem || !isHTMLElement(iconElem, 'bq-icon')) return;\n\n    iconElem.size = this.size === 'small' ? 24 : 32;\n    iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        class={{\n          'bq-step-item flex gap-s': true,\n          [`bq-step-item--${this.status}`]: true,\n          'pointer-events-none opacity-60': this.isDisabled,\n        }}\n        part=\"base\"\n      >\n        <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n          <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n        </div>\n        <div class=\"bq-step-item__content\">\n          {/* TITLE */}\n          <div\n            class={{\n              'bq-step-item__content--title pe-xs3 text-m leading-regular text-primary': true,\n              'pointer-events-none': this.isDisabled,\n              'text-brand': this.isCurrent,\n            }}\n            part=\"title\"\n          >\n            <slot />\n          </div>\n          {/* DESCRIPTION */}\n          <div\n            class={{\n              'bq-step-item__content--description text-s leading-regular opacity-60': true,\n              'opacity-60': this.isDisabled,\n            }}\n            part=\"description\"\n          >\n            <slot name=\"description\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-step-item.js","sourceRoot":"","sources":["../../../../../../src/components/step-item/bq-step-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS, TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE, TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/**\n * The Step Item Component is a UI element used to display a single step or stage in a process or task.\n * It should be used inside the Steps component.\n *\n * @example How to use it\n * ```html\n * <bq-step-item status=\"completed\">\n *   <bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n *   <span>Title</span>\n *   <span slot=\"description\">Description</span>\n * </bq-step-item>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n *\n * @attr {\"small\" | \"medium\"} size - It defines prefix size\n * @attr {\"completed\" | \"current\" | \"error\" | \"default\" | \"disabled\"} status - It defines step item appearance based on its status\n * @attr {\"numeric\" | \"icon\" | \"dot\"} type - It defines the step item type used\n *\n * @event bqClick - Callback handler emitted when the step item is clicked\n *\n * @slot - The step item content\n * @slot prefix - The step item prefix\n * @slot description - The step item description\n *\n * @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n *\n * @cssprop --bq-step-item--prefix-color - Color of the prefix icon\n * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current\n * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed\n * @cssprop --bq-step-item--prefix-color-error - Color of the prefix icon when error\n * @cssprop --bq-step-item--prefix-num-size - Size of the prefix number\n * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number\n */\n@Component({\n  tag: 'bq-step-item',\n  styleUrl: './scss/bq-step-item.scss',\n  shadow: true,\n})\nexport class BqStepItem {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqStepItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It defines prefix size */\n  @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n  /** It defines step item appearance based on its status */\n  @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n  /** It defines the step item type used */\n  @Prop({ reflect: true }) type?: TStepsType;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('status')\n  checkPropValues() {\n    validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n    validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n    this.handleIconPrefix();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the step item is clicked */\n  @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleIconPrefix();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get isDisabled(): boolean {\n    return this.status === 'disabled';\n  }\n\n  private get isCurrent(): boolean {\n    return this.status === 'current';\n  }\n\n  private handleIconPrefix = () => {\n    const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n    if (!iconElem || !isHTMLElement(iconElem, 'bq-icon')) return;\n\n    iconElem.size = this.size === 'small' ? 24 : 32;\n    iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        class={{\n          'bq-step-item flex gap-s': true,\n          [`bq-step-item--${this.status}`]: true,\n          'pointer-events-none opacity-60': this.isDisabled,\n        }}\n        part=\"base\"\n      >\n        <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n          <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n        </div>\n        <div class=\"bq-step-item__content\">\n          {/* TITLE */}\n          <div\n            class={{\n              'bq-step-item__content--title pe-xs3 text-m leading-regular text-primary': true,\n              'pointer-events-none': this.isDisabled,\n              'text-brand': this.isCurrent,\n            }}\n            part=\"title\"\n          >\n            <slot />\n          </div>\n          {/* DESCRIPTION */}\n          <div\n            class={{\n              'bq-step-item__content--description text-s leading-regular opacity-60': true,\n              'opacity-60': this.isDisabled,\n            }}\n            part=\"description\"\n          >\n            <slot name=\"description\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/steps/bq-steps.js

@@ -6,10 +6,37 @@ import { h } from "@stencil/core";
 import { STEPS_SIZE, STEPS_TYPE } from "./bq-steps.types";
 import { validatePropValue } from "../../shared/utils";
 /**
+ * The Steps Component is a UI element used to display a series of steps or stages in a process or task.
+ * It is used to guide users through a process or task and to indicate their progress.
+ *
+ * @example How to use it
+ * ```html
+ * <bq-steps divider-color="stroke--primary" type="dot" size="medium">
+ *   <bq-step-item status="completed"> ... </bq-step-item>
+ *   <bq-step-item status="error"> ... </bq-step-item>
+ *   <bq-step-item status="current"> ... </bq-step-item>
+ *   <bq-step-item status="default"> ... </bq-step-item>
+ * </bq-steps>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper
+ * @status stable
+ *
+ * @dependency bq-divider
+ *
+ * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.
+ * @attr {"medium" | "small"} size - The size of the steps
+ * @attr {"numeric" | "icon" | "dot"} type - The type of prefix element to use on the step items
+ *
+ * @slot - The step items
+ *
  * @part container - The container wrapper of the Steps component
  * @part divider-base - The base wrapper of the divider component
  * @part divider-dash-start - The dash start wrapper of the divider component
  * @part divider-dash-end - The dash end wrapper of the divider component
+ *
+ * @cssprop --bq-steps--divider-color - Divider color
+ * @cssprop --bq-steps--gap - Gap between steps
  */
 export class BqSteps {
     constructor() {
@@ -71,7 +98,7 @@ export class BqSteps {
     // ===================================
     render() {
         const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';
-        return (h("div", { key: '0db3af56983cb0a41fc4bca5ca93d4455d52bd19', class: "relative flex w-full items-start justify-between", ref: (div) => (this.stepElem = div), part: "container" }, h("slot", { key: '05ec86abb032fd6f0d17b77228fa6f2a3ab38c8d' }), h("bq-divider", { key: 'a5444e7a1d01284d048d9f24015643d7740d0820', class: `absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`, strokeColor: this.dividerColor, strokeThickness: 2, exportparts: "base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end" })));
+        return (h("div", { key: '3dce87e1c73302eca5f4f7ddf8608318ceae1938', class: "relative flex w-full items-start justify-between", ref: (div) => (this.stepElem = div), part: "container" }, h("slot", { key: '5d55a7c2244bcdaab1ecc90365ac0e35b6f940e9' }), h("bq-divider", { key: '337a125bde11140ab4dff1fef10797b13613d182', class: `absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`, strokeColor: this.dividerColor, strokeThickness: 2, exportparts: "base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end" })));
     }
     static get is() { return "bq-steps"; }
     static get encapsulation() { return "shadow"; }
@@ -101,6 +128,8 @@ export class BqSteps {
                     "tags": [],
                     "text": "The color of the line that connects the steps. It should be a valid declarative color token."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "divider-color",
                 "reflect": true,
                 "defaultValue": "'stroke--primary'"
@@ -125,6 +154,8 @@ export class BqSteps {
                     "tags": [],
                     "text": "The size of the steps"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
@@ -149,6 +180,8 @@ export class BqSteps {
                     "tags": [],
                     "text": "The type of prefix element to use on the step items"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": true
             }

package/dist/collection/components/steps/bq-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-steps.js","sourceRoot":"","sources":["../../../../../../src/components/steps/bq-steps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,UAAU,EAA0B,MAAM,kBAAkB,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;;4BAmB8B,iBAAiB;oBAGrB,QAAQ;;;IArBpD,iBAAiB;IACjB,uBAAuB;IAEf,QAAQ,CAAc;IAE9B,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAsB;IAkBnC,wBAAwB;IACxB,0BAA0B;IAI1B,eAAe;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzD,iBAAiB,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QAE1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IACD,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,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;IAE1D,IAAY,OAAO;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QAE9B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACzD,CAAC,EAA6B,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,CAChD,CAAC;IACnC,CAAC;IAEO,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,UAAiC,EAAE,EAAE;YACzD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC5B,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,sCAAsC;IACtC,+BAA+B;IAC/B,IAAI;IAEJ,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEtE,OAAO,CACL,4DACE,KAAK,EAAC,kDAAkD,EACxD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,IAAI,EAAC,WAAW;YAEhB,8DAAQ;YACR,mEACE,KAAK,EAAE,8CAA8C,iBAAiB,EAAE,EACxE,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,eAAe,EAAE,CAAC,EAClB,WAAW,EAAC,2EAA2E,GACvF,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STEPS_SIZE, STEPS_TYPE, TStepsSize, TStepsType } from './bq-steps.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * @part container - The container wrapper of the Steps component\n * @part divider-base - The base wrapper of the divider component\n * @part divider-dash-start - The dash start wrapper of the divider component\n * @part divider-dash-end - The dash end wrapper of the divider component\n */\n@Component({\n  tag: 'bq-steps',\n  styleUrl: './scss/bq-steps.scss',\n  shadow: true,\n})\nexport class BqSteps {\n  // Own Properties\n  // ====================\n\n  private stepElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqStepsElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** The color of the line that connects the steps. It should be a valid declarative color token. */\n  @Prop({ reflect: true }) dividerColor: string = 'stroke--primary';\n\n  /** The size of the steps */\n  @Prop({ reflect: true }) size: TStepsSize = 'medium';\n\n  /** The type of prefix element to use on the step items */\n  @Prop({ reflect: true }) type: TStepsType;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n    validatePropValue(STEPS_TYPE, 'numeric', this.el, 'type');\n\n    this.setStepItemProps();\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  componentDidLoad() {\n    this.setStepItemProps();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get bqSteps(): HTMLBqStepItemElement[] {\n    if (!this.stepElem) return [];\n\n    const slot = this.stepElem.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === 'bq-step-item',\n    ) as [HTMLBqSideMenuItemElement];\n  }\n\n  private setStepItemProps = () => {\n    this.bqSteps.forEach((bqStepElem: HTMLBqStepItemElement) => {\n      bqStepElem.size = this.size;\n      bqStepElem.type = this.type;\n    });\n  };\n\n  // private handleChange = (event) => {\n  //   this.bqChange.emit(event);\n  // }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';\n\n    return (\n      <div\n        class=\"relative flex w-full items-start justify-between\"\n        ref={(div) => (this.stepElem = div)}\n        part=\"container\"\n      >\n        <slot />\n        <bq-divider\n          class={`absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`}\n          strokeColor={this.dividerColor}\n          strokeThickness={2}\n          exportparts=\"base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end\"\n        />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-steps.js","sourceRoot":"","sources":["../../../../../../src/components/steps/bq-steps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,UAAU,EAA0B,MAAM,kBAAkB,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,OAAO;;4BAmB8B,iBAAiB;oBAGrB,QAAQ;;;IArBpD,iBAAiB;IACjB,uBAAuB;IAEf,QAAQ,CAAc;IAE9B,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAsB;IAkBnC,wBAAwB;IACxB,0BAA0B;IAI1B,eAAe;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzD,iBAAiB,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QAE1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IACD,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,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;IAE1D,IAAY,OAAO;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QAE9B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACzD,CAAC,EAA6B,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,CAChD,CAAC;IACnC,CAAC;IAEO,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,UAAiC,EAAE,EAAE;YACzD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC5B,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,sCAAsC;IACtC,+BAA+B;IAC/B,IAAI;IAEJ,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEtE,OAAO,CACL,4DACE,KAAK,EAAC,kDAAkD,EACxD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,IAAI,EAAC,WAAW;YAEhB,8DAAQ;YACR,mEACE,KAAK,EAAE,8CAA8C,iBAAiB,EAAE,EACxE,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,eAAe,EAAE,CAAC,EAClB,WAAW,EAAC,2EAA2E,GACvF,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STEPS_SIZE, STEPS_TYPE, TStepsSize, TStepsType } from './bq-steps.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * The Steps Component is a UI element used to display a series of steps or stages in a process or task.\n * It is used to guide users through a process or task and to indicate their progress.\n *\n * @example How to use it\n * ```html\n * <bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n *   <bq-step-item status=\"completed\"> ... </bq-step-item>\n *   <bq-step-item status=\"error\"> ... </bq-step-item>\n *   <bq-step-item status=\"current\"> ... </bq-step-item>\n *   <bq-step-item status=\"default\"> ... </bq-step-item>\n * </bq-steps>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n *\n * @dependency bq-divider\n *\n * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.\n * @attr {\"medium\" | \"small\"} size - The size of the steps\n * @attr {\"numeric\" | \"icon\" | \"dot\"} type - The type of prefix element to use on the step items\n *\n * @slot - The step items\n *\n * @part container - The container wrapper of the Steps component\n * @part divider-base - The base wrapper of the divider component\n * @part divider-dash-start - The dash start wrapper of the divider component\n * @part divider-dash-end - The dash end wrapper of the divider component\n *\n * @cssprop --bq-steps--divider-color - Divider color\n * @cssprop --bq-steps--gap - Gap between steps\n */\n@Component({\n  tag: 'bq-steps',\n  styleUrl: './scss/bq-steps.scss',\n  shadow: true,\n})\nexport class BqSteps {\n  // Own Properties\n  // ====================\n\n  private stepElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqStepsElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** The color of the line that connects the steps. It should be a valid declarative color token. */\n  @Prop({ reflect: true }) dividerColor: string = 'stroke--primary';\n\n  /** The size of the steps */\n  @Prop({ reflect: true }) size: TStepsSize = 'medium';\n\n  /** The type of prefix element to use on the step items */\n  @Prop({ reflect: true }) type: TStepsType;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n    validatePropValue(STEPS_TYPE, 'numeric', this.el, 'type');\n\n    this.setStepItemProps();\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  componentDidLoad() {\n    this.setStepItemProps();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get bqSteps(): HTMLBqStepItemElement[] {\n    if (!this.stepElem) return [];\n\n    const slot = this.stepElem.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === 'bq-step-item',\n    ) as [HTMLBqSideMenuItemElement];\n  }\n\n  private setStepItemProps = () => {\n    this.bqSteps.forEach((bqStepElem: HTMLBqStepItemElement) => {\n      bqStepElem.size = this.size;\n      bqStepElem.type = this.type;\n    });\n  };\n\n  // private handleChange = (event) => {\n  //   this.bqChange.emit(event);\n  // }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';\n\n    return (\n      <div\n        class=\"relative flex w-full items-start justify-between\"\n        ref={(div) => (this.stepElem = div)}\n        part=\"container\"\n      >\n        <slot />\n        <bq-divider\n          class={`absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`}\n          strokeColor={this.dividerColor}\n          strokeThickness={2}\n          exportparts=\"base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end\"\n        />\n      </div>\n    );\n  }\n}\n"]}

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

@@ -2,18 +2,53 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { getTextContent, isNil } from "../../shared/utils";
 /**
  * Toggle switches are digital on/off switches.
  * They should provide immediate results, giving users the freedom to control their preferences as needed.
  *
+ * @example How to use it
+ * ```html
+ * <bq-switch inner-label="default" justify-content="start" name="bq-switch" value="Switch value">
+ *   Toggle me!
+ * </bq-switch>
+ * ```
+ *
+ * @documentation https://www.beeq.design/3d466e231/p/49d9c9-switch
+ * @status stable
+ *
+ * @dependency bq-icon
+ *
+ * @attr {boolean} background-on-hover - If `true`, a background will be displayed on hover
+ * @attr {boolean} checked - It indicates whether if the switch is `ON` by default (when the page loads)
+ * @attr {boolean} disabled - If `true`, the switch control will be disabled and no interaction will be allowed
+ * @attr {string} form-validation-message - The native form validation message
+ * @attr {boolean} full-width - If `true`, the component will take the full width space available on the parent container
+ * @attr {"default" | "icon"} inner-label - It indicates how to to display the on/off marks inside the control, with icons or none (default)
+ * @attr {"start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"} justify-content - It defines how to distribute the space between and around the control and the label text
+ * @attr {string} name - Name of the form control. Submitted with the form as part of a name/value pair
+ * @attr {boolean} required - If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted
+ * @attr {boolean} reverse-order - If `true`, the order of the control and the label text will be changed
+ * @attr {string} value - The input control's value, submitted as a name/value pair with form data
+ *
+ * @event bqChange - Handler to be called when the switch state changes
+ * @event bqFocus - Handler to be called when the switch gets focus
+ * @event bqBlur - Handler to be called when the switch loses focus
+ *
+ * @slot - The switch label text
+ *
  * @part base - HTML `<label>` root container
  * @part control - HTML `<div>` element for the custom control
  * @part dot - HTML `<div>` element that acts as changing dot
  * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label
  * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label
  * @part label - HTML `<span>` element that holds the label text
+ *
+ * @cssprop --bq-switch--height - Switch height
+ * @cssprop --bq-switch--justify-content - Switch justify content
+ * @cssprop --bq-switch--width - Switch width
+ * @cssprop --bq-switch--dot-size - Switch dot size
  */
 export class BqSwitch {
     constructor() {
@@ -21,6 +56,7 @@ export class BqSwitch {
         this.backgroundOnHover = false;
         this.checked = false;
         this.disabled = false;
+        this.formValidationMessage = undefined;
         this.fullWidth = false;
         this.innerLabel = 'default';
         this.justifyContent = 'start';
@@ -36,9 +72,13 @@ export class BqSwitch {
     prevCheckedValue;
     // Reference to host HTML element
     // ===================================
+    internals;
     el;
     // Prop lifecycle events
     // =======================
+    handleRequiredChange() {
+        this.updateFormValidity();
+    }
     // Events section
     // Requires JSDocs for public API documentation
     // ==============================================
@@ -68,6 +108,17 @@ export class BqSwitch {
             this.prevCheckedValue = this.checked;
         }
     }
+    formAssociatedCallback() {
+        this.setFormValue(this.checked);
+        this.updateFormValidity();
+    }
+    formResetCallback() {
+        // Reset the form value and validity state
+        this.checked = false;
+        this.inputElem.removeAttribute('checked');
+        this.internals?.setFormValue(undefined);
+        this.updateFormValidity();
+    }
     // Listeners
     // ==============
     // Public methods API
@@ -104,6 +155,8 @@ export class BqSwitch {
     handleChange = () => {
         this.checked = !this.checked;
         this.inputElem.setAttribute('checked', `${this.checked}`);
+        this.setFormValue(this.checked);
+        this.updateFormValidity();
     };
     handleOnFocus = () => {
         this.bqFocus.emit(this.el);
@@ -117,6 +170,27 @@ export class BqSwitch {
             return;
         this.hasLabel = !!getTextContent(slot, { recurse: true }).length;
     };
+    setFormValue = (checked) => {
+        const value = checked ? 'on' : undefined;
+        // Set form value based on the checked state
+        // Here we also pass the state of the component (2nd argument) as the state of the form control
+        // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue
+        this.internals?.setFormValue(value, `${this.checked}`);
+    };
+    updateFormValidity = () => {
+        const { formValidationMessage, internals, required, checked, inputElem } = this;
+        // Clear the validity state
+        internals?.states.clear();
+        if (!(required && !checked)) {
+            // If the switch component is not required or is checked, set the validity state to valid
+            internals?.states.add('valid');
+            internals?.setValidity({});
+            return;
+        }
+        // Set validity state based on the required property and checked state
+        internals?.states.add('invalid');
+        internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);
+    };
     // render() function
     // Always the last one in the class.
     // ===================================
@@ -130,15 +204,16 @@ export class BqSwitch {
             'is-disabled': this.disabled,
             'flex-row-reverse': this.reverseOrder,
         };
-        return (h(Host, { key: '6af1345db320b26d6ba3cdcef15838a692b0b910', class: { 'full-width': this.fullWidth }, style: hostStyle }, h("label", { key: 'e4d1acf76533314856c97ba939c10d36dae7e132', class: { 'bq-switch group': true, ...labelCssClasses }, part: "base" }, h("input", { key: '48bea788941dd8b93c5cfe104f95cb8ecc18f0a0', class: "bq-switch--input peer sr-only peer-checked:invisible", type: "checkbox", checked: this.checked, disabled: this.disabled, required: this.required, name: !isNil(this.name) ? this.name : undefined, "aria-label": this.name, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, ref: (input) => (this.inputElem = input), role: "switch", value: this.value }), h("div", { key: '6d513056ff58e72123b301597974128c3e9df66f', class: "bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand", part: "control" }, this.innerLabel === 'icon' && (h("bq-icon", { key: '4ae4b83081d7727800dff1f2a3b3f41f827d9b46', class: "bq-switch--control__icon on", name: "check", color: "icon--alt", role: "img", title: "On", part: "icon-on" })), this.innerLabel === 'icon' && (h("bq-icon", { key: '4af8d9e0346f7ba722cf77d1be94e5ef0e61ce60', class: "bq-switch--control__icon off", name: "x", color: "icon--inverse", role: "img", title: "Off", part: "icon-off" })), h("div", { key: '553bc00cf0cfe61a22445666c3f89e66e3f81ed5', class: "bq-switch--control__dot", part: "dot" })), h("span", { key: 'e36dbc50cb3b104ca8c1e7c1b501e989f63943f4', class: {
+        return (h(Host, { key: '630f292d2c6250f3e66209ec100d8f2f987f97f0', class: { 'full-width': this.fullWidth }, style: hostStyle }, h("label", { key: '82377b1b05bc43dc6df06b6fe127e09408e4744c', class: { 'bq-switch group': true, ...labelCssClasses }, part: "base" }, h("input", { key: '65c9f73951a1db95cb684111421e2755f5c92fba', class: "bq-switch--input peer sr-only !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] peer-checked:invisible", type: "checkbox", checked: this.checked, disabled: this.disabled, required: this.required, name: !isNil(this.name) ? this.name : undefined, "aria-label": this.name, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, ref: (input) => (this.inputElem = input), role: "switch", value: this.value }), h("div", { key: 'ddc5c4b1c1d787597cf0157cd529d88ddda8ea20', class: "bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand", part: "control" }, this.innerLabel === 'icon' && (h("bq-icon", { key: 'baa7ceab4bc243d5e34943ee9f95cb3f74ceca1f', class: "bq-switch--control__icon on", name: "check", color: "icon--alt", role: "img", title: "On", part: "icon-on" })), this.innerLabel === 'icon' && (h("bq-icon", { key: 'ef541c5fa7c51d92bcd15f4d1af84887e250e4aa', class: "bq-switch--control__icon off", name: "x", color: "icon--inverse", role: "img", title: "Off", part: "icon-off" })), h("div", { key: '8d682574ee3eaeb6f93fb08a4c8a170b2e92e924', class: "bq-switch--control__dot", part: "dot" })), h("span", { key: '3c5ca5f5c30d54a4aee643769364b9d9b6b9fd17', class: {
                 'bq-switch--label text-m font-medium leading-regular text-primary transition-colors duration-300': true,
                 'ms-s': this.hasLabel && !this.reverseOrder,
                 'me-s': this.hasLabel && this.reverseOrder,
-            }, ref: (span) => (this.labelElem = span), part: "label" }, h("slot", { key: '8b941425da5bdaf9eb6b95287e1cb01ebb867655', onSlotchange: this.handleSlotChange })))));
+            }, ref: (span) => (this.labelElem = span), part: "label" }, h("slot", { key: '85aed39ed5e1736a553297168999dc6c8eb72fd9', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bq-switch"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["./scss/bq-switch.scss"]
@@ -165,6 +240,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "If true, a background will be displayed on hover"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "background-on-hover",
                 "reflect": true,
                 "defaultValue": "false"
@@ -183,6 +260,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "It indicates whether if the switch is `ON` by default (when the page loads)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
@@ -201,10 +280,31 @@ export class BqSwitch {
                     "tags": [],
                     "text": "If true, the switch control will be disabled and no interaction will be allowed"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "formValidationMessage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The native form validation message"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "form-validation-message",
+                "reflect": false
+            },
             "fullWidth": {
                 "type": "boolean",
                 "mutable": false,
@@ -219,6 +319,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "If true, the component will take the full width space available on the parent container"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": true,
                 "defaultValue": "false"
@@ -243,6 +345,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "It indicates how to to display the on/off marks inside the control, with icons or none (default)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inner-label",
                 "reflect": true,
                 "defaultValue": "'default'"
@@ -267,6 +371,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "It defines how to distribute the space between and around the control and the label text\n(https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "justify-content",
                 "reflect": true,
                 "defaultValue": "'start'"
@@ -285,6 +391,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "Name of the form control. Submitted with the form as part of a name/value pair"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": true
             },
@@ -302,6 +410,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
@@ -320,6 +430,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "If true, the order of the control and the label text will be changed"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "reverse-order",
                 "reflect": true,
                 "defaultValue": "false"
@@ -338,6 +450,8 @@ export class BqSwitch {
                     "tags": [],
                     "text": "The input control's value, submitted as a name/value pair with form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             }
@@ -462,5 +576,12 @@ export class BqSwitch {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "required",
+                "methodName": "handleRequiredChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=bq-switch.js.map

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

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