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

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

@@ -4,9 +4,10 @@ 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 ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,7 +28,6 @@ const cvaButton = classVarianceAuthority.cva(
     "font-daikinSerif",
     "font-bold",
     "rounded",
-    "px-3",
     "tracking-wide",
     "text-nowrap",
     "leading-[130%]",
@@ -67,34 +67,43 @@ const cvaButton = classVarianceAuthority.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 = classVarianceAuthority.cva([], {
+const cvaIcon = classVarianceAuthority.cva(["slotted:flex-none"], {
   variants: {
     size: {
       small: ["icon-size-4"],
-      medium: ["icon-size-6"]
+      medium: ["icon-size-6"],
+      large: ["icon-size-6"]
     }
   }
 });
-exports.DaikinButton = class DaikinButton extends ddsElement.DDSElement {
+exports.DaikinButton = class DaikinButton extends ddsFormElement.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() {
@@ -128,13 +137,15 @@ exports.DaikinButton = class DaikinButton extends ddsElement.DDSElement {
         ?disabled=${this.disabled}
         type=${this.type}
         role=${ifDefined_js.ifDefined(this.buttonRole ?? void 0)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined_js.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>
     `;
@@ -165,10 +176,18 @@ exports.DaikinButton.styles = lit.css`
       min-width: 3.75em;
       height: 3rem;
     }
+
+    :host([size="large"]) {
+      min-width: 4.25em;
+      height: 4.5rem;
+    }
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinButton.prototype, "variant", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinButton.prototype, "type", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinButton.prototype, "size", 2);
@@ -181,12 +200,15 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinButton.prototype, "href", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinButton.prototype, "type", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true, attribute: "button-role" })
 ], exports.DaikinButton.prototype, "buttonRole", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
+], exports.DaikinButton.prototype, "buttonAriaHaspopup", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+], exports.DaikinButton.prototype, "buttonAriaExpanded", 2);
 __decorateClass([
   decorators_js.query("a,button")
 ], exports.DaikinButton.prototype, "_focusableElement", 2);

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

@@ -1,13 +1,13 @@
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormSubmitElement } from "../../base/dds-form-element.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 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>;