@carbon/element-styles 0.3.4 → 0.3.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/element-styles",
   "description": "An experimental styling system for native HTML elements, relying on semantic, attribute-focused selectors instead of class names.",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "license": "Apache-2.0",
   "type": "module",
   "sass": "index.scss",
@@ -41,12 +41,12 @@
     "@carbon/styles": "^1.102.0"
   },
   "devDependencies": {
-    "@carbon/icons": "^11.77.0",
+    "@carbon/icons": "^11.84.0",
     "@types/node": "^26.1.1",
     "highlight.js": "^11.11.1",
     "marked": "^18.0.6",
     "marked-highlight": "^2.2.4",
-    "sass": "^1.98.0",
-    "vite": "^8.0.3"
+    "sass": "^1.101.0",
+    "vite": "^8.1.5"
   }
 }

package/scss/elements/anchor/index.scss

@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/utilities/focus-outline';
 
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -43,8 +44,10 @@ $-default-config: (
       }
     }
 
-    &:hover {
-      color: theme.$link-primary-hover;
+    @include guards.hover {
+      &:hover {
+        color: theme.$link-primary-hover;
+      }
     }
 
     @if $emit-visited {

package/scss/elements/button/index.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/components/button/tokens' as carbon-button;
 
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -86,8 +87,10 @@ $-default-config: (
       background-color: carbon-button.$button-primary;
       color: theme.$text-on-color;
 
-      &:hover {
-        background-color: carbon-button.$button-primary-hover;
+      @include guards.hover {
+        &:enabled:hover {
+          background-color: carbon-button.$button-primary-hover;
+        }
       }
 
       &:active {
@@ -104,8 +107,10 @@ $-default-config: (
       background-color: carbon-button.$button-secondary;
       color: theme.$text-on-color;
 
-      &:enabled:hover {
-        background-color: carbon-button.$button-secondary-hover;
+      @include guards.hover {
+        &:enabled:hover {
+          background-color: carbon-button.$button-secondary-hover;
+        }
       }
 
       &:enabled:active {
@@ -124,14 +129,16 @@ $-default-config: (
       outline: 0.0625rem solid carbon-button.$button-tertiary;
       outline-offset: -0.0625rem;
 
-      &:focus {
-        color: theme.$text-inverse;
-        background-color: carbon-button.$button-tertiary;
+      @include guards.hover {
+        &:enabled:hover {
+          color: theme.$text-inverse;
+          background-color: carbon-button.$button-tertiary-hover;
+        }
       }
 
-      &:enabled:hover {
+      &:focus {
         color: theme.$text-inverse;
-        background-color: carbon-button.$button-tertiary-hover;
+        background-color: carbon-button.$button-tertiary;
       }
 
       &:enabled:active {
@@ -149,9 +156,11 @@ $-default-config: (
       color: theme.$link-primary;
       padding-inline-end: layout.$density--padding;
 
-      &:enabled:hover {
-        color: theme.$link-primary-hover;
-        background-color: theme.$layer-hover;
+      @include guards.hover {
+        &:enabled:hover {
+          color: theme.$link-primary-hover;
+          background-color: theme.$layer-hover;
+        }
       }
 
       &:enabled:active {
@@ -181,8 +190,10 @@ $-default-config: (
       background-color: carbon-button.$button-danger-primary;
       color: theme.$text-on-color;
 
-      &:enabled:hover {
-        background-color: carbon-button.$button-danger-hover;
+      @include guards.hover {
+        &:enabled:hover {
+          background-color: carbon-button.$button-danger-hover;
+        }
       }
 
       &:enabled:active {
@@ -201,15 +212,17 @@ $-default-config: (
       outline: 0.0625rem solid carbon-button.$button-danger-secondary;
       outline-offset: -0.0625rem;
 
-      &:focus {
-        color: theme.$text-on-color;
-        background-color: carbon-button.$button-danger-primary;
+      @include guards.hover {
+        &:enabled:hover {
+          color: theme.$text-on-color;
+          background-color: carbon-button.$button-danger-hover;
+          outline-color: carbon-button.$button-danger-hover;
+        }
       }
 
-      &:enabled:hover {
+      &:focus {
         color: theme.$text-on-color;
-        background-color: carbon-button.$button-danger-hover;
-        outline-color: carbon-button.$button-danger-hover;
+        background-color: carbon-button.$button-danger-primary;
       }
 
       &:enabled:active {
@@ -228,10 +241,12 @@ $-default-config: (
       color: carbon-button.$button-danger-secondary;
       padding-inline-end: layout.$density--padding;
 
-      &:enabled:hover {
-        color: theme.$text-on-color;
-        background-color: carbon-button.$button-danger-hover;
-        outline-color: carbon-button.$button-danger-hover;
+      @include guards.hover {
+        &:enabled:hover {
+          color: theme.$text-on-color;
+          background-color: carbon-button.$button-danger-hover;
+          outline-color: carbon-button.$button-danger-hover;
+        }
       }
 
       &:enabled:active {

package/scss/elements/combo-box/index.scss

@@ -12,6 +12,7 @@
 @use '../_labelled-input';
 
 @use '../../utilities/icons';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -48,8 +49,10 @@ $-default-config: (
     }
 
     & input[type="text"][list] {
-      &:enabled:hover {
-        background-color: theme.$field-hover;
+      @include guards.hover {
+        &:enabled:hover {
+          background-color: theme.$field-hover;
+        }
       }
 
       &:enabled:active {

package/scss/elements/details/index.scss

@@ -12,6 +12,7 @@
 
 @use '../../layout';
 @use '../../utilities/icons';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -48,8 +49,10 @@ $-default-config: (
       margin-inline-end: calc(layout.$density--padding * -1);
       padding-inline-end: layout.$density--padding;
 
-      &:hover {
-        background-color: theme.$layer-hover;
+      @include guards.hover {
+        &:hover {
+          background-color: theme.$layer-hover;
+        }
       }
 
       &:active {
@@ -67,7 +70,10 @@ $-default-config: (
       translate: 0 calc((1lh - 1rem) * 0.5);
       display: inline-block;
       margin-inline-end: layout.$density--padding;
-      transition: rotate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+
+      @include guards.motion {
+        transition: rotate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+      }
     }
 
     &[open] {

package/scss/elements/dialog/index.scss

@@ -20,6 +20,7 @@
 
 @use '../../layout';
 @use '../../utilities/icons';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -167,8 +168,10 @@ $-default-config: (
       cursor: pointer;
       transition: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
 
-      &:hover {
-        background-color: theme.$layer-hover;
+      @include guards.hover {
+        &:hover {
+          background-color: theme.$layer-hover;
+        }
       }
 
       &:active {
@@ -191,13 +194,21 @@ $-default-config: (
     &[open]:modal {
       translate: 0 0;
       opacity: 1;
-      transition-property: opacity, translate;
+      transition-property: opacity;
       transition-duration: motion.$duration-moderate-02;
       transition-timing-function: layout.$mode--transition-timing-function;
 
+      @include guards.motion {
+        transition-property: opacity, translate;
+
+        @starting-style {
+          opacity: 0;
+          translate: 0 -1.5rem;
+        }
+      }
+
       @starting-style {
         opacity: 0;
-        translate: 0 -1.5rem;
       }
     }
 

package/scss/elements/email-input/index.scss

@@ -0,0 +1,40 @@
+/**
+ * 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 '../_labelled-input';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="email"])',
+  axis: 'block',
+);
+
+/// @group email-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="email"])']
+/// @param {'block' | 'axis'} config.axis ['block']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include labelled-input.styles((
+      label: (
+        selector: '&',
+        axis: map.get($props, 'axis'),
+      ),
+      input: (
+        selector: 'input[type="email"]',
+      ),
+      input-invalid-slot: 'after',
+    ));
+  }
+}

package/scss/elements/file-input/index.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/components/button/tokens' as carbon-button;
 
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -60,8 +61,10 @@ $-default-config: (
       cursor: pointer;
       transition: background-color layout.$mode--transition-duration layout.$mode--transition-timing-function;
 
-      &:hover {
-        background-color: carbon-button.$button-primary-hover;
+      @include guards.hover {
+        &:hover {
+          background-color: carbon-button.$button-primary-hover;
+        }
       }
 
       &:active {
@@ -74,11 +77,18 @@ $-default-config: (
     }
 
     & input[type="file"]:disabled::file-selector-button,
-    & input[type="file"]:disabled::file-selector-button:hover,
     & input[type="file"]:disabled::file-selector-button:active {
       cursor: not-allowed;
       background-color: carbon-button.$button-disabled;
       color: theme.$text-on-color-disabled;
     }
+
+    @include guards.hover {
+      & input[type="file"]:disabled::file-selector-button:hover {
+        cursor: not-allowed;
+        background-color: carbon-button.$button-disabled;
+        color: theme.$text-on-color-disabled;
+      }
+    }
   }
 }

package/scss/elements/header-navigation/index.scss

@@ -12,6 +12,7 @@
 @use '@carbon/styles/scss/utilities/focus-outline';
 
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -74,9 +75,11 @@ $-default-config: (
       transition-duration: layout.$mode--transition-duration;
       transition-timing-function: layout.$mode--transition-timing-function;
 
-      &:hover {
-        background-color: theme.$layer-hover;
-        color: theme.$text-primary;
+      @include guards.hover {
+        &:hover {
+          background-color: theme.$layer-hover;
+          color: theme.$text-primary;
+        }
       }
 
       &:active {

package/scss/elements/inline-loading/index.scss

@@ -14,6 +14,7 @@
 
 @use '../../config';
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -46,9 +47,13 @@ $-stroke-width: 0.125rem;
       border-block-end-color: theme.$border-interactive;
       border-inline-end-color: theme.$border-interactive;
       animation-name: #{carbon-config.$prefix}--#{config.$prefix}--inline-loading--spinner;
-      animation-duration: motion.$duration-slow-02;
+      animation-duration: calc(motion.$duration-slow-02 * 3);
       animation-timing-function: linear;
       animation-iteration-count: infinite;
+
+      @include guards.motion {
+        animation-duration: motion.$duration-slow-02;
+      }
     }
 
     &::after {

package/scss/elements/menu/index.scss

@@ -14,6 +14,7 @@
 
 @use '../../layout';
 @use '../../utilities/icons';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -50,9 +51,11 @@ $-default-config: (
       box-sizing: border-box;
       cursor: pointer;
 
-      &:hover {
-        background-color: theme.$layer-hover;
-        color: theme.$text-primary;
+      @include guards.hover {
+        &:hover {
+          background-color: theme.$layer-hover;
+          color: theme.$text-primary;
+        }
       }
 
       &:active {

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

@@ -15,6 +15,7 @@
 
 @use '../../config';
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -68,9 +69,13 @@ $-indeterminate-ratio: 0.25;
     & progress:not([value])::-webkit-progress-value {
       inline-size: calc(100% * $-indeterminate-ratio);
       animation-name: #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate;
-      animation-duration: calc(motion.$duration-slow-02 * 2);
+      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);
+      }
     }
 
     @keyframes #{carbon-config.$prefix}--#{config.$prefix}--progress-bar--indeterminate {

package/scss/elements/select/index.scss

@@ -13,6 +13,7 @@
 
 @use '../../layout';
 @use '../../utilities/icons';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -51,8 +52,10 @@ $-default-config: (
     & select {
       cursor: pointer;
 
-      &:enabled:hover {
-        background-color: theme.$field-hover;
+      @include guards.hover {
+        &:enabled:hover {
+          background-color: theme.$field-hover;
+        }
       }
 
       &:enabled:active {

package/scss/elements/side-navigation/index.scss

@@ -13,6 +13,7 @@
 
 @use '../../layout';
 @use '../../utilities/icons';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -75,9 +76,11 @@ $-default-config: (
       transition-duration: layout.$mode--transition-duration;
       transition-timing-function: layout.$mode--transition-timing-function;
 
-      &:hover {
-        background-color: theme.$layer-hover;
-        color: theme.$text-primary;
+      @include guards.hover {
+        &:hover {
+          background-color: theme.$layer-hover;
+          color: theme.$text-primary;
+        }
       }
 
       &:active {
@@ -124,8 +127,10 @@ $-default-config: (
       box-shadow: inset 0.25rem 0 0 0 theme.$border-interactive;
       color: theme.$text-primary;
 
-      &:hover {
-        background-color: theme.$layer-selected-hover;
+      @include guards.hover {
+        &:hover {
+          background-color: theme.$layer-selected-hover;
+        }
       }
     }
 

package/scss/elements/table/index.scss

@@ -13,6 +13,7 @@
 @use '../_layer';
 
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -84,8 +85,10 @@ $-default-config: (
         background-color: theme.$layer-accent;
       }
 
-      & tr:hover {
-        @include layer.layer-background-hover;
+      @include guards.hover {
+        & tr:hover {
+          @include layer.layer-background-hover;
+        }
       }
 
       & tfoot th,

package/scss/elements/tabs/index.scss

@@ -14,6 +14,7 @@
 @use '@carbon/styles/scss/components/content-switcher/tokens' as carbon-content-switcher;
 
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -49,8 +50,10 @@ $-default-config: (
       transition-duration: layout.$mode--transition-duration;
       transition-timing-function: layout.$mode--transition-timing-function;
 
-      &:enabled:hover:not([aria-selected="true"]) {
-        color: theme.$text-primary;
+      @include guards.hover {
+        &:enabled:hover:not([aria-selected="true"]) {
+          color: theme.$text-primary;
+        }
       }
 
       &:focus {
@@ -72,8 +75,10 @@ $-default-config: (
         border-block-end: 0.125rem solid theme.$border-subtle;
         margin-inline-end: 0.0625rem;
 
-        &:enabled:hover:not([aria-selected="true"]) {
-          border-block-end-color: theme.$border-strong;
+        @include guards.hover {
+          &:enabled:hover:not([aria-selected="true"]) {
+            border-block-end-color: theme.$border-strong;
+          }
         }
 
         &[aria-selected="true"] {
@@ -97,8 +102,10 @@ $-default-config: (
           border-inline-end: 0.0625rem solid theme.$border-strong;
         }
 
-        &:enabled:hover:not([aria-selected="true"]) {
-          background-color: theme.$layer-accent-hover;
+        @include guards.hover {
+          &:enabled:hover:not([aria-selected="true"]) {
+            background-color: theme.$layer-accent-hover;
+          }
         }
 
         &[aria-selected="true"] {
@@ -141,8 +148,10 @@ $-default-config: (
           border-end-end-radius: inherit;
         }
 
-        &:enabled:hover:not([aria-selected="true"]) {
-          background-color: theme.$layer-hover;
+        @include guards.hover {
+          &:enabled:hover:not([aria-selected="true"]) {
+            background-color: theme.$layer-hover;
+          }
         }
 
         &:enabled:active:not([aria-selected="true"]) {
@@ -178,11 +187,16 @@ $-default-config: (
         &[aria-selected="true"]::after,
         &:last-child::after,
         &:has(+ [aria-selected="true"])::after,
-        &:hover::after,
-        &:has(+ :hover)::after,
         &:focus::after {
           visibility: hidden;
         }
+
+        @include guards.hover {
+          &:hover::after,
+          &:has(+ :hover)::after {
+            visibility: hidden;
+          }
+        }
       }
     }
 
@@ -193,11 +207,16 @@ $-default-config: (
       }
 
       & button[role="tab"] {
-        &:enabled:hover:not([aria-selected="true"]),
         &:enabled:active:not([aria-selected="true"]) {
           background-color: carbon-content-switcher.$content-switcher-background-hover;
         }
 
+        @include guards.hover {
+          &:enabled:hover:not([aria-selected="true"]) {
+            background-color: carbon-content-switcher.$content-switcher-background-hover;
+          }
+        }
+
         &[aria-selected="true"] {
           @include layout.mode--heading-compact;
           background-color: carbon-content-switcher.$content-switcher-selected;

package/scss/elements/telephone-number-input/index.scss

@@ -0,0 +1,40 @@
+/**
+ * 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 '../_labelled-input';
+
+@use '../../layout';
+
+$config: () !default;
+
+$-default-config: (
+  selector: 'label:has(input[type="tel"])',
+  axis: 'block',
+);
+
+/// @group telephone-number-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="tel"])']
+/// @param {'block' | 'axis'} config.axis ['block']
+@mixin styles($config: $config) {
+  $props: map.deep-merge($-default-config, $config);
+
+  #{map.get($props, 'selector')} {
+    @include labelled-input.styles((
+      label: (
+        selector: '&',
+        axis: map.get($props, 'axis'),
+      ),
+      input: (
+        selector: 'input[type="tel"]',
+      ),
+      input-invalid-slot: 'after',
+    ));
+  }
+}