@wwtdev/bsds-css 2.28.0 → 3.0.0-rc.21

package/dist/components/_table.scss

@@ -1,331 +0,0 @@
-@mixin table() {
-  /* ------ WRAPPER ------ */
-
-.bs-table-wrap {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-:where(.bs-table-wrap)  {
-  font-size: var(--bs-text-sm);
-  color: var(--bs-table-cell-ink, var(--bs-ink-light));
-  border-radius: var(--bs-space-2);
-  border: 1px solid var(--bs-border-base);
-}
-
-:where(.bs-table-wrap-header, .bs-table-wrap-footer) {
-  padding-block: var(--bs-space-3);
-  padding-inline: var(--bs-table-cell-padding);
-  background: var(--bs-bg-medium);
-  border-color: inherit;
-}
-
-:where(.bs-table-wrap-header) {
-  border-bottom-width: 1px;
-}
-
-:where(.bs-table-wrap-footer) {
-  border-top-width: 1px;
-}
-
-
-/* ------ TABLE ------ */
-
-.bs-table-scroll-wrap {
-  flex: 1;
-  border-color: inherit;
-  overflow: auto;
-  overscroll-behavior: none;
-}
-
-.bs-table {
-  display: grid;
-  grid-template-columns: var(--bs-table-col-widths);
-}
-
-:where(.bs-table) {
-  border-color: inherit;
-}
-
-/* ------ HEADER ROWGROUP ------ */
-
-.bs-table-header-rowgroup {
-  grid-column: 1 / -1;
-  grid-row: span var(--bs-table-header-row-count);
-  display: grid;
-  grid-template-columns: subgrid;
-  grid-template-rows: subgrid;
-  border-color: inherit;
-}
-
-.bs-table-header-rowgroup-freeze {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-
-  .bs-table:not(.bs-table-border-none) & {
-    box-shadow: 0 3px 0 rgba(0, 0, 0, .03);
-  }
-}
-
-/* ------ BODY ROWGROUP ------ */
-
-.bs-table-body-rowgroup {
-  grid-column: 1 / -1;
-  grid-row: span var(--bs-table-body-row-count);
-  display: grid;
-  grid-template-columns: subgrid;
-  grid-template-rows: subgrid;
-  border-color: inherit;
-}
-
-/* ------ FOOTER ROWGROUP ------ */
-
-.bs-table-footer-rowgroup {
-  grid-column: 1 / -1;
-  grid-row: span var(--bs-table-footer-row-count);
-  display: grid;
-  grid-template-columns: subgrid;
-  grid-template-rows: subgrid;
-  border-color: inherit;
-}
-
-.bs-table-footer-rowgroup-freeze {
-  position: sticky;
-  bottom: 0;
-  z-index: 2;
-
-  .bs-table:not(.bs-table-border-none) & {
-    box-shadow: 0 -3px 0 rgba(0, 0, 0, .03);
-  }
-}
-
-/* ------ ROWS ------ */
-
-.bs-table-row {
-  grid-column: 1 / -1;
-}
-
-:where(.bs-table-row) {
-  background: var(--bs-bg-base);
-  border-color: inherit;
-}
-
-:where(.bs-table-header-rowgroup .bs-table-row) {
-  background: var(--bs-bg-light);
-}
-
-:where(.bs-table-row:has(.bs-table-head-cell, .bs-table-cell)) {
-  display: grid;
-  grid-template-columns: subgrid;
-}
-
-/* ------ FROZEN COLS ------ */
-
-.bs-table-cols-frozen-left {
-  position: sticky;
-  left: 0;
-  grid-column: span var(--bs-table-frozen-left-count);
-  display: grid;
-  grid-template-columns: subgrid;
-  background: inherit;
-  border-color: inherit;
-  z-index: 1;
-
-  .bs-table:not(.bs-table-border-none) & {
-    box-shadow: 3px 0 0 rgba(0, 0, 0, .03);
-  }
-}
-
-.bs-table-cols-frozen-right {
-  position: sticky;
-  right: 0;
-  grid-column: span var(--bs-table-frozen-right-count);
-  display: grid;
-  grid-template-columns: subgrid;
-  background: inherit;
-  border-color: inherit;
-  z-index: 1;
-
-  .bs-table:not(.bs-table-border-none) & {
-    box-shadow: -3px 0 0 rgba(0, 0, 0, .03);
-  }
-}
-
-/* ------ CELLS ------ */
-
-:where(.bs-table-head-cell) {
-  color: var(--bs-table-head-cell-ink, var(--bs-ink-base));
-  font-weight: var(--bs-font-bold);
-  border-color: inherit;
-}
-
-/* Couldn't use :where due to Blue Steel reset styles on <button> imposing font-size.
-  Adding inherit in case consumer does custom header cell styles */
-.bs-table-head-cell .bs-sort-toggle {
-  font-size: inherit;
-  font-weight: var(--bs-font-bold);
-  color: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-}
-
-:where(.bs-table-cell) {
-  border-color: inherit;
-}
-
-/* ------ PROP: CELL-PADDING ------ */
-
-:root {
-  --bs-table-cell-padding-xs: var(--bs-space-2);
-  --bs-table-cell-padding-sm: var(--bs-space-3);
-  --bs-table-cell-padding-md: var(--bs-space-4);
-  --bs-table-cell-padding-lg: var(--bs-space-6);
-  --bs-table-cell-padding-xl: var(--bs-space-8);
-}
-
-:where(.bs-table-head-cell, .bs-table-cell) {
-  padding: var(--bs-table-cell-padding);
-}
-
-/* ------ PROP: TRUNCATE ------ */
-
-:where(.bs-table-truncate):where(.bs-table-head-cell, .bs-table-cell) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-
-/* ------ PROP: STRIPED ROWS ------ */
-
-:where(.bs-table-striped .bs-table-body-rowgroup .bs-table-row:nth-child(even)) {
-  background: var(--bs-bg-light);
-}
-
-
-/* ------ PROP: ROW HOVER ------ */
-
-:where(.bs-table-row-hover .bs-table-body-rowgroup .bs-table-row:hover) {
-  background: var(--bs-table-row-hover, var(--bs-bg-light));
-  transition: background-color 200ms;
-}
-
-
-/* ------ PROP: BORDERS ------ */
-
-/* -- borders="rows" -- */
-:where(.bs-table-border-rows) :where(.bs-table-row) {
-  border-bottom-width: 1px;
-}
-
-/* -- borders="cols" -- */
-/* setting following cell's left border instead of each cell's right, so Table's left/right border is easier for consumer to override with utility classes */
-:where(.bs-table-border-cols) :where(.bs-table-head-cell + .bs-table-head-cell, .bs-table-cell + .bs-table-cell) {
-  border-left-width: 1px;
-}
-
-.bs-table-border-cols .bs-table-header-rowgroup {
-  border-bottom-width: 1px;
-}
-
-/* -- borders="grid" -- */
-:where(.bs-table-border-grid) :where(.bs-table-row) {
-  border-bottom-width: 1px;
-}
-
-/* setting following cell's left border instead of each cell's right, so Table's left/right border is easier for consumer to override with utility classes */
-:where(.bs-table-border-grid) :where(.bs-table-head-cell + .bs-table-head-cell, .bs-table-cell + .bs-table-cell) {
-  border-left-width: 1px;
-}
-
-/* -- borders="frozen" -- */
-.bs-table-border-frozen .bs-table-header-rowgroup-freeze {
-  border-bottom-width: 1px;
-}
-
-/* -- frozen col and footer-rowgroup sections will always show border, unless borders="none" -- */
-/* (header-rowgroup is not included below since TableRow bottom border covers most cases) */
-.bs-table:not(.bs-table-border-none) .bs-table-cols-frozen-left {
-  border-right-width: 1px;
-}
-
-.bs-table:not(.bs-table-border-none) .bs-table-cols-frozen-right {
-  border-left-width: 1px;
-}
-
-.bs-table:not(.bs-table-border-none) .bs-table-footer-rowgroup-freeze {
-  border-top-width: 1px;
-}
-
-/* turn off last row's bottom border, since it would double-up with Table's border */
-:where(.bs-table-body-rowgroup, .bs-table-footer-rowgroup) .bs-table-row:last-of-type {
-  border-bottom-width: 0;
-}
-
-
-/* ------ TABLE COLUMN RESIZER ------ */
-
-.bs-table-col-resizer {
-  position: fixed; /* fixed instead of absolute, due to using coordinates from .getBoundingClientRect() */
-  top: 0;
-  left: -8px;
-  bottom: 0;
-  width: 15px; /* includes 5px resizer handle width + 5px of extra hover target area on left and right of handle */
-  cursor: col-resize;
-  touch-action: none;
-  z-index: var(--bs-table-col-resizer-z, 10);
-  transform: translate(var(--bs-table-col-resizer-x), var(--bs-table-col-resizer-y));
-
-  /* resizer handle and vertical line set-up */
-  &:before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: var(--bs-table-col-resizer-color, var(--bs-blue-base));
-  }
-
-  /* resizer handle */
-  &::after {
-    left: 5px;
-    width: 5px;
-    height: var(--bs-table-col-resizer-handle-height);
-  }
-
-  /* resizer vertical line/tail */
-  &::before {
-    left: 7px;
-    width: 1px;
-    height: var(--bs-table-col-resizer-tail-height);
-    display: none;
-  }
-
-  &.bs-table-col-resizer-active::before {
-    display: block;
-  }
-}
-
-/* ------ SORT TOGGLE ------ */
-
-/* Override Blue Steel CSS: It adds "relative" to buttons by default, which was causing an overlap issue when a Table with frozen, sortable cols scrolled horizontally */
-.bs-sort-toggle {
-  position: static;
-}
-
-/* Using :where to lower specificity so consumers can use utility classes to override */
-:where(.bs-sort-toggle) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-  cursor: pointer;
-}
-
-:where(.bs-sort-toggle .bs-icon) {
-  flex-shrink: 0;
-}
-
-  }
-  

