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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daikin-oss/design-system-web-components",
-  "version": "0.7.0",
+  "version": "1.1.0",
   "description": "Design system using web components",
   "type": "module",
   "files": [
@@ -75,82 +75,86 @@
     "test:visual": "npm run test:visual-wc && npm run test:visual-react",
     "test:visual-update": "npm run test:visual-wc -- --update-snapshots"
   },
+  "browserslist": [
+    "last 2 versions and > 1%"
+  ],
   "dependencies": {
-    "@floating-ui/dom": "^1.6.12",
+    "@floating-ui/dom": "^1.6.13",
     "class-variance-authority": "^0.7.1",
     "lit": "^3.2.1"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.17.0",
+    "@arethetypeswrong/cli": "^0.17.3",
     "@axe-core/playwright": "^4.10.1",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.10",
-    "@daikin-oss/dds-tokens": "^0.3.0",
-    "@daikin-oss/tailwind": "^0.0.1",
-    "@egoist/tailwindcss-icons": "^1.8.1",
-    "@eslint/js": "^9.15.0",
-    "@fontsource/roboto": "^5.1.0",
-    "@lit/react": "^1.0.6",
+    "@changesets/cli": "^2.27.12",
+    "@daikin-oss/dds-tokens": "^0.3.2",
+    "@daikin-oss/tailwind": "^0.2.0",
+    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@eslint/js": "^9.20.0",
+    "@fontsource/roboto": "^5.1.1",
+    "@jackolope/lit-analyzer": "^3.0.2",
+    "@jackolope/web-component-analyzer": "^3.0.0",
+    "@lit/react": "^1.0.7",
     "@ls-lint/ls-lint": "^2.2.3",
     "@playwright/test": "1.46.1",
-    "@storybook/addon-a11y": "^8.4.5",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-mdx-gfm": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/builder-vite": "^8.4.5",
-    "@storybook/manager-api": "^8.4.5",
-    "@storybook/preview-api": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-vite": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.4.5",
-    "@storybook/web-components": "^8.4.5",
-    "@storybook/web-components-vite": "^8.4.5",
+    "@storybook/addon-a11y": "^8.5.5",
+    "@storybook/addon-essentials": "^8.5.5",
+    "@storybook/addon-interactions": "^8.5.5",
+    "@storybook/addon-links": "^8.5.5",
+    "@storybook/addon-mdx-gfm": "^8.5.5",
+    "@storybook/blocks": "^8.5.5",
+    "@storybook/builder-vite": "^8.5.5",
+    "@storybook/manager-api": "^8.5.5",
+    "@storybook/preview-api": "^8.5.5",
+    "@storybook/react": "^8.5.5",
+    "@storybook/react-vite": "^8.5.5",
+    "@storybook/test": "^8.5.5",
+    "@storybook/test-runner": "^0.21.0",
+    "@storybook/theming": "^8.5.5",
+    "@storybook/web-components": "^8.5.5",
+    "@storybook/web-components-vite": "^8.5.5",
     "@types/eslint__js": "^8.42.3",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^20.17.8",
-    "@types/react": "^18.3.12",
+    "@types/node": "^20.17.18",
+    "@types/react": "^19.0.8",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "cspell": "^8.16.1",
+    "cspell": "^8.17.3",
     "defu": "^6.1.4",
-    "eslint": "^9.15.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.20.1",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-wc": "^2.2.0",
-    "fast-glob": "^3.3.2",
+    "fast-glob": "^3.3.3",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
-    "jiti": "^2.4.0",
-    "lightningcss": "^1.28.2",
-    "lit-analyzer": "^2.0.3",
+    "jiti": "^2.4.2",
+    "lightningcss": "^1.29.1",
     "picocolors": "^1.1.1",
     "playwright": "1.46.1",
     "playwright-core": "1.46.1",
-    "postcss": "^8.4.49",
-    "prettier": "^3.4.1",
+    "postcss": "^8.5.2",
+    "prettier": "^3.5.0",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "sass-embedded": "^1.81.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass-embedded": "^1.83.4",
     "shadow-dom-testing-library": "^1.11.3",
-    "start-server-and-test": "^2.0.8",
-    "storybook": "^8.4.5",
-    "tailwindcss": "^3.4.15",
+    "start-server-and-test": "^2.0.10",
+    "storybook": "^8.5.5",
+    "tailwindcss": "^3.4.17",
     "tsx": "^4.19.2",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.16.0",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^4.3.0",
-    "vite-plugin-externalize-deps": "^0.8.0",
-    "vitest": "^2.1.6",
-    "web-component-analyzer": "^2.0.0"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.24.0",
+    "unplugin-macros": "^0.16.0",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vite-plugin-externalize-deps": "^0.9.0",
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "@daikin-oss/dds-tokens": ">=0.3.0 <1.0.0"

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

@@ -1,196 +0,0 @@
-"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 events = require("../../constants/events.cjs");
-const tailwind = require("../../tailwind.css.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 cvaContainer = classVarianceAuthority.cva(
-  [
-    "flex",
-    "box-border",
-    "bg-ddt-color-common-background-default",
-    "overflow-hidden",
-    "font-daikinSerif"
-  ],
-  {
-    variants: {
-      variant: {
-        toast: [
-          "border-2",
-          "border-solid",
-          "rounded-lg",
-          "shadow-notification"
-        ],
-        inline: []
-      },
-      status: {
-        positive: ["border-ddt-color-common-success"],
-        negative: ["border-ddt-color-common-danger-default"],
-        warning: ["border-ddt-color-common-warning"],
-        alarm: ["border-ddt-color-common-alarm"],
-        information: ["border-ddt-color-common-information"]
-      }
-    },
-    defaultVariants: {
-      variant: "toast",
-      status: "positive"
-    }
-  }
-);
-const cvaIconContainer = classVarianceAuthority.cva(
-  [
-    "flex-none",
-    "flex",
-    "justify-center",
-    "items-center",
-    "w-[2.75rem]",
-    "after:size-6",
-    "after:text-ddt-color-common-background-default"
-  ],
-  {
-    variants: {
-      status: {
-        positive: [
-          "bg-ddt-color-common-success",
-          "after:i-daikin-status-positive"
-        ],
-        negative: [
-          "bg-ddt-color-common-danger-default",
-          "after:i-daikin-status-negative"
-        ],
-        warning: [
-          "bg-ddt-color-common-warning",
-          "after:i-daikin-status-warning"
-        ],
-        alarm: ["bg-ddt-color-common-alarm", "after:i-daikin-status-alarm"],
-        information: [
-          "bg-ddt-color-common-information",
-          "after:i-daikin-status-information"
-        ]
-      }
-    },
-    defaultVariants: {
-      status: "positive"
-    }
-  }
-);
-const cvaContent = classVarianceAuthority.cva(
-  ["flex", "justify-center", "gap-1", "w-fit", "flex-none"],
-  {
-    variants: {
-      line: {
-        single: ["items-center", "flex-row"],
-        multi: ["items-start", "flex-col"]
-      }
-    },
-    defaultVariants: {
-      line: "single"
-    }
-  }
-);
-exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "toast";
-    this.status = "positive";
-    this.line = "single";
-    this.open = false;
-    this.closeButton = false;
-  }
-  /**
-   * Call the event registered in "close".
-   */
-  _handleClickClose() {
-    const event = new CustomEvent(events.EVENT_CLOSE);
-    this.open = false;
-    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({
-      status: this.status
-    })}
-          ></div>
-          <div
-            class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
-          >
-            <div
-              class=${cvaContent({
-      line: this.line
-    })}
-            >
-              <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">
-                    <button
-                      aria-label="Close"
-                      class="relative flex w-5 h-5 after:i-daikin-notification-close after:size-5 after:text-[#a0a0a0]"
-                      @click=${this._handleClickClose}
-                    ></button>
-                  </div>
-                ` : lit.nothing}
-          </div>
-        </aside>` : lit.nothing;
-  }
-};
-exports.DaikinNotification.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: block;
-    }
-
-    :host([variant="toast"]) {
-      width: max-content;
-    }
-
-    :host([variant="inline"]) {
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinNotification.prototype, "variant", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinNotification.prototype, "status", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinNotification.prototype, "line", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinNotification.prototype, "open", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "close-button" })
-], exports.DaikinNotification.prototype, "closeButton", 2);
-exports.DaikinNotification = __decorateClass([
-  decorators_js.customElement("daikin-notification")
-], exports.DaikinNotification);

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

