@getufy/flint-ui 0.1.0

package/dist/_shared/flint-date-range-picker-DiVjn_ST.js

@@ -0,0 +1,201 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { EMPTY_RANGE as t, defaultShortcuts as n, isoToDisplay as r } from "../date-range-picker/date-range-helpers.js";
+import { LitElement as i, html as a, nothing as o, unsafeCSS as s } from "lit";
+import { customElement as c, property as l, state as u } from "lit/decorators.js";
+//#region src/date-range-picker/flint-date-range-picker.css?inline
+var d = ":host{font-family:var(--flint-font-family);display:inline-block}.field-label{color:var(--flint-text-color-muted);margin-bottom:4px;font-size:.75rem;font-weight:500;display:block}.mobile-field{background:var(--flint-input-bg);border:1.5px solid var(--flint-border-color);border-radius:var(--flint-border-radius-md);color:var(--flint-text-color);cursor:pointer;box-sizing:border-box;align-items:center;gap:8px;min-width:260px;padding:10px 44px 10px 14px;font-size:.9375rem;transition:border-color .15s;display:inline-flex;position:relative}.mobile-field:hover{border-color:var(--flint-primary-color)}:host([disabled]) .mobile-field{background:var(--flint-input-disabled-bg);color:var(--flint-text-color-muted);cursor:not-allowed;border-color:var(--flint-border-color)}.mobile-field-placeholder{color:var(--flint-input-placeholder-color)}.mobile-field-icon{color:var(--flint-text-color-muted);font-size:1rem;position:absolute;right:12px}.popover-anchor{display:inline-block;position:relative}.popover{z-index:1400;background:var(--flint-surface-1);border-radius:var(--flint-border-radius-xl);box-shadow:var(--flint-shadow-lg);transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .15s,visibility .15s;display:flex;position:absolute;top:calc(100% + 6px);left:0;transform:scale(.94)translateY(-4px)}.popover.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)translateY(0)}.shortcuts-panel{border-right:1px solid var(--flint-border-color);background:var(--flint-surface-1);flex-direction:column;gap:2px;min-width:148px;padding:12px 8px;display:flex}.shortcut-btn{text-align:left;cursor:pointer;color:var(--flint-text-color);white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:8px 12px;font-family:inherit;font-size:.8125rem;transition:background .12s,color .12s}.shortcut-btn:hover{background:var(--flint-primary-color-light);color:var(--flint-primary-color)}.shortcut-btn.active{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.popover-body{flex-direction:column;display:flex}.popover-actions{border-top:1px solid var(--flint-border-color);justify-content:flex-end;gap:8px;padding:4px 12px 12px;display:flex}.action-btn{cursor:pointer;border:none;border-radius:6px;padding:6px 14px;font-family:inherit;font-size:.875rem;font-weight:600;transition:background .12s}.action-btn.cancel{color:var(--flint-text-color-muted);background:0 0}.action-btn.cancel:hover{background:var(--flint-hover-color)}.action-btn.ok{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.action-btn.ok:hover{background:var(--flint-primary-color-hover)}.click-away{z-index:1399;display:none;position:fixed;inset:0}.click-away.open{display:block}.static-wrapper{border-radius:var(--flint-border-radius-xl);box-shadow:var(--flint-shadow-sm), 0 0 0 1px var(--flint-border-color);display:inline-block;overflow:hidden}.helper-text{color:var(--flint-text-color-muted);margin-top:4px;font-size:.75rem}:host([error]) .helper-text{color:var(--flint-error-color)}:host([error]) flint-single-input-date-range-field{--flint-border-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}}", f = class extends i {
+	constructor(...e) {
+		super(...e), this.value = [...t], this.label = "Date Range", this.variant = "desktop", this.multiInput = !1, this.shortcuts = !1, this.shortcutItems = [], this.min = "", this.max = "", this.name = "", this.disabled = !1, this.readonly = !1, this.error = !1, this.helperText = "", this._open = !1, this._pendingValue = [...t], this._activeShortcut = "";
+	}
+	static {
+		this.styles = s(d);
+	}
+	get _resolvedVariant() {
+		return this.variant === "auto" ? window.matchMedia("(pointer: coarse)").matches ? "mobile" : "desktop" : this.variant;
+	}
+	get _effectiveShortcuts() {
+		return this.shortcutItems.length ? this.shortcutItems : n();
+	}
+	_openPicker() {
+		this.disabled || this.readonly || this._open || (this._pendingValue = [...this.value], this._open = !0);
+	}
+	_closePicker() {
+		this._open = !1;
+	}
+	_handleCalendarSelect(e) {
+		let t = e.detail.value;
+		this._pendingValue = t, this._activeShortcut = "", this._resolvedVariant === "desktop" && t[0] && t[1] && this._commit(t);
+	}
+	_handleFieldRangeChange(e) {
+		let t = e.detail.value;
+		this._commit(t);
+	}
+	async _handleShortcut(e) {
+		let t = e.getValue();
+		this._pendingValue = t, this._activeShortcut = e.label;
+		let n = this._resolvedVariant;
+		(n === "desktop" || n === "static") && this._commit(t), t[0] && (await this.updateComplete, (this.shadowRoot?.querySelector("flint-date-range-calendar"))?.navigateTo?.(t[0]));
+	}
+	_handleStaticSelect(e) {
+		let t = e.detail.value;
+		this._commit(t);
+	}
+	_commit(e) {
+		let [t, n] = this.value, [r, i] = e;
+		if (r === t && i === n) {
+			this._closePicker();
+			return;
+		}
+		this.value = e, this.dispatchEvent(new CustomEvent("flint-date-range-picker-change", {
+			detail: { value: e },
+			bubbles: !0,
+			composed: !0
+		})), e[0] && e[1] && this._closePicker();
+	}
+	_handleMobileOk() {
+		this._commit(this._pendingValue[0] && this._pendingValue[1] ? this._pendingValue : this.value);
+	}
+	_handleMobileCancel() {
+		this._pendingValue = [...this.value], this._activeShortcut = "", this._closePicker();
+	}
+	_formatRange(e) {
+		let [t, n] = e;
+		return !t && !n ? "" : `${r(t) || "?"} – ${r(n) || "?"}`;
+	}
+	_renderShortcuts() {
+		return this.shortcuts ? a`
+      <div class="shortcuts-panel">
+        ${this._effectiveShortcuts.map((e) => a`
+          <button
+            class="shortcut-btn ${this._activeShortcut === e.label ? "active" : ""}"
+            @click=${() => this._handleShortcut(e)}
+          >${e.label}</button>
+        `)}
+      </div>
+    ` : o;
+	}
+	_renderCalendar(e, t) {
+		return a`
+      <flint-date-range-calendar
+        .value=${e}
+        .min=${this.min}
+        .max=${this.max}
+        ?disabled=${this.disabled}
+        @flint-date-range-picker-select=${t}
+      ></flint-date-range-calendar>
+    `;
+	}
+	_renderField() {
+		return a`
+      ${this.label ? a`<label class="field-label">${this.label}</label>` : o}
+      <flint-single-input-date-range-field
+        .value=${this.value}
+        .min=${this.min}
+        .max=${this.max}
+        .name=${this.name}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?error=${this.error}
+        @flint-date-range-picker-change=${this._handleFieldRangeChange}
+        @focus=${this._openPicker}
+      ></flint-single-input-date-range-field>
+      ${this.helperText ? a`<p class="helper-text">${this.helperText}</p>` : o}
+    `;
+	}
+	_renderMobileField() {
+		let e = this._formatRange(this.value);
+		return a`
+      ${this.label ? a`<label class="field-label">${this.label}</label>` : o}
+      <div class="mobile-field"
+        role="button"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-label="Select date range"
+        aria-haspopup="dialog"
+        aria-expanded=${this._open ? "true" : "false"}
+        @click=${this._openPicker}
+        @keydown=${(e) => (e.key === "Enter" || e.key === " ") && this._openPicker()}
+      >
+        ${e ? a`<span>${e}</span>` : a`<span class="mobile-field-placeholder">Start date – End date</span>`}
+        <span class="mobile-field-icon">📅</span>
+      </div>
+      ${this.helperText ? a`<p class="helper-text">${this.helperText}</p>` : o}
+    `;
+	}
+	_renderDesktop() {
+		let e = this._pendingValue[0] || this._pendingValue[1] ? this._pendingValue : this.value;
+		return a`
+      <div>
+        <div class="popover-anchor">
+          ${this._renderField()}
+          <div class="click-away ${this._open ? "open" : ""}" @click=${this._closePicker}></div>
+          <div class="popover ${this._open ? "open" : ""}" role="dialog" aria-label="Date range picker">
+            ${this._renderShortcuts()}
+            <div class="popover-body">
+              ${this._renderCalendar(e, (e) => this._handleCalendarSelect(e))}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+	_renderMobile() {
+		let e = this._pendingValue[0] || this._pendingValue[1] ? this._pendingValue : this.value;
+		return a`
+      <div>
+        ${this._renderMobileField()}
+        <flint-dialog
+          .open=${this._open}
+          disable-backdrop-close
+          @close=${this._closePicker}
+          style="--flint-dialog-width:640px"
+        >
+          <flint-dialog-title>Select Date Range</flint-dialog-title>
+          <flint-dialog-content style="padding:0 12px 4px;display:flex;">
+            ${this._renderShortcuts()}
+            ${this._renderCalendar(e, (e) => this._handleCalendarSelect(e))}
+          </flint-dialog-content>
+          <flint-dialog-actions>
+            <button class="action-btn cancel" @click=${this._handleMobileCancel}>Cancel</button>
+            <button class="action-btn ok"
+              ?disabled=${!this._pendingValue[0] || !this._pendingValue[1]}
+              @click=${this._handleMobileOk}>OK</button>
+          </flint-dialog-actions>
+        </flint-dialog>
+      </div>
+    `;
+	}
+	_renderStatic() {
+		return a`
+      <div class="static-wrapper">
+        ${this.shortcuts ? a`
+          <div style="display:flex;">
+            ${this._renderShortcuts()}
+            ${this._renderCalendar(this.value, (e) => this._handleStaticSelect(e))}
+          </div>
+        ` : this._renderCalendar(this.value, (e) => this._handleStaticSelect(e))}
+      </div>
+    `;
+	}
+	render() {
+		let e = this._resolvedVariant;
+		return e === "static" ? this._renderStatic() : e === "mobile" ? this._renderMobile() : this._renderDesktop();
+	}
+};
+e([l({ type: Array })], f.prototype, "value", void 0), e([l({ type: String })], f.prototype, "label", void 0), e([l({ type: String })], f.prototype, "variant", void 0), e([l({
+	type: Boolean,
+	attribute: "multi-input"
+})], f.prototype, "multiInput", void 0), e([l({ type: Boolean })], f.prototype, "shortcuts", void 0), e([l({ type: Array })], f.prototype, "shortcutItems", void 0), e([l({ type: String })], f.prototype, "min", void 0), e([l({ type: String })], f.prototype, "max", void 0), e([l({ type: String })], f.prototype, "name", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "disabled", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "readonly", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "error", void 0), e([l({
+	type: String,
+	attribute: "helper-text"
+})], f.prototype, "helperText", void 0), e([u()], f.prototype, "_open", void 0), e([u()], f.prototype, "_pendingValue", void 0), e([u()], f.prototype, "_activeShortcut", void 0), f = e([c("flint-date-range-picker")], f);
+//#endregion
+export { f as t };

package/dist/_shared/flint-dialog-CH1ylFUb.js

@@ -0,0 +1,113 @@
+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/dialog/flint-dialog.css?inline
+var s = ":host{display:block}.dialog-panel{background-color:var(--flint-surface-background,white);border-radius:var(--flint-border-radius-xl,12px);box-shadow:var(--flint-shadow-xl,0 20px 25px -5px #0000001a);max-width:90vw;max-height:var(--flint-dialog-max-height,90vh);width:var(--flint-dialog-width,444px);opacity:0;pointer-events:none;flex-direction:column;transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;transform:scale(.9)}.dialog-panel.open{opacity:1;pointer-events:auto;transform:scale(1)}.dialog-panel.transition-slide-up{transform:translateY(40px)}.dialog-panel.transition-slide-up.open{transform:translateY(0)}.dialog-panel.transition-slide-down{transform:translateY(-40px)}.dialog-panel.transition-slide-down.open{transform:translateY(0)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color);padding:20px 24px 12px;font-size:1.25rem;font-weight:600;display:block}", l = ":host{-webkit-overflow-scrolling:touch;flex:auto;padding:0 24px 20px;display:block;overflow-y:auto}", u = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color-muted);margin-bottom:8px;font-size:.9375rem;line-height:1.6;display:block}", d = ":host{border-top:1px solid var(--flint-border-color);justify-content:flex-end;align-items:center;gap:8px;padding:8px 16px 16px;display:flex}:host([align=start]){justify-content:flex-start}:host([align=center]){justify-content:center}:host([align=space-between]){justify-content:space-between}", f = [], p = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this._lastFocused = null, this.transition = "scale", this.disableBackdropClose = !1, this._handleKeyDown = (e) => {
+			e.key === "Escape" && this.open && f[f.length - 1] === this && this.requestClose();
+		};
+	}
+	static {
+		this.styles = r(s);
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this._handleKeyDown);
+	}
+	updated(e) {
+		if (super.updated(e), e.has("open")) if (this.open) f.includes(this) || f.push(this), this._lastFocused = document.activeElement, this.updateComplete.then(() => {
+			this.shadowRoot?.querySelector(".dialog-panel")?.focus();
+		});
+		else {
+			let e = f.indexOf(this);
+			e !== -1 && f.splice(e, 1), this._lastFocused?.focus(), this._lastFocused = null;
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this._handleKeyDown);
+		let e = f.indexOf(this);
+		e !== -1 && f.splice(e, 1), this._lastFocused = null;
+	}
+	requestClose() {
+		this.dispatchEvent(new CustomEvent("close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleBackdropClose(e) {
+		e.stopPropagation(), this.disableBackdropClose || this.requestClose();
+	}
+	render() {
+		let e = o({
+			"dialog-panel": !0,
+			open: this.open,
+			[`transition-${this.transition}`]: this.transition !== "scale"
+		});
+		return n`
+      <flint-backdrop .open=${this.open} @flint-backdrop-close=${this._handleBackdropClose}>
+        <div
+          class=${e}
+          tabindex="-1"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="dialog-title"
+          @click=${(e) => e.stopPropagation()}
+        >
+          <slot></slot>
+        </div>
+      </flint-backdrop>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "open", void 0), e([a({ type: String })], p.prototype, "transition", void 0), e([a({
+	type: Boolean,
+	attribute: "disable-backdrop-close"
+})], p.prototype, "disableBackdropClose", void 0), p = e([i("flint-dialog")], p);
+var m = class extends t {
+	static {
+		this.styles = r(c);
+	}
+	render() {
+		return n`<h2 id="dialog-title" style="margin:0;font-size:inherit;font-weight:inherit;"><slot></slot></h2>`;
+	}
+};
+m = e([i("flint-dialog-title")], m);
+var h = class extends t {
+	static {
+		this.styles = r(l);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+h = e([i("flint-dialog-content")], h);
+var g = class extends t {
+	static {
+		this.styles = r(u);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+g = e([i("flint-dialog-content-text")], g);
+var _ = class extends t {
+	constructor(...e) {
+		super(...e), this.align = "end";
+	}
+	static {
+		this.styles = r(d);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], _.prototype, "align", void 0), _ = e([i("flint-dialog-actions")], _);
+//#endregion
+export { m as a, g as i, _ as n, h as r, p as t };

package/dist/_shared/flint-divider-Boj8Ggbt.js

@@ -0,0 +1,37 @@
+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/divider/flint-divider.css?inline
+var s = ":host{--flint-divider-color:var(--flint-border-color);--flint-divider-margin:16px;--flint-divider-thickness:1px;display:block}.divider-container{box-sizing:border-box;width:100%;margin:var(--flint-divider-margin) 0;align-items:center;display:flex}.divider-line{height:var(--flint-divider-thickness);background-color:var(--flint-divider-color);border:none;flex-grow:1}.divider-content{font-family:var(--flint-font-family);color:var(--flint-text-color-muted);white-space:nowrap;padding:0 16px;font-size:.875rem}:host([orientation=vertical]){width:auto;min-width:var(--flint-divider-thickness);align-self:stretch;margin:0;display:flex}:host([orientation=vertical]) .divider-container{width:auto;height:100%;min-width:var(--flint-divider-thickness);flex-direction:column;margin:0}:host([orientation=vertical]) .divider-line{width:var(--flint-divider-thickness);flex:1;height:auto;min-height:24px}.variant-middle{width:auto;margin-left:32px;margin-right:32px}.variant-inset{margin-left:72px}.weight-light{--flint-divider-thickness:1px}.weight-medium{--flint-divider-thickness:2px}.weight-heavy{--flint-divider-thickness:4px}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.orientation = "horizontal", this.variant = "full", this.weight = "light", this.textAlign = "center";
+	}
+	static {
+		this.styles = r(s);
+	}
+	render() {
+		return n`
+      <div 
+        class="divider-container ${o({
+			[`variant-${this.variant}`]: !0,
+			[`weight-${this.weight}`]: !0
+		})}"
+        role="separator"
+        aria-orientation="${this.orientation}"
+      >
+        ${this.textAlign !== "left" || this.orientation === "vertical" ? n`<div class="divider-line"></div>` : ""}
+        
+        <slot class="divider-content"></slot>
+        
+        ${this.textAlign !== "right" || this.orientation === "vertical" ? n`<div class="divider-line"></div>` : ""}
+      </div>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "orientation", void 0), e([a({ type: String })], c.prototype, "variant", void 0), e([a({ type: String })], c.prototype, "weight", void 0), e([a({ type: String })], c.prototype, "textAlign", void 0), c = e([i("flint-divider")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-drawer-BAukflTn.js

@@ -0,0 +1,79 @@
+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";
+//#region src/drawer/flint-drawer.css?inline
+var o = ":host,:host([variant=temporary]){z-index:var(--flint-drawer-z-index,1200);pointer-events:none;display:block;position:fixed;inset:0;overflow:hidden}:host([container]),:host([container][variant=temporary]){position:absolute}:host([variant=persistent]){display:contents}:host([variant=mini]){pointer-events:auto;z-index:auto;display:flex;position:static;inset:auto;overflow:visible}.backdrop{background:var(--flint-backdrop-color);opacity:0;pointer-events:none;transition:opacity .25s;position:absolute;inset:0}.backdrop.open{opacity:1;pointer-events:auto}.paper{background:var(--flint-drawer-bg,var(--flint-surface-1));pointer-events:auto;outline:none;flex-direction:column;display:flex;position:absolute;overflow-y:auto}:host(:not([variant])) .paper,:host([variant=temporary]) .paper{width:var(--flint-drawer-width,250px);box-shadow:var(--flint-drawer-shadow);transition:transform var(--flint-drawer-transition,.225s cubic-bezier(0, 0, .2, 1));top:0;bottom:0;left:0;transform:translate(-100%)}:host(:not([variant])[open]) .paper,:host([variant=temporary][open]) .paper{transform:translate(0)}:host([variant=temporary][anchor=right]) .paper{left:auto;right:0;transform:translate(100%)}:host([variant=temporary][anchor=right][open]) .paper{transform:translate(0)}:host([variant=temporary][anchor=top]) .paper{width:auto;height:var(--flint-drawer-height,auto);inset:0 0 auto;transform:translateY(-100%)}:host([variant=temporary][anchor=top][open]) .paper{transform:translateY(0)}:host([variant=temporary][anchor=bottom]) .paper{width:auto;height:var(--flint-drawer-height,auto);inset:auto 0 0;transform:translateY(100%)}:host([variant=temporary][anchor=bottom][open]) .paper{transform:translateY(0)}:host([variant=persistent]) .paper{box-shadow:none;border-right:1px solid var(--flint-border-color);pointer-events:auto;transition:none;position:relative;transform:none}:host([variant=persistent][anchor=right]) .paper{border-right:none;border-left:1px solid var(--flint-border-color)}:host([variant=persistent]) .paper:not(.open){display:none}:host([variant=mini]) .paper{box-shadow:none;border-right:1px solid var(--flint-border-color);width:var(--flint-drawer-mini-width,72px);white-space:nowrap;transition:width var(--flint-drawer-transition,.225s cubic-bezier(0, 0, .2, 1));pointer-events:auto;flex-shrink:0;position:relative;overflow-x:hidden;transform:none}:host([variant=mini][anchor=right]) .paper{border-right:none;border-left:1px solid var(--flint-border-color)}:host([variant=mini][open]) .paper{width:var(--flint-drawer-width,250px)}:host([variant=mini]:not([open])) ::slotted([data-drawer-hide-mini]){opacity:0;pointer-events:none}::slotted([data-drawer-hide-mini]){transition:opacity .18s}.edge{background:var(--flint-drawer-bg,var(--flint-surface-1));border:1px solid var(--flint-border-color);cursor:pointer;pointer-events:auto;justify-content:center;align-items:center;display:none;position:absolute;box-shadow:0 1px 3px #0000001f}:host([edge]:not([variant])) .edge,:host([edge][variant=temporary]) .edge{display:flex}.edge-left{width:var(--flint-drawer-edge-width,16px);border-radius:0 8px 8px 0;top:0;bottom:0;left:0}.edge-right{width:var(--flint-drawer-edge-width,16px);border-radius:8px 0 0 8px;top:0;bottom:0;right:0}.edge-top{height:var(--flint-drawer-edge-width,16px);border-radius:0 0 8px 8px;top:0;left:0;right:0}.edge-bottom{height:var(--flint-drawer-edge-width,16px);border-radius:8px 8px 0 0;bottom:0;left:0;right:0}.edge-handle{background:var(--flint-border-color);border-radius:2px;width:4px;height:32px}.edge-top .edge-handle,.edge-bottom .edge-handle{width:32px;height:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", s = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this.anchor = "left", this.variant = "temporary", this.edge = !1, this.container = !1, this.label = "Drawer", this._lastFocused = null, this._boundKeyDown = (e) => {
+			e.defaultPrevented || this.open && e.key === "Escape" && this.variant === "temporary" && (e.preventDefault(), this._close());
+		};
+	}
+	static {
+		this.styles = r(o);
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this._boundKeyDown);
+	}
+	disconnectedCallback() {
+		window.removeEventListener("keydown", this._boundKeyDown), super.disconnectedCallback();
+	}
+	updated(e) {
+		e.has("open") && this.variant === "temporary" && (this.open ? (this._lastFocused = document.activeElement, this.shadowRoot?.querySelector(".paper")?.focus()) : (this._lastFocused?.focus(), this._lastFocused = null));
+	}
+	_close() {
+		this.dispatchEvent(new CustomEvent("flint-drawer-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		let e = this.variant === "temporary", t = this.edge && !this.open && e, r = this.variant === "mini" ? "false" : String(!this.open);
+		return n`
+            ${e ? n`
+                <div
+                    class="backdrop ${this.open ? "open" : ""}"
+                    @click=${this._close}
+                    role="presentation"
+                    aria-hidden="true"
+                ></div>
+            ` : ""}
+
+            ${t ? n`
+                <div class="edge edge-${this.anchor}" @click=${() => {
+			this.open = !0;
+		}}>
+                    <div class="edge-handle"></div>
+                </div>
+            ` : ""}
+
+            <div
+                class="paper ${this.open ? "open" : ""}"
+                role=${e ? "dialog" : "complementary"}
+                aria-modal=${e ? String(this.open) : "false"}
+                aria-label=${this.label}
+                aria-hidden=${r}
+                tabindex="-1"
+            >
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "open", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "anchor", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "edge", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "container", void 0), e([a({ type: String })], s.prototype, "label", void 0), s = e([i("flint-drawer")], s);
+//#endregion
+export { s as t };

package/dist/_shared/flint-empty-Bq8DuJQT.js

@@ -0,0 +1,75 @@
+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/empty/flint-empty-title.css?inline
+var s = ":host{color:var(--flint-text-color);font-size:1rem;font-weight:600;line-height:1.4;font-family:var(--flint-font-family);margin:0;display:block}", c = ":host{color:var(--flint-text-color-muted);font-size:.875rem;line-height:1.5;font-family:var(--flint-font-family);margin:0;display:block}", l = ":host,.media{justify-content:center;align-items:center;display:flex}.media--icon{background:var(--flint-empty-media-bg,var(--flint-surface-2));width:48px;height:48px;color:var(--flint-empty-media-color,var(--flint-text-color-muted));border-radius:12px}::slotted(svg),::slotted([data-icon]){width:24px;height:24px}", u = ":host{text-align:center;flex-direction:column;align-items:center;gap:8px;display:flex}", d = ":host{flex-direction:column;align-items:center;gap:8px;display:flex}", f = ":host{flex-direction:column;justify-content:center;align-items:center;display:flex}.container{align-items:center;gap:var(--flint-empty-gap,16px);padding:var(--flint-empty-padding,32px);max-width:var(--flint-empty-max-width,480px);box-sizing:border-box;text-align:center;width:100%;font-family:var(--flint-font-family,system-ui, sans-serif);flex-direction:column;display:flex}", p = class extends t {
+	static {
+		this.styles = r(s);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+p = e([i("flint-empty-title")], p);
+var m = class extends t {
+	static {
+		this.styles = r(c);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+m = e([i("flint-empty-description")], m);
+var h = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "default";
+	}
+	static {
+		this.styles = r(l);
+	}
+	render() {
+		return n`
+            <div class=${o({
+			media: !0,
+			"media--icon": this.variant === "icon"
+		})}>
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+e([a({ reflect: !0 })], h.prototype, "variant", void 0), h = e([i("flint-empty-media")], h);
+var g = class extends t {
+	static {
+		this.styles = r(u);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+g = e([i("flint-empty-header")], g);
+var _ = class extends t {
+	static {
+		this.styles = r(d);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+_ = e([i("flint-empty-content")], _);
+var v = class extends t {
+	static {
+		this.styles = r(f);
+	}
+	render() {
+		return n`
+            <div class="container" part="container">
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+v = e([i("flint-empty")], v);
+//#endregion
+export { h as a, g as i, _ as n, p as o, m as r, v as t };

package/dist/_shared/flint-fab-D8nKcAan.js

@@ -0,0 +1,77 @@
+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";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+//#region src/fab/flint-fab.css?inline
+var c = ":host{--flint-fab-size:56px;--flint-fab-background:var(--flint-primary-color);--flint-fab-color:var(--flint-text-color-on-primary);--flint-fab-shadow:var(--flint-shadow-lg);--flint-fab-radius:50%;z-index:100;display:inline-block;position:fixed}.fab{width:var(--flint-fab-size);height:var(--flint-fab-size);border-radius:var(--flint-fab-radius);background-color:var(--flint-fab-background);color:var(--flint-fab-color);box-shadow:var(--flint-fab-shadow);cursor:pointer;border:none;outline:none;justify-content:center;align-items:center;padding:0;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.fab:hover:not(:disabled){box-shadow:var(--flint-shadow-xl);filter:brightness(1.1);transform:translateY(-2px)}.fab:active:not(:disabled){filter:brightness(.9);transform:translateY(0)}.fab:focus-visible{outline:3px solid var(--flint-fab-background);outline-offset:3px}.fab:disabled{opacity:.4;cursor:not-allowed}.fab.extended{border-radius:28px;width:auto;min-width:80px;height:56px;padding:0 20px}.fab.extended .icon-slot{margin-right:12px}.icon-slot{justify-content:center;align-items:center;font-size:24px;display:flex}.label-slot{font-family:var(--flint-font-family);letter-spacing:.1px;text-transform:uppercase;font-size:.875rem;font-weight:500}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = class extends t {
+	constructor(...e) {
+		super(...e), this.extended = !1, this.disabled = !1, this.label = "Action", this.position = "bottom-right";
+	}
+	static {
+		this.styles = r(c);
+	}
+	updated(e) {
+		e.has("position") && this._applyPositionToHost();
+	}
+	_applyPositionToHost() {
+		if (this.style.top = "", this.style.bottom = "", this.style.left = "", this.style.right = "", this.style.position = "", this.position === "static") {
+			this.style.position = "static";
+			return;
+		}
+		let e = {
+			"bottom-right": [
+				"",
+				"24px",
+				"24px",
+				""
+			],
+			"bottom-left": [
+				"",
+				"24px",
+				"",
+				"24px"
+			],
+			"top-right": [
+				"24px",
+				"",
+				"24px",
+				""
+			],
+			"top-left": [
+				"24px",
+				"",
+				"",
+				"24px"
+			]
+		}, [t, n, r, i] = e[this.position] ?? e["bottom-right"];
+		this.style.position = "fixed", this.style.top = t, this.style.bottom = n, this.style.right = r, this.style.left = i;
+	}
+	render() {
+		return n`
+      <button
+        class="${o({
+			fab: !0,
+			extended: this.extended
+		})}"
+        ?disabled="${this.disabled}"
+        aria-label="${s(this.extended ? void 0 : this.label)}"
+      >
+        <span class="icon-slot">
+          <slot name="icon"></slot>
+          <slot></slot>
+        </span>
+        ${this.extended ? n`<span class="label-slot"><slot name="label"></slot></span>` : ""}
+      </button>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "extended", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), e([a({ type: String })], l.prototype, "label", void 0), e([a({ type: String })], l.prototype, "position", void 0), l = e([i("flint-fab")], l);
+//#endregion
+export { l as t };

package/dist/_shared/flint-format-date-_jfKYO_2.js

@@ -0,0 +1,62 @@
+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 } from "lit/decorators.js";
+//#region src/format-date/flint-format-date.css?inline
+var s = ":host{display:inline}time{font:inherit;color:var(--flint-format-date-color,inherit);font-size:var(--flint-format-date-font-size,inherit)}";
+//#endregion
+//#region src/format-date/flint-format-date.ts
+function c(e) {
+	let t;
+	return t = e instanceof Date ? e : new Date(e), isNaN(t.getTime()) ? null : t;
+}
+var l = class extends t {
+	constructor(...e) {
+		super(...e), this.date = /* @__PURE__ */ new Date(), this.weekday = void 0, this.era = void 0, this.year = void 0, this.month = void 0, this.day = void 0, this.hour = void 0, this.minute = void 0, this.second = void 0, this.timeZoneName = void 0, this.timeZone = void 0, this.fractionalSecondDigits = void 0, this.dateStyle = void 0, this.timeStyle = void 0, this.hourFormat = "auto", this.lang = "";
+	}
+	static {
+		this.styles = i(s);
+	}
+	_parseDate() {
+		return c(this.date);
+	}
+	_formatDate(e) {
+		let t = {};
+		this.timeZone && (t.timeZone = this.timeZone), this.timeZoneName && (t.timeZoneName = this.timeZoneName), this.hourFormat === "12" ? t.hour12 = !0 : this.hourFormat === "24" && (t.hour12 = !1), this.dateStyle || this.timeStyle ? (this.dateStyle && (t.dateStyle = this.dateStyle), this.timeStyle && (t.timeStyle = this.timeStyle)) : (this.weekday && (t.weekday = this.weekday), this.era && (t.era = this.era), this.year && (t.year = this.year), this.month && (t.month = this.month), this.day && (t.day = this.day), this.hour && (t.hour = this.hour), this.minute && (t.minute = this.minute), this.second && (t.second = this.second), this.fractionalSecondDigits && (t.fractionalSecondDigits = this.fractionalSecondDigits), this.weekday || this.era || this.year || this.month || this.day || this.hour || this.minute || this.second || this.fractionalSecondDigits || (t.year = "numeric", t.month = "numeric", t.day = "numeric"));
+		let n = this.lang || document.documentElement.lang || navigator.language || "en";
+		try {
+			return new Intl.DateTimeFormat(n, t).format(e);
+		} catch {
+			return "";
+		}
+	}
+	_localeString(e) {
+		let t = this.lang || void 0, n = this.timeZone ? { timeZone: this.timeZone } : void 0;
+		try {
+			return e.toLocaleString(t, n);
+		} catch {
+			return e.toLocaleString();
+		}
+	}
+	render() {
+		let e = this._parseDate(), t = e ? this._formatDate(e) : "", i = e ? e.toISOString() : r, a = e ? this._localeString(e) : r;
+		return n`
+            <time
+                datetime=${i}
+                title=${a}
+                aria-label=${a}
+            >${t}</time>
+        `;
+	}
+};
+e([o()], l.prototype, "date", void 0), e([o()], l.prototype, "weekday", void 0), e([o()], l.prototype, "era", void 0), e([o()], l.prototype, "year", void 0), e([o()], l.prototype, "month", void 0), e([o()], l.prototype, "day", void 0), e([o()], l.prototype, "hour", void 0), e([o()], l.prototype, "minute", void 0), e([o()], l.prototype, "second", void 0), e([o({ attribute: "time-zone-name" })], l.prototype, "timeZoneName", void 0), e([o({ attribute: "time-zone" })], l.prototype, "timeZone", void 0), e([o({
+	attribute: "fractional-second-digits",
+	type: Number
+})], l.prototype, "fractionalSecondDigits", void 0), e([o({ attribute: "date-style" })], l.prototype, "dateStyle", void 0), e([o({ attribute: "time-style" })], l.prototype, "timeStyle", void 0), e([o({
+	attribute: "hour-format",
+	reflect: !0
+})], l.prototype, "hourFormat", void 0), e([o({
+	attribute: "lang",
+	reflect: !0
+})], l.prototype, "lang", void 0), l = e([a("flint-format-date")], l);
+//#endregion
+export { c as n, l as t };