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

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

@@ -13,7 +13,7 @@ import { DDSElement } from "../../base/index.js";
  * ```
  *
  * ```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/es/components/badge/daikin-badge.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";
@@ -40,42 +40,47 @@ const cvaBadge = 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";
 let DaikinBadge = class extends 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.
@@ -112,7 +117,12 @@ DaikinBadge.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "dot",
+    isAllowedValue: oneOf(["number", "dot"])
+  })
 ], DaikinBadge.prototype, "type", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -124,7 +134,18 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinBadge.prototype, "invisible", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "negative",
+    isAllowedValue: oneOf([
+      "negative",
+      "alarm",
+      "warning",
+      "positive",
+      "information"
+    ])
+  })
 ], DaikinBadge.prototype, "color", 2);
 DaikinBadge = __decorateClass([
   ddsElement("daikin-badge")

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

@@ -12,16 +12,45 @@ import { DDSElement } from "../../base/index.js";
  * ```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;

package/dist/es/components/breadcrumb/daikin-breadcrumb.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";
@@ -19,16 +20,38 @@ let DaikinBreadcrumb = class extends 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();
   }
@@ -57,6 +80,9 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements({ selector: "daikin-breadcrumb-item" })
 ], DaikinBreadcrumb.prototype, "_items", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-menu" })
+], DaikinBreadcrumb.prototype, "_menus", 2);
 DaikinBreadcrumb = __decorateClass([
   ddsElement("daikin-breadcrumb")
 ], DaikinBreadcrumb);

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

@@ -30,8 +30,10 @@ export declare class DaikinBreadcrumbItem extends DDSElement {
      * Specifies the display content.
      * If `ellipsis`, the "..." will be displayed instead of the link.
      * Set automatically by `daikin-breadcrumb`.
+     *
+     * @default "normal"
      */
-    variant: "normal" | "current";
+    variant: "normal" | "current" | "ellipsis";
     /**
      * Specify the link target.
      */

package/dist/es/components/breadcrumb-item/daikin-breadcrumb-item.js

@@ -1,8 +1,9 @@
+import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html, nothing } 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, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -17,30 +18,53 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const LINK_CLASS_NAME = cva([
+  "font-daikinSerif",
+  "font-normal",
+  "text-base",
+  "leading-[130%]",
+  "relative",
+  "text-ddt-color-link-text-default",
+  "hover:text-ddt-color-link-text-hover",
+  "hover:bg-ddt-color-common-surface-brand-hover",
+  "active:text-ddt-color-link-text-press",
+  "active:bg-ddt-color-common-surface-brand-press",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "focus-visible:outline-offset-2"
+])();
 let DaikinBreadcrumbItem = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
-    this.variant = "normal";
     this.target = null;
     this.showVisited = false;
     this.appendDivider = false;
   }
   render() {
     const link = this.variant === "normal" ? html`<daikin-link
-            class="text-sm"
-            href=${ifDefined(this.href ?? void 0)}
-            target=${ifDefined(this.target ?? void 0)}
+            href=${ifDefined(this.href)}
+            target=${ifDefined(this.target)}
+            ?no-underline=${true}
             ?show-visited=${this.showVisited}
-            ><slot></slot
-          ></daikin-link>` : html`<a
-            class="text-sm font-daikinSerif text-ddt-color-common-text-primary"
-            aria-disabled="true"
-            aria-current="true"
-            target=${ifDefined(this.target ?? void 0)}
-            role="link"
-            ><slot></slot
-          ></a>`;
+          >
+            <slot></slot>
+          </daikin-link>` : this.variant === "ellipsis" ? html`<button
+              type="button"
+              class=${LINK_CLASS_NAME}
+              aria-label="Show more items"
+            >
+              ...
+            </button>` : html`<a
+              class="text-base leading-[130%] align-middle font-daikinSerif text-ddt-color-common-text-primary"
+              aria-disabled="true"
+              aria-current="true"
+              target=${ifDefined(this.target)}
+              role="link"
+            >
+              <slot></slot>
+            </a>`;
     const divider = this.appendDivider ? html`<span
           class="text-ddt-color-common-text-primary mx-2 text-sm"
           aria-hidden="true"
@@ -56,7 +80,16 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinBreadcrumbItem.prototype, "href", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "normal",
+    isAllowedValue: oneOf([
+      "normal",
+      "current",
+      "ellipsis"
+    ])
+  })
 ], DaikinBreadcrumbItem.prototype, "variant", 2);
 __decorateClass([
   property({ type: String, reflect: true })

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

@@ -2,7 +2,7 @@ import { DDSFormSubmitElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaButton: (props?: ({
-    color?: "danger" | "default" | null | undefined;
+    color?: "default" | "danger" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -14,6 +14,9 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
  * The button component is a versatile UI element that triggers actions or submits forms when clicked.
  * It functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.
  *
+ * @attr form - The form the component belongs to.
+ * @prop {String} formAttr - The form the component belongs to.
+ *
  * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<a>` or `<button>` element. Suppressed if `disabled` is true,
  *
  * @slot - A slot for the button content.
@@ -36,19 +39,25 @@ export declare class DaikinButton extends DDSFormSubmitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
+     *
+     * @default "fill"
      */
     variant: ButtonVariantProps["variant"];
     /**
      * Type of the button.
      * If `"link"` is specified, the button will be rendered as an `<a>` element.
+     *
+     * @default "button"
      */
     type: "button" | "submit" | "reset" | "link";
     /**
      * Size of the button.
      */
-    size: "small" | "medium" | "large";
+    size: ButtonVariantProps["size"];
     /**
      * Color of the button.
+     *
+     * @default "default"
      */
     color: ButtonVariantProps["color"];
     /**
@@ -74,7 +83,14 @@ export declare class DaikinButton extends DDSFormSubmitElement {
      * The aria-expanded of button 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.
      */
-    buttonAriaExpanded: boolean | null;
+    buttonAriaExpanded: "true" | "false" | "undefined" | null;
+    /**
+     * The `tabindex` of the button.
+     * If omitted or set to 0, the button follows the default tab flow.
+     * Setting it to -1 makes the button unreachable via the Tab key.
+     * This is useful when the button is part of a composite widget and accessible via other keys.
+     */
+    buttonTabIndex: number;
     private _focusableElement;
     constructor();
     render(): import('lit-html').TemplateResult<1>;

package/dist/es/components/button/daikin-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";
@@ -84,10 +85,7 @@ const cvaIcon = cva(["slotted:flex-none"], {
 let DaikinButton = class extends DDSFormSubmitElement {
   constructor() {
     super();
-    this.variant = "fill";
-    this.type = "button";
     this.size = "medium";
-    this.color = "default";
     this.disabled = false;
     this.href = null;
     this.buttonRole = null;
@@ -114,7 +112,8 @@ let DaikinButton = class extends DDSFormSubmitElement {
       const linkDisabled = this.disabled || this.href == null;
       return html`<a
         class=${className}
-        href=${ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        href=${ifDefined(!linkDisabled ? this.href : void 0)}
+        tabindex=${ifDefined(this.getBackingProperty("buttonTabIndex"))}
         role=${ifDefined(
         this.buttonRole ?? (linkDisabled ? "link" : void 0)
       )}
@@ -134,9 +133,10 @@ let DaikinButton = class extends DDSFormSubmitElement {
         class=${className}
         ?disabled=${this.disabled}
         type=${this.type}
-        role=${ifDefined(this.buttonRole ?? void 0)}
-        aria-haspopup=${ifDefined(this.buttonAriaHaspopup ?? void 0)}
-        aria-expanded=${ifDefined(this.buttonAriaExpanded ?? void 0)}
+        tabindex=${ifDefined(this.getBackingProperty("buttonTabIndex"))}
+        role=${ifDefined(this.buttonRole)}
+        aria-expanded=${ifDefined(this.buttonAriaExpanded)}
+        aria-haspopup=${ifDefined(this.buttonAriaHaspopup)}
       >
         <slot name="left-icon" class=${cvaIcon({ size: this.size })}>
           <span class="flex-none block -ml-1"></span>
@@ -181,16 +181,49 @@ DaikinButton.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "fill",
+    isAllowedValue: oneOf([
+      "fill",
+      "outline",
+      "ghost"
+    ])
+  })
 ], DaikinButton.prototype, "variant", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "button",
+    isAllowedValue: oneOf([
+      "button",
+      "submit",
+      "reset",
+      "link"
+    ])
+  })
 ], DaikinButton.prototype, "type", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: oneOf([
+      "small",
+      "medium",
+      "large"
+    ])
+  })
 ], DaikinButton.prototype, "size", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: oneOf(["default", "danger"])
+  })
 ], DaikinButton.prototype, "color", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -205,8 +238,16 @@ __decorateClass([
   property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
 ], DaikinButton.prototype, "buttonAriaHaspopup", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+  property({ type: String, reflect: true, attribute: "button-aria-expanded" })
 ], DaikinButton.prototype, "buttonAriaExpanded", 2);
+__decorateClass([
+  property({
+    type: Number,
+    reflect: true,
+    attribute: "button-tabindex",
+    fallbackValue: 0
+  })
+], DaikinButton.prototype, "buttonTabIndex", 2);
 __decorateClass([
   query("a,button")
 ], DaikinButton.prototype, "_focusableElement", 2);

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

@@ -21,15 +21,17 @@ export declare class DaikinCalendar extends DDSElement {
     /**
      * The current value of the input, submitted as a name/value pair with form data.
      */
-    value: string | null;
+    value: string;
     /**
      * The minimum date.
-     * example: `1900-01-01`
+     *
+     * @default "1900-01-01"
      */
     min: string;
     /**
      * The maximum date.
-     * example: `2099-12-31`
+     *
+     * @default "2099-12-31"
      */
     max: string;
     /**

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

@@ -1,10 +1,11 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.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";
@@ -124,9 +125,7 @@ function getNextFocusDateByKey(date, event) {
 let DaikinCalendar = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.value = null;
-    this.min = "1900-01-01";
-    this.max = "2099-12-31";
+    this.value = "";
     this.defaultValue = null;
     this.view = "day";
     this._lastFocusedDate = null;
@@ -134,7 +133,7 @@ let DaikinCalendar = class extends DDSElement {
     this._viewDate = getToday();
   }
   get _value() {
-    return tryParseDateFromProperty(this.value ?? "");
+    return tryParseDateFromProperty(this.value);
   }
   get _min() {
     return tryParseDateFromProperty(this.min) ?? parseDateFromProperty(DEFAULT_MIN_DATE);
@@ -545,13 +544,13 @@ DaikinCalendar.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, attribute: false })
+  property({ type: String })
 ], DaikinCalendar.prototype, "value", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
 ], DaikinCalendar.prototype, "min", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "2099-12-31" })
 ], DaikinCalendar.prototype, "max", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "default-value" })

package/dist/es/components/card/daikin-card.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 } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es/components/card-footer/daikin-card-footer.js

@@ -1,6 +1,7 @@
 import { unsafeCSS, css, html } from "lit";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import "lit/decorators.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";