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

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

@@ -1,5 +1,9 @@
 import { PropertyValues } from 'lit';
 import { DDSElement } from "../../base/index.cjs";
+import { DaikinAvatar } from "../avatar/index.cjs";
+import { DaikinBreadcrumbItem } from "../breadcrumb-item/index.cjs";
+import { DaikinButton } from "../button/index.cjs";
+import { DaikinIconButton } from "../icon-button/index.cjs";
 /**
  * A menu component is used to show list information when a user interacts with an element.
  *
@@ -14,7 +18,7 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * @cssprop [--ddc-menu-spacing=0px] - Spacing between the menu and the trigger.
  *
- * @csspart menu - Change the style of menu.
+ * @csspart menu - CSS styles applied to the `menu` part target the internal `<span>` element wrapping the list.
  *
  * @example
  *
@@ -44,8 +48,10 @@ export declare class DaikinMenu extends DDSElement {
     /**
      * Specifies the initial position of the menu relative to the trigger.
      * However, if there isn't enough space in the specified direction, the menu will automatically adjust its direction.
+     *
+     * @default "bottom"
      */
-    placement: "top" | "bottom" | "left" | "right";
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     /**
      * Whether the menu is open.
      */
@@ -54,16 +60,32 @@ export declare class DaikinMenu extends DDSElement {
      * Specify the value of the popover attribute in the Popover API.
      * - `auto`: Clicking on a trigger element will open a menu, and clicking again will close it. You can also close it using the Esc button. You cannot open multiple menu at the same time.
      * - `manual`: No click operation is specified for the trigger element. It will not close even if the Esc button is pressed. Multiple menu can be opened at once.
+     *
+     * @default "auto"
      */
     popoverValue: "auto" | "manual";
     /**
      * How the menu is controlled.
      * - `click`: The menu is displayed when the mouse clicks on the trigger element, and hidden when you click on it again. (default)
      * - `manual`: The menu does not respond to user interaction. Use this to control the menu programmatically.
+     *
+     * @default "click"
      */
     trigger: "click" | "manual";
     private _autoUpdateController;
     private _hostStyles;
+    /**
+     * Exposes the trigger element contained within the menu to the outside of the component.
+     *
+     * Supported trigger elements:
+     * - `<daikin-button>`
+     * - `<daikin-icon-button>`
+     * - `<daikin-avatar>`
+     * - `<daikin-breadcrumb-item>`
+     *
+     * Returns the first matching element from the slot.
+     */
+    get triggerElement(): DaikinAvatar | DaikinButton | DaikinIconButton | DaikinBreadcrumbItem | null;
     /**
      * Reflects static attributes (e.g. ARIA roles) to slot components.
      * These are typically set once when the slot changes and do not change frequently.
@@ -76,6 +98,11 @@ export declare class DaikinMenu extends DDSElement {
     private _reflectDynamicProperties;
     private _handleSlotChange;
     private _handleTriggerClick;
+    private _handleTouchEnd;
+    /**
+     * Handles click events on the menu-item.
+     * When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
+     */
     private _handleClick;
     private _handleBeforeToggle;
     private _handleToggle;

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

@@ -2,11 +2,11 @@
 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 guard_js = require("lit/directives/guard.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 focusTrap = require("../../controllers/focus-trap.cjs");
@@ -58,7 +58,6 @@ exports.DaikinModal = class DaikinModal extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.open = false;
-    this.modalRole = "dialog";
     this.modalAriaLabel = null;
     this.persistent = false;
     this._handleClose = () => {
@@ -100,16 +99,22 @@ exports.DaikinModal.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinModal.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "modal-role" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "modal-role",
+    fallbackValue: "dialog",
+    isAllowedValue: ddsProperty.oneOf(["dialog", "alertdialog"])
+  })
 ], exports.DaikinModal.prototype, "modalRole", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "modal-aria-label" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "modal-aria-label" })
 ], exports.DaikinModal.prototype, "modalAriaLabel", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean })
