@rolemodel/optics 2.3.1 → 2.5.0

package/dist/css/optics+feather_icons.css

@@ -7,6 +7,7 @@
 *::after {
   box-sizing: border-box;
 }
+
 /* Remove default margin */
 body,
 h1,
@@ -20,31 +21,37 @@ dl,
 dd {
   margin: 0;
 }
+
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
 ul[role="list"],
 ol[role="list"] {
   list-style: none;
 }
+
 /* Set core root defaults */
 html:focus-within {
   scroll-behavior: smooth;
 }
+
 /* Set core body defaults */
 body {
   min-height: 100vh;
   text-rendering: optimizeSpeed;
   line-height: 1.5;
 }
+
 /* A elements that don't have a class get default styles */
 a:not([class]) {
   text-decoration-skip-ink: auto;
 }
+
 /* Make images easier to work with */
 img,
 picture {
   max-width: 100%;
   display: block;
 }
+
 /* Inherit fonts for inputs and buttons */
 input,
 button,
@@ -52,6 +59,7 @@ textarea,
 select {
   font: inherit;
 }
+
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   html:focus-within {
@@ -66,6 +74,7 @@ select {
     scroll-behavior: auto !important;
   }
 }
+
 /* Fonts */
 /*
 Noto Sans supports:
@@ -73,12 +82,14 @@ Noto Sans supports:
   font-stretch: {anything between 62.5% and 100%}
   font-style: {normal or italic}
 */
+
 /*
   Noto Serif supports:
   font-weight: {anything between 100 and 900}
   font-stretch: {anything between 62.5% and 100%}
   font-style: {normal or italic}
 */
+
 /* Noto Sans and Noto Serif */
 /*
   See all icons at: https://feathericons.com/
@@ -87,6 +98,7 @@ Noto Sans supports:
   The CDN provided selectors did not use a prefix to avoid naming conflicts
   Current version: 4.29.0
 */
+
 /* Feather Icons */
 @font-face {
   font-family: 'feather';
@@ -98,6 +110,7 @@ Noto Sans supports:
     /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
       url('https://at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.svg?t=1501828829848#feather') format('svg'); /* iOS 4.1- */
 }
+
 .fi {
   font-family: 'feather' !important;
   font-size: var(--__op-icon-font-size);
@@ -105,690 +118,919 @@ Noto Sans supports:
   -moz-osx-font-smoothing: grayscale;
   font-style: normal;
 }
+
 .fi-alert-octagon:before {
   content: '\e81b';
 }
+
 .fi-alert-circle:before {
   content: '\e81c';
 }
+
 .fi-activity:before {
   content: '\e81d';
 }
+
 .fi-alert-triangle:before {
   content: '\e81e';
 }
+
 .fi-align-center:before {
   content: '\e81f';
 }
+
 .fi-airplay:before {
   content: '\e820';
 }
+
 .fi-align-justify:before {
   content: '\e821';
 }
+
 .fi-align-left:before {
   content: '\e822';
 }
+
 .fi-align-right:before {
   content: '\e823';
 }
+
 .fi-arrow-down-left:before {
   content: '\e824';
 }
+
 .fi-arrow-down-right:before {
   content: '\e825';
 }
+
 .fi-anchor:before {
   content: '\e826';
 }
+
 .fi-aperture:before {
   content: '\e827';
 }
+
 .fi-arrow-left:before {
   content: '\e828';
 }
+
 .fi-arrow-right:before {
   content: '\e829';
 }
+
 .fi-arrow-down:before {
   content: '\e82a';
 }
+
 .fi-arrow-up-left:before {
   content: '\e82b';
 }
+
 .fi-arrow-up-right:before {
   content: '\e82c';
 }
+
 .fi-arrow-up:before {
   content: '\e82d';
 }
+
 .fi-award:before {
   content: '\e82e';
 }
+
 .fi-bar-chart:before {
   content: '\e82f';
 }
+
 .fi-at-sign:before {
   content: '\e830';
 }
+
 .fi-bar-chart-:before {
   content: '\e831';
 }
+
 .fi-battery-charging:before {
   content: '\e832';
 }
+
 .fi-bell-off:before {
   content: '\e833';
 }
+
 .fi-battery:before {
   content: '\e834';
 }
+
 .fi-bluetooth:before {
   content: '\e835';
 }
+
 .fi-bell:before {
   content: '\e836';
 }
+
 .fi-book:before {
   content: '\e837';
 }
+
 .fi-briefcase:before {
   content: '\e838';
 }
+
 .fi-camera-off:before {
   content: '\e839';
 }
+
 .fi-calendar:before {
   content: '\e83a';
 }
+
 .fi-bookmark:before {
   content: '\e83b';
 }
+
 .fi-box:before {
   content: '\e83c';
 }
+
 .fi-camera:before {
   content: '\e83d';
 }
+
 .fi-check-circle:before {
   content: '\e83e';
 }
+
 .fi-check:before {
   content: '\e83f';
 }
+
 .fi-check-square:before {
   content: '\e840';
 }
+
 .fi-cast:before {
   content: '\e841';
 }
+
 .fi-chevron-down:before {
   content: '\e842';
 }
