@rolemodel/optics 1.10.0 → 1.12.0

package/dist/css/optics.css

@@ -2814,38 +2814,79 @@ small {
 }
 
 .form-control {
+  /* Public API (customizable component options) */
   --_op-form-control-height-small: var(--op-input-height-small);
   --_op-form-control-height-medium: var(--op-input-height-medium);
   --_op-form-control-height-large: var(--op-input-height-large);
   --_op-form-control-font-small: var(--op-font-x-small);
   --_op-form-control-font-medium: var(--op-font-small);
   --_op-form-control-font-large: var(--op-font-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);
+  /* Size Modifiers */
+  &.form-control--small {
+    --__op-form-control-height: var(--_op-form-control-height-small);
+    --__op-form-control-font-size: var(--_op-form-control-font-small);
+  }
+  &.form-control--medium {
+    --__op-form-control-height: var(--_op-form-control-height-medium);
+    --__op-form-control-font-size: var(--_op-form-control-font-medium);
+  }
+  &.form-control--large {
+    --__op-form-control-height: var(--_op-form-control-height-large);
+    --__op-form-control-font-size: var(--_op-form-control-font-large);
+  }
+  /* Disabled State */
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--_op-form-control-opacity-disabled);
+  }
+  /* Readonly State */
+  &[readonly] {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    color: var(--op-color-on-background);
+    pointer-events: none;
+    user-select: none;
+    /* stylelint-disable selector-no-vendor-prefix */
+    &::-webkit-input-placeholder {
+      color: var(--op-color-on-background);
+    }
+    /* stylelint-enable selector-no-vendor-prefix */
+  }
 }
-.form-control--small.form-control {
-  --__op-form-control-height: var(--_op-form-control-height-small);
-  --__op-form-control-font-size: var(--_op-form-control-font-small);
-}
-.form-control--medium.form-control {
-  --__op-form-control-height: var(--_op-form-control-height-medium);
-  --__op-form-control-font-size: var(--_op-form-control-font-medium);
-}
-.form-control--large.form-control {
-  --__op-form-control-height: var(--_op-form-control-height-large);
-  --__op-form-control-font-size: var(--_op-form-control-font-large);
+
+/* Radio or Checkbox Form Control */
+.form-control:is([type=radio], [type=checkbox]) {
+  /* Public API (customizable component options) */
+  --_op-form-control-height-small: var(--op-space-medium);
+  --_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);
+  cursor: pointer;
+  & + label {
+    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) */
   --_op-form-control-opacity-disabled: var(--op-opacity-disabled);
+  /* Private API (component option defaults) */
   --__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);
-  padding: var(--op-space-2x-small) var(--op-space-x-small) var(--op-space-2x-small) var(--op-space-small);
   border: none;
   border-radius: var(--op-radius-medium);
   appearance: none;
@@ -2855,124 +2896,96 @@ small {
   cursor: text;
   font-size: var(--__op-form-control-font-size);
   line-height: var(--op-line-height-base);
-}
-.form-control:hover:not(:disabled, [readonly]):not([type=radio], [type=checkbox]) {
-  box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
-}
-.form-control:focus:not([type=radio], [type=checkbox]), .form-control:focus-within:not([type=radio], [type=checkbox]), .form-control:focus-visible:not([type=radio], [type=checkbox]) {
-  outline: none;
-}
-.form-control:focus-visible:not([readonly]):not([type=radio], [type=checkbox]) {
-  background-color: var(--op-color-primary-plus-seven);
-  box-shadow: var(--op-input-focus-primary);
-  color: var(--op-color-primary-on-plus-seven);
-}
-.form-control--no-border.form-control:not([type=radio], [type=checkbox]) {
-  background-color: transparent;
-  box-shadow: none;
-  color: var(--op-color-primary-on-plus-max);
-}
-.form-control--no-border.form-control:focus-visible:not([readonly]):not([type=radio], [type=checkbox]) {
-  background-color: var(--op-color-primary-plus-seven);
-  box-shadow: var(--op-input-focus-primary);
-  color: var(--op-color-primary-on-plus-seven);
-}
-.form-control--no-border.form-control:hover:not(:disabled, [readonly]):not([type=radio], [type=checkbox]) {
-  background-color: var(--op-color-primary-plus-eight);
-  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
-  color: var(--op-color-primary-on-plus-eight);
+  padding-block: var(--op-space-2x-small);
+  padding-inline: var(--op-space-small) var(--op-space-x-small);
+  /* Focus State */
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+  /* Hover State */
+  &:hover:not(:disabled, [readonly]) {
+    box-shadow: var(--op-border-all) var(--op-color-primary-plus-three);
+  }
+  &:focus-visible:not([readonly]) {
+    background-color: var(--op-color-primary-plus-seven);
+    box-shadow: var(--op-input-focus-primary);
+    color: var(--op-color-primary-on-plus-seven);
+  }
+  /* Borderless State */
+  &.form-control--no-border {
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--op-color-primary-on-plus-max);
+    &:focus-visible:not([readonly]) {
+      background-color: var(--op-color-primary-plus-seven);
+      box-shadow: var(--op-input-focus-primary);
+      color: var(--op-color-primary-on-plus-seven);
+    }
+    /* Borderless + Hover State */
+    &:hover:not(:disabled, [readonly]) {
+      background-color: var(--op-color-primary-plus-eight);
+      box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
+      color: var(--op-color-primary-on-plus-eight);
+    }
+  }
 }
 