+  ddsProperty.property({ type: Boolean })
 ], exports.DaikinModal.prototype, "persistent", 2);
 exports.DaikinModal = __decorateClass([
   decorators.ddsElement("daikin-modal")

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

@@ -39,6 +39,8 @@ export declare class DaikinModal extends DDSElement {
     open: boolean;
     /**
      * ARIA role of the modal. Choose the appropriate role for your modal based on its usage scenario.
+     *
+     * @default "dialog"
      */
     modalRole: "dialog" | "alertdialog";
     /**

package/dist/cjs-dev/components/modal-footer/daikin-modal-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-dev/components/modal-header/daikin-modal-header.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");
@@ -55,7 +55,7 @@ exports.DaikinModalHeader = class DaikinModalHeader extends ddsElement.DDSElemen
   }
   render() {
     return lit.html`<div class="flex w-full gap-2">
-      <div class="flex-1 flex flex-col pt-0.5 gap-2 break-all">
+      <div class="flex-1 flex flex-col pt-0.5 gap-2 natural-break">
         <slot class=${cvaTitle}></slot>
         <slot name="description" class=${cvaDescription}></slot>
       </div>
@@ -90,7 +90,7 @@ exports.DaikinModalHeader.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "with-close-button" })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: "with-close-button" })
 ], exports.DaikinModalHeader.prototype, "withCloseButton", 2);
 exports.DaikinModalHeader = __decorateClass([
   decorators.ddsElement("daikin-modal-header")

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

@@ -2,11 +2,11 @@
 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 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");
@@ -139,9 +139,10 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
       this.current,
       this.window
     );
+    const landmarkLabel = this.ariaLabel || "Pagination";
     return lit.html`
       <div
-        aria-label="Pagination"
+        aria-label=${landmarkLabel}
         role="navigation"
         class="inline-flex flex-wrap"
       >
@@ -210,13 +211,13 @@ exports.DaikinPagination.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinPagination.prototype, "current", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinPagination.prototype, "total", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true })
+  ddsProperty.property({ type: Number, reflect: true })
 ], exports.DaikinPagination.prototype, "window", 2);
 exports.DaikinPagination = __decorateClass([
   decorators.ddsElement("daikin-pagination")

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.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");
@@ -98,11 +98,8 @@ const cvaHelper = classVarianceAuthority.cva(["text-sm", "leading-[130%]"], {
 exports.DaikinProgressBar = class DaikinProgressBar extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.variant = "inprogress";
-    this.size = "medium";
     this.value = 0;
     this.max = 100;
-    this.helper = "";
   }
   // Validate the 'value' and 'max' properties to ensure they are valid
   _validateProperties() {
@@ -173,19 +170,34 @@ exports.DaikinProgressBar.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "inprogress",
+    isAllowedValue: ddsProperty.oneOf([
+      "inprogress",
+      "completed",
+      "indeterminate",
+      "error"
+    ])
+  })
 ], exports.DaikinProgressBar.prototype, "variant", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: ddsProperty.oneOf(["medium", "large"])
+  })
 ], exports.DaikinProgressBar.prototype, "size", 2);
 __decorateClass([
-  decorators_js.property({ type: Number })
+  ddsProperty.property({ type: Number })
 ], exports.DaikinProgressBar.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: Number })
+  ddsProperty.property({ type: Number })
 ], exports.DaikinProgressBar.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinProgressBar.prototype, "helper", 2);
 exports.DaikinProgressBar = __decorateClass([
   decorators.ddsElement("daikin-progress-bar")

package/dist/cjs-dev/components/progress-bar/daikin-progress-bar.d.cts

@@ -38,10 +38,14 @@ export declare class DaikinProgressBar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the progress bar.
+     *
+     * @default "inprogress"
      */
     variant: ProgressBarVariantProps["variant"];
     /**
      * Size of the progress bar
+     *
+     * @default "medium"
      */
     size: ProgressBarVariantProps["size"];
     /**

package/dist/cjs-dev/components/progress-indicator/daikin-progress-indicator.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");
@@ -57,7 +58,7 @@ exports.DaikinProgressIndicator.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Number, attribute: "current-item", reflect: true })
+  ddsProperty.property({ type: Number, attribute: "current-item", reflect: true })
 ], exports.DaikinProgressIndicator.prototype, "currentItem", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-progress-indicator-item" })

package/dist/cjs-dev/components/progress-indicator-item/daikin-progress-indicator-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 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");
@@ -41,10 +41,6 @@ const cvaContainer = classVarianceAuthority.cva(
   }
 );
 exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends ddsElement.DDSElement {
-  constructor() {
-    super(...arguments);
-    this.status = "unfinished";
-  }
   render() {
     return lit.html`<div
       class=${cvaContainer({ status: this.status })}
@@ -53,7 +49,7 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
       this.status === "inprogress" ? "step" : void 0
     )}
     >
-      <div class="flex flex-col gap-1 w-full">
+      <div class="flex flex-col gap-1 w-full overflow-auto">
         <slot class="font-bold leading-[130%]"></slot>
         <slot name="description" class="text-sm leading-[130%]"></slot>
       </div>
@@ -73,11 +69,20 @@ exports.DaikinProgressIndicatorItem.styles = lit.css`
     :host {
       display: block;
       width: 100%;
-      min-width: 9rem;
+      min-width: 5rem;
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "unfinished",
+    isAllowedValue: ddsProperty.oneOf([
+      "unfinished",
+      "inprogress",
+      "finished"
+    ])
+  })
 ], exports.DaikinProgressIndicatorItem.prototype, "status", 2);
 exports.DaikinProgressIndicatorItem = __decorateClass([
   decorators.ddsElement("daikin-progress-indicator-item")

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

@@ -33,6 +33,8 @@ export declare class DaikinProgressIndicatorItem extends DDSElement {
     /**
      * Status of the progress indicator item.
      * Controlled by `daikin-progress-indicator`.
+     *
+     * @default "unfinished"
      */
     status: ProgressIndicatorItemVariantProps["status"];
     render(): import('lit-html').TemplateResult<1>;

package/dist/cjs-dev/components/radio/daikin-radio.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");
@@ -58,8 +59,6 @@ const cvaLabel = classVarianceAuthority.cva([], {
 exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.labelPosition = "right";
     this.checked = false;
     this.disabled = false;
     this.disabledByParent = false;
@@ -100,7 +99,7 @@ exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
         <input
           class=${RADIO_CLASS_NAME}
           type="radio"
-          name=${this.name}
+          name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
           aria-label=${this._labelHidden ? this.label : lit.nothing}
           tabindex=${ifDefined_js.ifDefined(this.skipTab ? "-1" : void 0)}
           ?disabled=${disabled}
@@ -142,22 +141,28 @@ exports.DaikinRadio.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinRadio.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.DaikinRadio.prototype, "labelPosition", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadio.prototype, "checked", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadio.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: false })
+  ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
 ], exports.DaikinRadio.prototype, "disabledByParent", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, attribute: false })
