RoleModel · Jeremy-Walton · Jan 23, 2026 · Dec 14, 2025 · Jan 18, 2026 · Jan 23, 2026
diff --git a/.storybook/assets/example-layout.html b/.storybook/assets/example-layout.html
diff --git a/.storybook/assets/login-layout.html b/.storybook/assets/login-layout.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en" data-theme-mode="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Example layout for the Optics design system" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics/dist/css/optics.min.css" />
+    <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
+    <title>Optics Login Layout</title>
+    <style>
+      .card {
+        &.card--login {
+          max-inline-size: var(--op-breakpoint-x-small);
+          margin-block-start: var(--op-space-4x-large);
+          margin-inline: auto;
+
+          .card__header svg {
+            margin-inline: auto;
+            max-inline-size: calc(46 * var(--op-size-unit)); /* 184px */
+          }
+        }
+      }
+    </style>
+  </head>
+  <body class="op-page">
+    <div class="op-page__main">
+      <header class="op-page__main-header">
+        <div class="navbar">
+          <a class="navbar__brand" href="/">
+            <img src="optics-logo.svg" width="100" />
+          </a>
+
+          <div class="navbar__content navbar__content--justify-end">
+            <div class="flex gap-sm justify-end items-center">
+              <label class="form-label" for="theme-mode-switch">Dark Mode</label>
+              <div class="switch">
+                <input type="checkbox" id="theme-mode-switch" />
+                <label for="theme-mode-switch"></label>
+              </div>
+            </div>
+
+            <button class="btn" id="copy-template-btn">
+              <span class="icon material-symbols-outlined">content_copy</span>
+              Copy Template
+            </button>
+          </div>
+        </div>
+      </header>
+      <main class="op-page__main-content">
+        <form class="card card--login">
+          <div class="card__header">
+            <div class="flex">
+              <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 347.34">
+                <defs>
+                  <style>
+                    .cls-1 {
+                      fill: light-dark(#0c2227, #ffffff);
+                    }
+
+                    .cls-1,
+                    .cls-2 {
+                      stroke-width: 0px;
+                    }
+
+                    .cls-2 {
+                      fill: light-dark(#2a84f8, #ffffff);
+                    }
+                  </style>
+                </defs>
+                <g id="RM_Logo_-_Final" data-name="RM Logo - Final">
+                  <g id="RM_Logo_-_Color" data-name="RM Logo - Color">
+                    <path
+                      class="cls-2"
+                      d="M0,8.83c0-1.66,1.34-3,3-3h59.13c17.28,0,30.68,4.85,39.61,13.79,7.57,7.57,11.65,18.25,11.65,31.07v.39c0,21.94-11.84,35.73-29.13,42.14l29.99,43.85c1.36,1.99-.06,4.7-2.48,4.7h-27.66c-1,0-1.94-.5-2.5-1.33l-27.64-41.28c-.37-.55-1-.89-1.66-.89h-20.43c-1.11,0-2,.9-2,2v38.49c0,1.66-1.34,3-3,3H3c-1.66,0-3-1.34-3-3V8.83ZM60.19,71.85c14.56,0,22.91-7.77,22.91-19.22v-.39c0-12.82-8.93-19.42-23.5-19.42h-27.71c-1.11,0-2,.9-2,2v35.03c0,1.11.9,2,2,2h28.29Z"
+                    />
+                    <path
+                      class="cls-2"
+                      d="M114.76,90.29v-.39c0-29.9,24.08-54.18,56.5-54.18s56.12,23.88,56.12,53.79v.39c0,29.9-24.08,54.18-56.51,54.18s-56.12-23.88-56.12-53.79ZM198.25,90.29v-.39c0-15.34-11.07-28.74-27.38-28.74s-26.99,13.01-26.99,28.35v.39c0,15.34,11.07,28.74,27.38,28.74s26.99-13.01,26.99-28.35Z"
+                    />
+                    <path
+                      class="cls-2"
+                      d="M237.57,0h23.51c1.66,0,3,1.34,3,3v135.74c0,1.66-1.34,3-3,3h-23.51c-1.66,0-3-1.34-3-3V3c0-1.66,1.34-3,3-3Z"
+                    />
+                    <path
+                      class="cls-2"
+                      d="M271.26,90.29v-.39c0-29.71,21.16-54.18,51.46-54.18,34.76,0,50.68,26.99,50.68,56.51,0,1.52-.08,3.2-.19,4.94-.1,1.58-1.41,2.82-3,2.82h-67.04c-1.33,0-2.31,1.28-1.93,2.55,3.5,11.73,12.44,17.84,24.78,17.84,9.11,0,15.91-2.63,23.29-8.93,1.14-.98,2.83-.98,3.95.02l12.69,11.23c1.25,1.1,1.37,3.02.25,4.26-9.6,10.67-22.96,17.12-40.57,17.12-31.26,0-54.37-21.94-54.37-53.79ZM342.3,81.56c1.25,0,2.21-1.14,1.97-2.37-2.33-11.89-9.89-19.76-21.56-19.76s-19.19,7.68-22.02,19.69c-.3,1.25.67,2.45,1.96,2.45h39.65Z"
+                    />
+                    <path
+                      class="cls-2"
+                      d="M452.15,108.57c-.79,1.19-2.54,1.19-3.33,0l-32.91-49.4c-1.09-1.66-3.67-.89-3.67,1.1v78.48c0,1.66-1.34,3-3,3h-23.32c-1.66,0-3-1.34-3-3V8.83c0-1.66,1.34-3,3-3h27.56c1.04,0,2,.54,2.55,1.42l33.15,53.32c.78,1.26,2.62,1.26,3.4,0l33.15-53.32c.55-.88,1.51-1.42,2.55-1.42h27.56c1.66,0,3,1.34,3,3v129.92c0,1.66-1.34,3-3,3h-23.7c-1.66,0-3-1.34-3-3V59.69c0-1.99-2.58-2.76-3.67-1.1l-33.3,49.98Z"
+                    />
+                    <path
+                      class="cls-2"
+                      d="M527.77,90.29v-.39c0-29.9,24.08-54.18,56.5-54.18s56.12,23.88,56.12,53.79v.39c0,29.9-24.08,54.18-56.51,54.18s-56.12-23.88-56.12-53.79ZM611.26,90.29v-.39c0-15.34-11.07-28.74-27.38-28.74s-26.99,13.01-26.99,28.35v.39c0,15.34,11.07,28.74,27.38,28.74s26.99-13.01,26.99-28.35Z"
+                    />
+                    <path
+                      class="cls-2"
+                      d="M645.44,89.9v-.39c0-34.76,22.72-53.79,47.38-53.79,13.34,0,22.34,5.16,29.04,11.83,1.25,1.25,3.39.33,3.39-1.44V3c0-1.66,1.34-3,3-3h23.51c1.66,0,3,1.34,3,3v135.74c0,1.66-1.34,3-3,3h-23.51c-1.66,0-3-1.34-3-3v-6.36c0-1.81-2.23-2.71-3.45-1.38-6.85,7.5-15.95,12.68-28.97,12.68-24.27,0-47.38-19.03-47.38-53.79ZM725.63,89.9v-.39c0-17.28-11.46-28.74-25.24-28.74s-25.44,11.26-25.44,28.74v.39c0,17.28,11.65,28.74,25.44,28.74s25.24-11.46,25.24-28.74Z"
+                    />
+                    <path
+                      class="cls-2"
+                      d="M760.58,90.29v-.39c0-29.71,21.17-54.18,51.46-54.18,34.76,0,50.68,26.99,50.68,56.51,0,1.52-.08,3.2-.19,4.94-.1,1.58-1.41,2.82-3,2.82h-67.04c-1.33,0-2.31,1.28-1.93,2.55,3.5,11.73,12.44,17.84,24.78,17.84,9.1,0,15.91-2.63,23.29-8.93,1.14-.98,2.83-.98,3.95.02l12.69,11.23c1.25,1.1,1.37,3.02.25,4.26-9.6,10.67-22.96,17.12-40.57,17.12-31.26,0-54.37-21.94-54.37-53.79ZM831.62,81.56c1.25,0,2.21-1.14,1.97-2.37-2.33-11.89-9.89-19.76-21.55-19.76s-19.19,7.68-22.02,19.69c-.3,1.25.67,2.45,1.96,2.45h39.65Z"
+                    />
+                    <path
+                      class="cls-2"
+                      d="M873.49,0h23.51c1.66,0,3,1.34,3,3v135.74c0,1.66-1.34,3-3,3h-23.51c-1.66,0-3-1.34-3-3V3c0-1.66,1.34-3,3-3Z"
+                    />
+                    <g>
+                      <g>
+                        <path
+                          class="cls-1"
+                          d="M77.36,295.43l5.3-7.47c.65-.91,1.9-1.1,2.81-.46,10.44,7.41,21.87,11.62,33.12,11.62,12.04,0,20.78-6.21,20.78-15.92v-.39c0-10.1-11.84-13.98-25.05-17.67-15.73-4.47-33.21-9.9-33.21-28.35v-.39c0-17.28,14.37-28.74,34.17-28.74,11.57,0,24.36,3.82,34.42,9.99.95.58,1.26,1.81.69,2.76l-4.73,7.85c-.58.96-1.82,1.24-2.77.66-8.9-5.38-18.87-8.63-27.98-8.63-11.84,0-19.42,6.21-19.42,14.56v.39c0,9.51,12.43,13.2,25.83,17.28,15.53,4.66,32.23,10.68,32.23,28.74v.39c0,19.03-15.73,30.1-35.73,30.1-13.72,0-28.86-5.13-40-13.54-.87-.66-1.08-1.88-.45-2.77Z"
+                        />
+                        <path
+                          class="cls-1"
+                          d="M159.94,260.1v-.39c0-28.35,22.14-52.43,52.43-52.43s52.23,23.69,52.23,52.04v.39c0,28.35-22.33,52.43-52.62,52.43s-52.04-23.69-52.04-52.04ZM249.26,260.1v-.39c0-21.55-16.12-39.22-37.28-39.22s-36.7,17.67-36.7,38.84v.39c0,21.55,15.92,39.03,37.09,39.03s36.89-17.48,36.89-38.64Z"
+                        />
+                        <path
+                          class="cls-1"
+                          d="M277.2,222.62h-10.78c-1.11,0-2-.9-2-2v-9.01c0-1.11.9-2,2-2h10.78c.55,0,1-.45,1-1v-7.74c0-11.46,3.11-20.19,8.74-25.83,5.05-5.05,12.43-7.77,21.55-7.77,6.31,0,10.73.63,15.1,2.04.83.27,1.41,1.04,1.41,1.91v8.94c0,1.32-1.26,2.27-2.53,1.93-4.24-1.14-7.8-1.82-12.03-1.82-11.65,0-17.48,6.99-17.48,21.36v7.15c0,.55.45,1,1,1h28.84c1.11,0,2,.9,2,2v8.81c0,1.11-.9,2-2,2h-28.65c-.55,0-1,.45-1,1v84.18c0,1.11-.9,2-2,2h-10.95c-1.11,0-2-.9-2-2v-84.18c0-.55-.45-1-1-1Z"
+                        />
+                        <path
+                          class="cls-1"
+                          d="M428.19,209.41h11.66c.87,0,1.63.56,1.9,1.38l25.01,76.33c.3.92,1.6.92,1.9,0l25.58-76.73c.27-.82,1.04-1.37,1.9-1.37h9.54c.86,0,1.62.55,1.9,1.36l25.77,76.75c.31.91,1.6.91,1.9,0l25.02-76.34c.27-.82,1.04-1.38,1.9-1.38h11.26c1.38,0,2.34,1.36,1.89,2.66l-33.94,97.16c-.28.8-1.04,1.34-1.89,1.34h-10.16c-.86,0-1.62-.55-1.89-1.36l-25.58-75.1c-.31-.9-1.58-.9-1.89,0l-25.77,75.1c-.28.81-1.04,1.35-1.89,1.35h-10.35c-.85,0-1.61-.54-1.89-1.34l-33.75-97.16c-.45-1.3.51-2.66,1.89-2.66Z"
+                        />
+                        <path
+                          class="cls-1"
+                          d="M574.12,280.68v-.39c0-21.55,17.48-32.82,42.91-32.82,12.21,0,20.9,1.59,29.41,3.92.64.17,1.27-.3,1.27-.96v-1.79c0-17.86-10.87-27.19-29.71-27.19-11.01,0-19.85,2.52-28.53,6.31-1.06.46-2.3-.05-2.7-1.14l-3.09-8.46c-.36-.99.1-2.09,1.06-2.52,10.47-4.63,20.8-7.78,34.8-7.78s25.24,3.88,32.43,11.07c6.99,6.99,10.49,16.7,10.49,29.51v59.36c0,1.11-.9,2-2,2h-10.75c-1.11,0-2-.9-2-2v-10.18c0-.93-1.14-1.35-1.76-.65-7.1,8.06-18.1,14.97-34.36,14.97-18.84,0-37.48-10.68-37.48-31.26ZM647.9,272.91v-8.56c0-.45-.29-.84-.72-.96-7.29-2.07-16.76-4.07-28.6-4.07-18.64,0-29.32,8.16-29.32,20.19v.39c0,12.62,11.65,20,25.24,20,18.45,0,33.4-11.07,33.4-26.99Z"
+                        />
+                        <path
+                          class="cls-1"
+                          d="M732.1,221.83c0,1.06-.82,1.95-1.88,2-21.14.88-39.06,16.56-39.06,45.98v38c0,1.11-.9,2-2,2h-10.95c-1.11,0-2-.9-2-2v-96.39c0-1.11.9-2,2-2h10.95c1.11,0,2,.9,2,2v19.88c0,1.04,1.39,1.39,1.87.48,7.51-14.08,20.48-24.01,37.03-24.14,1.12,0,2.03.89,2.03,2.01v12.19Z"
+                        />
+                        <path
+                          class="cls-1"
+                          d="M778.54,299.13c13.06,0,22.46-5.05,30.35-12.85.75-.74,1.94-.75,2.72-.05l6.39,5.72c.84.76.89,2.06.11,2.88-9.83,10.41-21.8,17.31-39.96,17.31-27.57,0-50.1-21.17-50.1-52.43,0-29.13,20.39-52.43,48.16-52.43,29.71,0,46.8,23.69,46.8,53.21,0,.95,0,1.99-.07,3.33-.05,1.07-.93,1.91-2,1.91h-76.61c-.6,0-1.08.53-1,1.12,2.56,20.47,17.86,32.27,35.21,32.27ZM806.74,253.69c.6,0,1.07-.52,1-1.11-2.06-17.77-12.52-32.67-31.92-32.67-16.94,0-29.97,13.81-32.48,32.66-.08.6.4,1.13,1,1.13h62.4Z"
+                        />
+                      </g>
+                      <path
+                        class="cls-2"
+                        d="M380.83,170.85v37.51c0,.55.45,1,1,1h26.04c.86,0,1.63.55,1.9,1.37l3.07,9.2c.43,1.3-.53,2.64-1.9,2.64h-28.72c-.55,0-1,.45-1,1v118.17c0,.87-.56,1.63-1.38,1.9l-10.98,3.59c-1.29.42-2.62-.54-2.62-1.9v-121.77c0-.55-.45-1-1-1h-23.32c-1.11,0-2-.9-2-2v-9.2c0-1.11.9-2,2-2h23.32c.55,0,1-.45,1-1v-37.51c0-1.11.9-2,2-2h10.6c1.11,0,2,.9,2,2Z"
+                      />
+                    </g>
+                  </g>
+                </g>
+              </svg>
+            </div>
+          </div>
+          <div class="divider"></div>
+          <div class="card__body">
+            <div class="form-group">
+              <label class="form-label" for="email">Email Address</label>
+              <input type="email" class="form-control" id="email" placeholder="Enter your email address" />
+            </div>
+            <div class="form-group">
+              <label class="form-label" for="password">Password</label>
+              <input type="password" class="form-control" id="password" placeholder="Enter your password" />
+            </div>
+          </div>
+          <div class="divider"></div>
+          <div class="card__footer">
+            <div class="op-split">
+              <a href="#" class="btn btn--primary btn--no-border">Forgot Password?</a>
+              <button type="submit" class="btn btn--primary">
+                <span class="material-symbols-outlined">logout</span>
+                Sign In
+              </button>
+            </div>
+          </div>
+        </form>
+      </main>
+    </div>
+    <script>
+      // Template Copy Button
+      document.getElementById('copy-template-btn').addEventListener('click', () => {
+        navigator.clipboard.writeText(document.documentElement.outerHTML)
+      })
+
+      // Theme Mode Switcher
+      document.getElementById('theme-mode-switch').addEventListener('change', (event) => {
+        const modeOptions = { true: 'dark', false: 'light' }
+        document.documentElement.setAttribute('data-theme-mode', modeOptions[event.target.checked])
+      })
+    </script>
+  </body>
+</html>
diff --git a/.storybook/assets/spinner-layout.html b/.storybook/assets/spinner-layout.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en" data-theme-mode="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Example layout for the Optics design system" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@rolemodel/optics/dist/css/optics.min.css" />
+    <!-- <link rel="stylesheet" href="../src/optics.css" /> Enable this during development to see local changes -->
+    <title>Optics Spinner Layout</title>
+    <style>
+      .spinner-overlay {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-content: center;
+      }
+    </style>
+  </head>
+  <body class="op-page">
+    <div class="op-page__main">
+      <header class="op-page__main-header">
+        <div class="navbar">
+          <a class="navbar__brand" href="/">
+            <img src="optics-logo.svg" width="100" />
+          </a>
+
+          <div class="navbar__content navbar__content--justify-end">
+            <div class="flex gap-sm justify-end items-center">
+              <label class="form-label" for="theme-mode-switch">Dark Mode</label>
+              <div class="switch">
+                <input type="checkbox" id="theme-mode-switch" />
+                <label for="theme-mode-switch"></label>
+              </div>
+            </div>
+
+            <button class="btn" id="copy-template-btn">
+              <span class="icon material-symbols-outlined">content_copy</span>
+              Copy Template
+            </button>
+          </div>
+        </div>
+      </header>
+      <main class="op-page__main-content">
+        <div class="spinner-overlay">
+          <div class="spinner spinner--large" role="status">
+            <span class="sr-only">Loading</span>
+          </div>
+        </div>
+      </main>
+    </div>
+    <script>
+      // Template Copy Button
+      document.getElementById('copy-template-btn').addEventListener('click', () => {
+        navigator.clipboard.writeText(document.documentElement.outerHTML)
+      })
+
+      // Theme Mode Switcher
+      document.getElementById('theme-mode-switch').addEventListener('change', (event) => {
+        const modeOptions = { true: 'dark', false: 'light' }
+        document.documentElement.setAttribute('data-theme-mode', modeOptions[event.target.checked])
+      })
+    </script>
+  </body>
+</html>
diff --git a/.storybook/preview.css b/.storybook/preview.css
@@ -14,14 +14,14 @@
 /* Table of Contents Customization */
 .sbdocs.sbdocs-wrapper {
   .sbdocs.sbdocs-toc--custom {
-    width: 15rem;
-    min-width: 15rem;
     background-color: var(--op-color-background);
     color: var(--op-color-on-background);
     color-scheme: light;
+    inline-size: 15rem;
+    min-inline-size: 15rem;
 
     > nav {
-      width: 15rem;
+      inline-size: 15rem;
     }
   }
 }
@@ -32,11 +32,11 @@
 }
 
 .sbdocs .sb-button-fix button {
-  height: 0;
+  block-size: 0;
 }
 
 /* Allow the "Show Code" button to appear above the footer in examples. */
-.docs-story div:last-child {
+.docs-story div:last-child:has(.docblock-code-toggle) {
   z-index: 1;
 }
 
@@ -67,7 +67,7 @@
   transition: var(--op-transition-accordion-content);
 
   &:hover {
-    height: 15rem;
+    block-size: 15rem;
   }
 }
 
@@ -151,7 +151,7 @@
 }
 
 .text-alignment-demo {
-  width: 400px;
+  inline-size: 400px;
 }
 
 /* Prevent our tag component from interfering with the docs */
@@ -182,7 +182,7 @@
     gap: var(--op-space-x-large);
 
     .card__info-logo {
-      width: calc(var(--op-size-unit) * 24); /* 96px */
+      inline-size: calc(var(--op-size-unit) * 24); /* 96px */
     }
 
     p {
@@ -195,7 +195,7 @@
     flex-direction: column;
 
     .btn {
-      width: 100%;
+      inline-size: 100%;
     }
   }
 }
diff --git a/optics-design-system.code-workspace b/optics-design-system.code-workspace
@@ -28,7 +28,7 @@
   },
   "extensions": {
     "recommendations": [
-      "prettier.prettier-vscode",
+      "esbenp.prettier-vscode",
       "stylelint.vscode-stylelint",
       "tintinweb.graphviz-interactive-preview",
       "unifiedjs.vscode-mdx",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "packageManager": "yarn@4.8.1",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",