@getufy/flint-ui 0.1.0

package/dist/_shared/flint-stepper-DdkEEVXE.js

@@ -0,0 +1,285 @@
+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";
+import { classMap as s } from "lit/directives/class-map.js";
+//#region src/stepper/flint-step-connector.css?inline
+var c = ":host{display:block}.line{background:var(--flint-stepper-connector-color);border-radius:2px;transition:background .3s}.line.completed{background:var(--flint-primary-color)}:host([orientation=horizontal]) .line{width:100%;height:2px}:host([orientation=vertical]) .line{width:2px;min-height:24px;margin:0 auto}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", l = ":host{display:block}.label{color:var(--flint-text-color);font-size:.875rem;font-weight:500;font-family:var(--flint-font-family);line-height:1.4}.optional{color:var(--flint-text-color-muted);font-size:.75rem;font-style:italic}:host([active]) .label{color:var(--flint-primary-color);font-weight:600}:host([disabled]) .label{color:var(--flint-text-color-muted)}:host([error]) .label{color:var(--flint-error-color)}", u = ":host{display:block;overflow:hidden}.panel{grid-template-rows:0fr;transition:grid-template-rows .25s;display:grid}.panel.open{grid-template-rows:1fr}.inner{padding:0 16px;transition:padding .25s;overflow:hidden}.panel.open .inner{padding:8px 16px 16px}.content{color:var(--flint-text-color);font-size:.875rem;font-family:var(--flint-font-family)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = ":host{min-width:0;font-family:var(--flint-font-family);flex:1 1 0;display:flex}:host([orientation=horizontal]){align-items:flex-start;padding-top:4px}:host([orientation=vertical]){flex-direction:column;flex:none;width:100%}:host([alternative-label]){flex-direction:column;flex:1;align-items:center;min-width:0}.conn-wrap{flex:auto;align-items:flex-start;min-width:12px;padding-top:15px;display:flex}.conn-wrap flint-step-connector{flex:1}.alt-top{align-items:center;width:100%;display:flex}.alt-top .conn-fill{flex:1;align-items:center;display:flex}.alt-top .conn-fill flint-step-connector{flex:1}.step-header{align-items:flex-start;gap:14px;min-width:0;display:flex}.step-header flint-step-label,.step-btn flint-step-label{min-width:0;padding-top:5px}:host([alternative-label]) .alt-label-row{text-align:center;width:100%;min-width:0;margin-top:8px}.step-btn{cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;outline:none;align-items:flex-start;gap:14px;min-width:0;padding:0;font-family:inherit;display:flex}.step-btn:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:3px}:host([disabled]) .step-btn{cursor:default}:host([alternative-label]) .step-btn{flex-direction:column;align-items:center;gap:0}.v-body{min-height:16px;margin-left:15px;display:flex}.v-line{background:var(--flint-stepper-connector-color);border-radius:2px;flex-shrink:0;width:2px;margin-right:14px;transition:background .3s}.v-line.completed{background:var(--flint-primary-color)}:host([last]) .v-line{background:0 0}.v-content{flex:1;min-width:0;padding-bottom:8px}.icon-circle{width:var(--flint-stepper-icon-size,32px);height:var(--flint-stepper-icon-size,32px);border:2px solid var(--flint-input-border-color);color:var(--flint-text-color-muted);box-sizing:border-box;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.8125rem;font-weight:700;transition:all .2s;display:flex}.icon-circle.active{background:var(--flint-primary-color);border-color:var(--flint-primary-color);color:var(--flint-text-color-on-primary);box-shadow:0 0 0 4px var(--flint-primary-focus-ring)}.icon-circle.completed{background:var(--flint-primary-color);border-color:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.icon-circle.error{border-color:var(--flint-error-color);color:var(--flint-error-color)}:host([disabled]) .icon-circle{opacity:.4}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", f = ":host{font-family:var(--flint-font-family);display:block}.stepper{background:var(--flint-surface-1);padding:16px 24px;display:flex}.stepper.horizontal{flex-direction:row;align-items:stretch}.stepper.vertical{flex-direction:column;gap:0}.stepper.alt{align-items:flex-start}", p = ":host{background:var(--flint-surface-1);font-family:var(--flint-font-family);justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;display:flex}:host([position=static]){border:1px solid var(--flint-border-color);border-radius:8px}:host([position=bottom]){border-top:1px solid var(--flint-border-color)}:host([position=top]){border-bottom:1px solid var(--flint-border-color)}.progress{flex:1;justify-content:center;align-items:center;gap:0;display:flex}.text{color:var(--flint-text-color-muted);font-size:.8rem}.dots{gap:6px;display:flex}.dot{background:var(--flint-input-border-color);border-radius:50%;width:10px;height:10px;transition:background .2s}.dot.active{background:var(--flint-primary-color)}.bar-track{background:var(--flint-border-color);border-radius:2px;flex:1;height:4px;overflow:hidden}.bar-fill{background:var(--flint-primary-color);border-radius:2px;height:100%;transition:width .3s}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.nav-btn{cursor:pointer;border-radius:6px;padding:6px 14px;font-family:inherit;font-size:.8rem;transition:opacity .15s}.nav-btn:disabled{opacity:.38;cursor:default}.nav-btn.back{background:var(--flint-surface-1);color:var(--flint-text-color);border:1px solid var(--flint-border-color)}.nav-btn.next{background:var(--flint-primary-color);color:var(--flint-text-color-on-primary);border:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", m = n`<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`, h = n`<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`, g = class extends t {
+	constructor(...e) {
+		super(...e), this.orientation = "horizontal", this.completed = !1;
+	}
+	static {
+		this.styles = i(c);
+	}
+	render() {
+		return n`<div class="line ${s({ completed: this.completed })}"></div>`;
+	}
+};
+e([o({ reflect: !0 })], g.prototype, "orientation", void 0), e([o({ type: Boolean })], g.prototype, "completed", void 0), g = e([a("flint-step-connector")], g);
+var _ = class extends t {
+	constructor(...e) {
+		super(...e), this.active = !1, this.disabled = !1, this.error = !1;
+	}
+	static {
+		this.styles = i(l);
+	}
+	render() {
+		return n`
+        <div class="label"><slot></slot></div>
+        <div class="optional"><slot name="optional"></slot></div>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "active", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "error", void 0), _ = e([a("flint-step-label")], _);
+var v = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !0;
+	}
+	static {
+		this.styles = i(u);
+	}
+	render() {
+		return n`
+            <div
+                class="panel ${s({ open: this.open })}"
+                aria-hidden=${this.open ? "false" : "true"}
+            >
+                <div class="inner">
+                    <div class="content"><slot></slot></div>
+                </div>
+            </div>`;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "open", void 0), v = e([a("flint-step-content")], v);
+var y = class extends t {
+	constructor(...e) {
+		super(...e), this.active = !1, this.completed = !1, this.disabled = !1, this.optional = !1, this.error = !1, this.last = !1, this.clickable = !1, this.orientation = "horizontal", this.alternativeLabel = !1, this.stepIndex = 0, this.optionalLabel = "Optional", this.prevCompleted = !1;
+	}
+	static {
+		this.styles = i(d);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
+	}
+	_fire() {
+		this.disabled || this.dispatchEvent(new CustomEvent("flint-step-click", {
+			detail: { index: this.stepIndex },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_icon() {
+		let e = {
+			"icon-circle": !0,
+			active: this.active,
+			completed: this.completed,
+			error: this.error
+		}, t = this.error ? h : this.completed ? m : n`<slot name="icon">${this.stepIndex + 1}</slot>`;
+		return n`<div class=${s(e)}>${t}</div>`;
+	}
+	_label() {
+		return n`
+            <flint-step-label ?active=${this.active} ?disabled=${this.disabled} ?error=${this.error}>
+                <slot name="label"></slot>
+                ${this.optional ? n`<span slot="optional">${this.optionalLabel}</span>` : r}
+            </flint-step-label>`;
+	}
+	_connector(e = !1) {
+		return n`<flint-step-connector orientation=${this.orientation} ?completed=${e}></flint-step-connector>`;
+	}
+	render() {
+		let e = this.stepIndex > 0;
+		if (this.orientation === "vertical") return n`
+                ${this.clickable ? n`<button class="step-btn" ?disabled=${this.disabled} @click=${this._fire} aria-current=${this.active ? "step" : r}>${this._icon()} ${this._label()}</button>` : n`<div class="step-header">${this._icon()} ${this._label()}</div>`}
+                <div class="v-body">
+                    <div class="v-line ${s({ completed: this.completed })}"></div>
+                    <div class="v-content"><slot></slot></div>
+                </div>`;
+		if (this.alternativeLabel) {
+			let t = this.clickable ? n`<button class="step-btn" ?disabled=${this.disabled} @click=${this._fire} aria-current=${this.active ? "step" : r}>${this._icon()}</button>` : this._icon();
+			return n`
+                <div class="alt-top">
+                    <div class="conn-fill">${e ? this._connector(this.prevCompleted) : r}</div>
+                    ${t}
+                    <div class="conn-fill"></div>
+                </div>
+                <div class="alt-label-row">${this._label()}</div>`;
+		}
+		let t = this.clickable ? n`<button class="step-btn" ?disabled=${this.disabled} @click=${this._fire} aria-current=${this.active ? "step" : r}>${this._icon()} ${this._label()}</button>` : n`<div class="step-header">${this._icon()} ${this._label()}</div>`;
+		return n`
+            ${e ? n`<div class="conn-wrap">${this._connector(this.prevCompleted)}</div>` : r}
+            ${t}`;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "active", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "completed", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "optional", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "error", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "last", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "clickable", void 0), e([o({
+	type: String,
+	reflect: !0
+})], y.prototype, "orientation", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "alternative-label"
+})], y.prototype, "alternativeLabel", void 0), e([o({
+	type: Number,
+	attribute: "step-index"
+})], y.prototype, "stepIndex", void 0), e([o({
+	type: String,
+	attribute: "optional-label"
+})], y.prototype, "optionalLabel", void 0), e([o({
+	type: Boolean,
+	attribute: "prev-completed"
+})], y.prototype, "prevCompleted", void 0), y = e([a("flint-step")], y);
+var b = class extends t {
+	constructor(...e) {
+		super(...e), this.activeStep = 0, this.orientation = "horizontal", this.alternativeLabel = !1, this.nonLinear = !1, this.label = "steps", this._onStepClick = (e) => {
+			this.activeStep = e.detail.index, this.dispatchEvent(new CustomEvent("flint-step-change", {
+				detail: { step: e.detail.index },
+				bubbles: !0,
+				composed: !0
+			})), this._syncSteps();
+		};
+	}
+	static {
+		this.styles = i(f);
+	}
+	_syncSteps() {
+		let e = Array.from(this.querySelectorAll(":scope > flint-step"));
+		e.forEach((t, n) => {
+			t.stepIndex = n, t.last = n === e.length - 1, t.orientation = this.orientation, t.alternativeLabel = this.alternativeLabel, t.active = n === this.activeStep, t.prevCompleted = n > 0 && e[n - 1].completed, this.nonLinear ? (t.disabled = !1, t.clickable = !0) : (t.completed || (t.disabled = n > this.activeStep), t.clickable = !1);
+		});
+	}
+	firstUpdated() {
+		this._syncSteps();
+	}
+	updated(e) {
+		(e.has("activeStep") || e.has("orientation") || e.has("alternativeLabel") || e.has("nonLinear")) && this._syncSteps();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("flint-step-click", this._onStepClick);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("flint-step-click", this._onStepClick), super.disconnectedCallback();
+	}
+	render() {
+		return n`
+            <div class=${`stepper ${this.orientation}${this.alternativeLabel ? " alt" : ""}`} role="list" aria-label=${this.label}>
+                <slot @slotchange=${() => {
+			this._syncSteps(), this.requestUpdate();
+		}}></slot>
+            </div>`;
+	}
+};
+e([o({
+	type: Number,
+	attribute: "active-step"
+})], b.prototype, "activeStep", void 0), e([o({
+	type: String,
+	reflect: !0
+})], b.prototype, "orientation", void 0), e([o({
+	type: Boolean,
+	attribute: "alternative-label"
+})], b.prototype, "alternativeLabel", void 0), e([o({
+	type: Boolean,
+	attribute: "non-linear"
+})], b.prototype, "nonLinear", void 0), e([o({ type: String })], b.prototype, "label", void 0), b = e([a("flint-stepper")], b);
+var x = class extends t {
+	constructor(...e) {
+		super(...e), this.steps = 0, this.activeStep = 0, this.variant = "dots", this.position = "static", this.backLabel = "Back", this.nextLabel = "Next";
+	}
+	static {
+		this.styles = i(p);
+	}
+	get _safeSteps() {
+		return Math.max(1, this.steps);
+	}
+	_emit(e) {
+		this.dispatchEvent(new CustomEvent(e, {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_progress() {
+		let e = this.activeStep + 1, t = this._safeSteps;
+		return this.variant === "text" ? n`<span class="text" aria-live="polite">Step ${e} of ${t}</span>` : this.variant === "dots" ? n`
+                <div class="dots" aria-label="Step ${e} of ${t}">
+                    <span class="sr-only" aria-live="polite">Step ${e} of ${t}</span>
+                    ${Array.from({ length: t }, (e, t) => n`<div class="dot ${t === this.activeStep ? "active" : ""}"></div>`)}
+                </div>` : n`
+            <div
+                class="bar-track"
+                role="progressbar"
+                aria-valuenow=${e}
+                aria-valuemin="1"
+                aria-valuemax=${t}
+                aria-label="Step ${e} of ${t}"
+            >
+                <div class="bar-fill" style="width:${t > 1 ? this.activeStep / (t - 1) * 100 : 100}%"></div>
+            </div>`;
+	}
+	render() {
+		return n`
+            <slot name="back-button">
+                <button
+                    class="nav-btn back"
+                    ?disabled=${this.activeStep === 0}
+                    aria-label="Go to previous step"
+                    @click=${() => this._emit("flint-mobile-step-back")}
+                >${this.backLabel}</button>
+            </slot>
+            <div class="progress">${this._progress()}</div>
+            <slot name="next-button">
+                <button
+                    class="nav-btn next"
+                    ?disabled=${this.activeStep >= this._safeSteps - 1}
+                    aria-label="Go to next step"
+                    @click=${() => this._emit("flint-mobile-step-next")}
+                >${this.nextLabel}</button>
+            </slot>`;
+	}
+};
+e([o({ type: Number })], x.prototype, "steps", void 0), e([o({
+	type: Number,
+	attribute: "active-step"
+})], x.prototype, "activeStep", void 0), e([o({ type: String })], x.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], x.prototype, "position", void 0), e([o({
+	type: String,
+	attribute: "back-label"
+})], x.prototype, "backLabel", void 0), e([o({
+	type: String,
+	attribute: "next-label"
+})], x.prototype, "nextLabel", void 0), x = e([a("flint-mobile-stepper")], x);
+//#endregion
+export { _ as a, v as i, y as n, b as o, g as r, x as t };

package/dist/_shared/flint-switch-DN7VI9jT.js

@@ -0,0 +1,80 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { t } from "./form-associated-EGIhyHHt.js";
+import { LitElement as n, html as r, nothing 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/switch/flint-switch.css?inline
+var l = ":host{--flint-switch-width:52px;--flint-switch-height:32px;--flint-switch-thumb-size:24px;--flint-switch-thumb-offset:4px;--flint-switch-bg:var(--flint-secondary-color);--flint-switch-bg-on:var(--flint-primary-color);--flint-switch-thumb-bg:var(--flint-switch-thumb-color);font-family:var(--flint-font-family);cursor:pointer;display:inline-block}:host([disabled]){cursor:not-allowed}:host([size=sm]){--flint-switch-width:36px;--flint-switch-height:22px;--flint-switch-thumb-size:16px;--flint-switch-thumb-offset:3px}:host([size=lg]){--flint-switch-width:64px;--flint-switch-height:38px;--flint-switch-thumb-size:30px;--flint-switch-thumb-offset:4px}.wrapper{-webkit-user-select:none;user-select:none;align-items:center;gap:12px;display:flex}.switch{width:var(--flint-switch-width);height:var(--flint-switch-height);background-color:var(--flint-switch-bg);border-radius:calc(var(--flint-switch-height) / 2);flex-shrink:0;transition:background-color .3s cubic-bezier(.4,0,.2,1);position:relative}.switch.checked{background-color:var(--flint-switch-bg-on)}.thumb{top:var(--flint-switch-thumb-offset);left:var(--flint-switch-thumb-offset);width:var(--flint-switch-thumb-size);height:var(--flint-switch-thumb-size);background-color:var(--flint-switch-thumb-bg);box-shadow:var(--flint-shadow-sm);color:var(--flint-text-color-muted);border-radius:50%;justify-content:center;align-items:center;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute}.switch.checked .thumb{transform:translateX(calc(var(--flint-switch-width) - var(--flint-switch-thumb-size) - (var(--flint-switch-thumb-offset) * 2)));color:var(--flint-primary-color)}.label{color:var(--flint-text-color);font-size:.9375rem;font-weight:500}.label.disabled{cursor:not-allowed;opacity:.5}.switch.disabled{opacity:.5;cursor:not-allowed}.switch:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:2px}.icon-wrapper{justify-content:center;align-items:center;font-size:14px;display:flex}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", u = 0, d = class extends t(n) {
+	static {
+		this.styles = a(l);
+	}
+	constructor() {
+		super(), this.checked = !1, this.disabled = !1, this.required = !1, this.size = "md", this.label = "", this.name = "", this.value = "on", this.defaultChecked = !1, this.ariaLabel = null, u++, this._labelId = `flint-switch-label-${u}`;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this._firstUpdate && (this._firstUpdate = !1, this.defaultChecked && (this.checked = !0));
+	}
+	updated(e) {
+		super.updated(e), (e.has("checked") || e.has("value")) && this._initFormValue(this.checked ? this.value : null), (e.has("checked") || e.has("required")) && this._initFormValidity(this.required, !this.checked, "Please check this switch.");
+	}
+	_handleClick() {
+		this.disabled || (this.checked = !this.checked, this.dispatchEvent(new CustomEvent("flint-switch-change", {
+			detail: { checked: this.checked },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		let e = !!this.label;
+		return r`
+      <div class="wrapper" @click=${this._handleClick}>
+        <div
+          class=${c({
+			switch: !0,
+			checked: this.checked,
+			disabled: this.disabled
+		})}
+          role="switch"
+          aria-checked=${this.checked ? "true" : "false"}
+          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-required=${this.required ? "true" : "false"}
+          aria-label=${this.ariaLabel ?? i}
+          aria-labelledby=${e ? this._labelId : i}
+          .tabIndex=${this.disabled ? -1 : 0}
+          @keydown=${(e) => (e.key === " " || e.key === "Enter") && this._handleClick()}
+        >
+          <div class="thumb">
+            <div class="icon-wrapper">
+              ${this.checked ? r`<slot name="icon-on"></slot>` : r`<slot name="icon-off"></slot>`}
+            </div>
+          </div>
+        </div>
+        ${e ? r`<span id=${this._labelId} class=${c({
+			label: !0,
+			disabled: this.disabled
+		})}>${this.label}</span>` : r`<slot></slot>`}
+      </div>
+    `;
+	}
+};
+e([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "checked", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "disabled", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "required", void 0), e([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "size", void 0), e([s({ type: String })], d.prototype, "label", void 0), e([s({ type: String })], d.prototype, "name", void 0), e([s({ type: String })], d.prototype, "value", void 0), e([s({
+	type: Boolean,
+	attribute: "default-checked"
+})], d.prototype, "defaultChecked", void 0), e([s({
+	type: String,
+	attribute: "aria-label"
+})], d.prototype, "ariaLabel", void 0), d = e([o("flint-switch")], d);
+//#endregion
+export { d as t };

package/dist/_shared/flint-table-DQ--YqEC.js

@@ -0,0 +1,112 @@
+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/table/flint-table-container.css?inline
+var o = ":host{background-color:var(--flint-table-container-bg,var(--flint-surface-background,white));border-radius:var(--flint-table-border-radius,var(--flint-border-radius-lg,8px));width:100%;box-shadow:var(--flint-table-shadow,var(--flint-shadow-sm));border:1px solid var(--flint-table-border-color,var(--flint-border-color));display:block;overflow-x:auto}:host([shadow]){box-shadow:var(--flint-table-shadow-elevated,var(--flint-shadow-md))}:host([sticky-header]) flint-table-head,:host([sticky-header]) ::slotted(flint-table-head){z-index:2;position:sticky;top:0}", s = ":host{border-collapse:collapse;border-spacing:0;width:100%;font-family:var(--flint-font-family);color:var(--flint-text-color);display:table}:host([size=small]){--flint-table-cell-padding-y:var(--flint-table-cell-padding-y-dense,6px);--flint-table-cell-padding-x:var(--flint-table-cell-padding-x-dense,16px)}", c = ":host{display:table-header-group}", l = ":host{display:table-row-group}:host([striped]) ::slotted(flint-table-row:nth-child(2n)){background-color:var(--flint-table-striped-bg,var(--flint-surface-2))}", u = ":host{vertical-align:middle;outline:0;transition:background-color .2s;display:table-row}:host(:hover){background-color:var(--flint-table-row-hover-bg,var(--flint-hover-color,#0000000a))}:host([selected]){background-color:var(--flint-table-row-selected-bg,var(--flint-primary-color-light,#3b82f614))}:host([hover]){background-color:var(--flint-table-row-hover-bg,var(--flint-hover-color,#0000000a))}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", d = ":host{padding:var(--flint-table-cell-padding-y,16px) var(--flint-table-cell-padding-x,16px);text-align:left;vertical-align:middle;border-bottom:1px solid var(--flint-table-border-color,var(--flint-border-color));font-size:.875rem;display:table-cell}:host([header]){background-color:var(--flint-table-header-bg,transparent);color:var(--flint-table-header-color,var(--flint-text-color-muted));white-space:nowrap;font-weight:600;line-height:1.5rem}:host([align=right]){text-align:right}:host([align=center]){text-align:center}:host([padding=checkbox]){width:48px;padding:0 0 0 4px}:host([padding=none]){padding:0}", f = ":host{display:table-footer-group}", p = class extends t {
+	constructor(...e) {
+		super(...e), this.shadow = !1, this.stickyHeader = !1;
+	}
+	static {
+		this.styles = r(o);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "shadow", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "sticky-header"
+})], p.prototype, "stickyHeader", void 0), p = e([i("flint-table-container")], p);
+var m = class extends t {
+	constructor(...e) {
+		super(...e), this.size = "medium";
+	}
+	static {
+		this.styles = r(s);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], m.prototype, "size", void 0), m = e([i("flint-table")], m);
+var h = class extends t {
+	static {
+		this.styles = r(c);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+h = e([i("flint-table-head")], h);
+var g = class extends t {
+	constructor(...e) {
+		super(...e), this.striped = !1;
+	}
+	static {
+		this.styles = r(l);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "striped", void 0), g = e([i("flint-table-body")], g);
+var _ = class extends t {
+	constructor(...e) {
+		super(...e), this.selected = !1, this.hover = !1;
+	}
+	static {
+		this.styles = r(u);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "selected", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], _.prototype, "hover", void 0), _ = e([i("flint-table-row")], _);
+var v = class extends t {
+	constructor(...e) {
+		super(...e), this.header = !1, this.align = "left", this.padding = "normal";
+	}
+	static {
+		this.styles = r(d);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], v.prototype, "header", void 0), e([a({
+	type: String,
+	reflect: !0
+})], v.prototype, "align", void 0), e([a({
+	type: String,
+	reflect: !0
+})], v.prototype, "padding", void 0), v = e([i("flint-table-cell")], v);
+var y = class extends t {
+	static {
+		this.styles = r(f);
+	}
+	render() {
+		return n`<slot></slot>`;
+	}
+};
+y = e([i("flint-table-footer")], y);
+//#endregion
+export { y as a, p as i, g as n, h as o, v as r, _ as s, m as t };

package/dist/_shared/flint-table-pagination-BrJ56t-r.js

@@ -0,0 +1,97 @@
+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, state as o } from "lit/decorators.js";
+//#region src/table/flint-table-pagination.css?inline
+var s = ":host{font-family:var(--flint-font-family);color:var(--flint-text-color-muted);border-top:1px solid var(--flint-border-color);justify-content:flex-end;align-items:center;padding:8px 16px;font-size:.875rem;display:flex}.spacer{flex:100%}.actions{align-items:center;gap:16px;display:flex}.nav-buttons{gap:4px;display:flex}button{cursor:pointer;width:32px;height:32px;color:var(--flint-text-color);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background-color .2s;display:flex}button:hover:not(:disabled){background-color:var(--flint-hover-color)}button:disabled{color:var(--flint-text-color-muted);cursor:not-allowed}select{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;background:0 0;border:none;outline:none;padding:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.count = 0, this.page = 0, this.rowsPerPage = 10, this.rowsPerPageOptions = [
+			5,
+			10,
+			25
+		], this.defaultPage = 0, this.defaultRowsPerPage = -1, this.showFirstLast = !1, this.labelRowsPerPage = "Rows per page:", this._page = 0, this._rowsPerPage = 10, this._firstUpdate = !0;
+	}
+	static {
+		this.styles = r(s);
+	}
+	willUpdate(e) {
+		if (this._firstUpdate) {
+			this._firstUpdate = !1, this._page = this.defaultPage > 0 ? this.defaultPage : this.page, this._rowsPerPage = this.defaultRowsPerPage > 0 ? this.defaultRowsPerPage : this.rowsPerPage;
+			return;
+		}
+		e.has("page") && (this._page = this.page), e.has("rowsPerPage") && (this._rowsPerPage = this.rowsPerPage);
+	}
+	_go(e) {
+		let t = this._page + e;
+		this._page = t, this.dispatchEvent(new CustomEvent("flint-pagination-page-change", {
+			detail: { page: t },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_goTo(e) {
+		this._page = e, this.dispatchEvent(new CustomEvent("flint-pagination-page-change", {
+			detail: { page: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleRowChange(e) {
+		let t = parseInt(e.target.value);
+		this._rowsPerPage = t, this._page = 0, this.dispatchEvent(new CustomEvent("flint-pagination-rows-per-page-change", {
+			detail: { rowsPerPage: t },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	get _lastPage() {
+		return Math.max(0, Math.ceil(this.count / this._rowsPerPage) - 1);
+	}
+	render() {
+		let e = this._page * this._rowsPerPage + 1, t = Math.min(this.count, (this._page + 1) * this._rowsPerPage), r = this._page === 0, i = t >= this.count;
+		return n`
+      <div class="spacer"></div>
+      <div class="actions">
+        <span>${this.labelRowsPerPage}</span>
+        <select @change=${this._handleRowChange} aria-label="${this.labelRowsPerPage}">
+          ${this.rowsPerPageOptions.map((e) => n`
+            <option value=${e} ?selected=${this._rowsPerPage === e}>${e}</option>
+          `)}
+        </select>
+        <span>${e}-${t} of ${this.count}</span>
+        <div class="nav-buttons">
+          ${this.showFirstLast ? n`
+            <button ?disabled=${r} @click=${() => this._goTo(0)} aria-label="First page">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/></svg>
+            </button>
+          ` : ""}
+          <button ?disabled=${r} @click=${() => this._go(-1)} aria-label="Previous page">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
+          </button>
+          <button ?disabled=${i} @click=${() => this._go(1)} aria-label="Next page">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+          </button>
+          ${this.showFirstLast ? n`
+            <button ?disabled=${i} @click=${() => this._goTo(this._lastPage)} aria-label="Last page">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/></svg>
+            </button>
+          ` : ""}
+        </div>
+      </div>
+    `;
+	}
+};
+e([a({ type: Number })], c.prototype, "count", void 0), e([a({ type: Number })], c.prototype, "page", void 0), e([a({ type: Number })], c.prototype, "rowsPerPage", void 0), e([a({ type: Array })], c.prototype, "rowsPerPageOptions", void 0), e([a({
+	type: Number,
+	attribute: "default-page"
+})], c.prototype, "defaultPage", void 0), e([a({
+	type: Number,
+	attribute: "default-rows-per-page"
+})], c.prototype, "defaultRowsPerPage", void 0), e([a({
+	type: Boolean,
+	attribute: "show-first-last"
+})], c.prototype, "showFirstLast", void 0), e([a({
+	type: String,
+	attribute: "label-rows-per-page"
+})], c.prototype, "labelRowsPerPage", void 0), e([o()], c.prototype, "_page", void 0), e([o()], c.prototype, "_rowsPerPage", void 0), c = e([i("flint-table-pagination")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-table-sort-label-C4mkQmDM.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/table/flint-table-sort-label.css?inline
+var s = ":host{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;transition:color .2s;display:inline-flex}:host(:hover){color:var(--flint-text-color)}:host([active]){color:var(--flint-text-color);font-weight:700}.icon{opacity:0;width:18px;height:18px;margin-left:4px;transition:transform .2s,opacity .2s}:host(:hover) .icon,:host([active]) .icon{opacity:1}.icon.desc{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = class extends t {
+	constructor(...e) {
+		super(...e), this.active = !1, this.direction = "asc";
+	}
+	static {
+		this.styles = r(s);
+	}
+	updated(e) {
+		if (e.has("active") || e.has("direction")) {
+			let e = this.active ? this.direction === "asc" ? "ascending" : "descending" : "none";
+			this.setAttribute("aria-sort", e);
+		}
+	}
+	render() {
+		return n`
+      <slot></slot>
+      <svg class=${o({
+			icon: !0,
+			asc: this.direction === "asc",
+			desc: this.direction === "desc"
+		})} viewBox="0 0 24 24" fill="currentColor">
+        <path d="M7 10l5 5 5-5z"/>
+      </svg>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "active", void 0), e([a({ type: String })], c.prototype, "direction", void 0), c = e([i("flint-table-sort-label")], c);
+//#endregion
+export { c as t };