@carbon/styles 1.65.0-rc.0 → 1.66.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.65.0-rc.0",
+  "version": "1.66.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,18 +40,18 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.26.0-rc.0",
-    "@carbon/feature-flags": "^0.22.0",
-    "@carbon/grid": "^11.27.0-rc.0",
-    "@carbon/layout": "^11.26.0-rc.0",
-    "@carbon/motion": "^11.22.0-rc.0",
-    "@carbon/themes": "^11.40.0-rc.0",
-    "@carbon/type": "^11.31.0-rc.0",
+    "@carbon/colors": "^11.27.0-rc.0",
+    "@carbon/feature-flags": "^0.23.0-rc.0",
+    "@carbon/grid": "^11.28.0-rc.0",
+    "@carbon/layout": "^11.27.0-rc.0",
+    "@carbon/motion": "^11.23.0-rc.0",
+    "@carbon/themes": "^11.41.0-rc.0",
+    "@carbon/type": "^11.32.0-rc.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.32.0-rc.0",
+    "@carbon/test-utils": "^10.33.0-rc.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -67,5 +67,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "3bea42a9cef74114dc19f12d48519865bd8a4a17"
+  "gitHead": "124d86cfad8f2efd4d60372f735fea534fc6f374"
 }

package/scss/_feature-flags.scss

@@ -8,7 +8,6 @@
 @forward '@carbon/feature-flags' with (
   $feature-flags: (
     'enable-css-custom-properties': true,
-    'enable-use-controlled-state-with-value': true,
     'enable-css-grid': true,
     'enable-v11-release': true,
     'enable-experimental-tile-contrast': false,

package/scss/components/accordion/_accordion.scss

@@ -375,8 +375,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
   // RTL overrides
   [dir='rtl'] .#{$prefix}--accordion--start .#{$prefix}--accordion__heading {
-    padding-inline-end: 0;
-    padding-inline-start: layout.density('padding-inline');
+    padding-inline: layout.density('padding-inline') 0;
   }
 
   [dir='rtl'] .#{$prefix}--accordion--start .#{$prefix}--accordion__title {

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -163,7 +163,6 @@
   .#{$prefix}--breadcrumb
     .#{$prefix}--overflow-menu.#{$prefix}--btn--icon-only {
     min-block-size: 1.125rem;
-    padding-inline-end: 0;
-    padding-inline-start: 0;
+    padding-inline: 0 0;
   }
 }

package/scss/components/button/_button.scss

@@ -162,7 +162,6 @@
     );
 
     > :first-child {
-      margin-block-start: convert.to-rem(1px);
       min-inline-size: convert.to-rem(16px);
     }
 
@@ -174,6 +173,12 @@
     &.#{$prefix}--btn--danger--ghost .#{$prefix}--btn__icon {
       margin: 0;
     }
+
+    &.#{$prefix}--btn--danger--ghost {
+      padding-inline-end: calc(
+        layout.density('padding-inline') - convert.to-rem(16px)
+      );
+    }
   }
 
   // Adjust icon positioning in small, medium variants only

package/scss/components/button/_mixins.scss

@@ -61,13 +61,11 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
     calc((layout.size('height') - var(--temp-1lh)) / 2 - convert.to-rem(1px)),
     var(--temp-padding-block-max)
   );
-  padding-inline-end: calc(
-    layout.density('padding-inline') * 3 + convert.to-rem(16px) -
-      convert.to-rem(1px)
-  );
-  padding-inline-start: calc(
-    layout.density('padding-inline') - convert.to-rem(1px)
-  );
+  padding-inline: calc(layout.density('padding-inline') - convert.to-rem(1px))
+    calc(
+      layout.density('padding-inline') * 3 + convert.to-rem(16px) -
+        convert.to-rem(1px)
+    );
   text-align: start;
   text-decoration: none;
   transition: background $duration-fast-01 motion(entrance, productive),
@@ -146,6 +144,5 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 @mixin button-padding-large {
   align-items: baseline;
   padding-block-start: $spacing-05;
-  padding-inline-end: $spacing-10;
-  padding-inline-start: $spacing-05;
+  padding-inline: $spacing-05 $spacing-10;
 }

package/scss/components/code-snippet/_code-snippet.scss

@@ -416,8 +416,7 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
     // (The height of button) + (The height of the tooltip's triangle) + 4px
     inset-block-start: convert.to-rem(50.8px);
