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

package/dist/es-dev/components/input-group/daikin-input-group.js

@@ -1,7 +1,9 @@
-import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, queryAssignedElements, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property, queryAssignedElements, state } 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;
@@ -13,49 +15,50 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-5"], {
+const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-[130%]"], {
   variants: {
     disabled: {
       false: [],
-      true: ["text-system-state-disabled"]
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
 const cvaHelper = cva(
-  ["flex", "gap-1", "items-center", "leading-5", "text-sm"],
+  ["flex", "gap-1", "items-center", "leading-[130%]", "text-sm"],
   {
     variants: {
       type: {
-        helper: [],
-        helperDisabled: ["text-system-state-disabled"],
+        helper: ["text-ddt-color-common-text-secondary"],
+        helperDisabled: ["text-ddt-color-common-disabled"],
         error: [
-          "text-system-state-error-active",
+          "text-ddt-color-common-danger-default",
           "font-bold",
           "before:size-4",
-          "before:i-daikin-status-error"
+          "before:i-daikin-status-error",
+          "before:flex-none"
+        ],
+        textareaLimitExceedError: [
+          "text-ddt-color-common-danger-default",
+          "font-bold",
+          "before:size-4",
+          "before:i-daikin-status-error",
+          "before:flex-none"
         ],
         none: ["hidden"]
       }
     }
   }
 );
-const cvaCounter = cva(["text-sm", "font-bold"], {
+const cvaCounter = cva(["text-sm", "font-bold", "ml-auto"], {
   variants: {
-    disabled: {
-      false: ["text-system-element-text-secondary"],
-      true: ["text-system-state-disabled"]
-    }
-  }
-});
-const cvaCounterValueLength = cva([], {
-  variants: {
-    error: {
-      false: [],
-      true: ["text-system-state-error-active"]
+    variant: {
+      normal: ["text-ddt-color-common-text-secondary"],
+      disabled: ["text-ddt-color-common-disabled"],
+      error: ["text-ddt-color-common-danger-default"]
     }
   }
 });
-let DaikinInputGroup = class extends LitElement {
+let DaikinInputGroup = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.label = null;
@@ -64,8 +67,12 @@ let DaikinInputGroup = class extends LitElement {
     this.error = null;
     this.disabled = false;
     this.textareaMaxCount = null;
+    this.textareaLimitExceedError = null;
     this._textareaCount = null;
   }
+  get textareaLimitExceeded() {
+    return this.textareaMaxCount != null && this._textareaCount != null && this.textareaMaxCount < this._textareaCount;
+  }
   _handleSlotChange() {
     this._reflectSlotProperties();
     const textarea = this._textareas[0];
@@ -82,40 +89,41 @@ let DaikinInputGroup = class extends LitElement {
     }
   }
   render() {
-    const helperType = this.error && !this.disabled ? "error" : this.helper ? this.disabled ? "helperDisabled" : "helper" : "none";
+    const helperTextVariant = (() => {
+      if (this.textareaLimitExceeded && !!this.textareaLimitExceedError && !this.disabled) {
+        return "textareaLimitExceedError";
+      } else if (!!this.error && !this.disabled) {
+        return "error";
+      } else if (!!this.helper && this.disabled) {
+        return "helperDisabled";
+      } else if (this.helper) {
+        return "helper";
+      } else {
+        return "none";
+      }
+    })();
     const helperText = {
-      error: this.error,
       helper: this.helper,
       helperDisabled: this.helper,
+      error: this.error,
+      textareaLimitExceedError: this.textareaLimitExceedError,
       none: ""
-    }[helperType];
+    }[helperTextVariant];
     return html`<fieldset class="content" ?disabled=${this.disabled}>
       <label
-        class="flex flex-col justify-center gap-2 w-full text-system-element-text-primary font-daikinSerif"
+        class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary font-daikinSerif"
       >
-        <div class="flex justify-between items-center gap-2">
-          <div class="flex items-center gap-1 font-bold">
-            ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
-                  ${this.label}
-                </span>` : nothing}
-            ${this.required && !this.disabled ? html`<span class="text-system-state-error-active text-xs">
-                  ${this.required}
-                </span>` : nothing}
-          </div>
-          ${this.textareaMaxCount != null && this._textareaCount != null ? html`
-                <span class=${cvaCounter({ disabled: this.disabled })}>
-                  <span
-                    class=${cvaCounterValueLength({
-      error: this.textareaMaxCount < this._textareaCount
-    })}
-                    >${this._textareaCount}</span
-                  ><span>/</span><span>${this.textareaMaxCount}</span>
-                </span>
-              ` : nothing}
+        <div class="flex items-center flex-wrap gap-1 font-bold">
+          ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
+                ${this.label}
+              </span>` : nothing}
+          ${this.required && !this.disabled ? html`<span class="text-ddt-color-common-danger-default text-xs">
+                ${this.required}
+              </span>` : nothing}
         </div>
         <span
-          class=${cvaHelper({ type: helperType })}
-          aria-live=${helperType === "error" ? "polite" : "off"}
+          class=${cvaHelper({ type: helperTextVariant })}
+          aria-live=${helperTextVariant === "error" ? "polite" : "off"}
         >
           ${helperText}
         </span>
@@ -123,6 +131,12 @@ let DaikinInputGroup = class extends LitElement {
           @slotchange=${this._handleSlotChange}
           @input=${this._handleInput}
         ></slot>
+        ${this.textareaMaxCount != null && this._textareaCount != null ? html`<span
+              class=${cvaCounter({
+      variant: this.disabled ? "disabled" : this.textareaLimitExceeded ? "error" : "normal"
+    })}
+              >${this._textareaCount}/${this.textareaMaxCount}</span
+            >` : nothing}
       </label>
     </fieldset>`;
   }
@@ -134,8 +148,6 @@ DaikinInputGroup.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --input-group-border-color-error: ${unsafeCSS(colorFeedbackNegative)};
-
       display: block;
       width: 100%;
     }
@@ -158,6 +170,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, reflect: true, attribute: "textarea-max-count" })
 ], DaikinInputGroup.prototype, "textareaMaxCount", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "textarea-limit-exceed-error"
