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

package/dist/components/profile-details.css

@@ -1,40 +0,0 @@
-.bs-profile-details {
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-sm);
-  line-height: 1.3;
-}
-
-.bs-profile-details > :where(*) {
-  display: block;
-}
-
-.bs-profile-details > :where(.bs-profile-name) {
-  color: var(--profile-name-color, var(--bs-ink-base));
-  text-decoration: var(--profile-name-decoration, none);
-}
-
-/* Action button aka Follow toggle. */
-.bs-profile-details > :where(button:first-child) {
-  color: var(--profile-action-color, var(--bs-orange-warning));
-  font-size: inherit;
-}
-.bs-profile-details > :where(button:first-child:hover) {
-  text-decoration: underline;
-}
-/* Remove the profile name underline when hovering on the action button. */
-.bs-profile-details:has(:where(button:first-child:hover)) {
-  --profile-name-decoration: none;
-}
-
-/* Action button and optional meta details w/ icon */
-.bs-profile-details > :where([data-icon]) {
-  align-items: center;
-  column-gap: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  font-size: inherit;
-}
-.bs-profile-details .bs-icon {
-  height: .75rem;
-  width: .75rem;
-}

package/dist/components/profile-img.css

@@ -1,69 +0,0 @@
-.bs-profile-img,
-.bs-profile-img:where([data-img-size^='sm']) {
-  --profile-size: 2rem;
-  --profile-text: 0.8125rem;
-
-  aspect-ratio: 1/1;
-  border-radius: 50%;
-  height: var(--profile-size);
-  overflow: hidden;
-  position: relative;
-  width: var(--profile-size);
-}
-
-.bs-profile-img :where(img) {
-  height: 100%;
-  object-fit: cover;
-  width: 100%;
-}
-.bs-profile-img:where([data-no-img]:not([data-no-img="false"])) img {
-  display: none;
-}
-
-.bs-profile-img::before,
-.bs-profile-img::after {
-  border-radius: 50%;
-  border-collapse: collapse;
-  height: 100%;
-  inset: 0;
-  position: absolute;
-  width: 100%;
-}
-/* Shadow */
-.bs-profile-img::before {
-  box-shadow: var(--bs-shadow-profilePhoto);
-  content: '';
-}
-.bs-profile-img:where([data-no-img]:not([data-no-img="false"]))::before {
-  display: none;
-}
-/* Initials */
-.bs-profile-img:where([data-no-img]:not([data-no-img="false"]))::after {
-  align-items: center;
-  border: 1px solid currentColor;
-  color: var(--bs-blue-500);
-  content: attr(data-initials);
-  display: flex;
-  font-size: var(--profile-text);
-  justify-content: center;
-  text-transform: uppercase;
-  line-height: 1;
-}
-
-/* Profile Sizes */
-.bs-profile-img:where([data-img-size^='xs']) {
-  --profile-size: 1.5rem;
-  --profile-text: 0.625rem;
-}
-.bs-profile-img:where([data-img-size^='md']) {
-  --profile-size: 3rem;
-  --profile-text: var(--bs-text-md);
-}
-.bs-profile-img:where([data-img-size^='lg']) {
-  --profile-size: 4rem;
-  --profile-text: var(--bs-text-lg);
-}
-.bs-profile-img:where([data-img-size^='xl']) {
-  --profile-size: 5.75rem;
-  --profile-text: var(--bs-text-2xl);
-}

package/dist/components/profile-layout.css

@@ -1,25 +0,0 @@
-/* Profile with User Details */
-.bs-profile:where([data-layout]),
-.bs-profile:where([data-layout^='vertical']) {
-  display: grid;
-  row-gap: 0.5rem;
-}
-
-.bs-profile:where([data-layout^='horizontal']) {
-  column-gap: 1rem;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-}
-
-/* When wrapped in a link */
-a.bs-profile:where([data-layout]) {
-  text-decoration: none;
-}
-
-a.bs-profile:where([data-layout]) {
-  --profile-name-color: var(--bs-ink-blue);
-}
-
-a.bs-profile:where([data-layout]):hover {
-  --profile-name-decoration: underline;
-}

