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

package/dist/components/_form-input-composite.scss

@@ -1,312 +0,0 @@
-@mixin form-input-composite() {
-  /* 0 0 1 for width to allow e.g. tailwind override */
-:is(div, *):where(.bs-input-addon) {
-  width: 100%;
-}
-
-.bs-input-addon {
-  --input-border: var(--bs-border-input);
-  align-items: center;
-  background-color: var(--input-bg, var(--bs-bg-base));
-  border-radius: .25rem;
-  color: var(--bs-ink-base);
-  display: flex;
-  height: var(--input-addon-height, 2.5rem);
-  overflow: hidden;
-  padding: 0;
-  pointer-events: none;
-  position: relative;
-}
-
-:where(.dark) .bs-input-addon {
-  background-color: var(--input-bg, transparent);
-}
-
-.bs-input-addon * {
-  background-color: transparent;
-}
-
-/* Fix issue in Windows, where <select> options would be invisible, due to background-color: transparent */
-.bs-input-addon :where(.bs-select, select) {
-  background-color: var(--input-bg, var(--bs-bg-base));
-}
-
-/**
-Implement an outer 'border' via pseudo-element instead of
-on main element to avoid content shifting, double-stroke effect,
-and issues with box-sizing
-*/
-.bs-input-addon::after,
-.bs-input-addon::before,
-.bs-input-addon ::after,
-.bs-input-addon ::before {
-  pointer-events: none;
-}
-
-.bs-input-addon::after,
-.bs-input-addon::before {
-  content: '';
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.bs-input-addon::after {
-  border-color: var(--input-border);
-  border-radius: .25rem;
-  border-style: solid;
-  border-width: var(--input-border-width, 1px);
-}
-
-.bs-input-addon :where(.bs-input-addon)::after {
-  border-color: var(--input-addon-nested-border);
-  border-style: solid;
-  border-width: var(--input-border-width, 1px);
-}
-
-.bs-input-addon > * {
-  flex-grow: 0;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.bs-input-addon > :where([data-part="main"], .bs-input-addon, bs-input, .bs-input),
-.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input, .bs-input) {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-.bs-input-addon > :where([data-part="main"]) > :where(input, select),
-.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"])) > :where(input, select) {
-  width: 100%;
-}
-
-.bs-input-addon > *:where(:not(.bs-input-addon)) {
-  align-items: center;
-  border-width: 0px;
-  display: flex;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: auto;
-}
-
-/* Remove (hide) children's borders, outlines */
-.bs-input-addon > *,
-.bs-input-addon :where(input, select),
-.bs-input-addon :is(bs-input, bs-select) :where(input, select),
-.bs-input-addon :is(input, select):where(.bs-input, .bs-select),
-.bs-input-addon :where(.bs-input-addon) {
-  --input-border: transparent;
-  --input-border-width: 0px;
-}
-
-.bs-input-addon {
-  --input-addon-nested-border: transparent;
-}
-
-.bs-input-addon :where(:focus-within) :where(input, select, button),
-.bs-input-addon :where(:focus-within) :is(bs-input, bs-select) :where(input, select),
-.bs-input-addon :where(:focus-within) :is(input, select, button):where(.bs-input, .bs-select),
-.bs-input-addon :where(input, select, button):where(:focus, :focus-within, :focus-visible),
-.bs-input-addon :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
-.bs-input-addon :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
-  --input-border: transparent;
-  box-shadow: none;
-  outline: none;
-}
-
-/* -------- Inner-bordered styles -------- */
-/** Inner borders should be straight; shown only if variant: "inner-bordered" */
-
-.bs-input-addon:where([data-variant="inner-bordered"]) {
-  --input-addon-nested-border: var(--bs-violet-200);
-}
-
-.bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
-.bs-input-addon > :where(:not(:last-child, :focus-within, [data-part="right"]))::after {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within, [data-part="left"])),
-.bs-input-addon > :where(:not(:first-child, :focus-within, [data-part="left"]))::after {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.bs-input-addon:where([data-variant="inner-bordered"]) > :where(:not(:focus, :focus-within))::after {
-  border-left-width: 0px;
-  border-right-width: 1px;
-  border-right-color: var(--input-addon-nested-border);
-}
-
-.bs-input-addon:where([data-variant="inner-bordered"]) > :where(:not(.bs-input-addon, :focus, :focus-within))::after {
-  content: '';
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-.bs-input-addon:where([data-variant="inner-bordered"]) > :where(.bs-input-addon)::after {
-  border-radius: 0px;
-}
-
-/* -------- Auto Padding for Children, Auto Sizing Icons -------- */
-/* Opt in for now, for backwards compatibility */
-.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > *:where(:not(.bs-input-addon)) {
-  padding-inline: 0;
-}
-
-.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where([data-part="left"]:not(.bs-input-addon)),
-.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where(:first-child:not(.bs-input-addon)) {
-  padding-inline: 0.75rem 0.5rem;
-}
-
-.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where([data-part="right"]:not(.bs-input-addon)),
-.bs-input-addon:where([data-autopad="true"], [data-variant="combobox"]) > :where(:last-child:not(.bs-input-addon)) {
-  padding-inline: 0.5rem 0.75rem;
-}
-
-.bs-input-addon:where([data-autopad="true"][data-multifocus]) > *:where(:not(.bs-input-addon)) {
-  padding-inline: 0.75rem;
-}
-
-.bs-input-addon:where([data-autosize-icons="true"], [data-variant="combobox"]) > :where(:not([data-autowidth], [data-part="main"], .bs-input-addon)) {
-  height: 100%;
-  min-width: min-content;
-}
-
-.bs-input-addon:where([data-autosize-icons="true"], [data-variant="combobox"]) :where(svg) {
-  height: auto;
-  max-height: 100%;
-  width: 1rem;
-}
-
-/* -------- Focus styles -------- */
-.bs-input-addon {
-  --focus-border: var(--bs-blue-base);
-}
-
-.bs-input-addon:where(:not([data-multifocus]):focus-within),
-.bs-input-addon:where([data-multifocus="false"]:focus-within),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(input, select):where(:focus, :focus-within, :focus-visible),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
-  --input-border: var(--focus-border);
-  position: relative;
-  z-index: 1;
-}
-
-.bs-input-addon :where(.bs-input-addon:focus-within) {
-  --input-addon-nested-border: var(--focus-border);
-  z-index: 1;
-}
-
-.bs-input-addon :where(.bs-input-addon:focus-within)::after {
-  z-index: 1;
-}
-
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :is(input, select, button):where(:focus),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(input, select):where(.bs-input, .bs-select):where(:focus),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(bs-input, bs-select) :where(input:focus, select:focus),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus, button:focus) {
-  border-radius: .25rem;
-  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
-  z-index: 1;
-}
-
-.bs-input-addon:where(:not([data-multifocus]):focus-within)::after,
-.bs-input-addon:where([data-multifocus="false"]:focus-within)::after {
-  border-width: 1px;
-  border-radius: .25rem;
-}
-
-.bs-input-addon:where(:focus-within) :where(:not(:focus, :focus-within))::after,
-.bs-input-addon:where(:focus-within) :where(:not(:focus, :focus-within)) {
-  border-color: transparent;
-}
-
-/* Straight-lined ::before border to fill the gap below the rounded ::after border */
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(:focus-within)::before {
-  border-bottom-width: 1px;
-  border-color: var(--bs-violet-300);
-  border-radius: 0;
-  border-top-width: 1px;
-  z-index: 1;
-}
-
-/* -------- Disabled styles -------- */
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"])),
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
-  --input-bg: var(--bs-bg-disabled);
-  --input-border: var(--bs-ink-disabled);
-  --input-addon-nested-border: var(--bs-ink-disabled);
-  color: var(--bs-ink-disabled);
-}
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
-  pointer-events: none;
-}
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"]))::after,
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"]))::before,
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"])):where([data-variant="inner-bordered"]) {
-  --input-border-width: 0;
-}
-
-.bs-input-addon:where([data-disabled]:not([data-disabled="false"])):where([data-variant="inner-bordered"]) > :where(:not(:focus, :focus-within))::after {
-  border-right-width: 0;
-}
-
-/* -------- Error styles -------- */
-.bs-input-addon:where([data-error]:not([data-error="false"])),
-.bs-input-addon:where([data-error]:not([data-error="false"])) :where(.bs-input-addon) {
-  --focus-border: var(--bs-ink-red);
-  --input-border: var(--bs-ink-red);
-}
-
-.bs-input-addon:where([data-error]:not([data-error="false"]),[data-disabled]:not([data-disabled="false"])) > *::before,
-.bs-input-addon:where(.bs-input-addon[data-error]:not([data-error="false"]) .bs-input-addon, .bs-input-addon[data-disabled]:not([data-disabled="false"]) .bs-input-addon) > *::before {
-  border-color: var(--input-border);
-}
-
-/* -------- Label margin -------- */
-:where(label, .bs-label, bs-label) + .bs-input-addon {
-  margin-top: 0.25rem;
-}
-
-/* ----------------- Variant: Combobox Input ----------------- */
-/*
-Combobox variant also shares styles with data-autopad="true" &
-data-autosize-icons="true" - see above
-*/
-.bs-input-addon:where([data-variant="combobox"]) {
-  --input-addon-nested-border: transparent;
-}
-
-.bs-input-addon:where([data-variant="combobox"]) :where(button svg) {
-  transform: var(--icon-btn-transform, none);
-  transition: var(--bs-trans-rotate180);
-}
-
-.bs-input-addon:where([data-variant="combobox"]) :where(button[data-open="true"]) {
-  --icon-btn-transform: rotate(180deg);
-}
-
-.bs-input-addon:where([data-variant="combobox"][data-disabled="true"]) > :where(button) {
-  opacity: 0;
-}
-
-.bs-input-addon:where([data-variant="combobox"]) > :where(button) {
-  border-radius: .25rem;
-  outline: 1px solid transparent;
-}
-
-.bs-input-addon:where([data-variant="combobox"]) > :where(button:focus-visible) {
-  outline: 1px solid var(--focus-border);
-}
-
-  }
-  

