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

package/dist/components/_inline-tabs.scss

@@ -1,86 +0,0 @@
-@mixin inline-tabs() {
-  .bs-inline-tabs {
-  display: flex;
-  gap: var(--bs-space-2);
-}
-
-.bs-inline-tab {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--bs-space-2) var(--bs-space-3);
-  font-size: var(--bs-text-sm);
-  font-weight: 600;
-  line-height: 1.5;
-  color: var(--bs-ink-royal);
-  text-align: center; /* needed for "as link" wrap cases */
-  text-decoration: none;
-  background-color: var(--bs-bg-medium);
-  border-radius: var(--bs-space-1);
-  border: 1px solid transparent;
-  outline: none;
-  cursor: pointer;
-  transition: all 100ms ease-in-out;
-}
-
-/* Variant */
-.bs-inline-tab:where([data-variant="white"]) {
-  background-color: var(--bs-bg-base);
-}
-
-/* Hover */
-.bs-inline-tab:where(:not([data-selected]):hover) {
-  border-color: var(--bs-ink-royal); /* "ink-royal" instead of "royal-base", matches Figma design */
-}
-
-/* Keyboard Focus */
-.bs-inline-tab:where(:focus-visible) {
-  outline: 2px solid var(--bs-ink-royal);
-
-  &:where([data-selected]) {
-    outline-offset: 2px;
-  }
-}
-
-/* Selected */
-.bs-inline-tab:where([data-selected]) {
-  color: var(--bs-ink-white);
-  background-color: var(--bs-royal-400); /* "400" instead of "base", matches Figma design */
-}
-
-/* Disabled (as button or link) */
-.bs-inline-tab:where(:disabled, [aria-disabled="true"]) {
-  color: var(--bs-ink-light);
-  background-color: var(--bs-gray-light);
-  cursor: default;
-  pointer-events: none;
-}
-
-/* Selected & Disabled */
-.bs-inline-tab:where([data-selected]):where(:disabled, [aria-disabled="true"]) {
-  color: var(--bs-ink-white);
-  background-color: var(--bs-gray-base);
-}
-
-/* -- Dark Mode Overrides -- */
-
-:where(.dark .bs-inline-tab) {
-
-  /* Ink */
-  &:not([data-selected], :disabled, [aria-disabled="true"]) {
-    color: var(--bs-ink-medium);
-  }
-
-  /* Selected & Disabled */
-  &[data-selected]:where(:disabled, [aria-disabled="true"]) {
-    color: var(--bs-ink-invert-base);
-  }
-
-  /* Keyboard Focus */
-  &[data-selected]:where(:focus-visible) {
-    outline-offset: 0;
-  }
-  
-}
-  }
-  

package/dist/components/_loader.scss

