@daikin-oss/design-system-web-components 2.0.0 → 2.1.0-next.2

package/dist/es/components/carousel/daikin-carousel.js

@@ -1,171 +1,369 @@
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements, state } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { oneOf, property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
-import tailwindStyles from "../../tailwind.css.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
 import "../icon-button/daikin-icon-button.js";
-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;
-};
-const DEFAULT_TRANSITION_DURATION = "600ms";
-const cvaButton = cva(
-  [
-    "flex",
-    "justify-center",
-    "items-center",
-    "flex-none",
-    "size-6",
-    "text-current"
-  ],
-  {
-    variants: {
-      intent: {
-        previous: ["icon-[daikin--chevron-left]"],
-        next: ["icon-[daikin--chevron-right]"]
-      }
-    }
-  }
-);
-const INDICATOR_CLASS_NAME = cva([
-  "flex",
-  "justify-center",
-  "items-center",
-  "size-3",
-  "m-0.5",
-  "rounded-full",
-  "transition",
-  "bg-ddt-color-common-neutral-default",
-  "relative",
-  "hover:bg-ddt-color-common-neutral-hover",
-  "active:bg-ddt-color-common-neutral-press",
-  "aria-selected:after:block",
-  "aria-selected:after:size-4",
-  "aria-selected:after:bg-ddt-color-common-brand-default",
-  "aria-selected:after:absolute",
-  "aria-selected:after:rounded-full",
-  "aria-selected:focus-visible:after:outline-solid",
-  "aria-selected:focus-visible:after:outline-1",
-  "aria-selected:focus-visible:after:outline-offset-1",
-  "aria-selected:focus-visible:after:outline-ddt-color-common-border-focus"
+import { css, html, unsafeCSS } from "lit";
+import { queryAssignedElements, state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { createRef, ref } from "lit/directives/ref.js";
+import { repeat } from "lit/directives/repeat.js";
+import EmblaCarousel from "embla-carousel";
+//#region src/components/carousel/daikin-carousel.ts
+var cvaButton = cva([
+	"flex",
+	"justify-center",
+	"items-center",
+	"flex-none",
+	"text-current"
+], { variants: {
+	intent: {
+		previous: ["icon-[daikin--chevron-left]"],
+		next: ["icon-[daikin--chevron-right]"]
+	},
+	arrows: {
+		outside: ["size-6"],
+		inside: ["size-8"]
+	}
+} });
+var outsideButtonWrapper = cva([
+	"hidden",
+	"flex-none",
+	"relative",
+	"w-6"
+], { variants: { arrows: {
+	outside: ["md:block"],
+	inside: ["md:hidden"]
+} } });
+var insideButtonWrapper = cva([
+	"absolute",
+	"top-(--ddc-arrow-y,50%)",
+	"-translate-y-1/2",
+	"z-10",
+	"flex"
+], { variants: {
+	arrows: {
+		outside: ["md:hidden"],
+		inside: ["md:flex"]
+	},
+	intent: {
+		previous: ["left-4"],
+		next: ["right-4"]
+	}
+} });
+var INJECTION_CLASS_INSIDE_BUTTON = cva([
+	"[--ddc-color-common-surface-neutral-default:var(--dds-color-common-surface-overlay-default)]",
+	"[--ddc-color-common-surface-neutral-hover:var(--dds-color-common-surface-overlay-hover)]",
+	"[--ddc-color-common-surface-neutral-press:var(--dds-color-common-surface-overlay-press)]",
+	"[--ddc-color-common-disabled:var(--dds-color-common-surface-overlay-disabled)]",
+	"[--ddc-color-common-surface-disabled:var(--dds-color-common-surface-disabled-overlay)]"
 ])();
-let DaikinCarousel = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.currentIndex = 0;
-    this._itemCount = 0;
-    this._prevButton = createRef();
-    this._nextButton = createRef();
-    this._indicatorButtonsContainer = createRef();
-  }
-  _emitSelect(operation, beforeCurrentIndex) {
-    this.dispatchEvent(
-      new CustomEvent("select", {
-        detail: { operation, beforeCurrentIndex }
-      })
-    );
-  }
-  _handleClickIndicator(index) {
-    const beforeCurrentIndex = this.currentIndex;
-    this.currentIndex = index;
-    this._emitSelect("indicator", beforeCurrentIndex);
-  }
-  _handleKeydownIndicator(event) {
-    var _a;
-    const moveOffset = {
-      ArrowRight: 1,
-      ArrowLeft: -1
-    }[event.key];
-    if (!moveOffset) {
-      return;
-    }
-    const buttons = [
-      ...((_a = this._indicatorButtonsContainer.value) == null ? void 0 : _a.querySelectorAll("button")) ?? []
-    ];
-    this._moveBy(moveOffset);
-    buttons[this.currentIndex].focus();
-  }
-  _handleSlotchange() {
-    const items = this._items;
-    this._itemCount = items.length;
-    for (const [index, item] of items.entries()) {
-      item.label = `${index + 1} of ${this._itemCount}`;
-    }
-    this._updateItemActive();
-  }
-  _moveBy(moveOffset) {
-    const newIndex = this.currentIndex + moveOffset;
-    if (newIndex < 0 || newIndex >= this._itemCount) {
-      return;
-    }
-    const oldIndex = this.currentIndex;
-    this.currentIndex = newIndex;
-    this._emitSelect(moveOffset === 1 ? "next" : "prev", oldIndex);
-  }
-  _updateItemActive() {
-    const items = this._items;
-    if (items.length - 1 < this.currentIndex) {
-      return;
+var INDICATOR_CLASS_NAME = cva([
+	"flex",
+	"justify-center",
+	"items-center",
+	"size-3",
+	"m-0.5",
+	"rounded-full",
+	"transition",
+	"bg-ddt-color-common-neutral-default",
+	"relative",
+	"hover:bg-ddt-color-common-neutral-hover",
+	"active:bg-ddt-color-common-neutral-press",
+	"aria-selected:after:block",
+	"aria-selected:after:size-4",
+	"aria-selected:after:bg-ddt-color-common-brand-default",
+	"aria-selected:after:absolute",
+	"aria-selected:after:rounded-full",
+	"aria-selected:focus-visible:after:outline-solid",
+	"aria-selected:focus-visible:after:outline-1",
+	"aria-selected:focus-visible:after:outline-offset-1",
+	"aria-selected:focus-visible:after:outline-ddt-color-common-border-focus"
+])();
+var DEFAULT_EMBLA_DURATION = 25;
+var LEGACY_CSS_DURATION_MS = 600;
+var parseDurationMs = (value) => {
+	const matched = value.trim().match(/^(\d+(?:\.\d+)?)(ms|s)$/);
+	if (!matched) return void 0;
+	const duration = Number(matched[1]);
+	return matched[2] === "s" ? duration * 1e3 : duration;
+};
+var DaikinCarousel = class DaikinCarousel extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.currentIndex = 0;
+		this.loop = false;
+		this._itemCount = 0;
+		this._indicatorButtonsContainer = createRef();
+		this._viewport = createRef();
+		this._track = createRef();
+		this._isDragging = false;
+		this._onEmblaPointerDown = () => {
+			this._isDragging = true;
+		};
+		this._onEmblaSettle = () => {
+			this._isDragging = false;
+		};
+		this._onEmblaSelect = () => {
+			if (!this._emblaApi) return;
+			const previousIndex = this.currentIndex;
+			const newIndex = this._emblaApi.selectedScrollSnap();
+			if (previousIndex !== newIndex) {
+				this.currentIndex = newIndex;
+				this._emitSelect(this._isDragging ? "swipe" : this._pendingOperation ?? "indicator", previousIndex);
+				this._updateItemActive();
+			}
+			this._pendingOperation = void 0;
+		};
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: block;
+      width: 100%;
+      position: relative;
+      /* Defaults to vertical center and is later overridden by ResizeObserver. */
+      --ddc-arrow-y: 50%;
+      /* Defaults aspect ratio for carousel items */
+      --ddc-item-aspect-ratio: 16 / 9;
+      --ddc-item-object-fit: contain;
+      /* Defaults background color for the carousel */
+      --ddc-item-background-color: var(--dds-color-common-surface-secondary);
+      /* Defaults gap between carousel items */
+      --ddc-item-gap: var(--dds-space-100);
     }
-    if (this.currentIndex < 0) {
-      return;
+
+    slot {
+      display: contents;
     }
-    for (const [index, item] of this._items.entries()) {
-      item.active = index === this.currentIndex;
+
+    /* Ensure slides take up exactly 100% of the viewport container without subpixel overflow */
+    ::slotted(daikin-carousel-item) {
+      flex: 0 0 100% !important;
+      min-width: 0 !important;
+      max-width: 100% !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      box-sizing: border-box !important;
     }
-  }
-  render() {
-    return html`<div
-      class="flex justify-center items-center flex-col gap-8"
-      style=${`--total:${this._itemCount};--current:${this.currentIndex};`}
-    >
-      <div class="flex justify-center items-center w-full gap-4">
-        <daikin-icon-button
-          ${ref(this._prevButton)}
-          variant="ghost"
-          color="neutral"
-          button-aria-label="Previous"
-          ?disabled=${this.currentIndex <= 0}
-          @click=${() => this._moveBy(-1)}
+  `;
+	}
+	_getEmblaDuration() {
+		const cssDurationMs = parseDurationMs(getComputedStyle(this).getPropertyValue("--ddc-transition-duration"));
+		if (cssDurationMs == null) return this.duration;
+		return cssDurationMs / LEGACY_CSS_DURATION_MS * DEFAULT_EMBLA_DURATION;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._mediaResizeObserver = new ResizeObserver((entries) => {
+			if (entries.length > 0) {
+				const height = entries[0].contentRect.height;
+				if (height > 0) this.style.setProperty("--ddc-arrow-y", `${height / 2}px`);
+			}
+		});
+		this.updateComplete.then(() => {
+			if (this.isConnected) this._handleSlotchange();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._mediaResizeObserver?.disconnect();
+		if (this._emblaApi) {
+			this._emblaApi.destroy();
+			this._emblaApi = void 0;
+		}
+	}
+	_emitSelect(operation, beforeCurrentIndex) {
+		this.dispatchEvent(new CustomEvent("select", { detail: {
+			operation,
+			beforeCurrentIndex
+		} }));
+	}
+	/**
+	* Initializes or re-initializes the Embla instance when properties or slots change.
+	*/
+	_initEmbla() {
+		if (!this._viewport.value || !this._track.value) return;
+		const options = {
+			loop: this.loop,
+			align: "start",
+			containScroll: "trimSnaps",
+			slides: this._items,
+			container: this._track.value,
+			duration: this._getEmblaDuration(),
+			startIndex: this.currentIndex
+		};
+		if (this._emblaApi) this._emblaApi.reInit(options);
+		else {
+			this._emblaApi = EmblaCarousel(this._viewport.value, options);
+			this._emblaApi.on("select", this._onEmblaSelect);
+			this._emblaApi.on("pointerDown", this._onEmblaPointerDown);
+			this._emblaApi.on("settle", this._onEmblaSettle);
+		}
+	}
+	_handleClickIndicator(index) {
+		if (!this._emblaApi) return;
+		this._pendingOperation = "indicator";
+		this._emblaApi.scrollTo(index);
+	}
+	_handleKeydownIndicator(event) {
+		const moveOffset = {
+			ArrowRight: 1,
+			ArrowLeft: -1
+		}[event.key];
+		if (!moveOffset) return;
+		event.preventDefault();
+		const buttons = [...this._indicatorButtonsContainer.value?.querySelectorAll("button") ?? []];
+		const focusedIndex = buttons.indexOf(event.target);
+		if (focusedIndex < 0) return;
+		this._moveBy(moveOffset);
+		let targetIndex = focusedIndex + moveOffset;
+		if (this.loop) targetIndex = (targetIndex + this._itemCount) % this._itemCount;
+		else targetIndex = Math.max(0, Math.min(targetIndex, this._itemCount - 1));
+		buttons[targetIndex]?.focus();
+	}
+	_moveBy(offset) {
+		if (!this._emblaApi) return;
+		this._pendingOperation = offset === 1 ? "next" : "prev";
+		if (offset === 1) this._emblaApi.scrollNext();
+		else this._emblaApi.scrollPrev();
+	}
+	async _handleSlotchange() {
+		await this.updateComplete;
+		this._itemCount = this._items.length;
+		for (const [index, item] of this._items.entries()) item.label = `${index + 1} of ${this._itemCount}`;
+		this._updateItemActive();
+		if (this._items.length > 0 && this._mediaResizeObserver) {
+			this._mediaResizeObserver.disconnect();
+			const mediaContainer = this._items[this.currentIndex].shadowRoot?.querySelector(".media-container");
+			if (mediaContainer) this._mediaResizeObserver.observe(mediaContainer);
+		}
+		requestAnimationFrame(() => {
+			if (this.isConnected) this._initEmbla();
+		});
+	}
+	_updateItemActive() {
+		if (this._items.length - 1 < this.currentIndex) this.currentIndex = Math.max(0, this._itemCount - 1);
+		if (this.currentIndex < 0) this.currentIndex = 0;
+		for (const [index, item] of this._items.entries()) item.active = index === this.currentIndex;
+	}
+	render() {
+		return html`<div class="flex justify-center items-center flex-col gap-8">
+      <!-- items-center is intentionally removed so the outside arrow wrappers can stretch to the full height. -->
+      <div class="flex w-full gap-4 relative">
+        <!-- Outside Prev Arrow -->
+        <div class=${outsideButtonWrapper({ arrows: this.arrows })}>
+          <!-- Absolutely center the arrow based on the computed media height. -->
+          <div
+            class="absolute w-full top-(--ddc-arrow-y,50%) -translate-y-1/2 flex justify-center"
+          >
+            <daikin-icon-button
+              variant="ghost"
+              color="neutral"
+              button-aria-label="Previous"
+              ?disabled=${this._itemCount <= 1 || !this.loop && this.currentIndex <= 0}
+              @click=${() => this._moveBy(-1)}
+            >
+              <span
+                class=${cvaButton({
+			intent: "previous",
+			arrows: "outside"
+		})}
+              ></span>
+            </daikin-icon-button>
+          </div>
+        </div>
+
+        <!-- Inside Prev Arrow -->
+        <div
+          class=${insideButtonWrapper({
+			arrows: this.arrows,
+			intent: "previous"
+		})}
         >
-          <span class=${cvaButton({ intent: "previous" })}></span>
-        </daikin-icon-button>
+          <daikin-icon-button
+            class=${INJECTION_CLASS_INSIDE_BUTTON}
+            variant="ghost"
+            color="neutral"
+            size="m"
+            button-aria-label="Previous"
+            ?disabled=${this._itemCount <= 1 || !this.loop && this.currentIndex <= 0}
+            @click=${() => this._moveBy(-1)}
+          >
+            <span
+              class=${cvaButton({
+			intent: "previous",
+			arrows: "inside"
+		})}
+            ></span>
+          </daikin-icon-button>
+        </div>
+
+        <!-- Viewport -->
         <div
-          class="w-full overflow-clip relative focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus @container"
+          ${ref(this._viewport)}
+          data-carousel-viewport
+          class="flex-1 min-w-0 overflow-hidden focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus"
           aria-live="polite"
         >
+          <div ${ref(this._track)} class="flex touch-pan-y">
+            <slot @slotchange=${this._handleSlotchange}></slot>
+          </div>
+        </div>
+
+        <!-- Inside Next Arrow -->
+        <div
+          class=${insideButtonWrapper({
+			arrows: this.arrows,
+			intent: "next"
+		})}
+        >
+          <daikin-icon-button
+            class=${INJECTION_CLASS_INSIDE_BUTTON}
+            variant="ghost"
+            color="neutral"
+            size="m"
+            button-aria-label="Next"
+            ?disabled=${this._itemCount <= 1 || !this.loop && this.currentIndex >= this._itemCount - 1}
+            @click=${() => this._moveBy(1)}
+          >
+            <span
+              class=${cvaButton({
+			intent: "next",
+			arrows: "inside"
+		})}
+            ></span>
+          </daikin-icon-button>
+        </div>
+
+        <!-- Outside Next Arrow -->
+        <div class=${outsideButtonWrapper({ arrows: this.arrows })}>
           <div
-            class="flex w-[calc(100cqw*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-(--ddc-transition-duration)"
+            class="absolute w-full top-(--ddc-arrow-y,50%) -translate-y-1/2 flex justify-center"
           >
-            <slot
-              class="slotted:w-[calc(100%/var(--total))]"
-              @slotchange=${this._handleSlotchange}
-            ></slot>
+            <daikin-icon-button
+              variant="ghost"
+              color="neutral"
+              button-aria-label="Next"
+              ?disabled=${this._itemCount <= 1 || !this.loop && this.currentIndex >= this._itemCount - 1}
+              @click=${() => this._moveBy(1)}
+            >
+              <span
+                class=${cvaButton({
+			intent: "next",
+			arrows: "outside"
+		})}
+              ></span>
+            </daikin-icon-button>
           </div>
         </div>
-        <daikin-icon-button
-          ${ref(this._nextButton)}
-          variant="ghost"
-          color="neutral"
-          button-aria-label="Next"
-          ?disabled=${this.currentIndex >= this._itemCount - 1}
-          @click=${() => this._moveBy(1)}
-        >
-          <span class=${cvaButton({ intent: "next" })}></span>
-        </daikin-icon-button>
       </div>
+
+      <!-- Indicators remain unchanged. -->
       <div class="flex gap-3">
         <div
           ${ref(this._indicatorButtonsContainer)}
@@ -173,10 +371,7 @@ let DaikinCarousel = class extends DDSElement {
           role="tablist"
           @keydown=${this._handleKeydownIndicator}
         >
-          ${repeat(
-      this._items,
-      (_, index) => index,
-      (_, index) => html`<button
+          ${repeat([...Array(this._itemCount).keys()], (index) => index, (index) => html`<button
                 type="button"
                 class=${INDICATOR_CLASS_NAME}
                 aria-label="Slide ${index + 1}"
@@ -184,41 +379,43 @@ let DaikinCarousel = class extends DDSElement {
                 role="tab"
                 tabindex=${this.currentIndex === index ? 0 : -1}
                 @click=${() => this._handleClickIndicator(index)}
-              ></button>`
-    )}
+              ></button>`)}
         </div>
       </div>
     </div>`;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("currentIndex")) {
-      this._updateItemActive();
-    }
-  }
-};
-DaikinCarousel.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: block;
-      width: 100%;
-      position: relative;
-
-      --ddc-transition-duration: ${unsafeCSS(DEFAULT_TRANSITION_DURATION)};
-    }
-  `;
-__decorateClass([
-  property({ type: Number, reflect: true, attribute: "current-index" })
-], DaikinCarousel.prototype, "currentIndex", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "daikin-carousel-item" })
-], DaikinCarousel.prototype, "_items", 2);
-__decorateClass([
-  state()
-], DaikinCarousel.prototype, "_itemCount", 2);
-DaikinCarousel = __decorateClass([
-  ddsElement("daikin-carousel")
-], DaikinCarousel);
-export {
-  DaikinCarousel
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("currentIndex")) {
+			if (this._emblaApi && this._emblaApi.selectedScrollSnap() !== this.currentIndex) this._emblaApi.scrollTo(this.currentIndex);
+			this._updateItemActive();
+		}
+		if (changedProperties.has("loop") || changedProperties.has("duration")) this._initEmbla();
+	}
 };
+__decorate([property$1({
+	type: Number,
+	reflect: true,
+	attribute: "current-index"
+})], DaikinCarousel.prototype, "currentIndex", void 0);
+__decorate([property$1({
+	type: Boolean,
+	attribute: "loop"
+})], DaikinCarousel.prototype, "loop", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "outside",
+	isAllowedValue: oneOf(["outside", "inside"])
+})], DaikinCarousel.prototype, "arrows", void 0);
+__decorate([property$1({
+	type: Number,
+	reflect: true,
+	attribute: "duration",
+	fallbackValue: DEFAULT_EMBLA_DURATION,
+	isAllowedValue: (value) => typeof value === "number" && Number.isFinite(value) && value >= 0
+})], DaikinCarousel.prototype, "duration", void 0);
+__decorate([queryAssignedElements({ selector: "daikin-carousel-item" })], DaikinCarousel.prototype, "_items", void 0);
+__decorate([state()], DaikinCarousel.prototype, "_itemCount", void 0);
+DaikinCarousel = __decorate([ddsElement("daikin-carousel")], DaikinCarousel);
+//#endregion
+export { DaikinCarousel };

package/dist/es/components/carousel/index.js

@@ -1,4 +1,2 @@
 import { DaikinCarousel } from "./daikin-carousel.js";
-export {
-  DaikinCarousel
-};
+export { DaikinCarousel };

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

@@ -22,11 +22,7 @@ import { DDSElement } from "../../base/index.js";
 export declare class DaikinCarouselItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * _Internal use._
-     * Item's aria label.
-     * Controlled by `daikin-carousel`.
-     *
-     * @private
+     * The Aria label for the carousel item.
      */
     label: string;
     /**