@daikin-oss/design-system-web-components 0.3.2 → 0.5.0

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

@@ -1,7 +1,7 @@
-import { buttonColorBackgroundPrimaryActive, buttonColorBackgroundPrimaryFocus, buttonColorBackgroundPrimaryHover, buttonColorBackgroundPrimaryPress, buttonColorBackgroundPrimaryDisabled } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { property, query, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import tailwindStyles from "../../tailwind.css.js";
 import "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
@@ -14,200 +14,161 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const BUTTON_ICON_SIZE_MAP = {
-  default: "m",
-  condensed: "s"
-};
 const cvaButton = cva(
   [
     "inline-flex",
     "justify-center",
     "items-center",
-    "gap-2",
+    "w-full",
+    "h-full",
     "font-daikinSerif",
     "font-bold",
-    "rounded-lg",
+    "rounded",
+    "px-3",
     "tracking-wide",
     "text-nowrap",
-    "disabled:cursor-default",
-    "w-full",
-    "h-full"
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-system-state-focus",
+    "var-color-transparent/color-secondary",
+    "link-disabled:var-color-system-state-disabled/color-primary"
   ],
   {
     variants: {
-      intent: {
-        primary: [
-          "text-white",
-          "bg-[--buttonColorBackgroundPrimaryActive]",
-          "enabled:focus-visible:bg-[--buttonColorBackgroundPrimaryFocus]",
-          "enabled:hover:bg-[--buttonColorBackgroundPrimaryHover]",
-          "enabled:active:bg-[--buttonColorBackgroundPrimaryPress]",
-          "disabled:bg-[--buttonColorBackgroundPrimaryDisabled]",
-          "focus-visible:outline-none"
-        ],
-        secondary: [
-          "border-2",
-          "bg-white",
-          "text-daikinBlue-500",
-          "border-daikinBlue-500",
-          "enabled:hover:text-daikinBlue-300",
-          "enabled:hover:border-daikinBlue-300",
-          "enabled:active:text-daikinBlue-600",
-          "enabled:active:border-daikinBlue-600",
-          "enabled:focus-visible:text-daikinBlue-700",
-          "enabled:focus-visible:border-daikinBlue-700",
-          "disabled:border-daikinNeutral-300",
-          "disabled:text-daikinNeutral-400",
-          "disabled:border",
-          "focus-visible:outline-none"
+      color: {
+        default: [
+          "link-enabled:var-color-system-state-primary-active/color-primary",
+          "link-enabled:hover:var-color-system-state-primary-hover/color-primary",
+          "link-enabled:hover:var-color-system-state-primary-surface-hover/color-secondary",
+          "link-enabled:active:var-color-system-state-primary-press/color-primary",
+          "link-enabled:active:var-color-system-state-primary-surface-press/color-secondary"
         ],
-        tertiary: [
-          "text-daikinBlue-400",
-          "bg-none",
-          "border-none",
-          "shadow-none",
-          "enabled:hover:bg-daikinNeutral-100",
-          "disabled:bg-transparent",
-          "disabled:text-daikinNeutral-400"
-        ],
-        primaryDanger: [
-          "bg-daikinRed",
-          "text-white",
-          "enabled:hover:bg-daikinRed-400",
-          "enabled:focus-visible:bg-daikinRed-700",
-          "enabled:active:bg-daikinRed-700",
-          "disabled:bg-daikinNeutral-300",
-          "focus-visible:outline-none"
+        danger: [
+          "link-enabled:var-color-system-state-error-active/color-primary",
+          "link-enabled:hover:var-color-system-state-error-hover/color-primary",
+          "link-enabled:hover:var-color-system-state-error-surface-hover/color-secondary",
+          "link-enabled:active:var-color-system-state-error-press/color-primary",
+          "link-enabled:active:var-color-system-state-error-surface-press/color-secondary"
         ]
       },
+      variant: {
+        fill: ["text-system-element-text-inverse", "bg-[--color-primary]"],
+        outline: [
+          "border",
+          "text-[--color-primary]",
+          "bg-[--color-secondary]",
+          "border-[--color-primary]"
+        ],
+        ghost: ["text-[--color-primary]", "bg-[--color-secondary]"]
+      },
       size: {
-        default: ["px-4", "text-[14px]"],
-        condensed: ["px-[10px]", "text-[12px]"]
+        small: ["text-sm"],
+        medium: ["text-sm"]
       }
-    },
-    defaultVariants: {
-      intent: "primary",
-      size: "condensed"
     }
   }
 );
 let DaikinButton = class extends LitElement {
   constructor() {
-    super(...arguments);
-    this.variant = "primary";
+    super();
+    this.variant = "fill";
+    this.size = "medium";
+    this.color = "default";
     this.disabled = false;
-    this.rightIcon = null;
-    this.leftIcon = null;
-    this.href = "";
-    this.size = "default";
+    this.href = null;
     this.type = "button";
-    this.role = "button";
-    this.isLoading = false;
+    this.buttonRole = null;
+    this.addEventListener("click", (event) => {
+      if (this.disabled) {
+        event.stopImmediatePropagation();
+      }
+    });
   }
   render() {
-    const buttonClassName = cvaButton({
-      intent: this.variant,
+    const className = cvaButton({
+      variant: this.variant,
+      color: this.color,
       size: this.size
     });
-    const content = html`
-      ${this.leftIcon ? html`<daikin-icon
-            icon=${this.leftIcon}
-            size=${BUTTON_ICON_SIZE_MAP[this.size]}
-            color="current"
-          ></daikin-icon>` : null}
-      <slot></slot>
-      ${this.rightIcon ? html`<daikin-icon
-            icon=${this.rightIcon}
-            size=${BUTTON_ICON_SIZE_MAP[this.size]}
-            color="current"
-          ></daikin-icon>` : null}
-    `;
-    if (this.href) {
+    if (this.type === "link") {
+      const linkDisabled = this.disabled || this.href == null;
       return html`<a
-        href="${this.href}"
-        class="${buttonClassName}"
-        role="${this.role}"
+        class=${className}
+        href=${ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        role=${ifDefined(
+        this.buttonRole ?? (linkDisabled ? "link" : void 0)
+      )}
+        aria-disabled=${ifDefined(linkDisabled ? "true" : void 0)}
       >
-        ${content}
+        <slot name="left-icon"><span class="block -ml-1"></span></slot>
+        <span class="px-2"><slot></slot></span>
+        <slot name="right-icon"><span class="block -mr-1"></span></slot>
       </a>`;
     }
     return html`
       <button
-        class="${buttonClassName}"
-        ?disabled="${this.disabled}"
-        type="${this.type}"
-        role="${this.role}"
+        class=${className}
+        ?disabled=${this.disabled}
+        type=${this.type}
+        role=${ifDefined(this.buttonRole ?? void 0)}
       >
-        ${content}
+        <slot name="left-icon"><span class="block -ml-1"></span></slot>
+        <span class="px-2"><slot></slot></span>
+        <slot name="right-icon"><span class="block -mr-1"></span></slot>
       </button>
     `;
   }
   /**
-   * Focuses on the inner button.
+   * Focuses on the inner button or link.
    * @param options focus options
    */
   focus(options) {
-    var _a, _b;
-    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus(options);
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
   }
 };
 DaikinButton.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --buttonColorBackgroundPrimaryActive: ${unsafeCSS(
-  buttonColorBackgroundPrimaryActive
-)};
-      --buttonColorBackgroundPrimaryFocus: ${unsafeCSS(
-  buttonColorBackgroundPrimaryFocus
-)};
-      --buttonColorBackgroundPrimaryHover: ${unsafeCSS(
-  buttonColorBackgroundPrimaryHover
-)};
-      --buttonColorBackgroundPrimaryPress: ${unsafeCSS(
-  buttonColorBackgroundPrimaryPress
-)};
-      --buttonColorBackgroundPrimaryDisabled: ${unsafeCSS(
-  buttonColorBackgroundPrimaryDisabled
-)};
-
       display: inline-block;
-      width: fit-content;
-      min-height: 42px;
-      height: 1px;
     }
 
-    :host([size="condensed"]) {
-      min-height: 32px;
+    :host([size="small"]) {
+      min-width: 52px;
+      height: 32px;
+    }
+
+    :host([size="medium"]) {
+      min-width: 60px;
+      height: 48px;
     }
   `;
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinButton.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinButton.prototype, "disabled", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinButton.prototype, "rightIcon", 2);
+], DaikinButton.prototype, "size", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinButton.prototype, "leftIcon", 2);
+], DaikinButton.prototype, "color", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], DaikinButton.prototype, "href", 2);
+  property({ type: Boolean, reflect: true })
+], DaikinButton.prototype, "disabled", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinButton.prototype, "size", 2);
+], DaikinButton.prototype, "href", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinButton.prototype, "type", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], DaikinButton.prototype, "role", 2);
+  property({ type: String, reflect: true, attribute: "button-role" })
+], DaikinButton.prototype, "buttonRole", 2);
 __decorateClass([
-  property({ type: Boolean })
-], DaikinButton.prototype, "isLoading", 2);
+  query("a,button")
+], DaikinButton.prototype, "_focusableElement", 2);
 DaikinButton = __decorateClass([
   customElement("daikin-button")
 ], DaikinButton);

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

@@ -1,12 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-declare const cvaCheckbox: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaLabel: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type CheckboxVariantProps = MergeVariantProps<typeof cvaCheckbox | typeof cvaLabel>;
 /**
  * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
  * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
@@ -16,56 +8,54 @@ type CheckboxVariantProps = MergeVariantProps<typeof cvaCheckbox | typeof cvaLab
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
+ * ```
+ *
  * ```html
  * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
  * ```
  */
 export declare class DaikinCheckbox extends LitElement {
     static readonly styles: import('lit').CSSResult;
-    private _handleClick;
-    static readonly formAssociated = true;
-    private _internals;
-    private _updateFormValue;
-    private _input;
-    get checked(): boolean;
-    private _handleChange;
-    /**
-     * Specify the label text for check box
-     */
-    label: string;
     /**
-     * Specify the component size
+     * Form name of the checkbox.
      */
-    size: CheckboxVariantProps["size"];
+    name: string;
     /**
-     * Specify the label position
-     * when `left` the label will be in left of checkbox, when `right` label will be in right of checkbox
+     * Form value of the checkbox.
      */
-    labelPosition: "left" | "right";
+    value: string;
     /**
-     * Specify whether the Checkbox should be disabled
+     * Label text for the checkbox.
      */
-    disabled: boolean;
+    label: string;
     /**
-     * Specify whether the checkbox is read only
+     * Label position.
+     * - `right` (default): The label will be placed to the right of the checkbox.
+     * - `hidden`: The label will not be shown.
      */
-    readonly: boolean;
+    labelPosition: "right" | "hidden";
     /**
-     * Specify whether the checkbox is be checked
+     * Checked state of the checkbox.
      */
     checkState: "unchecked" | "indeterminate" | "checked";
     /**
-     * The form name.
+     * Whether the checkbox is disabled.
      */
-    name: string;
-    /**
-     * The value.
-     */
-    value: string;
+    disabled: boolean;
+    get checked(): boolean;
     /**
-     * Specify whether the Checkbox is in a error state
+     * A property-only accessor for `checkState` provided for convenience.
+     * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.
+     * _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
      */
-    error: boolean;
+    set checked(value: boolean);
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _handleClick;
+    private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
 }
@@ -74,4 +64,3 @@ declare global {
         "daikin-checkbox": DaikinCheckbox;
     }
 }
-export {};