@rolemodel/optics 2.0.1 → 2.1.2

package/dist/css/components/pagination.css

@@ -1,24 +0,0 @@
-.pagination {
-  display: flex;
-  align-items: center;
-  gap: 0;
-
-  /* Showing Dropdown */
-  .form-group {
-    align-items: center;
-
-    .form-label {
-      grid-column: 1;
-    }
-
-    .form-control {
-      grid-column: 2;
-    }
-  }
-
-  /* ... Gap */
-  .pagination__divider {
-    height: 100%;
-    padding-inline: var(--op-space-x-small);
-  }
-}

package/dist/css/components/side_panel.css

@@ -1,90 +0,0 @@
-.side-panel {
-  /* Public API (customizable component options) */
-  --_op-side-panel-width: calc(54 * var(--op-size-unit)); /* 216px */
-  --_op-side-panel-header-padding: var(--op-space-medium);
-  --_op-side-panel-body-padding: var(--op-space-medium);
-  --_op-side-panel-footer-padding: var(--op-space-medium);
-  --_op-side-panel-section-padding: var(--op-space-medium);
-
-  display: flex;
-  width: var(--_op-side-panel-width);
-  min-width: var(--_op-side-panel-width);
-  height: 100vh;
-  max-height: 100%;
-  flex-direction: column;
-  background-color: var(--op-color-background);
-  color: var(--op-color-on-background);
-
-  /* Modifiers */
-  &.side-panel--border-left {
-    box-shadow: var(--op-border-left) var(--op-color-border);
-  }
-
-  &.side-panel--border-right {
-    box-shadow: var(--op-border-right) var(--op-color-border);
-  }
-
-  &.side-panel--border-left.side-panel--border-right {
-    box-shadow: var(--op-border-x);
-  }
-
-  /* Elements */
-  .side-panel__header {
-    &.side-panel__header--padded {
-      padding: var(--_op-side-panel-header-padding);
-    }
-
-    &.side-panel__header--padded-x {
-      padding-inline: var(--_op-side-panel-header-padding);
-    }
-
-    &.side-panel__header--padded-y {
-      padding-block: var(--_op-side-panel-header-padding);
-    }
-  }
-
-  .side-panel__body {
-    flex: 1;
-    overflow-y: auto;
-
-    &.side-panel__body--padded {
-      padding: var(--_op-side-panel-body-padding);
-    }
-
-    &.side-panel__body--padded-x {
-      padding-inline: var(--_op-side-panel-body-padding);
-    }
-
-    &.side-panel__body--padded-y {
-      padding-block: var(--_op-side-panel-body-padding);
-    }
-  }
-
-  .side-panel__footer {
-    &.side-panel__footer--padded {
-      padding: var(--_op-side-panel-footer-padding);
-    }
-
-    &.side-panel__footer--padded-x {
-      padding-inline: var(--_op-side-panel-footer-padding);
-    }
-
-    &.side-panel__footer--padded-y {
-      padding-block: var(--_op-side-panel-footer-padding);
-    }
-  }
-
-  .side-panel__section {
-    &.side-panel__section--padded {
-      padding: var(--_op-side-panel-section-padding);
-    }
-
-    &.side-panel__section--padded-x {
-      padding-inline: var(--_op-side-panel-section-padding);
-    }
-
-    &.side-panel__section--padded-y {
-      padding-block: var(--_op-side-panel-section-padding);
-    }
-  }
-}

package/dist/css/components/sidebar.css

