@carbon/styles 1.82.0 → 1.83.0

package/scss/components/fluid-number-input/_fluid-number-input.scss

@@ -58,7 +58,8 @@
     position: initial;
   }
 
-  .#{$prefix}--number-input--fluid input[type='number'] {
+  .#{$prefix}--number-input--fluid input[type='number'],
+  .#{$prefix}--number-input--fluid input[type='text'] {
     padding: convert.to-rem(32px) convert.to-rem(80px) convert.to-rem(13px)
       $spacing-05;
     background: transparent;
@@ -75,6 +76,10 @@
   .#{$prefix}--number-input--fluid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-block-end-color: $focus;
     box-shadow: inset 0 -1px $focus;
@@ -83,6 +88,10 @@
   .#{$prefix}--number-input--fluid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type,
+  .#{$prefix}--number-input--fluid
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type {
     box-shadow:
       inset 0 -1px $focus,
@@ -97,6 +106,15 @@
   .#{$prefix}--number-input--fluid--invalid
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-block-end-color: transparent;
     box-shadow: none;
@@ -110,6 +128,15 @@
   .#{$prefix}--number-input--fluid--invalid
     input[type='number'][data-invalid]:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text'][data-invalid]:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type {
     box-shadow: inset -2px 0 $focus;
   }
@@ -117,6 +144,10 @@
   .#{$prefix}--number-input--fluid--invalid
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type:hover,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type:hover {
     box-shadow: inset -2px 0 $support-error;
   }
@@ -124,6 +155,10 @@
   .#{$prefix}--number-input--fluid--invalid
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     box-shadow: none;
   }
@@ -141,6 +176,15 @@
     )
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number-input--fluid:not(
+      .#{$prefix}--number-input--fluid--invalid
+    )
+    .#{$prefix}--number-input-wrapper:not(
+      .#{$prefix}--number-input-wrapper__warning
+    )
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     border-block-end: 1px solid $focus;
     outline: none;
@@ -154,6 +198,15 @@
     .#{$prefix}--number
     input[type='number'][data-invalid]
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus:hover,
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus,
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:focus:hover {
     @include focus-outline('outline');
   }
@@ -177,13 +230,19 @@
 
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--warning
-    input[type='number'] {
+    input[type='number'],
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text'] {
     border-block-end: 1px solid transparent;
   }
 
   .#{$prefix}--number-input--fluid
     .#{$prefix}--number__input-wrapper--warning
-    input[type='number']:focus {
+    input[type='number']:focus,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']:focus {
     outline: none;
   }
 
@@ -216,7 +275,10 @@
 
   .#{$prefix}--number-input--fluid--invalid
     .#{$prefix}--number[data-invalid]
-    input[type='number'] {
+    input[type='number'],
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number[data-invalid]
+    input[type='text'] {
     border-block-end: 1px solid transparent;
   }
 
@@ -232,6 +294,19 @@
     .#{$prefix}--number__input-wrapper--warning
     input[type='number']
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover:not(:focus),
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number[data-invalid]
+    input[type='text'],
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover:not(:focus) {
     outline: none;
   }
@@ -245,6 +320,16 @@
     .#{$prefix}--number__input-wrapper--warning
     input[type='number']
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--invalid
+    .#{$prefix}--number__input-wrapper
+    input[type='text']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text']
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-block-end: none;
   }
@@ -258,6 +343,16 @@
     .#{$prefix}--number
     input[type='number']
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number
+    input[type='text']
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border: initial;
     border-block-end-width: convert.to-rem(1px);
@@ -273,7 +368,10 @@
 
   .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid
     .#{$prefix}--number
-    input[type='number']:disabled {
+    input[type='number']:disabled,
+  .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='text']:disabled {
     background-color: transparent;
   }
 

package/scss/components/form/_form.scss

@@ -116,12 +116,14 @@ $input-label-weight: 400 !default;
     inline-size: convert.to-rem(75px);
   }
 
-  input[type='number'] {
+  input[type='number'],
+  input[type='text'].#{$prefix}--number {
     font-family: font-family('sans');
   }
 
   input[data-invalid]:not(:focus),
   .#{$prefix}--number[data-invalid] input[type='number']:not(:focus),
+  .#{$prefix}--number[data-invalid] input[type='text']:not(:focus),
   .#{$prefix}--text-input__field-wrapper[data-invalid]
     > .#{$prefix}--text-input--invalid:not(:focus),
   .#{$prefix}--text-area__wrapper[data-invalid]

package/scss/components/list-box/_list-box.scss

