@synergy-design-system/components 1.17.2 → 1.19.0

package/dist/chunks/{chunk.HIEYZW3Q.js → chunk.2DDDCRJ3.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.RIJKFEYZ.js";
 import {
   SynIconButton
-} from "./chunk.OIZ7KHCE.js";
+} from "./chunk.QAZDNT7V.js";
 import {
   getTabbableElements
 } from "./chunk.2QOQY4ZG.js";
@@ -35,7 +35,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.js";
 import {
   __decorateClass,
   __yieldStar
@@ -518,4 +518,4 @@ setDefaultAnimation("drawer.overlay.hide", {
 export {
   SynDrawer
 };
-//# sourceMappingURL=chunk.HIEYZW3Q.js.map
+//# sourceMappingURL=chunk.2DDDCRJ3.js.map

package/dist/chunks/{chunk.4P4J6DEC.js → chunk.2JOZWWOE.js}

@@ -6,14 +6,14 @@ import {
 } from "./chunk.BGHK4NQA.js";
 import {
   SynIconButton
-} from "./chunk.OIZ7KHCE.js";
+} from "./chunk.QAZDNT7V.js";
 import {
   LocalizeController
 } from "./chunk.GEHO4WRP.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynTag
 };
-//# sourceMappingURL=chunk.4P4J6DEC.js.map
+//# sourceMappingURL=chunk.2JOZWWOE.js.map

package/dist/chunks/{chunk.DFUERSKG.js → chunk.2UY7COPU.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.6D2I2DZR.js";
+} from "./chunk.QMBZGUIN.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.DFUERSKG.js.map
+//# sourceMappingURL=chunk.2UY7COPU.js.map

package/dist/chunks/chunk.2V3HGTTL.js

@@ -0,0 +1,22 @@
+// src/components/progress-ring/progress-ring.custom.styles.ts
+import { css } from "lit";
+var progress_ring_custom_styles_default = css`
+  :host {
+    --size: 120px;
+    --track-width: var(--syn-spacing-x-small);
+  }
+
+  .progress-ring__indicator {
+    stroke-linecap: initial;
+  }
+
+  .progress-ring__label {
+    color: var(--syn-typography-color-text);
+    font: var(--syn-heading-x-large);
+  }
+`;
+
+export {
+  progress_ring_custom_styles_default
+};
+//# sourceMappingURL=chunk.2V3HGTTL.js.map

package/dist/chunks/chunk.2V3HGTTL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-ring/progress-ring.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --size: 120px;\n    --track-width: var(--syn-spacing-x-small);\n  }\n\n  .progress-ring__indicator {\n    stroke-linecap: initial;\n  }\n\n  .progress-ring__label {\n    color: var(--syn-typography-color-text);\n    font: var(--syn-heading-x-large);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,sCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.JURMMYO2.js → chunk.3JD6SIIU.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.4P4J6DEC.js";
+} from "./chunk.2JOZWWOE.js";
 import {
   select_custom_styles_default
 } from "./chunk.OWMT6OL2.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.QNQNR3RY.js";
 import {
   SynPopup
-} from "./chunk.V34ZEOY7.js";
+} from "./chunk.BPHDK3CI.js";
 import {
   scrollIntoView
 } from "./chunk.RIJKFEYZ.js";
