@getufy/flint-ui 0.1.0

package/dist/_shared/flint-container-CYSq758Y.js

@@ -0,0 +1,42 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+import { classMap as o } from "lit/directives/class-map.js";
+//#region src/container/flint-container.css?inline
+var s = ":host{display:block}.container{box-sizing:border-box;width:100%;padding-left:var(--flint-container-padding,16px);padding-right:var(--flint-container-padding,16px);margin-left:auto;margin-right:auto}@media (min-width:600px){.container{padding-left:var(--flint-container-padding-sm,24px);padding-right:var(--flint-container-padding-sm,24px)}}.disable-gutters{padding-left:0;padding-right:0}.max-width-xs{max-width:var(--flint-container-xs,444px)}.max-width-sm{max-width:var(--flint-container-sm,600px)}.max-width-md{max-width:var(--flint-container-md,900px)}.max-width-lg{max-width:var(--flint-container-lg,1200px)}.max-width-xl{max-width:var(--flint-container-xl,1536px)}.fixed{max-width:var(--flint-container-xs,444px)}@media (min-width:600px){.fixed{max-width:var(--flint-container-sm,600px)}}@media (min-width:900px){.fixed{max-width:var(--flint-container-md,900px)}}@media (min-width:1200px){.fixed{max-width:var(--flint-container-lg,1200px)}}@media (min-width:1536px){.fixed{max-width:var(--flint-container-xl,1536px)}}@media (min-width:600px){.fixed.max-width-xs{max-width:var(--flint-container-xs,444px)}}@media (min-width:900px){.fixed.max-width-sm{max-width:var(--flint-container-sm,600px)}}@media (min-width:1200px){.fixed.max-width-md{max-width:var(--flint-container-md,900px)}}@media (min-width:1536px){.fixed.max-width-lg{max-width:var(--flint-container-lg,1200px)}}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.maxWidth = "lg", this.disableGutters = !1, this.fixed = !1;
+	}
+	static {
+		this.styles = r(s);
+	}
+	render() {
+		return n`
+      <div class=${o({
+			container: !0,
+			[`max-width-${this.maxWidth}`]: this.maxWidth !== !1,
+			"disable-gutters": this.disableGutters,
+			fixed: this.fixed
+		})}>
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([a({
+	attribute: "max-width",
+	reflect: !0,
+	converter: {
+		fromAttribute: (e) => e === null || e === "false" ? !1 : e,
+		toAttribute: (e) => e === !1 ? null : e
+	}
+})], c.prototype, "maxWidth", void 0), e([a({
+	type: Boolean,
+	attribute: "disable-gutters",
+	reflect: !0
+})], c.prototype, "disableGutters", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "fixed", void 0), c = e([i("flint-container")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-copy-button-Y4yVbPxo.js

@@ -0,0 +1,142 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, svg as i, unsafeCSS as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region src/copy-button/flint-copy-button.css?inline
+var l = ":host{--flint-copy-button-size:32px;--flint-copy-button-icon-size:16px;font-family:var(--flint-font-family);display:inline-block}:host([disabled]){cursor:not-allowed}.copy-button{width:var(--flint-copy-button-size);height:var(--flint-copy-button-size);border:1px solid var(--flint-border-color);border-radius:var(--flint-border-radius-md);background:var(--flint-surface-1);color:var(--flint-text-color-muted);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:color .15s,background-color .15s,border-color .15s;display:inline-flex;position:relative}.copy-button:hover:not(:disabled){background:var(--flint-hover-color);color:var(--flint-text-color)}.copy-button:active:not(:disabled){background:var(--flint-active-color)}.copy-button:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:2px}.copy-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.icon{width:var(--flint-copy-button-icon-size);height:var(--flint-copy-button-icon-size);justify-content:center;align-items:center;display:flex}.icon svg{width:100%;height:100%}.icon--success{color:var(--flint-copy-button-success-color,var(--flint-success-color))}.icon--error{color:var(--flint-copy-button-error-color,var(--flint-error-color))}.tooltip{z-index:10;border-radius:var(--flint-border-radius-sm);background:var(--flint-tooltip-bg);color:var(--flint-tooltip-text-color);white-space:nowrap;pointer-events:none;opacity:0;padding:4px 8px;font-size:.75rem;line-height:1;transition:opacity .15s;position:absolute}.tooltip--visible{opacity:1}.tooltip--top{bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.tooltip--bottom{top:calc(100% + 6px);left:50%;transform:translate(-50%)}.tooltip--left{top:50%;right:calc(100% + 6px);transform:translateY(-50%)}.tooltip--right{top:50%;left:calc(100% + 6px);transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", u = 0, d = i`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"></rect><path d="M10.5 5.5V3a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 3v6A1.5 1.5 0 0 0 3 10.5h2.5"></path></svg>`, f = i`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3.5 8.5 6.5 11.5 12.5 4.5"></polyline></svg>`, p = i`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="4" x2="12" y2="12"></line><line x1="12" y1="4" x2="4" y2="12"></line></svg>`, m = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.from = "", this.disabled = !1, this.copyLabel = "Copy", this.successLabel = "Copied!", this.errorLabel = "Error", this.feedbackDuration = 1e3, this.tooltipPlacement = "top", this._state = "idle", this._feedbackTimer = null, this._showTooltip = !1, this._tooltipId = `flint-copy-tooltip-${u++}`;
+	}
+	static {
+		this.styles = a(l);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._feedbackTimer !== null && (clearTimeout(this._feedbackTimer), this._feedbackTimer = null);
+	}
+	_resolveFromValue() {
+		let e = this.from.match(/^(.+)\[(.+)\]$/);
+		if (e) {
+			let t = document.getElementById(e[1]);
+			return t ? t.getAttribute(e[2]) : null;
+		}
+		let t = this.from.match(/^(.+)\.(.+)$/);
+		if (t) {
+			let e = document.getElementById(t[1]);
+			if (!e) return null;
+			let n = e[t[2]];
+			return n == null ? null : String(n);
+		}
+		let n = document.getElementById(this.from);
+		return n ? n.textContent : null;
+	}
+	_getTextToCopy() {
+		return this.from ? this._resolveFromValue() ?? "" : this.value;
+	}
+	async _handleClick() {
+		if (this.disabled) return;
+		let e = this._getTextToCopy();
+		if (!e) {
+			this._showFeedback("error"), this.dispatchEvent(new CustomEvent("flint-copy-error", {
+				detail: { reason: "empty" },
+				bubbles: !0,
+				composed: !0
+			}));
+			return;
+		}
+		try {
+			await navigator.clipboard.writeText(e), this._showFeedback("success"), this.dispatchEvent(new CustomEvent("flint-copy", {
+				detail: { value: e },
+				bubbles: !0,
+				composed: !0
+			}));
+		} catch {
+			this._showFeedback("error"), this.dispatchEvent(new CustomEvent("flint-copy-error", {
+				detail: { reason: "clipboard" },
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+	}
+	_showFeedback(e) {
+		this._feedbackTimer !== null && clearTimeout(this._feedbackTimer), this._state = e, this._showTooltip = !0, this.requestUpdate(), this._feedbackTimer = setTimeout(() => {
+			this._state = "idle", this._showTooltip = !1, this._feedbackTimer = null, this.requestUpdate();
+		}, this.feedbackDuration);
+	}
+	_handleMouseEnter() {
+		this._state === "idle" && (this._showTooltip = !0, this.requestUpdate());
+	}
+	_handleMouseLeave() {
+		this._state === "idle" && (this._showTooltip = !1, this.requestUpdate());
+	}
+	_handleFocus() {
+		this._state === "idle" && (this._showTooltip = !0, this.requestUpdate());
+	}
+	_handleBlur() {
+		this._state === "idle" && (this._showTooltip = !1, this.requestUpdate());
+	}
+	_renderIcon() {
+		switch (this._state) {
+			case "success": return n`<span class="icon icon--success" part="success-icon"><slot name="success-icon">${f}</slot></span>`;
+			case "error": return n`<span class="icon icon--error" part="error-icon"><slot name="error-icon">${p}</slot></span>`;
+			default: return n`<span class="icon" part="copy-icon"><slot name="copy-icon">${d}</slot></span>`;
+		}
+	}
+	_getTooltipLabel() {
+		switch (this._state) {
+			case "success": return this.successLabel;
+			case "error": return this.errorLabel;
+			default: return this.copyLabel;
+		}
+	}
+	render() {
+		let e = this._getTooltipLabel();
+		return n`
+            <button
+                class="copy-button"
+                part="button"
+                aria-label=${e || r}
+                aria-describedby=${this._showTooltip && e ? this._tooltipId : r}
+                ?disabled=${this.disabled}
+                @click=${this._handleClick}
+                @mouseenter=${this._handleMouseEnter}
+                @mouseleave=${this._handleMouseLeave}
+                @focus=${this._handleFocus}
+                @blur=${this._handleBlur}
+            >
+                ${this._renderIcon()}
+                ${e ? n`
+                    <span
+                        id=${this._tooltipId}
+                        class=${c({
+			tooltip: !0,
+			"tooltip--visible": this._showTooltip,
+			[`tooltip--${this.tooltipPlacement}`]: !0
+		})}
+                        role="tooltip"
+                    >${e}</span>
+                ` : r}
+            </button>
+        `;
+	}
+};
+e([s({ type: String })], m.prototype, "value", void 0), e([s({ type: String })], m.prototype, "from", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "disabled", void 0), e([s({
+	type: String,
+	attribute: "copy-label"
+})], m.prototype, "copyLabel", void 0), e([s({
+	type: String,
+	attribute: "success-label"
+})], m.prototype, "successLabel", void 0), e([s({
+	type: String,
+	attribute: "error-label"
+})], m.prototype, "errorLabel", void 0), e([s({
+	type: Number,
+	attribute: "feedback-duration"
+})], m.prototype, "feedbackDuration", void 0), e([s({
+	type: String,
+	attribute: "tooltip-placement"
+})], m.prototype, "tooltipPlacement", void 0), m = e([o("flint-copy-button")], m);
+//#endregion
+export { m as t };

package/dist/_shared/flint-date-field-CYSc9ezt.js

@@ -0,0 +1,288 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, nothing as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region src/date-field/flint-date-field.css?inline
+var l = ":host{font-family:var(--flint-font-family);display:inline-block}.field-label{letter-spacing:.01em;color:var(--flint-text-color-muted);margin-bottom:5px;font-size:.75rem;font-weight:500;transition:color .15s;display:block}:host([error]) .field-label{color:var(--flint-error-color)}.field-label.focused{color:var(--flint-primary-color)}:host([error]) .field-label.focused{color:var(--flint-error-color)}.field-container{background:var(--flint-input-bg);border:1.5px solid var(--flint-border-color);border-radius:var(--flint-border-radius-md);cursor:text;box-sizing:border-box;align-items:center;gap:4px;min-width:200px;height:44px;padding:0 10px;transition:border-color .15s,box-shadow .15s;display:inline-flex;position:relative}.field-container.focused{border-color:var(--flint-primary-color);box-shadow:0 0 0 3px var(--flint-primary-focus-ring)}:host([error]) .field-container{border-color:var(--flint-error-color)}:host([error]) .field-container.focused{box-shadow:0 0 0 3px var(--flint-error-focus-ring)}:host([disabled]) .field-container{background:var(--flint-input-disabled-bg);border-color:var(--flint-border-color);cursor:not-allowed}:host([readonly]) .field-container{cursor:default}.segments{outline:none;flex:1;align-items:center;gap:1px;min-height:100%;display:flex}.segment{font-variant-numeric:tabular-nums;color:var(--flint-text-color);cursor:text;-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;min-width:2ch;padding:2px 4px;font-size:.9375rem;line-height:1;transition:background .1s;display:inline-flex}.segment.placeholder{color:var(--flint-input-placeholder-color)}.segment.active{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);border-radius:3px}:host([disabled]) .segment{color:var(--flint-text-color-muted)}:host([disabled]) .segment.active{background:var(--flint-border-color);color:var(--flint-text-color-muted)}.segment-year{min-width:4ch}.separator{color:var(--flint-text-color-muted);pointer-events:none;font-size:.9375rem;line-height:1}.field-actions{align-items:center;gap:2px;margin-left:auto;display:flex}.icon-btn{cursor:pointer;width:24px;height:24px;color:var(--flint-text-color-muted);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.875rem;transition:background .12s,color .12s;display:flex}.icon-btn:hover{background:var(--flint-hover-color);color:var(--flint-text-color)}:host([disabled]) .icon-btn{pointer-events:none;opacity:0}.helper{color:var(--flint-text-color-muted);margin-top:5px;font-size:.75rem;display:block}:host([error]) .helper{color:var(--flint-error-color)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}";
+//#endregion
+//#region src/date-field/flint-date-field.ts
+function u(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function d(e, t) {
+	return e < 1 || e > 12 ? 31 : new Date(t || 2e3, e, 0).getDate();
+}
+function f(e) {
+	if (!e) return {
+		m: null,
+		d: null,
+		y: null
+	};
+	let t = e.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+	return t ? {
+		y: parseInt(t[1]),
+		m: parseInt(t[2]),
+		d: parseInt(t[3])
+	} : {
+		m: null,
+		d: null,
+		y: null
+	};
+}
+function p(e, t, n) {
+	return e === null || t === null || n === null ? "" : `${String(n).padStart(4, "0")}-${String(e).padStart(2, "0")}-${String(t).padStart(2, "0")}`;
+}
+var m = [
+	"month",
+	"day",
+	"year"
+], h = class extends t {
+	constructor(...e) {
+		super(...e), this.value = "", this.label = "", this.name = "", this.min = "", this.max = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._internals = this.attachInternals(), this._month = null, this._day = null, this._year = null, this._active = null, this._focused = !1, this._buf = "";
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	static {
+		this.styles = i(l);
+	}
+	willUpdate(e) {
+		if (e.has("value")) {
+			let { m: e, d: t, y: n } = f(this.value);
+			this._month = e, this._day = t, this._year = n;
+		}
+	}
+	updated() {
+		this._syncFormValue();
+	}
+	clear() {
+		this._month = null, this._day = null, this._year = null, this._buf = "", this._internals.setFormValue?.(null), this.dispatchEvent(new CustomEvent("flint-date-field-clear", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_syncFormValue() {
+		let e = p(this._month, this._day, this._year) || null;
+		this._internals.setFormValue?.(e);
+	}
+	_setActive(e) {
+		this.disabled || this.readonly || (this._commitPartialBuffer(), this._active = e, this._buf = "");
+	}
+	_commitPartialBuffer() {
+		if (!this._buf || !this._active) return;
+		let e = parseInt(this._buf);
+		if (!isNaN(e)) {
+			if (this._active === "month" && e >= 1 && e <= 12) this._month = e;
+			else if (this._active === "day") {
+				let t = d(this._month ?? 1, this._year ?? 2e3);
+				e >= 1 && e <= t && (this._day = e);
+			}
+		}
+	}
+	_nextSegment() {
+		if (!this._active) {
+			this._setActive("month");
+			return;
+		}
+		let e = m.indexOf(this._active);
+		e < m.length - 1 && this._setActive(m[e + 1]);
+	}
+	_prevSegment() {
+		if (!this._active) return;
+		let e = m.indexOf(this._active);
+		e > 0 && this._setActive(m[e - 1]);
+	}
+	_canGoNext() {
+		return this._active ? m.indexOf(this._active) < m.length - 1 : !0;
+	}
+	_canGoPrev() {
+		return this._active ? m.indexOf(this._active) > 0 : !1;
+	}
+	_handleDigit(e) {
+		this._active || this._setActive("month");
+		let t = this._active, n = this._buf + String(e);
+		if (t === "month") if (n.length === 1) e >= 2 && e <= 9 ? (this._month = e, this._buf = "", this._nextSegment()) : this._buf = n;
+		else {
+			let t = parseInt(n);
+			t >= 1 && t <= 12 ? (this._month = t, this._buf = "", this._nextSegment()) : (this._buf = String(e), e >= 2 && e <= 9 && (this._month = e, this._buf = "", this._nextSegment()));
+		}
+		else if (t === "day") {
+			let t = d(this._month ?? 1, this._year ?? 2e3);
+			if (n.length === 1) e >= 4 && e <= 9 ? (this._day = e, this._buf = "", this._nextSegment()) : this._buf = n;
+			else {
+				let r = parseInt(n);
+				r >= 1 && r <= t ? (this._day = r, this._buf = "", this._nextSegment()) : (this._buf = String(e), e >= 4 && e <= 9 && (this._day = e, this._buf = "", this._nextSegment()));
+			}
+		} else this._buf = n.slice(-4), this._buf.length === 4 && (this._year = parseInt(this._buf), this._buf = "", this._checkAndEmit());
+	}
+	_adjust(e) {
+		let t = this._active;
+		if (t) {
+			if (this._buf = "", t === "month") this._month = u((this._month ?? (e > 0 ? 0 : 13)) + e, 1, 12), this._day !== null && (this._day = u(this._day, 1, d(this._month, this._year ?? 2e3)));
+			else if (t === "day") {
+				let t = d(this._month ?? 1, this._year ?? 2e3);
+				this._day = u((this._day ?? (e > 0 ? 0 : t + 1)) + e, 1, t);
+			} else this._year = u((this._year ?? (/* @__PURE__ */ new Date()).getFullYear()) + e, 1, 9999);
+			this._checkAndEmit();
+		}
+	}
+	_checkAndEmit() {
+		let e = p(this._month, this._day, this._year);
+		e && e !== this.value && (this.value = e, this.dispatchEvent(new CustomEvent("flint-date-field-change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_handleKeyDown(e) {
+		if (!(this.disabled || this.readonly)) {
+			if (e.key >= "0" && e.key <= "9") {
+				e.preventDefault(), e.stopPropagation(), this._active || this._setActive("month"), this._handleDigit(parseInt(e.key));
+				return;
+			}
+			switch (e.key) {
+				case "ArrowLeft":
+					e.preventDefault(), e.stopPropagation(), this._prevSegment();
+					break;
+				case "ArrowRight":
+				case "/":
+					e.preventDefault(), e.stopPropagation(), this._nextSegment();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), e.stopPropagation(), this._active || this._setActive("month"), this._adjust(1);
+					break;
+				case "ArrowDown":
+					e.preventDefault(), e.stopPropagation(), this._active || this._setActive("month"), this._adjust(-1);
+					break;
+				case "Tab":
+					!e.shiftKey && this._canGoNext() ? (e.preventDefault(), e.stopPropagation(), this._nextSegment()) : e.shiftKey && this._canGoPrev() && (e.preventDefault(), e.stopPropagation(), this._prevSegment());
+					break;
+				case "Backspace":
+				case "Delete":
+					e.preventDefault(), e.stopPropagation(), this._buf = "", this._active === "month" && (this._month = null), this._active === "day" && (this._day = null), this._active === "year" && (this._year = null);
+					break;
+				case "Escape":
+					e.preventDefault(), e.stopPropagation(), this.clear();
+					break;
+			}
+		}
+	}
+	_handleFocus() {
+		this._focused = !0, this._active || this._setActive("month");
+	}
+	_handleBlur(e) {
+		this.shadowRoot?.contains(e.relatedTarget) || (this._commitPartialBuffer(), this._focused = !1, this._active = null, this._buf = "");
+	}
+	_handleContainerClick(e) {
+		this.disabled || this.readonly || e.target.classList.contains("segments") && (this._setActive("month"), (this.shadowRoot?.querySelector(".segments"))?.focus());
+	}
+	_segmentText(e) {
+		let t = this._active === e && !this.disabled;
+		return e === "month" ? t && this._buf ? {
+			text: this._buf.padEnd(2, "_"),
+			isPlaceholder: !1
+		} : this._month === null ? {
+			text: "MM",
+			isPlaceholder: !0
+		} : {
+			text: String(this._month).padStart(2, "0"),
+			isPlaceholder: !1
+		} : e === "day" ? t && this._buf ? {
+			text: this._buf.padEnd(2, "_"),
+			isPlaceholder: !1
+		} : this._day === null ? {
+			text: "DD",
+			isPlaceholder: !0
+		} : {
+			text: String(this._day).padStart(2, "0"),
+			isPlaceholder: !1
+		} : t && this._buf ? {
+			text: this._buf.padEnd(4, "_"),
+			isPlaceholder: !1
+		} : this._year === null ? {
+			text: "YYYY",
+			isPlaceholder: !0
+		} : {
+			text: String(this._year).padStart(4, "0"),
+			isPlaceholder: !1
+		};
+	}
+	_hasValue() {
+		return this._month !== null || this._day !== null || this._year !== null;
+	}
+	render() {
+		let e = c({
+			"field-label": !0,
+			focused: this._focused
+		}), t = c({
+			"field-container": !0,
+			focused: this._focused
+		}), i = (e, t = "") => {
+			let { text: r, isPlaceholder: i } = this._segmentText(e);
+			return n`<span
+        class=${c({
+				segment: !0,
+				[e]: !0,
+				active: this._active === e,
+				placeholder: i,
+				[`segment-${e}`]: !0,
+				[t]: !!t
+			})}
+        @click=${(t) => {
+				t.stopPropagation(), this._setActive(e), (this.shadowRoot?.querySelector(".segments"))?.focus();
+			}}
+      >${r}</span>`;
+		};
+		return n`
+      ${this.label ? n`<label class=${e}>${this.label}</label>` : r}
+
+      <div class=${t} @click=${this._handleContainerClick}>
+
+        <div
+          class="segments"
+          role="group"
+          aria-label=${this.label || "Date"}
+          tabindex=${this.disabled ? -1 : 0}
+          @keydown=${this._handleKeyDown}
+          @focus=${this._handleFocus}
+          @blur=${this._handleBlur}
+        >
+          ${i("month")}
+          <span class="separator">/</span>
+          ${i("day")}
+          <span class="separator">/</span>
+          ${i("year", "segment-year")}
+        </div>
+
+        <div class="field-actions">
+          ${this._hasValue() && !this.disabled && !this.readonly ? n`
+            <button class="icon-btn" aria-label="Clear date" tabindex="-1"
+              @click=${(e) => {
+			e.stopPropagation(), this.clear();
+		}}>✕</button>
+          ` : r}
+        </div>
+      </div>
+
+      ${this.helperText ? n`<small class="helper">${this.helperText}</small>` : r}
+    `;
+	}
+};
+e([o({ type: String })], h.prototype, "value", void 0), e([o({ type: String })], h.prototype, "label", void 0), e([o({
+	type: String,
+	reflect: !0
+})], h.prototype, "name", void 0), e([o({ type: String })], h.prototype, "min", void 0), e([o({ type: String })], h.prototype, "max", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "readonly", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "error", void 0), e([o({
+	type: String,
+	attribute: "helper-text"
+})], h.prototype, "helperText", void 0), e([s()], h.prototype, "_month", void 0), e([s()], h.prototype, "_day", void 0), e([s()], h.prototype, "_year", void 0), e([s()], h.prototype, "_active", void 0), e([s()], h.prototype, "_focused", void 0), e([s()], h.prototype, "_buf", void 0), h = e([a("flint-date-field")], h);
+//#endregion
+export { h as t };