@synergy-design-system/components 1.24.1 → 1.26.0

package/dist/chunks/chunk.UUFPSNOM.js

@@ -0,0 +1,114 @@
+import {
+  breadcrumb_item_styles_default
+} from "./chunk.KLDQHER5.js";
+import {
+  breadcrumb_item_custom_styles_default
+} from "./chunk.NGIGPLN2.js";
+import {
+  HasSlotController
+} from "./chunk.66WXVGAW.js";
+import {
+  watch
+} from "./chunk.AVTU2BGE.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.QHHUWWKO.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var SynBreadcrumbItem = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "prefix", "suffix");
+    this.renderType = "button";
+    this.rel = "noreferrer noopener";
+  }
+  setRenderType() {
+    const hasDropdown = this.defaultSlot.assignedElements({ flatten: true }).filter((i) => i.tagName.toLowerCase() === "syn-dropdown").length > 0;
+    this.renderType = this.href ? "link" : hasDropdown ? "drop-down" : "button";
+  }
+  hrefChanged() {
+    this.setRenderType();
+  }
+  handleSlotChange() {
+    this.setRenderType();
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "breadcrumb-item": true,
+      "breadcrumb-item--has-prefix": this.hasSlotController.test("prefix"),
+      "breadcrumb-item--has-suffix": this.hasSlotController.test("suffix")
+    })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${this.renderType === "link" ? html`
+              <a
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--link"
+                href="${this.href}"
+                target="${ifDefined(this.target ? this.target : void 0)}"
+                rel=${ifDefined(this.target ? this.rel : void 0)}
+              >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </a>
+            ` : ""}
+          ${this.renderType === "button" ? html`
+              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </button>
+            ` : ""}
+
+          ${this.renderType === "drop-down" ? html`
+                <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
+                  <slot @slotchange=${this.handleSlotChange}></slot>
+                </div>
+              ` : ""}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+SynBreadcrumbItem.styles = [component_styles_default, breadcrumb_item_styles_default, breadcrumb_item_custom_styles_default];
+__decorateClass([
+  query("slot:not([name])")
+], SynBreadcrumbItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], SynBreadcrumbItem.prototype, "renderType", 2);
+__decorateClass([
+  property()
+], SynBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  property()
+], SynBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  property()
+], SynBreadcrumbItem.prototype, "rel", 2);
+__decorateClass([
+  watch("href", { waitUntilFirstUpdate: true })
+], SynBreadcrumbItem.prototype, "hrefChanged", 1);
+
+export {
+  SynBreadcrumbItem
+};
+//# sourceMappingURL=chunk.UUFPSNOM.js.map