@@ -37,7 +37,7 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.6D2I2DZR.js";
+} from "./chunk.QMBZGUIN.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
@@ -47,7 +47,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -764,4 +764,4 @@ setDefaultAnimation("select.hide", {
 export {
   SynSelect
 };
-//# sourceMappingURL=chunk.JURMMYO2.js.map
+//# sourceMappingURL=chunk.3JD6SIIU.js.map

package/dist/chunks/chunk.45VEGVRJ.js

@@ -0,0 +1,74 @@
+// src/components/progress-ring/progress-ring.styles.ts
+import { css } from "lit";
+var progress_ring_styles_default = css`
+	/* stylelint-disable */
+  :host {
+    --size: 128px;
+    --track-width: 4px;
+    --track-color: var(--syn-color-neutral-200);
+    --indicator-width: var(--track-width);
+    --indicator-color: var(--syn-color-primary-600);
+    --indicator-transition-duration: 0.35s;
+
+    display: inline-flex;
+  }
+
+  .progress-ring {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .progress-ring__image {
+    width: var(--size);
+    height: var(--size);
+    rotate: -90deg;
+    transform-origin: 50% 50%;
+  }
+
+  .progress-ring__track,
+  .progress-ring__indicator {
+    --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
+    --circumference: calc(var(--radius) * 2 * 3.141592654);
+
+    fill: none;
+    r: var(--radius);
+    cx: calc(var(--size) / 2);
+    cy: calc(var(--size) / 2);
+  }
+
+  .progress-ring__track {
+    stroke: var(--track-color);
+    stroke-width: var(--track-width);
+  }
+
+  .progress-ring__indicator {
+    stroke: var(--indicator-color);
+    stroke-width: var(--indicator-width);
+    stroke-linecap: round;
+    transition-property: stroke-dashoffset;
+    transition-duration: var(--indicator-transition-duration);
+    stroke-dasharray: var(--circumference) var(--circumference);
+    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
+  }
+
+  .progress-ring__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;
+
+export {
+  progress_ring_styles_default
+};
+//# sourceMappingURL=chunk.45VEGVRJ.js.map

package/dist/chunks/chunk.45VEGVRJ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-ring/progress-ring.styles.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 { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    --size: 128px;\n    --track-width: 4px;\n    --track-color: var(--syn-color-neutral-200);\n    --indicator-width: var(--track-width);\n    --indicator-color: var(--syn-color-primary-600);\n    --indicator-transition-duration: 0.35s;\n\n    display: inline-flex;\n  }\n\n  .progress-ring {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n  }\n\n  .progress-ring__image {\n    width: var(--size);\n    height: var(--size);\n    rotate: -90deg;\n    transform-origin: 50% 50%;\n  }\n\n  .progress-ring__track,\n  .progress-ring__indicator {\n    --radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);\n    --circumference: calc(var(--radius) * 2 * 3.141592654);\n\n    fill: none;\n    r: var(--radius);\n    cx: calc(var(--size) / 2);\n    cy: calc(var(--size) / 2);\n  }\n\n  .progress-ring__track {\n    stroke: var(--track-color);\n    stroke-width: var(--track-width);\n  }\n\n  .progress-ring__indicator {\n    stroke: var(--indicator-color);\n    stroke-width: var(--indicator-width);\n    stroke-linecap: round;\n    transition-property: stroke-dashoffset;\n    transition-duration: var(--indicator-transition-duration);\n    stroke-dasharray: var(--circumference) var(--circumference);\n    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));\n  }\n\n  .progress-ring__label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    text-align: center;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n`;\n"],
+  "mappings": ";AAMA,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;",
+  "names": []
+}

package/dist/chunks/{chunk.JL2M6QGE.js → chunk.4I5SYBN7.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.WH4VWBVX.js";
+} from "./chunk.XHI2F52K.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.JL2M6QGE.js.map
+//# sourceMappingURL=chunk.4I5SYBN7.js.map

package/dist/chunks/{chunk.GWU7M2NS.js → chunk.4J7Z64K2.js}

@@ -10,7 +10,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -41,4 +41,4 @@ __decorateClass([
 export {
   SynDivider
 };
-//# sourceMappingURL=chunk.GWU7M2NS.js.map
+//# sourceMappingURL=chunk.4J7Z64K2.js.map

package/dist/chunks/{chunk.TGULUE3O.js → chunk.5L2JI5UY.js}

@@ -1,6 +1,6 @@
 import {
   SynHeader
-} from "./chunk.55P725B2.js";
+} from "./chunk.BLEAPCEP.js";
 
 // src/components/header/header.ts
 var header_default = SynHeader;
@@ -9,4 +9,4 @@ SynHeader.define("syn-header");
 export {
   header_default
 };
-//# sourceMappingURL=chunk.TGULUE3O.js.map
+//# sourceMappingURL=chunk.5L2JI5UY.js.map

package/dist/chunks/{chunk.ZHZF5E34.js → chunk.5LG6OZVL.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.PVY5TCIP.js";
+} from "./chunk.P6H4IUOO.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.ZHZF5E34.js.map
+//# sourceMappingURL=chunk.5LG6OZVL.js.map

package/dist/chunks/{chunk.ASAMT3UI.js → chunk.5ZXK3DHG.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.B6TPJHW3.js";
+} from "./chunk.MCRJOP4B.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.ASAMT3UI.js.map
+//# sourceMappingURL=chunk.5ZXK3DHG.js.map

package/dist/chunks/{chunk.354KNEFV.js → chunk.6HSRAAQU.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.UGFGZEJP.js";
+} from "./chunk.Q5FGJTK5.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.354KNEFV.js.map
+//# sourceMappingURL=chunk.6HSRAAQU.js.map

package/dist/chunks/{chunk.MOIKULXW.js → chunk.A47EKSQ4.js}

@@ -19,14 +19,14 @@ import {
 } from "./chunk.66WXVGAW.js";
 import {
   SynIcon
-} from "./chunk.6D2I2DZR.js";
+} from "./chunk.QMBZGUIN.js";
 import {
   watch
 } from "./chunk.AVTU2BGE.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -259,4 +259,4 @@ __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.MOIKULXW.js.map
+//# sourceMappingURL=chunk.A47EKSQ4.js.map

package/dist/chunks/chunk.AMAK44YX.js

@@ -0,0 +1,27 @@
+// src/components/progress-bar/progress-bar.custom.styles.ts
+import { css } from "lit";
+var progress_bar_custom_styles_default = css`
+  :host {
+    --height: var(--syn-font-size-medium);
+    --speed: 2.5s;
+  }
+
+  .progress-bar {
+    border-radius: var(--syn-border-radius-none);
+    box-shadow: none;
+  }
+
+  .progress-bar__indicator {
+    font: var(--syn-body-x-small-bold);
+  }
+
+  /* Indeterminate */
+  .progress-bar--indeterminate .progress-bar__indicator {
+    animation-duration: var(--speed);
+  }
+`;
+
+export {
+  progress_bar_custom_styles_default
+};
+//# sourceMappingURL=chunk.AMAK44YX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-bar/progress-bar.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    --height: var(--syn-font-size-medium);\n    --speed: 2.5s;\n  }\n\n  .progress-bar {\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: none;\n  }\n\n  .progress-bar__indicator {\n    font: var(--syn-body-x-small-bold);\n  }\n\n  /* Indeterminate */\n  .progress-bar--indeterminate .progress-bar__indicator {\n    animation-duration: var(--speed);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,qCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.7JDLEWDH.js → chunk.API7KARX.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.OIZ7KHCE.js";
+} from "./chunk.QAZDNT7V.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.7JDLEWDH.js.map
+//# sourceMappingURL=chunk.API7KARX.js.map

