@rolemodel/optics 1.4.0 → 1.6.0

package/dist/css/optics.css

@@ -2272,11 +2272,10 @@ small {
   }
 }
 
-.badge-notice, .badge-info, .badge-danger, .badge-warning, .badge-primary, .badge {
+.badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--op-space-2x-small) var(--op-space-x-small);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-neutral-base);
   color: var(--op-color-neutral-on-base);
@@ -2286,55 +2285,54 @@ small {
   gap: var(--op-space-x-small);
   letter-spacing: var(--op-letter-spacing-label);
   line-height: var(--op-line-height-dense);
+  padding-block: var(--op-space-2x-small);
+  padding-inline: var(--op-space-x-small);
   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%);
-}
-.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%);
-}
-
-.badge-primary {
-  background-color: var(--op-color-primary-base);
-  color: var(--op-color-primary-on-base);
-}
-
-.badge-warning {
-  background-color: var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-on-base);
-}
-
-.badge-danger {
-  background-color: var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-base);
-}
-
-.badge-info {
-  background-color: var(--op-color-alerts-info-base);
-  color: var(--op-color-alerts-info-on-base);
-}
-
-.badge-notice {
-  background-color: var(--op-color-alerts-notice-base);
-  color: var(--op-color-alerts-notice-on-base);
+  /* Elements */
+  .material-symbols-outlined {
+    font-size: var(--op-font-small);
+  }
+  /* Modifiers */
+  &.badge--primary {
+    background-color: var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+  }
+  &.badge--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+  }
+  &.badge--danger {
+    background-color: var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+  }
+  &.badge--info {
+    background-color: var(--op-color-alerts-info-base);
+    color: var(--op-color-alerts-info-on-base);
+  }
+  &.badge--notice {
+    background-color: var(--op-color-alerts-notice-base);
+    color: var(--op-color-alerts-notice-on-base);
+  }
+  &.badge--pill {
+    border-radius: var(--op-radius-pill);
+  }
+  &.badge--notification-right {
+    position: absolute;
+    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(50%);
+  }
+  &.badge--notification-left {
+    position: absolute;
+    box-shadow: 0 0 0 var(--op-border-width-large) var(--op-color-neutral-plus-max);
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    pointer-events: none;
+    transform: translateY(-50%) translateX(-50%);
+  }
 }
 
 .breadcrumbs {
@@ -2764,30 +2762,34 @@ small {
   inset: 0;
   outline: 0;
   visibility: hidden;
-}
-.confirm-dialog-wrapper .confirm-dialog-wrapper__backdrop {
-  position: fixed;
-  z-index: var(--op-z-index-dialog-backdrop);
-  background: var(--op-color-black);
-  inset: 0;
-  opacity: var(--op-opacity-none);
-  transition: var(--op-transition-modal);
-  visibility: hidden;
-}
-.confirm-dialog-wrapper--active.confirm-dialog-wrapper {
-  visibility: visible;
-}
-.confirm-dialog-wrapper--active.confirm-dialog-wrapper .confirm-dialog {
-  opacity: var(--op-opacity-full);
-  transform: scale(1);
-}
-.confirm-dialog-wrapper--active.confirm-dialog-wrapper .confirm-dialog-wrapper__backdrop {
-  opacity: var(--op-opacity-half);
-  visibility: visible;
+  /* Elements */
+  .confirm-dialog-wrapper__backdrop {
+    position: fixed;
+    z-index: var(--op-z-index-dialog-backdrop);
+    background: var(--op-color-black);
+    inset: 0;
+    opacity: var(--op-opacity-none);
+    transition: var(--op-transition-modal);
+    visibility: hidden;
+  }
+  /* Modifiers */
+  &.confirm-dialog-wrapper--active {
+    visibility: visible;
+    .confirm-dialog {
+      opacity: var(--op-opacity-full);
+      transform: scale(1);
+    }
+    .confirm-dialog-wrapper__backdrop {
+      opacity: var(--op-opacity-half);
+      visibility: visible;
+    }
+  }
 }
 
+/* stylelint-disable no-descending-specificity */
 .confirm-dialog {
-  --_op-confirm-dialog-width: calc(100 * var(--op-size-unit));
+  /* Public API (customizable component options) */
+  --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */
   z-index: var(--op-z-index-dialog-content);
   width: var(--_op-confirm-dialog-width);
   border-radius: var(--op-radius-medium);
@@ -2800,25 +2802,26 @@ small {
   opacity: var(--op-opacity-none);
   transform: scale(0.7);
   transition: var(--op-transition-modal);
-}
-.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-color-border);
-}
-.confirm-dialog .confirm-dialog__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  .confirm-dialog__header,
+  .confirm-dialog__body,
+  .confirm-dialog__footer {
+    padding: var(--op-space-medium);
+  }
+  .confirm-dialog__header {
+    font-size: var(--op-font-large);
+    font-weight: var(--op-font-weight-semi-bold);
+  }
+  .confirm-dialog__body {
+    box-shadow: var(--op-border-all) var(--op-color-border);
+  }
+  .confirm-dialog__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
+/* stylelint-enable no-descending-specificity */
 .divider {
   /* Public API (customizable component options) */
   --_op-divider-vertical-min-height: var(--op-space-large);
@@ -3244,6 +3247,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
 }
 
 .modal-wrapper {
+  /* Public API (customizable component options) */
   --_op-modal-backdrop-active-opacity: var(--op-opacity-half);
   position: fixed;
   z-index: var(--op-z-index-dialog);
@@ -3254,31 +3258,35 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   inset: 0;
   outline: 0;
   visibility: hidden;
-}
-.modal-wrapper .modal-wrapper__backdrop {
-  position: fixed;
-  z-index: var(--op-z-index-dialog-backdrop);
-  background: var(--op-color-black);
-  inset: 0;
-  opacity: var(--op-opacity-none);
-  transition: var(--op-transition-modal);
-  visibility: hidden;
-}
-.modal-wrapper--active.modal-wrapper {
-  visibility: visible;
-}
-.modal-wrapper--active.modal-wrapper .modal {
-  opacity: var(--op-opacity-full);
-  transform: scale(1);
-}
-.modal-wrapper--active.modal-wrapper .modal-wrapper__backdrop {
-  opacity: var(--_op-modal-backdrop-active-opacity);
-  visibility: visible;
+  /* Elements */
+  .modal-wrapper__backdrop {
+    position: fixed;
+    z-index: var(--op-z-index-dialog-backdrop);
+    background: var(--op-color-black);
+    inset: 0;
+    opacity: var(--op-opacity-none);
+    transition: var(--op-transition-modal);
+    visibility: hidden;
+  }
+  /* Modifiers */
+  &.modal-wrapper--active {
+    visibility: visible;
+    .modal {
+      opacity: var(--op-opacity-full);
+      transform: scale(1);
+    }
+    .modal-wrapper__backdrop {
+      opacity: var(--_op-modal-backdrop-active-opacity);
+      visibility: visible;
+    }
+  }
 }
 
