@synergy-design-system/components 1.26.3 → 1.27.0

package/dist/chunks/{chunk.FVAYVJOR.js → chunk.GUJCUZXE.js}

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

package/dist/chunks/{chunk.K55MKNUR.js → chunk.I25TRQGB.js}

@@ -28,6 +28,37 @@ var button_custom_styles_default = css`
     padding-inline-end: var(--syn-spacing-x-small);
   }
 
+  /**
+   * Icon-only buttons
+   */
+  .button--small .button__label.button__icon-only {
+    padding: 0 calc(var(--syn-spacing-x-small) + var(--syn-spacing-4x-small));
+  }
+
+  .button--small .button__label::slotted(syn-icon) {
+    font-size: var(--syn-font-size-medium);
+    vertical-align: -3px;
+  }
+
+  .button--medium .button__label.button__icon-only {
+    padding: 0 calc(var(--syn-spacing-small) - var(--syn-spacing-4x-small));
+  }
+
+  .button--medium .button__label::slotted(syn-icon) {
+    font-size: var(--syn-font-size-x-large);
+    vertical-align: -6px;
+  }
+
+  .button--large .button__label.button__icon-only {
+    padding: 0 calc(var(--syn-spacing-medium) - var(--syn-spacing-4x-small));
+  }
+
+  .button--large .button__label::slotted(syn-icon) {
+    font-size: var(--syn-font-size-2x-large);
+    vertical-align: -8px;
+  }
+
+
   /**
    * Size modifiers
    */
@@ -153,4 +184,4 @@ var button_custom_styles_default = css`
 export {
   button_custom_styles_default
 };
-//# sourceMappingURL=chunk.K55MKNUR.js.map
+//# sourceMappingURL=chunk.I25TRQGB.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button/button.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .button:focus-visible {\n    outline: var(--syn-focus-ring-color) solid var(--syn-focus-ring-width);\n    outline-offset: var(--syn-focus-ring-width);\n  }\n\n  /*\n   * Adjustments for button label paddings\n   * @see https://github.com/synergy-design-system/synergy-design-system/issues/243\n   */\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-suffix.button--small .button__label,\n  .button--caret.button--small .button__label {\n    padding-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--syn-spacing-x-small);\n  }\n\n  /**\n   * Icon-only buttons\n   */\n  .button--small .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-x-small) + var(--syn-spacing-4x-small));\n  }\n\n  .button--small .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n    vertical-align: -3px;\n  }\n\n  .button--medium .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-small) - var(--syn-spacing-4x-small));\n  }\n\n  .button--medium .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n    vertical-align: -6px;\n  }\n\n  .button--large .button__label.button__icon-only {\n    padding: 0 calc(var(--syn-spacing-medium) - var(--syn-spacing-4x-small));\n  }\n\n  .button--large .button__label::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n    vertical-align: -8px;\n  }\n\n\n  /**\n   * Size modifiers\n   */\n  .button.button--medium.button--has-label .button__label {\n    font-size: var(--syn-font-size-medium);\n  } \n\n  .button.button--large.button--has-label .button__label {\n    font-size: var(--syn-font-size-large);\n  }\n\n  /*\n   * Standard buttons\n   */\n  .button--filled.button--primary.button--disabled {\n    background-color: var(--syn-color-neutral-600);\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--filled.button--primary:hover:not(.button--disabled) {\n    background-color: var(--syn-color-primary-900);\n    border-color: var(--syn-color-primary-900);\n    color: var(--syn-color-neutral-0);\n  }\n\n  .button--filled.button--primary:active:not(.button--disabled) {\n    background-color: var(--syn-color-primary-950);\n    border-color: var(--syn-color-primary-950);\n    color: var(--syn-color-neutral-0);\n  }\n\n  /*\n   * Outline buttons\n   */\n  .button--outline.button--primary.button--disabled {\n    background: none;\n    border-color: var(--syn-color-neutral-600);\n    color: var(--syn-color-neutral-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    background: none;\n    border-color: var(--syn-color-primary-900);\n    color: var(--syn-color-primary-900);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    background: inherit;\n    border-color:  var(--syn-color-primary-950);\n    color:  var(--syn-color-primary-950);\n  }\n\n  /*\n   * Text buttons\n   */\n  .button--text:hover:not(.button--disabled) {\n    color: var(--syn-color-primary-900);\n  }\n\n  .button--text.button--primary:active:not(.button--disabled) {\n    background: inherit;\n    border-color:  none;\n    color:  var(--syn-color-primary-950);\n  }\n\n  .button--text.button--primary.button--disabled {\n    color: var(--syn-color-neutral-600);\n  }\n\n  /**\n   * Button spacing\n   */\n  .button.button--small.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--small.button--has-prefix .button__prefix, \n  .button.button--small.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-medium);\n  } \n\n  .button.button--medium.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-medium);\n  }\n\n  .button.button--medium.button--has-prefix .button__prefix, \n  .button.button--medium.button--has-suffix .button__suffix {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix {\n    padding-inline-start: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-prefix .button__label {\n    padding-inline-start: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix {\n    padding-inline-end: var(--syn-spacing-large);\n  }\n\n  .button.button--large.button--has-label.button--has-suffix .button__label {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .button.button--large.button--has-prefix .button__prefix, \n  .button.button--large.button--has-suffix .button__suffix {\n    font-size: var(--syn-font-size-2x-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;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;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.XFQA6HSG.js → chunk.I2EUWBRS.js}