package/dist/chunks/{chunk.ZRWDONNK.js → chunk.AQHCB5J4.js}

@@ -7,20 +7,20 @@ import {
 } from "./chunk.XNP4OTUB.js";
 import {
   SynNavItem
-} from "./chunk.J7TDFUXZ.js";
+} from "./chunk.KPYNOAQ6.js";
 import {
   SynMenu
-} from "./chunk.7BKZQX6V.js";
+} from "./chunk.V2LC4HXQ.js";
 import {
   SynDropdown
-} from "./chunk.UGFGZEJP.js";
+} from "./chunk.Q5FGJTK5.js";
 import {
   SynIcon
-} from "./chunk.6D2I2DZR.js";
+} from "./chunk.QMBZGUIN.js";
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -205,4 +205,4 @@ __decorateClass([
 export {
   SynPrioNav
 };
-//# sourceMappingURL=chunk.ZRWDONNK.js.map
+//# sourceMappingURL=chunk.AQHCB5J4.js.map

package/dist/chunks/{chunk.R56L7XI5.js → chunk.ARMOGDBS.js}

@@ -1,6 +1,6 @@
 import {
   SynButton
-} from "./chunk.JCPXLB2E.js";
+} from "./chunk.QY3NFYFU.js";
 
 // src/components/button/button.ts
 var button_default = SynButton;
@@ -9,4 +9,4 @@ SynButton.define("syn-button");
 export {
   button_default
 };
-//# sourceMappingURL=chunk.R56L7XI5.js.map
+//# sourceMappingURL=chunk.ARMOGDBS.js.map

package/dist/chunks/{chunk.55P725B2.js → chunk.BLEAPCEP.js}

@@ -1,6 +1,6 @@
 import {
   icon_default
-} from "./chunk.DFUERSKG.js";
+} from "./chunk.2UY7COPU.js";
 import {
   header_styles_default
 } from "./chunk.AOKNP4QD.js";
