@rolemodel/optics 2.2.0 → 2.3.0

package/dist/css/components/sidebar.css

@@ -29,23 +29,25 @@
 
   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%;
     }
   }
 
@@ -118,13 +120,14 @@
       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);
       }
     }
   }

package/dist/css/components/spinner.css

@@ -17,12 +17,12 @@
   --__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);

package/dist/css/components/switch.css

@@ -20,20 +20,20 @@
   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);
@@ -42,12 +42,12 @@
 
   /* 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 {
@@ -64,7 +64,7 @@
       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%);
       }
     }

package/dist/css/components/table.css

@@ -11,11 +11,11 @@
   /* 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 */
@@ -33,7 +33,7 @@
 
   th {
     font-weight: var(--op-font-weight-semi-bold);
-    text-align: left;
+    text-align: start;
   }
 
   tbody,
@@ -44,7 +44,7 @@
 
   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);

package/dist/css/components/tooltip.css

@@ -24,8 +24,6 @@
     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);
@@ -33,6 +31,8 @@
     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;

package/dist/css/core/base.css

@@ -8,8 +8,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);
 }
@@ -56,9 +56,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 {
@@ -86,8 +85,8 @@ h6 {
 }
 
 p {
-  margin-bottom: var(--op-space-small);
   font-size: var(--op-font-medium);
+  margin-block-end: var(--op-space-small);
 }
 
 small {

package/dist/css/core/layout.css

@@ -1,8 +1,8 @@
 .app-with-sidebar {
   display: grid;
-  width: 100%;
-  height: 100vh;
+  block-size: 100vh;
   grid-template-columns: auto 1fr auto;
+  inline-size: 100%;
 }
 
 .app-body {
@@ -14,30 +14,137 @@
 .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;
+    }
+  }
 }

package/dist/css/core/tokens/base_tokens.css

@@ -203,7 +203,8 @@
   --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;
 
@@ -324,21 +325,21 @@
     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%;
   }
 }