@synergy-design-system/components 1.13.0 → 1.15.0

package/dist/chunks/chunk.MJYZDU37.js

@@ -0,0 +1,318 @@
+import {
+  nav_item_styles_default
+} from "./chunk.L4UUXVRZ.js";
+import {
+  SynDivider
+} from "./chunk.YBPWZ4QI.js";
+import {
+  HasSlotController
+} from "./chunk.66WXVGAW.js";
+import {
+  watch
+} from "./chunk.AVTU2BGE.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.MCJTXOVV.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/nav-item/nav-item.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, literal } from "lit/static-html.js";
+import { property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var SynNavItem = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "children", "prefix", "suffix");
+    this.hasFocus = false;
+    this.showPrefixOnly = false;
+    this.currentMarkedChild = false;
+    this.isMultiLine = false;
+    this.current = false;
+    this.disabled = false;
+    this.horizontal = false;
+    this.chevron = false;
+    this.open = false;
+    this.divider = false;
+  }
+  isButton() {
+    return !this.href && !this.hasSlotController.test("children");
+  }
+  isLink() {
+    return !!this.href && !this.hasSlotController.test("children");
+  }
+  isAccordion() {
+    return this.hasSlotController.test("children");
+  }
+  // eslint-disable-next-line class-methods-use-this
+  getNavItemChildren(childrenSlot) {
+    return Array.from(
+      (childrenSlot == null ? void 0 : childrenSlot.assignedElements({
+        flatten: true
+      })) || []
+    ).map((slottedElement) => slottedElement.tagName.toLowerCase() === "syn-nav-item" ? slottedElement : Array.from(slottedElement.querySelectorAll(":scope > syn-nav-item"))).flat();
+  }
+  getAllNestedNavItems(childrenSlot) {
+    const allNavItems = this.getNavItemChildren(childrenSlot);
+    const nestedNavItems = allNavItems.map((item) => item.getAllNestedNavItems(item.childrenSlot)).flat();
+    return allNavItems.concat(nestedNavItems);
+  }
+  handleCurrentMarkedChild() {
+    const sideNav = this.closest("syn-side-nav");
+    if (!this.open || !!(sideNav == null ? void 0 : sideNav.rail)) {
+      const navItemChildren = this.getAllNestedNavItems(this.childrenSlot);
+      const currentMarkedItem = navItemChildren.findIndex((item) => {
+        var _a;
+        return !!((_a = item.shadowRoot) == null ? void 0 : _a.querySelector(".nav-item--current"));
+      });
+      this.currentMarkedChild = currentMarkedItem !== -1;
+    }
+  }
+  handleClickButton(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+  handleClickSummary(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (this.disabled)
+      return;
+    if (this.open) {
+      this.hideDetails();
+    } else {
+      this.showDetails();
+    }
+  }
+  hideDetails() {
+    this.open = false;
+    this.emit("syn-hide", {
+      cancelable: true
+    });
+  }
+  showDetails() {
+    this.open = true;
+    this.emit("syn-show", {
+      cancelable: true
+    });
+  }
+  /**
+   * Automatically add the correct level of indentation for sub items if none is provided
+   */
+  handleSlotChange() {
+    this.handleCurrentMarkedChild();
+    const level = getComputedStyle(this).getPropertyValue("--indentation");
+    const nextLevel = Math.min(parseInt(level, 10) + 1, 2);
+    this.getNavItemChildren(this.childrenSlot).forEach((item) => {
+      item.style.setProperty("--indentation", nextLevel.toFixed(0));
+    });
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("syn-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("syn-focus");
+  }
+  handleWidth(entries) {
+    entries.forEach((entry) => {
+      if (entry.contentRect.width < 100) {
+        const hasPrefix = this.hasSlotController.test("prefix");
+        this.showPrefixOnly = hasPrefix;
+      } else {
+        this.showPrefixOnly = false;
+      }
+      if (entry.contentRect.height > 48) {
+        this.isMultiLine = true;
+      } else {
+        this.isMultiLine = false;
+      }
+    });
+  }
+  handleOpenChange() {
+    this.handleCurrentMarkedChild();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver((entries) => this.handleWidth(entries));
+    this.resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.disconnect();
+  }
+  /**
+   * Removes focus from the button.
+   */
+  blur() {
+    this.control.blur();
+  }
+  /**
+   * Simulates a click on the nav-items button, link or summary.
+   */
+  click() {
+    this.control.click();
+  }
+  /**
+   * Sets focus on the nav-item
+   */
+  focus(options) {
+    this.control.focus(options);
+  }
+  // eslint-disable-next-line complexity
+  render() {
+    const isButton = this.isButton();
+    const isLink = this.isLink();
+    const isAccordion = this.isAccordion();
+    const sideNav = this.closest("syn-side-nav");
+    const showCurrentIndicatorForNested = this.currentMarkedChild && !this.open || this.currentMarkedChild && this.open && !!(sideNav == null ? void 0 : sideNav.rail) && !(sideNav == null ? void 0 : sideNav.open);
+    let tag = literal`button`;
+    if (isAccordion)
+      tag = literal`summary`;
+    else if (isLink)
+      tag = literal`a`;
+    const hasChevron = (this.chevron || isAccordion) && !this.horizontal;
+    let clickAction;
+    if (isAccordion) {
+      clickAction = this.handleClickSummary;
+    } else if (isButton) {
+      clickAction = this.handleClickButton;
+    }
+    const root = html`
+      <${tag}
+        aria-controls=${ifDefined(isAccordion ? "navigation-item-details" : void 0)}
+        aria-current=${ifDefined(this.current ? "page" : void 0)}
+        aria-disabled=${this.disabled}
+        @blur=${this.handleBlur}
+        class=${classMap({
+      "nav-item": true,
+      "nav-item--current": this.current || showCurrentIndicatorForNested,
+      "nav-item--disabled": this.disabled,
+      "nav-item--focused": this.hasFocus,
+      "nav-item--has-content": this.hasSlotController.test("[default]"),
+      "nav-item--has-prefix": this.hasSlotController.test("prefix"),
+      "nav-item--has-suffix": this.hasSlotController.test("suffix"),
+      "nav-item--horizontal": this.horizontal,
+      "nav-item--multi-line": this.isMultiLine,
+      "nav-item--show-prefix-only": this.showPrefixOnly,
+      "nav-item--vertical": !this.horizontal,
+      "nav-item-is-accordion": isAccordion
+    })}
+        @click=${clickAction}
+        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        @focus=${this.handleFocus}
+        href=${ifDefined(isLink ? this.href : void 0)}
+        part="base"
+        role=${isLink ? "link" : "button"}
+        tabindex=${this.disabled ? "-1" : "0"}
+      >
+
+        ${this.divider && !this.horizontal ? html`<syn-divider class="divider" part="divider"></syn-divider>` : ""}
+
+        <div class="nav-item__content" part="content-wrapper">
+          <slot name="prefix" part="prefix" class="nav-item__prefix"></slot>
+
+          <div part="content-container" class="nav-item__content-container">
+            <slot part="content"></slot>
+          </div>
+
+          <slot name="suffix" part="suffix" class="nav-item__suffix"></slot>
+
+          ${hasChevron ? html`
+            <syn-icon
+              class=${classMap({
+      "nav-item__chevron": true,
+      "nav-item__chevron-open": this.open
+    })}
+              color="currentColor"
+              library="system"
+              name="chevron-down"
+              part="chevron"
+            /></syn-icon>` : ""}
+
+          <div
+            class=${classMap({
+      "current-indicator": true,
+      "current-indicator--disabled": this.disabled,
+      "current-indicator--visible": this.current || showCurrentIndicatorForNested
+    })}
+            part="current-indicator"
+          >
+          </div>
+        </div>
+
+      </${tag}>
+    `;
+    return isAccordion ? html`
+      <details
+        id="navigation-item-details"
+        ?open=${this.open}
+        part="details"
+      >
+        ${root}
+        <slot
+          class="children"
+          name="children"
+          part="children"
+          @slotchange=${this.handleSlotChange}
+        ></slot>
+      </details>
+    ` : root;
+  }
+};
+SynNavItem.styles = [component_styles_default, nav_item_styles_default];
+SynNavItem.dependencies = {
+  "syn-divider": SynDivider
+};
+__decorateClass([
+  state()
+], SynNavItem.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], SynNavItem.prototype, "showPrefixOnly", 2);
+__decorateClass([
+  state()
+], SynNavItem.prototype, "currentMarkedChild", 2);
+__decorateClass([
+  state()
+], SynNavItem.prototype, "isMultiLine", 2);
+__decorateClass([
+  query('slot[name="children"]')
+], SynNavItem.prototype, "childrenSlot", 2);
+__decorateClass([
+  query(".nav-item")
+], SynNavItem.prototype, "control", 2);
+__decorateClass([
+  property({ reflect: true, type: String })
+], SynNavItem.prototype, "href", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynNavItem.prototype, "current", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynNavItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynNavItem.prototype, "horizontal", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynNavItem.prototype, "chevron", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynNavItem.prototype, "open", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SynNavItem.prototype, "divider", 2);
+__decorateClass([
+  watch("open")
+], SynNavItem.prototype, "handleOpenChange", 1);
+
+export {
+  SynNavItem
+};
+//# sourceMappingURL=chunk.MJYZDU37.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/nav-item/nav-item.component.ts"],
+  "sourcesContent": ["import { classMap } from 'lit/directives/class-map.js';\nimport type { CSSResultGroup } from 'lit';\nimport { html, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport SynDivider from '../divider/divider.component.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './nav-item.styles.js';\nimport { watch } from '../../internal/watch.js';\n\n/**\n * @summary Flexible button / link component that can be used to quickly build navigations.\n * Takes one of 3 forms:\n * - button (default),\n * - link (overrides button if a 'href' is provided),\n * - or accordion (overrides all other if 'children' slot is defined).\n *\n * @status stable\n * @since 1.14.0\n *\n * @dependency syn-divider\n *\n * @event syn-show - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are hidden.\n *\n * @event syn-hide - Emitted when the navigation item:\n * - has children,\n * - and is clicked while HTML details are shown.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @slot - The navigation item's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n * @slot children - Slot used to provide nested child navigation elements.\n * If provided, details and summary elements will be used.\n * A chevron will be shown on the right side regardless of the chevron property.\n *\n * @csspart base - The component's base wrapper including children.\n * @csspart children - The wrapper that holds the children\n * @csspart content-wrapper - The component's content wrapper.\n * @csspart content - The component's content excluding children.\n * @csspart current-indicator - The indicator used when current is set to true\n * @csspart chevron - The container that wraps the chevron.\n * @csspart details - The details element rendered when there are children available\n * @csspart divider - The components optional top divider.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n *\n * @cssproperty --indentation - Numeric value, indicating the level the item is placed at.\n * @cssproperty --indentation-stepping - The amount of pixels each level will indent.\n * @cssproperty --display-children - Display property of the children. Defaults to \"contents\"\n */\nexport default class SynNavItem extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-divider': SynDivider,\n  };\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'children', 'prefix', 'suffix');\n\n  private resizeObserver: ResizeObserver;\n\n  /**\n   * The current focus state\n   */\n  @state() private hasFocus = false;\n\n  /**\n   * Only the prefix should be displayed\n   */\n  @state() private showPrefixOnly = false;\n\n  /**\n   * A nested nav-item is marked as current\n   */\n  @state() private currentMarkedChild = false;\n\n  /**\n   * The content area is multiline\n   */\n  @state() private isMultiLine = false;\n\n  /**\n   * Reference to the children slot\n   */\n  @query('slot[name=\"children\"]') childrenSlot: HTMLSlotElement;\n\n  /**\n   * Reference to the outermost button\n   */\n  @query('.nav-item') control: HTMLButtonElement | HTMLLinkElement | HTMLElement;\n\n  /**\n   * The navigation item's href target.\n   * If provided, the navigation item will use an anchor tag otherwise it will use a button tag.\n   *\n   * If the 'children' slot is provided, the navigation item will ignore the 'href' and use\n   * accordion behavior.\n   */\n  @property({ reflect: true, type: String }) href: string;\n\n  /*\n   * Indicates that the navigation item is currently selected.\n   * The aria-current attribute is set to \"page\" on the host if true.\n   */\n  @property({ reflect: true, type: Boolean }) current = false;\n\n  /**\n   * Disables the navigation item.\n   */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /**\n   * The navigation item's orientation.\n   */\n  @property({ reflect: true, type: Boolean }) horizontal = false;\n\n  /**\n   * Appends a chevron to the right side of a navigation item.\n   * Only used if `horizontal` is false.\n   */\n  @property({ reflect: true, type: Boolean }) chevron = false;\n\n  /**\n   * Reflects HTML details element state and allows control from parent.\n   * Only used if `horizontal` is false and `children` is defined.\n   */\n  @property({ reflect: true, type: Boolean }) open = false;\n\n  /**\n   * Toggle to true to show a divider above the element.\n   * Only available when horizontal is false.\n   */\n  @property({ reflect: true, type: Boolean }) divider = false;\n\n  private isButton(): boolean {\n    return !this.href && !this.hasSlotController.test('children');\n  }\n\n  private isLink(): boolean {\n    return !!this.href && !this.hasSlotController.test('children');\n  }\n\n  private isAccordion(): boolean {\n    return this.hasSlotController.test('children');\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private getNavItemChildren(childrenSlot: HTMLSlotElement): SynNavItem[] {\n    return Array.from(\n      childrenSlot?.assignedElements({\n        flatten: true,\n      }) as HTMLElement[]\n      || [],\n    )\n      .map(slottedElement => (slottedElement.tagName.toLowerCase() === 'syn-nav-item' ? slottedElement as SynNavItem : Array.from(slottedElement.querySelectorAll<SynNavItem>(':scope > syn-nav-item'))))\n      .flat();\n  }\n\n  private getAllNestedNavItems(childrenSlot: HTMLSlotElement): SynNavItem[] {\n    const allNavItems = this.getNavItemChildren(childrenSlot);\n\n    const nestedNavItems = allNavItems\n      .map(item => item.getAllNestedNavItems(item.childrenSlot))\n      .flat();\n\n    return allNavItems.concat(nestedNavItems);\n  }\n\n  private handleCurrentMarkedChild() {\n    const sideNav = this.closest('syn-side-nav');\n\n    if (!this.open || !!sideNav?.rail) {\n      const navItemChildren = this.getAllNestedNavItems(this.childrenSlot);\n\n      const currentMarkedItem = navItemChildren\n        .findIndex((item) => !!item.shadowRoot?.querySelector('.nav-item--current'));\n\n      this.currentMarkedChild = currentMarkedItem !== -1;\n    }\n  }\n\n  private handleClickButton(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  }\n\n  private handleClickSummary(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (this.disabled) return;\n\n    if (this.open) {\n      this.hideDetails();\n    } else {\n      this.showDetails();\n    }\n  }\n\n  private hideDetails() {\n    this.open = false;\n    this.emit('syn-hide', {\n      cancelable: true,\n    });\n  }\n\n  private showDetails() {\n    this.open = true;\n    this.emit('syn-show', {\n      cancelable: true,\n    });\n  }\n\n  /**\n   * Automatically add the correct level of indentation for sub items if none is provided\n   */\n  private handleSlotChange() {\n    this.handleCurrentMarkedChild();\n\n    // Use the current level of the component\n    const level = getComputedStyle(this).getPropertyValue('--indentation');\n\n    // We allow at most 3 levels\n    const nextLevel = Math.min(parseInt(level, 10) + 1, 2);\n\n    this.getNavItemChildren(this.childrenSlot)\n      .forEach(item => {\n        item.style.setProperty('--indentation', nextLevel.toFixed(0));\n      });\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleWidth(entries: ResizeObserverEntry[]) {\n    entries.forEach(entry => {\n      if (entry.contentRect.width < 100) {\n        const hasPrefix = this.hasSlotController.test('prefix');\n        this.showPrefixOnly = hasPrefix;\n      } else {\n        this.showPrefixOnly = false;\n      }\n\n      if (entry.contentRect.height > 48) {\n        this.isMultiLine = true;\n      } else {\n        this.isMultiLine = false;\n      }\n    });\n  }\n\n  @watch('open')\n  handleOpenChange() {\n    this.handleCurrentMarkedChild();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver((entries) => this.handleWidth(entries));\n    this.resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver.disconnect();\n  }\n\n  /**\n   * Removes focus from the button.\n   */\n  blur() {\n    this.control.blur();\n  }\n\n  /**\n   * Simulates a click on the nav-items button, link or summary.\n   */\n  click() {\n    this.control.click();\n  }\n\n  /**\n   * Sets focus on the nav-item\n   */\n  focus(options?: FocusOptions) {\n    this.control.focus(options);\n  }\n\n  // eslint-disable-next-line complexity\n  render() {\n    const isButton = this.isButton();\n    const isLink = this.isLink();\n    const isAccordion = this.isAccordion();\n\n    const sideNav = this.closest('syn-side-nav');\n\n    const showCurrentIndicatorForNested = (this.currentMarkedChild && !this.open)\n      || (this.currentMarkedChild && this.open && !!sideNav?.rail && !sideNav?.open);\n\n    // Defines the initial tag to use for the root component\n    let tag = literal`button`;\n    if (isAccordion) tag = literal`summary`;\n    else if (isLink) tag = literal`a`;\n\n    const hasChevron = (this.chevron || isAccordion) && !this.horizontal;\n\n    // Define the click method to use\n    let clickAction;\n    if (isAccordion) {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      clickAction = this.handleClickSummary;\n    } else if (isButton) {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      clickAction = this.handleClickButton;\n    }\n\n    /* eslint-disable lit/no-invalid-html */\n    /* eslint-disable lit/binding-positions */\n    /* eslint-disable @typescript-eslint/unbound-method */\n    const root = html`\n      <${tag}\n        aria-controls=${ifDefined(isAccordion ? 'navigation-item-details' : undefined)}\n        aria-current=${ifDefined(this.current ? 'page' : undefined)}\n        aria-disabled=${this.disabled}\n        @blur=${this.handleBlur}\n        class=${classMap({\n          'nav-item': true,\n          'nav-item--current': this.current || showCurrentIndicatorForNested,\n          'nav-item--disabled': this.disabled,\n          'nav-item--focused': this.hasFocus,\n          'nav-item--has-content': this.hasSlotController.test('[default]'),\n          'nav-item--has-prefix': this.hasSlotController.test('prefix'),\n          'nav-item--has-suffix': this.hasSlotController.test('suffix'),\n          'nav-item--horizontal': this.horizontal,\n          'nav-item--multi-line': this.isMultiLine,\n          'nav-item--show-prefix-only': this.showPrefixOnly,\n          'nav-item--vertical': !this.horizontal,\n          'nav-item-is-accordion': isAccordion,\n        })}\n        @click=${clickAction}\n        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}\n        @focus=${this.handleFocus}\n        href=${ifDefined(isLink ? this.href : undefined)}\n        part=\"base\"\n        role=${isLink ? 'link' : 'button'}\n        tabindex=${this.disabled ? '-1' : '0'}\n      >\n\n        ${this.divider && !this.horizontal\n          ? html`<syn-divider class=\"divider\" part=\"divider\"></syn-divider>`\n          : ''\n        }\n\n        <div class=\"nav-item__content\" part=\"content-wrapper\">\n          <slot name=\"prefix\" part=\"prefix\" class=\"nav-item__prefix\"></slot>\n\n          <div part=\"content-container\" class=\"nav-item__content-container\">\n            <slot part=\"content\"></slot>\n          </div>\n\n          <slot name=\"suffix\" part=\"suffix\" class=\"nav-item__suffix\"></slot>\n\n          ${hasChevron ? html`\n            <syn-icon\n              class=${classMap({\n                'nav-item__chevron': true,\n                'nav-item__chevron-open': this.open,\n              })}\n              color=\"currentColor\"\n              library=\"system\"\n              name=\"chevron-down\"\n              part=\"chevron\"\n            /></syn-icon>`\n          : ''}\n\n          <div\n            class=${classMap({\n              'current-indicator': true,\n              'current-indicator--disabled': this.disabled,\n              'current-indicator--visible': this.current || showCurrentIndicatorForNested,\n            })}\n            part=\"current-indicator\"\n          >\n          </div>\n        </div>\n\n      </${tag}>\n    `;\n    /* eslint-enable lit/no-invalid-html */\n    /* eslint-enable lit/binding-positions */\n\n    return isAccordion ? html`\n      <details\n        id=\"navigation-item-details\"\n        ?open=${this.open}\n        part=\"details\"\n      >\n        ${root}\n        <slot\n          class=\"children\"\n          name=\"children\"\n          part=\"children\"\n          @slotchange=${this.handleSlotChange}\n        ></slot>\n      </details>\n    ` : root;\n    /* eslint-enable @typescript-eslint/unbound-method */\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.MKKJWJHG.js → chunk.MMDRQ7JM.js}

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.BAPPYU2J.js";
+} from "./chunk.GARWLAOJ.js";
 
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.MKKJWJHG.js.map
+//# sourceMappingURL=chunk.MMDRQ7JM.js.map

