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

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

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+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;
+};
+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 LitElement {
+  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-[1px]">
+        <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([
+  customElement("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
+};

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

@@ -15,12 +15,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 const CHECKBOX_CLASS_NAME = cva([
   "block",
   "size-4",
-  "border-system-state-neutral-active",
+  "border-ddt-color-common-neutral-default",
   "border-2",
   "rounded-sm",
   "relative",
   "appearance-none",
-  "before:text-system-element-text-inverse",
+  "before:text-ddt-color-common-text-inverse",
   "before:absolute",
   "before:m-auto",
   "before:inset-0",
@@ -30,37 +30,37 @@ const CHECKBOX_CLASS_NAME = cva([
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-system-state-focus",
-  "enabled:group-hover:border-system-state-neutral-hover",
-  "enabled:group-hover:bg-system-background-surface-hover",
-  "enabled:group-active:border-system-state-neutral-press",
-  "enabled:group-active:bg-system-background-surface-press",
-  "enabled:checked:border-system-state-primary-active",
-  "enabled:checked:bg-system-state-primary-active",
-  "enabled:checked:group-hover:bg-system-state-primary-hover",
-  "enabled:checked:group-hover:border-system-state-primary-hover",
-  "enabled:checked:group-hover:before:text-system-element-text-inverse",
-  "enabled:checked:group-active:bg-system-state-primary-press",
-  "enabled:checked:group-active:border-system-state-primary-press",
-  "enabled:checked:group-active:before:text-system-element-text-inverse",
-  "enabled:indeterminate:bg-system-state-primary-active",
-  "enabled:indeterminate:border-system-state-primary-active",
-  "enabled:indeterminate:group-hover:bg-system-state-primary-hover",
-  "enabled:indeterminate:group-hover:border-system-state-primary-hover",
-  "enabled:indeterminate:group-hover:before:text-system-element-text-inverse",
-  "enabled:indeterminate:group-active:bg-system-state-primary-press",
-  "enabled:indeterminate:group-active:border-system-state-primary-press",
-  "enabled:indeterminate:group-active:before:text-system-element-text-inverse",
-  "disabled:border-system-state-disabled",
-  "disabled:bg-system-element-text-inverse",
-  "disabled:checked:bg-system-state-disabled",
-  "disabled:indeterminate:bg-system-state-disabled"
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:group-hover:border-ddt-color-common-neutral-hover",
+  "enabled:group-hover:bg-ddt-color-common-surface-hover",
+  "enabled:group-active:border-ddt-color-common-neutral-press",
+  "enabled:group-active:bg-ddt-color-common-surface-press",
+  "enabled:checked:border-ddt-color-common-brand-default",
+  "enabled:checked:bg-ddt-color-common-brand-default",
+  "enabled:checked:group-hover:bg-ddt-color-common-brand-hover",
+  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
+  "enabled:checked:group-hover:before:text-ddt-color-common-text-inverse",
+  "enabled:checked:group-active:bg-ddt-color-common-brand-press",
+  "enabled:checked:group-active:border-ddt-color-common-brand-press",
+  "enabled:checked:group-active:before:text-ddt-color-common-text-inverse",
+  "enabled:indeterminate:bg-ddt-color-common-brand-default",
+  "enabled:indeterminate:border-ddt-color-common-brand-default",
+  "enabled:indeterminate:group-hover:bg-ddt-color-common-brand-hover",
+  "enabled:indeterminate:group-hover:border-ddt-color-common-brand-hover",
+  "enabled:indeterminate:group-hover:before:text-ddt-color-common-text-inverse",
+  "enabled:indeterminate:group-active:bg-ddt-color-common-brand-press",
+  "enabled:indeterminate:group-active:border-ddt-color-common-brand-press",
+  "enabled:indeterminate:group-active:before:text-ddt-color-common-text-inverse",
+  "disabled:border-ddt-color-common-disabled",
+  "disabled:bg-ddt-color-common-text-inverse",
+  "disabled:checked:bg-ddt-color-common-disabled",
+  "disabled:indeterminate:bg-ddt-color-common-disabled"
 ])();
 const cvaLabel = cva(["pr-2"], {
   variants: {
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });

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

@@ -24,7 +24,7 @@ const cvaButton = cva(
     "w-full",
     "h-full",
     "min-h-12",
-    "bg-white",
+    "bg-ddt-color-common-background-default",
     "p-3",
     "border",
     "border-[--color-base]",
@@ -39,8 +39,8 @@ const cvaButton = cva(
     "-outline-offset-2",
     "focus-visible:outline-2",
     "focus-visible:outline-[--color-focus]",
-    "disabled:text-system-state-disabled",
-    "disabled:border-system-state-disabled",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:border-ddt-color-common-disabled",
     "after:i-daikin-dropdown-chevron-down",
     "after:w-6",
     "after:h-6",
@@ -49,31 +49,31 @@ const cvaButton = cva(
     "after:top-0",
     "after:bottom-0",
     "after:right-3",
-    "enabled:after:text-system-element-text-primary",
-    "disabled:after:text-system-state-disabled"
+    "enabled:after:text-ddt-color-common-text-primary",
+    "disabled:after:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       open: {
         false: [
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:bg-system-background-surface-press"
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-surface-press"
         ],
-        true: ["enabled:bg-system-background-surface-press"]
+        true: ["enabled:bg-ddt-color-common-surface-press"]
       },
       error: {
         false: [
-          "var-color-system-state-neutral-active/color-base",
-          "var-color-system-state-focus/color-focus"
+          "var-color-ddt-color-common-neutral-default/color-base",
+          "var-color-ddt-color-common-border-focus/color-focus"
         ],
         true: [
-          "var-color-system-state-error-active/color-base",
-          "var-color-system-state-error-active/color-focus"
+          "var-color-ddt-color-common-danger-default/color-base",
+          "var-color-ddt-color-common-danger-default/color-focus"
         ]
       },
       placeholder: {
-        false: ["text-system-element-text-primary"],
-        true: ["text-system-element-text-secondary"]
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-text-secondary"]
       }
     }
   }

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

@@ -19,8 +19,8 @@ const cvaOption = cva(
     "justify-between",
     "w-full",
     "min-h-12",
-    "text-system-element-text-primary",
-    "bg-system-element-text-inverse",
+    "text-ddt-color-common-text-primary",
+    "bg-ddt-color-common-background-default",
     "p-3",
     "font-daikinSerif",
     "leading-5",
@@ -28,20 +28,20 @@ const cvaOption = cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-system-state-focus",
-    "disabled:text-system-state-disabled"
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "disabled:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       selected: {
         false: [
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:bg-system-background-surface-press"
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-surface-press"
         ],
         true: [
-          "enabled:bg-system-background-surface-selected",
-          "enabled:hover:bg-system-background-surface-selectedHover",
-          "enabled:active:bg-system-background-surface-selectedActive",
+          "enabled:bg-ddt-color-common-surface-selected-default",
+          "enabled:hover:bg-ddt-color-common-surface-selected-hover",
+          "enabled:active:bg-ddt-color-common-surface-selected-press",
           "after:i-daikin-dropdown-check",
           "after:size-6"
         ]

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

@@ -5,7 +5,7 @@ export declare const iconList: string[];
 export type IconType = keyof typeof icons;
 declare const cvaIcon: (props?: ({
     icon?: string | number | null | undefined;
-    color?: "default" | "black" | "white" | "current" | null | undefined;
+    color?: "current" | "default" | "black" | "white" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
 /**
@@ -17,7 +17,7 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * If you try to use an icon that does not exist, a blank space will be displayed.
  * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
  *
- * @cssprop [--dds-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
+ * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
  *
  * @example
  *
@@ -41,7 +41,7 @@ export declare class DaikinIcon extends LitElement {
     color: IconVariantProps["color"];
     /**
      * Specify the size of the icon.
-     * If "current" is set, `--dds-icon-size` CSS variable will be used. `--dds-icon-size` may be set by the parent component such as `daikin-icon-button`.
+     * If "current" is set, `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by the parent component such as `daikin-icon-button`.
      */
     size: "s" | "m" | "l" | "xl" | "current";
     render(): import('lit-html').TemplateResult<1>;

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

@@ -21,8 +21,8 @@ const cvaIcon = cva(["block"], {
   variants: {
     icon: iconClassMap,
     color: {
-      black: ["text-black"],
-      white: ["text-white"],
+      black: ["text-ddt-color-common-background-overlay"],
+      white: ["text-ddt-color-common-text-inverse"],
       default: ["text-[--default-color]"],
       current: []
       // uses `currentColor`
@@ -54,24 +54,24 @@ DaikinIcon.styles = css`
 
     :host {
       display: inline-block;
-      width: var(--dds-icon-size, 100%);
-      height: var(--dds-icon-size, 100%);
+      width: var(--ddc-icon-size, 100%);
+      height: var(--ddc-icon-size, 100%);
     }
 
     :host([size="s"]) {
-      --dds-icon-size: 12px;
+      --ddc-icon-size: 12px;
     }
 
     :host([size="m"]) {
-      --dds-icon-size: 16px;
+      --ddc-icon-size: 16px;
     }
 
     :host([size="l"]) {
-      --dds-icon-size: 20px;
+      --ddc-icon-size: 20px;
     }
 
     :host([size="xl"]) {
-      --dds-icon-size: 24px;
+      --ddc-icon-size: 24px;
     }
   `;
 __decorateClass([

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

@@ -19,8 +19,7 @@ const cvaIconButton = cva(
     "inline-flex",
     "justify-center",
     "items-center",
-    "w-8",
-    "h-8",
+    "size-full",
     "font-daikinSerif",
     "font-bold",
     "rounded",
@@ -30,37 +29,37 @@ const cvaIconButton = cva(
     "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"
         ],
         neutral: [
-          "link-enabled:var-color-system-state-neutral-active/color-primary",
-          "link-enabled:hover:var-color-system-state-neutral-hover/color-primary",
-          "link-enabled:hover:var-color-system-background-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-neutral-press/color-primary",
-          "link-enabled:active:var-color-system-background-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-neutral-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-neutral-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-white", "bg-[--color-primary]"],
+        fill: ["text-ddt-color-common-text-inverse", "bg-[--color-primary]"],
         outline: [
           "border",
           "text-[--color-primary]",
@@ -132,6 +131,8 @@ DaikinIconButton.styles = css`
 
     :host {
       display: inline-block;
+      width: 2rem;
+      height: 2rem;
     }
   `;
 __decorateClass([

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

@@ -3,6 +3,9 @@ export * from "./accordion-item/index.js";
 export * from "./breadcrumb/index.js";
 export * from "./breadcrumb-item/index.js";
 export * from "./button/index.js";
+export * from "./card/index.js";
+export * from "./card-footer/index.js";
+export * from "./card-header/index.js";
 export * from "./checkbox/index.js";
 export * from "./dropdown/index.js";
 export * from "./dropdown-item/index.js";
@@ -29,3 +32,6 @@ export * from "./text-area/index.js";
 export * from "./text-field/index.js";
 export * from "./toggle/index.js";
 export * from "./tooltip/index.js";
+export * from "./tree/index.js";
+export * from "./tree-item/index.js";
+export * from "./tree-section/index.js";

package/dist/es/components/index.js

@@ -3,6 +3,9 @@ import { DaikinAccordionItem } from "./accordion-item/daikin-accordion-item.js";
 import { DaikinBreadcrumb } from "./breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./button/daikin-button.js";
+import { DaikinCard } from "./card/daikin-card.js";
+import { DaikinCardFooter } from "./card-footer/daikin-card-footer.js";
+import { DaikinCardHeader } from "./card-header/daikin-card-header.js";
 import { DaikinCheckbox } from "./checkbox/daikin-checkbox.js";
 import { DaikinDropdown } from "./dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./dropdown-item/daikin-dropdown-item.js";
@@ -29,12 +32,18 @@ import { DaikinTextArea } from "./text-area/daikin-text-area.js";
 import { DaikinTextField } from "./text-field/daikin-text-field.js";
 import { DaikinToggle } from "./toggle/daikin-toggle.js";
 import { DaikinTooltip } from "./tooltip/daikin-tooltip.js";
+import { DaikinTree } from "./tree/daikin-tree.js";
+import { DaikinTreeItem, cvaTreeChildren } from "./tree-item/daikin-tree-item.js";
+import { DaikinTreeSection } from "./tree-section/daikin-tree-section.js";
 export {
   DaikinAccordion,
   DaikinAccordionItem,
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
+  DaikinCard,
+  DaikinCardFooter,
+  DaikinCardHeader,
   DaikinCheckbox,
   DaikinDropdown,
   DaikinDropdownItem,
@@ -61,5 +70,9 @@ export {
   DaikinTextField,
   DaikinToggle,
   DaikinTooltip,
+  DaikinTree,
+  DaikinTreeItem,
+  DaikinTreeSection,
+  cvaTreeChildren,
   iconList
 };

package/dist/es/components/input-group/daikin-input-group.d.ts

@@ -111,12 +111,21 @@ export declare class DaikinInputGroup extends LitElement {
      */
     disabled: boolean;
     /**
-     * Maximum value to display on the counter. When `null`, the counter will be hidden.
+     * The maximum number of characters that can be input into the text area.
+     * If set, a counter will be displayed at the bottom of the text area.
+     * Users can enter more characters than the limit, but in that case the counter will turn red and an error message will be displayed (if specified) to indicate that the limit has been exceeded.
      */
     textareaMaxCount: number | null;
+    /**
+     * An error message displayed when the number of characters in the text area exceeds the limit (optional).
+     * When the number of characters in the text area exceeds the limit, this is displayed below the label by overriding `helper` and `error`.
+     * Only used when a text area is assigned to a slot and `textareaMaxCount` is set.
+     */
+    textareaLimitExceedError: string | null;
     private readonly _textareas;
     private readonly _controls;
     private _textareaCount;
+    get textareaLimitExceeded(): boolean;
     private _handleSlotChange;
     private _handleInput;
     private _reflectSlotProperties;