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

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

@@ -86,6 +86,10 @@ declare const icons: {
         class: string;
         color: null;
     };
+    download: {
+        class: string;
+        color: null;
+    };
 };
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
@@ -95,47 +99,44 @@ declare const cvaIcon: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
 /**
- * The icon component is a versatile UI element used to display small graphical symbols or images that represent actions, objects, or concepts within an application.
- * The icon set is provided by DDS, and it also supports custom icons via the icon registry.
+ * A versatile UI element that displays small graphical symbols or images representing actions, objects, or concepts within an application.
+ * The component uses the predefined DDS icon set by default but also supports custom icons via the icon registry.
  *
- * For static DDS icons, the component uses the predefined icon set.
- * For custom icons, it can dynamically load icons from various sources using the icon registry.
+ * Predefined DDS icons are automatically rendered using optimized CSS classes.
+ * Custom icons can be dynamically loaded from various sources using the icon registry.
  *
- * This component supports multiple rendering modes for enhanced security when using custom icons:
+ * If an icon cannot be loaded, a blank space is displayed.
+ * In development builds, warnings are logged to the console for debugging.
  *
- * - **mask** (default for custom icons): Uses CSS mask-image for secure rendering with color customization
- * - **background**: Uses CSS background-image for secure rendering without color customization
- * - **inline**: Traditional SVG rendering using innerHTML (use with caution)
- * - **static** (for DDS icons): Uses predefined CSS classes from the DDS icon set
+ * ### Using Custom Icons
  *
- * **Security Note**: When using custom icons, especially with `inline` mode, ensure that the SVG content comes from trusted sources only.
- * Untrusted input may lead to XSS vulnerabilities. Consider using `mask` or `background` modes for better security.
+ * Custom icons must be registered with the icon registry before use.
+ * They can be registered individually or in bulk using pattern matching, with support for multiple rendering modes.
  *
- * To use a custom color, set the `color` property to `"current"` and apply the desired color using the CSS `color` property.
- * This works out-of-the-box for mask and static modes, and can be achieved for inline mode with additional effort. The background mode does not support custom colors.
+ * #### Rendering Modes
  *
- * If an icon cannot be loaded, a blank space will be displayed.
- * In development builds, warnings will be shown in the console for debugging.
+ * Custom icons support multiple rendering modes, each with different characteristics:
  *
- * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be automatically overwritten. This may also be set by a parent component such as `daikin-icon-button`.
+ * - **mask** (default): Uses CSS `mask-image` to render the icon.
+ *   - Secure rendering method (SVG is converted to data URL).
+ *   - Supports color customization via the `color` property or CSS `color`.
+ *   - Best choice for most use cases with custom icons.
+ * - **background**: Uses CSS `background-image` to render the icon.
+ *   - Secure rendering method (SVG is converted to data URL).
+ *   - Does NOT support color customization; the icon is rendered with its original colors.
+ *   - Use this mode when you need to preserve the original colors of multi-color SVG icons.
+ * - **inline**: Traditional SVG rendering using `innerHTML`.
+ *   - Renders the raw SVG markup directly in the DOM.
+ *   - Supports color customization if the SVG uses `currentColor` or inheritable properties.
+ *   - ⚠️ **Security Warning**: Only use this mode with SVG content from trusted sources. Untrusted SVG content may lead to XSS vulnerabilities.
+ *   - Use `mask` or `background` modes for better security.
  *
- * @example
+ * #### Registration Examples
  *
  * ```js
- * import "@daikin-oss/design-system-web-components/components/icon/index.js";
- * ```
- *
- * ```html
- * <!-- Using a DDS static icon -->
- * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
- *
- * <!-- Using a custom icon -->
- * <daikin-icon icon="my-custom-icon" color="black" size="m"></daikin-icon>
- *
- * <script>
  * import { iconRegistry } from "@daikin-oss/design-system-web-components/icon-registry.js";
  *
- * // Register with mask mode for secure rendering
+ * // Register a single custom icon using mask mode for secure rendering and color customization
  * iconRegistry.register({
  *   name: "my-custom-icon",
  *   svg: {
@@ -145,39 +146,87 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  *   },
  * });
  *
- * // Register dynamic custom icons
+ * // Register multiple custom icons dynamically using pattern matching
  * iconRegistry.register({
- *   match: /^custom-/,
+ *   match: /^dynamic-custom-/,
  *   async fetch: (name) => {
  *     const response = await fetch(`/path/to/custom/icons/${name}.svg`);
  *     if (!response.ok) {
  *       throw new Error(`Failed to load custom icon "${name}"`);
  *     }
+ *     // You can return just the SVG content as a string (defaults to mask mode)
+ *     // Or return an object with `svg`, `defaultColor` (optional), and `mode` (optional) for more control
  *     return response.text();
  *   },
  * });
- * </script>
+ * ```
+ *
+ * Once registered, you can use your custom icons in components:
+ *
+ * ```html
+ * <daikin-icon icon="my-custom-icon" color="current" size="m"></daikin-icon>
+ * <daikin-icon icon="dynamic-custom-icon-123" color="current" size="m"></daikin-icon>
+ * ```
+ *
+ * ### Changing Icon Color
+ *
+ * To use a custom color, set the `color` property to `"current"` and apply the desired color using the CSS `color` property:
+ *
+ * ```html
+ * <daikin-icon icon="information" color="current" style="color: red;"></daikin-icon>
+ * <!-- or you can inherit the color from a parent element -->
+ * <div style="color: blue;">
+ *   <daikin-icon icon="information" color="current"></daikin-icon>
+ * </div>
+ * ```
+ *
+ * This behavior is supported natively for DDS icons and `mask` mode (the default for custom icons).
+ * In `inline` mode, color inheritance works only if the SVG uses `currentColor` or inheritable properties.
+ * Note that `background` mode does not support custom colors.
+ *
+ * @cssprop [--ddc-icon-size] - The size of the icon. If you set a value other than "current" for the `size` property, this will be automatically overwritten.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/icon/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- Using a DDS static icon -->
+ * <daikin-icon icon="information" color="current" size="m"></daikin-icon>
+ *
+ * <!-- Using a custom icon -->
+ * <daikin-icon icon="my-custom-icon" color="current" size="m"></daikin-icon>
  * ```
  */
 export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify icon registry instance.
