@wwtdev/bsds-css 1.1.0 → 1.3.0

package/dist/components/form-input-composite.css

@@ -0,0 +1,191 @@
+.bs-input-addon {
+  --input-border: var(--bs-violet-300);
+  align-items: center;
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-radius: .25rem;
+  color: var(--bs-ink-base);
+  display: flex;
+  height: 2.5rem;
+  overflow: hidden;
+  padding: 0;
+  pointer-events: none;
+  position: relative;
+  width: 100%;
+}
+/**
+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-radius: .25rem;
+  border: 1px solid var(--input-border);
+}
+
+.bs-input-addon > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.bs-input-addon > :where(bs-input, input, .bs-input-addon) {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.bs-input-addon > *:where(:not(.bs-input-addon)) {
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-width: 0px;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: auto;
+  position: relative;
+}
+
+/* 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 :where(.bs-input-addon)::after {
+  border-color: transparent;
+  border-width: 0px;
+}
+
+.bs-input-addon :where(:focus-within) :where(input, select),
+.bs-input-addon :where(:focus-within) :is(bs-input, bs-select) :where(input, select),
+.bs-input-addon :where(input, 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(.bs-input-addon:not(:last-child, :focus-within)),
+.bs-input-addon > :where(:not(:last-child, :focus-within))::after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within)),
+.bs-input-addon > :where(:not(:first-child, :focus-within))::after {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.bs-input-addon:where([data-variant="inner-bordered"]:not(.bs-input-addon .bs-input-addon)) > :where(:not(.bs-input-addon, :focus, :focus-within))::after {
+  border-right-color: var(--input-border);
+  border-right-width: 1px;
+  content: '';
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.bs-input-addon:where([data-variant="inner-bordered"]) > :where(.bs-input-addon)::after {
+  border-right-width: 1px;
+  border-right-color: var(--input-border);
+  border-radius: 0px;
+}
+
+
+/* -------- Focus styles -------- */
+
+.bs-input-addon:where(:not([data-multifocus]):focus-within),
+.bs-input-addon:where([data-multifocus]) :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-multifocus]) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
+  --input-border: var(--bs-blue-400);
+  position: relative;
+  z-index: 1;
+}
+
+.bs-input-addon :where(.bs-input-addon:where(:not([data-multifocus]):focus-within))::after {
+  border-color: var(--input-border);
+  border-radius: .25rem;
+  border-width: 1px;
+  z-index: 1;
+}
+
+.bs-input-addon:where([data-multifocus]) > :where(:not(.bs-input-addon)) > :where(input:focus),
+.bs-input-addon:where([data-multifocus]) > bs-input :where(input:focus),
+.bs-input-addon:where([data-multifocus]) > :where(input:focus) {
+  border-radius: .25rem;
+  box-shadow: var(--input-border) 0px 0px 0px 1px inset;
+}
+
+.bs-input-addon:where([data-multifocus]) > :where(:not(.bs-input-addon)) > :where(select:focus),
+.bs-input-addon:where([data-multifocus]) > bs-select :where(select:focus),
+.bs-input-addon:where([data-multifocus]) > :where(select:focus) {
+  border-radius: .25rem;
+  box-shadow: var(--input-border) 0px 0px 0px 2px inset;
+}
+
+.bs-input-addon:where(:not([data-multifocus]):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]) :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 .bs-button {
+  --input-bg: var(--bs-gray-200);
+  --input-border: var(--bs-gray-400);
+  color: var(--bs-gray-400);
+}
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
+  pointer-events: none;
+}
+
+/* -------- Error styles -------- */
+.bs-input-addon:where([data-error]),
+.bs-input-addon:where([data-error]) > ::after {
+  --input-border: var(--bs-red-400);
+}
+
+.bs-input-addon:where([data-error][data-multifocus]) > :where(:focus-within),
+.bs-input-addon:where([data-error][data-multifocus]) :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-error][data-multifocus]) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
+  --input-border: var(--bs-red-400);
+  border-color: var(--input-border);
+}
+
+.bs-input-addon:where([data-error],[data-disabled]) > *::before,
+.bs-input-addon:where(.bs-input-addon[data-error] .bs-input-addon, .bs-input-addon[data-disabled] .bs-input-addon) > *::before {
+  border-color: var(--input-border);
+}
+
+/* -------- Label margin -------- */
+:where(label, .bs-label, bs-label) + .bs-input-addon {
+  margin-top: 0.25rem;
+}

package/dist/components/form-text-fields.css

