@daikin-oss/design-system-web-components 1.0.0 → 1.2.0

package/dist/cjs/components/menu/daikin-menu.cjs

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dom = require("@floating-ui/dom");
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const guard_js = require("lit/directives/guard.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
+const isClient = require("../../is-client.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+const reDispatch = require("../../utils/re-dispatch.cjs");
+const daikinAvatar = require("../avatar/daikin-avatar.cjs");
+const daikinButton = require("../button/daikin-button.cjs");
+const daikinIconButton = require("../icon-button/daikin-icon-button.cjs");
+const daikinListItem = require("../list-item/daikin-list-item.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaMenu = classVarianceAuthority.cva([
+  "left-[--floating-x,0]",
+  "top-[--floating-y,0]",
+  "w-max",
+  "py-2",
+  "border",
+  "rounded-lg",
+  "font-daikinSerif",
+  "absolute",
+  "floating-unready:hidden",
+  "bg-ddt-color-common-background-default",
+  "border-ddt-color-divider"
+]);
+const DEFAULT_MENU_SPACING = "0px";
+exports.DaikinMenu = class DaikinMenu extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "bottom";
+    this.open = false;
+    this.popoverValue = "auto";
+    this.trigger = "click";
+    this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
+    this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
+  }
+  static registerCSSCustomProperties() {
+    if (!isClient.isClient) {
+      return;
+    }
+    window.CSS.registerProperty({
+      name: "--ddc-menu-spacing",
+      syntax: "<length>",
+      inherits: true,
+      initialValue: "0px"
+    });
+  }
+  /**
+   * Reflects static attributes (e.g. ARIA roles) to slot components.
+   * These are typically set once when the slot changes and do not change frequently.
+   */
+  _reflectStaticProperties() {
+    for (const control of this._controls) {
+      if (control instanceof daikinButton.DaikinButton || control instanceof daikinIconButton.DaikinIconButton && control.type === "button") {
+        control.buttonAriaHaspopup = "menu";
+      } else if (control instanceof daikinAvatar.DaikinAvatar && control.type === "button") {
+        control.avatarAriaHaspopup = "menu";
+      }
+    }
+    for (const daikinList of this._lists) {
+      daikinList.listRole = "menu";
+    }
+  }
+  /**
+   * Reflects dynamic attributes (e.g. `open`, `disabled`) to slot components.
+   * These may changed when properties are updated.
+   */
+  _reflectDynamicProperties() {
+    for (const control of this._controls) {
+      if (control instanceof daikinButton.DaikinButton || control instanceof daikinIconButton.DaikinIconButton && control.type === "button") {
+        control.buttonAriaExpanded = this.open;
+      } else if (control instanceof daikinAvatar.DaikinAvatar && control.type === "button") {
+        control.avatarAriaExpanded = this.open;
+      }
+    }
+  }
+  _handleSlotChange() {
+    this._reflectStaticProperties();
+  }
+  _handleTriggerClick(event) {
+    if (this.trigger === "click") {
+      event.preventDefault();
+      this.open = !this.open;
+      if (this.open) {
+        setTimeout(() => {
+          this._lists[0].focusFirstItem();
+        });
+      }
+    }
+  }
+  _handleClick(event) {
+    event.preventDefault();
+    if (event.target instanceof daikinListItem.default && !event.target.disabled) {
+      this.open = false;
+    }
+  }
+  _handleBeforeToggle(event) {
+    reDispatch.reDispatch(this, event, new ToggleEvent("beforetoggle", event));
+  }
+  _handleToggle(event) {
+    if (reDispatch.reDispatch(this, event, new ToggleEvent("toggle", event))) {
+      this.open = event.newState === "open";
+    }
+  }
+  render() {
+    var _a;
+    const spacing = parseInt(
+      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--ddc-menu-spacing")) || DEFAULT_MENU_SPACING,
+      10
+    );
+    return lit.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()}
+      >
+        <slot @click=${this._handleTriggerClick}></slot>
+      </div>
+      <span
+        id="menu"
+        aria-labelledby="menu"
+        part="menu"
+        class=${cvaMenu()}
+        popover=${this.popoverValue}
+        @click=${this._handleClick}
+        @beforetoggle=${this._handleBeforeToggle}
+        @toggle=${this._handleToggle}
+        ${this._autoUpdateController.refFloating()}
+      >
+        <slot name="menu" @slotchange=${this._handleSlotChange}></slot>
+      </span>
+      ${// Activate auto update only when the menu is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    guard_js.guard(
+      [this.open, this.placement, spacing],
+      () => this._autoUpdateController.directive(
+        {
+          placement: this.placement,
+          middleware: [dom.offset({ mainAxis: spacing }), dom.flip(), dom.shift()]
+        },
+        this.open
+      )
+    )}
+    </div>`;
+  }
+  updated(changedProperties) {
+    var _a;
+    if (changedProperties.has("open")) {
+      this._reflectDynamicProperties();
+      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this.open);
+    }
+  }
+};
+exports.DaikinMenu.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+
+      --ddc-menu-spacing: ${lit.unsafeCSS(DEFAULT_MENU_SPACING)};
+    }
+  `;
+__decorateClass([
+  decorators_js.queryAssignedElements({ slot: "menu", selector: "daikin-list" })
+], exports.DaikinMenu.prototype, "_lists", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({
+    selector: "daikin-button,daikin-icon-button,daikin-avatar"
+  })
+], exports.DaikinMenu.prototype, "_controls", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinMenu.prototype, "placement", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinMenu.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: "popover-value" })
+], exports.DaikinMenu.prototype, "popoverValue", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinMenu.prototype, "trigger", 2);
+exports.DaikinMenu = __decorateClass([
+  decorators.ddsElement("daikin-menu")
+], exports.DaikinMenu);
+exports.DaikinMenu.registerCSSCustomProperties();

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

