@rolemodel/optics 2.2.0 → 2.3.0

package/dist/css/optics.css

@@ -298,7 +298,8 @@ Noto Sans supports:
   --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
   --op-transition-input: all 120ms ease-in;
   --op-transition-sidebar: all 200ms ease-in-out;
-  --op-transition-modal: all 300ms ease-in;
+  --op-transition-modal-time: 300ms;
+  --op-transition-modal: all var(--op-transition-modal-time) ease-in;
   --op-transition-panel: right 400ms ease-in;
   --op-transition-tooltip: all 300ms ease-in 300ms;
 
@@ -418,22 +419,22 @@ Noto Sans supports:
     Start off the Screen
   */
   0% {
-    right: -100%;
+    inset-inline-end: -100%;
   }
 
   /* Animate onto the screen for 0.5s */
   10% {
-    right: var(--op-space-large);
+    inset-inline-end: var(--op-space-large);
   }
 
   /* Stay on the screen for 3s */
   70% {
-    right: var(--op-space-large);
+    inset-inline-end: var(--op-space-large);
   }
 
   /* Animate off the screen for 1.5s */
   100% {
-    right: -100%;
+    inset-inline-end: -100%;
   }
 }
 :root {
@@ -1940,8 +1941,8 @@ html {
 }
 body {
   overflow: auto;
-  height: 100vh;
   background: var(--op-color-background);
+  block-size: 100vh;
   color: var(--op-color-on-background);
   font-size: var(--op-font-medium);
 }
@@ -1982,9 +1983,8 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 0;
-  margin-bottom: var(--op-space-small);
   font-weight: var(--op-font-weight-normal);
+  margin-block: 0 var(--op-space-small);
 }
 h1 {
   font-size: var(--op-font-3x-large);
@@ -2005,17 +2005,17 @@ h6 {
   font-size: var(--op-font-x-small);
 }
 p {
-  margin-bottom: var(--op-space-small);
   font-size: var(--op-font-medium);
+  margin-block-end: var(--op-space-small);
 }
 small {
   font-size: var(--op-font-small);
 }
 .app-with-sidebar {
   display: grid;
-  width: 100%;
-  height: 100vh;
+  block-size: 100vh;
   grid-template-columns: auto 1fr auto;
+  inline-size: 100%;
 }
 .app-body {
   display: flex;
@@ -2025,39 +2025,145 @@ small {
 .app__header {
   position: sticky;
   z-index: var(--op-z-index-header);
-  top: 0;
   flex-grow: 0;
   flex-shrink: 0;
+  inset-block-start: 0;
 }
 .app__content {
-  width: 100%;
-  max-width: var(--op-breakpoint-medium);
   flex-grow: 1;
   padding: 0 var(--op-space-large);
   margin: 0 auto;
+  inline-size: 100%;
+  max-inline-size: var(--op-breakpoint-medium);
 }
 .app__content-no-margin {
-  width: 100%;
   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);
-  bottom: 0;
   flex-grow: 0;
   flex-shrink: 0;
+  inset-block-end: 0;
+}
+/*
+  <html lang='en'>
+    <head>...</head>
+    <body class="op-page">
+      <div class="op-page__sidebar">...</div>
+      <div class="op-page__main">
+        <div class="op-page__main-header">...</div>
+        <div class="op-page__main-content">...</div>
+        <div class="op-page__main-footer">...</div>
+      </div>
+      <div class="op-page__sidebar op-page__sidebar--right">...</div>
+    </body>
+  </html>
+*/
+:root:has(.op-page) {
+  /* Reset existing Optics layout */
+  overflow: unset;
+
+  body {
+    overflow: unset;
+  }
+
+  /* New Layout */
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    block-size: 100%;
+    min-block-size: 100%;
+  }
+}
+.op-page {
+  display: grid;
+  grid-template-areas: 'sidebar-left main sidebar-right';
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+  min-block-size: 100dvh;
+
+  .op-page__sidebar {
+    grid-area: sidebar-left;
+
+    &.op-page__sidebar--right {
+      grid-area: sidebar-right;
+    }
+  }
+
+  .op-page__main {
+    grid-area: main;
+  }
+
+  .op-page__sidebar {
+    position: sticky;
+    z-index: var(--op-z-index-sidebar);
+    block-size: 100dvh;
+    inset-block-start: 0;
+    max-block-size: 100dvh;
+
+    > * {
+      block-size: 100%;
+    }
+  }
+
+  .op-page__main {
+    display: grid;
+    grid-template-areas:
+      'main-header'
+      'main-content'
+      'main-footer';
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+    min-block-size: 100%;
+
+    .op-page__main-header {
+      grid-area: main-header;
+    }
+
+    .op-page__main-content {
+      grid-area: main-content;
+    }
+
+    .op-page__main-footer {
+      grid-area: main-footer;
+    }
+
+    .op-page__main-header {
+      position: sticky;
+      z-index: var(--op-z-index-header);
+      inset-block-start: 0;
+    }
+
+    .op-page__main-content {
+      inline-size: 100%;
+      margin-inline: auto;
+      max-inline-size: var(--op-breakpoint-medium);
+      padding-block: var(--op-space-medium);
+      padding-inline: var(--op-space-large);
+    }
+
+    .op-page__main-footer {
+      position: sticky;
+      z-index: var(--op-z-index-footer);
+      inset-block-end: 0;
+    }
+  }
 }
 /* Container Properties */
 .container {
-  width: 100%;
-  max-width: var(--op-breakpoint-medium);
-  padding: 0 var(--op-space-large);
-  margin: 0 auto;
+  inline-size: 100%;
+  margin-block: 0;
+  margin-inline: auto;
+  max-inline-size: var(--op-breakpoint-medium);
+  padding-block: 0;
+  padding-inline: var(--op-space-large);
 }
 .container--sm {
-  max-width: var(--op-breakpoint-small);
+  max-inline-size: var(--op-breakpoint-small);
 }
 .container--md-padding {
   padding: 0 var(--op-space-medium);
@@ -2066,38 +2172,38 @@ small {
   padding: 0 var(--op-space-small);
 }
 .container--xs {
-  max-width: var(--op-breakpoint-x-small);
+  max-inline-size: var(--op-breakpoint-x-small);
 }
 /* Width Properties */
 .full-width {
-  width: 100%;
+  inline-size: 100%;
 }
 .half-width {
-  width: 50%;
+  inline-size: 50%;
 }
 .four-fifths-width {
-  width: calc(100% * 4 / 5);
+  inline-size: calc(100% * 4 / 5);
 }
 .three-fifths-width {
-  width: calc(100% * 3 / 5);
+  inline-size: calc(100% * 3 / 5);
 }
 .two-fifths-width {
-  width: calc(100% * 2 / 5);
+  inline-size: calc(100% * 2 / 5);
 }
 .one-fifth-width {
-  width: calc(100% * 1 / 5);
+  inline-size: calc(100% * 1 / 5);
 }
 .three-quarters-width {
-  width: calc(100% * 3 / 4);
+  inline-size: calc(100% * 3 / 4);
 }
 .one-quarter-width {
-  width: calc(100% * 1 / 4);
+  inline-size: calc(100% * 1 / 4);
 }
 .two-thirds-width {
-  width: calc(100% * 2 / 3);
+  inline-size: calc(100% * 2 / 3);
 }
 .one-third-width {
-  width: calc(100% * 1 / 3);
+  inline-size: calc(100% * 1 / 3);
 }
 /* Flex Properties */
 .flex {
@@ -2202,13 +2308,13 @@ small {
 }
 /* Text Alignment */
 .text-left {
-  text-align: left;
+  text-align: start;
 }
 .text-center {
   text-align: center;
 }
 .text-right {
-  text-align: right;
+  text-align: end;
 }
 .text-justify {
   text-align: justify;
@@ -2237,129 +2343,117 @@ small {
 }
 /* Vertical Margin */
 .margin-y-xl {
-  margin-top: var(--op-space-x-large);
-  margin-bottom: var(--op-space-x-large);
+  margin-block: var(--op-space-x-large);
 }
 .margin-y-lg {
-  margin-top: var(--op-space-large);
-  margin-bottom: var(--op-space-large);
+  margin-block: var(--op-space-large);
 }
 .margin-y-md {
-  margin-top: var(--op-space-medium);
-  margin-bottom: var(--op-space-medium);
+  margin-block: var(--op-space-medium);
 }
 .margin-y-sm {
-  margin-top: var(--op-space-small);
-  margin-bottom: var(--op-space-small);
+  margin-block: var(--op-space-small);
 }
 .margin-y-xs {
-  margin-top: var(--op-space-x-small);
-  margin-bottom: var(--op-space-x-small);
+  margin-block: var(--op-space-x-small);
 }
 .margin-y-none {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
 }
 /* Horizontal Margin */
 .margin-x-xl {
-  margin-right: var(--op-space-x-large);
-  margin-left: var(--op-space-x-large);
+  margin-inline: var(--op-space-x-large);
 }
 .margin-x-lg {
-  margin-right: var(--op-space-large);
-  margin-left: var(--op-space-large);
+  margin-inline: var(--op-space-large);
 }
 .margin-x-md {
-  margin-right: var(--op-space-medium);
-  margin-left: var(--op-space-medium);
+  margin-inline: var(--op-space-medium);
 }
 .margin-x-sm {
-  margin-right: var(--op-space-small);
-  margin-left: var(--op-space-small);
+  margin-inline: var(--op-space-small);
 }
 .margin-x-xs {
-  margin-right: var(--op-space-x-small);
-  margin-left: var(--op-space-x-small);
+  margin-inline: var(--op-space-x-small);
 }
 .margin-x-none {
-  margin-right: 0;
-  margin-left: 0;
+  margin-inline: 0;
 }
 /* Top Margin */
 .margin-top-xl {
-  margin-top: var(--op-space-x-large);
+  margin-block-start: var(--op-space-x-large);
 }
 .margin-top-lg {
-  margin-top: var(--op-space-large);
+  margin-block-start: var(--op-space-large);
 }
 .margin-top-md {
-  margin-top: var(--op-space-medium);
+  margin-block-start: var(--op-space-medium);
 }
 .margin-top-sm {
-  margin-top: var(--op-space-small);
+  margin-block-start: var(--op-space-small);
 }
 .margin-top-xs {
-  margin-top: var(--op-space-x-small);
+  margin-block-start: var(--op-space-x-small);
 }
 .margin-top-none {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 /* Bottom Margin */
 .margin-bottom-xl {
-  margin-bottom: var(--op-space-x-large);
+  margin-block-end: var(--op-space-x-large);
 }
 .margin-bottom-lg {
-  margin-bottom: var(--op-space-large);
+  margin-block-end: var(--op-space-large);
 }
 .margin-bottom-md {
-  margin-bottom: var(--op-space-medium);
+  margin-block-end: var(--op-space-medium);
 }
 .margin-bottom-sm {
-  margin-bottom: var(--op-space-small);
+  margin-block-end: var(--op-space-small);
 }
 .margin-bottom-xs {
-  margin-bottom: var(--op-space-x-small);
+  margin-block-end: var(--op-space-x-small);
 }
 .margin-bottom-none {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 /* Right Margin */
 .margin-right-xl {
-  margin-right: var(--op-space-x-large);
+  margin-inline-end: var(--op-space-x-large);
 }
 .margin-right-lg {
-  margin-right: var(--op-space-large);
+  margin-inline-end: var(--op-space-large);
 }
 .margin-right-md {
-  margin-right: var(--op-space-medium);
+  margin-inline-end: var(--op-space-medium);
 }
 .margin-right-sm {
-  margin-right: var(--op-space-small);
+  margin-inline-end: var(--op-space-small);
 }
 .margin-right-xs {
-  margin-right: var(--op-space-x-small);
+  margin-inline-end: var(--op-space-x-small);
 }
 .margin-right-none {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 /* Left Margin */
 .margin-left-xl {
-  margin-left: var(--op-space-x-large);
+  margin-inline-start: var(--op-space-x-large);
 }
 .margin-left-lg {
-  margin-left: var(--op-space-large);
+  margin-inline-start: var(--op-space-large);
 }
 .margin-left-md {
-  margin-left: var(--op-space-medium);
+  margin-inline-start: var(--op-space-medium);
 }
 .margin-left-sm {
-  margin-left: var(--op-space-small);
+  margin-inline-start: var(--op-space-small);
 }
 .margin-left-xs {
-  margin-left: var(--op-space-x-small);
+  margin-inline-start: var(--op-space-x-small);
 }
 .margin-left-none {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 /*
   Accessibility
@@ -2369,10 +2463,38 @@ small {
 .sr-only {
   position: absolute !important;
   overflow: hidden;
-  width: 1px;
-  height: 1px;
+  block-size: 1px;
   clip: rect(1px 1px 1px 1px);
   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;
+}
+:where(.op-stack) {
+  gap: var(--op-space-medium);
+}
+/* Equivalent to .flex.flex-wrap.items-center.gap-md */
+.op-cluster {
+  display: flex;
+  flex-wrap: wrap;
+}
+: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;
+}
+:where(.op-split) {
+  align-items: center;
+  gap: var(--op-space-medium);
 }
 /* Components */
 .accordion {
@@ -2386,11 +2508,11 @@ small {
 
   summary {
     display: grid;
-    min-height: var(--_op-accordion-summary-min-height);
     align-items: center;
     cursor: pointer;
     gap: var(--op-space-2x-small);
     grid-template-columns: auto 1fr auto;
+    min-block-size: var(--_op-accordion-summary-min-height);
 
     &::marker,
     &::-webkit-details-marker {
@@ -2415,7 +2537,7 @@ small {
   }
 
   &::details-content {
-    height: 0;
+    block-size: 0;
     transition: var(--op-transition-accordion-content);
   }
 
@@ -2425,7 +2547,7 @@ small {
     }
 
     &::details-content {
-      height: auto;
+      block-size: auto;
     }
   }
 
@@ -2479,9 +2601,9 @@ small {
   &.alert--flash {
     position: fixed;
     z-index: var(--op-z-index-alert-group);
-    top: var(--op-space-large);
-    right: var(--op-space-large);
     animation: var(--op-animation-flash);
+    inset-block-start: var(--op-space-large);
+    inset-inline-end: var(--op-space-large);
   }
 
   &.alert--warning {
@@ -2632,11 +2754,11 @@ small {
   z-index: 1;
   display: block;
   overflow: hidden;
-  width: var(--__op-avatar-size);
-  min-width: var(--__op-avatar-size);
-  height: var(--__op-avatar-size);
-  min-height: var(--__op-avatar-size);
   border-radius: var(--_op-avatar-border-radius);
+  block-size: var(--__op-avatar-size);
+  inline-size: var(--__op-avatar-size);
+  min-block-size: var(--__op-avatar-size);
+  min-inline-size: var(--__op-avatar-size);
 
   &::before {
     position: absolute;
@@ -2657,8 +2779,8 @@ small {
   }
 
   img {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
     object-fit: cover;
   }
 
@@ -2835,7 +2957,6 @@ small {
   --__op-btn-padding: var(--_op-btn-padding-large);
 
   display: inline-flex;
-  min-height: var(--__op-btn-height);
   align-items: center;
   justify-content: center;
   padding: var(--__op-btn-padding);
@@ -2848,6 +2969,7 @@ small {
   font-size: var(--__op-btn-font-size);
   font-weight: var(--op-font-weight-normal);
   gap: var(--op-space-x-small);
+  min-block-size: var(--__op-btn-height);
   text-align: center;
   text-decoration: none;
   transition: var(--op-transition-input);
@@ -2911,9 +3033,9 @@ small {
 
   /* Icon Modifier */
   &.btn--icon {
-    width: var(--__op-btn-height);
-    min-width: var(--__op-btn-height);
     padding: 0;
+    inline-size: var(--__op-btn-height);
+    min-inline-size: var(--__op-btn-height);
   }
 
   /* Icon With Label Modifier */
@@ -3122,13 +3244,13 @@ small {
     }
 
     &:first-child:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
+      border-end-end-radius: 0;
+      border-start-end-radius: 0;
     }
 
     &:last-child:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
+      border-end-start-radius: 0;
+      border-start-start-radius: 0;
     }
   }
 }
@@ -3188,8 +3310,8 @@ small {
   }
 
   .card__header {
-    border-top-left-radius: var(--_op-card-radius);
-    border-top-right-radius: var(--_op-card-radius);
+    border-start-end-radius: var(--_op-card-radius);
+    border-start-start-radius: var(--_op-card-radius);
 
     h1,
     h2,
@@ -3202,8 +3324,8 @@ small {
   }
 
   .card__footer {
-    border-bottom-left-radius: var(--_op-card-radius);
-    border-bottom-right-radius: var(--_op-card-radius);
+    border-end-end-radius: var(--_op-card-radius);
+    border-end-start-radius: var(--_op-card-radius);
   }
 }
 .confirm-dialog-wrapper {
@@ -3251,13 +3373,13 @@ small {
   --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */
 
   z-index: var(--op-z-index-dialog-content);
-  width: var(--_op-confirm-dialog-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
   box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
+  inline-size: var(--_op-confirm-dialog-width);
   line-height: var(--op-line-height-base);
   opacity: var(--op-opacity-none);
   transform: scale(0.7);
@@ -3336,12 +3458,12 @@ small {
   /* Private API (component option defaults) */
   --__op-divider-height: var(--_op-divider-height-small);
   --__op-divider-padding: 0;
-
-  width: 100%;
-  height: var(--__op-divider-height);
   background-color: var(--op-color-border);
+  block-size: var(--__op-divider-height);
+  inline-size: 100%;
   margin-block: var(--__op-divider-padding);
   margin-inline: 0;
+  min-block-size: var(--__op-divider-height);
 
   /* Size Modifiers */
   &.divider--small {
@@ -3371,11 +3493,12 @@ small {
 
   /* Direction Modifier */
   &.divider--vertical {
-    width: var(--__op-divider-height);
-    height: 100%;
-    min-height: var(--_op-divider-vertical-min-height);
+    block-size: 100%;
+    inline-size: var(--__op-divider-height);
     margin-block: 0;
     margin-inline: var(--__op-divider-padding);
+    min-block-size: var(--_op-divider-vertical-min-height);
+    min-inline-size: var(--__op-divider-height);
   }
 }
 .form-control {
@@ -3390,9 +3513,8 @@ small {
   /* Private API (component option defaults) */
   --__op-form-control-height: var(--_op-form-control-height-large);
   --__op-form-control-font-size: var(--_op-form-control-font-large);
-
-  min-width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
+  block-size: var(--__op-form-control-height);
+  min-inline-size: var(--__op-form-control-height);
 
   /* Size Modifiers */
   &.form-control--small {
@@ -3439,12 +3561,12 @@ small {
   --_op-form-control-height-medium: var(--op-space-large);
   --_op-form-control-height-large: var(--op-space-x-large);
 
-  width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
   align-self: center;
   margin: 0;
   accent-color: var(--op-color-primary-base);
+  block-size: var(--__op-form-control-height);
   cursor: pointer;
+  inline-size: var(--__op-form-control-height);
 
   & + label {
     align-self: center;
@@ -3459,18 +3581,18 @@ small {
   --__op-form-control-border-color: var(--op-color-neutral-plus-four);
 
   display: block;
-  width: 100%;
-  min-width: var(--__op-form-control-height);
-  height: var(--__op-form-control-height);
   border: none;
   border-radius: var(--op-radius-medium);
   appearance: none;
   background-color: var(--op-color-neutral-plus-eight);
+  block-size: var(--__op-form-control-height);
   box-shadow: var(--op-border-all) var(--__op-form-control-border-color);
   color: var(--op-color-neutral-on-plus-eight);
   cursor: text;
   font-size: var(--__op-form-control-font-size);
+  inline-size: 100%;
   line-height: var(--op-line-height-base);
+  min-inline-size: var(--__op-form-control-height);
   padding-block: var(--op-space-2x-small);
   padding-inline: var(--op-space-small) var(--op-space-x-small);
 
@@ -3535,7 +3657,6 @@ small {
     --__op-btn-height: var(--__op-btn-base-height);
 
     display: inline-flex;
-    min-height: var(--__op-btn-height);
     align-items: center;
     justify-content: center;
     border: none;
@@ -3549,6 +3670,7 @@ small {
     font-weight: var(--op-font-weight-normal);
     gap: var(--op-space-x-small);
     margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
+    min-block-size: var(--__op-btn-height);
     padding-block: 0;
     padding-inline: var(--op-space-x-small);
     text-align: center;
@@ -3573,12 +3695,12 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) {
   padding-inline-end: var(--op-space-3x-large);
 }
 select.form-control[multiple] {
-  min-height: calc(2 * var(--__op-form-control-height));
+  min-block-size: calc(2 * var(--__op-form-control-height));
 }
 textarea.form-control:not([type='radio'], [type='checkbox']) {
-  max-width: 100%;
-  height: calc(2 * var(--__op-form-control-height));
-  min-height: var(--__op-form-control-height);
+  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);
@@ -3588,9 +3710,9 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   line-height: var(--op-line-height-base);
 }
 .form-error {
-  width: fit-content;
   color: var(--op-color-alerts-danger-base);
   font-size: var(--op-font-x-small);
+  inline-size: fit-content;
 }
 .form-hint {
   display: block;
@@ -3761,10 +3883,10 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
 
   display: inline-block;
-  width: var(--__op-icon-font-size);
-  height: var(--__op-icon-font-size);
+  block-size: var(--__op-icon-font-size);
   font-size: var(--__op-icon-font-size);
   font-weight: var(--__op-icon-weight);
+  inline-size: var(--__op-icon-font-size);
   line-height: var(--op-line-height-densest);
   vertical-align: middle;
 
@@ -3840,8 +3962,8 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
 /* Custom SVG Icons app specific */
 .custom-icons {
   svg {
-    width: 100%;
-    height: 100%;
+    block-size: 100%;
+    inline-size: 100%;
   }
 }
 .modal-wrapper {
@@ -3886,20 +4008,19 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     }
   }
 }
-/* stylelint-disable no-descending-specificity */
 .modal {
   /* Public API (customizable component options) */
   --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
   --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */
 
   z-index: var(--op-z-index-dialog-content);
-  width: var(--_op-modal-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
   box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
+  inline-size: var(--_op-modal-width);
   line-height: var(--op-line-height-base);
   opacity: var(--op-opacity-none);
   transform: scale(0.7);
@@ -3920,8 +4041,8 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   }
 
   .modal__body {
-    max-height: var(--_op-modal-max-height);
     box-shadow: var(--op-border-all) var(--op-color-border);
+    max-block-size: var(--_op-modal-max-height);
     overflow-y: auto;
   }
 
@@ -3932,59 +4053,45 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
     gap: var(--op-space-small);
   }
 }
-/* stylelint-enable no-descending-specificity */
 dialog.modal {
-  position: fixed;
-  display: block;
   padding: 0;
   border: none;
-  inset: 0;
+  overscroll-behavior: contain;
+  transform: scale(0.7);
+  transition:
+    display var(--op-transition-modal-time) allow-discrete,
+    overlay var(--op-transition-modal-time) allow-discrete,
+    transform var(--op-transition-modal-time),
+    opacity var(--op-transition-modal-time);
 
   &::backdrop {
-    /* The Dialog backdrop does not inheret from :root so these need to be duplicated here. */
-    --op-color-black: hsl(0deg 0% 0%);
-    --_op-modal-backdrop-active-opacity: 0.5;
-    --op-opacity-none: 0;
-    --op-opacity-full: 1;
-
-    animation: show-backdrop 300ms ease-in;
-    background: var(--op-color-black);
-    opacity: var(--_op-modal-backdrop-active-opacity);
+    overflow: hidden;
+    background-color: var(--op-color-black);
+    opacity: var(--op-opacity-none);
+    overscroll-behavior: contain;
+    transition:
+      display var(--op-transition-modal-time) allow-discrete,
+      overlay var(--op-transition-modal-time) allow-discrete,
+      transform var(--op-transition-modal-time),
+      opacity var(--op-transition-modal-time);
   }
 
   &[open] {
     opacity: var(--op-opacity-full);
     transform: scale(1);
-  }
-
-  &.modal--closing {
-    opacity: var(--op-opacity-none);
-    transform: scale(0.7);
 
     &::backdrop {
-      animation: hide-backdrop 300ms ease-in;
-      opacity: var(--op-opacity-none);
+      opacity: var(--op-opacity-half);
     }
   }
 }
-/* Using the Dialog element */
-/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
-@keyframes show-backdrop {
-  from {
-    opacity: var(--op-opacity-none);
-  }
-
-  to {
-    opacity: var(--_op-modal-backdrop-active-opacity);
-  }
-}
-@keyframes hide-backdrop {
-  from {
-    opacity: var(--_op-modal-backdrop-active-opacity);
-  }
+@starting-style {
+  dialog.modal[open] {
+    transform: scale(0.7);
 
-  to {
-    opacity: var(--op-opacity-none);
+    &::backdrop {
+      opacity: var(--op-opacity-none);
+    }
   }
 }
 .navbar {
@@ -4005,18 +4112,20 @@ dialog.modal {
   align-items: center;
   padding: var(--op-space-small) var(--_op-navbar-horizontal-spacing);
   background-color: var(--_op-navbar-background-color);
-  box-shadow: var(--op-border-bottom) var(--_op-navbar-border-color);
+  box-shadow:
+    var(--op-border-top) var(--_op-navbar-border-color),
+    var(--op-border-bottom) var(--_op-navbar-border-color);
   color: var(--_op-navbar-text-color);
   gap: var(--_op-navbar-content-spacing);
 
   /* Elements */
 
   .navbar__brand {
-    height: var(--_op-navbar-brand-height);
-    margin-right: var(--_op-navbar-horizontal-spacing);
+    block-size: var(--_op-navbar-brand-height);
+    margin-inline-end: var(--_op-navbar-horizontal-spacing);
 
     img {
-      height: 100%;
+      block-size: 100%;
     }
   }
 
@@ -4067,7 +4176,7 @@ dialog.modal {
 
   /* ... Gap */
   .pagination__divider {
-    height: 100%;
+    block-size: 100%;
     padding-inline: var(--op-space-x-small);
   }
 }
@@ -4109,19 +4218,19 @@ dialog.modal {
 
   position: relative;
   display: grid;
-  width: fit-content;
-  height: var(--__op-segmented-control-height);
   padding: var(--op-space-2x-small);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-neutral-plus-eight);
+  block-size: var(--__op-segmented-control-height);
   box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-neutral-on-plus-eight);
   font-size: var(--__op-segmented-control-font-size);
   gap: var(--op-space-2x-small);
   grid-auto-flow: column;
+  inline-size: fit-content;
 
   &.segmented-control--full-width {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .icon {
@@ -4131,12 +4240,12 @@ dialog.modal {
   .segmented-control__input {
     position: absolute;
     overflow: hidden;
-    width: 1px;
-    height: 1px;
     padding: 0;
     border-width: 0;
     margin: -1px;
+    block-size: 1px;
     clip: rect(0, 0, 0, 0);
+    inline-size: 1px;
     white-space: nowrap;
 
     /* Selected Option */
@@ -4237,23 +4346,25 @@ dialog.modal {
 
   z-index: var(--op-z-index-sidebar);
   display: flex;
-  width: var(--__op-sidebar-width);
-  min-width: var(--__op-sidebar-width);
   flex-direction: column;
   background-color: var(--_op-sidebar-background-color);
-  box-shadow: var(--op-border-right) var(--_op-sidebar-border-color);
+  box-shadow:
+    var(--op-border-left) var(--_op-sidebar-border-color),
+    var(--op-border-right) var(--_op-sidebar-border-color);
   color: var(--_op-sidebar-text-color);
+  inline-size: var(--__op-sidebar-width);
+  min-inline-size: var(--__op-sidebar-width);
   overflow-y: auto;
   transition: var(--_op-sidebar-transition);
 
   /* Elements */
   .sidebar__brand {
-    height: var(--__op-sidebar-brand-width);
     padding: var(--_op-sidebar-brand-spacing);
+    block-size: var(--__op-sidebar-brand-width);
     margin-inline: auto;
 
     img {
-      height: 100%;
+      block-size: 100%;
     }
   }
 
@@ -4326,13 +4437,14 @@ dialog.modal {
       align-items: center;
 
       > * {
-        /* Need to get icon behavior */
-        width: var(--__op-btn-height);
-        min-width: var(--__op-btn-height);
         justify-content: center;
         padding: 0;
         font-size: 0;
         gap: 0;
+
+        /* Need to get icon behavior */
+        inline-size: var(--__op-btn-height);
+        min-inline-size: var(--__op-btn-height);
       }
     }
   }
@@ -4353,13 +4465,13 @@ dialog.modal {
   --_op-side-panel-section-padding: var(--op-space-medium);
 
   display: flex;
-  width: var(--_op-side-panel-width);
-  min-width: var(--_op-side-panel-width);
-  height: 100vh;
-  max-height: 100%;
   flex-direction: column;
   background-color: var(--op-color-background);
+  block-size: 100vh;
   color: var(--op-color-on-background);
+  inline-size: var(--_op-side-panel-width);
+  max-block-size: 100%;
+  min-inline-size: var(--_op-side-panel-width);
 
   /* Modifiers */
   &.side-panel--border-left {
@@ -4453,12 +4565,12 @@ dialog.modal {
   --__op-spinner-diameter: var(--_op-spinner-diameter-large);
   --__op-spinner-track-width: var(--_op-spinner-track-width-large);
 
-  width: var(--__op-spinner-diameter);
-  height: var(--__op-spinner-diameter);
   border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
   border-radius: var(--__op-spinner-diameter);
-  border-top-color: var(--_op-spinner-indicator-color);
   animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
+  block-size: var(--__op-spinner-diameter);
+  border-block-start-color: var(--_op-spinner-indicator-color);
+  inline-size: var(--__op-spinner-diameter);
 
   &.spinner--x-small {
     --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
@@ -4507,20 +4619,20 @@ dialog.modal {
   label {
     position: relative;
     display: block;
-    width: var(--__op-switch-width);
-    height: var(--__op-switch-height);
     border-radius: var(--op-radius-pill);
     background: var(--op-color-neutral-base);
+    block-size: var(--__op-switch-height);
     box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
+    inline-size: var(--__op-switch-width);
     text-indent: -9999px; /* Normally text would not be put in the label, but this hides it in case you do put text in the label */
 
     &::after {
       position: absolute;
-      width: var(--__op-switch-switch-size);
-      height: var(--__op-switch-switch-size);
       border-radius: var(--op-radius-circle);
       background-color: var(--op-color-neutral-plus-eight);
+      block-size: var(--__op-switch-switch-size);
       content: '';
+      inline-size: var(--__op-switch-switch-size);
       inset-block-start: var(--__op-switch-half-switch-padding);
       inset-inline-start: var(--__op-switch-half-switch-padding);
       transition: var(--op-transition-input);
@@ -4529,12 +4641,12 @@ dialog.modal {
 
   /* Prevent labels after the toggle being full width */
   & + label {
-    width: fit-content;
+    inline-size: fit-content;
   }
 
   input {
-    width: 0;
-    height: 0;
+    block-size: 0;
+    inline-size: 0;
     margin-inline-end: calc(-1 * var(--op-space-x-small));
 
     &:disabled {
@@ -4551,7 +4663,7 @@ dialog.modal {
       box-shadow: none;
 
       &::after {
-        left: calc(100% - var(--__op-switch-half-switch-padding));
+        inset-inline-start: calc(100% - var(--__op-switch-half-switch-padding));
         transform: translateX(-100%);
       }
     }
@@ -4680,11 +4792,11 @@ dialog.modal {
   /* These allow for overriding specific padding versions easier. */
   --__op-table-cell-height: var(--_op-table-cell-height-default);
 
-  width: 100%;
   border-radius: var(--op-radius-medium);
   border-collapse: collapse;
   box-shadow: var(--op-border-all) var(--op-color-border);
   contain: paint;
+  inline-size: 100%;
   table-layout: auto;
 
   /* Elements */
@@ -4702,7 +4814,7 @@ dialog.modal {
 
   th {
     font-weight: var(--op-font-weight-semi-bold);
-    text-align: left;
+    text-align: start;
   }
 
   tbody,
@@ -4713,7 +4825,7 @@ dialog.modal {
 
   th,
   td {
-    height: var(--__op-table-cell-height);
+    block-size: var(--__op-table-cell-height);
     font-size: var(--op-font-small);
     padding-block: var(--op-space-2x-small);
     padding-inline: var(--op-space-small);
@@ -5048,8 +5160,6 @@ dialog.modal {
     position: absolute;
     z-index: var(--op-z-index-tooltip);
     display: block;
-    width: max-content;
-    max-width: var(--_op-tooltip-max-width);
     padding: var(--_op-tooltip-padding);
     border-radius: var(--_op-tooltip-tooltip-radius);
     background-color: var(--_op-tooltip-background-color);
@@ -5057,6 +5167,8 @@ dialog.modal {
     content: attr(data-tooltip-text);
     font-family: var(--op-font-family); /* Makes tooltips on icons work */
     font-size: var(--_op-tooltip-tooltip-font-size);
+    inline-size: max-content;
+    max-inline-size: var(--_op-tooltip-max-width);
     overflow-wrap: break-word;
     pointer-events: none;
     text-align: center;