@rolemodel/optics 1.9.0 → 1.11.0

package/dist/css/optics.css

@@ -2366,8 +2366,8 @@ small {
   }
 }
 
-.btn-warning, .btn-destructive,
-.btn-delete, .btn-primary, .btn {
+.btn {
+  /* Public API (customizable component options) */
   --_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);
@@ -2377,6 +2377,7 @@ 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);
+  /* Private API (component option defaults) */
   --__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);
@@ -2387,6 +2388,9 @@ small {
   padding: var(--__op-btn-padding);
   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-btn-font-size);
   font-weight: var(--op-font-weight-normal);
@@ -2395,201 +2399,209 @@ small {
   text-decoration: none;
   transition: var(--op-transition-input);
   white-space: nowrap;
-}
-.btn--pill.btn-warning, .btn--pill.btn-destructive,
-.btn--pill.btn-delete, .btn--pill.btn-primary, .btn--pill.btn {
-  border-radius: var(--op-radius-pill);
-}
-.btn--icon.btn-warning, .btn--icon.btn-destructive,
-.btn--icon.btn-delete, .btn--icon.btn-primary, .btn--icon.btn {
-  width: var(--__op-btn-height);
-  min-width: var(--__op-btn-height);
-  padding: 0;
-}
-.btn--icon-with-label.btn-warning, .btn--icon-with-label.btn-destructive,
-.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-destructive,
-.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-warning, .btn--medium.btn-destructive,
-.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-warning, .btn--large.btn-destructive,
-.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-warning, .btn--disabled.btn-destructive,
-.btn--disabled.btn-delete, .btn--disabled.btn-primary, .btn--disabled.btn, .btn-warning:disabled, .btn-destructive:disabled,
-.btn-delete:disabled, .btn-primary:disabled, .btn:disabled {
-  opacity: var(--op-opacity-disabled);
-  pointer-events: none;
-  -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
-  user-select: none;
-}
-.btn--with-badge.btn-warning, .btn--with-badge.btn-destructive,
-.btn--with-badge.btn-delete, .btn--with-badge.btn-primary, .btn--with-badge.btn {
-  position: relative;
-}
-.btn-warning:focus, .btn-destructive:focus,
-.btn-delete:focus, .btn-primary:focus, .btn:focus, .btn-warning:focus-within, .btn-destructive:focus-within,
-.btn-delete:focus-within, .btn-primary:focus-within, .btn:focus-within, .btn-warning:focus-visible, .btn-destructive:focus-visible,
-.btn-delete:focus-visible, .btn-primary:focus-visible, .btn:focus-visible {
-  outline: none;
-}
-@media (width <= 768px) {
-  .btn-warning, .btn-destructive,
-  .btn-delete, .btn-primary, .btn {
-    --__op-btn-height: var(--_op-btn-height-large);
-    --__op-btn-font-size: var(--_op-btn-font-large);
+  /* Modifiers */
+  /* Default Active State */
+  &.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);
+  }
+  /* Default Hover State */
+  &: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);
+  }
+  /* Default Focus State */
+  &: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);
+  }
+  /* Default Borderless State */
+  &.btn--no-border {
+    background-color: transparent;
+    box-shadow: none;
+    color: var(--op-color-primary-on-plus-max);
+    /* Default Borderless + Active State. */
+    &.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);
+    }
+    /* Default Borderless + Hover State */
+    &: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);
+    }
+    /* Default Borderless + Focus State */
+    &: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);
+    }
+  }
+  /* Pill Modifier */
+  &.btn--pill {
+    border-radius: var(--op-radius-pill);
+  }
+  /* Icon Modifier */
+  &.btn--icon {
+    width: var(--__op-btn-height);
+    min-width: var(--__op-btn-height);
+    padding: 0;
+  }
+  /* Icon With Label Modifier */
+  &.btn--icon-with-label {
+    flex-direction: column;
+    padding: var(--op-space-small);
+    gap: var(--op-space-3x-small);
+  }
+  /* Size Modifiers */
+  &.btn--small {
+    --__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--small.btn-warning, .btn--small.btn-destructive,
-  .btn--small.btn-delete, .btn--small.btn-primary, .btn--small.btn, .btn--medium.btn-warning, .btn--medium.btn-destructive,
-  .btn--medium.btn-delete, .btn--medium.btn-primary, .btn--medium.btn, .btn--large.btn-warning, .btn--large.btn-destructive,
-  .btn--large.btn-delete, .btn--large.btn-primary, .btn--large.btn {
+  &.btn--medium {
+    --__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 {
     --__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);
   }
+  /* Disabled Modifier */
+  &.btn--disabled,
+  &:disabled {
+    opacity: var(--op-opacity-disabled);
+    pointer-events: none;
+    -webkit-user-select: none; /* stylelint-disable property-no-vendor-prefix */
+    user-select: none;
+  }
+  /* Button with notification style badge */
+  &.btn--with-badge {
+    position: relative;
+  }
+  /* Focus State */
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline: none;
+  }
+  /* https:/*uxmovement.com/mobile/optimal-size-and-spacing-for-mobile-buttons/ */
+  /* --op-breakpoint-small */
+  /* Variant Modifiers */
+  &.btn--primary {
+    background-color: var(--op-color-primary-base);
+    box-shadow: inset var(--op-border-all) var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+    /* Active State */
+    &.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);
+    }
+    /* Hover State */
+    &:hover {
+      background-color: 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);
+    }
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-primary-base);
+      box-shadow: var(--op-input-focus-primary);
+      color: var(--op-color-primary-on-base);
+    }
+    /* Borderless State */
+    &.btn--no-border {
+      background-color: transparent;
+      box-shadow: none;
+      color: var(--op-color-primary-base);
+      /* Borderless + Active State */
+      &.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);
+      }
+      /* Borderless + Hover State */
+      &: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);
+      }
+      /* Borderless + Focus State */
+      &: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--destructive,
+  &.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);
+    /* Active State */
+    &.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);
+    }
+    /* Hover State */
+    &: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);
+    }
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-alerts-danger-base);
+      box-shadow: var(--op-input-focus-danger);
+      color: var(--op-color-alerts-danger-on-base);
+    }
+  }
+  &.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);
+    /* Active State */
+    &.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);
+    }
+    /* Hover State */
+    &: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);
+    }
+    /* Focus State */
+    &: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 {
-  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.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: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 {
-  background-color: transparent;
-  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: inset var(--op-border-all) var(--op-color-primary-base);
-  color: var(--op-color-primary-on-base);
-}
-.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: 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.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--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--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-destructive,
-.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-destructive.btn--active,
-.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-destructive:hover,
-.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-destructive:focus-visible,
-.btn-delete:focus-visible {
-  background-color: var(--op-color-alerts-danger-base);
-  box-shadow: var(--op-input-focus-danger);
-  color: var(--op-color-alerts-danger-on-base);
-}
-
-.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-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);
+@media (width <= 768px) {
+  .btn {
+    --__op-btn-height: var(--_op-btn-height-large);
+    --__op-btn-font-size: var(--_op-btn-font-large);
+    &.btn--small,
+    &.btn--medium,
+    &.btn--large {
+      --__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-group {
@@ -2598,85 +2610,33 @@ small {
   --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-destructive,
-.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-destructive,
-.btn-group .btn-primary + .btn-delete,
-.btn-group .btn-primary + .btn-warning,
-.btn-group .btn-destructive + .btn,
-.btn-group .btn-destructive + .btn-primary,
-.btn-group .btn-destructive + .btn-destructive,
-.btn-group .btn-destructive + .btn-delete,
-.btn-group .btn-destructive + .btn-warning,
-.btn-group .btn-delete + .btn,
-.btn-group .btn-delete + .btn-primary,
-.btn-group .btn-delete + .btn-destructive,
-.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-destructive,
-.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-destructive: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-destructive.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-destructive:focus,
-.btn-group .btn-destructive:focus-within,
-.btn-group .btn-destructive: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-destructive: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-destructive: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-destructive: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;
+  .btn {
+    + .btn {
+      margin-inline-start: calc(var(--op-border-width) * -1);
+    }
+    &:hover {
+      z-index: var(--op-btn-group-hover-z-index);
+    }
+    &.btn--active {
+      z-index: var(--op-btn-group-active-z-index);
+    }
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      z-index: var(--op-btn-group-focus-z-index);
+    }
+    &:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
+  }
 }
 
 .btn-group-toolbar {
@@ -2854,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;
@@ -2895,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] {
@@ -3025,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 {
@@ -3085,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,