@synergy-design-system/components 2.5.0 → 2.7.0

package/dist/chunks/{chunk.QVNMCS3Y.js → chunk.YGBYTIEC.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.CZISOWFR.js";
+} from "./chunk.4WDBHKEV.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.QVNMCS3Y.js.map
+//# sourceMappingURL=chunk.YGBYTIEC.js.map

package/dist/chunks/{chunk.WEUMPGAL.js → chunk.YMC6ML2J.js}

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.OP4WTQ2R.js";
+} from "./chunk.DGSAPH64.js";
 
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.WEUMPGAL.js.map
+//# sourceMappingURL=chunk.YMC6ML2J.js.map

package/dist/chunks/{chunk.ZXLXQMJJ.js → chunk.YVPJSA6G.js}

@@ -9,14 +9,14 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   watch
-} from "./chunk.QJMO7V5R.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -111,4 +111,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.ZXLXQMJJ.js.map
+//# sourceMappingURL=chunk.YVPJSA6G.js.map

package/dist/chunks/{chunk.4U4U4WYP.js → chunk.YXKAU762.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.APPDW65F.js";
+} from "./chunk.7YRTMCIL.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.4U4U4WYP.js.map
+//# sourceMappingURL=chunk.YXKAU762.js.map

package/dist/chunks/{chunk.GOXWNSOG.js → chunk.Z2AJQ6S4.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   watch
-} from "./chunk.QJMO7V5R.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/radio-button/radio-button.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -86,7 +86,6 @@ var SynRadioButton = class extends SynergyElement {
           aria-disabled=${this.disabled}
           type="button"
           value=${ifDefined(this.value)}
-          tabindex="${this.checked ? "0" : "-1"}"
           @blur=${this.handleBlur}
           @focus=${this.handleFocus}
           @click=${this.handleClick}
@@ -131,4 +130,4 @@ __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.GOXWNSOG.js.map
+//# sourceMappingURL=chunk.Z2AJQ6S4.js.map

