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

package/dist/components/_pills.scss

@@ -1,224 +0,0 @@
-@mixin pills() {
-  .bs-pill {
-  --pill-background: var(--bs-bg-medium);
-  --pill-border: transparent;
-  --pill-text: #162FB4; /* one-off component-specific */
-  --pill-gap: var(--bs-space-2);
-
-  align-items: center;
-  appearance: none;
-  background-color: var(--pill-background);
-  border: 1px solid var(--pill-border);
-  border-radius: 4px;
-  color: var(--pill-text);
-  display: inline-flex;
-  font-size: var(--bs-text-xs);
-  height: 1.5rem;
-  gap: var(--pill-gap);
-  line-height: 1rem;
-  padding: 0 .375rem;
-  text-decoration: none;
-}
-
-:where(.bs-pill .bs-icon) {
-  height: 1rem;
-  width: 1rem;
-}
-
-/* ------------------------------- Dark mode (basic & status types only) ------------------------------- */
-:where(.dark) .bs-pill {
-  --pill-text: #7585D1;
-}
-
-/* ------------------------------ Auto-truncation for content ------------------------------ */
-.bs-pill:has([data-truncate="true"]) {
-  max-width: 100%;
-}
-.bs-pill > :where([data-truncate="true"]) {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* If false, pass thru .bs-pill display styles */
-.bs-pill > :where([data-truncate="false"]) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pill-gap);
-}
-
-/* ------------------------------ Button and Link Styles ------------------------------ */
-:is(a, button).bs-pill {
-  color: var(--pill-text);
-  cursor: pointer;
-  transition: all 0.15s ease-in-out;
-}
-:is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-royal-base);
-
-  color: var(--pill-text);
-  outline: transparent;
-}
-
-/* ------------------------------ Background Colors ------------------------------ */
-:where(.box[data-invert]) .bs-pill {
-  --pill-background: var(--bs-bg-invert-to-base-subtle);
-  --pill-text: var(--bs-gray-100);
-}
-:where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-gray-100);
-}
-:where(.dark .box[data-invert]) .bs-pill {
-  --pill-text: var(--bs-royal-400);
-}
-:where(.dark .box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
-  --pill-border: var(--bs-royal-400);
-}
-
-/* ------------------ Generally Applicable ::Before Styles ------------------ */
-.bs-pill::before {
-  flex-shrink: 0;
-}
-
-/* ------------------------------ Status Styles ------------------------------ */
-.bs-pill:where([data-status]) {
-  --status-color: var(--bs-blue-base);
-}
-.bs-pill:where([data-status])::before {
-  background-color: var(--status-color);
-  border-radius: 100%;
-  content: '';
-  height: 12px;
-  width: 12px;
-}
-
-/* ----- Status Colors ----- */
-.bs-pill:where([data-status^="active"]) {
-  --status-color: var(--bs-blue-base);
-}
-.bs-pill:where([data-status^="complete"]) {
-  --status-color: var(--bs-purple-400);
-}
-.bs-pill:where([data-status^="disabled"]) {
-  --status-color: var(--bs-gray-300);
-}
-.bs-pill:where([data-status^="error"]) {
-  --status-color: var(--bs-red-400);
-}
-.bs-pill:where([data-status^="positive"]) {
-  --status-color: #16986D;
-}
-.bs-pill:where([data-status^="warning"]) {
-  --status-color: var(--bs-orange-warning);
-}
-/* Deprecated; use "data-status disabled" instead */
-.bs-pill:where([data-status^="inactive"]) {
-  --status-color: var(--bs-gray-300);
-}
-
-/* ------------------------------ Filter Styles ------------------------------ */
-.bs-pill:where([data-variant^="filter"]) {
-  --pill-background: var(--bs-bg-base);
-  --pill-border: var(--bs-border-base);
-  --pill-text: var(--bs-ink-base);
-}
-.bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
-  --pill-border: var(--bs-border-base);
-}
-:is(a, button).bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
-  --pill-border: var(--bs-ink-base);
-}
-
-/* ------------------------------ Variant: "Filter Add" Styles ------------------------------ */
-/* Black + */
-.bs-pill:where([data-variant^="filter"][data-variant*="add"])::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%230A0B19'/%3E%3C/svg%3E");
-}
-/* White + */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="add"]):not(:disabled, [aria-disabled="true"])::after{
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%23ffffff'/%3E%3C/svg%3E");
-}
-
-
-/* ------------------------------ Variant: "Filter Remove" Styles ------------------------------ */
-/* Black X */
-.bs-pill:where([data-variant^="filter"][data-variant*="remove"])::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
-}
-/* White X */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled="true"])::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
-}
-/* Dark Red X */
-.bs-pill:where([data-variant^="filter"][data-variant*="remove"]):hover::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23D91214'/%3E%3C/svg%3E%0A");
-}
-/* Light Red X */
-:where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):hover::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23F15355'/%3E%3C/svg%3E%0A");
-}
-
-/* ------------------------------ Variant: "Filter Active" Styles ------------------------------ */
-.bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])) {
-  --pill-background: var(--bs-blue-base);
-  --pill-border: transparent;
-  --pill-text: var(--bs-white);
-}
-.bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])):is(:hover, :focus)  {
-  --pill-border: transparent;
-}
-:is(a, button).bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])):is(:hover, :focus)  {
-  --pill-background: var(--bs-blue-500);
-  --pill-border: transparent;
-}
-/* White X */
-.bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"]))::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23fff'/%3E%3C/svg%3E");
-}
-/* Black X */
-.bs-pill:where([data-variant^="filter"][data-active]:not([data-active="false"])):where(:disabled, [aria-disabled="true"])::after {
-  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
-}
-
-/* ------------------------------ Variant: "Live Now" Styles ------------------------------ */
-.bs-pill:where([data-variant^="live"]) {
-  --pill-background: var(--bs-plum-base);
-  --pill-text: var(--bs-white);
-  --pill-gap: var(--bs-space-1);
-  text-transform: uppercase;
-}
-.bs-pill:where([data-variant^="live"]):hover {
-  --pill-border: transparent;
-}
-.bs-pill:where([data-variant^="live"])::before {
-  background-color: var(--bs-red-400);
-  border: 3px solid var(--bs-white);
-  border-radius: 100%;
-  content: '';
-  height: 12px;
-  width: 12px;
-}
-
-/* ------------------------------ Variant: "Inactive" Styles ------------------------------ */
-.bs-pill:where([data-variant^="inactive"]) {
-  --pill-background: var(--bs-gray-base);
-  --pill-text: var(--bs-ink-invert);
-}
-
-
-/* ------------------------------ Disabled Styles ------------------------------ */
-/* ----- Not to be confused with data-status="disabled" or variant "inactive".  These are for link/button/filter pills. ----- */
-.bs-pill:is(:disabled, [aria-disabled="true"]) {
-  pointer-events: none;
-  color: var(--bs-ink-disabled);
-  background-color: var(--bs-bg-disabled);
-}
-
-.bs-pill:where([data-variant^="filter"]):not([data-active]):is(:disabled, [aria-disabled="true"]),
-.bs-pill:where([data-variant^="filter"])[data-active="false"]:is(:disabled, [aria-disabled="true"]) {
-  --pill-border: var(--bs-gray-400);
-}
-
-  }
-  

package/dist/components/_profile-details.scss

@@ -1,44 +0,0 @@
-@mixin profile-details() {
-  .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.scss

@@ -1,73 +0,0 @@
-@mixin profile-img() {
-  .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.scss

@@ -1,29 +0,0 @@
-@mixin profile-layout() {
-  /* 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.scss

@@ -1,95 +0,0 @@
-@mixin spinner() {
-  :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.scss

@@ -1,151 +0,0 @@
-@mixin tab-list() {
-  .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);
-}
-
-  }
-