-    inset-inline-end: auto;
-    inset-inline-start: 50%;
+    inset-inline: 50% auto;
 
     &::before {
       inset-block-start: 0;
@@ -439,8 +438,7 @@ $copy-btn-feedback: $background-inverse !default;
     // TODO: use updated global tooltip mixins under the hood
     // since all of the positioning values for the copy button tooltip are arbitrary hard coded rem values, we need this arbitrary 4px offset to keep the proper tooltip spacing according to the spec
     inset-block-start: calc(100% - #{convert.to-rem(4px)});
-    inset-inline-end: auto;
-    inset-inline-start: 50%;
+    inset-inline: 50% auto;
   }
 
   // Overflow Indicator

package/scss/components/contained-list/_contained-list.scss

@@ -198,14 +198,13 @@
     block-size: 1px;
     content: '';
     inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+    inset-inline: 0 0;
   }
 
   .#{$prefix}--contained-list--inset-rulers
     .#{$prefix}--contained-list-item:not(:last-of-type)::before {
-    inset-inline-end: layout.density('padding-inline');
-    inset-inline-start: layout.density('padding-inline');
+    inset-inline: layout.density('padding-inline')
+      layout.density('padding-inline');
   }
 
   .#{$prefix}--contained-list-item--clickable
@@ -249,8 +248,7 @@
     display: flex;
     justify-content: flex-end;
     inset-block-start: 0;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+    inset-inline: 0 0;
     pointer-events: none;
   }
 

package/scss/components/content-switcher/_content-switcher.scss

@@ -277,8 +277,7 @@
 
   .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn {
     // accounts for the larger icon sizes to keep the switcher at 48px
-    padding-inline-end: convert.to-rem(14px);
-    padding-inline-start: convert.to-rem(14px);
+    padding-inline: convert.to-rem(14px) convert.to-rem(14px);
   }
 
   .#{$prefix}--content-switcher--lg .#{$prefix}--content-switcher-btn svg {

package/scss/components/data-table/_data-table.scss

@@ -49,8 +49,7 @@
   //----------------------------------------------------------------------------
   .#{$prefix}--data-table-header {
     background-color: $layer;
-    padding-block-end: $spacing-06;
-    padding-block-start: $spacing-05;
+    padding-block: $spacing-05 $spacing-06;
     padding-inline: $spacing-05;
   }
 
@@ -143,8 +142,7 @@
     &.#{$prefix}--data-table--lg
       tr:not([data-child-row])
       td:not(.#{$prefix}--table-expand) {
-      padding-block-end: $spacing-05;
-      padding-block-start: $spacing-05;
+      padding-block: $spacing-05 $spacing-05;
 
       &.#{$prefix}--table-column-menu {
         padding-block-start: $spacing-03;
@@ -163,8 +161,7 @@
   .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header {
     &.#{$prefix}--data-table--lg
       th:not(.#{$prefix}--table-expand):not(.#{$prefix}--table-sort__header) {
-      padding-block-end: $spacing-05;
-      padding-block-start: $spacing-05;
+      padding-block: $spacing-05 $spacing-05;
 
       &.#{$prefix}--table-column-menu {
         padding-block-start: $spacing-03;
@@ -193,8 +190,7 @@
   .#{$prefix}--data-table th {
     background-color: $layer-accent;
     color: $text-primary;
-    padding-inline-end: $spacing-05;
-    padding-inline-start: $spacing-05;
+    padding-inline: $spacing-05 $spacing-05;
   }
 
   .#{$prefix}--data-table th:last-of-type {
@@ -212,8 +208,7 @@
     border-block-end: 1px solid $border-subtle;
     border-block-start: 1px solid $layer;
     color: $text-secondary;
-    padding-inline-end: $spacing-05;
-    padding-inline-start: $spacing-05;
+    padding-inline: $spacing-05 $spacing-05;
 
     + td:first-of-type {
       padding-inline-start: $spacing-04;
@@ -324,8 +319,7 @@
   .#{$prefix}--data-table--xs td.#{$prefix}--table-column-menu,
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
     block-size: convert.to-rem(24px);
-    padding-block-end: 0;
-    padding-block-start: 0;
+    padding-block: 0 0;
   }
 
   .#{$prefix}--data-table--sm td.#{$prefix}--table-column-menu {
@@ -418,8 +412,7 @@
   .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox {
     min-inline-size: 2.5rem;
     // spacing between checkbox / chevron and next cell should be 8px / 0.5rem
-    padding-inline-end: convert.to-rem(4px);
-    padding-inline-start: 1rem;
+    padding-inline: 1rem convert.to-rem(4px);
   }
 
   .#{$prefix}--data-table thead th.#{$prefix}--table-expand,
@@ -453,8 +446,7 @@
   .#{$prefix}--data-table--xl thead th.#{$prefix}--table-expand,
   .#{$prefix}--data-table--xl tbody td.#{$prefix}--table-expand {
     block-size: convert.to-rem(64px);
-    padding-block-end: convert.to-rem(22px);
-    padding-block-start: convert.to-rem(10px);
+    padding-block: convert.to-rem(10px) convert.to-rem(22px);
   }
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-column-checkbox {
@@ -570,14 +562,12 @@
   }
 
   .#{$prefix}--data-table--xs .#{$prefix}--table-header-label {
-    padding-block-end: convert.to-rem(2px);
-    padding-block-start: convert.to-rem(2px);
+    padding-block: convert.to-rem(2px) convert.to-rem(2px);
   }
 
   .#{$prefix}--data-table--xs td,
   .#{$prefix}--data-table--xs tbody tr th {
