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

package/dist/cjs-dev/components/toast-notification-manager/daikin-toast-notification-manager.cjs

@@ -0,0 +1,192 @@
+"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 ref_js = require("lit/directives/ref.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+const notificationCommon = require("../../utils/notification-common.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const CONTAINER_TRANSITION_DURATION = "--container-transition-duration";
+const CONTAINER_MOVE_OFFSET_Y = "--container-move-offset-y";
+const TOAST_MOVE_OFFSET_X = "24px";
+const TOAST_MOVE_OFFSET_Y_TOP_SIGN = -1;
+const TOAST_MOVE_OFFSET_Y_BOTTOM_SIGN = 1;
+const cvaContainer = classVarianceAuthority.cva(
+  [
+    "flex",
+    "gap-2",
+    "w-max",
+    "fixed",
+    "transition-transform",
+    "translate-y-[var(--container-move-offset-y,0)]",
+    "duration-[var(--container-transition-duration,200ms)]"
+  ],
+  {
+    variants: {
+      position: {
+        top: [
+          "items-center",
+          "flex-col",
+          "m-auto",
+          "top-4",
+          "left-0",
+          "right-0"
+        ],
+        "top-left": ["items-start", "flex-col", "top-4", "left-4"],
+        "top-right": ["items-end", "flex-col", "top-4", "right-4"],
+        bottom: [
+          "items-center",
+          "flex-col-reverse",
+          "m-auto",
+          "bottom-4",
+          "left-0",
+          "right-0"
+        ],
+        "bottom-left": [
+          "items-start",
+          "flex-col-reverse",
+          "bottom-4",
+          "left-4"
+        ],
+        "bottom-right": [
+          "items-end",
+          "flex-col-reverse",
+          "bottom-4",
+          "right-4"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinToastNotificationManager = class DaikinToastNotificationManager extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.position = "bottom-right";
+    this._knownItemSet = /* @__PURE__ */ new Set();
+    this._closedItemSet = /* @__PURE__ */ new WeakSet();
+    this._containerRef = ref_js.createRef();
+  }
+  get _positionY() {
+    return this.position.startsWith("top") ? "top" : "bottom";
+  }
+  get _sign() {
+    return this._positionY === "top" ? TOAST_MOVE_OFFSET_Y_TOP_SIGN : TOAST_MOVE_OFFSET_Y_BOTTOM_SIGN;
+  }
+  _close(target) {
+    if (this._closedItemSet.has(target)) {
+      return;
+    }
+    this._closedItemSet.add(target);
+    const items = this._items;
+    const targetIndex = items.findIndex((item) => item === target);
+    if (targetIndex === -1) {
+      return;
+    }
+    const moveOffsetY = `calc(${0.5 * this._sign}rem + ${target.clientHeight * this._sign}px)`;
+    for (const [index, item] of items.entries()) {
+      item.style.removeProperty("--transition-duration");
+      if (index > targetIndex) {
+        item.style.setProperty("--move-offset-y", moveOffsetY);
+      }
+    }
+    target.style.setProperty("--move-offset-x", TOAST_MOVE_OFFSET_X);
+    target.style.setProperty("--opacity", "0");
+    target.style.setProperty("--pointer-events", "none");
+    setTimeout(() => {
+      for (const item of this._items) {
+        item.style.setProperty("--transition-duration", "0");
+        item.style.removeProperty("--move-offset-y");
+      }
+      target.hidden = true;
+      this.dispatchEvent(new CustomEvent("close", { detail: { target } }));
+    }, notificationCommon.TOAST_ANIMATION_DURATION);
+  }
+  _handleClose(event) {
+    event.stopPropagation();
+    this._close(event.target);
+  }
+  _handleNewItem(newItem) {
+    const container = this._containerRef.value;
+    if (!container) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      newItem.style.setProperty("--opacity", "0");
+      container.style.setProperty(CONTAINER_TRANSITION_DURATION, "0");
+      container.style.setProperty(
+        CONTAINER_MOVE_OFFSET_Y,
+        `calc(${0.5 * this._sign}rem + ${newItem.clientHeight * this._sign}px)`
+      );
+      requestAnimationFrame(() => {
+        container.style.removeProperty(CONTAINER_TRANSITION_DURATION);
+        container.style.removeProperty(CONTAINER_MOVE_OFFSET_Y);
+        newItem.style.removeProperty("--opacity");
+        this._scheduleRemoveToast(newItem);
+      });
+    });
+  }
+  _handleSlotchange() {
+    const items = this._items;
+    const newItems = items.filter((item) => !this._knownItemSet.has(item));
+    this._knownItemSet = new Set(items);
+    for (const newItem of newItems) {
+      this._handleNewItem(newItem);
+    }
+  }
+  _scheduleRemoveToast(target) {
+    if (target.duration === null) {
+      return;
+    }
+    setTimeout(() => {
+      this._close(target);
+    }, target.duration);
+  }
+  render() {
+    return lit.html`<aside
+      ${ref_js.ref(this._containerRef)}
+      class=${cvaContainer({ position: this.position })}
+      popover="manual"
+    >
+      <slot
+        @close=${this._handleClose}
+        @slotchange=${this._handleSlotchange}
+      ></slot>
+    </aside>`;
+  }
+  firstUpdated() {
+    const container = this._containerRef.value;
+    if (container) {
+      container.showPopover();
+    }
+  }
+};
+exports.DaikinToastNotificationManager.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: max-content;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinToastNotificationManager.prototype, "position", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-toast-notification" })
+], exports.DaikinToastNotificationManager.prototype, "_items", 2);
+exports.DaikinToastNotificationManager = __decorateClass([
+  decorators.ddsElement("daikin-toast-notification-manager")
+], exports.DaikinToastNotificationManager);