package/dist/chunks/{chunk.ZFDPWUKA.js → chunk.NBHBC5FQ.js}

@@ -1,6 +1,12 @@
 import {
   SynPopup
-} from "./chunk.FYJQBDYL.js";
+} from "./chunk.4TWUWTOI.js";
+import {
+  dropdown_custom_styles_default
+} from "./chunk.2KYFCKCK.js";
+import {
+  dropdown_styles_default
+} from "./chunk.SLCYXMHB.js";
 import {
   getTabbableBoundary
 } from "./chunk.2QOQY4ZG.js";
@@ -13,22 +19,16 @@ import {
   getAnimation,
   setDefaultAnimation
 } from "./chunk.QAUTITK3.js";
-import {
-  dropdown_custom_styles_default
-} from "./chunk.2KYFCKCK.js";
-import {
-  dropdown_styles_default
-} from "./chunk.SLCYXMHB.js";
-import {
-  LocalizeController
-} from "./chunk.LAB4YJYE.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
+import {
+  LocalizeController
+} from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.LUPEZL5H.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -362,4 +362,4 @@ setDefaultAnimation("dropdown.hide", {
 export {
   SynDropdown
 };
-//# sourceMappingURL=chunk.ZFDPWUKA.js.map
+//# sourceMappingURL=chunk.NBHBC5FQ.js.map

package/dist/chunks/{chunk.J4XBGQBY.js → chunk.O3A57CXO.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.3FOVDOJX.js";
 import {
   SynDivider
-} from "./chunk.ZGKQGMNS.js";
+} from "./chunk.YBPWZ4QI.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.LUPEZL5H.js";
+} from "./chunk.MCJTXOVV.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -32,4 +32,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.J4XBGQBY.js.map
+//# sourceMappingURL=chunk.O3A57CXO.js.map

package/dist/chunks/{chunk.F2JCTYYN.js → chunk.OLUNOSLX.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.HJNNSNKN.js";
+} from "./chunk.H7APDHTS.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.F2JCTYYN.js.map
+//# sourceMappingURL=chunk.OLUNOSLX.js.map

package/dist/chunks/{chunk.XRLJLT47.js → chunk.ON2HXIFZ.js}

@@ -19,14 +19,14 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.ZPMKYF4O.js";
+} from "./chunk.WHYX7AY4.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.LUPEZL5H.js";
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -259,4 +259,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.XRLJLT47.js.map
+//# sourceMappingURL=chunk.ON2HXIFZ.js.map

