@francofantomius/material-components 1.0.2 → 1.1.1

package/dist/chunks/button-D2vn7kJ8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-D2vn7kJ8.js","names":[],"sources":["../../src/components/button/button.css.ts","../../src/components/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  button, a {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 64px;\n    height: 40px;\n    padding: 0 24px;\n    border: none;\n    border-radius: var(--md-button-border-radius, var(--md-button-shape, var(--md-sys-shape-corner-full, 9999px)));\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-label-large-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    text-decoration: none;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                color 200ms cubic-bezier(0.2, 0, 0, 1);\n    overflow: hidden;\n  }\n\n  :host([has-icon]) button,\n  :host([has-icon]) a {\n    padding-left: 16px;\n  }\n\n  :host([has-trailing-icon]) button,\n  :host([has-trailing-icon]) a {\n    padding-right: 16px;\n  }\n\n  /* --- Filled (Default) --- */\n  :host(:not([variant])) button,\n  :host(:not([variant])) a,\n  :host([variant=\"filled\"]) button,\n  :host([variant=\"filled\"]) a {\n    background-color: var(--md-sys-color-primary, #6750a4);\n    color: var(--md-sys-color-on-primary, #ffffff);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"filled\"]:hover) button,\n  :host([variant=\"filled\"]:hover) a,\n  :host(:not([variant]):hover) button,\n  :host(:not([variant]):hover) a {\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  /* --- Elevated --- */\n  :host([variant=\"elevated\"]) button,\n  :host([variant=\"elevated\"]) a {\n    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);\n    color: var(--md-sys-color-primary, #6750a4);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0,0,0,0.15));\n  }\n\n  :host([variant=\"elevated\"]:hover) button,\n  :host([variant=\"elevated\"]:hover) a {\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0,0,0,0.15));\n  }\n\n  /* --- Filled Tonal --- */\n  :host([variant=\"tonal\"]) button,\n  :host([variant=\"tonal\"]) a {\n    background-color: var(--md-sys-color-secondary-container, #e8def8);\n    color: var(--md-sys-color-on-secondary-container, #1d192b);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"tonal\"]:hover) button,\n  :host([variant=\"tonal\"]:hover) a {\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\"]) button,\n  :host([variant=\"outlined\"]) a {\n    background-color: transparent;\n    color: var(--md-sys-color-primary, #6750a4);\n    border: 1px solid var(--md-sys-color-outline, #79747e);\n  }\n\n  /* --- Text --- */\n  :host([variant=\"text\"]) button,\n  :host([variant=\"text\"]) a {\n    background-color: transparent;\n    color: var(--md-sys-color-primary, #6750a4);\n    padding: 0 12px;\n  }\n\n  /* --- Disabled --- */\n  :host([disabled]) button,\n  :host([disabled]) a {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  :host([disabled]:not([variant=\"outlined\"]):not([variant=\"text\"])) button,\n  :host([disabled]:not([variant=\"outlined\"]):not([variant=\"text\"])) a {\n    background-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"outlined\"]) button,\n  :host([disabled][variant=\"outlined\"]) a {\n    border-color: rgba(29, 27, 32, 0.12);\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  :host([disabled][variant=\"text\"]) button,\n  :host([disabled][variant=\"text\"]) a {\n    color: rgba(29, 27, 32, 0.38);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    position: relative;\n    z-index: 1;\n  }\n\n  .spinner {\n    width: 18px;\n    height: 18px;\n    border: 2px solid currentColor;\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: md-spin 800ms linear infinite;\n  }\n\n  @keyframes md-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { buttonStyles } from './button.css.js';\n\nexport type ButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';\n\n@customElement('md-button')\nexport class MdButton extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, buttonStyles];\n\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = 'filled';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  target = '';\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @queryAssignedElements({ slot: 'icon' })\n  private assignedIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon' })\n  private assignedTrailingIcons!: HTMLElement[];\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n      return;\n    }\n\n    if (this.type === 'submit' || this.type === 'reset') {\n      const form = this.closest('form');\n      if (form) {\n        if (this.type === 'submit') {\n          form.requestSubmit();\n        } else {\n          form.reset();\n        }\n      }\n    }\n  };\n\n  private handleSlotChange(): void {\n    const hasLeading = Boolean(this.icon || (this.assignedIcons && this.assignedIcons.length > 0));\n    const hasTrailing = Boolean(this.trailingIcon || (this.assignedTrailingIcons && this.assignedTrailingIcons.length > 0));\n\n    this.toggleAttribute('has-icon', hasLeading);\n    this.toggleAttribute('has-trailing-icon', hasTrailing);\n  }\n\n  override firstUpdated() {\n    this.handleSlotChange();\n  }\n\n  override render() {\n    const content = html`\n      <md-ripple ?disabled=${this.disabled || this.loading}></md-ripple>\n      <md-focus-ring></md-focus-ring>\n      <span class=\"content\">\n        ${this.loading\n          ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>`\n          : html`\n              <slot name=\"icon\" @slotchange=${this.handleSlotChange}>\n                ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n              </slot>\n            `}\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        ${!this.loading\n          ? html`\n              <slot name=\"trailing-icon\" @slotchange=${this.handleSlotChange}>\n                ${this.trailingIcon ? html`<md-icon name=${this.trailingIcon}></md-icon>` : nothing}\n              </slot>\n            `\n          : nothing}\n      </span>\n    `;\n\n    if (this.href) {\n      return html`\n        <a\n          href=${this.disabled ? nothing : this.href}\n          target=${this.target || nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this.handleClick}\n        >\n          ${content}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        type=${this.type}\n        ?disabled=${this.disabled || this.loading}\n        @click=${this.handleClick}\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-button': MdButton;\n  }\n}\n\n"],"mappings":"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"}

