@breadstone/mosaik-elements-foundation 0.0.237 → 0.0.241

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbElement.d.ts

@@ -1,4 +1,5 @@
 import { CustomElement } from '../../Abstracts/CustomElement';
+import { BreadcrumbItemElement } from './BreadcrumbItemElement';
 import type { IBreadcrumbElementProps } from './IBreadcrumbElementProps';
 declare const BreadcrumbElement_base: (abstract new (...args: Array<any>) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor;
 /**
@@ -14,6 +15,9 @@ declare const BreadcrumbElement_base: (abstract new (...args: Array<any>) => imp
  * @category Navigation
  *
  * @slot  - The default slot.
+ * @slot item-${i} - The item-${i} slot.
+ *
+ * @csspart symbol - The symbol part.
  *
  * @cssprop {String} --breadcrumb-font-family - The font family CSS custom property.
  * @cssprop {String} --breadcrumb-font-letter-spacing - The font letter spacing CSS custom property.
@@ -38,6 +42,8 @@ declare const BreadcrumbElement_base: (abstract new (...args: Array<any>) => imp
  * @cssprop {String} --breadcrumb-transition-property - The transition property CSS custom property.
  * @cssprop {String} --breadcrumb-translate - The translate CSS custom property.
  *
+ * @dependency mosaik-icon - The Icon element.
+ *
  * @example
  * Basic breadcrumb navigation trail:
  * ```html
@@ -63,8 +69,8 @@ declare const BreadcrumbElement_base: (abstract new (...args: Array<any>) => imp
  * @public
  */
 export declare class BreadcrumbElement extends BreadcrumbElement_base implements IBreadcrumbElementProps {
-    private readonly _breadcrumbs;
     private _wrap;
+    private _items;
     /**
      * @public
      */
@@ -86,6 +92,22 @@ export declare class BreadcrumbElement extends BreadcrumbElement_base implements
      */
     get wrap(): boolean;
     set wrap(value: boolean);
+    /**
+     * Returns the breadcrumb items.
+     *
+     * @private
+     * @template
+     * @readonly
+     */
+    get items(): Array<BreadcrumbItemElement>;
+    /**
+     * Handles slot changes on the collector slot.
+     * Collects items and assigns them to named slots.
+     *
+     * @private
+     * @template
+     */
+    onSlotChange(event: Event): void;
 }
 /**
  * @public

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbElement.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAOzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,qBAYa,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAQlC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgC;IAC7D,OAAO,CAAC,KAAK,CAAU;IAMvB;;OAEG;;IAWH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,IAAI,IAAI,OAAO,CAEzB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,OAAO,EAK7B;CA0BJ;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,mBAAmB,EAAE,iBAAiB,CAAC;KAC1C;CACJ"}
+{"version":3,"file":"BreadcrumbElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAOzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,qBAaa,iBACT,SAAQ,sBACR,YAAW,uBAAuB;IAIlC,OAAO,CAAC,KAAK,CAAU;IACvB,OAAO,CAAC,MAAM,CAA+B;IAM7C;;OAEG;;IAYH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,IAAI,IAAI,OAAO,CAEzB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,OAAO,EAK7B;IAED;;;;;;OAMG;IACH,IAAW,KAAK,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAE/C;IAMD;;;;;;OAMG;IACI,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;CAyB1C;AAED;;GAEG;AACH,yBAAiB,iBAAiB,CAAC;IAC/B,KAAY,KAAK,GAAG,uBAAuB,CAAC;CAC/C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,mBAAmB,EAAE,iBAAiB,CAAC;KAC1C;CACJ"}

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbElement.js

@@ -11,8 +11,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { Themeable } from '../../../../Controls/Behaviors/Themeable';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
-import { QueryAssignedElements } from '../../../Decorators/Decorators';
 import { CustomElement } from '../../Abstracts/CustomElement';
+import { IconElement } from '../../Media/Icon/IconElement';
 import { breadcrumbElementTemplate } from './BreadcrumbElementTemplate';
 import { BreadcrumbItemElement } from './BreadcrumbItemElement';
 import { breadcrumbElementCosmopolitanStyle } from './Themes/BreadcrumbElement.Cosmopolitan';
@@ -32,6 +32,9 @@ import { breadcrumbElementMemphisStyle } from './Themes/BreadcrumbElement.Memphi
  * @category Navigation
  *
  * @slot  - The default slot.
+ * @slot item-${i} - The item-${i} slot.
+ *
+ * @csspart symbol - The symbol part.
  *
  * @cssprop {String} --breadcrumb-font-family - The font family CSS custom property.
  * @cssprop {String} --breadcrumb-font-letter-spacing - The font letter spacing CSS custom property.
@@ -56,6 +59,8 @@ import { breadcrumbElementMemphisStyle } from './Themes/BreadcrumbElement.Memphi
  * @cssprop {String} --breadcrumb-transition-property - The transition property CSS custom property.
  * @cssprop {String} --breadcrumb-translate - The translate CSS custom property.
  *
+ * @dependency mosaik-icon - The Icon element.
+ *
  * @example
  * Basic breadcrumb navigation trail:
  * ```html
@@ -82,8 +87,8 @@ import { breadcrumbElementMemphisStyle } from './Themes/BreadcrumbElement.Memphi
  */
 let BreadcrumbElement = class BreadcrumbElement extends Themeable(CustomElement) {
     // #region Fields
-    _breadcrumbs;
     _wrap;
+    _items;
     // #endregion
     // #region Ctor
     /**
@@ -92,6 +97,7 @@ let BreadcrumbElement = class BreadcrumbElement extends Themeable(CustomElement)
     constructor() {
         super();
         this._wrap = false;
+        this._items = [];
     }
     // #endregion
     // #region Properties
@@ -121,32 +127,42 @@ let BreadcrumbElement = class BreadcrumbElement extends Themeable(CustomElement)
             this.requestUpdate('wrap');
         }
     }
+    /**
+     * Returns the breadcrumb items.
+     *
+     * @private
+     * @template
+     * @readonly
+     */
+    get items() {
+        return this._items;
+    }
     // #endregion
     // #region Methods
     /**
-     * @internal
+     * Handles slot changes on the collector slot.
+     * Collects items and assigns them to named slots.
+     *
+     * @private
      * @template
      */
     onSlotChange(event) {
-        const assignedElements = event.target.assignedElements();
-        assignedElements.forEach((x, i) => {
-            if (x.tagName.toLowerCase().includes(BreadcrumbItemElement.is)) {
-                x.requestUpdate();
-                x.classList.add('breadcrumb-item');
-                x.classList.toggle('first', i === 0);
-                x.classList.toggle('inner', i > 0 && i < assignedElements.length - 1);
-                x.classList.toggle('last', i === assignedElements.length - 1);
-            }
+        const slot = event.target;
+        const assignedElements = slot.assignedElements();
+        if (assignedElements.length === 0) {
+            return;
+        }
+        this._items = assignedElements.filter((child) => child.tagName.toLowerCase() === BreadcrumbItemElement.is);
+        this._items.forEach((item, i) => {
+            item.classList.add('breadcrumb-item');
+            item.classList.toggle('first', i === 0);
+            item.classList.toggle('inner', i > 0 && i < this._items.length - 1);
+            item.classList.toggle('last', i === this._items.length - 1);
+            item.setAttribute('slot', `item-${i}`);
         });
+        this.requestUpdate();
     }
 };
-__decorate([
-    QueryAssignedElements({
-        slot: 'actions',
-        selector: BreadcrumbItemElement.is
-    }),
-    __metadata("design:type", Array)
-], BreadcrumbElement.prototype, "_breadcrumbs", void 0);
 __decorate([
     Attribute({
         type: Boolean,
@@ -165,7 +181,8 @@ BreadcrumbElement = __decorate([
             cosmopolitan: breadcrumbElementCosmopolitanStyle
         },
         imports: [
-            BreadcrumbElement
+            BreadcrumbItemElement,
+            IconElement
         ]
     }),
     __metadata("design:paramtypes", [])

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BreadcrumbElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI7D;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,iBAAiB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAI3F"}
+{"version":3,"file":"BreadcrumbElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI7D;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,iBAAiB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAa3F"}

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbElementTemplate.js

@@ -1,5 +1,8 @@
 // #region Imports
 import { html } from '../../../../Dom/Html';
+import { Icons } from '../../../../Resources/Icons';
+import { when } from '../../../Directives/Directives';
+import { Size } from '../../../Types/Size';
 // #endregion
 /**
  * The template of the `BreadcrumbElement`.
@@ -8,7 +11,16 @@ import { html } from '../../../../Dom/Html';
  */
 export function breadcrumbElementTemplate(e) {
     return html `
-        <slot slotchange="${(x) => e.onSlotChange(x)}"></slot>
+        <slot style="display:none" @slotchange="${(x) => e.onSlotChange(x)}"></slot>
+        ${e.items.map((_, i) => html `
+            ${when(i > 0, () => html `
+            <mosaik-icon part="symbol"
+                         .data="${Icons.chevronRight}"
+                         .size="${Size.Small}"
+                         .inline="${true}"></mosaik-icon>
+            `)}
+            <slot name="item-${i}"></slot>
+        `)}
     `;
 }
 //# sourceMappingURL=BreadcrumbElementTemplate.js.map

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AAGjE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAA8B,CAAI;IACvE,OAAO,IAAI,CAAA;4BACa,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;KACtD,CAAC;AACN,CAAC"}
+{"version":3,"file":"BreadcrumbElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAG3C,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAA8B,CAAI;IACvE,OAAO,IAAI,CAAA;kDACmC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;UACvE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;cACtB,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;kCAEF,KAAK,CAAC,YAAY;kCAClB,IAAI,CAAC,KAAK;oCACR,IAAI;aAC3B,CAAC;+BACiB,CAAC;SACvB,CAAC;KACL,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElement.d.ts

@@ -1,19 +1,24 @@
+import { HyperlinkUnderline } from '../../../Types/HyperlinkUnderline';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import type { IBreadcrumbItemElementProps } from './IBreadcrumbItemElementProps';
-declare const BreadcrumbItemElement_base: (abstract new (...args: Array<any>) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor;
+declare const BreadcrumbItemElement_base: (abstract new (...args: Array<any>) => import("../../../../Controls/Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Labelable").ILabelableProps) & typeof CustomElement & import("../../../../Controls/Behaviors/Themeable").IThemeableCtor;
 /**
  * Breadcrumb Item - A component representing an individual link or label within a breadcrumb navigation trail.
  *
  * @description
  * The `Breadcrumb Item` component is used as a single element in a breadcrumb navigation trail. It can act as a link to navigate
- * to a previous section of the hierarchy or as a label for the current page. Breadcrumb items are commonly used in conjunction
+ * to a previous section of the hierarchy or as a label for the current page. When an `href` is provided, the item renders as
+ * an anchor link. Otherwise, it renders its slotted content directly. Breadcrumb items are commonly used in conjunction
  * with the `Breadcrumb` component to create a complete navigation trail.
  *
  * @name Breadcrumb Item
  * @element mosaik-breadcrumb-item
  * @category Navigation
  *
- * @slot - The content of the breadcrumb item, typically text or an icon.
+ * @slot label - The label content when using the anchor behavior.
+ *
+ * @csspart link - The anchor link element when href is provided.
+ * @csspart label - The text label area of the anchor link.
  *
  * @cssprop {String} --breadcrumb-item-border-style - The item border style CSS custom property.
  * @cssprop {String} --breadcrumb-item-font-family - The item font family CSS custom property.
@@ -23,6 +28,7 @@ declare const BreadcrumbItemElement_base: (abstract new (...args: Array<any>) =>
  * @cssprop {String} --breadcrumb-item-font-text-decoration - The item font text decoration CSS custom property.
  * @cssprop {String} --breadcrumb-item-font-text-transform - The item font text transform CSS custom property.
  * @cssprop {String} --breadcrumb-item-font-weight - The item font weight CSS custom property.
+ * @cssprop {String} --breadcrumb-item-foreground-color - The item foreground color CSS custom property.
  * @cssprop {String} --breadcrumb-item-gap - The item gap CSS custom property.
  * @cssprop {String} --breadcrumb-item-padding-bottom - The item padding bottom CSS custom property.
  * @cssprop {String} --breadcrumb-item-padding-left - The item padding left CSS custom property.
@@ -39,23 +45,37 @@ declare const BreadcrumbItemElement_base: (abstract new (...args: Array<any>) =>
  * @cssprop {String} --breadcrumb-item-transition-property - The item transition property CSS custom property.
  * @cssprop {String} --breadcrumb-item-translate - The item translate CSS custom property.
  *
- * @dependency mosaik-icon - The Icon element.
+ * @dependency mosaik-text - The Text element.
  *
  * @example
- * Used inside a breadcrumb navigation trail:
+ * Breadcrumb trail with slotted content:
  * ```html
  * <mosaik-breadcrumb>
  *   <mosaik-breadcrumb-item>Home</mosaik-breadcrumb-item>
  *   <mosaik-breadcrumb-item>Category</mosaik-breadcrumb-item>
- *   <mosaik-breadcrumb-item>Subcategory</mosaik-breadcrumb-item>
  *   <mosaik-breadcrumb-item is-active>Current Page</mosaik-breadcrumb-item>
  * </mosaik-breadcrumb>
  * ```
  *
+ * @example
+ * Breadcrumb trail with anchor links for navigation:
+ * ```html
+ * <mosaik-breadcrumb>
+ *   <mosaik-breadcrumb-item label="Home" href="/home"></mosaik-breadcrumb-item>
+ *   <mosaik-breadcrumb-item label="Products" href="/products"></mosaik-breadcrumb-item>
+ *   <mosaik-breadcrumb-item label="Details" is-active></mosaik-breadcrumb-item>
+ * </mosaik-breadcrumb>
+ * ```
+ *
  * @public
  */
 export declare class BreadcrumbItemElement extends BreadcrumbItemElement_base implements IBreadcrumbItemElementProps {
     private _isActive;
+    private _href;
+    private _download;
+    private _rel;
+    private _target;
+    private _underline;
     /**
      * @public
      */
@@ -78,9 +98,46 @@ export declare class BreadcrumbItemElement extends BreadcrumbItemElement_base im
     get isActive(): boolean;
     set isActive(value: boolean);
     /**
+     * Gets or sets the `href` property.
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     *
+     * @public
+     */
+    get href(): string;
+    set href(value: string);
+    /**
+     * Gets or sets the `download` property.
+     * Instructs browsers to download the URL instead of navigating to it.
+     *
+     * @public
+     */
+    get download(): string;
+    set download(value: string);
+    /**
+     * Gets or sets the `rel` property.
+     * Specifies the relationship of the target object to the link object.
+     *
+     * @public
+     */
+    get rel(): string;
+    set rel(value: string);
+    /**
+     * Gets or sets the `target` property.
+     * Specifies where to display the linked URL.
+     *
+     * @public
+     */
+    get target(): string;
+    set target(value: string);
+    /**
+     * Gets or sets the `underline` property.
+     * Determines when the underline is displayed on the link.
+     *
      * @public
+     * @attr underline
      */
-    firstItem(): boolean;
+    get underline(): HyperlinkUnderline;
+    set underline(value: HyperlinkUnderline);
 }
 /**
  * @public

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAG9D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;;AAOjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBAYa,qBACT,SAAQ,0BACR,YAAW,2BAA2B;IAItC,OAAO,CAAC,SAAS,CAAU;IAM3B;;OAEG;;IAWH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IACD,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAMD;;OAEG;IACI,SAAS,IAAI,OAAO;CAO9B;AAED;;GAEG;AACH,yBAAiB,qBAAqB,CAAC;IACnC,KAAY,KAAK,GAAG,2BAA2B,CAAC;CACnD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,wBAAwB,EAAE,qBAAqB,CAAC;KACnD;CACJ"}
+{"version":3,"file":"BreadcrumbItemElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElement.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;;AAOjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,qBAaa,qBACT,SAAQ,0BACR,YAAW,2BAA2B;IAItC,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAqB;IAMvC;;OAEG;;IAgBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IACD,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IACD,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;;OAKG;IACH,IACW,QAAQ,IAAI,MAAM,CAE5B;IACD,IAAW,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKhC;IAED;;;;;OAKG;IACH,IACW,GAAG,IAAI,MAAM,CAEvB;IACD,IAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAK3B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;;OAMG;IACH,IACW,SAAS,IAAI,kBAAkB,CAEzC;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,kBAAkB,EAK7C;CAQJ;AAED;;GAEG;AACH,yBAAiB,qBAAqB,CAAC;IACnC,KAAY,KAAK,GAAG,2BAA2B,CAAC;CACnD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,wBAAwB,EAAE,qBAAqB,CAAC;KACnD;CACJ"}

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElement.js

@@ -9,10 +9,16 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { Themeable } from '../../../../Controls/Behaviors/Themeable';
+import { Disableable } from '../../../Behaviors/Disableable';
+import { Labelable } from '../../../Behaviors/Labelable';
+import { Variantable } from '../../../Behaviors/Variantable';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { HyperlinkUnderline } from '../../../Types/HyperlinkUnderline';
 import { CustomElement } from '../../Abstracts/CustomElement';
 import { IconElement } from '../../Media/Icon/IconElement';
+import { TextElement } from '../../Primitives/Text/TextElement';
 import { breadcrumbItemElementTemplate } from './BreadcrumbItemElementTemplate';
 import { breadcrumbItemElementCosmopolitanStyle } from './Themes/BreadcrumbItemElement.Cosmopolitan';
 import { breadcrumbItemElementJoyStyle } from './Themes/BreadcrumbItemElement.Joy';
@@ -23,14 +29,18 @@ import { breadcrumbItemElementMemphisStyle } from './Themes/BreadcrumbItemElemen
  *
  * @description
  * The `Breadcrumb Item` component is used as a single element in a breadcrumb navigation trail. It can act as a link to navigate
- * to a previous section of the hierarchy or as a label for the current page. Breadcrumb items are commonly used in conjunction
+ * to a previous section of the hierarchy or as a label for the current page. When an `href` is provided, the item renders as
+ * an anchor link. Otherwise, it renders its slotted content directly. Breadcrumb items are commonly used in conjunction
  * with the `Breadcrumb` component to create a complete navigation trail.
  *
  * @name Breadcrumb Item
  * @element mosaik-breadcrumb-item
  * @category Navigation
  *
- * @slot - The content of the breadcrumb item, typically text or an icon.
+ * @slot label - The label content when using the anchor behavior.
+ *
+ * @csspart link - The anchor link element when href is provided.
+ * @csspart label - The text label area of the anchor link.
  *
  * @cssprop {String} --breadcrumb-item-border-style - The item border style CSS custom property.
  * @cssprop {String} --breadcrumb-item-font-family - The item font family CSS custom property.
@@ -40,6 +50,7 @@ import { breadcrumbItemElementMemphisStyle } from './Themes/BreadcrumbItemElemen
  * @cssprop {String} --breadcrumb-item-font-text-decoration - The item font text decoration CSS custom property.
  * @cssprop {String} --breadcrumb-item-font-text-transform - The item font text transform CSS custom property.
  * @cssprop {String} --breadcrumb-item-font-weight - The item font weight CSS custom property.
+ * @cssprop {String} --breadcrumb-item-foreground-color - The item foreground color CSS custom property.
  * @cssprop {String} --breadcrumb-item-gap - The item gap CSS custom property.
  * @cssprop {String} --breadcrumb-item-padding-bottom - The item padding bottom CSS custom property.
  * @cssprop {String} --breadcrumb-item-padding-left - The item padding left CSS custom property.
@@ -56,24 +67,38 @@ import { breadcrumbItemElementMemphisStyle } from './Themes/BreadcrumbItemElemen
  * @cssprop {String} --breadcrumb-item-transition-property - The item transition property CSS custom property.
  * @cssprop {String} --breadcrumb-item-translate - The item translate CSS custom property.
  *
- * @dependency mosaik-icon - The Icon element.
+ * @dependency mosaik-text - The Text element.
  *
  * @example
- * Used inside a breadcrumb navigation trail:
+ * Breadcrumb trail with slotted content:
  * ```html
  * <mosaik-breadcrumb>
  *   <mosaik-breadcrumb-item>Home</mosaik-breadcrumb-item>
  *   <mosaik-breadcrumb-item>Category</mosaik-breadcrumb-item>
- *   <mosaik-breadcrumb-item>Subcategory</mosaik-breadcrumb-item>
  *   <mosaik-breadcrumb-item is-active>Current Page</mosaik-breadcrumb-item>
  * </mosaik-breadcrumb>
  * ```
  *
+ * @example
+ * Breadcrumb trail with anchor links for navigation:
+ * ```html
+ * <mosaik-breadcrumb>
+ *   <mosaik-breadcrumb-item label="Home" href="/home"></mosaik-breadcrumb-item>
+ *   <mosaik-breadcrumb-item label="Products" href="/products"></mosaik-breadcrumb-item>
+ *   <mosaik-breadcrumb-item label="Details" is-active></mosaik-breadcrumb-item>
+ * </mosaik-breadcrumb>
+ * ```
+ *
  * @public
  */
-let BreadcrumbItemElement = class BreadcrumbItemElement extends Themeable(CustomElement) {
+let BreadcrumbItemElement = class BreadcrumbItemElement extends Themeable(Variantable(Disableable(Labelable(CustomElement)))) {
     // #region Fields
     _isActive;
+    _href;
+    _download;
+    _rel;
+    _target;
+    _underline;
     // #endregion
     // #region Ctor
     /**
@@ -82,6 +107,11 @@ let BreadcrumbItemElement = class BreadcrumbItemElement extends Themeable(Custom
     constructor() {
         super();
         this._isActive = false;
+        this._href = '';
+        this._download = '';
+        this._rel = '';
+        this._target = '';
+        this._underline = HyperlinkUnderline.Hover;
     }
     // #endregion
     // #region Properties
@@ -111,14 +141,81 @@ let BreadcrumbItemElement = class BreadcrumbItemElement extends Themeable(Custom
             this.requestUpdate('isActive');
         }
     }
-    // #endregion
-    // #region Methods
     /**
+     * Gets or sets the `href` property.
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     *
+     * @public
+     */
+    get href() {
+        return this._href;
+    }
+    set href(value) {
+        if (this._href !== value) {
+            this._href = value;
+            this.requestUpdate('href');
+        }
+    }
+    /**
+     * Gets or sets the `download` property.
+     * Instructs browsers to download the URL instead of navigating to it.
+     *
+     * @public
+     */
+    get download() {
+        return this._download;
+    }
+    set download(value) {
+        if (this._download !== value) {
+            this._download = value;
+            this.requestUpdate('download');
+        }
+    }
+    /**
+     * Gets or sets the `rel` property.
+     * Specifies the relationship of the target object to the link object.
+     *
+     * @public
+     */
+    get rel() {
+        return this._rel;
+    }
+    set rel(value) {
+        if (this._rel !== value) {
+            this._rel = value;
+            this.requestUpdate('rel');
+        }
+    }
+    /**
+     * Gets or sets the `target` property.
+     * Specifies where to display the linked URL.
+     *
+     * @public
+     */
+    get target() {
+        return this._target;
+    }
+    set target(value) {
+        if (this._target !== value) {
+            this._target = value;
+            this.requestUpdate('target');
+        }
+    }
+    /**
+     * Gets or sets the `underline` property.
+     * Determines when the underline is displayed on the link.
+     *
      * @public
+     * @attr underline
      */
-    firstItem() {
-        const children = Array.prototype.slice.call(this.parentElement?.children);
-        return children.indexOf(this) === 0;
+    get underline() {
+        return this._underline;
+    }
+    set underline(value) {
+        if (this._underline !== value) {
+            this._underline = value;
+            this.requestUpdate('underline');
+        }
     }
 };
 __decorate([
@@ -129,6 +226,31 @@ __decorate([
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], BreadcrumbItemElement.prototype, "isActive", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], BreadcrumbItemElement.prototype, "href", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], BreadcrumbItemElement.prototype, "download", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], BreadcrumbItemElement.prototype, "rel", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], BreadcrumbItemElement.prototype, "target", null);
+__decorate([
+    Attribute({ type: HyperlinkUnderline }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], BreadcrumbItemElement.prototype, "underline", null);
 BreadcrumbItemElement = __decorate([
     Component({
         selector: 'mosaik-breadcrumb-item',
@@ -139,7 +261,8 @@ BreadcrumbItemElement = __decorate([
             cosmopolitan: breadcrumbItemElementCosmopolitanStyle
         },
         imports: [
-            IconElement
+            IconElement,
+            TextElement
         ]
     }),
     __metadata("design:paramtypes", [])

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAEhF,OAAO,EAAE,sCAAsC,EAAE,MAAM,6CAA6C,CAAC;AACrG,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAE3F,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAaI,IAAM,qBAAqB,GAA3B,MAAM,qBACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,iBAAiB;IAET,SAAS,CAAU;IAE3B,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,wBAAwB,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACH,IAIW,QAAQ;QACf,OAAO,IAAI,CAAC,SAAS,CAAC;IAC1B,CAAC;IACD,IAAW,QAAQ,CAAC,KAAc;QAC9B,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;IACL,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;OAEG;IACI,SAAS;QACZ,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAC1E,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;CAIJ,CAAA;AA5BG;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;qDAGD;AAjDQ,qBAAqB;IAZjC,SAAS,CAAC;QACP,QAAQ,EAAE,wBAAwB;QAClC,QAAQ,EAAE,6BAA6B;QACvC,MAAM,EAAE;YACJ,GAAG,EAAE,6BAA6B;YAClC,OAAO,EAAE,iCAAiC;YAC1C,YAAY,EAAE,sCAAsC;SACvD;QACD,OAAO,EAAE;YACL,WAAW;SACd;KACJ,CAAC;;GACW,qBAAqB,CAuEjC"}
+{"version":3,"file":"BreadcrumbItemElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrE;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,CAAC,SAAS,qBAAqB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CASnG"}
+{"version":3,"file":"BreadcrumbItemElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrE;;;;GAIG;AACH,wBAAgB,6BAA6B,CAAC,CAAC,SAAS,qBAAqB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAoBnG"}

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElementTemplate.js

@@ -1,8 +1,7 @@
 // #region Imports
 import { html } from '../../../../Dom/Html';
-import { Icons } from '../../../../Resources/Icons';
 import { when } from '../../../Directives/Directives';
-import { Size } from '../../../Types/Size';
+import { ifNonEmpty } from '../../../Directives/IfNonEmpty';
 // #endregion
 /**
  * The template of the `BreadcrumbItemElement`.
@@ -11,12 +10,23 @@ import { Size } from '../../../Types/Size';
  */
 export function breadcrumbItemElementTemplate(e) {
     return html `
-        ${when(!e.firstItem(), () => html `
-        <mosaik-icon .data="${Icons.chevronRight}"
-                     .size="${Size.Small}"
-                     .inline="${true}"></mosaik-icon>
-        `)}
-        <slot></slot>
+        <a part="link"
+           href="${ifNonEmpty(e.href)}"
+           rel="${ifNonEmpty(e.rel)}"
+           target="${ifNonEmpty(e.target)}"
+           download="${ifNonEmpty(e.download)}"
+           class="${e.underline}">
+            <slot name="label">
+                ${when(e.label, () => html `
+                <mosaik-text part="label"
+                             .lang="${e.lang}"
+                             .dir="${e.dir}"
+                             .text="${e.label}"
+                             .variant="${e.variant}"
+                             ?disabled="${e.disabled}"></mosaik-text>
+                `)}
+            </slot>
+        </a>
     `;
 }
 //# sourceMappingURL=BreadcrumbItemElementTemplate.js.map

package/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAG3C,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,6BAA6B,CAAkC,CAAI;IAC/E,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;8BACX,KAAK,CAAC,YAAY;8BAClB,IAAI,CAAC,KAAK;gCACR,IAAI;SAC3B,CAAC;;KAEL,CAAC;AACN,CAAC"}
+{"version":3,"file":"BreadcrumbItemElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/BreadcrumbItemElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAG5D,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,6BAA6B,CAAkC,CAAI;IAC/E,OAAO,IAAI,CAAA;;mBAEI,UAAU,CAAC,CAAC,CAAC,IAAI,CAAW;kBAC7B,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;qBACd,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC;uBAClB,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAW;oBACnC,CAAC,CAAC,SAAS;;kBAEb,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sCAEJ,CAAC,CAAC,IAAI;qCACP,CAAC,CAAC,GAAG;sCACJ,CAAC,CAAC,KAAK;yCACJ,CAAC,CAAC,OAAO;0CACR,CAAC,CAAC,QAAQ;iBACnC,CAAC;;;KAGb,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/Breadcrumb/IBreadcrumbItemElementProps.d.ts

@@ -1,9 +1,15 @@
+import type { IDisableableProps } from '../../../Behaviors/Disableable';
+import type { ILabelableProps } from '../../../Behaviors/Labelable';
+import type { IVariantableProps } from '../../../Behaviors/Variantable';
+import type { HyperlinkUnderline } from '../../../Types/HyperlinkUnderline';
+import type { IButtonLinkElementProps } from '../../Buttons/Button/IButtonLinkElementProps';
 /**
  * Represents the `IBreadcrumbItemElementProps` interface.
  *
  * @public
  */
-export interface IBreadcrumbItemElementProps {
+export interface IBreadcrumbItemElementProps extends IButtonLinkElementProps, IDisableableProps, IVariantableProps, ILabelableProps {
     isActive: boolean;
+    underline: HyperlinkUnderline;
 }
 //# sourceMappingURL=IBreadcrumbItemElementProps.d.ts.map

package/Controls/Components/Grouping/Breadcrumb/IBreadcrumbItemElementProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IBreadcrumbItemElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/IBreadcrumbItemElementProps.ts"],"names":[],"mappings":"AACA;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAExC,QAAQ,EAAE,OAAO,CAAC;CAErB"}
+{"version":3,"file":"IBreadcrumbItemElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Grouping/Breadcrumb/IBreadcrumbItemElementProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAE5F;;;;GAIG;AACH,MAAM,WAAW,2BACb,SAAQ,uBAAuB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,eAAe;IAItF,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,kBAAkB,CAAC;CAIjC"}

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sCAAsC,IAAI,SAAS,CAwElE"}
+{"version":3,"file":"BreadcrumbItemElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sCAAsC,IAAI,SAAS,CAoGlE"}

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Cosmopolitan.js

@@ -20,6 +20,7 @@ export function breadcrumbItemElementCosmopolitanStyle() {
   --breadcrumb-item-font-text-decoration: unset;
   --breadcrumb-item-font-text-transform: unset;
   --breadcrumb-item-font-weight: unset;
+  --breadcrumb-item-foreground-color: var(--cosmopolitan-scheme-foreground);
   --breadcrumb-item-gap: unset;
   --breadcrumb-item-padding-bottom: unset;
   --breadcrumb-item-padding-left: unset;
@@ -76,9 +77,36 @@ export function breadcrumbItemElementCosmopolitanStyle() {
   font-weight: inherit;
 }
 
-:host([is-active]) {
-  font-weight: bold;
-  text-decoration: underline;
+:host [part="link"] {
+  color: var(--breadcrumb-item-foreground-color);
+  cursor: pointer;
+  align-items: center;
+  text-decoration-line: underline;
+  display: flex;
+}
+
+:host [part="link"]:link.always, :host [part="link"]:visited.always, :host [part="link"]:hover.always, :host [part="link"]:active.always {
+  text-decoration-line: underline;
+}
+
+:host [part="link"]:link.hover, :host [part="link"]:link.never, :host [part="link"]:visited.hover, :host [part="link"]:visited.never, :host [part="link"]:hover.hover, :host [part="link"]:hover.never, :host [part="link"]:active.hover, :host [part="link"]:active.never {
+  text-decoration-line: none;
+}
+
+:host [part="link"].hover:hover {
+  text-decoration-line: underline;
+}
+
+:host([is-active]:not([disabled]:not([disabled="false"]))) [part="link"] [part="label"], :host([is-active]:not([disabled]:not([disabled="false"]))) [part="link"] ::slotted(mosaik-text) {
+  font-weight: 600;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
     `;

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,sCAAsC;IAClD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsET,CAAC;AACN,CAAC"}
+{"version":3,"file":"BreadcrumbItemElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,sCAAsC;IAClD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGT,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,6BAA6B,IAAI,SAAS,CAyEzD"}
+{"version":3,"file":"BreadcrumbItemElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,6BAA6B,IAAI,SAAS,CAyIzD"}

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Joy.js

@@ -21,6 +21,7 @@ export function breadcrumbItemElementJoyStyle() {
   --breadcrumb-item-font-text-decoration: unset;
   --breadcrumb-item-font-text-transform: unset;
   --breadcrumb-item-font-weight: unset;
+  --breadcrumb-item-foreground-color: var(--joy-scheme-foreground);
   --breadcrumb-item-gap: unset;
   --breadcrumb-item-padding-bottom: unset;
   --breadcrumb-item-padding-left: unset;
@@ -77,9 +78,72 @@ export function breadcrumbItemElementJoyStyle() {
   font-weight: inherit;
 }
 
-:host([is-active]) {
-  font-weight: bold;
-  text-decoration: underline;
+:host [part="link"] {
+  color: var(--breadcrumb-item-foreground-color);
+  cursor: pointer;
+  align-items: center;
+  text-decoration-line: underline;
+  display: flex;
+}
+
+:host [part="link"]:link.always, :host [part="link"]:visited.always, :host [part="link"]:hover.always, :host [part="link"]:active.always {
+  text-decoration-line: underline;
+}
+
+:host [part="link"]:link.hover, :host [part="link"]:link.never, :host [part="link"]:visited.hover, :host [part="link"]:visited.never, :host [part="link"]:hover.hover, :host [part="link"]:hover.never, :host [part="link"]:active.hover, :host [part="link"]:active.never {
+  text-decoration-line: none;
+}
+
+:host [part="link"].hover:hover {
+  text-decoration-line: underline;
+}
+
+:host([is-active]:not([disabled]:not([disabled="false"]))) [part="link"] [part="label"], :host([is-active]:not([disabled]:not([disabled="false"]))) [part="link"] ::slotted(mosaik-text) {
+  font-weight: 600;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-primary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-danger-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-warning-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-success-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-info-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"]))) [part="link"] {
+  text-decoration-color: var(--joy-color-neutral-500);
 }
 
     `;

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,6BAA6B;IACzC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuET,CAAC;AACN,CAAC"}
+{"version":3,"file":"BreadcrumbItemElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,6BAA6B;IACzC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuIT,CAAC;AACN,CAAC"}

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CAwE7D"}
+{"version":3,"file":"BreadcrumbItemElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CAoG7D"}

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Memphis.js

@@ -20,6 +20,7 @@ export function breadcrumbItemElementMemphisStyle() {
   --breadcrumb-item-font-text-decoration: unset;
   --breadcrumb-item-font-text-transform: unset;
   --breadcrumb-item-font-weight: unset;
+  --breadcrumb-item-foreground-color: var(--memphis-scheme-foreground);
   --breadcrumb-item-gap: unset;
   --breadcrumb-item-padding-bottom: unset;
   --breadcrumb-item-padding-left: unset;
@@ -76,9 +77,36 @@ export function breadcrumbItemElementMemphisStyle() {
   font-weight: inherit;
 }
 
-:host([is-active]) {
-  font-weight: bold;
-  text-decoration: underline;
+:host [part="link"] {
+  color: var(--breadcrumb-item-foreground-color);
+  cursor: pointer;
+  align-items: center;
+  text-decoration-line: underline;
+  display: flex;
+}
+
+:host [part="link"]:link.always, :host [part="link"]:visited.always, :host [part="link"]:hover.always, :host [part="link"]:active.always {
+  text-decoration-line: underline;
+}
+
+:host [part="link"]:link.hover, :host [part="link"]:link.never, :host [part="link"]:visited.hover, :host [part="link"]:visited.never, :host [part="link"]:hover.hover, :host [part="link"]:hover.never, :host [part="link"]:active.hover, :host [part="link"]:active.never {
+  text-decoration-line: none;
+}
+
+:host [part="link"].hover:hover {
+  text-decoration-line: underline;
+}
+
+:host([is-active]:not([disabled]:not([disabled="false"]))) [part="link"] [part="label"], :host([is-active]:not([disabled]:not([disabled="false"]))) [part="link"] ::slotted(mosaik-text) {
+  font-weight: 600;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  cursor: default;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
     `;

package/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItemElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsET,CAAC;AACN,CAAC"}
+{"version":3,"file":"BreadcrumbItemElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Grouping/Breadcrumb/Themes/BreadcrumbItemElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGT,CAAC;AACN,CAAC"}

package/Routing/PathToRegexp.d.ts

@@ -91,7 +91,7 @@ export interface Options {
      */
     encode?: (value: string) => string;
 }
-export declare function modifierToString(modifier: Modifier): "" | "*" | "+" | "?";
+export declare function modifierToString(modifier: Modifier): "" | "*" | "?" | "+";
 /**
  * Expose a function for taking tokens and returning a RegExp.
  */

package/custom-elements.json

@@ -21672,20 +21672,6 @@
                 "module": "./../src/Controls/Components/Abstracts/CustomElement.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "onSlotChange",
-              "privacy": "public",
-              "type": "(event: Event): void",
-              "parameters": [
-                {
-                  "name": "event"
-                }
-              ],
-              "return": {
-                "type": "void"
-              }
-            },
             {
               "kind": "method",
               "name": "adoptStyle",
@@ -21842,6 +21828,10 @@
               "description": "The default slot.",
               "name": ""
             },
+            {
+              "description": "The item-${i} slot.",
+              "name": "item-${i}"
+            },
             {
               "description": "Custom styles injection slot for shadow DOM styling escape hatch",
               "name": "style",
@@ -21994,6 +21984,12 @@
               "description": "The translate CSS custom property.",
               "type": "String"
             }
+          ],
+          "cssParts": [
+            {
+              "name": "symbol",
+              "description": "The symbol part."
+            }
           ]
         }
       ]
@@ -22019,6 +22015,18 @@
             {
               "name": "Themeable",
               "module": "./../src/Controls/Behaviors/Themeable.ts"
+            },
+            {
+              "name": "Variantable",
+              "module": "./../src/Controls/Behaviors/Variantable.ts"
+            },
+            {
+              "name": "Disableable",
+              "module": "./../src/Controls/Behaviors/Disableable.ts"
+            },
+            {
+              "name": "Labelable",
+              "module": "./../src/Controls/Behaviors/Labelable.ts"
             }
           ],
           "description": "Breadcrumb Item - A component representing an individual link or label within a breadcrumb navigation trail.",
@@ -22035,6 +22043,61 @@
                 "module": "./../src/Controls/Components/Grouping/Breadcrumb/IBreadcrumbItemElementProps.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "underline",
+              "privacy": "public",
+              "description": "Gets or sets the `underline` property.\nDetermines when the underline is displayed on the link.",
+              "type": "HyperlinkUnderline",
+              "inheritedFrom": {
+                "name": "IBreadcrumbItemElementProps",
+                "module": "./../src/Controls/Components/Grouping/Breadcrumb/IBreadcrumbItemElementProps.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "download",
+              "privacy": "public",
+              "description": "Gets or sets the `download` property.\nInstructs browsers to download the URL instead of navigating to it.",
+              "type": "string",
+              "inheritedFrom": {
+                "name": "IButtonLinkElementProps",
+                "module": "./../src/Controls/Components/Buttons/Button/IButtonLinkElementProps.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "privacy": "public",
+              "description": "Gets or sets the `href` property.\nContains a URL or a URL fragment that the hyperlink points to.",
+              "type": "string",
+              "inheritedFrom": {
+                "name": "IButtonLinkElementProps",
+                "module": "./../src/Controls/Components/Buttons/Button/IButtonLinkElementProps.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "privacy": "public",
+              "description": "Gets or sets the `rel` property.\nSpecifies the relationship of the target object to the link object.",
+              "type": "string",
+              "inheritedFrom": {
+                "name": "IButtonLinkElementProps",
+                "module": "./../src/Controls/Components/Buttons/Button/IButtonLinkElementProps.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "privacy": "public",
+              "description": "Gets or sets the `target` property.\nSpecifies where to display the linked URL.",
+              "type": "string",
+              "inheritedFrom": {
+                "name": "IButtonLinkElementProps",
+                "module": "./../src/Controls/Components/Buttons/Button/IButtonLinkElementProps.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "themeName",
@@ -22045,6 +22108,39 @@
                 "module": "./../src/Controls/Behaviors/Themeable.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "privacy": "public",
+              "description": "Determines the visual appearance (color) of the element.\nThe default value is `default`, which means the element will use the default variant.",
+              "type": "Variant",
+              "inheritedFrom": {
+                "name": "Variantable",
+                "module": "./../src/Controls/Behaviors/Variantable.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "description": "The disabled state of the element.\nThe default value is `false`, which means the element is not disabled.",
+              "type": "boolean",
+              "inheritedFrom": {
+                "name": "Disableable",
+                "module": "./../src/Controls/Behaviors/Disableable.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "privacy": "public",
+              "description": "Gets or sets the `label` property.\nThe default value is an empty string, which means no label is displayed.",
+              "type": "string",
+              "inheritedFrom": {
+                "name": "Labelable",
+                "module": "./../src/Controls/Behaviors/Labelable.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "dir",
@@ -22100,16 +22196,6 @@
                 "module": "./../src/Controls/Components/Abstracts/CustomElement.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "firstItem",
-              "privacy": "public",
-              "type": "(): boolean",
-              "parameters": [],
-              "return": {
-                "type": "boolean"
-              }
-            },
             {
               "kind": "method",
               "name": "adoptStyle",
@@ -22263,8 +22349,8 @@
           ],
           "slots": [
             {
-              "description": "The content of the breadcrumb item, typically text or an icon.",
-              "name": ""
+              "description": "The label content when using the anchor behavior.",
+              "name": "label"
             },
             {
               "description": "Custom styles injection slot for shadow DOM styling escape hatch",
@@ -22286,6 +22372,36 @@
                 "module": "./../src/Controls/Components/Grouping/Breadcrumb/IBreadcrumbItemElementProps.ts"
               }
             },
+            {
+              "name": "underline",
+              "fieldName": "underline",
+              "description": "Gets or sets the `underline` property.\nDetermines when the underline is displayed on the link.",
+              "type": "HyperlinkUnderline",
+              "inheritedFrom": {
+                "name": "IBreadcrumbItemElementProps",
+                "module": "./../src/Controls/Components/Grouping/Breadcrumb/IBreadcrumbItemElementProps.ts"
+              }
+            },
+            {
+              "name": "variant",
+              "fieldName": "variant",
+              "description": "Determines the visual appearance (color) of the element.\nThe default value is `default`, which means the element will use the default variant.",
+              "type": "Variant",
+              "inheritedFrom": {
+                "name": "Variantable",
+                "module": "./../src/Controls/Behaviors/Variantable.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled",
+              "description": "The disabled state of the element.\nThe default value is `false`, which means the element is not disabled.",
+              "type": "boolean",
+              "inheritedFrom": {
+                "name": "Disableable",
+                "module": "./../src/Controls/Behaviors/Disableable.ts"
+              }
+            },
             {
               "name": "dir",
               "fieldName": "dir",
@@ -22348,6 +22464,11 @@
               "description": "The item font weight CSS custom property.",
               "type": "String"
             },
+            {
+              "name": "--breadcrumb-item-foreground-color",
+              "description": "The item foreground color CSS custom property.",
+              "type": "String"
+            },
             {
               "name": "--breadcrumb-item-gap",
               "description": "The item gap CSS custom property.",
@@ -22423,6 +22544,16 @@
               "description": "The item translate CSS custom property.",
               "type": "String"
             }
+          ],
+          "cssParts": [
+            {
+              "name": "link",
+              "description": "The anchor link element when href is provided."
+            },
+            {
+              "name": "label",
+              "description": "The text label area of the anchor link."
+            }
           ]
         }
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-foundation",
-    "version": "0.0.237",
+    "version": "0.0.241",
     "description": "Mosaik elements components package.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -14,8 +14,8 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "^0.0.237",
-        "@breadstone/mosaik-themes": "^0.0.237",
+        "@breadstone/mosaik-elements": "^0.0.241",
+        "@breadstone/mosaik-themes": "^0.0.241",
         "@floating-ui/dom": "^1.7.6",
         "@lit-labs/virtualizer": "^2.1.1",
         "@lit/context": "^1.1.6",