@limetech/lime-elements 39.0.1 → 39.0.3

package/dist/collection/components/chip/chip.css

@@ -1,4 +1,72 @@
 @charset "UTF-8";
+.text {
+  transition: padding-left 0.4s ease;
+}
+
+limel-linear-progress {
+  position: absolute;
+  z-index: 1;
+  margin: auto;
+  left: 0.25rem;
+  width: 1.25rem;
+}
+
+:host(limel-chip[loading]) .chip:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: var(--limel-chip-height);
+  height: var(--limel-chip-height);
+  border-radius: 50%;
+  scale: 0.9;
+  background-color: rgba(var(--contrast-600), 0.8);
+}
+:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text {
+  padding-left: calc(var(--limel-chip-height) + 0.25rem);
+}
+
+div[role=progressbar] {
+  --limel-chip-progressbar-offset: 0.1875rem;
+  --limel-chip-progressbar-stripe-color: rgb(var(--contrast-100), 0.3);
+  --limel-chip-progressbar-stripe-size: 1.5rem;
+  pointer-events: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  inset: var(--limel-chip-progressbar-offset);
+  max-width: calc(100% - var(--limel-chip-progressbar-offset) * 2);
+  border-radius: inherit;
+  background-color: var(--chip-progress-color, rgb(var(--contrast-700)));
+  width: var(--limel-chip-progress-percentage);
+  opacity: 0.8;
+  mix-blend-mode: var(--limel-chip-progress-mix-blend-mode);
+}
+div[role=progressbar]:after {
+  content: "";
+  transform: translate3d(0, 0, 0);
+  position: absolute;
+  inset: 1px;
+  background-image: linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);
+  z-index: 1;
+  background-size: var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);
+  animation: move 2.5s linear infinite;
+  border-radius: inherit;
+}
+@media (prefers-reduced-motion) {
+  div[role=progressbar]:after {
+    animation: none;
+  }
+}
+
+@keyframes move {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1);
+  }
+}
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -336,73 +404,4 @@ limel-menu button[slot=trigger]:focus-visible {
 }
 limel-menu[open] button[slot=trigger] {
   box-shadow: var(--button-shadow-inset);
-}
-
-.text {
-  transition: padding-left 0.4s ease;
-}
-
-limel-linear-progress {
-  position: absolute;
-  z-index: 1;
-  margin: auto;
-  left: 0.25rem;
-  width: 1.25rem;
-}
-
-:host(limel-chip[loading]) .chip:before {
-  content: "";
-  position: absolute;
-  left: 0;
-  width: var(--limel-chip-height);
-  height: var(--limel-chip-height);
-  border-radius: 50%;
-  scale: 0.9;
-  background-color: rgba(var(--contrast-600), 0.8);
-}
-:host(limel-chip[loading]) .chip:not(:has(limel-icon)) .text {
-  padding-left: calc(var(--limel-chip-height) + 0.25rem);
-}
-
-div[role=progressbar] {
-  --limel-chip-progressbar-offset: 0.1875rem;
-  --limel-chip-progressbar-stripe-color: rgb(var(--contrast-100), 0.3);
-  --limel-chip-progressbar-stripe-size: 1.5rem;
-  pointer-events: none;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  inset: var(--limel-chip-progressbar-offset);
-  max-width: calc(100% - var(--limel-chip-progressbar-offset) * 2);
-  border-radius: inherit;
-  background-color: var(--chip-progress-color, rgb(var(--contrast-700)));
-  width: var(--limel-chip-progress-percentage);
-  opacity: 0.8;
-  mix-blend-mode: var(--limel-chip-progress-mix-blend-mode);
-}
-div[role=progressbar]:after {
-  content: "";
-  transform: translate3d(0, 0, 0);
-  position: absolute;
-  inset: 1px;
-  background-image: linear-gradient(-45deg, var(--limel-chip-progressbar-stripe-color) 25%, transparent 25%, transparent 50%, var(--limel-chip-progressbar-stripe-color) 50%, var(--limel-chip-progressbar-stripe-color) 75%, transparent 75%, transparent);
-  z-index: 1;
-  background-size: var(--limel-chip-progressbar-stripe-size) var(--limel-chip-progressbar-stripe-size);
-  animation: move 2.5s linear infinite;
-  border-radius: inherit;
-}
-@media (prefers-reduced-motion) {
-  div[role=progressbar]:after {
-    animation: none;
-  }
-}
-
-@keyframes move {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: calc(var(--limel-chip-progressbar-stripe-size) * -1) calc(var(--limel-chip-progressbar-stripe-size) * -1);
-  }
 }

