@daikin-oss/design-system-web-components 1.4.0-next.0 → 1.4.0

package/dist/cjs/base/dds-property.d.cts

@@ -0,0 +1,92 @@
+import { PropertyDeclaration } from 'lit';
+/**
+ * Enhanced property declaration for DDS components that extends Lit's PropertyDeclaration
+ * with additional features for fallback values and property validation.
+ *
+ * The type ensures type safety with three possible configurations:
+ *
+ * 1. Standard property without fallback or validation
+ * 2. Reflected property with fallback value
+ * 3. Reflected property with both fallback value and validation function
+ *
+ * @template Type - The type of the property value
+ * @template TypeHint - Optional type hint for property conversion
+ *
+ * @example
+ * ```typescript
+ * // Property with fallback value
+ * @property({ reflect: true, fallbackValue: "default" })
+ * key!: string;
+ *
+ * // Property with validation
+ * @property({
+ *   reflect: true,
+ *   fallbackValue: 0,
+ *   isAllowedValue: (v) => v >= 0
+ * })
+ * count!: number;
+ * ```
+ */
+export type DDSPropertyDeclaration<Type = unknown, TypeHint = unknown> = PropertyDeclaration<Type, TypeHint> & ({
+    /** No fallback value specified */
+    fallbackValue?: undefined;
+    /** No validation function specified */
+    isAllowedValue?: undefined;
+} | {
+    /** Property reflects to attribute (required for fallback) */
+    reflect: true;
+    /** Default value to use when property is undefined */
+    fallbackValue: Type;
+    /** No validation function specified */
+    isAllowedValue?: undefined;
+} | {
+    /** Property reflects to attribute (required for fallback) */
+    reflect: true;
+    /** Default value to use when property is undefined */
+    fallbackValue: Type;
+    /** Function to validate if a value is allowed for this property */
+    isAllowedValue: (value: Type) => boolean;
+});
+/**
+ * Property decorator for DDS components that enhances Lit's `@property` decorator
+ * with additional features like fallback values and property validation.
+ *
+ * This decorator should be used instead of Lit's `@property` for DDS components
+ * that need enhanced property handling capabilities.
+ *
+ * @param options - DDS property declaration options
+ * @returns Property decorator function
+ *
+ * @example
+ * ```typescript
+ * class MyComponent extends DDSElement {
+ *   // Basic property
+ *   @property({ type: String })
+ *   label = "";
+ *
+ *   // Property with fallback value
+ *   @property({ reflect: true, fallbackValue: "default" })
+ *   value!: string;
+ *
+ *   // Property with validation
+ *   @property({
+ *     reflect: true,
+ *     fallbackValue: 0,
+ *     isAllowedValue: (v) => v >= 0
+ *   })
+ *   count!: number;
+ * }
+ * ```
+ */
+export declare function property(options?: DDSPropertyDeclaration): PropertyDecorator;
+/**
+ * Creates a validation function that checks if a value is one of the allowed values.
+ *
+ * This helper function is commonly used with the `isAllowedValue` option in property
+ * declarations to restrict property values to a predefined set of allowed values.
+ *
+ * @template T - The type of the allowed values
+ * @param values - Array of allowed values
+ * @returns Validation function that returns true if the value is in the allowed values array
+ */
+export declare function oneOf<T>(values: readonly T[]): (value: unknown) => boolean;

package/dist/cjs/base/define.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const ddsElement = require("./dds-element.cjs");
 const currentVersion = ddsElement.DDSElement.version;
 function defineDDSElement(ctor, name) {
+  var _a;
   const existing = customElements.get(name);
   if (existing) {
     const existingVersion = existing.version ?? "unknown version";
@@ -13,6 +14,7 @@ function defineDDSElement(ctor, name) {
     }
     return;
   }
+  (_a = ctor.registerCSSCustomProperties) == null ? void 0 : _a.call(ctor);
   customElements.define(name, ctor);
 }
 exports.defineDDSElement = defineDDSElement;

package/dist/cjs/base/index.cjs

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const ddsElement = require("./dds-element.cjs");
 const ddsFormElement = require("./dds-form-element.cjs");
+const ddsProperty = require("./dds-property.cjs");
 const decorators = require("./decorators.cjs");
 const define = require("./define.cjs");
 exports.DDSElement = ddsElement.DDSElement;
 exports.DDSFormElement = ddsFormElement.DDSFormElement;
 exports.DDSFormSubmitElement = ddsFormElement.DDSFormSubmitElement;
+exports.oneOf = ddsProperty.oneOf;
+exports.property = ddsProperty.property;
 exports.ddsElement = decorators.ddsElement;
 exports.defineDDSElement = define.defineDDSElement;

package/dist/cjs/base/index.d.cts

