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

package/dist/es/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/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/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.

package/dist/es/components/pagination/daikin-pagination.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 } from "lit";
+import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.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 { calculatePagination } from "./pagination-utils.js";
 var __defProp = Object.defineProperty;
@@ -25,41 +28,42 @@ const cvaPageButton = cva(
     "justify-center",
     "min-w-12",
     "min-h-12",
+    "p-1",
     "font-daikinSerif",
     "text-base",
     "not-italic",
     "leading-6",
+    "bg-clip-content",
     "focus-visible:outline",
     "focus-visible:outline-2",
-    "focus-visible:outline-offset-1",
-    "focus-visible:outline-[#0081C0]"
+    "focus-visible:outline-offset-[-2px]",
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       active: {
         true: [
-          "text-daikinBlue-500",
-          "focus-visible:text-daikinBlue-500",
+          "text-ddt-color-common-brand-default",
+          "focus-visible:text-ddt-color-common-brand-default",
           "font-bold",
-          "hover:text-[#0081C0]",
-          "hover:bg-[#DDF3FC]",
-          "active:text-[#00689A]",
-          "active:bg-[#BBE7F9]",
-          "after:bg-daikinBlue-500",
+          "hover:text-ddt-color-common-brand-hover",
+          "hover:bg-ddt-color-common-surface-brand-hover",
+          "active:text-ddt-color-common-brand-press",
+          "active:bg-ddt-color-common-surface-brand-press",
+          "after:bg-ddt-color-common-brand-default",
           "after:content-['']",
           "after:h-1",
           "after:absolute",
-          "after:inset-0",
+          "after:inset-1",
           "after:top-auto"
         ],
         false: [
-          "text-inherit",
           "font-normal",
-          "text-daikinNeutral-700",
-          "active:bg-daikinNeutral-100",
-          "active:text-daikinNeutral-800",
-          "hover:bg-[#F2F2F2]",
-          "hover:text-[#515151]"
+          "text-ddt-color-common-neutral-default",
+          "active:bg-ddt-color-common-surface-neutral-press",
+          "active:text-ddt-color-common-neutral-press",
+          "hover:bg-ddt-color-common-surface-neutral-hover",
+          "hover:text-ddt-color-common-neutral-hover"
         ]
       }
     }