package/dist/chunks/{chunk.GOXWNSOG.js.map → chunk.Z2AJQ6S4.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/radio-button/radio-button.component.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit/static-html.js';\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 './radio-button.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynRadioButton extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n\n  @query('.button') input: HTMLInputElement;\n  @query('.hidden-input') hiddenInput: HTMLInputElement;\n\n  @state() protected hasFocus = false;\n\n  /**\n   * @internal The radio button's checked state. This is exposed as an \"internal\" attribute so we can reflect it, making\n   * it easier to style in button groups.\n   */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string;\n\n  /** Disables the radio button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\n   * this attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style radio button with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.checked = true;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  /** Sets focus on the radio button. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio button. */\n  blur() {\n    this.input.blur();\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" role=\"presentation\">\n        <button\n          part=\"${`button${this.checked ? ' button--checked' : ''}`}\"\n          role=\"radio\"\n          aria-checked=\"${this.checked}\"\n          class=${classMap({\n            button: true,\n            'button--default': true,\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n            'button--checked': this.checked,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--outline': true,\n            'button--pill': this.pill,\n            'button--has-label': this.hasSlotController.test('[default]'),\n            'button--has-prefix': this.hasSlotController.test('prefix'),\n            'button--has-suffix': this.hasSlotController.test('suffix')\n          })}\n          aria-disabled=${this.disabled}\n          type=\"button\"\n          value=${ifDefined(this.value)}\n          tabindex=\"${this.checked ? '0' : '-1'}\"\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n        >\n          <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n          <slot part=\"label\" class=\"button__label\"></slot>\n          <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        </button>\n      </div>\n    `;\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,OAAO,aAAa;AA2BvC,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,UAAU,QAAQ;AAKvF,SAAU,WAAW;AAMc,mBAAU;AAMV,oBAAW;AAM1B,gBAAqC;AAGtB,gBAAO;AAAA;AAAA,EAEnD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,cAAc;AAAA,EAC1C;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,YAAY,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB;AAAA,IACF;AAEA,SAAK,UAAU;AAAA,EACjB;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,kBAGO,SAAS,KAAK,UAAU,qBAAqB,EAAE,EAAE;AAAA;AAAA,0BAEzC,KAAK,OAAO;AAAA,kBACpB,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,iBAAiB,KAAK,SAAS;AAAA,MAC/B,kBAAkB,KAAK,SAAS;AAAA,MAChC,iBAAiB,KAAK,SAAS;AAAA,MAC/B,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB;AAAA,MACnB,gBAAgB,KAAK;AAAA,MACrB,qBAAqB,KAAK,kBAAkB,KAAK,WAAW;AAAA,MAC5D,sBAAsB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MAC1D,sBAAsB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IAC5D,CAAC,CAAC;AAAA,0BACc,KAAK,QAAQ;AAAA;AAAA,kBAErB,UAAU,KAAK,KAAK,CAAC;AAAA,sBACjB,KAAK,UAAU,MAAM,IAAI;AAAA,kBAC7B,KAAK,UAAU;AAAA,mBACd,KAAK,WAAW;AAAA,mBAChB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjC;AACF;AA5GqB,eACZ,SAAyB,CAAC,0BAAiB,2BAAM;AAItC;AAAA,EAAjB,MAAM,SAAS;AAAA,GALG,eAKD;AACM;AAAA,EAAvB,MAAM,eAAe;AAAA,GANH,eAMK;AAEL;AAAA,EAAlB,MAAM;AAAA,GARY,eAQA;AAMyB;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAdvB,eAcyB;AAGhC;AAAA,EAAX,SAAS;AAAA,GAjBS,eAiBP;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApBvB,eAoByB;AAMf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA1BR,eA0BU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BvB,eA6ByB;AA4B5C;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAxD9B,eAyDnB;",
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit/static-html.js';\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 './radio-button.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Radios buttons allow the user to select a single option from a group using a button-like control.\n * @documentation https://synergy.style/components/radio-button\n * @status stable\n * @since 2.0\n *\n * @slot - The radio button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @event syn-blur - Emitted when the button loses focus.\n * @event syn-focus - Emitted when the button gains focus.\n *\n * @csspart base - The component's base wrapper.\n * @csspart button - The internal `<button>` element.\n * @csspart button--checked - The internal button element when the radio button is checked.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The container that wraps the radio button's label.\n * @csspart suffix - The container that wraps the suffix.\n */\nexport default class SynRadioButton extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');\n\n  @query('.button') input: HTMLInputElement;\n  @query('.hidden-input') hiddenInput: HTMLInputElement;\n\n  @state() protected hasFocus = false;\n\n  /**\n   * @internal The radio button's checked state. This is exposed as an \"internal\" attribute so we can reflect it, making\n   * it easier to style in button groups.\n   */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** The radio's value. When selected, the radio group will receive this value. */\n  @property() value: string;\n\n  /** Disables the radio button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so\n   * this attribute can typically be omitted.\n   */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Draws a pill-style radio button with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.checked = true;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  /** Sets focus on the radio button. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the radio button. */\n  blur() {\n    this.input.blur();\n  }\n\n  render() {\n    return html`\n      <div part=\"base\" role=\"presentation\">\n        <button\n          part=\"${`button${this.checked ? ' button--checked' : ''}`}\"\n          role=\"radio\"\n          aria-checked=\"${this.checked}\"\n          class=${classMap({\n            button: true,\n            'button--default': true,\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n            'button--checked': this.checked,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--outline': true,\n            'button--pill': this.pill,\n            'button--has-label': this.hasSlotController.test('[default]'),\n            'button--has-prefix': this.hasSlotController.test('prefix'),\n            'button--has-suffix': this.hasSlotController.test('suffix')\n          })}\n          aria-disabled=${this.disabled}\n          type=\"button\"\n          value=${ifDefined(this.value)}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n        >\n          <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n          <slot part=\"label\" class=\"button__label\"></slot>\n          <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        </button>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAQA,SAAS,gBAAgB;AAEzB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B,SAAS,UAAU,OAAO,aAAa;AA2BvC,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAGE,SAAiB,oBAAoB,IAAI,kBAAkB,MAAM,aAAa,UAAU,QAAQ;AAKvF,SAAU,WAAW;AAMc,mBAAU;AAMV,oBAAW;AAM1B,gBAAqC;AAGtB,gBAAO;AAAA;AAAA,EAEnD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,cAAc;AAAA,EAC1C;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW;AAChB,SAAK,KAAK,UAAU;AAAA,EACtB;AAAA,EAEQ,YAAY,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB;AAAA,IACF;AAEA,SAAK,UAAU;AAAA,EACjB;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW;AAChB,SAAK,KAAK,WAAW;AAAA,EACvB;AAAA,EAGA,uBAAuB;AACrB,SAAK,aAAa,iBAAiB,KAAK,WAAW,SAAS,OAAO;AAAA,EACrE;AAAA;AAAA,EAGA,MAAM,SAAwB;AAC5B,SAAK,MAAM,MAAM,OAAO;AAAA,EAC1B;AAAA;AAAA,EAGA,OAAO;AACL,SAAK,MAAM,KAAK;AAAA,EAClB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,kBAGO,SAAS,KAAK,UAAU,qBAAqB,EAAE,EAAE;AAAA;AAAA,0BAEzC,KAAK,OAAO;AAAA,kBACpB,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,iBAAiB,KAAK,SAAS;AAAA,MAC/B,kBAAkB,KAAK,SAAS;AAAA,MAChC,iBAAiB,KAAK,SAAS;AAAA,MAC/B,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB;AAAA,MACnB,gBAAgB,KAAK;AAAA,MACrB,qBAAqB,KAAK,kBAAkB,KAAK,WAAW;AAAA,MAC5D,sBAAsB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,MAC1D,sBAAsB,KAAK,kBAAkB,KAAK,QAAQ;AAAA,IAC5D,CAAC,CAAC;AAAA,0BACc,KAAK,QAAQ;AAAA;AAAA,kBAErB,UAAU,KAAK,KAAK,CAAC;AAAA,kBACrB,KAAK,UAAU;AAAA,mBACd,KAAK,WAAW;AAAA,mBAChB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjC;AACF;AA3GqB,eACZ,SAAyB,CAAC,0BAAiB,2BAAM;AAItC;AAAA,EAAjB,MAAM,SAAS;AAAA,GALG,eAKD;AACM;AAAA,EAAvB,MAAM,eAAe;AAAA,GANH,eAMK;AAEL;AAAA,EAAlB,MAAM;AAAA,GARY,eAQA;AAMyB;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAdvB,eAcyB;AAGhC;AAAA,EAAX,SAAS;AAAA,GAjBS,eAiBP;AAGgC;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApBvB,eAoByB;AAMf;AAAA,EAA5B,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GA1BR,eA0BU;AAGe;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA7BvB,eA6ByB;AA4B5C;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GAxD9B,eAyDnB;",
   "names": []
 }

package/dist/chunks/{chunk.XD3FB2XT.js → chunk.ZIJ6OGAT.js}

@@ -7,26 +7,26 @@ import {
 } from "./chunk.XNP4OTUB.js";
 import {
   SynNavItem
-} from "./chunk.CZISOWFR.js";
+} from "./chunk.4WDBHKEV.js";
 import {
   SynMenu
-} from "./chunk.PGDHCGHK.js";
+} from "./chunk.RQA3KF7H.js";
 import {
   SynDropdown
-} from "./chunk.HPWFMICA.js";
+} from "./chunk.3BYNCSYI.js";
 import {
   SynIcon
-} from "./chunk.OUSXEKQG.js";
+} from "./chunk.XNGZHSRO.js";
 import {
   LocalizeController
-} from "./chunk.ZTEMBLJH.js";
+} from "./chunk.ESQAXAFE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/prio-nav/prio-nav.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -205,4 +205,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.XD3FB2XT.js.map
+//# sourceMappingURL=chunk.ZIJ6OGAT.js.map