+/* stylelint-disable no-descending-specificity */
 .modal {
-  --_op-modal-width: calc(141 * var(--op-size-unit));
-  --_op-modal-max-height: calc(125 * var(--op-size-unit));
+  /* Public API (customizable component options) */
+  --_op-modal-width: calc(141 * var(--op-size-unit)); /* 564px */
+  --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */
   z-index: var(--op-z-index-dialog-content);
   width: var(--_op-modal-width);
   border-radius: var(--op-radius-medium);
@@ -3291,31 +3299,64 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   opacity: var(--op-opacity-none);
   transform: scale(0.7);
   transition: var(--op-transition-modal);
+  .modal__header,
+  .modal__body,
+  .modal__footer {
+    padding: var(--op-space-medium);
+  }
+  .modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: var(--op-font-large);
+    font-weight: var(--op-font-weight-semi-bold);
+  }
+  .modal__body {
+    max-height: var(--_op-modal-max-height);
+    box-shadow: var(--op-border-all) var(--op-color-border);
+    overflow-y: auto;
+  }
+  .modal__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--op-space-small);
+  }
 }
-.modal .modal__header,
-.modal .modal__body,
-.modal .modal__footer {
-  padding: var(--op-space-medium);
-}
-.modal .modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: var(--op-font-large);
-  font-weight: var(--op-font-weight-semi-bold);
-}
-.modal .modal__body {
-  max-height: var(--_op-modal-max-height);
-  box-shadow: var(--op-border-all) var(--op-color-border);
-  overflow-y: auto;
-}
-.modal .modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--op-space-small);
+
+/* stylelint-enable no-descending-specificity */
+dialog.modal {
+  position: fixed;
+  display: block;
+  padding: 0;
+  border: none;
+  inset: 0;
+  &::backdrop {
+    /* The Dialog backdrop does not inheret from :root so these need to be duplicated here. */
+    --op-color-black: hsl(0deg 0% 0%);
+    --_op-modal-backdrop-active-opacity: 0.5;
+    --op-opacity-none: 0;
+    --op-opacity-full: 1;
+    animation: show-backdrop 300ms ease-in;
+    background: var(--op-color-black);
+    opacity: var(--_op-modal-backdrop-active-opacity);
+  }
+  &[open] {
+    opacity: var(--op-opacity-full);
+    transform: scale(1);
+  }
+  &.modal--closing {
+    opacity: var(--op-opacity-none);
+    transform: scale(0.7);
+    &::backdrop {
+      animation: hide-backdrop 300ms ease-in;
+      opacity: var(--op-opacity-none);
+    }
+  }
 }
 