+
 .fi-chevron-left:before {
   content: '\e843';
 }
+
 .fi-chevron-right:before {
   content: '\e844';
 }
+
 .fi-chevron-up:before {
   content: '\e845';
 }
+
 .fi-chevrons-down:before {
   content: '\e846';
 }
+
 .fi-chevrons-right:before {
   content: '\e847';
 }
+
 .fi-chevrons-up:before {
   content: '\e848';
 }
+
 .fi-chevrons-left:before {
   content: '\e849';
 }
+
 .fi-circle:before {
   content: '\e84a';
 }
+
 .fi-clipboard:before {
   content: '\e84b';
 }
+
 .fi-chrome:before {
   content: '\e84c';
 }
+
 .fi-clock:before {
   content: '\e84d';
 }
+
 .fi-cloud-lightning:before {
   content: '\e84e';
 }
+
 .fi-cloud-drizzle:before {
   content: '\e84f';
 }
+
 .fi-cloud-rain:before {
   content: '\e850';
 }
+
 .fi-cloud-off:before {
   content: '\e851';
 }
+
 .fi-codepen:before {
   content: '\e852';
 }
+
 .fi-cloud-snow:before {
   content: '\e853';
 }
+
 .fi-compass:before {
   content: '\e854';
 }
+
 .fi-copy:before {
   content: '\e855';
 }
+
 .fi-corner-down-right:before {
   content: '\e856';
 }
+
 .fi-corner-down-left:before {
   content: '\e857';
 }
+
 .fi-corner-left-down:before {
   content: '\e858';
 }
+
 .fi-corner-left-up:before {
   content: '\e859';
 }
+
 .fi-corner-up-left:before {
   content: '\e85a';
 }
+
 .fi-corner-up-right:before {
   content: '\e85b';
 }
+
 .fi-corner-right-down:before {
   content: '\e85c';
 }
+
 .fi-corner-right-up:before {
   content: '\e85d';
 }
+
 .fi-cpu:before {
   content: '\e85e';
 }
+
 .fi-credit-card:before {
   content: '\e85f';
 }
+
 .fi-crosshair:before {
   content: '\e860';
 }
+
 .fi-disc:before {
   content: '\e861';
 }
+
 .fi-delete:before {
   content: '\e862';
 }
+
 .fi-download-cloud:before {
   content: '\e863';
 }
+
 .fi-download:before {
   content: '\e864';
 }
+
 .fi-droplet:before {
   content: '\e865';
 }
+
 .fi-edit-:before {
   content: '\e866';
 }
+
 .fi-edit:before {
   content: '\e867';
 }
+
 .fi-edit-1:before {
   content: '\e868';
 }
+
 .fi-external-link:before {
   content: '\e869';
 }
+
 .fi-eye:before {
   content: '\e86a';
 }
+
 .fi-feather:before {
   content: '\e86b';
 }
+
 .fi-facebook:before {
   content: '\e86c';
 }
+
 .fi-file-minus:before {
   content: '\e86d';
 }
+
 .fi-eye-off:before {
   content: '\e86e';
 }
+
 .fi-fast-forward:before {
   content: '\e86f';
 }
+
 .fi-file-text:before {
   content: '\e870';
 }
+
 .fi-film:before {
   content: '\e871';
 }
+
 .fi-file:before {
   content: '\e872';
 }
+
 .fi-file-plus:before {
   content: '\e873';
 }
+
 .fi-folder:before {
   content: '\e874';
 }
+
 .fi-filter:before {
   content: '\e875';
 }
+
 .fi-flag:before {
   content: '\e876';
 }
+
 .fi-globe:before {
   content: '\e877';
 }
+
 .fi-grid:before {
   content: '\e878';
 }
+
 .fi-heart:before {
   content: '\e879';
 }
+
 .fi-home:before {
   content: '\e87a';
 }
+
 .fi-github:before {
   content: '\e87b';
 }
+
 .fi-image:before {
   content: '\e87c';
 }
+
 .fi-inbox:before {
   content: '\e87d';
 }
+
 .fi-layers:before {
   content: '\e87e';
 }
+
 .fi-info:before {
   content: '\e87f';
 }
+
 .fi-instagram:before {
   content: '\e880';
 }
+
 .fi-layout:before {
   content: '\e881';
 }
+
 .fi-link-:before {
   content: '\e882';
 }
+
 .fi-life-buoy:before {
   content: '\e883';
 }
+
 .fi-link:before {
   content: '\e884';
 }
+
 .fi-log-in:before {
   content: '\e885';
 }
+
 .fi-list:before {
   content: '\e886';
 }
+
 .fi-lock:before {
   content: '\e887';
 }
+
 .fi-log-out:before {
   content: '\e888';
 }
+
 .fi-loader:before {
   content: '\e889';
 }
+
 .fi-mail:before {
   content: '\e88a';
 }
+
 .fi-maximize-:before {
   content: '\e88b';
 }
+
 .fi-map:before {
   content: '\e88c';
 }
+
 .fi-maximize:before {
   content: '\e88d';
 }
+
 .fi-map-pin:before {
   content: '\e88e';
 }