-    padding-block-end: convert.to-rem(2px);
-    padding-block-start: convert.to-rem(2px);
+    padding-block: convert.to-rem(2px) convert.to-rem(2px);
   }
 
   .#{$prefix}--data-table--xs .#{$prefix}--overflow-menu {
@@ -593,8 +583,7 @@
       .#{$prefix}--data-table--top-aligned-header
     )
     th.#{$prefix}--table-column-checkbox {
-    padding-block-end: 0;
-    padding-block-start: 0;
+    padding-block: 0 0;
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--xs
@@ -615,16 +604,14 @@
   }
 
   .#{$prefix}--data-table--sm .#{$prefix}--table-header-label {
-    padding-block-end: convert.to-rem(7px);
-    padding-block-start: convert.to-rem(7px);
+    padding-block: convert.to-rem(7px) convert.to-rem(7px);
   }
 
   .#{$prefix}--data-table--sm td,
   .#{$prefix}--data-table--sm tbody tr th,
   .#{$prefix}--data-table--sm.#{$prefix}--data-table--top-aligned-header
     th.#{$prefix}--table-column-checkbox {
-    padding-block-end: convert.to-rem(6px);
-    padding-block-start: convert.to-rem(7px);
+    padding-block: convert.to-rem(7px) convert.to-rem(6px);
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--sm:not(
@@ -635,8 +622,7 @@
       .#{$prefix}--data-table--top-aligned-header
     )
     th.#{$prefix}--table-column-checkbox {
-    padding-block-end: convert.to-rem(3px);
-    padding-block-start: convert.to-rem(3px);
+    padding-block: convert.to-rem(3px) convert.to-rem(3px);
   }
 
   .#{$prefix}--data-table--sm .#{$prefix}--overflow-menu {
@@ -655,14 +641,12 @@
   .#{$prefix}--data-table--md .#{$prefix}--table-header-label,
   .#{$prefix}--data-table--md.#{$prefix}--data-table--top-aligned-header
     th.#{$prefix}--table-column-checkbox {
-    padding-block-end: convert.to-rem(7px);
-    padding-block-start: convert.to-rem(7px);
+    padding-block: convert.to-rem(7px) convert.to-rem(7px);
   }
 
   .#{$prefix}--data-table--md td,
   .#{$prefix}--data-table--md tbody tr th {
-    padding-block-end: convert.to-rem(6px);
-    padding-block-start: convert.to-rem(7px);
+    padding-block: convert.to-rem(7px) convert.to-rem(6px);
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--md:not(
@@ -673,13 +657,11 @@
       .#{$prefix}--data-table--top-aligned-header
     )
     th.#{$prefix}--table-column-checkbox {
-    padding-block-end: convert.to-rem(3px);
-    padding-block-start: convert.to-rem(3px);
+    padding-block: convert.to-rem(3px) convert.to-rem(3px);
   }
 
   .#{$prefix}--data-table--md .#{$prefix}--table-column-menu {
-    padding-block-end: convert.to-rem(3px);
-    padding-block-start: convert.to-rem(3px);
+    padding-block: convert.to-rem(3px) convert.to-rem(3px);
   }
 
   //----------------------------------------------------------------------------
@@ -692,14 +674,12 @@
   }
 
   .#{$prefix}--data-table--xl .#{$prefix}--table-header-label {
-    padding-block-end: $spacing-05;
-    padding-block-start: $spacing-05;
+    padding-block: $spacing-05 $spacing-05;
   }
 
   .#{$prefix}--data-table--xl td,
   .#{$prefix}--data-table--xl tbody tr th {
-    padding-block-end: $spacing-05;
-    padding-block-start: $spacing-05;
+    padding-block: $spacing-05 $spacing-05;
   }
 
   .#{$prefix}--data-table--xl th,
@@ -900,19 +880,16 @@
 
       max-inline-size: calc(100% - 10px);
       overflow-y: hidden;
