@carbon/web-components 2.25.2 → 2.26.0

package/lib/index.d.ts

@@ -166,4 +166,6 @@ export { default as CDSSwitcher } from './components/ui-shell/switcher';
 export { default as CDSSwitcherItem } from './components/ui-shell/switcher-item';
 export { default as CDSSwitcherDivider } from './components/ui-shell/switcher-divider';
 export { default as CDSStack } from './components/stack/stack';
+export { default as CDSTimePicker } from './components/time-picker/time-picker';
+export { default as CDSTimePickerSelect } from './components/time-picker/time-picker-select';
 export { default as CDSHeading } from './components/heading/heading';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.25.2",
+  "version": "2.26.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -65,9 +65,10 @@
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/styles": "^1.77.2",
+    "@carbon/styles": "^1.78.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.5.0",
+    "@lit/context": "^1.1.1",
     "flatpickr": "4.6.13",
     "lit": "^3.1.0",
     "lodash-es": "^4.17.21",
@@ -76,7 +77,7 @@
   "devDependencies": {
     "@carbon/icon-helpers": "10.47.0",
     "@carbon/icons": "^11.57.0",
-    "@carbon/layout": "^11.30.2",
+    "@carbon/layout": "^11.31.0",
     "@carbon/motion": "^11.25.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.37.0",
@@ -138,5 +139,5 @@
       }
     ]
   },
-  "gitHead": "5c8f7e2a47c2bfb2865f1f2f4efe55b26f45ad5c"
+  "gitHead": "af9ae8856cd0db974257bf1015d684e1ed204514"
 }

package/scss/components/breadcrumb/breadcrumb.scss

@@ -108,8 +108,13 @@ $css--plex: true !default;
 :host(#{$prefix}-breadcrumb-link) {
   outline: none;
 
+  .#{$prefix}--link:visited,
   .#{$prefix}--link {
     font: inherit;
+
+    &:active {
+      color: $text-primary;
+    }
   }
 
   // Re-define the ruleset so this wins over `.#{$prefix}--link:visited`, etc.

package/scss/components/button/button.scss

@@ -33,6 +33,10 @@ $css--plex: true !default;
   .#{$prefix}--btn {
     flex-grow: 1;
     max-inline-size: 100%;
+
+    &:not(:focus) {
+      box-shadow: to-rem(-1px) to-rem(-1px) 0 0 $button-separator;
+    }
   }
 }
 

package/scss/components/list/list.scss

@@ -69,12 +69,14 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-unordered-list[slot='nested'])
+:host(#{$prefix}-unordered-list[nested]),
+:host(#{$prefix}-unordered-list[slot='nested']) {
   ::slotted(#{$prefix}-list-item)::before {
-  // ▪ square
-  content: '\0025AA';
-  // offset to account for smaller ▪ vs –
-  inset-inline-start: calc(-1 * #{$spacing-04});
+    // ▪ square
+    content: '\0025AA';
+    // offset to account for smaller ▪ vs –
+    inset-inline-start: calc(-1 * #{$spacing-04});
+  }
 }
 
 :host(#{$prefix}-list-item) {

package/scss/components/menu/menu-item.scss

@@ -0,0 +1,109 @@
+//
+// Copyright IBM Corp. 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/menu' as *;
+@use '@carbon/styles/scss/utilities/component-reset';
+
+:host(#{$prefix}-menu-item) {
+  @include type-style('body-short-01');
+
+  display: grid;
+  align-items: center;
+  block-size: $spacing-07;
+  color: $text-secondary;
+  column-gap: $spacing-03;
+  cursor: pointer;
+  grid-template-columns: 1fr max-content;
+  padding-inline: $spacing-05;
+  transition: background-color $duration-fast-01 motion(standard, productive);
+
+  svg {
+    color: $icon-secondary;
+  }
+}
+:host(#{$prefix}-menu-item:focus) {
+  @include focus-outline('outline');
+}
+:host(#{$prefix}-menu-item-divider) {
+  @extend .#{$prefix}--menu-item-divider;
+}
+
+:host(#{$prefix}-menu-item:hover) {
+  background-color: $layer-hover;
+  color: $text-primary;
+
+  svg {
+    color: $icon-primary;
+  }
+}
+:host(#{$prefix}-menu-item-group),
+:host(#{$prefix}-menu-item-radio-group) {
+  > ul {
+    @include component-reset.reset;
+  }
+}
+
+.#{$prefix}--menu-item__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$prefix}--menu-item__shortcut {
+  display: flex;
+}
+
+.#{$prefix}--menu-item__icon {
+  display: var(--child-icon-property, none);
+}
+
+:host([aria-disabled='true']) * {
+  color: $text-disabled;
+  cursor: not-allowed;
+}
+
+:host([aria-disabled='true']:hover),
+:host([aria-disabled='true'].#{$prefix}--menu-item--danger:hover) {
+  background-color: $layer;
+  color: $text-disabled;
+}
+
+:host(.#{$prefix}--menu-item--danger:hover),
+:host(.#{$prefix}--menu-item--danger:focus) {
+  background-color: button-tokens.$button-danger-primary;
+  color: $text-on-color;
+}
+
+.#{$prefix}--menu-item__icon,
+.#{$prefix}--menu-item__selection-icon {
+  display: none;
+}
+
+:host(#{$prefix}-menu-item) {
+  block-size: var(--block-size-value);
+  grid-template-columns: var(--grid-template);
+  .#{$prefix}--menu-item__icon {
+    display: var(--display-icon-item);
+  }
+}
+.#{$prefix}--menu-item__selection-icon {
+  display: var(--display-selection-icon);
+}
+
+span[slot='render-icon'] {
+  display: flex;
+}

package/scss/components/menu/menu-variables.scss

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+
+.#{$prefix}--menu--with-icons {
+  --child-icon-property: flex;
+  --child-grid-template-columns: 1rem 1fr max-content;
+}