+/* Using the Dialog element */
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog */
 @keyframes show-backdrop {
   from {
     opacity: var(--op-opacity-none);
@@ -3332,35 +3373,6 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
     opacity: var(--op-opacity-none);
   }
 }
-dialog.modal {
-  position: fixed;
-  display: block;
-  padding: 0;
-  border: none;
-  inset: 0;
-}
-dialog.modal::backdrop {
-  --op-color-black: hsl(0deg 0% 0%);
-  --_op-modal-backdrop-active-opacity: 0.5;
-  --op-opacity-none: 0;
-  --op-opacity-full: 1;
-  animation: show-backdrop 300ms ease-in;
-  background: var(--op-color-black);
-  opacity: var(--_op-modal-backdrop-active-opacity);
-}
-dialog.modal[open] {
-  opacity: var(--op-opacity-full);
-  transform: scale(1);
-}
-dialog.modal.modal--closing {
-  opacity: var(--op-opacity-none);
-  transform: scale(0.7);
-}
-dialog.modal.modal--closing::backdrop {
-  animation: hide-backdrop 300ms ease-in;
-  opacity: var(--op-opacity-none);
-}
-
 .navbar-primary, .navbar {
   --_op-navbar-background-color: var(--op-color-neutral-plus-eight);
   --_op-navbar-text-color: var(--op-color-neutral-on-plus-eight);
@@ -3953,7 +3965,7 @@ dialog.modal.modal--closing::backdrop {
   overflow-y: auto;
 }
 
-.tag-notice, .tag-info, .tag-warning, .tag-danger, .tag-primary, .tag-readonly {
+.tag {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3967,120 +3979,132 @@ dialog.modal.modal--closing::backdrop {
   line-height: var(--op-line-height-dense);
   user-select: none;
   white-space: nowrap;
-}
-.tag-notice .tag__label, .tag-info .tag__label, .tag-warning .tag__label, .tag-danger .tag__label, .tag-primary .tag__label, .tag-readonly .tag__label {
-  padding-inline: var(--op-space-2x-small);
-}
-.tag-notice .btn--icon, .tag-info .btn--icon, .tag-warning .btn--icon, .tag-danger .btn--icon, .tag-primary .btn--icon, .tag-readonly .btn--icon {
-  --__op-btn-height: var(--op-font-medium);
-}
-.tag-notice .btn--icon:hover, .tag-info .btn--icon:hover, .tag-warning .btn--icon:hover, .tag-danger .btn--icon:hover, .tag-primary .btn--icon:hover, .tag-readonly .btn--icon:hover {
-  background-color: var(--op-color-neutral-minus-three);
-  box-shadow: none;
-  color: var(--op-color-neutral-on-minus-three);
-}
-.tag-notice .btn--icon:focus-visible, .tag-info .btn--icon:focus-visible, .tag-warning .btn--icon:focus-visible, .tag-danger .btn--icon:focus-visible, .tag-primary .btn--icon:focus-visible, .tag-readonly .btn--icon:focus-visible {
-  background-color: var(--op-color-neutral-base);
-  box-shadow: var(--op-input-focus-neutral);
-  color: var(--op-color-neutral-on-base);
-}
-
-.tag-primary {
-  background-color: var(--op-color-primary-base);
-  color: var(--op-color-primary-on-base);
-}
-.tag-primary .btn--icon {
-  color: var(--op-color-primary-on-base);
-}
-.tag-primary .btn--icon:hover {
-  background-color: var(--op-color-primary-minus-three);
-  box-shadow: none;
-  color: var(--op-color-primary-on-minus-three);
-}
-.tag-primary .btn--icon:focus-visible {
-  background-color: var(--op-color-primary-base);
-  box-shadow: var(--op-input-focus-primary);
-  color: var(--op-color-primary-on-base);
-}
-
-.tag-danger {
-  background-color: var(--op-color-alerts-danger-base);
-  color: var(--op-color-alerts-danger-on-base);
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.tag-danger .btn--icon {
-  color: var(--op-color-alerts-danger-on-base);
-}
-.tag-danger .btn--icon:hover {
-  background-color: var(--op-color-alerts-danger-minus-three);
-  box-shadow: none;
-  color: var(--op-color-alerts-danger-on-minus-three);
-}
-.tag-danger .btn--icon: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);
-}
-
-.tag-warning {
-  background-color: var(--op-color-alerts-warning-base);
-  color: var(--op-color-alerts-warning-on-base);
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.tag-warning .btn--icon {
-  color: var(--op-color-alerts-warning-on-base);
-}
-.tag-warning .btn--icon:hover {
-  background-color: var(--op-color-alerts-warning-minus-three);
-  box-shadow: none;
-  color: var(--op-color-alerts-warning-on-minus-three);
-}
-.tag-warning .btn--icon: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);
-}
-
-.tag-info {
-  background-color: var(--op-color-alerts-info-base);
-  color: var(--op-color-alerts-info-on-base);
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.tag-info .btn--icon {
-  color: var(--op-color-alerts-info-on-base);
-}
-.tag-info .btn--icon:hover {
-  background-color: var(--op-color-alerts-info-minus-three);
-  box-shadow: none;
-  color: var(--op-color-alerts-info-on-minus-three);
-}
-.tag-info .btn--icon:focus-visible {
-  background-color: var(--op-color-alerts-info-base);
-  box-shadow: var(--op-input-focus-info);
-  color: var(--op-color-alerts-info-on-base);
-}
-
-.tag-notice {
-  background-color: var(--op-color-alerts-notice-base);
-  color: var(--op-color-alerts-notice-on-base);
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
-.tag-notice .btn--icon {
-  color: var(--op-color-alerts-notice-on-base);
-}
-.tag-notice .btn--icon:hover {
-  background-color: var(--op-color-alerts-notice-minus-three);
-  box-shadow: none;
-  color: var(--op-color-alerts-notice-on-minus-three);
-}
-.tag-notice .btn--icon:focus-visible {
-  background-color: var(--op-color-alerts-notice-base);
-  box-shadow: var(--op-input-focus-notice);
-  color: var(--op-color-alerts-notice-on-base);
+  /* Elements */
+  .tag__label {
+    padding-inline: var(--op-space-2x-small);
+  }
+  .btn--icon {
+    --__op-btn-height: var(--op-font-medium);
+    /* Hover State */
+    &:hover {
+      background-color: var(--op-color-neutral-minus-three);
+      box-shadow: none;
+      color: var(--op-color-neutral-on-minus-three);
+    }
+    /* Focus State */
+    &:focus-visible {
+      background-color: var(--op-color-neutral-base);
+      box-shadow: var(--op-input-focus-neutral);
+      color: var(--op-color-neutral-on-base);
+    }
+  }
+  /* Modifiers */
+  &.tag--read-only {
+    /* This is here for consistency */
+  }
+  &.tag--primary {
+    background-color: var(--op-color-primary-base);
+    color: var(--op-color-primary-on-base);
+    .btn--icon {
+      color: var(--op-color-primary-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-primary-minus-three);
+        box-shadow: none;
+        color: var(--op-color-primary-on-minus-three);
+      }
+      /* 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);
+      }
+    }
+  }
+  &.tag--danger {
+    background-color: var(--op-color-alerts-danger-base);
+    color: var(--op-color-alerts-danger-on-base);
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-danger-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-danger-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-danger-on-minus-three);
+      }
+      /* 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);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+  &.tag--warning {
+    background-color: var(--op-color-alerts-warning-base);
+    color: var(--op-color-alerts-warning-on-base);
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-warning-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-warning-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-warning-on-minus-three);
+      }
+      /* 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);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+  &.tag--info {
+    background-color: var(--op-color-alerts-info-base);
+    color: var(--op-color-alerts-info-on-base);
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-info-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-info-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-info-on-minus-three);
+      }
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-info-base);
+        box-shadow: var(--op-input-focus-info);
+        color: var(--op-color-alerts-info-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
+  &.tag--notice {
+    background-color: var(--op-color-alerts-notice-base);
+    color: var(--op-color-alerts-notice-on-base);
+    /* stylelint-disable no-descending-specificity */
+    .btn--icon {
+      color: var(--op-color-alerts-notice-on-base);
+      /* Hover State */
+      &:hover {
+        background-color: var(--op-color-alerts-notice-minus-three);
+        box-shadow: none;
+        color: var(--op-color-alerts-notice-on-minus-three);
+      }
+      /* Focus State */
+      &:focus-visible {
+        background-color: var(--op-color-alerts-notice-base);
+        box-shadow: var(--op-input-focus-notice);
+        color: var(--op-color-alerts-notice-on-base);
+      }
+    }
+    /* stylelint-enable no-descending-specificity */
+  }
 }
 
 .text-pair {