@@ -1145,12 +1145,6 @@ $list-box-menu-width: convert.to-rem(300px);
     @include high-contrast-mode('focus');
   }
 
-  .#{$prefix}--list-box__menu-icon > svg,
-  .#{$prefix}--list-box__selection > svg,
-  .#{$prefix}--list-box__selection--multi > svg {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)
     .#{$prefix}--list-box__selection::after {
     position: absolute;

package/scss/components/modal/_modal.scss

@@ -489,11 +489,6 @@
   }
 
   // Windows HCM fix
-
-  .#{$prefix}--modal-close__icon {
-    @include high-contrast-mode('icon-fill');
-  }
-
   .#{$prefix}--modal-close:focus {
     @include high-contrast-mode('focus');
   }

package/scss/components/notification/_actionable-notification.scss

@@ -486,11 +486,4 @@
   .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--actionable-notification__action-button:focus {
     @include high-contrast-mode('focus');
   }
-
-  .#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon,
-  .#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon,
-  .#{$prefix}--actionable-notification
-    .#{$prefix}--actionable-notification__close-icon {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/notification/_inline-notification.scss

@@ -316,12 +316,4 @@
   .#{$prefix}--btn.#{$prefix}--btn--ghost.#{$prefix}--inline-notification__action-button:focus {
     @include high-contrast-mode('focus');
   }
-
-  .#{$prefix}--inline-notification .#{$prefix}--inline-notification__icon {
-    @include high-contrast-mode('icon-fill');
-  }
-  .#{$prefix}--inline-notification
-    .#{$prefix}--inline-notification__close-icon {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/notification/_toast-notification.scss

@@ -231,10 +231,4 @@
   .#{$prefix}--toast-notification__close-button:focus {
     @include high-contrast-mode('focus');
   }
-  .#{$prefix}--toast-notification .#{$prefix}--toast-notification__close-icon {
-    @include high-contrast-mode('icon-fill');
-  }
-  .#{$prefix}--toast-notification .#{$prefix}--toast-notification__icon {
-    @include high-contrast-mode('icon-fill');
-  }
 }

package/scss/components/number-input/_number-input.scss

@@ -35,11 +35,15 @@
 
   .#{$prefix}--number
     .#{$prefix}--number__input-wrapper--warning
-    input[type='number'] {
+    input[type='number'],
+  .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='text'] {
     padding-inline-end: convert.to-rem(128px);
   }
 
-  .#{$prefix}--number input[type='number'] {
+  .#{$prefix}--number input[type='number'],
+  .#{$prefix}--number input[type='text'] {
     @include type-style('body-compact-01');
     @include focus-outline('reset');
 
@@ -93,7 +97,8 @@
   }
 
   .#{$prefix}--number--lg.#{$prefix}--number {
-    input[type='number'] {
+    input[type='number'],
+    input[type='text'] {
       padding-inline-end: convert.to-rem(112px);
 
       &[data-invalid] {
@@ -101,13 +106,15 @@
       }
     }
 
-    .#{$prefix}--number__input-wrapper--warning input[type='number'] {
+    .#{$prefix}--number__input-wrapper--warning input[type='number'],
+    .#{$prefix}--number__input-wrapper--warning input[type='text'] {
       padding-inline-end: convert.to-rem(144px);
     }
   }
 
   .#{$prefix}--number--sm.#{$prefix}--number {
-    input[type='number'] {
+    input[type='number'],
+    input[type='text'] {
       padding-inline-end: convert.to-rem(80px);
 
       &[data-invalid] {
@@ -115,12 +122,14 @@
       }
     }
 
-    .#{$prefix}--number__input-wrapper--warning input[type='number'] {
+    .#{$prefix}--number__input-wrapper--warning input[type='number'],
+    .#{$prefix}--number__input-wrapper--warning input[type='text'] {
       padding-inline-end: convert.to-rem(112px);
     }
   }
 
-  .#{$prefix}--number input[type='number']:disabled {
+  .#{$prefix}--number input[type='number']:disabled,
+  .#{$prefix}--number input[type='text']:disabled {
     background-color: $field;
     border-block-end-color: transparent;
     color: $text-disabled;
@@ -197,6 +206,10 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number
+    input[type='text'][data-invalid]
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-block-end-color: $support-error;
   }
@@ -205,6 +218,10 @@
   .#{$prefix}--number
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
     border-width: 2px 0;
     border-style: solid;
