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

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

@@ -13,68 +13,6 @@ function formatDate(date) {
     dateStyle: "medium"
   });
 }
-const cvaContainer = classVarianceAuthority.cva(
-  [
-    "flex",
-    "items-center",
-    "gap-3",
-    "w-full",
-    "h-full",
-    "text-ddt-color-common-text-primary",
-    "bg-ddt-color-common-background-default",
-    "p-4",
-    "overflow-hidden",
-    "font-daikinSerif",
-    "transition",
-    "box-border",
-    "before:size-6",
-    "before:flex-none"
-  ],
-  {
-    variants: {
-      variant: {
-        toast: [
-          "rounded-lg",
-          "border",
-          "border-ddt-color-divider",
-          "translate-x-[--move-offset-x,0]",
-          "translate-y-[--move-offset-y,0]",
-          "opacity-[--opacity,1]",
-          "[pointer-events:var(--pointer-events,auto)]",
-          "[transition-duration:var(--transition-duration,var(--ddc-toast-animation-duration,0ms))]"
-        ],
-        inline: []
-      },
-      status: {
-        positive: [
-          "before:text-ddt-color-common-success",
-          "before:i-daikin-success"
-        ],
-        negative: [
-          "before:text-ddt-color-common-danger-default",
-          "before:i-daikin-error"
-        ],
-        warning: [
-          "before:text-ddt-color-common-warning",
-          "before:i-daikin-warning"
-        ],
-        alarm: ["before:text-ddt-color-common-alarm", "before:i-daikin-alarm"],
-        information: [
-          "before:text-ddt-color-common-information",
-          "before:i-daikin-information"
-        ]
-      }
-    }
-  }
-);
-const cvaContent = classVarianceAuthority.cva(["flex", "items-center", "w-full"], {
-  variants: {
-    layout: {
-      horizontal: ["gap-3", "overflow-hidden"],
-      vertical: ["items-stretch", "flex-col", "gap-1"]
-    }
-  }
-});
 const cvaTimestamp = classVarianceAuthority.cva(
   [
     "text-ddt-color-common-text-secondary",
@@ -91,38 +29,6 @@ const cvaTimestamp = classVarianceAuthority.cva(
     }
   }
 );
-const cvaTitle = classVarianceAuthority.cva(
-  ["slotted:inline-block", "font-bold", "leading-[130%]"],
-  {
-    variants: {
-      layout: {
-        vertical: [],
-        horizontal: [
-          "slotted:whitespace-nowrap",
-          "slotted:overflow-hidden",
-          "slotted:overflow-ellipsis"
-        ]
-      }
-    }
-  }
-);
-const cvaDescription = classVarianceAuthority.cva(["inline-block", "leading-[130%]"], {
-  variants: {
-    layout: {
-      vertical: [],
-      horizontal: [
-        "whitespace-nowrap",
-        "overflow-hidden",
-        "overflow-ellipsis",
-        "flex-1"
-      ]
-    }
-  }
-});
 exports.TOAST_ANIMATION_DURATION = TOAST_ANIMATION_DURATION;
-exports.cvaContainer = cvaContainer;
-exports.cvaContent = cvaContent;
-exports.cvaDescription = cvaDescription;
 exports.cvaTimestamp = cvaTimestamp;
-exports.cvaTitle = cvaTitle;
 exports.formatDate = formatDate;

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

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

package/dist/es/base/dds-element.d.ts

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

package/dist/es/base/dds-element.js

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

package/dist/es/base/dds-form-element.d.ts

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

package/dist/es/base/dds-form-element.js

@@ -1,5 +1,5 @@
-import { property } from "lit/decorators.js";
 import { DDSElement } from "./dds-element.js";
+import { property } from "./dds-property.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -12,7 +12,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 const _DDSFormElement = class _DDSFormElement extends DDSElement {
   constructor() {
     super();
-    this.name = "";
     this.value = "";
     this.internals = this.attachInternals();
   }
