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

package/dist/es-dev/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-dev/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-dev/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-dev/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-dev/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>;

package/dist/es-dev/components/button/daikin-button.js

@@ -1,10 +1,11 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,7 +26,6 @@ const cvaButton = cva(
     "font-daikinSerif",
     "font-bold",
     "rounded",
-    "px-3",
     "tracking-wide",
     "text-nowrap",
     "leading-[130%]",
@@ -65,34 +65,43 @@ const cvaButton = cva(
         ghost: ["text-[--color-primary]", "bg-[--color-secondary]"]
       },
       size: {
-        small: ["text-sm"],
-        medium: []
+        small: ["px-2", "text-sm"],
+        medium: ["px-3", "text-base"],
+        large: ["px-4", "text-xl"]
       }
     }
   }
 );
-const cvaIcon = cva([], {
+const cvaIcon = cva(["slotted:flex-none"], {
   variants: {
     size: {
       small: ["icon-size-4"],
-      medium: ["icon-size-6"]
+      medium: ["icon-size-6"],
+      large: ["icon-size-6"]
     }
   }
 });
-let DaikinButton = class extends DDSElement {
+let DaikinButton = class extends DDSFormSubmitElement {
   constructor() {
     super();
     this.variant = "fill";
+    this.type = "button";
     this.size = "medium";
     this.color = "default";
     this.disabled = false;
     this.href = null;
-    this.type = "button";
     this.buttonRole = null;
+    this.buttonAriaHaspopup = null;
+    this.buttonAriaExpanded = null;
     this.addEventListener("click", (event) => {
       if (this.disabled || this.type === "link" && this.href == null) {
         event.stopImmediatePropagation();
       }
+      if (this.type === "submit") {
+        this.requestSubmit();
+      } else if (this.type === "reset") {
+        this.reset();
+      }
     });
   }
   render() {
@@ -126,13 +135,15 @@ let DaikinButton = class extends DDSElement {
         ?disabled=${this.disabled}
         type=${this.type}
         role=${ifDefined(this.buttonRole ?? void 0)}
+        aria-haspopup=${ifDefined(this.buttonAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined(this.buttonAriaExpanded ?? void 0)}
       >
         <slot name="left-icon" class=${cvaIcon({ size: this.size })}>
-          <span class="block -ml-1"></span>
+          <span class="flex-none block -ml-1"></span>
         </slot>
         <span class="px-2"><slot></slot></span>
         <slot name="right-icon" class=${cvaIcon({ size: this.size })}>
-          <span class="block -mr-1"></span>
+          <span class="flex-none block -mr-1"></span>
         </slot>
       </button>
     `;
@@ -163,10 +174,18 @@ DaikinButton.styles = css`
       min-width: 3.75em;
       height: 3rem;
     }
+
+    :host([size="large"]) {
+      min-width: 4.25em;
+      height: 4.5rem;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinButton.prototype, "type", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinButton.prototype, "size", 2);
@@ -179,12 +198,15 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinButton.prototype, "href", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinButton.prototype, "type", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "button-role" })
 ], DaikinButton.prototype, "buttonRole", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
+], DaikinButton.prototype, "buttonAriaHaspopup", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+], DaikinButton.prototype, "buttonAriaExpanded", 2);
 __decorateClass([
   query("a,button")
 ], DaikinButton.prototype, "_focusableElement", 2);

package/dist/es-dev/components/calendar/daikin-calendar.d.ts

@@ -0,0 +1,87 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+/**
+ * The calendar component provides calendar elements. It has a function for selecting dates, and is also used in `daikin-date-picker`.
+ *
+ * @fires select - Fires when the date is selected.
+ * @fires selecting - Fires when the year or month is selected.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/calendar/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-calendar></daikin-calendar>
+ * ```
+ */
+export declare class DaikinCalendar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The current value of the input, submitted as a name/value pair with form data.
+     */
+    value: string | null;
+    /**
+     * The minimum date.
+     * example: `1900-01-01`
+     */
+    min: string;
+    /**
+     * The maximum date.
+     * example: `2099-12-31`
+     */
+    max: string;
+    /**
+     * The month that is initially displayed when the date picker is opened.
+     * If there is a `value` attribute, this is ignored.
+     */
+    defaultValue: string | null;
+    /**
+     * _Internal use._
+     *
+     * Calendar view (day, month, or year)
+     *
+     * @private
+     * Intended for use only by `daikin-date-picker`.
+     */
+    view: "year" | "month" | "day";
+    private _dateToBeFocused;
+    private get _value();
+    private get _min();
+    private get _max();
+    private get _defaultValue();
+    /**
+     * The date that serves as the basis for the current view.
+     * The year and month are used to determine the display range, and the date is used to update the value.
+     * The range of viewDate is not affected by min or max.
+     */
+    private _viewDate;
+    /**
+     * The date that serves as the basis for the current view.
+     */
+    get viewDate(): Date;
+    private _emitSelect;
+    private _emitSelecting;
+    private _canNavigateMonth;
+    private _navigateMonth;
+    private _handleCalendarClick;
+    private _handleMonthClick;
+    private _handleYearAndMonthPickerClick;
+    private _handleCalendarKeyDown;
+    private _handleYearAndMonthPickerKeyDown;
+    private _createYearAndMonthPickerContainer;
+    private _createYearAndMonthPickerButton;
+    private _createYearPicker;
+    private _createMonthPicker;
+    private _createDatePicker;
+    render(): TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this> & PropertyValues<{
+        _viewDate: Date;
+    }>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-calendar": DaikinCalendar;
+    }
+}