@luzmo/lucero 1.0.1-alpha.9 → 1.0.2

package/components/color-slider-ihAIFt5p.js

@@ -0,0 +1,421 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { t as e } from "./decorate-aGxJUVxg.js";
+import { t } from "./focusable-BmS8IzhH.js";
+import { t as n } from "./language-resolution-BpfGTC29.js";
+import "./color-handle-BOusOFFx.js";
+import { t as r } from "./streaming-listener-2NcP7ys7.js";
+import { html as i, unsafeCSS as a } from "lit";
+import { property as o, query as s } from "lit/decorators.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+import { styleMap as l } from "lit/directives/style-map.js";
+import { TinyColor as u } from "@ctrl/tinycolor";
+//#region src/utils/reactive-controllers/color.ts
+var d = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/, f = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/, p = /(^hs[v|l]a?\()\d{1,3}/, m = (e, t) => t ? e.toHexString() : e.toHex(), h = class {
+	setColorProcess(e, t, n, r) {
+		this.maintains === "hue" ? this.setColorMaintainHue(e, t, n, r) : this.maintains === "saturation" && this.setColorMaintainSaturation(e, t, n, r);
+	}
+	setColorMaintainHue(e, t, n, r) {
+		let { h: i, s: a, v: o, a: s } = this._color.toHsv(), c;
+		if (r && n.startsWith("hs")) {
+			let e = d.exec(t);
+			if (e !== null) {
+				let [, t] = e;
+				c = Number(t);
+			}
+		} else if (!r && n.startsWith("hs")) {
+			let t = e.originalInput;
+			c = Object.values(t)[0];
+		}
+		this.hue = c || i, this.opacity = s ?? 1, this.applyColorToState({
+			h: i,
+			s: a,
+			v: o,
+			a: s
+		});
+	}
+	setColorMaintainSaturation(e, t, n, r) {
+		let { a: i } = this._color.toHsv();
+		if (r && n.startsWith("hs")) {
+			let e = d.exec(t);
+			if (e !== null) {
+				let [, t, n] = e;
+				this.hue = Number(t), this.saturation = Number(n);
+			}
+		} else if (!r && n.startsWith("hs")) {
+			let t = e.originalInput, n = Object.values(t);
+			this.hue = n[0], this.saturation = n[1];
+		} else {
+			let { h: t } = e.toHsv();
+			this.hue = t;
+		}
+		this.opacity = i ?? 1, this.applyColorToState(e.toHsv());
+	}
+	constructor(e, { applyColorToState: t, extractColorFromState: n, maintains: r }) {
+		this.maintains = "hue", this._hue = 0, this._opacity = 1, this.getColorProcesses = {
+			rgb: (e, t) => t ? e.toRgbString() : e.toRgb(),
+			prgb: (e, t) => t ? e.toPercentageRgbString() : e.toPercentageRgb(),
+			hex8: (e, t) => t ? e.toHex8String() : e.toHex8(),
+			name: (e) => e.toName() || e.toRgbString(),
+			hsl: (e, t) => {
+				if (this.maintains === "hue") {
+					if (t) return e.toHslString().replace(p, `$1${this.hue}`);
+					let { s: n, l: r, a: i } = e.toHsl();
+					return {
+						h: this.hue,
+						s: n,
+						l: r,
+						a: i
+					};
+				}
+				if (t) return e.toHslString().replace(f, `$1${this.hue}$2${this.saturation}`);
+				let { s: n, l: r, a: i } = e.toHsl();
+				return {
+					h: this.hue,
+					s: n,
+					l: r,
+					a: i
+				};
+			},
+			hsv: (e, t) => {
+				if (this.maintains === "hue") {
+					if (t) return e.toHsvString().replace(p, `$1${this.hue}`);
+					let { s: n, v: r, a: i } = e.toHsv();
+					return {
+						h: this.hue,
+						s: n,
+						v: r,
+						a: i
+					};
+				}
+				if (t) return e.toHsvString().replace(f, `$1${this.hue}$2${this.saturation}`);
+				let { s: n, v: r, a: i } = e.toHsv();
+				return {
+					h: this.hue,
+					s: n,
+					v: r,
+					a: i
+				};
+			},
+			hex: m,
+			hex3: m,
+			hex4: m,
+			hex6: m
+		}, this._color = new u({
+			h: 0,
+			s: 1,
+			v: 1
+		}), this._previousColor = new u({
+			h: 0,
+			s: 1,
+			v: 1
+		}), this._format = {
+			format: "",
+			isString: !1
+		}, this.host = e, this.applyColorToState = t, this.extractColorFromState = n, this.maintains = r || this.maintains;
+	}
+	applyColorFromState() {
+		this._color = new u(this.extractColorFromState(this));
+	}
+	get hue() {
+		return this._hue;
+	}
+	set hue(e) {
+		let t = Math.min(360, Math.max(0, e));
+		if (t === this.hue) return;
+		let n = this.hue, { s: r, v: i, a } = this._color.toHsv();
+		this._color = new u({
+			h: t,
+			s: r,
+			v: i,
+			a
+		}), this._hue = t, this.host.requestUpdate("hue", n);
+	}
+	get opacity() {
+		return this._opacity;
+	}
+	set opacity(e) {
+		let t = Math.min(1, Math.max(0, e));
+		if (t === this.opacity) return;
+		let n = this.opacity, { h: r, s: i, v: a } = this._color.toHsv();
+		this._color = new u({
+			h: r,
+			s: i,
+			v: a,
+			a: t
+		}), this._opacity = t, this.host.requestUpdate("opacity", n);
+	}
+	/* c8 ignore next 3 */
+	get value() {
+		return this.color;
+	}
+	get color() {
+		return this.getColorProcesses[this._format.format || "hex"](this._color, this._format.isString);
+	}
+	set color(e) {
+		/* c8 ignore next 3 */
+		if (e === this.color) return;
+		let t = this._color;
+		this._color = new u(e);
+		let n = this._color.format, r = typeof e == "string" || e instanceof String;
+		n.startsWith("hex") && (r = e.startsWith("#")), this._format = {
+			format: n,
+			isString: r
+		}, this.setColorProcess(this._color, e, n, r), this.host.requestUpdate("color", t);
+	}
+	getColor(e) {
+		return this._color[{ hsl: "toHsl" }[e]]();
+	}
+	setColor(e) {
+		this._color = e;
+		let t = typeof this._color.originalInput == "string" || this._color.originalInput instanceof String;
+		this.setColorProcess(this._color, e, this._color.format, t);
+	}
+	getHslString() {
+		return this._color.toHslString();
+	}
+	savePreviousColor() {
+		this._previousColor = this._color.clone();
+	}
+	restorePreviousColor() {
+		this.setColor(this._previousColor);
+	}
+}, g = ".opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-color-loupe-checkerboard-light,#fff) 0 25%, var(--luzmo-color-loupe-checkerboard-dark,#e6e6e6) 0 50%) var(--luzmo-color-loupe-checkerboard-position,left top)/calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2) calc(var(--luzmo-color-loupe-checkerboard-size,8px) * 2);block-size:100%;inline-size:100%;position:absolute}:host{--luzmo-color-slider-gradient-fallback:red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%;touch-action:none}:host([vertical]) .handle{inset-block-start:unset;inset-block-end:0}:host([vertical]) .slider{appearance:slider-vertical}:host(:focus){outline:none}.gradient{overflow:hidden}::slotted(*){width:100%;height:100%}@media (forced-colors:active){:host{--highcontrast-color-slider-border-color:CanvasText;--highcontrast-color-slider-border-color-disabled:GrayText;--highcontrast-color-slider-background-color-disabled:Canvas;forced-color-adjust:none}}:host{--luzmo-color-handle-hitarea-border-radius:var(--luzmo-color-slider-handle-hitarea-border-radius,0px);min-inline-size:var(--luzmo-color-slider-minimum-length,80px);inline-size:var(--luzmo-color-slider-length,192px);block-size:var(--luzmo-color-slider-control-track-width,24px);-webkit-user-select:none;user-select:none;cursor:default;display:block;position:relative}:host([focused]){z-index:2}:host([disabled]){pointer-events:none}:host([disabled]) .gradient{display:none}:host([vertical]){min-block-size:var(--luzmo-color-slider-vertical-minimum-height,var(--luzmo-color-slider-minimum-length,80px));block-size:var(--luzmo-color-slider-vertical-height,var(--luzmo-color-slider-length,192px));min-inline-size:0;inline-size:var(--luzmo-color-slider-vertical-control-track-width,var(--luzmo-color-slider-control-track-height,24px));display:inline-block}:host([vertical]) .handle{inset-inline-start:50%}.handle{inset-block-start:50%;inset-inline-start:0}.checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color,var(--luzmo-color-slider-border-color,var(--luzmo-border-color)))}.checkerboard:before{content:\"\";z-index:1;box-shadow:inset 0 0 0 var(--luzmo-color-slider-border-width,var(--luzmo-border-width)) var(--luzmo-color-slider-border-color-local);border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));position:absolute;inset:0}:host([disabled]) .checkerboard{--luzmo-color-slider-border-color-local:var(--highcontrast-color-slider-border-color-disabled,var(--luzmo-color-slider-border-color-disabled,var(--luzmo-dimmed-color)));background:var(--highcontrast-color-slider-background-color-disabled,var(--luzmo-color-slider-background-color-disabled,var(--luzmo-dimmed-color)))}.checkerboard,.gradient{border-radius:var(--luzmo-color-slider-border-rounding,var(--luzmo-border-radius-s));block-size:100%;inline-size:100%}:host([dir=rtl]) .gradient{transform:scaleX(-1)}.gradient:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){transform:scaleX(-1)}.slider{opacity:0;z-index:0;pointer-events:none;block-size:100%;inline-size:100%;margin:0;position:absolute;inset-block-start:0;inset-inline-start:0}", _ = class extends t {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.focused = !1, this.label = "hue", this.vertical = !1, this.languageResolver = new n(this), this.colorController = new h(this, {
+			applyColorToState: () => {
+				if (this.mode === "opacity") {
+					let e = new u(this.colorController.color);
+					this.sliderHandlePosition = 100 * e.getAlpha();
+				} else this.sliderHandlePosition = 100 * (this.colorController.hue / 360);
+			},
+			extractColorFromState: (e) => this.mode === "opacity" ? {
+				...e.getColor("hsl"),
+				a: this.value
+			} : {
+				...e.getColor("hsl"),
+				h: this.value
+			},
+			maintains: "saturation"
+		}), this.sliderHandlePosition = 0, this.step = 1, this.isLTR = !0, this._altered = 0, this._pointerDown = !1;
+	}
+	static get styles() {
+		return [a(g)];
+	}
+	get value() {
+		return this.mode === "opacity" ? this.colorController.opacity : this.colorController.hue;
+	}
+	set value(e) {
+		this.mode === "opacity" ? this.colorController.opacity = e : this.colorController.hue = e;
+	}
+	get color() {
+		return this.colorController.color;
+	}
+	set color(e) {
+		this.colorController.color = e;
+	}
+	get altered() {
+		return this._altered;
+	}
+	set altered(e) {
+		this._altered = e, this.step = Math.max(1, this.altered * 10);
+	}
+	get focusElement() {
+		return this.input;
+	}
+	handleKeydown(e) {
+		let { key: t } = e;
+		this.focused = !0, this.altered = [
+			e.shiftKey,
+			e.ctrlKey,
+			e.altKey
+		].filter((e) => !!e).length;
+		let n = 0;
+		switch (t) {
+			case "ArrowUp":
+				n = this.step;
+				break;
+			case "ArrowDown":
+				n = -this.step;
+				break;
+			case "ArrowLeft":
+				n = this.step * (this.isLTR ? -1 : 1);
+				break;
+			case "ArrowRight":
+				n = this.step * (this.isLTR ? 1 : -1);
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		let r = 100 / (this.mode === "opacity" ? 100 : 360);
+		this.sliderHandlePosition = Math.min(100, Math.max(0, this.sliderHandlePosition + n * r)), this.value = this.mode === "opacity" ? Math.min(1, Math.max(0, this.value + n / 100)) : Math.min(360, Math.max(0, this.value + n)), this.colorController.applyColorFromState(), n !== 0 && (this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	handleInput(e) {
+		let { valueAsNumber: t } = e.target;
+		this.value = t, this.sliderHandlePosition = 100 * (this.mode === "opacity" ? this.value : this.value / 360), this.colorController.applyColorFromState();
+	}
+	handleChange(e) {
+		this.handleInput(e), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	focus(e = {}) {
+		super.focus(e), this.forwardFocus();
+	}
+	forwardFocus() {
+		this.input.focus();
+	}
+	handleFocus() {
+		this.focused = !0;
+	}
+	handleBlur() {
+		this._pointerDown || (this.altered = 0, this.focused = !1);
+	}
+	handlePointerdown(e) {
+		if (e.button !== 0) {
+			e.preventDefault();
+			return;
+		}
+		this._pointerDown = !0, this.colorController.savePreviousColor(), this.boundingClientRect = this.getBoundingClientRect(), e.target.setPointerCapture(e.pointerId), e.pointerType === "mouse" && (this.focused = !0);
+	}
+	handlePointermove(e) {
+		this.sliderHandlePosition = this.calculateHandlePosition(e), this.value = (this.mode === "opacity" ? 1 : 360) * (this.sliderHandlePosition / 100), this.colorController.applyColorFromState(), this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		}));
+	}
+	handlePointerup(e) {
+		this._pointerDown = !1, e.target.releasePointerCapture(e.pointerId), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		})) || this.colorController.restorePreviousColor(), this.focus(), e.pointerType === "mouse" && (this.focused = !1);
+	}
+	calculateHandlePosition(e) {
+		/* c8 ignore next 3 */
+		if (!this.boundingClientRect) return this.sliderHandlePosition;
+		let t = this.boundingClientRect, n = this.vertical ? t.top : t.left, r = this.vertical ? e.clientY : e.clientX, i = this.vertical ? t.height : t.width, a = Math.max(0, Math.min(1, (r - n) / i));
+		return this.vertical || !this.isLTR ? 100 - 100 * a : 100 * a;
+	}
+	handleGradientPointerdown(e) {
+		e.button === 0 && (e.stopPropagation(), e.preventDefault(), this.handle.dispatchEvent(new PointerEvent("pointerdown", e)), this.handlePointermove(e));
+	}
+	get handlePositionStyles() {
+		return `${this.vertical ? "inset-block-end" : "inset-inline-start"}: ${this.sliderHandlePosition}%`;
+	}
+	get getColorSliderStyle() {
+		let e = this.vertical ? "top" : "right";
+		return this.mode === "opacity" ? { background: `linear-gradient(to ${e}, transparent, ${new u(this.colorController.color).setAlpha(1).toRgbString()})` } : { background: `linear-gradient(to ${e}, var(--luzmo-color-slider-gradient, var(--luzmo-color-slider-gradient-fallback)))` };
+	}
+	render() {
+		return i`
+      <div
+        class="opacity-checkerboard checkerboard"
+        role="presentation"
+        @pointerdown=${this.handleGradientPointerdown}
+      >
+        <div
+          class="gradient"
+          role="presentation"
+          style=${l(this.getColorSliderStyle)}
+        >
+          <slot name="gradient"></slot>
+        </div>
+      </div>
+      <luzmo-color-handle
+        tabindex=${c(this.focused ? void 0 : "0")}
+        @focus=${this.forwardFocus}
+        ?focused=${this.focused}
+        class="handle"
+        color=${this.mode === "opacity" ? this.color : "hsl(" + this.value + ", 100%, 50%)"}
+        ?disabled=${this.disabled}
+        style=${this.handlePositionStyles}
+        ${r({
+			start: ["pointerdown", this.handlePointerdown],
+			streamInside: ["pointermove", this.handlePointermove],
+			end: [[
+				"pointerup",
+				"pointercancel",
+				"pointerleave"
+			], this.handlePointerup]
+		})}
+      ></luzmo-color-handle>
+      <input
+        type="range"
+        class="slider"
+        min="0"
+        max=${this.mode === "opacity" ? "100" : "360"}
+        aria-orientation=${c(this.vertical ? "vertical" : void 0)}
+        orient=${c(this.vertical ? "vertical" : void 0)}
+        step=${this.step}
+        aria-label=${this.label}
+        .value=${String(this.mode === "opacity" ? this.value * 100 : this.value)}
+        aria-valuetext=${`${new Intl.NumberFormat(this.languageResolver.language, {
+			maximumFractionDigits: 0,
+			minimumIntegerDigits: 1,
+			style: "unit",
+			unit: this.mode === "opacity" ? "percent" : "degree",
+			unitDisplay: "narrow"
+		}).format(this.mode === "opacity" ? this.value * 100 : this.value)}`}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @keydown=${this.handleKeydown}
+      />
+    `;
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this.boundingClientRect = this.getBoundingClientRect(), this.addEventListener("focus", this.handleFocus), this.addEventListener("blur", this.handleBlur);
+	}
+	updated(e) {
+		e.has("mode") && (this.handle.style.insetInlineStart = "", this.handle.style.insetBlockEnd = "", this.mode === "opacity" && (this.colorController.color = new u(this.colorController.color).toRgbString(), this.handle.style.insetInlineStart = 100 * this.colorController.opacity + "%"));
+	}
+};
+//#endregion
+//#region src/components/color-slider/index.ts
+e([o({
+	type: String,
+	reflect: !0
+})], _.prototype, "dir", void 0), e([o({
+	type: String,
+	reflect: !0
+})], _.prototype, "mode", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "focused", void 0), e([s(".handle")], _.prototype, "handle", void 0), e([o({ type: String })], _.prototype, "label", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "vertical", void 0), e([o({ type: Number })], _.prototype, "value", null), e([o({
+	type: Number,
+	reflect: !0
+})], _.prototype, "sliderHandlePosition", void 0), e([o({ type: String })], _.prototype, "color", null), e([o({ type: Number })], _.prototype, "step", void 0), e([o({
+	type: Boolean,
+	attribute: "is-ltr"
+})], _.prototype, "isLTR", void 0), e([s("input")], _.prototype, "input", void 0), customElements.get("luzmo-color-slider") || customElements.define("luzmo-color-slider", _);
+//#endregion
+export { _ as t };