+  })
+], DaikinInputGroup.prototype, "textareaLimitExceedError", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-text-area" })
 ], DaikinInputGroup.prototype, "_textareas", 2);
@@ -170,7 +189,7 @@ __decorateClass([
   state()
 ], DaikinInputGroup.prototype, "_textareaCount", 2);
 DaikinInputGroup = __decorateClass([
-  customElement("daikin-input-group")
+  ddsElement("daikin-input-group")
 ], DaikinInputGroup);
 export {
   DaikinInputGroup

package/dist/es-dev/components/link/daikin-link.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The link component uses the standard HTML <a> tag. Unlike the link used in the button component, it provides the style of the text as it is.
  *
@@ -16,7 +16,7 @@ import { LitElement } from 'lit';
  * </daikin-link>
  * ```
  */
-export declare class DaikinLink extends LitElement {
+export declare class DaikinLink extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Link `href`.

package/dist/es-dev/components/link/daikin-link.js

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } 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";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,33 +17,22 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const LINK_CLASS_NAME = cva([
-  "flex",
-  "justify-center",
-  "items-center",
-  "gap-0.5",
-  "size-fit",
   "font-daikinSerif",
-  "rounded-[1px]",
   "relative",
-  "link-enabled:text-system-state-link-active",
-  "link-enabled:hover:text-system-state-link-hover",
-  "link-enabled:hover:bg-system-state-link-surface-hover",
-  "link-enabled:active:text-system-state-link-press",
-  "link-disabled:text-system-state-disabled",
-  "focus-visible:outline-none",
-  "focus-visible:before:block",
-  "focus-visible:before:rounded-none",
-  "focus-visible:before:absolute",
-  "focus-visible:before:inset-[-1px]",
-  "focus-visible:before:outline",
-  "focus-visible:before:outline-system-state-focus",
-  "focus-visible:before:outline-2",
-  "after:h-[1px]",
-  "after:absolute",
-  "after:inset-[auto_0_0_0]",
-  "after:bg-current"
+  "border-b",
+  "border-b-current",
+  "link-enabled:text-ddt-color-link-text-default",
+  "link-enabled:hover:text-ddt-color-link-text-hover",
+  "link-enabled:hover:bg-ddt-color-common-surface-brand-hover",
+  "link-enabled:active:text-ddt-color-link-text-press",
+  "link-enabled:active:bg-ddt-color-common-surface-brand-press",
+  "link-disabled:text-ddt-color-common-disabled",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "focus-visible:outline-offset-2"
 ])();
-let DaikinLink = class extends LitElement {
+let DaikinLink = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -49,43 +41,36 @@ let DaikinLink = class extends LitElement {
     this.showVisited = false;
   }
   render() {
-    return html`
-      <a
-        class=${LINK_CLASS_NAME}
-        href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
-        target=${ifDefined(this.target ?? void 0)}
-        aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
-      >
-        <slot name="left-icon" class="icon-size-4"></slot>
-        <slot></slot>
-        <slot name="right-icon" class="icon-size-4"></slot>
-      </a>
-    `;
+    return html`<a
+      class=${LINK_CLASS_NAME}
+      href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
+      target=${ifDefined(this.target ?? void 0)}
+      aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
+      ><span class="inline-flex mr-[0.125rem] align-sub">
+        <slot name="left-icon" class="icon-size-4"
+          ><span class="-mr-[0.125rem]"></span></slot></span
+      ><slot></slot
+      ><span class="inline-flex ml-[0.125rem] align-sub"
+        ><slot name="right-icon" class="icon-size-4"
+          ><span class="-ml-[0.125rem]"></span></slot></span
+    ></a>`;
   }
 };
 DaikinLink.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
-    :host {
-      display: block;
-      width: fit-content;
-      height: fit-content;
-    }
-
     :host([show-visited]:not([disabled])) a:visited {
-      color: #5c2365; /* system-state-visited-active */
-    }
-
-    :host([show-visited]:not([disabled])) a:hover:visited {
-      color: #4a1c51; /* system-state-visited-hover */
+      color: var(--dds-color-link-text-visited-default);
     }
 
-    :host([show-visited]:not([disabled])) a:hover:visited {
-      background-color: #f0ddf3; /* system-state-visited-hover */
+    :host([show-visited]:not([disabled])) a:visited:hover {
+      color: var(--dds-color-link-text-visited-hover);
+      background-color: var(--dds-color-link-surface-visited-hover);
     }
 
-    :host([show-visited]:not([disabled])) a:active:visited {
-      color: #37153d; /* system-state-visited-press */
+    :host([show-visited]:not([disabled])) a:visited:active {
+      color: var(--dds-color-link-text-visited-press);
+      background-color: var(--dds-color-link-surface-visited-press);
     }
   `;
 __decorateClass([
@@ -101,7 +86,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "show-visited" })
 ], DaikinLink.prototype, "showVisited", 2);
 DaikinLink = __decorateClass([
-  customElement("daikin-link")
+  ddsElement("daikin-link")
 ], DaikinLink);
 export {
   DaikinLink

package/dist/es-dev/components/list/daikin-list.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The list component is used to list items using the list item component.
  *
@@ -9,6 +9,11 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/list/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-list>
  *   <daikin-list-item>List item label 1</daikin-list-item>
@@ -17,7 +22,7 @@ import { LitElement } from 'lit';
  * </daikin-list>
  * ```
  */
-export declare class DaikinList extends LitElement {
+export declare class DaikinList extends DDSElement {
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/es-dev/components/list/daikin-list.js

@@ -1,16 +1,16 @@
-import { LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
-var __defProp = Object.defineProperty;
+import { html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = decorator(result) || result;
   return result;
 };
-let DaikinList = class extends LitElement {
+let DaikinList = class extends DDSElement {
   render() {
     return html`<div role="list">
       <slot></slot>
@@ -18,7 +18,7 @@ let DaikinList = class extends LitElement {
   }
 };
 DaikinList = __decorateClass([
-  customElement("daikin-list")
+  ddsElement("daikin-list")
 ], DaikinList);
 export {
   DaikinList

package/dist/es-dev/components/list-item/daikin-list-item.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The list item component is used to represent a single item in a list. Please use it within the `daikin-list` component.
  *
@@ -20,11 +20,15 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/list-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-list-item>List item label</daikin-list-item>
  * ```
  */
-export declare class DaikinListItem extends LitElement {
+export declare class DaikinListItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Type of the list item.

package/dist/es-dev/components/list-item/daikin-list-item.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;
@@ -23,18 +26,18 @@ const INNER_CN = cva([
   "focus-visible:before:outline",
   "focus-visible:before:outline-2",
   "focus-visible:before:-outline-offset-2",
-  "focus-visible:before:outline-system-state-focus",
+  "focus-visible:before:outline-ddt-color-common-border-focus",
   // For buttons and links
-  "link-enabled:before:group-hover:[&:not(:active)]:bg-system-background-surface-hover",
-  "link-enabled:before:active:bg-system-background-surface-press",
+  "link-enabled:before:group-hover:[&:not(:active)]:bg-ddt-color-common-surface-hover",
+  "link-enabled:before:active:bg-ddt-color-common-surface-press",
   // For text
-  "[&:not(a,button)]:before:group-hover:bg-system-background-surface-hover"
+  "[&:not(a,button)]:before:group-hover:bg-ddt-color-common-surface-hover"
 ])();
 const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
   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"]
     }
   }
 });
@@ -45,12 +48,12 @@ const cvaIcon = cva(["icon-size-6"], {
       right: ["pointer-events-none"]
     },
     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"]
     }
   }
 });
-let DaikinListItem = class extends LitElement {
+let DaikinListItem = class extends DDSElement {
   constructor() {
     super();
     this.type = "button";
@@ -142,7 +145,7 @@ __decorateClass([
   query("a,button")
 ], DaikinListItem.prototype, "_focusableElement", 2);
 DaikinListItem = __decorateClass([
-  customElement("daikin-list-item")
+  ddsElement("daikin-list-item")
 ], DaikinListItem);
 export {
   DaikinListItem

package/dist/es-dev/components/pagination/daikin-pagination.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The pagination component is used to navigate through a list of items that are divided into multiple pages.
  *
@@ -6,11 +6,15 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/pagination/index.js";
+ * ```
+ *
  * ```html
  * <daikin-pagination window="5" total="20" current="3"></daikin-pagination>
  * ```
  */
-export declare class DaikinPagination extends LitElement {
+export declare class DaikinPagination extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The current page number, starting at 1.