@daikin-oss/design-system-web-components 1.5.2 → 1.6.0

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

@@ -23,10 +23,11 @@ export declare function defaultFilterFn(items: readonly ComboboxItem[], value: s
  * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
  * @prop {String} formAttr - The form the component belongs to.
  * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
- * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  *
  * @fires change - A custom event emitted when a user selects a combobox item or inputs a custom value.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when the user types in the input field, clicks clear button, or selects from dropdown options.
+ * @fires toggle - A custom event emitted when the combobox menu opens or closes.
  *
  * @example
  *
@@ -63,6 +64,7 @@ export declare class DaikinCombobox extends DDSFormElement {
     error: boolean;
     /**
      * Whether the combobox menu is opened.
+     * When controlling this property externally, listen to the `toggle` event and sync your state based on `event.newState` to keep it in sync.
      */
     open: boolean;
     /**

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

@@ -38,9 +38,7 @@ const cvaInput = cva(
     "pr-16",
     "rounded-sm",
     "overflow-hidden",
-    "font-daikinSerif",
     "text-left",
-    "leading-[130%]",
     "relative",
     "outline-solid",
     "outline-1",
@@ -80,8 +78,6 @@ const cvaOption = cva(
     "size-full",
     "min-h-12",
     "p-3",
-    "font-daikinSerif",
-    "leading-[130%]",
     "text-left",
     "relative",
     "data-focus:outline-solid",
@@ -540,6 +536,17 @@ let DaikinCombobox = class extends DDSFormElement {
         this.focus();
       }
     }
+    if (changedProperties.has("open")) {
+      const wasOpen = changedProperties.get("open");
+      if (wasOpen !== void 0) {
+        this.dispatchEvent(
+          new ToggleEvent("toggle", {
+            oldState: wasOpen ? "open" : "closed",
+            newState: this.open ? "open" : "closed"
+          })
+        );
+      }
+    }
     if (changedProperties.has("_currentFocusItemIndex")) {
       const focusedItem = this.renderRoot.querySelector("[data-focus]");
       focusedItem == null ? void 0 : focusedItem.scrollIntoView({ block: "nearest" });

package/dist/es/components/date-picker/daikin-date-picker.d.ts

@@ -9,9 +9,10 @@ import { DaikinInputGroup } from "../input-group/daikin-input-group.js";
  * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
  * @prop {String} formAttr - The form the component belongs to.
  * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
- * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `select` event.
  *
  * @fires select - Fires when the date is selected.
+ * @fires toggle - A custom event emitted when the calendar picker opens or closes.
  *
  * @example
  *
@@ -25,6 +26,7 @@ import { DaikinInputGroup } from "../input-group/daikin-input-group.js";
  */
 export declare class DaikinDatePicker extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
+    private static getDefaultPlaceholder;
     /**
      * The placeholder text.
      */
@@ -63,6 +65,7 @@ export declare class DaikinDatePicker extends DDSFormElement {
     error: boolean;
     /**
      * Whether the date picker is open.
+     * When controlling this property externally, listen to the `toggle` event and sync your state based on `event.newState` to keep it in sync.
      */
     open: boolean;
     /**
@@ -70,6 +73,13 @@ export declare class DaikinDatePicker extends DDSFormElement {
      * If there is a `value` attribute, this is ignored.
      */
     defaultValue: string | null;
+    /**
+     * The locale used for date formatting.
+     * If not provided, the browser's default locale will be used. It is usually not necessary to specify it explicitly.
+     *
+     * @private
+     */
+    locale: string | null;
     /**
      * The label text used as the value of aria-label.
      * Set automatically by `reflectInputGroup` method.
@@ -80,6 +90,14 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _dateInputElement;
     private _calendarElement;
     private _calendarButtonElement;
+    private _getLocale;
+    private _getDateItems;
+    private _parsePartsFromUIValue;
+    private _formatPartsForUI;
+    private _tryParseDateFromUIValue;
+    private _formatDateForUI;
+    private _getPlaceholderAll;
+    private _getDateItemInSelection;
     private get _value();
     private get _min();
     private get _max();

package/dist/es/components/date-picker/daikin-date-picker.js

@@ -27,28 +27,62 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const DATE_ITEMS = [
-  {
-    type: "month",
-    range: [0, 2]
-  },
-  {
-    type: "day",
-    range: [3, 5]
-  },
-  {
-    type: "year",
-    range: [6, 10]
+const dateTimeFormatPartsCache = /* @__PURE__ */ new Map();
+function getSafeDateTimeFormatParts(locale) {
+  const options = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  };
+  const key = locale ?? "__DEFAULT__";
+  const cached = dateTimeFormatPartsCache.get(key);
+  if (cached) return cached;
+  try {
+    const parts = new Intl.DateTimeFormat(
+      locale ?? void 0,
+      options
+    ).formatToParts(0);
+    dateTimeFormatPartsCache.set(key, parts);
+    return parts;
+  } catch {
+    const parts = new Intl.DateTimeFormat(void 0, options).formatToParts(0);
+    dateTimeFormatPartsCache.set(key, parts);
+    return parts;
   }
-];
+}
+function getDateOrderAndSeparator(locale) {
+  const parts = getSafeDateTimeFormatParts(locale ?? void 0);
+  const order = parts.filter(
+    (p) => ["year", "month", "day"].includes(p.type)
+  ).map((p) => p.type);
+  const literals = parts.filter((p) => p.type === "literal");
+  const sep = literals.length >= 2 && literals[0].value === literals[1].value ? literals[0].value : "/";
+  const requiredParts = ["year", "month", "day"];
+  const isValidOrder = order.length === 3 && requiredParts.every((part) => order.includes(part));
+  const isValidSep = sep.length > 0 && /^\D+$/.test(sep);
+  if (!isValidOrder || !isValidSep) {
+    return {
+      order: ["month", "day", "year"],
+      sep: "/"
+    };
+  }
+  return { order, sep };
+}
+function getDateItems(locale) {
+  const { order, sep } = getDateOrderAndSeparator(locale);
+  const lengths = { year: 4, month: 2, day: 2 };
+  const items = order.map((key, i) => {
+    const type = key;
+    const len = lengths[type];
+    const start = order.slice(0, i).reduce((sum, k) => sum + lengths[k], 0) + i * sep.length;
+    const end = start + len;
+    return { type, range: [start, end] };
+  });
+  return items;
+}
 const PLACEHOLDER_YEAR = "YYYY";
 const PLACEHOLDER_MONTH = "MM";
 const PLACEHOLDER_DAY = "DD";
-const PLACEHOLDER_ALL = formatPartsForUI({
-  year: PLACEHOLDER_YEAR,
-  month: PLACEHOLDER_MONTH,
-  day: PLACEHOLDER_DAY
-});
 const cvaField = cva(
   [
     "flex",
@@ -92,15 +126,25 @@ const cvaField = cva(
     }
   }
 );
-function parsePartsFromUIValue(value) {
-  const [month, day, year] = value.split("/");
-  return { year, month, day };
+function parsePartsFromUIValue(value, locale) {
+  const { order, sep } = getDateOrderAndSeparator(locale);
+  const parts = value.split(sep);
+  return Object.fromEntries(
+    order.map((key, i) => [key, parts[i] ?? ""])
+  );
 }
-function formatPartsForUI({ year, month, day }) {
-  return `${month}/${day}/${year}`;
+function formatPartsForUI(parts, locale) {
+  const { order, sep } = getDateOrderAndSeparator(locale);
+  return order.map((k) => parts[k]).join(sep);
 }
-function tryParseDateFromUIValue(value) {
-  const { year, month, day } = parsePartsFromUIValue(value);
+function getPlaceholderAll(locale) {
+  return formatPartsForUI(
+    { year: PLACEHOLDER_YEAR, month: PLACEHOLDER_MONTH, day: PLACEHOLDER_DAY },
+    locale
+  );
+}
+function tryParseDateFromUIValue(value, locale) {
+  const { year, month, day } = parsePartsFromUIValue(value, locale);
   if (
     // Prevent treating incomplete year entries (such as 0202) as valid.
     // This also means that dates less than 1000 years ago cannot be handled.
@@ -114,15 +158,18 @@ function tryParseDateFromUIValue(value) {
   }
   return date;
 }
-function formatDateForUI(date) {
-  return formatPartsForUI({
-    year: String(date.getUTCFullYear()).padStart(4, "0"),
-    month: String(date.getUTCMonth() + 1).padStart(2, "0"),
-    day: String(date.getUTCDate()).padStart(2, "0")
-  });
+function formatDateForUI(date, locale) {
+  return formatPartsForUI(
+    {
+      year: String(date.getUTCFullYear()).padStart(4, "0"),
+      month: String(date.getUTCMonth() + 1).padStart(2, "0"),
+      day: String(date.getUTCDate()).padStart(2, "0")
+    },
+    locale
+  );
 }
-function getDateItemInSelection(selectionStart, selectionEnd) {
-  for (const { type, range } of DATE_ITEMS) {
+function getDateItemInSelection(selectionStart, selectionEnd, locale) {
+  for (const { type, range } of getDateItems(locale)) {
     if (range[0] <= selectionStart && selectionStart <= range[1] && range[0] <= selectionEnd && selectionEnd <= range[1]) {
       return type;
     }
@@ -237,12 +284,21 @@ let DaikinDatePicker = class extends DDSFormElement {
     this.error = false;
     this.open = false;
     this.defaultValue = null;
+    this.locale = null;
     this._label = null;
     this._currentSelection = "month";
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._dateInputElement = createRef();
     this._calendarElement = createRef();
     this._calendarButtonElement = createRef();
+    this._getLocale = () => this.locale ?? null;
+    this._getDateItems = () => getDateItems(this._getLocale());
+    this._parsePartsFromUIValue = (v) => parsePartsFromUIValue(v, this._getLocale());
+    this._formatPartsForUI = (p) => formatPartsForUI(p, this._getLocale());
+    this._tryParseDateFromUIValue = (v) => tryParseDateFromUIValue(v, this._getLocale());
+    this._formatDateForUI = (d) => formatDateForUI(d, this._getLocale());
+    this._getPlaceholderAll = () => getPlaceholderAll(this._getLocale());
+    this._getDateItemInSelection = (s, e) => getDateItemInSelection(s, e, this._getLocale());
     this._ignoreCloseByFocusTrap = false;
     this._handleCloseCalendar = () => {
       var _a;
@@ -256,6 +312,9 @@ let DaikinDatePicker = class extends DDSFormElement {
     );
     this.label = null;
   }
+  static getDefaultPlaceholder(element) {
+    return getPlaceholderAll(element._getLocale());
+  }
   get _value() {
     return tryParseDateFromProperty(this.value);
   }
@@ -286,7 +345,7 @@ let DaikinDatePicker = class extends DDSFormElement {
   }
   _handleFocusOut(event) {
     const target = event.target;
-    if (target.value === PLACEHOLDER_ALL) {
+    if (target.value === this._getPlaceholderAll()) {
       target.value = "";
     }
   }
@@ -298,11 +357,11 @@ let DaikinDatePicker = class extends DDSFormElement {
     event.preventDefault();
     const selectionStart = ((_a = this._dateInputElement.value) == null ? void 0 : _a.selectionStart) ?? 0;
     const selectionEnd = ((_b = this._dateInputElement.value) == null ? void 0 : _b.selectionEnd) ?? 0;
-    const dateItemInSelection = getDateItemInSelection(
+    const dateItemInSelection = this._getDateItemInSelection(
       selectionStart,
       selectionEnd
     );
-    if (event.target.value === PLACEHOLDER_ALL && !dateItemInSelection) {
+    if (event.target.value === this._getPlaceholderAll() && !dateItemInSelection) {
       this._updateSelection("month");
       return;
     }
@@ -316,7 +375,7 @@ let DaikinDatePicker = class extends DDSFormElement {
     }
     const target = event.target;
     const key = event.key;
-    const parts = parsePartsFromUIValue(target.value);
+    const parts = this._parsePartsFromUIValue(target.value);
     if (key === "Backspace") {
       event.preventDefault();
       const itemToRemove = this._currentSelection;
@@ -326,7 +385,7 @@ let DaikinDatePicker = class extends DDSFormElement {
         day: PLACEHOLDER_DAY
       }[itemToRemove];
       if (parts[itemToRemove] !== placeholder) {
-        target.value = formatPartsForUI({
+        target.value = this._formatPartsForUI({
           ...parts,
           [itemToRemove]: placeholder
         });
@@ -339,13 +398,14 @@ let DaikinDatePicker = class extends DDSFormElement {
       event.preventDefault();
       const newState = handleDigitInput(parts, this._currentSelection, key);
       if (newState) {
-        target.value = formatPartsForUI(newState.parts);
-        const currentIndex = DATE_ITEMS.findIndex(
+        target.value = this._formatPartsForUI(newState.parts);
+        const items = this._getDateItems();
+        const currentIndex = items.findIndex(
           ({ type }) => type === this._currentSelection
         );
-        const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, DATE_ITEMS.length - 1) : -1;
+        const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, items.length - 1) : -1;
         this._updateSelection(
-          newState.done && nextIndex >= 0 ? DATE_ITEMS[nextIndex].type : this._currentSelection
+          newState.done && nextIndex >= 0 ? items[nextIndex].type : this._currentSelection
         );
       }
       this._updateValue(event);
@@ -357,14 +417,12 @@ let DaikinDatePicker = class extends DDSFormElement {
     }[key];
     if (moveOffset) {
       event.preventDefault();
-      const currentIndex = DATE_ITEMS.findIndex(
+      const items = this._getDateItems();
+      const currentIndex = items.findIndex(
         ({ type }) => type === this._currentSelection
       );
-      const newIndex = currentIndex >= 0 ? Math.min(
-        Math.max(currentIndex + moveOffset, 0),
-        DATE_ITEMS.length - 1
-      ) : 0;
-      this._updateSelection(DATE_ITEMS[newIndex].type);
+      const newIndex = currentIndex >= 0 ? Math.min(Math.max(currentIndex + moveOffset, 0), items.length - 1) : 0;
+      this._updateSelection(items[newIndex].type);
       return;
     }
     const countOffset = {
@@ -382,7 +440,7 @@ let DaikinDatePicker = class extends DDSFormElement {
         this._max
       );
       if (newParts) {
-        target.value = formatPartsForUI(newParts);
+        target.value = this._formatPartsForUI(newParts);
         this._updateSelection(this._currentSelection);
       }
       this._updateValue(event);
@@ -408,7 +466,7 @@ let DaikinDatePicker = class extends DDSFormElement {
     const target = this._dateInputElement.value;
     const value = parseDateFromProperty(calendar.value);
     this.value = formatDateForProperty(value);
-    target.value = formatDateForUI(value);
+    target.value = this._formatDateForUI(value);
     this.error = false;
     if (event.type === "select") {
       this.open = false;
@@ -446,11 +504,11 @@ let DaikinDatePicker = class extends DDSFormElement {
   }
   _updateValue(event) {
     const target = event.target;
-    if (target.value === PLACEHOLDER_ALL) {
+    if (target.value === this._getPlaceholderAll()) {
       this.error = false;
       return;
     }
-    const newDate = tryParseDateFromUIValue(target.value);
+    const newDate = this._tryParseDateFromUIValue(target.value);
     if (!newDate || isDateOutOfRange(newDate, this._min, this._max)) {
       this.error = true;
       return;
@@ -467,9 +525,9 @@ let DaikinDatePicker = class extends DDSFormElement {
       return;
     }
     if (target.value === "") {
-      target.value = PLACEHOLDER_ALL;
+      target.value = this._getPlaceholderAll();
     }
-    const itemInfo = DATE_ITEMS[0];
+    const itemInfo = this._getDateItems()[0];
     (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
       itemInfo.range[0],
       itemInfo.range[1]
@@ -482,7 +540,7 @@ let DaikinDatePicker = class extends DDSFormElement {
     if (!selection) {
       return;
     }
-    const itemInfo = DATE_ITEMS.find(({ type }) => type === dateItem);
+    const itemInfo = this._getDateItems().find(({ type }) => type === dateItem);
     if (itemInfo) {
       (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
         itemInfo.range[0],
@@ -503,7 +561,7 @@ let DaikinDatePicker = class extends DDSFormElement {
     const min = this._min;
     const max = this._max;
     return html`<div
-        class="size-full relative font-daikinSerif"
+        class="size-full relative"
         ${this._autoUpdateController.refReference()}
       >
         <input
@@ -511,12 +569,12 @@ let DaikinDatePicker = class extends DDSFormElement {
           class=${cvaField({ error: this.error })}
           type="text"
           name=${ifDefined(this.getBackingProperty("name"))}
-          placeholder=${ifDefined(this.getBackingProperty("placeholder"))}
+          placeholder=${ifDefined(this.placeholder)}
           aria-label=${ifDefined(this._label ?? this.label ?? "Date Picker")}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
-          .value=${this._value ? formatDateForUI(this._value) : ""}
+          .value=${this._value ? this._formatDateForUI(this._value) : ""}
           @change=${this._handleChange}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
@@ -538,6 +596,9 @@ let DaikinDatePicker = class extends DDSFormElement {
         >
           <span class=${cvaIconButton({ intent: "calender" })}></span>
         </daikin-icon-button>
+        <span class="sr-only" aria-live="polite"
+          >${this.value ? `${this._label ?? ""} Selected: ${this.value}` : ""}
+        </span>
       </div>
       <daikin-calendar
         ${ref(this._calendarElement)}
@@ -555,9 +616,6 @@ let DaikinDatePicker = class extends DDSFormElement {
         ${this._autoUpdateController.refFloating()}
       >
       </daikin-calendar>
-      <span class="sr-only" aria-live="polite"
-        >${this.value ? `${this._label ?? ""} Selected: ${this.value}` : ""}
-      </span>
       ${// Activate auto update only when the tooltip is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
     guard(
@@ -636,7 +694,11 @@ DaikinDatePicker.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "" })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: DaikinDatePicker.getDefaultPlaceholder
+  })
 ], DaikinDatePicker.prototype, "placeholder", 2);
 __decorateClass([
   property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
@@ -662,6 +724,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true, attribute: "default-value" })
 ], DaikinDatePicker.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinDatePicker.prototype, "locale", 2);
 __decorateClass([
   state()
 ], DaikinDatePicker.prototype, "_label", 2);

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

@@ -0,0 +1,23 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * The divider is a UI element that represents a thematic break between paragraph-level elements. It can be used to separate content in a list, or to divide sections of a page.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/divider/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-divider></daikin-divider>
+ * ```
+ */
+export declare class DaikinDivider extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-divider": DaikinDivider;
+    }
+}

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

@@ -0,0 +1,43 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
+import "lit/decorators.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+const DIVIDER_CLASS_NAME = cva([
+  "w-full",
+  "m-0",
+  "border-t",
+  "border-ddt-color-divider"
+])();
+let DaikinDivider = class extends DDSElement {
+  render() {
+    return html`<hr
+      class=${DIVIDER_CLASS_NAME}
+      aria-orientation="horizontal"
+    />`;
+  }
+};
+DaikinDivider.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+    }
+  `;
+DaikinDivider = __decorateClass([
+  ddsElement("daikin-divider")
+], DaikinDivider);
+export {
+  DaikinDivider
+};

package/dist/es/components/divider/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-divider.js";

package/dist/es/components/divider/index.js

@@ -0,0 +1,4 @@
+import { DaikinDivider } from "./daikin-divider.js";
+export {
+  DaikinDivider
+};

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

@@ -0,0 +1,91 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-drawer` is an overlay panel that slides in from the edge of the screen. It is used to display content without navigating away from the current page, providing a smooth user experience. The drawer can be placed at the top, right, bottom, or left of the screen and can contain a header, body, and footer. When the drawer is open, it traps focus within itself and prevents background content from scrolling.
+ *
+ * ### Scroll Lock
+ *
+ * When the drawer is open, it sets the CSS custom property `--ddc-scroll-lock: hidden` on the `<html>` element and removes it when the drawer is closed.
+ * To enable scroll locking, add the following CSS. If you use a custom scroll container instead of `body`, replace the selector accordingly:
+ *
+ * ```css
+ * body {
+ *   overflow: var(--ddc-scroll-lock, auto);
+ * }
+ * ```
+ *
+ * When no drawer is open, `--ddc-scroll-lock` is absent and the fallback value (`auto`) takes effect.
+ * When a drawer opens, it is set to `hidden`, locking scroll on every element that uses it.
+ *
+ * ## Multiple drawers and modals
+ *
+ * If multiple `daikin-drawer` or `daikin-modal` instances are open at the same time, the component tracks them with an internal reference count.
+ * `--ddc-scroll-lock` is only removed from `<html>` once **every** open drawer or modal has been closed — closing one drawer or modal while others remain open will not unlock scroll.
+ * This means your CSS declaration requires no extra logic to handle concurrent drawers or modals correctly.
+ *
+ * > **Note:** The `--ddc-scroll-lock` property is set on `<html>` and inherits through the entire document,
+ * > so the CSS declaration above works on any element regardless of its position in the DOM tree.
+ *
+ * Hierarchy:
+ * - `daikin-drawer` > `daikin-drawer-header`
+ * - `daikin-drawer` > `daikin-drawer-footer`
+ *
+ * @slot - A slot for drawer header, body, drawer footer. Place `daikin-drawer-header`, custom body content, `daikin-drawer-footer` here in order.
+ *
+ * @fires close - A custom event emitted when the drawer is closed, including when a user clicks the header close button, clicks the backdrop, or dismisses the drawer with the Escape key.
+ *
+ * @csspart drawer - CSS styles applied to the drawer panel container. By default, the panel uses content-based content width fit or height fit and is clamped by responsive min/max width and height constraints so it does not touch the viewport edges. Use `::part(drawer)` to customize its width, height, or padding; the built-in min/max constraints remain in effect unless you override them with more specific rules.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/drawer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/drawer-footer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/drawer-header/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-drawer>
+ *   <daikin-drawer-header>
+ *     <span>Drawer Title</span>
+ *   </daikin-drawer-header>
+ *   <p>Drawer body.</p>
+ *   <daikin-drawer-footer>
+ *     <daikin-button size="small">Button</daikin-button>
+ *   </daikin-drawer-footer>
+ * </daikin-drawer>
+ * ```
+ */
+export declare class DaikinDrawer extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether the drawer is open.
+     * When controlling this property externally, listen to the `close` event and set your state to `false` to keep it in sync.
+     */
+    open: boolean;
+    /**
+     * ARIA role of the drawer. Choose the appropriate role for your drawer based on its usage scenario.
+     *
+     * @default "dialog"
+     */
+    drawerRole: "dialog" | "alertdialog";
+    /**
+     * The aria-label of the drawer.
+     */
+    drawerAriaLabel: string | null;
+    /**
+     * The placement of the drawer. The default value is `right`, which means the drawer will slide in from the right side of the screen. You can set it to `top`, `bottom`, or `left` to have the drawer slide in from the corresponding side.
+     * Note: The slide-in animation is based on CSS transform, so it can still work when the drawer is placed at the top or bottom of the screen, providing a smooth user experience.
+     * @default "right"
+     */
+    placement: "top" | "right" | "bottom" | "left";
+    private readonly _blockScrollController;
+    private readonly _handleClose;
+    private readonly _focusTrapController;
+    private readonly _handleBackdropClick;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-drawer": DaikinDrawer;
+    }
+}