@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/top-app-bar-TrnjKzOX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-app-bar-TrnjKzOX.js","names":[],"sources":["../../src/components/top-app-bar/top-app-bar.css.ts","../../src/components/top-app-bar/top-app-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const topAppBarStyles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n    background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface, #FEF7FF));\n    color: var(--md-top-app-bar-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([fixed]) {\n    position: sticky;\n    top: 0;\n    z-index: 8;\n  }\n\n  :host([elevated]) {\n    background-color: var(--md-top-app-bar-container-color, var(--md-sys-color-surface-container, #F3EDF7));\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n  }\n\n  .top-app-bar {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n    height: 64px;\n    padding: 0 4px;\n    box-sizing: border-box;\n    position: relative;\n  }\n\n  .leading {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 48px;\n    min-height: 48px;\n    flex-shrink: 0;\n  }\n\n  .trailing {\n    display: inline-flex;\n    align-items: center;\n    justify-content: flex-end;\n    min-height: 48px;\n    flex-shrink: 0;\n    gap: 4px;\n    margin-left: auto;\n  }\n\n  .title-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    overflow: hidden;\n    flex: 1;\n    min-width: 0;\n    padding: 0 12px;\n  }\n\n  .headline {\n    margin: 0;\n    font-size: var(--md-sys-typescale-title-large-size, 22px);\n    line-height: 28px;\n    font-weight: 400;\n    color: var(--md-top-app-bar-headline-color, var(--md-sys-color-on-surface, #1D1B20));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .subtitle {\n    margin: 0;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    font-weight: 400;\n    color: var(--md-top-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant, #49454F));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Center-aligned variant (Default) */\n  :host([variant=\"center-aligned\"]) .title-container,\n  :host(:not([variant])) .title-container {\n    text-align: center;\n    align-items: center;\n  }\n\n  /* Small variant */\n  :host([variant=\"small\"]) .title-container {\n    text-align: start;\n    align-items: flex-start;\n  }\n\n  /* Medium variant */\n  :host([variant=\"medium\"]) .headline-row {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    min-height: 48px;\n    padding: 0 16px 16px 16px;\n    box-sizing: border-box;\n  }\n\n  :host([variant=\"medium\"]) .headline-row .headline {\n    font-size: 24px;\n    line-height: 32px;\n    font-weight: 400;\n  }\n\n  /* Large variant */\n  :host([variant=\"large\"]) .headline-row {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    min-height: 88px;\n    padding: 0 16px 20px 16px;\n    box-sizing: border-box;\n  }\n\n  :host([variant=\"large\"]) .headline-row .headline {\n    font-size: 28px;\n    line-height: 36px;\n    font-weight: 400;\n  }\n\n  ::slotted(md-search-bar),\n  ::slotted(md-search) {\n    --md-search-bar-height: var(--md-top-app-bar-search-bar-height, 44px);\n    align-self: center;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { topAppBarStyles } from './top-app-bar.css.js';\n\nexport type TopAppBarVariant = 'center-aligned' | 'small' | 'medium' | 'large';\n\n/**\n * Material Design 3 Top App Bar component.\n *\n * @slot navigation - Leading navigation icon button (e.g. menu, back arrow). Also aliased as `leading-icon` or `leading`.\n * @slot headline - Primary title text. Also aliased as `title`.\n * @slot subtitle - Secondary subtitle text. Also aliased as `supporting-text`.\n * @slot actions - Trailing action icon buttons or menus. Also aliased as `trailing-icon` or `trailing`.\n * @slot - Default slot for additional bar contents.\n */\n@customElement('md-top-app-bar')\nexport class MdTopAppBar extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, topAppBarStyles];\n\n  @property({ type: String, reflect: true })\n  variant: TopAppBarVariant = 'center-aligned';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: Boolean, reflect: true })\n  elevated = false;\n\n  @property({ type: Boolean, reflect: true })\n  fixed = false;\n\n  override render() {\n    const isMultiRow = this.variant === 'medium' || this.variant === 'large';\n\n    const navigationSlot = html`\n      <div class=\"leading\">\n        <slot name=\"navigation\">\n          <slot name=\"leading-icon\">\n            <slot name=\"leading\"></slot>\n          </slot>\n        </slot>\n      </div>\n    `;\n\n    const actionsSlot = html`\n      <div class=\"trailing\">\n        <slot name=\"actions\">\n          <slot name=\"trailing-icon\">\n            <slot name=\"trailing\"></slot>\n          </slot>\n        </slot>\n      </div>\n    `;\n\n    const headlineSlot = html`\n      <slot name=\"headline\">\n        <slot name=\"title\">\n          ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n        </slot>\n      </slot>\n    `;\n\n    const subtitleSlot = html`\n      <slot name=\"subtitle\">\n        <slot name=\"supporting-text\">\n          ${this.subtitle ? html`<span class=\"subtitle\">${this.subtitle}</span>` : nothing}\n        </slot>\n      </slot>\n    `;\n\n    if (isMultiRow) {\n      return html`\n        <header class=\"top-app-bar\" role=\"banner\">\n          <div class=\"row\">\n            ${navigationSlot}\n            <slot></slot>\n            ${actionsSlot}\n          </div>\n          <div class=\"headline-row\">\n            <div class=\"title-container\">\n              ${headlineSlot}\n              ${subtitleSlot}\n            </div>\n          </div>\n        </header>\n      `;\n    }\n\n    return html`\n      <header class=\"top-app-bar\" role=\"banner\">\n        <div class=\"row\">\n          ${navigationSlot}\n          <div class=\"title-container\">\n            ${headlineSlot}\n            ${subtitleSlot}\n          </div>\n          <slot></slot>\n          ${actionsSlot}\n        </div>\n      </header>\n    `;\n  }\n}\n\n// Register md-top-bar as an alias\n@customElement('md-top-bar')\nexport class MdTopBar extends MdTopAppBar {}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-top-app-bar': MdTopAppBar;\n    'md-top-bar': MdTopAppBar;\n  }\n}\n"],"mappings":";;;;AAEA,IAAa,IAAkB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCerB,IAAN,cAA0B,EAAc;;EAgBrC,aAZoB,KAAA,UAAA,kBAGjB,KAAA,WAAA,IAGA,KAAA,WAAA,IAGA,KAAA,WAAA,IAGH,KAAA,QAAA;;;EAfiB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAe;;CAiB/D,SAAkB;EAChB,IAAM,IAAa,KAAK,YAAY,YAAY,KAAK,YAAY,SAE3D,IAAiB,CAAI;;;;;;;;OAUrB,IAAc,CAAI;;;;;;;;OAUlB,IAAe,CAAI;;;YAGjB,KAAK,WAAW,CAAI,0BAA0B,KAAK,SAAS,WAAW,EAAQ;;;OAKjF,IAAe,CAAI;;;YAGjB,KAAK,WAAW,CAAI,0BAA0B,KAAK,SAAS,WAAW,EAAQ;;;;EAuBvF,OAlBI,IACK,CAAI;;;cAGH,EAAe;;cAEf,EAAY;;;;gBAIV,EAAa;gBACb,EAAa;;;;UAOlB,CAAI;;;YAGH,EAAe;;cAEb,EAAa;cACb,EAAa;;;YAGf,EAAY;;;;CAItB;AACF;AAtFG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAhB3C,IAAA,EAAA,CAAA,EAAc,gBAAgB,CAAA,GAAA,CAAA;AA8FxB,IAAM,IAAN,cAAuB,EAAY,CAAC;AAD1C,IAAA,EAAA,CAAA,EAAc,YAAY,CAAA,GAAA,CAAA"}

