@daikin-oss/design-system-web-components 0.6.0 → 1.0.0

package/dist/cjs/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;
@@ -27,7 +30,7 @@ const cvaSummary = classVarianceAuthority.cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-system-state-focus",
+    "focus-visible:outline-ddt-color-common-border-focus",
     "after:size-6",
     "after:transition-all",
     "after:i-daikin-chevron-down"
@@ -41,62 +44,40 @@ const cvaSummary = classVarianceAuthority.cva(
       disabled: {
         false: [
           "cursor-pointer",
-          "hover:bg-system-background-surface-hover",
-          "active:bg-system-background-surface-press"
+          "hover:bg-ddt-color-common-surface-hover",
+          "active:bg-ddt-color-common-surface-press"
         ],
         true: [
-          "text-system-state-disabled",
-          "after:text-system-state-disabled"
+          "text-ddt-color-common-disabled",
+          "after:text-ddt-color-common-disabled"
         ]
       }
     }
   }
 );
-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
-      class="w-full text-system-element-text-primary font-daikinSerif overflow-clip"
-      ?open=${detailsOpen}
-      ?data-open=${open}
-      aria-disabled=${this.disabled}
-      @toggle=${this._handleToggle}
+    return lit.html`<div
+      class="w-full text-ddt-color-common-text-primary font-daikinSerif overflow-clip"
     >
-      <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`
@@ -192,9 +159,7 @@ exports.DaikinAccordionItem.styles = lit.css`
       display: var(--divider-top-display, none);
       width: 100%;
       height: 1px;
-      background: #828282; /* system-element-divider-primary */
-      position: absolute;
-      top: 0;
+      background: var(--dds-color-divider);
     }
 
     :host::after {
@@ -202,23 +167,18 @@ exports.DaikinAccordionItem.styles = lit.css`
       display: var(--divider-bottom-display, none);
       width: 100%;
       height: 1px;
-      background: #828282; /* system-element-divider-primary */
-      position: absolute;
-      bottom: 0;
+      background: var(--dds-color-divider);
     }
   `;
+__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/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/components/breadcrumb/daikin-breadcrumb.cjs

@@ -2,120 +2,62 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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;
 };
-exports.DaikinBreadcrumb = class DaikinBreadcrumb extends lit.LitElement {
+exports.DaikinBreadcrumb = class DaikinBreadcrumb extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.resizeObserver = new ResizeObserver(() => {
-      this._omit();
-    });
-    this._divWrapRef = ref_js.createRef();
-    this.trailingSlash = false;
-    this.overflow = "visible";
-    this._expandedContentWidth = 0;
-    this.omitted = false;
-  }
-  get _isEllipsis() {
-    return this.overflow === "ellipsis";
-  }
-  _omit() {
-    const shouldOmit = this._isEllipsis && this.offsetWidth < this._expandedContentWidth;
-    if (this.omitted === shouldOmit) {
-      return;
-    }
-    this.omitted = shouldOmit;
-    const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
-    for (const [index, item] of daikinBreadCrumbItems.entries()) {
-      let mode = "normal";
-      if (shouldOmit) {
-        if (index === 0 || index >= daikinBreadCrumbItems.length - 2) {
-          continue;
-        } else if (index === 1) {
-          mode = "ellipsis";
-        } else {
-          mode = "hidden";
-        }
-      }
-      item.hidden = mode === "hidden";
-      item.variant = mode === "ellipsis" ? "ellipsis" : "normal";
-    }
+    this.showVisited = false;
   }
   _updateBreadcrumbs() {
-    const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
-    for (const [index, item] of daikinBreadCrumbItems.entries()) {
-      const isLast = index === daikinBreadCrumbItems.length - 1;
-      item.trailingSlash = !isLast || this.trailingSlash;
-      item.last = isLast;
-    }
+    const items = this._items;
+    items.forEach((item, index) => {
+      const isLast = index === items.length - 1;
+      item.variant = isLast ? "current" : "normal";
+      item.showVisited = this.showVisited;
+      item.appendDivider = !isLast;
+    });
   }
-  _handleChange() {
+  _handleSlotChange() {
     this._updateBreadcrumbs();
   }
-  _handleResizeObserver() {
-    if (this._isEllipsis) {
-      this.resizeObserver.observe(this);
-    } else {
-      this.resizeObserver.disconnect();
-    }
-  }
   render() {
-    return lit.html`
-      <div class="flex gap-2" ${ref_js.ref(this._divWrapRef)}>
-        <slot @slotchange=${this._handleChange}></slot>
+    return lit.html`<nav class="inline-block" aria-label="Breadcrumbs">
+      <div class="inline-block" role="list">
+        <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
-    `;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("trailingSlash")) {
-      this._updateBreadcrumbs();
-    }
-    if (changedProperties.has("overflow")) {
-      this._omit();
-      this._handleResizeObserver();
-    }
+    </nav>`;
   }
   firstUpdated() {
     this._updateBreadcrumbs();
-    this._omit();
-    this._handleResizeObserver();
-    this.updateComplete.then(() => {
-      const divElement = this._divWrapRef.value;
-      if (!divElement) {
-        return;
-      }
-      this._expandedContentWidth = divElement.offsetWidth;
-    }).catch(() => {
-    });
   }
 };
 exports.DaikinBreadcrumb.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      display: flex;
-      align-items: center;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
     }
   `;
 __decorateClass([
-  decorators_js.queryAssignedElements()
-], exports.DaikinBreadcrumb.prototype, "_slottedDaikinBreadCrumbItems", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
-], exports.DaikinBreadcrumb.prototype, "trailingSlash", 2);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], exports.DaikinBreadcrumb.prototype, "showVisited", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinBreadcrumb.prototype, "overflow", 2);
+  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/components/breadcrumb/daikin-breadcrumb.d.cts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } 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.
  *
