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

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

@@ -1,10 +1,10 @@
 "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");
+require("../link/daikin-link.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,88 +15,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   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.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 ? lit.html`<span
-          class="text-daikinNeutral-800 font-daikinSerif"
+    const link = this.variant === "normal" ? lit.html`<daikin-link
+            class="text-sm"
+            href=${ifDefined_js.ifDefined(this.href ?? void 0)}
+            ?show-visited=${this.showVisited}
+            ><slot></slot
+          ></daikin-link>` : lit.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 ? lit.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 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}
-    `;
+          >/</span
+        >` : lit.nothing;
+    return lit.html`<div class="inline" role="listitem">${link}${divider}</div>`;
   }
 };
 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 })
@@ -104,21 +54,15 @@ __decorateClass([
 __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);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], exports.DaikinBreadcrumbItem.prototype, "showVisited", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinBreadcrumbItem.prototype, "hidden", 2);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "append-divider" })
+], exports.DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 exports.DaikinBreadcrumbItem = __decorateClass([
   decorators_js.customElement("daikin-breadcrumb-item")
 ], exports.DaikinBreadcrumbItem);

package/dist/cjs-dev/components/breadcrumb-item/{daikin-breadcrumb-item.d.ts → daikin-breadcrumb-item.d.cts}

@@ -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/cjs-dev/components/breadcrumb-item/index.d.cts

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

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

@@ -5,7 +5,6 @@ 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;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,41 +20,41 @@ const cvaButton = classVarianceAuthority.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]",
@@ -66,7 +65,7 @@ const cvaButton = classVarianceAuthority.cva(
       },
       size: {
         small: ["text-sm"],
-        medium: ["text-sm"]
+        medium: []
       }
     }
   }
@@ -103,9 +102,13 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
       )}
         aria-disabled=${ifDefined_js.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 lit.html`
@@ -115,9 +118,13 @@ exports.DaikinButton = class DaikinButton extends lit.LitElement {
         type=${this.type}
         role=${ifDefined_js.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>
     `;
   }
@@ -134,17 +141,17 @@ exports.DaikinButton.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :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/{cjs/components/button/daikin-button.d.ts → cjs-dev/components/button/daikin-button.d.cts}

@@ -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.cjs";
+import { MergeVariantProps } from "../../type-utils.cjs";
 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/cjs-dev/components/button/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-button.cjs";

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

@@ -0,0 +1,63 @@
+"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 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 cvaContainer = classVarianceAuthority.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: []
+      }
+    }
+  }
+);
+exports.DaikinCard = class DaikinCard extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.outline = false;
+  }
+  render() {
+    return lit.html`<div
+      class=${cvaContainer({
+      outline: this.outline
+    })}
+    >
+      <slot class="text-ddt-color-common-text-primary"></slot>
+    </div>`;
+  }
+};
+exports.DaikinCard.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      width: fit-content;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCard.prototype, "outline", 2);
+exports.DaikinCard = __decorateClass([
+  decorators_js.customElement("daikin-card")
+], exports.DaikinCard);

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

@@ -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/cjs-dev/components/card/index.cjs

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

package/dist/cjs-dev/components/card/index.d.cts

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

package/dist/cjs-dev/components/card-footer/daikin-card-footer.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.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;
+};
+exports.DaikinCardFooter = class DaikinCardFooter extends lit.LitElement {
+  render() {
+    return lit.html`<slot></slot>`;
+  }
+};
+exports.DaikinCardFooter.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: flex-end;
+    }
+  `;
+exports.DaikinCardFooter = __decorateClass([
+  decorators_js.customElement("daikin-card-footer")
+], exports.DaikinCardFooter);

package/dist/cjs-dev/components/card-footer/daikin-card-footer.d.cts

@@ -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/cjs-dev/components/card-footer/index.cjs

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

package/dist/cjs-dev/components/card-footer/index.d.cts

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

package/dist/cjs-dev/components/card-header/daikin-card-header.cjs

@@ -0,0 +1,59 @@
+"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 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 cvaTitle = classVarianceAuthority.cva([
+  "flex-none",
+  "text-ddt-color-common-text-primary",
+  "font-daikinSerif",
+  "text-base",
+  "leading-[1.3]",
+  "not-italic",
+  "font-bold"
+])();
+const cvaDescription = classVarianceAuthority.cva([
+  "flex-none",
+  "text-ddt-color-common-text-secondary",
+  "font-daikinSerif",
+  "text-sm",
+  "leading-normal",
+  "not-italic",
+  "font-normal"
+])();
+exports.DaikinCardHeader = class DaikinCardHeader extends lit.LitElement {
+  render() {
+    return lit.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-[1px]">
+        <slot class=${cvaTitle}></slot>
+        <slot name="description" class=${cvaDescription}></slot>
+      </div>
+    </div>`;
+  }
+};
+exports.DaikinCardHeader.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+exports.DaikinCardHeader = __decorateClass([
+  decorators_js.customElement("daikin-card-header")
+], exports.DaikinCardHeader);