+  ddsProperty.property({ type: Boolean, attribute: false })
 ], exports.DaikinRadio.prototype, "skipTab", 2);
 __decorateClass([
   decorators_js.query("input")

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

@@ -7,6 +7,13 @@ import { DDSFormElement } from "../../base/index.cjs";
  * Hierarchies:
  * - `daikin-radio-group` > `daikin-radio`
  *
+ * @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="radio">` element.
  *
  * @slot - A slot for the radio label content.
@@ -31,6 +38,8 @@ export declare class DaikinRadio extends DDSFormElement {
      * Label position.
      * - `right` (default): The label will be placed to the right of the radio button.
      * - `hidden`: The label will not be shown.
+     *
+     * @default "right"
      */
     labelPosition: "right" | "hidden";
     /**

package/dist/cjs-dev/components/radio-group/daikin-radio-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");
@@ -31,8 +32,6 @@ const cvaRadioGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-8"
 exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.orientation = "vertical";
-    this.name = "";
     this.value = "";
     this.required = false;
     this.disabled = false;
@@ -51,7 +50,7 @@ exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement
     const selectedRadio = radios.find((radio) => radio.value === this.value);
     const firstEnabledRadio = radios.find((radio) => !radio.disabled);
     for (const daikinRadio of this._radios) {
-      if (this.name) {
+      if (this.getBackingProperty("name") != null) {
         daikinRadio.name = this.name;
       }
       const isSelected = daikinRadio === selectedRadio;
@@ -144,19 +143,27 @@ __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-radio" })
 ], exports.DaikinRadioGroup.prototype, "_radios", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "vertical",
+    isAllowedValue: ddsProperty.oneOf([
+      "horizontal",
+      "vertical"
+    ])
+  })
 ], exports.DaikinRadioGroup.prototype, "orientation", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinRadioGroup.prototype, "name", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String })
 ], exports.DaikinRadioGroup.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadioGroup.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadioGroup.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.state()

package/dist/cjs-dev/components/radio-group/daikin-radio-group.d.cts

@@ -37,6 +37,8 @@ export declare class DaikinRadioGroup extends DDSElement {
     private readonly _radios;
     /**
      * Specify the radio group orientation
+     *
+     * @default "vertical"
      */
     orientation: RadioGroupProps["orientation"];
     /**
@@ -46,7 +48,7 @@ export declare class DaikinRadioGroup extends DDSElement {
     name: string;
     /**
      * `value` of the currently selected radio.
-     * see {@link DaikinRadio.value}
+     * See {@link DaikinRadio.value}.
      */
     value: string;
     /**

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

@@ -5,6 +5,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");
@@ -164,13 +165,13 @@ exports.DaikinSelect.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSelect.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSelect.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSelect.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "select" })

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ref_js = require("lit/directives/ref.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");
@@ -71,11 +72,7 @@ const cvaSliderTrack = classVarianceAuthority.cva(
 exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement {
   constructor() {
     super();
-    this.min = "1";
-    this.max = "100";
-    this.step = "1";
     this.disabled = false;
-    this.sliderAriaLabel = "slider";
     this._dragging = false;
     this._sliderRef = ref_js.createRef();
     this._thumbRef = ref_js.createRef();
@@ -244,19 +241,24 @@ exports.DaikinSlider.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "0" })
 ], exports.DaikinSlider.prototype, "min", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "100" })
 ], exports.DaikinSlider.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "1" })
 ], exports.DaikinSlider.prototype, "step", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSlider.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "slider-aria-label" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "slider-aria-label",
+    fallbackValue: "slider"
+  })
 ], exports.DaikinSlider.prototype, "sliderAriaLabel", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -4,6 +4,13 @@ import { DDSFormElement } from "../../base/index.cjs";
  * The slider component is a control that allows users to input numerical values within a specific range intuitively.
  * It functions similarly to the HTML `<input type="range">` tag, allows you to set the range of values.
  *
+ * @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 retargeted event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="range">` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
  *
@@ -21,14 +28,20 @@ export declare class DaikinSlider extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The smallest value in the range of permitted values.
+     *
+     * @default "0"
      */
     min: string;
     /**
      * The largest value in the range of permitted values.
+     *
+     * @default "100"
      */
     max: string;
     /**
      * The step attribute is a number that specifies the granularity that the value must adhere to.
+     *
+     * @default "1"
      */
     step: string;
     /**
@@ -38,6 +51,8 @@ export declare class DaikinSlider extends DDSFormElement {
     /**
      * The aria-label of the slider.
      * You should specify this value based on the slider's use case, such as "air conditioner temperature".
+     *
+     * @default "slider"
      */
     sliderAriaLabel: string;
     constructor();