package/dist/components/_form-input-phone.scss

@@ -1,21 +0,0 @@
-@mixin form-input-phone() {
-  .bs-input-phone :where(.bs-input-addon) > button {
-  align-items: center;
-  column-gap: .5rem;
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: 1.25rem auto .75rem;
-  min-width: 6rem;
-  padding: 0 1rem;
-}
-
-.bs-input-phone .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) :where(button) :where(span) {
-  filter: grayscale(1);
-}
-
-.bs-input-phone ul:where(.bs-dropdown-options) {
-  min-width: 7.5rem;
-}
-
-  }
-  

package/dist/components/_form-input-search.scss

@@ -1,74 +0,0 @@
-@mixin form-input-search() {
-  :where(.bs-input-search) {
-  display: inline-block;
-  width: 100%;
-}
-
-.bs-input-search :where(.bs-icon svg) {
-  box-sizing: content-box;
-}
-
-.bs-input-search :where([data-component="bs-icon-search"]) {
-  --icon-size: var(--search-icon-size, 1.75rem);
-  padding: var(--search-icon-padding, 0 0 0 .75rem);
-}
-
-/* Clear Button */
-.bs-input-search button {
-  align-items: center;
-  background-color: transparent;
-  cursor: pointer;
-  display: flex;
-  height: 100%;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  transition: transform 100ms ease-in-out;
-}
-
-.bs-input-search button:where(:active) {
-  transform: scale(0.97);
-  transform-origin: center;
-  box-shadow: inset 0px 0px 4px 1px var(--bs-blue-base);
-}
-
-.bs-input-search button:where(:focus) {
-  border-radius: .25rem;
-  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
-  z-index: 1;
-}
-
-
-/* Filter variant */
-
-.bs-input-search:where([data-variant="filter"]) {
-  --focus-border: transparent;
-  --input-border: transparent;
-  --input-addon-height: 1.5rem;
-  --input-caret: var(--bs-blue-base);
-  --input-padding-block: 0 0.125rem;
-  --input-padding-inline: 0.5rem;
-  --input-placeholder: var(--bs-ink-light);
-  --input-text-size: var(--bs-text-sm);
-  --search-icon-size: 1rem;
-  --search-icon-padding: 0;
-}
-
-/* Filter variant: persist placeholder text color (`ink-light`) in dark mode */
-:where(.dark) .bs-input-search:where([data-variant="filter"]) :is(input.bs-input)::placeholder {
-  --input-placeholder: var(--bs-ink-light);  
-}
-
-/* Filter variant: cancels out base hover state styles */
-.bs-input-addon:where([data-variant="filter"]):hover {
-  --input-bg: var(--bs-bg-base);
-}
-
-/* -------- Disabled styles -------- */
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
-.bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {
-  --input-bg: var(--bs-bg-base);
-  --input-border: transparent;
-}
-
-  }
-  