package/dist/chunks/chunk.UUFPSNOM.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb-item/breadcrumb-item.component.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './breadcrumb-item.styles.js';\nimport customStyles from './breadcrumb-item.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n * @documentation https://synergy.style/components/breadcrumb-item\n * @status stable\n * @since 2.0\n *\n * @slot - The breadcrumb item's label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If\n * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The breadcrumb item's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart separator - The container that wraps the separator.\n */\nexport default class SynBreadcrumbItem extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @state() private renderType: 'button' | 'link' | 'drop-down' = 'button';\n\n  /**\n   * Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered\n   * internally. When unset, a button will be rendered instead.\n   */\n  @property() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @property() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The `rel` attribute to use on the link. Only used when `href` is set. */\n  @property() rel = 'noreferrer noopener';\n\n  private setRenderType() {\n    const hasDropdown =\n      this.defaultSlot.assignedElements({ flatten: true }).filter(i => i.tagName.toLowerCase() === 'syn-dropdown')\n        .length > 0;\n\n    this.renderType = this.href ? 'link' : hasDropdown ? 'drop-down' : 'button';\n  }\n\n  @watch('href', { waitUntilFirstUpdate: true })\n  hrefChanged() {\n    this.setRenderType();\n  }\n\n  handleSlotChange() {\n    this.setRenderType();\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'breadcrumb-item': true,\n          'breadcrumb-item--has-prefix': this.hasSlotController.test('prefix'),\n          'breadcrumb-item--has-suffix': this.hasSlotController.test('suffix')\n        })}\n      >\n        <span part=\"prefix\" class=\"breadcrumb-item__prefix\">\n          <slot name=\"prefix\"></slot>\n        </span>\n\n        ${this.renderType === 'link'\n          ? html`\n              <a\n                part=\"label\"\n                class=\"breadcrumb-item__label breadcrumb-item__label--link\"\n                href=\"${this.href!}\"\n                target=\"${ifDefined(this.target ? this.target : undefined)}\"\n                rel=${ifDefined(this.target ? this.rel : undefined)}\n              >\n                <slot @slotchange=${this.handleSlotChange}></slot>\n              </a>\n            `\n          : ''}\n          ${this.renderType === 'button' ? html`\n              <button part=\"label\" type=\"button\" class=\"breadcrumb-item__label breadcrumb-item__label--button\">\n                <slot @slotchange=${this.handleSlotChange}></slot>\n              </button>\n            ` : ''}\n\n          ${this.renderType === 'drop-down'\n            ? html`\n                <div part=\"label\" class=\"breadcrumb-item__label breadcrumb-item__label--drop-down\">\n                  <slot @slotchange=${this.handleSlotChange}></slot>\n                </div>\n              `\n            : ''}\n\n        <span part=\"suffix\" class=\"breadcrumb-item__suffix\">\n          <slot name=\"suffix\"></slot>\n        </span>\n\n        <span part=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\">\n          <slot name=\"separator\"></slot>\n        </span>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,OAAO,aAAa;AA0BvC,IAAqB,oBAArB,cAA+C,eAAe;AAAA,EAA9D;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,UAAU,QAAQ;AAI1E,SAAQ,aAA8C;AAYnD,eAAM;AAAA;AAAA,EAEV,gBAAgB;AACtB,UAAM,cACJ,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,OAAO,OAAK,EAAE,QAAQ,YAAY,MAAM,cAAc,EACxG,SAAS;AAEd,SAAK,aAAa,KAAK,OAAO,SAAS,cAAc,cAAc;AAAA,EACrE;AAAA,EAGA,cAAc;AACZ,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,mBAAmB;AACjB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,mBAAmB;AAAA,MACnB,+BAA+B,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MACnE,+BAA+B,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IACrE,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMA,KAAK,eAAe,SAClB;AAAA;AAAA;AAAA;AAAA,wBAIY,KAAK,IAAK;AAAA,0BACR,UAAU,KAAK,SAAS,KAAK,SAAS,MAAS,CAAC;AAAA,sBACpD,UAAU,KAAK,SAAS,KAAK,MAAM,MAAS,CAAC;AAAA;AAAA,oCAE/B,KAAK,gBAAgB;AAAA;AAAA,gBAG7C,EAAE;AAAA,YACF,KAAK,eAAe,WAAW;AAAA;AAAA,oCAEP,KAAK,gBAAgB;AAAA;AAAA,gBAEzC,EAAE;AAAA;AAAA,YAEN,KAAK,eAAe,cAClB;AAAA;AAAA,sCAEwB,KAAK,gBAAgB;AAAA;AAAA,kBAG7C,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWd;AACF;AAzFqB,kBACZ,SAAyB,CAAC,0BAAiB,gCAAQ,qCAAY;AAI3C;AAAA,EAA1B,MAAM,kBAAkB;AAAA,GALN,kBAKQ;AAEV;AAAA,EAAhB,MAAM;AAAA,GAPY,kBAOF;AAML;AAAA,EAAX,SAAS;AAAA,GAbS,kBAaP;AAGA;AAAA,EAAX,SAAS;AAAA,GAhBS,kBAgBP;AAGA;AAAA,EAAX,SAAS;AAAA,GAnBS,kBAmBP;AAWZ;AAAA,EADC,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC;AAAA,GA7B1B,kBA8BnB;",
+  "names": []
+}

package/dist/chunks/{chunk.Q3M3GBO6.js → chunk.UVZKGUK2.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.RMXAXSXJ.js";
+} from "./chunk.QHHUWWKO.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -128,4 +128,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.Q3M3GBO6.js.map
+//# sourceMappingURL=chunk.UVZKGUK2.js.map

package/dist/chunks/{chunk.7CHLWYJZ.js → chunk.VDQFMFIV.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.PZZC3XAE.js";
+} from "./chunk.57NVT3UG.js";
 
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.7CHLWYJZ.js.map
+//# sourceMappingURL=chunk.VDQFMFIV.js.map

package/dist/chunks/chunk.VJXYRUKL.js