@@ -16,7 +16,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.js";
 import {
   __decorateClass
 } from "./chunk.QNDC5KWA.js";
@@ -163,4 +163,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.55P725B2.js.map
+//# sourceMappingURL=chunk.BLEAPCEP.js.map

package/dist/chunks/{chunk.V34ZEOY7.js → chunk.BPHDK3CI.js}

@@ -4,7 +4,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.js";
 import {
   __decorateClass,
   __spreadProps,
@@ -409,4 +409,4 @@ __decorateClass([
 export {
   SynPopup
 };
-//# sourceMappingURL=chunk.V34ZEOY7.js.map
+//# sourceMappingURL=chunk.BPHDK3CI.js.map

package/dist/chunks/{chunk.ESAGOXZY.js → chunk.BZBSIR5N.js}

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.J7TDFUXZ.js";
+} from "./chunk.KPYNOAQ6.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.ESAGOXZY.js.map
+//# sourceMappingURL=chunk.BZBSIR5N.js.map

package/dist/chunks/{chunk.VJGCWBVN.js → chunk.CZ6WRNZU.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuLabel
-} from "./chunk.PZANVPZA.js";
+} from "./chunk.X4X2RMYJ.js";
 
 // src/components/menu-label/menu-label.ts
 var menu_label_default = SynMenuLabel;
@@ -9,4 +9,4 @@ SynMenuLabel.define("syn-menu-label");
 export {
   menu_label_default
 };
-//# sourceMappingURL=chunk.VJGCWBVN.js.map
+//# sourceMappingURL=chunk.CZ6WRNZU.js.map

package/dist/chunks/{chunk.IMLBNWVK.js → chunk.DEGXHPWD.js}

@@ -7,7 +7,7 @@ import {
 import {
   SynergyElement,
   component_styles_default
-} from "./chunk.FWPBOC4P.js";
+} from "./chunk.LVQ53WA2.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.IMLBNWVK.js.map
+//# sourceMappingURL=chunk.DEGXHPWD.js.map

package/dist/chunks/{chunk.JRBLHBNP.js → chunk.DUNJ5BV6.js}

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

package/dist/chunks/{chunk.UT6FUVX5.js → chunk.DZ7S4RJY.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioButton
-} from "./chunk.6OHCTJDU.js";
+} from "./chunk.LECQCB4C.js";
 
 // src/components/radio-button/radio-button.ts
 var radio_button_default = SynRadioButton;
@@ -9,4 +9,4 @@ SynRadioButton.define("syn-radio-button");
 export {
   radio_button_default
 };
-//# sourceMappingURL=chunk.UT6FUVX5.js.map
+//# sourceMappingURL=chunk.DZ7S4RJY.js.map

package/dist/chunks/{chunk.OU72DRLK.js → chunk.EMKKKKFU.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.4P4J6DEC.js";
+} from "./chunk.2JOZWWOE.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.OU72DRLK.js.map
+//# sourceMappingURL=chunk.EMKKKKFU.js.map

package/dist/chunks/chunk.ET6X3DLL.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.LVQ53WA2.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.ET6X3DLL.js.map

package/dist/chunks/chunk.ET6X3DLL.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": []
+}