Add icon-position to <wa-details> (#1210)

* add `icon-position` to `<wa-details>`

* fix attribute name

packages/webawesome/docs/docs/components/details.md

@@ -48,6 +48,23 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 </style>
 ```
 
+### Icon Position
+
+The default position for the expand and collapse icons is at the end of the summary. Set the `icon-position` attribute to `start` to place the icon at the start of the summary.
+
+```html {.example}
+<div class="wa-stack">
+  <wa-details summary="Start" icon-position="start">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+  <wa-details summary="End" icon-position="end">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </wa-details>
+</div>
+```
+
 ### HTML in Summary
 
 To use HTML in the summary, use the `summary` slot.
@@ -68,12 +85,17 @@ Links and other interactive elements will still retain their behavior:
 
 ### Right-to-Left Languages
 
-The details component automatically adapts to right-to-left languages:
+The details component, including its `icon-position`, automatically adapts to right-to-left languages:
 
 ```html {.example}
-<wa-details summary="تبديلني" lang="ar" dir="rtl">
-  استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
-</wa-details>
+<div class="wa-stack">
+  <wa-details summary="تبديلني" lang="ar" dir="rtl">
+    استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
+  </wa-details>
+  <wa-details summary="تبديلني" lang="ar" dir="rtl" icon-position="start">
+    استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
+  </wa-details>
+</div>
 ```
 
 ### Appearance

packages/webawesome/docs/docs/resources/changelog.md

@@ -8,6 +8,12 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
 
 Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
 
+## Next
+
+### New Features {data-no-outline}
+
+- Added the `icon-position` attribute to `<wa-details>` [discuss:1099]
+
 ## 3.0.0-beta.3
 
 ### New Features {data-no-outline}

packages/webawesome/src/components/details/details.css

@@ -81,6 +81,7 @@ details {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--spacing);
   user-select: none;
   -webkit-user-select: none;
   cursor: pointer;
@@ -101,6 +102,12 @@ details {
   }
 }
 
+/* 'Start' icon position */
+:host([icon-position='start']) summary {
+  flex-direction: row-reverse;
+  justify-content: start;
+}
+
 [part~='icon'] {
   flex: 0 0 auto;
   display: flex;

packages/webawesome/src/components/details/details.ts

@@ -71,6 +71,9 @@ export default class WaDetails extends WebAwesomeElement {
   /** The element's visual appearance. */
   @property({ reflect: true }) appearance: 'filled' | 'outlined' | 'plain' = 'outlined';
 
+  /** The position of the expand/collapse icon. */
+  @property({ attribute: 'icon-position', reflect: true }) iconPosition: 'start' | 'end' = 'end';
+
   firstUpdated() {
     this.body.style.height = this.open ? 'auto' : '0';
     if (this.open) {