+
 .fi-menu:before {
   content: '\e88f';
 }
+
 .fi-message-circle:before {
   content: '\e890';
 }
+
 .fi-message-square:before {
   content: '\e891';
 }
+
 .fi-minimize-:before {
   content: '\e892';
 }
+
 .fi-mic-off:before {
   content: '\e893';
 }
+
 .fi-minus-circle:before {
   content: '\e894';
 }
+
 .fi-mic:before {
   content: '\e895';
 }
+
 .fi-minus-square:before {
   content: '\e896';
 }
+
 .fi-minus:before {
   content: '\e897';
 }
+
 .fi-moon:before {
   content: '\e898';
 }
+
 .fi-monitor:before {
   content: '\e899';
 }
+
 .fi-more-vertical:before {
   content: '\e89a';
 }
+
 .fi-more-horizontal:before {
   content: '\e89b';
 }
+
 .fi-move:before {
   content: '\e89c';
 }
+
 .fi-music:before {
   content: '\e89d';
 }
+
 .fi-navigation-:before {
   content: '\e89e';
 }
+
 .fi-navigation:before {
   content: '\e89f';
 }
+
 .fi-octagon:before {
   content: '\e8a0';
 }
+
 .fi-package:before {
   content: '\e8a1';
 }
+
 .fi-pause-circle:before {
   content: '\e8a2';
 }
+
 .fi-pause:before {
   content: '\e8a3';
 }
+
 .fi-percent:before {
   content: '\e8a4';
 }
+
 .fi-phone-call:before {
   content: '\e8a5';
 }
+
 .fi-phone-forwarded:before {
   content: '\e8a6';
 }
+
 .fi-phone-missed:before {
   content: '\e8a7';
 }
+
 .fi-phone-off:before {
   content: '\e8a8';
 }
+
 .fi-phone-incoming:before {
   content: '\e8a9';
 }
+
 .fi-phone:before {
   content: '\e8aa';
 }
+
 .fi-phone-outgoing:before {
   content: '\e8ab';
 }
+
 .fi-pie-chart:before {
   content: '\e8ac';
 }
+
 .fi-play-circle:before {
   content: '\e8ad';
 }
+
 .fi-play:before {
   content: '\e8ae';
 }
+
 .fi-plus-square:before {
   content: '\e8af';
 }
+
 .fi-plus-circle:before {
   content: '\e8b0';
 }
+
 .fi-plus:before {
   content: '\e8b1';
 }
+
 .fi-pocket:before {
   content: '\e8b2';
 }
+
 .fi-printer:before {
   content: '\e8b3';
 }
+
 .fi-power:before {
   content: '\e8b4';
 }
+
 .fi-radio:before {
   content: '\e8b5';
 }
+
 .fi-repeat:before {
   content: '\e8b6';
 }
+
 .fi-refresh-ccw:before {
   content: '\e8b7';
 }
+
 .fi-rewind:before {
   content: '\e8b8';
 }
+
 .fi-rotate-ccw:before {
   content: '\e8b9';
 }
+
 .fi-refresh-cw:before {
   content: '\e8ba';
 }
+
 .fi-rotate-cw:before {
   content: '\e8bb';
 }
+
 .fi-save:before {
   content: '\e8bc';
 }
+
 .fi-search:before {
   content: '\e8bd';
 }
+
 .fi-server:before {
   content: '\e8be';
 }
+
 .fi-scissors:before {
   content: '\e8bf';
 }
+
 .fi-share-:before {
   content: '\e8c0';
 }
+
 .fi-share:before {
   content: '\e8c1';
 }
+
 .fi-shield:before {
   content: '\e8c2';
 }
+
 .fi-settings:before {
   content: '\e8c3';
 }
+
 .fi-skip-back:before {
   content: '\e8c4';
 }
+
 .fi-shuffle:before {
   content: '\e8c5';
 }
+
 .fi-sidebar:before {
   content: '\e8c6';
 }
+
 .fi-skip-forward:before {
   content: '\e8c7';
 }
+
 .fi-slack:before {
   content: '\e8c8';
 }
+
 .fi-slash:before {
   content: '\e8c9';
 }
+
 .fi-smartphone:before {
   content: '\e8ca';
 }
+
 .fi-square:before {
   content: '\e8cb';
 }
+
 .fi-speaker:before {
   content: '\e8cc';
 }
+
 .fi-star:before {
   content: '\e8cd';
 }
+
 .fi-stop-circle:before {
   content: '\e8ce';
 }
+
 .fi-sun:before {
   content: '\e8cf';
 }
+
 .fi-sunrise:before {
   content: '\e8d0';
 }
+
 .fi-tablet:before {
   content: '\e8d1';
 }
+
 .fi-tag:before {
   content: '\e8d2';
 }
+
 .fi-sunset:before {
   content: '\e8d3';
 }
+
 .fi-target:before {
   content: '\e8d4';
 }
+
 .fi-thermometer:before {
   content: '\e8d5';
 }
+
 .fi-thumbs-up:before {
   content: '\e8d6';
 }
+
 .fi-thumbs-down:before {
   content: '\e8d7';
 }