@@ -1,4 +1,5 @@
 export * from "./dds-element.cjs";
 export * from "./dds-form-element.cjs";
+export * from "./dds-property.cjs";
 export * from "./decorators.cjs";
 export * from "./define.cjs";

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

@@ -4,6 +4,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -76,10 +77,10 @@ exports.DaikinAccordion.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinAccordion.prototype, "openItems", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordion.prototype, "exclusive", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-accordion-item" })

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

@@ -2,10 +2,10 @@
 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 ref_js = require("lit/directives/ref.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -28,7 +28,7 @@ const cvaSummary = classVarianceAuthority.cva(
     "w-full",
     "min-h-12",
     "p-3",
-    "break-all",
+    "natural-break",
     "text-left",
     "focus-visible:outline",
     "focus-visible:outline-2",
@@ -72,7 +72,6 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
     super(...arguments);
     this._summaryRef = ref_js.createRef();
     this._contentRef = ref_js.createRef();
-    this.name = "";
     this.open = false;
     this.disabled = false;
   }
@@ -133,7 +132,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
       >
         <div class="overflow-hidden">
           <div class="pt-2 px-3 pb-3">
-            <slot class="slotted:break-all"></slot>
+            <slot class="slotted:natural-break"></slot>
           </div>
         </div>
       </div>
@@ -176,13 +175,13 @@ exports.DaikinAccordionItem.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinAccordionItem.prototype, "name", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "disabled", 2);
 exports.DaikinAccordionItem = __decorateClass([
   decorators.ddsElement("daikin-accordion-item")

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -66,7 +67,6 @@ const cvaWrapper = classVarianceAuthority.cva(
 exports.DaikinAvatar = class DaikinAvatar extends ddsElement.DDSElement {
   constructor() {
     super();
-    this.type = "icon";
     this.href = null;
     this.alt = null;
     this.disabled = false;
@@ -89,7 +89,7 @@ exports.DaikinAvatar = class DaikinAvatar extends ddsElement.DDSElement {
       return lit.html`<span
         class=${cvaWrapper({ type: "icon" })}
         role="figure"
-        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.alt)}
       >
         ${icon}
       </span>`;
@@ -97,9 +97,9 @@ exports.DaikinAvatar = class DaikinAvatar extends ddsElement.DDSElement {
       return lit.html`<button
         type="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)}
+        aria-label=${ifDefined_js.ifDefined(this.alt)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.avatarAriaHaspopup)}
+        aria-expanded=${ifDefined_js.ifDefined(this.avatarAriaExpanded)}
         ?disabled=${this.disabled}
       >
         ${icon}
@@ -108,10 +108,10 @@ exports.DaikinAvatar = class DaikinAvatar extends ddsElement.DDSElement {
       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)}
+        role=${linkDisabled ? "link" : lit.nothing}
+        aria-label=${ifDefined_js.ifDefined(this.alt)}
+        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href : void 0)}
+        aria-disabled=${linkDisabled ? "true" : lit.nothing}
       >
         ${icon}
       </a>`;
@@ -140,22 +140,27 @@ exports.DaikinAvatar.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "icon",
+    isAllowedValue: ddsProperty.oneOf(["button", "icon", "link"])
+  })
 ], exports.DaikinAvatar.prototype, "type", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinAvatar.prototype, "href", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinAvatar.prototype, "alt", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinAvatar.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "avatar-aria-haspopup" })
+  ddsProperty.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" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "avatar-aria-expanded" })
 ], exports.DaikinAvatar.prototype, "avatarAriaExpanded", 2);
 __decorateClass([
   decorators_js.query("a,button")

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

@@ -23,6 +23,8 @@ export declare class DaikinAvatar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Replace the wrapping element.
+     *
+     * @default "icon"
      */
     type: AvatarVariantProps["type"];
     /**
@@ -49,7 +51,7 @@ export declare class DaikinAvatar extends DDSElement {
      * The aria-expanded of avatar when `type="button"`.
      * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
      */
-    avatarAriaExpanded: boolean | null;
+    avatarAriaExpanded: "true" | "false" | "undefined" | null;
     private _focusableElement;
     constructor();
     render(): import('lit-html').TemplateResult<1>;

package/dist/cjs/components/badge/daikin-badge.cjs

@@ -2,9 +2,9 @@
 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 ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -42,42 +42,47 @@ const cvaBadge = classVarianceAuthority.cva(["absolute", "rounded-full"], {
       dot: ["w-2", "h-2", "top-1", "right-1"]
     },
     color: {
-      danger: ["bg-ddt-color-common-danger-default"],
+      negative: ["bg-ddt-color-common-danger-default"],
       alarm: ["bg-ddt-color-common-alarm"],
       warning: ["bg-ddt-color-common-warning"],
-      success: ["bg-ddt-color-common-success"],
+      positive: ["bg-ddt-color-common-success"],
       information: ["bg-ddt-color-common-information"]
     }
   }
 });
