@synergy-design-system/components 3.1.0 → 3.2.1

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox/checkbox.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport customStyles from './checkbox.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\n@enableDefaultSettings('SynCheckbox')\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private readonly formControlController = new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n\n  @property({ reflect: true }) title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: string;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.emit('syn-change');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleInput() {\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n    this.formControlController.updateValidity();\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    //\n    // NOTE: we use a <div> around the label slot because of this Chrome bug.\n    //\n    // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n    //\n    return html`\n      <div\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"base\"\n          class=${classMap({\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--indeterminate': this.indeterminate,\n            'checkbox--small': this.size === 'small',\n            'checkbox--medium': this.size === 'medium',\n            'checkbox--large': this.size === 'large'\n          })}\n        >\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n            name=${this.name}\n            value=${ifDefined(this.value)}\n            .indeterminate=${live(this.indeterminate)}\n            .checked=${live(this.checked)}\n            .disabled=${this.disabled}\n            .required=${this.required}\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-describedby=\"help-text\"\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @invalid=${this.handleInvalid}\n            @blur=${this.handleBlur}\n            @focus=${this.handleFocus}\n          />\n\n          <span\n            part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n              ? ' control--indeterminate'\n              : ''}\"\n            class=\"checkbox__control\"\n          >\n            ${this.checked\n              ? html`\n                  <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n                `\n              : ''}\n            ${!this.checked && this.indeterminate\n              ? html`\n                  <syn-icon\n                    part=\"indeterminate-icon\"\n                    class=\"checkbox__indeterminate-icon\"\n                    library=\"system\"\n                    name=\"indeterminate\"\n                  ></syn-icon>\n                `\n              : ''}\n          </span>\n\n          <div part=\"label\" class=\"checkbox__label\">\n            <slot></slot>\n          </div>\n        </label>\n\n        <div\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n          class=\"form-control__help-text\"\n          id=\"help-text\"\n          part=\"form-control-help-text\"\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.7ZHTDECG.js → chunk.KULTIH7F.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.QU47WZOK.js";
+} from "./chunk.OFF4U2HZ.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.7ZHTDECG.js.map
+//# sourceMappingURL=chunk.KULTIH7F.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon-button/icon-button.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynIconButton from './icon-button.component.js';\n\nexport * from './icon-button.component.js';\nexport default SynIconButton;\n\nSynIconButton.define('syn-icon-button');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-icon-button': SynIconButton;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,sBAAQ;AAEf,cAAc,OAAO,iBAAiB;",
+  "names": []
+}

package/dist/chunks/{chunk.C2ENQBPM.js → chunk.LQDIH4Z5.js}

@@ -14,4 +14,4 @@ function waitForEvent(el, eventName) {
 export {
   waitForEvent
 };
-//# sourceMappingURL=chunk.C2ENQBPM.js.map
+//# sourceMappingURL=chunk.LQDIH4Z5.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/event.ts"],
+  "sourcesContent": ["/* eslint-disable */\n/** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */\nexport function waitForEvent(el: HTMLElement, eventName: string) {\n  return new Promise<void>(resolve => {\n    function done(event: Event) {\n      if (event.target === el) {\n        el.removeEventListener(eventName, done);\n        resolve();\n      }\n    }\n\n    el.addEventListener(eventName, done);\n  });\n}\n"],
+  "mappings": ";AAEO,SAAS,aAAa,IAAiB,WAAmB;AAC/D,SAAO,IAAI,QAAc,aAAW;AAClC,aAAS,KAAK,OAAc;AAC1B,UAAI,MAAM,WAAW,IAAI;AACvB,WAAG,oBAAoB,WAAW,IAAI;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAEA,OAAG,iBAAiB,WAAW,IAAI;AAAA,EACrC,CAAC;AACH;",
+  "names": []
+}

package/dist/chunks/{chunk.OAIHDW7S.js → chunk.MEFGUKU5.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.YVTRDHMM.js";
+} from "./chunk.QSSDP7SD.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.OAIHDW7S.js.map
+//# sourceMappingURL=chunk.MEFGUKU5.js.map

package/dist/chunks/{chunk.TFBMLDBM.js → chunk.MQKESAOP.js}

@@ -1,6 +1,6 @@
 import {
   SynAccordion
-} from "./chunk.3PWAIWL5.js";
+} from "./chunk.JSBJOKER.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = SynAccordion;
@@ -9,4 +9,4 @@ SynAccordion.define("syn-accordion");
 export {
   accordion_default
 };
