@synergy-design-system/components 1.17.1 → 1.18.0

package/dist/chunks/{chunk.G2JHDTSW.js → chunk.KTX5YB4Z.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KG52EHDB.js";
 import {
   SynDivider
-} from "./chunk.NNZRZ4QS.js";
+} from "./chunk.XH3MA254.js";
 import {
   HasSlotController
 } from "./chunk.66WXVGAW.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -93,4 +93,4 @@ __decorateClass([
 export {
   SynOptgroup
 };
-//# sourceMappingURL=chunk.G2JHDTSW.js.map
+//# sourceMappingURL=chunk.KTX5YB4Z.js.map

package/dist/chunks/{chunk.7S6UOMFJ.js → chunk.LLS2ZY55.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.G5MCCYXW.js";
+} from "./chunk.HSRG6R67.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.7S6UOMFJ.js.map
+//# sourceMappingURL=chunk.LLS2ZY55.js.map

package/dist/chunks/{chunk.AYHN5IHC.js → chunk.MKYRLUII.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.2DOWCJLW.js";
+} from "./chunk.S7GUBN44.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.AYHN5IHC.js.map
+//# sourceMappingURL=chunk.MKYRLUII.js.map

package/dist/chunks/{chunk.CA75CAFI.js → chunk.MR7U25T2.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.ZU5SISDS.js";
+} from "./chunk.DP66NN4T.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.CA75CAFI.js.map
+//# sourceMappingURL=chunk.MR7U25T2.js.map

package/dist/chunks/{chunk.WOUGGNEO.js → chunk.MU2UKMFS.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.TOMH57Y4.js";
+} from "./chunk.O54BQSFI.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.WOUGGNEO.js.map
+//# sourceMappingURL=chunk.MU2UKMFS.js.map

package/dist/chunks/{chunk.RPLFWYFN.js → chunk.NVEZ4QNM.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.PKO6FEOM.js";
 import {
   SynIcon
-} from "./chunk.TOMH57Y4.js";
+} from "./chunk.O54BQSFI.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -112,4 +112,4 @@ __decorateClass([
 export {
   SynRadio
 };
-//# sourceMappingURL=chunk.RPLFWYFN.js.map
+//# sourceMappingURL=chunk.NVEZ4QNM.js.map

package/dist/chunks/{chunk.TOMH57Y4.js → chunk.O54BQSFI.js}

@@ -15,7 +15,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -182,4 +182,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.TOMH57Y4.js.map
+//# sourceMappingURL=chunk.O54BQSFI.js.map

package/dist/chunks/{chunk.TKVHMQRR.js → chunk.OPIYLV55.js}

@@ -4,7 +4,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -409,4 +409,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.TKVHMQRR.js.map
+//# sourceMappingURL=chunk.OPIYLV55.js.map

package/dist/chunks/{chunk.QUSHMT6V.js → chunk.ORRBYZK7.js}

@@ -6,11 +6,11 @@ import {
 } from "./chunk.3FOVDOJX.js";
 import {
   SynDivider
-} from "./chunk.NNZRZ4QS.js";
+} from "./chunk.XH3MA254.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -32,4 +32,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.QUSHMT6V.js.map
+//# sourceMappingURL=chunk.ORRBYZK7.js.map

package/dist/chunks/{chunk.H6P6GQTH.js → chunk.POVJ44KS.js}

@@ -22,11 +22,11 @@ import {
 } from "./chunk.AVTU2BGE.js";
 import {
   SynButtonGroup
-} from "./chunk.2DOWCJLW.js";
+} from "./chunk.S7GUBN44.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -356,4 +356,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.H6P6GQTH.js.map
+//# sourceMappingURL=chunk.POVJ44KS.js.map

package/dist/chunks/{chunk.3MN7CL5O.js → chunk.QO53BVNG.js}

@@ -1,6 +1,6 @@
 import {
   SynSelect
-} from "./chunk.7WONMCAA.js";
+} from "./chunk.VC3APXJ3.js";
 
 // src/components/select/select.ts
 var select_default = SynSelect;
@@ -9,4 +9,4 @@ SynSelect.define("syn-select");
 export {
   select_default
 };
-//# sourceMappingURL=chunk.3MN7CL5O.js.map
+//# sourceMappingURL=chunk.QO53BVNG.js.map

package/dist/chunks/{chunk.6CKICZEF.js → chunk.QTL6QHN6.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.CZJJW4XX.js";
+} from "./chunk.R7ZKZ6JE.js";
 import {
   button_custom_styles_default
 } from "./chunk.K55MKNUR.js";
