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

package/dist/cjs-dev/components/input-group/daikin-input-group.cjs

@@ -5,9 +5,11 @@ 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");
+require("../status-message/daikin-status-message.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -112,6 +114,25 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
       textareaLimitExceedError: this.textareaLimitExceedError,
       none: ""
     }[helperTextVariant];
+    const formatHelperText = (helperTextVariant2, helperText2) => {
+      switch (helperTextVariant2) {
+        case "error":
+        case "textareaLimitExceedError":
+          return lit.html`<daikin-status-message
+            status="negative"
+            status-message-role="alert"
+            size="small"
+          >
+            ${helperText2}
+          </daikin-status-message>`;
+        case "none":
+          return lit.nothing;
+        default:
+          return lit.html`<span class=${cvaHelper({ type: helperTextVariant2 })}>
+            ${helperText2}
+          </span>`;
+      }
+    };
     return lit.html`<fieldset class="contents" ?disabled=${this.disabled}>
       <label
         class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary font-daikinSerif"
@@ -124,12 +145,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
                 ${this.required}
               </span>` : lit.nothing}
         </div>
-        <span
-          class=${cvaHelper({ type: helperTextVariant })}
-          aria-live=${helperTextVariant === "error" ? "polite" : "off"}
-        >
-          ${helperText}
-        </span>
+        ${formatHelperText(helperTextVariant, helperText)}
         <slot
           @slotchange=${this._handleSlotChange}
           @input=${this._handleInput}