package/dist/components/_tables.scss

@@ -1,84 +0,0 @@
-@mixin tables() {
-  table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow-x: auto;
-  max-width: 100%;
-  width: 100%;
-}
-thead {
-  color: var(--bs-ink-base);
-  font-size: var(--bs-font-base);
-  font-weight: 600;
-}
-tbody {
-  color: var(--bs-ink-light);
-}
-th {
-  background: var(--bs-bg-base);
-}
-th, td {
-  border-bottom: 1px solid var(--bs-border);
-  min-width: fit-content;
-  padding: var(--bs-space-2);
-  text-align: left;
-}
-
-/* Table Borders */
-table[data-borders^="none"] {
-  border: 0;
-}
-table[data-borders^="all"] :where(th, td) {
-  border-left: 1px solid var(--bs-border);
-}
-table[data-borders^="all"] :where(th, td):last-child {
-  border-right: 1px solid var(--bs-border);
-}
-table[data-borders^="all"] th {
-  border-top: 1px solid var(--bs-border);
-}
-
-/* Table Rows */
-table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
-  background-color: var(--bs-bg-medium);
-}
-
-/* Table Cells */
-table[data-cells^="fixed"] {
-  table-layout: fixed;
-}
-table:where([data-cells^="height"]) td {
-  height: 4.5rem;
-  vertical-align: middle;
-}
-
-/* Sticky Header */
-table:where([data-sticky]) {
-  isolation: isolate;
-}
-table:where([data-sticky^="top"]) td {
-  z-index: 1;
-}
-table:where([data-sticky^="top"]) {
-  border-collapse: separate;
-  overflow-y: unset; /* Will break sticky headers if removed */
-  position: relative;
-}
-table:where([data-sticky^="left"]) {
-  border-collapse: separate;
-  overflow-x: unset; /* Will break sticky headers if removed */
-  position: relative;
-}
-table:where([data-sticky^="top"]) th {
-  position: sticky;
-  top: var(--bs-content-top);
-  z-index: 2;
-}
-table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
-  position: sticky;
-  left: 0;
-  z-index: 2;
-}
-
-  }
-  

