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

package/dist/es-dev/components/list-item/daikin-list-item.js

@@ -0,0 +1,126 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, query, 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 INNER_CN = 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]"
+])();
+let DaikinListItem = class extends 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 = 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: () => html`<button type="button" class=${INNER_CN} ?disabled=${disabled}>
+          ${content}
+        </button>`,
+      link: () => html`<a
+          class=${INNER_CN}
+          href=${ifDefined(!disabled ? this.href ?? void 0 : void 0)}
+          role=${ifDefined(disabled ? "link" : void 0)}
+          aria-disabled=${ifDefined(disabled ? "true" : void 0)}
+        >
+          ${content}
+        </a>`,
+      text: () => html`<span class=${INNER_CN}>${content}</span>`
+    }[this.type]();
+    return 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);
+  }
+};
+DaikinListItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinListItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinListItem.prototype, "href", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinListItem.prototype, "disabled", 2);
+__decorateClass([
+  query("a,button")
+], DaikinListItem.prototype, "_focusableElement", 2);
+DaikinListItem = __decorateClass([
+  customElement("daikin-list-item")
+], DaikinListItem);
+export {
+  DaikinListItem
+};

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

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

package/dist/es-dev/components/list-item/index.js

@@ -0,0 +1,4 @@
+import { DaikinListItem } from "./daikin-list-item.js";
+export {
+  DaikinListItem
+};

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

@@ -1,12 +1,4 @@
 import { LitElement } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-declare const cvaRadio: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaLabel: (props?: ({
-    size?: "small" | "large" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
 /**
  * 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. \
@@ -16,60 +8,52 @@ type RadioVariantProps = MergeVariantProps<typeof cvaRadio | typeof cvaLabel>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/radio/index.js";
+ * ```
+ *
  * ```html
  *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
  * ```
  */
 export declare class DaikinRadio extends LitElement {
     static readonly styles: import('lit').CSSResult;
-    private _handleClick;
-    static readonly formAssociated = true;
-    private _internals;
-    private _updateFormValue;
-    updated(changedProperties: Map<string, unknown>): void;
-    private _handleChange;
-    /**
-     * Specify the label text for the radio
-     */
-    label: string;
     /**
-     * Specify the component size
+     * Form name of the radio button.
      */
-    size: RadioVariantProps["size"];
+    name: string;
     /**
-     * Specify the label position
-     * when `left` the label will be in left of radio, when `right` label will be in right of radio
+     * Form value of the radio button.
      */
-    labelPosition: "left" | "right";
+    value: string;
     /**
-     * Specify whether the Radio should be disabled
+     * Label text for the radio button.
      */
-    disabled: boolean;
+    label: string;
     /**
-     * Specify whether the radio is read only
+     * Label position.
+     * - `right` (default): The label will be placed to the right of the radio button.
+     * - `hidden`: The label will not be shown.
      */
-    readonly: boolean;
+    labelPosition: "right" | "hidden";
     /**
-     * Specify whether the radio is be checked
+     * Whether the radio button is checked.
      */
     checked: boolean;
     /**
-     * The form name.
-     */
-    name: string;
-    /**
-     * The form value.
-     */
-    value: string;
-    /**
-     * Specify whether the Radio is in a error state
+     * Whether the radio button is disabled.
      */
-    error: boolean;
+    disabled: boolean;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _handleClick;
+    private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: Map<string, unknown>): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
         "daikin-radio": DaikinRadio;
     }
 }
-export {};