@daikin-oss/design-system-web-components 0.6.0 → 1.0.0

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

@@ -1,8 +1,11 @@
-import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, 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";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
+import "../link/daikin-link.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,87 +16,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLink = 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: []
-      }
-    }
-  }
-);
-let DaikinBreadcrumbItem = class extends LitElement {
+let DaikinBreadcrumbItem = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.href = "";
+    this.href = null;
     this.variant = "normal";
-    this.disabled = false;
     this.target = null;
-    this.trailingSlash = false;
-    this.last = false;
+    this.showVisited = false;
+    this.appendDivider = false;
   }
   render() {
-    const slash = this.trailingSlash ? html`<span
-          class="text-daikinNeutral-800 font-daikinSerif"
+    const link = this.variant === "normal" ? html`<daikin-link
+            class="text-sm"
+            href=${ifDefined(this.href ?? 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"
+            role="link"
+            ><slot></slot
+          ></a>`;
+    const divider = this.appendDivider ? html`<span
+          class="text-ddt-color-common-text-primary mx-2 text-sm"
           aria-hidden="true"
-        >
-          /
-        </span>` : null;
-    const isDisabled = this.last || this.disabled;
-    return html`
-      ${this.variant === "normal" ? html`<a
-            class=${cvaLink({ variant: this.variant, disabled: isDisabled })}
-            href=${ifDefined(!isDisabled && this.href || void 0)}
-            target=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
-    ifDefined(this.target)}
-            aria-disabled=${ifDefined(isDisabled || void 0)}
-            aria-current=${ifDefined(this.last || void 0)}
-          >
-            <slot></slot>
-          </a>` : html`<span class=${cvaLink(this)} aria-label="…">
-            <span>. . .</span>
-          </span> `}
-      ${slash}
-    `;
+          >/</span
+        >` : nothing;
+    return html`<div class="inline" role="listitem">${link}${divider}</div>`;
   }
 };
 DaikinBreadcrumbItem.styles = css`
     ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      flex-shrink: 0;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
@@ -101,20 +55,17 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinBreadcrumbItem.prototype, "variant", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinBreadcrumbItem.prototype, "disabled", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinBreadcrumbItem.prototype, "target", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
-], DaikinBreadcrumbItem.prototype, "trailingSlash", 2);
+  property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], DaikinBreadcrumbItem.prototype, "showVisited", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinBreadcrumbItem.prototype, "last", 2);
+  property({ type: Boolean, reflect: true, attribute: "append-divider" })
+], DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 DaikinBreadcrumbItem = __decorateClass([
-  customElement("daikin-breadcrumb-item")
+  ddsElement("daikin-breadcrumb-item")
 ], DaikinBreadcrumbItem);
 export {
   DaikinBreadcrumbItem

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaButton: (props?: ({
@@ -6,12 +6,15 @@ declare const cvaButton: (props?: ({
     variant?: "fill" | "outline" | "ghost" | null | undefined;
     size?: "small" | "medium" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
+declare const cvaIcon: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ButtonVariantProps = MergeVariantProps<typeof cvaButton | typeof cvaIcon>;
 /**
  * The button component is a versatile UI element that triggers actions or submits forms when clicked.
  * It functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.
  *
- * @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,
+ * @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 `<a>` or `<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.
@@ -29,7 +32,7 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
  * </daikin-button>
  * ```
  */
-export declare class DaikinButton extends LitElement {
+export declare class DaikinButton extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
@@ -55,7 +58,7 @@ export declare class DaikinButton extends LitElement {
     href: string | null;
     /**
      * Type of the button.
-     * If `"link"` is specified, the button will be rendered as an `<a>` element or `<span>` element (if `disabled` is `true`).
+     * If `"link"` is specified, the button will be rendered as an `<a>` element.
      */
     type: "button" | "submit" | "reset" | "link";
     /**

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

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, 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 { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,33 +28,34 @@ const cvaButton = cva(
     "px-3",
     "tracking-wide",
     "text-nowrap",
+    "leading-[130%]",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-2",
-    "focus-visible:outline-system-state-focus",
+    "focus-visible:outline-ddt-color-common-border-focus",
     "var-color-transparent/color-secondary",
-    "link-disabled:var-color-system-state-disabled/color-primary"
+    "link-disabled:var-color-ddt-color-common-disabled/color-primary"
   ],
   {
     variants: {
       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"
+          "link-enabled:var-color-ddt-color-common-brand-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-brand-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-brand-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-brand-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-brand-press/color-secondary"
         ],
         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"
+          "link-enabled:var-color-ddt-color-common-danger-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-danger-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-danger-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-danger-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-danger-press/color-secondary"
         ]
       },
       variant: {
-        fill: ["text-system-element-text-inverse", "bg-[--color-primary]"],
+        fill: ["text-ddt-color-common-text-inverse", "bg-[--color-primary]"],
         outline: [
           "border",
           "text-[--color-primary]",
@@ -62,12 +66,20 @@ const cvaButton = cva(
       },
       size: {
         small: ["text-sm"],
-        medium: ["text-sm"]
+        medium: []
       }
     }
   }
 );
-let DaikinButton = class extends LitElement {
+const cvaIcon = cva([], {
+  variants: {
+    size: {
+      small: ["icon-size-4"],
+      medium: ["icon-size-6"]
+    }
+  }
+});
+let DaikinButton = class extends DDSElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -78,7 +90,7 @@ let DaikinButton = class extends LitElement {
     this.type = "button";
     this.buttonRole = null;
     this.addEventListener("click", (event) => {
-      if (this.disabled) {
+      if (this.disabled || this.type === "link" && this.href == null) {
         event.stopImmediatePropagation();
       }
     });
@@ -115,11 +127,11 @@ let DaikinButton = class extends LitElement {
         type=${this.type}
         role=${ifDefined(this.buttonRole ?? void 0)}
       >
-        <slot name="left-icon" class="icon-size-6">
+        <slot name="left-icon" class=${cvaIcon({ size: this.size })}>
           <span class="block -ml-1"></span>
         </slot>
         <span class="px-2"><slot></slot></span>
-        <slot name="right-icon" class="icon-size-6">
+        <slot name="right-icon" class=${cvaIcon({ size: this.size })}>
           <span class="block -mr-1"></span>
         </slot>
       </button>
@@ -138,7 +150,8 @@ DaikinButton.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: inline-block;
+      display: inline-flex;
+      max-width: 100%;
     }
 
     :host([size="small"]) {
@@ -176,7 +189,7 @@ __decorateClass([
   query("a,button")
 ], DaikinButton.prototype, "_focusableElement", 2);
 DaikinButton = __decorateClass([
-  customElement("daikin-button")
+  ddsElement("daikin-button")
 ], DaikinButton);
 export {
   DaikinButton

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

@@ -0,0 +1,48 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-card` is a component for display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
+ *
+ * Hierarchy:
+ * - `daikin-card` > `daikin-card-header`
+ * - `daikin-card` > `daikin-card-footer`
+ *
+ * @slot - A slot for card header, body, card footer. Place `daikin-card-header`, custom body content, `daikin-card-footer` here in order.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card/index.js";
+ * import "@daikin-oss/design-system-web-components/components/card-footer/index.js";
+ * import "@daikin-oss/design-system-web-components/components/card-header/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-card outline>
+ *   <daikin-card-header>
+ *     <daikin-card-header>
+ *       <daikin-icon slot="left-icon" icon="alarm" size="xl" color="current"></daikin-icon>
+ *       <span slot="description">Description</span>
+ *       <span>Card Title</span>
+ *       <span slot="description">Description</span>
+ *     </daikin-card-header>
+ *   </daikin-card-header>
+ *   <p>Card body.</p>
+ *   <daikin-card-footer>
+ *     <daikin-button size="small">Button</daikin-button>
+ *   </daikin-card-footer>
+ * </daikin-card>
+ * ```
+ */
+export declare class DaikinCard extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify whether the card border to be visible or not.
+     */
+    outline: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-card": DaikinCard;
+    }
+}

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

@@ -0,0 +1,68 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+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 cvaContainer = cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-4",
+    "size-full",
+    "p-4",
+    "rounded-lg",
+    "bg-ddt-color-common-background-default"
+  ],
+  {
+    variants: {
+      outline: {
+        true: ["border", "border-ddt-color-divider"],
+        false: []
+      }
+    }
+  }
+);
+let DaikinCard = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.outline = false;
+  }
+  render() {
+    return html`<div
+      class=${cvaContainer({
+      outline: this.outline
+    })}
+    >
+      <slot class="text-ddt-color-common-text-primary"></slot>
+    </div>`;
+  }
+};
+DaikinCard.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCard.prototype, "outline", 2);
+DaikinCard = __decorateClass([
+  ddsElement("daikin-card")
+], DaikinCard);
+export {
+  DaikinCard
+};

package/dist/es/components/card/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-card.js";

package/dist/es/components/card/index.js

@@ -0,0 +1,4 @@
+import { DaikinCard } from "./daikin-card.js";
+export {
+  DaikinCard
+};

package/dist/es/components/card-footer/daikin-card-footer.d.ts

@@ -0,0 +1,33 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-card-footer` is used to represent footer of the card component, and is used as a child element of the `daikin-card` component.
+ *
+ * Hierarchy:
+ * - `daikin-card` > `daikin-card-footer`
+ *
+ * @slot A slot for card footer action element. Place a `daikin-button` or `daikin-link` element here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card-footer/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-card` component for complete example. -->
+ * <daikin-card-footer>
+ *  <daikin-button size="small" color="default">
+ *    Button
+ *  </daikin-button>
+ * </daikin-card-footer>
+ * ```
+ */
+export declare class DaikinCardFooter extends DDSElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-card-footer": DaikinCardFooter;
+    }
+}