@@ -1,105 +0,0 @@
-@mixin loader() {
-  .bs-loader {
-  --loader-dot-bg: var(--bs-blue-500);
-  --loader-dot-size: .75rem;
-  --loader-dot-top: calc(50% - var(--loader-dot-size)/2);
-  --loader-dot-translate: 1.75rem; /* i.e., calc(var(--loader-width)/2 - var(--loader-dot-size)/2); */
-  --loader-height: 3rem;
-  --loader-width: 4rem; /* approx 6 * dot size */
-  display: block;
-  height: var(--loader-height);
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  position: relative;
-  width: var(--loader-width);
-}
-.bs-loader:where([data-size="xs"]) {
-  --loader-dot-size: .3rem;
-  --loader-dot-translate: .75rem;
-  --loader-height: .3rem;
-  --loader-width: 1.8rem;
-}
-.bs-loader:where([data-size="sm"]) {
-  --loader-dot-size: .5rem;
-  --loader-dot-translate: 1.125rem;
-  --loader-height: .5rem;
-  --loader-width: 3rem;
-}
-.bs-loader:where([data-size="lg"]) {
-  --loader-dot-size: 1rem;
-  --loader-dot-translate: 2.375rem;
-  --loader-height: 4rem;
-  --loader-width: 6rem;
-}
-
-/* ----- loader dots ----- */
-.bs-loader > :where(*:not(.visually-hidden)) {
-  background-color: var(--loader-dot-bg);
-  border-radius: 50%;
-  display: block;
-  height: var(--loader-dot-size);
-  position: absolute;
-  top: var(--loader-dot-top);
-  width: var(--loader-dot-size);
-}
-
-.bs-loader > :where(*:not(.visually-hidden)) {
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-.bs-loader > :where(*:nth-child(1)) {
-  animation: loading-1 0.6s infinite;
-  left: 0%;
-}
-.bs-loader > :where(*:nth-child(2)) {
-  animation: loading-2 0.6s infinite;
-  left: 0%;
-}
-.bs-loader > :where(*:nth-child(3)) {
-  animation: loading-2 0.6s infinite;
-  left: 40%;
-}
-.bs-loader > :where(*:nth-child(4)) {
-  animation: loading-3 0.6s infinite;
-  left: 80%;
-}
-
-/* ----- color variants ----- */
-.bs-loader:where([data-variant="black"]) {
-  --loader-dot-bg: var(--bs-black);
-}
-.bs-loader:where([data-variant="gray"]) {
-  --loader-dot-bg: var(--bs-gray-400);
-}
-.bs-loader:where([data-variant="white"]) {
-  --loader-dot-bg: var(--bs-white);
-}
-
-@keyframes loading-1 {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes loading-2 {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(var(--loader-dot-translate), 0);
-  }
-}
-
-@keyframes loading-3 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-
-  }
-  

package/dist/components/_modal.scss

@@ -1,185 +0,0 @@
-@mixin modal() {
-  .bs-modal {
-  --base-modal-width: 35rem; /* 560px */
-  --lg-modal-padding: 2rem; /* 32px */
-  --lg-modal-width: 45.3125rem; /* 725px */
-  --modal-padding: 1.5rem; /* 24px */
-  --sm-modal-width: 21.25rem; /* 340px */
-  background-color: var(--bs-bg-base-to-medium);
-  border-radius: 4px;
-  bottom: 0;
-  box-shadow: var(--bs-shadow-contentHigh);
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  left: 0;
-  margin: auto;
-  max-height: calc(100% - 3rem);
-  opacity: 0;
-  overflow: auto;
-  position: fixed;
-  right: 0;
-  top: 0;
-  transition-duration: 75ms;
-  transition-property: opacity;
-  transition-timing-function: ease-in-out;
-  width: calc(100% - 3rem);
-  z-index: 9999;
-}
-
-@media (min-width: 752px) {
-  .bs-modal {
-    max-height: min(calc(100dvh - 3rem), 40.625rem);
-    width: var(--base-modal-width);
-  }
-
-  .bs-modal:where([data-size="sm"]) {
-    width: var(--sm-modal-width);
-  }
-
-  .bs-modal:where([data-size="lg"]) {
-    width: var(--lg-modal-width);
-  }
-}
-
-.bs-modal:where([data-shown="true"]) {
-  opacity: 1;
-}
-
-/* Header Container */
-.bs-modal :where(.bs-modal-header-container) {
-  padding: var(--modal-padding);
-}
-
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
-  padding: var(--lg-modal-padding);
-}
-
-.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
-  border-bottom: 1px solid var(--bs-border-base);
-}
-
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-header-container) {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* Header Row */
-.bs-modal :where(.bs-modal-header) {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
-/* Title */
-.bs-modal :where(.bs-modal-title) {
-  flex-grow: 1;
-  font-size: var(--bs-text-lg);
-  font-weight: 400;
-  margin-right: 2rem;
-}
-
-/* Subtitle */
-.bs-modal :where(.bs-modal-subtitle) {
-  font-size: var(--bs-text-sm);
-  font-weight: 400;
-  margin-top: 0.5rem;
-  width: 100%;
-}
-
-/* Close Button */
-.bs-modal :where(.bs-modal-close-button) {
-  background-color: transparent;
-  cursor: pointer;
-  z-index: 10000;
-}
-
-.bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-}
-
-.bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
-  margin-right: var(--modal-padding);
-}
-
-.bs-modal:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
-  margin-right: var(--lg-modal-padding);
-}
-
-/* Progress */
-.bs-modal :where(.bs-modal-progress) {
-  margin-top: 1.5rem;
-  width: 100%;
-}
-
-/* Body */
-.bs-modal :where(.bs-modal-body) {
-  overflow-y: auto;
-  padding: var(--modal-padding);
-}
-
-.bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
-  padding-bottom: 0;
-  padding-top: 0;
-}
-
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* Has header, but no header border */
-.bs-modal:where(:not([data-header-border]):has(.bs-modal-header-container)) :where(.bs-modal-body),
-.bs-modal:where([data-header-border="false"]:has(.bs-modal-header-container)) :where(.bs-modal-body) {
-  padding-top: 0;
-}
-
-/* Has footer, but no footer border */
-.bs-modal:where(:not([data-footer-border])) :where(.bs-modal-body:has(~ .bs-modal-footer)),
-.bs-modal:where([data-footer-border="false"]) :where(.bs-modal-body:has(~ .bs-modal-footer)) {
-  padding-bottom: 0;
-}
-
-.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
-  background-color: var(--bs-bg-light);
-}
-
-/* Footer */
-.bs-modal :where(.bs-modal-footer) {
-  padding-bottom: 1rem;
-  padding-left: var(--modal-padding);
-  padding-right: var(--modal-padding);
-  padding-top: 1rem;
-}
-
-.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
-  padding-bottom: 1.5rem;
-  padding-left: var(--lg-modal-padding);
-  padding-right: var(--lg-modal-padding);
-  padding-top: 1.5rem;
-}
-
-.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
-  border-top: 1px solid var(--bs-border-base);
-}
-
-.bs-modal:where([data-full-width="true"]) :where(.bs-modal-footer) {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-modal:where(.bs-modal-enter-from),
-.bs-modal:where(.bs-modal-leave-to) {
-  opacity: 0;
-}
-
-.bs-modal:where(.bs-modal-enter-to),
-.bs-modal:where(.bs-modal-leave-from) {
-  opacity: 1;
-}
-
-  }
-  