@@ -156,25 +172,25 @@ exports.DaikinInputGroup.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "label", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "helper", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinInputGroup.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true, attribute: "textarea-max-count" })
+  ddsProperty.property({ type: Number, reflect: true, attribute: "textarea-max-count" })
 ], exports.DaikinInputGroup.prototype, "textareaMaxCount", 2);
 __decorateClass([
-  decorators_js.property({
+  ddsProperty.property({
     type: String,
     reflect: true,
     attribute: "textarea-limit-exceed-error"

package/dist/cjs-dev/components/link/daikin-link.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 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");
@@ -22,8 +22,6 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const LINK_CLASS_NAME = classVarianceAuthority.cva([
   "font-daikinSerif",
   "relative",
-  "border-b",
-  "border-b-current",
   "link-enabled:text-ddt-color-link-text-default",
   "link-enabled:hover:text-ddt-color-link-text-hover",
   "link-enabled:hover:bg-ddt-color-common-surface-brand-hover",
@@ -35,6 +33,18 @@ const LINK_CLASS_NAME = classVarianceAuthority.cva([
   "focus-visible:outline-ddt-color-common-border-focus",
   "focus-visible:outline-offset-2"
 ])();
+const cvaContent = classVarianceAuthority.cva(["leading-[130%]"], {
+  variants: {
+    noUnderline: {
+      true: [],
+      false: ["border-b", "border-b-current"]
+    },
+    size: {
+      small: ["text-sm"],
+      medium: ["text-base"]
+    }
+  }
+});
 exports.DaikinLink = class DaikinLink extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
@@ -42,6 +52,8 @@ exports.DaikinLink = class DaikinLink extends ddsElement.DDSElement {
     this.target = null;
     this.disabled = false;
     this.showVisited = false;
+    this.size = "medium";
+    this.noUnderline = false;
   }
   render() {
     return lit.html`<a
@@ -52,7 +64,9 @@ exports.DaikinLink = class DaikinLink extends ddsElement.DDSElement {
       ><span class="inline-flex mr-[0.125rem] align-sub">
         <slot name="left-icon" class="icon-size-4"
           ><span class="-mr-[0.125rem]"></span></slot></span
-      ><slot></slot
+      ><span
+        class=${cvaContent({ noUnderline: this.noUnderline, size: this.size })}
+        ><slot></slot></span
       ><span class="inline-flex ml-[0.125rem] align-sub"
         ><slot name="right-icon" class="icon-size-4"
           ><span class="-ml-[0.125rem]"></span></slot></span
@@ -77,17 +91,23 @@ exports.DaikinLink.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinLink.prototype, "href", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinLink.prototype, "target", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinLink.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], exports.DaikinLink.prototype, "showVisited", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true })
+], exports.DaikinLink.prototype, "size", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "no-underline" })
+], exports.DaikinLink.prototype, "noUnderline", 2);
 exports.DaikinLink = __decorateClass([
   decorators.ddsElement("daikin-link")
 ], exports.DaikinLink);

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

@@ -34,6 +34,17 @@ export declare class DaikinLink extends DDSElement {
      * Whether or not to change the color of visited links.
      */
     showVisited: boolean;
+    /**
+     * Link size. The default value is `'medium'`.
+     *
+     * - `'small'`: Smaller font size (`0.875rem`).
+     * - `'medium'`: Base font size (`1rem`).
+     */
+    size: "small" | "medium";
+    /**
+     * Whether or not to display an underline.
+     */
+    noUnderline: boolean;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/cjs-dev/components/list/daikin-list.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");
@@ -63,7 +64,10 @@ exports.DaikinList = class DaikinList extends ddsElement.DDSElement {
     nextItem.focus();
   }
   render() {
-    return lit.html`<div role=${this.listRole}>
+    return lit.html`<div
+      role=${this.listRole}
+      aria-label=${this.listRole === "menu" ? "Menu" : "List"}
+    >
       <slot
         @keydown=${this.handleKeyDown}
         @slotchange=${this._handleSlotChange}
@@ -87,7 +91,7 @@ exports.DaikinList.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, attribute: false })
+  ddsProperty.property({ type: String, attribute: false })
 ], exports.DaikinList.prototype, "listRole", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-list-item" })

package/dist/cjs-dev/components/list-item/daikin-list-item.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");
@@ -54,7 +55,7 @@ const WRAPPER = classVarianceAuthority.cva([
   "p-3",
   "text-left",
   "relative",
-  "break-all"
+  "natural-break"
 ])();
 const cvaIcon = classVarianceAuthority.cva(["icon-size-6", "slotted:flex-none"], {
   variants: {
@@ -71,7 +72,6 @@ const cvaIcon = classVarianceAuthority.cva(["icon-size-6", "slotted:flex-none"],
 exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
   constructor() {
     super();
-    this.type = "button";
     this.listItemRole = "listitem";
     this.href = null;
     this.disabled = false;
@@ -103,10 +103,16 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
     </span>`;
     const list = {
-      button: () => lit.html`<button type="button" class=${INNER_CN} ?disabled=${disabled}>
+      button: () => lit.html`<button
+          type="button"
+          part="item"
+          class=${INNER_CN}
+          ?disabled=${disabled}
+        >
           ${content}
         </button>`,
       link: () => lit.html`<a
+          part="item"
           class=${INNER_CN}
           href=${ifDefined_js.ifDefined(!disabled ? this.href ?? void 0 : void 0)}
           role=${ifDefined_js.ifDefined(disabled ? "link" : void 0)}
@@ -114,7 +120,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
         >
           ${content}
         </a>`,
-      text: () => lit.html`<span class=${INNER_CN}>${content}</span>`
+      text: () => lit.html`<span part="item" class=${INNER_CN}>${content}</span>`
     }[this.type]();
     return lit.html`<div class=${WRAPPER} role=${this.listItemRole}>
       ${list}
@@ -151,16 +157,21 @@ exports.DaikinListItem.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "button",
+    isAllowedValue: ddsProperty.oneOf(["button", "link", "text"])
+  })
 ], exports.DaikinListItem.prototype, "type", 2);
 __decorateClass([
-  decorators_js.property({ type: String, attribute: false })
+  ddsProperty.property({ type: String, attribute: false })
 ], exports.DaikinListItem.prototype, "listItemRole", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinListItem.prototype, "href", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinListItem.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.query("a,button")

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

@@ -19,6 +19,8 @@ import { DDSElement } from "../../base/index.cjs";
  * @slot left-icon - An optional slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  * @slot right-icon - An optional slot for an icon to be placed to the left of the text. Ignored if `action` slot is used. Place `daikin-icon` or something similar.
  *
+ * @csspart item - CSS styles applied to the `item` part target the internal wrapper element (`<a>`, `<button>`, or `<span>`). For instance, setting `cursor: grab;` changes the hover cursor, signaling that the list item is draggable.
+ *
  * @example
  *
  * ```js
@@ -36,6 +38,8 @@ export declare class DaikinListItem extends DDSElement {
      * - `button` (default): The list item will be rendered as a `<button>` element.
      * - `link`: The list item will be rendered as an `<a>` element.
      * - `text`: The list item will be rendered as a `<span>` element. Use this if the list itself has no action.
+     *
+     * @default "button"
      */
     type: "button" | "link" | "text";
     /**

package/dist/cjs-dev/components/loading/daikin-loading.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");
@@ -85,10 +85,15 @@ exports.DaikinLoading.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: ddsProperty.oneOf(["small", "medium"])
+  })
 ], exports.DaikinLoading.prototype, "size", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinLoading.prototype, "background", 2);
 exports.DaikinLoading = __decorateClass([
   decorators.ddsElement("daikin-loading")

package/dist/cjs-dev/components/logo/daikin-logo.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");
@@ -51,23 +52,20 @@ exports.DaikinLogo = class DaikinLogo extends ddsElement.DDSElement {
     super(...arguments);
     this.href = null;
     this.target = null;
-    this.logoAriaLabel = "Logo of Daikin";
-    this.mode = "positive";
   }
   render() {
     if (!this.href) {
       return lit.html`<span
         class=${cvaWrapper({ type: "logo", mode: this.mode })}
         role="img"
-        aria-label=${ifDefined_js.ifDefined(this.logoAriaLabel ?? void 0)}
-        alt=${ifDefined_js.ifDefined(this.logoAriaLabel ?? void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.logoAriaLabel)}
       ></span>`;
     } else {
       return lit.html`<a
         class=${cvaWrapper({ type: "link", mode: this.mode })}
-        aria-label=${ifDefined_js.ifDefined(this.logoAriaLabel ?? void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.logoAriaLabel)}
         href=${ifDefined_js.ifDefined(this.href)}
-        target=${ifDefined_js.ifDefined(this.target ?? void 0)}
+        target=${ifDefined_js.ifDefined(this.target)}
       ></a>`;
     }
   }
@@ -90,16 +88,26 @@ exports.DaikinLogo.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinLogo.prototype, "href", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinLogo.prototype, "target", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "logo-aria-label" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "logo-aria-label",
+    fallbackValue: "Logo of Daikin"
+  })
 ], exports.DaikinLogo.prototype, "logoAriaLabel", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "positive",
+    isAllowedValue: ddsProperty.oneOf(["positive", "negative"])
+  })
 ], exports.DaikinLogo.prototype, "mode", 2);
 __decorateClass([
   decorators_js.query("a")

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

@@ -32,11 +32,15 @@ export declare class DaikinLogo extends DDSElement {
     target: string | null;
     /**
      * Provides an accessible name of the logo.
+     *
+     * @default "Logo of Daikin"
      */
     logoAriaLabel: string | null;
     /**
      * Specify the the logo mode.
      * Notice: Allow the use of a negative logo only when the positive logo is too close to the background to be legible.
+     *
+     * @default "positive"
      */
     mode: "positive" | "negative";
     private _focusableElement;

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

@@ -7,6 +7,7 @@ const decorators_js = require("lit/decorators.js");
 const guard_js = require("lit/directives/guard.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 floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
@@ -14,6 +15,7 @@ const isClient = require("../../is-client.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const reDispatch = require("../../utils/re-dispatch.cjs");
 const daikinAvatar = require("../avatar/daikin-avatar.cjs");
+const daikinBreadcrumbItem = require("../breadcrumb-item/daikin-breadcrumb-item.cjs");
 const daikinButton = require("../button/daikin-button.cjs");
 const daikinIconButton = require("../icon-button/daikin-icon-button.cjs");
 const daikinListItem = require("../list-item/daikin-list-item.cjs");
@@ -44,10 +46,7 @@ const DEFAULT_MENU_SPACING = "0px";
 exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.placement = "bottom";
     this.open = false;
-    this.popoverValue = "auto";
-    this.trigger = "click";
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
   }
@@ -62,6 +61,25 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
       initialValue: "0px"
     });
   }
+  /**
+   * Exposes the trigger element contained within the menu to the outside of the component.
+   *
+   * Supported trigger elements:
+   * - `<daikin-button>`
+   * - `<daikin-icon-button>`
+   * - `<daikin-avatar>`
+   * - `<daikin-breadcrumb-item>`
+   *
+   * Returns the first matching element from the slot.
+   */
+  get triggerElement() {
+    for (const control of this._controls) {
+      if (control instanceof daikinButton.DaikinButton || control instanceof daikinIconButton.DaikinIconButton && control.type === "button" || control instanceof daikinAvatar.DaikinAvatar && control.type === "button" || control instanceof daikinBreadcrumbItem.DaikinBreadcrumbItem) {
+        return control;
+      }
+    }
+    return null;
+  }
   /**
    * Reflects static attributes (e.g. ARIA roles) to slot components.
    * These are typically set once when the slot changes and do not change frequently.
@@ -85,9 +103,9 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
   _reflectDynamicProperties() {
     for (const control of this._controls) {
       if (control instanceof daikinButton.DaikinButton || control instanceof daikinIconButton.DaikinIconButton && control.type === "button") {
-        control.buttonAriaExpanded = this.open;
+        control.buttonAriaExpanded = `${this.open}`;
       } else if (control instanceof daikinAvatar.DaikinAvatar && control.type === "button") {
-        control.avatarAriaExpanded = this.open;
+        control.avatarAriaExpanded = `${this.open}`;
       }
     }
   }
@@ -95,19 +113,26 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
     this._reflectStaticProperties();
   }
   _handleTriggerClick(event) {
-    if (this.trigger === "click") {
-      event.preventDefault();
-      this.open = !this.open;
-      if (this.open) {
-        setTimeout(() => {
-          this._lists[0].focusFirstItem();
-        });
-      }
+    if (this.trigger !== "click") return;
+    event.preventDefault();
+    this.open = !this.open;
+    if (this.open) {
+      setTimeout(() => {
+        this._lists[0].focusFirstItem();
+      });
     }
   }
-  _handleClick(event) {
+  _handleTouchEnd(event) {
+    if (this.trigger !== "click") return;
     event.preventDefault();
-    if (event.target instanceof daikinListItem.default && !event.target.disabled) {
+    this.open = !this.open;
+  }
+  /**
+   * Handles click events on the menu-item.
+   * When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
+   */
+  _handleClick(event) {
+    if (event.target instanceof daikinListItem.default && !event.target.disabled && this.popoverValue === "auto") {
       this.open = false;
     }
   }
@@ -128,17 +153,14 @@ exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
     return lit.html`<div
       class="relative inline-block text-ddt-color-common-text-primary font-daikinSerif"
     >
-      <div
-        id="trigger"
-        aria-labelledby="trigger"
-        aria-describedby="menu"
-        ${this._autoUpdateController.refReference()}
-      >
-        <slot @click=${this._handleTriggerClick}></slot>
+      <div id="trigger" ${this._autoUpdateController.refReference()}>
+        <slot
+          @click=${this._handleTriggerClick}
+          @touchend=${this._handleTouchEnd}
+        ></slot>
       </div>
       <span
         id="menu"
-        aria-labelledby="menu"
         part="menu"
         class=${cvaMenu()}
         popover=${this.popoverValue}
@@ -185,20 +207,49 @@ __decorateClass([
 ], exports.DaikinMenu.prototype, "_lists", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({
-    selector: "daikin-button,daikin-icon-button,daikin-avatar"
+    selector: "daikin-button,daikin-icon-button,daikin-avatar,daikin-breadcrumb-item"
   })
 ], exports.DaikinMenu.prototype, "_controls", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "bottom",
+    isAllowedValue: ddsProperty.oneOf([
+      "top",
+      "top-start",
+      "top-end",
+      "bottom",
+      "bottom-start",
+      "bottom-end",
+      "left",
+      "left-start",
+      "left-end",
+      "right",
+      "right-start",
+      "right-end"
+    ])
+  })
 ], exports.DaikinMenu.prototype, "placement", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinMenu.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: String, attribute: "popover-value" })
+  ddsProperty.property({
+    type: String,
+    attribute: "popover-value",
+    reflect: true,
+    fallbackValue: "auto",
+    isAllowedValue: ddsProperty.oneOf(["auto", "manual"])
+  })
 ], exports.DaikinMenu.prototype, "popoverValue", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "click",
+    isAllowedValue: ddsProperty.oneOf(["click", "manual"])
+  })
 ], exports.DaikinMenu.prototype, "trigger", 2);
 exports.DaikinMenu = __decorateClass([
   decorators.ddsElement("daikin-menu")