package/dist/cjs-dev/components/toast-notification-manager/daikin-toast-notification-manager.d.cts

@@ -0,0 +1,67 @@
+import { DDSElement } from "../../base/index.cjs";
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaContainer: (props?: ({
+    position?: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ToastPosition = MergeVariantProps<typeof cvaContainer>["position"];
+/**
+ * The toast manager component manages the position and display state of notification toasts.
+ * Just place a notification toast in the slot and it will automatically be placed, stacked and animated.
+ *
+ * Hierarchy:
+ * - `daikin-toast-notification-manager` > `daikin-toast-notification`
+ *
+ * @fires close - A custom event emitted when a user clicks the close button. The toast manager does not remove toast elements, so you will need to remove the relevant toast element after receiving this event.
+ *
+ * @slot A slot for toasts. Place `daikin-toast-notification` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/toast-notification-manager/index.js";
+ * import "@daikin-oss/design-system-web-components/components/toast-notification/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-toast-notification-manager>
+ *   <daikin-toast-notification name="toast1">
+ *     <span slot="title">Toast title</span>
+ *     <span slot="description">Toast description</span>
+ *   </daikin-toast-notification>
+ *   <daikin-toast-notification name="toast2">
+ *     <span slot="title">Toast title</span>
+ *     <span slot="description">Toast description</span>
+ *   </daikin-toast-notification>
+ *   <daikin-toast-notification name="toast3">
+ *     <span slot="title">Toast title</span>
+ *     <span slot="description">Toast description</span>
+ *   </daikin-toast-notification>
+ * </daikin-toast-notification-manager>
+ * ```
+ */
+export declare class DaikinToastNotificationManager extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify where on the screen the toast will be displayed.
+     */
+    position: ToastPosition;
+    private readonly _items;
+    private _knownItemSet;
+    private _closedItemSet;
+    private _containerRef;
+    private get _positionY();
+    private get _sign();
+    private _close;
+    private _handleClose;
+    private _handleNewItem;
+    private _handleSlotchange;
+    private _scheduleRemoveToast;
+    render(): import('lit-html').TemplateResult<1>;
+    protected firstUpdated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-toast-notification-manager": DaikinToastNotificationManager;
+    }
+}
+export {};

package/dist/cjs-dev/components/toast-notification-manager/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinToastNotificationManager = require("./daikin-toast-notification-manager.cjs");
+Object.defineProperty(exports, "DaikinToastNotificationManager", {
+  enumerable: true,
+  get: () => daikinToastNotificationManager.DaikinToastNotificationManager
+});

package/dist/cjs-dev/components/toast-notification-manager/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-toast-notification-manager.cjs";

package/dist/cjs-dev/components/toggle/daikin-toggle.cjs

@@ -3,13 +3,16 @@ 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 ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, 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])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -18,22 +21,22 @@ const TOGGLE_CLASS_NAME = classVarianceAuthority.cva([
   "w-12",
   "h-6",
   "relative",
-  "bg-system-state-neutral-active",
+  "bg-ddt-color-common-neutral-default",
   "rounded-full",
   "cursor-pointer",
   "transition-colors",
   "duration-300",
   "appearance-none",
-  "enabled:hover:bg-system-state-neutral-hover",
-  "enabled:active:bg-system-state-neutral-press",
+  "enabled:hover:bg-ddt-color-common-neutral-hover",
+  "enabled:active:bg-ddt-color-common-neutral-press",
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-system-state-focus",
-  "enabled:checked:bg-system-state-primary-active",
-  "enabled:checked:hover:bg-system-state-primary-hover",
-  "enabled:checked:active:bg-system-state-primary-press",
-  "disabled:bg-system-state-disabled",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:checked:bg-ddt-color-common-brand-default",
+  "enabled:checked:hover:bg-ddt-color-common-brand-hover",
+  "enabled:checked:active:bg-ddt-color-common-brand-press",
+  "disabled:bg-ddt-color-common-disabled",
   "disabled:cursor-default",
   "before:size-4",
   "before:m-auto",
@@ -45,10 +48,10 @@ const TOGGLE_CLASS_NAME = classVarianceAuthority.cva([
   "before:transition",
   "before:duration-300",
   "before:checked:translate-x-6",
-  "enabled:before:bg-system-background-base",
-  "disabled:before:bg-system-background-surface-hover"
+  "enabled:before:bg-ddt-color-common-background-default",
+  "disabled:before:bg-ddt-color-common-surface-hover"
 ])();
-exports.DaikinToggle = class DaikinToggle extends lit.LitElement {
+exports.DaikinToggle = class DaikinToggle extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -104,5 +107,5 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinToggle.prototype, "disabled", 2);
 exports.DaikinToggle = __decorateClass([
-  decorators_js.customElement("daikin-toggle")
+  decorators.ddsElement("daikin-toggle")
 ], exports.DaikinToggle);

package/dist/cjs-dev/components/toggle/daikin-toggle.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The toggle switch component is a UI element that allows users to switch between two states, typically "on" and "off".
  * It functions similarly to a `daikin-checkbox` component but provides a more visually intuitive way to represent binary options.
@@ -17,7 +18,7 @@ import { LitElement, PropertyValues } from 'lit';
  * <daikin-toggle name="name" value="value"></daikin-toggle>
  * ```
  */
-export declare class DaikinToggle extends LitElement {
+export declare class DaikinToggle extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The form name, submitted as a name/value pair when submitting the form.

package/dist/cjs-dev/components/tooltip/daikin-tooltip.cjs

@@ -5,54 +5,60 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const guard_js = require("lit/directives/guard.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
 const isClient = require("../../is-client.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const reDispatch = require("../../utils/re-dispatch.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, 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])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
 };
 const cvaTooltip = classVarianceAuthority.cva(
   [
-    "floating-unready:hidden",
-    "absolute",
     "left-[--floating-x,0]",
     "top-[--floating-y,0]",
-    "justify-center",
-    "items-center",
     "w-max",
-    "p-3",
+    "text-sm",
+    "p-2",
+    "leading-[130%]",
     "border",
-    "border-solid",
     "rounded",
-    "text-sm",
     "font-daikinSerif",
-    "font-normal",
-    "not-italic",
-    "leading-5"
+    "absolute",
+    "floating-unready:hidden"
   ],
   {
     variants: {
-      variant: {
-        light: ["border-daikinNeutral-800", "bg-white/90", "text-black"],
-        dark: ["border-transparent", "bg-daikinNeutral-800/90", "text-white"]
+      color: {
+        default: [
+          "text-ddt-color-common-text-primary",
+          "bg-ddt-color-common-background-default",
+          "border-ddt-color-common-neutral-default"
+        ],
+        inverse: [
+          "text-ddt-color-common-text-inverse",
+          "bg-ddt-color-common-surface-inverse",
+          "border-transparent"
+        ]
       }
     }
   }
 );
 const DEFAULT_TOOLTIP_SPACING = "20px";
-exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
+exports.DaikinTooltip = class DaikinTooltip extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.placement = "bottom";
-    this.variant = "light";
+    this.color = "default";
     this.open = false;
     this.description = "";
     this.popoverValue = "auto";
@@ -65,7 +71,7 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
       return;
     }
     window.CSS.registerProperty({
-      name: "--dds-tooltip-spacing",
+      name: "--ddc-tooltip-spacing",
       syntax: "<length>",
       inherits: true,
       initialValue: "0px"
@@ -77,6 +83,12 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
       this.open = !this.open;
     }
   }
+  _handleFocusIn() {
+    this.open = true;
+  }
+  _handleFocusOut() {
+    this.open = false;
+  }
   _handleMouseEnter() {
     if (this.trigger === "hover") {
       this.open = true;
@@ -87,11 +99,8 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
       this.open = false;
     }
   }
-  _handleFocusIn() {
-    this.open = true;
-  }
-  _handleFocusOut() {
-    this.open = false;
+  _handleBeforeToggle(event) {
+    reDispatch.reDispatch(this, event, new ToggleEvent("beforetoggle", event));
   }
   _handleToggle(event) {
     if (reDispatch.reDispatch(this, event, new ToggleEvent("toggle", event))) {
@@ -101,10 +110,12 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
   render() {
     var _a;
     const spacing = parseInt(
-      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--dds-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
+      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--ddc-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
       10
     );
-    return lit.html`<div class="relative inline-block">
+    return lit.html`<div
+      class="relative inline-block text-ddt-color-common-text-primary font-daikinSerif"
+    >
       <div
         id="trigger"
         aria-labelledby="trigger"
@@ -113,19 +124,20 @@ exports.DaikinTooltip = class DaikinTooltip extends lit.LitElement {
       >
         <slot
           @click=${this._handleClick}
-          @mouseenter=${this._handleMouseEnter}
-          @mouseleave=${this._handleMouseLeave}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
+          @mouseenter=${this._handleMouseEnter}
+          @mouseleave=${this._handleMouseLeave}
         ></slot>
       </div>
       <span
         id="tooltip"
         role="tooltip"
         aria-labelledby="tooltip"
-        class=${cvaTooltip({ variant: this.variant })}
+        part="tooltip"
+        class=${cvaTooltip({ color: this.color })}
         popover=${this.popoverValue}
-        @beforetoggle=${(event) => reDispatch.reDispatch(this, event, new ToggleEvent("beforetoggle", event))}
+        @beforetoggle=${this._handleBeforeToggle}
         @toggle=${this._handleToggle}
         ${this._autoUpdateController.refFloating()}
       >
@@ -160,7 +172,7 @@ exports.DaikinTooltip.styles = lit.css`
     :host {
       display: inline-block;
 
-      --dds-tooltip-spacing: ${lit.unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
+      --ddc-tooltip-spacing: ${lit.unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
     }
   `;
 __decorateClass([
@@ -168,7 +180,7 @@ __decorateClass([
 ], exports.DaikinTooltip.prototype, "placement", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinTooltip.prototype, "variant", 2);
+], exports.DaikinTooltip.prototype, "color", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTooltip.prototype, "open", 2);
@@ -182,6 +194,6 @@ __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTooltip.prototype, "trigger", 2);
 exports.DaikinTooltip = __decorateClass([
-  decorators_js.customElement("daikin-tooltip")
+  decorators.ddsElement("daikin-tooltip")
 ], exports.DaikinTooltip);
 exports.DaikinTooltip.registerCSSCustomProperties();

package/dist/cjs-dev/components/tooltip/daikin-tooltip.d.cts

@@ -1,4 +1,10 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaTooltip: (props?: ({
+    color?: "default" | "inverse" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TooltipVariantProps = MergeVariantProps<typeof cvaTooltip>;
 /**
  * A tooltip component is used to show brief information when a user interacts with an element.
  *
@@ -8,7 +14,9 @@ import { LitElement, PropertyValues } from 'lit';
  * @slot - A slot for the element to which the tooltip is attached (the trigger element).
  * @slot description - A slot for the tooltip description content.
  *
- * @cssprop [--dds-tooltip-spacing=20px] - Spacing between the tooltip and the trigger
+ * @cssprop [--ddc-tooltip-spacing=20px] - Spacing between the tooltip and the trigger.
+ *
+ * @csspart tooltip - Change the style of tooltips.
  *
  * @example
  *
@@ -29,7 +37,7 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-tooltip>
  * ```
  */
-export declare class DaikinTooltip extends LitElement {
+export declare class DaikinTooltip extends DDSElement {
     static registerCSSCustomProperties(): void;
     static readonly styles: import('lit').CSSResult;
     /**
@@ -39,7 +47,7 @@ export declare class DaikinTooltip extends LitElement {
     /**
      * Specifies the tooltip theme.
      */
-    variant: "light" | "dark";
+    color: TooltipVariantProps["color"];
     /**
      * Whether the tooltip is open.
      */
@@ -65,10 +73,11 @@ export declare class DaikinTooltip extends LitElement {
     private _autoUpdateController;
     private _hostStyles;
     private _handleClick;
-    private _handleMouseEnter;
-    private _handleMouseLeave;
     private _handleFocusIn;
     private _handleFocusOut;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _handleBeforeToggle;
     private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;
     protected updated(changedProperties: PropertyValues<this>): void;
@@ -78,3 +87,4 @@ declare global {
         "daikin-tooltip": DaikinTooltip;
     }
 }
+export {};