package/components/{condition-attribute-with-id-Dv4lSRbe.js → condition-attribute-with-id-DauPaLSS.cjs}

@@ -15,17 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-function c(t, s, r) {
-  const e = t.getAttribute(s);
-  let i = e ? e.split(/\s+/) : [];
-  i = i.filter((n) => !r.includes(n)), i.length > 0 ? t.setAttribute(s, i.join(" ")) : t.removeAttribute(s);
-}
-function u(t, s, r) {
-  const e = Array.isArray(r) ? r : [r], i = t.getAttribute(s), n = i ? i.split(/\s+/) : [];
-  return e.every((o) => n.includes(o)) ? () => {
-  } : (n.push(...e), t.setAttribute(s, n.join(" ")), () => c(t, s, e));
-}
-export {
-  c as a,
-  u as c
-};
+function e(e,t,n){let r=e.getAttribute(t),i=r?r.split(/\s+/):[];i=i.filter(e=>!n.includes(e)),i.length>0?e.setAttribute(t,i.join(` `)):e.removeAttribute(t)}function t(t,n,r){let i=Array.isArray(r)?r:[r],a=t.getAttribute(n),o=a?a.split(/\s+/):[];return i.every(e=>o.includes(e))?()=>{}:(o.push(...i),t.setAttribute(n,o.join(` `)),()=>e(t,n,i))}Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return t}});