-     * Default is the global icon registry.
+     * The icon registry instance to use.
+     * Defaults to the global icon registry.
      */
     registry: IconRegistry;
     /**
-     * Specify the name of the icon.
+     * The name of the icon to display.
      * Can be a static DDS icon name or a custom icon name registered in the icon registry.
      */
-    icon: string | null;
+    icon: string;
     /**
-     * Specify icon color
+     * The color of the icon.
+     * Use `"current"` for most cases.
+     *
+     * **This property will be removed in a future release.**
+     * To prepare for this change, start using `color="current"` and set icon colors via the CSS `color` property instead of using predefined color values.
+     *
+     * @default "default"
      */
     color: IconVariantProps["color"];
     /**
-     * Specify the size of the icon.
-     * If "current" is set, `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by the parent component such as `daikin-icon-button`.
+     * The size of the icon.
+     * If set to "current", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.
+     *
+     * @default "current"
      */
     size: "s" | "m" | "l" | "xl" | "current";
     private _iconData;

package/dist/cjs/components/icon/icons.json.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null }, "notification": { "class": "i-daikin-notification", "color": null }, "neutral": { "class": "i-daikin-neutral", "color": null } };
+const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null }, "notification": { "class": "i-daikin-notification", "color": null }, "neutral": { "class": "i-daikin-neutral", "color": null }, "download": { "class": "i-daikin-download", "color": null } };
 const iconsJson = {
   icons
 };

package/dist/cjs/components/icon/icons.json.d.cts

@@ -83,6 +83,10 @@ declare const _default: {
     "neutral": {
       "class": "i-daikin-neutral",
       "color": null
+    },
+    "download": {
+      "class": "i-daikin-download",
+      "color": null
     }
   }
 }