package/dist/components/account-menu/account-menu.js

@@ -1,8 +1,2 @@
-import { a as o, i as t, n as r, r as a, t as e } from "../../chunks/account-menu-Dau0UHTl.js";
-export {
-  e as MdAccountDrawer,
-  r as MdAccountItem,
-  a as MdAccountMenu,
-  t as MdAccountProfile,
-  o as MdAccountProfileItem
-};
+import { a as e, i as t, n, r, t as i } from "../../chunks/account-menu-Bo7NghIm.js";
+export { i as MdAccountDrawer, n as MdAccountItem, r as MdAccountMenu, t as MdAccountProfile, e as MdAccountProfileItem };

package/dist/components/app-drawer/app-drawer.js

@@ -1,9 +1,2 @@
-import { a, i as r, n as e, o as s, r as M, t as d } from "../../chunks/app-drawer-Du1ePzxZ.js";
-export {
-  d as MdAppDrawer,
-  e as MdAppDrawerItem,
-  M as MdAppItem,
-  r as MdAppLauncher,
-  a as MdAppLauncherItem,
-  s as MdAppsMenu
-};
+import { a as e, i as t, n, o as r, r as i, t as a } from "../../chunks/app-drawer-DjKSuatE.js";
+export { a as MdAppDrawer, n as MdAppDrawerItem, i as MdAppItem, t as MdAppLauncher, e as MdAppLauncherItem, r as MdAppsMenu };

package/dist/components/badge/badge.js

@@ -1,4 +1,2 @@
-import { t as r } from "../../chunks/badge-G4EjcMoy.js";
-export {
-  r as MdBadge
-};
+import { t as e } from "../../chunks/badge-sZzNelZz.js";
+export { e as MdBadge };