+const DEFAULT_MAX_COUNT = "99";
 exports.DaikinBadge = class DaikinBadge extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.type = "dot";
     this.count = null;
-    this.maxCount = "99";
+    this.maxCount = DEFAULT_MAX_COUNT;
     this.invisible = false;
-    this.color = "danger";
   }
   /**
    * Computes the actual number to display in the badge.
    * - If count is null or invalid, displays "0".
    * - If count exceeds maxCount, displays "maxCount+".
+   * - If maxCount is null, displays the actual count.
+   * - If maxCount is invalid, it will be treated as the default value ("99").
    * - Otherwise, displays the actual number.
    */
   get _count() {
-    if (this.count == null) {
+    var _a, _b;
+    if (!((_a = this.count) == null ? void 0 : _a.trim())) {
       return "0";
     }
     const count = parseInt(this.count, 10);
-    const maxCount = this.maxCount ? parseInt(this.maxCount, 10) : null;
     if (isNaN(count) || count < 0) {
       return "0";
     }
-    if (maxCount != null && !isNaN(maxCount) && count > maxCount) {
-      return `${maxCount.toLocaleString()}+`;
+    if (!((_b = this.maxCount) == null ? void 0 : _b.trim())) {
+      return count.toLocaleString();
     }
-    return count.toLocaleString();
+    let maxCount = parseInt(this.maxCount, 10);
+    if (isNaN(maxCount)) {
+      maxCount = parseInt(DEFAULT_MAX_COUNT, 10);
+    }
+    return count > maxCount ? `${maxCount.toLocaleString()}+` : count.toLocaleString();
   }
   /**
    * Renders the badge component.
@@ -114,19 +119,35 @@ exports.DaikinBadge.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "dot",
+    isAllowedValue: ddsProperty.oneOf(["number", "dot"])
+  })
 ], exports.DaikinBadge.prototype, "type", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinBadge.prototype, "count", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "max-count" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "max-count" })
 ], exports.DaikinBadge.prototype, "maxCount", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinBadge.prototype, "invisible", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "negative",
+    isAllowedValue: ddsProperty.oneOf([
+      "negative",
+      "alarm",
+      "warning",
+      "positive",
+      "information"
+    ])
+  })
 ], exports.DaikinBadge.prototype, "color", 2);
 exports.DaikinBadge = __decorateClass([
   decorators.ddsElement("daikin-badge")

package/dist/cjs/components/badge/daikin-badge.d.cts

@@ -13,7 +13,7 @@ import { DDSElement } from "../../base/index.cjs";
  * ```
  *
  * ```html
- * <daikin-badge count="42" max-count="999" color="danger">
+ * <daikin-badge count="42" max-count="999" color="negative">
  *   <daikin-icon-button variant="ghost" size="m" buttonAriaLabel="42 unread notifications">
  *     <daikin-icon
  *       class="w-8 h-8"
@@ -32,6 +32,7 @@ export declare class DaikinBadge extends DDSElement {
      * Badge type.
      * - "number": Displays a number (e.g., message count, quantity).
      * - "dot": Displays only a small dot (e.g., status indicator).
+     *
      * @default "dot"
      */
     type: "number" | "dot";
@@ -39,13 +40,16 @@ export declare class DaikinBadge extends DDSElement {
      * The numeric content displayed in the badge.
      * Only effective when type="number".
      * Accepts a string or null; will be parsed as a number internally.
+     *
      * @example "5"
      */
     count: string | null;
     /**
      * The maximum number to display in the badge.
      * If the count exceeds this value, it will display as "maxCount+", e.g., "99+".
+     * For accessibility considerations, if maxCount is null or invalid, it will be treated as the default value ("99").
      * Only effective when type="number".
+     *
      * @example "99"
      */
     maxCount: string | null;
@@ -53,19 +57,21 @@ export declare class DaikinBadge extends DDSElement {
      * Whether to hide the badge.
      * - true: The badge is not displayed (slot content remains visible).
      * - false: The badge is displayed normally.
-     * @default false
      */
     invisible: boolean;
     /**
      * Badge color.
-     * Supports predefined semantic color tokens (danger, alarm, warning, success, information).
-     * @default "danger"
+     * Supports predefined semantic color tokens (negative, alarm, warning, positive, information).
+     *
+     * @default "negative"
      */
-    color: "danger" | "alarm" | "warning" | "success" | "information";
+    color: "negative" | "alarm" | "warning" | "positive" | "information";
     /**
      * Computes the actual number to display in the badge.
      * - If count is null or invalid, displays "0".
      * - If count exceeds maxCount, displays "maxCount+".
+     * - If maxCount is null, displays the actual count.
+     * - If maxCount is invalid, it will be treated as the default value ("99").
      * - Otherwise, displays the actual number.
      */
     private get _count();

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

@@ -4,6 +4,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -21,16 +22,38 @@ exports.DaikinBreadcrumb = class DaikinBreadcrumb extends ddsElement.DDSElement
   constructor() {
     super(...arguments);
     this.showVisited = false;
+    this._rafId = null;
   }
   _updateBreadcrumbs() {
-    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;
+    if (this._rafId !== null) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+    this._rafId = requestAnimationFrame(() => {
+      const items = this._items;
+      const menus = this._menus;
+      items.forEach((item, index) => {
+        const isLast = index === items.length - 1;
+        item.variant = isLast ? "current" : "normal";
+        item.showVisited = this.showVisited;
+        item.appendDivider = !isLast;
+      });
+      menus.forEach((menu) => {
+        const breadcrumbItem = menu.triggerElement;
+        if ((breadcrumbItem == null ? void 0 : breadcrumbItem.tagName) === "DAIKIN-BREADCRUMB-ITEM") {
+          breadcrumbItem.variant = "ellipsis";
+          breadcrumbItem.appendDivider = true;
+        }
+      });
     });
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._rafId !== null) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+  }
   _handleSlotChange() {
     this._updateBreadcrumbs();
   }
@@ -54,11 +77,14 @@ exports.DaikinBreadcrumb.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], exports.DaikinBreadcrumb.prototype, "showVisited", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-breadcrumb-item" })
 ], exports.DaikinBreadcrumb.prototype, "_items", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-menu" })
+], exports.DaikinBreadcrumb.prototype, "_menus", 2);
 exports.DaikinBreadcrumb = __decorateClass([
   decorators.ddsElement("daikin-breadcrumb")
 ], exports.DaikinBreadcrumb);

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

