Rename left/right layout names to start/end (#448)

CHANGELOG.md

@@ -101,12 +101,16 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
   * `mzp-c-card-desc` → `mzp-c-card-body`
   * `mzp-c-menu-item-desc` → `mzp-c-menu-item-body`
   * `mzp-c-billboard-desc` → `mzp-c-billboard-body`
+* (breaking) Renamed directional layout classes to use `start`/`end` instead of `left`/`right`, matching CSS logical properties. Affects Main with Sidebar and Article (#448):
+  * `mzp-l-sidebar-left` → `mzp-l-sidebar-start`
+  * `mzp-l-sidebar-right` → `mzp-l-sidebar-end`
 * Clean break, no aliases -- see the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for find/replace scripts
 
 
 ## Bug Fixes
 
 * **css:** at2x mixin doesn't support single keyword values (#751)
+* **css:** Removed duplicate `mzp-a-slide-in-left` and `mzp-a-slide-in-right` `@keyframes` definitions (#448)
 
 ## Migration Tips
 

assets/sass/protocol/base/includes/_animations.scss

@@ -50,6 +50,8 @@
     }
 }
 
+// Keyframes can't read text direction, so these are written for LTR. Swap
+// slide-in-right for slide-in-left under [dir='rtl'] (see sticky promo).
 @keyframes mzp-a-slide-in-right {
     0% {
         opacity: 0;
@@ -62,30 +64,6 @@
     }
 }
 
-@keyframes mzp-a-slide-in-right {
-    0% {
-        opacity: 0;
-        transform: translateX(60px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-@keyframes mzp-a-slide-in-left {
-    0% {
-        opacity: 0;
-        transform: translateX(-60px);
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
 @keyframes mzp-a-slide-in-left {
     0% {
         opacity: 0;

assets/sass/protocol/components/_article.scss

@@ -9,13 +9,13 @@
     max-width: 100%;
 
     @media #{$mq-md} {
-        // Float left when sidebar is on the left
-        .mzp-l-sidebar-left .mzp-l-main & {
+        // Float start when sidebar is on the start side
+        .mzp-l-sidebar-start .mzp-l-main & {
             float: inline-start;
         }
 
-        // Float right when sidebar is on the right
-        .mzp-l-sidebar-right .mzp-l-main & {
+        // Float end when sidebar is on the end side
+        .mzp-l-sidebar-end .mzp-l-main & {
             float: inline-end;
         }
     }

assets/sass/protocol/templates/_main-with-sidebar.scss

@@ -15,7 +15,7 @@
             @include grid-third;
         }
 
-        &.mzp-l-sidebar-left {
+        &.mzp-l-sidebar-start {
             .mzp-l-main {
                 float: inline-end;
                 padding-inline-start: $spacing-md;
@@ -27,7 +27,7 @@
             }
         }
 
-        &.mzp-l-sidebar-right {
+        &.mzp-l-sidebar-end {
             .mzp-l-main {
                 float: inline-start;
                 padding-inline-end: $spacing-md;

components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.config.yml

@@ -1,11 +1,11 @@
 preview: '@preview-unpadded'
 context:
-  layout: left
+  layout: start
 variants:
-  - name: Sidebar Right
+  - name: Sidebar End
     context:
-      layout: right
+      layout: end
     notes: |
-      This example uses `mzp-l-sidebar-right` layout class.  The sidebar will appear on the left for right-to-left (RTL) languages.
+      This example uses `mzp-l-sidebar-end` layout class. The sidebar will appear on the right in left-to-right (LTR) languages and on the left in right-to-left (RTL) languages.
 
       Colored borders are for demonstration only. They are not part of the component styles.

components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.html

@@ -1,4 +1,4 @@
-<div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-{% if layout %}{{ layout }}{% else %}left{% endif %}">
+<div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-{% if layout %}{{ layout }}{% else %}start{% endif %}">
   {% block content %}
     <main class="mzp-l-main">
       <p>Main content.</p>

components/layout/04-main-with-sidebar/01-main-with-sidebar/readme.md

@@ -1,5 +1,5 @@
-A block with a main column and one sidebar on either the left or right (this
-example uses `mzp-l-sidebar-left`). A single page should only have one main
+A block with a main column and one sidebar on either the start or end side (this
+example uses `mzp-l-sidebar-start`). A single page should only have one main
 section and one sidebar.
 
 The columns will stack in small viewports, form a 1/3-2/3 split in medium sized
@@ -15,9 +15,9 @@ styles.
 
 ### Tips
 
-- Layout class `mzp-l-sidebar-left` or `mzp-l-sidebar-right` is required.
-- The layout is reversed in right to left (RTL) languages; e.g., a left sidebar
-  will appear on the right.
+- Layout class `mzp-l-sidebar-start` or `mzp-l-sidebar-end` is required.
+- Start and end follow the text direction: a start sidebar appears on the left
+  in left to right (LTR) languages and on the right in right to left (RTL) languages.
 - The main content can be wrapped in any valid HTML element. We’re using `main`
   in this example but it could also be an `article`, `section`, `div`, etc.
 - The sidebar should usually be an `aside` element but you could use other elements.

docs/02-usage/migration.md

@@ -67,6 +67,18 @@ Find:    mzp-c-(callout|card|menu-item|billboard)-desc
 Replace: mzp-c-$1-body
 ```
 
+Rename directional layout names from `left`/`right` to `start`/`end`. Affects Main with Sidebar and Article.
+
+```text
+Find:    mzp-l-sidebar-left
+Replace: mzp-l-sidebar-start
+```
+
+```text
+Find:    mzp-l-sidebar-right
+Replace: mzp-l-sidebar-end
+```
+
 ### CSS Variable Renames (SCSS files)
 
 Font family and line-height variables:
@@ -272,6 +284,11 @@ find . -name "*.scss" -exec sed -i '' -E 's/mzp-c-(menu|menu-item|menu-list|card
 find . -name "*.html" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} +
 find . -name "*.njk" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} +
 find . -name "*.scss" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} +
+
+# Rename directional layout names to start/end
+find . -name "*.html" -exec sed -i '' -e 's/mzp-l-sidebar-left/mzp-l-sidebar-start/g' -e 's/mzp-l-sidebar-right/mzp-l-sidebar-end/g' {} +
+find . -name "*.njk" -exec sed -i '' -e 's/mzp-l-sidebar-left/mzp-l-sidebar-start/g' -e 's/mzp-l-sidebar-right/mzp-l-sidebar-end/g' {} +
+find . -name "*.scss" -exec sed -i '' -e 's/mzp-l-sidebar-left/mzp-l-sidebar-start/g' -e 's/mzp-l-sidebar-right/mzp-l-sidebar-end/g' {} +
 ```
 
 ### CSS Variable Renames

docs/03-contributing/02-naming.md

@@ -72,6 +72,30 @@ by `l-` and `u-`) which you should only use when necessary and practical.
 In most cases there will be an equivalent SCSS mixin that may be preferable to
 adding presentational classes in your markup.
 
+### Direction and Alignment
+
+Use `start` and `end` (and `reverse`) rather than `left` and `right` when naming
+direction or alignment, matching CSS logical properties. Start and end follow
+the text direction, so a `start` sidebar is on the left in left-to-right
+languages and on the right in right-to-left languages.
+
+Billboard is an exception: its `mzp-l-billboard-left` and `mzp-l-billboard-right`
+layouts intentionally don't reverse in right-to-left languages, so they keep
+physical names.
+
+Animation names are also an exception: `@keyframes` can't read text direction,
+so slide-in animations like `mzp-a-slide-in-left` keep physical names and are
+swapped under `[dir='rtl']` instead.
+
+```scss
+// NO - Physical
+.mzp-l-sidebar-left { ... }
+
+// YES - Logical
+.mzp-l-sidebar-start { ... }
+.mzp-l-split-reversed { ... }
+```
+
 ### Sizes
 
 We use a “T-shirt” convention when we need to describe sizes, e.g. “lg” for large