package/dist/components/bottom-sheet/bottom-sheet.js

@@ -1,4 +1,2 @@
-import { t as o } from "../../chunks/bottom-sheet-q79BBYAj.js";
-export {
-  o as MdBottomSheet
-};
+import { t as e } from "../../chunks/bottom-sheet-BGgbUmKd.js";
+export { e as MdBottomSheet };

package/dist/components/button/button.js

@@ -1,4 +1,2 @@
-import { t as o } from "../../chunks/button-D2vn7kJ8.js";
-export {
-  o as MdButton
-};
+import { t as e } from "../../chunks/button-DeQQlYds.js";
+export { e as MdButton };

package/dist/components/button-group/button-group.js

@@ -1,4 +1,2 @@
-import { t } from "../../chunks/button-group-CNqvJx1n.js";
-export {
-  t as MdButtonGroup
-};
+import { t as e } from "../../chunks/button-group-R2jN8FXK.js";
+export { e as MdButtonGroup };

package/dist/components/card/card.js

@@ -1,4 +1,2 @@
-import { t as o } from "../../chunks/card-DVffdPpv.js";
-export {
-  o as MdCard
-};
+import { t as e } from "../../chunks/card-CVhWizDF.js";
+export { e as MdCard };

package/dist/components/carousel/carousel-item.js

@@ -1,4 +1,2 @@
-import { t as r } from "../../chunks/carousel-item-BG6kjjjk.js";
-export {
-  r as MdCarouselItem
-};
+import { t as e } from "../../chunks/carousel-item-DNp2zhP9.js";
+export { e as MdCarouselItem };

package/dist/components/carousel/carousel.js