package/dist/components/_timeline.scss

@@ -1,122 +0,0 @@
-@mixin timeline() {
-  .bs-progress-bar, .bs-timeline {
-  background-color: var(--bs-bg-base);
-  display: flex;
-  position: relative;
-}
-
-.bs-progress-bar {
-  gap: .25rem;
-}
-
-/* ------------ Step Item ------------ */
-
-:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item) {
-  background-color: var(--step-bg, inherit);
-  flex-grow: 1;
-  flex-shrink: 0;
-  position: relative;
-}
-
-/* -- Step Items in Timeline -- */
-
-.bs-timeline :where(.bs-step-item) {
-  align-items: center;
-  color: var(--step-color, var(--bs-ink-light));
-  display: flex;
-  flex-direction: column;
-  padding-inline: 1rem;
-  row-gap: 0.5rem;
-}
-
-.bs-timeline :where(.bs-step-item *) {
-  text-wrap: nowrap;
-}
-
-.bs-timeline :where(.bs-step-item .bs-step-icon) {
-  background-color: inherit;
-  height: 1.5rem;
-  text-align: center;
-  width: 1.5rem;
-  z-index: 10;
-}
-
-.bs-timeline :where(.bs-step-item)::after {
-  border-top: 0.125rem solid var(--bs-border-base);
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0.75rem;
-  width: 100%;
-}
-
-/* -- Step Items in Progress Bar -- */
-
-.bs-progress-bar :where(.bs-step-item) {
-  --step-bg: var(--progress-step-bg, var(--bs-bg-disabled));
-  height: .25rem;
-}
-
-.bs-progress-bar :where(.bs-step-item > *) {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-
-
-/* ------------ Status colors ------------ */
-.bs-timeline :where(.bs-step-item[data-status="in-progress"]) {
-  --step-color: var(--bs-ink-base);
-  --progress-step-bg: var(--bs-purple-light);
-}
-
-.bs-progress-bar :where(.bs-step-item[data-status="not-started"]) {
-  --step-color: var(--bs-ink-light);
-  --progress-step-bg: var(--bs-gray-light);
-}
-
-.bs-progress-bar :where(.bs-step-item[data-status="in-progress"]),
-.bs-progress-bar :where(.bs-step-item[data-status="complete"]),
-.bs-progress-bar :where(.bs-step-item[data-status="paused"]),
-.bs-progress-bar :where(.bs-step-item[data-status="ongoing"]) {
-  --step-color: var(--bs-ink-plum);
-  --progress-step-bg: var(--bs-plum-medium);
-}
-
-.bs-timeline :where(.bs-step-item[data-status="complete"]),
-.bs-timeline :where(.bs-step-item[data-status="paused"]),
-.bs-timeline :where(.bs-step-item[data-status="ongoing"]) {
-  --step-color: var(--bs-ink-purple);
-  --progress-step-bg: var(--bs-purple-medium);
-}
-
-:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="base"]) {
-  --progress-step-bg: var(--bs-purple-base);
-}
-
-.bs-timeline :where(.bs-step-item[data-status="warning"]) {
-  --step-color: var(--bs-ink-orange);
-  --progress-step-bg: var(--bs-orange-base);
-}
-
-.bs-progress-bar :where(.bs-step-item[data-status="warning"]) {
-  --step-color: var(--bs-warning);
-  --progress-step-bg: var(--bs-warning);
-}
-
-:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="error"]),
-:is(.bs-progress-bar, .bs-timeline) :where(.bs-step-item[data-status="cancelled"]) {
-  --step-color: var(--bs-ink-red);
-  --progress-step-bg: var(--bs-red-base);
-}
-
-
-  }
-  