@@ -0,0 +1,92 @@
+import {
+  breadcrumb_styles_default
+} from "./chunk.Z6T7VV4R.js";
+import {
+  SynIcon
+} from "./chunk.QDJMXGZK.js";
+import {
+  LocalizeController
+} from "./chunk.GEHO4WRP.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.QHHUWWKO.js";
+import {
+  breadcrumb_custom_styles_default
+} from "./chunk.32CYREEV.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/breadcrumb/breadcrumb.component.ts
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var SynBreadcrumb = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.separatorDir = this.localize.dir();
+    this.label = "";
+  }
+  // Generates a clone of the separator element to use for each breadcrumb item
+  getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
+    const clone = separator.cloneNode(true);
+    [clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
+    clone.setAttribute("data-default", "");
+    clone.slot = "separator";
+    return clone;
+  }
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      (item) => item.tagName.toLowerCase() === "syn-breadcrumb-item"
+    );
+    items.forEach((item, index) => {
+      const separator = item.querySelector('[slot="separator"]');
+      if (separator === null) {
+        item.append(this.getSeparator());
+      } else if (separator.hasAttribute("data-default")) {
+        separator.replaceWith(this.getSeparator());
+      } else {
+      }
+      if (index === items.length - 1) {
+        item.setAttribute("aria-current", "page");
+      } else {
+        item.removeAttribute("aria-current");
+      }
+    });
+  }
+  render() {
+    if (this.separatorDir !== this.localize.dir()) {
+      this.separatorDir = this.localize.dir();
+      this.updateComplete.then(() => this.handleSlotChange());
+    }
+    return html`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <span hidden aria-hidden="true">
+        <slot name="separator">
+          <syn-icon name="chevron-down" library="system" class=${this.localize.dir()}></syn-icon>
+        </slot>
+      </span>
+    `;
+  }
+};
+SynBreadcrumb.styles = [component_styles_default, breadcrumb_styles_default, breadcrumb_custom_styles_default];
+SynBreadcrumb.dependencies = { "syn-icon": SynIcon };
+__decorateClass([
+  query("slot")
+], SynBreadcrumb.prototype, "defaultSlot", 2);
+__decorateClass([
+  query('slot[name="separator"]')
+], SynBreadcrumb.prototype, "separatorSlot", 2);
+__decorateClass([
+  property()
+], SynBreadcrumb.prototype, "label", 2);
+
+export {
+  SynBreadcrumb
+};
+//# sourceMappingURL=chunk.VJXYRUKL.js.map