package/dist/components/_overlay.scss

@@ -1,34 +0,0 @@
-@mixin overlay() {
-  .bs-overlay {
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
-  background: rgba(29, 30, 72, 0.05);
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  transition-duration: 75ms;
-  transition-property: opacity;
-  transition-timing-function: ease-in-out;
-  z-index: 9998;
-}
-
-.bs-overlay:where([data-shown]:not([data-shown="false"])) {
-  opacity: 1;
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-overlay:where(.bs-overlay-enter-from),
-.bs-overlay:where(.bs-overlay-leave-to) {
-  opacity: 0;
-}
-
-.bs-overlay:where(.bs-overlay-enter-to),
-.bs-overlay:where(.bs-overlay-leave-from) {
-  opacity: 1;
-}
-
-  }
-  

package/dist/components/_pagination.scss

@@ -1,85 +0,0 @@
-@mixin pagination() {
-  .bs-pagination {
-  background-color: var(--bs-bg-base);
-  color: var(--bs-ink-base);
-  display: flex;
-  gap: 1.5rem;
-  justify-content: center;
-}
-
-.bs-pagination:where([data-variant="group"]) {
-  gap: 2.5rem;
-}
-
-.bs-pagination:where([data-variant="results"]) {
-  gap: 1rem;
-}
-
-.bs-pagination :where(button) {
-  align-items: center;
-  border-radius: 4px;
-  cursor: pointer;
-  display: flex;
-  min-height: 1.5rem;
-  justify-content: center;
-  outline: 2px solid transparent;
-  min-width: 1.5rem;
-}
-
-.bs-pagination button:where(:focus),
-.bs-pagination button:where(:focus-visible) {
-  outline: 2px solid var(--bs-blue-base);
-}
-
-.bs-pagination button:where(:focus:not(:focus-visible)) {
-  outline: 2px solid transparent;
-}
-
-.bs-pagination button:where(:disabled) {
-  color: var(--bs-ink-disabled);
-  cursor: default;
-}
-
-.bs-pagination button:where([data-selected]:not([data-selected="false"])) {
-  background-color: var(--bs-blue-base);
-  color: var(--bs-gray-50);
-}
-
-.bs-pagination:where([data-fixed]:not([data-fixed="false"])) {
-  background-color: var(--bs-bg-base-elevated);
-  bottom: 0;
-  left: 0;
-  padding: 1rem;
-  position: fixed;
-  width: 100%;
-}
-
-.bs-pagination :where(.bs-pagination-page-numbers) {
-  display: flex;
-  gap: 1rem;
-}
-
-.bs-pagination :where(.bs-pagination-carets) {
-  display: flex;
-  gap: 1.5rem;
-}
-
-.bs-pagination :where(.bs-pagination-word-caret) {
-  align-items: center;
-  gap: 0.5rem;
-  width: auto;
-}
-
-.bs-pagination :where(.bs-pagination-results-numbers) {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.bs-pagination :where(.bs-pagination-results-numbers) button {
-  padding-left: 2px;
-  padding-right: 2px;
-  width: auto;
-}
-
-  }
-