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

package/dist/components/empty-state.css

@@ -1,95 +0,0 @@
-.bs-empty-state {
-  --bs-empty-state-description-color: var(--bs-ink-light);
-  --bs-empty-state-icon-color: var(--bs-violet-300);
-  --bs-empty-state-title-color: var(--bs-ink-base);
-  --col-gap: var(--bs-space-6);
-  --cta-spacing: var(--bs-space-4);
-  --description-font-size: var(--bs-text-base);
-  --description-line-height: var(--bs-leading-base);
-  --description-weight: var(--bs-font-normal);
-  --icon-size: 3rem;
-  --title-font-size: var(--bs-text-lg);
-  --title-line-height: 130%;
-  --title-spacing: 0.5rem;
-  --title-weight: var(--bs-font-normal);
-
-  align-items: center;
-  column-gap: var(--col-gap);
-  display: grid;
-  grid-template-columns: auto 1fr;
-}
-
-.bs-empty-state :where(.bs-empty-state-icon) {
-  align-self: start;
-  height: auto;
-  max-width: var(--icon-size);
-  width: 100%;
-}
-
-.bs-empty-state :where(.bs-empty-state-icon path) {
-  fill: var(--bs-empty-state-icon-color);
-}
-
-.bs-empty-state :where(.bs-empty-state-title) {
-  color: var(--bs-empty-state-title-color);
-  font-size: var(--title-font-size);
-  font-weight: var(--title-weight);
-  line-height: var(--title-line-height);
-  padding-block-end: var(--title-spacing);
-}
-
-.bs-empty-state :where(.bs-empty-state-description) {
-  color: var(--bs-empty-state-description-color);
-  font-size: var(--description-font-size);
-  font-weight: var(--description-weight);
-  line-height: var(--description-line-height);
-}
-
-.bs-empty-state :where(a) {
-  color: var(--bs-ink-blue);
-  text-decoration: underline;
-}
-
-.bs-empty-state :where(a:hover) {
-  cursor: pointer;
-}
-
-/* Call to Actions */
-
-.bs-empty-state
-  :where(
-    .bs-empty-state-description + *,
-    .bs-empty-state-title + *:not(.bs-empty-state-description)
-  ) {
-  margin-block-start: var(--cta-spacing, var(--bs-space-4));
-}
-
-/* Sizing */
-
-.bs-empty-state:where([data-size^='xs']) {
-  --col-gap: var(--bs-space-4);
-  --cta-spacing: var(--bs-space-2);
-  --icon-size: 1.5rem;
-  --title-color: var(--bs-ink-light);
-  --title-font-size: var(--bs-text-md);
-  --title-line-height: var(--bs-leading-base);
-  --title-spacing: 0;
-}
-
-.bs-empty-state:where([data-size^='sm']) {
-  --description-font-size: var(--bs-text-sm);
-  --icon-size: 2rem;
-  --title-font-size: var(--bs-text-md);
-  --title-line-height: var(--bs-leading-base);
-  --title-spacing: 0.125rem;
-}
-
-.bs-empty-state:where([data-size^='lg']) {
-  --col-gap: var(--bs-space-8);
-  --cta-spacing: var(--bs-space-6);
-  --description-font-size: var(--bs-text-md);
-  --icon-size: 4rem;
-  --title-font-size: var(--bs-text-xl);
-  --title-line-height: 110%;
-  --title-weight: var(--bs-font-bold);
-}

package/dist/components/filter-buttons.css