package/dist/chunks/{chunk.T4MHUMBJ.js → chunk.ZRQDODBI.js}

@@ -6,37 +6,37 @@ import {
 } from "./chunk.3B22DBSJ.js";
 import {
   SynDivider
-} from "./chunk.HVJGBGHT.js";
+} from "./chunk.EZRPX4D7.js";
 import {
   defaultValue
 } from "./chunk.RBG37CD4.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.HLE65RI4.js";
+} from "./chunk.FKKJBKYL.js";
 import {
   FormControlController
-} from "./chunk.QBVLTYU7.js";
+} from "./chunk.BBNQVEPD.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.OUSXEKQG.js";
+} from "./chunk.XNGZHSRO.js";
 import {
   LocalizeController
-} from "./chunk.ZTEMBLJH.js";
+} from "./chunk.ESQAXAFE.js";
 import {
   watch
-} from "./chunk.QJMO7V5R.js";
+} from "./chunk.74IOULXM.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 import {
   __decorateClass,
   __spreadValues
-} from "./chunk.QNDC5KWA.js";
+} from "./chunk.2GFK6XTO.js";
 
 // src/components/input/input.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -642,4 +642,4 @@ __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.T4MHUMBJ.js.map
+//# sourceMappingURL=chunk.ZRQDODBI.js.map

