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

package/dist/cjs/utils/notification-common.cjs

@@ -10,68 +10,6 @@ function formatDate(date) {
     dateStyle: "medium"
   });
 }
-const cvaContainer = classVarianceAuthority.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 = classVarianceAuthority.cva(["flex", "items-center", "w-full"], {
-  variants: {
-    layout: {
-      horizontal: ["gap-3", "overflow-hidden"],
-      vertical: ["items-stretch", "flex-col", "gap-1"]
-    }
-  }
-});
 const cvaTimestamp = classVarianceAuthority.cva(
   [
     "text-ddt-color-common-text-secondary",
@@ -88,38 +26,6 @@ const cvaTimestamp = classVarianceAuthority.cva(
     }
   }
 );
-const cvaTitle = classVarianceAuthority.cva(
-  ["slotted:inline-block", "font-bold", "leading-[130%]"],
-  {
-    variants: {
-      layout: {
-        vertical: [],
-        horizontal: [
-          "slotted:whitespace-nowrap",
-          "slotted:overflow-hidden",
-          "slotted:overflow-ellipsis"
-        ]
-      }
-    }
-  }
-);
-const cvaDescription = classVarianceAuthority.cva(["inline-block", "leading-[130%]"], {
-  variants: {
-    layout: {
-      vertical: [],
-      horizontal: [
-        "whitespace-nowrap",
-        "overflow-hidden",
-        "overflow-ellipsis",
-        "flex-1"
-      ]
-    }
-  }
-});
 exports.TOAST_ANIMATION_DURATION = TOAST_ANIMATION_DURATION;
-exports.cvaContainer = cvaContainer;
-exports.cvaContent = cvaContent;
-exports.cvaDescription = cvaDescription;
 exports.cvaTimestamp = cvaTimestamp;
-exports.cvaTitle = cvaTitle;
 exports.formatDate = formatDate;

package/dist/cjs/utils/notification-common.d.cts

@@ -1,19 +1,6 @@
 /** The duration of the animation in the appearance and disappearance of the toast (in msec). */
 export declare const TOAST_ANIMATION_DURATION = 200;
 export declare function formatDate(date: Date): string | null;