package/dist/chunks/button-group-CNqvJx1n.js

@@ -0,0 +1,143 @@
+import { n as h, t as n } from "./decorate-DXuynaiA.js";
+import { css as c, html as u } from "lit";
+import { customElement as p, property as a, queryAssignedElements as f } from "lit/decorators.js";
+var y = c`
+  :host {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--md-button-group-gap, 8px);
+    box-sizing: border-box;
+    vertical-align: middle;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :host([full-width]) {
+    display: flex;
+    width: 100%;
+  }
+
+  :host([full-width]:not([orientation='vertical'])) ::slotted(*) {
+    flex: 1 1 0;
+    width: 100%;
+  }
+
+  :host([full-width][orientation='vertical']) ::slotted(*) {
+    width: 100%;
+  }
+
+  /* --- Connected Button Group --- */
+  :host([connected]) {
+    gap: 0;
+  }
+
+  :host([connected]:not([orientation='vertical'])) ::slotted(*:not(:first-child)) {
+    margin-inline-start: -1px;
+  }
+
+  :host([connected][orientation='vertical']) ::slotted(*:not(:first-child)) {
+    margin-top: -1px;
+  }
+
+  ::slotted(*) {
+    position: relative;
+    z-index: 0;
+  }
+
+  ::slotted(*:hover),
+  ::slotted(*:focus-within),
+  ::slotted(*:active) {
+    z-index: 1;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+`, r = class extends h {
+  constructor(...i) {
+    super(...i), this.orientation = "horizontal", this.connected = !1, this.shape = "pill", this.variant = "", this.fullWidth = !1, this.disabled = !1, this.handleSlotChange = () => {
+      this.syncChildren();
+    }, this.handleKeyDown = (t) => {
+      const e = this.getInteractiveChildren().filter((l) => !l.disabled && !l.hasAttribute("disabled"));
+      if (e.length === 0) return;
+      const d = document.activeElement, s = e.findIndex((l) => l === d || l.shadowRoot && l.shadowRoot.activeElement === d);
+      let o = -1;
+      t.key === "ArrowRight" || t.key === "ArrowDown" ? (t.preventDefault(), o = s >= 0 && s < e.length - 1 ? s + 1 : 0) : t.key === "ArrowLeft" || t.key === "ArrowUp" ? (t.preventDefault(), o = s > 0 ? s - 1 : e.length - 1) : t.key === "Home" ? (t.preventDefault(), o = 0) : t.key === "End" && (t.preventDefault(), o = e.length - 1), o !== -1 && e[o] && e[o]?.focus();
+    };
+  }
+  static {
+    this.styles = [h.styles, y];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "group"), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(i) {
+    super.updated(i), (i.has("connected") || i.has("orientation") || i.has("shape") || i.has("variant") || i.has("disabled")) && this.syncChildren();
+  }
+  getInteractiveChildren() {
+    return this.slottedElements ? this.slottedElements.filter((i) => i.nodeType === Node.ELEMENT_NODE && !i.hasAttribute("slot")) : [];
+  }
+  syncChildren() {
+    const i = this.getInteractiveChildren();
+    if (i.length !== 0)
+      if (this.disabled && i.forEach((t) => {
+        "disabled" in t ? t.disabled = !0 : t.setAttribute("disabled", "");
+      }), this.variant && i.forEach((t) => {
+        "variant" in t && (t.variant = this.variant);
+      }), this.connected) {
+        let t = "var(--md-sys-shape-corner-full, 9999px)", e = "var(--md-sys-shape-corner-extra-small, 4px)";
+        this.shape === "rounded" ? (t = "var(--md-sys-shape-corner-medium, 12px)", e = "var(--md-sys-shape-corner-extra-small, 4px)") : this.shape === "square" && (t = "var(--md-sys-shape-corner-extra-small, 4px)", e = "0px"), i.length === 1 ? (i[0].style.setProperty("--md-button-border-radius", t), i[0].style.borderRadius = t) : i.forEach((d, s) => {
+          let o = "";
+          this.orientation === "vertical" ? s === 0 ? o = `${t} ${t} ${e} ${e}` : s === i.length - 1 ? o = `${e} ${e} ${t} ${t}` : o = `${e} ${e} ${e} ${e}` : s === 0 ? o = `${t} ${e} ${e} ${t}` : s === i.length - 1 ? o = `${e} ${t} ${t} ${e}` : o = `${e} ${e} ${e} ${e}`, d.style.setProperty("--md-button-border-radius", o), d.style.borderRadius = o;
+        });
+      } else i.forEach((t) => {
+        t.style.removeProperty("--md-button-border-radius"), t.style.borderRadius = "";
+      });
+  }
+  render() {
+    return u`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+};
+n([a({
+  type: String,
+  reflect: !0
+})], r.prototype, "orientation", void 0);
+n([a({
+  type: Boolean,
+  reflect: !0
+})], r.prototype, "connected", void 0);
+n([a({
+  type: String,
+  reflect: !0
+})], r.prototype, "shape", void 0);
+n([a({
+  type: String,
+  reflect: !0
+})], r.prototype, "variant", void 0);
+n([a({
+  type: Boolean,
+  attribute: "full-width",
+  reflect: !0
+})], r.prototype, "fullWidth", void 0);
+n([a({
+  type: Boolean,
+  reflect: !0
+})], r.prototype, "disabled", void 0);
+n([f({ flatten: !0 })], r.prototype, "slottedElements", void 0);
+r = n([p("md-button-group")], r);
+export {
+  r as t
+};
+
+//# sourceMappingURL=button-group-CNqvJx1n.js.map

package/dist/chunks/button-group-CNqvJx1n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-CNqvJx1n.js","names":[],"sources":["../../src/components/button-group/button-group.css.ts","../../src/components/button-group/button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonGroupStyles = css`\n  :host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--md-button-group-gap, 8px);\n    box-sizing: border-box;\n    vertical-align: middle;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([orientation='vertical']) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  :host([full-width]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([full-width]:not([orientation='vertical'])) ::slotted(*) {\n    flex: 1 1 0;\n    width: 100%;\n  }\n\n  :host([full-width][orientation='vertical']) ::slotted(*) {\n    width: 100%;\n  }\n\n  /* --- Connected Button Group --- */\n  :host([connected]) {\n    gap: 0;\n  }\n\n  :host([connected]:not([orientation='vertical'])) ::slotted(*:not(:first-child)) {\n    margin-inline-start: -1px;\n  }\n\n  :host([connected][orientation='vertical']) ::slotted(*:not(:first-child)) {\n    margin-top: -1px;\n  }\n\n  ::slotted(*) {\n    position: relative;\n    z-index: 0;\n  }\n\n  ::slotted(*:hover),\n  ::slotted(*:focus-within),\n  ::slotted(*:active) {\n    z-index: 1;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n`;\n","import { html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport type { ButtonVariant } from '../button/button.js';\nimport { buttonGroupStyles } from './button-group.css.js';\n\nexport type ButtonGroupOrientation = 'horizontal' | 'vertical';\nexport type ButtonGroupShape = 'pill' | 'rounded' | 'square';\n\n@customElement('md-button-group')\nexport class MdButtonGroup extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, buttonGroupStyles];\n\n  @property({ type: String, reflect: true })\n  orientation: ButtonGroupOrientation = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  connected = false;\n\n  @property({ type: String, reflect: true })\n  shape: ButtonGroupShape = 'pill';\n\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant | '' = '';\n\n  @property({ type: Boolean, attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ flatten: true })\n  private slottedElements!: HTMLElement[];\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'group');\n    }\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.has('connected') ||\n      changedProperties.has('orientation') ||\n      changedProperties.has('shape') ||\n      changedProperties.has('variant') ||\n      changedProperties.has('disabled')\n    ) {\n      this.syncChildren();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncChildren();\n  };\n\n  private getInteractiveChildren(): HTMLElement[] {\n    if (!this.slottedElements) return [];\n    return this.slottedElements.filter(\n      (el): el is HTMLElement =>\n        el.nodeType === Node.ELEMENT_NODE &&\n        !el.hasAttribute('slot')\n    );\n  }\n\n  private syncChildren() {\n    const buttons = this.getInteractiveChildren();\n    if (buttons.length === 0) return;\n\n    // Sync disabled state\n    if (this.disabled) {\n      buttons.forEach((btn) => {\n        if ('disabled' in btn) {\n          (btn as any).disabled = true;\n        } else {\n          btn.setAttribute('disabled', '');\n        }\n      });\n    }\n\n    // Sync variant if specified\n    if (this.variant) {\n      buttons.forEach((btn) => {\n        if ('variant' in btn) {\n          (btn as any).variant = this.variant;\n        }\n      });\n    }\n\n    // Sync shape-shifting border radiuses for connected buttons\n    if (this.connected) {\n      let outer = 'var(--md-sys-shape-corner-full, 9999px)';\n      let inner = 'var(--md-sys-shape-corner-extra-small, 4px)';\n\n      if (this.shape === 'rounded') {\n        outer = 'var(--md-sys-shape-corner-medium, 12px)';\n        inner = 'var(--md-sys-shape-corner-extra-small, 4px)';\n      } else if (this.shape === 'square') {\n        outer = 'var(--md-sys-shape-corner-extra-small, 4px)';\n        inner = '0px';\n      }\n\n      if (buttons.length === 1) {\n        buttons[0]!.style.setProperty('--md-button-border-radius', outer);\n        buttons[0]!.style.borderRadius = outer;\n      } else {\n        buttons.forEach((btn, index) => {\n          let radius = '';\n          if (this.orientation === 'vertical') {\n            if (index === 0) {\n              radius = `${outer} ${outer} ${inner} ${inner}`;\n            } else if (index === buttons.length - 1) {\n              radius = `${inner} ${inner} ${outer} ${outer}`;\n            } else {\n              radius = `${inner} ${inner} ${inner} ${inner}`;\n            }\n          } else {\n            // Horizontal\n            if (index === 0) {\n              radius = `${outer} ${inner} ${inner} ${outer}`;\n            } else if (index === buttons.length - 1) {\n              radius = `${inner} ${outer} ${outer} ${inner}`;\n            } else {\n              radius = `${inner} ${inner} ${inner} ${inner}`;\n            }\n          }\n          btn.style.setProperty('--md-button-border-radius', radius);\n          btn.style.borderRadius = radius;\n        });\n      }\n    } else {\n      buttons.forEach((btn) => {\n        btn.style.removeProperty('--md-button-border-radius');\n        btn.style.borderRadius = '';\n      });\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const buttons = this.getInteractiveChildren().filter((b) => !(b as any).disabled && !b.hasAttribute('disabled'));\n    if (buttons.length === 0) return;\n\n    const currentFocus = document.activeElement;\n    const currentIndex = buttons.findIndex(\n      (b) => b === currentFocus || (b.shadowRoot && b.shadowRoot.activeElement === currentFocus)\n    );\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      nextIndex = currentIndex >= 0 && currentIndex < buttons.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : buttons.length - 1;\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      nextIndex = 0;\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      nextIndex = buttons.length - 1;\n    }\n\n    if (nextIndex !== -1 && buttons[nextIndex]) {\n      buttons[nextIndex]?.focus();\n    }\n  };\n\n  override render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-button-group': MdButtonGroup;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/carousel-item-BG6kjjjk.js

@@ -0,0 +1,371 @@
+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`
+  :host {
+    display: block;
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    --md-carousel-spacing: 8px;
+    --md-carousel-height: auto;
+    --md-carousel-item-shape: var(--md-sys-shape-corner-extra-large, 28px);
+    --md-carousel-control-size: 44px;
+    --md-carousel-control-bg: var(--md-sys-color-surface-container-highest, rgba(255, 255, 255, 0.9));
+    --md-carousel-control-color: var(--md-sys-color-on-surface, #1d1b20);
+    --md-carousel-indicator-color: var(--md-sys-color-outline-variant, #cac4d0);
+    --md-carousel-indicator-active-color: var(--md-sys-color-primary, #6750a4);
+  }
+
+  .carousel-root {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .carousel-viewport-wrapper {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--md-carousel-radius, 0px);
+  }
+
+  .carousel-scroller {
+    display: flex;
+    gap: var(--md-carousel-spacing, 8px);
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scroll-snap-type: x mandatory;
+    padding: 4px 0;
+    margin: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--md-carousel-height, auto);
+    touch-action: pan-y pinch-zoom;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .carousel-scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .carousel-scroller.is-dragging {
+    scroll-snap-type: none;
+    cursor: grabbing;
+  }
+
+  /* Layout variations applied on items via CSS variables */
+  :host([layout="full-width"]) {
+    --md-carousel-item-width: 100%;
+  }
+
+  :host([layout="hero"]) {
+    --md-carousel-item-width: clamp(280px, 80%, 720px);
+  }
+
+  :host([layout="multi-browse"]),
+  :host(:not([layout])) {
+    --md-carousel-item-width: clamp(220px, 32%, 360px);
+  }
+
+  :host([layout="uncontained"]) {
+    --md-carousel-item-width: auto;
+  }
+
+  /* Controls (Previous & Next buttons) */
+  .control-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 3;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--md-carousel-control-size, 44px);
+    height: var(--md-carousel-control-size, 44px);
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    background-color: var(--md-carousel-control-bg, rgba(255, 255, 255, 0.9));
+    color: var(--md-carousel-control-color, #1d1b20);
+    border: none;
+    outline: none;
+    cursor: pointer;
+    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px 2px rgba(0, 0, 0, 0.15));
+    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1),
+                background-color 0.2s,
+                transform 0.2s;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .control-button:hover:not(:disabled) {
+    background-color: var(--md-sys-color-surface-container-high, #e6e0e9);
+    box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15));
+  }
+
+  .control-button:active:not(:disabled) {
+    transform: translateY(-50%) scale(0.94);
+  }
+
+  .control-button:disabled {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .control-button.prev {
+    left: 12px;
+  }
+
+  .control-button.next {
+    right: 12px;
+  }
+
+  /* Indicators / Pagination Dots */
+  .indicators {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    margin-top: 12px;
+    padding: 4px 0;
+  }
+
+  .indicator-dot {
+    position: relative;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    background-color: var(--md-carousel-indicator-color, #cac4d0);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: width 0.3s cubic-bezier(0.2, 0, 0, 1),
+                background-color 0.3s cubic-bezier(0.2, 0, 0, 1),
+                border-radius 0.3s;
+  }
+
+  .indicator-dot::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 28px;
+    height: 28px;
+  }
+
+  .indicator-dot.active {
+    width: 24px;
+    border-radius: 4px;
+    background-color: var(--md-carousel-indicator-active-color, #6750a4);
+  }
+
+  .indicator-dot:focus-visible {
+    outline: 2px solid var(--md-carousel-indicator-active-color, #6750a4);
+    outline-offset: 2px;
+  }
+`, h = c`
+  :host {
+    display: inline-block;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    scroll-snap-align: start;
+    scroll-snap-stop: normal;
+    border-radius: var(--md-carousel-item-shape, var(--md-sys-shape-corner-extra-large, 28px));
+    background-color: var(--md-sys-color-surface-container-low, #f7f2fa);
+    width: var(--md-carousel-item-width, clamp(220px, 32%, 360px));
+    height: var(--md-carousel-item-height, 100%);
+    min-height: 180px;
+    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),
+                box-shadow 250ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([snap-align="center"]) {
+    scroll-snap-align: center;
+  }
+
+  :host([snap-align="end"]) {
+    scroll-snap-align: end;
+  }
+
+  :host([snap-align="start"]) {
+    scroll-snap-align: start;
+  }
+
+  :host([interactive]) {
+    cursor: pointer;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .item-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    overflow: hidden;
+    text-decoration: none;
+    color: inherit;
+    box-sizing: border-box;
+  }
+
+  .media-container {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+  }
+
+  .media-container img,
+  ::slotted(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .scrim {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    padding: 20px 16px 16px;
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.8) 0%,
+      rgba(0, 0, 0, 0.4) 60%,
+      transparent 100%
+    );
+    color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    pointer-events: none;
+  }
+
+  .headline {
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    margin: 0;
+    color: inherit;
+  }
+
+  .subhead {
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.3;
+    margin: 0;
+    opacity: 0.88;
+    color: inherit;
+  }
+
+  .content-slot {
+    position: relative;
+    z-index: 2;
+    height: 100%;
+    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`
+        <div class="media-container">
+          <img src=${this.src} alt=${this.alt} loading="lazy" />
+        </div>
+      ` : i`
+        <slot name="media"></slot>
+      `}
+      <div class="content-slot">
+        <slot></slot>
+      </div>
+      ${a ? i`
+        <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}
+        </div>
+      ` : r}
+    `;
+    return this.href ? i`
+        <a
+          class="item-container"
+          href=${this.disabled ? r : this.href}
+          target=${this.target || r}
+          rel=${this.target === "_blank" ? "noopener noreferrer" : r}
+        >
+          ${n}
+        </a>
+      ` : i`
+      <div class="item-container">
+        ${n}
+      </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

package/dist/chunks/carousel-item-BG6kjjjk.js.map

@@ -0,0 +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;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,GC1JrB,IAAN,cAA6B,EAAc;AAAA;iBAI1C,KAAA,MAAA,IAGA,KAAA,MAAA,IAGK,KAAA,WAAA,IAGD,KAAA,UAAA,IAGH,KAAA,OAAA,IAGE,KAAA,SAAA,IAGK,KAAA,cAAA,IAGH,KAAA,WAAA,IAGoB,KAAA,YAAA,SAGtB,KAAA,SAAA,IAkBc,KAAA,cAAA,CAAA,MAAsB;AAC3C,UAAI,KAAK,UAAU;AACjB,QAAA,EAAM,eAAe,GACrB,EAAM,yBAAyB;AAC/B;AAAA,MACF;AACA,WAAK,UAAU,uBAAuB,EAAE,MAAM,KAAK,CAAC;AAAA,IACtD;AAAA;;AAvDyB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAkB;AAAA;EAgClE,oBAA6B;AAC3B,UAAM,kBAAkB,GACnB,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,OAAO,GAE9B,KAAK,aAAa,sBAAsB,KAC3C,KAAK,aAAa,wBAAwB,OAAO,GAEnD,KAAK,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACjD;AAAA,EAEA,uBAAgC;AAC9B,UAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,WAAW;AAAA,EACpD;AAAA,EAWA,SAAkB;AAChB,UAAM,IAAW,EAAQ,KAAK,KACxB,IAAW,GAAQ,KAAK,YAAY,KAAK,UACzC,IAAc,GAAQ,KAAK,eAAe,KAAK,OAE/C,IAAe;AAAA,QACjB,IAAc,yBAA4B,KAAK,QAAA,iDAAyD,CAAA;AAAA,QACxG,IAAW;AAAA;AAAA,qBAEE,KAAK,GAAA,QAAW,KAAK,GAAA;AAAA;AAAA,UAEhC;AAAA;AAAA,OAEF;AAAA;AAAA;AAAA;AAAA,QAIA,IAAW;AAAA;AAAA,YAEP,KAAK,WAAW,gDAAmD,KAAK,QAAA,kBAA0B,CAAA;AAAA,YAClG,KAAK,UAAU,8CAAiD,KAAK,OAAA,kBAAyB,CAAA;AAAA;AAAA,UAEhG,CAAA;AAAA;AAGN,WAAI,KAAK,OACA;AAAA;AAAA;AAAA,iBAGI,KAAK,WAAW,IAAU,KAAK,IAAA;AAAA,mBAC7B,KAAK,UAAU,CAAA;AAAA,gBAClB,KAAK,WAAW,WAAW,wBAAwB,CAAA;AAAA;AAAA,YAEvD,CAAA;AAAA;AAAA,UAKD;AAAA;AAAA,UAED,CAAA;AAAA;AAAA;AAAA,EAGR;AACF;AAnGG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,MAAA;AAGzB,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;AAGzB,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;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAA,EAAM,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,MAAA;AAGjE,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,MAAA;AA/B1C,IAAA,EAAA,CAAA,EAAc,kBAAkB,CAAA,GAAA,CAAA"}