package/dist/components/_form-labels.scss

@@ -1,40 +0,0 @@
-@mixin form-labels() {
-  :where(label, legend),
-label:where(.bs-label) {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-}
-
-.bs-label,
-:where(label, legend) {
-  --label-color: var(--bs-ink-base);
-  color: var(--label-color);
-  font-size: var(--bs-text-sm);
-  font-weight: 600;
-  line-height: var(--bs-leading-base);
-}
-
-/* Required asterisk */
-:where(label, legend) :where([data-required]:not([data-required="false"])),
-.bs-label :where([data-required="true"]) {
-  color: var(--label-asterisk-color, var(--bs-ink-red));
-}
-
-/* Disabled state */
-:where(label[data-disabled]:not([data-disabled="false"])),
-:where(label[data-disabled]:not([data-disabled="false"])) *,
-.bs-label:where([data-disabled="true"]),
-.bs-label:where([data-disabled="true"]) * {
-  --label-asterisk-color: transparent;
-  --label-color: var(--bs-ink-disabled);
-}
-
-.bs-label:where(:has(+ input), :has(+ .bs-input-addon), :has(+ :not(label) .bs-input-addon))::after {
-  content: '';
-  inset: 0 0 -.25rem 0;
-  position: absolute;
-}
-
-  }
-  