package/dist/cjs/components/icon-button/daikin-icon-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");
@@ -80,11 +81,8 @@ const cvaIconButton = classVarianceAuthority.cva(
 exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSFormSubmitElement {
   constructor() {
     super();
-    this.variant = "fill";
-    this.color = "default";
     this.disabled = false;
     this.href = null;
-    this.type = "button";
     this.buttonAriaLabel = null;
     this.buttonRole = null;
     this.buttonAriaHaspopup = null;
@@ -111,6 +109,7 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
       return lit.html`<a
         class=${iconButtonCN}
         href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
         role=${ifDefined_js.ifDefined(
         this.buttonRole ?? (linkDisabled ? "link" : void 0)
       )}
@@ -124,10 +123,11 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
       <button
         class=${iconButtonCN}
         type=${this.type}
+        tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
         aria-label=${this.buttonAriaLabel ?? ""}
         ?disabled=${this.disabled}
-        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup ?? void 0)}
-        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded ?? void 0)}
+        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup)}
       >
         <slot class="icon-size-full"></slot>
       </button>
@@ -150,42 +150,85 @@ exports.DaikinIconButton.styles = lit.css`
       width: var(--ddc-icon-button-size, 2rem);
       height: var(--ddc-icon-button-size, 2rem);
     }
+
     :host([size="s"]) {
       --ddc-icon-button-size: 2rem; /* 32px */
     }
+
     :host([size="m"]) {
       --ddc-icon-button-size: 3rem; /* 48px */
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "fill",
+    isAllowedValue: ddsProperty.oneOf([
+      "outline",
+      "fill",
+      "ghost"
+    ])
+  })
 ], exports.DaikinIconButton.prototype, "variant", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: ddsProperty.oneOf([
+      "default",
+      "neutral",
+      "danger"
+    ])
+  })
 ], exports.DaikinIconButton.prototype, "color", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinIconButton.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinIconButton.prototype, "href", 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.DaikinIconButton.prototype, "type", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "button-aria-label" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-label" })
 ], exports.DaikinIconButton.prototype, "buttonAriaLabel", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "button-role" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-role" })
 ], exports.DaikinIconButton.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.DaikinIconButton.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.DaikinIconButton.prototype, "buttonAriaExpanded", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: Number,
