@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

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

@@ -1,23 +1,103 @@
 import { DDSElement } from "../../base/index.cjs";
+import { IconRegistry } from "../../icon-registry.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
-import { icons } from "./icons.json.cjs";
+declare const icons: {
+    "logo-positive": {
+        class: string;
+        color: null;
+    };
+    "logo-negative": {
+        class: string;
+        color: null;
+    };
+    alarm: {
+        class: string;
+        color: null;
+    };
+    close: {
+        class: string;
+        color: string;
+    };
+    information: {
+        class: string;
+        color: null;
+    };
+    error: {
+        class: string;
+        color: null;
+    };
+    success: {
+        class: string;
+        color: null;
+    };
+    warning: {
+        class: string;
+        color: null;
+    };
+    "pagination-chevron-left": {
+        class: string;
+        color: string;
+    };
+    "pagination-chevron-right": {
+        class: string;
+        color: string;
+    };
+    profile: {
+        class: string;
+        color: null;
+    };
+    "chevron-up": {
+        class: string;
+        color: null;
+    };
+    "chevron-down": {
+        class: string;
+        color: null;
+    };
+    "chevron-left": {
+        class: string;
+        color: null;
+    };
+    "chevron-right": {
+        class: string;
+        color: null;
+    };
+    sort: {
+        class: string;
+        color: null;
+    };
+};
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
 declare const cvaIcon: (props?: ({
-    icon?: string | number | null | undefined;
     color?: "current" | "default" | "black" | "white" | null | undefined;
+    mode?: "mask" | "background" | "inline" | "static" | null | undefined;
 } & 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.
+ * The icon set is provided by DDS, and it also supports custom icons via the icon registry.
  *
- * To use an arbitrary color, specify `"current"` for the `color` property and set the `color` CSS property to the color you want to use.
+ * 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.
  *
- * If you try to use an icon that does not exist, a blank space will be displayed.
- * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
+ * This component supports multiple rendering modes for enhanced security when using custom icons:
  *
- * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
+ * - **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
+ *
+ * **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.
+ *
+ * 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.
+ *
+ * If an icon cannot be loaded, a blank space will be displayed.
+ * In development builds, warnings will be shown in the console for debugging.
+ *
+ * @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`.
  *
  * @example
  *
@@ -26,15 +106,51 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * ```
  *
  * ```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
+ * iconRegistry.register({
+ *   name: "my-custom-icon",
+ *   svg: {
+ *     svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>',
+ *     mode: "mask",
+ *     defaultColor: "#0066cc"
+ *   },
+ * });
+ *
+ * // Register dynamic custom icons
+ * iconRegistry.register({
+ *   match: /^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}"`);
+ *     }
+ *     return response.text();
+ *   },
+ * });
+ * </script>
  * ```
  */
 export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify the name of the icon
+     * Specify icon registry instance.
+     * Default is the global icon registry.
+     */
+    registry: IconRegistry;
+    /**
+     * Specify the name of the icon.
+     * Can be a static DDS icon name or a custom icon name registered in the icon registry.
      */
-    icon: IconType | null;
+    icon: string | null;
     /**
      * Specify icon color
      */
@@ -44,6 +160,10 @@ export declare class DaikinIcon extends DDSElement {
      * 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`.
      */
     size: "s" | "m" | "l" | "xl" | "current";
+    private _iconData;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private loadIcon;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -1,4 +1,8 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const icons = { "alarm": { "class": "i-daikin-status-alarm", "color": null }, "close": { "class": "i-daikin-notification-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-status-information", "color": null }, "negative": { "class": "i-daikin-status-negative", "color": null }, "positive": { "class": "i-daikin-status-positive", "color": null }, "warning": { "class": "i-daikin-status-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" }, "error": { "class": "i-daikin-status-error", "color": "#FF4949" }, "cross": { "class": "i-daikin-cross", "color": null }, "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 } };
+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 } };
+const iconsJson = {
+  icons
+};
+exports.default = iconsJson;
 exports.icons = icons;

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