+
 .fi-toggle-left:before {
   content: '\e8d8';
 }
+
 .fi-toggle-right:before {
   content: '\e8d9';
 }
+
 .fi-trash-:before {
   content: '\e8da';
 }
+
 .fi-trash:before {
   content: '\e8db';
 }
+
 .fi-trending-up:before {
   content: '\e8dc';
 }
+
 .fi-trending-down:before {
   content: '\e8dd';
 }
+
 .fi-triangle:before {
   content: '\e8de';
 }
+
 .fi-type:before {
   content: '\e8df';
 }
+
 .fi-twitter:before {
   content: '\e8e0';
 }
+
 .fi-upload:before {
   content: '\e8e1';
 }
+
 .fi-umbrella:before {
   content: '\e8e2';
 }
+
 .fi-upload-cloud:before {
   content: '\e8e3';
 }
+
 .fi-unlock:before {
   content: '\e8e4';
 }
+
 .fi-user-check:before {
   content: '\e8e5';
 }
+
 .fi-user-minus:before {
   content: '\e8e6';
 }
+
 .fi-user-plus:before {
   content: '\e8e7';
 }
+
 .fi-user-x:before {
   content: '\e8e8';
 }
+
 .fi-user:before {
   content: '\e8e9';
 }
+
 .fi-users:before {
   content: '\e8ea';
 }
+
 .fi-video-off:before {
   content: '\e8eb';
 }
+
 .fi-video:before {
   content: '\e8ec';
 }
+
 .fi-voicemail:before {
   content: '\e8ed';
 }
+
 .fi-volume-x:before {
   content: '\e8ee';
 }
+
 .fi-volume-:before {
   content: '\e8ef';
 }
+
 .fi-volume-1:before {
   content: '\e8f0';
 }
+
 .fi-volume:before {
   content: '\e8f1';
 }
+
 .fi-watch:before {
   content: '\e8f2';
 }
+
 .fi-wifi:before {
   content: '\e8f3';
 }
+
 .fi-x-square:before {
   content: '\e8f4';
 }
+
 .fi-wind:before {
   content: '\e8f5';
 }
+
 .fi-x:before {
   content: '\e8f6';
 }
+
 .fi-x-circle:before {
   content: '\e8f7';
 }
+
 .fi-zap:before {
   content: '\e8f8';
 }
+
 .fi-zoom-in:before {
   content: '\e8f9';
 }
+
 .fi-zoom-out:before {
   content: '\e8fa';
 }
+
 .fi-command:before {
   content: '\e8fb';
 }
+
 .fi-cloud:before {
   content: '\e8fc';
 }
+
 .fi-hash:before {
   content: '\e8fd';
 }
+
 .fi-headphones:before {
   content: '\e8fe';
 }
