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

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

@@ -2,18 +2,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, 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])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.DaikinAccordion = class DaikinAccordion extends lit.LitElement {
+exports.DaikinAccordion = class DaikinAccordion extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.openItems = [];
+    this.exclusive = false;
+  }
   _handleMoveFocus(event) {
     const moveOffset = event.detail.direction === "up" ? -1 : 1;
     const items = this._items.filter(({ disabled }) => !disabled);
@@ -25,9 +33,35 @@ exports.DaikinAccordion = class DaikinAccordion extends lit.LitElement {
     const nextItem = items[(focusedItemIndex + moveOffset + items.length) % items.length];
     nextItem.focus();
   }
+  _handleToggle(event) {
+    const targetValue = event.target.name;
+    const opened = !event.target.open;
+    if (this.exclusive) {
+      this.openItems = opened ? [targetValue] : [];
+    } else {
+      this.openItems = opened ? [...this.openItems, targetValue] : this.openItems.filter((item) => item != targetValue);
+    }
+    this._reflectItemOpen();
+  }
+  _reflectItemOpen() {
+    {
+      if (this.exclusive && this.openItems.length > 1) {
+        console.warn(
+          `Invalid 'openItems' property: ${JSON.stringify(this.openItems)}. Only one active can be specified when exclusive is set.`
+        );
+      }
+    }
+    for (const item of this._items) {
+      item.open = this.openItems.includes(item.name);
+    }
+  }
   render() {
     return lit.html`<div class="w-full">
-      <slot @accordion-move-focus=${this._handleMoveFocus}></slot>
+      <slot
+        @accordion-move-focus=${this._handleMoveFocus}
+        @toggle=${this._handleToggle}
+        @slotchange=${this._reflectItemOpen}
+      ></slot>
     </div>`;
   }
 };
@@ -47,9 +81,15 @@ exports.DaikinAccordion.styles = lit.css`
       --divider-bottom-display: block;
     }
   `;
+__decorateClass([
+  decorators_js.property({ type: Array, attribute: false })
+], exports.DaikinAccordion.prototype, "openItems", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAccordion.prototype, "exclusive", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-accordion-item" })
 ], exports.DaikinAccordion.prototype, "_items", 2);
 exports.DaikinAccordion = __decorateClass([
-  decorators_js.customElement("daikin-accordion")
+  decorators.ddsElement("daikin-accordion")
 ], exports.DaikinAccordion);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The accordion component serves as the parent element that organizes and manages the overall structure of the accordion.
  * Currently it only provides appropriate styles for individual accordion items.
@@ -12,6 +12,7 @@ import { LitElement } from 'lit';
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/accordion/index.js";
+ * import "@daikin-oss/design-system-web-components/components/accordion-item/index.js";
  * ```
  *
  * ```html
