npm - @beeq/core - Versions diffs - 1.8.1 → 1.8.2 - Mend

@beeq/core 1.8.1 → 1.8.2

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

Files changed (507) hide show

package/dist/cjs/bq-badge.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c4edfa07.js');
+const index = require('./index-0c8d249a.js');
 const cssVariables = require('./cssVariables-55ad4942.js');
 const isNil = require('./isNil-f93429a2.js');
 const props = require('./props-2653e993.js');
@@ -21,10 +21,6 @@ const BqBadgeStyle0 = bqBadgeCss;
 const BqBadge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.contentLength = 0;
-        this.backgroundColor = 'ui--danger';
-        this.textColor = 'text--inverse';
-        this.size = 'small';
     }
     // Own Properties
     // ====================
@@ -34,6 +30,18 @@ const BqBadge = class {
         this.contentLength = mutation.target.textContent.length;
     });
     get el() { return index.getElement(this); }
+    // State() variables
+    // Inlined decorator, alphabetical order
+    // =======================================
+    contentLength = 0;
+    // Public Property API
+    // ========================
+    /** Badge background color. The value should be a valid value of the palette color */
+    backgroundColor = 'ui--danger';
+    /** Badge number color. The value should be a valid value of the palette color */
+    textColor = 'text--inverse';
+    /** The size of the badge. Relevant if badge has no content. */
+    size = 'small';
     // Prop lifecycle events
     // =======================
     handleSizePropChange() {

package/dist/cjs/bq-badge.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-badge.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAO,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACAtD,MAAM,UAAU,GAAG,w6pBAAw6pB,CAAC;AAC57pB,sBAAe,UAAU;;MCyCZ,OAAO~~;;;6BAoBe~~,~~CAAC;+BAMyB,YAAY;yBAGlB,eAAe;oBAGR,OAAO;;;;IA5B3D,~~WAAW,CAAmB;IAE9B,QAAQ,GAAqB,IAAI,gBAAgB,CAAC,CAAC,SAAS;QAClE,MAAM,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC;KACzD,CAAC,CAAC;;;;~~IA6BH~~,oBAAoB;QAClBA,uBAAiB,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;KACzD;;;;;;;IAUD,iBAAiB;QACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC;KAC7B;;;;;;;;;;;;;IAiBO,YAAY,GAAG;QACrB,MAAMC,MAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAIC,WAAK,CAACD,MAAI,CAAC;YAAE,OAAO;QAExB,IAAI,CAAC,aAAa,GAAGE,mBAAc,CAACF,MAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;QACpE,MAAM,CAAC,IAAI,CAAC,GAAGA,MAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAErD,IAAIC,WAAK,CAAC,IAAI,CAAC,EAAE;YACf,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC5B,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1B,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ,CAAC;IAEF,IAAY,IAAI;QACd,OAAO,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;KACxD;;;;IAMD,MAAM;QACJ,MAAM,MAAM,GAAG;YACb,IAAI,IAAI,CAAC,eAAe,IAAI,EAAE,8BAA8B,EAAEE,gCAAmB,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;YAC1G,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,wBAAwB,EAAEA,gCAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;SACzF,CAAC;QAEF,QACEC,QAACC,UAAI,qDAAC,KAAK,EAAE,MAAM,IACjBD,kEACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,KAAK,CAAC;gBAChD,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,CAAC;gBAC7B,SAAS,EAAE,IAAI,CAAC,aAAa,GAAG,CAAC;aAClC,EACD,IAAI,EAAC,MAAM,IAEXA,mEAAM,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,QAAQ,IACzGA,mEAAM,YAAY,EAAE,IAAI,CAAC,YAAY,GAAS,CACzC,CACH,CACD,EACP;KACH;;;;;;;;;","names":["validatePropValue","slot","isNil","getTextContent","getColorCSSVariable","h","Host"],"sources":["../../packages/beeq/src/components/badge/bq-badge.types.ts","../../packages/beeq/src/components/badge/scss/bq-badge.scss?tag=bq-badge&encapsulation=shadow","../../packages/beeq/src/components/badge/bq-badge.tsx"],"sourcesContent":["export const BADGE_SIZE = ['small', 'medium'] as const;\nexport type TBadgeSize = (typeof BADGE_SIZE)[number];\n","/* -------------------------------------------------------------------------- /\n/ Badge styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-badge.variables';\n\n:host {\n @apply inline-block;\n}\n\n.bq-badge {\n @apply flex items-center justify-center bg-[color:--bq-badge--background-color] text-[color:--bq-badge--text-color];\n @apply rounded-[--bq-badge--border-radius] border-[length:--bq-badge--border-width] border-[color:--bq-badge--border-color];\n\n border-style: var(--bq-badge--border-style);\n box-shadow: var(--bq-badge--box-shadow);\n}\n\n.size {\n &--small {\n @apply bs-[--bq-badge--size-small] is-[--bq-badge--size-small];\n }\n\n &--medium {\n @apply bs-[--bq-badge--size-medium] is-[--bq-badge--size-medium];\n }\n}\n\n.digit {\n @apply min-bs-[--bq-badge--size-large] min-is-[--bq-badge--size-large];\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { BADGE_SIZE, TBadgeSize } from './bq-badge.types';\nimport { getColorCSSVariable, getTextContent, isNil, validatePropValue } from '../../shared/utils';\n\n/\n The Badge component is a visual indicator that can be added to various elements within a user interface.\n * It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n \n @example How to use it\n * ```html\n * <bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/194fd1-badge\n * @status stable\n \n @attr {string} background-color - Badge background color. The value should be a valid value of the palette color.\n * @attr {string} text-color - Badge number color. The value should be a valid value of the palette color.\n * @attr {\"small\" \| \"medium\" \| \"large\"} size - The size of the badge. Relevant if badge has no content.\n \n @slot - The default slot is used to add content to the badge. The content can be a number or a text.\n \n @part base - The component's internal wrapper that holds the count.\n * @part number - The component's internal wrapper that holds the slot.\n \n @cssprop --bq-badge--background-color - The badge background color\n * @cssprop --bq-badge--box-shadow - The badge box shadow\n * @cssprop --bq-badge--border-color - The badge border color\n * @cssprop --bq-badge--border-radius - The badge border radius\n * @cssprop --bq-badge--border-style - The badge border style\n * @cssprop --bq-badge--border-width - The badge border width\n * @cssprop --bq-badge--size-small - The badge small size\n * @cssprop --bq-badge--size-medium - The badge medium size\n * @cssprop --bq-badge--size-large - The badge large size\n * @cssprop --bq-badge--text-color - The badge text color\n /\n@Component({\n tag: 'bq-badge',\n styleUrl: './scss/bq-badge.scss',\n shadow: true,\n})\nexport class BqBadge {\n // Own Properties\n // ====================\n\n private spanElement?: HTMLSpanElement;\n\n private observer: MutationObserver = new MutationObserver((mutations) => {\n const [mutation] = mutations;\n this.contentLength = mutation.target.textContent.length;\n });\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el: HTMLBqBadgeElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private contentLength = 0;\n\n // Public Property API\n // ========================\n\n /* Badge background color. The value should be a valid value of the palette color /\n @Prop({ mutable: true, reflect: true }) backgroundColor? = 'ui--danger';\n\n /* Badge number color. The value should be a valid value of the palette color /\n @Prop({ mutable: true, reflect: true }) textColor? = 'text--inverse';\n\n /* The size of the badge. Relevant if badge has no content. */\n @Prop({ reflect: true, mutable: true }) size?: TBadgeSize = 'small';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n handleSizePropChange() {\n validatePropValue(BADGE_SIZE, 'small', this.el, 'size');\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.handleSizePropChange();\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\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 onSlotChange = () => {\n const slot = this.slot;\n\n if (isNil(slot)) return;\n\n this.contentLength = getTextContent(slot, { recurse: true }).length;\n const [node] = slot.assignedNodes({ flatten: true });\n\n if (isNil(node)) {\n this.observer.takeRecords();\n return;\n }\n\n this.observer.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n };\n\n private get slot(): HTMLSlotElement \| null {\n return this.spanElement?.querySelector('slot') ?? null;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const styles = {\n ...(this.backgroundColor && { '--bq-badge--background-color': getColorCSSVariable(this.backgroundColor) }),\n ...(this.textColor && { '--bq-badge--text-color': getColorCSSVariable(this.textColor) }),\n };\n\n return (\n <Host style={styles}>\n <div\n class={{\n 'bq-badge': true,\n [`size--${this.size}`]: this.contentLength === 0,\n digit: this.contentLength > 0,\n 'p-i-xs2': this.contentLength > 1,\n }}\n part=\"base\"\n >\n <span ref={(element) => (this.spanElement = element)} class=\"text-xs font-bold leading-small\" part=\"number\">\n <slot onSlotchange={this.onSlotChange}></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-badge.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAO,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACAtD,MAAM,UAAU,GAAG,w6pBAAw6pB,CAAC;AAC57pB,sBAAe,UAAU;;MCyCZ,OAAO;;;;;;IAIV,WAAW,CAAmB;IAE9B,QAAQ,GAAqB,IAAI,gBAAgB,CAAC,CAAC,SAAS;QAClE,MAAM,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC;KACzD,CAAC,CAAC;;;;;IAWc,aAAa,GAAG,CAAC,CAAC;;;;IAMK,eAAe,GAAI,YAAY,CAAC;;IAGhC,SAAS,GAAI,eAAe,CAAC;;IAG7B,IAAI,GAAgB,OAAO,CAAC;;;IAMpE,oBAAoB;QAClBA,uBAAiB,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;KACzD;;;;;;;IAUD,iBAAiB;QACf,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC;KAC7B;;;;;;;;;;;;;IAiBO,YAAY,GAAG;QACrB,MAAMC,MAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAIC,WAAK,CAACD,MAAI,CAAC;YAAE,OAAO;QAExB,IAAI,CAAC,aAAa,GAAGE,mBAAc,CAACF,MAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;QACpE,MAAM,CAAC,IAAI,CAAC,GAAGA,MAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAErD,IAAIC,WAAK,CAAC,IAAI,CAAC,EAAE;YACf,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;YAC5B,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1B,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ,CAAC;IAEF,IAAY,IAAI;QACd,OAAO,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;KACxD;;;;IAMD,MAAM;QACJ,MAAM,MAAM,GAAG;YACb,IAAI,IAAI,CAAC,eAAe,IAAI,EAAE,8BAA8B,EAAEE,gCAAmB,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;YAC1G,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,wBAAwB,EAAEA,gCAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;SACzF,CAAC;QAEF,QACEC,QAACC,UAAI,qDAAC,KAAK,EAAE,MAAM,IACjBD,kEACE,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,aAAa,KAAK,CAAC;gBAChD,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,CAAC;gBAC7B,SAAS,EAAE,IAAI,CAAC,aAAa,GAAG,CAAC;aAClC,EACD,IAAI,EAAC,MAAM,IAEXA,mEAAM,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,QAAQ,IACzGA,mEAAM,YAAY,EAAE,IAAI,CAAC,YAAY,GAAS,CACzC,CACH,CACD,EACP;KACH;;;;;;;;;","names":["validatePropValue","slot","isNil","getTextContent","getColorCSSVariable","h","Host"],"sources":["../../packages/beeq/src/components/badge/bq-badge.types.ts","../../packages/beeq/src/components/badge/scss/bq-badge.scss?tag=bq-badge&encapsulation=shadow","../../packages/beeq/src/components/badge/bq-badge.tsx"],"sourcesContent":["export const BADGE_SIZE = ['small', 'medium'] as const;\nexport type TBadgeSize = (typeof BADGE_SIZE)[number];\n","/* -------------------------------------------------------------------------- /\n/ Badge styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-badge.variables';\n\n:host {\n @apply inline-block;\n}\n\n.bq-badge {\n @apply flex items-center justify-center bg-[color:--bq-badge--background-color] text-[color:--bq-badge--text-color];\n @apply rounded-[--bq-badge--border-radius] border-[length:--bq-badge--border-width] border-[color:--bq-badge--border-color];\n\n border-style: var(--bq-badge--border-style);\n box-shadow: var(--bq-badge--box-shadow);\n}\n\n.size {\n &--small {\n @apply bs-[--bq-badge--size-small] is-[--bq-badge--size-small];\n }\n\n &--medium {\n @apply bs-[--bq-badge--size-medium] is-[--bq-badge--size-medium];\n }\n}\n\n.digit {\n @apply min-bs-[--bq-badge--size-large] min-is-[--bq-badge--size-large];\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { BADGE_SIZE, TBadgeSize } from './bq-badge.types';\nimport { getColorCSSVariable, getTextContent, isNil, validatePropValue } from '../../shared/utils';\n\n/\n The Badge component is a visual indicator that can be added to various elements within a user interface.\n * It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n \n @example How to use it\n * ```html\n * <bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/194fd1-badge\n * @status stable\n \n @attr {string} background-color - Badge background color. The value should be a valid value of the palette color.\n * @attr {string} text-color - Badge number color. The value should be a valid value of the palette color.\n * @attr {\"small\" \| \"medium\" \| \"large\"} size - The size of the badge. Relevant if badge has no content.\n \n @slot - The default slot is used to add content to the badge. The content can be a number or a text.\n \n @part base - The component's internal wrapper that holds the count.\n * @part number - The component's internal wrapper that holds the slot.\n \n @cssprop --bq-badge--background-color - The badge background color\n * @cssprop --bq-badge--box-shadow - The badge box shadow\n * @cssprop --bq-badge--border-color - The badge border color\n * @cssprop --bq-badge--border-radius - The badge border radius\n * @cssprop --bq-badge--border-style - The badge border style\n * @cssprop --bq-badge--border-width - The badge border width\n * @cssprop --bq-badge--size-small - The badge small size\n * @cssprop --bq-badge--size-medium - The badge medium size\n * @cssprop --bq-badge--size-large - The badge large size\n * @cssprop --bq-badge--text-color - The badge text color\n /\n@Component({\n tag: 'bq-badge',\n styleUrl: './scss/bq-badge.scss',\n shadow: true,\n})\nexport class BqBadge {\n // Own Properties\n // ====================\n\n private spanElement?: HTMLSpanElement;\n\n private observer: MutationObserver = new MutationObserver((mutations) => {\n const [mutation] = mutations;\n this.contentLength = mutation.target.textContent.length;\n });\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el: HTMLBqBadgeElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private contentLength = 0;\n\n // Public Property API\n // ========================\n\n /* Badge background color. The value should be a valid value of the palette color /\n @Prop({ mutable: true, reflect: true }) backgroundColor? = 'ui--danger';\n\n /* Badge number color. The value should be a valid value of the palette color /\n @Prop({ mutable: true, reflect: true }) textColor? = 'text--inverse';\n\n /* The size of the badge. Relevant if badge has no content. */\n @Prop({ reflect: true, mutable: true }) size?: TBadgeSize = 'small';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n handleSizePropChange() {\n validatePropValue(BADGE_SIZE, 'small', this.el, 'size');\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.handleSizePropChange();\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\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 onSlotChange = () => {\n const slot = this.slot;\n\n if (isNil(slot)) return;\n\n this.contentLength = getTextContent(slot, { recurse: true }).length;\n const [node] = slot.assignedNodes({ flatten: true });\n\n if (isNil(node)) {\n this.observer.takeRecords();\n return;\n }\n\n this.observer.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n };\n\n private get slot(): HTMLSlotElement \| null {\n return this.spanElement?.querySelector('slot') ?? null;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const styles = {\n ...(this.backgroundColor && { '--bq-badge--background-color': getColorCSSVariable(this.backgroundColor) }),\n ...(this.textColor && { '--bq-badge--text-color': getColorCSSVariable(this.textColor) }),\n };\n\n return (\n <Host style={styles}>\n <div\n class={{\n 'bq-badge': true,\n [`size--${this.size}`]: this.contentLength === 0,\n digit: this.contentLength > 0,\n 'p-i-xs2': this.contentLength > 1,\n }}\n part=\"base\"\n >\n <span ref={(element) => (this.spanElement = element)} class=\"text-xs font-bold leading-small\" part=\"number\">\n <slot onSlotchange={this.onSlotChange}></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/bq-breadcrumb-item.cjs.entry.js CHANGED Viewed

@@ -6,8 +6,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c4edfa07.js');
-const isDefined = require('./isDefined-e538d669.js');
+const index = require('./index-0c8d249a.js');
+const isDefined = require('./isDefined-5e8aae9d.js');
 require('./isString-f8847c11.js');
 const bqBreadcrumbItemCss = ".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))}.breadcrumb-item,.shadow-\\[shadow\\:--bq-breadcrumb-item--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.flex{display:flex}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.rounded-\\[--bq-breadcrumb-item--border-radius\\]{border-radius:var(--bq-breadcrumb-item--border-radius)}.border-\\[length\\:--bq-breadcrumb-item--border-width\\]{border-width:var(--bq-breadcrumb-item--border-width)}.border-\\[color\\:--bq-breadcrumb-item--border-color\\]{border-color:var(--bq-breadcrumb-item--border-color)}.bg-\\[--bq-breadcrumb-item--background\\]{background-color:var(--bq-breadcrumb-item--background)}.pe-\\[--bq-breadcrumb-item--padding-end-separator\\]{padding-inline-end:var(--bq-breadcrumb-item--padding-end-separator)}.pe-\\[--bq-breadcrumb-item--padding-end\\]{padding-inline-end:var(--bq-breadcrumb-item--padding-end)}.ps-\\[--bq-breadcrumb-item--padding-start-separator\\]{padding-inline-start:var(--bq-breadcrumb-item--padding-start-separator)}.ps-\\[--bq-breadcrumb-item--padding-start\\]{padding-inline-start:var(--bq-breadcrumb-item--padding-start)}.text-\\[length\\:--bq-breadcrumb-item--text-size-separator\\]{font-size:var(--bq-breadcrumb-item--text-size-separator)}.text-\\[length\\:--bq-breadcrumb-item--text-size\\]{font-size:var(--bq-breadcrumb-item--text-size)}.font-regular{font-weight:var(--bq-font-weight--regular)}.leading-\\[--bq-breadcrumb-item--line-height\\]{line-height:var(--bq-breadcrumb-item--line-height)}.text-\\[color\\:--bq-breadcrumb-item--text-color-current\\]{color:var(--bq-breadcrumb-item--text-color-current)}.text-\\[color\\:--bq-breadcrumb-item--text-color\\]{color:var(--bq-breadcrumb-item--text-color)}.shadow-\\[shadow\\:--bq-breadcrumb-item--box-shadow\\]{--tw-shadow:var(--bq-breadcrumb-item--box-shadow);--tw-shadow-colored:var(--bq-breadcrumb-item--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.p-b-\\[--bq-breadcrumb-item--paddingY\\]{padding-block:var(--bq-breadcrumb-item--paddingY)}@-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-breadcrumb-item--background:transparent;--bq-breadcrumb-item--box-shadow:none;--bq-breadcrumb-item--border-color:transparent;--bq-breadcrumb-item--border-style:none;--bq-breadcrumb-item--border-width:var(--bq-stroke-s);--bq-breadcrumb-item--border-radius:var(--bq-radius--s);--bq-breadcrumb-item--line-height:var(--bq-font-line-height--regular);--bq-breadcrumb-item--text-color:var(--bq-text--secondary);--bq-breadcrumb-item--text-color-current:var(--bq-text--brand);--bq-breadcrumb-item--text-size:var(--bq-font-size--s);--bq-breadcrumb-item--text-size-separator:var(--bq-font-size--xs);--bq-breadcrumb-item--padding-start:var(--bq-spacing-xs2);--bq-breadcrumb-item--padding-end:var(--bq-spacing-xs2);--bq-breadcrumb-item--paddingY:var(--bq-spacing-xs);--bq-breadcrumb-item--padding-start-separator:var(--bq-spacing-xs2);--bq-breadcrumb-item--padding-end-separator:var(--bq-spacing-xs2)}:host([aria-current=page]) .breadcrumb-item{color:var(--bq-breadcrumb-item--text-color-current)}.breadcrumb-item{--tw-shadow:var(--bq-breadcrumb-item--box-shadow);--tw-shadow-colored:var(--bq-breadcrumb-item--box-shadow);background-color:var(--bq-breadcrumb-item--background);border-color:var(--bq-breadcrumb-item--border-color);border-radius:var(--bq-breadcrumb-item--border-radius);border-style:var(--bq-avatar--border-style);border-width:var(--bq-breadcrumb-item--border-width);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--bq-breadcrumb-item--text-color);cursor:pointer;font-size:var(--bq-breadcrumb-item--text-size);font-weight:var(--bq-font-weight--regular);line-height:var(--bq-breadcrumb-item--line-height);padding-block:var(--bq-breadcrumb-item--paddingY);padding-inline-end:var(--bq-breadcrumb-item--padding-end);padding-inline-start:var(--bq-breadcrumb-item--padding-start);text-decoration-line:none;transition-duration:.3s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.breadcrumb-item: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)}.breadcrumb-item:hover{color:color-mix(in srgb,var(--bq-text--brand),var(--bq-hover) 20%)}.breadcrumb-item:active{outline:2px solid transparent;outline-offset:2px}.breadcrumb-separator{align-items:center;display:flex;font-size:var(--bq-breadcrumb-item--text-size-separator);padding-inline-end:var(--bq-breadcrumb-item--padding-end-separator);padding-inline-start:var(--bq-breadcrumb-item--padding-start-separator)}.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)}.hover\\:text-hover-brand:hover{color:color-mix(in srgb,var(--bq-text--brand),var(--bq-hover) 20%)}.static{position:static}.gap-xs2{gap:var(--bq-spacing-xs2)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}";
@@ -19,11 +19,19 @@ const BqBreadcrumbItem = class {
         this.bqBlur = index.createEvent(this, "bqBlur", 7);
         this.bqFocus = index.createEvent(this, "bqFocus", 7);
         this.bqClick = index.createEvent(this, "bqClick", 7);
-        this.href = undefined;
-        this.target = undefined;
-        this.rel = 'noreferrer noopener';
     }
     get el() { return index.getElement(this); }
+    // State() variables
+    // Inlined decorator, alphabetical order
+    // =======================================
+    // Public Property API
+    // ========================
+    /** If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered. */
+    href;
+    /** Where to display the link in the browser context. Relevant only if `href` is set. */
+    target;
+    /** Where to display the link in the browser context. Relevant only if `href` is set. */
+    rel = 'noreferrer noopener';
     // Prop lifecycle events
     // =======================
     // Events section

package/dist/cjs/bq-breadcrumb-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-breadcrumb-item.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,iswBAAiswB,CAAC;AAC9twB,+BAAe,mBAAmB;;MCsDrB,gBAAgB~~;;;;;;;;mBAuBY~~,qBAAqB~~;;;;;;;;;IAUnD~~,MAAM,CAA4C;;IAGlD,OAAO,CAA4C;;IAGnD,OAAO,CAA4C;;;;;;;;;;;;;;;;IAqBpD,MAAM,GAAG;QACf,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC3B,CAAC;IAEM,OAAO,GAAG;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5B,CAAC;IAEM,OAAO,GAAG;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5B,CAAC;;;;IAMF,MAAM;QACJ,MAAM,MAAM,GAAGA,mBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,OAAO,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;QAExC,QACEC,kEAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,IACxCA,QAAC,OAAO,qDACN,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpC,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,qBAAqB,GAAG,SAAS,EAC9D,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EACxC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,IAEXA,mEAAM,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,SAAS,IACpDA,oEAAa,CACR,CACC,EAEVA,mEAAM,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,WAAW,IACjDA,mEAAM,IAAI,EAAC,WAAW,GAAQ,CACzB,CACH,EACN;KACH;;;;;;","names":["isDefined","h"],"sources":["../../packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.scss?tag=bq-breadcrumb-item&encapsulation=shadow","../../packages/beeq/src/components/breadcrumb-item/bq-breadcrumb-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Breadcrumb item styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-breadcrumb-item.variables';\n\n:host([aria-current='page']) {\n .breadcrumb-item {\n @apply text-[color:--bq-breadcrumb-item--text-color-current];\n }\n}\n\n.breadcrumb-item {\n @apply border-[length:--bq-breadcrumb-item--border-width] border-[color:--bq-breadcrumb-item--border-color];\n @apply rounded-[--bq-breadcrumb-item--border-radius] bg-[--bq-breadcrumb-item--background] shadow-[shadow:--bq-breadcrumb-item--box-shadow];\n @apply pe-[--bq-breadcrumb-item--padding-end] ps-[--bq-breadcrumb-item--padding-start] p-b-[--bq-breadcrumb-item--paddingY];\n @apply text-[length:--bq-breadcrumb-item--text-size] font-regular leading-[--bq-breadcrumb-item--line-height] text-[color:--bq-breadcrumb-item--text-color];\n @apply focus-visible:focus hover:text-hover-brand active:outline-none;\n @apply transition-colors duration-300 ease-in-out;\n @apply cursor-pointer no-underline;\n\n border-style: var(--bq-avatar--border-style);\n}\n\n.breadcrumb-separator {\n @apply flex items-center text-[length:--bq-breadcrumb-item--text-size-separator];\n @apply pe-[--bq-breadcrumb-item--padding-end-separator] ps-[--bq-breadcrumb-item--padding-start-separator];\n}\n","import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nimport { isDefined } from '../../shared/utils';\n\n/\n The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n \n @example How to use it\n * ```html\n * <bq-breadcrumb-item label=\"Home page\">\n * <bq-icon name=\"house-line\" size=\"16\"></bq-icon>\n * Home\n * </bq-breadcrumb-item>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/61d6c0-breadcrumb\n * @status stable\n \n @attr {string} href - If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.\n * @attr {string} target - Where to display the link in the browser context. Relevant only if `href` is set.\n * @attr {string} rel - Where to display the link in the browser context. Relevant only if `href` is set.\n \n @event bqFocus - Handler to be called when item is focused\n * @event bqClick - Handler to be called when item is clicked\n * @event bqBlur - Handler to be called when item loses focus\n \n @slot - The default slot is used to add content to the breadcrumb item.\n \n @part base - The component wrapper container\n * @part content - The `span` tag that wraps the content item\n * @part item - The breadcrumb item wrapper (`button` or `a`)\n * @part separator - The `span` tag that wraps the separator element\n \n @cssprop --bq-breadcrumb-item--background - Background color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--box-shadow - Box shadow of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-color - Border color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-style - Border style of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-width - Border width of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-radius - Border radius of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--line-height - Line height of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color - Text color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color-current - Text color of the current breadcrumb item (active)\n * @cssprop --bq-breadcrumb-item--text-size - Text size of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-size-separator - Text size of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-start - Padding start of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-end - Padding end of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--paddingY - Padding top and bottom of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-start-separator - Padding start of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-end-separator - Padding end of the breadcrumb item separator\n /\n@Component({\n tag: 'bq-breadcrumb-item',\n styleUrl: './scss/bq-breadcrumb-item.scss',\n shadow: true,\n})\nexport class BqBreadcrumbItem {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqBreadcrumbItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered. /\n @Prop({ reflect: true }) href: string;\n\n /* Where to display the link in the browser context. Relevant only if `href` is set. /\n @Prop({ reflect: true }) target: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* Where to display the link in the browser context. Relevant only if `href` is set. /\n @Prop({ reflect: true }) rel: string = 'noreferrer noopener';\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 item loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n /* Handler to be called when item is focused /\n @Event() bqFocus: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n /* Handler to be called when item is clicked /\n @Event() bqClick: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\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 onBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private onFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private onClick = () => {\n this.bqClick.emit(this.el);\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\n return (\n <div class=\"flex items-center\" part=\"base\">\n <TagElem\n class=\"breadcrumb-item\"\n href={isLink ? this.href : undefined}\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n target={isLink ? this.target : undefined}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onClick={this.onClick}\n part=\"item\"\n >\n <span class=\"flex items-center gap-xs2\" part=\"content\">\n <slot></slot>\n </span>\n </TagElem>\n {/ @internal use only */}\n <span class=\"breadcrumb-separator\" part=\"separator\">\n <slot name=\"separator\"></slot>\n </span>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-breadcrumb-item.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,iswBAAiswB,CAAC;AAC9twB,+BAAe,mBAAmB;;MCsDrB,gBAAgB;;;;;;;;;;;;;;IAiBF,IAAI,CAAS;;IAGb,MAAM,CAA0C;;IAGhD,GAAG,GAAW,qBAAqB,CAAC;;;;;;;IAUpD,MAAM,CAA4C;;IAGlD,OAAO,CAA4C;;IAGnD,OAAO,CAA4C;;;;;;;;;;;;;;;;IAqBpD,MAAM,GAAG;QACf,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC3B,CAAC;IAEM,OAAO,GAAG;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5B,CAAC;IAEM,OAAO,GAAG;QAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5B,CAAC;;;;IAMF,MAAM;QACJ,MAAM,MAAM,GAAGA,mBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpC,MAAM,OAAO,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;QAExC,QACEC,kEAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,IACxCA,QAAC,OAAO,qDACN,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpC,GAAG,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,qBAAqB,GAAG,SAAS,EAC9D,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EACxC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,IAEXA,mEAAM,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,SAAS,IACpDA,oEAAa,CACR,CACC,EAEVA,mEAAM,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,WAAW,IACjDA,mEAAM,IAAI,EAAC,WAAW,GAAQ,CACzB,CACH,EACN;KACH;;;;;;","names":["isDefined","h"],"sources":["../../packages/beeq/src/components/breadcrumb-item/scss/bq-breadcrumb-item.scss?tag=bq-breadcrumb-item&encapsulation=shadow","../../packages/beeq/src/components/breadcrumb-item/bq-breadcrumb-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Breadcrumb item styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-breadcrumb-item.variables';\n\n:host([aria-current='page']) {\n .breadcrumb-item {\n @apply text-[color:--bq-breadcrumb-item--text-color-current];\n }\n}\n\n.breadcrumb-item {\n @apply border-[length:--bq-breadcrumb-item--border-width] border-[color:--bq-breadcrumb-item--border-color];\n @apply rounded-[--bq-breadcrumb-item--border-radius] bg-[--bq-breadcrumb-item--background] shadow-[shadow:--bq-breadcrumb-item--box-shadow];\n @apply pe-[--bq-breadcrumb-item--padding-end] ps-[--bq-breadcrumb-item--padding-start] p-b-[--bq-breadcrumb-item--paddingY];\n @apply text-[length:--bq-breadcrumb-item--text-size] font-regular leading-[--bq-breadcrumb-item--line-height] text-[color:--bq-breadcrumb-item--text-color];\n @apply focus-visible:focus hover:text-hover-brand active:outline-none;\n @apply transition-colors duration-300 ease-in-out;\n @apply cursor-pointer no-underline;\n\n border-style: var(--bq-avatar--border-style);\n}\n\n.breadcrumb-separator {\n @apply flex items-center text-[length:--bq-breadcrumb-item--text-size-separator];\n @apply pe-[--bq-breadcrumb-item--padding-end-separator] ps-[--bq-breadcrumb-item--padding-start-separator];\n}\n","import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nimport { isDefined } from '../../shared/utils';\n\n/\n The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n \n @example How to use it\n * ```html\n * <bq-breadcrumb-item label=\"Home page\">\n * <bq-icon name=\"house-line\" size=\"16\"></bq-icon>\n * Home\n * </bq-breadcrumb-item>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/61d6c0-breadcrumb\n * @status stable\n \n @attr {string} href - If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.\n * @attr {string} target - Where to display the link in the browser context. Relevant only if `href` is set.\n * @attr {string} rel - Where to display the link in the browser context. Relevant only if `href` is set.\n \n @event bqFocus - Handler to be called when item is focused\n * @event bqClick - Handler to be called when item is clicked\n * @event bqBlur - Handler to be called when item loses focus\n \n @slot - The default slot is used to add content to the breadcrumb item.\n \n @part base - The component wrapper container\n * @part content - The `span` tag that wraps the content item\n * @part item - The breadcrumb item wrapper (`button` or `a`)\n * @part separator - The `span` tag that wraps the separator element\n \n @cssprop --bq-breadcrumb-item--background - Background color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--box-shadow - Box shadow of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-color - Border color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-style - Border style of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-width - Border width of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-radius - Border radius of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--line-height - Line height of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color - Text color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color-current - Text color of the current breadcrumb item (active)\n * @cssprop --bq-breadcrumb-item--text-size - Text size of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-size-separator - Text size of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-start - Padding start of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-end - Padding end of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--paddingY - Padding top and bottom of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-start-separator - Padding start of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-end-separator - Padding end of the breadcrumb item separator\n /\n@Component({\n tag: 'bq-breadcrumb-item',\n styleUrl: './scss/bq-breadcrumb-item.scss',\n shadow: true,\n})\nexport class BqBreadcrumbItem {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqBreadcrumbItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered. /\n @Prop({ reflect: true }) href: string;\n\n /* Where to display the link in the browser context. Relevant only if `href` is set. /\n @Prop({ reflect: true }) target: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* Where to display the link in the browser context. Relevant only if `href` is set. /\n @Prop({ reflect: true }) rel: string = 'noreferrer noopener';\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 item loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n /* Handler to be called when item is focused /\n @Event() bqFocus: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n /* Handler to be called when item is clicked /\n @Event() bqClick: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\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 onBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private onFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private onClick = () => {\n this.bqClick.emit(this.el);\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\n return (\n <div class=\"flex items-center\" part=\"base\">\n <TagElem\n class=\"breadcrumb-item\"\n href={isLink ? this.href : undefined}\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n target={isLink ? this.target : undefined}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onClick={this.onClick}\n part=\"item\"\n >\n <span class=\"flex items-center gap-xs2\" part=\"content\">\n <slot></slot>\n </span>\n </TagElem>\n {/ @internal use only */}\n <span class=\"breadcrumb-separator\" part=\"separator\">\n <slot name=\"separator\"></slot>\n </span>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/bq-breadcrumb.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c4edfa07.js');
+const index = require('./index-0c8d249a.js');
 const bqBreadcrumbCss = "::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.block{display:block}@-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{display:block}.static{position:static}.flex{display:flex}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.is-3{inline-size:.75rem}.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}}";
 const BqBreadcrumbStyle0 = bqBreadcrumbCss;
@@ -14,13 +14,19 @@ const BqBreadcrumbStyle0 = bqBreadcrumbCss;
 const BqBreadcrumb = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.label = 'Breadcrumbs';
     }
     // Own Properties
     // ====================
     navElem;
     spanElem;
     get el() { return index.getElement(this); }
+    // State() variables
+    // Inlined decorator, alphabetical order
+    // =======================================
+    // Public Property API
+    // ========================
+    /** The `aria-label` attribute to describe the type of navigation */
+    label = 'Breadcrumbs';
     // Prop lifecycle events
     // =======================
     // Events section

package/dist/cjs/bq-breadcrumb.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-breadcrumb.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,m0lBAAm0lB,CAAC;AAC51lB,2BAAe,eAAe;;MC8BjB,YAAY~~;;;qBAoBkB~~,~~aAAa;;;;IAhB9C,~~OAAO,CAAc;IACrB,QAAQ,CAAc~~;;;;;;;;;;;;;;;;;;;;;;IA2CtB~~,gBAAgB,GAAG;QACzB,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;QAC7C,MAAM,SAAS,GAAG,eAAe,CAAC,MAAM,CAAC;QACzC,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAE9C,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YAClC,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,CAAC;YAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;YAE/D,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE;gBACjC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;aAC5C;YAED,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,EAAE,CAAC,CAAC;SAC7D,CAAC,CAAC;KACJ,CAAC;IAEM,gBAAgB,GAAG;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;QACpE,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;QAEzB,OAAO,KAAK,CAAC;KACd,CAAC;IAEF,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,QAAQ;aACjB,aAAa,CAAkB,wBAAwB,CAAC;aACxD,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAgB,CAAC;KAC1D;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,OAAO;aAChB,aAAa,CAAkB,MAAM,CAAC;aACtC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAkC,CAAC;KACzE;;;;IAMD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,mBAAmB,gBAAa,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,MAAM,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,IAAI,EAAC,YAAY,IAC5GA,mEAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACNA,mEAAM,MAAM,uBAAa,MAAM,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,EAAE,IAAI,EAAC,WAAW,IAC3FA,mEAAM,IAAI,EAAC,WAAW,IACpBA,mEAAM,KAAK,EAAC,uCAAuC,QAAS,CACvD,CACF,CACF,EACP;KACH;;;;;;","names":["h","Host"],"sources":["../../packages/beeq/src/components/breadcrumb/scss/bq-breadcrumb.scss?tag=bq-breadcrumb&encapsulation=shadow","../../packages/beeq/src/components/breadcrumb/bq-breadcrumb.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Breadcrumb styles /\n/ -------------------------------------------------------------------------- /\n\n:host {\n @apply block;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/\n The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n \n @example How to use it\n * ```html\n * <bq-breadcrumb label=\"Breadcrumb\">\n * <bq-breadcrumb-item>Home</bq-breadcrumb-item>\n * <bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n * <bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n * <bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n * </bq-breadcrumb>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/194fd1-breadcrumb\n * @status stable\n \n @attr {string} label - The `aria-label` attribute to describe the type of navigation\n \n @slot - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n * @slot separator - The slot to add a separator between breadcrumb items. Default separator is `/`.\n \n @part navigation - The `nav` tag that loads the breadcrumb items\n * @part separator - The container that wraps the separator element\n /\n@Component({\n tag: 'bq-breadcrumb',\n styleUrl: './scss/bq-breadcrumb.scss',\n shadow: true,\n})\nexport class BqBreadcrumb {\n // Own Properties\n // ====================\n\n private navElem: HTMLElement;\n private spanElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqBreadcrumbElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* The `aria-label` attribute to describe the type of navigation */\n @Prop({ reflect: true }) label: string = 'Breadcrumbs';\n\n // Prop lifecycle events\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 // 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 handleSlotChange = (): void => {\n const breadcrumbItems = this.breadcrumbItems;\n const itemCount = breadcrumbItems.length;\n const separatorElem = this.getSeparatorElem();\n\n breadcrumbItems.forEach((item, index) => {\n const isLastItem = index === itemCount - 1;\n const separatorSlot = item.querySelector('[slot=\"separator\"]');\n\n if (!separatorSlot && !isLastItem) {\n item.append(separatorElem.cloneNode(true));\n }\n\n item.setAttribute('aria-current', isLastItem ? 'page' : '');\n });\n };\n\n private getSeparatorElem = (): HTMLElement => {\n const clone = this.separatorFromSlot.cloneNode(true) as HTMLElement;\n clone.slot = 'separator';\n\n return clone;\n };\n\n private get separatorFromSlot() {\n return this.spanElem\n .querySelector<HTMLSlotElement>('slot[name=\"separator\"]')\n .assignedElements({ flatten: true })[0] as HTMLElement;\n }\n\n private get breadcrumbItems(): HTMLBqBreadcrumbItemElement[] {\n return this.navElem\n .querySelector<HTMLSlotElement>('slot')\n .assignedElements({ flatten: true }) as HTMLBqBreadcrumbItemElement[];\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host>\n <nav class=\"flex items-center\" aria-label={this.label} ref={(elem) => (this.navElem = elem)} part=\"navigation\">\n <slot onSlotchange={this.handleSlotChange}></slot>\n </nav>\n <span hidden aria-hidden=\"true\" ref={(element) => (this.spanElem = element)} part=\"separator\">\n <slot name=\"separator\">\n <span class=\"flex items-center justify-center is-3\">/</span>\n </slot>\n </span>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-breadcrumb.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,m0lBAAm0lB,CAAC;AAC51lB,2BAAe,eAAe;;MC8BjB,YAAY;;;;;;IAIf,OAAO,CAAc;IACrB,QAAQ,CAAc;;;;;;;;IAeL,KAAK,GAAW,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;IA4B/C,gBAAgB,GAAG;QACzB,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;QAC7C,MAAM,SAAS,GAAG,eAAe,CAAC,MAAM,CAAC;QACzC,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAE9C,eAAe,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK;YAClC,MAAM,UAAU,GAAG,KAAK,KAAK,SAAS,GAAG,CAAC,CAAC;YAC3C,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;YAE/D,IAAI,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE;gBACjC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;aAC5C;YAED,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,UAAU,GAAG,MAAM,GAAG,EAAE,CAAC,CAAC;SAC7D,CAAC,CAAC;KACJ,CAAC;IAEM,gBAAgB,GAAG;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAgB,CAAC;QACpE,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;QAEzB,OAAO,KAAK,CAAC;KACd,CAAC;IAEF,IAAY,iBAAiB;QAC3B,OAAO,IAAI,CAAC,QAAQ;aACjB,aAAa,CAAkB,wBAAwB,CAAC;aACxD,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAgB,CAAC;KAC1D;IAED,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,OAAO;aAChB,aAAa,CAAkB,MAAM,CAAC;aACtC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAkC,CAAC;KACzE;;;;IAMD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,mBAAmB,gBAAa,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,MAAM,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,IAAI,EAAC,YAAY,IAC5GA,mEAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACNA,mEAAM,MAAM,uBAAa,MAAM,EAAC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,EAAE,IAAI,EAAC,WAAW,IAC3FA,mEAAM,IAAI,EAAC,WAAW,IACpBA,mEAAM,KAAK,EAAC,uCAAuC,QAAS,CACvD,CACF,CACF,EACP;KACH;;;;;;","names":["h","Host"],"sources":["../../packages/beeq/src/components/breadcrumb/scss/bq-breadcrumb.scss?tag=bq-breadcrumb&encapsulation=shadow","../../packages/beeq/src/components/breadcrumb/bq-breadcrumb.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Breadcrumb styles /\n/ -------------------------------------------------------------------------- /\n\n:host {\n @apply block;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/\n The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n \n @example How to use it\n * ```html\n * <bq-breadcrumb label=\"Breadcrumb\">\n * <bq-breadcrumb-item>Home</bq-breadcrumb-item>\n * <bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n * <bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n * <bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n * </bq-breadcrumb>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/194fd1-breadcrumb\n * @status stable\n \n @attr {string} label - The `aria-label` attribute to describe the type of navigation\n \n @slot - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n * @slot separator - The slot to add a separator between breadcrumb items. Default separator is `/`.\n \n @part navigation - The `nav` tag that loads the breadcrumb items\n * @part separator - The container that wraps the separator element\n /\n@Component({\n tag: 'bq-breadcrumb',\n styleUrl: './scss/bq-breadcrumb.scss',\n shadow: true,\n})\nexport class BqBreadcrumb {\n // Own Properties\n // ====================\n\n private navElem: HTMLElement;\n private spanElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqBreadcrumbElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* The `aria-label` attribute to describe the type of navigation */\n @Prop({ reflect: true }) label: string = 'Breadcrumbs';\n\n // Prop lifecycle events\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 // 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 handleSlotChange = (): void => {\n const breadcrumbItems = this.breadcrumbItems;\n const itemCount = breadcrumbItems.length;\n const separatorElem = this.getSeparatorElem();\n\n breadcrumbItems.forEach((item, index) => {\n const isLastItem = index === itemCount - 1;\n const separatorSlot = item.querySelector('[slot=\"separator\"]');\n\n if (!separatorSlot && !isLastItem) {\n item.append(separatorElem.cloneNode(true));\n }\n\n item.setAttribute('aria-current', isLastItem ? 'page' : '');\n });\n };\n\n private getSeparatorElem = (): HTMLElement => {\n const clone = this.separatorFromSlot.cloneNode(true) as HTMLElement;\n clone.slot = 'separator';\n\n return clone;\n };\n\n private get separatorFromSlot() {\n return this.spanElem\n .querySelector<HTMLSlotElement>('slot[name=\"separator\"]')\n .assignedElements({ flatten: true })[0] as HTMLElement;\n }\n\n private get breadcrumbItems(): HTMLBqBreadcrumbItemElement[] {\n return this.navElem\n .querySelector<HTMLSlotElement>('slot')\n .assignedElements({ flatten: true }) as HTMLBqBreadcrumbItemElement[];\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host>\n <nav class=\"flex items-center\" aria-label={this.label} ref={(elem) => (this.navElem = elem)} part=\"navigation\">\n <slot onSlotchange={this.handleSlotChange}></slot>\n </nav>\n <span hidden aria-hidden=\"true\" ref={(element) => (this.spanElem = element)} part=\"separator\">\n <slot name=\"separator\">\n <span class=\"flex items-center justify-center is-3\">/</span>\n </slot>\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/bq-button_2.cjs.entry.js CHANGED Viewed

@@ -6,14 +6,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c4edfa07.js');
+const index = require('./index-0c8d249a.js');
 const isClient = require('./isClient-c22372aa.js');
 const isNil = require('./isNil-f93429a2.js');
-const isDefined = require('./isDefined-e538d669.js');
+const isDefined = require('./isDefined-5e8aae9d.js');
 const props = require('./props-2653e993.js');
 const slot = require('./slot-2fee189a.js');
 const isString = require('./isString-f8847c11.js');
-const assetsPath = require('./assetsPath-5e03c40e.js');
+const assetsPath = require('./assetsPath-32c4030b.js');
 const cssVariables = require('./cssVariables-55ad4942.js');
 const BUTTON_SIZE = ['small', 'medium', 'large'];
@@ -37,20 +37,6 @@ const BqButton = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        this.hasPrefix = false;
-        this.hasSuffix = false;
-        this.appearance = 'primary';
-        this.block = false;
-        this.border = 'm';
-        this.disabled = false;
-        this.download = undefined;
-        this.href = undefined;
-        this.justifyContent = 'center';
-        this.loading = false;
-        this.size = 'medium';
-        this.target = undefined;
-        this.type = 'button';
-        this.variant = 'standard';
     }
     // Own Properties
     // ====================
@@ -58,6 +44,43 @@ const BqButton = class {
     suffixElem;
     get el() { return index.getElement(this); }
     internals;
+    // State() variables
+    // Inlined decorator, alphabetical order
+    // =======================================
+    hasPrefix = false;
+    hasSuffix = false;
+    // Public Property API
+    // ========================
+    /** The appearance style to apply to the button */
+    appearance = 'primary';
+    /** If `true`, it will make the button fit to its parent width. */
+    block = false;
+    /** The corner radius of the button */
+    border = 'm';
+    /** If true, the button will be disabled (no interaction allowed) */
+    disabled = false;
+    /**
+     * Tells the browser to treat the linked URL as a download. Only used when `href` is set.
+     * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+     */
+    download;
+    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` */
+    href;
+    /** It determinate how the content should be aligned */
+    justifyContent = 'center';
+    /** If `true` it will display the button in a loading state */
+    loading = false;
+    /** The size of the button */
+    size = 'medium';
+    /**
+     * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)
+     * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target
+     */
+    target;
+    /** The default behavior of the button */
+    type = 'button';
+    /** The variant of button to apply on top of the appearance (applicable only to `appearance="primary"`) */
+    variant = 'standard';
     // Prop lifecycle events
     // =======================
     checkPropValues() {
@@ -281,14 +304,29 @@ const BqIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.svgLoaded = index.createEvent(this, "svgLoaded", 7);
-        this._svgContent = undefined;
-        this.label = undefined;
-        this.color = undefined;
-        this.name = undefined;
-        this.size = 24;
-        this.src = undefined;
-        this.weight = undefined;
     }
+    // Own Properties
+    // ====================
+    // Reference to host HTML element
+    // ===================================
+    // State() variables
+    // Inlined decorator, alphabetical order
+    // =======================================
+    _svgContent;
+    // Public Property API
+    // ========================
+    /** Label for the icon, used for accessibility */
+    label;
+    /** Set the stroke color of the SVG. The value should be a valid value of the palette color */
+    color;
+    /** Icon name to load. Please check all available icons [here](https://phosphoricons.com/) */
+    name;
+    /** Set the size of the SVG */
+    size = 24;
+    /** Set the source of the SVG. If the source is set, the name property will be ignored */
+    src;
+    /** @deprecated It set the icon weight/style */
+    weight = undefined;
     // Prop lifecycle events
     // =======================
     handlePropsChange() {