@@ -0,0 +1,89 @@
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * A menu component is used to show list information when a user interacts with an element.
+ *
+ * Hierarchy:
+ * - `daikin-menu` > `daikin-list` > `daikin-list-item`
+ *
+ * @fires beforetoggle - _Cancellable._ A event emitted when the menu is about to be opened or closed by user interaction.
+ * @fires toggle - A event emitted when the menu is opened or closed.
+ *
+ * @slot - A slot for the element to which the menu is attached (the trigger element).
+ * @slot menu - A slot for the menu content (daikin-list component).
+ *
+ * @cssprop [--ddc-menu-spacing=0px] - Spacing between the menu and the trigger.
+ *
+ * @csspart menu - Change the style of menu.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/menu/index.js";
+ * import "@daikin-oss/design-system-web-components/components/button/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-menu>
+ *   <daikin-button>Click me</daikin-button>
+ *   <daikin-list slot="menu" style="width: 256px">
+ *     <daikin-list-item>List item label 1</daikin-list-item>
+ *     <daikin-list-item>List item label 2</daikin-list-item>
+ *     <daikin-list-item>List item label 3</daikin-list-item>
+ *   </daikin-list>
+ * </daikin-menu>
+ * ```
+ */
+export declare class DaikinMenu extends DDSElement {
+    static registerCSSCustomProperties(): void;
+    static readonly styles: import('lit').CSSResult;
+    private readonly _lists;
+    private readonly _controls;
+    /**
+     * 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.
+     */
+    placement: "top" | "bottom" | "left" | "right";
+    /**
+     * Whether the menu is open.
+     */
+    open: boolean;
+    /**
+     * 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.
+     */
+    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.
+     */
+    trigger: "click" | "manual";
+    private _autoUpdateController;
+    private _hostStyles;
+    /**
+     * Reflects static attributes (e.g. ARIA roles) to slot components.
+     * These are typically set once when the slot changes and do not change frequently.
+     */
+    private _reflectStaticProperties;
+    /**
+     * Reflects dynamic attributes (e.g. `open`, `disabled`) to slot components.
+     * These may changed when properties are updated.
+     */
+    private _reflectDynamicProperties;
+    private _handleSlotChange;
+    private _handleTriggerClick;
+    private _handleClick;
+    private _handleBeforeToggle;
+    private _handleToggle;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-menu": DaikinMenu;
+    }
+}

package/dist/cjs/components/menu/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinMenu = require("./daikin-menu.cjs");
+Object.defineProperty(exports, "DaikinMenu", {
+  enumerable: true,
+  get: () => daikinMenu.DaikinMenu
+});

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

@@ -0,0 +1 @@
+export * from "./daikin-menu.cjs";

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

@@ -0,0 +1,115 @@
+"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 guard_js = require("lit/directives/guard.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const focusTrap = require("../../controllers/focus-trap.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const PANEL = classVarianceAuthority.cva([
+  "flex",
+  "flex-col",
+  "gap-4",
+  "top-[50%]",
+  "left-[50%]",
+  "w-full",
+  "sm:max-w-[50%]",
+  "z-[10000]",
+  "p-4",
+  "rounded-lg",
+  "bg-ddt-color-common-background-default"
+])();
+const cvaBackDrop = classVarianceAuthority.cva(
+  [
+    "fixed",
+    "flex",
+    "px-4",
+    "inset-0",
+    "z-[9999]",
+    "items-center",
+    "justify-center",
+    "bg-black/50"
+  ],
+  {
+    variants: {
+      open: {
+        false: ["hidden", "pointer-events-none"],
+        true: []
+      }
+    }
+  }
+);
+exports.DaikinModal = class DaikinModal extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.modalRole = "dialog";
+    this.modalAriaLabel = null;
+    this.persistent = false;
+    this._handleClose = () => {
+      this.open = false;
+      this.dispatchEvent(
+        new CustomEvent("close", { composed: true, bubbles: true })
+      );
+    };
+    this._focusTrapController = new focusTrap.FocusTrapController(
+      this,
+      this._handleClose
+    );
+  }
+  render() {
+    return lit.html`<div class=${cvaBackDrop({ open: this.open })}>
+        <div
+          class=${PANEL}
+          role=${this.modalRole}
+          aria-modal=${ifDefined_js.ifDefined(this.open ? "true" : void 0)}
+          aria-label=${ifDefined_js.ifDefined(this.modalAriaLabel ?? void 0)}
+          ${this._focusTrapController.refContainer()}
+        >
+          <slot
+            class="text-ddt-color-common-text-primary"
+            @close=${this._handleClose}
+          ></slot>
+        </div>
+      </div>
+      ${guard_js.guard(
+      [this.open, this.persistent],
+      () => (
+        // open or persistent change will trigger the re-rendering and directive.
+        this._focusTrapController.directive(this.open, this.persistent)
+      )
+    )}`;
+  }
+};
+exports.DaikinModal.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+  `;
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinModal.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "modal-role" })
+], exports.DaikinModal.prototype, "modalRole", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "modal-aria-label" })
+], exports.DaikinModal.prototype, "modalAriaLabel", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean })
+], exports.DaikinModal.prototype, "persistent", 2);
+exports.DaikinModal = __decorateClass([
+  decorators.ddsElement("daikin-modal")
+], exports.DaikinModal);

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