package/dist/collection/components/chip-set/chip-set.css

@@ -1,10 +1,8 @@
 @charset "UTF-8";
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
+:host(limel-chip-set[readonly]) .mdc-text-field.disabled {
+  pointer-events: auto;
+}
+
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -92,6 +90,31 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
+:host(limel-chip-set:focus),
+:host(limel-chip-set:focus-visible),
+:host(limel-chip-set:focus-within) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
+}
+
+:host(limel-chip-set) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+  --limel-h-l-grid-template-rows: 0fr;
+}
+
+:host(limel-chip-set:focus) limel-helper-line,
+:host(limel-chip-set:focus-visible) limel-helper-line,
+:host(limel-chip-set:focus-within) limel-helper-line,
+:host(limel-chip-set:hover) limel-helper-line {
+  will-change: grid-template-rows;
+}
+
+/*
+* This file is imported into every component!
+*
+* Nothing in this file may output any CSS
+* without being explicitly called by outside code.
+*/
 /**
  * @prop --icon-background-color: Background color of the icon. Defaults to transparent.
  * @prop --icon-color: Color of the icon. Defaults to `rgb(var(--contrast-1100))`.
@@ -1757,114 +1780,4 @@ limel-chip {
 }
 limel-chip.can-be-removed {
   box-shadow: var(--shadow-depth-8-error);
-}
-
-:host(limel-chip-set[readonly]) .mdc-text-field.disabled {
-  pointer-events: auto;
-}
-
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-:host(limel-chip-set:focus),
-:host(limel-chip-set:focus-visible),
-:host(limel-chip-set:focus-within) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
-  --limel-h-l-grid-template-rows: 1fr;
-}
-
-:host(limel-chip-set) {
-  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
-  --limel-h-l-grid-template-rows: 0fr;
-}
-
-:host(limel-chip-set:focus) limel-helper-line,
-:host(limel-chip-set:focus-visible) limel-helper-line,
-:host(limel-chip-set:focus-within) limel-helper-line,
-:host(limel-chip-set:hover) limel-helper-line {
-  will-change: grid-template-rows;
 }

package/dist/collection/components/circular-progress/circular-progress.css

@@ -1,197 +1,4 @@
 @charset "UTF-8";
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-/**
- * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.
- * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.
- * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.
- * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.
- * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.
- * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.
- * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.
- */
-:host {
-  display: block;
-  box-sizing: border-box;
-  isolation: isolate;
-}
-
-:host([size=x-small]) {
-  --circular-progress-size: 1.5rem;
-  font-weight: bold;
-}
-:host([size=x-small]) .value {
-  letter-spacing: -0.0625rem;
-}
-
-:host([size=small]) {
-  --circular-progress-size: 2rem;
-  font-weight: bold;
-}
-:host([size=small]) .value {
-  letter-spacing: -0.03125rem;
-}
-
-:host([size=medium]) {
-  --circular-progress-size: 3rem;
-}
-
-:host([size=large]) {
-  --circular-progress-size: 4rem;
-}
-
-:host([size=x-large]) {
-  --circular-progress-size: 5rem;
-}
-
-.lime-circular-progress {
-  --size: var(--circular-progress-size, 3rem);
-  --fill-color: var(
-      --circular-progress-fill-color,
-      var(--lime-primary-color, var(--limel-theme-primary-color))
-  );
-  --track-color: var(
-      --circular-progress-track-color,
-      rgb(var(--contrast-400))
-  );
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--size);
-  height: var(--size);
-  border-radius: 50%;
-  line-height: normal;
-  box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.7);
-  background: conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%);
-}
-.lime-circular-progress:before {
-  content: "";
-  position: absolute;
-  width: calc(var(--size) * 0.75 + 0.25rem);
-  height: calc(var(--size) * 0.75 + 0.25rem);
-  border-radius: 50%;
-  background-color: var(--circular-progress-background-color, rgb(var(--contrast-100)));
-  box-shadow: var(--button-shadow-pressed);
-}
-
-.prefix {
-  font-size: clamp(0.5rem, var(--size) * 0.16, 2.25rem);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-  color: var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));
-  width: 45%;
-  top: 20%;
-  position: absolute;
-}
-
-.value {
-  display: flex;
-  font-size: clamp(0.5rem, var(--size) * 0.25, 4rem);
-  color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));
-  z-index: 1;
-  cursor: default;
-}
-
-.suffix {
-  font-size: clamp(0.5rem, var(--size) * 0.18, 2.5rem);
-  color: var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));
-  padding-top: 4%;
-}
-
 .displays-percentage-colors[style*="--percentage: 0%"] {
   --circular-progress-fill-color: var(
       --color-percent--0to10
@@ -800,4 +607,197 @@
 
 .displays-percentage-colors[style="--percentage: 100%;"] {
   --circular-progress-fill-color: var(--color-percent--100);
+}
+
+/*
+* This file is imported into every component!
+*
+* Nothing in this file may output any CSS
+* without being explicitly called by outside code.
+*/
+/**
+* Note! This file is exported to `dist/scss/` in the published
+* node module, for consumer projects to import.
+* That means this file cannot import from any file that isn't
+* also exported, keeping the same relative path.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+/**
+ * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.
+ * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.
+ * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.
+ * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.
+ * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.
+ * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.
+ * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.
+ */
+:host {
+  display: block;
+  box-sizing: border-box;
+  isolation: isolate;
+}
+
+:host([size=x-small]) {
+  --circular-progress-size: 1.5rem;
+  font-weight: bold;
+}
+:host([size=x-small]) .value {
+  letter-spacing: -0.0625rem;
+}
+
+:host([size=small]) {
+  --circular-progress-size: 2rem;
+  font-weight: bold;
+}
+:host([size=small]) .value {
+  letter-spacing: -0.03125rem;
+}
+
+:host([size=medium]) {
+  --circular-progress-size: 3rem;
+}
+
+:host([size=large]) {
+  --circular-progress-size: 4rem;
+}
+
+:host([size=x-large]) {
+  --circular-progress-size: 5rem;
+}
+
+.lime-circular-progress {
+  --size: var(--circular-progress-size, 3rem);
+  --fill-color: var(
+      --circular-progress-fill-color,
+      var(--lime-primary-color, var(--limel-theme-primary-color))
+  );
+  --track-color: var(
+      --circular-progress-track-color,
+      rgb(var(--contrast-400))
+  );
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  line-height: normal;
+  box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.7);
+  background: conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%);
+}
+.lime-circular-progress:before {
+  content: "";
+  position: absolute;
+  width: calc(var(--size) * 0.75 + 0.25rem);
+  height: calc(var(--size) * 0.75 + 0.25rem);
+  border-radius: 50%;
+  background-color: var(--circular-progress-background-color, rgb(var(--contrast-100)));
+  box-shadow: var(--button-shadow-pressed);
+}
+
+.prefix {
+  font-size: clamp(0.5rem, var(--size) * 0.16, 2.25rem);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));
+  width: 45%;
+  top: 20%;
+  position: absolute;
+}
+
+.value {
+  display: flex;
+  font-size: clamp(0.5rem, var(--size) * 0.25, 4rem);
+  color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));
+  z-index: 1;
+  cursor: default;
+}
+
+.suffix {
+  font-size: clamp(0.5rem, var(--size) * 0.18, 2.5rem);
+  color: var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));
+  padding-top: 4%;
 }