@carbon/element-styles 0.3.14 → 0.3.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/element-styles",
-  "version": "0.3.14",
+  "version": "0.3.15",
   "description": "An experimental styling system for native HTML elements, relying on semantic, attribute-focused selectors instead of class names.",
   "keywords": [
     "carbon",

package/scss/elements/label/index.scss

@@ -37,13 +37,11 @@ $-default-config: (
 
     @if map.get($props, "axis") == "block" {
       @include layout.mode--label;
-      // flex-direction: column;
       grid-auto-flow: row;
     }
 
     @if map.get($props, "axis") == "inline" {
       @include layout.mode--body-compact;
-      // flex-direction: row;
       grid-auto-flow: column;
       align-items: center;
       inline-size: fit-content;

package/scss/elements/meter/index.scss

@@ -0,0 +1,74 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use "sass:map";
+
+@use "@carbon/styles/scss/theme";
+
+@use "../label";
+
+@use "../../layout";
+
+$config: () !default;
+
+$-default-config: (
+  selector: "label:has(meter)",
+  axis: "block",
+);
+
+/// @group meter
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(meter)']
+/// @param {'block' | 'axis'} config.axis ['block']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, "selector")} {
+    @include label.styles(
+      (
+        selector: "&",
+        axis: map.get($props, "axis"),
+      )
+    );
+
+    meter {
+      min-inline-size: 6rem;
+      background: theme.$layer;
+      block-size: 0.5rem;
+      inline-size: 100%;
+    }
+
+    meter::-webkit-meter-bar {
+      background: theme.$layer;
+      block-size: 0.5rem;
+    }
+
+    meter::-webkit-meter-optimum-value {
+      background: theme.$support-success;
+    }
+
+    meter:-moz-meter-optimum::-moz-meter-bar {
+      background: theme.$support-success;
+    }
+
+    meter::-webkit-meter-suboptimum-value {
+      background: theme.$support-caution-minor;
+    }
+
+    meter:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: theme.$support-caution-minor;
+    }
+
+    meter::-webkit-meter-even-less-good-value {
+      background: theme.$support-caution-major;
+    }
+
+    meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: theme.$support-caution-major;
+    }
+  }
+}

package/scss/elements/progress-bar/index.scss

@@ -25,8 +25,6 @@ $-default-config: (
   thickness: "thick",
 );
 
-$-indeterminate-ratio: 0.25;
-
 /// @group progress-bar
 /// @param {Map} config [()]
 /// @param {Selector} config.selector ['progress']
@@ -45,6 +43,11 @@ $-indeterminate-ratio: 0.25;
 
     & progress {
       appearance: none;
+      background-color: theme.$layer;
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      overflow: hidden;
 
       @if map.get($props, "thickness") == "thick" {
         block-size: 0.5rem;
@@ -68,8 +71,29 @@ $-indeterminate-ratio: 0.25;
       background-color: theme.$interactive;
     }
 
-    & progress:not([value])::-webkit-progress-value {
-      inline-size: calc(100% * $-indeterminate-ratio);
+    & progress::-moz-progress-bar {
+      background-color: theme.$interactive;
+    }
+
+    & progress:not([value])::-moz-progress-bar {
+      background-color: transparent;
+      background-image: linear-gradient(90deg, theme.$interactive 12.5%, transparent 12.5%);
+      background-position-x: 0%;
+      background-size: 200% 100%;
+      animation-name: #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate;
+      animation-duration: calc(motion.$duration-slow-02 * 5);
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+
+      @include guards.motion {
+        animation-duration: calc(motion.$duration-slow-02 * 2);
+      }
+    }
+
+    & progress:not([value])::-webkit-progress-bar {
+      background-image: linear-gradient(90deg, theme.$interactive 12.5%, transparent 12.5%);
+      background-position-x: 0%;
+      background-size: 200% 100%;
       animation-name: #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate;
       animation-duration: calc(motion.$duration-slow-02 * 5);
       animation-timing-function: linear;
@@ -82,11 +106,12 @@ $-indeterminate-ratio: 0.25;
 
     @keyframes #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate {
       0% {
-        translate: -100% 0;
+        background-position-x: 25%;
       }
 
+      80%,
       100% {
-        translate: calc(100% / $-indeterminate-ratio) 0;
+        background-position-x: -105%;
       }
     }
   }