@@ -16,7 +16,7 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.TOMH57Y4.js";
+} from "./chunk.O54BQSFI.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -26,7 +26,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -273,4 +273,4 @@ __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.6CKICZEF.js.map
+//# sourceMappingURL=chunk.QTL6QHN6.js.map

package/dist/chunks/{chunk.EVXPBUU4.js → chunk.QV2W7HAY.js}

@@ -1,6 +1,6 @@
 import {
   icon_default
-} from "./chunk.WOUGGNEO.js";
+} from "./chunk.MU2UKMFS.js";
 import {
   header_styles_default
 } from "./chunk.AOKNP4QD.js";
@@ -16,7 +16,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -163,4 +163,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.EVXPBUU4.js.map
+//# sourceMappingURL=chunk.QV2W7HAY.js.map

package/dist/chunks/{chunk.CZJJW4XX.js → chunk.R7ZKZ6JE.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -30,4 +30,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default];
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.CZJJW4XX.js.map
+//# sourceMappingURL=chunk.R7ZKZ6JE.js.map

package/dist/chunks/chunk.RH56E6RP.js

@@ -0,0 +1,12 @@
+import {
+  SynProgressRing
+} from "./chunk.YOBIFHIM.js";
+
+// src/components/progress-ring/progress-ring.ts
+var progress_ring_default = SynProgressRing;
+SynProgressRing.define("syn-progress-ring");
+
+export {
+  progress_ring_default
+};
+//# sourceMappingURL=chunk.RH56E6RP.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-ring/progress-ring.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 SynProgressRing from './progress-ring.component.js';\n\nexport * from './progress-ring.component.js';\nexport default SynProgressRing;\n\nSynProgressRing.define('syn-progress-ring');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-progress-ring': SynProgressRing;\n  }\n}\n"],
+  "mappings": ";;;;;AASA,IAAO,wBAAQ;AAEf,gBAAgB,OAAO,mBAAmB;",
+  "names": []
+}

package/dist/chunks/{chunk.2DOWCJLW.js → chunk.S7GUBN44.js}

@@ -1,7 +1,7 @@
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   button_group_styles_default
 } from "./chunk.A7IIJ2LL.js";
@@ -87,4 +87,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.2DOWCJLW.js.map
+//# sourceMappingURL=chunk.S7GUBN44.js.map

package/dist/chunks/{chunk.HYQJV2W6.js → chunk.T4CNSRSR.js}

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

package/dist/chunks/{chunk.LOQELUB7.js → chunk.TWTFELWJ.js}

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

package/dist/chunks/{chunk.7WONMCAA.js → chunk.VC3APXJ3.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.MLOCMG7P.js";
+} from "./chunk.HWDX5ZOJ.js";
 import {
   select_custom_styles_default
 } from "./chunk.OWMT6OL2.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.QNQNR3RY.js";
 import {
   SynPopup
-} from "./chunk.TKVHMQRR.js";
+} from "./chunk.OPIYLV55.js";
 import {
   scrollIntoView
 } from "./chunk.RIJKFEYZ.js";
@@ -37,7 +37,7 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.TOMH57Y4.js";
+} from "./chunk.O54BQSFI.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -47,7 +47,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -764,4 +764,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.7WONMCAA.js.map
+//# sourceMappingURL=chunk.VC3APXJ3.js.map

package/dist/chunks/{chunk.NQZIVK2T.js → chunk.VFL2ABHB.js}

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.XYYYZKI4.js";
+} from "./chunk.IZUY7TUK.js";
 
 // src/components/prio-nav/prio-nav.ts
 var prio_nav_default = SynPrioNav;
@@ -9,4 +9,4 @@ SynPrioNav.define("syn-prio-nav");
 export {
   prio_nav_default
 };
-//# sourceMappingURL=chunk.NQZIVK2T.js.map
+//# sourceMappingURL=chunk.VFL2ABHB.js.map

package/dist/chunks/{chunk.VGVPTXN4.js → chunk.VJWNNZNH.js}

@@ -1,6 +1,6 @@
 import {
   SynOption
-} from "./chunk.BXP2ONKH.js";
+} from "./chunk.AMHVRA6L.js";
 
 // src/components/option/option.ts
 var option_default = SynOption;
@@ -9,4 +9,4 @@ SynOption.define("syn-option");
 export {
   option_default
 };