package/scss/components/menu/menu.scss

@@ -0,0 +1,72 @@
+//
+// Copyright IBM Corp. 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/menu' as *;
+@import './menu-variables';
+
+:host(#{$prefix}-menu) {
+  position: fixed;
+  --grid-template: 1rem 1fr max-content;
+  --display-icon-item: none;
+  --display-selection-icon: none;
+  --block-size-value: $spacing-07;
+}
+.#{$prefix}--menu--with-icons {
+  --grid-template: 1rem 1rem 1fr max-content;
+  --display-icon-item: flex;
+}
+.#{$prefix}--menu--with-selectable-items {
+  --display-selection-icon: flex;
+}
+
+.#{$prefix}--menu {
+  @extend .#{$prefix}--menu;
+
+  overflow-y: auto;
+
+  &--shown {
+    opacity: 1;
+  }
+
+  &--open {
+    visibility: visible;
+
+    &:focus {
+      @include focus-outline('border');
+    }
+  }
+
+  &--with-icons {
+    min-inline-size: 12rem;
+  }
+  &:not(.#{$prefix}--menu--open) .#{$prefix}--menu--open {
+    visibility: hidden;
+  }
+}
+.#{$prefix}--menu--with-icons {
+  min-inline-size: 12rem;
+}
+
+.#{$prefix}--menu--xs {
+  --block-size-value: 1.5rem;
+}
+.#{$prefix}--menu--sm {
+  --block-size-value: 2rem;
+}
+.#{$prefix}--menu--md {
+  --block-size-value: 2.5rem;
+}
+.#{$prefix}--menu--lg {
+  --block-size-value: 3rem;
+}

package/scss/components/overflow-menu/overflow-menu.scss

@@ -124,33 +124,88 @@ $css--plex: true !default;
   @extend .#{$prefix}--overflow-menu--divider;
 }
 
+// breadcrumb
 :host(#{$prefix}-overflow-menu[breadcrumb]) {
   background: none;
-  block-size: 1.125rem;
+  block-size: convert.to-rem(18px);
   box-shadow: none;
-  inline-size: 1.25rem;
+  inline-size: $spacing-05;
   min-block-size: 1.125rem;
 
   #{$prefix}-tooltip button {
     position: relative;
-    block-size: 1.125rem;
-    inline-size: 1.25rem;
+    block-size: convert.to-rem(18px);
+    inline-size: $spacing-05;
     min-block-size: 1.125rem;
-    padding-inline: 0;
-  }
 
-  :hover,
-  :active,
-  :focus {
-    box-sizing: border-box;
-    background: none;
-    box-shadow: none;
+    &:hover,
+    &:active,
+    &:focus {
+      box-sizing: border-box;
+      background: none;
+      box-shadow: none;
+      outline-offset: 0;
+
+      &::after {
+        opacity: 1;
+      }
+    }
+
+    &:active,
+    &:focus {
+      outline: 1px solid $focus;
+    }
+
+    &:hover {
+      &::after {
+        background: $link-primary-hover;
+      }
+    }
+
+    &:active {
+      &::after {
+        background: $text-primary;
+      }
+    }
+
+    &::after {
+      position: absolute;
+      background: $focus;
+      block-size: 1px;
+      content: '';
+      inline-size: convert.to-rem(12px);
+      inset-block-end: 2px;
+      opacity: 0;
+      transition: opacity $duration-fast-01 motion(standard, productive);
+
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
   }
 }
 
-:host(#{$prefix}-overflow-menu[breadcrumb]) {
+:host(#{$prefix}-overflow-menu[breadcrumb]) ::slotted([slot='icon']) {
+  fill: $link-primary;
+  transform: translateY(4px);
+}
+
+:host(#{$prefix}-overflow-menu[breadcrumb]:hover) ::slotted([slot='icon']) {
+  fill: $link-primary-hover;
+}
+
+:host(#{$prefix}-overflow-menu[breadcrumb]:active) ::slotted([slot='icon']) {
+  fill: $text-primary;
+}
+
+:host(#{$prefix}-overflow-menu[breadcrumb][breadcrumb-size='sm']) {
+  #{$prefix}-tooltip button {
+    block-size: $spacing-05;
+    min-block-size: $spacing-05;
+  }
+
   ::slotted([slot='icon']) {
-    transform: translateY(4px);
+    transform: translateY(3px);
   }
 }
 

package/scss/components/time-picker/time-picker.scss

@@ -0,0 +1,50 @@
+//
+// Copyright IBM Corp. 2019, 2025
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/time-picker/index';
+@use '@carbon/styles/scss/components/select';
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/convert' as convert;
+
+:host(#{$prefix}-time-picker) {
+  @include emit-layout-tokens();
+}
+
+:host(#{$prefix}-time-picker-select) {
+  @extend .#{$prefix}--select;
+  @extend .#{$prefix}--time-picker__select;
+}
+
+:host(#{$prefix}-time-picker-select) .#{$prefix}--select {
+  inline-size: 100%;
+}
+
+:host(#{$prefix}-time-picker-select[disabled]) {
+  @extend .#{$prefix}--select--disabled;
+}
+
+:host(#{$prefix}-time-picker-select[readonly]) {
+  @extend .#{$prefix}--select--readonly;
+}
+
+:host(#{$prefix}-time-picker-select[readonly]) select {
+  pointer-events: none;
+}
+
+:host(#{$prefix}-time-picker-select) select {
+  margin: 0;
+  inline-size: auto;
+  line-height: 1;
+  min-inline-size: auto;
+  padding-inline-end: convert.to-rem(48px);
+}