@@ -1,77 +0,0 @@
-import { LitElement, nothing } from 'lit';
-import { MergeVariantProps } from "../../type-utils.cjs";
-declare const cvaContainer: (props?: ({
-    variant?: "toast" | "inline" | null | undefined;
-    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaIconContainer: (props?: ({
-    status?: "alarm" | "information" | "negative" | "positive" | "warning" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare const cvaContent: (props?: ({
-    line?: "single" | "multi" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type NotificationVariantProps = MergeVariantProps<typeof cvaContainer | typeof cvaIconContainer | typeof cvaContent>;
-/**
- * The notification component is a UI element used to inform users about important updates, alerts, or messages within an application.
- *
- * There are two variants of notification components: `toast` and `inline`.
- *
- * Toast notifications are brief messages that should appear temporarily at the edge of the screen, typically in the bottom or top corner.
- * Toast notifications are ideal for conveying transient information that does not require user interaction, such as success messages, warnings, or alerts. \
- * Please note that **currently we don't support automatic placement or stacking of toast notifications**.
- *
- * Inline notifications appear within the content of the application, usually embedded directly within a page or section.
- * Inline notifications are more persistent and are used to highlight important information or status updates that should remain visible to the user until they are acknowledged or the issue is resolved.
- *
- * @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>
- *   <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;
-    /**
-     * Type of notification.
-     */
-    variant: NotificationVariantProps["variant"];
-    /**
-     * Status of notification.
-     */
-    status: NotificationVariantProps["status"];
-    /**
-     * Display in single or multiple lines.
-     */
-    line: NotificationVariantProps["line"];
-    /**
-     * Specify the notification's open state.
-     */
-    open: boolean;
-    /**
-     * Whether to display the close button.
-     */
-    closeButton: boolean;
-    /**
-     * Call the event registered in "close".
-     */
-    private _handleClickClose;
-    render(): import('lit-html').TemplateResult<1> | typeof nothing;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "daikin-notification": DaikinNotification;
-    }
-}
-export {};

package/dist/cjs/components/notification/index.cjs

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

package/dist/cjs/components/notification/index.d.cts

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

package/dist/cjs/constants/events.cjs

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EVENT_CLOSE = "close";
-exports.EVENT_CLOSE = EVENT_CLOSE;

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

@@ -1,196 +0,0 @@
-"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 events = require("../../constants/events.cjs");
-const tailwind = require("../../tailwind.css.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 cvaContainer = classVarianceAuthority.cva(
-  [
-    "flex",
-    "box-border",
-    "bg-ddt-color-common-background-default",
-    "overflow-hidden",
-    "font-daikinSerif"
-  ],
-  {
-    variants: {
-      variant: {
-        toast: [
-          "border-2",
-          "border-solid",
-          "rounded-lg",
-          "shadow-notification"
-        ],
-        inline: []
-      },
-      status: {
-        positive: ["border-ddt-color-common-success"],
-        negative: ["border-ddt-color-common-danger-default"],
-        warning: ["border-ddt-color-common-warning"],
-        alarm: ["border-ddt-color-common-alarm"],
-        information: ["border-ddt-color-common-information"]
-      }
-    },
-    defaultVariants: {
-      variant: "toast",
-      status: "positive"
-    }
-  }
-);
-const cvaIconContainer = classVarianceAuthority.cva(
-  [
-    "flex-none",
-    "flex",
-    "justify-center",
-    "items-center",
-    "w-[2.75rem]",
-    "after:size-6",
-    "after:text-ddt-color-common-background-default"
-  ],
-  {
-    variants: {
-      status: {
-        positive: [
-          "bg-ddt-color-common-success",
-          "after:i-daikin-status-positive"
-        ],
-        negative: [
-          "bg-ddt-color-common-danger-default",
-          "after:i-daikin-status-negative"
-        ],
-        warning: [
-          "bg-ddt-color-common-warning",
-          "after:i-daikin-status-warning"
-        ],
-        alarm: ["bg-ddt-color-common-alarm", "after:i-daikin-status-alarm"],
-        information: [
-          "bg-ddt-color-common-information",
-          "after:i-daikin-status-information"
-        ]
-      }
-    },
-    defaultVariants: {
-      status: "positive"
-    }
-  }
-);
-const cvaContent = classVarianceAuthority.cva(
-  ["flex", "justify-center", "gap-1", "w-fit", "flex-none"],
-  {
-    variants: {
-      line: {
-        single: ["items-center", "flex-row"],
-        multi: ["items-start", "flex-col"]
-      }
-    },
-    defaultVariants: {
-      line: "single"
-    }
-  }
-);
-exports.DaikinNotification = class DaikinNotification extends lit.LitElement {
-  constructor() {
-    super(...arguments);
-    this.variant = "toast";
-    this.status = "positive";
-    this.line = "single";
-    this.open = false;
-    this.closeButton = false;
-  }
-  /**
-   * Call the event registered in "close".
-   */
-  _handleClickClose() {
-    const event = new CustomEvent(events.EVENT_CLOSE);
-    this.open = false;
-    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({
-      status: this.status
-    })}
-          ></div>
-          <div
-            class="flex justify-between items-center gap-5 p-5 text-lg flex-auto flex-shrink-0"
-          >
-            <div
-              class=${cvaContent({
-      line: this.line
-    })}
-            >
-              <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">
-                    <button
-                      aria-label="Close"
-                      class="relative flex w-5 h-5 after:i-daikin-notification-close after:size-5 after:text-[#a0a0a0]"
-                      @click=${this._handleClickClose}
-                    ></button>
-                  </div>
-                ` : lit.nothing}
-          </div>
-        </aside>` : lit.nothing;
-  }
-};
-exports.DaikinNotification.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: block;
-    }
-
-    :host([variant="toast"]) {
-      width: max-content;
-    }
-
-    :host([variant="inline"]) {
-      width: 100%;
-    }
-  `;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinNotification.prototype, "variant", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinNotification.prototype, "status", 2);
-__decorateClass([
-  decorators_js.property({ type: String })
-], exports.DaikinNotification.prototype, "line", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinNotification.prototype, "open", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, attribute: "close-button" })
-], exports.DaikinNotification.prototype, "closeButton", 2);
-exports.DaikinNotification = __decorateClass([
-  decorators_js.customElement("daikin-notification")
-], exports.DaikinNotification);