@@ -12,16 +12,45 @@ import { DDSElement } from "../../base/index.cjs";
  * ```js
  * import "@daikin-oss/design-system-web-components/components/breadcrumb/index.js";
  * import "@daikin-oss/design-system-web-components/components/breadcrumb-item/index.js";
+ * // To collapse a portion of the breadcrumb items and represent the collapsed section as a menu, you can achieve this by combining the Menu and List components.
+ * import "@daikin-oss/design-system-web-components/components/menu/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list-item/index.js";
  * ```
  *
  * ```html
+ * <!-- Example of a simple breadcrumb -->
  * <daikin-breadcrumb>
- *  <daikin-breadcrumb-item href="https://www.example.com/1">
- *   Breadcrumb item 1
- *  </daikin-breadcrumb-item>
- *  <daikin-breadcrumb-item href="https://www.example.com/2">
- *   Breadcrumb item 2
- *  </daikin-breadcrumb-item>
+ *   <daikin-breadcrumb-item href="https://www.example.com/1">
+ *     Breadcrumb item 1
+ *   </daikin-breadcrumb-item>
+ *   <daikin-breadcrumb-item href="https://www.example.com/2">
+ *     Breadcrumb item 2
+ *   </daikin-breadcrumb-item>
+ * </daikin-breadcrumb>
+ *
+ * <!-- Example of a breadcrumb with a collapsed section represented as a menu -->
+ * <daikin-breadcrumb>
+ *   <daikin-breadcrumb-item href="#">
+ *     Breadcrumb item 1
+ *   </daikin-breadcrumb-item>
+ *   <daikin-menu placement="bottom-start">
+ *     <daikin-breadcrumb-item></daikin-breadcrumb-item>
+ *     <daikin-list list-role="menu" slot="menu" style="width: 10rem">
+ *       <daikin-list-item type="link" href="#">
+ *         Breadcrumb 2
+ *       </daikin-list-item>
+ *       <daikin-list-item type="link" href="#">
+ *         Breadcrumb 3
+ *       </daikin-list-item>
+ *       <daikin-list-item type="link" href="#">
+ *         Breadcrumb 4
+ *       </daikin-list-item>
+ *     </daikin-list>
+ *   </daikin-menu>
+ *   <daikin-breadcrumb-item href="#">
+ *     Breadcrumb item 5
+ *   </daikin-breadcrumb-item>
  * </daikin-breadcrumb>
  * ```
  */
@@ -32,7 +61,10 @@ export declare class DaikinBreadcrumb extends DDSElement {
      */
     showVisited: boolean;
     private readonly _items;
+    private readonly _menus;
+    private _rafId;
     private _updateBreadcrumbs;
+    disconnectedCallback(): void;
     private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     protected firstUpdated(): void;