package/dist/components/spinner.css

@@ -1,91 +0,0 @@
-:where(.bs-spinner) {
-  display: block;
-}
-
-/* ------------ Sizes ------------ */
-.bs-spinner {
-  aspect-ratio: 1;
-  fill: none;
-  height: var(--spinner-size, 2rem);
-  width: var(--spinner-size, 2rem);
-}
-
-.bs-spinner:where([data-size="sm"]) {
-  --spinner-size: 1rem;
-}
-
-.bs-spinner:where([data-size="md"]) {
-  --spinner-size: 2rem;
-}
-
-.bs-spinner:where([data-size="lg"]) {
-  --spinner-size: 3rem;
-}
-
-/* ------------ Color Variants ------------ */
-
-.bs-spinner :where(circle) {
-  animation: bs-spin 1s linear infinite;
-  stroke-linecap: round;
-  stroke-width: 10%;
-  transition: all 1s ease-in-out;
-}
-
-.bs-spinner:where(:not([data-variant="gradient"])) :where(circle) {
-  animation: bs-spin 1s linear infinite, bs-stroke-change 2s linear infinite;
-}
-
-.bs-spinner :where(circle) {
-  --bs-spinner-color-1: var(--bs-blue-400);
-  --bs-spinner-color-2: var(--bs-blue-200);
-}
-
-.bs-spinner:where([data-variant="white"]) :where(circle) {
-  --bs-spinner-color-1: white;
-  --bs-spinner-color-2: white;
-}
-
-:where(#bs-spinner-gradient stop) {
-  stop-color: var(--bs-plum-400);
-}
-:where(#bs-spinner-gradient stop:first-child) {
-  stop-color: var(--bs-blue-400);
-}
-:where(#bs-spinner-gradient stop:last-child) {
-  stop-color: var(--bs-red-400);
-}
-
-@keyframes bs-spin {
-  0% {
-    stroke-dasharray: 0 100;
-    stroke-dashoffset: 0;
-  }
-  25% {
-    stroke-dasharray: 33 67;
-    stroke-dashoffset: -40;
-  }
-  70% {
-    stroke-dasharray: 33 67;
-    stroke-dashoffset: -60;
-  }
-  85% {
-    stroke-dasharray: 17 83;
-    stroke-dashoffset: -77;
-  }
-  100% {
-    stroke-dasharray: 0 100;
-    stroke-dashoffset: -100;
-  }
-}
-
-@keyframes bs-stroke-change {
-  0% {
-    stroke: var(--bs-spinner-color-1);
-  }
-  33% {
-    stroke: var(--bs-spinner-color-2, var(--bs-spinner-color-1));
-  }
-  100% {
-    stroke: var(--bs-spinner-color-1);
-  }
-}

package/dist/components/tab-list.css

