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

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

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

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

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

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

@@ -19,6 +19,8 @@ import { DDSElement } from "../../base/index.js";
  * @slot left-icon - An optional slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  * @slot right-icon - An optional slot for an icon to be placed to the left of the text. Ignored if `action` slot is used. Place `daikin-icon` or something similar.
  *
+ * @csspart item - CSS styles applied to the `item` part target the internal wrapper element (`<a>`, `<button>`, or `<span>`). For instance, setting `cursor: grab;` changes the hover cursor, signaling that the list item is draggable.
+ *
  * @example
  *
  * ```js
@@ -36,6 +38,8 @@ export declare class DaikinListItem extends DDSElement {
      * - `button` (default): The list item will be rendered as a `<button>` element.
      * - `link`: The list item will be rendered as an `<a>` element.
      * - `text`: The list item will be rendered as a `<span>` element. Use this if the list itself has no action.
+     *
+     * @default "button"
      */
     type: "button" | "link" | "text";
     /**

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

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

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

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

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

@@ -32,11 +32,15 @@ export declare class DaikinLogo extends DDSElement {
     target: string | null;
     /**
      * Provides an accessible name of the logo.
+     *
+     * @default "Logo of Daikin"
      */
     logoAriaLabel: string | null;
     /**
      * Specify the the logo mode.
      * Notice: Allow the use of a negative logo only when the positive logo is too close to the background to be legible.
+     *
+     * @default "positive"
      */
     mode: "positive" | "negative";
     private _focusableElement;

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

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -49,23 +50,20 @@ let DaikinLogo = class extends DDSElement {
     super(...arguments);
     this.href = null;
     this.target = null;
-    this.logoAriaLabel = "Logo of Daikin";
-    this.mode = "positive";
   }
   render() {
     if (!this.href) {
       return html`<span
         class=${cvaWrapper({ type: "logo", mode: this.mode })}
         role="img"
-        aria-label=${ifDefined(this.logoAriaLabel ?? void 0)}
-        alt=${ifDefined(this.logoAriaLabel ?? void 0)}
+        aria-label=${ifDefined(this.logoAriaLabel)}
       ></span>`;
     } else {
       return html`<a
         class=${cvaWrapper({ type: "link", mode: this.mode })}
-        aria-label=${ifDefined(this.logoAriaLabel ?? void 0)}
+        aria-label=${ifDefined(this.logoAriaLabel)}
         href=${ifDefined(this.href)}
-        target=${ifDefined(this.target ?? void 0)}
+        target=${ifDefined(this.target)}
       ></a>`;
     }
   }
@@ -94,10 +92,20 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinLogo.prototype, "target", 2);
 __decorateClass([
-  property({ type: String, reflect: true, attribute: "logo-aria-label" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "logo-aria-label",
+    fallbackValue: "Logo of Daikin"
+  })
 ], DaikinLogo.prototype, "logoAriaLabel", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "positive",
+    isAllowedValue: oneOf(["positive", "negative"])
+  })
 ], DaikinLogo.prototype, "mode", 2);
 __decorateClass([
   query("a")

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

@@ -1,5 +1,9 @@
 import { PropertyValues } from 'lit';
 import { DDSElement } from "../../base/index.js";
+import { DaikinAvatar } from "../avatar/index.js";
+import { DaikinBreadcrumbItem } from "../breadcrumb-item/index.js";
+import { DaikinButton } from "../button/index.js";
+import { DaikinIconButton } from "../icon-button/index.js";
 /**
  * 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.js";
  *
  * @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,6 +48,8 @@ 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" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     /**
@@ -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.

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

@@ -1,10 +1,11 @@
 import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements, property } from "lit/decorators.js";
+import { queryAssignedElements } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.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 { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
@@ -12,6 +13,7 @@ import { isClient } from "../../is-client.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { reDispatch } from "../../utils/re-dispatch.js";
 import { DaikinAvatar } from "../avatar/daikin-avatar.js";
+import { DaikinBreadcrumbItem } from "../breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "../button/daikin-button.js";
 import { DaikinIconButton } from "../icon-button/daikin-icon-button.js";
 import DaikinListItem from "../list-item/daikin-list-item.js";
@@ -42,10 +44,7 @@ const DEFAULT_MENU_SPACING = "0px";
 let DaikinMenu = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.placement = "bottom";
     this.open = false;
-    this.popoverValue = "auto";
-    this.trigger = "click";
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient ? window.getComputedStyle(this) : null;
   }
@@ -60,6 +59,25 @@ let DaikinMenu = class extends DDSElement {
       initialValue: "0px"
     });
   }
+  /**
+   * 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() {
+    for (const control of this._controls) {
+      if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button" || control instanceof DaikinAvatar && control.type === "button" || control instanceof DaikinBreadcrumbItem) {
+        return control;
+      }
+    }
+    return 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.
@@ -83,9 +101,9 @@ let DaikinMenu = class extends DDSElement {
   _reflectDynamicProperties() {
     for (const control of this._controls) {
       if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") {
-        control.buttonAriaExpanded = this.open;
+        control.buttonAriaExpanded = `${this.open}`;
       } else if (control instanceof DaikinAvatar && control.type === "button") {
-        control.avatarAriaExpanded = this.open;
+        control.avatarAriaExpanded = `${this.open}`;
       }
     }
   }
@@ -112,7 +130,6 @@ let DaikinMenu = class extends DDSElement {
    * 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.
    */
   _handleClick(event) {
-    event.preventDefault();
     if (event.target instanceof DaikinListItem && !event.target.disabled && this.popoverValue === "auto") {
       this.open = false;
     }
@@ -134,12 +151,7 @@ let DaikinMenu = class extends DDSElement {
     return html`<div
       class="relative inline-block text-ddt-color-common-text-primary font-daikinSerif"
     >