@@ -31,10 +32,22 @@ import { LitElement } from 'lit';
  * </daikin-accordion>
  * ```
  */
-export declare class DaikinAccordion extends LitElement {
+export declare class DaikinAccordion extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    /**
+     * A list of the names of the open items.
+     * If `exclusive` is true, the number of elements is 0 or 1.
+     */
+    openItems: string[];
+    /**
+     * Whether or not to make the accordion exclusive.
+     * If true, the number of items that can be open at once is limited to one.
+     */
+    exclusive: boolean;
     private readonly _items;
     private _handleMoveFocus;
+    private _handleToggle;
+    private _reflectItemOpen;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -4,13 +4,16 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ref_js = require("lit/directives/ref.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, 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])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -52,51 +55,29 @@ const cvaSummary = classVarianceAuthority.cva(
     }
   }
 );
-const animationOption = {
-  duration: 250,
-  easing: "ease-in-out"
-};
-const contentCloseKeyframe = {
-  height: 0
-};
-const getContentOpenKeyframe = (content) => ({
-  height: `${content.offsetHeight}px`
+const cvaContent = classVarianceAuthority.cva(["grid", "duration-[250ms]", "ease-in-out"], {
+  variants: {
+    open: {
+      false: ["grid-rows-[0fr]"],
+      true: ["grid-rows-[1fr]"]
+    }
+  }
 });
-exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
+exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
+    this._summaryRef = ref_js.createRef();
     this._contentRef = ref_js.createRef();
+    this.name = "";
     this.open = false;
     this.disabled = false;
-    this._detailsOpen = false;
-  }
-  _contentAnimate() {
-    const content = this._contentRef.value;
-    if (!content || this.open === this._detailsOpen) {
-      return;
-    }
-    if (this.open) {
-      this._detailsOpen = this.open;
-      content.animate(
-        [contentCloseKeyframe, getContentOpenKeyframe(content)],
-        animationOption
-      );
-    } else {
-      const animation = content.animate(
-        [getContentOpenKeyframe(content), contentCloseKeyframe],
-        animationOption
-      );
-      animation.onfinish = () => {
-        this._detailsOpen = this.open;
-      };
-    }
   }
   _handleSummaryClick(event) {
     event.preventDefault();
     if (this.disabled) {
       return;
     }
-    this.open = !this.open;
+    this.dispatchEvent(new Event("toggle", event));
   }
   _handleKeyDown(event) {
     const direction = {
@@ -116,56 +97,42 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
       })
     );
   }
-  // When using the in-page search, the `<details>` element may open without clicking on the `<summary>`.
-  // In order to handle such cases, it is necessary to respond to the "toggle" event.
-  _handleToggle(event) {
-    event.preventDefault();
-    if (this.disabled) {
-      return;
-    }
-    this.open = event.newState === "open";
-  }
   render() {
-    const detailsOpen = !this.disabled && this._detailsOpen;
     const open = !this.disabled && this.open;
-    return lit.html`<details
+    return lit.html`<div
       class="w-full text-ddt-color-common-text-primary font-daikinSerif overflow-clip"
-      ?open=${detailsOpen}
-      ?data-open=${open}
-      aria-disabled=${this.disabled}
-      @toggle=${this._handleToggle}
     >
-      <summary
+      <button
         id="summary"
+        ${ref_js.ref(this._summaryRef)}
         class=${cvaSummary({
       open,
       disabled: this.disabled
     })}
+        ?disabled=${this.disabled}
+        aria-expanded=${open}
+        aria-controls="content"
         tabindex=${this.disabled ? -1 : 0}
         @click=${this._handleSummaryClick}
         @keydown=${this._handleKeyDown}
       >
         <slot name="summary"></slot>
-      </summary>
+      </button>
       <div
         ${ref_js.ref(this._contentRef)}
+        id="content"
         role="region"
+        class=${cvaContent({ open })}
         aria-labelledby="summary"
-        ?hidden=${this.disabled}
+        ?hidden=${!open}
       >
-        <div class="pt-2 px-3 pb-3">
-          <slot></slot>
+        <div class="overflow-hidden">
+          <div class="pt-2 px-3 pb-3">
+            <slot></slot>
+          </div>
         </div>
       </div>
-    </details>`;
-  }
-  firstUpdated() {
-    this._detailsOpen = this.open;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("open")) {
-      this._contentAnimate();
-    }
+    </div>`;
   }
   /**
    * Focuses on the inner summary.
@@ -173,7 +140,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
    */
   focus(options) {
     var _a;
-    (_a = this._summary) == null ? void 0 : _a.focus(options);
+    (_a = this._summaryRef.value) == null ? void 0 : _a.focus(options);
   }
 };
 exports.DaikinAccordionItem.styles = lit.css`
@@ -193,8 +160,6 @@ exports.DaikinAccordionItem.styles = lit.css`
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);
-      position: absolute;
-      top: 0;
     }
 
     :host::after {
@@ -203,22 +168,17 @@ exports.DaikinAccordionItem.styles = lit.css`
       width: 100%;
       height: 1px;
       background: var(--dds-color-divider);