-.form-control[type=radio], .form-control[type=checkbox] {
-  --_op-form-control-height-small: var(--op-space-medium);
-  --_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);
+/* Color Form Control */
+.form-control[type=color] {
+  padding: var(--op-space-2x-small);
   cursor: pointer;
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: var(--op-radius-medium);
+  }
 }
-.form-control[type=radio] + label, .form-control[type=checkbox] + label {
-  align-self: center;
+
+/* File Form Control */
+.form-control[type=file] {
+  padding-block: 0;
+  &::file-selector-button {
+    --__op-btn-base-height: var(--op-input-height-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;
+    border-radius: var(--op-radius-medium);
+    appearance: none;
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
+    color: var(--op-color-neutral-on-plus-eight);
+    cursor: pointer;
+    font-size: var(--op-font-x-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);
+    padding-block: 0;
+    padding-inline: var(--op-space-x-small);
+    text-align: center;
+    text-decoration: none;
+    transition: var(--op-transition-input);
+    white-space: nowrap;
+  }
+  &.form-control--small::file-selector-button {
+    --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
+  }
 }
 
 select.form-control:not([multiple], [type=radio], [type=checkbox]) {
-  padding-right: var(--op-space-3x-large);
   appearance: none;
   background-image: var(--op-encoded-images-dropdown-arrow);
   background-position: center right;
   background-position-x: calc(100% - (var(--op-space-3x-large) / 2 - var(--op-encoded-images-dropdown-arrow-width) / 2));
   background-repeat: no-repeat;
   cursor: pointer;
-}
-
-.form-label {
-  color: var(--op-color-on-background);
-  font-size: var(--op-font-x-small);
-  font-weight: var(--op-font-weight-normal);
-  letter-spacing: var(--op-letter-spacing-label);
-  line-height: var(--op-line-height-base);
-}
-
-.form-control[type=color] {
-  padding: var(--op-space-2x-small);
-  cursor: pointer;
-}
-.form-control[type=color]::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-.form-control[type=color]::-webkit-color-swatch {
-  border: none;
-  border-radius: var(--op-radius-medium);
-}
-.form-control[type=file] {
-  padding-block: 0;
-}
-.form-control[type=file]::file-selector-button {
-  --__op-btn-base-height: var(--op-input-height-small);
-  --__op-btn-height: var(--__op-btn-base-height);
-  display: inline-flex;
-  min-height: var(--__op-btn-height);
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--op-space-x-small);
-  border: none;
-  border-radius: var(--op-radius-medium);
-  appearance: none;
-  background-color: var(--op-color-neutral-plus-eight);
-  box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
-  color: var(--op-color-neutral-on-plus-eight);
-  cursor: pointer;
-  font-size: var(--op-font-x-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);
-  text-align: center;
-  text-decoration: none;
-  transition: var(--op-transition-input);
-  white-space: nowrap;
-}
-.form-control[type=file].form-control--small::file-selector-button {
-  --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
-}
-.form-control:disabled {
-  cursor: not-allowed;
-  opacity: var(--_op-form-control-opacity-disabled);
-}
-.form-control[readonly] {
-  padding: 0;
-  background: transparent;
-  box-shadow: none;
-  color: var(--op-color-on-background);
-  pointer-events: none;
-  user-select: none;
-  /* stylelint-disable selector-no-vendor-prefix */
-  /* stylelint-enable selector-no-vendor-prefix */
-}
-.form-control[readonly]::-webkit-input-placeholder {
-  color: var(--op-color-on-background);
+  padding-inline-end: var(--op-space-3x-large);
 }
 
 select.form-control[multiple] {
@@ -2985,49 +2998,12 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   min-height: var(--__op-form-control-height);
 }
 
-.form-group--error {
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.form-group--error .form-control {
-  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
-}
-.form-group--error .form-control[type=radio], .form-group--error .form-control[type=checkbox] {
-  box-shadow: none;
-}
-.form-group--error .form-control[type=radio] + label, .form-group--error .form-control[type=checkbox] + label {
-  color: var(--op-color-alerts-danger-minus-three);
-  font-weight: var(--op-font-weight-bold);
-}
-.form-group--error .form-control:hover:not(:disabled, [readonly]) {
-  background-color: var(--op-color-alerts-danger-plus-seven);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
-  color: var(--op-color-alerts-danger-on-plus-seven);
-}
-.form-group--error .form-control[readonly] {
-  box-shadow: none;
-}
-.form-group--error .form-control:focus-visible:not([readonly]) {
-  background-color: var(--op-color-alerts-danger-plus-seven);
-  box-shadow: var(--op-input-focus-danger);
-  color: var(--op-color-alerts-danger-on-plus-seven);
-}
-.form-group--error .form-control.form-control--no-border {
-  border-radius: 0;
-  box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
-}
-.form-group--error .form-control.form-control--no-border[readonly] {
-  box-shadow: none;
-}
-.form-group--error .form-control.form-control--no-border:focus-visible:not([readonly]) {
-  background-color: var(--op-color-alerts-danger-plus-seven);
-  box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-plus-seven);
-}
-.form-group--error .form-control.form-control--no-border:hover:not(:disabled, [readonly]) {
-  background-color: var(--op-color-alerts-danger-plus-eight);
-  box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-plus-eight);
+.form-label {
+  color: var(--op-color-on-background);
+  font-size: var(--op-font-x-small);
+  font-weight: var(--op-font-weight-normal);
+  letter-spacing: var(--op-letter-spacing-label);
+  line-height: var(--op-line-height-base);
 }
 
 .form-error {
@@ -3045,59 +3021,114 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
 .form-error-summary {
   padding: var(--op-space-large);
   border-radius: var(--op-radius-large);
-  margin-bottom: var(--op-space-large);
   background-color: var(--op-color-alerts-danger-plus-seven);
   box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
   color: var(--op-color-alerts-danger-on-plus-seven);
-}
-.form-error-summary h2 {
-  font-size: var(--op-font-medium);
-}
-.form-error-summary ul {
-  margin-bottom: 0;
+  margin-block-end: var(--op-space-large);
+  h2 {
+    font-size: var(--op-font-medium);
+  }
+  ul {
+    margin-block-end: 0;
+  }
 }
 
 .form-group {
   display: grid;
   align-content: baseline;
-  padding: var(--op-space-small) 0;
   gap: var(--op-space-x-small);
   grid-auto-rows: auto;
   grid-template-columns: auto 1fr;
+  padding-block: var(--op-space-small) 0;
+  padding-inline: 0;
+  /* Group Alignment */
   /* stylelint-disable no-descending-specificity */
+  .form-label,
+  .form-error,
+  .form-hint,
+  .form-control:not([type=radio], [type=checkbox]) {
+    grid-column: 1/3;
+  }
   /* stylelint-enable no-descending-specificity */
-}
-.form-group .form-label,
-.form-group .form-error,
-.form-group .form-hint,
-.form-group .form-control:not([type=radio], [type=checkbox]) {
-  grid-column: 1/3;
-}
-.form-group .form-control[type=radio],
-.form-group .form-control[type=checkbox] {
-  grid-column: 1/1;
-}
-.form-group .form-control[type=radio] + .form-label,
-.form-group .form-control[type=checkbox] + .form-label {
-  grid-column: 2/3;
-  grid-row: 1;
+  .form-control[type=radio],
+  .form-control[type=checkbox] {
+    grid-column: 1/1;
+    & + .form-label {
+      grid-column: 2/3;
+      grid-row: 1;
+    }
+  }
 }
 
 .form-group--inline {
   align-items: center;
+  /* Group Alignment */
   /* stylelint-disable no-descending-specificity */
+  .form-label {
+    grid-column: unset;
+  }
+  .form-error,
+  .form-hint {
+    grid-column: 1/3;
+  }
+  .form-control:not([type=radio], [type=checkbox]),
+  .switch {
+    grid-column: unset;
+  }
   /* stylelint-enable no-descending-specificity */
 }
-.form-group--inline .form-label {
-  grid-column: unset;
-}
-.form-group--inline .form-error,
-.form-group--inline .form-hint {
-  grid-column: 1/3;
-}
-.form-group--inline .form-control:not([type=radio], [type=checkbox]),
-.form-group--inline .switch {
-  grid-column: unset;
+
+.form-group--error {
+  /* stylelint-disable no-descending-specificity */
+  .form-control {
+    box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
+    &[type=radio],
+    &[type=checkbox] {
+      box-shadow: none;
+      & + label {
+        color: var(--op-color-alerts-danger-minus-three);
+        font-weight: var(--op-font-weight-bold);
+      }
+    }
+    /* Error + Hover State */
+    &:hover:not(:disabled, [readonly]) {
+      background-color: var(--op-color-alerts-danger-plus-seven);
+      box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-two);
+      color: var(--op-color-alerts-danger-on-plus-seven);
+    }
+    /* Readonly State */
+    &[readonly] {
+      box-shadow: none;
+    }
+    /* Error + Focus State */
+    &:focus-visible:not([readonly]) {
+      background-color: var(--op-color-alerts-danger-plus-seven);
+      box-shadow: var(--op-input-focus-danger);
+      color: var(--op-color-alerts-danger-on-plus-seven);
+    }
+    /* Borderless State */
+    &.form-control--no-border {
+      border-radius: 0;
+      box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+      /* Readonly State */
+      &[readonly] {
+        box-shadow: none;
+      }
+      /* Borderless + Focus State */
+      &:focus-visible:not([readonly]) {
+        background-color: var(--op-color-alerts-danger-plus-seven);
+        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+        color: var(--op-color-alerts-danger-on-plus-seven);
+      }
+      /* Borderless + Hover State */
+      &:hover:not(:disabled, [readonly]) {
+        background-color: var(--op-color-alerts-danger-plus-eight);
+        box-shadow: var(--op-border-bottom) var(--op-color-alerts-danger-base);
+        color: var(--op-color-alerts-danger-on-plus-eight);
+      }
+    }
+  }
+  /* stylelint-enable no-descending-specificity */
 }
 
 .material-symbols-outlined,
@@ -3132,7 +3163,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   --op-mso-weight: var(--op-font-weight-semi-bold);
 }
 
-.icon--weight-bold, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined {
+.icon--weight-bold {
   --op-mso-weight: var(--op-font-weight-bold);
 }
 
@@ -3153,7 +3184,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   --op-mso-optical-sizing: 20;
 }
 
-.icon--large, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined {
+.icon--large {
   font-size: var(--op-font-large);
   --op-mso-optical-sizing: 40;
 }
@@ -3172,7 +3203,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   font-size: var(--op-font-small);
   --op-mso-optical-sizing: 20;
 }
-.custom-icons.icon--large, .sidebar-primary .sidebar__content > * .custom-icons.material-symbols-outlined, .sidebar .sidebar__content > * .custom-icons.material-symbols-outlined {
+.custom-icons.icon--large {
   width: var(--op-font-large);
   height: var(--op-font-large);
 }
@@ -3387,21 +3418,27 @@ dialog.modal {
   }
 }
 
-.sidebar-primary, .sidebar {
+.sidebar {
+  /* Public API (customizable component options) */
+  /* Normal */
   --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
   --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
   --_op-sidebar-border-color: var(--op-color-neutral-plus-four);
-  --_op-sidebar-rail-width: calc(22 * var(--op-size-unit));
-  --_op-sidebar-compact-width: calc(42 * var(--op-size-unit));
-  --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit));
-  --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit));
-  --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit));
-  --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit));
+  /* Width */
+  --_op-sidebar-rail-width: calc(22 * var(--op-size-unit)); /* 88px */
+  --_op-sidebar-compact-width: calc(42 * var(--op-size-unit)); /* 168px */
+  --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit)); /* 216px */
+  --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit)); /* 76px */
+  --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
+  --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
+  /* Spacing */
   --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
   --_op-sidebar-brand-spacing: var(--op-space-medium);
   --_op-sidebar-content-spacing: var(--op-space-x-small);
   --_op-sidebar-content-item-spacing: var(--op-space-2x-small);
