@rolemodel/optics 2.1.5 → 2.3.0

package/dist/css/components/navbar.css

@@ -16,18 +16,20 @@
   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%;
     }
   }
 

package/dist/css/components/pagination.css

@@ -18,7 +18,7 @@
 
   /* ... Gap */
   .pagination__divider {
-    height: 100%;
+    block-size: 100%;
     padding-inline: var(--op-space-x-small);
   }
 }

package/dist/css/components/segmented-control.css

@@ -0,0 +1,135 @@
+.segmented-control {
+  --op-input-inner-focus: 0 0 0 var(--op-border-width-large);
+  --op-input-focus-primary:
+    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
+
+  /* Public API (customizable component options) */
+  --_op-segmented-control-height-small: var(--op-input-height-small);
+  --_op-segmented-control-height-medium: var(--op-input-height-medium);
+  --_op-segmented-control-height-large: var(--op-input-height-large);
+
+  --_op-segmented-control-font-small: var(--op-font-x-small);
+  --_op-segmented-control-font-medium: var(--op-font-small);
+  --_op-segmented-control-font-large: var(--op-font-small);
+
+  --_op-segmented-control-label-padding-small: var(--op-space-x-small);
+  --_op-segmented-control-label-padding-medium: var(--op-space-small);
+  --_op-segmented-control-label-padding-large: var(--op-space-small);
+
+  --_op-segmented-control-label-gap-small: var(--op-space-3x-small);
+  --_op-segmented-control-label-gap-medium: var(--op-space-2x-small);
+  --_op-segmented-control-label-gap-large: var(--op-space-2x-small);
+
+  --_op-segmented-control-color-icon-default: var(--op-color-neutral-on-plus-eight-alt);
+  --_op-segmented-control-color-icon-active: light-dark(
+    var(--op-color-primary-plus-four),
+    var(--op-color-primary-minus-six)
+  );
+
+  /* Private API (component option defaults) */
+  --__op-segmented-control-height: var(--_op-segmented-control-height-large);
+  --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
+  --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
+  --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
+  --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-default);
+
+  position: relative;
+  display: grid;
+  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 {
+    inline-size: 100%;
+  }
+
+  .icon {
+    color: var(--__op-segmented-control-color-icon);
+  }
+
+  .segmented-control__input {
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    border-width: 0;
+    margin: -1px;
+    block-size: 1px;
+    clip: rect(0, 0, 0, 0);
+    inline-size: 1px;
+    white-space: nowrap;
+
+    /* Selected Option */
+    &:checked + .segmented-control__label {
+      --__op-segmented-control-color-icon: var(--_op-segmented-control-color-icon-active);
+
+      background-color: var(--op-color-primary-plus-one);
+      color: var(--op-color-primary-on-plus-one);
+    }
+
+    &:focus-visible {
+      + .segmented-control__label {
+        box-shadow: var(--op-input-focus-primary);
+      }
+    }
+  }
+
+  .segmented-control__label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--op-radius-small);
+    gap: var(--__op-segmented-control-label-gap);
+    padding-inline: var(--__op-segmented-control-label-padding);
+    white-space: nowrap;
+
+    &:hover {
+      background-color: var(--op-color-neutral-plus-five);
+      color: var(--op-color-neutral-on-plus-five);
+    }
+  }
+
+  /* Size Modifiers */
+  &.segmented-control--small {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-small);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-small);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-small);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-small);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-small);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-small);
+    }
+  }
+
+  &.segmented-control--medium {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-medium);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-medium);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-medium);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-medium);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-medium);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+    }
+  }
+
+  &.segmented-control--large {
+    --__op-segmented-control-height: var(--_op-segmented-control-height-large);
+    --__op-segmented-control-font-size: var(--_op-segmented-control-font-large);
+    --__op-segmented-control-label-padding: var(--_op-segmented-control-label-padding-large);
+    --__op-segmented-control-label-gap: var(--_op-segmented-control-label-gap-large);
+
+    .icon {
+      --__op-icon-font-size: var(--_op-icon-font-size-medium);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+    }
+  }
+}

package/dist/css/components/side_panel.css

@@ -7,13 +7,13 @@
   --_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 {

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;
 
@@ -297,17 +298,23 @@
   */
   --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
   --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
-  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+  --op-input-focus-primary:
+    var(--op-input-inner-focus) var(--op-color-primary-plus-two),
     var(--op-input-outer-focus) var(--op-color-primary-plus-five);
-  --op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
+  --op-input-focus-neutral:
+    var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
     var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
-  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
+  --op-input-focus-danger:
+    var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
-  --op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
+  --op-input-focus-warning:
+    var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
-  --op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
+  --op-input-focus-info:
+    var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
-  --op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
+  --op-input-focus-notice:
+    var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
 }
 
@@ -318,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%;
   }
 }