-      position: absolute;
-      bottom: 0;
     }
   `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAccordionItem.prototype, "name", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "open", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "disabled", 2);
-__decorateClass([
-  decorators_js.query("summary")
-], exports.DaikinAccordionItem.prototype, "_summary", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinAccordionItem.prototype, "_detailsOpen", 2);
 exports.DaikinAccordionItem = __decorateClass([
-  decorators_js.customElement("daikin-accordion-item")
+  decorators.ddsElement("daikin-accordion-item")
 ], exports.DaikinAccordionItem);

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

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The accordion item component is a child element within the `daikin-accordion` component.
  * It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
@@ -7,6 +7,8 @@ import { LitElement, PropertyValues } from 'lit';
  * Hierarchy:
  * - `daikin-accordion` > `daikin-accordion-item`
  *
+ * @fires toggle - Fires when the summary is clicked. Used by `daikin-accordion`.
+ *
  * @slot - A slot for the accordion item content.
  * @slot summary - A slot for the accordion item summary content.
  *
@@ -26,12 +28,18 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-accordion-item>
  * ```
  */
-export declare class DaikinAccordionItem extends LitElement {
+export declare class DaikinAccordionItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
+    private _summaryRef;
     private _contentRef;
+    /**
+     * A unique name for the accordion item within the accordion.
+     */
+    name: string;
     /**
      * Whether the accordion item is open.
      * Ignored if `disabled` is `true`.
+     * Controlled by `daikin-accordion`.
      */
     open: boolean;
     /**
@@ -39,23 +47,9 @@ export declare class DaikinAccordionItem extends LitElement {
      * If this is set to `true`, the accordion item will always be closed.
      */
     disabled: boolean;
-    private _summary;
-    /**
-     * Actual presence of `open` attribute of the `<details>` element.
-     *
-     * The `<details>` element does not support animation on changing the `open` attribute.
-     * In other words, the content is hidden immediately when the `open` attribute is removed.
-     * To enable animation for an accordion, we need to run the animation while maintaining the `open` attribute, and then remove the `open` attribute at the end of the animation.
-     * Treated as `false` if `disabled` is `true`.
-     */
-    private _detailsOpen;
-    private _contentAnimate;
     private _handleSummaryClick;
     private _handleKeyDown;
-    private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;
-    protected firstUpdated(): void;
-    protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * Focuses on the inner summary.
      * @param options focus options

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

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 cvaWrapper = classVarianceAuthority.cva(
+  [
+    "inline-block",
+    "rounded-full",
+    "relative",
+    "overflow-hidden",
+    "box-border",
+    "size-full",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus"
+  ],
+  {
+    variants: {
+      type: {
+        button: [
+          "enabled:bg-ddt-color-common-neutral-default",
+          "enabled:text-ddt-color-common-surface-default",
+          "enabled:hover:bg-ddt-color-common-neutral-hover",
+          "enabled:hover:text-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-neutral-press",
+          "enabled:active:text-ddt-color-common-surface-press",
+          "disabled:bg-ddt-color-common-disabled",
+          "disabled:text-ddt-color-common-surface-default"
+        ],
+        icon: [
+          "bg-ddt-color-common-neutral-default",
+          "text-ddt-color-common-surface-default"
+        ],
+        link: [
+          "link-enabled:bg-ddt-color-common-neutral-default",
+          "link-enabled:text-ddt-color-common-surface-default",
+          "link-enabled:hover:bg-ddt-color-common-neutral-hover",
+          "link-enabled:hover:text-ddt-color-common-surface-hover",
+          "link-enabled:active:bg-ddt-color-common-neutral-press",
+          "link-enabled:active:text-ddt-color-common-surface-press",
+          "link-disabled:bg-ddt-color-common-disabled",
+          "link-disabled:text-ddt-color-common-surface-default"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinAvatar = class DaikinAvatar extends lit.LitElement {
+  constructor() {
+    super();
+    this.type = "icon";
+    this.href = null;
+    this.alt = null;
+    this.disabled = false;
+    this.avatarAriaHaspopup = null;
+    this.avatarAriaExpanded = null;
+    this.addEventListener("click", (event) => {
+      if (this.disabled || this.type === "link" && this.href == null) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  render() {
+    const icon = lit.html`
+      <span
+        class="i-daikin-profile"
+      >
+      </span>
+    </daikin-icon>`;
+    if (this.type === "icon") {
+      return lit.html`<span
+        class=${cvaWrapper({ type: "icon" })}
+        role="figure"
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+      >
+        ${icon}
+      </span>`;
+    } else if (this.type === "button") {
+      return lit.html`<button
+        class=${cvaWrapper({ type: "button" })}
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.avatarAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined_js.ifDefined(this.avatarAriaExpanded ?? void 0)}
+        ?disabled=${this.disabled}
+      >
+        ${icon}
+      </button>`;
+    } else {
+      const linkDisabled = this.disabled || this.href == null;
+      return lit.html`<a
+        class=${cvaWrapper({ type: "link" })}
+        role=${ifDefined_js.ifDefined(linkDisabled ? "link" : void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        aria-disabled=${ifDefined_js.ifDefined(linkDisabled ? "true" : void 0)}
+      >
+        ${icon}
+      </a>`;
+    }
+  }
+  /**
+   * Focuses on the inner button or link.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinAvatar.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+
+    :host {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "alt", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAvatar.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "avatar-aria-haspopup" })
+], exports.DaikinAvatar.prototype, "avatarAriaHaspopup", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "avatar-aria-expanded" })
+], exports.DaikinAvatar.prototype, "avatarAriaExpanded", 2);
+__decorateClass([
+  decorators_js.query("a,button")
+], exports.DaikinAvatar.prototype, "_focusableElement", 2);
+exports.DaikinAvatar = __decorateClass([
+  decorators_js.customElement("daikin-avatar")
+], exports.DaikinAvatar);

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

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaWrapper: (props?: ({
+    type?: "button" | "icon" | "link" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type AvatarVariantProps = MergeVariantProps<typeof cvaWrapper>;
+/**
+ * The avatar is a UI element that represent a user
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/avatar/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-avatar></daikin-avatar>
+ * ```
+ */
+export declare class DaikinAvatar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Replace the wrapping element.
+     */
+    type: AvatarVariantProps["type"];
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated type [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered type disabled state.
+     */
+    href: string | null;
+    /**
+     * Provides an accessible name of the avatar.
+     */
+    alt: string | null;
+    /**
+     * Specify the avatar disabled state.
+     */
+    disabled: boolean;
+    /**
+     * The aria-haspopup of the avatar when `type="button"`.
+     */
+    avatarAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of avatar when `type="button"`.
+     */
+    avatarAriaExpanded: boolean | null;
+    private _focusableElement;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button or link.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-avatar": DaikinAvatar;
+    }
+}
+export {};

package/dist/cjs-dev/components/avatar/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinAvatar = require("./daikin-avatar.cjs");
+Object.defineProperty(exports, "DaikinAvatar", {
+  enumerable: true,
+  get: () => daikinAvatar.DaikinAvatar
+});

package/dist/cjs-dev/components/avatar/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-avatar.cjs";

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

@@ -2,18 +2,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, 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])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.DaikinBreadcrumb = class DaikinBreadcrumb extends lit.LitElement {
+exports.DaikinBreadcrumb = class DaikinBreadcrumb extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.showVisited = false;
@@ -56,5 +59,5 @@ __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-breadcrumb-item" })
 ], exports.DaikinBreadcrumb.prototype, "_items", 2);
 exports.DaikinBreadcrumb = __decorateClass([
-  decorators_js.customElement("daikin-breadcrumb")
+  decorators.ddsElement("daikin-breadcrumb")
 ], exports.DaikinBreadcrumb);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * `daikin-breadcrumb` is a component for representing a breadcrumb list, and is used together with the `daikin-breadcrumb-item` component.
  *
@@ -25,7 +25,7 @@ import { LitElement } from 'lit';
  * </daikin-breadcrumb>
  * ```
  */
-export declare class DaikinBreadcrumb extends LitElement {
+export declare class DaikinBreadcrumb extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Whether or not to change the color of visited links.