package/dist/chunks/{chunk.BD3YJRAC.js → chunk.OVUVBTHH.js}

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

package/dist/chunks/chunk.P43W2NFX.js

@@ -0,0 +1,12 @@
+import {
+  SynSideNav
+} from "./chunk.VDA7H6VI.js";
+
+// src/components/side-nav/side-nav.ts
+var side_nav_default = SynSideNav;
+SynSideNav.define("syn-side-nav");
+
+export {
+  side_nav_default
+};
+//# sourceMappingURL=chunk.P43W2NFX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/side-nav/side-nav.ts"],
+  "sourcesContent": ["import SynSideNav from './side-nav.component.js';\n\nexport * from './side-nav.component.js';\nexport default SynSideNav;\n\nSynSideNav.define('syn-side-nav');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-side-nav': SynSideNav;\n  }\n}\n"],
+  "mappings": ";;;;;AAGA,IAAO,mBAAQ;AAEf,WAAW,OAAO,cAAc;",
+  "names": []
+}

package/dist/chunks/chunk.QJGWS4TQ.js

@@ -0,0 +1,12 @@
+import {
+  SynNavItem
+} from "./chunk.MJYZDU37.js";
+
+// src/components/nav-item/nav-item.ts
+var nav_item_default = SynNavItem;
+SynNavItem.define("syn-nav-item");
+
+export {
+  nav_item_default
+};
+//# sourceMappingURL=chunk.QJGWS4TQ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/nav-item/nav-item.ts"],
+  "sourcesContent": ["import SynNavItem from './nav-item.component.js';\n\nexport * from './nav-item.component.js';\nexport default SynNavItem;\n\nSynNavItem.define('syn-nav-item');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-nav-item': SynNavItem;\n  }\n}\n"],
+  "mappings": ";;;;;AAGA,IAAO,mBAAQ;AAEf,WAAW,OAAO,cAAc;",
+  "names": []
+}