@@ -1,139 +0,0 @@
-.sidebar {
-  /* Public API (customizable component options) */
-
-  /* Normal */
-  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
-  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
-  --_op-sidebar-border-color: var(--op-color-neutral-plus-four);
-
-  /* Width */
-  --_op-sidebar-rail-width: calc(22 * var(--op-size-unit)); /* 88px */
-  --_op-sidebar-compact-width: calc(42 * var(--op-size-unit)); /* 168px */
-  --_op-sidebar-drawer-width: calc(54 * var(--op-size-unit)); /* 216px */
-  --_op-sidebar-rail-brand-width: calc(19 * var(--op-size-unit)); /* 76px */
-  --_op-sidebar-compact-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
-  --_op-sidebar-drawer-brand-width: calc(24 * var(--op-size-unit)); /* 96px */
-
-  /* Spacing */
-  --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
-  --_op-sidebar-brand-spacing: var(--op-space-medium);
-  --_op-sidebar-content-spacing: var(--op-space-x-small);
-  --_op-sidebar-content-item-spacing: var(--op-space-2x-small);
-
-  /* Animation */
-  --_op-sidebar-transition: var(--op-transition-sidebar);
-
-  /* Private API (component option defaults) */
-  --__op-sidebar-width: var(--_op-sidebar-drawer-width);
-  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
-
-  z-index: var(--op-z-index-sidebar);
-  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);
-  overflow-y: auto;
-  transition: var(--_op-sidebar-transition);
-
-  /* Elements */
-  .sidebar__brand {
-    height: var(--__op-sidebar-brand-width);
-    padding: var(--_op-sidebar-brand-spacing);
-    margin-inline: auto;
-
-    img {
-      height: 100%;
-    }
-  }
-
-  .sidebar__content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: var(--_op-sidebar-content-item-spacing);
-    padding-inline: var(--_op-sidebar-content-spacing);
-
-    > * {
-      justify-content: flex-start;
-
-      .material-symbols-outlined {
-        --op-mso-optical-sizing: 40;
-        --op-mso-weight: var(--op-font-weight-bold);
-
-        font-size: var(--op-font-large);
-      }
-    }
-
-    &.sidebar__content--start {
-      justify-content: start;
-    }
-
-    &.sidebar__content--center {
-      justify-content: center;
-    }
-
-    &.sidebar__content--end {
-      justify-content: end;
-    }
-  }
-
-  /* Modifiers */
-  &.sidebar--padded {
-    padding-block: var(--_op-sidebar-spacing);
-  }
-
-  /* Drawer Modifier */
-  &.sidebar--drawer {
-    /* Private API */
-    --__op-sidebar-width: var(--_op-sidebar-drawer-width);
-    --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
-  }
-
-  /* Compact Modifier */
-  &.sidebar--compact {
-    /* Private API (component option defaults) */
-    --__op-sidebar-width: var(--_op-sidebar-compact-width);
-    --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
-
-    /* Elements */
-    .sidebar__content {
-      > * {
-        /* Need to get icon-with-label behavior */
-        flex-direction: column;
-        padding: var(--op-space-small);
-        gap: var(--op-space-3x-small);
-      }
-    }
-  }
-
-  &.sidebar--rail {
-    /* Private API (component option defaults) */
-    --__op-sidebar-width: var(--_op-sidebar-rail-width);
-    --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
-
-    /* Elements */
-    .sidebar__content {
-      align-items: center;
-
-      > * {
-        /* Need to get icon behavior */
-        width: var(--__op-btn-height);
-        min-width: var(--__op-btn-height);
-        justify-content: center;
-        padding: 0;
-        font-size: 0;
-        gap: 0;
-      }
-    }
-  }
-
-  /* Primary */
-  &.sidebar--primary {
-    --_op-sidebar-background-color: var(--op-color-primary-plus-six);
-    --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
-    --_op-sidebar-border-color: var(--op-color-primary-plus-four);
-  }
-}

package/dist/css/components/spinner.css

