@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/slider-6Q8ChlAS.js

@@ -0,0 +1,425 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./form-control-CBEBNz12.js";
+import { a as n, i as r, r as i } from "./field-message-CPXPLd6z.js";
+import { LitElement as a, css as o, html as s, nothing as c } from "lit";
+import { customElement as l, property as u, query as d, state as f } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { repeat as m } from "lit/directives/repeat.js";
+//#region source/components/slider/slider.style.ts
+var h = o`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .slider {
+    font-family: var(--bp-font-family);
+  }
+
+  .slider__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--bp-spacing-sm);
+  }
+
+  .slider__label {
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .slider__value {
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .slider__container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .slider__track {
+    position: relative;
+    width: 100%;
+    background-color: var(--bp-color-border);
+    border-radius: var(--bp-border-radius-full);
+    overflow: visible;
+  }
+
+  .slider__fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: var(--bp-color-primary);
+    border-radius: var(--bp-border-radius-full);
+    transition:
+      width var(--bp-duration-instant),
+      background-color var(--bp-transition-fast);
+  }
+
+  .slider__thumb {
+    position: absolute;
+    background-color: var(--bp-color-surface-elevated);
+    border: var(--bp-border-width) solid var(--bp-color-primary);
+    border-radius: var(--bp-border-radius-full);
+    box-shadow:
+      0 1px 3px oklch(0 0 0 / 0.2),
+      0 1px 2px oklch(0 0 0 / 0.1);
+    top: 50%;
+    transform: translate(-50%, -50%);
+    cursor: grab;
+    transition:
+      box-shadow var(--bp-transition-fast),
+      transform var(--bp-transition-fast),
+      border-color var(--bp-transition-fast);
+  }
+
+  .slider__thumb:focus {
+    outline: none;
+    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);
+  }
+
+  .slider__thumb:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);
+  }
+
+  .slider__ticks {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: var(--bp-spacing-xs);
+    pointer-events: none;
+  }
+
+  .slider__tick {
+    position: absolute;
+    top: var(--bp-spacing-xs);
+    width: var(--bp-spacing-0-5);
+    height: var(--bp-spacing-xs);
+    background-color: var(--bp-color-border-strong);
+    transform: translateX(-50%);
+  }
+
+  /* Size variants */
+  .slider--sm .slider__track {
+    height: var(--bp-spacing-1);
+  }
+
+  .slider--sm .slider__thumb {
+    width: var(--bp-spacing-3);
+    height: var(--bp-spacing-3);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  .slider--md .slider__track {
+    height: var(--bp-spacing-1-5);
+  }
+
+  .slider--md .slider__thumb {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  .slider--lg .slider__track {
+    height: var(--bp-spacing-2);
+  }
+
+  .slider--lg .slider__thumb {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+    box-shadow: var(--bp-shadow-md);
+  }
+
+  /* States */
+  .slider__container:hover .slider__thumb {
+    border-color: var(--bp-color-primary-hover);
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+
+  .slider__container:hover .slider__fill {
+    background-color: var(--bp-color-primary-hover);
+  }
+
+  .slider__container:hover .slider__track {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-border) 90%,
+      var(--bp-color-primary) 10%
+    );
+  }
+
+  .slider--dragging .slider__thumb {
+    cursor: grabbing;
+    border-color: var(--bp-color-primary-active);
+    box-shadow: var(--bp-shadow-md);
+    transform: translate(-50%, -50%) scale(1.15);
+  }
+
+  .slider--dragging .slider__fill {
+    background-color: var(--bp-color-primary-active);
+    transition: none;
+  }
+
+  .slider--dragging .slider__track {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-border) 85%,
+      var(--bp-color-primary) 15%
+    );
+  }
+
+  .slider--disabled {
+    pointer-events: none;
+  }
+
+  .slider--disabled .slider__track {
+    background-color: var(--bp-color-surface-subdued);
+  }
+
+  .slider--disabled .slider__fill {
+    background-color: var(--bp-color-border);
+  }
+
+  .slider--disabled .slider__thumb {
+    background-color: var(--bp-color-surface-subdued);
+    border-color: var(--bp-color-border);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  .slider--disabled .slider__label,
+  .slider--disabled .slider__value {
+    color: var(--bp-color-text-muted);
+    opacity: var(--bp-opacity-disabled);
+  }
+
+  /* Invalid: error color on the thumb and fill */
+  .slider--invalid .slider__thumb {
+    border-color: var(--bp-color-error);
+  }
+
+  .slider--invalid .slider__fill {
+    background-color: var(--bp-color-error);
+  }
+`;
+//#endregion
+//#region source/utilities/throttle.ts
+function g(e, t) {
+	let n = t <= 16, r = null, i = null, a = null, o = !1, s = (...s) => {
+		if (n) r = s, i === null && (e(...s), r = null, i = requestAnimationFrame(() => {
+			i = null, r !== null && (e(...r), r = null);
+		}));
+		else if (o) r = s;
+		else {
+			e(...s), o = !0, r = null;
+			let n = () => {
+				a = setTimeout(() => {
+					a = null, r === null ? o = !1 : (e(...r), r = null, n());
+				}, t);
+			};
+			n();
+		}
+	};
+	return s.cancel = () => {
+		i !== null && (cancelAnimationFrame(i), i = null), a !== null && (clearTimeout(a), a = null), r = null, o = !1;
+	}, s;
+}
+//#endregion
+//#region source/components/slider/slider.ts
+var _ = class extends t(a) {
+	static {
+		this.styles = [r, h];
+	}
+	constructor() {
+		super(), this.isDragging = !1, this.cachedTrackRect = null, this.throttledUpdatePosition = g((e) => {
+			this.updateValueFromPosition(e);
+		}, 16), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.helperText = "", this.errorMessage = "", this.disabled = !1, this.size = "md", this.showValue = !1, this.showTicks = !1, this.formatValue = (e) => String(e);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.throttledUpdatePosition.cancel(), this.cachedTrackRect = null;
+	}
+	get percentage() {
+		let e = this.max - this.min;
+		return e === 0 ? 0 : (this.value - this.min) / e * 100;
+	}
+	get tickPositions() {
+		if (!this.showTicks) return [];
+		let e = [], t = this.max - this.min, n = Math.floor(t / this.step);
+		if (n > 20) return [];
+		for (let r = 0; r <= n; r++) e.push(r * this.step / t * 100);
+		return e;
+	}
+	clampValue(e) {
+		let t = String(this.step), n = t.includes(".") ? t.split(".")[1].length : 0, r = Math.round((e - this.min) / this.step) * this.step + this.min, i = parseFloat(r.toFixed(n));
+		return Math.max(this.min, Math.min(this.max, i));
+	}
+	updateValueFromPosition(e) {
+		if (!this.trackElement || this.disabled) return;
+		let t = this.cachedTrackRect || this.trackElement.getBoundingClientRect(), n = Math.max(0, Math.min(1, (e - t.left) / t.width)), r = this.min + n * (this.max - this.min), i = this.clampValue(r);
+		i !== this.value && (this.value = i, this.dispatchEvent(new CustomEvent("bp-input", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	handleMouseDown(e) {
+		if (this.disabled) return;
+		e.preventDefault(), this.isDragging = !0, this.cachedTrackRect = this.trackElement?.getBoundingClientRect() ?? null, this.updateValueFromPosition(e.clientX);
+		let t = (e) => {
+			this.throttledUpdatePosition(e.clientX);
+		}, n = () => {
+			this.throttledUpdatePosition.cancel(), this.cachedTrackRect = null, this.isDragging = !1, document.removeEventListener("mousemove", t), document.removeEventListener("mouseup", n), this.dispatchEvent(new CustomEvent("bp-change", {
+				detail: { value: this.value },
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+		document.addEventListener("mousemove", t), document.addEventListener("mouseup", n);
+	}
+	handleTouchStart(e) {
+		if (this.disabled) return;
+		e.preventDefault(), this.isDragging = !0, this.cachedTrackRect = this.trackElement?.getBoundingClientRect() ?? null;
+		let t = e.touches[0];
+		this.updateValueFromPosition(t.clientX);
+		let n = (e) => {
+			let t = e.touches[0];
+			this.throttledUpdatePosition(t.clientX);
+		}, r = () => {
+			this.throttledUpdatePosition.cancel(), this.cachedTrackRect = null, this.isDragging = !1, document.removeEventListener("touchmove", n), document.removeEventListener("touchend", r), this.dispatchEvent(new CustomEvent("bp-change", {
+				detail: { value: this.value },
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+		document.addEventListener("touchmove", n), document.addEventListener("touchend", r);
+	}
+	handleKeyDown(e) {
+		if (this.disabled) return;
+		let t, n = this.step * 10;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				t = this.clampValue(this.value + this.step);
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				t = this.clampValue(this.value - this.step);
+				break;
+			case "PageUp":
+				t = this.clampValue(this.value + n);
+				break;
+			case "PageDown":
+				t = this.clampValue(this.value - n);
+				break;
+			case "Home":
+				t = this.min;
+				break;
+			case "End":
+				t = this.max;
+				break;
+			default: return;
+		}
+		e.preventDefault(), t !== this.value && (this.value = t, this.dispatchEvent(new CustomEvent("bp-input", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("bp-change", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		let e = {
+			helperText: this.helperText,
+			errorMessage: this.errorMessage,
+			invalid: !1
+		}, { invalid: t, describedBy: r } = i(e), a = {
+			slider: !0,
+			[`slider--${this.size}`]: !0,
+			"slider--disabled": this.disabled,
+			"slider--dragging": this.isDragging,
+			"slider--invalid": t
+		};
+		return s`
+      <div class=${p(a)}>
+        ${this.label || this.showValue ? s`
+                <div class="slider__header">
+                  ${this.label ? s`<label class="slider__label" part="label"
+                          >${this.label}</label
+                        >` : c}
+                  ${this.showValue ? s`<span class="slider__value" part="value-display"
+                          >${this.formatValue(this.value)}</span
+                        >` : c}
+                </div>
+              ` : c}
+        <div
+          class="slider__container"
+          @mousedown=${this.handleMouseDown}
+          @touchstart=${this.handleTouchStart}
+        >
+          <div class="slider__track" part="track">
+            <div
+              class="slider__fill"
+              part="fill"
+              style="width: ${this.percentage}%"
+            ></div>
+            ${this.showTicks ? s`
+                    <div class="slider__ticks">
+                      ${m(this.tickPositions, (e) => e, (e) => s`<div
+                            class="slider__tick"
+                            style="left: ${e}%"
+                          ></div>`)}
+                    </div>
+                  ` : c}
+          </div>
+          <div
+            class="slider__thumb"
+            part="thumb"
+            role="slider"
+            tabindex=${this.disabled ? -1 : 0}
+            aria-label=${this.label || "Slider"}
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${this.value}
+            aria-valuetext=${this.formatValue(this.value)}
+            aria-disabled=${this.disabled}
+            aria-invalid=${t ? "true" : c}
+            aria-describedby=${r ?? c}
+            style="left: ${this.percentage}%"
+            @keydown=${this.handleKeyDown}
+          ></div>
+        </div>
+        ${this.name ? s`<input
+                type="hidden"
+                name=${this.name}
+                .value=${String(this.value)}
+              />` : c}
+      </div>
+      ${n(e)}
+    `;
+	}
+};
+e([u({ type: Number })], _.prototype, "value", void 0), e([u({ type: Number })], _.prototype, "min", void 0), e([u({ type: Number })], _.prototype, "max", void 0), e([u({ type: Number })], _.prototype, "step", void 0), e([u({ type: String })], _.prototype, "name", void 0), e([u({ type: String })], _.prototype, "label", void 0), e([u({ type: String })], _.prototype, "helperText", void 0), e([u({ type: String })], _.prototype, "errorMessage", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "disabled", void 0), e([u({ type: String })], _.prototype, "size", void 0), e([u({
+	type: Boolean,
+	attribute: "show-value"
+})], _.prototype, "showValue", void 0), e([u({
+	type: Boolean,
+	attribute: "show-ticks"
+})], _.prototype, "showTicks", void 0), e([u({ attribute: !1 })], _.prototype, "formatValue", void 0), e([f()], _.prototype, "isDragging", void 0), e([d(".slider__track")], _.prototype, "trackElement", void 0), _ = e([l("bp-slider")], _);
+//#endregion
+export { g as n, _ as t };
+
+//# sourceMappingURL=slider-6Q8ChlAS.js.map

package/dist/shared/slider-6Q8ChlAS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-6Q8ChlAS.js","names":["_decorate","__decorate","renderFieldMessage","fieldMessageStyles","fieldMessageState","sliderStyles","throttle","useRAF","limit","lastArgs","rafId","timeoutId","waiting","throttled","args","fn","scheduleNext","BpSlider","FormControlMixin","LitElement","clientX","value","range","ticks","numTicks","i","stepString","decimalPlaces","steppedValue","rawValue","preciseValue","rect","percentage","newValue","event","handleMouseMove","moveEvent","handleMouseUp","touch","handleTouchMove","moveTouch","handleTouchEnd","largeStep","message","wrapperClasses","invalid","classMap","nothing","repeat","pos","describedBy","property","state","query","customElement"],"sources":["../../source/components/slider/slider.style.ts","../../source/utilities/throttle.ts","../../source/components/slider/slider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const sliderStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .slider {\n    font-family: var(--bp-font-family);\n  }\n\n  .slider__header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: var(--bp-spacing-sm);\n  }\n\n  .slider__label {\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .slider__value {\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text-muted);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .slider__container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .slider__track {\n    position: relative;\n    width: 100%;\n    background-color: var(--bp-color-border);\n    border-radius: var(--bp-border-radius-full);\n    overflow: visible;\n  }\n\n  .slider__fill {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    background-color: var(--bp-color-primary);\n    border-radius: var(--bp-border-radius-full);\n    transition:\n      width var(--bp-duration-instant),\n      background-color var(--bp-transition-fast);\n  }\n\n  .slider__thumb {\n    position: absolute;\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-primary);\n    border-radius: var(--bp-border-radius-full);\n    box-shadow:\n      0 1px 3px oklch(0 0 0 / 0.2),\n      0 1px 2px oklch(0 0 0 / 0.1);\n    top: 50%;\n    transform: translate(-50%, -50%);\n    cursor: grab;\n    transition:\n      box-shadow var(--bp-transition-fast),\n      transform var(--bp-transition-fast),\n      border-color var(--bp-transition-fast);\n  }\n\n  .slider__thumb:focus {\n    outline: none;\n    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);\n  }\n\n  .slider__thumb:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);\n  }\n\n  .slider__ticks {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    height: var(--bp-spacing-xs);\n    pointer-events: none;\n  }\n\n  .slider__tick {\n    position: absolute;\n    top: var(--bp-spacing-xs);\n    width: var(--bp-spacing-0-5);\n    height: var(--bp-spacing-xs);\n    background-color: var(--bp-color-border-strong);\n    transform: translateX(-50%);\n  }\n\n  /* Size variants */\n  .slider--sm .slider__track {\n    height: var(--bp-spacing-1);\n  }\n\n  .slider--sm .slider__thumb {\n    width: var(--bp-spacing-3);\n    height: var(--bp-spacing-3);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  }\n\n  .slider--md .slider__track {\n    height: var(--bp-spacing-1-5);\n  }\n\n  .slider--md .slider__thumb {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  .slider--lg .slider__track {\n    height: var(--bp-spacing-2);\n  }\n\n  .slider--lg .slider__thumb {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n    box-shadow: var(--bp-shadow-md);\n  }\n\n  /* States */\n  .slider__container:hover .slider__thumb {\n    border-color: var(--bp-color-primary-hover);\n    transform: translate(-50%, -50%) scale(1.1);\n  }\n\n  .slider__container:hover .slider__fill {\n    background-color: var(--bp-color-primary-hover);\n  }\n\n  .slider__container:hover .slider__track {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-border) 90%,\n      var(--bp-color-primary) 10%\n    );\n  }\n\n  .slider--dragging .slider__thumb {\n    cursor: grabbing;\n    border-color: var(--bp-color-primary-active);\n    box-shadow: var(--bp-shadow-md);\n    transform: translate(-50%, -50%) scale(1.15);\n  }\n\n  .slider--dragging .slider__fill {\n    background-color: var(--bp-color-primary-active);\n    transition: none;\n  }\n\n  .slider--dragging .slider__track {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-border) 85%,\n      var(--bp-color-primary) 15%\n    );\n  }\n\n  .slider--disabled {\n    pointer-events: none;\n  }\n\n  .slider--disabled .slider__track {\n    background-color: var(--bp-color-surface-subdued);\n  }\n\n  .slider--disabled .slider__fill {\n    background-color: var(--bp-color-border);\n  }\n\n  .slider--disabled .slider__thumb {\n    background-color: var(--bp-color-surface-subdued);\n    border-color: var(--bp-color-border);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .slider--disabled .slider__label,\n  .slider--disabled .slider__value {\n    color: var(--bp-color-text-muted);\n    opacity: var(--bp-opacity-disabled);\n  }\n\n  /* Invalid: error color on the thumb and fill */\n  .slider--invalid .slider__thumb {\n    border-color: var(--bp-color-error);\n  }\n\n  .slider--invalid .slider__fill {\n    background-color: var(--bp-color-error);\n  }\n`;\n","/**\n * Throttle utility for rate-limiting function calls.\n * When limit <= 16ms, uses requestAnimationFrame for frame-aligned throttling.\n * Otherwise uses Date.now() comparison.\n */\n\ntype ThrottledFunction<T extends (...args: never[]) => unknown> = {\n  (...args: Parameters<T>): void;\n  cancel: () => void;\n};\n\nexport function throttle<T extends (...args: never[]) => unknown>(\n  fn: T,\n  limit: number\n): ThrottledFunction<T> {\n  const useRAF = limit <= 16;\n  let lastArgs: Parameters<T> | null = null;\n  let rafId: number | null = null;\n  let timeoutId: ReturnType<typeof setTimeout> | null = null;\n  let waiting = false;\n\n  const throttled = (...args: Parameters<T>): void => {\n    if (useRAF) {\n      lastArgs = args;\n      if (rafId === null) {\n        // First call: execute immediately\n        fn(...args);\n        lastArgs = null;\n        rafId = requestAnimationFrame(() => {\n          rafId = null;\n          if (lastArgs !== null) {\n            fn(...lastArgs);\n            lastArgs = null;\n          }\n        });\n      }\n    } else {\n      if (!waiting) {\n        // First call or enough time has elapsed\n        fn(...args);\n        waiting = true;\n        lastArgs = null;\n\n        const scheduleNext = () => {\n          timeoutId = setTimeout(() => {\n            timeoutId = null;\n            if (lastArgs !== null) {\n              fn(...lastArgs);\n              lastArgs = null;\n              scheduleNext();\n            } else {\n              waiting = false;\n            }\n          }, limit);\n        };\n        scheduleNext();\n      } else {\n        lastArgs = args;\n      }\n    }\n  };\n\n  throttled.cancel = () => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n    if (timeoutId !== null) {\n      clearTimeout(timeoutId);\n      timeoutId = null;\n    }\n    lastArgs = null;\n    waiting = false;\n  };\n\n  return throttled;\n}\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { sliderStyles } from './slider.style.js';\nimport { throttle } from '../../utilities/throttle.js';\nimport { FormControlMixin } from '../../utilities/form-control.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\n\n/**\n * Size variants for the slider\n */\nexport type SliderSize = 'sm' | 'md' | 'lg';\n\n/**\n * A slider component for selecting numeric values within a range.\n *\n * @element bp-slider\n *\n * @fires bp-input - Fired continuously while dragging\n * @fires bp-change - Fired when the value changes (after interaction ends)\n *\n * @csspart track - The slider track element\n * @csspart fill - The filled portion of the track\n * @csspart thumb - The draggable thumb element\n * @csspart label - The label element\n * @csspart value-display - The current value display\n */\n@customElement('bp-slider')\nexport class BpSlider extends FormControlMixin(LitElement) {\n  /**\n   * Current value of the slider\n   */\n  @property({ type: Number }) declare value: number;\n\n  /**\n   * Minimum value\n   */\n  @property({ type: Number }) declare min: number;\n\n  /**\n   * Maximum value\n   */\n  @property({ type: Number }) declare max: number;\n\n  /**\n   * Step increment\n   */\n  @property({ type: Number }) declare step: number;\n\n  /**\n   * Name attribute for form association\n   */\n  @property({ type: String }) declare name: string;\n\n  /**\n   * Label text for the slider\n   */\n  @property({ type: String }) declare label: string;\n\n  /** Helper text displayed below the slider */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the slider is invalid: the message replaces the\n   * helper text, is announced, and the thumb and fill turn to the error color.\n   */\n  @property({ type: String }) declare errorMessage: string;\n\n  /**\n   * Whether the slider is disabled\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /**\n   * Size variant\n   */\n  @property({ type: String }) declare size: SliderSize;\n\n  /**\n   * Whether to show the current value\n   */\n  @property({ type: Boolean, attribute: 'show-value' })\n  declare showValue: boolean;\n\n  /**\n   * Whether to show tick marks at step intervals\n   */\n  @property({ type: Boolean, attribute: 'show-ticks' })\n  declare showTicks: boolean;\n\n  /**\n   * Format function for displaying the value\n   */\n  @property({ attribute: false }) declare formatValue: (\n    value: number\n  ) => string;\n\n  /**\n   * Whether the thumb is currently being dragged\n   */\n  @state() private isDragging = false;\n\n  @query('.slider__track') private trackElement!: HTMLElement;\n\n  /** Cached track bounding rect during drag to avoid repeated layout queries */\n  private cachedTrackRect: DOMRect | null = null;\n\n  /** Throttled position update for frame-aligned drag handling */\n  private throttledUpdatePosition = throttle((clientX: number) => {\n    this.updateValueFromPosition(clientX);\n  }, 16);\n\n  static styles = [fieldMessageStyles, sliderStyles];\n\n  constructor() {\n    super();\n    this.value = 0;\n    this.min = 0;\n    this.max = 100;\n    this.step = 1;\n    this.name = '';\n    this.label = '';\n    this.helperText = '';\n    this.errorMessage = '';\n    this.disabled = false;\n    this.size = 'md';\n    this.showValue = false;\n    this.showTicks = false;\n    this.formatValue = (value: number) => String(value);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.throttledUpdatePosition.cancel();\n    this.cachedTrackRect = null;\n  }\n\n  /**\n   * Calculate the percentage position of the current value\n   */\n  private get percentage(): number {\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n    return ((this.value - this.min) / range) * 100;\n  }\n\n  /**\n   * Get tick positions based on step\n   */\n  private get tickPositions(): number[] {\n    if (!this.showTicks) return [];\n    const ticks: number[] = [];\n    const range = this.max - this.min;\n    const numTicks = Math.floor(range / this.step);\n\n    // Limit to reasonable number of ticks\n    if (numTicks > 20) return [];\n\n    for (let i = 0; i <= numTicks; i++) {\n      ticks.push(((i * this.step) / range) * 100);\n    }\n    return ticks;\n  }\n\n  /**\n   * Clamp value to min/max and round to step.\n   * Uses decimal-aware rounding to avoid floating-point artifacts\n   * (e.g. 0.6900000000000001 instead of 0.69).\n   */\n  private clampValue(rawValue: number): number {\n    // Determine the number of decimal places in the step value\n    const stepString = String(this.step);\n    const decimalPlaces = stepString.includes('.')\n      ? stepString.split('.')[1].length\n      : 0;\n\n    // Round to nearest step\n    const steppedValue =\n      Math.round((rawValue - this.min) / this.step) * this.step + this.min;\n\n    // Round to step precision to eliminate floating-point errors\n    const preciseValue = parseFloat(steppedValue.toFixed(decimalPlaces));\n\n    // Clamp to range\n    return Math.max(this.min, Math.min(this.max, preciseValue));\n  }\n\n  /**\n   * Update value from a position on the track.\n   * Uses cached bounding rect during drag for performance.\n   */\n  private updateValueFromPosition(clientX: number): void {\n    if (!this.trackElement || this.disabled) return;\n\n    const rect =\n      this.cachedTrackRect || this.trackElement.getBoundingClientRect();\n    const percentage = Math.max(\n      0,\n      Math.min(1, (clientX - rect.left) / rect.width)\n    );\n    const rawValue = this.min + percentage * (this.max - this.min);\n    const newValue = this.clampValue(rawValue);\n\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.dispatchEvent(\n        new CustomEvent('bp-input', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  /**\n   * Handle mouse down on track or thumb\n   */\n  private handleMouseDown(event: MouseEvent): void {\n    if (this.disabled) return;\n    event.preventDefault();\n\n    this.isDragging = true;\n    // Cache the track rect at drag start to avoid repeated layout queries\n    this.cachedTrackRect = this.trackElement?.getBoundingClientRect() ?? null;\n    this.updateValueFromPosition(event.clientX);\n\n    const handleMouseMove = (moveEvent: MouseEvent) => {\n      this.throttledUpdatePosition(moveEvent.clientX);\n    };\n\n    const handleMouseUp = () => {\n      this.throttledUpdatePosition.cancel();\n      this.cachedTrackRect = null;\n      this.isDragging = false;\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n      this.dispatchEvent(\n        new CustomEvent('bp-change', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    };\n\n    document.addEventListener('mousemove', handleMouseMove);\n    document.addEventListener('mouseup', handleMouseUp);\n  }\n\n  /**\n   * Handle touch start on track or thumb\n   */\n  private handleTouchStart(event: globalThis.TouchEvent): void {\n    if (this.disabled) return;\n    event.preventDefault();\n\n    this.isDragging = true;\n    // Cache the track rect at drag start to avoid repeated layout queries\n    this.cachedTrackRect = this.trackElement?.getBoundingClientRect() ?? null;\n    const touch = event.touches[0];\n    this.updateValueFromPosition(touch.clientX);\n\n    const handleTouchMove = (moveEvent: globalThis.TouchEvent) => {\n      const moveTouch = moveEvent.touches[0];\n      this.throttledUpdatePosition(moveTouch.clientX);\n    };\n\n    const handleTouchEnd = () => {\n      this.throttledUpdatePosition.cancel();\n      this.cachedTrackRect = null;\n      this.isDragging = false;\n      document.removeEventListener('touchmove', handleTouchMove);\n      document.removeEventListener('touchend', handleTouchEnd);\n      this.dispatchEvent(\n        new CustomEvent('bp-change', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    };\n\n    document.addEventListener('touchmove', handleTouchMove);\n    document.addEventListener('touchend', handleTouchEnd);\n  }\n\n  /**\n   * Handle keyboard navigation\n   */\n  private handleKeyDown(event: globalThis.KeyboardEvent): void {\n    if (this.disabled) return;\n\n    let newValue: number;\n    const largeStep = this.step * 10;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        newValue = this.clampValue(this.value + this.step);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        newValue = this.clampValue(this.value - this.step);\n        break;\n      case 'PageUp':\n        newValue = this.clampValue(this.value + largeStep);\n        break;\n      case 'PageDown':\n        newValue = this.clampValue(this.value - largeStep);\n        break;\n      case 'Home':\n        newValue = this.min;\n        break;\n      case 'End':\n        newValue = this.max;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.dispatchEvent(\n        new CustomEvent('bp-input', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n      this.dispatchEvent(\n        new CustomEvent('bp-change', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: false,\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    const wrapperClasses = {\n      slider: true,\n      [`slider--${this.size}`]: true,\n      'slider--disabled': this.disabled,\n      'slider--dragging': this.isDragging,\n      'slider--invalid': invalid,\n    };\n\n    return html`\n      <div class=${classMap(wrapperClasses)}>\n        ${\n          this.label || this.showValue\n            ? html`\n                <div class=\"slider__header\">\n                  ${\n                    this.label\n                      ? html`<label class=\"slider__label\" part=\"label\"\n                          >${this.label}</label\n                        >`\n                      : nothing\n                  }\n                  ${\n                    this.showValue\n                      ? html`<span class=\"slider__value\" part=\"value-display\"\n                          >${this.formatValue(this.value)}</span\n                        >`\n                      : nothing\n                  }\n                </div>\n              `\n            : nothing\n        }\n        <div\n          class=\"slider__container\"\n          @mousedown=${this.handleMouseDown}\n          @touchstart=${this.handleTouchStart}\n        >\n          <div class=\"slider__track\" part=\"track\">\n            <div\n              class=\"slider__fill\"\n              part=\"fill\"\n              style=\"width: ${this.percentage}%\"\n            ></div>\n            ${\n              this.showTicks\n                ? html`\n                    <div class=\"slider__ticks\">\n                      ${repeat(\n                        this.tickPositions,\n                        (pos) => pos,\n                        (pos) =>\n                          html`<div\n                            class=\"slider__tick\"\n                            style=\"left: ${pos}%\"\n                          ></div>`\n                      )}\n                    </div>\n                  `\n                : nothing\n            }\n          </div>\n          <div\n            class=\"slider__thumb\"\n            part=\"thumb\"\n            role=\"slider\"\n            tabindex=${this.disabled ? -1 : 0}\n            aria-label=${this.label || 'Slider'}\n            aria-valuemin=${this.min}\n            aria-valuemax=${this.max}\n            aria-valuenow=${this.value}\n            aria-valuetext=${this.formatValue(this.value)}\n            aria-disabled=${this.disabled}\n            aria-invalid=${invalid ? 'true' : nothing}\n            aria-describedby=${describedBy ?? nothing}\n            style=\"left: ${this.percentage}%\"\n            @keydown=${this.handleKeyDown}\n          ></div>\n        </div>\n        ${\n          this.name\n            ? html`<input\n                type=\"hidden\"\n                name=${this.name}\n                .value=${String(this.value)}\n              />`\n            : nothing\n        }\n      </div>\n      ${renderFieldMessage(message)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-slider': BpSlider;\n  }\n}\n"],"mappings":"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"}

package/dist/shared/spinner-Bg4fErQA.js

@@ -0,0 +1,129 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+//#region source/components/spinner/spinner.style.ts
+var o = n`
+  /* Base styles */
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner__circle {
+    border-radius: var(--bp-border-radius-full);
+    border-style: solid;
+    border-color: transparent;
+    animation: bp-spinner-rotate var(--bp-ease-linear) infinite;
+    will-change: transform;
+  }
+
+  /* Variants */
+  .spinner--primary .spinner__circle {
+    border-top-color: var(--bp-color-primary);
+    border-right-color: var(--bp-color-primary);
+  }
+
+  .spinner--success .spinner__circle {
+    border-top-color: var(--bp-color-success);
+    border-right-color: var(--bp-color-success);
+  }
+
+  .spinner--error .spinner__circle {
+    border-top-color: var(--bp-color-error);
+    border-right-color: var(--bp-color-error);
+  }
+
+  .spinner--warning .spinner__circle {
+    border-top-color: var(--bp-color-warning);
+    border-right-color: var(--bp-color-warning);
+  }
+
+  .spinner--inverse .spinner__circle {
+    border-top-color: var(--bp-color-text-inverse);
+    border-right-color: var(--bp-color-text-inverse);
+  }
+
+  .spinner--neutral .spinner__circle {
+    border-top-color: var(--bp-color-text-muted);
+    border-right-color: var(--bp-color-text-muted);
+  }
+
+  /* Sizes */
+  .spinner--sm .spinner__circle {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+    border-width: var(--bp-spacing-xs);
+    animation-duration: var(--bp-duration-normal);
+  }
+
+  .spinner--md .spinner__circle {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+    border-width: var(--bp-spacing-xs);
+    animation-duration: var(--bp-duration-slow);
+  }
+
+  .spinner--lg .spinner__circle {
+    width: var(--bp-spacing-8);
+    height: var(--bp-spacing-8);
+    border-width: var(--bp-spacing-xs);
+    animation-duration: 600ms;
+  }
+
+  /* Animation */
+  @keyframes bp-spinner-rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Respect user's motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    .spinner__circle {
+      animation-duration: 2s;
+    }
+  }
+`, s = class extends t {
+	static {
+		this.styles = [o];
+	}
+	constructor() {
+		super(), this.size = "md", this.variant = "primary", this.label = "Loading...";
+	}
+	render() {
+		return r`
+      <div
+        class="spinner spinner--${this.size} spinner--${this.variant}"
+        role="status"
+        aria-label="${this.label}"
+        part="spinner"
+      >
+        <div class="spinner__circle" part="circle"></div>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "label", void 0), s = e([i("bp-spinner")], s);
+//#endregion
+export { s as t };
+
+//# sourceMappingURL=spinner-Bg4fErQA.js.map

package/dist/shared/spinner-Bg4fErQA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-Bg4fErQA.js","names":["_decorate","__decorate","spinnerStyles","BpSpinner","LitElement","property","customElement"],"sources":["../../source/components/spinner/spinner.style.ts","../../source/components/spinner/spinner.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const spinnerStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner__circle {\n    border-radius: var(--bp-border-radius-full);\n    border-style: solid;\n    border-color: transparent;\n    animation: bp-spinner-rotate var(--bp-ease-linear) infinite;\n    will-change: transform;\n  }\n\n  /* Variants */\n  .spinner--primary .spinner__circle {\n    border-top-color: var(--bp-color-primary);\n    border-right-color: var(--bp-color-primary);\n  }\n\n  .spinner--success .spinner__circle {\n    border-top-color: var(--bp-color-success);\n    border-right-color: var(--bp-color-success);\n  }\n\n  .spinner--error .spinner__circle {\n    border-top-color: var(--bp-color-error);\n    border-right-color: var(--bp-color-error);\n  }\n\n  .spinner--warning .spinner__circle {\n    border-top-color: var(--bp-color-warning);\n    border-right-color: var(--bp-color-warning);\n  }\n\n  .spinner--inverse .spinner__circle {\n    border-top-color: var(--bp-color-text-inverse);\n    border-right-color: var(--bp-color-text-inverse);\n  }\n\n  .spinner--neutral .spinner__circle {\n    border-top-color: var(--bp-color-text-muted);\n    border-right-color: var(--bp-color-text-muted);\n  }\n\n  /* Sizes */\n  .spinner--sm .spinner__circle {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: var(--bp-duration-normal);\n  }\n\n  .spinner--md .spinner__circle {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: var(--bp-duration-slow);\n  }\n\n  .spinner--lg .spinner__circle {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: 600ms;\n  }\n\n  /* Animation */\n  @keyframes bp-spinner-rotate {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* Respect user's motion preferences */\n  @media (prefers-reduced-motion: reduce) {\n    .spinner__circle {\n      animation-duration: 2s;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { spinnerStyles } from './spinner.style.js';\n\nexport type SpinnerSize = 'sm' | 'md' | 'lg';\nexport type SpinnerVariant =\n  'primary' | 'success' | 'error' | 'warning' | 'inverse' | 'neutral';\n\n/**\n * A loading spinner component that indicates content is being loaded or processed.\n * Supports multiple sizes, variants, and an optional label for accessibility.\n */\n@customElement('bp-spinner')\nexport class BpSpinner extends LitElement {\n  /**\n   * Size of the spinner.\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: SpinnerSize;\n\n  /**\n   * Visual variant of the spinner.\n   * @type {'primary' | 'success' | 'error' | 'warning' | 'inverse' | 'neutral'}\n   * @default 'primary'\n   */\n  @property({ type: String, reflect: true }) declare variant: SpinnerVariant;\n\n  /**\n   * Accessible label for screen readers.\n   * @type {string}\n   * @default 'Loading...'\n   */\n  @property({ type: String, reflect: true }) declare label: string;\n\n  static styles = [spinnerStyles];\n\n  constructor() {\n    super();\n    this.size = 'md';\n    this.variant = 'primary';\n    this.label = 'Loading...';\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"spinner spinner--${this.size} spinner--${this.variant}\"\n        role=\"status\"\n        aria-label=\"${this.label}\"\n        part=\"spinner\"\n      >\n        <div class=\"spinner__circle\" part=\"circle\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-spinner': BpSpinner;\n  }\n}\n"],"mappings":";;;;AAEA,IAAaE,IAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCWnBC,IAAN,cAAwBC,EAAW;;EAsBxB,KAAA,SAAA,CAACF,CAAa;;CAE9B,cAAc;EAIZ,AAHA,MAAM,GACN,KAAK,OAAO,MACZ,KAAK,UAAU,WACf,KAAK,QAAQ;CACf;CAEA,SAAS;EACP,OAAO,CAAI;;kCAEmB,KAAK,KAAK,YAAY,KAAK,QAAQ;;sBAE/C,KAAK,MAAM;;;;;;CAM/B;AACF;AArCGF,EAAA,CAAAK,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAF,EAAA,WAAA,QAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAK,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAF,EAAA,WAAA,WAAA,KAAA,CAAA,GAOxCH,EAAA,CAAAK,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAF,EAAA,WAAA,SAAA,KAAA,CAAA,GArB1C,IAAAH,EAAA,CAAAM,EAAc,YAAY,CAAA,GAAAH,CAAA"}