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

package/dist/cjs/components/list-item/daikin-list-item.cjs

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.cjs");
+require("../icon/daikin-icon.cjs");
+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 INNER_CN = classVarianceAuthority.cva([
+  "text-left",
+  "before:absolute",
+  "before:inset-0",
+  "before:w-full",
+  "before:h-full",
+  "focus-visible:outline-none",
+  "focus-visible:before:outline",
+  "focus-visible:before:outline-1",
+  "focus-visible:before:-outline-offset-1",
+  "focus-visible:before:outline-daikinBlue-700",
+  // For buttons and links
+  "link-enabled:before:group-hover:[&:not(:active)]:bg-[#f2f2f2]",
+  "link-enabled:before:active:bg-daikinNeutral-100",
+  // For text
+  "[&:not(a,button)]:before:group-hover:bg-[#f2f2f2]"
+])();
+exports.DaikinListItem = class DaikinListItem extends lit.LitElement {
+  constructor() {
+    super();
+    this.type = "button";
+    this.href = null;
+    this.disabled = false;
+    this.addEventListener("click", (event) => {
+      if (this._disabled) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  get _disabled() {
+    return (
+      // False if `type` is "text".
+      this.type !== "text" && // True if `this.disabled`, or if `type` is "link" and `href` is missing.
+      (this.disabled || this.type === "link" && this.href == null)
+    );
+  }
+  _handleClickAction(event) {
+    event.stopPropagation();
+  }
+  render() {
+    const disabled = this._disabled;
+    const content = lit.html`<span class="flex items-center w-full relative">
+      <slot name="left-icon">
+        <span class="block -ml-1"></span>
+      </slot>
+      <slot class="block pl-2 pr-3 text-left"></slot>
+    </span>`;
+    const list = {
+      button: () => lit.html`<button type="button" class=${INNER_CN} ?disabled=${disabled}>
+          ${content}
+        </button>`,
+      link: () => lit.html`<a
+          class=${INNER_CN}
+          href=${ifDefined_js.ifDefined(!disabled ? this.href ?? void 0 : void 0)}
+          role=${ifDefined_js.ifDefined(disabled ? "link" : void 0)}
+          aria-disabled=${ifDefined_js.ifDefined(disabled ? "true" : void 0)}
+        >
+          ${content}
+        </a>`,
+      text: () => lit.html`<span class=${INNER_CN}>${content}</span>`
+    }[this.type]();
+    return lit.html`<div
+      class=${// We cannot directly write classes like `class="..."` as they include '&', which must be escaped. It can't be escaped either because TailwindCSS can't process it.
+    // Set the text color here to apply to the icons on both sides along with text.
+    "group flex justify-between items-center w-full min-h-12 p-3 text-left relative text-daikinNeutral-800 [&:has(a:not(:any-link),:disabled)]:text-daikinNeutral-200"}
+      role="listitem"
+    >
+      ${list}
+      <slot
+        name="action"
+        class="flex items-center gap-3"
+        @click=${this._handleClickAction}
+      >
+        <slot name="right-icon" class="pointer-events-none">
+          <span class="block -mr-1"></span>
+        </slot>
+      </slot>
+    </div>`;
+  }
+  /**
+   * Focuses on the inner button or link.
+   * It will have no effect if the `type` is "text" or `disabled` is `true`.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinListItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinListItem.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinListItem.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinListItem.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.query("a,button")
+], exports.DaikinListItem.prototype, "_focusableElement", 2);
+exports.DaikinListItem = __decorateClass([
+  decorators_js.customElement("daikin-list-item")
+], exports.DaikinListItem);

package/dist/cjs/components/list-item/daikin-list-item.d.ts

@@ -0,0 +1,64 @@
+import { LitElement } from 'lit';
+/**
+ * The list item component is used to represent a single item in a list. Please use it within the `daikin-list` component.
+ *
+ * The following types are available:
+ *
+ * - `button`: Uses `<button>` tag.
+ * - `link`: Uses `<a>` tag.
+ * - `text`: Uses `<span>` tag.
+ *
+ * Hierarchy:
+ * - `daikin-list` > `daikin-list-item`
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event). Suppressed if `disabled` is true.
+ *
+ * @slot - A slot for the list item label content.
+ * @slot action - An optional slot for an interaction item to be placed to the right of the text. Place `daikin-checkbox`, `daikin-toggle`, or something similar.
+ * @slot left-icon - An optional slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
+ * @slot right-icon - An optional slot for an icon to be placed to the left of the text. Ignored if `action` slot is used. Place `daikin-icon` or something similar.
+ *
+ * @example
+ *
+ * ```html
+ * <daikin-list-item>List item label</daikin-list-item>
+ * ```
+ */
+export declare class DaikinListItem extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Type of the list item.
+     * - `button` (default): The list item will be rendered as a `<button>` element.
+     * - `link`: The list item will be rendered as an `<a>` element.
+     * - `text`: The list item will be rendered as a `<span>` element. Use this if the list itself has no action.
+     */
+    type: "button" | "link" | "text";
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.
+     */
+    href: string | null;
+    /**
+     * Whether the list item is disabled.
+     * Ignored if the `type` is `"text"`.
+     */
+    disabled: boolean;
+    private _focusableElement;
+    private get _disabled();
+    private _handleClickAction;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button or link.
+     * It will have no effect if the `type` is "text" or `disabled` is `true`.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-list-item": DaikinListItem;
+    }
+}
+export default DaikinListItem;

package/dist/cjs/components/list-item/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinListItem = require("./daikin-list-item.cjs");
+Object.defineProperty(exports, "DaikinListItem", {
+  enumerable: true,
+  get: () => daikinListItem.DaikinListItem
+});

package/dist/cjs/components/list-item/index.d.ts

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

package/dist/cjs/components/notification/daikin-notification.cjs

@@ -78,8 +78,6 @@ const cvaContent = classVarianceAuthority.cva(
 exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
   constructor() {
     super(...arguments);
-    this.title = "";
-    this.description = "";
     this.variant = "toast";
     this.status = "positive";
     this.line = "single";
@@ -95,11 +93,16 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
     this.dispatchEvent(event);
   }
   render() {
+    const role = {
+      inline: "status",
+      toast: "alert"
+    }[this.variant];
     return this.open ? lit.html`<aside
           class=${cvaContainer({
       variant: this.variant,
       status: this.status
     })}
+          role=${role}
         >
           <div
             class=${cvaIconContainer({
@@ -113,17 +116,19 @@ exports.DaikinNotification = class DaikinNotification extends lit.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 && lit.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 ? lit.html`
                   <div class="flex items-center gap-5">
@@ -139,9 +144,9 @@ exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
                       ></daikin-icon>
                     </button>
                   </div>
-                ` : null}
+                ` : lit.nothing}
           </div>
-        </aside>` : null;
+        </aside>` : lit.nothing;
   }
 };
 exports.DaikinNotification.styles = lit.css`
@@ -165,12 +170,6 @@ exports.DaikinNotification.styles = lit.css`
       width: 100%;
     }
   `;
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinNotification.prototype, "title", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinNotification.prototype, "description", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinNotification.prototype, "variant", 2);

package/dist/cjs/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/cjs/components/progress-bar/daikin-progress-bar.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const variables_js = require("@daikin-oss/dds-tokens/js/daikin/Light/variables.js");
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
@@ -18,7 +17,6 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBar = classVarianceAuthority.cva(
   [
     "w-full",
-    "h-1",
     "bg-daikinNeutral-200",
     "overflow-hidden",
     "relative",
@@ -31,42 +29,62 @@ const cvaBar = classVarianceAuthority.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 = classVarianceAuthority.cva(["size-4"], {
-  variants: {
-    variant: {
-      inprogress: ["none"],
-      completed: ["i-daikin-status-positive"],
-      indeterminate: [],
-      error: ["i-daikin-status-negative"]
+const cvaBarContainer = classVarianceAuthority.cva(
+  ["flex", "justify-between", "items-center", "leading-5", "font-bold"],
+  {
+    variants: {
+      variant: {
+        inprogress: [],
+        completed: [
+          "after:size-4",
+          "after:text-daikinGreen-500",
+          "after:i-daikin-notification-status-positive"
+        ],
+        indeterminate: [],
+        error: [
+          "after:size-4",
+          "after:text-daikinRed-500",
+          "after:i-daikin-status-error"
+        ]
+      }
     }
   }
-});
-const cvaHelper = classVarianceAuthority.cva(["text-xs", "mt-2"], {
+);
+const cvaHelper = classVarianceAuthority.cva(["text-sm"], {
   variants: {
     variant: {
       inprogress: [],
       completed: [],
       indeterminate: [],
-      error: ["text-[--colorFeedbackNegative]"]
+      error: ["text-daikinRed-500", "font-bold"]
+    },
+    visible: {
+      false: ["hidden"],
+      true: []
     }
   }
 });
 exports.DaikinProgressBar = class DaikinProgressBar extends lit.LitElement {
   constructor() {
     super(...arguments);
-    this.value = 0;
     this.variant = "inprogress";
+    this.size = "medium";
+    this.value = 0;
     this.max = 100;
     this.helper = "";
   }
@@ -84,23 +102,29 @@ exports.DaikinProgressBar = class DaikinProgressBar extends lit.LitElement {
   }
   render() {
     const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
-    return lit.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 lit.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 ? lit.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) {
@@ -113,19 +137,19 @@ exports.DaikinProgressBar.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      --colorFeedbackPositive: ${lit.unsafeCSS(variables_js.colorFeedbackPositive)};
-      --colorFeedbackNegative: ${lit.unsafeCSS(variables_js.colorFeedbackNegative)};
-
       display: block;
       width: 100%;
     }
   `;
-__decorateClass([
-  decorators_js.property({ type: Number })
-], exports.DaikinProgressBar.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String })
 ], exports.DaikinProgressBar.prototype, "variant", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinProgressBar.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: Number })
+], exports.DaikinProgressBar.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: Number })
 ], exports.DaikinProgressBar.prototype, "max", 2);

package/dist/cjs/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;