@daikin-oss/design-system-web-components 0.3.1 → 0.4.0

package/dist/cjs-dev/components/breadcrumb-item/daikin-breadcrumb-item.cjs

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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 tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaLink = classVarianceAuthority.cva(
+  [
+    "h-8",
+    "font-normal",
+    "not-italic",
+    "leading-8",
+    "text-sm",
+    "text-daikinBlue-500",
+    "outline-none",
+    "font-daikinSerif"
+  ],
+  {
+    variants: {
+      variant: {
+        normal: [
+          "hover:text-daikinBlue-300",
+          "active:text-daikinNeutral-800",
+          "focus-visible:text-daikinBlue-700"
+        ],
+        ellipsis: ["hover:text-daikinBlue-300"]
+      },
+      disabled: {
+        true: [
+          "!text-daikinNeutral-800",
+          "pointer-events-none",
+          "cursor-default",
+          "focus-visible:!text-daikinNeutral-800"
+        ],
+        false: []
+      }
+    }
+  }
+);
+exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.href = "";
+    this.variant = "normal";
+    this.disabled = false;
+    this.target = null;
+    this.trailingSlash = false;
+    this.last = false;
+    this.hidden = false;
+  }
+  render() {
+    const slash = this.trailingSlash ? lit.html`<span
+          class="text-daikinNeutral-800 font-daikinSerif"
+          aria-hidden="true"
+        >
+          /
+        </span>` : null;
+    const isDisabled = this.last || this.disabled;
+    return lit.html`
+      ${this.variant === "normal" ? lit.html`<a
+            class=${cvaLink({ variant: this.variant, disabled: isDisabled })}
+            href=${ifDefined_js.ifDefined(!isDisabled && this.href || void 0)}
+            target=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.target)}
+            aria-disabled=${ifDefined_js.ifDefined(isDisabled || void 0)}
+            aria-current=${ifDefined_js.ifDefined(this.last || void 0)}
+          >
+            <slot></slot>
+          </a>` : lit.html`<span class=${cvaLink(this)} aria-label="…">
+            <span>. . .</span>
+          </span> `}
+      ${slash}
+    `;
+  }
+};
+exports.DaikinBreadcrumbItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinBreadcrumbItem.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinBreadcrumbItem.prototype, "variant", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinBreadcrumbItem.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinBreadcrumbItem.prototype, "target", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
+], exports.DaikinBreadcrumbItem.prototype, "trailingSlash", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinBreadcrumbItem.prototype, "last", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinBreadcrumbItem.prototype, "hidden", 2);
+exports.DaikinBreadcrumbItem = __decorateClass([
+  decorators_js.customElement("daikin-breadcrumb-item")
+], exports.DaikinBreadcrumbItem);