-      <div
-        id="trigger"
-        aria-labelledby="trigger"
-        aria-describedby="menu"
-        ${this._autoUpdateController.refReference()}
-      >
+      <div id="trigger" ${this._autoUpdateController.refReference()}>
         <slot
           @click=${this._handleTriggerClick}
           @touchend=${this._handleTouchEnd}
@@ -147,7 +159,6 @@ let DaikinMenu = class extends DDSElement {
       </div>
       <span
         id="menu"
-        aria-labelledby="menu"
         part="menu"
         class=${cvaMenu()}
         popover=${this.popoverValue}
@@ -194,25 +205,53 @@ __decorateClass([
 ], DaikinMenu.prototype, "_lists", 2);
 __decorateClass([
   queryAssignedElements({
-    selector: "daikin-button,daikin-icon-button,daikin-avatar"
+    selector: "daikin-button,daikin-icon-button,daikin-avatar,daikin-breadcrumb-item"
   })
 ], DaikinMenu.prototype, "_controls", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "bottom",
+    isAllowedValue: oneOf([
+      "top",
+      "top-start",
+      "top-end",
+      "bottom",
+      "bottom-start",
+      "bottom-end",
+      "left",
+      "left-start",
+      "left-end",
+      "right",
+      "right-start",
+      "right-end"
+    ])
+  })
 ], DaikinMenu.prototype, "placement", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinMenu.prototype, "open", 2);
 __decorateClass([
-  property({ type: String, attribute: "popover-value" })
+  property({
+    type: String,
+    attribute: "popover-value",
+    reflect: true,
+    fallbackValue: "auto",
+    isAllowedValue: oneOf(["auto", "manual"])
+  })
 ], DaikinMenu.prototype, "popoverValue", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "click",
+    isAllowedValue: oneOf(["click", "manual"])
+  })
 ], DaikinMenu.prototype, "trigger", 2);
 DaikinMenu = __decorateClass([
   ddsElement("daikin-menu")
 ], DaikinMenu);
-DaikinMenu.registerCSSCustomProperties();
 export {
   DaikinMenu
 };

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

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

@@ -1,10 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.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 { FocusTrapController } from "../../controllers/focus-trap.js";
@@ -56,7 +56,6 @@ let DaikinModal = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.open = false;
-    this.modalRole = "dialog";
     this.modalAriaLabel = null;
     this.persistent = false;
     this._handleClose = () => {
@@ -101,7 +100,13 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinModal.prototype, "open", 2);
 __decorateClass([
-  property({ type: String, reflect: true, attribute: "modal-role" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "modal-role",
+    fallbackValue: "dialog",
+    isAllowedValue: oneOf(["dialog", "alertdialog"])
+  })
 ], DaikinModal.prototype, "modalRole", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "modal-aria-label" })

package/dist/es/components/modal-footer/daikin-modal-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";

package/dist/es/components/modal-header/daikin-modal-header.js

@@ -1,9 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.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";
@@ -53,7 +53,7 @@ let DaikinModalHeader = class extends DDSElement {
   }
   render() {
     return 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>

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

@@ -1,10 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { 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";

package/dist/es/components/progress-bar/daikin-progress-bar.d.ts

@@ -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/es/components/progress-bar/daikin-progress-bar.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";
@@ -96,11 +96,8 @@ const cvaHelper = cva(["text-sm", "leading-[130%]"], {
 let DaikinProgressBar = class extends 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() {
@@ -156,10 +153,25 @@ DaikinProgressBar.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "inprogress",
+    isAllowedValue: oneOf([
+      "inprogress",
+      "completed",
+      "indeterminate",
+      "error"
+    ])
+  })
 ], DaikinProgressBar.prototype, "variant", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: oneOf(["medium", "large"])
+  })
 ], DaikinProgressBar.prototype, "size", 2);
 __decorateClass([
   property({ type: Number })
@@ -168,7 +180,7 @@ __decorateClass([
   property({ type: Number })
 ], DaikinProgressBar.prototype, "max", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinProgressBar.prototype, "helper", 2);
 DaikinProgressBar = __decorateClass([
   ddsElement("daikin-progress-bar")