@getufy/flint-ui 0.1.0

package/dist/_shared/flint-box-TbPTowiO.js

@@ -0,0 +1,60 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, unsafeCSS as n } from "lit";
+import { customElement as r, property as i } from "lit/decorators.js";
+import { styleMap as a } from "lit/directives/style-map.js";
+import { html as o, unsafeStatic as s } from "lit/static-html.js";
+//#region src/box/flint-box.css?inline
+var c = ":host{background-color:var(--flint-box-bg,transparent);color:var(--flint-box-color,inherit);border:var(--flint-box-border,none);border-radius:var(--flint-box-border-radius,0);box-shadow:var(--flint-box-shadow,none);padding:var(--flint-box-padding,0);display:block}", l = new Set([
+	"div",
+	"span",
+	"section",
+	"article",
+	"header",
+	"footer",
+	"main",
+	"aside",
+	"nav",
+	"ul",
+	"ol",
+	"li",
+	"p",
+	"form",
+	"fieldset",
+	"label",
+	"figure",
+	"figcaption",
+	"address",
+	"blockquote",
+	"details",
+	"summary",
+	"dialog"
+]), u = class extends t {
+	constructor(...e) {
+		super(...e), this.component = "div", this._safeTag = "div";
+	}
+	static {
+		this.styles = n(c);
+	}
+	willUpdate(e) {
+		e.has("component") && (l.has(this.component) ? this._safeTag = this.component : (this._safeTag = "div", this.dispatchEvent(new CustomEvent("flint-box-warning", {
+			bubbles: !0,
+			composed: !0,
+			detail: { message: `Unknown component tag "${this.component}", falling back to "div".` }
+		}))));
+	}
+	_getStyles() {
+		let e = {};
+		return this.m && (e.margin = this.m), this.mx && (e.marginLeft = this.mx, e.marginRight = this.mx), this.my && (e.marginTop = this.my, e.marginBottom = this.my), this.mt && (e.marginTop = this.mt), this.mr && (e.marginRight = this.mr), this.mb && (e.marginBottom = this.mb), this.ml && (e.marginLeft = this.ml), this.p && (e.padding = this.p), this.px && (e.paddingLeft = this.px, e.paddingRight = this.px), this.py && (e.paddingTop = this.py, e.paddingBottom = this.py), this.pt && (e.paddingTop = this.pt), this.pr && (e.paddingRight = this.pr), this.pb && (e.paddingBottom = this.pb), this.pl && (e.paddingLeft = this.pl), this.display && (e.display = this.display), this.flexDirection && (e.flexDirection = this.flexDirection), this.alignItems && (e.alignItems = this.alignItems), this.justifyContent && (e.justifyContent = this.justifyContent), this.flexWrap && (e.flexWrap = this.flexWrap), this.flexBasis && (e.flexBasis = this.flexBasis), this.flexGrow && (e.flexGrow = this.flexGrow), this.flexShrink && (e.flexShrink = this.flexShrink), this.gap && (e.gap = this.gap), this.bgcolor && (e.backgroundColor = this.bgcolor === "primary" ? "var(--flint-primary-color)" : this.bgcolor === "secondary" ? "var(--flint-secondary-color)" : this.bgcolor), this.color && (e.color = this.color === "primary" ? "var(--flint-primary-color)" : this.color === "secondary" ? "var(--flint-secondary-color)" : this.color), this.border && (e.border = this.border), this.borderRadius && (e.borderRadius = this.borderRadius), this.boxShadow && (e.boxShadow = this.boxShadow), this.width && (e.width = this.width), this.height && (e.height = this.height), e;
+	}
+	render() {
+		let e = s(this._safeTag);
+		return o`
+      <${e} style=${a(this._getStyles())}>
+        <slot></slot>
+      </${e}>
+    `;
+	}
+};
+e([i({ type: String })], u.prototype, "component", void 0), e([i({ type: String })], u.prototype, "m", void 0), e([i({ type: String })], u.prototype, "mt", void 0), e([i({ type: String })], u.prototype, "mr", void 0), e([i({ type: String })], u.prototype, "mb", void 0), e([i({ type: String })], u.prototype, "ml", void 0), e([i({ type: String })], u.prototype, "mx", void 0), e([i({ type: String })], u.prototype, "my", void 0), e([i({ type: String })], u.prototype, "p", void 0), e([i({ type: String })], u.prototype, "pt", void 0), e([i({ type: String })], u.prototype, "pr", void 0), e([i({ type: String })], u.prototype, "pb", void 0), e([i({ type: String })], u.prototype, "pl", void 0), e([i({ type: String })], u.prototype, "px", void 0), e([i({ type: String })], u.prototype, "py", void 0), e([i({ type: String })], u.prototype, "display", void 0), e([i({ type: String })], u.prototype, "flexDirection", void 0), e([i({ type: String })], u.prototype, "alignItems", void 0), e([i({ type: String })], u.prototype, "justifyContent", void 0), e([i({ type: String })], u.prototype, "flexWrap", void 0), e([i({ type: String })], u.prototype, "flexBasis", void 0), e([i({ type: String })], u.prototype, "flexGrow", void 0), e([i({ type: String })], u.prototype, "flexShrink", void 0), e([i({ type: String })], u.prototype, "gap", void 0), e([i({ type: String })], u.prototype, "bgcolor", void 0), e([i({ type: String })], u.prototype, "color", void 0), e([i({ type: String })], u.prototype, "border", void 0), e([i({ type: String })], u.prototype, "borderRadius", void 0), e([i({ type: String })], u.prototype, "boxShadow", void 0), e([i({ type: String })], u.prototype, "width", void 0), e([i({ type: String })], u.prototype, "height", void 0), u = e([r("flint-box")], u);
+//#endregion
+export { u as t };