-//# sourceMappingURL=chunk.VGVPTXN4.js.map
+//# sourceMappingURL=chunk.VJWNNZNH.js.map

package/dist/chunks/{chunk.D2SZ3D2F.js → chunk.WV7JKJPD.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.KT5KOCK5.js";
+} from "./chunk.ENPKDAIZ.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.D2SZ3D2F.js.map
+//# sourceMappingURL=chunk.WV7JKJPD.js.map

package/dist/chunks/{chunk.GMHLIBZF.js → chunk.XALEH2Z2.js}

@@ -9,17 +9,17 @@ import {
 } from "./chunk.JDBDBGQP.js";
 import {
   SynPopup
-} from "./chunk.TKVHMQRR.js";
+} from "./chunk.OPIYLV55.js";
 import {
   SynSpinner
-} from "./chunk.CZJJW4XX.js";
+} from "./chunk.R7ZKZ6JE.js";
 import {
   HasSlotController,
   getTextContent
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.TOMH57Y4.js";
+} from "./chunk.O54BQSFI.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -29,7 +29,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynMenuItem
 };
-//# sourceMappingURL=chunk.GMHLIBZF.js.map
+//# sourceMappingURL=chunk.XALEH2Z2.js.map

package/dist/chunks/{chunk.FZMSA37J.js → chunk.XDKUBSEZ.js}

@@ -1,6 +1,6 @@
 import {
   SynRadio
-} from "./chunk.RPLFWYFN.js";
+} from "./chunk.NVEZ4QNM.js";
 
 // src/components/radio/radio.ts
 var radio_default = SynRadio;
@@ -9,4 +9,4 @@ SynRadio.define("syn-radio");
 export {
   radio_default
 };
-//# sourceMappingURL=chunk.FZMSA37J.js.map
+//# sourceMappingURL=chunk.XDKUBSEZ.js.map

package/dist/chunks/{chunk.NNZRZ4QS.js → chunk.XH3MA254.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -41,4 +41,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.NNZRZ4QS.js.map
+//# sourceMappingURL=chunk.XH3MA254.js.map

package/dist/chunks/{chunk.IFTZRRKK.js → chunk.XHHUDQGP.js}

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.T3QC4HBG.js";
+} from "./chunk.ZSZ3RXHE.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.IFTZRRKK.js.map
+//# sourceMappingURL=chunk.XHHUDQGP.js.map

package/dist/chunks/{chunk.46OEO4FL.js → chunk.XOEDYQWT.js}

@@ -1,6 +1,6 @@
 import {
   SynMenu
-} from "./chunk.INBFTHEA.js";
+} from "./chunk.I5UERUDK.js";
 
 // src/components/menu/menu.ts
 var menu_default = SynMenu;
@@ -9,4 +9,4 @@ SynMenu.define("syn-menu");
 export {
   menu_default
 };
-//# sourceMappingURL=chunk.46OEO4FL.js.map
+//# sourceMappingURL=chunk.XOEDYQWT.js.map

package/dist/chunks/{chunk.SSFTA4MM.js → chunk.YJAGURE4.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.RIJKFEYZ.js";
 import {
   SynIconButton
-} from "./chunk.ZN3ASMNH.js";
+} from "./chunk.3MHH6ND2.js";
 import {
   getTabbableElements
 } from "./chunk.2QOQY4ZG.js";