-      padding-block-end: 1rem;
+      padding-block: convert.to-rem(15px) 1rem;
       // Needed to reduce 1px jump when toggling between variations
-      padding-block-start: convert.to-rem(15px);
     }
 
     &.#{$prefix}--data-table--xs th .#{$prefix}--table-header-label {
-      padding-block-end: 0;
-      padding-block-start: convert.to-rem(3px);
+      padding-block: convert.to-rem(3px) 0;
     }
 
     &.#{$prefix}--data-table--sm th .#{$prefix}--table-header-label {
-      padding-block-end: 0;
-      padding-block-start: convert.to-rem(8px);
+      padding-block: convert.to-rem(8px) 0;
     }
 
     &.#{$prefix}--data-table--xl th .#{$prefix}--table-header-label {

package/scss/components/data-table/action/_data-table-action.scss

@@ -396,8 +396,7 @@
     background-color: $background-brand;
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     inset-block-end: 0;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+    inset-inline: 0 0;
     opacity: 0;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
@@ -428,8 +427,7 @@
   .#{$prefix}--action-list .#{$prefix}--btn,
   .#{$prefix}--batch-summary .#{$prefix}--btn {
     color: $text-on-color;
-    padding-inline-end: $spacing-05;
-    padding-inline-start: $spacing-05;
+    padding-inline: $spacing-05 $spacing-05;
     white-space: nowrap;
   }
 
@@ -648,8 +646,7 @@
   .#{$prefix}--table-toolbar--sm .#{$prefix}--btn--primary {
     block-size: convert.to-rem(32px);
     min-block-size: auto;
-    padding-block-end: 0.375rem;
-    padding-block-start: 0.375rem;
+    padding-block: 0.375rem 0.375rem;
   }
 
   .#{$prefix}--table-toolbar--sm

package/scss/components/data-table/expandable/_data-table-expandable.scss

@@ -49,8 +49,7 @@
     td {
     border: 0;
     background-color: $layer-hover;
-    padding-block-end: 0;
-    padding-block-start: 0;
+    padding-block: 0 0;
     transition: padding $duration-moderate-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
   }
@@ -199,8 +198,7 @@
   .#{$prefix}--data-table
     td.#{$prefix}--table-expand
     + .#{$prefix}--table-column-checkbox {
-    padding-inline-end: convert.to-rem(6px);
-    padding-inline-start: convert.to-rem(6px);
+    padding-inline: convert.to-rem(6px) convert.to-rem(6px);
   }
 
   // Hide bottom border of checkbox column when expanded

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -74,8 +74,7 @@
     th
     > .#{$prefix}--table-header-label {
     line-height: 1;
-    padding-inline-end: $spacing-05;
-    padding-inline-start: $spacing-05;
+    padding-inline: $spacing-05 $spacing-05;
   }
 
   // -------------------------------------
@@ -107,20 +106,17 @@
     th.#{$prefix}--table-sort__header
     .#{$prefix}--table-sort__flex
     .#{$prefix}--table-header-label {
-    padding-block-end: 0;
-    padding-block-start: 0;
+    padding-block: 0 0;
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--sm
     th.#{$prefix}--table-sort__header {
-    padding-block-end: convert.to-rem(7px);
-    padding-block-start: convert.to-rem(7px);
+    padding-block: convert.to-rem(7px) convert.to-rem(7px);
   }
 
   .#{$prefix}--data-table.#{$prefix}--data-table--top-aligned-header.#{$prefix}--data-table--xs
     th.#{$prefix}--table-sort__header {
-    padding-block-end: convert.to-rem(2px);
-    padding-block-start: convert.to-rem(2px);
+    padding-block: convert.to-rem(2px) convert.to-rem(2px);
   }
 
   .#{$prefix}--data-table--sort:not(.#{$prefix}--data-table--xs):not(
@@ -176,8 +172,7 @@
   .#{$prefix}--table-sort__icon-unsorted {
     fill: $icon-primary;
     inline-size: convert.to-rem(20px);
-    margin-inline-end: $spacing-03;
-    margin-inline-start: $spacing-03;
+    margin-inline: $spacing-03 $spacing-03;
     min-inline-size: $spacing-05;
     opacity: 0;
   }
@@ -205,8 +200,7 @@
   .#{$prefix}--table-sort__icon {
     fill: $icon-primary;
     inline-size: convert.to-rem(20px);
-    margin-inline-end: $spacing-03;
-    margin-inline-start: $spacing-03;
+    margin-inline: $spacing-03 $spacing-03;
     min-inline-size: $spacing-05;
     opacity: 1;
     transform: rotate(0);