+
 /* Tokens */
 :root {
   /* Color HSLs
@@ -1109,6 +1351,7 @@ Noto Sans supports:
     var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
 }
+
 /* Animations */
 @keyframes rm-slide-in-out-flash {
   /*
@@ -2588,10 +2831,12 @@ Noto Sans supports:
   --op-color-on-background: var(--op-color-neutral-on-plus-eight);
   --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
 }
+
 /* Force Light Mode */
 :root[data-theme-mode='light'] {
   color-scheme: only light;
 }
+
 /* Force Dark Mode */
 :root[data-theme-mode='dark'] {
   color-scheme: only dark;
@@ -2611,6 +2856,7 @@ Noto Sans supports:
   */
   --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
 }
+
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme-mode='light']) {
     /**
@@ -2629,13 +2875,16 @@ Noto Sans supports:
     --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
   }
 }
+
 /* Base styles and utilities */
 /* After a reset, introduce base element styles specific to this system */
+
 html {
   overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
   font-family: var(--op-font-family);
   font-size: 62.5%; /* 1rem = 10px */
 }
+
 body {
   overflow: auto;
   background: var(--op-color-background);
@@ -2643,14 +2892,17 @@ body {
   color: var(--op-color-on-background);
   font-size: var(--op-font-medium);
 }
+
 button {
   background: none;
   cursor: pointer;
 }
+
 button,
 input[type='submit'] {
   border: 0;
 }
+
 label {
   display: inline-block;
 
@@ -2658,9 +2910,11 @@ label {
     cursor: pointer;
   }
 }
+
 a {
   color: var(--op-color-primary-original);
 }
+
 blockquote,
 dl,
 dd,
@@ -2674,6 +2928,7 @@ figure,
 pre {
   margin: 0;
 }
+
 h1,
 h2,
 h3,
@@ -2683,28 +2938,36 @@ h6 {
   font-weight: var(--op-font-weight-normal);
   margin-block: 0 var(--op-space-small);
 }
+
 h1 {
   font-size: var(--op-font-3x-large);
 }
+
 h2 {
   font-size: var(--op-font-2x-large);
 }
+
 h3 {
   font-size: var(--op-font-large);
 }
+
 h4 {
   font-size: var(--op-font-medium);
 }
+
 h5 {
   font-size: var(--op-font-small);
 }
+
 h6 {
   font-size: var(--op-font-x-small);
 }
+
 p {
   font-size: var(--op-font-medium);
   margin-block-end: var(--op-space-small);
 }
+
 small {
   font-size: var(--op-font-small);
 }
@@ -2714,11 +2977,13 @@ small {
   grid-template-columns: auto 1fr auto;
   inline-size: 100%;
 }
+
 .app-body {
   display: flex;
   overflow: auto;
   flex-direction: column;
 }
+
 .app__header {
   position: sticky;
   z-index: var(--op-z-index-header);
@@ -2726,6 +2991,7 @@ small {
   flex-shrink: 0;
   inset-block-start: 0;
 }
+
 .app__content {
   flex-grow: 1;
   padding: 0 var(--op-space-large);
@@ -2733,12 +2999,14 @@ small {
   inline-size: 100%;
   max-inline-size: var(--op-breakpoint-medium);
 }
+
 .app__content-no-margin {
   flex-grow: 1;
   padding: 0 var(--op-space-large);
   inline-size: 100%;
   overflow-y: auto;
 }
+
 .app__footer {
   position: sticky;
   z-index: var(--op-z-index-footer);
@@ -2746,6 +3014,7 @@ small {
   flex-shrink: 0;
   inset-block-end: 0;
 }
+
 /*
   <html lang='en'>
     <head>...</head>
@@ -2760,6 +3029,7 @@ small {
     </body>
   </html>
 */
+
 :root:has(.op-page) {
   /* Reset existing Optics layout */
   overflow: unset;
@@ -2777,6 +3047,7 @@ small {
     min-block-size: 100%;
   }
 }
+
 .op-page {
   display: grid;
   grid-template-areas: 'sidebar-left main sidebar-right';
@@ -2851,6 +3122,7 @@ small {
   }
 }
 /* Container Properties */
+
 .container {
   inline-size: 100%;
   margin-block: 0;
@@ -2859,299 +3131,408 @@ small {
   padding-block: 0;
   padding-inline: var(--op-space-large);
 }
+
 .container--sm {
   max-inline-size: var(--op-breakpoint-small);
 }
+
 .container--md-padding {
   padding: 0 var(--op-space-medium);
 }
+
 .container--sm-padding {
   padding: 0 var(--op-space-small);
 }
+
 .container--xs {
   max-inline-size: var(--op-breakpoint-x-small);
 }
+
 /* Width Properties */
+
 .full-width {
   inline-size: 100%;
 }
+
 .half-width {
   inline-size: 50%;
 }
+
 .four-fifths-width {
   inline-size: calc(100% * 4 / 5);
 }
+
 .three-fifths-width {
   inline-size: calc(100% * 3 / 5);
 }
+
 .two-fifths-width {
   inline-size: calc(100% * 2 / 5);
 }
+
 .one-fifth-width {
   inline-size: calc(100% * 1 / 5);
 }
+
 .three-quarters-width {
   inline-size: calc(100% * 3 / 4);
 }
+
 .one-quarter-width {
   inline-size: calc(100% * 1 / 4);
 }
+
 .two-thirds-width {
   inline-size: calc(100% * 2 / 3);
 }
+
 .one-third-width {
   inline-size: calc(100% * 1 / 3);
 }
+
 /* Flex Properties */
+
 .flex {
   display: flex;
 }
+
 .flex-col {
   flex-direction: column;
 }
+
 .flex-row {
   flex-direction: row;
 }
+
 .flex-wrap {
   flex-wrap: wrap;
 }
+
 .flex-no-wrap {
   flex-wrap: nowrap;
 }
+
 .flex-grow-1 {
   flex-grow: 1;
 }
+
 /* Gap Properties */
+.gap-none {
+  gap: 0;
+
+  --op-gap: 0;
+}
+
 .gap-xxs {
   gap: var(--op-space-2x-small);
 
   --op-gap: var(--op-space-2x-small);
 }
+
 .gap-xs {
   gap: var(--op-space-x-small);
 
   --op-gap: var(--op-space-x-small);
 }
+
 .gap-sm {
   gap: var(--op-space-small);
 
   --op-gap: var(--op-space-small);
 }
+
 .gap-md {
   gap: var(--op-space-medium);
 
   --op-gap: var(--op-space-medium);
 }
+
 .gap-lg {
   gap: var(--op-space-large);
 
   --op-gap: var(--op-space-large);
 }
+
 .gap-xl {
   gap: var(--op-space-x-large);
 
   --op-gap: var(--op-space-x-large);
 }
+
 /* Justify Content */
+
 .justify-start {
   justify-content: flex-start;
 }
+
 .justify-center {
   justify-content: center;
 }
+
 .justify-end {
   justify-content: flex-end;
 }
+
 .justify-between {
   justify-content: space-between;
 }
+
 .justify-around {
   justify-content: space-around;
 }
+
 /* Align Items */
+
 .items-stretch {
   align-items: stretch;
 }
+
 .items-start {
   align-items: flex-start;
 }
+
 .items-center {
   align-items: center;
 }
+
 .items-end {
   align-items: flex-end;
 }
+
 .items-baseline {
   align-items: baseline;
 }
+
 /* Align Self */
+
 .self-auto {
   align-self: auto;
 }
+
 .self-start {
   align-self: flex-start;
 }
+
 .self-center {
   align-self: center;
 }
+
 .self-end {
   align-self: flex-end;
 }
+
 .self-stretch {
   align-self: stretch;
 }
+
 .self-baseline {
   align-self: baseline;
 }
+
 /* Text Alignment */
+
 .text-left {
   text-align: start;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-right {
   text-align: end;
 }
+
 .text-justify {
   text-align: justify;
 }
+
 /* Box Margin */
+
 .margin-xl {
   margin: var(--op-space-x-large);
 }
+
 .margin-lg {
   margin: var(--op-space-large);
 }
+
 .margin-md {
   margin: var(--op-space-medium);
 }
+
 .margin-sm {
   margin: var(--op-space-small);
 }
+
 .margin-xs {
   margin: var(--op-space-x-small);
 }
+
 .margin-none {
   margin: 0;
 }
+
 .margin-auto {
   margin: auto;
 }
+
 /* Vertical Margin */
+
 .margin-y-xl {
   margin-block: var(--op-space-x-large);
 }
+
 .margin-y-lg {
   margin-block: var(--op-space-large);
 }
+
 .margin-y-md {
   margin-block: var(--op-space-medium);
 }
+
 .margin-y-sm {
   margin-block: var(--op-space-small);
 }
+
 .margin-y-xs {
   margin-block: var(--op-space-x-small);
 }
+
 .margin-y-none {
   margin-block: 0;
 }
+
 /* Horizontal Margin */
+
 .margin-x-xl {
   margin-inline: var(--op-space-x-large);
 }
+
 .margin-x-lg {
   margin-inline: var(--op-space-large);
 }
+
 .margin-x-md {
   margin-inline: var(--op-space-medium);
 }
+
 .margin-x-sm {
   margin-inline: var(--op-space-small);
 }
+
 .margin-x-xs {
   margin-inline: var(--op-space-x-small);
 }
+
 .margin-x-none {
   margin-inline: 0;
 }
+
 /* Top Margin */
+
 .margin-top-xl {
   margin-block-start: var(--op-space-x-large);
 }
+
 .margin-top-lg {
   margin-block-start: var(--op-space-large);
 }
+
 .margin-top-md {
   margin-block-start: var(--op-space-medium);
 }
+
 .margin-top-sm {
   margin-block-start: var(--op-space-small);
 }
+
 .margin-top-xs {
   margin-block-start: var(--op-space-x-small);
 }
+
 .margin-top-none {
   margin-block-start: 0;
 }
+
 /* Bottom Margin */
+
 .margin-bottom-xl {
   margin-block-end: var(--op-space-x-large);
 }
+
 .margin-bottom-lg {
   margin-block-end: var(--op-space-large);
 }
+
 .margin-bottom-md {
   margin-block-end: var(--op-space-medium);
 }
+
 .margin-bottom-sm {
   margin-block-end: var(--op-space-small);
 }
+
 .margin-bottom-xs {
   margin-block-end: var(--op-space-x-small);
 }
+
 .margin-bottom-none {
   margin-block-end: 0;
 }
+
 /* Right Margin */
+
 .margin-right-xl {
   margin-inline-end: var(--op-space-x-large);
 }
+
 .margin-right-lg {
   margin-inline-end: var(--op-space-large);
 }
+
 .margin-right-md {
   margin-inline-end: var(--op-space-medium);
 }
+
 .margin-right-sm {
   margin-inline-end: var(--op-space-small);
 }
+
 .margin-right-xs {
   margin-inline-end: var(--op-space-x-small);
 }
+
 .margin-right-none {
   margin-inline-start: 0;
 }
+
 /* Left Margin */
+
 .margin-left-xl {
   margin-inline-start: var(--op-space-x-large);
 }
+
 .margin-left-lg {
   margin-inline-start: var(--op-space-large);
 }
+
 .margin-left-md {
   margin-inline-start: var(--op-space-medium);
 }
+
 .margin-left-sm {
   margin-inline-start: var(--op-space-small);
 }
+
 .margin-left-xs {
   margin-inline-start: var(--op-space-x-small);
 }
+
 .margin-left-none {
   margin-inline-start: 0;
 }
+
 /*
   Accessibility
   Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
@@ -3165,34 +3546,183 @@ small {
   clip: rect(1px, 1px, 1px, 1px);
   inline-size: 1px;
 }
+
 /* Advanced Layout Utilities */
+
 /* Equivalent to .flex.flex-col.gap-md */
 .op-stack {
   display: flex;
   flex-direction: column;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
 }
-:where(.op-stack) {
-  gap: var(--op-space-medium);
-}
+
 /* Equivalent to .flex.flex-wrap.items-center.gap-md */
 .op-cluster {
   display: flex;
   flex-wrap: wrap;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
-:where(.op-cluster) {
-  align-items: center;
-  gap: var(--op-space-medium);
-}
+
 /* Equivalent to .flex.flex-wrap.items-center.justify-between.gap-md */
 .op-split {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
 }
-:where(.op-split) {
-  align-items: center;
-  gap: var(--op-space-medium);
+
+/*
+  side by side layout with a small area and a large area
+  similar to .flex with a .flex-grow-1 within it, but with a more semantic name and wrap handling.
+
+  |[] [         ]|
+  |[         ] []| with end
+*/
+.op-flank {
+  display: flex;
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-space-medium);
+  }
+
+  /* Small area */
+  &:not(.op-flank--end) > :first-child,
+  &.op-flank--end > :last-child {
+    flex-basis: auto;
+    flex-grow: 1;
+  }
+
+  /* Large area */
+  &:not(.op-flank--end) > :last-child,
+  &.op-flank--end > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+  }
+}
+
+/* Grid Layout */
+.op-grid {
+  --_op-grid-min-column-size: var(--op-space-4x-large);
+  --_op-grid-max-column-size: 0px;
+
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--_op-grid-min-column-size), var(--_op-grid-max-column-size)), 1fr)
+  );
+  margin-block: 0;
+  margin-inline: 0;
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-medium);
+  }
+
+  &.op-grid--2-column {
+    --_op-grid-max-column-size: calc(100% / 3);
+  }
+
+  &.op-grid--3-column {
+    --_op-grid-max-column-size: calc(100% / 4);
+  }
+
+  &.op-grid--4-column {
+    --_op-grid-max-column-size: calc(100% / 5);
+  }
+
+  &.op-grid--5-column {
+    --_op-grid-max-column-size: calc(100% / 6);
+  }
+
+  &.op-grid--6-column {
+    --_op-grid-max-column-size: calc(100% / 7);
+  }
+}
+
+/* Frame */
+@property --_op-frame-inline-size {
+  inherits: true;
+  initial-value: 100%;
+  syntax: '<length> | <percentage>';
 }