@@ -1,168 +1,168 @@
-import { n as d, t as r } from "../../chunks/decorate-DXuynaiA.js";
-import "../../chunks/ripple-squbKHhj.js";
-import "../../chunks/focus-ring-CuiJuM-y.js";
-import "../../chunks/icon-DrNqcNEL.js";
-import { n as p, t as E } from "../../chunks/carousel-item-BG6kjjjk.js";
-import { html as n, nothing as m } from "lit";
-import { customElement as g, property as o, query as f, queryAssignedElements as y, state as u } from "lit/decorators.js";
-var s = class extends d {
-  constructor(...e) {
-    super(...e), this.layout = "multi-browse", this.activeIndex = 0, this.hideControls = !1, this.hideIndicators = !1, this.loop = !1, this.autoplay = !1, this.autoplayInterval = 5e3, this.itemSpacing = "", this.itemWidth = "", this.itemHeight = "", this.ariaLabelText = "Carousel", this.isAtStart = !0, this.isAtEnd = !1, this.itemCount = 0, this.autoplayTimer = null, this.isDragging = !1, this.dragStartX = 0, this.dragStartScrollLeft = 0, this.dragThresholdPassed = !1, this.isUserInteracting = !1, this.isProgrammaticScroll = !1, this.programmaticScrollTimer = null, this.scrollDebounceTimer = null, this.handleSlotChange = () => {
-      this.itemCount = this.items?.length || 0, this.syncItemsLayout(), this.updateControlsState();
-    }, this.handleMouseEnter = () => {
-      this.stopAutoplay();
-    }, this.handleMouseLeave = () => {
-      this.autoplay && this.startAutoplay();
-    }, this.handleFocusIn = () => {
-      this.stopAutoplay();
-    }, this.handleFocusOut = () => {
-      this.autoplay && this.startAutoplay();
-    }, this.handleScroll = () => {
-      this.isProgrammaticScroll || this.isDragging || (this.scrollDebounceTimer && clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = setTimeout(() => {
-        this.determineActiveIndexFromScroll();
-      }, 80));
-    }, this.handlePointerDown = (t) => {
-      if (!(t.button !== 0 && t.pointerType === "mouse") && this.scrollerElement) {
-        this.isProgrammaticScroll = !1, this.isDragging = !0, this.dragThresholdPassed = !1, this.dragStartX = t.clientX, this.dragStartScrollLeft = this.scrollerElement.scrollLeft, this.scrollerElement.classList.add("is-dragging"), this.stopAutoplay();
-        try {
-          t.currentTarget?.setPointerCapture?.(t.pointerId);
-        } catch {
-        }
-      }
-    }, this.handlePointerMove = (t) => {
-      if (!this.isDragging || !this.scrollerElement) return;
-      const i = t.clientX - this.dragStartX;
-      Math.abs(i) > 5 && (this.dragThresholdPassed = !0), this.dragThresholdPassed && (this.scrollerElement.scrollLeft = this.dragStartScrollLeft - i);
-    }, this.handlePointerUp = (t) => {
-      if (this.isDragging) {
-        this.isDragging = !1;
-        try {
-          t.currentTarget?.releasePointerCapture?.(t.pointerId);
-        } catch {
-        }
-        if (this.scrollerElement && this.scrollerElement.classList.remove("is-dragging"), this.dragThresholdPassed && this.scrollerElement) {
-          const i = t.clientX - this.dragStartX;
-          Math.abs(i) > 40 ? i < 0 ? this.next() : this.previous() : this.scrollToIndex(this.activeIndex, !0);
-        }
-        this.autoplay && this.startAutoplay();
-      }
-    }, this.handlePointerCancel = (t) => {
-      if (this.isDragging) {
-        this.isDragging = !1;
-        try {
-          t.currentTarget?.releasePointerCapture?.(t.pointerId);
-        } catch {
-        }
-        this.scrollerElement && this.scrollerElement.classList.remove("is-dragging"), this.autoplay && this.startAutoplay();
-      }
-    }, this.handleKeyDown = (t) => {
-      t.key === "ArrowRight" ? (t.preventDefault(), this.next()) : t.key === "ArrowLeft" ? (t.preventDefault(), this.previous()) : t.key === "Home" ? (t.preventDefault(), this.scrollToIndex(0)) : t.key === "End" && (t.preventDefault(), this.scrollToIndex((this.items?.length || 1) - 1));
-    };
-  }
-  static {
-    this.styles = [d.styles, p];
-  }
-  get items() {
-    return this.assignedItems && this.assignedItems.length > 0 ? this.assignedItems : Array.from(this.querySelectorAll("md-carousel-item"));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "region"), this.setAttribute("aria-roledescription", "carousel"), !this.hasAttribute("aria-label") && this.ariaLabelText && this.setAttribute("aria-label", this.ariaLabelText), this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("mouseenter", this.handleMouseEnter), this.addEventListener("mouseleave", this.handleMouseLeave), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.autoplay && this.startAutoplay();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.stopAutoplay(), this.removeEventListener("keydown", this.handleKeyDown), this.removeEventListener("mouseenter", this.handleMouseEnter), this.removeEventListener("mouseleave", this.handleMouseLeave), this.removeEventListener("focusin", this.handleFocusIn), this.removeEventListener("focusout", this.handleFocusOut), this.scrollDebounceTimer && clearTimeout(this.scrollDebounceTimer), this.programmaticScrollTimer && clearTimeout(this.programmaticScrollTimer);
-  }
-  updated(e) {
-    if (super.updated(e), e.has("itemSpacing"))
-      if (this.itemSpacing) {
-        const t = isNaN(Number(this.itemSpacing)) ? this.itemSpacing : `${this.itemSpacing}px`;
-        this.style.setProperty("--md-carousel-spacing", t);
-      } else this.style.removeProperty("--md-carousel-spacing");
-    if (e.has("itemWidth"))
-      if (this.itemWidth) {
-        const t = isNaN(Number(this.itemWidth)) ? this.itemWidth : `${this.itemWidth}px`;
-        this.style.setProperty("--md-carousel-item-width", t);
-      } else this.style.removeProperty("--md-carousel-item-width");
-    if (e.has("itemHeight"))
-      if (this.itemHeight) {
-        const t = isNaN(Number(this.itemHeight)) ? this.itemHeight : `${this.itemHeight}px`;
-        this.style.setProperty("--md-carousel-height", t), this.style.setProperty("--md-carousel-item-height", t);
-      } else
-        this.style.removeProperty("--md-carousel-height"), this.style.removeProperty("--md-carousel-item-height");
-    e.has("layout") && this.syncItemsLayout(), (e.has("autoplay") || e.has("autoplayInterval")) && (this.autoplay ? this.startAutoplay() : this.stopAutoplay()), e.has("activeIndex") && !this.isUserInteracting && !this.isProgrammaticScroll && this.scrollToIndex(this.activeIndex, !0), this.updateControlsState();
-  }
-  syncItemsLayout() {
-    this.items && this.items.forEach((e, t) => {
-      e.layout = this.layout, e.setAttribute("aria-label", `Slide ${t + 1} of ${this.items.length}`);
-    });
-  }
-  startAutoplay() {
-    this.stopAutoplay(), this.autoplay && this.autoplayInterval > 0 && (this.autoplayTimer = setInterval(() => {
-      this.next();
-    }, this.autoplayInterval));
-  }
-  stopAutoplay() {
-    this.autoplayTimer && (clearInterval(this.autoplayTimer), this.autoplayTimer = null);
-  }
-  previous() {
-    const e = this.items?.length || 0;
-    e !== 0 && (this.activeIndex > 0 ? this.scrollToIndex(this.activeIndex - 1, !0) : this.loop && this.scrollToIndex(e - 1, !0));
-  }
-  next() {
-    const e = this.items?.length || 0;
-    e !== 0 && (this.activeIndex < e - 1 ? this.scrollToIndex(this.activeIndex + 1, !0) : this.loop && this.scrollToIndex(0, !0));
-  }
-  scrollToIndex(e, t = !0) {
-    if (!this.items || this.items.length === 0) return;
-    const i = Math.max(0, Math.min(e, this.items.length - 1)), a = this.items[i];
-    if (this.isProgrammaticScroll = !0, this.programmaticScrollTimer && clearTimeout(this.programmaticScrollTimer), this.programmaticScrollTimer = setTimeout(() => {
-      this.isProgrammaticScroll = !1;
-    }, t ? 500 : 50), a && this.scrollerElement)
-      if (i === 0) this.scrollerElement.scrollTo({
-        left: 0,
-        behavior: t ? "smooth" : "auto"
-      });
-      else {
-        const l = this.scrollerElement.getBoundingClientRect(), c = a.getBoundingClientRect(), h = this.scrollerElement.scrollLeft + (c.left - l.left);
-        this.scrollerElement.scrollTo({
-          left: Math.max(0, h),
-          behavior: t ? "smooth" : "auto"
-        });
-      }
-    this.activeIndex !== i && (this.activeIndex = i, this.emitEvent("change", {
-      activeIndex: this.activeIndex,
-      item: this.items[this.activeIndex]
-    })), this.updateControlsState();
-  }
-  updateControlsState() {
-    const e = this.items?.length || 0;
-    if (e === 0) {
-      this.isAtStart = !0, this.isAtEnd = !0;
-      return;
-    }
-    if (this.loop) {
-      this.isAtStart = !1, this.isAtEnd = !1;
-      return;
-    }
-    this.isAtStart = this.activeIndex <= 0, this.isAtEnd = this.activeIndex >= e - 1;
-  }
-  determineActiveIndexFromScroll() {
-    if (this.isProgrammaticScroll || this.isDragging || !this.scrollerElement || !this.items || this.items.length === 0) return;
-    const e = this.scrollerElement.getBoundingClientRect().left;
-    let t = 0, i = 1 / 0;
-    this.items.forEach((a, l) => {
-      const c = a.getBoundingClientRect(), h = Math.abs(c.left - e);
-      h < i && (i = h, t = l);
-    }), this.activeIndex !== t && (this.isUserInteracting = !0, this.activeIndex = t, this.emitEvent("change", {
-      activeIndex: this.activeIndex,
-      item: this.items[this.activeIndex]
-    }), this.isUserInteracting = !1, this.updateControlsState());
-  }
-  render() {
-    const e = this.items?.length ?? this.itemCount, t = !this.hideControls && (e > 1 || e === 0), i = !this.hideIndicators && e > 1;
-    return n`
+import { n as e, t } from "../../chunks/decorate-DknOJ8FJ.js";
+import "../../chunks/ripple-CBOKeVfm.js";
+import "../../chunks/focus-ring-K6SY_mIm.js";
+import "../../chunks/icon-FvKeXi61.js";
+import { n, t as r } from "../../chunks/carousel-item-DNp2zhP9.js";
+import { html as i, nothing as a } from "lit";
+import { customElement as o, property as s, query as c, queryAssignedElements as l, state as u } from "lit/decorators.js";
+//#region src/components/carousel/carousel.ts
+var d = class extends e {
+	constructor(...e) {
+		super(...e), this.layout = "multi-browse", this.activeIndex = 0, this.hideControls = !1, this.hideIndicators = !1, this.loop = !1, this.autoplay = !1, this.autoplayInterval = 5e3, this.itemSpacing = "", this.itemWidth = "", this.itemHeight = "", this.ariaLabelText = "Carousel", this.isAtStart = !0, this.isAtEnd = !1, this.itemCount = 0, this.autoplayTimer = null, this.isDragging = !1, this.dragStartX = 0, this.dragStartScrollLeft = 0, this.dragThresholdPassed = !1, this.isUserInteracting = !1, this.isProgrammaticScroll = !1, this.programmaticScrollTimer = null, this.scrollDebounceTimer = null, this.handleSlotChange = () => {
+			this.itemCount = this.items?.length || 0, this.syncItemsLayout(), this.updateControlsState();
+		}, this.handleMouseEnter = () => {
+			this.stopAutoplay();
+		}, this.handleMouseLeave = () => {
+			this.autoplay && this.startAutoplay();
+		}, this.handleFocusIn = () => {
+			this.stopAutoplay();
+		}, this.handleFocusOut = () => {
+			this.autoplay && this.startAutoplay();
+		}, this.handleScroll = () => {
+			this.isProgrammaticScroll || this.isDragging || (this.scrollDebounceTimer && clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = setTimeout(() => {
+				this.determineActiveIndexFromScroll();
+			}, 80));
+		}, this.handlePointerDown = (e) => {
+			if ((e.button === 0 || e.pointerType !== "mouse") && this.scrollerElement) {
+				this.isProgrammaticScroll = !1, this.isDragging = !0, this.dragThresholdPassed = !1, this.dragStartX = e.clientX, this.dragStartScrollLeft = this.scrollerElement.scrollLeft, this.scrollerElement.classList.add("is-dragging"), this.stopAutoplay();
+				try {
+					e.currentTarget?.setPointerCapture?.(e.pointerId);
+				} catch {}
+			}
+		}, this.handlePointerMove = (e) => {
+			if (!this.isDragging || !this.scrollerElement) return;
+			let t = e.clientX - this.dragStartX;
+			Math.abs(t) > 5 && (this.dragThresholdPassed = !0), this.dragThresholdPassed && (this.scrollerElement.scrollLeft = this.dragStartScrollLeft - t);
+		}, this.handlePointerUp = (e) => {
+			if (this.isDragging) {
+				this.isDragging = !1;
+				try {
+					e.currentTarget?.releasePointerCapture?.(e.pointerId);
+				} catch {}
+				if (this.scrollerElement && this.scrollerElement.classList.remove("is-dragging"), this.dragThresholdPassed && this.scrollerElement) {
+					let t = e.clientX - this.dragStartX;
+					Math.abs(t) > 40 ? t < 0 ? this.next() : this.previous() : this.scrollToIndex(this.activeIndex, !0);
+				}
+				this.autoplay && this.startAutoplay();
+			}
+		}, this.handlePointerCancel = (e) => {
+			if (this.isDragging) {
+				this.isDragging = !1;
+				try {
+					e.currentTarget?.releasePointerCapture?.(e.pointerId);
+				} catch {}
+				this.scrollerElement && this.scrollerElement.classList.remove("is-dragging"), this.autoplay && this.startAutoplay();
+			}
+		}, this.handleKeyDown = (e) => {
+			e.key === "ArrowRight" ? (e.preventDefault(), this.next()) : e.key === "ArrowLeft" ? (e.preventDefault(), this.previous()) : e.key === "Home" ? (e.preventDefault(), this.scrollToIndex(0)) : e.key === "End" && (e.preventDefault(), this.scrollToIndex((this.items?.length || 1) - 1));
+		};
+	}
+	static {
+		this.styles = [e.styles, n];
+	}
+	get items() {
+		return this.assignedItems && this.assignedItems.length > 0 ? this.assignedItems : Array.from(this.querySelectorAll("md-carousel-item"));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "region"), this.setAttribute("aria-roledescription", "carousel"), !this.hasAttribute("aria-label") && this.ariaLabelText && this.setAttribute("aria-label", this.ariaLabelText), this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("mouseenter", this.handleMouseEnter), this.addEventListener("mouseleave", this.handleMouseLeave), this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut), this.autoplay && this.startAutoplay();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.stopAutoplay(), this.removeEventListener("keydown", this.handleKeyDown), this.removeEventListener("mouseenter", this.handleMouseEnter), this.removeEventListener("mouseleave", this.handleMouseLeave), this.removeEventListener("focusin", this.handleFocusIn), this.removeEventListener("focusout", this.handleFocusOut), this.scrollDebounceTimer && clearTimeout(this.scrollDebounceTimer), this.programmaticScrollTimer && clearTimeout(this.programmaticScrollTimer);
+	}
+	updated(e) {
+		if (super.updated(e), e.has("itemSpacing")) {
+			if (this.itemSpacing) {
+				let e = isNaN(Number(this.itemSpacing)) ? this.itemSpacing : `${this.itemSpacing}px`;
+				this.style.setProperty("--md-carousel-spacing", e);
+			} else this.style.removeProperty("--md-carousel-spacing");
+		}
+		if (e.has("itemWidth")) {
+			if (this.itemWidth) {
+				let e = isNaN(Number(this.itemWidth)) ? this.itemWidth : `${this.itemWidth}px`;
+				this.style.setProperty("--md-carousel-item-width", e);
+			} else this.style.removeProperty("--md-carousel-item-width");
+		}
+		if (e.has("itemHeight")) {
+			if (this.itemHeight) {
+				let e = isNaN(Number(this.itemHeight)) ? this.itemHeight : `${this.itemHeight}px`;
+				this.style.setProperty("--md-carousel-height", e), this.style.setProperty("--md-carousel-item-height", e);
+			} else this.style.removeProperty("--md-carousel-height"), this.style.removeProperty("--md-carousel-item-height");
+		}
+		e.has("layout") && this.syncItemsLayout(), (e.has("autoplay") || e.has("autoplayInterval")) && (this.autoplay ? this.startAutoplay() : this.stopAutoplay()), e.has("activeIndex") && !this.isUserInteracting && !this.isProgrammaticScroll && this.scrollToIndex(this.activeIndex, !0), this.updateControlsState();
+	}
+	syncItemsLayout() {
+		this.items && this.items.forEach((e, t) => {
+			e.layout = this.layout, e.setAttribute("aria-label", `Slide ${t + 1} of ${this.items.length}`);
+		});
+	}
+	startAutoplay() {
+		this.stopAutoplay(), this.autoplay && this.autoplayInterval > 0 && (this.autoplayTimer = setInterval(() => {
+			this.next();
+		}, this.autoplayInterval));
+	}
+	stopAutoplay() {
+		this.autoplayTimer &&= (clearInterval(this.autoplayTimer), null);
+	}
+	previous() {
+		let e = this.items?.length || 0;
+		e !== 0 && (this.activeIndex > 0 ? this.scrollToIndex(this.activeIndex - 1, !0) : this.loop && this.scrollToIndex(e - 1, !0));
+	}
+	next() {
+		let e = this.items?.length || 0;
+		e !== 0 && (this.activeIndex < e - 1 ? this.scrollToIndex(this.activeIndex + 1, !0) : this.loop && this.scrollToIndex(0, !0));
+	}
+	scrollToIndex(e, t = !0) {
+		if (!this.items || this.items.length === 0) return;
+		let n = Math.max(0, Math.min(e, this.items.length - 1)), r = this.items[n];
+		if (this.isProgrammaticScroll = !0, this.programmaticScrollTimer && clearTimeout(this.programmaticScrollTimer), this.programmaticScrollTimer = setTimeout(() => {
+			this.isProgrammaticScroll = !1;
+		}, t ? 500 : 50), r && this.scrollerElement) {
+			if (n === 0) this.scrollerElement.scrollTo({
+				left: 0,
+				behavior: t ? "smooth" : "auto"
+			});
+			else {
+				let e = this.scrollerElement.getBoundingClientRect(), n = r.getBoundingClientRect(), i = this.scrollerElement.scrollLeft + (n.left - e.left);
+				this.scrollerElement.scrollTo({
+					left: Math.max(0, i),
+					behavior: t ? "smooth" : "auto"
+				});
+			}
+		}
+		this.activeIndex !== n && (this.activeIndex = n, this.emitEvent("change", {
+			activeIndex: this.activeIndex,
+			item: this.items[this.activeIndex]
+		})), this.updateControlsState();
+	}
+	updateControlsState() {
+		let e = this.items?.length || 0;
+		if (e === 0) {
+			this.isAtStart = !0, this.isAtEnd = !0;
+			return;
+		}
+		if (this.loop) {
+			this.isAtStart = !1, this.isAtEnd = !1;
+			return;
+		}
+		this.isAtStart = this.activeIndex <= 0, this.isAtEnd = this.activeIndex >= e - 1;
+	}
+	determineActiveIndexFromScroll() {
+		if (this.isProgrammaticScroll || this.isDragging || !this.scrollerElement || !this.items || this.items.length === 0) return;
+		let e = this.scrollerElement.getBoundingClientRect().left, t = 0, n = Infinity;
+		this.items.forEach((r, i) => {
+			let a = r.getBoundingClientRect(), o = Math.abs(a.left - e);
+			o < n && (n = o, t = i);
+		}), this.activeIndex !== t && (this.isUserInteracting = !0, this.activeIndex = t, this.emitEvent("change", {
+			activeIndex: this.activeIndex,
+			item: this.items[this.activeIndex]
+		}), this.isUserInteracting = !1, this.updateControlsState());
+	}
+	render() {
+		let e = this.items?.length ?? this.itemCount, t = !this.hideControls && (e > 1 || e === 0), n = !this.hideIndicators && e > 1;
+		return i`
       <div class="carousel-root">
         <div class="carousel-viewport-wrapper">
-          ${t ? n`
+          ${t ? i`
             <slot name="prev-button">
               <button
                 class="control-button prev"
@@ -185,7 +185,7 @@ var s = class extends d {
                 <md-icon name="chevron_right"></md-icon>
               </button>
             </slot>
-          ` : m}
+          ` : a}
 
           <div
             class="carousel-scroller"
@@ -202,83 +202,65 @@ var s = class extends d {
           </div>
         </div>
 
-        ${i ? n`
+        ${n ? i`
           <div class="indicators" role="tablist" aria-label="Carousel navigation">
-            ${Array.from({ length: e }).map((a, l) => n`
+            ${Array.from({ length: e }).map((e, t) => i`
               <button
-                class="indicator-dot ${l === this.activeIndex ? "active" : ""}"
+                class="indicator-dot ${t === this.activeIndex ? "active" : ""}"
                 type="button"
                 role="tab"
-                aria-selected=${l === this.activeIndex ? "true" : "false"}
-                aria-label="Go to slide ${l + 1}"
-                @click=${() => this.scrollToIndex(l)}
+                aria-selected=${t === this.activeIndex ? "true" : "false"}
+                aria-label="Go to slide ${t + 1}"
+                @click=${() => this.scrollToIndex(t)}
               ></button>
             `)}
           </div>
-        ` : m}
+        ` : a}
       </div>
     `;
-  }
-};
-r([o({
-  type: String,
-  reflect: !0
-})], s.prototype, "layout", void 0);
-r([o({
-  type: Number,
-  reflect: !0,
-  attribute: "active-index"
-})], s.prototype, "activeIndex", void 0);
-r([o({
-  type: Boolean,
-  reflect: !0,
-  attribute: "hide-controls"
-})], s.prototype, "hideControls", void 0);
-r([o({
-  type: Boolean,
-  reflect: !0,
-  attribute: "hide-indicators"
-})], s.prototype, "hideIndicators", void 0);
-r([o({
-  type: Boolean,
-  reflect: !0
-})], s.prototype, "loop", void 0);
-r([o({
-  type: Boolean,
-  reflect: !0
-})], s.prototype, "autoplay", void 0);
-r([o({
-  type: Number,
-  attribute: "autoplay-interval"
-})], s.prototype, "autoplayInterval", void 0);
-r([o({
-  type: String,
-  attribute: "item-spacing"
-})], s.prototype, "itemSpacing", void 0);
-r([o({
-  type: String,
-  attribute: "item-width"
-})], s.prototype, "itemWidth", void 0);
-r([o({
-  type: String,
-  attribute: "item-height"
-})], s.prototype, "itemHeight", void 0);
-r([o({
-  type: String,
-  attribute: "aria-label"
-})], s.prototype, "ariaLabelText", void 0);
-r([y({
-  selector: "md-carousel-item",
-  flatten: !0
-})], s.prototype, "assignedItems", void 0);
-r([f(".carousel-scroller")], s.prototype, "scrollerElement", void 0);
-r([u()], s.prototype, "isAtStart", void 0);
-r([u()], s.prototype, "isAtEnd", void 0);
-r([u()], s.prototype, "itemCount", void 0);
-s = r([g("md-carousel")], s);
-export {
-  s as MdCarousel,
-  E as MdCarouselItem
+	}
 };
+t([s({
+	type: String,
+	reflect: !0
+})], d.prototype, "layout", void 0), t([s({
+	type: Number,
+	reflect: !0,
+	attribute: "active-index"
+})], d.prototype, "activeIndex", void 0), t([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-controls"
+})], d.prototype, "hideControls", void 0), t([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "hide-indicators"
+})], d.prototype, "hideIndicators", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "loop", void 0), t([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "autoplay", void 0), t([s({
+	type: Number,
+	attribute: "autoplay-interval"
+})], d.prototype, "autoplayInterval", void 0), t([s({
+	type: String,
+	attribute: "item-spacing"
+})], d.prototype, "itemSpacing", void 0), t([s({
+	type: String,
+	attribute: "item-width"
+})], d.prototype, "itemWidth", void 0), t([s({
+	type: String,
+	attribute: "item-height"
+})], d.prototype, "itemHeight", void 0), t([s({
+	type: String,
+	attribute: "aria-label"
+})], d.prototype, "ariaLabelText", void 0), t([l({
+	selector: "md-carousel-item",
+	flatten: !0
+})], d.prototype, "assignedItems", void 0), t([c(".carousel-scroller")], d.prototype, "scrollerElement", void 0), t([u()], d.prototype, "isAtStart", void 0), t([u()], d.prototype, "isAtEnd", void 0), t([u()], d.prototype, "itemCount", void 0), d = t([o("md-carousel")], d);
+//#endregion
+export { d as MdCarousel, r as MdCarouselItem };
 
 //# sourceMappingURL=carousel.js.map