package/dist/chunks/chunk.VJXYRUKL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb/breadcrumb.component.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './breadcrumb.styles.js';\nimport customStyles from './breadcrumb.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type SynBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.js';\n\n/**\n * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n * @documentation https://synergy.style/components/breadcrumb\n * @status stable\n * @since 2.0\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.\n *\n * @dependency syn-icon\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynBreadcrumb extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private readonly localize = new LocalizeController(this);\n  private separatorDir = this.localize.dir();\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n  @query('slot[name=\"separator\"]') separatorSlot: HTMLSlotElement;\n\n  /**\n   * The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\n   * screen readers and other assistive devices to provide more context for users.\n   */\n  @property() label = '';\n\n  // Generates a clone of the separator element to use for each breadcrumb item\n  private getSeparator() {\n    const separator = this.separatorSlot.assignedElements({ flatten: true })[0] as HTMLElement;\n\n    // Clone it, remove ids, and slot it\n    const clone = separator.cloneNode(true) as HTMLElement;\n    [clone, ...clone.querySelectorAll('[id]')].forEach(el => el.removeAttribute('id'));\n    clone.setAttribute('data-default', '');\n    clone.slot = 'separator';\n\n    return clone;\n  }\n\n  private handleSlotChange() {\n    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n      item => item.tagName.toLowerCase() === 'syn-breadcrumb-item'\n    ) as SynBreadcrumbItem[];\n\n    items.forEach((item, index) => {\n      // Append separators to each item if they don't already have one\n      const separator = item.querySelector('[slot=\"separator\"]');\n      if (separator === null) {\n        // No separator exists, add one\n        item.append(this.getSeparator());\n      } else if (separator.hasAttribute('data-default')) {\n        // A default separator exists, replace it\n        separator.replaceWith(this.getSeparator());\n      } else {\n        // The user provided a custom separator, leave it alone\n      }\n\n      // The last breadcrumb item is the \"current page\"\n      if (index === items.length - 1) {\n        item.setAttribute('aria-current', 'page');\n      } else {\n        item.removeAttribute('aria-current');\n      }\n    });\n  }\n\n  render() {\n    // We clone the separator and inject them into breadcrumb items, so we need to regenerate the default ones when\n    // directionality changes. We do this by storing the current separator direction, waiting for render, then calling\n    // the function that regenerates them.\n    if (this.separatorDir !== this.localize.dir()) {\n      this.separatorDir = this.localize.dir();\n      this.updateComplete.then(() => this.handleSlotChange());\n    }\n\n    return html`\n      <nav part=\"base\" class=\"breadcrumb\" aria-label=${this.label}>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </nav>\n\n      <span hidden aria-hidden=\"true\">\n        <slot name=\"separator\">\n          <syn-icon name=\"chevron-down\" library=\"system\" class=${this.localize.dir()}></syn-icon>\n        </slot>\n      </span>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAMA,SAAS,YAAY;AAErB,SAAS,UAAU,aAAa;AAsBhC,IAAqB,gBAArB,cAA2C,eAAe;AAAA,EAA1D;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AACvD,SAAQ,eAAe,KAAK,SAAS,IAAI;AAS7B,iBAAQ;AAAA;AAAA;AAAA,EAGZ,eAAe;AACrB,UAAM,YAAY,KAAK,cAAc,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,CAAC;AAG1E,UAAM,QAAQ,UAAU,UAAU,IAAI;AACtC,KAAC,OAAO,GAAG,MAAM,iBAAiB,MAAM,CAAC,EAAE,QAAQ,QAAM,GAAG,gBAAgB,IAAI,CAAC;AACjF,UAAM,aAAa,gBAAgB,EAAE;AACrC,UAAM,OAAO;AAEb,WAAO;AAAA,EACT;AAAA,EAEQ,mBAAmB;AACzB,UAAM,QAAQ,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,EAAE;AAAA,MACtE,UAAQ,KAAK,QAAQ,YAAY,MAAM;AAAA,IACzC;AAEA,UAAM,QAAQ,CAAC,MAAM,UAAU;AAE7B,YAAM,YAAY,KAAK,cAAc,oBAAoB;AACzD,UAAI,cAAc,MAAM;AAEtB,aAAK,OAAO,KAAK,aAAa,CAAC;AAAA,MACjC,WAAW,UAAU,aAAa,cAAc,GAAG;AAEjD,kBAAU,YAAY,KAAK,aAAa,CAAC;AAAA,MAC3C,OAAO;AAAA,MAEP;AAGA,UAAI,UAAU,MAAM,SAAS,GAAG;AAC9B,aAAK,aAAa,gBAAgB,MAAM;AAAA,MAC1C,OAAO;AACL,aAAK,gBAAgB,cAAc;AAAA,MACrC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AAIP,QAAI,KAAK,iBAAiB,KAAK,SAAS,IAAI,GAAG;AAC7C,WAAK,eAAe,KAAK,SAAS,IAAI;AACtC,WAAK,eAAe,KAAK,MAAM,KAAK,iBAAiB,CAAC;AAAA,IACxD;AAEA,WAAO;AAAA,uDAC4C,KAAK,KAAK;AAAA,4BACrC,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,iEAKgB,KAAK,SAAS,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlF;AACF;AA7EqB,cACZ,SAAyB,CAAC,0BAAiB,2BAAQ,gCAAY;AADnD,cAEZ,eAAe,EAAE,YAAY,QAAQ;AAK7B;AAAA,EAAd,MAAM,MAAM;AAAA,GAPM,cAOJ;AACkB;AAAA,EAAhC,MAAM,wBAAwB;AAAA,GARZ,cAQc;AAMrB;AAAA,EAAX,SAAS;AAAA,GAdS,cAcP;",
+  "names": []
+}

package/dist/chunks/{chunk.6YQ35HSY.js → chunk.W2ZLYKW3.js}

@@ -1,6 +1,6 @@
 import {
   SynAlert
-} from "./chunk.WNIHAMXF.js";
+} from "./chunk.PRIUO6K5.js";
 
 // src/components/alert/alert.ts
 var alert_default = SynAlert;
@@ -9,4 +9,4 @@ SynAlert.define("syn-alert");
 export {
   alert_default
 };
-//# sourceMappingURL=chunk.6YQ35HSY.js.map
+//# sourceMappingURL=chunk.W2ZLYKW3.js.map

