refactor: change all relevant CSS properties to logical properties

.storybook/preview.ts

@@ -27,6 +27,27 @@ const withBackgroundDecorator = makeDecorator({
   },
 });
 
+const withDirectionDecorator = makeDecorator({
+  name: 'withDirection',
+  parameterName: 'direction',
+  skipIfNoParametersOrOptions: false,
+  wrapper: (getStory, context, { parameters }) => {
+    const direction = context.globals.direction as string;
+    const directionFactory = parameters as (context: StoryContext) => string;
+
+    const rootElement = (context.canvasElement as unknown as HTMLElement).closest('html')!;
+
+    // If no background function is set, remove background color.
+    if (!direction && !directionFactory) {
+      rootElement.removeAttribute('dir');
+    } else {
+      rootElement.setAttribute('dir', directionFactory?.(context) ?? direction);
+    }
+
+    return getStory(context);
+  },
+});
+
 const getViewportName = (key: string): string =>
   key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();
 
@@ -78,9 +99,19 @@ const parameters: Parameters = {
 };
 
 const preview: Preview = {
-  decorators: [withBackgroundDecorator],
+  decorators: [withBackgroundDecorator, withDirectionDecorator],
   parameters,
   tags: ['autodocs'],
+  globalTypes: {
+    direction: {
+      description: 'Change direction',
+      defaultValue: 'ltr',
+      toolbar: {
+        icon: 'transfer',
+        items: ['ltr', 'rtl'],
+      },
+    },
+  },
 };
 
 export default preview;

.stylelintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
+  "plugins": ["stylelint-use-logical-spec"],
   "ignoreFiles": ["dist/**/*", "tools/generate-component/**/*.scss"],
   "rules": {
     "custom-property-pattern": "^_?(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
@@ -49,6 +50,7 @@
     ],
     "number-max-precision": 12,
     "value-no-vendor-prefix": [true, { "ignoreValues": ["box"] }],
-    "no-duplicate-selectors": null
+    "no-duplicate-selectors": null,
+    "liberty/use-logical-spec": true
   }
 }

package.json

@@ -137,6 +137,7 @@
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "13.1.0",
     "stylelint-scss": "6.5.1",
+    "stylelint-use-logical-spec": "5.0.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.5.4",
     "typescript-eslint": "8.4.0",

src/elements-experimental/pearl-chain-time/pearl-chain-time.scss

@@ -22,7 +22,7 @@
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
-  height: var(--sbb-pearl-chain-time-height);
+  block-size: var(--sbb-pearl-chain-time-height);
 }
 
 .sbb-pearl-chain__time-walktime,
