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

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

@@ -1,10 +1,11 @@
 "use strict";
 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");
@@ -19,30 +20,53 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const LINK_CLASS_NAME = classVarianceAuthority.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"
+])();
 exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends ddsElement.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" ? lit.html`<daikin-link
-            class="text-sm"
-            href=${ifDefined_js.ifDefined(this.href ?? void 0)}
-            target=${ifDefined_js.ifDefined(this.target ?? void 0)}
+            href=${ifDefined_js.ifDefined(this.href)}
+            target=${ifDefined_js.ifDefined(this.target)}
+            ?no-underline=${true}
             ?show-visited=${this.showVisited}
-            ><slot></slot
-          ></daikin-link>` : lit.html`<a
-            class="text-sm font-daikinSerif text-ddt-color-common-text-primary"
-            aria-disabled="true"
-            aria-current="true"
-            target=${ifDefined_js.ifDefined(this.target ?? void 0)}
-            role="link"
-            ><slot></slot
-          ></a>`;
+          >
+            <slot></slot>
+          </daikin-link>` : this.variant === "ellipsis" ? lit.html`<button
+              type="button"
+              class=${LINK_CLASS_NAME}
+              aria-label="Show more items"
+            >
+              ...
+            </button>` : lit.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_js.ifDefined(this.target)}
+              role="link"
+            >
+              <slot></slot>
+            </a>`;
     const divider = this.appendDivider ? lit.html`<span
           class="text-ddt-color-common-text-primary mx-2 text-sm"
           aria-hidden="true"