@@ -216,6 +233,10 @@
   .#{$prefix}--number
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type:hover,
+  .#{$prefix}--number
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type:hover {
     box-shadow: -4px 0 0 -2px $focus inset;
   }
@@ -224,6 +245,10 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:last-of-type:hover,
+  .#{$prefix}--number
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type:hover {
     box-shadow: -4px 0 0 -2px $support-error inset;
   }
@@ -231,6 +256,10 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     border-width: 2px 0;
     border-style: solid;
@@ -242,6 +271,10 @@
   .#{$prefix}--number
     input[type='number'][data-invalid]:not(:focus)
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus:hover,
+  .#{$prefix}--number
+    input[type='text'][data-invalid]:not(:focus)
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:focus:hover {
     @include focus-outline('outline');
   }
@@ -283,6 +316,10 @@
   .#{$prefix}--number
     input[type='number']:disabled
     + .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider:first-of-type,
+  .#{$prefix}--number
+    input[type='text']:disabled
+    + .#{$prefix}--number__controls
     .#{$prefix}--number__rule-divider:first-of-type {
     background-color: transparent;
   }
@@ -290,6 +327,10 @@
   .#{$prefix}--number
     input[type='number']:disabled
     + .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider,
+  .#{$prefix}--number
+    input[type='text']:disabled
+    + .#{$prefix}--number__controls
     .#{$prefix}--number__rule-divider {
     background-color: $icon-disabled;
   }
@@ -350,7 +391,8 @@
   }
 
   // Size Variant styles
-  .#{$prefix}--number--lg input[type='number'] {
+  .#{$prefix}--number--lg input[type='number'],
+  .#{$prefix}--number--lg input[type='text'] {
     block-size: convert.to-rem(48px);
   }
 
@@ -362,7 +404,8 @@
     inline-size: convert.to-rem(48px);
   }
 
-  .#{$prefix}--number--sm input[type='number'] {
+  .#{$prefix}--number--sm input[type='number'],
+  .#{$prefix}--number--sm input[type='text'] {
     block-size: convert.to-rem(32px);
   }
 
@@ -382,14 +425,19 @@
   }
 
   // No steppers
-  .#{$prefix}--number--nosteppers input[type='number'] {
+  .#{$prefix}--number--nosteppers input[type='number'],
+  .#{$prefix}--number--nosteppers input[type='text'] {
     padding-inline-end: 0;
   }
 
   .#{$prefix}--number--nosteppers input[type='number'][data-invalid],
+  .#{$prefix}--number--nosteppers input[type='text'][data-invalid],
+  .#{$prefix}--number--nosteppers
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number'],
   .#{$prefix}--number--nosteppers
     .#{$prefix}--number__input-wrapper--warning
-    input[type='number'] {
+    input[type='text'] {
     padding-inline-end: convert.to-rem(48px);
   }
 
@@ -398,7 +446,8 @@
   }
 
   // Readonly
-  .#{$prefix}--number--readonly input[type='number'] {
+  .#{$prefix}--number--readonly input[type='number'],
+  .#{$prefix}--number--readonly input[type='text'] {
     background: transparent;
     border-block-end-color: $border-subtle;
   }
@@ -416,6 +465,10 @@
   .#{$prefix}--number--readonly
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number--readonly
+    input[type='text']:focus
+    ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:hover {
     outline: none;
   }
@@ -564,7 +617,26 @@
     input[type='number']:has(~ .#{$prefix}--slug):not(
       :has(~ .#{$prefix}--slug--revert)
     ),
-  .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled {
+  .#{$prefix}--number__input-wrapper--slug input[type='number']:disabled,
+  .#{$prefix}--number__input-wrapper--decorator
+    input[type='text']:has(
+      ~ .#{$prefix}--number__input-inner-wrapper--decorator
+        .#{$prefix}--ai-label
+    ):not(
+      :has(
+          ~ .#{$prefix}--number__input-inner-wrapper--decorator
+            .#{$prefix}--ai-label--revert
+        )
+    ),
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='text']:has(~ .#{$prefix}--ai-label):not(
+      :has(~ .#{$prefix}--ai-label--revert)
+    ),
+  .#{$prefix}--number__input-wrapper--slug
+    input[type='text']:has(~ .#{$prefix}--slug):not(
+      :has(~ .#{$prefix}--slug--revert)
+    ),
+  .#{$prefix}--number__input-wrapper--slug input[type='text']:disabled {
     @include ai-gradient;
 
     padding-inline-end: convert.to-rem(145px);
@@ -577,7 +649,8 @@
 
     inline-size: 100%;
 
-    input[type='number'] {
+    input[type='number'],
+    input[type='text'] {
       display: none;
     }
   }
@@ -604,10 +677,6 @@
   .#{$prefix}--number__control-btn {
     @include high-contrast-mode('outline');
   }
-
-  .#{$prefix}--number__control-btn svg {
-    @include high-contrast-mode('icon-fill');
-  }
 }
 
 .#{$prefix}--number__controls:hover .#{$prefix}--number__control-btn::after {

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

