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

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

@@ -0,0 +1,64 @@
+export declare const DEFAULT_MIN_DATE = "1900-01-01";
+export declare const DEFAULT_MAX_DATE = "2099-12-31";
+export declare const cvaIconButton: (props?: ({
+    intent?: "previous" | "next" | "calender" | "pulldown" | null | undefined;
+    rotate?: "default" | "inverse" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Determines whether the specified date is outside the range. Time information is ignored.
+ */
+export declare function isDateOutOfRange(base: Date, min: Date, max: Date): boolean;
+/**
+ * Determines whether the specified month and year are outside the range. Date and time information is ignored.
+ */
+export declare function isMonthOutOfRange(base: Date, min: Date, max: Date): boolean;
+/**
+ * Determines whether the year and month of two dates are the same.
+ */
+export declare function isSameYearMonth(a: Date, b: Date): boolean;
+/**
+ * Stringify the date in YYYY-MM-DD format.
+ */
+export declare function formatDateForProperty(date: Date): string;
+/**
+ * Parses the date in YYYY-MM-DD format and returns UTC date.
+ */
+export declare function parseDateFromProperty(value: string): Date;
+/**
+ * Try parsing the date in YYYY-MM-DD format and returns UTC date if available.
+ */
+export declare function tryParseDateFromProperty(value: string): Date | null;
+/**
+ * Normalizes the Date by stripping time information.
+ */
+export declare function normalizeDate(base: Date): Date;
+/**
+ * Clones the Date with stripping time information.
+ */
+export declare function cloneDate(base: Date): Date;
+/**
+ * Clamps the date to the specified range.
+ */
+export declare function clampDate(base: Date, min: Date, max: Date): Date;
+/**
+ * Retrieves the date specified by the year, month, and day.
+ * If the specified date does not exist in the month (e.g., 2/31), it is rounded to the closest date in the same month.
+ * The month is in the range 0 to 11.
+ */
+export declare function createDateClamped(year: number, month: number, date: number): Date;
+/**
+ * Retrieves the date of the same day in a different month with the specified offset.
+ * If that day does not exist in the month (such as February 31), it is rounded to the closest day in the month.
+ */
+export declare function getDateByMonthOffsetClamped(base: Date, monthOffset: number): Date;
+/**
+ * Calculates the sequence of weeks that exist on the calendar for the specified year and month.
+ * The array of weeks in each return value always starts with Sunday and contains seven dates.
+ */
+export declare function calcWeeksOnCalendar(year: number, month: number): Date[][];
+/**
+ * Return the number of days in the specified year and month.
+ * @param year year starting from 1.
+ * @param month month starting from 0 (0 means January).
+ */
+export declare function countDaysForYearMonth(year: number, month: number): number;

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

@@ -48,23 +48,20 @@ const cvaContainer = classVarianceAuthority.cva(
       status: {
         positive: [
           "before:text-ddt-color-common-success",
-          "before:i-daikin-status-positive"
+          "before:i-daikin-success"
         ],
         negative: [
           "before:text-ddt-color-common-danger-default",
-          "before:i-daikin-status-negative"
+          "before:i-daikin-error"
         ],
         warning: [
           "before:text-ddt-color-common-warning",
-          "before:i-daikin-status-warning"
-        ],
-        alarm: [
-          "before:text-ddt-color-common-alarm",
-          "before:i-daikin-status-alarm"
+          "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-status-information"
+          "before:i-daikin-information"
         ]
       }
     }
@@ -94,15 +91,22 @@ const cvaTimestamp = classVarianceAuthority.cva(
     }
   }
 );
-const cvaTitle = classVarianceAuthority.cva(["inline-block", "font-bold"], {
-  variants: {
-    layout: {
-      vertical: [],
-      horizontal: ["whitespace-nowrap", "overflow-hidden", "overflow-ellipsis"]
+const cvaTitle = classVarianceAuthority.cva(
+  ["slotted:inline-block", "font-bold", "leading-[130%]"],
+  {
+    variants: {
+      layout: {
+        vertical: [],
+        horizontal: [
+          "slotted:whitespace-nowrap",
+          "slotted:overflow-hidden",
+          "slotted:overflow-ellipsis"
+        ]
+      }
     }
   }
-});
-const cvaDescription = classVarianceAuthority.cva(["inline-block"], {
+);
+const cvaDescription = classVarianceAuthority.cva(["inline-block", "leading-[130%]"], {
   variants: {
     layout: {
       vertical: [],

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

@@ -2,8 +2,8 @@
 export declare const TOAST_ANIMATION_DURATION = 200;
 export declare function formatDate(date: Date): string | null;
 export declare const cvaContainer: (props?: ({
-    variant?: "toast" | "inline" | null | undefined;
-    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
+    variant?: "inline" | "toast" | null | undefined;
+    status?: "alarm" | "information" | "warning" | "positive" | "negative" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const cvaContent: (props?: ({
     layout?: "horizontal" | "vertical" | null | undefined;

package/dist/cjs-dev/{components/tabs → utils}/scroller.cjs

@@ -5,7 +5,7 @@ function getEffectiveParentElement(element) {
   return element.assignedSlot || element.parentElement || ((_a = element.parentNode) == null ? void 0 : _a.host);
 }
 function getBooleanForDirection(horizontal, vertical, direction) {
-  return horizontal;
+  return direction === "horizontal" ? horizontal : direction === "vertical" ? vertical : horizontal || vertical;
 }
 function isScrollableOverflowValue(overflow) {
   return overflow !== "visible" && overflow !== "hidden" && overflow !== "clip";
@@ -17,43 +17,51 @@ function getFirstScrollableAncestor(element, direction) {
   }
   const overflow = getBooleanForDirection(
     parent.scrollWidth > parent.clientWidth,
-    parent.scrollHeight > parent.clientHeight
+    parent.scrollHeight > parent.clientHeight,
+    direction
   );
   if (overflow) {
     const computedStyle = getComputedStyle(parent);
     const scrollableOverflow = getBooleanForDirection(
       isScrollableOverflowValue(computedStyle.overflowX),
-      isScrollableOverflowValue(computedStyle.overflowY)
+      isScrollableOverflowValue(computedStyle.overflowY),
+      direction
     );
     if (scrollableOverflow) {
       return parent;
     }
   }
-  return getFirstScrollableAncestor(parent);
+  return getFirstScrollableAncestor(parent, direction);
 }
-function calcScrollIntoViewOffset(target, container) {
+function calcScrollIntoViewOffset(target, container, center) {
   const bBoxContainer = container.getBoundingClientRect();
   const bBoxTarget = target.getBoundingClientRect();
+  const xOffset = center ? (bBoxContainer.width - bBoxTarget.width) / 2 : 0;
+  const yOffset = center ? (bBoxContainer.height - bBoxTarget.height) / 2 : 0;
   const scrollByX = (
     // If the left end of the target is to the left of the container, align the left end of the target so that it is in the viewport.
-    Math.min(bBoxTarget.left - bBoxContainer.left, 0) || // If the right end of the target is to the right of the container, align the right end of the target so that it is in the viewport.
-    Math.max(bBoxTarget.right - bBoxContainer.right, 0)
+    Math.min(bBoxTarget.left - bBoxContainer.left - xOffset, 0) || // If the right end of the target is to the right of the container, align the right end of the target so that it is in the viewport.
+    Math.max(bBoxTarget.right - bBoxContainer.right + xOffset, 0)
   );
-  const scrollByY = Math.min(bBoxTarget.top - bBoxContainer.top, 0) || Math.max(bBoxTarget.bottom - bBoxContainer.bottom, 0);
+  const scrollByY = Math.min(bBoxTarget.top - bBoxContainer.top - yOffset, 0) || Math.max(bBoxTarget.bottom - bBoxContainer.bottom + yOffset, 0);
   return [scrollByX, scrollByY];
 }
-function scrollIntoViewOnlyParent(target, direction) {
-  const scrollableParent = getFirstScrollableAncestor(target);
+function scrollIntoViewOnlyParent(target, direction, center) {
+  const scrollableParent = getFirstScrollableAncestor(target, direction);
   if (!scrollableParent) {
     return false;
   }
   let [scrollByX, scrollByY] = calcScrollIntoViewOffset(
     target,
-    scrollableParent
+    scrollableParent,
+    center
   );
-  {
+  if (direction === "horizontal") {
     scrollByY = 0;
   }
+  if (direction === "vertical") {
+    scrollByX = 0;
+  }
   if (scrollByX || scrollByY) {
     scrollableParent.scrollBy(scrollByX, scrollByY);
   }

package/dist/cjs-dev/{components/tabs → utils}/scroller.d.cts

@@ -14,7 +14,7 @@ export declare function getEffectiveParentElement(element: HTMLElement): HTMLEle
  * @returns the first scrollable ancestor element (if any)
  */
 export declare function getFirstScrollableAncestor(element: HTMLElement, direction: Direction): HTMLElement | null;
-export declare function calcScrollIntoViewOffset(target: HTMLElement, container: HTMLElement): [x: number, y: number];
+export declare function calcScrollIntoViewOffset(target: HTMLElement, container: HTMLElement, center: boolean): [x: number, y: number];
 /**
  * An alternative `.scrollIntoView()` function which only scrolls the first scrollable ancestor element.
  *
@@ -22,4 +22,4 @@ export declare function calcScrollIntoViewOffset(target: HTMLElement, container:
  * @param direction direction
  * @returns `true` if success, `false` if scrollable parent not found
  */
-export declare function scrollIntoViewOnlyParent(target: HTMLElement, direction: Direction): boolean;
+export declare function scrollIntoViewOnlyParent(target: HTMLElement, direction: Direction, center: boolean): boolean;

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 const _DDSElement = class _DDSElement extends LitElement {
 };
-_DDSElement.version = "1.1.0";
+_DDSElement.version = "1.3.0-next.2";
 let DDSElement = _DDSElement;
 export {
   DDSElement

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

@@ -0,0 +1,100 @@
+import { DDSElement } from "./dds-element.js";
+type FormValueType = string | File | FormData | null;
+export declare class DDSFormElement extends DDSElement {
+    static readonly formAssociated = true;
+    /**
+     * The form name, submitted as a name/value pair when submitting the form.
+     */
+    name: string;
+    /**
+     * The form value, submitted as a name/value pair when submitting the form.
+     */
+    value: string;
+    /**
+     * The form attribute specifies the form the form component belongs to.
+     * The value of this attribute must be equal to the id attribute of a <form> element in the same document.
+     */
+    formAttr: string | undefined;
+    protected internals: ElementInternals | null | undefined;
+    constructor();
+    /**
+     * Returns the form object associated with the element, or null if none exists.
+     * @private
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Set the element's name and value within the current form.
+     * @private
+     */
+    setFormValue(value: FormValueType, state?: FormValueType): void;
+    /**
+     * A function that maps to the form control's `reportValidity()` function.
+     * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+     * @private
+     */
+    reportValidity(): boolean | undefined;
+    /**
+     * A function that maps to the form control's `checkValidity()` function.
+     * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+     * @private
+     */
+    checkValidity(): boolean | undefined;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostConnected(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostDisconnected(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostUpdated(): void;
+}
+export declare class DDSFormSubmitElement extends DDSElement {
+    static readonly formAssociated = true;
+    /**
+     * The form attribute specifies the form the form component belongs to.
+     * The value of this attribute must be equal to the id attribute of a <form> element in the same document.
+     */
+    formAttr: string | undefined;
+    protected internals: ElementInternals | null | undefined;
+    constructor();
+    /**
+     * Returns the form object associated with the element, or null if none exists.
+     * @private
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * A function that maps to the form control's `reportValidity()` function.
+     * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+     * @private
+     */
+    requestSubmit(): void;
+    /**
+     * A function that maps to the form control's `checkValidity()` function.
+     * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+     * @private
+     */
+    reset(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostConnected(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostDisconnected(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostUpdated(): void;
+}
+export {};

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

@@ -0,0 +1,139 @@
+import { property } from "lit/decorators.js";
+import { DDSElement } from "./dds-element.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _DDSFormElement = class _DDSFormElement extends DDSElement {
+  constructor() {
+    super();
+    this.name = "";
+    this.value = "";
+    this.internals = this.attachInternals();
+  }
+  /**
+   * Returns the form object associated with the element, or null if none exists.
+   * @private
+   */
+  get form() {
+    return this.internals ? this.internals.form : null;
+  }
+  /**
+   * Set the element's name and value within the current form.
+   * @private
+   */
+  setFormValue(value, state) {
+    var _a;
+    (_a = this.internals) == null ? void 0 : _a.setFormValue(value, state);
+  }
+  /**
+   * A function that maps to the form control's `reportValidity()` function.
+   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+   * @private
+   */
+  reportValidity() {
+    var _a;
+    return (_a = this.internals) == null ? void 0 : _a.reportValidity();
+  }
+  /**
+   * A function that maps to the form control's `checkValidity()` function.
+   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+   * @private
+   */
+  checkValidity() {
+    var _a;
+    return (_a = this.internals) == null ? void 0 : _a.checkValidity();
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostConnected() {
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostDisconnected() {
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostUpdated() {
+  }
+};
+_DDSFormElement.formAssociated = true;
+let DDSFormElement = _DDSFormElement;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DDSFormElement.prototype, "name");
+__decorateClass([
+  property({ type: String, reflect: true })
+], DDSFormElement.prototype, "value");
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "form" })
+], DDSFormElement.prototype, "formAttr");
+const _DDSFormSubmitElement = class _DDSFormSubmitElement extends DDSElement {
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+  }
+  /**
+   * Returns the form object associated with the element, or null if none exists.
+   * @private
+   */
+  get form() {
+    return this.internals ? this.internals.form : null;
+  }
+  /**
+   * A function that maps to the form control's `reportValidity()` function.
+   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+   * @private
+   */
+  requestSubmit() {
+    var _a, _b;
+    (_b = (_a = this.internals) == null ? void 0 : _a.form) == null ? void 0 : _b.requestSubmit();
+  }
+  /**
+   * A function that maps to the form control's `checkValidity()` function.
+   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+   * @private
+   */
+  reset() {
+    var _a, _b;
+    (_b = (_a = this.internals) == null ? void 0 : _a.form) == null ? void 0 : _b.reset();
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostConnected() {
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostDisconnected() {
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostUpdated() {
+  }
+};
+_DDSFormSubmitElement.formAssociated = true;
+let DDSFormSubmitElement = _DDSFormSubmitElement;
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "form" })
+], DDSFormSubmitElement.prototype, "formAttr");
+export {
+  DDSFormElement,
+  DDSFormSubmitElement
+};

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

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";

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

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -25,13 +25,16 @@ const cvaSummary = cva(
     "w-full",
     "min-h-12",
     "p-3",
+    "break-all",
+    "text-left",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus",
     "after:size-6",
     "after:transition-all",
-    "after:i-daikin-chevron-down"
+    "after:i-daikin-chevron-down",
+    "after:flex-none"
   ],
   {
     variants: {
@@ -98,10 +101,11 @@ let DaikinAccordionItem = class extends DDSElement {
   render() {
     const open = !this.disabled && this.open;
     return html`<div
-      class="w-full text-ddt-color-common-text-primary font-daikinSerif overflow-clip"
+      class="w-full text-ddt-color-common-text-primary font-daikinSerif"
     >
       <button
         id="summary"
+        type="button"
         ${ref(this._summaryRef)}
         class=${cvaSummary({
       open,
@@ -126,7 +130,7 @@ let DaikinAccordionItem = class extends DDSElement {
       >
         <div class="overflow-hidden">
           <div class="pt-2 px-3 pb-3">
-            <slot></slot>
+            <slot class="slotted:break-all"></slot>
           </div>
         </div>
       </div>

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

@@ -37,14 +37,17 @@ export declare class DaikinAvatar extends LitElement {
     alt: string | null;
     /**
      * Specify the avatar disabled state.
+     * Ignored when the `type` is `"icon"`.
      */
     disabled: boolean;
     /**
      * The aria-haspopup of the avatar when `type="button"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup="menu"`.
      */
     avatarAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
     /**
      * The aria-expanded of avatar when `type="button"`.
+     * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
      */
     avatarAriaExpanded: boolean | null;
     private _focusableElement;

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

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
+import { unsafeCSS, css, LitElement, html } from "lit";
 import { property, query, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -89,6 +89,7 @@ let DaikinAvatar = class extends LitElement {
       </span>`;
     } else if (this.type === "button") {
       return html`<button
+        type="button"
         class=${cvaWrapper({ type: "button" })}
         aria-label=${ifDefined(this.alt ?? void 0)}
         aria-haspopup=${ifDefined(this.avatarAriaHaspopup ?? void 0)}

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

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";

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

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -29,12 +29,14 @@ let DaikinBreadcrumbItem = class extends DDSElement {
     const link = this.variant === "normal" ? html`<daikin-link
             class="text-sm"
             href=${ifDefined(this.href ?? void 0)}
+            target=${ifDefined(this.target ?? void 0)}
             ?show-visited=${this.showVisited}
             ><slot></slot
           ></daikin-link>` : html`<a
             class="text-sm font-daikinSerif text-ddt-color-common-text-primary"
             aria-disabled="true"
             aria-current="true"
+            target=${ifDefined(this.target ?? void 0)}
             role="link"
             ><slot></slot
           ></a>`;

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

@@ -1,13 +1,13 @@
-import { DDSElement } from "../../base/index.js";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaButton: (props?: ({
     color?: "default" | "danger" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
-    size?: "small" | "medium" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const cvaIcon: (props?: ({
-    size?: "small" | "medium" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
 /**
@@ -32,16 +32,21 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
  * </daikin-button>
  * ```
  */
-export declare class DaikinButton extends DDSElement {
+export declare class DaikinButton extends DDSFormSubmitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
      */
     variant: ButtonVariantProps["variant"];
+    /**
+     * Type of the button.
+     * If `"link"` is specified, the button will be rendered as an `<a>` element.
+     */
+    type: "button" | "submit" | "reset" | "link";
     /**
      * Size of the button.
      */
-    size: "small" | "medium";
+    size: "small" | "medium" | "large";
     /**
      * Color of the button.
      */
@@ -56,15 +61,20 @@ export declare class DaikinButton extends DDSElement {
      * If omitted with `type="link"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.
      */
     href: string | null;
-    /**
-     * Type of the button.
-     * If `"link"` is specified, the button will be rendered as an `<a>` element.
-     */
-    type: "button" | "submit" | "reset" | "link";
     /**
      * Optional ARIA role of the button.
      */
     buttonRole: ARIARole | null;
+    /**
+     * The aria-haspopup of the 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 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;
     private _focusableElement;
     constructor();
     render(): import('lit-html').TemplateResult<1>;