@@ -0,0 +1,61 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-modal` is an interactive overlay that appears on top of the main content to prompt user input or display important information, temporarily blocking interaction with the rest of the page. It's crucial for capturing user attention and guiding specific actions.
+ *
+ * Hierarchy:
+ * - `daikin-modal` > `daikin-modal-header`
+ * - `daikin-modal` > `daikin-modal-footer`
+ *
+ * @slot - A slot for modal header, body, modal footer. Place `daikin-modal-header`, custom body content, `daikin-modal-footer` here in order.
+ *
+ * @fires close - A custom event emitted when a user clicks the close button in the header.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/modal/index.js";
+ * import "@daikin-oss/design-system-web-components/components/modal-footer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/modal-header/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-modal>
+ *   <daikin-modal-header>
+ *     <span slot="description">Description</span>
+ *     <span>Modal Title</span>
+ *   </daikin-modal-header>
+ *   <p>Modal body.</p>
+ *   <daikin-modal-footer>
+ *     <daikin-button size="small">Button</daikin-button>
+ *   </daikin-modal-footer>
+ * </daikin-modal>
+ * ```
+ */
+export declare class DaikinModal extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether the modal is open.
+     */
+    open: boolean;
+    /**
+     * ARIA role of the modal. Choose the appropriate role for your modal based on its usage scenario.
+     */
+    modalRole: "dialog" | "alertdialog";
+    /**
+     * The aria-label of the modal.
+     */
+    modalAriaLabel: string | null;
+    /**
+     * If this property set by `true`, you can't close modal by clicking outside of modal or Escape key.
+     * In this case, please ensure you provide users with a method to close the modal, such as a close button in the header or a close button in the footer.
+     */
+    persistent: boolean;
+    private readonly _handleClose;
+    private readonly _focusTrapController;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-modal": DaikinModal;
+    }
+}