@@ -11,43 +11,31 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/breadcrumb/index.js";
+ * import "@daikin-oss/design-system-web-components/components/breadcrumb-item/index.js";
  * ```
  *
  * ```html
  * <daikin-breadcrumb>
- *  <daikin-breadcrumb-item href="#">
- *   Breadcrumb Item 1
+ *  <daikin-breadcrumb-item href="https://www.example.com/1">
+ *   Breadcrumb item 1
  *  </daikin-breadcrumb-item>
- *  <daikin-breadcrumb-item href="#">
- *   Breadcrumb Item 2
+ *  <daikin-breadcrumb-item href="https://www.example.com/2">
+ *   Breadcrumb item 2
  *  </daikin-breadcrumb-item>
  * </daikin-breadcrumb>
  * ```
  */
-export declare class DaikinBreadcrumb extends LitElement {
+export declare class DaikinBreadcrumb extends DDSElement {
     static readonly styles: import('lit').CSSResult;
-    private resizeObserver;
-    private _slottedDaikinBreadCrumbItems;
-    private _divWrapRef;
     /**
-     * Whether the last breadcrumb item should have trailing slash.
+     * Whether or not to change the color of visited links.
      */
-    trailingSlash: boolean;
-    /**
-     * Specifies overflow.
-     * If `ellipsis`, some breadcrumb items will be omitted when the total width exceeds the container width.
-     */
-    overflow: "visible" | "ellipsis";
-    private _expandedContentWidth;
-    private omitted;
-    get _isEllipsis(): boolean;
-    private _omit;
+    showVisited: boolean;
+    private readonly _items;
     private _updateBreadcrumbs;
-    private _handleChange;
-    private _handleResizeObserver;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
-    updated(changedProperties: PropertyValues<this>): void;
-    firstUpdated(): void;
+    protected firstUpdated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,101 +1,55 @@
 "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 ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+require("../link/daikin-link.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;
 };
-const cvaLink = classVarianceAuthority.cva(
-  [
-    "h-8",
-    "font-normal",
-    "not-italic",
-    "leading-8",
-    "text-sm",
-    "text-daikinBlue-500",
-    "outline-none",
-    "font-daikinSerif"
-  ],
-  {
-    variants: {
-      variant: {
-        normal: [
-          "hover:text-daikinBlue-300",
-          "active:text-daikinNeutral-800",
-          "focus-visible:text-daikinBlue-700"
-        ],
-        ellipsis: ["hover:text-daikinBlue-300"]
-      },
-      disabled: {
-        true: [
-          "!text-daikinNeutral-800",
-          "pointer-events-none",
-          "cursor-default",
-          "focus-visible:!text-daikinNeutral-800"
-        ],
-        false: []
-      }
-    }
-  }
-);
-exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends lit.LitElement {
+exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.href = "";
+    this.href = null;
     this.variant = "normal";
-    this.disabled = false;
     this.target = null;
-    this.trailingSlash = false;
-    this.last = false;
+    this.showVisited = false;
+    this.appendDivider = false;
   }
   render() {
-    const slash = this.trailingSlash ? lit.html`<span
-          class="text-daikinNeutral-800 font-daikinSerif"
+    const link = this.variant === "normal" ? lit.html`<daikin-link
+            class="text-sm"
+            href=${ifDefined_js.ifDefined(this.href ?? void 0)}
+            ?show-visited=${this.showVisited}
+            ><slot></slot
+          ></daikin-link>` : lit.html`<a
+            class="text-sm font-daikinSerif text-ddt-color-common-text-primary"
+            aria-disabled="true"
+            aria-current="true"
+            role="link"
+            ><slot></slot
+          ></a>`;
+    const divider = this.appendDivider ? lit.html`<span
+          class="text-ddt-color-common-text-primary mx-2 text-sm"
           aria-hidden="true"
-        >
-          /
-        </span>` : null;
-    const isDisabled = this.last || this.disabled;
-    return lit.html`
-      ${this.variant === "normal" ? lit.html`<a
-            class=${cvaLink({ variant: this.variant, disabled: isDisabled })}
-            href=${ifDefined_js.ifDefined(!isDisabled && this.href || void 0)}
-            target=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
-    ifDefined_js.ifDefined(this.target)}
-            aria-disabled=${ifDefined_js.ifDefined(isDisabled || void 0)}
-            aria-current=${ifDefined_js.ifDefined(this.last || void 0)}
-          >
-            <slot></slot>
-          </a>` : lit.html`<span class=${cvaLink(this)} aria-label="…">
-            <span>. . .</span>
-          </span> `}
-      ${slash}
-    `;
+          >/</span
+        >` : lit.nothing;
+    return lit.html`<div class="inline" role="listitem">${link}${divider}</div>`;
   }
 };
 exports.DaikinBreadcrumbItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      flex-shrink: 0;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
@@ -103,18 +57,15 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinBreadcrumbItem.prototype, "variant", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinBreadcrumbItem.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinBreadcrumbItem.prototype, "target", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
-], exports.DaikinBreadcrumbItem.prototype, "trailingSlash", 2);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], exports.DaikinBreadcrumbItem.prototype, "showVisited", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinBreadcrumbItem.prototype, "last", 2);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "append-divider" })
+], exports.DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 exports.DaikinBreadcrumbItem = __decorateClass([
-  decorators_js.customElement("daikin-breadcrumb-item")
+  decorators.ddsElement("daikin-breadcrumb-item")
 ], exports.DaikinBreadcrumbItem);