package/dist/_shared/flint-breadcrumbs-DjFiMWIj.js

@@ -0,0 +1,83 @@
+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";
+//#region src/breadcrumbs/flint-breadcrumbs.css?inline
+var c = ":host{display:block}.breadcrumbs-ol{flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;display:flex}.breadcrumb-li{align-items:center;display:flex}.separator{-webkit-user-select:none;user-select:none;margin-left:var(--flint-breadcrumb-separator-margin,8px);margin-right:var(--flint-breadcrumb-separator-margin,8px);color:var(--flint-breadcrumb-color,var(--flint-text-color-muted));display:flex}::slotted(*){font-family:var(--flint-font-family);font-size:var(--flint-breadcrumb-font-size,.875rem);color:var(--flint-breadcrumb-color,var(--flint-text-color-muted));text-decoration:none;transition:color .2s}::slotted(a:hover){color:var(--flint-breadcrumb-color-active,var(--flint-text-color));text-decoration:underline}::slotted([aria-current=page]),::slotted(.active){color:var(--flint-breadcrumb-color-active,var(--flint-text-color));pointer-events:none;font-weight:500}.collapsed-button{background:var(--flint-breadcrumb-collapsed-bg,var(--flint-hover-color));border-radius:var(--flint-breadcrumb-collapsed-radius,var(--flint-border-radius-md));cursor:pointer;font-size:var(--flint-breadcrumb-font-size,.875rem);color:var(--flint-breadcrumb-color,var(--flint-text-color-muted));border:none;justify-content:center;align-items:center;padding:2px 8px;line-height:1.5;transition:background-color .2s;display:flex}.collapsed-button:hover{background-color:var(--flint-breadcrumb-collapsed-hover-bg,var(--flint-active-color))}.collapsed-button:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:2px}@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.maxItems = 8, this.itemsBefore = 1, this.itemsAfter = 1, this.separator = "/", this._expanded = !1, this._itemsCount = 0, this._separatorNode = null;
+	}
+	static {
+		this.styles = i(c);
+	}
+	_handleSlotChange() {
+		let e = Array.from(this.children).filter((e) => !e.slot || e.slot.startsWith("breadcrumb-item-"));
+		e.forEach((e, t) => {
+			let n = `breadcrumb-item-${t}`;
+			e.getAttribute("slot") !== n && e.setAttribute("slot", n);
+		}), this._itemsCount = e.length;
+	}
+	_handleSeparatorSlotChange(e) {
+		let t = e.target.assignedNodes({ flatten: !0 });
+		this._separatorNode = t.length > 0 ? t[0].cloneNode(!0) : null;
+	}
+	_renderSeparator() {
+		return n`
+            <span class="separator" aria-hidden="true">
+                ${this._separatorNode ? this._separatorNode.cloneNode(!0) : this.separator}
+            </span>
+        `;
+	}
+	_renderItem(e, t) {
+		return n`
+            <li class="breadcrumb-li" aria-current=${t ? "page" : r}>
+                <slot name="breadcrumb-item-${e}"></slot>
+                ${t ? "" : this._renderSeparator()}
+            </li>
+        `;
+	}
+	_renderCollapsed() {
+		let e = this._itemsCount;
+		if (e === 0) return n``;
+		if (e <= this.maxItems || this._expanded) return Array.from({ length: e }).map((t, n) => this._renderItem(n, n === e - 1));
+		let t = Math.min(this.itemsBefore, e), r = Math.min(this.itemsAfter, e - t);
+		if (t + r >= e) return Array.from({ length: e }).map((t, n) => this._renderItem(n, n === e - 1));
+		let i = Array.from({ length: t }).map((e, t) => t), a = Array.from({ length: r }).map((t, n) => e - r + n);
+		return n`
+            ${i.map((e) => this._renderItem(e, !1))}
+            <li class="breadcrumb-li">
+                <button class="collapsed-button" @click=${() => {
+			this._expanded = !0;
+		}} aria-label="Show all breadcrumbs">
+                    &hellip;
+                </button>
+                ${this._renderSeparator()}
+            </li>
+            ${a.map((e, t) => this._renderItem(e, t === a.length - 1))}
+        `;
+	}
+	render() {
+		return n`
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumbs-ol">
+                    ${this._renderCollapsed()}
+                </ol>
+            </nav>
+            <div style="display: none" aria-hidden="true">
+                <slot @slotchange=${this._handleSlotChange}></slot>
+                <slot name="separator" @slotchange=${this._handleSeparatorSlotChange}></slot>
+            </div>
+        `;
+	}
+};
+e([o({
+	type: Number,
+	attribute: "max-items"
+})], l.prototype, "maxItems", void 0), e([o({
+	type: Number,
+	attribute: "items-before"
+})], l.prototype, "itemsBefore", void 0), e([o({
+	type: Number,
+	attribute: "items-after"
+})], l.prototype, "itemsAfter", void 0), e([o({ type: String })], l.prototype, "separator", void 0), e([s()], l.prototype, "_expanded", void 0), e([s()], l.prototype, "_itemsCount", void 0), e([s()], l.prototype, "_separatorNode", void 0), l = e([a("flint-breadcrumbs")], l);
+//#endregion
+export { l as t };