@@ -43,7 +43,7 @@
 }
 
 .sbb-pearl-chain__time-walktime-prime-symbol {
-  float: right;
+  float: inline-end;
 }
 
 .sbb-pearl-chain__time-transfer {

src/elements-experimental/pearl-chain-vertical-item/pearl-chain-vertical-item.scss

@@ -32,11 +32,11 @@ slot[name='right'],
 }
 
 slot[name='right'] {
-  width: var(--sbb-pearl-chain-vertical-right-item-width);
+  inline-size: var(--sbb-pearl-chain-vertical-right-item-width);
 }
 
 .sbb-pearl-chain-vertical-item__column--middle {
-  min-width: var(
+  min-inline-size: var(
     --sbb-pearl-chain-vertical-middle-item-min-width,
     --sbb-pearl-chain-vertical-middle-min-width
   );
@@ -61,19 +61,18 @@ slot[name='right']::slotted(*) {
 
 .sbb-pearl-chain-vertical-item__line {
   position: absolute;
-  bottom: 0;
+  inset-block: calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2) 0;
   inset-inline-start: var(--sbb-pearl-chain-vertical-item-inline-start);
   transform: var(--sbb-pearl-chain-vertical-item-transform);
-  width: var(--sbb-border-width-2x);
-  inset-block-start: calc(var(--sbb-pearl-chain-bullet-size-start-end) / 2);
+  inline-size: var(--sbb-border-width-2x);
 
   &::after {
     content: '';
     position: absolute;
     inset-inline-start: 0;
     inset-block-start: 0;
-    height: var(--sbb-pearl-chain-vertical-item-leg-status);
-    width: var(--sbb-pearl-chain-vertical-item-border-width);
+    block-size: var(--sbb-pearl-chain-vertical-item-leg-status);
+    inline-size: var(--sbb-pearl-chain-vertical-item-border-width);
     background-color: var(--sbb-pearl-chain-vertical-item-color-past);
 
     @include sbb.if-forced-colors {
@@ -98,7 +97,7 @@ slot[name='right']::slotted(*) {
 }
 
 .sbb-pearl-chain-vertical-item__line--thin {
-  width: var(--sbb-pearl-chain-vertical-item-border-width-thin);
+  inline-size: var(--sbb-pearl-chain-vertical-item-border-width-thin);
 }
 
 .sbb-pearl-chain-vertical-item__line--default {

src/elements-experimental/pearl-chain-vertical/pearl-chain-vertical.scss

@@ -11,5 +11,5 @@
 
 .sbb-pearl-chain-vertical {
   display: table;
-  width: var(--sbb-pearl-chain-vertical-width);
+  inline-size: var(--sbb-pearl-chain-vertical-width);
 }

src/elements-experimental/pearl-chain/pearl-chain.scss

@@ -36,7 +36,7 @@
   justify-content: space-between;
   flex-wrap: nowrap;
   color: var(--sbb-pearl-chain-color);
-  width: 100%;
+  inline-size: 100%;
   padding-block: calc(
     (var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2
   );
@@ -69,10 +69,10 @@
   flex-shrink: 0;
   flex-grow: 0;
   position: relative;
-  height: var(--sbb-pearl-chain-height);
+  block-size: var(--sbb-pearl-chain-height);
   border-inline-end: var(--sbb-pearl-chain-spacing-small) solid Canvas;
   background-color: currentcolor;
-  width: var(--sbb-pearl-chain-leg-width);
+  inline-size: var(--sbb-pearl-chain-leg-width);
   display: flex;
   align-items: center;
 
@@ -199,7 +199,7 @@
   background-color: var(--sbb-pearl-chain-color-past);
 
   // --sbb-pearl-chain-leg-status: defined in .ts file
-  width: var(--sbb-pearl-chain-leg-status);
+  inline-size: var(--sbb-pearl-chain-leg-status);
 }
 
 .sbb-pearl-chain__position {

src/elements-experimental/timetable-row/timetable-row.scss

@@ -37,7 +37,7 @@
 }
 
 .sbb-timetable__row--quay-type {
-  float: left;
+  float: inline-start;
 }
 
 // resets lists
@@ -138,12 +138,12 @@ li {
 }
 
 .sbb-loading__row {
-  width: 100%;
+  inline-size: 100%;
   border-radius: var(--sbb-border-radius-1x);
-  height: var(--sbb-timetable-row-height);
+  block-size: var(--sbb-timetable-row-height);
 
   @include sbb.mq($from: medium) {
-    height: #{sbb.px-to-rem-build(28)};
+    block-size: #{sbb.px-to-rem-build(28)};
   }
 
   @include sbb.if-forced-colors {
@@ -158,21 +158,21 @@ li {
 }
 
 .sbb-loading__row:first-of-type {
-  height: var(--sbb-timetable-row-height-header);
-  width: 50%;
+  block-size: var(--sbb-timetable-row-height-header);
+  inline-size: 50%;
 }
 
 .sbb-loading__row:last-of-type {
-  height: var(--sbb-timetable-row-height-footer);
+  block-size: var(--sbb-timetable-row-height-footer);
 }
 
 .sbb-loading__badge {
   margin-inline: auto calc(var(--sbb-spacing-fixed-3x) * -1);
   padding-inline-end: var(--sbb-spacing-fixed-6x);
   border-end-start-radius: var(--sbb-border-radius-4x);
   transform: skew(16deg, 0deg);
-  width: #{sbb.px-to-rem-build(115)};
-  height: #{sbb.px-to-rem-build(20)};
+  inline-size: #{sbb.px-to-rem-build(115)};
+  block-size: #{sbb.px-to-rem-build(20)};
 }
 
 @keyframes skeleton-pulse {

src/elements/alert/alert/alert.scss

@@ -101,7 +101,7 @@ $open-anim-opacity-to: 1;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: var(--sbb-alert-gap);
-  min-width: fit-content;
+  min-inline-size: fit-content;
   padding: var(--sbb-alert-padding);
   overflow: hidden;
   color: var(--sbb-alert-color);
@@ -118,7 +118,7 @@ $open-anim-opacity-to: 1;
   display: flex;
   align-items: start;
   padding-block: var(--sbb-spacing-fixed-1x);
-  min-width: var(--sbb-alert-icon-size);
+  min-inline-size: var(--sbb-alert-icon-size);
 
   --sbb-icon-svg-width: var(--sbb-alert-icon-size);
   --sbb-icon-svg-height: var(--sbb-alert-icon-size);
@@ -151,7 +151,7 @@ $open-anim-opacity-to: 1;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  height: 100%;
+  block-size: 100%;
 }
 
 .sbb-alert__close-button {
@@ -165,7 +165,7 @@ $open-anim-opacity-to: 1;
 
   @include sbb.mq($from: small) {
     display: block;
-    height: calc(100% - (var(--sbb-spacing-fixed-1x) * 2));
+    block-size: calc(100% - (var(--sbb-spacing-fixed-1x) * 2));
   }
 }
 

src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss

@@ -59,8 +59,8 @@
 
 .sbb-option__icon {
   display: flex;
-  min-width: var(--sbb-size-icon-ui-small);
-  min-height: var(--sbb-size-icon-ui-small);
+  min-inline-size: var(--sbb-size-icon-ui-small);
+  min-block-size: var(--sbb-size-icon-ui-small);
   color: var(--sbb-option-icon-color);
 
   :host(:not([data-slot-names~='icon'], [icon-name])) & {

src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss

@@ -48,7 +48,7 @@
 
 ::slotted(sbb-autocomplete-grid-option) {
   flex: 1 1 auto;
-  margin-right: calc(-1 * var(--sbb-spacing-fixed-2x));
+  margin-inline-end: calc(-1 * var(--sbb-spacing-fixed-2x));
 }
 
 .sbb-autocomplete-grid-row {

src/elements/autocomplete/autocomplete-base-element.scss

@@ -137,7 +137,7 @@
 
   @include sbb.if-forced-colors {
     border: var(--sbb-border-width-1x) solid CanvasText;
-    border-top: none;
+    border-block-start: none;
   }
 }
 

src/elements/breadcrumb/breadcrumb-group/breadcrumb-group.scss

@@ -49,8 +49,8 @@
   // line height and letter-spacing needed to match squares drawn in Figma.
   line-height: 0;
   letter-spacing: 0.01em;
-  width: var(--sbb-size-icon-ui-small);
-  height: var(--sbb-size-icon-ui-small);
+  inline-size: var(--sbb-size-icon-ui-small);
+  block-size: var(--sbb-size-icon-ui-small);
   border: var(--sbb-breadcrumb-group-ellipsis-border-width) solid
     var(--sbb-breadcrumb-group-ellipsis-border-color);
   border-radius: 50%;

src/elements/button/common/button-common.scss

@@ -130,17 +130,17 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 
   // Reset for link variant
   text-decoration: none;
-  width: 100%;
+  inline-size: 100%;
   position: relative;
   display: flex;
   gap: var(--sbb-button-gap);
   align-items: center;
   justify-content: center;
-  text-align: left;
+  text-align: start;
   transition-duration: var(--sbb-button-transition-duration);
   transition-timing-function: var(--sbb-button-transition-easing-function);
   transition-property: color;
-  min-height: var(--sbb-button-min-height);
+  min-block-size: var(--sbb-button-min-height);
   border-radius: var(--sbb-button-border-radius);
 
   // The padding block value is only a minimal padding to preserve a padding if the content becomes larger than intended.
@@ -190,7 +190,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   }
 
   :host(#{$icon-only}) & {
-    width: var(--sbb-button-min-height);
+    inline-size: var(--sbb-button-min-height);
     justify-content: center;
   }
 

src/elements/button/mini-button-group/mini-button-group.scss

@@ -45,7 +45,7 @@
 
   padding-block: var(--sbb-spacing-fixed-1x);
   padding-inline: var(--sbb-spacing-fixed-1x);
-  height: var(--sbb-size-icon-ui-small);
+  block-size: var(--sbb-size-icon-ui-small);
 }
 
 .sbb-mini-button-group {
@@ -55,8 +55,8 @@
   flex-wrap: nowrap;
   align-items: center;
   gap: var(--sbb-mini-button-group-gap);
-  width: fit-content;
-  min-height: var(--sbb-mini-button-group-min-height);
+  inline-size: fit-content;
+  min-block-size: var(--sbb-mini-button-group-min-height);
   background-color: var(--sbb-mini-button-group-background);
   border: var(--sbb-mini-button-group-border);
   border-radius: var(--sbb-border-radius-infinity);