add summary-icon slot + example; #1046

docs/components/details.md

@@ -46,6 +46,30 @@ const App = () => (
 );
 ```
 
+### Customizing the Summary Icon
+
+Use the `summary-icon` slot to change the summary icon. You can use `<sl-icon>` or your own SVG. By default, the icon will rotate 90º when the details opens and closes. If desired, you can style the `summary-icon` part to change the animation.
+
+```html preview
+<sl-details summary="Toggle Me">
+  <sl-icon slot="summary-icon" name="arrow-right"></sl-icon>
+  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.
+</sl-details>
+```
+
+```jsx react
+import { SlDetails, SlIcon } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlDetails summary="Toggle Me">
+    <SlIcon slot="summary-icon" name="arrow-right" />
+    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.
+  </SlDetails>
+);
+```
+
 ### Grouping Details
 
 Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `sl-show` event.

docs/resources/changelog.md

@@ -11,6 +11,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 ## Next
 
 - Added `header-actions` slot to `<sl-dialog>` and `<sl-drawer>`
+- Added the `summary-icon` slot to `<sl-details>` [#1046](https://github.com/shoelace-style/shoelace/discussions/1046)
 - Fixed a bug in `<sl-tree-item>` where `sl-selection-change` was emitted when the selection didn't change [#1030](https://github.com/shoelace-style/shoelace/pull/1030)
 - Fixed a bug in `<sl-button-group>` that caused the border to render incorrectly when hovering over icons inside buttons [#1035](https://github.com/shoelace-style/shoelace/issues/1035)
 - Fixed an incorrect default for `flip-fallback-strategy` in `<sl-popup>` that caused the fallback strategy to be `initial` instead of `best-fit`, which is inconsistent with Floating UI's default [#1036](https://github.com/shoelace-style/shoelace/issues/1036)

src/components/details/details.styles.ts

@@ -56,11 +56,11 @@ export default css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    transition: var(--sl-transition-medium) transform ease;
+    transition: var(--sl-transition-medium) rotate ease;
   }
 
   .details--open .details__summary-icon {
-    transform: rotate(90deg);
+    rotate: 90deg;
   }
 
   .details__body {

src/components/details/details.ts

@@ -21,6 +21,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The details' content.
  * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+ * @slot summary-icon - The icon to show next to the summary.
  *
  * @event sl-show - Emitted when the details opens.
  * @event sl-after-show - Emitted after the details opens and all animations are complete.
@@ -173,13 +174,11 @@ export default class SlDetails extends ShoelaceElement {
           @click=${this.handleSummaryClick}
           @keydown=${this.handleSummaryKeyDown}
         >
-          <div part="summary" class="details__summary">
-            <slot name="summary">${this.summary}</slot>
-          </div>
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
 
-          <span part="summary-icon" class="details__summary-icon">
+          <slot name="summary-icon" part="summary-icon" class="details__summary-icon">
             <sl-icon name="chevron-right" library="system"></sl-icon>
-          </span>
+          </slot>
         </header>
 
         <div class="details__body">