@@ -1,52 +0,0 @@
-.spinner {
-  /* Public API (customizable component options) */
-  --_op-spinner-indicator-color: var(--op-color-primary-base);
-  --_op-spinner-track-color: var(--op-color-neutral-plus-four);
-  --_op-spinner-track-width-x-small: var(--op-border-width);
-  --_op-spinner-track-width-small: var(--op-border-width-large);
-  --_op-spinner-track-width-medium: calc(var(--op-border-width-large) + var(--op-border-width));
-  --_op-spinner-track-width-large: var(--op-border-width-x-large);
-  --_op-spinner-diameter-x-small: calc(6 * var(--op-size-unit)); /* 24px */
-  --_op-spinner-diameter-small: calc(10 * var(--op-size-unit)); /* 40px */
-  --_op-spinner-diameter-medium: calc(15 * var(--op-size-unit)); /* 60px */
-  --_op-spinner-diameter-large: calc(20 * var(--op-size-unit)); /* 80px */
-  --_op-spinner-animation-duration: 0.8s;
-  --_op-spinner-animation-timing-function: linear;
-
-  /* Private API (component option defaults) */
-  --__op-spinner-diameter: var(--_op-spinner-diameter-large);
-  --__op-spinner-track-width: var(--_op-spinner-track-width-large);
-
-  width: var(--__op-spinner-diameter);
-  height: var(--__op-spinner-diameter);
-  border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color);
-  border-radius: var(--__op-spinner-diameter);
-  border-top-color: var(--_op-spinner-indicator-color);
-  animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite;
-
-  &.spinner--x-small {
-    --__op-spinner-diameter: var(--_op-spinner-diameter-x-small);
-    --__op-spinner-track-width: var(--_op-spinner-track-width-x-small);
-  }
-
-  &.spinner--small {
-    --__op-spinner-diameter: var(--_op-spinner-diameter-small);
-    --__op-spinner-track-width: var(--_op-spinner-track-width-small);
-  }
-
-  &.spinner--medium {
-    --__op-spinner-diameter: var(--_op-spinner-diameter-medium);
-    --__op-spinner-track-width: var(--_op-spinner-track-width-medium);
-  }
-
-  &.spinner--large {
-    --__op-spinner-diameter: var(--_op-spinner-diameter-large);
-    --__op-spinner-track-width: var(--_op-spinner-track-width-large);
-  }
-}
-
-@keyframes spinner {
-  to {
-    transform: rotate(360deg);
-  }
-}

package/dist/css/components/switch.css

@@ -1,107 +0,0 @@
-.switch {
-  /* Public API (allowed to be overridden) */
-  --_op-switch-height-small: calc(4 * var(--op-size-unit)); /* 16px */
-  --_op-switch-height-large: calc(6 * var(--op-size-unit)); /* 24px */
-  --_op-switch-width-small: calc(7 * var(--op-size-unit)); /* 28px */
-  --_op-switch-width-large: calc(11 * var(--op-size-unit)); /* 44px */
-  --_op-switch-opacity-disabled: var(--op-opacity-disabled);
-  --_op-switch-switch-padding: var(--op-space-2x-small);
-
-  /* Private API (don't touch these) */
-  --__op-switch-width: var(--_op-switch-width-large);
-  --__op-switch-height: var(--_op-switch-height-large);
-  --__op-switch-switch-size: calc(var(--__op-switch-height) - var(--_op-switch-switch-padding));
-  --__op-switch-half-switch-padding: calc(var(--_op-switch-switch-padding) / 2);
-
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  label {
-    position: relative;
-    display: block;
-    width: var(--__op-switch-width);
-    height: var(--__op-switch-height);
-    border-radius: var(--op-radius-pill);
-    background: var(--op-color-neutral-base);
-    box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three);
-    text-indent: -9999px; /* Normally text would not be put in the label, but this hides it in case you do put text in the label */
-
-    &::after {
-      position: absolute;
-      width: var(--__op-switch-switch-size);
-      height: var(--__op-switch-switch-size);
-      border-radius: var(--op-radius-circle);
-      background-color: var(--op-color-neutral-plus-eight);
-      content: '';
-      inset-block-start: var(--__op-switch-half-switch-padding);
-      inset-inline-start: var(--__op-switch-half-switch-padding);
-      transition: var(--op-transition-input);
-    }
-  }
-
-  /* Prevent labels after the toggle being full width */
-  & + label {
-    width: fit-content;
-  }
-
-  input {
-    width: 0;
-    height: 0;
-    margin-inline-end: calc(-1 * var(--op-space-x-small));
-
-    &:disabled {
-      visibility: hidden;
-    }
-
-    &:disabled + label {
-      cursor: not-allowed;
-      opacity: var(--_op-switch-opacity-disabled);
-    }
-
-    &:checked + label {
-      background-color: var(--op-color-primary-base);
-      box-shadow: none;
-
-      &::after {
-        left: calc(100% - var(--__op-switch-half-switch-padding));
-        transform: translateX(-100%);
-      }
-    }
-
-    &:hover + label {
-      &::after {
-        background-color: var(--op-color-primary-plus-five);
-      }
-    }
-
-    &:focus-visible + label {
-      box-shadow:
-        0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-six),
-        inset var(--op-border-all) var(--op-color-primary-minus-three);
-
-      &::after {
-        background-color: var(--op-color-neutral-plus-five);
-        box-shadow: var(--op-border-all) var(--op-color-primary-minus-three);
-      }
-    }
-
-    &:focus-visible:checked + label {
-      &::after {
-        background-color: var(--op-color-primary-plus-six);
-        box-shadow: var(--op-border-all) var(--op-color-primary-minus-two);
-      }
-    }
-  }
-
-  /* Size Modifiers */
-  &.switch--small {
-    --__op-switch-width: var(--_op-switch-width-small);
-    --__op-switch-height: var(--_op-switch-height-small);
-  }
-
-  &.switch--large {
-    --__op-switch-width: var(--_op-switch-width-large);
-    --__op-switch-height: var(--_op-switch-height-large);
-  }
-}