package/dist/components/_form-switches.scss

@@ -1,154 +0,0 @@
-@mixin form-switches() {
-  .bs-switch {
-  --box-shadow: var(--bs-ink-base);
-  --ball-background: var(--bs-white);
-  --ball-diameter: 1rem;
-  --inner-text-line-height: 1;
-  --inner-text-size: var(--bs-text-sm);
-  --inner-text-width: 1rem;
-  --inner-text-padding: 0.5rem;
-  --offset: 0.25rem;
-  --offset-double: .5rem;
-  --switch-background: var(--bs-gray-400);
-  --switch-height: 1.5rem;
-  --switch-width: 2.5rem;
-
-  border: none;
-  border-radius: 100vw;
-  cursor: pointer;
-  height: var(--switch-height);
-  position: relative;
-}
-
-.bs-switch:where([data-size="sm"]) {
-  --ball-diameter: .625rem;
-  --inner-text-line-height: 1.6666;
-  --inner-text-size: var(--bs-text-xs);
-  --inner-text-width: .75rem;
-  --inner-text-padding: 0.375rem;
-  --offset: 0.1875rem;
-  --offset-double: .375rem;
-  --switch-height: 1rem;
-  --switch-width: 1.875rem;
-}
-
-.bs-switch input,
-.bs-switch:where([data-size="sm"]) input {
-  cursor: pointer;
-  height: 100%;
-  opacity: 0;
-  position: absolute;
-  width: 100%;
-}
-
-.bs-switch span {
-  align-items: center;
-  background-color: var(--switch-background);
-  border-radius: 100vw;
-  display: inline-block;
-  font-size: var(--inner-text-size);
-  height: 100%;
-  padding: 0 var(--inner-text-padding);
-  pointer-events: none;
-  position: relative;
-  transition: 250ms;
-  width: var(--switch-width);
-}
-
-.bs-switch :where(input:checked) ~ :where(span),
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span) {
-  --switch-background: var(--bs-blue-base);
-}
-
-/* Toggle "ball" */
-.bs-switch :where(span)::before {
-  background-color: var(--ball-background);
-  border-radius: 50%;
-  box-sizing: border-box;
-  content: '';
-  height: var(--ball-diameter);
-  left: var(--offset);
-  position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
-  transition: inherit;
-  width: var(--ball-diameter);
-}
-
-.bs-switch :where(input:checked) ~ :where(span)::before,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span)::before {
-  transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
-}
-
-.bs-switch :where(input:checked) ~ :where(span[data-inner-on-label][data-inner-off-label])::before,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span[data-inner-on-label][data-inner-off-label])::before {
-  transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
-}
-
-
-/* Inner "on/off" text */
-.bs-switch :where(span)::after {
-  align-items: center;
-  color: var(--ball-background);
-  content: var(--inner-label-text);
-  display: flex;
-  height: 100%;
-  justify-content: var(--inner-label-position, flex-start);
-  left: 0;
-  line-height: var(--inner-text-line-height);
-  padding: var(--inner-text-padding);
-  position: absolute;
-  text-transform: capitalize;
-  top: 0;
-  width: 100%;
-}
-
-.bs-switch :where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 3.5rem;
-}
-
-.bs-switch:where([data-size="sm"]) :where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 2.625rem;
-}
-
-.bs-switch :where(input:not(:checked)) ~ :where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed="false"]) :where([data-inner-on-label][data-inner-off-label])::after  {
-  --inner-label-position: flex-end;
-  --inner-label-text: attr(data-inner-off-label);
-}
-
-.bs-switch :where(input:checked) ~ :where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where([data-inner-on-label][data-inner-off-label])::after {
-  --inner-label-text: attr(data-inner-on-label);
-}
-
-/* Focus state */
-
-.bs-switch :where(input:focus-visible) + :where(span),
-.bs-switch:where(:focus-visible) :where(button span) {
-  box-shadow: 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(.box) .bs-switch :where(input:focus-visible) + :where(span),
-:where(.box) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-medium);
-}
-:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
-:where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-invert-to-base);
-}
-
-/* Disabled state */
-.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
-.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]) :is(input ~ span, button span) {
-  --ball-background: var(--bs-ink-disabled);
-  --switch-background: var(--bs-bg-disabled);
-}
-
-.bs-switch input:where(:disabled) {
-  cursor: default;
-}
-
-  }
-