package/dist/es/components/card-footer/daikin-card-footer.js

@@ -0,0 +1,34 @@
+import { css, unsafeCSS, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+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 = decorator(result) || result;
+  return result;
+};
+let DaikinCardFooter = class extends DDSElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+DaikinCardFooter.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: flex-end;
+    }
+  `;
+DaikinCardFooter = __decorateClass([
+  ddsElement("daikin-card-footer")
+], DaikinCardFooter);
+export {
+  DaikinCardFooter
+};

package/dist/es/components/card-footer/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-card-footer.js";

package/dist/es/components/card-footer/index.js

@@ -0,0 +1,4 @@
+import { DaikinCardFooter } from "./daikin-card-footer.js";
+export {
+  DaikinCardFooter
+};

package/dist/es/components/card-header/daikin-card-header.d.ts

@@ -0,0 +1,35 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-card-header` is used to represent header of the card component, and is used as a child element of the `daikin-card` component.
+ *
+ * Hierarchy:
+ * - `daikin-card` > `daikin-card-header`
+ *
+ * @slot description - An optional slot for description.
+ * @slot left-icon - An optional slot for an icon to be placed to the left of the text. Place a `daikin-icon` element or something similar.
+ * @slot - A slot for card title.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card-header/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-card` component for complete example. -->
+ * <daikin-card-header>
+ *   <daikin-icon slot="left-icon" icon="alarm" size="xl" color="current"></daikin-icon>
+ *   <span slot="description">Description</span>
+ *   <span>Card Title</span>
+ * </daikin-card-header>
+ * ```
+ */
+export declare class DaikinCardHeader extends DDSElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-card-header": DaikinCardHeader;
+    }
+}