@@ -1,147 +0,0 @@
-.bs-tab-list {
-  --active-line-max-width: 0;
-  --active-line-offset: 0;
-  --active-line-scale: 0;
-  --active-line-transition-duration: 300ms;
-  --tab-color: var(--bs-ink-light);
-  --tab-cursor: pointer;
-  --tab-display: inline-flex;
-  --tab-justify: center;
-  --tab-list-opacity: 1;
-  --tab-text-size: var(--bs-text-sm);
-  --tab-weight: var(--bs-font-normal);
-  align-items: center;
-  border-bottom: 1px solid var(--bs-border-base);
-  display: flex;
-  font-size: var(--tab-text-size);
-  gap: 1rem;
-  height: 2.5rem;
-  justify-content: var(--tab-justify);
-  line-height: 1.5;
-  opacity: var(--tab-list-opacity);
-  overflow-x: clip;
-  overflow-y: visible;
-  position: relative;
-  width: 100%;
-}
-
-.bs-tab-list:where([data-resizing="true"]) {
-  --tab-list-opacity: 0;
-}
-
-@media (min-width: 1166px) {
-  .bs-tab-list {
-    --tab-justify: flex-start;
-    --tab-text-size: var(--bs-text-base);
-  }
-}
-
-/* ------------- Tabs ------------- */
-.bs-tab-list-tabs {
-  align-items: center;
-  display: flex;
-  flex-grow: 1;
-  gap: 1rem;
-}
-
-@media (min-width: 1166px) {
-  .bs-tab-list-tabs {
-    flex-grow: 0;
-  }
-}
-
-.bs-tab-list-tabs :where([role="tab"]) {
-  align-items: center;
-  color: var(--tab-color, var(--bs-ink-light));
-  column-gap: 0.5rem;
-  cursor: var(--tab-cursor);
-  display: var(--tab-display);
-  flex-basis: var(--tab-basis, content);
-  flex-grow: var(--tab-grow, 1);
-  flex-shrink: var(--tab-shrink, 0);
-  font-size: inherit;
-  font-weight: var(--tab-weight, var(--bs-font-normal));
-  height: 2.5rem;
-  justify-content: var(--tab-justify-self, center);
-  outline-color: var(--bs-blue-base);
-  outline-offset: -1px;
-  padding: 0.5rem;
-  text-decoration: none;
-}
-
-.bs-tab-list-tabs :where([role="tab"][tabindex="-1"]) {
-  --tab-cursor: default;
-}
-
-.bs-tab-list-tabs :where([role="tab"][data-hidden="true"]) {
-  --tab-display: none;
-}
-
-.bs-tab-list-tabs :where([role="tab"][aria-selected="true"]) {
-  --tab-color: var(--bs-ink-base);
-  --tab-weight: var(--bs-font-bold);
-}
-
-/* ---- always use DT styles when tabs have yet to be width-adapted (they're invisible during this time) ---- */
-.bs-tab-list:where([data-resizing="true"]) {
-  --tab-basis: auto;
-  --tab-grow: 0;
-  --tab-justify-self: flex-start;
-  --tab-shrink: 0;
-}
-
-@media (min-width: 1166px) {
-  .bs-tab-list {
-    --tab-basis: auto;
-    --tab-grow: 0;
-    --tab-justify-self: flex-start;
-    --tab-shrink: 0;
-  }
-}
-
-/* ------------- Active line ------------- */
-.bs-tab-list::after {
-  background-color: var(--bs-blue-base);
-  bottom: 0;
-  content: '';
-  height: 0.25rem;
-  left: 0;
-  position: absolute;
-  transform-origin: top left;
-  transform: translate(var(--active-line-offset)) scaleX(var(--active-line-scale));
-  transition: transform var(--active-line-transition-duration) ease-in;
-  width: 100%;
-}
-
-/* ------------- Tab Panels ------------- */
-.bs-tab-panel:where([role="tabpanel"]) {
-  display: none;
-}
-
-.bs-tab-panel:where([role="tabpanel"][data-active="true"]) {
-  display: block;
-}
-
-/* ------------- Toggle ------------- */
-.bs-tab-list-toggle {
-  align-items: center;
-  color: var(--tab-color, var(--bs-ink-light));
-  column-gap: 0.5rem;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--tab-text-size, 0.875rem);
-  font-weight: var(--tab-weight, var(--bs-font-normal));
-  gap: 0.375rem;
-  height: 2.5rem;
-  justify-content: var(--tab-justify-self, center);
-  padding: 0.5rem;
-}
-
-.bs-tab-list-toggle:where([data-hidden="true"]) {
-  display: none;
-}
-
-.bs-tab-list-toggle:where([data-active="true"]) {
-  color: var(--bs-ink-base);
-  font-weight: var(--bs-font-bold);
-}

package/dist/components/table.css

@@ -1,327 +0,0 @@
-/* ------ 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;
-}