@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/carousel/carousel.component.js

@@ -0,0 +1,204 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import componentStyles from "../../styles/component.styles.js";
+import styles from "./carousel.styles.js";
+class MzCarousel extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.loop = false;
+    this.autoplay = false;
+    this.autoplayInterval = 5e3;
+    this.navigation = true;
+    this.pagination = true;
+    this.slidesPerView = 1;
+    this.activeIndex = 0;
+    this.slideCount = 0;
+  }
+  /** Navigate to a specific slide by index. */
+  goTo(index) {
+    const slides = this.getSlides();
+    if (slides.length === 0) return;
+    if (this.loop) {
+      index = (index % slides.length + slides.length) % slides.length;
+    } else {
+      index = Math.max(0, Math.min(index, slides.length - this.slidesPerView));
+    }
+    const viewport = this.shadowRoot.querySelector(".carousel__viewport");
+    if (viewport) {
+      const slideWidth = viewport.clientWidth / this.slidesPerView;
+      viewport.scrollTo({
+        left: index * slideWidth,
+        behavior: "smooth"
+      });
+    }
+  }
+  /** Navigate to the next slide. */
+  next() {
+    this.goTo(this.activeIndex + 1);
+  }
+  /** Navigate to the previous slide. */
+  previous() {
+    this.goTo(this.activeIndex - 1);
+  }
+  getSlides() {
+    const slot = this.shadowRoot?.querySelector("slot:not([name])");
+    if (!slot) return [];
+    return slot.assignedElements({ flatten: true }).filter((el) => el.tagName.toLowerCase() === "mz-carousel-item");
+  }
+  handleSlotChange() {
+    this.slideCount = this.getSlides().length;
+  }
+  handleScroll() {
+    clearTimeout(this.scrollTimer);
+    this.scrollTimer = setTimeout(() => {
+      const viewport = this.shadowRoot.querySelector(".carousel__viewport");
+      if (!viewport) return;
+      const slides = this.getSlides();
+      if (slides.length === 0) return;
+      const scrollLeft = viewport.scrollLeft;
+      const slideWidth = viewport.clientWidth / this.slidesPerView;
+      const newIndex = Math.round(scrollLeft / slideWidth);
+      if (newIndex !== this.activeIndex && newIndex >= 0 && newIndex < slides.length) {
+        this.activeIndex = newIndex;
+        this.emit("mz-slide-change", { detail: { index: this.activeIndex } });
+      }
+    }, 50);
+  }
+  startAutoplay() {
+    this.stopAutoplay();
+    if (this.autoplay && this.slideCount > 1) {
+      this.autoplayTimer = setInterval(() => this.next(), this.autoplayInterval);
+    }
+  }
+  stopAutoplay() {
+    if (this.autoplayTimer != null) {
+      clearInterval(this.autoplayTimer);
+      this.autoplayTimer = void 0;
+    }
+  }
+  handleMouseEnter() {
+    if (this.autoplay) {
+      this.stopAutoplay();
+    }
+  }
+  handleMouseLeave() {
+    if (this.autoplay) {
+      this.startAutoplay();
+    }
+  }
+  updated(changed) {
+    if (changed.has("autoplay") || changed.has("autoplayInterval") || changed.has("slideCount")) {
+      if (this.autoplay) {
+        this.startAutoplay();
+      } else {
+        this.stopAutoplay();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopAutoplay();
+    clearTimeout(this.scrollTimer);
+  }
+  render() {
+    return html`
+      <style>::slotted(mz-carousel-item) { flex: 0 0 ${100 / this.slidesPerView}%; }</style>
+      <div
+        part="base"
+        class="carousel"
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <div
+          part="viewport"
+          class="carousel__viewport"
+          @scroll=${this.handleScroll}
+        >
+          <div class="carousel__track">
+            <slot @slotchange=${this.handleSlotChange}></slot>
+          </div>
+        </div>
+
+        ${this.navigation ? html`
+              <button
+                part="prev"
+                class="carousel__nav carousel__nav--prev"
+                aria-label="Previous slide"
+                ?disabled=${!this.loop && this.activeIndex === 0}
+                @click=${this.previous}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+              </button>
+              <button
+                part="next"
+                class="carousel__nav carousel__nav--next"
+                aria-label="Next slide"
+                ?disabled=${!this.loop && this.activeIndex >= this.slideCount - this.slidesPerView}
+                @click=${this.next}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+              </button>
+            ` : nothing}
+
+        ${this.pagination && this.slideCount > 1 ? html`
+              <div part="pagination" class="carousel__pagination" role="tablist" aria-label="Slides">
+                ${Array.from({ length: this.slideCount }, (_, i) => html`
+                  <button
+                    part="dot"
+                    class=${classMap({
+      "carousel__dot": true,
+      "carousel__dot--active": i === this.activeIndex
+    })}
+                    role="tab"
+                    aria-selected=${i === this.activeIndex}
+                    aria-label="Slide ${i + 1}"
+                    @click=${() => this.goTo(i)}
+                  ></button>
+                `)}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+}
+MzCarousel.styles = [componentStyles, styles];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCarousel.prototype, "loop", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCarousel.prototype, "autoplay", 2);
+__decorateClass([
+  property({ type: Number, attribute: "autoplay-interval" })
+], MzCarousel.prototype, "autoplayInterval", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCarousel.prototype, "navigation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCarousel.prototype, "pagination", 2);
+__decorateClass([
+  property({ type: Number, attribute: "slides-per-view" })
+], MzCarousel.prototype, "slidesPerView", 2);
+__decorateClass([
+  state()
+], MzCarousel.prototype, "activeIndex", 2);
+__decorateClass([
+  state()
+], MzCarousel.prototype, "slideCount", 2);
+export {
+  MzCarousel
+};
+//# sourceMappingURL=carousel.component.js.map

package/dist/components/carousel/carousel.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/carousel/carousel.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './carousel.styles.js';\n\n/**\n * @summary A slide carousel with navigation arrows, pagination dots, and optional autoplay.\n *\n * @tag mz-carousel\n *\n * @slot - The carousel slides. Should contain mz-carousel-item elements.\n *\n * @event mz-slide-change - Emitted when the active slide changes. Detail: { index: number }\n *\n * @csspart base - The carousel wrapper.\n * @csspart viewport - The scrollable viewport.\n * @csspart prev - The previous navigation button.\n * @csspart next - The next navigation button.\n * @csspart pagination - The pagination dot container.\n * @csspart dot - An individual pagination dot.\n */\nexport class MzCarousel extends ManzanoElement {\n  static styles = [componentStyles, styles];\n\n  /** Enable infinite loop navigation. */\n  @property({ type: Boolean, reflect: true }) loop = false;\n\n  /** Automatically advance slides. */\n  @property({ type: Boolean, reflect: true }) autoplay = false;\n\n  /** Autoplay interval in milliseconds. */\n  @property({ type: Number, attribute: 'autoplay-interval' }) autoplayInterval = 5000;\n\n  /** Show previous/next navigation arrows. */\n  @property({ type: Boolean, reflect: true }) navigation = true;\n\n  /** Show pagination dot indicators. */\n  @property({ type: Boolean, reflect: true }) pagination = true;\n\n  /** Number of slides visible at once. */\n  @property({ type: Number, attribute: 'slides-per-view' }) slidesPerView = 1;\n\n  @state() private activeIndex = 0;\n  @state() private slideCount = 0;\n\n  private autoplayTimer: ReturnType<typeof setInterval> | undefined;\n  private scrollTimer: ReturnType<typeof setTimeout> | undefined;\n\n  /** Navigate to a specific slide by index. */\n  goTo(index: number) {\n    const slides = this.getSlides();\n    if (slides.length === 0) return;\n\n    if (this.loop) {\n      index = ((index % slides.length) + slides.length) % slides.length;\n    } else {\n      index = Math.max(0, Math.min(index, slides.length - this.slidesPerView));\n    }\n\n    const viewport = this.shadowRoot!.querySelector('.carousel__viewport') as HTMLElement;\n    if (viewport) {\n      const slideWidth = viewport.clientWidth / this.slidesPerView;\n      viewport.scrollTo({\n        left: index * slideWidth,\n        behavior: 'smooth'\n      });\n    }\n  }\n\n  /** Navigate to the next slide. */\n  next() {\n    this.goTo(this.activeIndex + 1);\n  }\n\n  /** Navigate to the previous slide. */\n  previous() {\n    this.goTo(this.activeIndex - 1);\n  }\n\n  private getSlides(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n    if (!slot) return [];\n    return slot\n      .assignedElements({ flatten: true })\n      .filter((el): el is HTMLElement => el.tagName.toLowerCase() === 'mz-carousel-item') as HTMLElement[];\n  }\n\n  private handleSlotChange() {\n    this.slideCount = this.getSlides().length;\n  }\n\n  private handleScroll() {\n    clearTimeout(this.scrollTimer);\n    this.scrollTimer = setTimeout(() => {\n      const viewport = this.shadowRoot!.querySelector('.carousel__viewport') as HTMLElement;\n      if (!viewport) return;\n\n      const slides = this.getSlides();\n      if (slides.length === 0) return;\n\n      const scrollLeft = viewport.scrollLeft;\n      const slideWidth = viewport.clientWidth / this.slidesPerView;\n\n      const newIndex = Math.round(scrollLeft / slideWidth);\n      if (newIndex !== this.activeIndex && newIndex >= 0 && newIndex < slides.length) {\n        this.activeIndex = newIndex;\n        this.emit('mz-slide-change', { detail: { index: this.activeIndex } });\n      }\n    }, 50);\n  }\n\n  private startAutoplay() {\n    this.stopAutoplay();\n    if (this.autoplay && this.slideCount > 1) {\n      this.autoplayTimer = setInterval(() => this.next(), this.autoplayInterval);\n    }\n  }\n\n  private stopAutoplay() {\n    if (this.autoplayTimer != null) {\n      clearInterval(this.autoplayTimer);\n      this.autoplayTimer = undefined;\n    }\n  }\n\n  private handleMouseEnter() {\n    if (this.autoplay) {\n      this.stopAutoplay();\n    }\n  }\n\n  private handleMouseLeave() {\n    if (this.autoplay) {\n      this.startAutoplay();\n    }\n  }\n\n  override updated(changed: Map<PropertyKey, unknown>) {\n    if (changed.has('autoplay') || changed.has('autoplayInterval') || changed.has('slideCount')) {\n      if (this.autoplay) {\n        this.startAutoplay();\n      } else {\n        this.stopAutoplay();\n      }\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.stopAutoplay();\n    clearTimeout(this.scrollTimer);\n  }\n\n  render() {\n    return html`\n      <style>::slotted(mz-carousel-item) { flex: 0 0 ${100 / this.slidesPerView}%; }</style>\n      <div\n        part=\"base\"\n        class=\"carousel\"\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n      >\n        <div\n          part=\"viewport\"\n          class=\"carousel__viewport\"\n          @scroll=${this.handleScroll}\n        >\n          <div class=\"carousel__track\">\n            <slot @slotchange=${this.handleSlotChange}></slot>\n          </div>\n        </div>\n\n        ${this.navigation\n          ? html`\n              <button\n                part=\"prev\"\n                class=\"carousel__nav carousel__nav--prev\"\n                aria-label=\"Previous slide\"\n                ?disabled=${!this.loop && this.activeIndex === 0}\n                @click=${this.previous}\n              >\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"/></svg>\n              </button>\n              <button\n                part=\"next\"\n                class=\"carousel__nav carousel__nav--next\"\n                aria-label=\"Next slide\"\n                ?disabled=${!this.loop && this.activeIndex >= this.slideCount - this.slidesPerView}\n                @click=${this.next}\n              >\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"/></svg>\n              </button>\n            `\n          : nothing}\n\n        ${this.pagination && this.slideCount > 1\n          ? html`\n              <div part=\"pagination\" class=\"carousel__pagination\" role=\"tablist\" aria-label=\"Slides\">\n                ${Array.from({ length: this.slideCount }, (_, i) => html`\n                  <button\n                    part=\"dot\"\n                    class=${classMap({\n                      'carousel__dot': true,\n                      'carousel__dot--active': i === this.activeIndex\n                    })}\n                    role=\"tab\"\n                    aria-selected=${i === this.activeIndex}\n                    aria-label=\"Slide ${i + 1}\"\n                    @click=${() => this.goTo(i)}\n                  ></button>\n                `)}\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/carousel/carousel.d.ts

@@ -0,0 +1,8 @@
+import { MzCarousel } from './carousel.component.js';
+export { MzCarousel };
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-carousel': MzCarousel;
+    }
+}
+//# sourceMappingURL=carousel.d.ts.map

package/dist/components/carousel/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/carousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAIrD,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/carousel/carousel.js

@@ -0,0 +1,6 @@
+import { MzCarousel } from "./carousel.component.js";
+MzCarousel.define("mz-carousel");
+export {
+  MzCarousel
+};
+//# sourceMappingURL=carousel.js.map

package/dist/components/carousel/carousel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/carousel/carousel.ts"],
+  "sourcesContent": ["import { MzCarousel } from './carousel.component.js';\n\nMzCarousel.define('mz-carousel');\n\nexport { MzCarousel };\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-carousel': MzCarousel;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,WAAW,OAAO,aAAa;",
+  "names": []
+}

package/dist/components/carousel/carousel.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=carousel.styles.d.ts.map

package/dist/components/carousel/carousel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/carousel.styles.ts"],"names":[],"mappings":";AAEA,wBA+FE"}

package/dist/components/carousel/carousel.styles.js

@@ -0,0 +1,101 @@
+import { css } from "lit";
+var carousel_styles_default = css`
+  :host {
+    display: block;
+  }
+
+  .carousel {
+    position: relative;
+  }
+
+  .carousel__viewport {
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .carousel__viewport::-webkit-scrollbar {
+    display: none;
+  }
+
+  .carousel__track {
+    display: flex;
+  }
+
+  /* Navigation arrows */
+  .carousel__nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: 1px solid var(--mz-color-border);
+    border-radius: 50%;
+    background: var(--mz-color-surface, #fff);
+    color: var(--mz-color-text);
+    cursor: pointer;
+    box-shadow: var(--mz-shadow-sm, 0 1px 3px rgb(28 25 21 / 0.1));
+    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
+    z-index: 1;
+    padding: 0;
+  }
+
+  .carousel__nav:hover:not(:disabled) {
+    background: var(--mz-color-surface-raised);
+    border-color: var(--mz-color-text-disabled);
+  }
+
+  .carousel__nav:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .carousel__nav--prev {
+    left: var(--mz-space-sm, 0.75rem);
+  }
+
+  .carousel__nav--next {
+    right: var(--mz-space-sm, 0.75rem);
+  }
+
+  /* Pagination dots */
+  .carousel__pagination {
+    display: flex;
+    justify-content: center;
+    gap: var(--mz-space-xs, 0.375rem);
+    padding: var(--mz-space-sm, 0.75rem) 0;
+  }
+
+  .carousel__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border: none;
+    border-radius: 50%;
+    background: var(--mz-color-border);
+    cursor: pointer;
+    padding: 0;
+    transition: background 0.15s, transform 0.15s;
+  }
+
+  .carousel__dot:hover {
+    background: var(--mz-color-text-disabled);
+  }
+
+  .carousel__dot--active {
+    background: var(--mz-color-primary);
+    transform: scale(1.25);
+  }
+
+  /* Per-view sizing is set dynamically in render via inline <style> */
+  ::slotted(mz-carousel-item) {
+    scroll-snap-align: start;
+  }
+`;
+export {
+  carousel_styles_default as default
+};
+//# sourceMappingURL=carousel.styles.js.map

package/dist/components/carousel/carousel.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/carousel/carousel.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .carousel {\n    position: relative;\n  }\n\n  .carousel__viewport {\n    overflow-x: auto;\n    scroll-snap-type: x mandatory;\n    scrollbar-width: none;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .carousel__viewport::-webkit-scrollbar {\n    display: none;\n  }\n\n  .carousel__track {\n    display: flex;\n  }\n\n  /* Navigation arrows */\n  .carousel__nav {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2.25rem;\n    height: 2.25rem;\n    border: 1px solid var(--mz-color-border);\n    border-radius: 50%;\n    background: var(--mz-color-surface, #fff);\n    color: var(--mz-color-text);\n    cursor: pointer;\n    box-shadow: var(--mz-shadow-sm, 0 1px 3px rgb(28 25 21 / 0.1));\n    transition: background 0.15s, border-color 0.15s, opacity 0.15s;\n    z-index: 1;\n    padding: 0;\n  }\n\n  .carousel__nav:hover:not(:disabled) {\n    background: var(--mz-color-surface-raised);\n    border-color: var(--mz-color-text-disabled);\n  }\n\n  .carousel__nav:disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .carousel__nav--prev {\n    left: var(--mz-space-sm, 0.75rem);\n  }\n\n  .carousel__nav--next {\n    right: var(--mz-space-sm, 0.75rem);\n  }\n\n  /* Pagination dots */\n  .carousel__pagination {\n    display: flex;\n    justify-content: center;\n    gap: var(--mz-space-xs, 0.375rem);\n    padding: var(--mz-space-sm, 0.75rem) 0;\n  }\n\n  .carousel__dot {\n    width: 0.5rem;\n    height: 0.5rem;\n    border: none;\n    border-radius: 50%;\n    background: var(--mz-color-border);\n    cursor: pointer;\n    padding: 0;\n    transition: background 0.15s, transform 0.15s;\n  }\n\n  .carousel__dot:hover {\n    background: var(--mz-color-text-disabled);\n  }\n\n  .carousel__dot--active {\n    background: var(--mz-color-primary);\n    transform: scale(1.25);\n  }\n\n  /* Per-view sizing is set dynamically in render via inline <style> */\n  ::slotted(mz-carousel-item) {\n    scroll-snap-align: start;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/components/carousel-item/carousel-item.component.d.ts

@@ -0,0 +1,14 @@
+import { type TemplateResult } from 'lit';
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A single slide within an mz-carousel.
+ *
+ * @tag mz-carousel-item
+ *
+ * @slot - The slide content.
+ */
+export declare class MzCarouselItem extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}
+//# sourceMappingURL=carousel-item.component.d.ts.map

package/dist/components/carousel-item/carousel-item.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-item/carousel-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,cAAc;IAChD,MAAM,CAAC,MAAM,4BAA6B;IAE1C,MAAM,IAAI,cAAc;CAGzB"}

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

@@ -0,0 +1,14 @@
+import { html } from "lit";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import componentStyles from "../../styles/component.styles.js";
+import styles from "./carousel-item.styles.js";
+class MzCarouselItem extends ManzanoElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+MzCarouselItem.styles = [componentStyles, styles];
+export {
+  MzCarouselItem
+};
+//# sourceMappingURL=carousel-item.component.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/carousel-item/carousel-item.component.ts"],
+  "sourcesContent": ["import { html, type TemplateResult } from 'lit';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport styles from './carousel-item.styles.js';\n\n/**\n * @summary A single slide within an mz-carousel.\n *\n * @tag mz-carousel-item\n *\n * @slot - The slide content.\n */\nexport class MzCarouselItem extends ManzanoElement {\n  static styles = [componentStyles, styles];\n\n  render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAiC;AAC1C,SAAS,sBAAsB;AAC/B,OAAO,qBAAqB;AAC5B,OAAO,YAAY;AASZ,MAAM,uBAAuB,eAAe;AAAA,EAGjD,SAAyB;AACvB,WAAO;AAAA,EACT;AACF;AANa,eACJ,SAAS,CAAC,iBAAiB,MAAM;",
+  "names": []
+}

package/dist/components/carousel-item/carousel-item.d.ts

@@ -0,0 +1,8 @@
+import { MzCarouselItem } from './carousel-item.component.js';
+export { MzCarouselItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-carousel-item': MzCarouselItem;
+    }
+}
+//# sourceMappingURL=carousel-item.d.ts.map

package/dist/components/carousel-item/carousel-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-item.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-item/carousel-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAI9D,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,6 @@
+import { MzCarouselItem } from "./carousel-item.component.js";
+MzCarouselItem.define("mz-carousel-item");
+export {
+  MzCarouselItem
+};
+//# sourceMappingURL=carousel-item.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/carousel-item/carousel-item.ts"],
+  "sourcesContent": ["import { MzCarouselItem } from './carousel-item.component.js';\n\nMzCarouselItem.define('mz-carousel-item');\n\nexport { MzCarouselItem };\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-carousel-item': MzCarouselItem;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAE/B,eAAe,OAAO,kBAAkB;",
+  "names": []
+}

package/dist/components/carousel-item/carousel-item.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=carousel-item.styles.d.ts.map

package/dist/components/carousel-item/carousel-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-item/carousel-item.styles.ts"],"names":[],"mappings":";AAEA,wBAOE"}

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

@@ -0,0 +1,13 @@
+import { css } from "lit";
+var carousel_item_styles_default = css`
+  :host {
+    display: block;
+    flex: 0 0 100%;
+    scroll-snap-align: start;
+    min-width: 0;
+  }
+`;
+export {
+  carousel_item_styles_default as default
+};
+//# sourceMappingURL=carousel-item.styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/carousel-item/carousel-item.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n    flex: 0 0 100%;\n    scroll-snap-align: start;\n    min-width: 0;\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/components/collapsible/collapsible.component.d.ts

@@ -0,0 +1,34 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A standalone collapsible/expandable section. Like an enhanced `<details>` element.
+ *
+ * @tag mz-collapsible
+ *
+ * @slot - The collapsible content.
+ * @slot summary - Custom header content (overrides the `summary` property).
+ * @slot icon - Custom expand/collapse icon.
+ *
+ * @event mz-show - Emitted when the section starts opening. Cancelable.
+ * @event mz-hide - Emitted when the section starts closing. Cancelable.
+ * @event mz-after-show - Emitted after the open animation completes.
+ * @event mz-after-hide - Emitted after the close animation completes.
+ *
+ * @csspart header - The clickable header area.
+ * @csspart icon - The expand/collapse icon wrapper.
+ * @csspart content - The content area.
+ */
+export declare class MzCollapsible extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    private readonly componentId;
+    /** Whether the content is visible. */
+    open: boolean;
+    /** Whether toggling is disabled. */
+    disabled: boolean;
+    /** The header summary text. Use the `summary` slot for richer content. */
+    summary: string;
+    private handleToggle;
+    private handleKeyDown;
+    private handleTransitionEnd;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=collapsible.component.d.ts.map

package/dist/components/collapsible/collapsible.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.component.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/collapsible.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAKnE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,MAAM,CAAC,MAAM,4BAAU;IAEvB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6B;IAEzD,sCAAsC;IACM,IAAI,UAAS;IAEzD,oCAAoC;IACQ,QAAQ,UAAS;IAE7D,0EAA0E;IAC9D,OAAO,SAAM;IAEzB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAU3B,MAAM;CA2DP"}

package/dist/components/collapsible/collapsible.component.js

@@ -0,0 +1,123 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./collapsible.styles.js";
+let nextId = 0;
+class MzCollapsible extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.componentId = `collapsible-${++nextId}`;
+    this.open = false;
+    this.disabled = false;
+    this.summary = "";
+  }
+  handleToggle() {
+    if (this.disabled) return;
+    if (this.open) {
+      const allowed = this.emit("mz-hide", { cancelable: true });
+      if (!allowed) return;
+      this.open = false;
+    } else {
+      const allowed = this.emit("mz-show", { cancelable: true });
+      if (!allowed) return;
+      this.open = true;
+    }
+  }
+  handleKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.handleToggle();
+    }
+  }
+  handleTransitionEnd(e) {
+    if (e.propertyName !== "grid-template-rows") return;
+    if (this.open) {
+      this.emit("mz-after-show");
+    } else {
+      this.emit("mz-after-hide");
+    }
+  }
+  render() {
+    const headerId = `${this.componentId}-header`;
+    const contentId = `${this.componentId}-content`;
+    return html`
+      <div
+        class=${classMap({
+      "collapsible": true,
+      "collapsible--open": this.open,
+      "collapsible--disabled": this.disabled
+    })}
+      >
+        <div
+          class="collapsible__header"
+          id=${headerId}
+          role="button"
+          tabindex=${this.disabled ? -1 : 0}
+          aria-expanded=${this.open}
+          aria-controls=${contentId}
+          aria-disabled=${this.disabled}
+          @click=${this.handleToggle}
+          @keydown=${this.handleKeyDown}
+          part="header"
+        >
+          <slot name="summary">
+            <span class="collapsible__summary">${this.summary}</span>
+          </slot>
+          <span class="collapsible__icon" part="icon">
+            <slot name="icon">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            </slot>
+          </span>
+        </div>
+        <div
+          class="collapsible__body"
+          id=${contentId}
+          role="region"
+          aria-labelledby=${headerId}
+          @transitionend=${this.handleTransitionEnd}
+        >
+          <div class="collapsible__content" part="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+MzCollapsible.styles = styles;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCollapsible.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzCollapsible.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], MzCollapsible.prototype, "summary", 2);
+export {
+  MzCollapsible
+};
+//# sourceMappingURL=collapsible.component.js.map