package/dist/chunks/{chunk.OE4RXQU2.js → chunk.ZW75HBAK.js}

@@ -28,11 +28,11 @@ var tab_custom_styles_default = css`
   /**
    * Focus
    */
-  .tab:focus-visible {
+  :host(:focus-visible) {
     outline-offset: calc(var(--syn-focus-ring-offset) * -1);
   }
 
-  .tab:focus-visible:not(.tab--disabled) {
+  :host(:focus-visible:not(.tab--disabled)) {
     color: var(--syn-typography-color-text);
   }
 
@@ -89,4 +89,4 @@ var tab_custom_styles_default = css`
 export {
   tab_custom_styles_default
 };
-//# sourceMappingURL=chunk.OE4RXQU2.js.map
+//# sourceMappingURL=chunk.ZW75HBAK.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab/tab.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* Write custom CSS here */\n\n  :host {\n    --background-color: none;\n    --border-width: var(--syn-border-width-none);\n    --border-color: none;\n    --border-radius: var(--syn-border-radius-none);\n  }\n\n  .tab {\n    border-color: transparent;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    color: var(--syn-typography-color-text);\n    font: var(--syn-body-small-bold);\n    min-height: var(--syn-spacing-2x-large);\n    padding: var(--syn-spacing-small) var(--syn-spacing-large);\n\n    /* Stretch the tabs so they are aligned to each other vertically and the focus width stays the same  */\n    width: 100%;\n  }\n\n\n  /**\n   * Focus\n   */\n  :host(:focus-visible) {\n    outline-offset: calc(var(--syn-focus-ring-offset) * -1);\n  }\n\n  :host(:focus-visible:not(.tab--disabled)) {\n    color: var(--syn-typography-color-text);\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline-offset: calc(var(--syn-focus-ring-offset) * -1);\n    }\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--syn-color-primary-700);\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--syn-typography-color-text);\n  }\n\n\n  /**\n   * Closable\n   */\n  .tab.tab--closable {\n    padding: var(--syn-spacing-2x-small) var(--syn-spacing-large);\n  }\n\n  .tab__close-button {\n    color: var(--syn-color-neutral-500);\n    font-size: var(--syn-font-size-x-large);\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--syn-spacing-x-small);\n  }\n\n  .tab__close-button::part(base):hover {\n    color: var(--syn-color-primary-700);\n  }\n\n  .tab--active {\n    background-color: var(--background-color);\n    border-color: var(--border-color);\n    border-style: solid;\n    border-width: var(--border-width);\n  }\n\n  /* Slotted icon style */\n  .tab ::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,4BAAQ;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.LAKJ5MK2.js → chunk.ZWKWTOIU.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.X6GR6IA2.js";
 import {
   SynDivider
-} from "./chunk.HVJGBGHT.js";
+} from "./chunk.EZRPX4D7.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.BWVISANJ.js";
+} from "./chunk.JTYYYMG2.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -32,4 +32,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.LAKJ5MK2.js.map
+//# sourceMappingURL=chunk.ZWKWTOIU.js.map