@@ -1,112 +0,0 @@
-/*
-custom properties:
---filterbtn-caret-size
---filterbtn-caret-transform
---filterbtn-color
---filterbtn-focus-color
---filterbtn-height
---filterbtn-text-size
---filterbtn-weight
-*/
-
-button:where(.bs-filter-button) {
-  --filterbtn-caret-size: 1rem;
-  --filterbtn-caret-transform: rotate(0deg);
-  --filterbtn-color: var(--bs-ink-blue);
-  --filterbtn-focus-color: transparent;
-  --filterbtn-height: 1.5rem;
-  --filterbtn-text-size: var(--bs-text-base);
-  --filterbtn-weight: 400;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.bs-filter-button {
-  align-items: center;
-  color: var(--filterbtn-color);
-  column-gap: 0.5rem;
-  cursor: pointer;
-  display: inline-flex;
-  font-size: var(--filterbtn-text-size);
-  font-weight: var(--filterbtn-weight);
-  height: var(--filterbtn-height);
-  line-height: 1.5;
-  transition: outline-color 100ms ease-in-out;
-  width: max-content;
-}
-.bs-filter-button::after {
-  border: solid var(--filterbtn-focus-color) 2px;
-  border-radius: 0.25rem;
-  content: '';
-  display: block;
-  height: 100%;
-  position: absolute;
-  transform: scale(1.25);
-  width: 100%;
-}
-
-.bs-filter-button :where(.bs-icon),
-.bs-filter-button :where(span:has(svg:only-child)) {
-  display: block;
-  height: var(--filterbtn-caret-size);
-  line-height: 1;
-  transform: var(--filterbtn-caret-transform);
-  transform-origin: center;
-  transition: var(--bs-trans-rotate180);
-  width: var(--filterbtn-caret-size);
-}
-
-.bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
-
-  --filterbtn-text-size: var(--bs-text-sm);
-  --filterbtn-caret-size: .75rem;
-}
-
-.bs-filter-button:where([data-size="sm"]) {
-  --filterbtn-text-size: var(--bs-text-sm);
-}
-
-.bs-filter-button:where([data-size="xs"]) {
-  --filterbtn-text-size: var(--bs-text-xs);
-  --filterbtn-weight: 600;
-}
-
-/* Hover state */
-.bs-filter-button:hover {
-  --filterbtn-color: var(--bs-blue-base);
-}
-
-/* Focus state */
-.bs-filter-button:where(:focus-visible) {
-  outline: none;
-  --filterbtn-focus-color: var(--bs-blue-base);
-}
-
-/* Filter open state */
-.bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
-  --filterbtn-caret-transform: rotate(180deg);
-}
-
-/* Badge non-standard color */
-.bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-ink-blue);
-}
-
-:where(.dark) .bs-filter-button :where(.bs-badge) {
-  --badge-bg: var(--bs-blue-medium);
-}
-
-.bs-filter-button:hover :where(.bs-badge) {
-  --badge-bg: var(--filterbtn-color);
-}
-
-/* Disabled state */
-.bs-filter-button:where(:disabled) {
-  --filterbtn-color: var(--bs-ink-disabled);
-  cursor: default;
-}
-
-.bs-filter-button:where(:disabled) :where(.bs-badge) {
-  --badge-bg: var(--bs-bg-disabled);
-  --badge-text: var(--bs-ink-disabled);
-}

package/dist/components/flyout.css