@@ -361,10 +361,6 @@
   .#{$prefix}--overflow-menu-options__btn:focus {
     @include high-contrast-mode('focus');
   }
-
-  .#{$prefix}--overflow-menu svg {
-    @include high-contrast-mode('icon-fill');
-  }
   /*stylelint-enable */
 
   $popover-offset: custom-property.get-var('popover-offset', 2.5rem);

package/scss/components/page-header/_page-header.scss

@@ -7,33 +7,69 @@
 
 @use '../../config' as *;
 @use '../../breakpoint' as *;
-// @use '../../motion' as *;
+@use '../../colors' as *;
 @use '../../spacing' as *;
-// @use '../../theme' as *;
+@use '../../theme' as *;
 @use '../../type' as *;
-// @use '../../layer' as *;
-// @use '../../utilities/box-shadow' as *;
-// @use '../../utilities/button-reset';
-// @use '../../utilities/component-reset';
-// @use '../../utilities/focus-outline' as *;
-// @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert';
-// @use '../../utilities/z-index' as *;
-// @use '../../utilities/custom-property';
 
 /// Page header styles
 /// @access public
 /// @group page-header
 @mixin page-header {
   .#{$prefix}--page-header {
-    border: 1px solid rebeccapurple; /* stylelint-disable-line */
+    background-color: $layer-01;
+    border-block-end: 1px solid $border-subtle-01;
   }
+
   .#{$prefix}--page-header__breadcrumb-bar {
-    border: 1px solid blue; /* stylelint-disable-line */
+    block-size: convert.to-rem(40px);
+  }
+
+  .#{$prefix}--page-header__breadcrumb-bar .#{$prefix}--subgrid {
+    block-size: 100%;
+  }
+
+  .#{$prefix}--page-header__breadcrumb-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .#{$prefix}--page-header__breadcrumb__actions-flush {
+    .#{$prefix}--css-grid {
+      padding-inline-end: 0;
+    }
+
+    .#{$prefix}--css-grid-column {
+      margin-inline-end: 0;
+    }
+  }
+
+  .#{$prefix}--page-header__breadcrumb-bar-border {
+    border-block-end: 1px solid $border-subtle-01;
+  }
+
+  .#{$prefix}--page-header__breadcrumb__icon {
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{$prefix}--page-header__breadcrumb__actions {
+    display: inline-flex;
+  }
+
+  .#{$prefix}--page-header__breadcrumb__content-actions {
+    margin-inline-end: $spacing-04;
+  }
+
+  .#{$prefix}--page-header__breadcrumb-wrapper {
+    display: inline-flex;
   }
+
   .#{$prefix}--page-header__content {
-    margin: $spacing-06 0;
-    border: 1px solid red; /* stylelint-disable-line */
+    padding: $spacing-06 0;
   }
 
   .#{$prefix}--page-header__content__title-wrapper {
@@ -138,13 +174,33 @@
     display: flex;
     overflow: hidden;
     align-items: center;
-    justify-content: end;
+    justify-content: flex-end;
     block-size: 100%;
   }
 
   .#{$prefix}--page-header__tab-bar {
+    margin-inline-start: -$spacing-05;
+  }
+
+  .#{$prefix}--page-header__tab-bar--tablist {
     display: grid;
-    padding: 0 $spacing-05;
-    border: 1px solid green; /* stylelint-disable-line */
+    grid-gap: $spacing-10;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .#{$prefix}--page-header__tags {
+    display: flex;
+    align-items: center;
+    justify-content: right;
+  }
+
+  .#{$prefix}--page-header__tags-popover-list {
+    display: flex;
+    flex-direction: column;
+    padding: $spacing-05;
+  }
+
+  .#{$prefix}--page-header__tag-item {
+    flex-shrink: 0;
   }
 }

package/scss/components/pagination-nav/_pagination-nav.scss

@@ -14,7 +14,6 @@
 @use '../../theme' as *;
 @use '../../utilities/button-reset';
 @use '../../utilities/focus-outline' as *;
-@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/layout';
 @use '../../utilities/visually-hidden' as *;