package/dist/components/accordion/accordion.component.js

@@ -1,10 +1,10 @@
 import {
   SynAccordion
-} from "../../chunks/chunk.TCGQ6I55.js";
+} from "../../chunks/chunk.FPIGVZSR.js";
 import "../../chunks/chunk.WNUZ6LH4.js";
-import "../../chunks/chunk.QJMO7V5R.js";
-import "../../chunks/chunk.BWVISANJ.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.JTYYYMG2.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynAccordion as default
 };

package/dist/components/accordion/accordion.js

@@ -1,11 +1,11 @@
 import {
   accordion_default
-} from "../../chunks/chunk.OAD4GL57.js";
-import "../../chunks/chunk.TCGQ6I55.js";
+} from "../../chunks/chunk.QTUPZKVS.js";
+import "../../chunks/chunk.FPIGVZSR.js";
 import "../../chunks/chunk.WNUZ6LH4.js";
-import "../../chunks/chunk.QJMO7V5R.js";
-import "../../chunks/chunk.BWVISANJ.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.JTYYYMG2.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   accordion_default as default
 };

package/dist/components/accordion/accordion.styles.js

@@ -1,7 +1,7 @@
 import {
   accordion_styles_default
 } from "../../chunks/chunk.WNUZ6LH4.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   accordion_styles_default as default
 };

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

@@ -1,27 +1,27 @@
 import {
   SynAlert
-} from "../../chunks/chunk.EPEJDXFO.js";
-import "../../chunks/chunk.GZQPS6JH.js";
+} from "../../chunks/chunk.JS5QB2ZL.js";
+import "../../chunks/chunk.RKZLWXOJ.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.DZ7YIR5N.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.MLOZ4D3V.js";
-import "../../chunks/chunk.MSUX23ZJ.js";
+import "../../chunks/chunk.A3OYJILJ.js";
+import "../../chunks/chunk.HQ6QUSK7.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.OUSXEKQG.js";
+import "../../chunks/chunk.XNGZHSRO.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
 import "../../chunks/chunk.543GQUFN.js";
 import "../../chunks/chunk.YTEJW7IF.js";
 import "../../chunks/chunk.AINKZEUX.js";
 import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.ZTEMBLJH.js";
-import "../../chunks/chunk.JSPLWE2A.js";
+import "../../chunks/chunk.ESQAXAFE.js";
+import "../../chunks/chunk.GHGGBS4N.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.QJMO7V5R.js";
-import "../../chunks/chunk.BWVISANJ.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.JTYYYMG2.js";
 import "../../chunks/chunk.JRYXECAY.js";
 import "../../chunks/chunk.KG73YUXI.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynAlert as default
 };

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

@@ -1,7 +1,7 @@
 import {
   alert_custom_styles_default
 } from "../../chunks/chunk.JRYXECAY.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   alert_custom_styles_default as default
 };

package/dist/components/alert/alert.js

@@ -1,28 +1,28 @@
 import {
   alert_default
-} from "../../chunks/chunk.ZHDP4GU5.js";
-import "../../chunks/chunk.EPEJDXFO.js";
-import "../../chunks/chunk.GZQPS6JH.js";
+} from "../../chunks/chunk.JWDKROBJ.js";
+import "../../chunks/chunk.JS5QB2ZL.js";
+import "../../chunks/chunk.RKZLWXOJ.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.DZ7YIR5N.js";
 import "../../chunks/chunk.C2ENQBPM.js";