@@ -71,13 +70,18 @@ const _DDSFormElement = class _DDSFormElement extends DDSElement {
 _DDSFormElement.formAssociated = true;
 let DDSFormElement = _DDSFormElement;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DDSFormElement.prototype, "name");
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String })
 ], DDSFormElement.prototype, "value");
 __decorateClass([
-  property({ type: String, reflect: true, attribute: "form" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "form",
+    fallbackValue: ""
+  })
 ], DDSFormElement.prototype, "formAttr");
 const _DDSFormSubmitElement = class _DDSFormSubmitElement extends DDSElement {
   constructor() {
@@ -131,7 +135,12 @@ const _DDSFormSubmitElement = class _DDSFormSubmitElement extends DDSElement {
 _DDSFormSubmitElement.formAssociated = true;
 let DDSFormSubmitElement = _DDSFormSubmitElement;
 __decorateClass([
-  property({ type: String, reflect: true, attribute: "form" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "form",
+    fallbackValue: ""
+  })
 ], DDSFormSubmitElement.prototype, "formAttr");
 export {
   DDSFormElement,

package/dist/es/base/dds-property.d.ts

@@ -0,0 +1,92 @@
+import { PropertyDeclaration } from 'lit';
+/**
+ * Enhanced property declaration for DDS components that extends Lit's PropertyDeclaration
+ * with additional features for fallback values and property validation.
+ *
+ * The type ensures type safety with three possible configurations:
+ *
+ * 1. Standard property without fallback or validation
+ * 2. Reflected property with fallback value
+ * 3. Reflected property with both fallback value and validation function
+ *
+ * @template Type - The type of the property value
+ * @template TypeHint - Optional type hint for property conversion
+ *
+ * @example
+ * ```typescript
+ * // Property with fallback value
+ * @property({ reflect: true, fallbackValue: "default" })
+ * key!: string;
+ *
+ * // Property with validation
+ * @property({
+ *   reflect: true,
+ *   fallbackValue: 0,
+ *   isAllowedValue: (v) => v >= 0
+ * })
+ * count!: number;
+ * ```
+ */
+export type DDSPropertyDeclaration<Type = unknown, TypeHint = unknown> = PropertyDeclaration<Type, TypeHint> & ({
+    /** No fallback value specified */
+    fallbackValue?: undefined;
+    /** No validation function specified */
+    isAllowedValue?: undefined;
+} | {
+    /** Property reflects to attribute (required for fallback) */
+    reflect: true;
+    /** Default value to use when property is undefined */
+    fallbackValue: Type;
+    /** No validation function specified */
+    isAllowedValue?: undefined;
+} | {
+    /** Property reflects to attribute (required for fallback) */
+    reflect: true;
+    /** Default value to use when property is undefined */
+    fallbackValue: Type;
+    /** Function to validate if a value is allowed for this property */
+    isAllowedValue: (value: Type) => boolean;
+});
+/**
+ * Property decorator for DDS components that enhances Lit's `@property` decorator
+ * with additional features like fallback values and property validation.
+ *
+ * This decorator should be used instead of Lit's `@property` for DDS components
+ * that need enhanced property handling capabilities.
+ *
+ * @param options - DDS property declaration options
+ * @returns Property decorator function
+ *
+ * @example
+ * ```typescript
+ * class MyComponent extends DDSElement {
+ *   // Basic property
+ *   @property({ type: String })
+ *   label = "";
+ *
+ *   // Property with fallback value
+ *   @property({ reflect: true, fallbackValue: "default" })
+ *   value!: string;
+ *
+ *   // Property with validation
+ *   @property({
+ *     reflect: true,
+ *     fallbackValue: 0,
+ *     isAllowedValue: (v) => v >= 0
+ *   })
+ *   count!: number;
+ * }
+ * ```
+ */
+export declare function property(options?: DDSPropertyDeclaration): PropertyDecorator;
+/**
+ * Creates a validation function that checks if a value is one of the allowed values.
+ *
+ * This helper function is commonly used with the `isAllowedValue` option in property
+ * declarations to restrict property values to a predefined set of allowed values.
+ *
+ * @template T - The type of the allowed values
+ * @param values - Array of allowed values
+ * @returns Validation function that returns true if the value is in the allowed values array
+ */
+export declare function oneOf<T>(values: readonly T[]): (value: unknown) => boolean;

package/dist/es/base/dds-property.js

@@ -0,0 +1,11 @@
+import { property as property$1 } from "lit/decorators.js";
+function property(options) {
+  return property$1(options);
+}
+function oneOf(values) {
+  return (value) => values.includes(value);
+}
+export {
+  oneOf,
+  property
+};

package/dist/es/base/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./dds-element.js";
 export * from "./dds-form-element.js";
+export * from "./dds-property.js";
 export * from "./decorators.js";
 export * from "./define.js";

package/dist/es/base/index.js

@@ -1,5 +1,6 @@
 import { DDSElement } from "./dds-element.js";
 import { DDSFormElement, DDSFormSubmitElement } from "./dds-form-element.js";
+import { oneOf, property } from "./dds-property.js";
 import { ddsElement } from "./decorators.js";
 import { defineDDSElement } from "./define.js";
 export {
@@ -7,5 +8,7 @@ export {
   DDSFormElement,
   DDSFormSubmitElement,
   ddsElement,
-  defineDDSElement
+  defineDDSElement,
+  oneOf,
+  property
 };

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

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

@@ -1,9 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, 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";
@@ -26,7 +26,7 @@ const cvaSummary = cva(
     "w-full",
     "min-h-12",
     "p-3",
-    "break-all",
+    "natural-break",
     "text-left",
     "focus-visible:outline",
     "focus-visible:outline-2",
@@ -70,7 +70,6 @@ let DaikinAccordionItem = class extends DDSElement {
     super(...arguments);
     this._summaryRef = createRef();
     this._contentRef = createRef();
-    this.name = "";
     this.open = false;
     this.disabled = false;
   }
@@ -131,7 +130,7 @@ let DaikinAccordionItem = class extends DDSElement {
       >
         <div class="overflow-hidden">
           <div class="pt-2 px-3 pb-3">
-            <slot class="slotted:break-all"></slot>
+            <slot class="slotted:natural-break"></slot>
           </div>
         </div>
       </div>
@@ -174,7 +173,7 @@ DaikinAccordionItem.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinAccordionItem.prototype, "name", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

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

@@ -23,6 +23,8 @@ export declare class DaikinAvatar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Replace the wrapping element.
+     *
+     * @default "icon"
      */
     type: AvatarVariantProps["type"];
     /**
@@ -49,7 +51,7 @@ export declare class DaikinAvatar extends DDSElement {
      * The aria-expanded of avatar when `type="button"`.
      * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
      */
-    avatarAriaExpanded: boolean | null;
+    avatarAriaExpanded: "true" | "false" | "undefined" | null;
     private _focusableElement;
     constructor();
     render(): import('lit-html').TemplateResult<1>;

package/dist/es/components/avatar/daikin-avatar.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 { unsafeCSS, css, html, nothing } from "lit";
+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";
@@ -64,7 +65,6 @@ const cvaWrapper = cva(
 let DaikinAvatar = class extends DDSElement {
   constructor() {
     super();
-    this.type = "icon";
     this.href = null;
     this.alt = null;
     this.disabled = false;
@@ -87,7 +87,7 @@ let DaikinAvatar = class extends DDSElement {
       return html`<span
         class=${cvaWrapper({ type: "icon" })}
         role="figure"
-        aria-label=${ifDefined(this.alt ?? void 0)}
+        aria-label=${ifDefined(this.alt)}
       >
         ${icon}
       </span>`;
@@ -95,9 +95,9 @@ let DaikinAvatar = class extends DDSElement {
       return html`<button
         type="button"
         class=${cvaWrapper({ type: "button" })}
-        aria-label=${ifDefined(this.alt ?? void 0)}
-        aria-haspopup=${ifDefined(this.avatarAriaHaspopup ?? void 0)}
-        aria-expanded=${ifDefined(this.avatarAriaExpanded ?? void 0)}
+        aria-label=${ifDefined(this.alt)}
+        aria-haspopup=${ifDefined(this.avatarAriaHaspopup)}
+        aria-expanded=${ifDefined(this.avatarAriaExpanded)}
         ?disabled=${this.disabled}
       >
         ${icon}
@@ -106,10 +106,10 @@ let DaikinAvatar = class extends DDSElement {
       const linkDisabled = this.disabled || this.href == null;
       return html`<a
         class=${cvaWrapper({ type: "link" })}
-        role=${ifDefined(linkDisabled ? "link" : void 0)}
-        aria-label=${ifDefined(this.alt ?? void 0)}
-        href=${ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
-        aria-disabled=${ifDefined(linkDisabled ? "true" : void 0)}
+        role=${linkDisabled ? "link" : nothing}
+        aria-label=${ifDefined(this.alt)}
+        href=${ifDefined(!linkDisabled ? this.href : void 0)}
+        aria-disabled=${linkDisabled ? "true" : nothing}
       >
         ${icon}
       </a>`;
@@ -138,7 +138,12 @@ DaikinAvatar.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "icon",
+    isAllowedValue: oneOf(["button", "icon", "link"])
+  })
 ], DaikinAvatar.prototype, "type", 2);
 __decorateClass([
   property({ type: String, reflect: true })
@@ -153,7 +158,7 @@ __decorateClass([
   property({ type: String, reflect: true, attribute: "avatar-aria-haspopup" })
 ], DaikinAvatar.prototype, "avatarAriaHaspopup", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "avatar-aria-expanded" })
+  property({ type: String, reflect: true, attribute: "avatar-aria-expanded" })
 ], DaikinAvatar.prototype, "avatarAriaExpanded", 2);
 __decorateClass([
   query("a,button")