@rolemodel/optics 2.3.1 → 2.5.0

package/dist/css/optics.css

@@ -8,6 +8,7 @@
 *::after {
   box-sizing: border-box;
 }
+
 /* Remove default margin */
 body,
 h1,
@@ -21,31 +22,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,
@@ -53,6 +60,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 {
@@ -67,6 +75,7 @@ select {
     scroll-behavior: auto !important;
   }
 }
+
 /* Fonts */
 /*
   Instead of hosting the font files locally which requires a compiler to handle them, we pull fonts
@@ -79,19 +88,23 @@ 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://fonts.google.com/icons?icon.set=Material+Symbols
   This import of Material Symbols supports:
   font weight set through: font-variation-settings: 'wght' {100..700}
 */
+
 /* Material Symbols */
+
 /* Tokens */
 :root {
   /* Color HSLs
@@ -412,6 +425,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 {
   /*
@@ -1891,10 +1905,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;
@@ -1914,6 +1930,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']) {
     /**
@@ -1932,13 +1949,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);
@@ -1946,14 +1966,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;
 
@@ -1961,9 +1984,11 @@ label {
     cursor: pointer;
   }
 }
+
 a {
   color: var(--op-color-primary-original);
 }
+
 blockquote,
 dl,
 dd,
@@ -1977,6 +2002,7 @@ figure,
 pre {
   margin: 0;
 }
+
 h1,
 h2,
 h3,
@@ -1986,28 +2012,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);
 }
@@ -2017,11 +2051,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);
@@ -2029,6 +2065,7 @@ small {
   flex-shrink: 0;
   inset-block-start: 0;
 }
+
 .app__content {
   flex-grow: 1;
   padding: 0 var(--op-space-large);
@@ -2036,12 +2073,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);
@@ -2049,6 +2088,7 @@ small {
   flex-shrink: 0;
   inset-block-end: 0;
 }
+
 /*
   <html lang='en'>
     <head>...</head>
@@ -2063,6 +2103,7 @@ small {
     </body>
   </html>
 */
+
 :root:has(.op-page) {
   /* Reset existing Optics layout */
   overflow: unset;
@@ -2080,6 +2121,7 @@ small {
     min-block-size: 100%;
   }
 }
+
 .op-page {
   display: grid;
   grid-template-areas: 'sidebar-left main sidebar-right';
@@ -2154,6 +2196,7 @@ small {
   }
 }
 /* Container Properties */
+
 .container {
   inline-size: 100%;
   margin-block: 0;
@@ -2162,299 +2205,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.
@@ -2468,34 +2620,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) */
@@ -2542,7 +2843,7 @@ small {
   }
 
   &[open] {
-    summary .accordion__marker {
+    > summary .accordion__marker {
       rotate: 0.25turn;
     }
 
@@ -3254,6 +3555,7 @@ small {
     }
   }
 }
+
 .btn-group-toolbar {
   display: flex;
   flex-wrap: wrap;
@@ -3367,6 +3669,7 @@ small {
     }
   }
 }
+
 /* stylelint-disable no-descending-specificity */
 .confirm-dialog {
   /* Public API (customizable component options) */
@@ -3554,6 +3857,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) */
@@ -3572,6 +3876,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) */
@@ -3634,6 +3939,7 @@ small {
     }
   }
 }
+
 /* Color Form Control */
 .form-control[type='color'] {
   padding: var(--op-space-2x-small);
@@ -3648,6 +3954,7 @@ small {
     border-radius: var(--op-radius-medium);
   }
 }
+
 /* File Form Control */
 .form-control[type='file'] {
   padding-block: 0;
@@ -3683,6 +3990,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);
@@ -3694,14 +4002,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);
@@ -3709,16 +4020,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);
@@ -3735,6 +4049,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     margin-block-end: 0;
   }
 }
+
 .form-group {
   display: grid;
   align-content: baseline;
@@ -3765,6 +4080,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     }
   }
 }
+
 .form-group--inline {
   align-items: center;
 
@@ -3786,6 +4102,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   }
   /* stylelint-enable no-descending-specificity */
 }
+
 .form-group--error {
   /* stylelint-disable no-descending-specificity */
   .form-control {
@@ -3875,6 +4192,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);
@@ -3902,18 +4226,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 */
@@ -3949,7 +4277,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:
@@ -3959,6 +4307,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 {
@@ -4008,6 +4357,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 */
@@ -4053,6 +4403,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     gap: var(--op-space-small);
   }
 }
+
 dialog.modal {
   padding: 0;
   border: none;
@@ -4085,6 +4436,7 @@ dialog.modal {
     }
   }
 }
+
 @starting-style {
   dialog.modal[open] {
     transform: scale(0.7);
@@ -4592,6 +4944,7 @@ dialog.modal {
     --__op-spinner-track-width: var(--_op-spinner-track-width-large);
   }
 }
+
 @keyframes spinner {
   to {
     transform: rotate(360deg);
@@ -4708,6 +5061,7 @@ dialog.modal {
   display: flex;
   align-items: center;
 }
+
 .tab {
   /* Public API */
   --_op-tab-font-small: var(--op-font-x-small);
@@ -5092,7 +5446,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;
@@ -5136,6 +5494,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 */