+
+.op-frame {
+  display: flex;
+  overflow: hidden;
+  border-radius: inherit;
+  aspect-ratio: 1 / 1;
+  margin-block: 0;
+  margin-inline: 0;
+  max-inline-size: var(--_op-frame-inline-size);
+
+  :where(&) {
+    align-items: center;
+    justify-content: center;
+  }
+
+  > img,
+  > video {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  /* aspect ratio */
+
+  &.op-frame--square {
+    aspect-ratio: 1 / 1;
+  }
+
+  &.op-frame--landscape {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.op-frame--portrait {
+    aspect-ratio: 9 / 16;
+  }
+
+  &.op-frame--4-3 {
+    aspect-ratio: 4 / 3;
+  }
+
+  &.op-frame--3-4 {
+    aspect-ratio: 3 / 4;
+  }
+
+  &.op-frame--3-2 {
+    aspect-ratio: 3 / 2;
+  }
+
+  &.op-frame--2-3 {
+    aspect-ratio: 2 / 3;
+  }
+}
+
 /* Components */
 .accordion {
   /* Public API (customizable component options) */
@@ -3239,7 +3769,7 @@ small {
   }
 
   &[open] {
-    summary .accordion__marker {
+    > summary .accordion__marker {
       rotate: 0.25turn;
     }
 
@@ -3951,6 +4481,7 @@ small {
     }
   }
 }
+
 .btn-group-toolbar {
   display: flex;
   flex-wrap: wrap;
@@ -4064,6 +4595,7 @@ small {
     }
   }
 }
+
 /* stylelint-disable no-descending-specificity */
 .confirm-dialog {
   /* Public API (customizable component options) */
@@ -4251,6 +4783,7 @@ small {
     /* stylelint-enable selector-no-vendor-prefix */
   }
 }
+
 /* Radio or Checkbox Form Control */
 .form-control:is([type='radio'], [type='checkbox']) {
   /* Public API (customizable component options) */
@@ -4269,6 +4802,7 @@ small {
     align-self: center;
   }
 }
+
 /* Any Form Control that is not a radio or checkbox */
 .form-control:not([type='radio'], [type='checkbox']) {
   /* Public API (customizable component options) */
@@ -4331,6 +4865,7 @@ small {
     }
   }
 }
+
 /* Color Form Control */
 .form-control[type='color'] {
   padding: var(--op-space-2x-small);
@@ -4345,6 +4880,7 @@ small {
     border-radius: var(--op-radius-medium);
   }
 }
+
 /* File Form Control */
 .form-control[type='file'] {
   padding-block: 0;
@@ -4380,6 +4916,7 @@ small {
     --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
   }
 }
+
 select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
   appearance: none;
   background-image: var(--op-encoded-images-dropdown-arrow);
@@ -4391,14 +4928,17 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
   cursor: pointer;
   padding-inline-end: var(--op-space-3x-large);
 }