package/dist/components/_toast.scss

@@ -1,149 +0,0 @@
-@mixin toast() {
-  /* Base Toast Styles */
-.bs-toast {
-    --toast-transform: translate(0, calc(100% + 1.5rem));
-
-    background-color: var(--bs-bg-base-elevated);
-    border-top: 4px solid var(--bs-blue-base);
-    bottom: 1.5rem;
-    box-shadow: var(--bs-shadow-contentMedium);
-    left: 0;
-    margin-left: 1.5rem;
-    margin-right: 1.5rem;
-    opacity: 0;
-    position: fixed;
-    right: 0;
-    transform: var(--toast-transform);
-    transition-duration: 200ms;
-    transition-property: transform, opacity;
-    transition-timing-function: ease;
-    /* Clamp width for mobile -> full screen */
-    width: clamp(17rem, calc(100vw - 3rem), 25rem);
-    z-index: 999;
-}
-
-.bs-toast:where([data-stacked]:not([data-stacked="false"])) {
-    bottom: auto;
-    left: auto;
-    position: static;
-    right: auto;
-    z-index: auto;
-}
-
-/* Mobile - Toast comes up from bottom */
-.bs-toast:where([data-shown]:not([data-shown="false"])) {
-    opacity: 1;
-    transform: translate(0, 0);
-}
-
-.bs-toast-header {
-    align-items: center;
-    color: var(--bs-ink-base);
-    display: flex;
-    gap: 0.5rem;
-    padding: 1rem;
-}
-
-.bs-toast-header :where(.bs-toast-header-icon) {
-    color: var(--bs-blue-base);
-}
-
-.bs-toast-header :where(h5) {
-    font-weight: 400;
-}
-
-.bs-toast-body {
-    border-bottom: 1px solid var(--bs-border);
-    color: var(--bs-ink-light);
-    padding-bottom: 1rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
-.bs-toast-actions {
-    /* Mobile - Buttons will be stacked */
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: flex-end;
-    padding-bottom: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.5rem;
-}
-
-.bs-toast-actions:where([data-stacked]:not([data-stacked="false"])) {
-    flex-direction: column-reverse;
-}
-
-/* Warning Toast Styles */
-.bs-toast:where([data-variant^='warning']) {
-    border-top: 4px solid var(--bs-orange-warning);
-}
-
-.bs-toast:where([data-variant^='warning']) :where(.bs-toast-header .bs-toast-header-icon) {
-    color: var(--bs-orange-warning);
-}
-
-/* Positive Toast Styles */
-.bs-toast:where([data-variant^='positive']) {
-    border-top: 4px solid var(--bs-purple-400);
-}
-
-.bs-toast:where([data-variant^='positive']) :where(.bs-toast-header .bs-toast-header-icon) {
-    color: var(--bs-purple-400);
-}
-
-:where(.dark) .bs-toast:where([data-variant^='positive']) {
-    border-top: 4px solid var(--bs-purple-200);
-}
-
-:where(.dark) .bs-toast:where([data-variant^='positive']) :where(.bs-toast-header .bs-toast-header-icon) {
-    color: var(--bs-purple-200);
-}
-
-/* Negative Toast Styles */
-.bs-toast:where([data-variant^='negative']) {
-    border-top: 4px solid var(--bs-red-400);
-}
-
-.bs-toast:where([data-variant^='negative']) :where(.bs-toast-header .bs-toast-header-icon) {
-    color: var(--bs-red-400);
-}
-
-@media (min-width: 440px) {
-    .bs-toast {
-        --toast-transform: translate(calc(100% + 1.5rem), 0);
-
-        left: auto;
-        margin-left: 0;
-        margin-right: 0;
-        opacity: 0;
-        right: 1.5rem;
-    }
-
-    .bs-toast:where([data-shown]:not([data-shown="false"])) {
-        opacity: 1;
-        transform: translate(0, 0);
-    }
-
-    .bs-toast-actions:where([data-stacked]:not([data-stacked="false"])) {
-        flex-direction: row;
-    }
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-toast:where(.bs-toast-enter-from),
-.bs-toast:where(.bs-toast-leave-to) {
-    opacity: 0;
-    transform: var(--toast-transform);
-}
-
-.bs-toast:where(.bs-toast-enter-to),
-.bs-toast:where(.bs-toast-leave-from) {
-    opacity: 1;
-    transform: translate(0, 0);
-}
-
-  }
-  

package/dist/components/_toaster.scss

@@ -1,27 +0,0 @@
-@mixin toaster() {
-  /* Container for holding all toasts that will be visible */
-.bs-toaster {
-    /* Mobile - Center the toasts on the screen */
-    align-items: center;
-    bottom: 1.5rem;
-    display: flex;
-    flex-direction: column-reverse;
-    gap: 0.5rem;
-    left: 0;
-    position: fixed;
-    right: 0;
-    z-index: 999;
-}
-
-@media (min-width: 440px) {
-
-    .bs-toaster {
-        /* Non-mobile - Toasts will live on right side of the screen */
-        left: auto;
-        right: 1.5rem;
-    }
-
-}
-
-  }
-