@ulu/frontend 0.1.0-beta.116 → 0.1.0-beta.117

package/docs-dev/demos/counter-list/index.html

@@ -1635,6 +1635,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -4496,6 +4511,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">

package/docs-dev/demos/css-icons/index.html

@@ -1635,6 +1635,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -4496,6 +4511,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">

package/docs-dev/demos/data-grid/index.html

@@ -1635,6 +1635,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -4496,6 +4511,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">

package/docs-dev/demos/data-table/index.html

@@ -1635,6 +1635,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -4496,6 +4511,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -5852,178 +5882,178 @@
 </table>
 <h2 class="h2">Complex Table</h2>
 <h2 class="h2">Striped Table</h2>
-<table class="data-table data-table--striped" id="dt-1">
+<table class="data-table data-table--striped" id="dt-5">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-1-type" rowspan="2">Type</th>
-      <th id="dt-1-group" colspan="2">Group</th>
-      <th id="dt-1-details" colspan="2">Details</th>
-      <th id="dt-1-id" rowspan="2">Id</th>
+      <th id="dt-5-type" rowspan="2">Type</th>
+      <th id="dt-5-group" colspan="2">Group</th>
+      <th id="dt-5-details" colspan="2">Details</th>
+      <th id="dt-5-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-1-group" id="dt-1-primary">Primary</th>
-      <th headers="dt-1-group" id="dt-1-secondary">Secondary</th>
-      <th headers="dt-1-details" id="dt-1-before">Before Task</th>
-      <th headers="dt-1-details" id="dt-1-after">After Task</th>
+      <th headers="dt-5-group" id="dt-5-primary">Primary</th>
+      <th headers="dt-5-group" id="dt-5-secondary">Secondary</th>
+      <th headers="dt-5-details" id="dt-5-before">Before Task</th>
+      <th headers="dt-5-details" id="dt-5-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-1-type dt-1-r1" id="dt-1-r1">Default</th>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-5-type dt-5-r1" id="dt-5-r1">Default</th>
+      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-1-group dt-1-primary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-group dt-1-secondary dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-before dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-details dt-1-after dt-1-r1">Lorem Ipsum</td>
-      <td headers="dt-1-id">OL-53-GHSLE</td>
+      <td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
+      <td headers="dt-5-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-first Table</h2>
-<table class="data-table data-table--large-first" id="dt-2">
+<table class="data-table data-table--large-first" id="dt-6">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-2-type" rowspan="2">Type</th>
-      <th id="dt-2-group" colspan="2">Group</th>
-      <th id="dt-2-details" colspan="2">Details</th>
-      <th id="dt-2-id" rowspan="2">Id</th>
+      <th id="dt-6-type" rowspan="2">Type</th>
+      <th id="dt-6-group" colspan="2">Group</th>
+      <th id="dt-6-details" colspan="2">Details</th>
+      <th id="dt-6-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-2-group" id="dt-2-primary">Primary</th>
-      <th headers="dt-2-group" id="dt-2-secondary">Secondary</th>
-      <th headers="dt-2-details" id="dt-2-before">Before Task</th>
-      <th headers="dt-2-details" id="dt-2-after">After Task</th>
+      <th headers="dt-6-group" id="dt-6-primary">Primary</th>
+      <th headers="dt-6-group" id="dt-6-secondary">Secondary</th>
+      <th headers="dt-6-details" id="dt-6-before">Before Task</th>
+      <th headers="dt-6-details" id="dt-6-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-2-type dt-2-r1" id="dt-2-r1">Default</th>
-      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-6-type dt-6-r1" id="dt-6-r1">Default</th>
+      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-id">OL-53-GHSLE</td>
+      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-2-group dt-2-primary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-group dt-2-secondary dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-before dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-details dt-2-after dt-2-r1">Lorem Ipsum</td>
-      <td headers="dt-2-id">OL-53-GHSLE</td>
+      <td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
+      <td headers="dt-6-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">Large-header Table</h2>
-<table class="data-table data-table--large-header" id="dt-3">
+<table class="data-table data-table--large-header" id="dt-7">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-3-type" rowspan="2">Type</th>
-      <th id="dt-3-group" colspan="2">Group</th>
-      <th id="dt-3-details" colspan="2">Details</th>
-      <th id="dt-3-id" rowspan="2">Id</th>
+      <th id="dt-7-type" rowspan="2">Type</th>
+      <th id="dt-7-group" colspan="2">Group</th>
+      <th id="dt-7-details" colspan="2">Details</th>
+      <th id="dt-7-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-3-group" id="dt-3-primary">Primary</th>
-      <th headers="dt-3-group" id="dt-3-secondary">Secondary</th>
-      <th headers="dt-3-details" id="dt-3-before">Before Task</th>
-      <th headers="dt-3-details" id="dt-3-after">After Task</th>
+      <th headers="dt-7-group" id="dt-7-primary">Primary</th>
+      <th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
+      <th headers="dt-7-details" id="dt-7-before">Before Task</th>
+      <th headers="dt-7-details" id="dt-7-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-3-type dt-3-r1" id="dt-3-r1">Default</th>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-7-type dt-7-r1" id="dt-7-r1">Default</th>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-3-group dt-3-primary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-group dt-3-secondary dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-before dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-details dt-3-after dt-3-r1">Lorem Ipsum</td>
-      <td headers="dt-3-id">OL-53-GHSLE</td>
+      <td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
+      <td headers="dt-7-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>
 <h2 class="h2">No-border Table</h2>