package/dist/chunks/{chunk.A3SKDWCT.js → chunk.QY3GFWGZ.js}

@@ -31,7 +31,16 @@ var translation = {
   selectAColorFromTheScreen: "Select a color from the screen",
   showPassword: "Show password",
   slideNum: (slide) => `Slide ${slide}`,
-  toggleColorFormat: "Toggle color format"
+  toggleColorFormat: "Toggle color format",
+  // Automatically generated custom translations.
+  // @see scripts/vendorism/translations.vendorism.js
+  closeMenu: "Close menu",
+  danger: "Danger",
+  notification: "Notification",
+  openMenu: "Open menu",
+  sideNav: "Side navigation",
+  success: "Success",
+  warning: "Warning"
 };
 registerTranslation(translation);
 var en_default = translation;
@@ -39,4 +48,4 @@ var en_default = translation;
 export {
   en_default
 };
-//# sourceMappingURL=chunk.A3SKDWCT.js.map
+//# sourceMappingURL=chunk.QY3GFWGZ.js.map

package/dist/chunks/{chunk.A3SKDWCT.js.map → chunk.QY3GFWGZ.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/translations/en.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 { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'en',\n  $name: 'English',\n  $dir: 'ltr',\n\n  carousel: 'Carousel',\n  clearEntry: 'Clear entry',\n  close: 'Close',\n  copied: 'Copied',\n  copy: 'Copy',\n  currentValue: 'Current value',\n  error: 'Error',\n  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,\n  hidePassword: 'Hide password',\n  loading: 'Loading',\n  nextSlide: 'Next slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'No options selected';\n    if (num === 1) return '1 option selected';\n    return `${num} options selected`;\n  },\n  previousSlide: 'Previous slide',\n  progress: 'Progress',\n  remove: 'Remove',\n  resize: 'Resize',\n  scrollToEnd: 'Scroll to end',\n  scrollToStart: 'Scroll to start',\n  selectAColorFromTheScreen: 'Select a color from the screen',\n  showPassword: 'Show password',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Toggle color format'\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"],
-  "mappings": ";AAMA,SAAS,2BAA2B;AAGpC,IAAM,cAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EAEN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW,CAAC,OAAO,UAAU,eAAe,KAAK,OAAO,KAAK;AAAA,EAC7D,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,oBAAoB,SAAO;AACzB,QAAI,QAAQ;AAAG,aAAO;AACtB,QAAI,QAAQ;AAAG,aAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,UAAU,WAAS,SAAS,KAAK;AAAA,EACjC,mBAAmB;AACrB;AAEA,oBAAoB,WAAW;AAE/B,IAAO,aAAQ;",
+  "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 { registerTranslation } from '@shoelace-style/localize';\nimport type { Translation } from '../utilities/localize.js';\n\nconst translation: Translation = {\n  $code: 'en',\n  $name: 'English',\n  $dir: 'ltr',\n\n  carousel: 'Carousel',\n  clearEntry: 'Clear entry',\n  close: 'Close',\n  copied: 'Copied',\n  copy: 'Copy',\n  currentValue: 'Current value',\n  error: 'Error',\n  goToSlide: (slide, count) => `Go to slide ${slide} of ${count}`,\n  hidePassword: 'Hide password',\n  loading: 'Loading',\n  nextSlide: 'Next slide',\n  numOptionsSelected: num => {\n    if (num === 0) return 'No options selected';\n    if (num === 1) return '1 option selected';\n    return `${num} options selected`;\n  },\n  previousSlide: 'Previous slide',\n  progress: 'Progress',\n  remove: 'Remove',\n  resize: 'Resize',\n  scrollToEnd: 'Scroll to end',\n  scrollToStart: 'Scroll to start',\n  selectAColorFromTheScreen: 'Select a color from the screen',\n  showPassword: 'Show password',\n  slideNum: slide => `Slide ${slide}`,\n  toggleColorFormat: 'Toggle color format',\n\n  // Automatically generated custom translations.\n  // @see scripts/vendorism/translations.vendorism.js\n  closeMenu: 'Close menu',\n  danger: 'Danger',\n  notification: 'Notification',\n  openMenu: 'Open menu',\n  sideNav: 'Side navigation',\n  success: 'Success',\n  warning: 'Warning',\n};\n\nregisterTranslation(translation);\n\nexport default translation;\n"],
+  "mappings": ";AAMA,SAAS,2BAA2B;AAGpC,IAAM,cAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EAEN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,WAAW,CAAC,OAAO,UAAU,eAAe,KAAK,OAAO,KAAK;AAAA,EAC7D,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,oBAAoB,SAAO;AACzB,QAAI,QAAQ;AAAG,aAAO;AACtB,QAAI,QAAQ;AAAG,aAAO;AACtB,WAAO,GAAG,GAAG;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,2BAA2B;AAAA,EAC3B,cAAc;AAAA,EACd,UAAU,WAAS,SAAS,KAAK;AAAA,EACjC,mBAAmB;AAAA;AAAA;AAAA,EAInB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;AAEA,oBAAoB,WAAW;AAE/B,IAAO,aAAQ;",
   "names": []
 }

package/dist/chunks/{chunk.NE7RLB6A.js → chunk.SBHXUKMY.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.ZGKQGMNS.js";
+} from "./chunk.YBPWZ4QI.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.NE7RLB6A.js.map
+//# sourceMappingURL=chunk.SBHXUKMY.js.map

package/dist/chunks/{chunk.3PBOWA5U.js → chunk.SE4NF6AN.js}

@@ -1,10 +1,10 @@
-import {
-  SynergyElement,
-  component_styles_default
-} from "./chunk.LUPEZL5H.js";
 import {
   button_group_styles_default
 } from "./chunk.A7IIJ2LL.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.MCJTXOVV.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -84,4 +84,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.3PBOWA5U.js.map
+//# sourceMappingURL=chunk.SE4NF6AN.js.map