Patch - Details-summary: proposed indentation for clarity (wet-boew#10077)

Author: mmoya064

src/polyfills/details/_base.scss

@@ -18,7 +18,8 @@ details {
 		border: 1px solid #ddd;
 		border-radius: 4px;
 		color: #295376;
-		padding: 5px 15px;
+		padding: 5px 15px 5px 30px;
+		text-indent: -16px;
 
 		&:focus,
 		&:hover {

src/polyfills/details/details-en.hbs

@@ -7,7 +7,7 @@
 	"tag": "details",
 	"parentdir": "details",
 	"altLangPrefix": "details",
-	"dateModified": "2014-07-21"
+	"dateModified": "2025-11-25"
 }
 ---
 <p>The HTML5 <code>details</code> and <code>summary</code> elements are used to provide expandable/collapsible content. This component adds support for these elements in browsers that do not already have native support.</p>
@@ -109,6 +109,37 @@
 				</table>
 			</details>
 		</li>
+		<li>
+			<details>
+				<summary>Example 4 - multi-line summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</summary>
+				<p>Example content that provides more details.</p>
+				<table class="table">
+					<caption>Cups of coffee consumed by each delegate</caption>
+					<thead>
+					<tr>
+						<th scope="col">Name</th>
+						<th scope="col">Cups</th>
+						<th scope="col">Type of Coffee</th>
+						<th scope="col">Sugar?</th>
+					</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>T. Sexton</td>
+							<td>10</td>
+							<td>Espresso</td>
+							<td>No</td>
+						</tr>
+						<tr>
+							<td>J. Dinnen</td>
+							<td>5</td>
+							<td>Decaf</td>
+							<td>Yes</td>
+						</tr>
+					</tbody>
+				</table>
+			</details>
+		</li>
 	</ul>
 
 	<section>

src/polyfills/details/details-fr.hbs

@@ -7,7 +7,7 @@
 	"tag": "details",
 	"parentdir": "details",
 	"altLangPrefix": "details",
-	"dateModified": "2014-07-21"
+	"dateModified": "2025-11-25"
 }
 ---
 <p>Les éléments HTML5 «&#160;<code lang="en">details</code>&#160;» et «&#160;<code lang="en">summary</code>&#160;» sont utilisés pour fournir le contenu en arborescence affichable/masquable. Ce composant ajoute le soutien pour ces éléments dans les navigateurs qui n'ont pas déjà la prise en charge native.</p>
@@ -109,6 +109,37 @@
 				</table>
 			</details>
 		</li>
+		<li>
+			<details>
+				<summary>Exemple 4 - summary à plusieurs lignes: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</summary>
+				<p>Le contenu d'exemple qui fournit plus de détails.</p>
+				<table class="table">
+					<caption>Tasses de café bues par chaque député</caption>
+					<thead>
+					<tr>
+						<th scope="col">Nom</th>
+						<th scope="col">Tasses</th>
+						<th scope="col">Type de café</th>
+						<th scope="col">Sucre?</th>
+					</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>T. Sexton</td>
+							<td>10</td>
+							<td>Expresso</td>
+							<td>Non</td>
+						</tr>
+						<tr>
+							<td>J. Dinnen</td>
+							<td>5</td>
+							<td>Déca</td>
+							<td>Oui</td>
+						</tr>
+					</tbody>
+				</table>
+			</details>
+		</li>
 	</ul>
 
 	<section>