@carbon/web-components 2.60.0 → 2.61.0

package/scss/components/date-picker/date-picker.scss

@@ -184,3 +184,9 @@ $css--plex: true !default;
   .#{$prefix}--date-picker__input--decorator {
   @include ai-gradient;
 }
+
+.#{$prefix}--form-requirement {
+  box-sizing: border-box;
+  inline-size: 0;
+  min-inline-size: 100%;
+}

package/scss/components/date-picker/next/components/date-picker.scss

@@ -0,0 +1,124 @@
+//
+// 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 '@carbon/styles/scss/components/date-picker/date-picker' as *;
+@use '@carbon/styles/scss/components/date-picker/date-picker-next' as
+  date-picker-next;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+
+@include date-picker;
+@include date-picker-next.date-picker-next-rules;
+
+// =============================================================================
+// WEB COMPONENTS SPECIFIC STYLES
+// These styles add :host() selectors and ::slotted() for shadow DOM
+// =============================================================================
+
+:host(#{$prefix}-preview-date-picker) {
+  @extend .#{$prefix}--date-picker;
+
+  position: relative;
+}
+
+:host(#{$prefix}-preview-date-picker-input),
+:host(#{$prefix}-preview-date-picker-input-skeleton) {
+  @extend .#{$prefix}--date-picker-container;
+}
+
+:host(#{$prefix}-preview-date-picker-input[warn]:not([invalid])) {
+  @extend .#{$prefix}--date-picker-container--warn;
+}
+
+:host(#{$prefix}-preview-date-picker-input[kind='simple']),
+:host(#{$prefix}-preview-date-picker-input-skeleton[kind='simple']) {
+  @extend .#{$prefix}--date-picker-container--simple;
+}
+
+:host(#{$prefix}-preview-date-picker-input[kind='simple'][short]),
+:host(#{$prefix}-preview-date-picker-input-skeleton[kind='simple'][short]) {
+  @extend .#{$prefix}--date-picker-container--simple;
+  @extend .#{$prefix}--date-picker-container--short;
+}
+
+:host(#{$prefix}-preview-date-picker-input[kind='single']),
+:host(#{$prefix}-preview-date-picker-input-skeleton[kind='single']) {
+  @extend .#{$prefix}--date-picker-container--single;
+}
+
+:host(#{$prefix}-preview-date-picker-input[kind='from']),
+:host(#{$prefix}-preview-date-picker-input-skeleton[kind='from']) {
+  @extend .#{$prefix}--date-picker-container--from;
+}
+
+:host(#{$prefix}-preview-date-picker-input[kind='from']),
+:host(#{$prefix}-preview-date-picker-input[kind='to']),
+:host(#{$prefix}-preview-date-picker-input-skeleton[kind='from']),
+:host(#{$prefix}-preview-date-picker-input-skeleton[kind='to']) {
+  @extend .#{$prefix}--date-picker-container--from;
+}
+
+:host(#{$prefix}-preview-date-picker-input) {
+  .#{$prefix}--date-picker__icon {
+    @extend .#{$prefix}--date-picker__icon;
+  }
+
+  .#{$prefix}--date-picker__icon--warn {
+    @extend .#{$prefix}--date-picker__icon--warn;
+  }
+
+  .#{$prefix}--date-picker__icon--invalid {
+    @extend .#{$prefix}--date-picker__icon--invalid;
+  }
+
+  // Shadow DOM slotted content
+  ::slotted(#{$prefix}-ai-label),
+  ::slotted(#{$prefix}-slug) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: $spacing-08;
+  }
+
+  ::slotted(#{$prefix}-ai-label:not([revert-active])),
+  ::slotted(#{$prefix}-slug:not([revert-active])) {
+    transform: translateY(-50%);
+  }
+}
+
+:host(#{$prefix}-preview-date-picker-input-skeleton) {
+  @extend .#{$prefix}--date-picker-input-skeleton;
+}
+
+:host(#{$prefix}-preview-date-picker-input-skeleton[range]) {
+  @extend .#{$prefix}--date-picker-input-skeleton--range;
+}
+
+:host(#{$prefix}-preview-date-picker-input[ai-label]) {
+  @extend .#{$prefix}--date-picker-container--ai-label;
+}
+
+// Calendar component in shadow DOM
+:host(#{$prefix}-preview-date-picker-calendar) {
+  display: block;
+  outline: none;
+
+  .#{$prefix}--date-picker__calendar {
+    // Override shared styles for Web Components
+    // Use box-sizing to include padding in width calculation
+    // This ensures the 288px includes the padding, making the content area 272px
+    box-sizing: border-box;
+    inline-size: rem(288px);
+    max-inline-size: rem(288px);
+  }
+
+  .#{$prefix}--date-picker__day,
+  .#{$prefix}--date-picker__month-nav {
+    font-family: inherit;
+  }
+}

package/scss/components/fluid-date-picker/fluid-date-picker.scss

@@ -0,0 +1,282 @@
+/**
+ * Copyright IBM Corp. 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/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities/convert';
+@use '@carbon/styles/scss/utilities/skeleton' as *;
+@use '@carbon/styles/scss/components/fluid-date-picker' as *;
+@use '@carbon/styles/scss/components/date-picker/index';
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+
+// ── Fluid date picker (wrapper) ──────────────────────────────────────────────
+
+:host(#{$prefix}-fluid-date-picker) {
+  @extend .#{$prefix}--date-picker--fluid;
+  @include emit-layout-tokens();
+
+  display: inline-flex;
+  inline-size: fit-content;
+  max-inline-size: 100%;
+
+  #floating-menu-container {
+    position: absolute;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--date-picker__calendar.open {
+    margin-block-start: 0;
+  }
+
+  .flatpickr-next-month,
+  .flatpickr-prev-month {
+    svg {
+      transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};
+    }
+  }
+
+  .#{$prefix}--date-picker__day.flatpickr-disabled,
+  .flatpickr-day.flatpickr-disabled {
+    color: $layer-selected-inverse;
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  .flatpickr-next-month.flatpickr-disabled,
+  .flatpickr-prev-month.flatpickr-disabled {
+    svg {
+      cursor: not-allowed;
+      fill: $layer-selected-inverse;
+      opacity: 0.5;
+    }
+
+    &:hover {
+      svg {
+        fill: $layer-selected-inverse;
+      }
+    }
+  }
+}
+
+:host(#{$prefix}-fluid-date-picker[invalid]) {
+  @extend .#{$prefix}--date-picker--fluid--invalid;
+}
+
+:host(#{$prefix}-fluid-date-picker[warn]:not([invalid])) {
+  @extend .#{$prefix}--date-picker--fluid--warn;
+}
+
+:host(#{$prefix}-fluid-date-picker[readonly]) {
+  @extend .#{$prefix}--date-picker--fluid--readonly;
+}
+
+// ── Fluid date picker input ──────────────────────────────────────────────────
+
+:host(#{$prefix}-fluid-date-picker-input) {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  background: $field;
+  block-size: convert.to-rem(64px);
+  border-block-end: 1px solid $border-strong;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  outline: none;
+}
+
+:host(#{$prefix}-fluid-date-picker-input[disabled]),
+:host(#{$prefix}-fluid-date-picker-input[readonly]) {
+  border-block-end: 1px solid $border-subtle;
+}
+
+// When invalid or warn, allow host to grow beyond 64px for error message
+:host(
+    #{$prefix}-fluid-date-picker-input[invalid]:not([disabled]):not([readonly])
+  ),
+:host(
+    #{$prefix}-fluid-date-picker-input[warn]:not([invalid]):not([disabled]):not(
+        [readonly]
+      )
+  ) {
+  block-size: auto;
+  border-block-end: none;
+  min-block-size: convert.to-rem(64px);
+}
+
+// Divider between input area and error/warn message
+:host(#{$prefix}-fluid-date-picker-input) .#{$prefix}--date-picker__divider {
+  border-style: solid;
+  border-color: $border-subtle;
+  margin: 0 1rem;
+  border-block-end: none;
+  inline-size: calc(100% - 2rem);
+}
+
+// Hide divider when disabled or readonly
+:host(#{$prefix}-fluid-date-picker-input[disabled])
+  .#{$prefix}--date-picker__divider,
+:host(#{$prefix}-fluid-date-picker-input[readonly])
+  .#{$prefix}--date-picker__divider {
+  display: none;
+}
+
+// Error / warn message padding
+:host(
+    #{$prefix}-fluid-date-picker-input[invalid]:not([disabled]):not([readonly])
+  )
+  .#{$prefix}--form-requirement,
+:host(
+    #{$prefix}-fluid-date-picker-input[warn]:not([invalid]):not([disabled]):not(
+        [readonly]
+      )
+  )
+  .#{$prefix}--form-requirement {
+  padding: $spacing-03 convert.to-rem(40px) $spacing-03 $spacing-05;
+  margin: 0;
+}
+
+// Hide form requirement when disabled or readonly
+:host(#{$prefix}-fluid-date-picker-input[disabled])
+  .#{$prefix}--form-requirement,
+:host(#{$prefix}-fluid-date-picker-input[readonly])
+  .#{$prefix}--form-requirement {
+  display: none;
+}
+
+:host(#{$prefix}-fluid-date-picker-input[warn]:not([invalid])) {
+  .#{$prefix}--form-requirement {
+    color: $text-primary;
+  }
+}
+
+:host(#{$prefix}-fluid-date-picker-input[kind='single']) {
+  max-inline-size: convert.to-rem(288px);
+
+  .#{$prefix}--date-picker__input {
+    inline-size: convert.to-rem(288px);
+  }
+}
+
+:host(#{$prefix}-fluid-date-picker-input[kind='from']),
+:host(#{$prefix}-fluid-date-picker-input[kind='to']) {
+  inline-size: convert.to-rem(143.5px);
+
+  .#{$prefix}--date-picker__input {
+    inline-size: convert.to-rem(143.5px);
+  }
+}
+
+:host(#{$prefix}-fluid-date-picker-input[kind='to']) {
+  border-inline-start: 1px solid $border-strong;
+}
+
+:host(#{$prefix}-fluid-date-picker-input[kind='to'][disabled]),
+:host(#{$prefix}-fluid-date-picker-input[kind='to'][readonly]) {
+  border-inline-start: 1px solid $border-subtle;
+}
+
+:host(
+    #{$prefix}-fluid-date-picker-input[invalid]:not([disabled]):not([readonly])
+  ) {
+  @extend .#{$prefix}--date-picker--fluid--invalid;
+  @include focus-outline('invalid');
+}
+
+:host(#{$prefix}-fluid-date-picker-input[warn]:not([invalid])) {
+  @extend .#{$prefix}--date-picker--fluid--warn;
+}
+
+:host(#{$prefix}-fluid-date-picker-input[readonly]) {
+  @extend .#{$prefix}--date-picker--fluid--readonly;
+}
+
+:host(#{$prefix}-fluid-date-picker-input) .#{$prefix}--label {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  block-size: convert.to-rem(16px);
+  inline-size: calc(100% - 2rem);
+  inset-block-start: convert.to-rem(13px);
+  inset-inline-start: $spacing-05;
+}
+
+:host(#{$prefix}-fluid-date-picker-input) .#{$prefix}--date-picker__input {
+  border: none;
+  background: transparent;
+  block-size: calc(100% - #{convert.to-rem(1px)});
+  inline-size: 100%;
+  max-inline-size: 100%;
+  outline: none;
+  padding-block-end: convert.to-rem(13px);
+  padding-block-start: convert.to-rem(32px);
+  padding-inline: $spacing-05;
+
+  &:focus {
+    @include focus-outline('outline');
+  }
+}
+
+// Push the calendar icon down to account for the floating label above the input value
+:host(#{$prefix}-fluid-date-picker-input) .#{$prefix}--date-picker__icon {
+  inset-block-start: convert.to-rem(43px);
+}
+
+:host(#{$prefix}-fluid-date-picker-input[invalid])
+  .#{$prefix}--date-picker__icon--invalid,
+:host(#{$prefix}-fluid-date-picker-input[warn]:not([invalid]))
+  .#{$prefix}--date-picker__icon--warn {
+  inset-block-start: convert.to-rem(80px);
+}
+
+:host(#{$prefix}-fluid-date-picker-input[invalid])
+  .#{$prefix}--date-picker__icon:not(.#{$prefix}--date-picker__icon--invalid),
+:host(#{$prefix}-fluid-date-picker-input[warn]:not([invalid]))
+  .#{$prefix}--date-picker__icon:not(.#{$prefix}--date-picker__icon--warn) {
+  display: block;
+}
+
+:host(#{$prefix}-fluid-date-picker-input[kind='simple'][invalid])
+  .#{$prefix}--date-picker__icon--invalid,
+:host(#{$prefix}-fluid-date-picker-input[kind='simple'][warn]:not([invalid]))
+  .#{$prefix}--date-picker__icon--warn {
+  display: block;
+}
+
+// ── Fluid date picker skeleton ───────────────────────────────────────────────
+
+:host(#{$prefix}-fluid-date-picker-skeleton) {
+  @extend .#{$prefix}--date-picker--fluid__skeleton;
+
+  display: block;
+}
+
+.#{$prefix}--skeleton {
+  &::before {
+    position: absolute;
+    animation: 3000ms ease-in-out #{$prefix}--skeleton infinite;
+    background: $skeleton-element;
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    inset-inline-start: 0;
+    will-change: transform-origin, transform, opacity;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}

package/scss/components/ui-shell/header.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2024
+// Copyright IBM Corp. 2019, 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.
@@ -58,9 +58,11 @@ $css--plex: true !default;
     background-color: $layer;
     block-size: $spacing-09;
 
-    &:hover {
-      background-color: $background-hover;
-      color: $text-primary;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $background-hover;
+        color: $text-primary;
+      }
     }
 
     &:active {
@@ -71,8 +73,10 @@ $css--plex: true !default;
   a.#{$prefix}--header__menu-item--current {
     background-color: $layer-selected;
 
-    &:hover {
-      background-color: $layer-selected-hover;
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: $layer-selected-hover;
+      }
     }
 
     &::after {
@@ -92,8 +96,10 @@ $css--plex: true !default;
     fill: $icon-secondary;
   }
 
-  &:hover ::slotted(svg) {
-    fill: $icon-primary;
+  @media (any-hover: hover) {
+    &:hover ::slotted(svg) {
+      fill: $icon-primary;
+    }
   }
 
   .#{$prefix}--popover {

package/telemetry.yml

@@ -20,6 +20,7 @@ collect:
         - alignment-axis-offset
         - allow-custom-value
         - allow-empty
+        - allow-input
         - aria-current
         - aria-label
         - aria-labelledby
@@ -50,6 +51,7 @@ collect:
         - close-icon-description
         - close-on-activation
         - close-on-escape
+        - close-on-select
         - collapse-mode
         - color-scheme
         - cols
@@ -59,6 +61,7 @@ collect:
         - counter-mode
         - danger-description
         - data-table
+        - date-format
         - decrement-button-assistive-text
         - default-checked
         - default-open
@@ -74,6 +77,7 @@ collect:
         - enable-counter
         - enable-dialog-element
         - enable-v12-overflowmenu
+        - enabled-range
         - enter-delay-ms
         - even
         - expandable
@@ -120,6 +124,7 @@ collect:
         - is-active
         - is-condensed
         - is-expressive
+        - is-fluid
         - is-not-child-of-header
         - is-selectable
         - is-sortable
@@ -145,9 +150,11 @@ collect:
         - low-contrast
         - max
         - max-count
+        - max-date
         - max-length
         - menu-alignment
         - min
+        - min-date
         - multiple
         - name
         - nested
@@ -159,6 +166,8 @@ collect:
         - oncds-combo-box-toggled
         - oncds-content-switcher-beingselected
         - oncds-content-switcher-selected
+        - oncds-date-picker-changed
+        - oncds-date-picker-flatpickr-error
         - oncds-dropdown-beingselected
         - oncds-dropdown-beingtoggled
         - oncds-dropdown-selected
@@ -227,6 +236,7 @@ collect:
         - selection-name
         - selection-value
         - selector-initial-focus
+        - short
         - shortcut
         - should-filter-item
         - show-password-label
@@ -316,17 +326,6 @@ collect:
         - oncds-contained-list-item-click
         # cds-copy-button
         - autoAlign
-        # cds-date-picker
-        - allow-input
-        - close-on-select
-        - date-format
-        - enabled-range
-        - max-date
-        - min-date
-        - oncds-date-picker-changed
-        - oncds-date-picker-flatpickr-error
-        # cds-date-picker-input
-        - short
         # cds-definition-tooltip
         - open-on-hover
         # cds-dialog
@@ -357,6 +356,8 @@ collect:
         - error-subject
         - oncds-file-uploader-item-beingdeleted
         - oncds-file-uploader-item-deleted
+        # cds-fluid-date-picker-skeleton
+        - date-picker-type
         # cds-fluid-time-picker-skeleton
         - is-only-two
         # cds-form-group
@@ -450,6 +451,19 @@ collect:
         - items-shown
         - loop
         - oncds-page-changed
+        # cds-preview-date-picker
+        - oncds-preview-date-picker-changed
+        - oncds-preview-date-picker-error
+        # cds-preview-date-picker-calendar
+        - dateFormat
+        - focusedDate
+        - maxDate
+        - minDate
+        - oncds-preview-date-picker-calendar-date-select
+        - oncds-preview-date-picker-calendar-month-change
+        - rangeMode
+        - selectedDates
+        - viewDate
         # cds-progress-indicator
         - current-index
         - ononChange
@@ -634,6 +648,10 @@ collect:
         # General - type
         - number
         - text
+        # cds-fluid-date-picker-skeleton - date-picker-type
+        - range
+        - simple
+        - single
         # cds-layout - density
         - condensed
         - normal