@@ -251,8 +245,7 @@
   // Slug styles
   .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon,
   .#{$prefix}--table-sort__header--slug .#{$prefix}--table-sort__icon-unsorted {
-    margin-inline-end: convert.to-rem(8px);
-    margin-inline-start: auto;
+    margin-inline: auto convert.to-rem(8px);
   }
 
   .#{$prefix}--table-sort__header--slug .#{$prefix}--slug {

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

@@ -265,8 +265,7 @@
   }
 
   .flatpickr-current-month .cur-month {
-    margin-inline-end: $spacing-02;
-    margin-inline-start: $spacing-02;
+    margin-inline: $spacing-02 $spacing-02;
 
     &:hover {
       background-color: $layer-hover;

package/scss/components/dropdown/_dropdown.scss

@@ -178,8 +178,7 @@
     // Account for the border in `.cds--dropdown`
     block-size: calc(100% + 1px);
     // 2rem + SVG width
-    padding-inline-end: convert.to-rem(42px);
-    padding-inline-start: $spacing-05;
+    padding-inline: $spacing-05 convert.to-rem(42px);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -193,14 +192,13 @@
     position: absolute;
     z-index: z('dropdown');
     display: flex;
+    // NOTE: IE, Edge, and Safari do not support two value `overflow` shorthand.
+    overflow: hidden auto;
     flex-direction: column;
     background-color: $layer;
     inline-size: 100%;
     list-style: none;
     max-block-size: 0;
-    // NOTE: IE, Edge, and Safari do not support two value `overflow` shorthand.
-    overflow-x: hidden;
-    overflow-y: auto;
     transition: max-height $duration-fast-02 motion(standard, productive);
   }
 
@@ -273,8 +271,7 @@
 
   .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link {
     block-size: convert.to-rem(32px);
-    padding-block-end: convert.to-rem(7px);
-    padding-block-start: convert.to-rem(7px);
+    padding-block: convert.to-rem(7px) convert.to-rem(7px);
   }
 
   .#{$prefix}--dropdown--focused,

package/scss/components/fluid-combo-box/_fluid-combo-box.scss

@@ -49,8 +49,7 @@
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--combo-box
     .#{$prefix}--list-box__selection {
-    inset-block-end: convert.to-rem(10px);
-    inset-block-start: auto;
+    inset-block: auto convert.to-rem(10px);
     transform: none;
   }
 

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

@@ -348,8 +348,7 @@
 
   .#{$prefix}--date-picker--fluid__skeleton--container
     .#{$prefix}--date-picker__icon {
-    inset-block-end: $spacing-03;
-    inset-block-start: auto;
+    inset-block: auto $spacing-03;
   }
 
   // Range skeleton

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -61,8 +61,7 @@
   }
 
   .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field {
-    padding-block-end: convert.to-rem(13px);
-    padding-block-start: convert.to-rem(33px);
+    padding-block: convert.to-rem(33px) convert.to-rem(13px);
     padding-inline-start: $spacing-05;
   }
 

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

@@ -313,8 +313,7 @@ $list-box-menu-width: convert.to-rem(300px);
     cursor: pointer;
     outline: none;
     padding-block: 0;
-    padding-inline-end: $spacing-09;
-    padding-inline-start: $spacing-05;
+    padding-inline: $spacing-05 $spacing-09;
     text-overflow: ellipsis;
     vertical-align: top;
     white-space: nowrap;
@@ -516,8 +515,7 @@ $list-box-menu-width: convert.to-rem(300px);
     display: none;
     background-color: $layer;
     inline-size: $list-box-width;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+    inset-inline: 0 0;
     overflow-y: auto;
     transition: max-height $duration-fast-02 motion(standard, productive);
 
@@ -691,14 +689,12 @@ $list-box-menu-width: convert.to-rem(300px);
 
   .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option {
     block-size: convert.to-rem(32px);
-    padding-block-end: convert.to-rem(7px);
-    padding-block-start: convert.to-rem(7px);
+    padding-block: convert.to-rem(7px) convert.to-rem(7px);
   }
 
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
     block-size: convert.to-rem(48px);
-    padding-block-end: convert.to-rem(15px);
-    padding-block-start: convert.to-rem(15px);
+    padding-block: convert.to-rem(15px) convert.to-rem(15px);
   }
 
   .#{$prefix}--list-box--disabled
@@ -770,8 +766,7 @@ $list-box-menu-width: convert.to-rem(300px);
 
     &:focus {
       margin: 0;
-      padding-inline-end: $spacing-03;
-      padding-inline-start: $spacing-03;
+      padding-inline: $spacing-03 $spacing-03;
     }
   }