package/components/{query-assigned-nodes-C76XVPWY.js → condition-attribute-with-id-Duo51HZ7.js}

@@ -15,22 +15,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { e as c } from "./base-D76d76ww.js";
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function m(t) {
-  return (n, s) => {
-    const { slot: o } = t ?? {}, u = "slot" + (o ? `[name=${o}]` : ":not([name])");
-    return c(n, s, { get() {
-      var r;
-      const e = (r = this.renderRoot) == null ? void 0 : r.querySelector(u);
-      return (e == null ? void 0 : e.assignedNodes(t)) ?? [];
-    } });
-  };
+//#region src/utils/condition-attribute-with-id.ts
+function e(e, t, n) {
+	let r = e.getAttribute(t), i = r ? r.split(/\s+/) : [];
+	i = i.filter((e) => !n.includes(e)), i.length > 0 ? e.setAttribute(t, i.join(" ")) : e.removeAttribute(t);
 }
-export {
-  m as n
-};
+function t(t, n, r) {
+	let i = Array.isArray(r) ? r : [r], a = t.getAttribute(n), o = a ? a.split(/\s+/) : [];
+	return i.every((e) => o.includes(e)) ? () => {} : (o.push(...i), t.setAttribute(n, o.join(" ")), () => e(t, n, i));
+}
+//#endregion
+export { e as n, t };

package/components/date-range-picker/date-range-picker.d.ts

@@ -0,0 +1,184 @@
+import { CSSResultArray, nothing, PropertyValues, TemplateResult } from 'lit';
+import { Focusable } from '../../utils/focusable';
+import '../calendar';
+import '../icon';
+import '../overlay';
+import '../picker-button';
+import '../popover';
+import { EditableSegment } from '../date-time-picker/shared/segments/editable-segment';
+import { LiteralSegment } from '../date-time-picker/shared/segments/literal-segment';
+import { Precision } from '../date-time-picker/shared/types';
+import { Placement } from '../overlay/overlay-types';
+import type { DateRangePickerLabels, DefinedRange } from './types';
+declare const LuzmoDateRangePicker_base: typeof Focusable & {
+    new (...args: any[]): import("../..").SizedElementInterface;
+    prototype: import("../..").SizedElementInterface;
+} & {
+    new (...args: any[]): import("../text-field/manage-help-text").HelpTextElementInterface;
+    prototype: import("../text-field/manage-help-text").HelpTextElementInterface;
+};
+/**
+ * @element luzmo-date-range-picker
+ *
+ * @event change - Announces when a new date range is committed by the user
+ * @event input - Announces when the user's input changes the component's segments
+ *
+ * @slot calendar-icon - The icon used in the calendar button
+ * @slot help-text - Default or non-negative help text to associate to your form element
+ * @slot negative-help-text - Negative help text to associate to your form element when `invalid`
+ */
+export declare class LuzmoDateRangePicker extends LuzmoDateRangePicker_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The start date of the range (ISO date string, e.g. '2024-01-15')
+     */
+    startDate?: string;
+    /**
+     * The end date of the range (ISO date string, e.g. '2024-01-20')
+     */
+    endDate?: string;
+    /**
+     * The minimum valid date a user can select
+     */
+    min?: string;
+    /**
+     * The maximum valid date a user can select
+     */
+    max?: string;
+    /**
+     * The date format to use for display. Can be 'mmdd', 'ddmm', or undefined (uses locale default).
+     */
+    dateFormat?: 'mmdd' | 'ddmm';
+    /**
+     * The separator to use between date segments (month, day, and year).
+     */
+    dateSeparator?: string;
+    /**
+     * The granularity used to display the segments. 'day' shows only date,
+     * while 'hour', 'minute', 'second', or 'millisecond' add time segments.
+     */
+    precision: Precision;
+    /**
+     * Number of side-by-side calendars in the popover (1 or 2)
+     */
+    calendars: 1 | 2;
+    /**
+     * Whether to show the predefined date ranges panel in the popover.
+     */
+    showDefinedRanges: boolean;
+    /**
+     * Predefined date ranges displayed as quick-select options.
+     * Defaults use English labels. For other locales, provide your own
+     * `DefinedRange[]` with translated labels.
+     */
+    definedRanges: DefinedRange[];
+    /**
+     * Whether the `value` held by the form control is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether a user can interact with the value of the form control
+     */
+    readonly: boolean;
+    /**
+     * Whether to display the form control with no visible background
+     */
+    quiet: boolean;
+    /**
+     * Popover placement
+     */
+    placement: Placement;
+    /**
+     * The IANA time zone identifier to use for interpreting dates (e.g. 'America/New_York').
+     * If not specified, the user's local time zone is used.
+     */
+    timeZone?: string;
+    /**
+     * BCP 47 locale string
+     */
+    language: string;
+    /**
+     * Labels read by screen readers.
+     */
+    labels: DateRangePickerLabels;
+    focused: boolean;
+    /** @internal */
+    private _startDate?;
+    /** @internal */
+    private _endDate?;
+    /** @internal */
+    private startSegments;
+    /** @internal */
+    private endSegments;
+    /** @internal */
+    private isCalendarOpen;
+    /** @internal – displayed month of left calendar (ISO date string of 1st of month) */
+    private _leftMonth?;
+    /** @internal – displayed month of right calendar (ISO date string of 1st of month) */
+    private _rightMonth?;
+    /** @internal */
+    firstEditableSegment: HTMLDivElement;
+    /** @internal */
+    private rangeWrapper;
+    /** @internal */
+    get _language(): string;
+    /** @internal */
+    private _timeZone;
+    /** @internal – skip month sync when dates change from calendar interaction */
+    private _skipMonthSync;
+    /** @internal */
+    private dateFormatter;
+    /** @internal */
+    private ariaDateFormatter;
+    /** @internal */
+    private numberParser;
+    /** @internal */
+    get focusElement(): HTMLElement;
+    clear(): void;
+    constructor();
+    private handleFocusIn;
+    private handleFocusOut;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private initCalendarMonths;
+    private syncCalendarMonths;
+    private parseDateValue;
+    private parseAllDates;
+    private updateAriaLabel;
+    render(): TemplateResult;
+    private renderStateIcons;
+    renderPicker(): TemplateResult | typeof nothing;
+    private renderPopoverContent;
+    private renderSingleCalendar;
+    private renderDualCalendar;
+    private renderDefinedRanges;
+    private isDefinedRangeSelected;
+    private selectDefinedRange;
+    private handleRangeSelect;
+    private handleHoverDateLeft;
+    private handleHoverDateRight;
+    renderStartInput(): TemplateResult;
+    renderEndInput(): TemplateResult;
+    private renderSegmentsFor;
+    renderLiteralSegment(segment: LiteralSegment): TemplateResult;
+    renderEditableSegment(segment: EditableSegment): TemplateResult;
+    private getSegments;
+    private setSegmentsForField;
+    private getModifierParams;
+    private handleKeydown;
+    private handleInput;
+    private focusSegment;
+    private updateValueFromSegments;
+    private commitValue;
+    private handleLeftMonthChange;
+    private handleRightMonthChange;
+    private dispatchChange;
+    private dispatchInputEvent;
+    private setStartSegments;
+    private setEndSegments;
+    private createSegmentsFromDate;
+    private setNumberParser;
+    private setDateFormatter;
+    private setAriaDateFormatter;
+    private getTimeOptions;
+}
+export {};

package/components/{if-defined-C9YGdo33.cjs → date-range-picker/index.cjs}

@@ -15,8 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";const e=require("./base-CBCg3yyw.cjs");/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const o=s=>s??e.E;exports.o=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../date-range-picker-CgitOe0i.cjs`);exports.LuzmoDateRangePicker=e.t;

package/components/date-range-picker/index.d.ts

@@ -0,0 +1,8 @@
+import { LuzmoDateRangePicker } from './date-range-picker';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-date-range-picker': LuzmoDateRangePicker;
+    }
+}
+export { LuzmoDateRangePicker } from './date-range-picker';
+export type { DateRangePickerLabels, DateRangeValue, DefinedRange } from './types';