@@ -1,27 +1,35 @@
 declare const _default: {
   "icons": {
+    "logo-positive": {
+      "class": "i-daikin-logo-positive",
+      "color": null
+    },
+    "logo-negative": {
+      "class": "i-daikin-logo-negative",
+      "color": null
+    },
     "alarm": {
-      "class": "i-daikin-status-alarm",
+      "class": "i-daikin-alarm",
       "color": null
     },
     "close": {
-      "class": "i-daikin-notification-close",
+      "class": "i-daikin-close",
       "color": "#a0a0a0"
     },
     "information": {
-      "class": "i-daikin-status-information",
+      "class": "i-daikin-information",
       "color": null
     },
-    "negative": {
-      "class": "i-daikin-status-negative",
+    "error": {
+      "class": "i-daikin-error",
       "color": null
     },
-    "positive": {
-      "class": "i-daikin-status-positive",
+    "success": {
+      "class": "i-daikin-success",
       "color": null
     },
     "warning": {
-      "class": "i-daikin-status-warning",
+      "class": "i-daikin-warning",
       "color": null
     },
     "pagination-chevron-left": {
@@ -32,14 +40,6 @@ declare const _default: {
       "class": "i-daikin-pagination-chevron-right",
       "color": "#414141"
     },
-    "error": {
-      "class": "i-daikin-status-error",
-      "color": "#FF4949"
-    },
-    "cross": {
-      "class": "i-daikin-cross",
-      "color": null
-    },
     "profile": {
       "class": "i-daikin-profile",
       "color": null

package/dist/cjs/components/icon-button/daikin-icon-button.cjs

@@ -4,10 +4,11 @@ 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-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 require("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -76,7 +77,7 @@ const cvaIconButton = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement {
+exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSFormSubmitElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -86,10 +87,18 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement
     this.type = "button";
     this.buttonAriaLabel = null;
     this.buttonRole = null;
+    this.buttonAriaHaspopup = null;
+    this.buttonAriaExpanded = null;
+    this.size = "s";
     this.addEventListener("click", (event) => {
       if (this.disabled) {
         event.stopImmediatePropagation();
       }
+      if (this.type === "submit") {
+        this.requestSubmit();
+      } else if (this.type === "reset") {
+        this.reset();
+      }
     });
   }
   render() {
@@ -117,6 +126,8 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement
         type=${this.type}
         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)}
       >
         <slot class="icon-size-full"></slot>
       </button>
@@ -136,8 +147,14 @@ exports.DaikinIconButton.styles = lit.css`
 
     :host {
       display: inline-block;
-      width: 2rem;
-      height: 2rem;
+      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([
@@ -161,6 +178,15 @@ __decorateClass([
 __decorateClass([
   decorators_js.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" })
+], exports.DaikinIconButton.prototype, "buttonAriaHaspopup", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+], exports.DaikinIconButton.prototype, "buttonAriaExpanded", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIconButton.prototype, "size", 2);
 __decorateClass([
   decorators_js.query("button")
 ], exports.DaikinIconButton.prototype, "_button", 2);

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

@@ -1,6 +1,6 @@
-import { DDSElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.cjs";
 declare const cvaIconButton: (props?: ({
     color?: "default" | "danger" | "neutral" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
@@ -32,7 +32,7 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * </daikin-icon-button>
  * ```
  */
-export declare class DaikinIconButton extends DDSElement {
+export declare class DaikinIconButton extends DDSFormSubmitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
@@ -65,6 +65,24 @@ export declare class DaikinIconButton extends DDSElement {
      * Optional ARIA role of the button.
      */
     buttonRole: ARIARole | null;
+    /**
+     * The aria-haspopup of the icon button when `type="button"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup="menu"`.
+     */
+    buttonAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * 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;
+    /**
+     * Size of the button.
+     * - `s`: 32px * 32px
+     * - `m`: 48px * 48px
+     *
+     * Default is `s`.
+     */
+    size: "s" | "m";
     private _button;
     constructor();
     render(): import('lit-html').TemplateResult<1>;

package/dist/cjs/components/index.cjs

@@ -6,12 +6,17 @@ const daikinAvatar = require("./avatar/daikin-avatar.cjs");
 const daikinBreadcrumb = require("./breadcrumb/daikin-breadcrumb.cjs");
 const daikinBreadcrumbItem = require("./breadcrumb-item/daikin-breadcrumb-item.cjs");
 const daikinButton = require("./button/daikin-button.cjs");
+const daikinCalendar = require("./calendar/daikin-calendar.cjs");
 const daikinCard = require("./card/daikin-card.cjs");
 const daikinCardFooter = require("./card-footer/daikin-card-footer.cjs");
 const daikinCardHeader = require("./card-header/daikin-card-header.cjs");
 const daikinCarousel = require("./carousel/daikin-carousel.cjs");
 const daikinCarouselItem = require("./carousel-item/daikin-carousel-item.cjs");
 const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
+const daikinCheckboxGroup = require("./checkbox-group/daikin-checkbox-group.cjs");
+const daikinChip = require("./chip/daikin-chip.cjs");
+const daikinCombobox = require("./combobox/daikin-combobox.cjs");
+const daikinDatePicker = require("./date-picker/daikin-date-picker.cjs");
 const daikinDropdown = require("./dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./dropdown-item/daikin-dropdown-item.cjs");
 const daikinIcon = require("./icon/daikin-icon.cjs");
@@ -22,12 +27,19 @@ const daikinLink = require("./link/daikin-link.cjs");
 const daikinList = require("./list/daikin-list.cjs");
 const daikinListItem = require("./list-item/daikin-list-item.cjs");
 const daikinLoading = require("./loading/daikin-loading.cjs");
+const daikinLogo = require("./logo/daikin-logo.cjs");
+const daikinMenu = require("./menu/daikin-menu.cjs");
+const daikinModal = require("./modal/daikin-modal.cjs");
+const daikinModalFooter = require("./modal-footer/daikin-modal-footer.cjs");
+const daikinModalHeader = require("./modal-header/daikin-modal-header.cjs");
 const daikinPagination = require("./pagination/daikin-pagination.cjs");
 const daikinProgressBar = require("./progress-bar/daikin-progress-bar.cjs");
 const daikinProgressIndicator = require("./progress-indicator/daikin-progress-indicator.cjs");
 const daikinProgressIndicatorItem = require("./progress-indicator-item/daikin-progress-indicator-item.cjs");
 const daikinRadio = require("./radio/daikin-radio.cjs");
+const daikinRadioGroup = require("./radio-group/daikin-radio-group.cjs");
 const daikinSelect = require("./select/daikin-select.cjs");
+const daikinSlider = require("./slider/daikin-slider.cjs");
 const daikinTab = require("./tab/daikin-tab.cjs");
 const daikinTabPanels = require("./tab-panels/daikin-tab-panels.cjs");
 const daikinTable = require("./table/daikin-table.cjs");
@@ -36,6 +48,8 @@ const daikinTableHeaderCell = require("./table-header-cell/daikin-table-header-c
 const daikinTabs = require("./tabs/daikin-tabs.cjs");
 const daikinTextArea = require("./text-area/daikin-text-area.cjs");
 const daikinTextField = require("./text-field/daikin-text-field.cjs");
+const daikinTextMaskedField = require("./text-masked-field/daikin-text-masked-field.cjs");
+const daikinTimePicker = require("./time-picker/daikin-time-picker.cjs");
 const daikinToastNotification = require("./toast-notification/daikin-toast-notification.cjs");
 const daikinToastNotificationManager = require("./toast-notification-manager/daikin-toast-notification-manager.cjs");
 const daikinToggle = require("./toggle/daikin-toggle.cjs");
@@ -67,6 +81,10 @@ Object.defineProperty(exports, "DaikinButton", {
   enumerable: true,
   get: () => daikinButton.DaikinButton
 });
+Object.defineProperty(exports, "DaikinCalendar", {
+  enumerable: true,
+  get: () => daikinCalendar.DaikinCalendar
+});
 Object.defineProperty(exports, "DaikinCard", {
   enumerable: true,
   get: () => daikinCard.DaikinCard
@@ -91,6 +109,23 @@ Object.defineProperty(exports, "DaikinCheckbox", {
   enumerable: true,
   get: () => daikinCheckbox.DaikinCheckbox
 });
+Object.defineProperty(exports, "DaikinCheckboxGroup", {
+  enumerable: true,
+  get: () => daikinCheckboxGroup.DaikinCheckboxGroup
+});
+Object.defineProperty(exports, "DaikinChip", {
+  enumerable: true,
+  get: () => daikinChip.DaikinChip
+});
+Object.defineProperty(exports, "DaikinCombobox", {
+  enumerable: true,
+  get: () => daikinCombobox.DaikinCombobox
+});
+exports.defaultFilterFn = daikinCombobox.defaultFilterFn;
+Object.defineProperty(exports, "DaikinDatePicker", {
+  enumerable: true,
+  get: () => daikinDatePicker.DaikinDatePicker
+});
 Object.defineProperty(exports, "DaikinDropdown", {
   enumerable: true,
   get: () => daikinDropdown.DaikinDropdown
@@ -132,6 +167,26 @@ Object.defineProperty(exports, "DaikinLoading", {
   enumerable: true,
   get: () => daikinLoading.DaikinLoading
 });
+Object.defineProperty(exports, "DaikinLogo", {
+  enumerable: true,
+  get: () => daikinLogo.DaikinLogo
+});
+Object.defineProperty(exports, "DaikinMenu", {
+  enumerable: true,
+  get: () => daikinMenu.DaikinMenu
+});
+Object.defineProperty(exports, "DaikinModal", {
+  enumerable: true,
+  get: () => daikinModal.DaikinModal
+});
+Object.defineProperty(exports, "DaikinModalFooter", {
+  enumerable: true,
+  get: () => daikinModalFooter.DaikinModalFooter
+});
+Object.defineProperty(exports, "DaikinModalHeader", {
+  enumerable: true,
+  get: () => daikinModalHeader.DaikinModalHeader
+});
 Object.defineProperty(exports, "DaikinPagination", {
   enumerable: true,
   get: () => daikinPagination.DaikinPagination
@@ -152,10 +207,18 @@ Object.defineProperty(exports, "DaikinRadio", {
   enumerable: true,
   get: () => daikinRadio.DaikinRadio
 });
+Object.defineProperty(exports, "DaikinRadioGroup", {
+  enumerable: true,
+  get: () => daikinRadioGroup.DaikinRadioGroup
+});
 Object.defineProperty(exports, "DaikinSelect", {
   enumerable: true,
   get: () => daikinSelect.DaikinSelect
 });
+Object.defineProperty(exports, "DaikinSlider", {
+  enumerable: true,
+  get: () => daikinSlider.DaikinSlider
+});
 Object.defineProperty(exports, "DaikinTab", {
   enumerable: true,
   get: () => daikinTab.DaikinTab
@@ -188,6 +251,24 @@ Object.defineProperty(exports, "DaikinTextField", {
   enumerable: true,
   get: () => daikinTextField.DaikinTextField
 });
+Object.defineProperty(exports, "DaikinTextMaskedField", {
+  enumerable: true,
+  get: () => daikinTextMaskedField.DaikinTextMaskedField
+});
+Object.defineProperty(exports, "DaikinTimePicker", {
+  enumerable: true,
+  get: () => daikinTimePicker.DaikinTimePicker
+});
+exports.calcDigitInput = daikinTimePicker.calcDigitInput;
+exports.formatPartsForUI = daikinTimePicker.formatPartsForUI;
+exports.formatTimeForUI = daikinTimePicker.formatTimeForUI;
+exports.from24HourFormat = daikinTimePicker.from24HourFormat;
+exports.getTimeItemInSelection = daikinTimePicker.getTimeItemInSelection;
+exports.isTimeOutOfRange = daikinTimePicker.isTimeOutOfRange;
+exports.isValidValueTime = daikinTimePicker.isValidValueTime;
+exports.parsePartsFromUIValue = daikinTimePicker.parsePartsFromUIValue;
+exports.to24HourFormat = daikinTimePicker.to24HourFormat;
+exports.tryParseTimeFromUIValue = daikinTimePicker.tryParseTimeFromUIValue;
 Object.defineProperty(exports, "DaikinToastNotification", {
   enumerable: true,
   get: () => daikinToastNotification.DaikinToastNotification

package/dist/cjs/components/index.d.cts

@@ -4,12 +4,17 @@ export * from "./avatar/index.cjs";
 export * from "./breadcrumb/index.cjs";
 export * from "./breadcrumb-item/index.cjs";
 export * from "./button/index.cjs";
+export * from "./calendar/index.cjs";
 export * from "./card/index.cjs";
 export * from "./card-footer/index.cjs";
 export * from "./card-header/index.cjs";
 export * from "./carousel/index.cjs";
 export * from "./carousel-item/index.cjs";
 export * from "./checkbox/index.cjs";
+export * from "./checkbox-group/index.cjs";
+export * from "./chip/index.cjs";
+export * from "./combobox/index.cjs";
+export * from "./date-picker/index.cjs";
 export * from "./dropdown/index.cjs";
 export * from "./dropdown-item/index.cjs";
 export * from "./icon/index.cjs";
@@ -20,12 +25,19 @@ export * from "./link/index.cjs";
 export * from "./list/index.cjs";
 export * from "./list-item/index.cjs";
 export * from "./loading/index.cjs";
+export * from "./logo/index.cjs";
+export * from "./menu/index.cjs";
+export * from "./modal/index.cjs";
+export * from "./modal-footer/index.cjs";
+export * from "./modal-header/index.cjs";
 export * from "./pagination/index.cjs";
 export * from "./progress-bar/index.cjs";
 export * from "./progress-indicator/index.cjs";
 export * from "./progress-indicator-item/index.cjs";
 export * from "./radio/index.cjs";
+export * from "./radio-group/index.cjs";
 export * from "./select/index.cjs";
+export * from "./slider/index.cjs";
 export * from "./tab/index.cjs";
 export * from "./tab-panels/index.cjs";
 export * from "./table/index.cjs";
@@ -34,6 +46,8 @@ export * from "./table-header-cell/index.cjs";
 export * from "./tabs/index.cjs";
 export * from "./text-area/index.cjs";
 export * from "./text-field/index.cjs";
+export * from "./text-masked-field/index.cjs";
+export * from "./time-picker/index.cjs";
 export * from "./toast-notification/index.cjs";
 export * from "./toast-notification-manager/index.cjs";
 export * from "./toggle/index.cjs";

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

@@ -7,6 +7,7 @@ const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const notificationCommon = require("../../utils/notification-common.cjs");
+require("../icon-button/daikin-icon-button.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -36,30 +37,24 @@ exports.DaikinInlineNotification = class DaikinInlineNotification extends ddsEle
     const formattedTimestamp = this.timestamp ? notificationCommon.formatDate(this.timestamp) : null;
     return lit.html`<aside
       class=${notificationCommon.cvaContainer({ variant: "inline", status: this.status })}
-      role="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 })}
-          name="description"
-        ></slot>
+        <slot class=${notificationCommon.cvaDescription({ layout: this.layout })}></slot>
         ${formattedTimestamp ? lit.html`<span class=${notificationCommon.cvaTimestamp({ layout: this.layout })}
               >${formattedTimestamp}</span
             >` : lit.nothing}
       </div>
       <slot name="action" class="flex-none"></slot>
-      ${this.closable ? lit.html`
-            <daikin-icon-button
-              variant="ghost"
-              button-aria-label="Close"
-              @click=${this._handleClickClose}
-            >
-              <span
-                class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-cross"
-              ></span>
-            </daikin-icon-button>
-          ` : lit.nothing}
+      ${this.closable ? lit.html`<daikin-icon-button
+            variant="ghost"
+            button-aria-label="Close"
+            @click=${this._handleClickClose}
+          >
+            <span
+              class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-close"
+            ></span>
+          </daikin-icon-button>` : lit.nothing}
     </aside>`;
   }
 };
@@ -76,10 +71,10 @@ exports.DaikinInlineNotification.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinInlineNotification.prototype, "status", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinInlineNotification.prototype, "layout", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })

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

@@ -6,10 +6,12 @@ import { ToastNotificationVariantProps } from "../toast-notification/index.cjs";
  * An inline notification appears within the content of the application, usually embedded directly within a page or section.
  * Inline notification is more persistent than toast notification and are used to highlight important information or status updates that should remain visible to the user until they are acknowledged or the issue is resolved.
  *
+ * @tokenImports ../../utils/notification-common.ts
+ *
  * @fires close - A custom event emitted when a user clicks the close button.
  *
+ * @slot A slot for the inline notification description content.
  * @slot title - A slot for the title content.
- * @slot description - A slot for the description content.
  *
  * @example
  *