@@ -1,71 +0,0 @@
-.bs-flyout {
-  background-color: var(--bs-bg-base-to-light);
-  box-shadow: var(--bs-shadow-drawerRight);
-  height: 100%;
-  left: 0;
-  margin: 0;
-  max-width: 100vw;
-  opacity: 0;
-  padding: 1.5rem;
-  position: fixed;
-  top: 0;
-  transform: translateX(-100%);
-  transition-duration: 300ms;
-  transition-property: opacity, transform;
-  transition-timing-function: ease;
-  width: 360px;
-  z-index: 1000;
-}
-
-.bs-flyout:where([data-absolute="true"]) {
-  position: absolute;
-}
-
-.bs-flyout:where([data-position="right"]) {
-  box-shadow: var(--bs-shadow-drawerLeft);
-  left: auto;
-  right: 0;
-  transform: translateX(100%);
-}
-
-.bs-flyout:where([data-size="lg"]) {
-  width: 535px;
-}
-
-.bs-flyout:where([data-shown="true"]) {
-  opacity: 1;
-  /*
-  Needs to be "none" instead of "0" so as not to interfere with calculating
-  "containing block" for absolute and fixed positioned elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block)
-  */
-  transform: none;
-}
-
-.bs-flyout :where(.bs-flyout-close-container) {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.bs-flyout :where(.bs-flyout-close-container button) {
-  cursor: pointer;
-  outline-offset: 2px;
-  padding: 2px;
-}
-
-/* Vue Transition Styles - Only used in Vue component */
-.bs-flyout:where(.bs-flyout-enter-from),
-.bs-flyout:where(.bs-flyout-leave-to) {
-  opacity: 0;
-  transform: translateX(-100%);
-}
-
-.bs-flyout:where([data-position="right"].bs-flyout-enter-from),
-.bs-flyout:where([data-position="right"].bs-flyout-leave-to) {
-  transform: translateX(100%);
-}
-
-.bs-flyout:where(.bs-flyout-enter-to),
-.bs-flyout:where(.bs-flyout-leave-from) {
-  opacity: 1;
-  transform: translateX(0);
-}

package/dist/components/form-booleans.css

@@ -1,178 +0,0 @@
-/* Containers and Labels for Checkbox/Radio */
-.bs-boolean {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  line-height: 115%;
-}
-
-.bs-boolean:where([data-size='sm']) input {
-  height: .75rem;
-  width: .75rem;
-}
-
-.bs-boolean label {
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  line-height: 1.5;
-  width: auto;
-}
-
-/* not using gap on .bs-boolean due to dead click zone */
-.bs-boolean label {
-  padding-inline-end: 0.5em;
-}
-
-.bs-boolean input + label {
-  padding-inline: 0.5em 0;
-}
-
-.bs-boolean:where([data-size='sm']),
-.bs-boolean:where([data-size='sm']) label {
-  font-size: var(--bs-text-xs);
-}
-
-
-/* Checkbox & Radio Input */
-
-:where(input[type='checkbox'], input[type='radio']),
-:is(.bs-boolean :where(input), .bs-checkbox) {  /* .bs-checkbox added to accommodate 'fake' cbs */
-  appearance: none;
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base));
-  cursor: pointer;
-  display: grid;
-  height: 1rem;
-  margin: 0;
-  place-content: center;
-  position: relative;
-  width: 1rem;
-}
-
-:where(input[type='checkbox'], input[type='radio']):focus-visible,
-:is(.bs-boolean :where(input), .bs-checkbox):focus-visible {
-  box-shadow: inset 0 0 0 0.125rem var(--box-shadow, var(--bs-ink-base)),
-    0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-base));
-    outline: 2px solid transparent;
-}
-
-:where(input[type='checkbox']),
-:is(.bs-boolean :where([type='checkbox']), .bs-checkbox) {
-  border-radius: 0.125rem;
-}
-
-:where(input[type='radio']),
-.bs-boolean :where([type='radio']) {
-  border-radius: 50%;
-}
-
-/* Checkbox's checkbox, checkmark.  Checkmark is hidden unless checked/indeterminate. */
-input:where([type='checkbox'])::before,
-:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::before {
-  --cb-filled-size: var(--filled-size, 1rem);
-  content: '';
-  border-radius: 0.125rem;
-  box-shadow: inset var(--cb-filled-size) var(--cb-filled-size) var(--fill-bg-color, var(--bs-blue-base));
-  height: var(--cb-filled-size);
-  visibility: hidden;
-  width: var(--cb-filled-size);
-}
-
-input:where([type='checkbox'])::after,
-:is(.bs-boolean :where([type="checkbox"]), .bs-checkbox)::after {
-  border: solid var(--bs-bg-base);
-  border-width: 0 0.125rem 0.125rem 0;
-  content: '';
-  height: var(--inner-check-height, 0.75em);
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform-origin: center;
-  transform: translate(-50%, -60%) rotate(45deg);
-  visibility: hidden;
-  width: var(--inner-check-width, 0.375em);
-}
-
-input:where([type='checkbox']):where(:indeterminate)::after,
-.bs-boolean :where([type="checkbox"]):where(:indeterminate)::after,
-.bs-checkbox:where([data-indeterminate="true"], :indeterminate)::after {
-  border: none;
-  background-color: var(--bs-bg-base);
-  height: var(--inner-dash-height, 0.125rem);
-  transform: translate(-50%, -0.0625rem) rotate(0deg);
-  width: var(--inner-dash-width, 0.625em);
-}
-
-/* Radio outer circle, Radio dot.  Dot is hidden unless checked. */
-input:where([type='radio'])::before,
-.bs-boolean :where([type="radio"])::before {
-  --radio-filled-size: var(--filled-size, 1rem);
-  background-color: var(--fill-bg-color, var(--bs-blue-base));
-  border-radius: 50%;
-  box-sizing: content-box;
-  content: '';
-  height: var(--radio-filled-size);
-  visibility: hidden;
-  width: var(--radio-filled-size);
-}
-
-input:where([type='radio'])::after,
-.bs-boolean :where([type="radio"])::after {
-  background-color: var(--bs-bg-base);
-  border-radius: 50%;
-  box-sizing: content-box;
-  content: '';
-  height: var(--inner-dot-size, 0.375rem);
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  visibility: hidden;
-  width: var(--inner-dot-size, 0.375rem);
-}
-
-/* Show checkmark, indeterminate mark, or radio dot */
-
-.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::before,
-.bs-checkbox:where([data-indeterminate="true"], [data-checked="true"], :checked, :indeterminate)::after,
-input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
-input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after,
-.bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
-.bs-boolean :where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after {
-  visibility: visible;
-}
-
-/* ---------- Sizes ----------- */
-
-.bs-boolean:where([data-size="sm"]),
-.bs-checkbox:where([data-size="sm"]) {
-  --filled-size: 0.75rem;
-  --inner-check-height: 0.5625rem;
-  --inner-check-width: 0.3125rem;
-  --inner-dash-height: 0.125rem;
-  --inner-dash-width: .75em;
-  --inner-dot-size: 0.25rem;
-}
-
-/* ---------- Disabled State ----------- */
-
-:where(input[type="checkbox"], input[type="radio"]):disabled,
-.bs-boolean:where([data-disabled="true"]),
-.bs-checkbox:where([data-disabled="true"]) {
-  --box-shadow: var(--bs-ink-disabled);
-  --fill-bg-color: var(--bs-ink-disabled);
-  background-color: transparent;
-  cursor: default;
-  pointer-events: none;
-}
-
-/* ---------- Error state ----------- */
-
-input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-error="false"])),
-.bs-boolean :where(input[data-error="true"]), /* deprecate this one in favor of next line */
-.bs-boolean:where([data-error="true"]),
-.bs-checkbox:where([data-error="true"]) {
-  --box-shadow: var(--bs-red-base);
-  --outline-color: var(--bs-red-base);
-}