package/dist/css/components/tab.css

@@ -1,76 +0,0 @@
-.tab-group {
-  display: flex;
-  align-items: center;
-}
-
-.tab {
-  /* Public API */
-  --_op-tab-font-small: var(--op-font-x-small);
-  --_op-tab-font-large: var(--op-font-small);
-  --_op-tab-padding-small: calc(var(--op-space-2x-small) + var(--op-space-3x-small)) var(--op-space-medium);
-  --_op-tab-padding-large: var(--op-space-x-small) var(--op-space-medium) var(--op-space-small) var(--op-space-medium);
-  --_op-tab-indicator-width-small: var(--op-border-width-large);
-  --_op-tab-indicator-width-large: var(--op-border-width-x-large);
-  --_op-tab-disabled-opacity: var(--op-opacity-disabled);
-
-  /* Private API */
-  --__op-tab-font-size: var(--_op-tab-font-large);
-  --__op-tab-padding: var(--_op-tab-padding-large);
-  --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
-  --__op-tab-indicator: inset 0 calc(-1 * var(--__op-tab-indicator-width)) 0 0;
-
-  padding: var(--__op-tab-padding);
-  background-color: var(--op-color-background);
-  color: var(--op-color-on-background);
-  font-size: var(--__op-tab-font-size);
-  text-decoration: none;
-
-  &.tab--active {
-    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-plus-one);
-  }
-
-  /* Focus State */
-  &:focus,
-  &:focus-within,
-  &:focus-visible {
-    outline: none;
-  }
-
-  /* Hover State */
-  &:hover {
-    background-color: var(--op-color-primary-plus-seven);
-    box-shadow: var(--__op-tab-indicator) var(--op-color-primary-base);
-    color: var(--op-color-primary-on-plus-seven);
-  }
-
-  /* Focus State */
-  &:focus-visible:not(.tab--disabled) {
-    z-index: 1;
-    box-shadow: var(--op-input-focus-primary);
-
-    &.tab--active {
-      box-shadow:
-        var(--__op-tab-indicator) var(--op-color-primary-plus-one),
-        var(--op-input-focus-primary);
-    }
-  }
-
-  /* Disabled State */
-  &.tab--disabled {
-    opacity: var(--_op-tab-disabled-opacity);
-    pointer-events: none;
-  }
-
-  /* Size Modifiers */
-  &.tab--small {
-    --__op-tab-padding: var(--_op-tab-padding-small);
-    --__op-tab-font-size: var(--_op-tab-font-small);
-    --__op-tab-indicator-width: var(--_op-tab-indicator-width-small);
-  }
-
-  &.tab--large {
-    --__op-tab-padding: var(--_op-tab-padding-large);
-    --__op-tab-font-size: var(--_op-tab-font-large);
-    --__op-tab-indicator-width: var(--_op-tab-indicator-width-large);
-  }
-}