+    reflect: true,
+    attribute: "button-tabindex",
+    fallbackValue: 0
+  })
+], exports.DaikinIconButton.prototype, "buttonTabIndex", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "s",
+    isAllowedValue: ddsProperty.oneOf(["s", "m"])
+  })
 ], exports.DaikinIconButton.prototype, "size", 2);
 __decorateClass([
   decorators_js.query("button")

package/dist/cjs/components/icon-button/daikin-icon-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 cvaIconButton: (props?: ({
-    color?: "danger" | "default" | "neutral" | null | undefined;
+    color?: "default" | "danger" | "neutral" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
@@ -14,6 +14,9 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * - About fill color - The icon should be able to accept the CSS `color` property.
  * - About size - The recommended width of the icon is 24px * 24px. Please make sure that the size of the icon you insert conforms to this, or please set the `width` and `height` properties of the icon to 100%.
  *
+ * @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 `<button>` element. Suppressed if `disabled` is true,
  *
  * @slot - A slot for an icon. Place a daikin-icon element or something similar.
@@ -36,10 +39,14 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
+     *
+     * @default "fill"
      */
     variant: IconButtonVariantProps["variant"];
     /**
      * Color of the button.
+     *
+     * @default "default"
      */
     color: IconButtonVariantProps["color"];
     /**
@@ -55,6 +62,8 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
     /**
      * Type of the button.
      * If `"link"` is specified, the button will be rendered as an `<a>` element.
+     *
+     * @default "button"
      */
     type: "button" | "submit" | "reset" | "link";
     /**
@@ -74,13 +83,18 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
      * The aria-expanded of icon 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;
     /**
      * Size of the button.
      * - `s`: 32px * 32px
      * - `m`: 48px * 48px
-     *
-     * Default is `s`.
      */
     size: "s" | "m";
     private _button;

package/dist/cjs/components/inline-notification/daikin-inline-notification.cjs

@@ -1,9 +1,10 @@
 "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 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,11 +20,90 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+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", "justify-between"], {
+  variants: {
+    layout: {
+      horizontal: ["gap-3", "overflow-hidden"],
+      vertical: ["items-stretch", "flex-col", "gap-1"]
+    }
+  }
+});
+const cvaTextContent = classVarianceAuthority.cva(["flex"], {
+  variants: {
+    layout: {
+      horizontal: ["flex-row", "gap-3"],
+      vertical: ["flex-col", "gap-1"]
+    }
+  }
+});
+const TITLE_CLASS_NAME = classVarianceAuthority.cva([
+  "slotted:inline-block",
+  "font-bold",
+  "leading-[130%]",
+  "slotted:natural-break"
+])();
+const DESCRIPTION_CLASS_NAME = classVarianceAuthority.cva([
+  "inline-block",
+  "leading-[130%]",
+  "natural-break"
+])();
 exports.DaikinInlineNotification = class DaikinInlineNotification extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.status = "positive";
-    this.layout = "horizontal";
     this.closable = false;
     this.timestamp = null;
   }
@@ -37,11 +117,13 @@ exports.DaikinInlineNotification = class DaikinInlineNotification extends ddsEle
   render() {
     const formattedTimestamp = this.timestamp ? notificationCommon.formatDate(this.timestamp) : null;
     return lit.html`<aside
-      class=${notificationCommon.cvaContainer({ variant: "inline", status: this.status })}
+      class=${cvaContainer({ variant: "inline", status: this.status })}
     >
-      <div class=${notificationCommon.cvaContent({ layout: this.layout })}>
-        <slot class=${notificationCommon.cvaTitle({ layout: this.layout })} name="title"></slot>
-        <slot class=${notificationCommon.cvaDescription({ layout: this.layout })}></slot>
+      <div class=${cvaContent({ layout: this.layout })}>
+        <div class=${cvaTextContent({ layout: this.layout })}>
+          <slot class=${TITLE_CLASS_NAME} name="title"></slot>
+          <slot class=${DESCRIPTION_CLASS_NAME}></slot>
+        </div>
         ${formattedTimestamp ? lit.html`<span class=${notificationCommon.cvaTimestamp({ layout: this.layout })}
               >${formattedTimestamp}</span
             >` : lit.nothing}
@@ -72,16 +154,35 @@ exports.DaikinInlineNotification.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "positive",
+    isAllowedValue: ddsProperty.oneOf([
+      "positive",
+      "negative",
+      "warning",
+      "alarm",
+      "information"
+    ])
+  })
 ], exports.DaikinInlineNotification.prototype, "status", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "horizontal",
+    isAllowedValue: ddsProperty.oneOf([
+      "horizontal",
+      "vertical"
+    ])
+  })
 ], exports.DaikinInlineNotification.prototype, "layout", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinInlineNotification.prototype, "closable", 2);
 __decorateClass([
-  decorators_js.property({ type: Object, reflect: true, attribute: false })
+  ddsProperty.property({ type: Object, reflect: true, attribute: false })
 ], exports.DaikinInlineNotification.prototype, "timestamp", 2);
 exports.DaikinInlineNotification = __decorateClass([
   decorators.ddsElement("daikin-inline-notification")

package/dist/cjs/components/inline-notification/daikin-inline-notification.d.cts

@@ -30,10 +30,14 @@ export declare class DaikinInlineNotification extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Status of the notification.
+     *
+     * @default "positive"
      */
     status: ToastNotificationVariantProps["status"];
     /**
      * Specify how to arrange the elements.
+     *
+     * @default "horizontal"
      */
     layout: ToastNotificationVariantProps["layout"];
     /**

package/dist/cjs/components/input-group/daikin-input-group.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");
@@ -119,7 +120,7 @@ exports.DaikinInputGroup = class DaikinInputGroup extends ddsElement.DDSElement
         case "textareaLimitExceedError":
           return lit.html`<daikin-status-message
             status="negative"
-            message-role="alert"
+            status-message-role="alert"
             size="small"
           >
             ${helperText2}
@@ -171,25 +172,25 @@ exports.DaikinInputGroup.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "label", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "helper", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinInputGroup.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinInputGroup.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true, attribute: "textarea-max-count" })
+  ddsProperty.property({ type: Number, reflect: true, attribute: "textarea-max-count" })
 ], exports.DaikinInputGroup.prototype, "textareaMaxCount", 2);
 __decorateClass([
-  decorators_js.property({
+  ddsProperty.property({
     type: String,
     reflect: true,
     attribute: "textarea-limit-exceed-error"