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

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/loading/daikin-loading.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * The loading component displays a spinner to indicate that a process is in progress.
+ * If the spinner is expected to blend into the background, set the background color. You can use the `background` attribute for such cases.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/loading/index.js";
+ * ```
+ *
+ * ```html
+ *  <daikin-loading></daikin-loading>
+ * ```
+ */
+export declare class DaikinLoading extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Size of the loading.
+     */
+    size: "small" | "medium";
+    /**
+     * Variant of the loading.
+     */
+    background: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-loading": DaikinLoading;
+    }
+}

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

@@ -0,0 +1,92 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, 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 cvaLoadingContainer = cva(
+  ["flex", "justify-center", "items-center", "size-full"],
+  {
+    variants: {
+      background: {
+        false: ["bg-transparent"],
+        true: ["bg-ddt-color-common-background-default", "rounded"]
+      }
+    }
+  }
+);
+const cvaLoading = cva(
+  [
+    "block",
+    "border-t-ddt-color-common-brand-default",
+    "border-r-ddt-color-common-brand-default",
+    "border-b-ddt-color-common-brand-default",
+    "border-l-transparent",
+    "rounded-full",
+    "animate-[loading_800ms_linear_infinite]"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["size-[1.125rem]", "border-2"],
+        medium: ["size-9", "border-4"]
+      }
+    }
+  }
+);
+let DaikinLoading = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "medium";
+    this.background = false;
+  }
+  render() {
+    return html`<div
+      class=${cvaLoadingContainer({ background: this.background })}
+      role="progressbar"
+      aria-busy="true"
+      aria-label="Loading"
+    >
+      <div class="size-fit rotate-45">
+        <span class=${cvaLoading({ size: this.size })}></span>
+      </div>
+    </div>`;
+  }
+};
+DaikinLoading.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+    }
+
+    :host([size="small"]) {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    :host([size="medium"]) {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinLoading.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinLoading.prototype, "background", 2);
+DaikinLoading = __decorateClass([
+  customElement("daikin-loading")
+], DaikinLoading);
+export {
+  DaikinLoading
+};

package/dist/es-dev/components/loading/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-loading.js";

package/dist/es-dev/components/loading/index.js

@@ -0,0 +1,4 @@
+import { DaikinLoading } from "./daikin-loading.js";
+export {
+  DaikinLoading
+};

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 {

package/dist/es-dev/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-ddt-color-common-text-primary",
     "pt-2",
     "border-t-[0.25rem]",
-    "font-daikinSerif",
-    "leading-[130%]"
+    "font-daikinSerif"
   ],
   {
     variants: {
       status: {
-        unfinished: ["border-ddt-color-common-disabled"],
+        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 })}
       role="listitem"
-      aria-current=${ifDefined(this.current ? "step" : void 0)}
+      aria-current=${ifDefined(
+      this.status === "inprogress" ? "step" : void 0
+    )}
     >
-      <div class="flex justify-between gap-1 font-bold">
-        <slot></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 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"></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

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The radio button component is a UI element that allows users to select one options from a set of choices.
  * It functions similarly to the HTML `<input type="radio">` tag. \
@@ -9,6 +9,8 @@ import { LitElement } from 'lit';
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="radio">` element.
  *
+ * @slot - A slot for the radio label content.
+ *
  * @example
  *
  * ```js
@@ -19,7 +21,7 @@ import { LitElement } from 'lit';
  *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
  * ```
  */
-export declare class DaikinRadio extends LitElement {
+export declare class DaikinRadio extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The form name, submitted as a name/value pair when submitting the form.
@@ -47,24 +49,32 @@ export declare class DaikinRadio extends LitElement {
      * Specify the radio button disabled state.
      */
     disabled: boolean;
+    /**
+     * Specify the radio disabled state controlled by the parent component.
+     * Controlled by `daikin-radio-group`.
+     *
+     * @private
+     */
+    disabledByParent: boolean;
     /**
      * Whether the radio button can be focused.
      * Automatically set by `daikin-radio-group` component.
      */
     skipTab: boolean;
-    static readonly formAssociated = true;
     private _radio;
-    /**
-     * Focuses on the inner radio.
-     * @param options focus options
-     */
-    focus(options?: FocusOptions): void;
+    static readonly formAssociated = true;
+    private get _labelHidden();
     private _internals;
     private _updateFormValue;
     private _handleClick;
     private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Focuses on the inner radio.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
 }
 declare global {
     interface HTMLElementTagNameMap {