+  /* Animation */
   --_op-sidebar-transition: var(--op-transition-sidebar);
+  /* Private API (component option defaults) */
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
   --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
   z-index: var(--op-z-index-sidebar);
@@ -3414,135 +3451,89 @@ dialog.modal {
   color: var(--_op-sidebar-text-color);
   overflow-y: auto;
   transition: var(--_op-sidebar-transition);
-}
-.sidebar-primary .sidebar__brand, .sidebar .sidebar__brand {
-  height: var(--__op-sidebar-brand-width);
-  padding: var(--_op-sidebar-brand-spacing);
-  margin: 0 auto;
-}
-.sidebar-primary .sidebar__brand img, .sidebar .sidebar__brand img {
-  height: 100%;
-}
-.sidebar-primary .sidebar__content, .sidebar .sidebar__content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0 var(--_op-sidebar-content-spacing);
-  gap: var(--_op-sidebar-content-item-spacing);
-}
-.sidebar-primary .sidebar__content > *, .sidebar .sidebar__content > * {
-  justify-content: flex-start;
-}
-.sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined {
-  /* stylelint-disable scss/at-extend-no-missing-placeholder */
-  /* stylelint-enable scss/at-extend-no-missing-placeholder */
-}
-.sidebar-primary .sidebar__content.sidebar__content--start, .sidebar .sidebar__content.sidebar__content--start {
-  justify-content: start;
-}
-.sidebar-primary .sidebar__content.sidebar__content--center, .sidebar .sidebar__content.sidebar__content--center {
-  justify-content: center;
-}
-.sidebar-primary .sidebar__content.sidebar__content--end, .sidebar .sidebar__content.sidebar__content--end {
-  justify-content: end;
-}
-.sidebar--padded.sidebar-primary, .sidebar--padded.sidebar {
-  padding: var(--_op-sidebar-spacing) 0;
-}
-.sidebar--drawer.sidebar-primary:not(.sidebar--responsive), .sidebar--drawer.sidebar:not(.sidebar--responsive) {
-  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
-  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
-}
-@media (width > 1024px) {
-  .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
-    --__op-sidebar-width: var(--_op-sidebar-drawer-width);
-    --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
+  /* Elements */
+  .sidebar__brand {
+    height: var(--__op-sidebar-brand-width);
+    padding: var(--_op-sidebar-brand-spacing);
+    margin-inline: auto;
+    img {
+      height: 100%;
+    }
   }
-}
-@media (width <= 1024px) {
-  .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
-    --__op-sidebar-width: var(--_op-sidebar-rail-width);
-    --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
+  .sidebar__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: var(--_op-sidebar-content-item-spacing);
+    padding-inline: var(--_op-sidebar-content-spacing);
+    > * {
+      justify-content: flex-start;
+      .material-symbols-outlined {
+        --op-mso-optical-sizing: 40;
+        --op-mso-weight: var(--op-font-weight-bold);
+        font-size: var(--op-font-large);
+      }
+    }
+    &.sidebar__content--start {
+      justify-content: start;
+    }
+    &.sidebar__content--center {
+      justify-content: center;
+    }
+    &.sidebar__content--end {
+      justify-content: end;
+    }
   }