-<table class="data-table data-table--no-border" id="dt-4">
+<table class="data-table data-table--no-border" id="dt-8">
   <caption>
     This Is The Table's Caption
   </caption>
   <thead>
     <tr>
-      <th id="dt-4-type" rowspan="2">Type</th>
-      <th id="dt-4-group" colspan="2">Group</th>
-      <th id="dt-4-details" colspan="2">Details</th>
-      <th id="dt-4-id" rowspan="2">Id</th>
+      <th id="dt-8-type" rowspan="2">Type</th>
+      <th id="dt-8-group" colspan="2">Group</th>
+      <th id="dt-8-details" colspan="2">Details</th>
+      <th id="dt-8-id" rowspan="2">Id</th>
     </tr>
     <tr>
-      <th headers="dt-4-group" id="dt-4-primary">Primary</th>
-      <th headers="dt-4-group" id="dt-4-secondary">Secondary</th>
-      <th headers="dt-4-details" id="dt-4-before">Before Task</th>
-      <th headers="dt-4-details" id="dt-4-after">After Task</th>
+      <th headers="dt-8-group" id="dt-8-primary">Primary</th>
+      <th headers="dt-8-group" id="dt-8-secondary">Secondary</th>
+      <th headers="dt-8-details" id="dt-8-before">Before Task</th>
+      <th headers="dt-8-details" id="dt-8-after">After Task</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th rowspan="3" headers="dt-4-type dt-4-r1" id="dt-4-r1">Default</th>
-      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-id">OL-53-GHSLE</td>
+      <th rowspan="3" headers="dt-8-type dt-8-r1" id="dt-8-r1">Default</th>
+      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-id">OL-53-GHSLE</td>
+      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-id">OL-53-GHSLE</td>
     </tr>
     <tr>
-      <td headers="dt-4-group dt-4-primary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-group dt-4-secondary dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-before dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-details dt-4-after dt-4-r1">Lorem Ipsum</td>
-      <td headers="dt-4-id">OL-53-GHSLE</td>
+      <td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
+      <td headers="dt-8-id">OL-53-GHSLE</td>
     </tr>
   </tbody>
 </table>

package/docs-dev/demos/definition-list/index.html

@@ -1635,6 +1635,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -4496,6 +4511,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -5915,27 +5945,39 @@
 </p>
 <dl class="definition-list definition-list--inline-all">
   <div>
-    <dt>Term:</dt>
+    <dt>Term</dt>
     <dd>Definition 1</dd>
     <dd>Definition 1.1</dd>
     <dd>This is a much longer definition to see how it wraps when inline.</dd>
   </div>
   <div>
-    <dt>A Longer Term:</dt>
+    <dt>A Longer Term</dt>
     <dd>Definition 2</dd>
   </div>
 </dl>
+<h2 class="h2">Inline All (no whitespace test)</h2>
+<p>
+  The <code>--inline-all</code> modifier displays both the definition term (<code>&lt;dt&gt;</code>) and its descriptions (<code>&lt;dd&gt;</code>) on the same line.
+</p>
+<dl class="definition-list definition-list--inline-all">
+  <div>
+    <dt>Term</dt><dd>Definition 1</dd><dd>Definition 1.1</dd><dd>This is a much longer definition to see how it wraps when inline.</dd>
+  </div>
+  <div>
+    <dt>A Longer Term</dt><dd>Definition 2</dd>
+  </div>
+</dl>
 <h2 class="h2">Inline All Compact</h2>
 <p>
   The <code>--compact</code> modifier reduces the margin between items. It can be combined with any other modifier, like <code>--inline-all</code>.
 </p>
 <dl class="definition-list definition-list--inline-all definition-list--compact">
   <div>
-    <dt>Term 1:</dt>
+    <dt>Term 1</dt>
     <dd>This is a longer definition to demonstrate how text wraps in the compact inline layout.</dd>
   </div>
   <div>
-    <dt>A Longer Term:</dt>
+    <dt>A Longer Term</dt>
     <dd>Definition 2</dd>
   </div>
 </dl>
@@ -5945,11 +5987,11 @@
 </p>
 <dl class="definition-list definition-list--separated definition-list--separated-first definition-list--separated-last definition-list--compact">
   <div>
-    <dt>Term 1:</dt>
+    <dt>Term 1</dt>
     <dd>This is a longer definition to demonstrate how text wraps in the compact inline layout.</dd>
   </div>
   <div>
-    <dt>A Longer Term:</dt>
+    <dt>A Longer Term</dt>
     <dd>Definition 2</dd>
   </div>
 </dl>

package/docs-dev/demos/details-group/index.html

@@ -1635,6 +1635,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -4496,6 +4511,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">

package/docs-dev/demos/file-save/index.html

@@ -1635,6 +1635,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">
@@ -4496,6 +4511,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/definition-list/">
+          
+    
+    <span class="nav-tree__text">
+      Definition-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/fill-context/">