-//# sourceMappingURL=chunk.TFBMLDBM.js.map
+//# sourceMappingURL=chunk.MQKESAOP.js.map

package/dist/chunks/{chunk.7QGJAPLH.js → chunk.N6DEOPEC.js}

@@ -3,45 +3,45 @@ import {
 } from "./chunk.CDOWFAH2.js";
 import {
   defaultValue
-} from "./chunk.3NXKLKWH.js";
+} from "./chunk.3JDUKQRN.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.G4URZQCL.js";
+} from "./chunk.PTRCO527.js";
 import {
   SynButton
-} from "./chunk.QUKSQV3V.js";
+} from "./chunk.36HGXE6I.js";
 import {
   FormControlController
-} from "./chunk.U5757NSE.js";
+} from "./chunk.J3GDDM6Q.js";
 import {
   animateTo
-} from "./chunk.6EKUFYET.js";
+} from "./chunk.Q6HZ4JXR.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.ADSEQZBF.js";
+} from "./chunk.RJUVM6NO.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.Q6XDV7O7.js";
+} from "./chunk.7XSJ52RM.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
-} from "./chunk.MLILJGXQ.js";
+} from "./chunk.YACUYJZN.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -534,4 +534,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.7QGJAPLH.js.map
+//# sourceMappingURL=chunk.N6DEOPEC.js.map

package/dist/chunks/{chunk.FSWTBNSI.js → chunk.N7HN275B.js}

