@rolemodel/optics 0.3.1 → 0.4.1

package/dist/css/optics.css

@@ -228,8 +228,8 @@ select {
   /**
   * @tokens Encoded Images
   */
-  --op-form-dropdown-arrow-width: 1rem;
-  --op-form-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
+  --op-encoded-images-dropdown-arrow-width: var(--op-space-scale-unit);
+  --op-encoded-images-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
   /**
   * @tokens Space Scale
   * @presenter Spacing
@@ -278,9 +278,14 @@ select {
   * @tokens Input Focus
   * @presenter Shadow
   */
-  --op-input-outer-focus: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four);
-  --op-input-inner-focus: inset var(--op-border-all) var(--op-color-primary-minus-three);
-  --op-input-focus: var(--op-input-inner-focus), var(--op-input-outer-focus);
+  --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),
+    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
+  --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),
+    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
 }
 
 @keyframes rm-slide-in-out-flash {
@@ -2092,128 +2097,224 @@ small {
   }
 }
 
-.alert-notice, .alert-info, .alert-danger, .alert-warning {
+.alert-notice, .alert-info, .alert-danger,
+.alert-alert, .alert-warning {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   padding: var(--op-space-x-small) var(--op-space-medium);
   border-radius: var(--op-radius-medium);
   gap: var(--op-space-small);
 }
-.alert-notice .alert__icon, .alert-info .alert__icon, .alert-danger .alert__icon, .alert-warning .alert__icon {
+.alert-notice .alert__icon, .alert-info .alert__icon, .alert-danger .alert__icon,
+.alert-alert .alert__icon, .alert-warning .alert__icon {
   /* stylelint-disable scss/at-extend-no-missing-placeholder */
   /* stylelint-enable scss/at-extend-no-missing-placeholder */
   line-height: var(--op-line-height-dense);
 }
-.alert-notice .alert__messages, .alert-info .alert__messages, .alert-danger .alert__messages, .alert-warning .alert__messages {
+.alert-notice .alert__messages, .alert-info .alert__messages, .alert-danger .alert__messages,
+.alert-alert .alert__messages, .alert-warning .alert__messages {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: var(--op-space-2x-small);
 }
-.alert-notice .alert__title, .alert-info .alert__title, .alert-danger .alert__title, .alert-warning .alert__title {
+.alert-notice .alert__title, .alert-info .alert__title, .alert-danger .alert__title,
+.alert-alert .alert__title, .alert-warning .alert__title {
   font-size: var(--op-font-medium);
   font-weight: var(--op-font-weight-medium);
 }
-.alert-notice .alert__description, .alert-info .alert__description, .alert-danger .alert__description, .alert-warning .alert__description {
+.alert-notice .alert__description, .alert-info .alert__description, .alert-danger .alert__description,
+.alert-alert .alert__description, .alert-warning .alert__description {
   font-size: var(--op-font-small);
 }
+.alert--flash.alert-notice, .alert--flash.alert-info, .alert--flash.alert-danger,
+.alert--flash.alert-alert, .alert--flash.alert-warning {
+  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);
+}
 
 .alert-warning {
-  background-color: var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-on-base);
+  background-color: var(--op-color-alerts-warning-plus-eight);
+  box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
+  color: var(--op-color-alerts-warning-on-plus-eight);
 }
 .alert-warning .alert__title {
-  color: var(--op-color-alerts-warning-on-plus-one);
+  color: var(--op-color-alerts-warning-on-plus-eight-alt);
 }
 .alert-warning.alert--muted {
   background-color: var(--op-color-alerts-warning-plus-five);
+  box-shadow: none;
   color: var(--op-color-alerts-warning-on-plus-five);
 }
 .alert-warning.alert--muted .alert__title {
-  color: var(--op-color-alerts-warning-on-plus-six);
+  color: var(--op-color-alerts-warning-on-plus-five-alt);
 }
-.alert-warning.alert--outlined {
-  background-color: var(--op-color-alerts-warning-plus-eight);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-on-plus-five);
+.alert-warning.alert--filled {
+  background-color: var(--op-color-alerts-warning-base);
+  box-shadow: none;
+  color: var(--op-color-alerts-warning-on-base);
 }
-.alert-warning.alert--outlined .alert__title {
-  color: var(--op-color-alerts-warning-on-plus-four);
+.alert-warning.alert--filled .alert__title {
+  color: var(--op-color-alerts-warning-on-base-alt);
 }
 
-.alert-danger {
-  background-color: var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-base);
+.alert-danger,
+.alert-alert {
+  background-color: var(--op-color-alerts-danger-plus-eight);
+  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
+  color: var(--op-color-alerts-danger-on-plus-eight);
   /* stylelint-disable no-descending-specificity */
   /* stylelint-enable no-descending-specificity */
 }
-.alert-danger .alert__title {
-  color: var(--op-color-alerts-danger-on-plus-one);
+.alert-danger .alert__title,
+.alert-alert .alert__title {
+  color: var(--op-color-alerts-danger-on-plus-eight-alt);
 }
-.alert-danger.alert--muted {
+.alert-danger.alert--muted,
+.alert-alert.alert--muted {
   background-color: var(--op-color-alerts-danger-plus-five);
+  box-shadow: none;
   color: var(--op-color-alerts-danger-on-plus-five);
 }
-.alert-danger.alert--muted .alert__title {
-  color: var(--op-color-alerts-danger-on-plus-six);
+.alert-danger.alert--muted .alert__title,
+.alert-alert.alert--muted .alert__title {
+  color: var(--op-color-alerts-danger-on-plus-five-alt);
 }
-.alert-danger.alert--outlined {
-  background-color: var(--op-color-alerts-danger-plus-eight);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-plus-five);
+.alert-danger.alert--filled,
+.alert-alert.alert--filled {
+  background-color: var(--op-color-alerts-danger-base);
+  box-shadow: none;
+  color: var(--op-color-alerts-danger-on-base);
 }
-.alert-danger.alert--outlined .alert__title {
-  color: var(--op-color-alerts-danger-on-plus-four);
+.alert-danger.alert--filled .alert__title,
+.alert-alert.alert--filled .alert__title {
+  color: var(--op-color-alerts-danger-on-base-alt);
 }
 
 .alert-info {
-  background-color: var(--op-color-alerts-info-base);
-  color: var(--op-color-alerts-info-on-base);
+  background-color: var(--op-color-alerts-info-plus-eight);
+  box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
+  color: var(--op-color-alerts-info-on-plus-eight);
   /* stylelint-disable no-descending-specificity */
   /* stylelint-enable no-descending-specificity */
 }
 .alert-info .alert__title {
-  color: var(--op-color-alerts-info-on-plus-one);
+  color: var(--op-color-alerts-info-on-plus-eight-alt);
 }
 .alert-info.alert--muted {
   background-color: var(--op-color-alerts-info-plus-five);
+  box-shadow: none;
   color: var(--op-color-alerts-info-on-plus-five);
 }
 .alert-info.alert--muted .alert__title {
-  color: var(--op-color-alerts-info-on-plus-six);
+  color: var(--op-color-alerts-info-on-plus-five-alt);
 }
-.alert-info.alert--outlined {
-  background-color: var(--op-color-alerts-info-plus-eight);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-info-base);
-  color: var(--op-color-alerts-info-on-plus-five);
+.alert-info.alert--filled {
+  background-color: var(--op-color-alerts-info-base);
+  box-shadow: none;
+  color: var(--op-color-alerts-info-on-base);
 }
-.alert-info.alert--outlined .alert__title {
-  color: var(--op-color-alerts-info-on-plus-four);
+.alert-info.alert--filled .alert__title {
+  color: var(--op-color-alerts-info-on-base-alt);
 }
 
 .alert-notice {
-  background-color: var(--op-color-alerts-notice-base);
-  color: var(--op-color-alerts-notice-on-base);
+  background-color: var(--op-color-alerts-notice-plus-eight);
+  box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
+  color: var(--op-color-alerts-notice-on-plus-eight);
   /* stylelint-disable no-descending-specificity */
   /* stylelint-enable no-descending-specificity */
 }
 .alert-notice .alert__title {
-  color: var(--op-color-alerts-notice-on-plus-one);
+  color: var(--op-color-alerts-notice-on-plus-eight-alt);
 }
 .alert-notice.alert--muted {
   background-color: var(--op-color-alerts-notice-plus-five);
+  box-shadow: none;
   color: var(--op-color-alerts-notice-on-plus-five);
 }
 .alert-notice.alert--muted .alert__title {
-  color: var(--op-color-alerts-notice-on-plus-six);
+  color: var(--op-color-alerts-notice-on-plus-five-alt);
 }
-.alert-notice.alert--outlined {
-  background-color: var(--op-color-alerts-notice-plus-eight);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-notice-base);
-  color: var(--op-color-alerts-notice-on-plus-five);
+.alert-notice.alert--filled {
+  background-color: var(--op-color-alerts-notice-base);
+  box-shadow: none;
+  color: var(--op-color-alerts-notice-on-base);
+}
+.alert-notice.alert--filled .alert__title {
+  color: var(--op-color-alerts-notice-on-base-alt);
+}
+
+.avatar {
+  --_op-avatar-border-radius: var(--op-radius-circle);
+  --_op-avatar-inner-border-color: var(--op-color-neutral-minus-max);
+  --_op-avatar-outer-border-color: var(--op-color-neutral-base);
+  --_op-avatar-inner-border-width: calc(var(--op-border-width) + var(--op-border-width-large));
+  --_op-avatar-outer-border-width: var(--op-border-width-large);
+  --_op-avatar-disabled-opacity: 0.4;
+  --_op-avatar-hover-opacity: 0.2;
+  --_op-avatar-size-small: 3.2rem;
+  --_op-avatar-size-medium: 4rem;
+  --_op-avatar-size-large: 5.6rem;
+  --__op-avatar-size: var(--_op-avatar-size-large);
+  position: relative;
+  z-index: 1;
+  display: block;
+  overflow: hidden;
+  width: var(--__op-avatar-size);
+  height: var(--__op-avatar-size);
+  border-radius: var(--_op-avatar-border-radius);
+}
+.avatar::before {
+  position: absolute;
+  z-index: 2;
+  content: "";
+  inset: 0;
 }
-.alert-notice.alert--outlined .alert__title {
-  color: var(--op-color-alerts-notice-on-plus-four);
+.avatar::after {
+  position: absolute;
+  z-index: 3;
+  border-radius: var(--_op-avatar-border-radius);
+  box-shadow: inset 0 0 0 var(--_op-avatar-outer-border-width) var(--_op-avatar-outer-border-color), inset 0 0 0 var(--_op-avatar-inner-border-width) var(--_op-avatar-inner-border-color);
+  content: "";
+  inset: 0;
+}
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.avatar--disabled.avatar {
+  opacity: var(--_op-avatar-disabled-opacity);
+  pointer-events: none;
+}
+.avatar:hover:not(div, .avatar--disabled) {
+  --_op-avatar-inner-border-color: var(--op-color-primary-base);
+  --_op-avatar-outer-border-color: var(--op-color-primary-plus-one);
+  cursor: pointer;
+}
+.avatar:hover:not(div, .avatar--disabled)::before {
+  background-color: var(--op-color-primary-base);
+  opacity: var(--_op-avatar-hover-opacity);
+}
+.avatar:focus, .avatar:focus-visible, .avatar:focus-within {
+  outline: none;
+}
+.avatar:focus-visible:not(.avatar--disabled) {
+  --_op-avatar-outer-border-color: var(--op-color-primary-base);
+  cursor: pointer;
+}
+.avatar--small.avatar {
+  --__op-avatar-size: var(--_op-avatar-size-small);
+}
+.avatar--medium.avatar {
+  --__op-avatar-size: var(--_op-avatar-size-medium);
+}
+.avatar--large.avatar {
+  --__op-avatar-size: var(--_op-avatar-size-large);
 }
 
 .badge-notice, .badge-info, .badge-danger, .badge-warning, .badge-primary, .badge {
@@ -2226,19 +2327,23 @@ small {
   color: var(--op-color-neutral-on-base);
   cursor: inherit;
   font-size: var(--op-font-x-small);
-  font-weight: var(--op-font-weight-semi-bold);
-  gap: var(--op-space-3x-small);
+  font-weight: var(--op-font-weight-bold);
+  gap: var(--op-space-x-small);
   letter-spacing: var(--op-letter-spacing-label);
-  line-height: var(--op-line-height-densest);
+  line-height: var(--op-line-height-dense);
   user-select: none;
   white-space: nowrap;
 }
+.badge-notice .material-symbols-outlined, .badge-info .material-symbols-outlined, .badge-danger .material-symbols-outlined, .badge-warning .material-symbols-outlined, .badge-primary .material-symbols-outlined, .badge .material-symbols-outlined {
+  font-size: var(--op-font-small);
+}
 .badge--pill.badge-notice, .badge--pill.badge-info, .badge--pill.badge-danger, .badge--pill.badge-warning, .badge--pill.badge-primary, .badge--pill.badge {
   border-radius: var(--op-radius-pill);
 }
 .badge--notification-right.badge-notice, .badge--notification-right.badge-info, .badge--notification-right.badge-danger, .badge--notification-right.badge-warning, .badge--notification-right.badge-primary, .badge--notification-right.badge {
   position: absolute;
   top: 0;
+  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
   pointer-events: none;
   right: 0;
   transform: translateY(-50%) translateX(50%);
@@ -2246,6 +2351,7 @@ small {
 .badge--notification-left.badge-notice, .badge--notification-left.badge-info, .badge--notification-left.badge-danger, .badge--notification-left.badge-warning, .badge--notification-left.badge-primary, .badge--notification-left.badge {
   position: absolute;
   top: 0;
+  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
   pointer-events: none;
   left: 0;
   transform: translateY(-50%) translateX(-50%);
@@ -2276,214 +2382,297 @@ small {
   color: var(--op-color-alerts-notice-on-base);
 }
 
-.btn--outline.btn-delete:focus, .btn--outline.btn-secondary:focus, .btn--outline.btn-primary:focus, .btn--outline.btn:focus, .btn--outline.btn-delete:focus-within, .btn--outline.btn-secondary:focus-within, .btn--outline.btn-primary:focus-within, .btn--outline.btn:focus-within, .btn--outline.btn-delete:focus-visible, .btn--outline.btn-secondary:focus-visible, .btn--outline.btn-primary:focus-visible, .btn--outline.btn:focus-visible, .btn--no-border.btn-delete:focus, .btn--no-border.btn-secondary:focus, .btn--no-border.btn-primary:focus, .btn--no-border.btn:focus, .btn--no-border.btn-delete:focus-within, .btn--no-border.btn-secondary:focus-within, .btn--no-border.btn-primary:focus-within, .btn--no-border.btn:focus-within, .btn--no-border.btn-delete:focus-visible, .btn--no-border.btn-secondary:focus-visible, .btn--no-border.btn-primary:focus-visible, .btn--no-border.btn:focus-visible, .btn-delete:focus, .btn-secondary:focus, .btn-primary:focus, .btn:focus, .btn-delete:focus-within, .btn-secondary:focus-within, .btn-primary:focus-within, .btn:focus-within, .btn-delete:focus-visible, .btn-secondary:focus-visible, .btn-primary:focus-visible, .btn:focus-visible {
-  box-shadow: var(--op-input-focus);
-  outline: none;
-}
-
-.btn-delete, .btn-secondary, .btn-primary, .btn {
+.btn-warning, .btn-delete, .btn-primary, .btn {
   --_op-btn-height-small: var(--op-input-height-small);
   --_op-btn-height-medium: var(--op-input-height-medium);
   --_op-btn-height-large: var(--op-input-height-large);
   --_op-btn-font-small: var(--op-font-x-small);
   --_op-btn-font-medium: var(--op-font-small);
-  --_op-btn-font-large: var(--op-font-medium);
-  --__op-btn-height: var(--_op-btn-height-medium);
-  --__op-btn-font-size: var(--_op-btn-font-medium);
+  --_op-btn-font-large: var(--op-font-small);
+  --_op-btn-padding-small: 0 var(--op-space-x-small);
+  --_op-btn-padding-medium: 0 var(--op-space-small);
+  --_op-btn-padding-large: 0 var(--op-space-small);
+  --__op-btn-height: var(--_op-btn-height-large);
+  --__op-btn-font-size: var(--_op-btn-font-large);
+  --__op-btn-padding: var(--_op-btn-padding-large);
   display: inline-flex;
-  height: var(--__op-btn-height);
+  min-height: var(--__op-btn-height);
   align-items: center;
   justify-content: center;
-  padding: 0 var(--op-space-medium);
-  border-radius: var(--op-radius-large);
+  padding: var(--__op-btn-padding);
+  border-radius: var(--op-radius-medium);
   appearance: none;
   cursor: pointer;
   font-size: var(--__op-btn-font-size);
-  font-weight: var(--op-font-weight-medium);
+  font-weight: var(--op-font-weight-normal);
   gap: var(--op-space-x-small);
   text-align: center;
   text-decoration: none;
   transition: var(--op-transition-input);
   white-space: nowrap;
 }
-.btn--pill.btn-delete, .btn--pill.btn-secondary, .btn--pill.btn-primary, .btn--pill.btn {
+.btn--pill.btn-warning, .btn--pill.btn-delete, .btn--pill.btn-primary, .btn--pill.btn {
   border-radius: var(--op-radius-pill);
 }
-.btn--icon.btn-delete, .btn--icon.btn-secondary, .btn--icon.btn-primary, .btn--icon.btn {
+.btn--icon.btn-warning, .btn--icon.btn-delete, .btn--icon.btn-primary, .btn--icon.btn {
   width: var(--__op-btn-height);
   min-width: var(--__op-btn-height);
   padding: 0;
-  border-radius: var(--op-radius-circle);
 }
-.btn--small.btn-delete, .btn--small.btn-secondary, .btn--small.btn-primary, .btn--small.btn {
+.btn--icon-with-label.btn-warning, .btn--icon-with-label.btn-delete, .btn--icon-with-label.btn-primary, .btn--icon-with-label.btn {
+  flex-direction: column;
+  padding: var(--op-space-small);
+  gap: var(--op-space-3x-small);
+}
+.btn--small.btn-warning, .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn {
   --__op-btn-height: var(--_op-btn-height-small);
   --__op-btn-font-size: var(--_op-btn-font-small);
+  --__op-btn-padding: var(--_op-btn-padding-small);
 }
-.btn--medium.btn-delete, .btn--medium.btn-secondary, .btn--medium.btn-primary, .btn--medium.btn {
+.btn--medium.btn-warning, .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn {
   --__op-btn-height: var(--_op-btn-height-medium);
   --__op-btn-font-size: var(--_op-btn-font-medium);
+  --__op-btn-padding: var(--_op-btn-padding-medium);
 }
-.btn--large.btn-delete, .btn--large.btn-secondary, .btn--large.btn-primary, .btn--large.btn {
+.btn--large.btn-warning, .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
   --__op-btn-height: var(--_op-btn-height-large);
   --__op-btn-font-size: var(--_op-btn-font-large);
+  --__op-btn-padding: var(--_op-btn-padding-large);
 }
-.btn--disabled.btn-delete, .btn--disabled.btn-secondary, .btn--disabled.btn-primary, .btn--disabled.btn, .btn-delete:disabled, .btn-secondary:disabled, .btn-primary:disabled, .btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.65;
+.btn--disabled.btn-warning, .btn--disabled.btn-delete, .btn--disabled.btn-primary, .btn--disabled.btn, .btn-warning:disabled, .btn-delete:disabled, .btn-primary:disabled, .btn:disabled {
+  opacity: 0.44;
+  pointer-events: none;
+  -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
+  user-select: none;
 }
-.btn--with-badge.btn-delete, .btn--with-badge.btn-secondary, .btn--with-badge.btn-primary, .btn--with-badge.btn {
+.btn--with-badge.btn-warning, .btn--with-badge.btn-delete, .btn--with-badge.btn-primary, .btn--with-badge.btn {
   position: relative;
 }
+.btn-warning:focus, .btn-delete:focus, .btn-primary:focus, .btn:focus, .btn-warning:focus-within, .btn-delete:focus-within, .btn-primary:focus-within, .btn:focus-within, .btn-warning:focus-visible, .btn-delete:focus-visible, .btn-primary:focus-visible, .btn:focus-visible {
+  outline: none;
+}
 @media (max-width: 768px) {
-  .btn-delete, .btn-secondary, .btn-primary, .btn {
+  .btn-warning, .btn-delete, .btn-primary, .btn {
     --__op-btn-height: var(--_op-btn-height-large);
     --__op-btn-font-size: var(--_op-btn-font-large);
   }
-  .btn--small.btn-delete, .btn--small.btn-secondary, .btn--small.btn-primary, .btn--small.btn, .btn--medium.btn-delete, .btn--medium.btn-secondary, .btn--medium.btn-primary, .btn--medium.btn, .btn--large.btn-delete, .btn--large.btn-secondary, .btn--large.btn-primary, .btn--large.btn {
+  .btn--small.btn-warning, .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn, .btn--medium.btn-warning, .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn, .btn--large.btn-warning, .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
     --__op-btn-height: var(--_op-btn-height-large);
     --__op-btn-font-size: var(--_op-btn-font-large);
+    --__op-btn-padding: var(--_op-btn-padding-large);
   }
 }
 
 .btn {
-  background-color: transparent;
-  box-shadow: var(--op-border-all) var(--op-border-color);
-  color: var(--op-color-neutral-minus-max);
+  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);
 }
-.btn:not(:disabled, .btn--disabled):hover {
-  background-color: var(--op-color-neutral-plus-seven);
-  color: var(--op-color-neutral-on-plus-seven);
+.btn.btn--active {
+  background-color: var(--op-color-primary-plus-five);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+  color: var(--op-color-primary-on-plus-five);
 }
-.btn.btn--no-border {
-  box-shadow: var(--op-border-all) transparent;
+.btn:hover {
+  background-color: var(--op-color-primary-plus-eight);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+  color: var(--op-color-primary-on-plus-eight);
+}
+.btn:focus-visible {
+  background-color: var(--op-color-neutral-plus-eight);
+  box-shadow: var(--op-input-focus-primary);
+  color: var(--op-color-neutral-on-plus-eight);
 }
-.btn.btn--no-border:not(:disabled, .btn--disabled):hover {
+.btn.btn--no-border {
   background-color: transparent;
-  color: var(--op-color-neutral-minus-three);
+  box-shadow: none;
+  color: var(--op-color-primary-on-plus-max);
+}
+.btn.btn--no-border.btn--active {
+  background-color: var(--op-color-primary-plus-five);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+  color: var(--op-color-primary-on-plus-five);
+}
+.btn.btn--no-border:hover {
+  background-color: var(--op-color-primary-plus-eight);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
+  color: var(--op-color-primary-on-plus-eight);
+}
+.btn.btn--no-border:focus-visible {
+  background-color: var(--op-color-primary-plus-eight);
+  box-shadow: var(--op-input-focus-primary);
+  color: var(--op-color-primary-on-plus-eight);
 }
 
 .btn-primary {
   background-color: var(--op-color-primary-base);
-  box-shadow: var(--op-border-all) var(--op-color-primary-base);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
   color: var(--op-color-primary-on-base);
 }
-.btn-primary:not(:disabled, .btn--disabled):hover {
+.btn-primary.btn--active {
+  background-color: var(--op-color-primary-minus-five);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-two);
+  color: var(--op-color-primary-on-minus-five);
+}
+.btn-primary:hover {
   background-color: var(--op-color-primary-plus-one);
-  box-shadow: var(--op-border-all) var(--op-color-primary-plus-one);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-one);
   color: var(--op-color-primary-on-plus-one);
 }
+.btn-primary:focus-visible {
+  background-color: var(--op-color-primary-base);
+  box-shadow: var(--op-input-focus-primary);
+  color: var(--op-color-primary-on-base);
+}
 .btn-primary.btn--no-border {
   background-color: transparent;
   box-shadow: none;
   color: var(--op-color-primary-base);
 }
-.btn-primary.btn--no-border:not(:disabled, .btn--disabled):hover {
-  background-color: transparent;
-  box-shadow: none;
-  color: var(--op-color-primary-plus-one);
+.btn-primary.btn--no-border.btn--active {
+  background-color: var(--op-color-primary-plus-five);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-three);
+  color: var(--op-color-primary-on-plus-five);
 }
-.btn-primary.btn--outline {
-  background-color: var(--op-color-primary-plus-seven);
-  box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
-  color: var(--op-color-primary-on-plus-seven);
+.btn-primary.btn--no-border:hover {
+  background-color: var(--op-color-primary-plus-eight);
+  box-shadow: inset var(--op-border-all) var(--op-color-primary-plus-five);
+  color: var(--op-color-primary-on-plus-eight);
 }
-.btn-primary.btn--outline:not(:disabled, .btn--disabled):hover {
-  background-color: var(--op-color-primary-plus-four);
-  box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
-  color: var(--op-color-primary-on-plus-four);
+.btn-primary.btn--no-border:focus-visible {
+  background-color: var(--op-color-primary-plus-eight);
+  box-shadow: var(--op-input-focus-primary);
+  color: var(--op-color-primary-on-plus-eight);
 }
 
-.btn-secondary {
-  background-color: var(--op-color-primary-plus-seven);
-  box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
-  color: var(--op-color-primary-on-plus-seven);
-}
-.btn-secondary:not(:disabled, .btn--disabled):hover {
-  background-color: var(--op-color-primary-plus-four);
-  box-shadow: var(--op-border-all) var(--op-color-primary-on-plus-seven);
-  color: var(--op-color-primary-on-plus-four);
+.btn-delete {
+  background-color: var(--op-color-alerts-danger-base);
+  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
+  color: var(--op-color-alerts-danger-on-base);
 }
-.btn-secondary.btn--no-border {
-  background-color: transparent;
-  box-shadow: none;
-  color: var(--op-color-primary-base);
+.btn-delete.btn--active {
+  background-color: var(--op-color-alerts-danger-plus-five);
+  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-three);
+  color: var(--op-color-alerts-danger-on-plus-five);
 }
-.btn-secondary.btn--no-border:not(:disabled, .btn--disabled):hover {
-  background-color: transparent;
-  box-shadow: none;
-  color: var(--op-color-primary-plus-one);
+.btn-delete:hover {
+  background-color: var(--op-color-alerts-danger-minus-two);
+  box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-minus-two);
+  color: var(--op-color-alerts-danger-on-minus-two);
 }
-
-.btn-delete {
+.btn-delete:focus-visible {
   background-color: var(--op-color-alerts-danger-base);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-base);
+  box-shadow: var(--op-input-focus-danger);
   color: var(--op-color-alerts-danger-on-base);
 }
-.btn-delete:not(:disabled, .btn--disabled):hover {
-  background-color: var(--op-color-alerts-danger-plus-one);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-plus-one);
-  color: var(--op-color-alerts-danger-on-plus-one);
+
+.btn-warning {
+  background-color: var(--op-color-alerts-warning-base);
+  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-base);
+  color: var(--op-color-alerts-warning-on-base);
 }
-.btn-delete.btn--no-border {
-  background-color: transparent;
-  box-shadow: none;
-  color: var(--op-color-alerts-danger-base);
+.btn-warning.btn--active {
+  background-color: var(--op-color-alerts-warning-plus-five);
+  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
+  color: var(--op-color-alerts-warning-on-plus-five);
+}
+.btn-warning:hover {
+  background-color: var(--op-color-alerts-warning-minus-two);
+  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-minus-two);
+  color: var(--op-color-alerts-warning-on-minus-two);
+}
+.btn-warning:focus-visible {
+  background-color: var(--op-color-alerts-warning-base);
+  box-shadow: var(--op-input-focus-warning);
+  color: var(--op-color-alerts-warning-on-base);
 }
-.btn-delete.btn--no-border:not(:disabled, .btn--disabled):hover {
+.btn-warning.btn--no-border {
   background-color: transparent;
   box-shadow: none;
-  color: var(--op-color-alerts-danger-plus-one);
+  color: var(--op-color-alerts-warning-on-plus-max);
 }
-.btn-delete.btn--outline {
-  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);
+.btn-warning.btn--no-border.btn--active {
+  background-color: var(--op-color-alerts-warning-plus-five);
+  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-three);
+  color: var(--op-color-alerts-warning-on-plus-five);
 }
-.btn-delete.btn--outline:not(:disabled, .btn--disabled):hover {
-  background-color: var(--op-color-alerts-danger-plus-four);
-  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-on-plus-seven);
-  color: var(--op-color-alerts-danger-on-plus-four);
+.btn-warning.btn--no-border:hover {
+  background-color: var(--op-color-alerts-warning-plus-eight);
+  box-shadow: inset var(--op-border-all) var(--op-color-alerts-warning-plus-five);
+  color: var(--op-color-alerts-warning-on-plus-eight);
+}
+.btn-warning.btn--no-border:focus-visible {
+  background-color: var(--op-color-alerts-warning-plus-eight);
+  box-shadow: var(--op-input-focus-warning);
+  color: var(--op-color-alerts-warning-on-plus-eight);
 }
 
 .btn-group {
+  --op-btn-group-hover-z-index: 1;
+  --op-btn-group-active-z-index: 2;
+  --op-btn-group-focus-z-index: 3;
   display: inline-flex;
   align-items: center;
 }
 .btn-group .btn + .btn,
 .btn-group .btn + .btn-primary,
-.btn-group .btn + .btn-secondary,
 .btn-group .btn + .btn-delete,
+.btn-group .btn + .btn-warning,
 .btn-group .btn-primary + .btn,
 .btn-group .btn-primary + .btn-primary,
-.btn-group .btn-primary + .btn-secondary,
 .btn-group .btn-primary + .btn-delete,
-.btn-group .btn-secondary + .btn,
-.btn-group .btn-secondary + .btn-primary,
-.btn-group .btn-secondary + .btn-secondary,
-.btn-group .btn-secondary + .btn-delete,
+.btn-group .btn-primary + .btn-warning,
 .btn-group .btn-delete + .btn,
 .btn-group .btn-delete + .btn-primary,
-.btn-group .btn-delete + .btn-secondary,
-.btn-group .btn-delete + .btn-delete {
-  margin-left: 1px;
+.btn-group .btn-delete + .btn-delete,
+.btn-group .btn-delete + .btn-warning,
+.btn-group .btn-warning + .btn,
+.btn-group .btn-warning + .btn-primary,
+.btn-group .btn-warning + .btn-delete,
+.btn-group .btn-warning + .btn-warning {
+  margin-left: -1px;
+}
+.btn-group .btn:hover,
+.btn-group .btn-primary:hover,
+.btn-group .btn-delete:hover,
+.btn-group .btn-warning:hover {
+  z-index: var(--op-btn-group-hover-z-index);
+}
+.btn-group .btn.btn--active,
+.btn-group .btn-primary.btn--active,
+.btn-group .btn-delete.btn--active,
+.btn-group .btn-warning.btn--active {
+  z-index: var(--op-btn-group-active-z-index);
+}
+.btn-group .btn:focus, .btn-group .btn:focus-within, .btn-group .btn:focus-visible,
+.btn-group .btn-primary:focus,
+.btn-group .btn-primary:focus-within,
+.btn-group .btn-primary:focus-visible,
+.btn-group .btn-delete:focus,
+.btn-group .btn-delete:focus-within,
+.btn-group .btn-delete:focus-visible,
+.btn-group .btn-warning:focus,
+.btn-group .btn-warning:focus-within,
+.btn-group .btn-warning:focus-visible {
+  z-index: var(--op-btn-group-focus-z-index);
 }
 .btn-group .btn:not(:first-child, :last-child),
 .btn-group .btn-primary:not(:first-child, :last-child),
-.btn-group .btn-secondary:not(:first-child, :last-child),
-.btn-group .btn-delete:not(:first-child, :last-child) {
+.btn-group .btn-delete:not(:first-child, :last-child),
+.btn-group .btn-warning:not(:first-child, :last-child) {
   border-radius: 0;
 }
 .btn-group .btn:first-child:not(:last-child),
 .btn-group .btn-primary:first-child:not(:last-child),
-.btn-group .btn-secondary:first-child:not(:last-child),
-.btn-group .btn-delete:first-child:not(:last-child) {
+.btn-group .btn-delete:first-child:not(:last-child),
+.btn-group .btn-warning:first-child:not(:last-child) {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 .btn-group .btn:last-child:not(:first-child),
 .btn-group .btn-primary:last-child:not(:first-child),
-.btn-group .btn-secondary:last-child:not(:first-child),
-.btn-group .btn-delete:last-child:not(:first-child) {
+.btn-group .btn-delete:last-child:not(:first-child),
+.btn-group .btn-warning:last-child:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -2561,125 +2750,257 @@ small {
   padding: var(--op-space-medium);
 }
 
-.flash {
+.confirm-dialog-wrapper {
   position: fixed;
-  z-index: var(--op-z-index-alert-group);
-  top: var(--op-space-large);
-  right: var(--op-space-large);
-  display: inline-grid;
-  width: auto;
+  z-index: var(--op-z-index-dialog);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
   align-items: center;
   justify-content: center;
-  padding: var(--op-space-x-small) var(--op-space-medium);
-  border-color: var(--op-color-on-background);
-  border-radius: var(--op-radius-small);
-  border-left-width: var(--op-border-width-x-large);
-  border-left-style: solid;
-  animation: var(--op-animation-flash);
-  background: var(--op-color-background);
-  box-shadow: var(--op-shadow-x-small);
-  color: var(--op-color-on-background);
-  font-size: var(--op-font-small);
-  gap: var(--op-space-small);
-  grid-auto-flow: column;
+  outline: 0;
+  visibility: hidden;
 }
-.flash--notice.flash {
-  border-color: var(--op-color-alerts-notice-base);
-  color: var(--op-color-alerts-notice-base);
+.confirm-dialog-wrapper .confirm-dialog-wrapper__backdrop {
+  position: fixed;
+  z-index: var(--op-z-index-dialog-backdrop);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--op-color-black);
+  opacity: 0;
+  transition: var(--op-transition-modal);
+  visibility: hidden;
 }
-.flash--info.flash {
-  border-color: var(--op-color-alerts-info-base);
-  color: var(--op-color-alerts-info-base);
+.confirm-dialog-wrapper--active.confirm-dialog-wrapper {
+  visibility: visible;
 }
-.flash--alert.flash {
-  border-color: var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-base);
+.confirm-dialog-wrapper--active.confirm-dialog-wrapper .confirm-dialog {
+  opacity: 1;
+  transform: scale(1);
 }
-.flash--warning.flash {
-  border-color: var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-base);
+.confirm-dialog-wrapper--active.confirm-dialog-wrapper .confirm-dialog-wrapper__backdrop {
+  opacity: 0.5;
+  visibility: visible;
 }
-.flash .flash__message-type {
+
+.confirm-dialog {
+  --_op-confirm-dialog-width: 40rem;
+  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-border-color);
   color: var(--op-color-on-background);
-  font-weight: bold;
+  contain: paint;
+  font-size: var(--op-font-medium);
+  line-height: var(--op-line-height-base);
+  opacity: 0;
+  transform: scale(0.7);
+  transition: var(--op-transition-modal);
 }
-.flash .flash__message {
-  color: var(--op-color-on-background);
-  font-size: var(--op-font-x-small);
+.confirm-dialog .confirm-dialog__header,
+.confirm-dialog .confirm-dialog__body,
+.confirm-dialog .confirm-dialog__footer {
+  padding: var(--op-space-medium);
+}
+.confirm-dialog .confirm-dialog__header {
+  font-size: var(--op-font-large);
+  font-weight: var(--op-font-weight-semi-bold);
+}
+.confirm-dialog .confirm-dialog__body {
+  box-shadow: var(--op-border-all) var(--op-border-color);
+}
+.confirm-dialog .confirm-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
-textarea.form-control, .form-control:not([type=radio], [type=checkbox]) {
-  --__op-input-height: var(--op-input-height-large);
+.divider-vertical, .divider {
+  --_op-divider-vertical-min-height: var(--op-space-large);
+  --_op-divider-height-small: var(--op-border-width);
+  --_op-divider-height-medium: var(--op-border-width-large);
+  --_op-divider-height-large: var(--op-border-width-x-large);
+  --_op-divider-padding-small: var(--op-space-2x-small);
+  --_op-divider-padding-medium: var(--op-space-x-small);
+  --_op-divider-padding-large: var(--op-space-medium);
+  --__op-divider-height: var(--_op-divider-height-small);
+  --__op-divider-padding: 0;
+  background-color: var(--op-border-color);
+}
+.divider--small.divider-vertical, .divider--small.divider {
+  --__op-divider-height: var(--_op-divider-height-small);
+}
+.divider--medium.divider-vertical, .divider--medium.divider {
+  --__op-divider-height: var(--_op-divider-height-medium);
+}
+.divider--large.divider-vertical, .divider--large.divider {
+  --__op-divider-height: var(--_op-divider-height-large);
+}
+.divider--spacing-small.divider-vertical, .divider--spacing-small.divider {
+  --__op-divider-padding: var(--_op-divider-padding-small);
+}
+.divider--spacing-medium.divider-vertical, .divider--spacing-medium.divider {
+  --__op-divider-padding: var(--_op-divider-padding-medium);
+}
+.divider--spacing-large.divider-vertical, .divider--spacing-large.divider {
+  --__op-divider-padding: var(--_op-divider-padding-large);
+}
+
+.divider {
+  width: 100%;
+  height: var(--__op-divider-height);
+  margin: var(--__op-divider-padding) 0;
+}
+
+.divider-vertical {
+  width: var(--__op-divider-height);
+  height: 100%;
+  min-height: var(--_op-divider-vertical-min-height);
+  margin: 0 var(--__op-divider-padding);
+}
+
+.form-control {
+  --_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);
+  --__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);
+}
+.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);
+}
+
+.form-control:not([type=radio], [type=checkbox]) {
+  --_op-form-control-opacity-disabled: 0.44;
+  --__op-form-control-border-color: var(--op-color-neutral-plus-four);
   display: block;
   width: 100%;
-  min-width: var(--__op-input-height);
-  height: var(--__op-input-height);
-  padding: var(--op-space-small) var(--op-space-medium);
+  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-large);
-  background-color: var(--op-color-neutral-plus-max);
-  box-shadow: var(--op-border-all) var(--op-border-color);
-  color: var(--op-color-neutral-on-plus-max);
+  border-radius: var(--op-radius-medium);
+  background-color: var(--op-color-neutral-plus-eight);
+  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-font-small);
-  font-weight: var(--op-font-weight-light);
+  font-size: var(--__op-form-control-font-size);
   line-height: var(--op-line-height-base);
 }
-textarea.form-control--read-only.form-control, .form-control--read-only.form-control:not([type=radio], [type=checkbox]) {
-  height: fit-content;
-  background-color: var(--op-color-neutral-plus-seven);
-  background-image: none;
+.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-neutral-on-plus-seven);
-  cursor: unset;
+  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);
+}
+
+.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);
+  cursor: pointer;
 }
-textarea.form-control--read-only[type=color].form-control, .form-control--read-only[type=color].form-control:not([type=radio], [type=checkbox]) {
-  height: var(--__op-input-height);
+.form-control[type=radio] + label, .form-control[type=checkbox] + label {
+  align-self: center;
 }
 
-select.form-control:not([multiple], [type=radio], [type=checkbox]), .form-control[type=color] {
+select.form-control:not([multiple], [type=radio], [type=checkbox]) {
   padding-right: var(--op-space-3x-large);
   appearance: none;
-  background: var(--op-form-dropdown-arrow) center right no-repeat;
-  background-position-x: calc(100% - (var(--op-space-3x-large) / 2 - var(--op-form-dropdown-arrow-width) / 2));
+  background: var(--op-encoded-images-dropdown-arrow) center right no-repeat;
+  background-position-x: calc(100% - (var(--op-space-3x-large) / 2 - var(--op-encoded-images-dropdown-arrow-width) / 2));
   cursor: pointer;
 }
 
 .form-label {
   color: var(--op-color-on-background);
-  font-size: var(--op-font-small);
+  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=radio], .form-control[type=checkbox] {
-  width: var(--op-space-large);
-  height: var(--op-space-large);
-  align-self: center;
-  margin: 0;
-  accent-color: var(--op-color-primary-base);
-  cursor: pointer;
+.form-control[type=color] {
+  padding: var(--op-space-2x-small);
+}
+.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:disabled {
   cursor: not-allowed;
+  opacity: var(--_op-form-control-opacity-disabled);
 }
-.form-control:focus, .form-control:focus-within, .form-control:focus-visible, .form-control:active {
-  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four), var(--op-input-focus);
-  outline: none;
+.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:focus:hover:not(:disabled), .form-control:focus-within:hover:not(:disabled), .form-control:focus-visible:hover:not(:disabled), .form-control:active:hover:not(:disabled) {
-  box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four), var(--op-input-focus);
+.form-control[readonly]::-webkit-input-placeholder {
+  color: var(--op-color-on-background);
 }
 
 select.form-control[multiple] {
-  min-height: calc(2 * var(--__op-input-height));
+  min-height: calc(2 * var(--__op-form-control-height));
 }
 
-textarea.form-control {
-  min-width: var(--__op-input-height);
+textarea.form-control:not([type=radio], [type=checkbox]) {
   max-width: 100%;
-  min-height: var(--__op-input-height);
+  height: calc(2 * var(--__op-form-control-height));
+  min-height: var(--__op-form-control-height);
 }
 
 .form-group--error {
@@ -2687,7 +3008,7 @@ textarea.form-control {
   /* stylelint-enable no-descending-specificity */
 }
 .form-group--error .form-control {
-  box-shadow: var(--op-border-all) var(--op-color-alerts-danger-minus-three);
+  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;
@@ -2696,13 +3017,40 @@ textarea.form-control {
   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-error {
   width: fit-content;
-  padding: var(--op-space-2x-small) var(--op-space-x-small);
-  border-radius: var(--op-radius-medium);
-  background: var(--op-color-alerts-danger-plus-seven);
-  color: var(--op-color-alerts-danger-on-plus-seven);
+  color: var(--op-color-alerts-danger-base);
   font-size: var(--op-font-x-small);
 }
 
@@ -2785,7 +3133,8 @@ textarea.form-control {
   --op-mso-weight: var(--op-font-weight-semi-bold);
 }
 
-.icon--weight-bold, .alert-warning .alert__icon, .alert-danger .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
+.icon--weight-bold, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined, .alert-warning .alert__icon, .alert-danger .alert__icon,
+.alert-alert .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
   --op-mso-weight: var(--op-font-weight-bold);
 }
 
@@ -2806,12 +3155,13 @@ textarea.form-control {
   --op-mso-optical-sizing: 20;
 }
 
-.icon--large, .alert-warning .alert__icon, .alert-danger .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
+.icon--large, .sidebar-primary .sidebar__content > * .material-symbols-outlined, .sidebar .sidebar__content > * .material-symbols-outlined, .alert-warning .alert__icon, .alert-danger .alert__icon,
+.alert-alert .alert__icon, .alert-info .alert__icon, .alert-notice .alert__icon {
   font-size: var(--op-font-large);
   --op-mso-optical-sizing: 40;
 }
 
-.icon--x-large, .sidebar-subtle-primary .sidebar__item .sidebar__item-icon, .sidebar-primary .sidebar__item .sidebar__item-icon, .sidebar .sidebar__item .sidebar__item-icon {
+.icon--x-large {
   font-size: var(--op-font-2x-large);
   --op-mso-optical-sizing: 48;
 }
@@ -2825,11 +3175,12 @@ textarea.form-control {
   font-size: var(--op-font-small);
   --op-mso-optical-sizing: 20;
 }
-.custom-icons.icon--large, .alert-warning .custom-icons.alert__icon, .alert-danger .custom-icons.alert__icon, .alert-info .custom-icons.alert__icon, .alert-notice .custom-icons.alert__icon {
+.custom-icons.icon--large, .sidebar-primary .sidebar__content > * .custom-icons.material-symbols-outlined, .sidebar .sidebar__content > * .custom-icons.material-symbols-outlined, .alert-warning .custom-icons.alert__icon, .alert-danger .custom-icons.alert__icon,
+.alert-alert .custom-icons.alert__icon, .alert-info .custom-icons.alert__icon, .alert-notice .custom-icons.alert__icon {
   width: var(--op-font-large);
   height: var(--op-font-large);
 }
-.custom-icons.icon--x-large, .sidebar-subtle-primary .sidebar__item .custom-icons.sidebar__item-icon, .sidebar-primary .sidebar__item .custom-icons.sidebar__item-icon, .sidebar .sidebar__item .custom-icons.sidebar__item-icon {
+.custom-icons.icon--x-large {
   width: var(--op-font-3x-large);
   height: var(--op-font-3x-large);
 }
@@ -2843,250 +3194,311 @@ textarea.form-control {
   line-height: 0;
 }
 
-.sidebar-subtle-primary, .sidebar-primary, .sidebar {
-  --_op-sidebar-background-color: var(--op-color-neutral-plus-seven);
-  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-seven);
-  --_op-sidebar-icon-background-active-color: var(--op-color-neutral-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-neutral-on-plus-three);
-  --_op-sidebar-icon-background-hover-color: var(--op-color-neutral-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-neutral-on-plus-four);
-  --_op-sidebar-rail-width: 8.8rem;
-  --_op-sidebar-drawer-width: 25rem;
-  --_op-sidebar-spacing: var(--op-space-medium);
-  --_op-sidebar-link-spacing: var(--op-space-large);
-  --_op-sidebar-transition: var(--op-transition-sidebar);
-  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+.modal-wrapper {
+  --_op-modal-backdrop-active-opacity: 0.5;
+  position: fixed;
+  z-index: var(--op-z-index-dialog);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: flex;
-  width: var(--__op-sidebar-width);
-  flex-direction: column;
-  padding: var(--_op-sidebar-spacing) 0;
-  background-color: var(--_op-sidebar-background-color);
-  color: var(--_op-sidebar-text-color);
-  gap: var(--_op-sidebar-spacing);
-  overflow-y: auto;
-  transition: var(--_op-sidebar-transition);
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+  visibility: hidden;
 }
-.sidebar-subtle-primary .sidebar__brand, .sidebar-primary .sidebar__brand, .sidebar .sidebar__brand {
-  display: block;
-  padding: 0 var(--_op-sidebar-spacing);
+.modal-wrapper .modal-wrapper__backdrop {
+  position: fixed;
+  z-index: var(--op-z-index-dialog-backdrop);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--op-color-black);
+  opacity: 0;
+  transition: var(--op-transition-modal);
+  visibility: hidden;
 }
-.sidebar-subtle-primary .sidebar__content, .sidebar-primary .sidebar__content, .sidebar .sidebar__content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
+.modal-wrapper--active.modal-wrapper {
+  visibility: visible;
 }
-.sidebar-subtle-primary .sidebar__content.sidebar__content--start, .sidebar-primary .sidebar__content.sidebar__content--start, .sidebar .sidebar__content.sidebar__content--start {
-  justify-content: start;
+.modal-wrapper--active.modal-wrapper .modal {
+  opacity: 1;
+  transform: scale(1);
 }
-.sidebar-subtle-primary .sidebar__content.sidebar__content--center, .sidebar-primary .sidebar__content.sidebar__content--center, .sidebar .sidebar__content.sidebar__content--center {
-  justify-content: center;
+.modal-wrapper--active.modal-wrapper .modal-wrapper__backdrop {
+  opacity: var(--_op-modal-backdrop-active-opacity);
+  visibility: visible;
 }
-.sidebar-subtle-primary .sidebar__content.sidebar__content--end, .sidebar-primary .sidebar__content.sidebar__content--end, .sidebar .sidebar__content.sidebar__content--end {
-  justify-content: end;
+
+.modal {
+  --_op-modal-width: 56.4rem;
+  --_op-modal-max-height: 50rem;
+  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-border-color);
+  color: var(--op-color-on-background);
+  contain: paint;
+  font-size: var(--op-font-medium);
+  line-height: var(--op-line-height-base);
+  opacity: 0;
+  transform: scale(0.7);
+  transition: var(--op-transition-modal);
+}
+.modal .modal__header,
+.modal .modal__body,
+.modal .modal__footer {
+  padding: var(--op-space-medium);
 }
-.sidebar-subtle-primary .sidebar__item, .sidebar-primary .sidebar__item, .sidebar .sidebar__item {
+.modal .modal__header {
   display: flex;
   align-items: center;
-  color: var(--_op-sidebar-text-color);
-  cursor: pointer;
-  text-align: center;
-  text-decoration: none;
+  justify-content: space-between;
+  font-size: var(--op-font-large);
+  font-weight: var(--op-font-weight-semi-bold);
 }
-.sidebar-subtle-primary .sidebar__item:visited, .sidebar-primary .sidebar__item:visited, .sidebar .sidebar__item:visited {
-  color: var(--_op-sidebar-text-color);
+.modal .modal__body {
+  max-height: var(--_op-modal-max-height);
+  box-shadow: var(--op-border-all) var(--op-border-color);
+  overflow-y: auto;
 }
-.sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar .sidebar__item:hover .sidebar__item-icon, .sidebar-subtle-primary .sidebar__item.active .sidebar__item-icon, .sidebar-primary .sidebar__item.active .sidebar__item-icon, .sidebar .sidebar__item.active .sidebar__item-icon {
-  --op-mso-weight: var(--op-font-weight-bold);
+.modal .modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--op-space-small);
 }
-.sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar .sidebar__item:hover .sidebar__item-icon {
-  color: var(--_op-sidebar-text-color);
+
+@keyframes show-backdrop {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
 }
-.sidebar-subtle-primary .sidebar__item .sidebar__item-icon, .sidebar-primary .sidebar__item .sidebar__item-icon, .sidebar .sidebar__item .sidebar__item-icon {
-  /* stylelint-disable scss/at-extend-no-missing-placeholder */
-  /* stylelint-enable scss/at-extend-no-missing-placeholder */
-  --op-mso-weight: var(--op-font-weight-medium);
+@keyframes hide-backdrop {
+  from {
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+  to {
+    opacity: 0;
+  }
+}
+dialog.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  padding: 0;
+  border: none;
+}
+dialog.modal::backdrop {
+  --op-color-black: hsl(0deg 0% 0%);
+  --_op-modal-backdrop-active-opacity: 0.5;
+  animation: show-backdrop 300ms ease-in;
+  background: var(--op-color-black);
+  opacity: var(--_op-modal-backdrop-active-opacity);
+}
+dialog.modal[open] {
+  opacity: 1;
+  transform: scale(1);
+}
+dialog.modal.modal--closing {
+  opacity: 0;
+  transform: scale(0.7);
+}
+dialog.modal.modal--closing::backdrop {
+  animation: hide-backdrop 300ms ease-in;
+  opacity: 0;
+}
+
+.pagination {
   display: flex;
   align-items: center;
-  justify-content: center;
-  border-radius: var(--op-radius-pill);
+  gap: 0;
 }
-.sidebar-subtle-primary .sidebar__item .sidebar__item-label, .sidebar-primary .sidebar__item .sidebar__item-label, .sidebar .sidebar__item .sidebar__item-label {
-  overflow: hidden;
-  max-width: 90%;
-  font-weight: var(--op-font-weight-medium);
-  letter-spacing: var(--op-letter-spacing-navigation);
-  line-height: var(--op-line-height-dense);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.pagination .form-group {
+  align-items: center;
 }
-.sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive), .sidebar--drawer.sidebar-primary:not(.sidebar--responsive), .sidebar--drawer.sidebar:not(.sidebar--responsive) {
-  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+.pagination .form-group .form-label {
+  grid-column: 1;
 }
-.sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__content, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__content, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__content {
-  padding: 0 var(--_op-sidebar-spacing);
+.pagination .form-group .form-control {
+  grid-column: 2;
 }
-.sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__section-title, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__section-title, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__section-title {
-  overflow: hidden;
-  height: var(--op-input-height-large);
-  padding: var(--op-space-small) var(--op-space-medium);
+.pagination .pagination__divider {
+  height: 100%;
+  padding: 0 var(--op-space-x-small);
+}
+
+.sidebar-primary, .sidebar {
+  --_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: 8.8rem;
+  --_op-sidebar-compact-width: 16.9rem;
+  --_op-sidebar-drawer-width: 21.6rem;
+  --_op-sidebar-rail-brand-width: 7.728rem;
+  --_op-sidebar-compact-brand-width: 9.8rem;
+  --_op-sidebar-drawer-brand-width: 9.8rem;
+  --_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);
+  --_op-sidebar-transition: var(--op-transition-sidebar);
+  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
+  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);
   color: var(--_op-sidebar-text-color);
-  font-size: var(--op-font-small);
-  font-weight: var(--op-font-weight-bold);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-y: auto;
+  transition: var(--_op-sidebar-transition);
 }
-.sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__section-divider, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__section-divider, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__section-divider {
-  border-bottom: var(--op-border-width) solid var(--_op-sidebar-text-color);
-  margin: 0 var(--_op-sidebar-spacing);
+.sidebar-primary .sidebar__brand, .sidebar .sidebar__brand {
+  height: var(--__op-sidebar-brand-width);
+  padding: var(--_op-sidebar-brand-spacing);
+  margin: 0 auto;
 }
-.sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item {
-  height: var(--op-input-height-large);
-  flex-direction: row;
-  padding: var(--op-space-x-small) var(--op-space-medium);
-  border-radius: var(--op-radius-pill);
-  gap: var(--_op-sidebar-link-spacing);
+.sidebar-primary .sidebar__brand img, .sidebar .sidebar__brand img {
+  height: 100%;
 }
-.sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item.active, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item.active, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item.active {
-  transition: var(--_op-sidebar-transition);
+.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--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item:hover, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item:hover {
-  background-color: var(--_op-sidebar-icon-background-hover-color);
-  color: var(--_op-sidebar-icon-text-hover-color);
+.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--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item:hover .sidebar__item-icon {
-  color: var(--_op-sidebar-icon-text-hover-color);
+.sidebar-primary .sidebar__content.sidebar__content--end, .sidebar .sidebar__content.sidebar__content--end {
+  justify-content: end;
 }
-.sidebar--drawer.sidebar-subtle-primary:not(.sidebar--responsive) .sidebar__item.active, .sidebar--drawer.sidebar-primary:not(.sidebar--responsive) .sidebar__item.active, .sidebar--drawer.sidebar:not(.sidebar--responsive) .sidebar__item.active {
-  background-color: var(--_op-sidebar-icon-background-active-color);
-  color: var(--_op-sidebar-icon-text-active-color);
+.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-subtle-primary, .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
+  .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
     --__op-sidebar-width: var(--_op-sidebar-drawer-width);
-  }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content {
-    padding: 0 var(--_op-sidebar-spacing);
-  }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__section-title, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__section-title, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__section-title {
-    overflow: hidden;
-    height: var(--op-input-height-large);
-    padding: var(--op-space-small) var(--op-space-medium);
-    color: var(--_op-sidebar-text-color);
-    font-size: var(--op-font-small);
-    font-weight: var(--op-font-weight-bold);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__section-divider, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__section-divider, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__section-divider {
-    border-bottom: var(--op-border-width) solid var(--_op-sidebar-text-color);
-    margin: 0 var(--_op-sidebar-spacing);
-  }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item {
-    height: var(--op-input-height-large);
-    flex-direction: row;
-    padding: var(--op-space-x-small) var(--op-space-medium);
-    border-radius: var(--op-radius-pill);
-    gap: var(--_op-sidebar-link-spacing);
-  }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item.active, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item.active, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item.active {
-    transition: var(--_op-sidebar-transition);
-  }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item:hover, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item:hover {
-    background-color: var(--_op-sidebar-icon-background-hover-color);
-    color: var(--_op-sidebar-icon-text-hover-color);
-  }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item:hover .sidebar__item-icon {
-    color: var(--_op-sidebar-icon-text-hover-color);
-  }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item.active, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item.active, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item.active {
-    background-color: var(--_op-sidebar-icon-background-active-color);
-    color: var(--_op-sidebar-icon-text-active-color);
+    --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
   }
 }
 @media (width <= 1024px) {
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary, .sidebar--drawer.sidebar--responsive.sidebar-primary, .sidebar--drawer.sidebar--responsive.sidebar {
+  .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--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content {
-    gap: var(--_op-sidebar-link-spacing);
+  .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__content {
+    align-items: center;
   }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__section-title, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__section-title, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__section-title,
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__section-divider,
-  .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__section-divider,
-  .sidebar--drawer.sidebar--responsive.sidebar .sidebar__section-divider {
-    display: none;
+  .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;
   }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item {
-    flex-direction: column;
-    gap: var(--op-space-2x-small);
+}
+.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 {
+    --__op-sidebar-width: var(--_op-sidebar-compact-width);
+    --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
   }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item .sidebar__item-icon {
-    padding: var(--op-space-2x-small) var(--op-space-medium);
-    transition: var(--_op-sidebar-transition);
+  .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);
   }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item:hover .sidebar__item-icon {
-    background-color: var(--_op-sidebar-icon-background-hover-color);
+}
+@media (width <= 1024px) {
+  .sidebar--compact.sidebar--responsive.sidebar-primary, .sidebar--compact.sidebar--responsive.sidebar {
+    --__op-sidebar-width: var(--_op-sidebar-rail-width);
+    --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
   }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item.active .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item.active .sidebar__item-icon, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item.active .sidebar__item-icon {
-    background-color: var(--_op-sidebar-icon-background-active-color);
+  .sidebar--compact.sidebar--responsive.sidebar-primary .sidebar__content, .sidebar--compact.sidebar--responsive.sidebar .sidebar__content {
+    align-items: center;
   }
-  .sidebar--drawer.sidebar--responsive.sidebar-subtle-primary .sidebar__item .sidebar__item-label, .sidebar--drawer.sidebar--responsive.sidebar-primary .sidebar__item .sidebar__item-label, .sidebar--drawer.sidebar--responsive.sidebar .sidebar__item .sidebar__item-label {
-    font-size: var(--op-font-x-small);
+  .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;
   }
 }
-.sidebar--rail.sidebar-subtle-primary, .sidebar--rail.sidebar-primary, .sidebar--rail.sidebar {
+.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-subtle-primary .sidebar__content, .sidebar--rail.sidebar-primary .sidebar__content, .sidebar--rail.sidebar .sidebar__content {
-  gap: var(--_op-sidebar-link-spacing);
-}
-.sidebar--rail.sidebar-subtle-primary .sidebar__section-title, .sidebar--rail.sidebar-primary .sidebar__section-title, .sidebar--rail.sidebar .sidebar__section-title,
-.sidebar--rail.sidebar-subtle-primary .sidebar__section-divider,
-.sidebar--rail.sidebar-primary .sidebar__section-divider,
-.sidebar--rail.sidebar .sidebar__section-divider {
-  display: none;
-}
-.sidebar--rail.sidebar-subtle-primary .sidebar__item, .sidebar--rail.sidebar-primary .sidebar__item, .sidebar--rail.sidebar .sidebar__item {
-  flex-direction: column;
-  gap: var(--op-space-2x-small);
-}
-.sidebar--rail.sidebar-subtle-primary .sidebar__item .sidebar__item-icon, .sidebar--rail.sidebar-primary .sidebar__item .sidebar__item-icon, .sidebar--rail.sidebar .sidebar__item .sidebar__item-icon {
-  padding: var(--op-space-2x-small) var(--op-space-medium);
-  transition: var(--_op-sidebar-transition);
+.sidebar--rail.sidebar-primary .sidebar__content, .sidebar--rail.sidebar .sidebar__content {
+  align-items: center;
 }
-.sidebar--rail.sidebar-subtle-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--rail.sidebar-primary .sidebar__item:hover .sidebar__item-icon, .sidebar--rail.sidebar .sidebar__item:hover .sidebar__item-icon {
-  background-color: var(--_op-sidebar-icon-background-hover-color);
+.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--rail.sidebar-subtle-primary .sidebar__item.active .sidebar__item-icon, .sidebar--rail.sidebar-primary .sidebar__item.active .sidebar__item-icon, .sidebar--rail.sidebar .sidebar__item.active .sidebar__item-icon {
-  background-color: var(--_op-sidebar-icon-background-active-color);
+.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--rail.sidebar-subtle-primary .sidebar__item .sidebar__item-label, .sidebar--rail.sidebar-primary .sidebar__item .sidebar__item-label, .sidebar--rail.sidebar .sidebar__item .sidebar__item-label {
-  font-size: var(--op-font-x-small);
+.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-seven);
-  --_op-sidebar-text-color: var(--op-color-primary-on-plus-seven);
-  --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
-  --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
-}
-
-.sidebar-subtle-primary {
-  --_op-sidebar-background-color: var(--op-color-primary-plus-max);
-  --_op-sidebar-text-color: var(--op-color-primary-on-plus-max);
-  --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
-  --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
+  --_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);
 }
 
 .table-container, .table-danger, .table-primary, .table {
-  --_op-table-cell-padding-default: var(--op-space-small) var(--op-space-x-small);
-  --_op-table-cell-padding-comfortable: var(--op-space-medium) var(--op-space-small);
-  --_op-table-cell-padding-compact: var(--op-space-x-small) var(--op-space-2x-small);
-  --__op-table-cell-padding: var(--_op-table-cell-padding-default);
+  --_op-table-cell-height-default: calc(var(--op-space-scale-unit) * 4.4);
+  --_op-table-cell-height-comfortable: calc(var(--op-space-scale-unit) * 6.4);
+  --_op-table-cell-height-compact: calc(var(--op-space-scale-unit) * 3.4);
+  --__op-table-cell-height: var(--_op-table-cell-height-default);
   width: 100%;
   border-radius: var(--op-radius-medium);
   border-collapse: collapse;
@@ -3095,28 +3507,33 @@ textarea.form-control {
   table-layout: auto;
 }
 .table-container thead, .table-danger thead, .table-primary thead, .table thead {
-  background-color: var(--op-color-neutral-plus-four);
-  color: var(--op-color-neutral-on-plus-four);
+  background-color: var(--op-color-neutral-plus-eight);
+  box-shadow: inset var(--op-border-top) var(--op-border-color);
+  color: var(--op-color-neutral-on-plus-eight);
+}
+.table-container thead:has(th input[type=checkbox]:checked), .table-danger thead:has(th input[type=checkbox]:checked), .table-primary thead:has(th input[type=checkbox]:checked), .table thead:has(th input[type=checkbox]:checked) {
+  background-color: var(--op-color-primary-plus-seven);
+  color: var(--op-color-primary-on-plus-seven);
 }
 .table-container th, .table-danger th, .table-primary th, .table th {
-  font-weight: var(--op-font-weight-normal);
+  font-weight: var(--op-font-weight-semi-bold);
   text-align: left;
-  text-transform: uppercase;
 }
 .table-container tbody, .table-danger tbody, .table-primary tbody, .table tbody,
 .table-container tfoot,
 .table-danger tfoot,
 .table-primary tfoot,
 .table tfoot {
-  background-color: var(--op-color-background);
-  color: var(--op-color-on-background);
+  background-color: var(--op-color-neutral-plus-max);
+  color: var(--op-color-neutral-on-plus-max);
 }
 .table-container th, .table-danger th, .table-primary th, .table th,
 .table-container td,
 .table-danger td,
 .table-primary td,
 .table td {
-  padding: var(--__op-table-cell-padding);
+  height: var(--__op-table-cell-height);
+  padding: var(--op-space-2x-small) var(--op-space-small);
   font-size: var(--op-font-small);
 }
 .table-container tr:not(:last-child), .table-danger tr:not(:last-child), .table-primary tr:not(:last-child), .table tr:not(:last-child) {
@@ -3132,13 +3549,13 @@ textarea.form-control {
   table-layout: fixed;
 }
 .table--default-density.table-container, .table--default-density.table-danger, .table--default-density.table-primary, .table--default-density.table {
-  --__op-table-cell-padding: var(--_op-table-cell-padding-default);
+  --__op-table-cell-height: var(--_op-table-cell-height-default);
 }
 .table--comfortable-density.table-container, .table--comfortable-density.table-danger, .table--comfortable-density.table-primary, .table--comfortable-density.table {
-  --__op-table-cell-padding: var(--_op-table-cell-padding-comfortable);
+  --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
 }
 .table--compact-density.table-container, .table--compact-density.table-danger, .table--compact-density.table-primary, .table--compact-density.table {
-  --__op-table-cell-padding: var(--_op-table-cell-padding-compact);
+  --__op-table-cell-height: var(--_op-table-cell-height-compact);
 }
 .table--even-striped.table-container tbody tr:nth-child(even), .table--even-striped.table-danger tbody tr:nth-child(even), .table--even-striped.table-primary tbody tr:nth-child(even), .table--even-striped.table tbody tr:nth-child(even) {
   background-color: var(--op-color-neutral-plus-seven);
@@ -3171,4 +3588,102 @@ textarea.form-control {
   overflow-y: auto;
 }
 
+[data-tooltip-text] {
+  --_op-tooltip-max-width: calc(5 * var(--op-space-3x-large));
+  --_op-tooltip-padding: var(--op-space-x-small) var(--op-space-medium);
+  --_op-tooltip-background-color: var(--op-color-neutral-minus-max);
+  --_op-tooltip-text-color: var(--op-color-neutral-on-minus-max);
+  --_op-tooltip-arrow-size: calc(var(--op-space-small) / 2);
+  --_op-tooltip-tooltip-offset: var(--op-space-x-small);
+  --_op-tooltip-tooltip-radius: var(--op-radius-medium);
+  --_op-tooltip-tooltip-font-size: var(--op-font-small);
+  position: relative;
+}
+[data-tooltip-text]::before, [data-tooltip-text]::after {
+  opacity: 0;
+  transition: var(--op-transition-tooltip);
+  visibility: hidden;
+}
+[data-tooltip-text]::before {
+  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);
+  color: var(--_op-tooltip-text-color);
+  content: attr(data-tooltip-text);
+  font-family: var(--op-font-family);
+  font-size: var(--_op-tooltip-tooltip-font-size);
+  overflow-wrap: break-word;
+  pointer-events: none;
+  text-align: center;
+  white-space: normal;
+}
+[data-tooltip-text]::after {
+  position: absolute;
+  z-index: var(--op-z-index-tooltip);
+  border: var(--_op-tooltip-arrow-size) solid var(--_op-tooltip-background-color);
+  content: "";
+  pointer-events: none;
+}
+[data-tooltip-text]:hover::before, [data-tooltip-text]:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+[data-tooltip-position=top][data-tooltip-text]::before, [data-tooltip-position=top][data-tooltip-text]::after, [data-tooltip-text]:not([data-tooltip-position])::before, [data-tooltip-text]:not([data-tooltip-position])::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+[data-tooltip-position=top][data-tooltip-text]::before, [data-tooltip-text]:not([data-tooltip-position])::before {
+  bottom: 100%;
+  margin-bottom: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+}
+[data-tooltip-position=top][data-tooltip-text]::after, [data-tooltip-text]:not([data-tooltip-position])::after {
+  bottom: 100%;
+  border-color: var(--_op-tooltip-background-color) transparent transparent transparent;
+  margin-bottom: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+}
+[data-tooltip-position=left][data-tooltip-text]::before, [data-tooltip-position=left][data-tooltip-text]::after {
+  top: 50%;
+  transform: translateY(-50%);
+}
+[data-tooltip-position=left][data-tooltip-text]::before {
+  right: 100%;
+  margin-right: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+}
+[data-tooltip-position=left][data-tooltip-text]::after {
+  right: 100%;
+  border-color: transparent transparent transparent var(--_op-tooltip-background-color);
+  margin-right: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+}
+[data-tooltip-position=bottom][data-tooltip-text]::before, [data-tooltip-position=bottom][data-tooltip-text]::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+[data-tooltip-position=bottom][data-tooltip-text]::before {
+  top: 100%;
+  margin-top: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+}
+[data-tooltip-position=bottom][data-tooltip-text]::after {
+  top: 100%;
+  border-color: transparent transparent var(--_op-tooltip-background-color) transparent;
+  margin-top: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+}
+[data-tooltip-position=right][data-tooltip-text]::before, [data-tooltip-position=right][data-tooltip-text]::after {
+  top: 50%;
+  transform: translateY(-50%);
+}
+[data-tooltip-position=right][data-tooltip-text]::before {
+  left: 100%;
+  margin-left: calc(var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+}
+[data-tooltip-position=right][data-tooltip-text]::after {
+  left: 100%;
+  border-color: transparent var(--_op-tooltip-background-color) transparent transparent;
+  margin-left: calc(-1 * var(--_op-tooltip-arrow-size) + var(--_op-tooltip-tooltip-offset));
+}
+
 /*# sourceMappingURL=optics.css.map */