@usefragments/ui 1.4.0 → 1.5.0

package/dist/assets/ui.css

@@ -3843,7 +3843,7 @@
   ._popup_1pyvn_6[data-side=top][data-starting-style], ._popup_1pyvn_6[data-side=top][data-ending-style] {
     transform: none;
   }
-}._root_npjcd_1 {
+}._root_le29r_1 {
   display: flex;
   flex-direction: column;
   gap: var(--fui-space-1, 0.5rem);
@@ -3851,26 +3851,26 @@
   font-family: var(--fui-font-sans, "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
 }
 
-._header_npjcd_9 {
+._header_le29r_9 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--fui-space-2, 1rem);
 }
 
-._label_npjcd_16 {
+._label_le29r_16 {
   font-size: var(--fui-font-size-sm, 1rem);
   font-weight: var(--fui-font-weight-medium, 500);
   color: var(--fui-text-primary, #212121);
 }
 
-._value_npjcd_22 {
+._value_le29r_22 {
   font-size: var(--fui-font-size-sm, 1rem);
   color: var(--fui-text-secondary, rgb(84.468434358, 84.468434358, 84.468434358));
   font-variant-numeric: tabular-nums;
 }
 
-._track_npjcd_28 {
+._track_le29r_28 {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -3878,43 +3878,47 @@
   border-radius: var(--fui-radius-full, 9999px);
 }
 
-._trackSm_npjcd_36 {
+._trackSm_le29r_36 {
   height: calc(var(--fui-space-1, 0.5rem) / 2);
 }
 
-._trackMd_npjcd_40 {
+._trackMd_le29r_40 {
   height: var(--fui-space-1, 0.5rem);
 }
 
-._trackLg_npjcd_44 {
+._trackLg_le29r_44 {
   height: var(--fui-space-2, 1rem);
 }
 
-._indicator_npjcd_48 {
+._indicator_le29r_48 {
   height: 100%;
   background-color: var(--fui-color-accent, #006b57);
   border-radius: var(--fui-radius-full, 9999px);
   transition: width var(--fui-transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1));
 }
 
-._indicatorSuccess_npjcd_55 {
+._indicatorNeutral_le29r_55 {
+  background-color: var(--fui-text-tertiary, rgb(86.4227350852, 86.4227350852, 86.4227350852));
+}
+
+._indicatorSuccess_le29r_59 {
   background-color: var(--fui-color-success-text, rgb(29.9064810064, 108.5606699289, 89.7163569497));
 }
 
-._indicatorWarning_npjcd_59 {
+._indicatorWarning_le29r_63 {
   background-color: var(--fui-color-warning-text, hsl(41.194706405, 139.9133245857%, 21.9712967806%));
 }
 
-._indicatorDanger_npjcd_63 {
+._indicatorDanger_le29r_67 {
   background-color: var(--fui-color-danger-text, rgb(162.7774064935, 63.3790672702, 56.4827894566));
 }
 
-._indicatorIndeterminate_npjcd_67 {
+._indicatorIndeterminate_le29r_71 {
   width: 50% !important;
-  animation: _indeterminate_npjcd_1 1.5s ease-in-out infinite;
+  animation: _indeterminate_le29r_1 1.5s ease-in-out infinite;
 }
 
-@keyframes _indeterminate_npjcd_1 {
+@keyframes _indeterminate_le29r_1 {
   0% {
     transform: translateX(-100%);
   }
@@ -3925,50 +3929,50 @@
     transform: translateX(-100%);
   }
 }
-._root_npjcd_1[data-complete] ._indicator_npjcd_48 {
+._root_le29r_1[data-complete] ._indicator_le29r_48:not(._indicatorNeutral_le29r_55) {
   background-color: var(--fui-color-success-text, rgb(29.9064810064, 108.5606699289, 89.7163569497));
 }
 
-._circular_npjcd_87 {
+._circular_le29r_91 {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-._circularSvg_npjcd_94 {
+._circularSvg_le29r_98 {
   transform: rotate(-90deg);
 }
 
-._circularTrack_npjcd_98 {
+._circularTrack_le29r_102 {
   stroke: var(--fui-bg-tertiary, #f4f4f4);
   fill: none;
 }
 
-._circularIndicator_npjcd_103 {
+._circularIndicator_le29r_107 {
   stroke: var(--fui-color-accent, #006b57);
   fill: none;
   stroke-linecap: round;
   transition: stroke-dashoffset var(--fui-transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1));
 }
 
-._circularIndicatorSuccess_npjcd_110 {
+._circularIndicatorSuccess_le29r_114 {
   stroke: var(--fui-color-success-text, rgb(29.9064810064, 108.5606699289, 89.7163569497));
 }
 
-._circularIndicatorWarning_npjcd_114 {
+._circularIndicatorWarning_le29r_118 {
   stroke: var(--fui-color-warning-text, hsl(41.194706405, 139.9133245857%, 21.9712967806%));
 }
 
-._circularIndicatorDanger_npjcd_118 {
+._circularIndicatorDanger_le29r_122 {
   stroke: var(--fui-color-danger-text, rgb(162.7774064935, 63.3790672702, 56.4827894566));
 }
 
-._circularIndicatorIndeterminate_npjcd_122 {
-  animation: _circularIndeterminate_npjcd_1 1.5s ease-in-out infinite;
+._circularIndicatorIndeterminate_le29r_126 {
+  animation: _circularIndeterminate_le29r_1 1.5s ease-in-out infinite;
 }
 
-@keyframes _circularIndeterminate_npjcd_1 {
+@keyframes _circularIndeterminate_le29r_1 {
   0% {
     stroke-dashoffset: 280;
     transform: rotate(0deg);
@@ -3981,7 +3985,7 @@
     transform: rotate(360deg);
   }
 }
-._circularValue_npjcd_139 {
+._circularValue_le29r_143 {
   position: absolute;
   font-size: var(--fui-font-size-sm, 1rem);
   font-weight: var(--fui-font-weight-medium, 500);
@@ -3989,24 +3993,24 @@
   font-variant-numeric: tabular-nums;
 }
 
-._circularSm_npjcd_147 {
+._circularSm_le29r_151 {
   width: var(--fui-space-4, 2rem);
   height: var(--fui-space-4, 2rem);
 }
-._circularSm_npjcd_147 ._circularValue_npjcd_139 {
+._circularSm_le29r_151 ._circularValue_le29r_143 {
   font-size: var(--fui-font-size-xs, 0.857rem);
 }
 
-._circularMd_npjcd_155 {
+._circularMd_le29r_159 {
   width: var(--fui-space-6, 3rem);
   height: var(--fui-space-6, 3rem);
 }
 
-._circularLg_npjcd_160 {
+._circularLg_le29r_164 {
   width: var(--fui-space-8, 4rem);
   height: var(--fui-space-8, 4rem);
 }
-._circularLg_npjcd_160 ._circularValue_npjcd_139 {
+._circularLg_le29r_164 ._circularValue_le29r_143 {
   font-size: var(--fui-font-size-base, 1rem);
 }._wrapper_11gr0_1 {
   display: inline-flex;

package/dist/components/Card/index.cjs

@@ -92,9 +92,9 @@ function CardHeader({ children, divided, className, ...htmlProps }) {
   const classes = [Card_module.default.header, divided && Card_module.default.headerDivided, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, children });
 }
-function CardTitle({ children, className, ...htmlProps }) {
+function CardTitle({ children, as: Component = "h3", className, ...htmlProps }) {
   const classes = [Card_module.default.title, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("h3", { ...htmlProps, className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...htmlProps, className: classes, children });
 }
 function CardDescription({ children, className, ...htmlProps }) {
   const classes = [Card_module.default.description, className].filter(Boolean).join(" ");

package/dist/components/Card/index.d.ts

@@ -32,6 +32,9 @@ export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     children: React.ReactNode;
+    /** Semantic heading level.
+     * @default "h3" */
+    as?: "h2" | "h3" | "h4" | "h5" | "h6";
 }
 export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
     children: React.ReactNode;
@@ -47,7 +50,7 @@ export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function CardRoot({ children, variant: variantProp, padding, as: Component, className, style, ...htmlProps }: CardProps): import("react/jsx-runtime").JSX.Element;
 declare function CardHeader({ children, divided, className, ...htmlProps }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function CardTitle({ children, className, ...htmlProps }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ children, as: Component, className, ...htmlProps }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
 declare function CardDescription({ children, className, ...htmlProps }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare function CardBody({ children, padding, className, ...htmlProps }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
 declare function CardFooter({ children, className, ...htmlProps }: CardFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;gEAS4D;IAC5D,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7E;uBACmB;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;4BACwB;IACxB,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;8DAE0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;uDACmD;IACnD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwCD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EAAE,WAAuB,EAChC,OAAc,EACd,EAAE,EAAE,SAAqB,EACzB,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,SAAS,2CA6DX;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CASlF;AAED,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,2CAOvE;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,2CAOnF;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAS9E;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CAOzE;AAMD,eAAO,MAAM,IAAI;;;;;;CAMf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;;;;gEAS4D;IAC5D,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7E;uBACmB;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;4BACwB;IACxB,EAAE,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;8DAE0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;uBACmB;IACnB,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;uDACmD;IACnD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAwCD,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EAAE,WAAuB,EAChC,OAAc,EACd,EAAE,EAAE,SAAqB,EACzB,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,SAAS,2CA6DX;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CASlF;AAED,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAgB,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,cAAc,2CAO7F;AAED,iBAAS,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,2CAOnF;AAED,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,2CAS9E;AAED,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,2CAOzE;AAMD,eAAO,MAAM,IAAI;;;;;;CAMf,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Card/index.js

@@ -73,9 +73,9 @@ function CardHeader({ children, divided, className, ...htmlProps }) {
   const classes = [styles.header, divided && styles.headerDivided, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, children });
 }
-function CardTitle({ children, className, ...htmlProps }) {
+function CardTitle({ children, as: Component = "h3", className, ...htmlProps }) {
   const classes = [styles.title, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("h3", { ...htmlProps, className: classes, children });
+  return /* @__PURE__ */ jsx(Component, { ...htmlProps, className: classes, children });
 }
 function CardDescription({ children, className, ...htmlProps }) {
   const classes = [styles.description, className].filter(Boolean).join(" ");

package/dist/components/Progress/Progress.module.scss.cjs

@@ -1,30 +1,31 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_npjcd_1";
-const header = "_header_npjcd_9";
-const label = "_label_npjcd_16";
-const value = "_value_npjcd_22";
-const track = "_track_npjcd_28";
-const trackSm = "_trackSm_npjcd_36";
-const trackMd = "_trackMd_npjcd_40";
-const trackLg = "_trackLg_npjcd_44";
-const indicator = "_indicator_npjcd_48";
-const indicatorSuccess = "_indicatorSuccess_npjcd_55";
-const indicatorWarning = "_indicatorWarning_npjcd_59";
-const indicatorDanger = "_indicatorDanger_npjcd_63";
-const indicatorIndeterminate = "_indicatorIndeterminate_npjcd_67";
-const circular = "_circular_npjcd_87";
-const circularSvg = "_circularSvg_npjcd_94";
-const circularTrack = "_circularTrack_npjcd_98";
-const circularIndicator = "_circularIndicator_npjcd_103";
-const circularIndicatorSuccess = "_circularIndicatorSuccess_npjcd_110";
-const circularIndicatorWarning = "_circularIndicatorWarning_npjcd_114";
-const circularIndicatorDanger = "_circularIndicatorDanger_npjcd_118";
-const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_npjcd_122";
-const circularValue = "_circularValue_npjcd_139";
-const circularSm = "_circularSm_npjcd_147";
-const circularMd = "_circularMd_npjcd_155";
-const circularLg = "_circularLg_npjcd_160";
+const root = "_root_le29r_1";
+const header = "_header_le29r_9";
+const label = "_label_le29r_16";
+const value = "_value_le29r_22";
+const track = "_track_le29r_28";
+const trackSm = "_trackSm_le29r_36";
+const trackMd = "_trackMd_le29r_40";
+const trackLg = "_trackLg_le29r_44";
+const indicator = "_indicator_le29r_48";
+const indicatorNeutral = "_indicatorNeutral_le29r_55";
+const indicatorSuccess = "_indicatorSuccess_le29r_59";
+const indicatorWarning = "_indicatorWarning_le29r_63";
+const indicatorDanger = "_indicatorDanger_le29r_67";
+const indicatorIndeterminate = "_indicatorIndeterminate_le29r_71";
+const circular = "_circular_le29r_91";
+const circularSvg = "_circularSvg_le29r_98";
+const circularTrack = "_circularTrack_le29r_102";
+const circularIndicator = "_circularIndicator_le29r_107";
+const circularIndicatorSuccess = "_circularIndicatorSuccess_le29r_114";
+const circularIndicatorWarning = "_circularIndicatorWarning_le29r_118";
+const circularIndicatorDanger = "_circularIndicatorDanger_le29r_122";
+const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_le29r_126";
+const circularValue = "_circularValue_le29r_143";
+const circularSm = "_circularSm_le29r_151";
+const circularMd = "_circularMd_le29r_159";
+const circularLg = "_circularLg_le29r_164";
 const styles = {
   root,
   header,
@@ -35,6 +36,7 @@ const styles = {
   trackMd,
   trackLg,
   indicator,
+  indicatorNeutral,
   indicatorSuccess,
   indicatorWarning,
   indicatorDanger,
@@ -69,6 +71,7 @@ exports.header = header;
 exports.indicator = indicator;
 exports.indicatorDanger = indicatorDanger;
 exports.indicatorIndeterminate = indicatorIndeterminate;
+exports.indicatorNeutral = indicatorNeutral;
 exports.indicatorSuccess = indicatorSuccess;
 exports.indicatorWarning = indicatorWarning;
 exports.label = label;

package/dist/components/Progress/Progress.module.scss.js

@@ -1,28 +1,29 @@
-const root = "_root_npjcd_1";
-const header = "_header_npjcd_9";
-const label = "_label_npjcd_16";
-const value = "_value_npjcd_22";
-const track = "_track_npjcd_28";
-const trackSm = "_trackSm_npjcd_36";
-const trackMd = "_trackMd_npjcd_40";
-const trackLg = "_trackLg_npjcd_44";
-const indicator = "_indicator_npjcd_48";
-const indicatorSuccess = "_indicatorSuccess_npjcd_55";
-const indicatorWarning = "_indicatorWarning_npjcd_59";
-const indicatorDanger = "_indicatorDanger_npjcd_63";
-const indicatorIndeterminate = "_indicatorIndeterminate_npjcd_67";
-const circular = "_circular_npjcd_87";
-const circularSvg = "_circularSvg_npjcd_94";
-const circularTrack = "_circularTrack_npjcd_98";
-const circularIndicator = "_circularIndicator_npjcd_103";
-const circularIndicatorSuccess = "_circularIndicatorSuccess_npjcd_110";
-const circularIndicatorWarning = "_circularIndicatorWarning_npjcd_114";
-const circularIndicatorDanger = "_circularIndicatorDanger_npjcd_118";
-const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_npjcd_122";
-const circularValue = "_circularValue_npjcd_139";
-const circularSm = "_circularSm_npjcd_147";
-const circularMd = "_circularMd_npjcd_155";
-const circularLg = "_circularLg_npjcd_160";
+const root = "_root_le29r_1";
+const header = "_header_le29r_9";
+const label = "_label_le29r_16";
+const value = "_value_le29r_22";
+const track = "_track_le29r_28";
+const trackSm = "_trackSm_le29r_36";
+const trackMd = "_trackMd_le29r_40";
+const trackLg = "_trackLg_le29r_44";
+const indicator = "_indicator_le29r_48";
+const indicatorNeutral = "_indicatorNeutral_le29r_55";
+const indicatorSuccess = "_indicatorSuccess_le29r_59";
+const indicatorWarning = "_indicatorWarning_le29r_63";
+const indicatorDanger = "_indicatorDanger_le29r_67";
+const indicatorIndeterminate = "_indicatorIndeterminate_le29r_71";
+const circular = "_circular_le29r_91";
+const circularSvg = "_circularSvg_le29r_98";
+const circularTrack = "_circularTrack_le29r_102";
+const circularIndicator = "_circularIndicator_le29r_107";
+const circularIndicatorSuccess = "_circularIndicatorSuccess_le29r_114";
+const circularIndicatorWarning = "_circularIndicatorWarning_le29r_118";
+const circularIndicatorDanger = "_circularIndicatorDanger_le29r_122";
+const circularIndicatorIndeterminate = "_circularIndicatorIndeterminate_le29r_126";
+const circularValue = "_circularValue_le29r_143";
+const circularSm = "_circularSm_le29r_151";
+const circularMd = "_circularMd_le29r_159";
+const circularLg = "_circularLg_le29r_164";
 const styles = {
   root,
   header,
@@ -33,6 +34,7 @@ const styles = {
   trackMd,
   trackLg,
   indicator,
+  indicatorNeutral,
   indicatorSuccess,
   indicatorWarning,
   indicatorDanger,
@@ -68,6 +70,7 @@ export {
   indicator,
   indicatorDanger,
   indicatorIndeterminate,
+  indicatorNeutral,
   indicatorSuccess,
   indicatorWarning,
   label,

package/dist/components/Progress/index.cjs

@@ -14,6 +14,7 @@ function ProgressRoot({
   showValue = false,
   formatValue,
   className,
+  role,
   "aria-label": ariaLabel,
   "aria-valuetext": ariaValueText,
   ...htmlProps
@@ -30,6 +31,7 @@ function ProgressRoot({
   ].filter(Boolean).join(" ");
   const indicatorClasses = [
     Progress_module.default.indicator,
+    variant === "neutral" && Progress_module.default.indicatorNeutral,
     variant === "success" && Progress_module.default.indicatorSuccess,
     variant === "warning" && Progress_module.default.indicatorWarning,
     variant === "danger" && Progress_module.default.indicatorDanger,
@@ -46,6 +48,7 @@ function ProgressRoot({
       min,
       max,
       className: rootClasses,
+      role: role ?? "progressbar",
       "aria-label": ariaLabel || (label ? void 0 : "Progress"),
       "aria-valuetext": effectiveValueText,
       "aria-busy": isIndeterminate,

package/dist/components/Progress/index.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+import * as React from "react";
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
     /** Current progress value (0-100). Null for indeterminate. */
     value?: number | null;
     /** Minimum value */
@@ -7,9 +7,9 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Maximum value */
     max?: number;
     /** Size of the progress bar */
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     /** Color variant */
-    variant?: 'default' | 'success' | 'warning' | 'danger';
+    variant?: "default" | "neutral" | "success" | "warning" | "danger";
     /** Label text */
     label?: string;
     /** Show percentage value */
@@ -21,16 +21,16 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
     /** Current progress value (0-100). Null for indeterminate. */
     value?: number | null;
     /** Size of the circular progress */
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     /** Color variant */
-    variant?: 'default' | 'success' | 'warning' | 'danger';
+    variant?: "default" | "success" | "warning" | "danger";
     /** Show percentage in center */
     showValue?: boolean;
     /** Stroke width */
     strokeWidth?: number;
 }
-declare function ProgressRoot({ value, min, max, size, variant, label, showValue, formatValue, className, 'aria-label': ariaLabel, 'aria-valuetext': ariaValueText, ...htmlProps }: ProgressProps): import("react/jsx-runtime").JSX.Element;
-declare function CircularProgressRoot({ value, size, variant, showValue, strokeWidth: customStrokeWidth, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-valuetext': ariaValueText, ...htmlProps }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
+declare function ProgressRoot({ value, min, max, size, variant, label, showValue, formatValue, className, role, "aria-label": ariaLabel, "aria-valuetext": ariaValueText, ...htmlProps }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+declare function CircularProgressRoot({ value, size, variant, showValue, strokeWidth: customStrokeWidth, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, ...htmlProps }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;
 export declare const CircularProgress: typeof CircularProgressRoot;
 export declare const Progress: typeof ProgressRoot & {
     Root: typeof ProgressRoot;

package/dist/components/Progress/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC/F,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,YAAY,CAAC,EACpB,KAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,aAAa,2CAqEf;AAYD,iBAAS,oBAAoB,CAAC,EAC5B,KAAY,EACZ,IAAW,EACX,OAAmB,EACnB,SAAiB,EACjB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,qBAAqB,2CA+EvB;AAED,eAAO,MAAM,gBAAgB,6BAAuB,CAAC;AAErD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC/F,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+BAA+B;IAC/B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnE,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,iBAAS,YAAY,CAAC,EACpB,KAAY,EACZ,GAAO,EACP,GAAS,EACT,IAAW,EACX,OAAmB,EACnB,KAAK,EACL,SAAiB,EACjB,WAAW,EACX,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,aAAa,2CA8Df;AAYD,iBAAS,oBAAoB,CAAC,EAC5B,KAAY,EACZ,IAAW,EACX,OAAmB,EACnB,SAAiB,EACjB,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,gBAAgB,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,qBAAqB,2CA+EvB;AAED,eAAO,MAAM,gBAAgB,6BAAuB,CAAC;AAErD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}

package/dist/components/Progress/index.js

@@ -12,6 +12,7 @@ function ProgressRoot({
   showValue = false,
   formatValue,
   className,
+  role,
   "aria-label": ariaLabel,
   "aria-valuetext": ariaValueText,
   ...htmlProps
@@ -28,6 +29,7 @@ function ProgressRoot({
   ].filter(Boolean).join(" ");
   const indicatorClasses = [
     styles.indicator,
+    variant === "neutral" && styles.indicatorNeutral,
     variant === "success" && styles.indicatorSuccess,
     variant === "warning" && styles.indicatorWarning,
     variant === "danger" && styles.indicatorDanger,
@@ -44,6 +46,7 @@ function ProgressRoot({
       min,
       max,
       className: rootClasses,
+      role: role ?? "progressbar",
       "aria-label": ariaLabel || (label ? void 0 : "Progress"),
       "aria-valuetext": effectiveValueText,
       "aria-busy": isIndeterminate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -241,7 +241,7 @@
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@usefragments/core": "1.7.1"
+    "@usefragments/core": "1.8.0"
   },
   "files": [
     "src",

package/src/components/Card/Card.contract.json

@@ -77,6 +77,11 @@
     ]
   },
   "examples": [
+    {
+      "name": "Nested Heading",
+      "description": "Select the heading level required by the surrounding document outline",
+      "code": "<Card variant=\"panel\" padding=\"none\">\n  <Card.Header divided>\n    <Card.Title as=\"h4\">Nested panel</Card.Title>\n  </Card.Header>\n  <Card.Body padding=\"md\">Panel content</Card.Body>\n</Card>"
+    },
     {
       "name": "Default",
       "description": "Standard quiet card surface",

package/src/components/Card/index.tsx

@@ -42,6 +42,9 @@ export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
+  /** Semantic heading level.
+   * @default "h3" */
+  as?: "h2" | "h3" | "h4" | "h5" | "h6";
 }
 
 export interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
@@ -179,12 +182,12 @@ function CardHeader({ children, divided, className, ...htmlProps }: CardHeaderPr
   );
 }
 
-function CardTitle({ children, className, ...htmlProps }: CardTitleProps) {
+function CardTitle({ children, as: Component = "h3", className, ...htmlProps }: CardTitleProps) {
   const classes = [styles.title, className].filter(Boolean).join(" ");
   return (
-    <h3 {...htmlProps} className={classes}>
+    <Component {...htmlProps} className={classes}>
       {children}
-    </h3>
+    </Component>
   );
 }
 

package/src/components/Progress/Progress.contract.json

@@ -3,13 +3,7 @@
   "name": "Progress",
   "description": "Visual indicator of task completion or loading state. Available in linear and circular variants.",
   "category": "feedback",
-  "tags": [
-    "progress",
-    "loading",
-    "indicator",
-    "percentage",
-    "status"
-  ],
+  "tags": ["progress", "loading", "indicator", "percentage", "status"],
   "status": "stable",
   "sourcePath": "src/components/Progress/index.tsx",
   "exportName": "Progress",
@@ -18,7 +12,8 @@
     "min: number (default: 0)",
     "max: number (default: 100)",
     "size: sm|md|lg (default: md)",
-    "variant: default|success|warning|danger (default: default)",
+    "variant: default|neutral|success|warning|danger (default: default)",
+    "role: progressbar|meter (default: progressbar)",
     "label: string",
     "showValue: boolean (default: false)",
     "formatValue: function"
@@ -47,23 +42,14 @@
       "description": "Size of the progress bar",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "variant": {
       "type": "enum",
       "description": "Color variant",
       "default": "default",
       "required": false,
-      "values": [
-        "default",
-        "success",
-        "warning",
-        "danger"
-      ]
+      "values": ["default", "neutral", "success", "warning", "danger"]
     },
     "label": {
       "type": "string",
@@ -99,10 +85,12 @@
       "Use indeterminate for unknown durations",
       "Include a label for context when the purpose isnt obvious",
       "Use appropriate color variants for success/warning/danger states",
+      "Use variant=\"neutral\" with role=\"meter\" for magnitude or distribution values where reaching the maximum is not a success state",
       "Determinate values are clamped to the min/max range for display"
     ],
     "accessibility": [
       "Uses role=\"progressbar\" with aria-valuenow",
+      "Accepts role=\"meter\" for scalar measurements within a known range",
       "Label is associated with the progress bar",
       "State changes are announced to screen readers"
     ]
@@ -155,17 +143,11 @@
       "showValue: boolean - display percentage",
       "Determinate display values are clamped (and invalid min/max ranges render as 0%)"
     ],
-    "a11yRules": [
-      "A11Y_PROGRESS_ROLE",
-      "A11Y_PROGRESS_VALUE"
-    ]
+    "a11yRules": ["A11Y_PROGRESS_ROLE", "A11Y_PROGRESS_VALUE"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root",
-      "Circular"
-    ]
+    "subComponents": ["Root", "Circular"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Progress/Progress.module.scss

@@ -63,6 +63,10 @@
 }
 
 // Color variants
+.indicatorNeutral {
+  background-color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
 .indicatorSuccess {
   background-color: var(--fui-color-success-text, $fui-color-success-text);
 }
@@ -94,7 +98,7 @@
 }
 
 // Complete state
-.root[data-complete] .indicator {
+.root[data-complete] .indicator:not(.indicatorNeutral) {
   background-color: var(--fui-color-success-text, $fui-color-success-text);
 }
 

package/src/components/Progress/index.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Progress as BaseProgress } from '@base-ui/react/progress';
-import styles from './Progress.module.scss';
+import * as React from "react";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import styles from "./Progress.module.scss";
 
 // ============================================
 // Types
 // ============================================
 
-export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
   /** Current progress value (0-100). Null for indeterminate. */
   value?: number | null;
   /** Minimum value */
@@ -16,9 +16,9 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   /** Maximum value */
   max?: number;
   /** Size of the progress bar */
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   /** Color variant */
-  variant?: 'default' | 'success' | 'warning' | 'danger';
+  variant?: "default" | "neutral" | "success" | "warning" | "danger";
   /** Label text */
   label?: string;
   /** Show percentage value */
@@ -31,9 +31,9 @@ export interface CircularProgressProps extends React.HTMLAttributes<HTMLDivEleme
   /** Current progress value (0-100). Null for indeterminate. */
   value?: number | null;
   /** Size of the circular progress */
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   /** Color variant */
-  variant?: 'default' | 'success' | 'warning' | 'danger';
+  variant?: "default" | "success" | "warning" | "danger";
   /** Show percentage in center */
   showValue?: boolean;
   /** Stroke width */
@@ -48,52 +48,51 @@ function ProgressRoot({
   value = null,
   min = 0,
   max = 100,
-  size = 'md',
-  variant = 'default',
+  size = "md",
+  variant = "default",
   label,
   showValue = false,
   formatValue,
   className,
-  'aria-label': ariaLabel,
-  'aria-valuetext': ariaValueText,
+  role,
+  "aria-label": ariaLabel,
+  "aria-valuetext": ariaValueText,
   ...htmlProps
 }: ProgressProps) {
   const isIndeterminate = value === null;
   const range = max - min;
-  const normalizedPercentage = isIndeterminate
-    ? 0
-    : range <= 0
-      ? 0
-      : ((value - min) / range) * 100;
+  const normalizedPercentage = isIndeterminate ? 0 : range <= 0 ? 0 : ((value - min) / range) * 100;
   const percentage = isIndeterminate
     ? 0
     : Math.round(Math.min(100, Math.max(0, normalizedPercentage)));
 
   const trackClasses = [
     styles.track,
-    size === 'sm' && styles.trackSm,
-    size === 'md' && styles.trackMd,
-    size === 'lg' && styles.trackLg,
-  ].filter(Boolean).join(' ');
+    size === "sm" && styles.trackSm,
+    size === "md" && styles.trackMd,
+    size === "lg" && styles.trackLg,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   const indicatorClasses = [
     styles.indicator,
-    variant === 'success' && styles.indicatorSuccess,
-    variant === 'warning' && styles.indicatorWarning,
-    variant === 'danger' && styles.indicatorDanger,
+    variant === "neutral" && styles.indicatorNeutral,
+    variant === "success" && styles.indicatorSuccess,
+    variant === "warning" && styles.indicatorWarning,
+    variant === "danger" && styles.indicatorDanger,
     isIndeterminate && styles.indicatorIndeterminate,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(" ");
 
-  const rootClasses = [styles.root, className].filter(Boolean).join(' ');
+  const rootClasses = [styles.root, className].filter(Boolean).join(" ");
 
-  const displayValue = formatValue
-    ? formatValue(percentage)
-    : `${percentage}%`;
+  const displayValue = formatValue ? formatValue(percentage) : `${percentage}%`;
 
   // Default value text for screen readers
-  const effectiveValueText = ariaValueText || (
-    isIndeterminate ? 'Loading' : `${percentage} percent`
-  );
+  const effectiveValueText =
+    ariaValueText || (isIndeterminate ? "Loading" : `${percentage} percent`);
 
   return (
     <BaseProgress.Root
@@ -102,20 +101,15 @@ function ProgressRoot({
       min={min}
       max={max}
       className={rootClasses}
-      aria-label={ariaLabel || (label ? undefined : 'Progress')}
+      role={role ?? "progressbar"}
+      aria-label={ariaLabel || (label ? undefined : "Progress")}
       aria-valuetext={effectiveValueText}
       aria-busy={isIndeterminate}
     >
       {(label || showValue) && (
         <div className={styles.header}>
-          {label && (
-            <BaseProgress.Label className={styles.label}>
-              {label}
-            </BaseProgress.Label>
-          )}
-          {showValue && !isIndeterminate && (
-            <span className={styles.value}>{displayValue}</span>
-          )}
+          {label && <BaseProgress.Label className={styles.label}>{label}</BaseProgress.Label>}
+          {showValue && !isIndeterminate && <span className={styles.value}>{displayValue}</span>}
         </div>
       )}
       <BaseProgress.Track className={trackClasses}>
@@ -140,14 +134,14 @@ const CIRCLE_SIZES = {
 
 function CircularProgressRoot({
   value = null,
-  size = 'md',
-  variant = 'default',
+  size = "md",
+  variant = "default",
   showValue = false,
   strokeWidth: customStrokeWidth,
   className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  'aria-valuetext': ariaValueText,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-valuetext": ariaValueText,
   ...htmlProps
 }: CircularProgressProps) {
   const isIndeterminate = value === null;
@@ -160,26 +154,24 @@ function CircularProgressRoot({
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - (percentage / 100) * circumference;
 
-  const sizeClass = size === 'sm' ? styles.circularSm
-    : size === 'lg' ? styles.circularLg
-    : styles.circularMd;
+  const sizeClass =
+    size === "sm" ? styles.circularSm : size === "lg" ? styles.circularLg : styles.circularMd;
 
   const indicatorClasses = [
     styles.circularIndicator,
-    variant === 'success' && styles.circularIndicatorSuccess,
-    variant === 'warning' && styles.circularIndicatorWarning,
-    variant === 'danger' && styles.circularIndicatorDanger,
+    variant === "success" && styles.circularIndicatorSuccess,
+    variant === "warning" && styles.circularIndicatorWarning,
+    variant === "danger" && styles.circularIndicatorDanger,
     isIndeterminate && styles.circularIndicatorIndeterminate,
-  ].filter(Boolean).join(' ');
-
-  const rootClasses = [styles.circular, sizeClass, className]
+  ]
     .filter(Boolean)
-    .join(' ');
+    .join(" ");
+
+  const rootClasses = [styles.circular, sizeClass, className].filter(Boolean).join(" ");
 
   // Default value text for screen readers
-  const effectiveValueText = ariaValueText || (
-    isIndeterminate ? 'Loading' : `${Math.round(percentage)} percent`
-  );
+  const effectiveValueText =
+    ariaValueText || (isIndeterminate ? "Loading" : `${Math.round(percentage)} percent`);
 
   return (
     <BaseProgress.Root
@@ -220,11 +212,13 @@ function CircularProgressRoot({
           strokeWidth={strokeWidth}
           strokeDasharray={circumference}
           strokeDashoffset={isIndeterminate ? undefined : offset}
-          style={isIndeterminate ? { transformOrigin: 'center' } : undefined}
+          style={isIndeterminate ? { transformOrigin: "center" } : undefined}
         />
       </svg>
       {showValue && !isIndeterminate && (
-        <span className={styles.circularValue} aria-hidden="true">{Math.round(percentage)}%</span>
+        <span className={styles.circularValue} aria-hidden="true">
+          {Math.round(percentage)}%
+        </span>
       )}
     </BaseProgress.Root>
   );