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

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

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import "../../base/dds-element.js";
 import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -78,11 +79,8 @@ const cvaIconButton = cva(
 let DaikinIconButton = class extends DDSFormSubmitElement {
   constructor() {
     super();
-    this.variant = "fill";
-    this.color = "default";
     this.disabled = false;
     this.href = null;
-    this.type = "button";
     this.buttonAriaLabel = null;
     this.buttonRole = null;
     this.buttonAriaHaspopup = null;
@@ -109,6 +107,7 @@ let DaikinIconButton = class extends DDSFormSubmitElement {
       return html`<a
         class=${iconButtonCN}
         href=${ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        tabindex=${ifDefined(this.getBackingProperty("buttonTabIndex"))}
         role=${ifDefined(
         this.buttonRole ?? (linkDisabled ? "link" : void 0)
       )}
@@ -122,10 +121,11 @@ let DaikinIconButton = class extends DDSFormSubmitElement {
       <button
         class=${iconButtonCN}
         type=${this.type}
+        tabindex=${ifDefined(this.getBackingProperty("buttonTabIndex"))}
         aria-label=${this.buttonAriaLabel ?? ""}
         ?disabled=${this.disabled}
-        aria-haspopup=${ifDefined(this.buttonAriaHaspopup ?? void 0)}
-        aria-expanded=${ifDefined(this.buttonAriaExpanded ?? void 0)}
+        aria-expanded=${ifDefined(this.buttonAriaExpanded)}
+        aria-haspopup=${ifDefined(this.buttonAriaHaspopup)}
       >
         <slot class="icon-size-full"></slot>
       </button>
@@ -148,18 +148,38 @@ DaikinIconButton.styles = css`
       width: var(--ddc-icon-button-size, 2rem);
       height: var(--ddc-icon-button-size, 2rem);
     }
+
     :host([size="s"]) {
       --ddc-icon-button-size: 2rem; /* 32px */
     }
+
     :host([size="m"]) {
       --ddc-icon-button-size: 3rem; /* 48px */
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "fill",
+    isAllowedValue: oneOf([
+      "outline",
+      "fill",
+      "ghost"
+    ])
+  })
 ], DaikinIconButton.prototype, "variant", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: oneOf([
+      "default",
+      "neutral",
+      "danger"
+    ])
+  })
 ], DaikinIconButton.prototype, "color", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -168,7 +188,17 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinIconButton.prototype, "href", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "button",
+    isAllowedValue: oneOf([
+      "button",
+      "submit",
+      "reset",
+      "link"
+    ])
+  })
 ], DaikinIconButton.prototype, "type", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "button-aria-label" })
@@ -180,10 +210,23 @@ __decorateClass([
   property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
 ], DaikinIconButton.prototype, "buttonAriaHaspopup", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+  property({ type: String, reflect: true, attribute: "button-aria-expanded" })
 ], DaikinIconButton.prototype, "buttonAriaExpanded", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: Number,
