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

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

@@ -1,6 +1,9 @@
 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;
@@ -12,7 +15,7 @@ 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: [],
@@ -21,11 +24,11 @@ const cvaLabel = cva(["flex", "items-center", "font-bold", "leading-5"], {
   }
 });
 const cvaHelper = cva(
-  ["flex", "gap-1", "items-center", "min-h-5", "leading-5", "text-sm"],
+  ["flex", "gap-1", "items-center", "leading-[130%]", "text-sm"],
   {
     variants: {
       type: {
-        helper: [],
+        helper: ["text-ddt-color-common-text-secondary"],
         helperDisabled: ["text-ddt-color-common-disabled"],
         error: [
           "text-ddt-color-common-danger-default",
@@ -55,7 +58,7 @@ const cvaCounter = cva(["text-sm", "font-bold", "ml-auto"], {
     }
   }
 });
-let DaikinInputGroup = class extends LitElement {
+let DaikinInputGroup = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.label = null;
@@ -110,7 +113,7 @@ let DaikinInputGroup = class extends LitElement {
       <label
         class="flex flex-col justify-center gap-2 w-full text-ddt-color-common-text-primary font-daikinSerif"
       >
-        <div class="flex items-center gap-1 font-bold">
+        <div class="flex items-center flex-wrap gap-1 font-bold">
           ${this.label ? html`<span class=${cvaLabel({ disabled: this.disabled })}>
                 ${this.label}
               </span>` : nothing}
@@ -186,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;
@@ -27,9 +30,9 @@ const LINK_CLASS_NAME = cva([
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-ddt-color-common-border-focus",
-  "focus-visible:outline-offset-1"
+  "focus-visible:outline-offset-2"
 ])();
-let DaikinLink = class extends LitElement {
+let DaikinLink = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.href = null;
@@ -83,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;
@@ -50,7 +53,7 @@ const cvaIcon = cva(["icon-size-6"], {
     }
   }
 });
-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.

package/dist/es-dev/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,13 +28,15 @@ 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-offset-[-2px]",
     "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
@@ -41,22 +46,22 @@ const cvaPageButton = cva(
           "text-ddt-color-common-brand-default",
           "focus-visible:text-ddt-color-common-brand-default",
           "font-bold",
-          "hover:text-ddt-color-common-border-focus",
-          "hover:bg-ddt-color-common-surface-selected-default",
+          "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-selected-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: [
           "font-normal",
           "text-ddt-color-common-neutral-default",
           "active:bg-ddt-color-common-surface-neutral-press",
-          "active:text-ddt-color-common-text-primary",
+          "active:text-ddt-color-common-neutral-press",
           "hover:bg-ddt-color-common-surface-neutral-hover",
           "hover:text-ddt-color-common-neutral-hover"
         ]
@@ -101,10 +106,10 @@ const cvaChevronButton = cva([
   "disabled:!text-ddt-color-common-disabled",
   "focus-visible:outline",
   "focus-visible:outline-2",
-  "focus-visible:outline-offset-1",
+  "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;
@@ -132,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"
@@ -207,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-dev/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-dev/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-ddt-color-common-disabled",
+    "bg-ddt-color-common-border-empty",
     "overflow-hidden",
     "relative",
     "after:block",
@@ -51,7 +54,7 @@ const cvaBarContainer = cva(
     "justify-between",
     "items-center",
     "text-ddt-color-common-text-primary",
-    "leading-5",
+    "leading-[130%]",
     "font-bold"
   ],
   {
@@ -60,12 +63,14 @@ const cvaBarContainer = cva(
         inprogress: [],
         completed: [
           "after:size-4",
+          "after:flex-none",
           "after:bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
+          "after:flex-none",
           "after:text-ddt-color-common-danger-default",
           "after:i-daikin-status-error"
         ]
@@ -73,7 +78,7 @@ const cvaBarContainer = cva(
     }
   }
 );
-const cvaHelper = cva(["text-sm"], {
+const cvaHelper = cva(["text-sm", "leading-[130%]"], {
   variants: {
     variant: {
       inprogress: ["text-ddt-color-common-text-primary"],
@@ -87,7 +92,7 @@ const cvaHelper = cva(["text-sm"], {
     }
   }
 });
-let DaikinProgressBar = class extends LitElement {
+let DaikinProgressBar = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.variant = "inprogress";
@@ -180,7 +185,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-dev/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-dev/components/progress-indicator/daikin-progress-indicator.js

@@ -1,5 +1,8 @@
-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;
@@ -11,36 +14,19 @@ 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) {
-      {
-        console.warn(
-          `Invalid 'current-item' property: ${this.currentItem}. The number of actual 'daikin-progress-indicator-item's exceeds the number of items.`
-        );
-      }
-      return;
-    }
-    if (this.currentItem < 0) {
-      {
-        console.warn(
-          `Invalid 'current-item' property: ${this.currentItem}. Negative values cannot be set.`
-        );
-      }
-      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
@@ -51,11 +37,11 @@ let DaikinProgressIndicator = class extends LitElement {
     </div>`;
   }
   firstUpdated() {
-    this._setCurrentItem();
+    this._updateSteps();
   }
   updated(changedProperties) {
     if (changedProperties.has("currentItem")) {
-      this._setCurrentItem();
+      this._updateSteps();
     }
   }
 };
@@ -74,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-dev/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 {