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

package/dist/es-dev/base/dds-element.js

@@ -42,7 +42,7 @@ function ensureGlobalKeyIndex(name) {
 */
 var DDSElement = class extends 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/es-dev/components/carousel/daikin-carousel.d.ts

@@ -3,16 +3,20 @@ import { DDSElement } from "../../base/index.js";
 /**
  * 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/es-dev/components/carousel/daikin-carousel.js

@@ -1,5 +1,5 @@
 import { DDSElement } from "../../base/dds-element.js";
-import { property as property$1 } 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/index.js";
@@ -10,19 +10,56 @@ 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 DEFAULT_TRANSITION_DURATION = "600ms";
 var 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]"]
+], { 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)]"
+])();
 var INDICATOR_CLASS_NAME = cva([
 	"flex",
 	"justify-center",
@@ -45,14 +82,41 @@ var INDICATOR_CLASS_NAME = 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 DDSElement {
 	constructor(..._args) {
 		super(..._args);
 		this.currentIndex = 0;
+		this.loop = false;
 		this._itemCount = 0;
-		this._prevButton = createRef();
-		this._nextButton = createRef();
 		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`
@@ -62,21 +126,89 @@ var DaikinCarousel = class DaikinCarousel extends 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: ${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 = 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) {
-		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 +216,160 @@ var DaikinCarousel = class DaikinCarousel extends 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 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)}
+		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)}
@@ -159,7 +377,7 @@ var DaikinCarousel = class DaikinCarousel 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}"
@@ -173,7 +391,11 @@ var DaikinCarousel = class DaikinCarousel extends 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();
 	}
 };
 __decorate([property$1({
@@ -181,6 +403,23 @@ __decorate([property$1({
 	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);

package/dist/es-dev/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;
     /**

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

@@ -22,6 +22,17 @@ var DaikinCarouselItem = class DaikinCarouselItem extends DDSElement {
       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 DDSElement {
 	}
 	render() {
 		return 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/es-dev/components/chip/daikin-chip.d.ts

@@ -71,6 +71,8 @@ export declare class DaikinChip extends DDSElement {
      */
     chipAriaLabel: string | null;
     private _focusableElement;
+    private _hasLeftIcon;
+    private _handleLeftIconSlotChange;
     private _handleRemoveClick;
     /**
      * Emits `before-select` event if necessary and returns whether we should proceed.