@@ -67,7 +71,6 @@ const cvaPageButton = cva(
 );
 const cvaEllipsis = cva([
   "relative",
-  "text-inherit",
   "border-0",
   "no-underline",
   "flex",
@@ -79,10 +82,10 @@ const cvaEllipsis = cva([
   "text-base",
   "not-italic",
   "font-normal",
-  "leading-6"
+  "leading-6",
+  "text-ddt-color-common-neutral-default"
 ]);
 const cvaChevronButton = cva([
-  "text-inherit",
   "border-0",
   "no-underline",
   "flex",
@@ -90,23 +93,23 @@ const cvaChevronButton = cva([
   "justify-center",
   "w-12",
   "h-12",
-  "text-[#515151]",
+  "text-ddt-color-common-neutral-default",
   "font-daikinSerif",
   "text-base",
   "not-italic",
   "font-normal",
   "leading-6",
-  "enabled:hover:bg-[#F2F2F2]",
-  "enabled:hover:text-daikinNeutral-800",
-  "enabled:active:bg-daikinNeutral-100",
-  "enabled:active:text-daikinNeutral-900",
-  "disabled:!text-daikinNeutral-400",
+  "enabled:hover:bg-ddt-color-common-surface-neutral-hover",
+  "enabled:hover:text-ddt-color-common-neutral-hover",
+  "enabled:active:bg-ddt-color-common-surface-neutral-press",
+  "enabled:active:text-ddt-color-common-neutral-press",
+  "disabled:!text-ddt-color-common-disabled",
   "focus-visible:outline",
   "focus-visible:outline-2",
-  "focus-visible:outline-offset-1",
-  "focus-visible:outline-[#0081C0]"
+  "focus-visible:outline-offset-[-2px]",
+  "focus-visible:outline-ddt-color-common-border-focus"
 ]);
-let DaikinPagination = class extends LitElement {
+let DaikinPagination = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.current = 1;
@@ -134,7 +137,11 @@ let DaikinPagination = class extends LitElement {
       this.window
     );
     return html`
-      <div aria-label="Pagination" class="inline-flex gap-1">
+      <div
+        aria-label="Pagination"
+        role="navigation"
+        class="inline-flex flex-wrap"
+      >
         <button
           class=${cvaChevron}
           type="button"
@@ -209,7 +216,7 @@ __decorateClass([
   property({ type: Number, reflect: true })
 ], DaikinPagination.prototype, "window", 2);
 DaikinPagination = __decorateClass([
-  customElement("daikin-pagination")
+  ddsElement("daikin-pagination")
 ], DaikinPagination);
 export {
   DaikinPagination

package/dist/es/components/progress-bar/daikin-progress-bar.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaBar: (props?: ({
     variant?: "error" | "indeterminate" | "inprogress" | "completed" | null | undefined;
@@ -33,7 +34,7 @@ type ProgressBarVariantProps = MergeVariantProps<typeof cvaBar | typeof cvaHelpe
  * </daikin-progress-bar>
  * ```
  */
-export declare class DaikinProgressBar extends LitElement {
+export declare class DaikinProgressBar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the progress bar.

package/dist/es/components/progress-bar/daikin-progress-bar.js

@@ -1,6 +1,9 @@
 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 { 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;
@@ -15,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBar = cva(
   [
     "w-full",
-    "bg-daikinNeutral-200",
+    "bg-ddt-color-common-border-empty",
     "overflow-hidden",
     "relative",
     "after:block",
@@ -26,14 +29,17 @@ const cvaBar = cva(
   {
     variants: {
       variant: {
-        inprogress: ["after:w-[--bar-width]", "after:bg-daikinBlue-500"],
-        completed: ["after:w-full", "after:bg-daikinGreen-500"],
+        inprogress: [
+          "after:w-[--bar-width]",
+          "after:bg-ddt-color-common-brand-default"
+        ],
+        completed: ["after:w-full", "after:bg-ddt-color-common-success"],
         indeterminate: [
           "after:w-1/2",
-          "after:bg-daikinBlue-500",
+          "after:bg-ddt-color-common-brand-default",
           "after:animate-[progress-bar-indeterminate_1200ms_linear_infinite]"
         ],
-        error: ["after:w-full", "after:bg-daikinRed-500"]
+        error: ["after:w-full", "after:bg-ddt-color-common-danger-default"]
       },
       size: {
         medium: ["h-1"],
@@ -43,33 +49,42 @@ const cvaBar = cva(
   }
 );
 const cvaBarContainer = cva(
-  ["flex", "justify-between", "items-center", "leading-5", "font-bold"],
+  [
+    "flex",
+    "justify-between",
+    "items-center",
+    "text-ddt-color-common-text-primary",
+    "leading-[130%]",
+    "font-bold"
+  ],
   {
     variants: {
       variant: {
         inprogress: [],
         completed: [
           "after:size-4",
-          "after:text-daikinGreen-500",
+          "after:flex-none",
+          "after:bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
-          "after:text-daikinRed-500",
+          "after:flex-none",
+          "after:text-ddt-color-common-danger-default",
           "after:i-daikin-status-error"
         ]
       }
     }
   }
 );
-const cvaHelper = cva(["text-sm"], {
+const cvaHelper = cva(["text-sm", "leading-[130%]"], {
   variants: {
     variant: {
-      inprogress: [],
-      completed: [],
-      indeterminate: [],
-      error: ["text-daikinRed-500", "font-bold"]
+      inprogress: ["text-ddt-color-common-text-primary"],
+      completed: ["text-ddt-color-common-text-primary"],
+      indeterminate: ["text-ddt-color-common-text-primary"],
+      error: ["text-ddt-color-common-danger-default", "font-bold"]
     },
     visible: {
       false: ["hidden"],
@@ -77,7 +92,7 @@ const cvaHelper = cva(["text-sm"], {
     }
   }
 });
-let DaikinProgressBar = class extends LitElement {
+let DaikinProgressBar = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.variant = "inprogress";
@@ -155,7 +170,7 @@ __decorateClass([
   property({ type: String })
 ], DaikinProgressBar.prototype, "helper", 2);
 DaikinProgressBar = __decorateClass([
-  customElement("daikin-progress-bar")
+  ddsElement("daikin-progress-bar")
 ], DaikinProgressBar);
 export {
   DaikinProgressBar

package/dist/es/components/progress-indicator/daikin-progress-indicator.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The progress indicator is used to let the user know where they are in the task list.
  *
@@ -9,6 +10,11 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/progress-indicator/index.js";
+ * import "@daikin-oss/design-system-web-components/components/progress-indicator-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-progress-indicator>
  *   <daikin-progress-indicator-item state="unfinished">
@@ -26,14 +32,15 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-progress-indicator>
  * ```
  */
-export declare class DaikinProgressIndicator extends LitElement {
+export declare class DaikinProgressIndicator extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify the index number of the current location in the progress indicator.
+     * Specify the index of the step that is currently in progress, starting from 0. This will automatically set the status of each step.
+     * To mark all steps as upcoming, specify a number less or equal to -1. To mark all steps as completed, specify a number greater than or equal to the number of steps.
      */
-    currentItem: number | null;
+    currentItem: number;
     private readonly _items;
-    private _setCurrentItem;
+    private _updateSteps;
     private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     protected firstUpdated(): void;

package/dist/es/components/progress-indicator/daikin-progress-indicator.js

@@ -1,6 +1,8 @@
-import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements } 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;
@@ -12,41 +14,34 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinProgressIndicator = class extends LitElement {
+let DaikinProgressIndicator = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.currentItem = null;
+    this.currentItem = 0;
   }
-  _setCurrentItem() {
+  _updateSteps() {
     const items = this._items;
-    if (!items || this.currentItem === null) {
-      return;
-    }
-    if (items.length - 1 < this.currentItem) {
-      return;
-    }
-    if (this.currentItem < 0) {
-      return;
-    }
-    items.forEach((item, i) => item.current = this.currentItem === i);
+    items.forEach((item, i) => {
+      item.status = i < this.currentItem ? "finished" : i === this.currentItem ? "inprogress" : "unfinished";
+    });
   }
   _handleSlotChange() {
-    this._setCurrentItem();
+    this._updateSteps();
   }
   render() {
     return html`<div
-      class="flex justify-stretch items-start w-full font-daikinSerif"
+      class="flex justify-stretch items-start gap-2 w-full font-daikinSerif"
       role="list"
     >
       <slot @slotchange=${this._handleSlotChange}></slot>
     </div>`;
   }
   firstUpdated() {
-    this._setCurrentItem();
+    this._updateSteps();
   }
   updated(changedProperties) {
     if (changedProperties.has("currentItem")) {
-      this._setCurrentItem();
+      this._updateSteps();
     }
   }
 };
@@ -54,10 +49,6 @@ DaikinProgressIndicator.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --progress-indicator-border-color-error: ${unsafeCSS(
-  colorFeedbackNegative
-)};
-
       display: block;
       width: 100%;
     }
@@ -69,7 +60,7 @@ __decorateClass([
   queryAssignedElements({ selector: "daikin-progress-indicator-item" })
 ], DaikinProgressIndicator.prototype, "_items", 2);
 DaikinProgressIndicator = __decorateClass([
-  customElement("daikin-progress-indicator")
+  ddsElement("daikin-progress-indicator")
 ], DaikinProgressIndicator);
 export {
   DaikinProgressIndicator

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaContainer: (props?: ({
     status?: "inprogress" | "unfinished" | "finished" | null | undefined;
@@ -17,6 +17,10 @@ type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/progress-indicator-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-progress-indicator-item state="unfinished">
  *   Progress indicator label
@@ -24,13 +28,13 @@ type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
  * </daikin-progress-indicator-item>
  * ```
  */
-export declare class DaikinProgressIndicatorItem extends LitElement {
+export declare class DaikinProgressIndicatorItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Status of the progress indicator item
+     * Status of the progress indicator item.
+     * Controlled by `daikin-progress-indicator`.
      */
     status: ProgressIndicatorItemVariantProps["status"];
-    current: boolean;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/es/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } 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 "../icon/daikin-icon.js";
 var __defProp = Object.defineProperty;
@@ -17,48 +20,47 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaContainer = cva(
   [
     "flex",
-    "flex-col",
-    "gap-1",
+    "gap-2",
     "w-full",
-    "text-system-element-text-primary",
-    "pt-1",
+    "text-ddt-color-common-text-primary",
+    "pt-2",
     "border-t-[0.25rem]",
     "font-daikinSerif"
   ],
   {
     variants: {
       status: {
-        unfinished: ["border-system-state-disabled"],
-        inprogress: ["border-system-state-primary-active"],
-        finished: ["border-system-state-primary-active"]
+        unfinished: ["border-ddt-color-common-border-empty"],
+        inprogress: ["border-ddt-color-common-brand-default"],
+        finished: ["border-ddt-color-common-brand-default"]
       }
     }
   }
 );
-let DaikinProgressIndicatorItem = class extends LitElement {
+let DaikinProgressIndicatorItem = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.status = "unfinished";
-    this.current = false;
   }
   render() {
     return html`<div
-      class=${cvaContainer({
-      status: this.status
-    })}
+      class=${cvaContainer({ status: this.status })}
       role="listitem"
-      aria-current=${ifDefined(this.current ? "step" : void 0)}
+      aria-current=${ifDefined(
+      this.status === "inprogress" ? "step" : void 0
+    )}
     >
-      <div class="flex items-center gap-2 font-bold leading-5">
-        <slot></slot>
-        ${this.status === "finished" ? html`
-              <span
-                class="size-4 i-daikin-status-success text-system-state-primary-active"
-                aria-label="Completed"
-              ></span>
-            ` : nothing}
+      <div class="flex flex-col gap-1 w-full">
+        <slot class="font-bold leading-[130%]"></slot>
+        <slot name="description" class="text-sm leading-[130%]"></slot>
       </div>
-      <slot name="description" class="text-sm leading-[1.1rem]"></slot>
+      ${this.status === "finished" ? html`
+            <span
+              role="img"
+              class="flex-none size-4 i-daikin-status-positive text-ddt-color-common-brand-default"
+              aria-label="Completed"
+            ></span>
+          ` : nothing}
     </div>`;
   }
 };
@@ -74,11 +76,8 @@ DaikinProgressIndicatorItem.styles = css`
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinProgressIndicatorItem.prototype, "status", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinProgressIndicatorItem.prototype, "current", 2);
 DaikinProgressIndicatorItem = __decorateClass([
-  customElement("daikin-progress-indicator-item")
+  ddsElement("daikin-progress-indicator-item")
 ], DaikinProgressIndicatorItem);
 export {
   DaikinProgressIndicatorItem