-import "../../chunks/chunk.MLOZ4D3V.js";
-import "../../chunks/chunk.MSUX23ZJ.js";
+import "../../chunks/chunk.A3OYJILJ.js";
+import "../../chunks/chunk.HQ6QUSK7.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.OUSXEKQG.js";
+import "../../chunks/chunk.XNGZHSRO.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
 import "../../chunks/chunk.543GQUFN.js";
 import "../../chunks/chunk.YTEJW7IF.js";
 import "../../chunks/chunk.AINKZEUX.js";
 import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.ZTEMBLJH.js";
-import "../../chunks/chunk.JSPLWE2A.js";
+import "../../chunks/chunk.ESQAXAFE.js";
+import "../../chunks/chunk.GHGGBS4N.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.QJMO7V5R.js";
-import "../../chunks/chunk.BWVISANJ.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.JTYYYMG2.js";
 import "../../chunks/chunk.JRYXECAY.js";
 import "../../chunks/chunk.KG73YUXI.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   alert_default as default
 };

package/dist/components/alert/alert.styles.js

@@ -1,7 +1,7 @@
 import {
   alert_styles_default
 } from "../../chunks/chunk.KG73YUXI.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   alert_styles_default as default
 };

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

@@ -1,12 +1,12 @@
 import {
   SynBadge
-} from "../../chunks/chunk.EG23UW3V.js";
+} from "../../chunks/chunk.FK6MAJIJ.js";
 import "../../chunks/chunk.WQJRBFZA.js";
 import "../../chunks/chunk.Y5TMYX2L.js";
-import "../../chunks/chunk.ZTEMBLJH.js";
-import "../../chunks/chunk.JSPLWE2A.js";
-import "../../chunks/chunk.BWVISANJ.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.ESQAXAFE.js";
+import "../../chunks/chunk.GHGGBS4N.js";
+import "../../chunks/chunk.JTYYYMG2.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynBadge as default
 };

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

@@ -1,7 +1,7 @@
 import {
   badge_custom_styles_default
 } from "../../chunks/chunk.WQJRBFZA.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   badge_custom_styles_default as default
 };

package/dist/components/badge/badge.js

@@ -1,13 +1,13 @@
 import {
   badge_default
-} from "../../chunks/chunk.A45QGUNM.js";
-import "../../chunks/chunk.EG23UW3V.js";
+} from "../../chunks/chunk.D23EOBAA.js";
+import "../../chunks/chunk.FK6MAJIJ.js";
 import "../../chunks/chunk.WQJRBFZA.js";
 import "../../chunks/chunk.Y5TMYX2L.js";
-import "../../chunks/chunk.ZTEMBLJH.js";
-import "../../chunks/chunk.JSPLWE2A.js";
-import "../../chunks/chunk.BWVISANJ.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.ESQAXAFE.js";
+import "../../chunks/chunk.GHGGBS4N.js";
+import "../../chunks/chunk.JTYYYMG2.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   badge_default as default
 };

package/dist/components/badge/badge.styles.js

@@ -1,7 +1,7 @@
 import {
   badge_styles_default
 } from "../../chunks/chunk.Y5TMYX2L.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   badge_styles_default as default
 };

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

@@ -1,20 +1,20 @@
 import {
   SynBreadcrumb
-} from "../../chunks/chunk.4VJLNO6Y.js";
+} from "../../chunks/chunk.BHYMSPYR.js";
 import "../../chunks/chunk.32CYREEV.js";
 import "../../chunks/chunk.S22BO5SF.js";
-import "../../chunks/chunk.OUSXEKQG.js";
+import "../../chunks/chunk.XNGZHSRO.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
 import "../../chunks/chunk.543GQUFN.js";
 import "../../chunks/chunk.YTEJW7IF.js";
 import "../../chunks/chunk.AINKZEUX.js";
 import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.ZTEMBLJH.js";