package/dist/chunks/{chunk.XOAWBI3O.js → chunk.YJYRKETY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.E5BS6NQR.js";
 import {
   SynDivider
-} from "./chunk.PKUM6IAY.js";
+} from "./chunk.KUIBRZ2M.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -13,7 +13,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.RMXAXSXJ.js";
+} from "./chunk.QHHUWWKO.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -316,4 +316,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.XOAWBI3O.js.map
+//# sourceMappingURL=chunk.YJYRKETY.js.map

package/dist/chunks/{chunk.PBG6CWMK.js → chunk.YUGJLV4Z.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.LZQ5QEJ2.js";
+} from "./chunk.IQVAT35M.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.PBG6CWMK.js.map
+//# sourceMappingURL=chunk.YUGJLV4Z.js.map

package/dist/chunks/{chunk.2ND2CGEE.js → chunk.YWYWGAF4.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.35HAQCNN.js";
+} from "./chunk.53ZID3W7.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.2ND2CGEE.js.map
+//# sourceMappingURL=chunk.YWYWGAF4.js.map

package/dist/chunks/chunk.Z6T7VV4R.js

@@ -0,0 +1,15 @@
+// src/components/breadcrumb/breadcrumb.styles.ts
+import { css } from "lit";
+var breadcrumb_styles_default = css`
+	/* stylelint-disable */
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+`;
+
+export {
+  breadcrumb_styles_default
+};
+//# sourceMappingURL=chunk.Z6T7VV4R.js.map

