@daikin-oss/design-system-web-components 0.3.2 → 0.5.0

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import { MergeVariantProps } from '../../type-utils';
 declare const cvaContainer: (props?: ({
     variant?: "toast" | "inline" | null | undefined;
@@ -25,22 +25,24 @@ type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof c
  *
  * @fires close - A custom event emitted when a user clicks the close button.
  *
+ * @slot title - A slot for the notification title content.
+ * @slot description - A slot for the notification description content.
+ *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/notification/index.js";
+ * ```
+ *
  * ```html
- * </daikin-notification title="Notification title" description="Notification description."></daikin-notification>
+ * <daikin-notification>
+ *   <span slot="title">Notification title</span>
+ *   <span slot="description">Notification description</span>
+ * </daikin-notification>
  * ```
  */
 export declare class DaikinNotification extends LitElement {
     static readonly styles: import('lit').CSSResult;
-    /**
-     * Title text
-     */
-    title: string;
-    /**
-     * Description text
-     */
-    description: string;
     /**
      * Type of notification
      */
@@ -65,7 +67,7 @@ export declare class DaikinNotification extends LitElement {
      * Call the event registered in "close"
      */
     private _handleClickClose;
-    render(): import('lit-html').TemplateResult<1> | null;
+    render(): import('lit-html').TemplateResult<1> | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,6 +1,6 @@
 import { colorFeedbackPositive, colorFeedbackWarning, colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
+import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { EVENT_CLOSE } from "../../constants/events.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -76,8 +76,6 @@ const cvaContent = cva(
 let DaikinNotification = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.title = "";
-    this.description = "";
     this.variant = "toast";
     this.status = "positive";
     this.line = "single";
@@ -93,11 +91,16 @@ let DaikinNotification = class extends LitElement {
     this.dispatchEvent(event);
   }
   render() {
+    const role = {
+      inline: "status",
+      toast: "alert"
+    }[this.variant];
     return this.open ? html`<aside
           class=${cvaContainer({
       variant: this.variant,
       status: this.status
     })}
+          role=${role}
         >
           <div
             class=${cvaIconContainer({
@@ -111,17 +114,19 @@ let DaikinNotification = class extends LitElement {
             ></daikin-icon>
           </div>
           <div
-            class="flex justify-between items-center gap-5 p-5 flex-[1_0_auto]"
+            class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
           >
             <div
               class=${cvaContent({
       line: this.line
     })}
             >
-              ${this.title && html`<header class="text-[18px] font-bold flex-none">
-                ${this.title}
-              </header>`}
-              <p class="text-[18px] flex-none">${this.description}</p>
+              <div class="font-bold flex-none">
+                <slot name="title"></slot>
+              </div>
+              <div class="flex-none">
+                <slot name="description"></slot>
+              </div>
             </div>
             ${this.closeButton ? html`
                   <div class="flex items-center gap-5">
@@ -137,9 +142,9 @@ let DaikinNotification = class extends LitElement {
                       ></daikin-icon>
                     </button>
                   </div>
-                ` : null}
+                ` : nothing}
           </div>
-        </aside>` : null;
+        </aside>` : nothing;
   }
 };
 DaikinNotification.styles = css`
@@ -163,12 +168,6 @@ DaikinNotification.styles = css`
       width: 100%;
     }
   `;
-__decorateClass([
-  property({ type: String })
-], DaikinNotification.prototype, "title", 2);
-__decorateClass([
-  property({ type: String })
-], DaikinNotification.prototype, "description", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinNotification.prototype, "variant", 2);

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

@@ -1,16 +1,32 @@
 import { LitElement, PropertyValues } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaBar: (props?: ({
+    variant?: "error" | "indeterminate" | "inprogress" | "completed" | null | undefined;
+    size?: "medium" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaHelper: (props?: ({
+    variant?: "error" | "indeterminate" | "inprogress" | "completed" | null | undefined;
+    visible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ProgressBarVariantProps = MergeVariantProps<typeof cvaBar | typeof cvaHelper>;
 /**
  * The progress bar component is used to visually convey the progress to the user.
  *
  * There are four variants of the progress bar:
  *
- * - "inprogress": The default variant. Use this when you know the exact progress. The length of the bar is the ratio of `value` to `max`.
- * - "indeterminate": Use this variant when you don't know the exact progress. In this variant, the `value` is ignored and the bar always animates from left to right with a constant length.
- * - "completed": In addition to "inprogress", a completed icon is added. In this variant, the `value` is ignored and the bar always expands to the full width.
- * - "error": In addition to "inprogress", an error icon is added and the color becomes red. In this variant, the `value` is ignored and the bar always expands to the full width.
+ * - `"inprogress"`: The default variant. Use this when you know the exact progress. The length of the bar is the ratio of `value` to `max`.
+ * - `"indeterminate"`: Use this variant when you don't know the exact progress. In this variant, the `value` is ignored and the bar always animates from left to right with a constant length.
+ * - `"completed"`: In addition to `"inprogress"`, a completed icon is added. In this variant, the `value` is ignored and the bar always expands to the full width.
+ * - `"error"`: In addition to `"inprogress"`, an error icon is added and the color becomes red. In this variant, the `value` is ignored and the bar always expands to the full width.
+ *
+ * @slot - A slot for label text displayed at the top of the progress bar.
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/progress-bar/index.js";
+ * ```
+ *
  * ```html
  * <daikin-progress-bar value="40" helper="Progress bar helper">
  *   Progress bar label
@@ -20,19 +36,25 @@ import { LitElement, PropertyValues } from 'lit';
 export declare class DaikinProgressBar extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Value of the progress bar
+     * Variant of the progress bar.
      */
-    value: number;
+    variant: ProgressBarVariantProps["variant"];
     /**
-     * Variant of the progress bar
+     * Size of the progress bar
      */
-    variant: "inprogress" | "completed" | "indeterminate" | "error";
+    size: ProgressBarVariantProps["size"];
+    /**
+     * Value of the progress bar.
+     * Only used for `"inprogress"` variant.
+     */
+    value: number;
     /**
-     * The max value of the progress bar
+     * Max value of the progress bar.
+     * Only used for `"inprogress"` variant.
      */
     max: number;
     /**
-     * Helper text
+     * Helper text displayed at the bottom of the progress bar.
      */
     helper: string;
     private _validateProperties;

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

@@ -1,4 +1,3 @@
-import { colorFeedbackPositive, colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
@@ -16,7 +15,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBar = cva(
   [
     "w-full",
-    "h-1",
     "bg-daikinNeutral-200",
     "overflow-hidden",
     "relative",
@@ -29,42 +27,62 @@ const cvaBar = cva(
     variants: {
       variant: {
         inprogress: ["after:w-[--bar-width]", "after:bg-daikinBlue-500"],
-        completed: ["after:w-full", "after:bg-[--colorFeedbackPositive]"],
+        completed: ["after:w-full", "after:bg-daikinGreen-500"],
         indeterminate: [
           "after:w-1/2",
           "after:bg-daikinBlue-500",
           "after:animate-[progress-bar-indeterminate_1200ms_linear_infinite]"
         ],
-        error: ["after:w-full", "after:bg-[--colorFeedbackNegative]"]
+        error: ["after:w-full", "after:bg-daikinRed-500"]
+      },
+      size: {
+        medium: ["h-1"],
+        large: ["h-2"]
       }
     }
   }
 );
-const cvaIcon = cva(["size-4"], {
-  variants: {
-    variant: {
-      inprogress: ["none"],
-      completed: ["i-daikin-status-positive"],
-      indeterminate: [],
-      error: ["i-daikin-status-negative"]
+const cvaBarContainer = cva(
+  ["flex", "justify-between", "items-center", "leading-5", "font-bold"],
+  {
+    variants: {
+      variant: {
+        inprogress: [],
+        completed: [
+          "after:size-4",
+          "after:text-daikinGreen-500",
+          "after:i-daikin-status-positive"
+        ],
+        indeterminate: [],
+        error: [
+          "after:size-4",
+          "after:text-daikinRed-500",
+          "after:i-daikin-status-error"
+        ]
+      }
     }
   }
-});
-const cvaHelper = cva(["text-xs", "mt-2"], {
+);
+const cvaHelper = cva(["text-sm"], {
   variants: {
     variant: {
       inprogress: [],
       completed: [],
       indeterminate: [],
-      error: ["text-[--colorFeedbackNegative]"]
+      error: ["text-daikinRed-500", "font-bold"]
+    },
+    visible: {
+      false: ["hidden"],
+      true: []
     }
   }
 });
 let DaikinProgressBar = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.value = 0;
     this.variant = "inprogress";
+    this.size = "medium";
+    this.value = 0;
     this.max = 100;
     this.helper = "";
   }
@@ -97,23 +115,29 @@ let DaikinProgressBar = class extends LitElement {
   }
   render() {
     const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
-    return html`<div class="flex flex-col w-full font-daikinSerif">
-      <div class="flex justify-between items-center mb-2.5">
-        <span class="text-sm leading-[22px] font-medium"><slot></slot></span>
-        <span class=${cvaIcon({ variant: this.variant })}></span>
+    return html`<div class="flex flex-col gap-2 w-full font-daikinSerif">
+      <div class=${cvaBarContainer({ variant: this.variant })}>
+        <slot></slot>
       </div>
       <div
-        class=${cvaBar({ variant: this.variant })}
+        class=${cvaBar({ variant: this.variant, size: this.size })}
         role="progressbar"
         aria-label=${this.textContent ?? ""}
         aria-valuenow=${this.value}
         aria-valuemin="0"
         aria-valuemax=${this.max}
+        aria-busy=${progressRatio < 1 && this.variant === "inprogress" || this.variant === "indeterminate"}
         style=${`--bar-width:${progressRatio * 100}%`}
       ></div>
-      ${this.helper ? html`<span class=${cvaHelper({ variant: this.variant })}
-            >${this.helper}</span
-          >` : null}
+      <span
+        class=${cvaHelper({
+      variant: this.variant,
+      visible: !!this.helper.length
+    })}
+        aria-live="polite"
+      >
+        ${this.helper}
+      </span>
     </div>`;
   }
   updated(changedProperties) {
@@ -126,19 +150,19 @@ DaikinProgressBar.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --colorFeedbackPositive: ${unsafeCSS(colorFeedbackPositive)};
-      --colorFeedbackNegative: ${unsafeCSS(colorFeedbackNegative)};
-
       display: block;
       width: 100%;
     }
   `;
-__decorateClass([
-  property({ type: Number })
-], DaikinProgressBar.prototype, "value", 2);
 __decorateClass([
   property({ type: String })
 ], DaikinProgressBar.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinProgressBar.prototype, "size", 2);
+__decorateClass([
+  property({ type: Number })
+], DaikinProgressBar.prototype, "value", 2);
 __decorateClass([
   property({ type: Number })
 ], DaikinProgressBar.prototype, "max", 2);

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

@@ -0,0 +1,47 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * The progress indicator is used to let the user know where they are in the task list.
+ *
+ * Hierarchy:
+ * - `daikin-progress-indicator` > `daikin-progress-indicator-item`
+ *
+ * @slot - A slot for progress indicator items. Place `daikin-progress-indicator-item` elements here.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-progress-indicator>
+ *   <daikin-progress-indicator-item state="unfinished">
+ *     Title 1
+ *     <span slot="description">Description 1</span>
+ *   </daikin-progress-indicator-item>
+ *   <daikin-progress-indicator-item state="inprogress">
+ *     Title 2
+ *     <span slot="description">Description 2</span>
+ *   </daikin-progress-indicator-item>
+ *   <daikin-progress-indicator-item state="finished">
+ *     Title 3
+ *     <span slot="description">Description 3</span>
+ *   </daikin-progress-indicator-item>
+ * </daikin-progress-indicator>
+ * ```
+ */
+export declare class DaikinProgressIndicator extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the index number of the current location in the progress indicator.
+     */
+    currentItem: number | null;
+    private readonly _items;
+    private _setCurrentItem;
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-progress-indicator": DaikinProgressIndicator;
+    }
+}
+export default DaikinProgressIndicator;

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

@@ -0,0 +1,86 @@
+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 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;
+};
+let DaikinProgressIndicator = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.currentItem = null;
+  }
+  _setCurrentItem() {
+    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);
+  }
+  _handleSlotChange() {
+    this._setCurrentItem();
+  }
+  render() {
+    return html`<div
+      class="flex justify-stretch items-start w-full font-daikinSerif"
+      role="list"
+    >
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    </div>`;
+  }
+  firstUpdated() {
+    this._setCurrentItem();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("currentItem")) {
+      this._setCurrentItem();
+    }
+  }
+};
+DaikinProgressIndicator.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      --progress-indicator-border-color-error: ${unsafeCSS(
+  colorFeedbackNegative
+)};
+
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: Number, attribute: "current-item", reflect: true })
+], DaikinProgressIndicator.prototype, "currentItem", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-progress-indicator-item" })
+], DaikinProgressIndicator.prototype, "_items", 2);
+DaikinProgressIndicator = __decorateClass([
+  customElement("daikin-progress-indicator")
+], DaikinProgressIndicator);
+export {
+  DaikinProgressIndicator
+};

package/dist/es-dev/components/progress-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from './daikin-progress-indicator';

package/dist/es-dev/components/progress-indicator/index.js

@@ -0,0 +1,4 @@
+import { DaikinProgressIndicator } from "./daikin-progress-indicator.js";
+export {
+  DaikinProgressIndicator
+};

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

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaContainer: (props?: ({
+    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const cvaLabel: (props?: ({
+    status?: "inprogress" | "unfinished" | "finished" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaLabel>;
+/**
+ * The progress indicator item component is a child element within the `daikin-progress-indicator` component, this represents one of the tasks that the user is working on.
+ *
+ * In addition to the name of each task, the progress of the task can be indicated, such as whether it is in progress or has not yet started.
+ *
+ * Hierarchy:
+ * - `daikin-progress-indicator` > `daikin-progress-indicator-item`
+ *
+ * @slot - A slot for label content.
+ * @slot description - A slot for description content.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-progress-indicator-item state="unfinished">
+ *   Progress indicator label
+ *   <span slot="description">Progress indicator description</span>
+ * </daikin-progress-indicator-item>
+ * ```
+ */
+export declare class DaikinProgressIndicatorItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Status of the progress indicator item
+     */
+    status: ProgressIndicatorItemVariantProps["status"];
+    current: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-progress-indicator-item": DaikinProgressIndicatorItem;
+    }
+}
+export default DaikinProgressIndicatorItem;

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

@@ -0,0 +1,93 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../icon/daikin-icon.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 cvaContainer = cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-1",
+    "w-full",
+    "text-system-element-text-primary",
+    "pt-1",
+    "border-t-4",
+    "font-daikinSerif"
+  ],
+  {
+    variants: {
+      status: {
+        unfinished: ["border-system-state-disabled"],
+        inprogress: ["border-system-state-primary-active"],
+        finished: ["border-system-state-primary-active"]
+      }
+    }
+  }
+);
+const cvaLabel = cva(
+  ["flex", "items-center", "gap-2", "font-bold", "leading-5"],
+  {
+    variants: {
+      status: {
+        unfinished: [],
+        inprogress: [],
+        finished: [
+          "after:size-4",
+          "after:i-daikin-status-success",
+          "after:text-system-state-primary-active"
+        ]
+      }
+    }
+  }
+);
+let DaikinProgressIndicatorItem = class extends LitElement {
+  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)}
+    >
+      <slot class=${cvaLabel({ status: this.status })}></slot>
+      <slot name="description" class="text-sm leading-[18px]"></slot>
+    </div>`;
+  }
+};
+DaikinProgressIndicatorItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+      min-width: 142px;
+    }
+  `;
+__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")
+], DaikinProgressIndicatorItem);
+export {
+  DaikinProgressIndicatorItem
+};

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

@@ -0,0 +1 @@
+export * from './daikin-progress-indicator-item';

package/dist/es-dev/components/progress-indicator-item/index.js

@@ -0,0 +1,4 @@
+import { DaikinProgressIndicatorItem } from "./daikin-progress-indicator-item.js";
+export {
+  DaikinProgressIndicatorItem
+};