@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/{card-DVffdPpv.js.map → card-CVhWizDF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"card-DVffdPpv.js","names":[],"sources":["../../src/components/card/card.css.ts","../../src/components/card/card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const cardStyles = css`\n  :host {\n    display: block;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    position: relative;\n    overflow: hidden;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Elevated (Default) --- */\n  :host(:not([variant])),\n  :host([variant=\"elevated\"]) {\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host(:not([variant])[interactive]:hover),\n  :host([variant=\"elevated\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));\n  }\n\n  /* --- Filled --- */\n  :host([variant=\"filled\"]) {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"filled\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) {\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"outlined\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host([interactive]) {\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .card-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    position: relative;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  ::slotted([slot=\"media\"]) {\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    display: block;\n  }\n\n  .header {\n    padding: 16px 16px 0;\n  }\n\n  .body {\n    padding: 16px;\n    flex: 1;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    padding: 8px 16px 16px;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { cardStyles } from './card.css.js';\n\nexport type CardVariant = 'elevated' | 'filled' | 'outlined';\n\n@customElement('md-card')\nexport class MdCard extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, cardStyles];\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    if (this.interactive) {\n      this.emitEvent('card-click');\n    }\n  };\n\n  override render() {\n    const innerContent = html`\n      ${this.interactive ? html`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : nothing}\n      <slot name=\"media\"></slot>\n      <div class=\"header\">\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"body\">\n        <slot></slot>\n      </div>\n      <div class=\"actions\">\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          class=\"card-container\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : (this.interactive ? '0' : nothing)}\n          @click=${this.handleClick}\n        >\n          ${innerContent}\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"card-container\"\n        tabindex=${this.interactive && !this.disabled ? '0' : nothing}\n        @click=${this.handleClick}\n      >\n        ${innerContent}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-card': MdCard;\n  }\n}\n\n"],"mappings":";;;;;AAEA,IAAa,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCQb,IAAN,cAAqB,EAAc;AAAA;iBAIjB,KAAA,UAAA,YAGT,KAAA,cAAA,IAGH,KAAA,WAAA,IAGJ,KAAA,OAAA,IAGE,KAAA,SAAA,IAEc,KAAA,cAAA,CAAA,MAAsB;AAC3C,UAAI,KAAK,UAAU;AACjB,QAAA,EAAM,eAAe,GACrB,EAAM,yBAAyB;AAC/B;AAAA,MACF;AACA,MAAI,KAAK,eACP,KAAK,UAAU,YAAY;AAAA,IAE/B;AAAA;;AA1ByB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAU;AAAA;EA4B1D,SAAkB;AAChB,UAAM,IAAe;AAAA,QACjB,KAAK,cAAc,yBAA4B,KAAK,QAAA,iDAAyD,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAajH,WAAI,KAAK,OACA;AAAA;AAAA;AAAA,iBAGI,KAAK,WAAW,IAAU,KAAK,IAAA;AAAA,mBAC7B,KAAK,UAAU,CAAA;AAAA,0BACR,KAAK,WAAW,SAAS,CAAA;AAAA,qBAC9B,KAAK,WAAW,OAAQ,KAAK,cAAc,MAAM,CAAA;AAAA,mBACnD,KAAK,WAAA;AAAA;AAAA,YAEZ,CAAA;AAAA;AAAA,UAKD;AAAA;AAAA;AAAA,mBAGQ,KAAK,eAAe,CAAC,KAAK,WAAW,MAAM,CAAA;AAAA,iBAC7C,KAAK,WAAA;AAAA;AAAA,UAEZ,CAAA;AAAA;AAAA;AAAA,EAGR;AACF;AAlEG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AAhB3B,IAAA,EAAA,CAAA,EAAc,SAAS,CAAA,GAAA,CAAA"}
+{"version":3,"file":"card-CVhWizDF.js","names":[],"sources":["../../src/components/card/card.css.ts","../../src/components/card/card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const cardStyles = css`\n  :host {\n    display: block;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    position: relative;\n    overflow: hidden;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* --- Elevated (Default) --- */\n  :host(:not([variant])),\n  :host([variant=\"elevated\"]) {\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host(:not([variant])[interactive]:hover),\n  :host([variant=\"elevated\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));\n  }\n\n  /* --- Filled --- */\n  :host([variant=\"filled\"]) {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"filled\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Outlined --- */\n  :host([variant=\"outlined\"]) {\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"outlined\"][interactive]:hover) {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host([interactive]) {\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .card-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    position: relative;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  ::slotted([slot=\"media\"]) {\n    width: 100%;\n    max-height: 200px;\n    object-fit: cover;\n    display: block;\n  }\n\n  .header {\n    padding: 16px 16px 0;\n  }\n\n  .body {\n    padding: 16px;\n    flex: 1;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    padding: 8px 16px 16px;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { cardStyles } from './card.css.js';\n\nexport type CardVariant = 'elevated' | 'filled' | 'outlined';\n\n@customElement('md-card')\nexport class MdCard extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, cardStyles];\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    if (this.interactive) {\n      this.emitEvent('card-click');\n    }\n  };\n\n  override render() {\n    const innerContent = html`\n      ${this.interactive ? html`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : nothing}\n      <slot name=\"media\"></slot>\n      <div class=\"header\">\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"body\">\n        <slot></slot>\n      </div>\n      <div class=\"actions\">\n        <slot name=\"actions\"></slot>\n      </div>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          class=\"card-container\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : (this.interactive ? '0' : nothing)}\n          @click=${this.handleClick}\n        >\n          ${innerContent}\n        </a>\n      `;\n    }\n\n    return html`\n      <div\n        class=\"card-container\"\n        tabindex=${this.interactive && !this.disabled ? '0' : nothing}\n        @click=${this.handleClick}\n      >\n        ${innerContent}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-card': MdCard;\n  }\n}\n\n"],"mappings":";;;;;;AAEA,IAAa,IAAa,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCQhB,IAAN,cAAqB,EAAc;;EAkBjB,aAdA,KAAA,UAAA,YAGT,KAAA,cAAA,IAGH,KAAA,WAAA,IAGJ,KAAA,OAAA,IAGE,KAAA,SAAA,IAEc,KAAA,eAAA,MAAsB;GAC3C,IAAI,KAAK,UAAU;IAEjB,AADA,EAAM,eAAe,GACrB,EAAM,yBAAyB;IAC/B;GACF;GACA,AAAI,KAAK,eACP,KAAK,UAAU,YAAY;EAE/B;;;EA1ByB,KAAA,SAAA,CAAC,EAAc,QAAQ,CAAU;;CA4B1D,SAAkB;EAChB,IAAM,IAAe,CAAI;QACrB,KAAK,cAAc,CAAI,wBAAwB,KAAK,SAAS,gDAAgD,EAAQ;;;;;;;;;;;;EA4BzH,OAfI,KAAK,OACA,CAAI;;;iBAGA,KAAK,WAAW,IAAU,KAAK,KAAK;mBAClC,KAAK,UAAU,EAAQ;0BAChB,KAAK,WAAW,SAAS,EAAQ;qBACtC,KAAK,WAAW,OAAQ,KAAK,cAAc,MAAM,EAAS;mBAC5D,KAAK,YAAY;;YAExB,EAAa;;UAKd,CAAI;;;mBAGI,KAAK,eAAe,CAAC,KAAK,WAAW,MAAM,EAAQ;iBACrD,KAAK,YAAY;;UAExB,EAAa;;;CAGrB;AACF;AAlEG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAhB3B,IAAA,EAAA,CAAA,EAAc,SAAS,CAAA,GAAA,CAAA"}

package/dist/chunks/{carousel-item-BG6kjjjk.js → carousel-item-DNp2zhP9.js}

@@ -1,9 +1,10 @@
-import { n as l, t as e } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import { css as c, html as i, nothing as r } from "lit";
-import { customElement as p, property as o } from "lit/decorators.js";
-var f = c`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/carousel/carousel.css.ts
+var s = n`
   :host {
     display: block;
     position: relative;
@@ -171,7 +172,7 @@ var f = c`
     outline: 2px solid var(--md-carousel-indicator-active-color, #6750a4);
     outline-offset: 2px;
   }
-`, h = c`
+`, c = n`
   :host {
     display: inline-block;
     flex: 0 0 auto;
@@ -284,88 +285,76 @@ var f = c`
     width: 100%;
     box-sizing: border-box;
   }
-`, t = class extends l {
-  constructor(...s) {
-    super(...s), this.src = "", this.alt = "", this.headline = "", this.subhead = "", this.href = "", this.target = "", this.interactive = !1, this.disabled = !1, this.snapAlign = "start", this.layout = "", this.handleClick = (a) => {
-      if (this.disabled) {
-        a.preventDefault(), a.stopImmediatePropagation();
-        return;
-      }
-      this.emitEvent("carousel-item-click", { item: this });
-    };
-  }
-  static {
-    this.styles = [l.styles, h];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group"), this.hasAttribute("aria-roledescription") || this.setAttribute("aria-roledescription", "slide"), this.addEventListener("click", this.handleClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick);
-  }
-  render() {
-    const s = !!this.src, a = !!(this.headline || this.subhead), d = !!(this.interactive || this.href), n = i`
-      ${d ? i`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : r}
-      ${s ? i`
+`, l = class extends e {
+	constructor(...e) {
+		super(...e), this.src = "", this.alt = "", this.headline = "", this.subhead = "", this.href = "", this.target = "", this.interactive = !1, this.disabled = !1, this.snapAlign = "start", this.layout = "", this.handleClick = (e) => {
+			if (this.disabled) {
+				e.preventDefault(), e.stopImmediatePropagation();
+				return;
+			}
+			this.emitEvent("carousel-item-click", { item: this });
+		};
+	}
+	static {
+		this.styles = [e.styles, c];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group"), this.hasAttribute("aria-roledescription") || this.setAttribute("aria-roledescription", "slide"), this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.handleClick);
+	}
+	render() {
+		let e = !!this.src, t = !!(this.headline || this.subhead), n = !!(this.interactive || this.href), a = r`
+      ${n ? r`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : i}
+      ${e ? r`
         <div class="media-container">
           <img src=${this.src} alt=${this.alt} loading="lazy" />
         </div>
-      ` : i`
+      ` : r`
         <slot name="media"></slot>
       `}
       <div class="content-slot">
         <slot></slot>
       </div>
-      ${a ? i`
+      ${t ? r`
         <div class="scrim">
-          ${this.headline ? i`<div class="headline"><slot name="headline">${this.headline}</slot></div>` : r}
-          ${this.subhead ? i`<div class="subhead"><slot name="subhead">${this.subhead}</slot></div>` : r}
+          ${this.headline ? r`<div class="headline"><slot name="headline">${this.headline}</slot></div>` : i}
+          ${this.subhead ? r`<div class="subhead"><slot name="subhead">${this.subhead}</slot></div>` : i}
         </div>
-      ` : r}
+      ` : i}
     `;
-    return this.href ? i`
+		return this.href ? r`
         <a
           class="item-container"
-          href=${this.disabled ? r : this.href}
-          target=${this.target || r}
-          rel=${this.target === "_blank" ? "noopener noreferrer" : r}
+          href=${this.disabled ? i : this.href}
+          target=${this.target || i}
+          rel=${this.target === "_blank" ? "noopener noreferrer" : i}
         >
-          ${n}
+          ${a}
         </a>
-      ` : i`
+      ` : r`
       <div class="item-container">
-        ${n}
+        ${a}
       </div>
     `;
-  }
-};
-e([o({ type: String })], t.prototype, "src", void 0);
-e([o({ type: String })], t.prototype, "alt", void 0);
-e([o({ type: String })], t.prototype, "headline", void 0);
-e([o({ type: String })], t.prototype, "subhead", void 0);
-e([o({ type: String })], t.prototype, "href", void 0);
-e([o({ type: String })], t.prototype, "target", void 0);
-e([o({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "interactive", void 0);
-e([o({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "disabled", void 0);
-e([o({
-  type: String,
-  reflect: !0,
-  attribute: "snap-align"
-})], t.prototype, "snapAlign", void 0);
-e([o({
-  type: String,
-  reflect: !0
-})], t.prototype, "layout", void 0);
-t = e([p("md-carousel-item")], t);
-export {
-  f as n,
-  t
+	}
 };
-
-//# sourceMappingURL=carousel-item-BG6kjjjk.js.map
+t([o({ type: String })], l.prototype, "src", void 0), t([o({ type: String })], l.prototype, "alt", void 0), t([o({ type: String })], l.prototype, "headline", void 0), t([o({ type: String })], l.prototype, "subhead", void 0), t([o({ type: String })], l.prototype, "href", void 0), t([o({ type: String })], l.prototype, "target", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "interactive", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), t([o({
+	type: String,
+	reflect: !0,
+	attribute: "snap-align"
+})], l.prototype, "snapAlign", void 0), t([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "layout", void 0), l = t([a("md-carousel-item")], l);
+//#endregion
+export { s as n, l as t };
+
+//# sourceMappingURL=carousel-item-DNp2zhP9.js.map

package/dist/chunks/{carousel-item-BG6kjjjk.js.map → carousel-item-DNp2zhP9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"carousel-item-BG6kjjjk.js","names":[],"sources":["../../src/components/carousel/carousel.css.ts","../../src/components/carousel/carousel-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const carouselStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    --md-carousel-spacing: 8px;\n    --md-carousel-height: auto;\n    --md-carousel-item-shape: var(--md-sys-shape-corner-extra-large, 28px);\n    --md-carousel-control-size: 44px;\n    --md-carousel-control-bg: var(--md-sys-color-surface-container-highest, rgba(255, 255, 255, 0.9));\n    --md-carousel-control-color: var(--md-sys-color-on-surface, #1d1b20);\n    --md-carousel-indicator-color: var(--md-sys-color-outline-variant, #cac4d0);\n    --md-carousel-indicator-active-color: var(--md-sys-color-primary, #6750a4);\n  }\n\n  .carousel-root {\n    position: relative;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n  }\n\n  .carousel-viewport-wrapper {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--md-carousel-radius, 0px);\n  }\n\n  .carousel-scroller {\n    display: flex;\n    gap: var(--md-carousel-spacing, 8px);\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    scroll-snap-type: x mandatory;\n    padding: 4px 0;\n    margin: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--md-carousel-height, auto);\n    touch-action: pan-y pinch-zoom;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .carousel-scroller::-webkit-scrollbar {\n    display: none;\n  }\n\n  .carousel-scroller.is-dragging {\n    scroll-snap-type: none;\n    cursor: grabbing;\n  }\n\n  /* Layout variations applied on items via CSS variables */\n  :host([layout=\"full-width\"]) {\n    --md-carousel-item-width: 100%;\n  }\n\n  :host([layout=\"hero\"]) {\n    --md-carousel-item-width: clamp(280px, 80%, 720px);\n  }\n\n  :host([layout=\"multi-browse\"]),\n  :host(:not([layout])) {\n    --md-carousel-item-width: clamp(220px, 32%, 360px);\n  }\n\n  :host([layout=\"uncontained\"]) {\n    --md-carousel-item-width: auto;\n  }\n\n  /* Controls (Previous & Next buttons) */\n  .control-button {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 3;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--md-carousel-control-size, 44px);\n    height: var(--md-carousel-control-size, 44px);\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    background-color: var(--md-carousel-control-bg, rgba(255, 255, 255, 0.9));\n    color: var(--md-carousel-control-color, #1d1b20);\n    border: none;\n    outline: none;\n    cursor: pointer;\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1),\n                background-color 0.2s,\n                transform 0.2s;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .control-button:hover:not(:disabled) {\n    background-color: var(--md-sys-color-surface-container-high, #e6e0e9);\n    box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15));\n  }\n\n  .control-button:active:not(:disabled) {\n    transform: translateY(-50%) scale(0.94);\n  }\n\n  .control-button:disabled {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .control-button.prev {\n    left: 12px;\n  }\n\n  .control-button.next {\n    right: 12px;\n  }\n\n  /* Indicators / Pagination Dots */\n  .indicators {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    margin-top: 12px;\n    padding: 4px 0;\n  }\n\n  .indicator-dot {\n    position: relative;\n    width: 8px;\n    height: 8px;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    background-color: var(--md-carousel-indicator-color, #cac4d0);\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1),\n                background-color 0.3s cubic-bezier(0.2, 0, 0, 1),\n                border-radius 0.3s;\n  }\n\n  .indicator-dot::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 28px;\n    height: 28px;\n  }\n\n  .indicator-dot.active {\n    width: 24px;\n    border-radius: 4px;\n    background-color: var(--md-carousel-indicator-active-color, #6750a4);\n  }\n\n  .indicator-dot:focus-visible {\n    outline: 2px solid var(--md-carousel-indicator-active-color, #6750a4);\n    outline-offset: 2px;\n  }\n`;\n\nexport const carouselItemStyles = css`\n  :host {\n    display: inline-block;\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    position: relative;\n    overflow: hidden;\n    scroll-snap-align: start;\n    scroll-snap-stop: normal;\n    border-radius: var(--md-carousel-item-shape, var(--md-sys-shape-corner-extra-large, 28px));\n    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);\n    width: var(--md-carousel-item-width, clamp(220px, 32%, 360px));\n    height: var(--md-carousel-item-height, 100%);\n    min-height: 180px;\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                box-shadow 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([snap-align=\"center\"]) {\n    scroll-snap-align: center;\n  }\n\n  :host([snap-align=\"end\"]) {\n    scroll-snap-align: end;\n  }\n\n  :host([snap-align=\"start\"]) {\n    scroll-snap-align: start;\n  }\n\n  :host([interactive]) {\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    overflow: hidden;\n    text-decoration: none;\n    color: inherit;\n    box-sizing: border-box;\n  }\n\n  .media-container {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    overflow: hidden;\n  }\n\n  .media-container img,\n  ::slotted(img) {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .scrim {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 1;\n    padding: 20px 16px 16px;\n    background: linear-gradient(\n      to top,\n      rgba(0, 0, 0, 0.8) 0%,\n      rgba(0, 0, 0, 0.4) 60%,\n      transparent 100%\n    );\n    color: #ffffff;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    pointer-events: none;\n  }\n\n  .headline {\n    font-size: 1.125rem;\n    font-weight: 500;\n    line-height: 1.4;\n    margin: 0;\n    color: inherit;\n  }\n\n  .subhead {\n    font-size: 0.875rem;\n    font-weight: 400;\n    line-height: 1.3;\n    margin: 0;\n    opacity: 0.88;\n    color: inherit;\n  }\n\n  .content-slot {\n    position: relative;\n    z-index: 2;\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { carouselItemStyles } from './carousel.css.js';\n\nexport type CarouselSnapAlign = 'start' | 'center' | 'end';\n\n/**\n * Material Design 3 Carousel Item component.\n *\n * @slot - Default slot for custom content or media.\n * @slot media - Specific slot for image or video elements.\n * @slot headline - Custom headline content.\n * @slot subhead - Custom subhead or description content.\n */\n@customElement('md-carousel-item')\nexport class MdCarouselItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, carouselItemStyles];\n\n  @property({ type: String })\n  src = '';\n\n  @property({ type: String })\n  alt = '';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  subhead = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, reflect: true, attribute: 'snap-align' })\n  snapAlign: CarouselSnapAlign = 'start';\n\n  @property({ type: String, reflect: true })\n  layout = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n    if (!this.hasAttribute('aria-roledescription')) {\n      this.setAttribute('aria-roledescription', 'slide');\n    }\n    this.addEventListener('click', this.handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    this.emitEvent('carousel-item-click', { item: this });\n  };\n\n  override render() {\n    const hasMedia = Boolean(this.src);\n    const hasScrim = Boolean(this.headline || this.subhead);\n    const isClickable = Boolean(this.interactive || this.href);\n\n    const innerContent = html`\n      ${isClickable ? html`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : nothing}\n      ${hasMedia ? html`\n        <div class=\"media-container\">\n          <img src=${this.src} alt=${this.alt} loading=\"lazy\" />\n        </div>\n      ` : html`\n        <slot name=\"media\"></slot>\n      `}\n      <div class=\"content-slot\">\n        <slot></slot>\n      </div>\n      ${hasScrim ? html`\n        <div class=\"scrim\">\n          ${this.headline ? html`<div class=\"headline\"><slot name=\"headline\">${this.headline}</slot></div>` : nothing}\n          ${this.subhead ? html`<div class=\"subhead\"><slot name=\"subhead\">${this.subhead}</slot></div>` : nothing}\n        </div>\n      ` : nothing}\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          class=\"item-container\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n        >\n          ${innerContent}\n        </a>\n      `;\n    }\n\n    return html`\n      <div class=\"item-container\">\n        ${innerContent}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-carousel-item': MdCarouselItem;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAa,IAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0KjB,IAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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"}
+{"version":3,"file":"carousel-item-DNp2zhP9.js","names":[],"sources":["../../src/components/carousel/carousel.css.ts","../../src/components/carousel/carousel-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const carouselStyles = css`\n  :host {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    --md-carousel-spacing: 8px;\n    --md-carousel-height: auto;\n    --md-carousel-item-shape: var(--md-sys-shape-corner-extra-large, 28px);\n    --md-carousel-control-size: 44px;\n    --md-carousel-control-bg: var(--md-sys-color-surface-container-highest, rgba(255, 255, 255, 0.9));\n    --md-carousel-control-color: var(--md-sys-color-on-surface, #1d1b20);\n    --md-carousel-indicator-color: var(--md-sys-color-outline-variant, #cac4d0);\n    --md-carousel-indicator-active-color: var(--md-sys-color-primary, #6750a4);\n  }\n\n  .carousel-root {\n    position: relative;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    box-sizing: border-box;\n  }\n\n  .carousel-viewport-wrapper {\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    border-radius: var(--md-carousel-radius, 0px);\n  }\n\n  .carousel-scroller {\n    display: flex;\n    gap: var(--md-carousel-spacing, 8px);\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    scroll-snap-type: x mandatory;\n    padding: 4px 0;\n    margin: 0;\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--md-carousel-height, auto);\n    touch-action: pan-y pinch-zoom;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .carousel-scroller::-webkit-scrollbar {\n    display: none;\n  }\n\n  .carousel-scroller.is-dragging {\n    scroll-snap-type: none;\n    cursor: grabbing;\n  }\n\n  /* Layout variations applied on items via CSS variables */\n  :host([layout=\"full-width\"]) {\n    --md-carousel-item-width: 100%;\n  }\n\n  :host([layout=\"hero\"]) {\n    --md-carousel-item-width: clamp(280px, 80%, 720px);\n  }\n\n  :host([layout=\"multi-browse\"]),\n  :host(:not([layout])) {\n    --md-carousel-item-width: clamp(220px, 32%, 360px);\n  }\n\n  :host([layout=\"uncontained\"]) {\n    --md-carousel-item-width: auto;\n  }\n\n  /* Controls (Previous & Next buttons) */\n  .control-button {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 3;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--md-carousel-control-size, 44px);\n    height: var(--md-carousel-control-size, 44px);\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    background-color: var(--md-carousel-control-bg, rgba(255, 255, 255, 0.9));\n    color: var(--md-carousel-control-color, #1d1b20);\n    border: none;\n    outline: none;\n    cursor: pointer;\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));\n    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1),\n                background-color 0.2s,\n                transform 0.2s;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .control-button:hover:not(:disabled) {\n    background-color: var(--md-sys-color-surface-container-high, #e6e0e9);\n    box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15));\n  }\n\n  .control-button:active:not(:disabled) {\n    transform: translateY(-50%) scale(0.94);\n  }\n\n  .control-button:disabled {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .control-button.prev {\n    left: 12px;\n  }\n\n  .control-button.next {\n    right: 12px;\n  }\n\n  /* Indicators / Pagination Dots */\n  .indicators {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    margin-top: 12px;\n    padding: 4px 0;\n  }\n\n  .indicator-dot {\n    position: relative;\n    width: 8px;\n    height: 8px;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    background-color: var(--md-carousel-indicator-color, #cac4d0);\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1),\n                background-color 0.3s cubic-bezier(0.2, 0, 0, 1),\n                border-radius 0.3s;\n  }\n\n  .indicator-dot::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 28px;\n    height: 28px;\n  }\n\n  .indicator-dot.active {\n    width: 24px;\n    border-radius: 4px;\n    background-color: var(--md-carousel-indicator-active-color, #6750a4);\n  }\n\n  .indicator-dot:focus-visible {\n    outline: 2px solid var(--md-carousel-indicator-active-color, #6750a4);\n    outline-offset: 2px;\n  }\n`;\n\nexport const carouselItemStyles = css`\n  :host {\n    display: inline-block;\n    flex: 0 0 auto;\n    box-sizing: border-box;\n    position: relative;\n    overflow: hidden;\n    scroll-snap-align: start;\n    scroll-snap-stop: normal;\n    border-radius: var(--md-carousel-item-shape, var(--md-sys-shape-corner-extra-large, 28px));\n    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);\n    width: var(--md-carousel-item-width, clamp(220px, 32%, 360px));\n    height: var(--md-carousel-item-height, 100%);\n    min-height: 180px;\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                box-shadow 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([snap-align=\"center\"]) {\n    scroll-snap-align: center;\n  }\n\n  :host([snap-align=\"end\"]) {\n    scroll-snap-align: end;\n  }\n\n  :host([snap-align=\"start\"]) {\n    scroll-snap-align: start;\n  }\n\n  :host([interactive]) {\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .item-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    overflow: hidden;\n    text-decoration: none;\n    color: inherit;\n    box-sizing: border-box;\n  }\n\n  .media-container {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    overflow: hidden;\n  }\n\n  .media-container img,\n  ::slotted(img) {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .scrim {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 1;\n    padding: 20px 16px 16px;\n    background: linear-gradient(\n      to top,\n      rgba(0, 0, 0, 0.8) 0%,\n      rgba(0, 0, 0, 0.4) 60%,\n      transparent 100%\n    );\n    color: #ffffff;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    pointer-events: none;\n  }\n\n  .headline {\n    font-size: 1.125rem;\n    font-weight: 500;\n    line-height: 1.4;\n    margin: 0;\n    color: inherit;\n  }\n\n  .subhead {\n    font-size: 0.875rem;\n    font-weight: 400;\n    line-height: 1.3;\n    margin: 0;\n    opacity: 0.88;\n    color: inherit;\n  }\n\n  .content-slot {\n    position: relative;\n    z-index: 2;\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { carouselItemStyles } from './carousel.css.js';\n\nexport type CarouselSnapAlign = 'start' | 'center' | 'end';\n\n/**\n * Material Design 3 Carousel Item component.\n *\n * @slot - Default slot for custom content or media.\n * @slot media - Specific slot for image or video elements.\n * @slot headline - Custom headline content.\n * @slot subhead - Custom subhead or description content.\n */\n@customElement('md-carousel-item')\nexport class MdCarouselItem extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, carouselItemStyles];\n\n  @property({ type: String })\n  src = '';\n\n  @property({ type: String })\n  alt = '';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  subhead = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: Boolean, reflect: true })\n  interactive = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, reflect: true, attribute: 'snap-align' })\n  snapAlign: CarouselSnapAlign = 'start';\n\n  @property({ type: String, reflect: true })\n  layout = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n    if (!this.hasAttribute('aria-roledescription')) {\n      this.setAttribute('aria-roledescription', 'slide');\n    }\n    this.addEventListener('click', this.handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n    this.emitEvent('carousel-item-click', { item: this });\n  };\n\n  override render() {\n    const hasMedia = Boolean(this.src);\n    const hasScrim = Boolean(this.headline || this.subhead);\n    const isClickable = Boolean(this.interactive || this.href);\n\n    const innerContent = html`\n      ${isClickable ? html`<md-ripple ?disabled=${this.disabled}></md-ripple><md-focus-ring></md-focus-ring>` : nothing}\n      ${hasMedia ? html`\n        <div class=\"media-container\">\n          <img src=${this.src} alt=${this.alt} loading=\"lazy\" />\n        </div>\n      ` : html`\n        <slot name=\"media\"></slot>\n      `}\n      <div class=\"content-slot\">\n        <slot></slot>\n      </div>\n      ${hasScrim ? html`\n        <div class=\"scrim\">\n          ${this.headline ? html`<div class=\"headline\"><slot name=\"headline\">${this.headline}</slot></div>` : nothing}\n          ${this.subhead ? html`<div class=\"subhead\"><slot name=\"subhead\">${this.subhead}</slot></div>` : nothing}\n        </div>\n      ` : nothing}\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          class=\"item-container\"\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n        >\n          ${innerContent}\n        </a>\n      `;\n    }\n\n    return html`\n      <div class=\"item-container\">\n        ${innerContent}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-carousel-item': MdCarouselItem;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{checkbox-BqlboAHd.js → checkbox-CsqUHVOF.js}

@@ -1,10 +1,11 @@
-import { t as i } from "./decorate-DXuynaiA.js";
-import { t as s } from "./form-associated-Cty_ZaS9.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import { css as a, html as n } from "lit";
-import { customElement as d, property as o, query as l } from "lit/decorators.js";
-var c = a`
+import { t as e } from "./decorate-DknOJ8FJ.js";
+import { t } from "./form-associated-Do5uXckv.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import { css as n, html as r } from "lit";
+import { customElement as i, property as a, query as o } from "lit/decorators.js";
+//#region src/components/checkbox/checkbox.css.ts
+var s = n`
   :host {
     display: inline-flex;
     align-items: center;
@@ -109,43 +110,43 @@ var c = a`
     height: 0;
     pointer-events: none;
   }
-`, e = class extends s {
-  constructor(...t) {
-    super(...t), this.checked = !1, this.indeterminate = !1, this.error = !1, this.value = "on", this.handleClick = (r) => {
-      this.disabled || (r.preventDefault(), this.toggle());
-    }, this.handleKeyDown = (r) => {
-      this.disabled || (r.key === " " || r.key === "Enter") && (r.preventDefault(), this.toggle());
-    };
-  }
-  static {
-    this.styles = [s.styles, c];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.tabIndex = this.disabled ? -1 : 0, this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this.updateFormValue();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
-  }
-  updated(t) {
-    super.updated(t), (t.has("checked") || t.has("indeterminate") || t.has("value")) && this.updateFormValue();
-  }
-  formResetCallback() {
-    this.checked = !1, this.indeterminate = !1, this.updateFormValue();
-  }
-  updateFormValue() {
-    this.setFormValue(this.checked ? this.value : null), this.required && !this.checked ? this.setValidity({ valueMissing: !0 }, "Please check this box if you want to proceed") : this.setValidity({});
-  }
-  toggle() {
-    this.indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked, this.updateFormValue(), this.emitEvent("change", {
-      checked: this.checked,
-      indeterminate: this.indeterminate
-    }), this.emitEvent("input", {
-      checked: this.checked,
-      indeterminate: this.indeterminate
-    });
-  }
-  render() {
-    return n`
+`, c = class extends t {
+	constructor(...e) {
+		super(...e), this.checked = !1, this.indeterminate = !1, this.error = !1, this.value = "on", this.handleClick = (e) => {
+			this.disabled || (e.preventDefault(), this.toggle());
+		}, this.handleKeyDown = (e) => {
+			this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+		};
+	}
+	static {
+		this.styles = [t.styles, s];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.tabIndex = this.disabled ? -1 : 0, this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this.updateFormValue();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(e) {
+		super.updated(e), (e.has("checked") || e.has("indeterminate") || e.has("value")) && this.updateFormValue();
+	}
+	formResetCallback() {
+		this.checked = !1, this.indeterminate = !1, this.updateFormValue();
+	}
+	updateFormValue() {
+		this.setFormValue(this.checked ? this.value : null), this.required && !this.checked ? this.setValidity({ valueMissing: !0 }, "Please check this box if you want to proceed") : this.setValidity({});
+	}
+	toggle() {
+		this.indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked, this.updateFormValue(), this.emitEvent("change", {
+			checked: this.checked,
+			indeterminate: this.indeterminate
+		}), this.emitEvent("input", {
+			checked: this.checked,
+			indeterminate: this.indeterminate
+		});
+	}
+	render() {
+		return r`
       <div class="container">
         <div class="box">
           <md-ripple ?disabled=${this.disabled}></md-ripple>
@@ -170,25 +171,19 @@ var c = a`
       </div>
       <slot></slot>
     `;
-  }
-};
-i([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "checked", void 0);
-i([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "indeterminate", void 0);
-i([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "error", void 0);
-i([o({ type: String })], e.prototype, "value", void 0);
-i([l("input")], e.prototype, "inputElement", void 0);
-e = i([d("md-checkbox")], e);
-export {
-  e as t
+	}
 };
+e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "checked", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "indeterminate", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "error", void 0), e([a({ type: String })], c.prototype, "value", void 0), e([o("input")], c.prototype, "inputElement", void 0), c = e([i("md-checkbox")], c);
+//#endregion
+export { c as t };
 
-//# sourceMappingURL=checkbox-BqlboAHd.js.map
+//# sourceMappingURL=checkbox-CsqUHVOF.js.map

package/dist/chunks/{checkbox-BqlboAHd.js.map → checkbox-CsqUHVOF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-BqlboAHd.js","names":[],"sources":["../../src/components/checkbox/checkbox.css.ts","../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const checkboxStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    gap: 8px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.38;\n    pointer-events: none;\n  }\n\n  .container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n  }\n\n  .box {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    box-sizing: border-box;\n    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);\n    border-radius: var(--md-sys-shape-corner-extra-small, 2px);\n    background-color: transparent;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .box md-ripple {\n    inset: -2px;\n  }\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([error]) .box {\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  :host([error][checked]) .box,\n  :host([error][indeterminate]) .box {\n    background-color: var(--md-sys-color-error, #B3261E);\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  :host([disabled]) .box {\n    border-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled][checked]) .box,\n  :host([disabled][indeterminate]) .box {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n    border-color: transparent;\n  }\n\n  .mark {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    fill: none;\n    stroke: var(--md-sys-color-on-primary, #FFFFFF);\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    opacity: 0;\n    transition: opacity 150ms ease;\n    z-index: 1;\n  }\n\n  :host([checked]) .mark.check {\n    opacity: 1;\n  }\n\n  :host([indeterminate]) .mark.dash {\n    opacity: 1;\n  }\n\n  input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n    pointer-events: none;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { checkboxStyles } from './checkbox.css.js';\n\n@customElement('md-checkbox')\nexport class MdCheckbox extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, checkboxStyles];\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : 0;\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.updateFormValue();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('indeterminate') || changedProperties.has('value')) {\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.checked = false;\n    this.indeterminate = false;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    this.setFormValue(this.checked ? this.value : null);\n    if (this.required && !this.checked) {\n      this.setValidity({ valueMissing: true }, 'Please check this box if you want to proceed');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.toggle();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private toggle() {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n      this.checked = true;\n    } else {\n      this.checked = !this.checked;\n    }\n    this.updateFormValue();\n    this.emitEvent('change', { checked: this.checked, indeterminate: this.indeterminate });\n    this.emitEvent('input', { checked: this.checked, indeterminate: this.indeterminate });\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\">\n        <div class=\"box\">\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <!-- Checkmark SVG -->\n          <svg class=\"mark check\" viewBox=\"0 0 18 18\">\n            <polyline points=\"3.5,9.5 7,13 14.5,5.5\"></polyline>\n          </svg>\n          <!-- Indeterminate Dash SVG -->\n          <svg class=\"mark dash\" viewBox=\"0 0 18 18\">\n            <line x1=\"3.5\" y1=\"9\" x2=\"14.5\" y2=\"9\"></line>\n          </svg>\n        </div>\n        <input\n          type=\"checkbox\"\n          .checked=${this.checked}\n          .indeterminate=${this.indeterminate}\n          ?disabled=${this.disabled}\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n        />\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-checkbox': MdCheckbox;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"checkbox-CsqUHVOF.js","names":[],"sources":["../../src/components/checkbox/checkbox.css.ts","../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const checkboxStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    gap: 8px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.38;\n    pointer-events: none;\n  }\n\n  .container {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n  }\n\n  .box {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 18px;\n    height: 18px;\n    box-sizing: border-box;\n    border: 2px solid var(--md-sys-color-on-surface-variant, #49454F);\n    border-radius: var(--md-sys-shape-corner-extra-small, 2px);\n    background-color: transparent;\n    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .box md-ripple {\n    inset: -2px;\n  }\n\n  :host([checked]) .box,\n  :host([indeterminate]) .box {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([error]) .box {\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  :host([error][checked]) .box,\n  :host([error][indeterminate]) .box {\n    background-color: var(--md-sys-color-error, #B3261E);\n    border-color: var(--md-sys-color-error, #B3261E);\n  }\n\n  :host([disabled]) .box {\n    border-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled][checked]) .box,\n  :host([disabled][indeterminate]) .box {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n    border-color: transparent;\n  }\n\n  .mark {\n    position: absolute;\n    width: 14px;\n    height: 14px;\n    fill: none;\n    stroke: var(--md-sys-color-on-primary, #FFFFFF);\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    opacity: 0;\n    transition: opacity 150ms ease;\n    z-index: 1;\n  }\n\n  :host([checked]) .mark.check {\n    opacity: 1;\n  }\n\n  :host([indeterminate]) .mark.dash {\n    opacity: 1;\n  }\n\n  input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n    pointer-events: none;\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport { checkboxStyles } from './checkbox.css.js';\n\n@customElement('md-checkbox')\nexport class MdCheckbox extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, checkboxStyles];\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  @query('input')\n  private inputElement?: HTMLInputElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : 0;\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.updateFormValue();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('indeterminate') || changedProperties.has('value')) {\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.checked = false;\n    this.indeterminate = false;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    this.setFormValue(this.checked ? this.value : null);\n    if (this.required && !this.checked) {\n      this.setValidity({ valueMissing: true }, 'Please check this box if you want to proceed');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.toggle();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private toggle() {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n      this.checked = true;\n    } else {\n      this.checked = !this.checked;\n    }\n    this.updateFormValue();\n    this.emitEvent('change', { checked: this.checked, indeterminate: this.indeterminate });\n    this.emitEvent('input', { checked: this.checked, indeterminate: this.indeterminate });\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\">\n        <div class=\"box\">\n          <md-ripple ?disabled=${this.disabled}></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <!-- Checkmark SVG -->\n          <svg class=\"mark check\" viewBox=\"0 0 18 18\">\n            <polyline points=\"3.5,9.5 7,13 14.5,5.5\"></polyline>\n          </svg>\n          <!-- Indeterminate Dash SVG -->\n          <svg class=\"mark dash\" viewBox=\"0 0 18 18\">\n            <line x1=\"3.5\" y1=\"9\" x2=\"14.5\" y2=\"9\"></line>\n          </svg>\n        </div>\n        <input\n          type=\"checkbox\"\n          .checked=${this.checked}\n          .indeterminate=${this.indeterminate}\n          ?disabled=${this.disabled}\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n        />\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-checkbox': MdCheckbox;\n  }\n}\n"],"mappings":";;;;;;;AAEA,IAAa,IAAiB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCOpB,IAAN,cAAyB,EAAwB;;EA4D7B,aAxDf,KAAA,UAAA,IAGM,KAAA,gBAAA,IAGR,KAAA,QAAA,IAGA,KAAA,QAAA,MAyCe,KAAA,eAAA,MAAsB;GACvC,KAAK,aACT,EAAM,eAAe,GACrB,KAAK,OAAO;EACd,GAEyB,KAAA,iBAAA,MAAyB;GAC5C,KAAK,aACL,EAAM,QAAQ,OAAO,EAAM,QAAQ,aACrC,EAAM,eAAe,GACrB,KAAK,OAAO;EAEhB;;;EAjEyB,KAAA,SAAA,CAAC,EAAwB,QAAQ,CAAc;;CAiBxE,oBAA6B;EAK3B,AAJA,MAAM,kBAAkB,GACxB,KAAK,WAAW,KAAK,WAAW,KAAK,GACrC,KAAK,iBAAiB,SAAS,KAAK,WAAW,GAC/C,KAAK,iBAAiB,WAAW,KAAK,aAAa,GACnD,KAAK,gBAAgB;CACvB;CAEA,uBAAgC;EAG9B,AAFA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,WAAW,GAClD,KAAK,oBAAoB,WAAW,KAAK,aAAa;CACxD;CAEA,QAAiB,GAAyC;EAExD,AADA,MAAM,QAAQ,CAAiB,IAC3B,EAAkB,IAAI,SAAS,KAAK,EAAkB,IAAI,eAAe,KAAK,EAAkB,IAAI,OAAO,MAC7G,KAAK,gBAAgB;CAEzB;CAEA,oBAA6B;EAG3B,AAFA,KAAK,UAAU,IACf,KAAK,gBAAgB,IACrB,KAAK,gBAAgB;CACvB;CAEA,kBAA0B;EAExB,AADA,KAAK,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI,GAC9C,KAAK,YAAY,CAAC,KAAK,UACzB,KAAK,YAAY,EAAE,cAAc,GAAK,GAAG,8CAA8C,IAEvF,KAAK,YAAY,CAAC,CAAC;CAEvB;CAgBA,SAAiB;EASf,AARI,KAAK,iBACP,KAAK,gBAAgB,IACrB,KAAK,UAAU,MAEf,KAAK,UAAU,CAAC,KAAK,SAEvB,KAAK,gBAAgB,GACrB,KAAK,UAAU,UAAU;GAAE,SAAS,KAAK;GAAS,eAAe,KAAK;EAAc,CAAC,GACrF,KAAK,UAAU,SAAS;GAAE,SAAS,KAAK;GAAS,eAAe,KAAK;EAAc,CAAC;CACtF;CAEA,SAAkB;EAChB,OAAO,CAAI;;;iCAGkB,KAAK,SAAS;;;;;;;;;;;;;qBAa1B,KAAK,QAAQ;2BACP,KAAK,cAAc;sBACxB,KAAK,SAAS;;;;;;;CAOlC;AACF;AAxGG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzB,EAAA,CAAA,EAAM,OAAO,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAhBf,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}

package/dist/chunks/{chip-CI1ZINnr.js → chip-B5c-I8bj.js}

@@ -1,10 +1,11 @@
-import { n as r, t } from "./decorate-DXuynaiA.js";
-import "./ripple-squbKHhj.js";
-import "./focus-ring-CuiJuM-y.js";
-import "./icon-DrNqcNEL.js";
-import { css as l, html as i, nothing as n } from "lit";
-import { customElement as c, property as o } from "lit/decorators.js";
-var h = l`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import "./ripple-CBOKeVfm.js";
+import "./focus-ring-K6SY_mIm.js";
+import "./icon-FvKeXi61.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/chip/chip.css.ts
+var s = n`
   :host {
     display: inline-flex;
     outline: none;
@@ -79,47 +80,47 @@ var h = l`
   .remove-btn:hover {
     background-color: rgba(29, 27, 32, 0.12);
   }
-`, m = l`
+`, c = n`
   :host {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 8px;
   }
-`, e = class extends r {
-  constructor(...p) {
-    super(...p), this.variant = "assist", this.label = "", this.icon = "", this.selected = !1, this.removable = !1, this.disabled = !1, this.handleClick = (s) => {
-      this.disabled || this.variant === "filter" && (this.selected = !this.selected, this.emitEvent("change", { selected: this.selected }));
-    }, this.handleRemove = (s) => {
-      s.stopPropagation(), this.emitEvent("remove");
-    };
-  }
-  static {
-    this.styles = [r.styles, h];
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", this.handleClick);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick);
-  }
-  render() {
-    return i`
+`, l = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "assist", this.label = "", this.icon = "", this.selected = !1, this.removable = !1, this.disabled = !1, this.handleClick = (e) => {
+			this.disabled || this.variant === "filter" && (this.selected = !this.selected, this.emitEvent("change", { selected: this.selected }));
+		}, this.handleRemove = (e) => {
+			e.stopPropagation(), this.emitEvent("remove");
+		};
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("click", this.handleClick);
+	}
+	render() {
+		return r`
       <div class="chip" tabindex=${this.disabled ? "-1" : "0"}>
         <md-ripple ?disabled=${this.disabled}></md-ripple>
         <md-focus-ring></md-focus-ring>
 
         <span class="icon">
-          ${this.variant === "filter" && this.selected ? i`<md-icon name="check" size="18"></md-icon>` : i`
+          ${this.variant === "filter" && this.selected ? r`<md-icon name="check" size="18"></md-icon>` : r`
                 <slot name="icon">
-                  ${this.icon ? i`<md-icon name=${this.icon} size="18"></md-icon>` : n}
+                  ${this.icon ? r`<md-icon name=${this.icon} size="18"></md-icon>` : i}
                 </slot>
               `}
         </span>
 
         <slot>${this.label}</slot>
 
-        ${this.removable || this.variant === "input" ? i`
+        ${this.removable || this.variant === "input" ? r`
               <button
                 class="remove-btn"
                 aria-label="Remove"
@@ -128,42 +129,34 @@ var h = l`
               >
                 <md-icon name="close" size="16"></md-icon>
               </button>
-            ` : n}
+            ` : i}
       </div>
     `;
-  }
+	}
 };
 t([o({
-  type: String,
-  reflect: !0
-})], e.prototype, "variant", void 0);
-t([o({ type: String })], e.prototype, "label", void 0);
-t([o({ type: String })], e.prototype, "icon", void 0);
-t([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "selected", void 0);
-t([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "removable", void 0);
-t([o({
-  type: Boolean,
-  reflect: !0
-})], e.prototype, "disabled", void 0);
-e = t([c("md-chip")], e);
-var a = class extends r {
-  static {
-    this.styles = [r.styles, m];
-  }
-  render() {
-    return i`<slot></slot>`;
-  }
-};
-a = t([c("md-chip-set")], a);
-export {
-  a as n,
-  e as t
+	type: String,
+	reflect: !0
+})], l.prototype, "variant", void 0), t([o({ type: String })], l.prototype, "label", void 0), t([o({ type: String })], l.prototype, "icon", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "selected", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "removable", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), l = t([a("md-chip")], l);
+var u = class extends e {
+	static {
+		this.styles = [e.styles, c];
+	}
+	render() {
+		return r`<slot></slot>`;
+	}
 };
+u = t([a("md-chip-set")], u);
+//#endregion
+export { u as n, l as t };
 
-//# sourceMappingURL=chip-CI1ZINnr.js.map
+//# sourceMappingURL=chip-B5c-I8bj.js.map