Rename vertical to orientation="vertical"; fixes #674 (#963)

* vertical => orientation="vertical"; fixes #674

* add issue

* Update divider styles and docs to use `orientation='vertical'`

* Update split panel styles and docs to use `orientation='vertical'`

* Update remaining docs and patterns examples to `orientation='vertical'`

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>

docs/docs/components/divider.md

@@ -39,16 +39,16 @@ Use the `--spacing` custom property to change the amount of space between the di
 </div>
 ```
 
-### Vertical
+### Orientation
 
-Add the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.
+The default orientation for dividers is `horizontal`. Set `orientation` attribute to `vertical` to draw a vertical divider. The divider will span the full height of its container.
 
 ```html {.example}
 <div style="display: flex; align-items: center; height: 2rem;">
   First
-  <wa-divider vertical></wa-divider>
+  <wa-divider orientation="vertical"></wa-divider>
   Middle
-  <wa-divider vertical></wa-divider>
+  <wa-divider orientation="vertical"></wa-divider>
   Last
 </div>
 ```

docs/docs/components/split-panel.md

@@ -80,12 +80,12 @@ To set the initial position in pixels instead of a percentage, use the `position
 </wa-split-panel>
 ```
 
-### Vertical
+### Orientation
 
-Add the `vertical` attribute to render the split panel in a vertical orientation where the start and end panels are stacked. You also need to set a height when using the vertical orientation.
+Set the `orientation` attribute to `vertical` and provide a height to render the split panel in a vertical orientation where the start and end panels are stacked.
 
 ```html {.example}
-<wa-split-panel vertical style="height: 400px;">
+<wa-split-panel orientation="vertical" style="height: 400px;">
   <div
     slot="start"
     style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
@@ -248,7 +248,7 @@ Create complex layouts that can be repositioned independently by nesting split p
     Start
   </div>
   <div slot="end">
-    <wa-split-panel vertical style="height: 400px;">
+    <wa-split-panel orientation="vertical" style="height: 400px;">
       <div
         slot="start"
         style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"

docs/docs/patterns/app/activity-log.md

@@ -66,7 +66,7 @@ description: 'Track and organize recent user actions or events.'
       <wa-format-date date="2025-04-01" month="short" day="numeric"></wa-format-date>
     </div>
   </article>
-  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
+  <wa-divider orientation="vertical" style="height: 1em; margin-left: 1rem"></wa-divider>
   <article class="wa-flank" style="flex-wrap: nowrap">
     <wa-avatar style="--size: 2rem">
       <wa-icon slot="icon" name="seedling"></wa-icon>
@@ -76,7 +76,7 @@ description: 'Track and organize recent user actions or events.'
       <wa-format-date date="2025-05-29" month="short" day="numeric"></wa-format-date>
     </div>
   </article>
-  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
+  <wa-divider orientation="vertical" style="height: 1em; margin-left: 1rem"></wa-divider>
   <article class="wa-flank" style="flex-wrap: nowrap">
     <wa-avatar style="--size: 2rem">
       <wa-icon slot="icon" name="tree-deciduous"></wa-icon>
@@ -86,7 +86,7 @@ description: 'Track and organize recent user actions or events.'
       <wa-format-date date="2025-09-15" month="short" day="numeric"></wa-format-date>
     </div>
   </article>
-  <wa-divider vertical style="height: 1em; margin-left: 1rem"></wa-divider>
+  <wa-divider orientation="vertical" style="height: 1em; margin-left: 1rem"></wa-divider>
   <article class="wa-flank" style="flex-wrap: nowrap">
     <wa-avatar style="--size: 2rem">
       <wa-icon slot="icon" name="crate-apple"></wa-icon>
@@ -218,7 +218,7 @@ description: 'Track and organize recent user actions or events.'
       </div>
     </wa-card>
     <div class="wa-flank wa-gap-xl">
-      <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
+      <wa-divider orientation="vertical" style="height: auto; align-self: stretch"></wa-divider>
       <ul class="wa-stack">
         <li class="wa-stack wa-gap-2xs">
           <wa-card>

docs/docs/patterns/app/comments.md

@@ -51,7 +51,7 @@ isPro: true
         </p>
       </li>
       <div class="wa-flank wa-gap-xl">
-        <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
+        <wa-divider orientation="vertical" style="height: auto; align-self: stretch"></wa-divider>
         <ul class="wa-stack">
           <li class="wa-stack wa-gap-2xs">
             <div class="wa-flank">

docs/docs/patterns/app/description-list.md

@@ -195,7 +195,7 @@ isPro: true
                 </span>
                 <div class="wa-cluster wa-gap-2xs">
                   <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
-                  <wa-divider vertical style="height: 1em"></wa-divider>
+                  <wa-divider orientation="vertical" style="height: 1em"></wa-divider>
                   <wa-button appearance="plain" variant="danger" size="small">Delete</wa-button>
                 </div>
               </div>
@@ -210,7 +210,7 @@ isPro: true
                 </span>
                 <div class="wa-cluster wa-gap-2xs">
                   <wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
-                  <wa-divider vertical style="height: 1em"></wa-divider>
+                  <wa-divider orientation="vertical" style="height: 1em"></wa-divider>
                   <wa-button appearance="plain" variant="danger" size="small">Delete</wa-button>
                 </div>
               </div>

docs/docs/patterns/ecommerce/order-summary.md

@@ -102,7 +102,7 @@ isPro: true
         >Order placed
         <wa-format-date date="2025-02-26T09:00:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date
       ></span>
-      <wa-divider vertical style="height: 2em"></wa-divider>
+      <wa-divider orientation="vertical" style="height: 2em"></wa-divider>
       <span>Order # 45646456-4656-4542</span>
     </div>
     <wa-button size="small" appearance="outlined" pill>View Invoice</wa-button>

docs/docs/patterns/ecommerce/product-preview.md

@@ -24,7 +24,7 @@ isPro: true
       <div class="wa-stack wa-gap-xl">
         <div class="wa-cluster">
           <span class="wa-heading-2xl">$32</span>
-          <wa-divider vertical style="height: 2em"></wa-divider>
+          <wa-divider orientation="vertical" style="height: 2em"></wa-divider>
           <wa-rating label="Rating" value="3.75" readonly></wa-rating>
           <a href="" class="wa-caption-m">36 Reviews</a>
         </div>

docs/docs/resources/changelog.md

@@ -16,6 +16,7 @@ During the alpha period, things might break! We take breaking changes very serio
 
 - 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
 - 🚨 BREAKING: Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
+- 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
 - Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
 
 ## 3.0.0-alpha.13