@@ -55,19 +79,28 @@ exports.DaikinBreadcrumbItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinBreadcrumbItem.prototype, "href", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "normal",
+    isAllowedValue: ddsProperty.oneOf([
+      "normal",
+      "current",
+      "ellipsis"
+    ])
+  })
 ], exports.DaikinBreadcrumbItem.prototype, "variant", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinBreadcrumbItem.prototype, "target", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], exports.DaikinBreadcrumbItem.prototype, "showVisited", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "append-divider" })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "append-divider" })
 ], exports.DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 exports.DaikinBreadcrumbItem = __decorateClass([
   decorators.ddsElement("daikin-breadcrumb-item")

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

@@ -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/cjs/components/button/daikin-button.cjs

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = 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");
@@ -86,10 +87,7 @@ const cvaIcon = classVarianceAuthority.cva(["slotted:flex-none"], {
 exports.DaikinButton = class DaikinButton extends ddsFormElement.DDSFormSubmitElement {
   constructor() {
     super();
-    this.variant = "fill";
-    this.type = "button";
     this.size = "medium";
-    this.color = "default";
     this.disabled = false;
     this.href = null;
     this.buttonRole = null;
@@ -116,7 +114,8 @@ exports.DaikinButton = class DaikinButton extends ddsFormElement.DDSFormSubmitEl
       const linkDisabled = this.disabled || this.href == null;
       return lit.html`<a
         class=${className}
-        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href : void 0)}
+        tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
         role=${ifDefined_js.ifDefined(
         this.buttonRole ?? (linkDisabled ? "link" : void 0)
       )}
@@ -136,9 +135,10 @@ exports.DaikinButton = class DaikinButton extends ddsFormElement.DDSFormSubmitEl
         class=${className}
         ?disabled=${this.disabled}
         type=${this.type}
-        role=${ifDefined_js.ifDefined(this.buttonRole ?? void 0)}
-        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup ?? void 0)}
-        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded ?? void 0)}
+        tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
+        role=${ifDefined_js.ifDefined(this.buttonRole)}
+        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup)}
       >
         <slot name="left-icon" class=${cvaIcon({ size: this.size })}>
           <span class="flex-none block -ml-1"></span>
@@ -183,32 +183,73 @@ exports.DaikinButton.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "fill",
+    isAllowedValue: ddsProperty.oneOf([
+      "fill",
+      "outline",
+      "ghost"
+    ])
+  })
 ], exports.DaikinButton.prototype, "variant", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "button",
+    isAllowedValue: ddsProperty.oneOf([
+      "button",
+      "submit",
+      "reset",
+      "link"
+    ])
+  })
 ], exports.DaikinButton.prototype, "type", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: ddsProperty.oneOf([
+      "small",
+      "medium",
+      "large"
+    ])
+  })
 ], exports.DaikinButton.prototype, "size", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: ddsProperty.oneOf(["default", "danger"])
+  })
 ], exports.DaikinButton.prototype, "color", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinButton.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinButton.prototype, "href", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "button-role" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-role" })
 ], exports.DaikinButton.prototype, "buttonRole", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
 ], exports.DaikinButton.prototype, "buttonAriaHaspopup", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-expanded" })
 ], exports.DaikinButton.prototype, "buttonAriaExpanded", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: Number,
+    reflect: true,
+    attribute: "button-tabindex",
+    fallbackValue: 0
+  })
+], exports.DaikinButton.prototype, "buttonTabIndex", 2);
 __decorateClass([
   decorators_js.query("a,button")
 ], exports.DaikinButton.prototype, "_focusableElement", 2);

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

@@ -2,7 +2,7 @@ import { DDSFormSubmitElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 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/cjs/components/calendar/daikin-calendar.cjs

@@ -7,6 +7,7 @@ const ifDefined_js = require("lit/directives/if-defined.js");
 const repeat_js = require("lit/directives/repeat.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");
@@ -126,9 +127,7 @@ function getNextFocusDateByKey(date, event) {
 exports.DaikinCalendar = class DaikinCalendar extends ddsElement.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;
@@ -136,7 +135,7 @@ exports.DaikinCalendar = class DaikinCalendar extends ddsElement.DDSElement {
     this._viewDate = getToday();
   }
   get _value() {
-    return calendarCommon.tryParseDateFromProperty(this.value ?? "");
+    return calendarCommon.tryParseDateFromProperty(this.value);
   }
   get _min() {
     return calendarCommon.tryParseDateFromProperty(this.min) ?? calendarCommon.parseDateFromProperty(calendarCommon.DEFAULT_MIN_DATE);
@@ -547,19 +546,19 @@ exports.DaikinCalendar.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, attribute: false })
+  ddsProperty.property({ type: String })
 ], exports.DaikinCalendar.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
 ], exports.DaikinCalendar.prototype, "min", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "2099-12-31" })
 ], exports.DaikinCalendar.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "default-value" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "default-value" })
 ], exports.DaikinCalendar.prototype, "defaultValue", 2);
 __decorateClass([
-  decorators_js.property({ type: String, attribute: false })
+  ddsProperty.property({ type: String, attribute: false })
 ], exports.DaikinCalendar.prototype, "view", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -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/cjs/components/card/daikin-card.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");
@@ -61,7 +61,7 @@ exports.DaikinCard.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCard.prototype, "outline", 2);
 exports.DaikinCard = __decorateClass([
   decorators.ddsElement("daikin-card")

package/dist/cjs/components/card-footer/daikin-card-footer.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+require("lit/decorators.js");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

package/dist/cjs/components/card-header/daikin-card-header.cjs

@@ -4,6 +4,7 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+require("lit/decorators.js");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");

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

@@ -7,6 +7,7 @@ const ref_js = require("lit/directives/ref.js");
 const repeat_js = require("lit/directives/repeat.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");
@@ -209,7 +210,7 @@ exports.DaikinCarousel.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true, attribute: "current-index" })
+  ddsProperty.property({ type: Number, reflect: true, attribute: "current-index" })
 ], exports.DaikinCarousel.prototype, "currentIndex", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-carousel-item" })

package/dist/cjs/components/carousel-item/daikin-carousel-item.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");
@@ -62,10 +63,10 @@ exports.DaikinCarouselItem.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, attribute: false })
+  ddsProperty.property({ type: String, attribute: false })
 ], exports.DaikinCarouselItem.prototype, "label", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, attribute: false })
+  ddsProperty.property({ type: Boolean, attribute: false })
 ], exports.DaikinCarouselItem.prototype, "active", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ slot: "title" })

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

@@ -2,9 +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");
 require("../../base/dds-element.cjs");
 const ddsFormElement = 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");
@@ -78,9 +79,6 @@ const cvaLabel = classVarianceAuthority.cva([], {
 exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.labelPosition = "right";
-    this.checkState = "unchecked";
     this.disabled = false;
     this.disabledByParent = false;
   }
@@ -126,7 +124,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
         <input
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
-          name=${this.name}
+          name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
           ?disabled=${disabled}
           aria-label=${this._labelHidden ? this.label : lit.nothing}
           .checked=${this.checked}
@@ -160,19 +158,35 @@ exports.DaikinCheckbox.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinCheckbox.prototype, "label", 2);
 __decorateClass([
-  decorators_js.property({ type: String, attribute: "label-position" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "label-position",
+    fallbackValue: "right",
+    isAllowedValue: ddsProperty.oneOf(["right", "hidden"])
+  })
 ], exports.DaikinCheckbox.prototype, "labelPosition", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "check-state" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "check-state",
+    fallbackValue: "unchecked",
+    isAllowedValue: ddsProperty.oneOf([
+      "unchecked",
+      "indeterminate",
+      "checked"
+    ])
+  })
 ], exports.DaikinCheckbox.prototype, "checkState", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckbox.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: false })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
 ], exports.DaikinCheckbox.prototype, "disabledByParent", 2);
 exports.DaikinCheckbox = __decorateClass([
   decorators.ddsElement("daikin-checkbox")

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

@@ -5,11 +5,18 @@ import { DDSFormElement } from "../../base/index.cjs";
  * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
  * This component is ideal for cases where multiple selections are allowed or required.
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="checkbox">` element.
  *
  * @slot - A slot for the checkbox label content.
  *
- * @csspart label - Change the style of checkbox label.
+ * @csspart label - CSS styles applied to the `label` part target the internal `<label>` element containing the checkbox. For instance, setting `cursor: pointer;` is useful when the checkbox acts as part of a larger interactive component.
  *
  * @example
  *
@@ -31,10 +38,14 @@ export declare class DaikinCheckbox extends DDSFormElement {
      * Label position.
      * - `right` (default): The label will be placed to the right of the checkbox.
      * - `hidden`: The label will not be shown.
+     *
+     * @default "right"
      */
     labelPosition: "right" | "hidden";
     /**
      * Specify the checkbox checked state.
+     *
+     * @default "unchecked"
      */
     checkState: "unchecked" | "indeterminate" | "checked";
     /**

package/dist/cjs/components/checkbox-group/daikin-checkbox-group.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");
@@ -77,13 +78,21 @@ exports.DaikinCheckboxGroup.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "vertical",
+    isAllowedValue: ddsProperty.oneOf([
+      "vertical",
+      "horizontal"
+    ])
+  })
 ], exports.DaikinCheckboxGroup.prototype, "orientation", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckboxGroup.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckboxGroup.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.state()

package/dist/cjs/components/checkbox-group/daikin-checkbox-group.d.cts

@@ -33,6 +33,8 @@ export declare class DaikinCheckboxGroup extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify the checkbox group orientation
+     *
+     * @default "vertical"
      */
     orientation: CheckboxGroupProps["orientation"];
     /**

package/dist/cjs/components/chip/daikin-chip.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");
@@ -100,7 +101,7 @@ exports.DaikinChip.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "chip-aria-label" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "chip-aria-label" })
 ], exports.DaikinChip.prototype, "chipAriaLabel", 2);
 __decorateClass([
   decorators_js.query("button")