@@ -23,7 +23,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -247,4 +247,4 @@ __decorateClass([
 export {
   SynSwitch
 };
-//# sourceMappingURL=chunk.XFQA6HSG.js.map
+//# sourceMappingURL=chunk.I2EUWBRS.js.map

package/dist/chunks/{chunk.PQA5E2KT.js → chunk.IC2DDTSC.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.WMPH6XNS.js";
+} from "./chunk.RU4ZC6UP.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.PQA5E2KT.js.map
+//# sourceMappingURL=chunk.IC2DDTSC.js.map

package/dist/chunks/{chunk.76ZYU7FP.js → chunk.ILTSTORV.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -33,4 +33,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.76ZYU7FP.js.map
+//# sourceMappingURL=chunk.ILTSTORV.js.map

package/dist/chunks/{chunk.2SIDXOSZ.js → chunk.IODSZKC3.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -128,4 +128,4 @@ __decorateClass([
 export {
   SynMenu
 };
-//# sourceMappingURL=chunk.2SIDXOSZ.js.map
+//# sourceMappingURL=chunk.IODSZKC3.js.map

package/dist/chunks/{chunk.BKRBAXKT.js → chunk.JH2RNNHN.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.7AKOP74Y.js";
+} from "./chunk.TUIMTZS3.js";
 import {
   animateTo,
   stopAnimations,
@@ -28,7 +28,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -214,4 +214,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.BKRBAXKT.js.map
+//# sourceMappingURL=chunk.JH2RNNHN.js.map

package/dist/chunks/{chunk.C5A5WD47.js → chunk.JM6D5VUH.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.JA2OZESQ.js";
+} from "./chunk.KPSGO6JT.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.C5A5WD47.js.map
+//# sourceMappingURL=chunk.JM6D5VUH.js.map

package/dist/chunks/{chunk.VDXCXYVH.js → chunk.JVN6QVKB.js}

@@ -15,7 +15,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -182,4 +182,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.VDXCXYVH.js.map
+//# sourceMappingURL=chunk.JVN6QVKB.js.map

package/dist/chunks/{chunk.JA2OZESQ.js → chunk.KPSGO6JT.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.GO3CCKC3.js";
 import {
   SynDrawer
-} from "./chunk.VCCNNIFT.js";
+} from "./chunk.EBLECPJG.js";
 import {
   unlockBodyScrolling
 } from "./chunk.RIJKFEYZ.js";
 import {
   SynDivider
-} from "./chunk.3CFA7XFK.js";
+} from "./chunk.FGE6BQJ3.js";
 import {
   waitForEvent
 } from "./chunk.UMKKOHXB.js";
@@ -30,7 +30,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -283,4 +283,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.JA2OZESQ.js.map
+//# sourceMappingURL=chunk.KPSGO6JT.js.map

package/dist/chunks/{chunk.3GFGOLCS.js → chunk.KQHYIQJN.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.S3TKXGGY.js";
+} from "./chunk.BKPZVGJQ.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.3GFGOLCS.js.map
+//# sourceMappingURL=chunk.KQHYIQJN.js.map

package/dist/chunks/{chunk.3DVHRAZI.js → chunk.LDKF7GK5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.FAAETEJ2.js";
 import {
   SynDivider
-} from "./chunk.3CFA7XFK.js";
+} from "./chunk.FGE6BQJ3.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -13,7 +13,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -316,4 +316,4 @@ __decorateClass([
 export {
   SynNavItem
 };
-//# sourceMappingURL=chunk.3DVHRAZI.js.map
+//# sourceMappingURL=chunk.LDKF7GK5.js.map

package/dist/chunks/{chunk.OXCLOKNC.js → chunk.MOGGUYYP.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.3FOVDOJX.js";
 import {
   SynDivider
-} from "./chunk.3CFA7XFK.js";
+} from "./chunk.FGE6BQJ3.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -32,4 +32,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.OXCLOKNC.js.map
+//# sourceMappingURL=chunk.MOGGUYYP.js.map

package/dist/chunks/{chunk.74JW5RH5.js → chunk.N6ZPVKHZ.js}

@@ -9,13 +9,13 @@ import {
 } from "./chunk.JDBDBGQP.js";
 import {
   SynPopup
-} from "./chunk.4DCJOLFH.js";
+} from "./chunk.UHHXPHZM.js";
 import {
   SynSpinner
-} from "./chunk.76ZYU7FP.js";
+} from "./chunk.ILTSTORV.js";
 import {
   SynIcon
-} from "./chunk.VDXCXYVH.js";
+} from "./chunk.JVN6QVKB.js";
 import {
   HasSlotController,
   getTextContent
@@ -29,7 +29,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.74JW5RH5.js.map
+//# sourceMappingURL=chunk.N6ZPVKHZ.js.map

package/dist/chunks/{chunk.GVW2OKPO.js → chunk.NTXHHR4Y.js}

@@ -1,6 +1,6 @@
 import {
   SynCard
-} from "./chunk.Y4S7OQCH.js";
+} from "./chunk.7ERFK5ZT.js";
 
 // src/components/card/card.ts
 var card_default = SynCard;
@@ -9,4 +9,4 @@ SynCard.define("syn-card");
 export {
   card_default
 };
-//# sourceMappingURL=chunk.GVW2OKPO.js.map
+//# sourceMappingURL=chunk.NTXHHR4Y.js.map

package/dist/chunks/{chunk.54LY4U2T.js → chunk.O3YPM3KC.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.DHKKEGKR.js";
+} from "./chunk.QLDA2CKN.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.54LY4U2T.js.map
+//# sourceMappingURL=chunk.O3YPM3KC.js.map

package/dist/chunks/{chunk.PAJ7L5NY.js → chunk.O7UOM5HF.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -28,6 +28,7 @@ var SynRadioButton = class extends SynergyElement {
     this.checked = false;
     this.disabled = false;
     this.size = "medium";
+    this.pill = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -69,6 +70,7 @@ var SynRadioButton = class extends SynergyElement {
           aria-checked="${this.checked}"
           class=${classMap({
       button: true,
+      "button--default": true,
       "button--small": this.size === "small",
       "button--medium": this.size === "medium",
       "button--large": this.size === "large",
@@ -76,6 +78,7 @@ var SynRadioButton = class extends SynergyElement {
       "button--disabled": this.disabled,
       "button--focused": this.hasFocus,
       "button--outline": true,
+      "button--pill": this.pill,
       "button--has-label": this.hasSlotController.test("[default]"),
       "button--has-prefix": this.hasSlotController.test("prefix"),
       "button--has-suffix": this.hasSlotController.test("suffix")
@@ -118,6 +121,9 @@ __decorateClass([
 __decorateClass([
   property({ reflect: true })
 ], SynRadioButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SynRadioButton.prototype, "pill", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SynRadioButton.prototype, "handleDisabledChange", 1);
@@ -125,4 +131,4 @@ __decorateClass([
 export {
   SynRadioButton
 };
-//# sourceMappingURL=chunk.PAJ7L5NY.js.map
+//# sourceMappingURL=chunk.O7UOM5HF.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/radio-button/radio-button.component.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit/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": ";;;;;;;;;;;;;;;;;;AAMA,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;",
+  "names": []
+}

package/dist/chunks/{chunk.ML3KGUGC.js → chunk.P6KHTL53.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.76ZYU7FP.js";
+} from "./chunk.ILTSTORV.js";
 
 // src/components/spinner/spinner.ts
 var spinner_default = SynSpinner;
@@ -9,4 +9,4 @@ SynSpinner.define("syn-spinner");
 export {
   spinner_default
 };
-//# sourceMappingURL=chunk.ML3KGUGC.js.map
+//# sourceMappingURL=chunk.P6KHTL53.js.map

package/dist/chunks/{chunk.PH2EWMGR.js → chunk.PK3QUCBG.js}

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

package/dist/chunks/{chunk.SDPZVZQ5.js → chunk.PYXHGNNO.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.2Z7F6TJ6.js";
+} from "./chunk.EHOKGWX4.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.SDPZVZQ5.js.map
+//# sourceMappingURL=chunk.PYXHGNNO.js.map

package/dist/chunks/{chunk.DHKKEGKR.js → chunk.QLDA2CKN.js}

@@ -13,7 +13,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -111,4 +111,4 @@ __decorateClass([
 export {
   SynBreadcrumbItem
 };
-//# sourceMappingURL=chunk.DHKKEGKR.js.map
+//# sourceMappingURL=chunk.QLDA2CKN.js.map

package/dist/chunks/{chunk.IUB265GM.js → chunk.QZNE2FOK.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.76CDYXMJ.js";
+} from "./chunk.VYQU5NRM.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.IUB265GM.js.map
+//# sourceMappingURL=chunk.QZNE2FOK.js.map

package/dist/chunks/{chunk.WMPH6XNS.js → chunk.RU4ZC6UP.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   badge_custom_styles_default
 } from "./chunk.WQJRBFZA.js";
@@ -58,4 +58,4 @@ __decorateClass([
 export {
   SynBadge
 };
-//# sourceMappingURL=chunk.WMPH6XNS.js.map
+//# sourceMappingURL=chunk.RU4ZC6UP.js.map

package/dist/chunks/{chunk.VT463YYX.js → chunk.S7G2FNQC.js}

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

package/dist/chunks/{chunk.RUWDN6SJ.js → chunk.SHIBG5ZI.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.Z6T7VV4R.js";
 import {
   SynIcon
-} from "./chunk.VDXCXYVH.js";
+} from "./chunk.JVN6QVKB.js";
 import {
   LocalizeController
 } from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -89,4 +89,4 @@ __decorateClass([
 export {
   SynBreadcrumb
 };
-//# sourceMappingURL=chunk.RUWDN6SJ.js.map
+//# sourceMappingURL=chunk.SHIBG5ZI.js.map

package/dist/chunks/{chunk.G43Z4S62.js → chunk.TTS5Z3YN.js}

@@ -1,6 +1,6 @@
 import {
   SynPopup
-} from "./chunk.4DCJOLFH.js";
+} from "./chunk.UHHXPHZM.js";
 
 // src/components/popup/popup.ts
 var popup_default = SynPopup;
@@ -9,4 +9,4 @@ SynPopup.define("syn-popup");
 export {
   popup_default
 };
-//# sourceMappingURL=chunk.G43Z4S62.js.map
+//# sourceMappingURL=chunk.TTS5Z3YN.js.map

package/dist/chunks/{chunk.7AKOP74Y.js → chunk.TUIMTZS3.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.LJQ7LEPV.js";
 import {
   SynIcon
-} from "./chunk.VDXCXYVH.js";
+} from "./chunk.JVN6QVKB.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -138,4 +138,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.7AKOP74Y.js.map
+//# sourceMappingURL=chunk.TUIMTZS3.js.map

package/dist/chunks/{chunk.LCNBP2QJ.js → chunk.U33GULWV.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.3DVHRAZI.js";
+} from "./chunk.LDKF7GK5.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.LCNBP2QJ.js.map
+//# sourceMappingURL=chunk.U33GULWV.js.map

package/dist/chunks/{chunk.4DCJOLFH.js → chunk.UHHXPHZM.js}

@@ -4,7 +4,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.XNAD2JAR.js";
+} from "./chunk.ALVUFXV4.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -409,4 +409,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.4DCJOLFH.js.map
+//# sourceMappingURL=chunk.UHHXPHZM.js.map

package/dist/chunks/{chunk.N2QFYJMG.js → chunk.ULXRBTQD.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.F2DUMQHK.js";
+} from "./chunk.3WS2ECKG.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.N2QFYJMG.js.map
+//# sourceMappingURL=chunk.ULXRBTQD.js.map

package/dist/chunks/{chunk.DI6DACEU.js → chunk.VCOQY4Y7.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.2SIDXOSZ.js";
+} from "./chunk.IODSZKC3.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.DI6DACEU.js.map
+//# sourceMappingURL=chunk.VCOQY4Y7.js.map

package/dist/chunks/{chunk.CNSA4FKX.js → chunk.VHZOV7T4.js}

@@ -1,6 +1,6 @@
 import {
   SynOptgroup
-} from "./chunk.24WUGGV4.js";
+} from "./chunk.AGPBBA42.js";
 
 // src/components/optgroup/optgroup.ts
 var optgroup_default = SynOptgroup;
@@ -9,4 +9,4 @@ SynOptgroup.define("syn-optgroup");
 export {
   optgroup_default
 };
-//# sourceMappingURL=chunk.CNSA4FKX.js.map
+//# sourceMappingURL=chunk.VHZOV7T4.js.map