-export declare const cvaContainer: (props?: ({
-    variant?: "inline" | "toast" | null | undefined;
-    status?: "alarm" | "information" | "warning" | "negative" | "positive" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const cvaContent: (props?: ({
-    layout?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const cvaTimestamp: (props?: ({
     layout?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const cvaTitle: (props?: ({
-    layout?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const cvaDescription: (props?: ({
-    layout?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/cjs-dev/base/dds-element.cjs

@@ -1,8 +1,99 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
+const globalNameToKeyIndexMap = /* @__PURE__ */ new Map();
+function ensureGlobalKeyIndex(name) {
+  let key = globalNameToKeyIndexMap.get(name);
+  if (!key) {
+    key = Symbol(`__dds_backing_property_${String(name)}`);
+    globalNameToKeyIndexMap.set(name, key);
+  }
+  return key;
+}
 const _DDSElement = class _DDSElement extends lit.LitElement {
+  /**
+   * Override of LitElement's getPropertyDescriptor to add support for fallback values
+   * and property validation.
+   *
+   * @param name - The property name (e.g., "value", "disabled")
+   * @param key - The backing property key used for internal storage (generated by Lit)
+   * @param options - DDS property declaration options including fallbackValue and isAllowedValue
+   * @returns Property descriptor with enhanced getter/setter logic
+   */
+  static getPropertyDescriptor(name, key, { fallbackValue, isAllowedValue, ...options }) {
+    const keyIndex = ensureGlobalKeyIndex(name);
+    if (this[keyIndex] != null && this[keyIndex] !== key) {
+      throw new Error(
+        `Property name "${String(name)}" is already mapped to a different backing property key.`
+      );
+    }
+    Object.defineProperty(this, keyIndex, {
+      value: key,
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    const orgDescriptor = super.getPropertyDescriptor(name, key, options);
+    if (!orgDescriptor || fallbackValue === void 0 && isAllowedValue == null) {
+      return orgDescriptor;
+    }
+    return {
+      get() {
+        const orgValue = orgDescriptor.get.call(this);
+        return orgValue === void 0 ? fallbackValue : orgValue;
+      },
+      set(value) {
+        const isValid = isAllowedValue == null || value != null && isAllowedValue(value);
+        {
+          if (!isValid) {
+            console.warn(
+              `[DDS] Property "${String(name)}" was set to an invalid or nullish value:`,
+              value,
+              "- replaced with undefined and will fallback to:",
+              fallbackValue
+            );
+          }
+        }
+        orgDescriptor.set.call(
+          this,
+          // Convert a nullish value or an invalid value to `undefined` before setting.
+          // This `undefined` will be replaced with `fallbackValue` in the getter above (if provided).
+          // We cannot use `fallbackValue` here since it prevents reflection when the user tries to set the same value as `fallbackValue` next time.
+          isValid ? value : void 0
+        );
+      },
+      configurable: true,
+      enumerable: true
+    };
+  }
+  /**
+   * Retrieves the backing property value for a given property name.
+   * This allows access to the underlying stored value before any fallback logic is applied.
+   *
+   * Why is this needed?
+   * - The public property getter may return a fallback value when the actual value is undefined.
+   * - Sometimes we need to know if the property was explicitly set or if we're using a fallback.
+   * - This method provides access to the raw backing value stored by Lit.
+   *
+   * @template T - The property key type extending keyof this
+   *
+   * @param name - The property name to retrieve the backing value for
+   * @returns The raw backing property value or undefined if not found
+   */
+  getBackingProperty(name) {
+    const index = globalNameToKeyIndexMap.get(name);
+    if (!index) {
+      throw new Error(
+        `Backing property index for "${String(name)}" not found.`
+      );
+    }
+    const key = this.constructor[index];
+    if (key == null) {
+      throw new Error(`Backing property key for "${String(name)}" not found.`);
+    }
+    return this[key];
+  }
 };
-_DDSElement.version = "1.3.2";
+_DDSElement.version = "1.4.0-next.1";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

package/dist/cjs-dev/base/dds-element.d.cts

@@ -1,4 +1,44 @@
 import { LitElement } from 'lit';
+import { DDSPropertyDeclaration } from "./dds-property.cjs";
+/**
+ * Base class for all DDS (DAIKIN Design System) components.
+ * Extends LitElement with enhanced property handling capabilities including fallback values
+ * and property validation.
+ *
+ * @example
+ * ```typescript
+ * class MyComponent extends DDSElement {
+ *   @property({ reflect: true, fallbackValue: "" })
+ *   name!: string;
+ * }
+ * ```
+ */
 export declare class DDSElement extends LitElement {
+    /** The version of the DDS library */
     static readonly version: string;
+    /**
+     * Override of LitElement's getPropertyDescriptor to add support for fallback values
+     * and property validation.
+     *
+     * @param name - The property name (e.g., "value", "disabled")
+     * @param key - The backing property key used for internal storage (generated by Lit)
+     * @param options - DDS property declaration options including fallbackValue and isAllowedValue
+     * @returns Property descriptor with enhanced getter/setter logic
+     */
+    static getPropertyDescriptor(name: PropertyKey, key: string | symbol, { fallbackValue, isAllowedValue, ...options }: DDSPropertyDeclaration): PropertyDescriptor | undefined;
+    /**
+     * Retrieves the backing property value for a given property name.
+     * This allows access to the underlying stored value before any fallback logic is applied.
+     *
+     * Why is this needed?
+     * - The public property getter may return a fallback value when the actual value is undefined.
+     * - Sometimes we need to know if the property was explicitly set or if we're using a fallback.
+     * - This method provides access to the raw backing value stored by Lit.
+     *
+     * @template T - The property key type extending keyof this
+     *
+     * @param name - The property name to retrieve the backing value for
+     * @returns The raw backing property value or undefined if not found
+     */
+    protected getBackingProperty<T extends keyof this>(name: T): this[T] | undefined;
 }

package/dist/cjs-dev/base/dds-form-element.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const decorators_js = require("lit/decorators.js");
 const ddsElement = require("./dds-element.cjs");
+const ddsProperty = require("./dds-property.cjs");
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -14,7 +14,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 const _DDSFormElement = class _DDSFormElement extends ddsElement.DDSElement {
   constructor() {
     super();
-    this.name = "";
     this.value = "";
     this.internals = this.attachInternals();
   }
@@ -73,13 +72,18 @@ const _DDSFormElement = class _DDSFormElement extends ddsElement.DDSElement {
 _DDSFormElement.formAssociated = true;
 let DDSFormElement = _DDSFormElement;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], DDSFormElement.prototype, "name");
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String })
 ], DDSFormElement.prototype, "value");
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "form" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "form",
+    fallbackValue: ""
+  })
 ], DDSFormElement.prototype, "formAttr");
 const _DDSFormSubmitElement = class _DDSFormSubmitElement extends ddsElement.DDSElement {
   constructor() {
@@ -133,7 +137,12 @@ const _DDSFormSubmitElement = class _DDSFormSubmitElement extends ddsElement.DDS
 _DDSFormSubmitElement.formAssociated = true;
 let DDSFormSubmitElement = _DDSFormSubmitElement;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "form" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "form",
+    fallbackValue: ""
+  })
 ], DDSFormSubmitElement.prototype, "formAttr");
 exports.DDSFormElement = DDSFormElement;
 exports.DDSFormSubmitElement = DDSFormSubmitElement;

package/dist/cjs-dev/base/dds-form-element.d.cts

@@ -14,7 +14,7 @@ export declare class DDSFormElement extends DDSElement {
      * The form attribute specifies the form the form component belongs to.
      * The value of this attribute must be equal to the id attribute of a <form> element in the same document.
      */
-    formAttr: string | undefined;
+    formAttr: string;
     protected internals: ElementInternals | null | undefined;
     constructor();
     /**
@@ -61,7 +61,7 @@ export declare class DDSFormSubmitElement extends DDSElement {
      * The form attribute specifies the form the form component belongs to.
      * The value of this attribute must be equal to the id attribute of a <form> element in the same document.
      */
-    formAttr: string | undefined;
+    formAttr: string;
     protected internals: ElementInternals | null | undefined;
     constructor();
     /**

package/dist/cjs-dev/base/dds-property.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const decorators_js = require("lit/decorators.js");
+function property(options) {
+  return decorators_js.property(options);
+}
+function oneOf(values) {
+  return (value) => values.includes(value);
+}
+exports.oneOf = oneOf;
+exports.property = property;

package/dist/cjs-dev/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-dev/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-dev/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-dev/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");
@@ -83,10 +84,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-dev/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-dev/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-dev/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>;