@rolemodel/optics 2.1.2 → 2.1.4

package/dist/css/components/pagination.css

@@ -0,0 +1,24 @@
+.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

@@ -0,0 +1,90 @@
+.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

@@ -0,0 +1,138 @@
+.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-icon-font-size: var(--_op-icon-font-size-large);
+        --__op-icon-optical-size: var(--_op-icon-optical-size-large);
+        --__op-icon-weight: var(--_op-icon-weight-bold);
+      }
+    }
+
+    &.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

@@ -0,0 +1,52 @@
+.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

@@ -0,0 +1,107 @@
+.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

@@ -0,0 +1,76 @@
+.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

@@ -0,0 +1,133 @@
+.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;
+  }
+}