-  .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content {
-    align-items: center;
+  /* Modifiers */
+  &.sidebar--padded {
+    padding-block: var(--_op-sidebar-spacing);
   }
-  .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content > *, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content > * {
-    width: var(--__op-btn-height);
-    min-width: var(--__op-btn-height);
-    justify-content: center;
-    padding: 0;
-    font-size: 0;
-    gap: 0;
+  /* Drawer Modifier */
+  &.sidebar--drawer {
+    /* Private API */
+    --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+    --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
   }
-}
-.sidebar--compact.sidebar-primary:not(.sidebar--responsive), .sidebar--compact.sidebar:not(.sidebar--responsive) {
-  --__op-sidebar-width: var(--_op-sidebar-compact-width);
-  --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
-}
-.sidebar--compact.sidebar-primary:not(.sidebar--responsive) .sidebar__content > *, .sidebar--compact.sidebar:not(.sidebar--responsive) .sidebar__content > * {
-  flex-direction: column;
-  padding: var(--op-space-small);
-  gap: var(--op-space-3x-small);
-}
-@media (width > 1024px) {
-  .sidebar--compact.sidebar--responsive.sidebar-primary, .sidebar--compact.sidebar--responsive.sidebar {
+  /* Compact Modifier */
+  &.sidebar--compact {
+    /* Private API (component option defaults) */
     --__op-sidebar-width: var(--_op-sidebar-compact-width);
     --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
+    /* Elements */
+    .sidebar__content {
+      > * {
+        /* Need to get icon-with-label behavior */
+        flex-direction: column;
+        padding: var(--op-space-small);
+        gap: var(--op-space-3x-small);
+      }
+    }
   }
-  .sidebar--compact.sidebar--responsive.sidebar-primary .sidebar__content > *, .sidebar--compact.sidebar--responsive.sidebar .sidebar__content > * {
-    flex-direction: column;
-    padding: var(--op-space-small);
-    gap: var(--op-space-3x-small);
-  }
-}
-@media (width <= 1024px) {
-  .sidebar--compact.sidebar--responsive.sidebar-primary, .sidebar--compact.sidebar--responsive.sidebar {
+  &.sidebar--rail {
+    /* Private API (component option defaults) */
     --__op-sidebar-width: var(--_op-sidebar-rail-width);
     --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
+    /* Elements */
+    .sidebar__content {
+      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;
+      }
+    }
   }
-  .sidebar--compact.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--compact.sidebar--responsive.sidebar .sidebar__content {
-    align-items: center;
-  }
-  .sidebar--compact.sidebar--responsive.sidebar-primary .sidebar__content > *, .sidebar--compact.sidebar--responsive.sidebar .sidebar__content > * {
-    width: var(--__op-btn-height);
-    min-width: var(--__op-btn-height);
-    justify-content: center;
-    padding: 0;
-    font-size: 0;
-    gap: 0;
+  /* Primary */
+  .sidebar--primary {
+    --_op-sidebar-background-color: var(--op-color-primary-plus-six);
+    --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
+    --_op-sidebar-border-color: var(--op-color-primary-plus-four);
   }
 }
-.sidebar--rail.sidebar-primary, .sidebar--rail.sidebar {
-  --__op-sidebar-width: var(--_op-sidebar-rail-width);
-  --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
-}
-.sidebar--rail.sidebar-primary .sidebar__content, .sidebar--rail.sidebar .sidebar__content {
-  align-items: center;
-}
-.sidebar--rail.sidebar-primary .sidebar__content > *, .sidebar--rail.sidebar .sidebar__content > * {
-  width: var(--__op-btn-height);
-  min-width: var(--__op-btn-height);
-  justify-content: center;
-  padding: 0;
-  font-size: 0;
-  gap: 0;
-}
-.sidebar--compact.sidebar-primary, .sidebar--compact.sidebar {
-  --__op-sidebar-width: var(--_op-sidebar-compact-width);
-  --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
-}
-.sidebar--compact.sidebar-primary .sidebar__content > *, .sidebar--compact.sidebar .sidebar__content > * {
-  flex-direction: column;
-  padding: var(--op-space-small);
-  gap: var(--op-space-3x-small);
-}
-
-.sidebar-primary {
-  --_op-sidebar-background-color: var(--op-color-primary-plus-six);
-  --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
-  --_op-sidebar-border-color: var(--op-color-primary-plus-four);
-}
 
 .side-panel {
   /* Public API (customizable component options) */