@daikin-oss/design-system-web-components 0.7.0 → 1.1.0

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

@@ -1,6 +1,9 @@
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import "../link/daikin-link.js";
 var __defProp = Object.defineProperty;
@@ -13,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinBreadcrumbItem = class extends LitElement {
+let DaikinBreadcrumbItem = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -62,7 +65,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "append-divider" })
 ], DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 DaikinBreadcrumbItem = __decorateClass([
-  customElement("daikin-breadcrumb-item")
+  ddsElement("daikin-breadcrumb-item")
 ], DaikinBreadcrumbItem);
 export {
   DaikinBreadcrumbItem

package/dist/es-dev/components/button/daikin-button.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaButton: (props?: ({
@@ -6,7 +6,10 @@ declare const cvaButton: (props?: ({
     variant?: "fill" | "outline" | "ghost" | null | undefined;
     size?: "small" | "medium" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
+declare const cvaIcon: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
 /**
  * The button component is a versatile UI element that triggers actions or submits forms when clicked.
  * It functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.
@@ -29,7 +32,7 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
  * </daikin-button>
  * ```
  */
-export declare class DaikinButton extends LitElement {
+export declare class DaikinButton extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.

package/dist/es-dev/components/button/daikin-button.js

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -68,7 +71,15 @@ const cvaButton = cva(
     }
   }
 );
-let DaikinButton = class extends LitElement {
+const cvaIcon = cva([], {
+  variants: {
+    size: {
+      small: ["icon-size-4"],
+      medium: ["icon-size-6"]
+    }
+  }
+});
+let DaikinButton = class extends DDSElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -79,7 +90,7 @@ let DaikinButton = class extends LitElement {
     this.type = "button";
     this.buttonRole = null;
     this.addEventListener("click", (event) => {
-      if (this.disabled) {
+      if (this.disabled || this.type === "link" && this.href == null) {
         event.stopImmediatePropagation();
       }
     });
@@ -116,11 +127,11 @@ let DaikinButton = class extends LitElement {
         type=${this.type}
         role=${ifDefined(this.buttonRole ?? void 0)}
       >
-        <slot name="left-icon" class="icon-size-6">
+        <slot name="left-icon" class=${cvaIcon({ size: this.size })}>
           <span class="block -ml-1"></span>
         </slot>
         <span class="px-2"><slot></slot></span>
-        <slot name="right-icon" class="icon-size-6">
+        <slot name="right-icon" class=${cvaIcon({ size: this.size })}>
           <span class="block -mr-1"></span>
         </slot>
       </button>
@@ -140,6 +151,7 @@ DaikinButton.styles = css`
 
     :host {
       display: inline-flex;
+      max-width: 100%;
     }
 
     :host([size="small"]) {
@@ -177,7 +189,7 @@ __decorateClass([
   query("a,button")
 ], DaikinButton.prototype, "_focusableElement", 2);
 DaikinButton = __decorateClass([
-  customElement("daikin-button")
+  ddsElement("daikin-button")
 ], DaikinButton);
 export {
   DaikinButton

package/dist/es-dev/components/card/daikin-card.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * `daikin-card` is a component for display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
  *
@@ -10,6 +10,12 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card/index.js";
+ * import "@daikin-oss/design-system-web-components/components/card-footer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/card-header/index.js";
+ * ```
+ *
  * ```html
  * <daikin-card outline>
  *   <daikin-card-header>
@@ -27,7 +33,7 @@ import { LitElement } from 'lit';
  * </daikin-card>
  * ```
  */
-export declare class DaikinCard extends LitElement {
+export declare class DaikinCard extends DDSElement {
     static styles: import('lit').CSSResult;
     /**
      * Specify whether the card border to be visible or not.

package/dist/es-dev/components/card/daikin-card.js

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,6 +20,7 @@ const cvaContainer = cva(
     "flex",
     "flex-col",
     "gap-4",
+    "size-full",
     "p-4",
     "rounded-lg",
     "bg-ddt-color-common-background-default"
@@ -30,7 +34,7 @@ const cvaContainer = cva(
     }
   }
 );
-let DaikinCard = class extends LitElement {
+let DaikinCard = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.outline = false;
@@ -49,15 +53,15 @@ DaikinCard.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: flex;
-      width: fit-content;
+      display: block;
+      width: 100%;
     }
   `;
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCard.prototype, "outline", 2);
 DaikinCard = __decorateClass([
-  customElement("daikin-card")
+  ddsElement("daikin-card")
 ], DaikinCard);
 export {
   DaikinCard

package/dist/es-dev/components/card-footer/daikin-card-footer.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * `daikin-card-footer` is used to represent footer of the card component, and is used as a child element of the `daikin-card` component.
  *
@@ -9,6 +9,10 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card-footer/index.js";
+ * ```
+ *
  * ```html
  * <!-- See `daikin-card` component for complete example. -->
  * <daikin-card-footer>
@@ -18,7 +22,7 @@ import { LitElement } from 'lit';
  * </daikin-card-footer>
  * ```
  */
-export declare class DaikinCardFooter extends LitElement {
+export declare class DaikinCardFooter extends DDSElement {
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/es-dev/components/card-footer/daikin-card-footer.js

@@ -1,17 +1,17 @@
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.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);
+      result = decorator(result) || result;
   return result;
 };
-let DaikinCardFooter = class extends LitElement {
+let DaikinCardFooter = class extends DDSElement {
   render() {
     return html`<slot></slot>`;
   }
@@ -27,7 +27,7 @@ DaikinCardFooter.styles = css`
     }
   `;
 DaikinCardFooter = __decorateClass([
-  customElement("daikin-card-footer")
+  ddsElement("daikin-card-footer")
 ], DaikinCardFooter);
 export {
   DaikinCardFooter

package/dist/es-dev/components/card-header/daikin-card-header.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * `daikin-card-header` is used to represent header of the card component, and is used as a child element of the `daikin-card` component.
  *
@@ -11,6 +11,10 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card-header/index.js";
+ * ```
+ *
  * ```html
  * <!-- See `daikin-card` component for complete example. -->
  * <daikin-card-header>
@@ -20,7 +24,7 @@ import { LitElement } from 'lit';
  * </daikin-card-header>
  * ```
  */
-export declare class DaikinCardHeader extends LitElement {
+export declare class DaikinCardHeader extends DDSElement {
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/es-dev/components/card-header/daikin-card-header.js

@@ -1,15 +1,15 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.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);
+      result = decorator(result) || result;
   return result;
 };
 const cvaTitle = cva([
@@ -30,14 +30,14 @@ const cvaDescription = cva([
   "not-italic",
   "font-normal"
 ])();
-let DaikinCardHeader = class extends LitElement {
+let DaikinCardHeader = class extends DDSElement {
   render() {
     return html`<div class="flex w-full gap-1">
       <slot
         name="left-icon"
         class="flex-none icon-size-6 text-ddt-color-common-text-primary"
       ></slot>
-      <div class="flex-1 flex flex-col pt-0.5 gap-[1px]">
+      <div class="flex-1 flex flex-col pt-0.5 gap-1">
         <slot class=${cvaTitle}></slot>
         <slot name="description" class=${cvaDescription}></slot>
       </div>
@@ -53,7 +53,7 @@ DaikinCardHeader.styles = css`
     }
   `;
 DaikinCardHeader = __decorateClass([
-  customElement("daikin-card-header")
+  ddsElement("daikin-card-header")
 ], DaikinCardHeader);
 export {
   DaikinCardHeader

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

@@ -0,0 +1,56 @@
+import { PropertyValues } from 'lit';
+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.
+ *
+ * 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.
+ *
+ * @slot - A slot for carousel items. Place `daikin-carousel-item` elements here.
+ *
+ * @cssprop [--ddc-transition-duration=600ms] - Specify the interval for the slide animation.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/carousel/index.js";
+ * import "@daikin-oss/design-system-web-components/components/carousel-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-carousel>
+ *   <daikin-carousel-item>Carousel item 1</daikin-carousel-item>
+ *   <daikin-carousel-item>Carousel item 2</daikin-carousel-item>
+ *   <daikin-carousel-item>Carousel item 3</daikin-carousel-item>
+ * </daikin-carousel>
+ * ```
+ */
+export declare class DaikinCarousel extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The index number of the content currently being displayed.
+     */
+    currentIndex: number;
+    private readonly _items;
+    private _itemCount;
+    private _prevButton;
+    private _nextButton;
+    private _indicatorButtonsContainer;
+    private _emitSelect;
+    private _handleClickIndicator;
+    private _handleKeydownIndicator;
+    private _handleSlotchange;
+    private _moveBy;
+    private _updateItemActive;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-carousel": DaikinCarousel;
+    }
+}

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

@@ -0,0 +1,228 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, html } from "lit";
+import { property, 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 { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles 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: ["i-daikin-chevron-left"],
+        next: ["i-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",
+  "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"
+])();
+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) {
+      {
+        console.warn(
+          `Invalid 'current-index' property: ${this.currentIndex}. The number of actual 'daikin-carousel-item's exceeds the number of items.`
+        );
+      }
+      return;
+    }
+    if (this.currentIndex < 0) {
+      {
+        console.warn(
+          `Invalid 'current-item' property: ${this.currentIndex}. Negative values cannot be set.`
+        );
+      }
+      return;
+    }
+    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)}
+        >
+          <span class=${cvaButton({ intent: "previous" })}></span>
+        </daikin-icon-button>
+        <div
+          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus"
+          aria-live="polite"
+        >
+          <div
+            class="flex w-[calc(100%*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
+          >
+            <slot @slotchange=${this._handleSlotchange}></slot>
+          </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>
+      <div class="flex gap-3">
+        <div
+          ${ref(this._indicatorButtonsContainer)}
+          class="flex items-center gap-4"
+          role="tablist"
+          @keydown=${this._handleKeydownIndicator}
+        >
+          ${repeat(
+      this._items,
+      (_, index) => index,
+      (_, index) => html`<button
+                class=${INDICATOR_CLASS_NAME}
+                aria-label="Slide ${index + 1}"
+                aria-selected=${this.currentIndex === index}
+                role="tab"
+                tabindex=${this.currentIndex === index ? 0 : -1}
+                @click=${() => this._handleClickIndicator(index)}
+              ></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
+};

package/dist/es-dev/components/carousel/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-carousel.js";

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

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

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

@@ -0,0 +1,50 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * The carousel item component is a child element within the `daikin-carousel` component.
+ *
+ * Hierarchy:
+ * - `daikin-carousel` > `daikin-carousel-item`
+ *
+ * @slot - A slot for an image or slide.
+ * @slot title - A slot for title text.
+ * @slot description - A slot for description text.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/carousel-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-carousel-item>Carousel item</daikin-carousel-item>
+ * ```
+ */
+export declare class DaikinCarouselItem extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * _Internal use._
+     * Item's aria label.
+     * Controlled by `daikin-carousel`.
+     *
+     * @private
+     */
+    label: string;
+    /**
+     * _Internal use._
+     * Whether this item is displayed in the carousel or not.
+     * Controlled by `daikin-carousel`.
+     *
+     * @private
+     */
+    active: boolean;
+    private readonly _titleElements;
+    private readonly _descriptionElements;
+    private _hasTextContents;
+    private _handleFooterSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-carousel-item": DaikinCarouselItem;
+    }
+}