package/dist/_shared/flint-button-DwrmFg7O.js

@@ -0,0 +1,39 @@
+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/button/flint-button.css?inline
+var s = ":host{display:inline-block}:host([full-width]){display:block}button{font-family:var(--flint-font-family);border-radius:var(--flint-button-border-radius,var(--flint-border-radius-md));cursor:pointer;width:100%;box-shadow:var(--flint-shadow-sm);border:none;justify-content:center;align-items:center;gap:8px;font-weight:600;transition:all .2s;display:inline-flex}.primary{background-color:var(--flint-primary-color);color:var(--flint-text-color-on-primary)}.primary:hover{background-color:var(--flint-primary-color-hover)}.primary:active{background-color:var(--flint-primary-color-active)}.secondary{background-color:var(--flint-surface-1);color:var(--flint-text-color);border:1px solid var(--flint-input-border-color)}.secondary:hover{background-color:var(--flint-hover-color)}.secondary:active{background-color:var(--flint-active-color)}.destructive{background-color:var(--flint-destructive-color);color:var(--flint-text-color-on-primary)}.destructive:hover{background-color:var(--flint-destructive-color-hover)}.destructive:active{background-color:var(--flint-destructive-color-active)}.small{padding:6px 12px;font-size:14px}.medium{padding:10px 16px;font-size:14px}.large{padding:14px 20px;font-size:16px}button:disabled{opacity:.6;cursor:not-allowed}@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.variant = "primary", this.size = "medium", this.disabled = !1, this.fullWidth = !1;
+	}
+	static {
+		this.styles = r(s);
+	}
+	render() {
+		return n`
+      <button
+        type="button"
+        class=${o({
+			primary: this.variant === "primary",
+			secondary: this.variant === "secondary",
+			destructive: this.variant === "destructive",
+			small: this.size === "small",
+			medium: this.size === "medium",
+			large: this.size === "large"
+		})}
+        ?disabled=${this.disabled}
+        part="button"
+      >
+        <slot></slot>
+      </button>
+    `;
+	}
+};
+e([a({ type: String })], c.prototype, "variant", void 0), e([a({ type: String })], c.prototype, "size", void 0), e([a({ type: Boolean })], c.prototype, "disabled", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "full-width"
+})], c.prototype, "fullWidth", void 0), c = e([i("flint-button")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-button-group-CdwiDTLI.js

@@ -0,0 +1,20 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i } from "lit/decorators.js";
+//#region src/button/flint-button-group.css?inline
+var a = ":host{border-radius:var(--flint-border-radius-md,6px);display:inline-flex}::slotted(flint-button){position:relative}::slotted(flint-button:hover),::slotted(flint-button:focus-within),::slotted(flint-button:active){z-index:1}::slotted(flint-button:not(:first-child)){margin-left:-1px}::slotted(flint-button){--flint-button-border-radius:0}::slotted(flint-button:first-child){--flint-button-border-radius:var(--flint-border-radius-md,6px) 0 0 var(--flint-border-radius-md,6px)}::slotted(flint-button:last-child){--flint-button-border-radius:0 var(--flint-border-radius-md,6px) var(--flint-border-radius-md,6px) 0}::slotted(flint-button:first-child:last-child){--flint-button-border-radius:var(--flint-border-radius-md,6px)}", o = class extends t {
+	static {
+		this.styles = r(a);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group");
+	}
+	render() {
+		return n`
+      <slot></slot>
+    `;
+	}
+};
+o = e([i("flint-button-group")], o);
+//#endregion
+export { o as t };

package/dist/_shared/flint-card-C-j6SYxM.js

@@ -0,0 +1,33 @@
+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/card/flint-card.css?inline
+var s = ":host{font-family:Inter,sans-serif;display:block}.card{background:var(--flint-card-background);border-radius:var(--flint-card-border-radius);box-shadow:var(--flint-card-shadow);border:1px solid var(--flint-card-border-color);padding:var(--flint-card-padding,0);flex-direction:column;transition:box-shadow .3s,border-color .3s;display:flex;overflow:hidden}.card.interactive:hover{box-shadow:var(--flint-card-shadow-hover);cursor:pointer}.card.variant-outlined{box-shadow:none;border:1px solid var(--flint-card-border-color)}.card.variant-flat{box-shadow:none;background:var(--flint-card-background-flat);border:none}@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.variant = "elevated", this.interactive = !1;
+	}
+	static {
+		this.styles = r(s);
+	}
+	render() {
+		return n`
+      <div class=${o({
+			card: !0,
+			[`variant-${this.variant}`]: !0,
+			interactive: this.interactive
+		})} part="card">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "interactive", void 0), c = e([i("flint-card")], c);
+//#endregion
+export { c as t };

package/dist/_shared/flint-card-action-area-07Emwi1d.js

@@ -0,0 +1,22 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i } from "lit/decorators.js";
+//#region src/card/flint-card-action-area.css?inline
+var a = ":host{cursor:pointer;width:100%;display:block;position:relative}.action-area{transition:background-color .2s}.action-area:hover{background-color:var(--flint-card-action-area-hover,var(--flint-hover-color))}.action-area:active{background-color:var(--flint-card-action-area-active,var(--flint-active-color))}.action-area:focus-visible{outline:2px solid var(--flint-card-action-area-focus-ring,var(--flint-primary-color));outline-offset:-2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", o = class extends t {
+	static {
+		this.styles = r(a);
+	}
+	render() {
+		return n`
+      <div class="action-area" part="action-area" @keydown=${this._handleKeyDown} tabindex="0" role="button">
+        <slot></slot>
+      </div>
+    `;
+	}
+	_handleKeyDown(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.click());
+	}
+};
+o = e([i("flint-card-action-area")], o);
+//#endregion
+export { o as t };

package/dist/_shared/flint-card-actions-C74ZbYNI.js

@@ -0,0 +1,17 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i } from "lit/decorators.js";
+//#region src/card/flint-card-actions.css?inline
+var a = ":host{padding:var(--flint-card-actions-padding,8px 16px);align-items:center;gap:8px;display:flex}", o = class extends t {
+	static {
+		this.styles = r(a);
+	}
+	render() {
+		return n`
+      <slot></slot>
+    `;
+	}
+};
+o = e([i("flint-card-actions")], o);
+//#endregion
+export { o as t };

package/dist/_shared/flint-card-content-C3Gv3Ps5.js

@@ -0,0 +1,17 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, html as n, unsafeCSS as r } from "lit";
+import { customElement as i } from "lit/decorators.js";
+//#region src/card/flint-card-content.css?inline
+var a = ":host{padding:var(--flint-card-content-padding,16px 24px);font-size:var(--flint-card-content-size,1rem);color:var(--flint-text-color-muted);line-height:1.5;display:block}", o = class extends t {
+	static {
+		this.styles = r(a);
+	}
+	render() {
+		return n`
+      <slot></slot>
+    `;
+	}
+};
+o = e([i("flint-card-content")], o);
+//#endregion
+export { o as t };

package/dist/_shared/flint-card-header-HxL5TlBx.js

@@ -0,0 +1,28 @@
+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/card/flint-card-header.css?inline
+var o = ":host{padding:var(--flint-card-header-padding,16px 24px);display:block}.header{align-items:center;gap:16px;display:flex}.content{flex:auto}.title{font-size:var(--flint-card-title-size,1.25rem);color:var(--flint-text-color);margin:0;font-weight:700;line-height:1.4}.subtitle{font-size:var(--flint-card-subtitle-size,.875rem);color:var(--flint-text-color-muted);margin:4px 0 0;font-weight:500}", s = class extends t {
+	constructor(...e) {
+		super(...e), this.title = "", this.subtitle = "";
+	}
+	static {
+		this.styles = r(o);
+	}
+	render() {
+		return n`
+      <div class="header" part="header">
+        <slot name="avatar"></slot>
+        <div class="content" part="content">
+          ${this.title ? n`<h3 class="title" part="title">${this.title}</h3>` : ""}
+          ${this.subtitle ? n`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : ""}
+          <slot></slot>
+        </div>
+        <slot name="action"></slot>
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], s.prototype, "title", void 0), e([a({ type: String })], s.prototype, "subtitle", void 0), s = e([i("flint-card-header")], s);
+//#endregion
+export { s as t };

package/dist/_shared/flint-card-media-B1U9TYsC.js

@@ -0,0 +1,26 @@
+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/card/flint-card-media.css?inline
+var o = ":host{width:100%;display:block;overflow:hidden}.media{width:100%;height:var(--flint-card-media-height,200px);background-position:50%;background-repeat:no-repeat;background-size:cover}img{object-fit:cover;width:100%;height:100%;display:block}", s = class extends t {
+	constructor(...e) {
+		super(...e), this.image = "", this.alt = "", this.height = "";
+	}
+	static {
+		this.styles = r(o);
+	}
+	render() {
+		if (this.image) {
+			let e = this.height ? isNaN(Number(this.height)) ? this.height : `${this.height}px` : "";
+			return n`
+                <div class="media" part="media" style=${e ? `height: ${e}` : ""}>
+                    <img src="${this.image}" alt="${this.alt}" part="img" loading="lazy" />
+                </div>
+            `;
+		}
+		return n`<slot></slot>`;
+	}
+};
+e([a({ type: String })], s.prototype, "image", void 0), e([a({ type: String })], s.prototype, "alt", void 0), e([a({ type: String })], s.prototype, "height", void 0), s = e([i("flint-card-media")], s);
+//#endregion
+export { s as t };

package/dist/_shared/flint-carousel-jwZ5C4e_.js

@@ -0,0 +1,224 @@
+import { t as e } from "./decorate-DPS9PT8d.js";
+import { LitElement as t, css as n, html as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/carousel/flint-carousel-content.css?inline
+var s = ":host{width:100%;display:block;overflow:hidden}.track{gap:var(--flint-carousel-gap,0px);will-change:transform;height:100%;transition:transform var(--flint-carousel-duration,.35s) var(--flint-carousel-ease,cubic-bezier(.25, .1, .25, 1));flex-wrap:nowrap;display:flex}:host([orientation=vertical]){height:var(--flint-carousel-height,320px)}:host([orientation=vertical]) .track{flex-direction:column}::slotted(flint-carousel-item){flex:0 0 calc((100% - (var(--flint-carousel-items-per-view,1) - 1) * var(--flint-carousel-gap,0px)) / var(--flint-carousel-items-per-view,1));min-width:0;min-height:0}:host([orientation=vertical]) ::slotted(flint-carousel-item){flex:0 0 calc((var(--flint-carousel-height,320px) - (var(--flint-carousel-items-per-view,1) - 1) * var(--flint-carousel-gap,0px)) / var(--flint-carousel-items-per-view,1));min-height:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", c = ":host{flex-shrink:0;min-width:0;display:block}.item{width:100%;height:100%}", l = ":host{display:block;position:relative}.carousel{outline:none;width:100%;position:relative}.carousel:focus-visible{outline:2px solid var(--flint-primary-color);outline-offset:4px;border-radius:var(--flint-border-radius-md)}", u = n`
+  :host {
+    display: inline-flex;
+  }
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--flint-carousel-nav-button-size, 36px);
+    height: var(--flint-carousel-nav-button-size, 36px);
+    border-radius: 50%;
+    border: 1px solid var(--flint-border-color, #e5e7eb);
+    background: var(--flint-surface-background, #ffffff);
+    color: var(--flint-text-color, #111827);
+    cursor: pointer;
+    padding: 0;
+    transition: background 0.2s, border-color 0.2s;
+    box-shadow: var(--flint-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  }
+  button:hover:not(:disabled) {
+    background: var(--flint-surface-background-flat, #f3f4f6);
+    border-color: var(--flint-input-border-color, #d1d5db);
+  }
+  button:focus-visible {
+    outline: 2px solid var(--flint-primary-color, #2563eb);
+    outline-offset: 2px;
+  }
+  button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+`, d = class extends t {
+	constructor(...e) {
+		super(...e), this.index = 0, this.itemsPerView = 1, this.orientation = "horizontal";
+	}
+	static {
+		this.styles = i(s);
+	}
+	updated(e) {
+		e.has("itemsPerView") && this.style.setProperty("--flint-carousel-items-per-view", String(this.itemsPerView));
+	}
+	render() {
+		let e = `calc((100% + var(--flint-carousel-gap, 0px)) / ${this.itemsPerView})`, t = `calc(-${this.index} * ${e})`;
+		return r`
+      <div
+        class="track"
+        style="transform: ${this.orientation === "vertical" ? `translateY(${t})` : `translateX(${t})`}"
+        aria-live="polite"
+        aria-atomic="false"
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([o({ type: Number })], d.prototype, "index", void 0), e([o({
+	type: Number,
+	attribute: "items-per-view"
+})], d.prototype, "itemsPerView", void 0), e([o({ reflect: !0 })], d.prototype, "orientation", void 0), d = e([a("flint-carousel-content")], d);
+var f = class extends t {
+	static {
+		this.styles = i(c);
+	}
+	render() {
+		return r`
+      <div class="item" role="group" aria-roledescription="slide">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+f = e([a("flint-carousel-item")], f);
+var p = class extends t {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.orientation = "horizontal", this._handleClick = () => {
+			this.closest("flint-carousel")?.previous();
+		};
+	}
+	static {
+		this.styles = u;
+	}
+	render() {
+		let e = this.orientation === "vertical" ? r`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="18 15 12 9 6 15"></polyline></svg>` : r`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"></polyline></svg>`;
+		return r`
+      <button
+        type="button"
+        part="button"
+        ?disabled=${this.disabled}
+        aria-label="Go to previous slide"
+        @click=${this._handleClick}
+      >
+        <slot>${e}</slot>
+      </button>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "disabled", void 0), e([o({ reflect: !0 })], p.prototype, "orientation", void 0), p = e([a("flint-carousel-previous")], p);
+var m = class extends t {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.orientation = "horizontal", this._handleClick = () => {
+			this.closest("flint-carousel")?.next();
+		};
+	}
+	static {
+		this.styles = u;
+	}
+	render() {
+		let e = this.orientation === "vertical" ? r`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>` : r`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"></polyline></svg>`;
+		return r`
+      <button
+        type="button"
+        part="button"
+        ?disabled=${this.disabled}
+        aria-label="Go to next slide"
+        @click=${this._handleClick}
+      >
+        <slot>${e}</slot>
+      </button>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], m.prototype, "disabled", void 0), e([o({ reflect: !0 })], m.prototype, "orientation", void 0), m = e([a("flint-carousel-next")], m);
+var h = class extends t {
+	constructor(...e) {
+		super(...e), this.loop = !1, this.orientation = "horizontal", this.autoplay = 0, this.itemsPerView = 1, this.label = "Carousel", this._currentIndex = 0, this._total = 0, this._observer = null, this._autoplayTimer = null, this._handleKeydown = (e) => {
+			let t = this.orientation === "vertical", n = t ? "ArrowUp" : "ArrowLeft", r = t ? "ArrowDown" : "ArrowRight";
+			e.key === n ? (e.preventDefault(), this.previous()) : e.key === r && (e.preventDefault(), this.next());
+		};
+	}
+	static {
+		this.styles = i(l);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._observer?.disconnect(), this._observer = null, this._stopAutoplay();
+	}
+	firstUpdated() {
+		this._countItems(), this._syncNavigation();
+		let e = this.querySelector("flint-carousel-content");
+		e && (this._observer = new MutationObserver(() => {
+			this._countItems(), this._syncNavigation();
+		}), this._observer.observe(e, { childList: !0 })), this.autoplay > 0 && this._startAutoplay();
+	}
+	updated(e) {
+		e.has("autoplay") && (this._stopAutoplay(), this.autoplay > 0 && this._startAutoplay()), (e.has("orientation") || e.has("loop") || e.has("itemsPerView")) && this._syncNavigation();
+	}
+	_countItems() {
+		let e = this.querySelector("flint-carousel-content"), t = e ? e.querySelectorAll("flint-carousel-item").length : 0;
+		t !== this._total && (this._total = t, this._currentIndex = Math.min(this._currentIndex, Math.max(0, t - 1)));
+	}
+	_syncNavigation() {
+		let e = this.querySelector("flint-carousel-content"), t = this.querySelector("flint-carousel-previous"), n = this.querySelector("flint-carousel-next"), r = Math.max(0, this._total - this.itemsPerView);
+		e && (e.index = this._currentIndex, e.orientation = this.orientation, e.itemsPerView = this.itemsPerView), t && (t.disabled = !this.loop && this._currentIndex === 0, t.orientation = this.orientation), n && (n.disabled = !this.loop && (this._total === 0 || this._currentIndex >= r), n.orientation = this.orientation);
+	}
+	_fireChange() {
+		this.dispatchEvent(new CustomEvent("flint-carousel-change", {
+			detail: {
+				index: this._currentIndex,
+				total: this._total
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	next() {
+		if (this._total === 0) return;
+		let e = Math.max(0, this._total - this.itemsPerView);
+		!this.loop && this._currentIndex >= e || (this._currentIndex = this.loop ? (this._currentIndex + 1) % this._total : this._currentIndex + 1, this._syncNavigation(), this._fireChange());
+	}
+	previous() {
+		this._total !== 0 && (!this.loop && this._currentIndex <= 0 || (this._currentIndex = this.loop ? (this._currentIndex - 1 + this._total) % this._total : this._currentIndex - 1, this._syncNavigation(), this._fireChange()));
+	}
+	goTo(e) {
+		e < 0 || e >= this._total || e === this._currentIndex || (this._currentIndex = e, this._syncNavigation(), this._fireChange());
+	}
+	get currentIndex() {
+		return this._currentIndex;
+	}
+	get total() {
+		return this._total;
+	}
+	_startAutoplay() {
+		this._stopAutoplay(), this._autoplayTimer = setInterval(() => {
+			let e = Math.max(0, this._total - this.itemsPerView);
+			this.loop || this._currentIndex < e ? this.next() : this._stopAutoplay();
+		}, this.autoplay);
+	}
+	_stopAutoplay() {
+		this._autoplayTimer !== null && (clearInterval(this._autoplayTimer), this._autoplayTimer = null);
+	}
+	render() {
+		return r`
+      <div
+        class="carousel"
+        role="region"
+        aria-roledescription="carousel"
+        aria-label="${this.label}"
+        tabindex="0"
+        @keydown=${this._handleKeydown}
+      >
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([o({ type: Boolean })], h.prototype, "loop", void 0), e([o({ reflect: !0 })], h.prototype, "orientation", void 0), e([o({ type: Number })], h.prototype, "autoplay", void 0), e([o({
+	type: Number,
+	attribute: "items-per-view"
+})], h.prototype, "itemsPerView", void 0), e([o()], h.prototype, "label", void 0), h = e([a("flint-carousel")], h);
+//#endregion
+export { p as a, m as i, d as n, f as r, h as t };