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

package/dist/cjs-dev/base/dds-element.cjs

@@ -42,7 +42,7 @@ function ensureGlobalKeyIndex(name) {
 */
 var DDSElement = class extends lit.LitElement {
 	static {
-		this.version = "2.0.1-next.1";
+		this.version = "2.1.0-next.2";
 	}
 	/**
 	* Override of LitElement's getPropertyDescriptor to add support for fallback values

package/dist/cjs-dev/components/carousel/daikin-carousel.cjs

@@ -1,3 +1,4 @@
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
 const require_dds_element = require("../../base/dds-element.cjs");
 const require_dds_property = require("../../base/dds-property.cjs");
 const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
@@ -10,19 +11,57 @@ let lit_decorators_js = require("lit/decorators.js");
 let class_variance_authority = require("class-variance-authority");
 let lit_directives_ref_js = require("lit/directives/ref.js");
 let lit_directives_repeat_js = require("lit/directives/repeat.js");
+let embla_carousel = require("embla-carousel");
+embla_carousel = require_runtime.__toESM(embla_carousel, 1);
 //#region src/components/carousel/daikin-carousel.ts
-var DEFAULT_TRANSITION_DURATION = "600ms";
 var cvaButton = (0, class_variance_authority.cva)([
 	"flex",
 	"justify-center",
 	"items-center",
 	"flex-none",
-	"size-6",
 	"text-current"
-], { variants: { intent: {
-	previous: ["icon-[daikin--chevron-left]"],
-	next: ["icon-[daikin--chevron-right]"]
+], { variants: {
+	intent: {
+		previous: ["icon-[daikin--chevron-left]"],
+		next: ["icon-[daikin--chevron-right]"]
+	},
+	arrows: {
+		outside: ["size-6"],
+		inside: ["size-8"]
+	}
+} });
+var outsideButtonWrapper = (0, class_variance_authority.cva)([
+	"hidden",
+	"flex-none",
+	"relative",
+	"w-6"
+], { variants: { arrows: {
+	outside: ["md:block"],
+	inside: ["md:hidden"]
 } } });
+var insideButtonWrapper = (0, class_variance_authority.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 = (0, class_variance_authority.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)]"
+])();
 var INDICATOR_CLASS_NAME = (0, class_variance_authority.cva)([
 	"flex",
 	"justify-center",
@@ -45,14 +84,41 @@ var INDICATOR_CLASS_NAME = (0, class_variance_authority.cva)([
 	"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 require_dds_element.DDSElement {
 	constructor(..._args) {
 		super(..._args);
 		this.currentIndex = 0;
+		this.loop = false;
 		this._itemCount = 0;
-		this._prevButton = (0, lit_directives_ref_js.createRef)();
-		this._nextButton = (0, lit_directives_ref_js.createRef)();
 		this._indicatorButtonsContainer = (0, lit_directives_ref_js.createRef)();
+		this._viewport = (0, lit_directives_ref_js.createRef)();
+		this._track = (0, lit_directives_ref_js.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 = lit.css`
@@ -62,21 +128,89 @@ var DaikinCarousel = class DaikinCarousel extends require_dds_element.DDSElement
       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);
+    }
+
+    slot {
+      display: contents;
+    }
 
-      --ddc-transition-duration: ${(0, lit.unsafeCSS)(DEFAULT_TRANSITION_DURATION)};
+    /* 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;
     }
   `;
 	}
+	_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 = (0, embla_carousel.default)(this._viewport.value, options);
+			this._emblaApi.on("select", this._onEmblaSelect);
+			this._emblaApi.on("pointerDown", this._onEmblaPointerDown);
+			this._emblaApi.on("settle", this._onEmblaSettle);
+		}
+	}
 	_handleClickIndicator(index) {
-		const beforeCurrentIndex = this.currentIndex;
-		this.currentIndex = index;
-		this._emitSelect("indicator", beforeCurrentIndex);
+		if (!this._emblaApi) return;
+		this._pendingOperation = "indicator";
+		this._emblaApi.scrollTo(index);
 	}
 	_handleKeydownIndicator(event) {
 		const moveOffset = {
@@ -84,74 +218,160 @@ var DaikinCarousel = class DaikinCarousel extends require_dds_element.DDSElement
 			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);
-		buttons[this.currentIndex].focus();
+		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();
 	}
-	_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(offset) {
+		if (!this._emblaApi) return;
+		this._pendingOperation = offset === 1 ? "next" : "prev";
+		if (offset === 1) this._emblaApi.scrollNext();
+		else this._emblaApi.scrollPrev();
 	}
-	_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);
+	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) {
-			console.warn(`Invalid 'current-index' property: ${this.currentIndex}. The number of actual 'daikin-carousel-item's exceeds the number of items.`);
-			return;
+			console.warn(`Invalid 'current-index' property: ${this.currentIndex}. It exceeds the maximum item index. Correcting to ${Math.max(0, this._itemCount - 1)}.`);
+			this.currentIndex = Math.max(0, this._itemCount - 1);
 		}
 		if (this.currentIndex < 0) {
-			console.warn(`Invalid 'current-item' property: ${this.currentIndex}. Negative values cannot be set.`);
-			return;
+			console.warn(`Invalid 'current-index' property: ${this.currentIndex}. Negative values cannot be set. Correcting to 0.`);
+			this.currentIndex = 0;
 		}
 		for (const [index, item] of this._items.entries()) item.active = index === this.currentIndex;
 	}
 	render() {
-		return lit.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
-          ${(0, lit_directives_ref_js.ref)(this._prevButton)}
-          variant="ghost"
-          color="neutral"
-          button-aria-label="Previous"
-          ?disabled=${this.currentIndex <= 0}
-          @click=${() => this._moveBy(-1)}
+		return lit.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"
+          ${(0, lit_directives_ref_js.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 ${(0, lit_directives_ref_js.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
-          ${(0, lit_directives_ref_js.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
           ${(0, lit_directives_ref_js.ref)(this._indicatorButtonsContainer)}
@@ -159,7 +379,7 @@ var DaikinCarousel = class DaikinCarousel extends require_dds_element.DDSElement
           role="tablist"
           @keydown=${this._handleKeydownIndicator}
         >
-          ${(0, lit_directives_repeat_js.repeat)(this._items, (_, index) => index, (_, index) => lit.html`<button
+          ${(0, lit_directives_repeat_js.repeat)([...Array(this._itemCount).keys()], (index) => index, (index) => lit.html`<button
                 type="button"
                 class=${INDICATOR_CLASS_NAME}
                 aria-label="Slide ${index + 1}"
@@ -173,7 +393,11 @@ var DaikinCarousel = class DaikinCarousel extends require_dds_element.DDSElement
     </div>`;
 	}
 	updated(changedProperties) {
-		if (changedProperties.has("currentIndex")) this._updateItemActive();
+		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();
 	}
 };
 require_decorate.default([require_dds_property.property({
@@ -181,6 +405,23 @@ require_decorate.default([require_dds_property.property({
 	reflect: true,
 	attribute: "current-index"
 })], DaikinCarousel.prototype, "currentIndex", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	attribute: "loop"
+})], DaikinCarousel.prototype, "loop", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "outside",
+	isAllowedValue: require_dds_property.oneOf(["outside", "inside"])
+})], DaikinCarousel.prototype, "arrows", void 0);
+require_decorate.default([require_dds_property.property({
+	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);
 require_decorate.default([(0, lit_decorators_js.queryAssignedElements)({ selector: "daikin-carousel-item" })], DaikinCarousel.prototype, "_items", void 0);
 require_decorate.default([(0, lit_decorators_js.state)()], DaikinCarousel.prototype, "_itemCount", void 0);
 DaikinCarousel = require_decorate.default([require_decorators.ddsElement("daikin-carousel")], DaikinCarousel);

package/dist/cjs-dev/components/carousel/daikin-carousel.d.cts

@@ -3,16 +3,20 @@ import { DDSElement } from "../../base/index.cjs";
 /**
  * A carousel is a component that displays multiple pieces of information by sliding left and right within a fixed height area.
  *
- * The carousel component can be operated in several ways (Control, Indicator, and Swipe), but it is not possible to hide all of these, as this would prevent the user from being able to operate the carousel component.
+ * Powered by embla-carousel for smooth, native-feeling interactions and infinite loops.
  *
  * Hierarchy:
  * - `daikin-carousel` > `daikin-carousel-item`
  *
- * @fires select - If an item in the carousel is selected in some way, the method used to select it, the index number of the item displayed before it, and the index number of the item currently displayed are passed.
+ * @fires select - Fired when the carousel index changes. `event.detail` contains the triggering `operation` (`"prev"`, `"next"`, `"indicator"`, or `"swipe"`) and `beforeCurrentIndex`; read `currentIndex` for the selected index.
  *
  * @slot - A slot for carousel items. Place `daikin-carousel-item` elements here.
  *
- * @cssprop [--ddc-transition-duration=600ms] - Specify the interval for the slide animation.
+ * @cssprop [--ddc-transition-duration=600ms] - Legacy transition duration in milliseconds. **Warning:** Mapped to Embla's duration option using 600ms = 25. This property may be removed in a future release; gradually migrate to the `duration` property instead.
+ * @cssprop [--ddc-item-aspect-ratio=16/9] - The aspect ratio of every carousel item's media container.
+ * @cssprop [--ddc-item-object-fit=contain] - How image/video content fits inside every carousel item's media container.
+ * @cssprop [--ddc-item-background-color=var(--dds-color-common-surface-secondary)] - The default background color for the carousel items.
+ * @cssprop [--ddc-item-gap=var(--dds-space-100)] - The gap between carousel items.
  *
  * @example
  *
@@ -33,19 +37,58 @@ export declare class DaikinCarousel extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The index number of the content currently being displayed.
-     * When controlling this property externally, listen to the `select` event and read the updated `currentIndex` from the component to keep your state in sync.
      */
     currentIndex: number;
+    /**
+     * Whether the carousel should loop back to the first item when the last item is reached.
+     */
+    loop: boolean;
+    /**
+     * The position of the navigation arrows. Can be either "outside" or "inside".
+     * - "outside": Arrows are placed outside the carousel viewport.
+     * - "inside": Arrows are placed inside the carousel viewport.
+     * The inside option is useful for carousels with a smaller width, where the arrows can be placed over the content without taking up additional space.
+     * When the width of viewport is smaller than mobile breakpoint (768px), the arrows will always be placed inside regardless of this property.
+     *
+     * @default "outside"
+     */
+    arrows: "outside" | "inside";
+    /**
+     * The higher this value, the slower the image scrolling animation. However, this value does not affect the sliding speed when the user is dragging the image, as that depends on the user's dragging speed.
+     *
+     * @default 25
+     */
+    duration: number;
     private readonly _items;
+    /**
+     * Keeps track of the total number of slotted carousel items.
+     */
     private _itemCount;
-    private _prevButton;
-    private _nextButton;
+    private _emblaApi?;
+    private _mediaResizeObserver?;
     private _indicatorButtonsContainer;
+    private _viewport;
+    private _track;
+    private _pendingOperation;
+    private _isDragging;
+    private _getEmblaDuration;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private _emitSelect;
+    /**
+     * Initializes or re-initializes the Embla instance when properties or slots change.
+     */
+    private _initEmbla;
+    private _onEmblaPointerDown;
+    private _onEmblaSettle;
+    /**
+     * Embla event listener that synchronizes internal state when the user swipes or slides.
+     */
+    private _onEmblaSelect;
     private _handleClickIndicator;
     private _handleKeydownIndicator;
-    private _handleSlotchange;
     private _moveBy;
+    private _handleSlotchange;
     private _updateItemActive;
     render(): import('lit-html').TemplateResult<1>;
     protected updated(changedProperties: PropertyValues): void;

package/dist/cjs-dev/components/carousel-item/daikin-carousel-item.cjs

@@ -22,6 +22,17 @@ var DaikinCarouselItem = class DaikinCarouselItem extends require_dds_element.DD
       display: block;
       width: 100%;
     }
+
+    .media-container {
+      aspect-ratio: var(--ddc-item-aspect-ratio);
+    }
+
+    ::slotted(img),
+    ::slotted(video) {
+      width: 100% !important;
+      height: 100% !important;
+      object-fit: var(--ddc-item-object-fit);
+    }
   `;
 	}
 	_handleFooterSlotChange() {
@@ -29,12 +40,17 @@ var DaikinCarouselItem = class DaikinCarouselItem extends require_dds_element.DD
 	}
 	render() {
 		return lit.html`<div
-      class="flex flex-col flex-none gap-3 text-ddt-color-common-text-primary overflow-hidden"
+      class="flex flex-col flex-none gap-3 text-ddt-color-common-text-primary overflow-hidden px-[calc(var(--ddc-item-gap)/2)]"
       role="tabpanel"
       aria-label=${this.label}
       aria-hidden=${!this.active}
     >
-      <slot></slot>
+      <div
+        class="media-container flex w-full flex-none items-center justify-center overflow-hidden bg-(--ddc-item-background-color)"
+      >
+        <slot></slot>
+      </div>
+
       <div
         class="visible:flex flex-col gap-2"
         ?hidden=${!this._hasTextContents}

package/dist/cjs-dev/components/carousel-item/daikin-carousel-item.d.cts

@@ -22,11 +22,7 @@ import { DDSElement } from "../../base/index.cjs";
 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;
     /**