-import "../../chunks/chunk.JSPLWE2A.js";
+import "../../chunks/chunk.ESQAXAFE.js";
+import "../../chunks/chunk.GHGGBS4N.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.QJMO7V5R.js";
-import "../../chunks/chunk.BWVISANJ.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.JTYYYMG2.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynBreadcrumb as default
 };

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

@@ -1,7 +1,7 @@
 import {
   breadcrumb_custom_styles_default
 } from "../../chunks/chunk.32CYREEV.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   breadcrumb_custom_styles_default as default
 };

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,21 +1,21 @@
 import {
   breadcrumb_default
-} from "../../chunks/chunk.VREBZRBU.js";
-import "../../chunks/chunk.4VJLNO6Y.js";
+} from "../../chunks/chunk.TLNHPNZP.js";
+import "../../chunks/chunk.BHYMSPYR.js";
 import "../../chunks/chunk.32CYREEV.js";
 import "../../chunks/chunk.S22BO5SF.js";
-import "../../chunks/chunk.OUSXEKQG.js";
+import "../../chunks/chunk.XNGZHSRO.js";
 import "../../chunks/chunk.ZBW4ZSZ7.js";
 import "../../chunks/chunk.543GQUFN.js";
 import "../../chunks/chunk.YTEJW7IF.js";
 import "../../chunks/chunk.AINKZEUX.js";
 import "../../chunks/chunk.PJO6TM3T.js";
-import "../../chunks/chunk.ZTEMBLJH.js";
-import "../../chunks/chunk.JSPLWE2A.js";
+import "../../chunks/chunk.ESQAXAFE.js";
+import "../../chunks/chunk.GHGGBS4N.js";
 import "../../chunks/chunk.234ERFCE.js";
-import "../../chunks/chunk.QJMO7V5R.js";
-import "../../chunks/chunk.BWVISANJ.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.JTYYYMG2.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   breadcrumb_default as default
 };

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

@@ -1,7 +1,7 @@
 import {
   breadcrumb_styles_default
 } from "../../chunks/chunk.S22BO5SF.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   breadcrumb_styles_default as default
 };

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

@@ -1,12 +1,12 @@
 import {
   SynBreadcrumbItem
-} from "../../chunks/chunk.ZXLXQMJJ.js";
+} from "../../chunks/chunk.YVPJSA6G.js";
 import "../../chunks/chunk.NGIGPLN2.js";
 import "../../chunks/chunk.O6ZH6AOI.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.QJMO7V5R.js";
-import "../../chunks/chunk.BWVISANJ.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.JTYYYMG2.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   SynBreadcrumbItem as default
 };

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

@@ -1,7 +1,7 @@
 import {
   breadcrumb_item_custom_styles_default
 } from "../../chunks/chunk.NGIGPLN2.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   breadcrumb_item_custom_styles_default as default
 };

package/dist/components/breadcrumb-item/breadcrumb-item.js

@@ -1,13 +1,13 @@
 import {
   breadcrumb_item_default
-} from "../../chunks/chunk.BZ7DXEKT.js";
-import "../../chunks/chunk.ZXLXQMJJ.js";
+} from "../../chunks/chunk.7I5Q3H5W.js";
+import "../../chunks/chunk.YVPJSA6G.js";
 import "../../chunks/chunk.NGIGPLN2.js";
 import "../../chunks/chunk.O6ZH6AOI.js";
 import "../../chunks/chunk.WVVQK5TE.js";
-import "../../chunks/chunk.QJMO7V5R.js";
-import "../../chunks/chunk.BWVISANJ.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.74IOULXM.js";
+import "../../chunks/chunk.JTYYYMG2.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   breadcrumb_item_default as default
 };

package/dist/components/breadcrumb-item/breadcrumb-item.styles.js

@@ -1,7 +1,7 @@
 import {
   breadcrumb_item_styles_default
 } from "../../chunks/chunk.O6ZH6AOI.js";
-import "../../chunks/chunk.QNDC5KWA.js";
+import "../../chunks/chunk.2GFK6XTO.js";
 export {
   breadcrumb_item_styles_default as default
 };