package/dist/components/form-character-count.css

@@ -1,17 +0,0 @@
-.bs-character-count {
-  color: var(--bs-ink-base);
-  font-size: var(--bs-text-xs);
-  font-weight: 400;
-  text-align: right;
-  white-space: nowrap;
-}
-
-:where(:disabled, [data-disabled="true"]) + .bs-character-count,
-:where(:disabled, [data-disabled="true"]) .bs-character-count,
-.bs-character-count:where([data-disabled="true"]) {
-  visibility: hidden;
-}
-
-.bs-character-count:where([data-error="true"]) {
-  color: var(--bs-ink-red);
-}

package/dist/components/form-container.css

@@ -1,108 +0,0 @@
-.bs-form-container {
-  background: var(--bs-bg-base-to-light);
-  border-radius: 0;
-}
-
-@media (min-width: 752px) {
-  .bs-form-container {
-    border-radius: 8px;
-  }
-}
-
-.bs-form-container :where(.bs-form-container-header-wrapper) {
-  padding: var(--bs-space-3) var(--bs-space-4);
-  display: flex;
-}
-
-.bs-form-container :where(.bs-form-container-header) {
-  padding-right: var(--bs-space-6);
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.bs-form-container :where(.bs-form-container-title-wrapper) {
-  margin-right: auto;
-  display: flex;
-  align-items: center;
-}
-
-.bs-form-container :where(.bs-form-container-title) {
-  color: var(--bs-ink-medium);
-  font-size: var(--bs-text-base);
-}
-
-.bs-form-container :where(.bs-form-container-title-addon) {
-  margin-left: var(--bs-space-2);
-  display: flex;
-  align-items: center;
-  gap: var(--bs-space-2);
-}
-
-.bs-form-container :where(.bs-form-container-header-icon) {
-  margin-right: var(--bs-space-2);
-  color: var(--bs-ink-base);
-  height: 1rem;
-  width: 1rem;
-}
-
-.bs-form-container :where(.bs-form-container-subtitle) {
-  margin-top: var(--bs-space-1);
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-sm);
-}
-
-.bs-form-container :where(.bs-form-container-header-actions) {
-  display: flex;
-  align-items: center;
-  gap: var(--bs-space-4);
-}
-
-.bs-form-container :where(.bs-form-container-content) {
-  display: none;
-  padding: var(--bs-space-6);
-  border-top: 1px solid var(--bs-border-light);
-}
-
-.bs-form-container :where(.bs-form-container-content):where([data-open="true"]) {
-  display: flex;
-}
-
-/* adds styling utilities for icons in header actions slot */
-.bs-form-container :where(.bs-form-container-header-actions) :where(.bs-icon) {
-  color: var(--bs-ink-medium);
-  cursor: pointer;
-  transition: transform 200ms ease-in-out, color 100ms ease-in-out;
-
-  /* color utilities for specified icons */
-  &:where([data-component="bs-icon-caret-down"]) {
-    color: var(--bs-ink-base);
-  }
-
-  &:where([data-component="bs-icon-edit"]):hover {
-    color: var(--bs-ink-blue);
-  }
-
-  &:where([data-component="bs-icon-delete"]):hover {
-    color: var(--bs-ink-red);
-  }
-}
-
-.bs-form-container :where(.bs-form-container-header-actions):where([data-open="true"]) {
-  /* transition utilities for specified icons */
-  :where([data-component="bs-icon-caret-down"]) {
-    transform: rotate(180deg);
-  }
-}
-
-/* inactive state styles */
-.bs-form-container:where([data-inactive="true"]) {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.bs-form-container :where(.bs-form-container-title:where([data-inactive="true"])),
-.bs-form-container :where(.bs-form-container-subtitle:where([data-inactive="true"])) {
-  color: var(--bs-ink-disabled);
-}

package/dist/components/form-elements.css

@@ -1,36 +0,0 @@
-/* Generally applicable (all input types) */
-:where([data-required]:not([data-required="false"])) {
-  color: var(--bs-ink-red);
-  font-weight: var(--bs-font-bold, 600);
-}
-
-:where([data-disabled]:not([data-disabled="false"]), [data-disabled]:not([data-disabled="false"]) [data-required]:not([data-required="false"])) {
-  color: var(--bs-gray-400);
-}
-
-:where(.box) :is(input, textarea, select):where(:focus-visible),
-:where(.box) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-medium);
-}
-:where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible),
-:where(.box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-invert-to-base);
-}
-
-/* Errors and Messages */
-:is(input, select, textarea):where([data-error]:not([data-error="false"])),
-:is(.bs-input, .bs-select, .bs-textarea):where([data-error]:not([data-error="false"])) {
-  --input-border: var(--bs-ink-red);
-}
-
-/* Fieldset */
-:where(fieldset) {
-  border: none;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0;
-}
-:where(fieldset legend) {
-  margin-bottom: 0.25rem;
-  padding: 0;
-}

package/dist/components/form-field-details.css

@@ -1,15 +0,0 @@
-.bs-field-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--bs-space-2);
-  margin-top: 0.5rem;
-}
-
-:where(textarea, bs-textarea) + .bs-field-details {
-  margin-top: 0.25rem;
-}
-
-.bs-field-details :where(.bs-character-count:first-child) {
-  margin-left: auto;
-}

package/dist/components/form-hints.css

@@ -1,18 +0,0 @@
-.bs-hint {
-  --hint-color: var(--bs-ink-light);
-  color: var(--hint-color);
-  font-size: var(--bs-text-xs);
-  list-style: none;
-  margin: 0;
-  min-width: 0;
-  overflow-wrap: break-word;
-  padding: 0;
-}
-
-.bs-hint:where([data-error]:not([data-error="false"])) {
-  --hint-color: var(--bs-ink-red);
-}
-
-:where(:disabled, [data-disabled="true"]) .bs-hint {
-  --hint-color: var(--bs-ink-disabled);
-}