fix: add missing shape examples

Author: bre97-web

dev-app/index.html

@@ -123,54 +123,66 @@ <h1>Shape</h1>
             <div>
                 <span class="shape-full"></span>
                 <span class="shape-full-t"></span>
+                <span class="shape-full-r"></span>
+                <span class="shape-full-b"></span>
+                <span class="shape-full-l"></span>
                 <span class="shape-full-tl"></span>
                 <span class="shape-full-tr"></span>
-                <span class="shape-full-b"></span>
                 <span class="shape-full-bl"></span>
                 <span class="shape-full-br"></span>
             </div>
             <div>
                 <span class="shape-extra"></span>
                 <span class="shape-extra-t"></span>
+                <span class="shape-extra-r"></span>
+                <span class="shape-extra-b"></span>
+                <span class="shape-extra-l"></span>
                 <span class="shape-extra-tl"></span>
                 <span class="shape-extra-tr"></span>
-                <span class="shape-extra-b"></span>
                 <span class="shape-extra-bl"></span>
                 <span class="shape-extra-br"></span>
             </div>
             <div>
                 <span class="shape-large"></span>
                 <span class="shape-large-t"></span>
+                <span class="shape-large-r"></span>
+                <span class="shape-large-b"></span>
+                <span class="shape-large-l"></span>
                 <span class="shape-large-tl"></span>
                 <span class="shape-large-tr"></span>
-                <span class="shape-large-b"></span>
                 <span class="shape-large-bl"></span>
                 <span class="shape-large-br"></span>
             </div>
             <div>
                 <span class="shape-medium"></span>
                 <span class="shape-medium-t"></span>
+                <span class="shape-medium-r"></span>
+                <span class="shape-medium-b"></span>
+                <span class="shape-medium-l"></span>
                 <span class="shape-medium-tl"></span>
                 <span class="shape-medium-tr"></span>
-                <span class="shape-medium-b"></span>
                 <span class="shape-medium-bl"></span>
                 <span class="shape-medium-br"></span>
             </div>
             <div>
                 <span class="shape-small"></span>
                 <span class="shape-small-t"></span>
+                <span class="shape-small-r"></span>
+                <span class="shape-small-b"></span>
+                <span class="shape-small-l"></span>
                 <span class="shape-small-tl"></span>
                 <span class="shape-small-tr"></span>
-                <span class="shape-small-b"></span>
                 <span class="shape-small-bl"></span>
                 <span class="shape-small-br"></span>
             </div>
             <div>
                 <span class="shape-extra-small"></span>
                 <span class="shape-extra-small-t"></span>
+                <span class="shape-extra-small-r"></span>
+                <span class="shape-extra-small-b"></span>
+                <span class="shape-extra-small-l"></span>
                 <span class="shape-extra-small-tl"></span>
                 <span class="shape-extra-small-tr"></span>
-                <span class="shape-extra-small-b"></span>
                 <span class="shape-extra-small-bl"></span>
                 <span class="shape-extra-small-br"></span>
             </div>
@@ -258,9 +270,9 @@ <h1>Motion</h1>
         <h1>Window Media Query</h1>
         <div class="[&>span]:w-full [&>span]:h-10 [&>span]:grid [&>span]:items-center [&>span]:justify-center">
             <span class="compact:bg-primary compact:text-on-primary">Compact [max-width: 600px]</span>
-            <span class="medium:bg-primary medium:text-on-primary">Medium [max-width: 8400px]</span>
-            <span class="expanded:bg-primary expanded:text-on-primary">Expanded [max-width: 1200px]</span>
-            <span class="large:bg-primary large:text-on-primary">Large [max-width: 1600px]</span>
+            <span class="medium:bg-primary medium:text-on-primary">Medium [min-width: 600px] [max-width: 840px]</span>
+            <span class="expanded:bg-primary expanded:text-on-primary">Expanded [min-width: 840px] [max-width: 1200px]</span>
+            <span class="large:bg-primary large:text-on-primary">Large [min-width: 1200px] [max-width: 1600px]</span>
             <span class="extra-large:bg-primary extra-large:text-on-primary">ExtraLarge [min-width: 1600px]</span>
         </div>
 
@@ -273,10 +285,8 @@ <h1>Sizing</h1>
             <span class="w-large">w-large</span>
         </div>
 
-        <tokens-list></tokens-list>
     </div>
 
-
     <script
         type="module"
         src="./index.ts"