@carbon/styles 1.110.0 → 1.111.0-rc.0

package/css/styles.css

@@ -2659,6 +2659,31 @@ em {
   --cds-layout-size-height: var(--cds-layout-size-height-context);
 }
 
+.cds--layout--size-sm {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout--size-md {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout--size-lg {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout--size-xl {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
+.cds--layout--size-2xl {
+  --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
+  --cds-layout-size-height: var(--cds-layout-size-height-context);
+}
+
 .cds--layout-constraint--size__default-xs {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
 }
@@ -2671,11 +2696,6 @@ em {
   --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
 }
 
-.cds--layout--size-sm {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-sm, 2rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
 .cds--layout-constraint--size__default-sm {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
 }
@@ -2688,11 +2708,6 @@ em {
   --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
 }
 
-.cds--layout--size-md {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-md, 2.5rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
 .cds--layout-constraint--size__default-md {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
 }
@@ -2705,11 +2720,6 @@ em {
   --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
 }
 
-.cds--layout--size-lg {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-lg, 3rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
 .cds--layout-constraint--size__default-lg {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
 }
@@ -2722,11 +2732,6 @@ em {
   --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
 }
 
-.cds--layout--size-xl {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-xl, 4rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
 .cds--layout-constraint--size__default-xl {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
 }
@@ -2739,11 +2744,6 @@ em {
   --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
 }
 
-.cds--layout--size-2xl {
-  --cds-layout-size-height-context: var(--cds-layout-size-height-2xl, 5rem);
-  --cds-layout-size-height: var(--cds-layout-size-height-context);
-}
-
 .cds--layout-constraint--size__default-2xl {
   --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
 }
@@ -2761,6 +2761,11 @@ em {
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
 }
 
+.cds--layout--density-normal {
+  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
+  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
+}
+
 .cds--layout-constraint--density__default-condensed {
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
 }
@@ -2773,11 +2778,6 @@ em {
   --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
 }
 
-.cds--layout--density-normal {
-  --cds-layout-density-padding-inline-context: var(--cds-layout-density-padding-inline-normal, 1rem);
-  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
-}
-
 .cds--layout-constraint--density__default-normal {
   --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
 }
@@ -7115,6 +7115,7 @@ li.cds--accordion__item--disabled:last-of-type {
 
 .cds--overflow-menu,
 .cds--overflow-menu__trigger {
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-xs)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
   display: inline-block;
   padding: 0;
   border: 0;
@@ -7171,10 +7172,10 @@ li.cds--accordion__item--disabled:last-of-type {
   display: flex;
   align-items: center;
   justify-content: center;
-  block-size: 2.5rem;
+  block-size: var(--cds-layout-size-height-local);
   cursor: pointer;
-  inline-size: 2.5rem;
-  min-block-size: 2.5rem;
+  inline-size: var(--cds-layout-size-height-local);
+  min-block-size: var(--cds-layout-size-height-local);
   transition: outline 110ms cubic-bezier(0, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 .cds--overflow-menu:focus,
@@ -7197,23 +7198,6 @@ li.cds--accordion__item--disabled:last-of-type {
   margin-block-start: 0;
 }
 
-.cds--overflow-menu--xs {
-  block-size: 1.5rem;
-  inline-size: 1.5rem;
-  min-block-size: 1.5rem;
-}
-
-.cds--overflow-menu--sm {
-  block-size: 2rem;
-  inline-size: 2rem;
-  min-block-size: 2rem;
-}
-
-.cds--overflow-menu--lg {
-  block-size: 3rem;
-  inline-size: 3rem;
-}
-
 .cds--overflow-menu__trigger.cds--tooltip--a11y.cds--tooltip__trigger:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
@@ -7250,6 +7234,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 
 .cds--overflow-menu-options {
+  --cds-layout-size-height-local: clamp(max(var(--cds-layout-size-height-min), var(--cds-layout-size-height-xs)), var(--cds-layout-size-height, var(--cds-layout-size-height-md)), min(var(--cds-layout-size-height-max), var(--cds-layout-size-height-lg)));
   box-sizing: border-box;
   padding: 0;
   border: 0;
@@ -7306,53 +7291,32 @@ li.cds--accordion__item--disabled:last-of-type {
 
 .cds--overflow-menu-options[data-floating-menu-direction=bottom]:not(.cds--breadcrumb-menu-options)::after {
   block-size: 0.1875rem;
-  inline-size: 2.5rem;
+  inline-size: var(--cds-layout-size-height-local);
   inset-block-start: -0.1875rem;
   inset-inline-start: 0;
 }
 
 .cds--overflow-menu-options[data-floating-menu-direction=top]::after {
   block-size: 0.5rem;
-  inline-size: 2.5rem;
+  inline-size: var(--cds-layout-size-height-local);
   inset-block-end: -0.5rem;
   inset-inline-start: 0;
 }
 
 .cds--overflow-menu-options[data-floating-menu-direction=left]::after {
-  block-size: 2.5rem;
+  block-size: var(--cds-layout-size-height-local);
   inline-size: 0.375rem;
   inset-block-start: 0;
   inset-inline-end: -0.375rem;
 }
 
 .cds--overflow-menu-options[data-floating-menu-direction=right]::after {
-  block-size: 2.5rem;
+  block-size: var(--cds-layout-size-height-local);
   inline-size: 0.375rem;
   inset-block-start: 0;
   inset-inline-start: -0.375rem;
 }
 
-.cds--overflow-menu-options--xs.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--xs.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
-  inline-size: 1.5rem;
-}
-.cds--overflow-menu-options--xs.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--xs.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
-  block-size: 1.5rem;
-}
-
-.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
-  inline-size: 2rem;
-}
-.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
-  block-size: 2rem;
-}
-
-.cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=top]::after {
-  inline-size: 3rem;
-}
-.cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=left]::after, .cds--overflow-menu-options--lg.cds--overflow-menu-options[data-floating-menu-direction=right]::after {
-  block-size: 3rem;
-}
-
 .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=top]::after,
 .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
   inset-inline: auto 0;
@@ -7390,23 +7354,11 @@ li.cds--accordion__item--disabled:last-of-type {
   align-items: center;
   padding: 0;
   background-color: transparent;
-  block-size: 2.5rem;
+  block-size: var(--cds-layout-size-height-local);
   inline-size: 100%;
   transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
-.cds--overflow-menu-options--xs .cds--overflow-menu-options__option {
-  block-size: 1.5rem;
-}
-
-.cds--overflow-menu-options--sm .cds--overflow-menu-options__option {
-  block-size: 2rem;
-}
-
-.cds--overflow-menu-options--lg .cds--overflow-menu-options__option {
-  block-size: 3rem;
-}
-
 .cds--overflow-menu--divider {
   border-block-start: 1px solid var(--cds-border-subtle);
 }
@@ -7488,6 +7440,10 @@ a.cds--overflow-menu-options__btn::before {
   fill: currentColor;
 }
 
+.cds--overflow-menu-options__option--danger .cds--overflow-menu-options__btn:focus {
+  box-shadow: inset 0 0 0 0.1875rem var(--cds-background, #ffffff);
+}
+
 .cds--overflow-menu-options__option--disabled:hover {
   background-color: var(--cds-layer);
   cursor: not-allowed;
@@ -11940,6 +11896,10 @@ fieldset[disabled] .cds--form__helper-text {
   color: var(--cds-text-on-color, #ffffff);
 }
 
+.cds--menu-item--danger:focus {
+  box-shadow: inset 0 0 0 0.1875rem var(--cds-background, #ffffff);
+}
+
 .cds--menu-item-divider {
   display: block;
   background-color: var(--cds-border-subtle);
@@ -21103,12 +21063,14 @@ optgroup.cds--select-optgroup:disabled,
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
   display: flex;
+  align-items: center;
   color: var(--cds-text-secondary, #525252);
+  gap: 0.5rem;
+  line-height: unset;
 }
 
 .cds--icon-indicator svg {
   align-self: center;
-  margin-inline-end: 0.5rem;
 }
 
 .cds--icon-indicator--20 {
@@ -21116,6 +21078,7 @@ optgroup.cds--select-optgroup:disabled,
   font-weight: var(--cds-body-compact-02-font-weight, 400);
   line-height: var(--cds-body-compact-02-line-height, 1.375);
   letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
+  line-height: unset;
 }
 
 .cds--icon-indicator--failed {
@@ -21172,6 +21135,48 @@ optgroup.cds--select-optgroup:disabled,
   fill: var(--cds-status-blue, #0043ce);
 }
 
+.cds--icon-indicator__button {
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+.cds--icon-indicator__button *,
+.cds--icon-indicator__button *::before,
+.cds--icon-indicator__button *::after {
+  box-sizing: inherit;
+}
+.cds--icon-indicator__button::-moz-focus-inner {
+  border: 0;
+}
+.cds--icon-indicator__button {
+  display: flex;
+}
+.cds--icon-indicator__button:focus {
+  outline: 1px solid var(--cds-focus, #0f62fe);
+}
+@media screen and (prefers-contrast) {
+  .cds--icon-indicator__button:focus {
+    outline-style: dotted;
+  }
+}
+
+.cds--icon-indicator .cds--definition-tooltip {
+  padding-block: 0.125rem;
+}
+
 @keyframes prefix--stroke {
   100% {
     stroke-dashoffset: 0;
@@ -24343,12 +24348,14 @@ span.cds--pagination__text.cds--pagination__items-count {
   line-height: var(--cds-helper-text-01-line-height, 1.33333);
   letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
   display: flex;
+  align-items: center;
   color: var(--cds-text-secondary, #525252);
+  gap: 0.5rem;
+  line-height: unset;
 }
 
 .cds--shape-indicator svg {
   align-self: center;
-  margin-inline-end: 0.5rem;
 }
 
 .cds--shape-indicator--14 {
@@ -24356,6 +24363,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   font-weight: var(--cds-body-compact-01-font-weight, 400);
   line-height: var(--cds-body-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+  line-height: unset;
 }
 
 .cds--shape-indicator--failed {
@@ -24411,6 +24419,48 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-status-gray, #6f6f6f);
 }
 
+.cds--shape-indicator__button {
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+  box-sizing: border-box;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+.cds--shape-indicator__button *,
+.cds--shape-indicator__button *::before,
+.cds--shape-indicator__button *::after {
+  box-sizing: inherit;
+}
+.cds--shape-indicator__button::-moz-focus-inner {
+  border: 0;
+}
+.cds--shape-indicator__button {
+  display: flex;
+}
+.cds--shape-indicator__button:focus {
+  outline: 1px solid var(--cds-focus, #0f62fe);
+}
+@media screen and (prefers-contrast) {
+  .cds--shape-indicator__button:focus {
+    outline-style: dotted;
+  }
+}
+
+.cds--shape-indicator .cds--definition-tooltip {
+  padding-block: 0.125rem;
+}
+
 @keyframes ai-skeleton-animation {
   0% {
     transform: translateX(-100%);