package/dist/cjs-dev/components/breadcrumb-item/daikin-breadcrumb-item.d.ts

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaLink: (props?: ({
+    variant?: "normal" | "ellipsis" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type LinkVariantProps = MergeVariantProps<typeof cvaLink>;
+/**
+ * The `daikin-breadcrumb-item` is a component used to represent each item of the breadcrumb list, and is used as a child element of the `daikin-breadcrumb` component.
+ *
+ * Hierarchy:
+ * - `daikin-breadcrumb` > `daikin-breadcrumb-item`
+ *
+ * @slot - A slot for the breadcrumb item content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/breadcrumb-item/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-breadcrumb` component for complete example. -->
+ * <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 1
+ * </daikin-breadcrumb-item>
+ * ```
+ */
+export declare class DaikinBreadcrumbItem extends LitElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify link href
+     */
+    href: string;
+    /**
+     * Specifies the display content.
+     * If `ellipsis`, the "..." will be displayed instead of the link.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    variant: LinkVariantProps["variant"];
+    /**
+     * Specify whether the link should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify the link target
+     */
+    target: string | null;
+    /**
+     * Whether the slash after the link should shown.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    trailingSlash: boolean;
+    /**
+     * Whether the item is the last one.
+     * When set to `true`, the item will also be considered to be the current page and the link will be disabled.
+     * Automatically set by `daikin-breadcrumb` component.
+     */
+    last: boolean;
+    /**
+     * Whether the link should be hidden when ellipsis mode.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    hidden: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-breadcrumb-item": DaikinBreadcrumbItem;
+    }
+}
+export {};

package/dist/cjs-dev/components/breadcrumb-item/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinBreadcrumbItem = require("./daikin-breadcrumb-item.cjs");
+Object.defineProperty(exports, "DaikinBreadcrumbItem", {
+  enumerable: true,
+  get: () => daikinBreadcrumbItem.DaikinBreadcrumbItem
+});

package/dist/cjs-dev/components/breadcrumb-item/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-breadcrumb-item';

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
 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 tailwind = require("../../tailwind.css.cjs");
 require("../icon/daikin-icon.cjs");
 var __defProp = Object.defineProperty;
@@ -16,200 +16,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 = classVarianceAuthority.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-[#0081C0]",
+    "var-color-transparent/color-secondary",
+    "link-disabled:var-color-daikinNeutral-400/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-daikinBlue-500/color-primary",
+          "link-enabled:hover:var-color-[#0081C0]/color-primary",
+          "link-enabled:hover:var-color-[#DDF3FC]/color-secondary",
+          "link-enabled:active:var-color-[#00689A]/color-primary",
+          "link-enabled:active:var-color-[#BBE7F9]/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-[#D80C18]/color-primary",
+          "link-enabled:hover:var-color-[#B90A15]/color-primary",
+          "link-enabled:hover:var-color-[#FDD9DB]/color-secondary",
+          "link-enabled:active:var-color-[#9A0911]/color-primary",
+          "link-enabled:active:var-color-[#FBB3B7]/color-secondary"
         ]
       },
+      variant: {
+        fill: ["text-white", "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"
     }
   }
 );
 exports.DaikinButton = class DaikinButton extends lit.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 = lit.html`
-      ${this.leftIcon ? lit.html`<daikin-icon
-            icon=${this.leftIcon}
-            size=${BUTTON_ICON_SIZE_MAP[this.size]}
-            color="current"
-          ></daikin-icon>` : null}
-      <slot></slot>
-      ${this.rightIcon ? lit.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 lit.html`<a
-        href="${this.href}"
-        class="${buttonClassName}"
-        role="${this.role}"
+        class=${className}
+        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        role=${ifDefined_js.ifDefined(
+        this.buttonRole ?? (linkDisabled ? "link" : void 0)
+      )}
+        aria-disabled=${ifDefined_js.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 lit.html`
       <button
-        class="${buttonClassName}"
-        ?disabled="${this.disabled}"
-        type="${this.type}"
-        role="${this.role}"
+        class=${className}
+        ?disabled=${this.disabled}
+        type=${this.type}
+        role=${ifDefined_js.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);
   }
 };
 exports.DaikinButton.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      --buttonColorBackgroundPrimaryActive: ${lit.unsafeCSS(
-  variables_js.buttonColorBackgroundPrimaryActive
-)};
-      --buttonColorBackgroundPrimaryFocus: ${lit.unsafeCSS(
-  variables_js.buttonColorBackgroundPrimaryFocus
-)};
-      --buttonColorBackgroundPrimaryHover: ${lit.unsafeCSS(
-  variables_js.buttonColorBackgroundPrimaryHover
-)};
-      --buttonColorBackgroundPrimaryPress: ${lit.unsafeCSS(
-  variables_js.buttonColorBackgroundPrimaryPress
-)};
-      --buttonColorBackgroundPrimaryDisabled: ${lit.unsafeCSS(
-  variables_js.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([
-  decorators_js.property({ type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinButton.prototype, "variant", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinButton.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinButton.prototype, "rightIcon", 2);
+], exports.DaikinButton.prototype, "size", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinButton.prototype, "leftIcon", 2);
+], exports.DaikinButton.prototype, "color", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinButton.prototype, "href", 2);
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinButton.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinButton.prototype, "size", 2);
+], 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 })
-], exports.DaikinButton.prototype, "role", 2);
+  decorators_js.property({ type: String, reflect: true, attribute: "button-role" })
+], exports.DaikinButton.prototype, "buttonRole", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean })
-], exports.DaikinButton.prototype, "isLoading", 2);
+  decorators_js.query("a,button")
+], exports.DaikinButton.prototype, "_focusableElement", 2);
 exports.DaikinButton = __decorateClass([
   decorators_js.customElement("daikin-button")
 ], exports.DaikinButton);

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

@@ -1,11 +1,10 @@
 import { LitElement } from 'lit';
 import { ARIARole } from '../../lit-analyzer-types';
 import { MergeVariantProps } from '../../type-utils';
-import { IconType } from '../icon/daikin-icon';
-
 declare const cvaButton: (props?: ({
-    intent?: "primary" | "secondary" | "tertiary" | "primaryDanger" | null | undefined;
-    size?: "default" | "condensed" | null | undefined;
+    color?: "default" | "danger" | null | undefined;
+    variant?: "fill" | "outline" | "ghost" | null | undefined;
+    size?: "small" | "medium" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
 /**
@@ -15,9 +14,15 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
  * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,
  *
  * @slot - A slot for the button content.
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
+ * @slot right-icon - A slot for an icon to be placed to the right of the text. Place `daikin-icon` or something similar.
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/button/index.js";
+ * ```
+ *
  * ```html
  * <daikin-button>
  *   Button label
@@ -27,47 +32,44 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
 export declare class DaikinButton extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Type of variant.
-     */
-    variant: ButtonVariantProps["intent"];
-    /**
-     * `true` if the button should be disabled.
+     * Variant of the button.
      */
-    disabled: boolean;
-    /**
-     * Set a icon in the right of button label.
-     */
-    rightIcon: IconType | null;
+    variant: ButtonVariantProps["variant"];
     /**
-     * Set a icon in the left of button label.
+     * Size of the button.
      */
-    leftIcon: IconType | null;
+    size: "small" | "medium";
     /**
-     * Link `href`. If present, this button is rendered as `<a>`.
+     * Color of the button.
      */
-    href: string;
+    color: ButtonVariantProps["color"];
     /**
-     * Specify the button size.
+     * Whether the button is disabled.
      */
-    size: ButtonVariantProps["size"];
+    disabled: boolean;
     /**
-     * Specify the button type.
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * 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.
      */
-    type: "button" | "submit" | "reset";
+    href: string | null;
     /**
-     * Specify the button role.
+     * Type of the button.
+     * If `"link"` is specified, the button will be rendered as an `<a>` element or `<span>` element (if `disabled` is `true`).
      */
-    role: ARIARole;
+    type: "button" | "submit" | "reset" | "link";
     /**
-     * Specify whether the button is loading.
+     * Optional ARIA role of the button.
      */
-    isLoading: boolean;
+    buttonRole: ARIARole | null;
+    private _focusableElement;
+    constructor();
     render(): import('lit-html').TemplateResult<1>;
     /**
-     * Focuses on the inner button.
+     * Focuses on the inner button or link.
      * @param options focus options
      */
-    focus(options?: FocusOptions | undefined): void;
+    focus(options?: FocusOptions): void;
 }
 declare global {
     interface HTMLElementTagNameMap {