package/dist/chunks/chunk.Z6T7VV4R.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb/breadcrumb.styles.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  .breadcrumb {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n  }\n`;\n"],
+  "mappings": ";AAMA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.VXYNWBMD.js → chunk.Z76T5ZI5.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.XOAWBI3O.js";
+} from "./chunk.YJYRKETY.js";
 
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.VXYNWBMD.js.map
+//# sourceMappingURL=chunk.Z76T5ZI5.js.map

package/dist/chunks/{chunk.77OJYYRS.js → chunk.ZPL25GJZ.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.VWUP5HVP.js";
+} from "./chunk.RISVXN4U.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.77OJYYRS.js.map
+//# sourceMappingURL=chunk.ZPL25GJZ.js.map

package/dist/components/alert/alert.component.js

@@ -1,25 +1,25 @@
 import {
   SynAlert
-} from "../../chunks/chunk.WNIHAMXF.js";
-import "../../chunks/chunk.RHRQQQ3Z.js";
+} from "../../chunks/chunk.PRIUO6K5.js";
+import "../../chunks/chunk.LJW4RAGM.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.LJQ7LEPV.js";
 import "../../chunks/chunk.UMKKOHXB.js";
 import "../../chunks/chunk.QAUTITK3.js";
 import "../../chunks/chunk.66WXVGAW.js";
-import "../../chunks/chunk.CNIG37AB.js";
-import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.JRYXECAY.js";
+import "../../chunks/chunk.PS4UJFYT.js";
+import "../../chunks/chunk.QDJMXGZK.js";
 import "../../chunks/chunk.66MOXMDP.js";
 import "../../chunks/chunk.6C4JXZZN.js";
 import "../../chunks/chunk.VTKIDI7N.js";
-import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.JRYXECAY.js";
-import "../../chunks/chunk.PS4UJFYT.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.2RF7KO5I.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.RMXAXSXJ.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.QHHUWWKO.js";
+import "../../chunks/chunk.C7624ITA.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynAlert as default

package/dist/components/alert/alert.js

@@ -1,26 +1,26 @@
 import {
   alert_default
-} from "../../chunks/chunk.6YQ35HSY.js";
-import "../../chunks/chunk.WNIHAMXF.js";
-import "../../chunks/chunk.RHRQQQ3Z.js";
+} from "../../chunks/chunk.W2ZLYKW3.js";
+import "../../chunks/chunk.PRIUO6K5.js";
+import "../../chunks/chunk.LJW4RAGM.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.LJQ7LEPV.js";
 import "../../chunks/chunk.UMKKOHXB.js";
 import "../../chunks/chunk.QAUTITK3.js";
 import "../../chunks/chunk.66WXVGAW.js";
-import "../../chunks/chunk.CNIG37AB.js";
-import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.JRYXECAY.js";
+import "../../chunks/chunk.PS4UJFYT.js";
+import "../../chunks/chunk.QDJMXGZK.js";
 import "../../chunks/chunk.66MOXMDP.js";
 import "../../chunks/chunk.6C4JXZZN.js";
 import "../../chunks/chunk.VTKIDI7N.js";
-import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.JRYXECAY.js";
-import "../../chunks/chunk.PS4UJFYT.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.2RF7KO5I.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.RMXAXSXJ.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.QHHUWWKO.js";
+import "../../chunks/chunk.C7624ITA.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   alert_default as default

package/dist/components/badge/badge.component.js

@@ -1,11 +1,11 @@
 import {
   SynBadge
-} from "../../chunks/chunk.54GVOIXN.js";
+} from "../../chunks/chunk.OYB4Y7ET.js";
+import "../../chunks/chunk.WQJRBFZA.js";
 import "../../chunks/chunk.II4PANKR.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.RMXAXSXJ.js";
-import "../../chunks/chunk.WQJRBFZA.js";
+import "../../chunks/chunk.QHHUWWKO.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynBadge as default

package/dist/components/badge/badge.js

@@ -1,12 +1,12 @@
 import {
   badge_default
-} from "../../chunks/chunk.GMLVOAGH.js";
-import "../../chunks/chunk.54GVOIXN.js";
+} from "../../chunks/chunk.MMWS4XGO.js";
+import "../../chunks/chunk.OYB4Y7ET.js";
+import "../../chunks/chunk.WQJRBFZA.js";
 import "../../chunks/chunk.II4PANKR.js";
 import "../../chunks/chunk.GEHO4WRP.js";
 import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.RMXAXSXJ.js";
-import "../../chunks/chunk.WQJRBFZA.js";
+import "../../chunks/chunk.QHHUWWKO.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   badge_default as default

package/dist/components/breadcrumb/breadcrumb.component.d.ts

@@ -0,0 +1,34 @@
+import SynergyElement from '../../internal/synergy-element.js';
+import SynIcon from '../icon/icon.component.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+ * @documentation https://synergy.style/components/breadcrumb
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - One or more breadcrumb items to display.
+ * @slot separator - The separator to use between breadcrumb items. Works best with `<syn-icon>`.
+ *
+ * @dependency syn-icon
+ *
+ * @csspart base - The component's base wrapper.
+ */
+export default class SynBreadcrumb extends SynergyElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'syn-icon': typeof SynIcon;
+    };
+    private readonly localize;
+    private separatorDir;
+    defaultSlot: HTMLSlotElement;
+    separatorSlot: HTMLSlotElement;
+    /**
+     * The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
+     * screen readers and other assistive devices to provide more context for users.
+     */
+    label: string;
+    private getSeparator;
+    private handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -0,0 +1,21 @@
+import {
+  SynBreadcrumb
+} from "../../chunks/chunk.VJXYRUKL.js";
+import "../../chunks/chunk.Z6T7VV4R.js";
+import "../../chunks/chunk.QDJMXGZK.js";
+import "../../chunks/chunk.66MOXMDP.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.VTKIDI7N.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.GEHO4WRP.js";
+import "../../chunks/chunk.QY3GFWGZ.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.QHHUWWKO.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.32CYREEV.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  SynBreadcrumb as default
+};
+//# sourceMappingURL=breadcrumb.component.js.map

package/dist/components/breadcrumb/breadcrumb.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/breadcrumb/breadcrumb.custom.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/breadcrumb/breadcrumb.custom.styles.js

@@ -0,0 +1,8 @@
+import {
+  breadcrumb_custom_styles_default
+} from "../../chunks/chunk.32CYREEV.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  breadcrumb_custom_styles_default as default
+};
+//# sourceMappingURL=breadcrumb.custom.styles.js.map

package/dist/components/breadcrumb/breadcrumb.custom.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,8 @@
+import SynBreadcrumb from './breadcrumb.component.js';
+export * from './breadcrumb.component.js';
+export default SynBreadcrumb;
+declare global {
+    interface HTMLElementTagNameMap {
+        'syn-breadcrumb': SynBreadcrumb;
+    }
+}

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,22 @@
+import {
+  breadcrumb_default
+} from "../../chunks/chunk.SSNMI2TJ.js";
+import "../../chunks/chunk.VJXYRUKL.js";
+import "../../chunks/chunk.Z6T7VV4R.js";
+import "../../chunks/chunk.QDJMXGZK.js";
+import "../../chunks/chunk.66MOXMDP.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.VTKIDI7N.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.GEHO4WRP.js";
+import "../../chunks/chunk.QY3GFWGZ.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.QHHUWWKO.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.32CYREEV.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  breadcrumb_default as default
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/breadcrumb/breadcrumb.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;