@carbon/element-styles 0.3.4 → 0.3.5-rc.0

package/scss/elements/tile/index.scss

@@ -15,6 +15,7 @@
 
 @use '../../layout';
 @use '../../utilities/icons';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -51,9 +52,11 @@ $-default-config: (
         fill: currentColor;
       }
 
-      &:hover {
-        @include layer.layer-background-hover;
-        color: inherit;
+      @include guards.hover {
+        &:hover {
+          @include layer.layer-background-hover;
+          color: inherit;
+        }
       }
 
       &:active {
@@ -74,8 +77,10 @@ $-default-config: (
         transition: color layout.$mode--transition-duration layout.$mode--transition-timing-function;
       }
 
-      &:hover::after {
-        color: theme.$icon-primary;
+      @include guards.hover {
+        &:hover::after {
+          color: theme.$icon-primary;
+        }
       }
     }
   }

package/scss/elements/toggle/index.scss

@@ -15,6 +15,7 @@
 @use '../label';
 
 @use '../../layout';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -98,7 +99,10 @@ $-knob-size: calc($-block-size - $-knob-spacing * 2);
       background-color: theme.$icon-on-color;
       inset-inline-start: $-knob-spacing;
       inset-block-start: $-knob-spacing;
-      transition: translate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+
+      @include guards.motion {
+        transition: translate layout.$mode--transition-duration layout.$mode--transition-timing-function;
+      }
     }
 
     & button[role="switch"][aria-checked="true"]::before {

package/scss/elements/tree-view/index.scss

@@ -14,6 +14,7 @@
 
 @use '../../layout';
 @use '../../utilities/icons';
+@use '../../utilities/guards';
 
 $config: () !default;
 
@@ -49,9 +50,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 {
@@ -87,9 +90,15 @@ $-default-config: (
       color: theme.$text-disabled;
       cursor: not-allowed;
 
-      &:hover, &:active {
+      &:active {
         background-color: transparent;
       }
+
+      @include guards.hover {
+        &:hover {
+          background-color: transparent;
+        }
+      }
     }
 
     & li[role="treeitem"] > ul[role="group"] {

package/scss/elements/url-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="url"])',
+  axis: 'block',
+);
+
+/// @group url-input
+/// @param {Map} config [()]
+/// @param {Selector} config.selector ['label:has(input[type="url"])']
+/// @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="url"]',
+      ),
+      input-invalid-slot: 'after',
+    ));
+  }
+}

package/scss/prebuilt/expressive/_elements.scss

@@ -21,6 +21,7 @@
 @use '../../elements/description-list';
 @use '../../elements/details';
 @use '../../elements/dialog';
+@use '../../elements/email-input';
 @use '../../elements/fieldset';
 @use '../../elements/file-input';
 @use '../../elements/footer';
@@ -56,6 +57,7 @@
 @use '../../elements/side-navigation';
 @use '../../elements/small-text';
 @use '../../elements/table';
+@use '../../elements/telephone-number-input';
 @use '../../elements/text-area';
 @use '../../elements/text-input';
 @use '../../elements/tile';
@@ -64,6 +66,7 @@
 @use '../../elements/tooltip';
 @use '../../elements/tree-view';
 @use '../../elements/unordered-list';
+@use '../../elements/url-input';
 
 @mixin styles {
   @include abbreviation.styles;
@@ -86,6 +89,7 @@
   @include description-list.styles;
   @include details.styles;
   @include dialog.styles;
+  @include email-input.styles;
   @include fieldset.styles;
   @include file-input.styles;
   @include footer.styles;
@@ -112,6 +116,7 @@
   @include password-input.styles;
   @include popover.styles;
   @include preformatted.styles;
+  @include progress-bar.styles;
   @include radio-button.styles;
   @include range-input.styles;
   @include search-input.styles;
@@ -121,6 +126,7 @@
   @include table.styles((
     kind: 'structured-list',
   ));
+  @include telephone-number-input.styles;
   @include text-area.styles;
   @include text-input.styles;
   @include tile.styles;
@@ -128,4 +134,5 @@
   @include toggle.styles;
   @include tooltip.styles;
   @include unordered-list.styles;
+  @include url-input.styles;
 }

package/scss/prebuilt/productive/_elements.scss

@@ -21,6 +21,7 @@
 @use '../../elements/description-list';
 @use '../../elements/details';
 @use '../../elements/dialog';
+@use '../../elements/email-input';
 @use '../../elements/fieldset';
 @use '../../elements/file-input';
 @use '../../elements/footer';
@@ -56,6 +57,7 @@
 @use '../../elements/side-navigation';
 @use '../../elements/small-text';
 @use '../../elements/table';
+@use '../../elements/telephone-number-input';
 @use '../../elements/text-area';
 @use '../../elements/text-input';
 @use '../../elements/tile';
@@ -64,6 +66,7 @@
 @use '../../elements/tooltip';
 @use '../../elements/tree-view';
 @use '../../elements/unordered-list';
+@use '../../elements/url-input';
 
 @mixin styles {
   @include abbreviation.styles;
@@ -86,6 +89,7 @@
   @include description-list.styles;
   @include details.styles;
   @include dialog.styles;
+  @include email-input.styles;
   @include fieldset.styles;
   @include file-input.styles;
   @include footer.styles;
@@ -112,6 +116,7 @@
   @include password-input.styles;
   @include popover.styles;
   @include preformatted.styles;
+  @include progress-bar.styles;
   @include radio-button.styles;
   @include range-input.styles;
   @include search-input.styles;
@@ -119,6 +124,7 @@
   @include side-navigation.styles;
   @include small-text.styles;
   @include table.styles;
+  @include telephone-number-input.styles;
   @include text-area.styles;
   @include text-input.styles;
   @include tile.styles;
@@ -126,4 +132,5 @@
   @include toggle.styles;
   @include tooltip.styles;
   @include unordered-list.styles;
+  @include url-input.styles;
 }

package/scss/utilities/_guards.scss

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+/// Guards styles to devices that have some hover-capable input mechanism.
+/// @group guards
+@mixin hover {
+  @media (any-hover: hover) {
+    @content;
+  }
+}
+
+/// Guards styles to users without a "reduced motion" preference on devices that can meaningfully display motion.
+/// @group guards
+@mixin motion {
+  @media (prefers-reduced-motion: no-preference) and (update: fast) {
+    @content;
+  }
+}