@@ -158,4 +158,4 @@ var menu_item_styles_default = css`
 export {
   menu_item_styles_default
 };
-//# sourceMappingURL=chunk.FSWTBNSI.js.map
+//# sourceMappingURL=chunk.N7HN275B.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-item/menu-item.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --submenu-offset: -2px;\n\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    line-height: var(--syn-line-height-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    color: var(--syn-color-neutral-700);\n    padding: var(--syn-spacing-2x-small) var(--syn-spacing-2x-small);\n    transition: var(--syn-transition-fast) fill;\n    user-select: none;\n    -webkit-user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item.menu-item--loading {\n    outline: none;\n    cursor: wait;\n  }\n\n  .menu-item.menu-item--loading *:not(syn-spinner) {\n    opacity: 0.5;\n  }\n\n  .menu-item--loading syn-spinner {\n    --indicator-color: currentColor;\n    --track-width: 1px;\n    position: absolute;\n    font-size: 0.75em;\n    top: calc(50% - 0.5em);\n    left: 0.65rem;\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  /* Safe triangle */\n  .menu-item--submenu-expanded::after {\n    content: '';\n    position: fixed;\n    z-index: calc(var(--syn-z-index-dropdown) - 1);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    clip-path: polygon(\n      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),\n      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),\n      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)\n    );\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,\n  .menu-item--submenu-expanded {\n    background-color: var(--syn-color-neutral-100);\n    color: var(--syn-color-neutral-1000);\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--syn-color-primary-600);\n    color: var(--syn-color-neutral-0);\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  /* Add elevation and z-index to submenus */\n  syn-popup::part(popup) {\n    box-shadow: var(--syn-shadow-large);\n    z-index: var(--syn-z-index-dropdown);\n    margin-left: var(--submenu-offset);\n  }\n\n  .menu-item--rtl syn-popup::part(popup) {\n    margin-left: calc(-1 * var(--submenu-offset));\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n\n  ::slotted(syn-menu) {\n    max-width: var(--auto-size-available-width) !important;\n    max-height: var(--auto-size-available-height) !important;\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,2BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.RATZ2RGX.js → chunk.NKWPAQM3.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.6WFPHCIK.js";
+} from "./chunk.EQ3KJJ3H.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.RATZ2RGX.js.map
+//# sourceMappingURL=chunk.NKWPAQM3.js.map

package/dist/chunks/{chunk.34V3QOIQ.js → chunk.NMWM3BP7.js}

@@ -1,6 +1,6 @@
 import {
   library_default_default
-} from "./chunk.YTEJW7IF.js";
+} from "./chunk.RODNHT5C.js";
 import {
   library_system_default
 } from "./chunk.3RR4RIR7.js";
@@ -42,4 +42,4 @@ export {
   registerIconLibrary,
   unregisterIconLibrary
 };
-//# sourceMappingURL=chunk.34V3QOIQ.js.map
+//# sourceMappingURL=chunk.NMWM3BP7.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/library.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport defaultLibrary from './library.default.js';\nimport systemLibrary from './library.system.js';\nimport type SynIcon from '../icon/icon.js';\n\nexport type IconLibraryResolver = (name: string) => string;\nexport type IconLibraryMutator = (svg: SVGElement) => void;\nexport interface IconLibrary {\n  name: string;\n  resolver: IconLibraryResolver;\n  mutator?: IconLibraryMutator;\n  spriteSheet?: boolean;\n}\n\nlet registry: IconLibrary[] = [defaultLibrary, systemLibrary];\nlet watchedIcons: SynIcon[] = [];\n\n/** Adds an icon to the list of watched icons. */\nexport function watchIcon(icon: SynIcon) {\n  watchedIcons.push(icon);\n}\n\n/** Removes an icon from the list of watched icons. */\nexport function unwatchIcon(icon: SynIcon) {\n  watchedIcons = watchedIcons.filter(el => el !== icon);\n}\n\n/** Returns a library from the registry. */\nexport function getIconLibrary(name?: string) {\n  return registry.find(lib => lib.name === name);\n}\n\n/** Adds an icon library to the registry, or overrides an existing one. */\nexport function registerIconLibrary(name: string, options: Omit<IconLibrary, 'name'>) {\n  unregisterIconLibrary(name);\n  registry.push({\n    name,\n    resolver: options.resolver,\n    mutator: options.mutator,\n    spriteSheet: options.spriteSheet\n  });\n\n  // Redraw watched icons\n  watchedIcons.forEach(icon => {\n    if (icon.library === name) {\n      icon.setIcon();\n    }\n  });\n}\n\n/** Removes an icon library from the registry. */\nexport function unregisterIconLibrary(name: string) {\n  registry = registry.filter(lib => lib.name !== name);\n}\n"],
+  "mappings": ";;;;;;;;AAcA,IAAI,WAA0B,CAAC,yBAAgB,sBAAa;AAC5D,IAAI,eAA0B,CAAC;AAGxB,SAAS,UAAU,MAAe;AACvC,eAAa,KAAK,IAAI;AACxB;AAGO,SAAS,YAAY,MAAe;AACzC,iBAAe,aAAa,OAAO,QAAM,OAAO,IAAI;AACtD;AAGO,SAAS,eAAe,MAAe;AAC5C,SAAO,SAAS,KAAK,SAAO,IAAI,SAAS,IAAI;AAC/C;AAGO,SAAS,oBAAoB,MAAc,SAAoC;AACpF,wBAAsB,IAAI;AAC1B,WAAS,KAAK;AAAA,IACZ;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,SAAS,QAAQ;AAAA,IACjB,aAAa,QAAQ;AAAA,EACvB,CAAC;AAGD,eAAa,QAAQ,UAAQ;AAC3B,QAAI,KAAK,YAAY,MAAM;AACzB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF,CAAC;AACH;AAGO,SAAS,sBAAsB,MAAc;AAClD,aAAW,SAAS,OAAO,SAAO,IAAI,SAAS,IAAI;AACrD;",
+  "names": []
+}

package/dist/chunks/{chunk.QCAMWDPP.js → chunk.NNRQNQWD.js}

@@ -1,24 +1,24 @@
 import {
   tab_styles_default
-} from "./chunk.43YNZAWL.js";
+} from "./chunk.JDYQ7EFG.js";
 import {
   tab_custom_styles_default
 } from "./chunk.XC4GHHH2.js";
 import {
   SynIconButton
-} from "./chunk.QU47WZOK.js";
+} from "./chunk.OFF4U2HZ.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.FBQ7NUNW.js";
+} from "./chunk.VWFRCPN5.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -118,4 +118,4 @@ __decorateClass([
 export {
   SynTab
 };
-//# sourceMappingURL=chunk.QCAMWDPP.js.map
+//# sourceMappingURL=chunk.NNRQNQWD.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab/tab.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } 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 SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './tab.styles.js';\nimport customStyles from './tab.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\nlet id = 0;\n\n/**\n * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The tab's label.\n *\n * @event syn-close - Emitted when the tab is closable and the close button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n */\nexport default class SynTab extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon-button': SynIconButton };\n\n  private readonly localize = new LocalizeController(this);\n\n  private readonly attrId = ++id;\n  private readonly componentId = `syn-tab-${this.attrId}`;\n\n  @query('.tab') tab: HTMLElement;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = '';\n\n  /** Draws the tab in an active state. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Makes the tab closable and shows a close button. */\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * @internal\n   * Need to wrap in a `@property()` otherwise CustomElement throws a \"The result must not have attributes\" runtime error.\n   */\n  @property({ type: Number, reflect: true }) tabIndex = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n  }\n\n  private handleCloseClick(event: Event) {\n    event.stopPropagation();\n    this.emit('syn-close');\n  }\n\n  @watch('active')\n  handleActiveChange() {\n    this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\n    if (this.disabled && !this.active) {\n      this.tabIndex = -1;\n    } else {\n      this.tabIndex = 0;\n    }\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          tab: true,\n          'tab--active': this.active,\n          'tab--closable': this.closable,\n          'tab--disabled': this.disabled\n        })}\n      >\n        <slot></slot>\n        ${this.closable\n          ? html`\n              <syn-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                name=\"x-lg\"\n                library=\"system\"\n                label=${this.localize.term('close')}\n                class=\"tab__close-button\"\n                @click=${this.handleCloseClick}\n                tabindex=\"-1\"\n              ></syn-icon-button>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-tab': SynTab;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAErB,SAAS,UAAU,aAAa;AAShC,IAAI,KAAK;AAkBT,IAAqB,SAArB,cAAoC,eAAe;AAAA,EAAnD;AAAA;AAIE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAEvD,SAAiB,SAAS,EAAE;AAC5B,SAAiB,cAAc,WAAW,KAAK,MAAM;AAKxB,iBAAQ;AAGO,kBAAS;AAGT,oBAAW;AAGX,oBAAW;AAMZ,oBAAW;AAAA;AAAA,EAEtD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEQ,iBAAiB,OAAc;AACrC,UAAM,gBAAgB;AACtB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,qBAAqB;AACnB,SAAK,aAAa,iBAAiB,KAAK,SAAS,SAAS,OAAO;AAAA,EACnE;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAEnE,QAAI,KAAK,YAAY,CAAC,KAAK,QAAQ;AACjC,WAAK,WAAW;AAAA,IAClB,OAAO;AACL,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,SAAS;AAEP,SAAK,KAAK,KAAK,GAAG,SAAS,IAAI,KAAK,KAAK,KAAK;AAE9C,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS;AAAA,MACf,KAAK;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,iBAAiB,KAAK;AAAA,MACtB,iBAAiB,KAAK;AAAA,IACxB,CAAC,CAAC;AAAA;AAAA;AAAA,UAGA,KAAK,WACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMY,KAAK,SAAS,KAAK,OAAO,CAAC;AAAA;AAAA,yBAE1B,KAAK,gBAAgB;AAAA;AAAA;AAAA,gBAIlC,EAAE;AAAA;AAAA;AAAA,EAGZ;AACF;AAvFqB,OACZ,SAAyB,CAAC,0BAAiB,oBAAQ,yBAAY;AADnD,OAEZ,eAAe,EAAE,mBAAmB,cAAc;AAO1C;AAAA,EAAd,MAAM,MAAM;AAAA,GATM,OASJ;AAGc;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAZR,OAYU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,OAeyB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlBvB,OAkByB;AAGA;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArBvB,OAqByB;AAMD;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3BtB,OA2BwB;AAa3C;AAAA,EADC,MAAM,QAAQ;AAAA,GAvCI,OAwCnB;AAKA;AAAA,EADC,MAAM,UAAU;AAAA,GA5CE,OA6CnB;",
+  "names": []
+}

package/dist/chunks/{chunk.YIQSTAST.js → chunk.NVYIJYVF.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.WFKDRXA5.js";
+} from "./chunk.5IMXX2BZ.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.YIQSTAST.js.map
+//# sourceMappingURL=chunk.NVYIJYVF.js.map

package/dist/chunks/{chunk.75RQ52LL.js → chunk.NWA2ZKLU.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.ATRUHDOS.js";
+} from "./chunk.U6HWY6PL.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.75RQ52LL.js.map
+//# sourceMappingURL=chunk.NWA2ZKLU.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/dropdown/dropdown.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport SynDropdown from './dropdown.component.js';\n\nexport * from './dropdown.component.js';\nexport default SynDropdown;\n\nSynDropdown.define('syn-dropdown');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-dropdown': SynDropdown;\n  }\n}\n"],
+  "mappings": ";;;;;AAIA,IAAO,mBAAQ;AAEf,YAAY,OAAO,cAAc;",
+  "names": []
+}