package/dist/es/components/card-header/daikin-card-header.js

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+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 = decorator(result) || result;
+  return result;
+};
+const cvaTitle = cva([
+  "flex-none",
+  "text-ddt-color-common-text-primary",
+  "font-daikinSerif",
+  "text-base",
+  "leading-[1.3]",
+  "not-italic",
+  "font-bold"
+])();
+const cvaDescription = cva([
+  "flex-none",
+  "text-ddt-color-common-text-secondary",
+  "font-daikinSerif",
+  "text-sm",
+  "leading-normal",
+  "not-italic",
+  "font-normal"
+])();
+let DaikinCardHeader = class extends DDSElement {
+  render() {
+    return html`<div class="flex w-full gap-1">
+      <slot
+        name="left-icon"
+        class="flex-none icon-size-6 text-ddt-color-common-text-primary"
+      ></slot>
+      <div class="flex-1 flex flex-col pt-0.5 gap-1">
+        <slot class=${cvaTitle}></slot>
+        <slot name="description" class=${cvaDescription}></slot>
+      </div>
+    </div>`;
+  }
+};
+DaikinCardHeader.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+DaikinCardHeader = __decorateClass([
+  ddsElement("daikin-card-header")
+], DaikinCardHeader);
+export {
+  DaikinCardHeader
+};

package/dist/es/components/card-header/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-card-header.js";

package/dist/es/components/card-header/index.js

@@ -0,0 +1,4 @@
+import { DaikinCardHeader } from "./daikin-card-header.js";
+export {
+  DaikinCardHeader
+};