+    reflect: true,
+    attribute: "button-tabindex",
+    fallbackValue: 0
+  })
+], DaikinIconButton.prototype, "buttonTabIndex", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "s",
+    isAllowedValue: oneOf(["s", "m"])
+  })
 ], DaikinIconButton.prototype, "size", 2);
 __decorateClass([
   query("button")

package/dist/es/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./accordion/index.js";
 export * from "./accordion-item/index.js";
 export * from "./avatar/index.js";
+export * from "./badge/index.js";
 export * from "./breadcrumb/index.js";
 export * from "./breadcrumb-item/index.js";
 export * from "./button/index.js";
@@ -38,6 +39,7 @@ export * from "./radio/index.js";
 export * from "./radio-group/index.js";
 export * from "./select/index.js";
 export * from "./slider/index.js";
+export * from "./status-message/index.js";
 export * from "./tab/index.js";
 export * from "./tab-panels/index.js";
 export * from "./table/index.js";

package/dist/es/components/index.js

@@ -1,6 +1,7 @@
 import { DaikinAccordion } from "./accordion/daikin-accordion.js";
 import { DaikinAccordionItem } from "./accordion-item/daikin-accordion-item.js";
 import { DaikinAvatar } from "./avatar/daikin-avatar.js";
+import { DaikinBadge } from "./badge/daikin-badge.js";
 import { DaikinBreadcrumb } from "./breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./button/daikin-button.js";
@@ -38,6 +39,7 @@ import { DaikinRadio } from "./radio/daikin-radio.js";
 import { DaikinRadioGroup } from "./radio-group/daikin-radio-group.js";
 import { DaikinSelect } from "./select/daikin-select.js";
 import { DaikinSlider } from "./slider/daikin-slider.js";
+import { DaikinStatusMessage } from "./status-message/daikin-status-message.js";
 import { DaikinTab } from "./tab/daikin-tab.js";
 import { DaikinTabPanels } from "./tab-panels/daikin-tab-panels.js";
 import { DaikinTable } from "./table/daikin-table.js";
@@ -59,6 +61,7 @@ export {
   DaikinAccordion,
   DaikinAccordionItem,
   DaikinAvatar,
+  DaikinBadge,
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
@@ -96,6 +99,7 @@ export {
   DaikinRadioGroup,
   DaikinSelect,
   DaikinSlider,
+  DaikinStatusMessage,
   DaikinTab,
   DaikinTabPanels,
   DaikinTable,

package/dist/es/components/inline-notification/daikin-inline-notification.d.ts

@@ -30,10 +30,14 @@ export declare class DaikinInlineNotification extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Status of the notification.
+     *
+     * @default "positive"
      */
     status: ToastNotificationVariantProps["status"];
     /**
      * Specify how to arrange the elements.
+     *
+     * @default "horizontal"
      */
     layout: ToastNotificationVariantProps["layout"];
     /**
@@ -41,7 +45,10 @@ export declare class DaikinInlineNotification extends DDSElement {
      */
     closable: boolean;
     /**
-     * The timestamp to display.
+     * The timestamp to display. Accepts a Date object and displays it in YYYY/MM/DD format.
+     *
+     * @example
+     * element.timestamp = new Date();
      */
     timestamp: Date | null;
     /**

package/dist/es/components/inline-notification/daikin-inline-notification.js

@@ -1,11 +1,12 @@
+import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
-import { formatDate, cvaContainer, cvaContent, cvaTitle, cvaDescription, cvaTimestamp } from "../../utils/notification-common.js";
+import { formatDate, cvaTimestamp } from "../../utils/notification-common.js";
 import "../icon-button/daikin-icon-button.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,11 +18,90 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaContainer = cva(
+  [
+    "flex",
+    "items-center",
+    "gap-3",
+    "w-full",
+    "h-full",
+    "text-ddt-color-common-text-primary",
+    "bg-ddt-color-common-background-default",
+    "p-4",
+    "overflow-hidden",
+    "font-daikinSerif",
+    "transition",
+    "box-border",
+    "before:size-6",
+    "before:flex-none"
+  ],
+  {
+    variants: {
+      variant: {
+        toast: [
+          "rounded-lg",
+          "border",
+          "border-ddt-color-divider",
+          "translate-x-[--move-offset-x,0]",
+          "translate-y-[--move-offset-y,0]",
+          "opacity-[--opacity,1]",
+          "[pointer-events:var(--pointer-events,auto)]",
+          "[transition-duration:var(--transition-duration,var(--ddc-toast-animation-duration,0ms))]"
+        ],
+        inline: []
+      },
+      status: {
+        positive: [
+          "before:text-ddt-color-common-success",
+          "before:i-daikin-success"
+        ],
+        negative: [
+          "before:text-ddt-color-common-danger-default",
+          "before:i-daikin-error"
+        ],
+        warning: [
+          "before:text-ddt-color-common-warning",
+          "before:i-daikin-warning"
+        ],
+        alarm: ["before:text-ddt-color-common-alarm", "before:i-daikin-alarm"],
+        information: [
+          "before:text-ddt-color-common-information",
+          "before:i-daikin-information"
+        ]
+      }
+    }
+  }
+);
+const cvaContent = cva(["flex", "items-center", "w-full", "justify-between"], {
+  variants: {
+    layout: {
+      horizontal: ["gap-3", "overflow-hidden"],
+      vertical: ["items-stretch", "flex-col", "gap-1"]
+    }
+  }
+});
+const cvaTextContent = cva(["flex"], {
+  variants: {
+    layout: {
+      horizontal: ["flex-row", "gap-3"],
+      vertical: ["flex-col", "gap-1"]
+    }
+  }
+});
+const TITLE_CLASS_NAME = cva([
+  "slotted:inline-block",
+  "font-bold",
+  "leading-[130%]",
+  "slotted:natural-break"
+])();
+const DESCRIPTION_CLASS_NAME = cva([
+  "inline-block",
+  "leading-[130%]",
+  "natural-break"
+])();
 let DaikinInlineNotification = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.status = "positive";
-    this.layout = "horizontal";
     this.closable = false;
     this.timestamp = null;
   }
@@ -38,8 +118,10 @@ let DaikinInlineNotification = class extends DDSElement {
       class=${cvaContainer({ variant: "inline", status: this.status })}
     >
       <div class=${cvaContent({ layout: this.layout })}>
-        <slot class=${cvaTitle({ layout: this.layout })} name="title"></slot>
-        <slot class=${cvaDescription({ layout: this.layout })}></slot>
+        <div class=${cvaTextContent({ layout: this.layout })}>
+          <slot class=${TITLE_CLASS_NAME} name="title"></slot>
+          <slot class=${DESCRIPTION_CLASS_NAME}></slot>
+        </div>
         ${formattedTimestamp ? html`<span class=${cvaTimestamp({ layout: this.layout })}
               >${formattedTimestamp}</span
             >` : nothing}
@@ -70,10 +152,29 @@ DaikinInlineNotification.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "positive",
+    isAllowedValue: oneOf([
+      "positive",
+      "negative",
+      "warning",
+      "alarm",
+      "information"
+    ])
+  })
 ], DaikinInlineNotification.prototype, "status", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "horizontal",
+    isAllowedValue: oneOf([
+      "horizontal",
+      "vertical"
+    ])
+  })
 ], DaikinInlineNotification.prototype, "layout", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es/components/input-group/daikin-input-group.js

@@ -1,11 +1,13 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
+import "../status-message/daikin-status-message.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -110,6 +112,25 @@ let DaikinInputGroup = class extends DDSElement {
       textareaLimitExceedError: this.textareaLimitExceedError,
       none: ""
     }[helperTextVariant];
+    const formatHelperText = (helperTextVariant2, helperText2) => {
+      switch (helperTextVariant2) {
+        case "error":
+        case "textareaLimitExceedError":
+          return html`<daikin-status-message
+            status="negative"
+            status-message-role="alert"
+            size="small"
+          >
+            ${helperText2}
+          </daikin-status-message>`;
+        case "none":
+          return nothing;
+        default:
+          return html`<span class=${cvaHelper({ type: helperTextVariant2 })}>
+            ${helperText2}
+          </span>`;
+      }
+    };
     return 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"
@@ -122,12 +143,7 @@ let DaikinInputGroup = class extends DDSElement {
                 ${this.required}
               </span>` : 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}

package/dist/es/components/link/daikin-link.d.ts

@@ -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/es/components/link/daikin-link.js

@@ -1,9 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -20,8 +20,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 const LINK_CLASS_NAME = 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",
@@ -33,6 +31,18 @@ const LINK_CLASS_NAME = cva([
   "focus-visible:outline-ddt-color-common-border-focus",
   "focus-visible:outline-offset-2"
 ])();
+const cvaContent = cva(["leading-[130%]"], {
+  variants: {
+    noUnderline: {
+      true: [],
+      false: ["border-b", "border-b-current"]
+    },
+    size: {
+      small: ["text-sm"],
+      medium: ["text-base"]
+    }
+  }
+});
 let DaikinLink = class extends DDSElement {
   constructor() {
     super(...arguments);
@@ -40,6 +50,8 @@ let DaikinLink = class extends DDSElement {
     this.target = null;
     this.disabled = false;
     this.showVisited = false;
+    this.size = "medium";
+    this.noUnderline = false;
   }
   render() {
     return html`<a
@@ -50,7 +62,9 @@ let DaikinLink = class extends 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
@@ -86,6 +100,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], DaikinLink.prototype, "showVisited", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinLink.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "no-underline" })
+], DaikinLink.prototype, "noUnderline", 2);
 DaikinLink = __decorateClass([
   ddsElement("daikin-link")
 ], DaikinLink);

package/dist/es/components/list/daikin-list.js

@@ -1,7 +1,8 @@
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements } from "lit/decorators.js";
+import { queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -61,7 +62,10 @@ let DaikinList = class extends DDSElement {
     nextItem.focus();
   }
   render() {
-    return html`<div role=${this.listRole}>
+    return html`<div
+      role=${this.listRole}
+      aria-label=${this.listRole === "menu" ? "Menu" : "List"}
+    >
       <slot
         @keydown=${this.handleKeyDown}
         @slotchange=${this._handleSlotChange}

package/dist/es/components/list-item/daikin-list-item.d.ts

@@ -19,6 +19,8 @@ import { DDSElement } from "../../base/index.js";
  * @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/es/components/list-item/daikin-list-item.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -52,7 +53,7 @@ const WRAPPER = cva([
   "p-3",
   "text-left",
   "relative",
-  "break-all"
+  "natural-break"
 ])();
 const cvaIcon = cva(["icon-size-6", "slotted:flex-none"], {
   variants: {
@@ -69,7 +70,6 @@ const cvaIcon = cva(["icon-size-6", "slotted:flex-none"], {
 let DaikinListItem = class extends DDSElement {
   constructor() {
     super();
-    this.type = "button";
     this.listItemRole = "listitem";
     this.href = null;
     this.disabled = false;
@@ -101,10 +101,16 @@ let DaikinListItem = class extends DDSElement {
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
     </span>`;
     const list = {
-      button: () => html`<button type="button" class=${INNER_CN} ?disabled=${disabled}>
+      button: () => html`<button
+          type="button"
+          part="item"
+          class=${INNER_CN}
+          ?disabled=${disabled}
+        >
           ${content}
         </button>`,
       link: () => html`<a
+          part="item"
           class=${INNER_CN}
           href=${ifDefined(!disabled ? this.href ?? void 0 : void 0)}
           role=${ifDefined(disabled ? "link" : void 0)}
@@ -112,7 +118,7 @@ let DaikinListItem = class extends DDSElement {
         >
           ${content}
         </a>`,
-      text: () => html`<span class=${INNER_CN}>${content}</span>`
+      text: () => html`<span part="item" class=${INNER_CN}>${content}</span>`
     }[this.type]();
     return html`<div class=${WRAPPER} role=${this.listItemRole}>
       ${list}
@@ -149,7 +155,12 @@ DaikinListItem.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "button",
+    isAllowedValue: oneOf(["button", "link", "text"])
+  })
 ], DaikinListItem.prototype, "type", 2);
 __decorateClass([
   property({ type: String, attribute: false })

package/dist/es/components/loading/daikin-loading.js

@@ -1,8 +1,8 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -83,7 +83,12 @@ DaikinLoading.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: oneOf(["small", "medium"])
+  })
 ], DaikinLoading.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es/components/logo/daikin-logo.d.ts

@@ -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;