+
 select.form-control[multiple] {
   min-block-size: calc(2 * var(--__op-form-control-height));
 }
+
 textarea.form-control:not([type='radio'], [type='checkbox']) {
   block-size: calc(2 * var(--__op-form-control-height));
   max-inline-size: 100%;
   min-block-size: var(--__op-form-control-height);
 }
+
 .form-label {
   color: var(--op-color-on-background);
   font-size: var(--op-font-x-small);
@@ -4406,16 +4946,19 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   letter-spacing: var(--op-letter-spacing-label);
   line-height: var(--op-line-height-base);
 }
+
 .form-error {
   color: var(--op-color-alerts-danger-base);
   font-size: var(--op-font-x-small);
   inline-size: fit-content;
 }
+
 .form-hint {
   display: block;
   font-size: var(--op-font-small);
   font-style: italic;
 }
+
 .form-error-summary {
   padding: var(--op-space-large);
   border-radius: var(--op-radius-large);
@@ -4432,6 +4975,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     margin-block-end: 0;
   }
 }
+
 .form-group {
   display: grid;
   align-content: baseline;
@@ -4462,6 +5006,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     }
   }
 }
+
 .form-group--inline {
   align-items: center;
 
@@ -4483,6 +5028,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   }
   /* stylelint-enable no-descending-specificity */
 }