@@ -35,7 +35,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.2BEQWVZI.js";
+} from "./chunk.3XSHKQTX.js";
 import {
   __decorateClass,
   __yieldStar
@@ -518,4 +518,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.SSFTA4MM.js.map
+//# sourceMappingURL=chunk.YJAGURE4.js.map

package/dist/chunks/chunk.YOBIFHIM.js

@@ -0,0 +1,77 @@
+import {
+  progress_ring_custom_styles_default
+} from "./chunk.2V3HGTTL.js";
+import {
+  progress_ring_styles_default
+} from "./chunk.45VEGVRJ.js";
+import {
+  LocalizeController
+} from "./chunk.GEHO4WRP.js";
+import {
+  SynergyElement,
+  component_styles_default
+} from "./chunk.3XSHKQTX.js";
+import {
+  __decorateClass
+} from "./chunk.QNDC5KWA.js";
+
+// src/components/progress-ring/progress-ring.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var SynProgressRing = class extends SynergyElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.label = "";
+  }
+  updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("value")) {
+      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue("r"));
+      const circumference = 2 * Math.PI * radius;
+      const offset = circumference - this.value / 100 * circumference;
+      this.indicatorOffset = `${offset}px`;
+    }
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class="progress-ring"
+        role="progressbar"
+        aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")}
+        aria-describedby="label"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow="${this.value}"
+        style="--percentage: ${this.value / 100}"
+      >
+        <svg class="progress-ring__image">
+          <circle class="progress-ring__track"></circle>
+          <circle class="progress-ring__indicator" style="stroke-dashoffset: ${this.indicatorOffset}"></circle>
+        </svg>
+
+        <slot id="label" part="label" class="progress-ring__label"></slot>
+      </div>
+    `;
+  }
+};
+SynProgressRing.styles = [component_styles_default, progress_ring_styles_default, progress_ring_custom_styles_default];
+__decorateClass([
+  query(".progress-ring__indicator")
+], SynProgressRing.prototype, "indicator", 2);
+__decorateClass([
+  state()
+], SynProgressRing.prototype, "indicatorOffset", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], SynProgressRing.prototype, "value", 2);
+__decorateClass([
+  property()
+], SynProgressRing.prototype, "label", 2);
+
+export {
+  SynProgressRing
+};
+//# sourceMappingURL=chunk.YOBIFHIM.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-ring/progress-ring.component.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './progress-ring.styles.js';\nimport customStyles from './progress-ring.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.\n * @documentation https://synergy.style/components/progress-ring\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The progress ring label.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */\nexport default class SynProgressRing extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly localize = new LocalizeController(this);\n\n  @query('.progress-ring__indicator') indicator: SVGCircleElement;\n\n  @state() indicatorOffset: string;\n\n  /** The current progress as a percentage, 0 to 100. */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** A custom label for assistive devices. */\n  @property() label = '';\n\n  updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    //\n    // This block is only required for Safari because it doesn't transition the circle when the custom properties\n    // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,\n    // but I couldn't pinpoint it so this works around the problem.\n    //\n    if (changedProps.has('value')) {\n      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));\n      const circumference = 2 * Math.PI * radius;\n      const offset = circumference - (this.value / 100) * circumference;\n\n      this.indicatorOffset = `${offset}px`;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"progress-ring\"\n        role=\"progressbar\"\n        aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}\n        aria-describedby=\"label\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"${this.value}\"\n        style=\"--percentage: ${this.value / 100}\"\n      >\n        <svg class=\"progress-ring__image\">\n          <circle class=\"progress-ring__track\"></circle>\n          <circle class=\"progress-ring__indicator\" style=\"stroke-dashoffset: ${this.indicatorOffset}\"></circle>\n        </svg>\n\n        <slot id=\"label\" part=\"label\" class=\"progress-ring__label\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAMA,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AAyBvC,IAAqB,kBAArB,cAA6C,eAAe;AAAA,EAA5D;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAOZ,iBAAQ;AAGvC,iBAAQ;AAAA;AAAA,EAEpB,QAAQ,cAAoC;AAC1C,UAAM,QAAQ,YAAY;AAO1B,QAAI,aAAa,IAAI,OAAO,GAAG;AAC7B,YAAM,SAAS,WAAW,iBAAiB,KAAK,SAAS,EAAE,iBAAiB,GAAG,CAAC;AAChF,YAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,YAAM,SAAS,gBAAiB,KAAK,QAAQ,MAAO;AAEpD,WAAK,kBAAkB,GAAG,MAAM;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,MAAM,SAAS,IAAI,KAAK,QAAQ,KAAK,SAAS,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI/D,KAAK,KAAK;AAAA,+BACJ,KAAK,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,+EAIgC,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjG;AACF;AAtDqB,gBACZ,SAAyB,CAAC,0BAAiB,8BAAQ,mCAAY;AAIlC;AAAA,EAAnC,MAAM,2BAA2B;AAAA,GALf,gBAKiB;AAE3B;AAAA,EAAR,MAAM;AAAA,GAPY,gBAOV;AAGkC;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAVtB,gBAUwB;AAG/B;AAAA,EAAX,SAAS;AAAA,GAbS,gBAaP;",
+  "names": []
+}

package/dist/chunks/{chunk.ZBXAGDRO.js → chunk.ZP62IDKA.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.H6P6GQTH.js";
+} from "./chunk.POVJ44KS.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.ZBXAGDRO.js.map
+//# sourceMappingURL=chunk.ZP62IDKA.js.map