package/dist/css/components/table.css

@@ -1,133 +0,0 @@
-.table {
-  /* Public API */
-
-  /* Cells (for height, the appropriate variable is used when using the density modifiers) */
-  --_op-table-cell-height-default: calc(11 * var(--op-size-unit)); /* 44px */
-  --_op-table-cell-height-comfortable: calc(16 * var(--op-size-unit)); /* 64px */
-  --_op-table-cell-height-compact: calc(8 * var(--op-size-unit)); /* 32px */
-
-  /* Private API */
-
-  /* These allow for overriding specific padding versions easier. */
-  --__op-table-cell-height: var(--_op-table-cell-height-default);
-
-  width: 100%;
-  border-radius: var(--op-radius-medium);
-  border-collapse: collapse;
-  box-shadow: var(--op-border-all) var(--op-color-border);
-  contain: paint;
-  table-layout: auto;
-
-  /* Elements */
-
-  thead {
-    background-color: var(--op-color-neutral-plus-eight);
-    box-shadow: inset var(--op-border-top) var(--op-color-border);
-    color: var(--op-color-neutral-on-plus-eight);
-
-    &:has(th input[type='checkbox']:checked) {
-      background-color: var(--op-color-primary-plus-seven);
-      color: var(--op-color-primary-on-plus-seven);
-    }
-  }
-
-  th {
-    font-weight: var(--op-font-weight-semi-bold);
-    text-align: left;
-  }
-
-  tbody,
-  tfoot {
-    background-color: var(--op-color-neutral-plus-max);
-    color: var(--op-color-neutral-on-plus-max);
-  }
-
-  th,
-  td {
-    height: var(--__op-table-cell-height);
-    font-size: var(--op-font-small);
-    padding-block: var(--op-space-2x-small);
-    padding-inline: var(--op-space-small);
-  }
-
-  tfoot tr {
-    box-shadow: var(--op-border-top) var(--op-color-border);
-  }
-
-  tr:not(:last-child) {
-    box-shadow: inset var(--op-border-top) var(--op-color-border);
-  }
-
-  /* Modifiers */
-
-  /* stylelint-disable no-descending-specificity */
-  &.table--primary {
-    thead {
-      background-color: var(--op-color-primary-plus-seven);
-      color: var(--op-color-primary-on-plus-seven);
-    }
-  }
-
-  &.table--danger {
-    thead {
-      background-color: var(--op-color-alerts-danger-plus-seven);
-      color: var(--op-color-alerts-danger-on-plus-seven);
-    }
-  }
-  /* stylelint-enable no-descending-specificity */
-
-  &.table--container {
-    overflow-y: auto;
-  }
-
-  /* Layout Modifiers */
-  &.table--auto-layout {
-    table-layout: auto;
-  }
-
-  &.table--fixed-layout {
-    table-layout: fixed;
-  }
-
-  /* Table Density Modifiers */
-  &.table--default-density {
-    --__op-table-cell-height: var(--_op-table-cell-height-default);
-  }
-
-  &.table--comfortable-density {
-    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
-  }
-
-  &.table--compact-density {
-    --__op-table-cell-height: var(--_op-table-cell-height-compact);
-  }
-
-  /* Striped Modifiers */
-  &.table--even-striped {
-    tbody tr:nth-child(even) {
-      background-color: var(--op-color-neutral-plus-seven);
-      color: var(--op-color-neutral-on-plus-seven);
-    }
-  }
-
-  &.table--odd-striped {
-    tbody tr:nth-child(odd) {
-      background-color: var(--op-color-neutral-plus-seven);
-      color: var(--op-color-neutral-on-plus-seven);
-    }
-  }
-
-  /* Sticky Header Row Modifier */
-  /* stylelint-disable no-descending-specificity */
-  &.table--sticky-header thead {
-    position: sticky;
-    inset-block-start: 0;
-  }
-  /* stylelint-enable no-descending-specificity */
-
-  /* Sticky Footer Row Modifier */
-  &.table--sticky-footer tfoot {
-    position: sticky;
-    inset-block-end: 0;
-  }
-}