package/dist/cjs/components/modal/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinModal = require("./daikin-modal.cjs");
+Object.defineProperty(exports, "DaikinModal", {
+  enumerable: true,
+  get: () => daikinModal.DaikinModal
+});

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

@@ -0,0 +1 @@
+export * from "./daikin-modal.cjs";

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = decorator(result) || result;
+  return result;
+};
+exports.DaikinModalFooter = class DaikinModalFooter extends ddsElement.DDSElement {
+  render() {
+    return lit.html`<div class="flex flex-wrap justify-end w-full gap-4">
+      <slot></slot>
+    </div>`;
+  }
+};
+exports.DaikinModalFooter.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    @media (max-width: 40rem) {
+      :host {
+        justify-content: center;
+      }
+    }
+  `;
+exports.DaikinModalFooter = __decorateClass([
+  decorators.ddsElement("daikin-modal-footer")
+], exports.DaikinModalFooter);

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

@@ -0,0 +1,33 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-modal-footer` is used to represent footer of the modal component, and is used as a child element of the `daikin-modal` component.
+ *
+ * Hierarchy:
+ * - `daikin-modal` > `daikin-modal-footer`
+ *
+ * @slot A slot for modal footer action element. Place a `daikin-button` or `daikin-link` element here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/modal-footer/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-modal` component for complete example. -->
+ * <daikin-modal-footer>
+ *  <daikin-button size="small" color="default">
+ *    Button
+ *  </daikin-button>
+ * </daikin-modal-footer>
+ * ```
+ */
+export declare class DaikinModalFooter extends DDSElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-modal-footer": DaikinModalFooter;
+    }
+}

package/dist/cjs/components/modal-footer/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinModalFooter = require("./daikin-modal-footer.cjs");
+Object.defineProperty(exports, "DaikinModalFooter", {
+  enumerable: true,
+  get: () => daikinModalFooter.DaikinModalFooter
+});

package/dist/cjs/components/modal-footer/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-modal-footer.cjs";

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

@@ -0,0 +1,96 @@
+"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 ref_js = require("lit/directives/ref.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+require("../icon-button/daikin-icon-button.cjs");
+require("../icon/daikin-icon.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaTitle = classVarianceAuthority.cva([
+  "flex-none",
+  "text-ddt-color-common-text-primary",
+  "font-daikinSerif",
+  "text-xl",
+  "leading-[1.3]",
+  "not-italic",
+  "font-bold"
+])();
+const cvaDescription = classVarianceAuthority.cva([
+  "flex-none",
+  "text-ddt-color-common-text-secondary",
+  "font-daikinSerif",
+  "text-base",
+  "leading-normal",
+  "not-italic",
+  "font-normal"
+])();
+exports.DaikinModalHeader = class DaikinModalHeader extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.withCloseButton = false;
+    this._closeButton = ref_js.createRef();
+  }
+  _handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    return lit.html`<div class="flex w-full gap-2">
+      <div class="flex-1 flex flex-col pt-0.5 gap-2 break-all">
+        <slot class=${cvaTitle}></slot>
+        <slot name="description" class=${cvaDescription}></slot>
+      </div>
+      ${this.withCloseButton ? lit.html`<div class="flex-none">
+            <daikin-icon-button
+              ${ref_js.ref(this._closeButton)}
+              variant="ghost"
+              color="neutral"
+              button-aria-label="Close"
+              class="w-8 h-8"
+              @click=${this._handleClick}
+            >
+              <daikin-icon icon="close" color="current"></daikin-icon>
+            </daikin-icon-button>
+          </div>` : lit.nothing}
+    </div>`;
+  }
+  /**
+   * Focuses on the header content area.
+   */
+  focusCloseButton() {
+    var _a;
+    (_a = this._closeButton.value) == null ? void 0 : _a.focus();
+  }
+};
+exports.DaikinModalHeader.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "with-close-button" })
+], exports.DaikinModalHeader.prototype, "withCloseButton", 2);
+exports.DaikinModalHeader = __decorateClass([
+  decorators.ddsElement("daikin-modal-header")
+], exports.DaikinModalHeader);