+
 .form-group--error {
   /* stylelint-disable no-descending-specificity */
   .form-control {
@@ -4572,6 +5118,13 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   --_op-icon-optical-size-large: 40;
   --_op-icon-optical-size-x-large: 48;
 
+  /* SVG (.icon--svg) */
+  --_op-icon-stroke-width-light: 1;
+  --_op-icon-stroke-width-normal: 1.5;
+  --_op-icon-stroke-width-semi-bold: 2;
+  --_op-icon-stroke-width-bold: 2.5;
+  --_op-icon-svg-opacity-low-emphasis: 0.6;
+
   /* Private API (component option defaults) */
   --__op-icon-weight: var(--_op-icon-weight-normal);
   --__op-icon-fill: var(--_op-icon-fill-outlined);
@@ -4599,18 +5152,22 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   /* Weight Modifiers */
   &.icon--weight-light {
     --__op-icon-weight: var(--_op-icon-weight-light);
+    --__op-icon-stroke-width: var(--_op-icon-stroke-width-light);
   }
 
   &.icon--weight-normal {
     --__op-icon-weight: var(--_op-icon-weight-normal);
+    --__op-icon-stroke-width: var(--_op-icon-stroke-width-normal);
   }
 
   &.icon--weight-semi-bold {
     --__op-icon-weight: var(--_op-icon-weight-semi-bold);
+    --__op-icon-stroke-width: var(--_op-icon-stroke-width-semi-bold);
   }
 
   &.icon--weight-bold {
     --__op-icon-weight: var(--_op-icon-weight-bold);
+    --__op-icon-stroke-width: var(--_op-icon-stroke-width-bold);
   }
 
   /* Emphasis */
@@ -4646,7 +5203,27 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     --__op-icon-font-size: var(--_op-icon-font-size-x-large);
     --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
   }
+
+  /* SVG Modifier: an inline SVG instead of a font glyph, e.g. `icon icon--svg icon--large` */
+  &.icon--svg {
+    svg {
+      display: block;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+
+    /* A rule on the <svg> root cannot beat a stroke-width attribute on a child, so target the attribute.
+       With no weight modifier the set keeps the widths it was drawn with. */
+    &:is(.icon--weight-light, .icon--weight-normal, .icon--weight-semi-bold, .icon--weight-bold) svg [stroke-width] {
+      stroke-width: var(--__op-icon-stroke-width);
+    }
+
+    &.icon--low-emphasis {
+      opacity: var(--_op-icon-svg-opacity-low-emphasis);
+    }
+  }
 }
+
 /* Material Icons class provided by the Google Fonts CDN */
 .material-symbols-outlined {
   font-variation-settings:
@@ -4656,6 +5233,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     'opsz' var(--__op-icon-optical-size);
   font-weight: unset;
 }
+
 /* Custom SVG Icons app specific */
 .custom-icons {
   svg {
@@ -4705,6 +5283,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     }
   }
 }
+
 .modal {
   /* Public API (customizable component options) */
   --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
@@ -4750,6 +5329,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     gap: var(--op-space-small);
   }
 }
+
 dialog.modal {
   padding: 0;
   border: none;
@@ -4782,6 +5362,7 @@ dialog.modal {
     }
   }
 }
+
 @starting-style {
   dialog.modal[open] {
     transform: scale(0.7);
@@ -5289,6 +5870,7 @@ dialog.modal {
     --__op-spinner-track-width: var(--_op-spinner-track-width-large);
   }
 }
+
 @keyframes spinner {
   to {
     transform: rotate(360deg);
@@ -5405,6 +5987,7 @@ dialog.modal {
   display: flex;
   align-items: center;
 }
+
 .tab {
   /* Public API */
   --_op-tab-font-small: var(--op-font-x-small);
@@ -5789,7 +6372,11 @@ dialog.modal {
 
   display: flex;
   flex-direction: column;
-  gap: var(--op-space-x-small);
+
+  /* zero specificity. Lets utilities override */
+  :where(&) {
+    gap: var(--op-space-x-small);
+  }
 
   &.text-pair--inline {
     flex-direction: row;
@@ -5833,6 +6420,7 @@ dialog.modal {
   }
 }
 /* Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/ */
+
 [data-tooltip-text] {
   /* Public API (customizable component options) */
   --_op-tooltip-max-width: calc(50 * var(--op-size-unit)); /* 200px */