@@ -0,0 +1,92 @@
+:where(label + input, label > input):where(:not([type='checkbox'], [type='radio'])),
+:where(label + textarea, label > textarea),
+:where(label + select, label > select) {
+  margin-top: 0.25rem;
+}
+
+input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+textarea, select {
+  appearance: none;
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border: 1px solid var(--input-border, var(--bs-violet-300));
+  border-radius: 0.25rem;
+  caret-color: var(--bs-blue-400);
+  color: var(--bs-ink-base);
+  font-size: var(--bs-text-base);
+  font-weight: 400;
+  height: 2.5rem;
+  line-height: var(--bs-leading-base);
+  min-height: 2.5rem;
+  padding-inline: 0.75rem;
+  width: 100%;
+}
+
+textarea {
+  height: auto;
+  padding-block: 0.5rem;
+  resize: vertical;
+}
+
+:is(input, textarea, select)::placeholder {
+  color: var(--bs-violet-200);
+}
+:is(input, textarea, select):where(:focus-visible)::placeholder {
+  opacity: 0;
+}
+
+:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible) {
+  --input-border: var(--bs-blue-400);
+  outline-width: 0px;
+}
+
+:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled) {
+  --input-border: var(--bs-gray-400);
+  background-color: var(--bs-gray-200);
+  color: var(--bs-gray-400);
+}
+
+/* Errors and Messages */
+:is(input, select, textarea):where([data-error]) {
+  --input-border: var(--bs-red-500);
+}
+
+/*
+Removes the built-in 'margin' on bottom of textarea
+see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
+:has not fully supported yet but will work for most
+*/
+:has(> textarea:only-child) {
+  display: block;
+  line-height: 0;
+}
+
+/* chrome user agent styling was applying opacity: 0.7 */
+:where(select:disabled) {
+  opacity: 1;
+}
+
+:is(input, textarea, select):disabled::placeholder,
+:is(input, textarea, select)[disabled]::placeholder {
+  color: var(--bs-gray-400);
+  opacity: 1;
+}
+
+/* Select */
+
+select {
+  /* URL Encoded SVG dropdown caret so there is something there */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0B19' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  background-size: 1em 1em;
+  padding-right: var(--bs-space-9);
+}
+.dark select {
+  /* URL Encoded SVG dropdown caret so there is something there */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
+}
+
+.dark select:disabled {
+  /* URL Encoded SVG dropdown caret so there is something there */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
+}

package/dist/components/tooltip.css

@@ -0,0 +1,154 @@
+/* -------------------- BASE STYLES -------------------- */
+.bs-tooltip {
+    display: inline-block;
+    position: relative;
+}
+
+.bs-tooltip :where(.bs-tooltip-text) {
+  align-items: center;
+  background-color: var(--bs-bg-base);
+  border-radius: 4px;
+  box-shadow: var(--bs-shadow-contentLowCenter);
+  color: var(--bs-violet-400);
+  display: flex;
+  font-size: var(--bs-text-sm);
+  justify-content: center;
+  max-width: 16rem;
+  min-width: 4rem;
+  opacity: 0;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  position: absolute;
+  transform: scale(0);
+  transition-duration: 75ms;
+  transition-property: opacity, transform;
+  transition-timing-function: ease-in-out;
+  width: max-content;
+  z-index: 999;
+}
+
+/* -------------------- POSITION: UNDEFINED / TOP -------------------- */
+.bs-tooltip:where(:not([data-position])) :where(.bs-tooltip-text),
+.bs-tooltip:where([data-position="top"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  left: 50%;
+  transform-origin: bottom center;
+  transform: translateX(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip:not([data-position])):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip:not([data-position])):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip:not([data-position]))[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+/* -------------------- POSITION: BOTTOM -------------------- */
+.bs-tooltip:where([data-position="bottom"]) :where(.bs-tooltip-text) {
+  left: 50%;
+  top: calc(100% + 0.5rem);
+  transform-origin: top center;
+  transform: translateX(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="bottom"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+/* -------------------- POSITION: LEFT -------------------- */
+.bs-tooltip:where([data-position="left"]) :where(.bs-tooltip-text) {
+  right: calc(100% + 0.5rem);
+  top: 50%;
+  transform-origin: center right;
+  transform: translateY(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="left"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+/* -------------------- POSITION: RIGHT -------------------- */
+.bs-tooltip:where([data-position="right"]) :where(.bs-tooltip-text) {
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform-origin: center left;
+  transform: translateY(-50%) scale(0);
+}
+
+:where(.bs-tooltip[data-position="right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="right"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+/* -------------------- POSITION: CORNERS -------------------- */
+/* top-left */
+.bs-tooltip:where([data-position="top-left"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  right: calc(100% + 0.5rem);
+  transform-origin: bottom right;
+}
+
+/* top-right */
+.bs-tooltip:where([data-position="top-right"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  left: calc(100% + 0.5rem);
+  transform-origin: bottom left;
+}
+
+/* bottom-left */
+.bs-tooltip:where([data-position="bottom-left"]) :where(.bs-tooltip-text) {
+  right: calc(100% + 0.5rem);
+  top: calc(100% + 0.5rem);
+  transform-origin: top right;
+}
+
+/* bottom-right */
+.bs-tooltip:where([data-position="bottom-right"]) :where(.bs-tooltip-text) {
+  left: calc(100% + 0.5rem);
+  top: calc(100% + 0.5rem);
+  transform-origin: top left;
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="top-left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-left"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* -------------------- DISABLED -------------------- */
+/*
+Don't display unless data-shown is present
+This must go last to properly override the other classes
+*/
+:where(.bs-tooltip[data-disabled]:not([data-shown])):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-disabled]:not([data-shown])):focus-within :where(.bs-tooltip-text) {
+  opacity: 0;
+  transform: scale(0);
+}