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

package/dist/es/components/breadcrumb-item/daikin-breadcrumb-item.d.ts

@@ -1,10 +1,4 @@
 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.
  *
@@ -21,47 +15,40 @@ type LinkVariantProps = MergeVariantProps<typeof cvaLink>;
  *
  * ```html
  * <!-- See `daikin-breadcrumb` component for complete example. -->
- * <daikin-breadcrumb-item href="#">
- *   Breadcrumb Item 1
+ * <daikin-breadcrumb-item href="https://www.example.com">
+ *   Breadcrumb item
  * </daikin-breadcrumb-item>
  * ```
  */
 export declare class DaikinBreadcrumbItem extends LitElement {
     static styles: import('lit').CSSResult;
     /**
-     * Specify link href
+     * Specify link href.
      */
-    href: string;
+    href: string | null;
     /**
      * Specifies the display content.
      * If `ellipsis`, the "..." will be displayed instead of the link.
      * Set automatically by `daikin-breadcrumb`.
      */
-    variant: LinkVariantProps["variant"];
+    variant: "normal" | "current";
     /**
-     * Specify whether the link should be disabled
-     */
-    disabled: boolean;
-    /**
-     * Specify the link target
+     * Specify the link target.
      */
     target: string | null;
     /**
-     * Whether the slash after the link should shown.
+     * Whether or not to change the color of visited links.
      * 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;
+    showVisited: boolean;
     /**
-     * Whether the link should be hidden when ellipsis mode.
+     * _Internal use._
+     * Whether or not to display the divider on the right.
      * Set automatically by `daikin-breadcrumb`.
+     *
+     * @private
      */
-    hidden: boolean;
+    appendDivider: boolean;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {
@@ -69,4 +56,3 @@ declare global {
         "daikin-breadcrumb-item": DaikinBreadcrumbItem;
     }
 }
-export {};

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

@@ -1,8 +1,8 @@
-import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.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,88 +13,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 {
   constructor() {
     super(...arguments);
-    this.href = "";
+    this.href = null;
     this.variant = "normal";
-    this.disabled = false;
     this.target = null;
-    this.trailingSlash = false;
-    this.last = false;
-    this.hidden = 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: 8px;
-      flex-shrink: 0;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
@@ -102,21 +52,15 @@ __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);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinBreadcrumbItem.prototype, "last", 2);
+  property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], DaikinBreadcrumbItem.prototype, "showVisited", 2);
 __decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinBreadcrumbItem.prototype, "hidden", 2);
+  property({ type: Boolean, reflect: true, attribute: "append-divider" })
+], DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 DaikinBreadcrumbItem = __decorateClass([
   customElement("daikin-breadcrumb-item")
 ], DaikinBreadcrumbItem);

package/dist/es/components/breadcrumb-item/index.d.ts

@@ -1 +1 @@
-export * from './daikin-breadcrumb-item';
+export * from "./daikin-breadcrumb-item.js";

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

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
-import { ARIARole } from '../../lit-analyzer-types';
-import { MergeVariantProps } from '../../type-utils';
+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;
@@ -11,7 +11,7 @@ type ButtonVariantProps = MergeVariantProps<typeof cvaButton>;
  * 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.
@@ -44,7 +44,7 @@ export declare class DaikinButton extends LitElement {
      */
     color: ButtonVariantProps["color"];
     /**
-     * Whether the button is disabled.
+     * Specify the button disabled state.
      */
     disabled: boolean;
     /**
@@ -55,7 +55,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

@@ -3,7 +3,6 @@ import { css, unsafeCSS, 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";
-import "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -19,41 +18,41 @@ const cvaButton = cva(
     "inline-flex",
     "justify-center",
     "items-center",
-    "w-full",
-    "h-full",
+    "size-full",
     "font-daikinSerif",
     "font-bold",
     "rounded",
     "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]",
@@ -64,7 +63,7 @@ const cvaButton = cva(
       },
       size: {
         small: ["text-sm"],
-        medium: ["text-sm"]
+        medium: []
       }
     }
   }
@@ -101,9 +100,13 @@ let DaikinButton = class extends LitElement {
       )}
         aria-disabled=${ifDefined(linkDisabled ? "true" : void 0)}
       >
-        <slot name="left-icon"><span class="block -ml-1"></span></slot>
+        <slot name="left-icon" class="icon-size-6">
+          <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>
+        <slot name="right-icon" class="icon-size-6">
+          <span class="block -mr-1"></span>
+        </slot>
       </a>`;
     }
     return html`
@@ -113,9 +116,13 @@ let DaikinButton = class extends LitElement {
         type=${this.type}
         role=${ifDefined(this.buttonRole ?? void 0)}
       >
-        <slot name="left-icon"><span class="block -ml-1"></span></slot>
+        <slot name="left-icon" class="icon-size-6">
+          <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>
+        <slot name="right-icon" class="icon-size-6">
+          <span class="block -mr-1"></span>
+        </slot>
       </button>
     `;
   }
@@ -132,17 +139,17 @@ DaikinButton.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: inline-block;
+      display: inline-flex;
     }
 
     :host([size="small"]) {
-      min-width: 52px;
-      height: 32px;
+      min-width: 3.25em;
+      height: 2rem;
     }
 
     :host([size="medium"]) {
-      min-width: 60px;
-      height: 48px;
+      min-width: 3.75em;
+      height: 3rem;
     }
   `;
 __decorateClass([

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

@@ -1 +1 @@
-export * from './daikin-button';
+export * from "./daikin-button.js";

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

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * `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
+ *
+ * ```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 LitElement {
+    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,64 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.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",
+    "p-4",
+    "rounded-lg",
+    "bg-ddt-color-common-background-default"
+  ],
+  {
+    variants: {
+      outline: {
+        true: ["border", "border-ddt-color-divider"],
+        false: []
+      }
+    }
+  }
+);
+let DaikinCard = class extends LitElement {
+  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: flex;
+      width: fit-content;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCard.prototype, "outline", 2);
+DaikinCard = __decorateClass([
+  customElement("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,29 @@
+import { LitElement } from 'lit';
+/**
+ * `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
+ *
+ * ```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 LitElement {
+    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, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.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;
+};
+let DaikinCardFooter = class extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+DaikinCardFooter.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: flex-end;
+    }
+  `;
+DaikinCardFooter = __decorateClass([
+  customElement("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,31 @@
+import { LitElement } from 'lit';
+/**
+ * `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
+ *
+ * ```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 LitElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-card-header": DaikinCardHeader;
+    }
+}