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

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

@@ -1,8 +1,11 @@
 import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import { isClient } from "../../is-client.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -19,38 +22,41 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const cvaTooltip = 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";
-let DaikinTooltip = class extends LitElement {
+let DaikinTooltip = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.placement = "bottom";
-    this.variant = "light";
+    this.color = "default";
     this.open = false;
     this.description = "";
     this.popoverValue = "auto";
@@ -75,6 +81,12 @@ let DaikinTooltip = class extends LitElement {
       this.open = !this.open;
     }
   }
+  _handleFocusIn() {
+    this.open = true;
+  }
+  _handleFocusOut() {
+    this.open = false;
+  }
   _handleMouseEnter() {
     if (this.trigger === "hover") {
       this.open = true;
@@ -85,11 +97,8 @@ let DaikinTooltip = class extends LitElement {
       this.open = false;
     }
   }
-  _handleFocusIn() {
-    this.open = true;
-  }
-  _handleFocusOut() {
-    this.open = false;
+  _handleBeforeToggle(event) {
+    reDispatch(this, event, new ToggleEvent("beforetoggle", event));
   }
   _handleToggle(event) {
     if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
@@ -102,7 +111,9 @@ let DaikinTooltip = class extends LitElement {
       ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--ddc-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
       10
     );
-    return html`<div class="relative inline-block">
+    return html`<div
+      class="relative inline-block text-ddt-color-common-text-primary font-daikinSerif"
+    >
       <div
         id="trigger"
         aria-labelledby="trigger"
@@ -111,19 +122,20 @@ let DaikinTooltip = class extends 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(this, event, new ToggleEvent("beforetoggle", event))}
+        @beforetoggle=${this._handleBeforeToggle}
         @toggle=${this._handleToggle}
         ${this._autoUpdateController.refFloating()}
       >
@@ -166,7 +178,7 @@ __decorateClass([
 ], DaikinTooltip.prototype, "placement", 2);
 __decorateClass([
   property({ type: String, reflect: true })
-], DaikinTooltip.prototype, "variant", 2);
+], DaikinTooltip.prototype, "color", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTooltip.prototype, "open", 2);
@@ -180,7 +192,7 @@ __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTooltip.prototype, "trigger", 2);
 DaikinTooltip = __decorateClass([
-  customElement("daikin-tooltip")
+  ddsElement("daikin-tooltip")
 ], DaikinTooltip);
 DaikinTooltip.registerCSSCustomProperties();
 export {

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

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The tree component is a component that creates a hierarchical list. You can create a hierarchical structure by placing tree section components and tree item components under the parent tree component.
  *
@@ -28,23 +29,21 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-tree>
  * ```
  */
-export declare class DaikinTree extends LitElement {
+export declare class DaikinTree extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Whether or not to enable tree selection.
      * When enabled, tree sections and items can be selected by click, and the `selected` property of the `daikin-tree` and its descendants will be automatically controlled.
-     * Even if this is disabled, you can still set the `selected` property of sections and items yourself.
+     * Even if this is disabled, you can still set the `selected` property yourself.
      */
     selectable: boolean;
     /**
      * The value of the currently selected tree section or tree item.
-     * Only used if `selectable` is `true`.
+     * Even if `selectable` is `false`, you can still set this property yourself.
      */
-    selected: string | null;
+    selectedItems: string[];
     private readonly _children;
-    private readonly _sections;
-    private _updateChildrenLevel;
-    private _updateSections;
+    private _handleMouseDown;
     private _handleSlotChange;
     private _handleTreeMoveFocus;
     private _handleTreeSelect;
@@ -52,20 +51,20 @@ export declare class DaikinTree extends LitElement {
     render(): import('lit-html').TemplateResult<1>;
     protected updated(changedProperties: PropertyValues): void;
     /**
-     * Calls `selectItem` for the tree sections and tree items of the child elements in the slot.
+     * Calls `selectItems` for the tree sections and tree items of the child elements in the slot.
      *
      * @param value Tree item value.
      * @private
      */
-    selectItem(value: string | null): void;
+    selectItems(values: readonly string[]): void;
     /**
-     * Returns the `value` of the currently selected section or item.
-     * If nothing is selected, returns `null`.
+     * Returns an array of the `value` of the currently selected sections and items.
+     * If nothing is selected, returns `[]`.
      *
-     * @returns The `value` of the selected section or item (if any). `null` if there is none.
+     * @returns An array of the `value` of the selected sections and items (if any). `[]` if there is none.
      * @private
      */
-    getSelectedItem(): string | null;
+    getSelectedItems(): string[];
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,5 +1,8 @@
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { handleTreeMoveFocusRoot } from "./common.js";
 var __defProp = Object.defineProperty;
@@ -12,41 +15,41 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinTree = class extends LitElement {
+let DaikinTree = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.selectable = false;
-    this.selected = null;
+    this.selectedItems = [];
   }
-  _updateChildrenLevel() {
-    this._children.forEach((child) => child.level = 0);
-  }
-  _updateSections() {
-    this._sections.forEach((section) => {
-      section.selectable = this.selectable;
-    });
+  _handleMouseDown(event) {
+    if (event.detail >= 2) {
+      event.preventDefault();
+    }
   }
   _handleSlotChange() {
-    this._updateChildrenLevel();
-    this._updateSections();
+    this._children.forEach((child) => child.level = 0);
+    this.selectItems(this.selectedItems);
   }
   _handleTreeMoveFocus(event) {
     handleTreeMoveFocusRoot(event, this._children);
   }
   _handleTreeSelect(event) {
-    event.stopPropagation();
     if (!this.selectable) {
       return;
     }
+    event.stopPropagation();
     const target = event.target;
-    this.selected = target.value;
+    this.selectedItems = [target.value];
   }
   _handleTreeUnselect(event) {
+    if (!this.selectable) {
+      return;
+    }
     event.stopPropagation();
-    this.selected = this.getSelectedItem();
+    this.selectedItems = this.getSelectedItems();
   }
   render() {
-    return html`<div role="tree">
+    return html`<div role="tree" @mousedown=${this._handleMouseDown}>
       <slot
         @slotchange=${this._handleSlotChange}
         @tree-move-focus=${this._handleTreeMoveFocus}
@@ -56,31 +59,30 @@ let DaikinTree = class extends LitElement {
     </div>`;
   }
   updated(changedProperties) {
-    if (changedProperties.has("selectable")) {
-      this._updateSections();
-    }
-    if (changedProperties.has("selected") && this.selectable) {
-      this.selectItem(this.selected);
+    if (changedProperties.has("selectedItems")) {
+      this.selectItems(this.selectedItems);
     }
   }
   /**
-   * Calls `selectItem` for the tree sections and tree items of the child elements in the slot.
+   * Calls `selectItems` for the tree sections and tree items of the child elements in the slot.
    *
    * @param value Tree item value.
    * @private
    */
-  selectItem(value) {
-    this._children.forEach((child) => child.selectItem(value));
+  selectItems(values) {
+    this._children.forEach((child) => child.selectItems(values));
   }
   /**
-   * Returns the `value` of the currently selected section or item.
-   * If nothing is selected, returns `null`.
+   * Returns an array of the `value` of the currently selected sections and items.
+   * If nothing is selected, returns `[]`.
    *
-   * @returns The `value` of the selected section or item (if any). `null` if there is none.
+   * @returns An array of the `value` of the selected sections and items (if any). `[]` if there is none.
    * @private
    */
-  getSelectedItem() {
-    return this._children.map((child) => child.getSelectedItem()).find((item) => !!item) ?? null;
+  getSelectedItems() {
+    return Array.from(
+      new Set(this._children.flatMap((child) => child.getSelectedItems()))
+    );
   }
 };
 DaikinTree.styles = css`
@@ -94,16 +96,13 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTree.prototype, "selectable", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
-], DaikinTree.prototype, "selected", 2);
+  property({ type: Array, attribute: false })
+], DaikinTree.prototype, "selectedItems", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })
 ], DaikinTree.prototype, "_children", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "daikin-tree-section" })
-], DaikinTree.prototype, "_sections", 2);
 DaikinTree = __decorateClass([
-  customElement("daikin-tree")
+  ddsElement("daikin-tree")
 ], DaikinTree);
 export {
   DaikinTree

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

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 export declare const cvaTreeChildren: (props?: ({
     disabled?: boolean | null | undefined;
     selected?: boolean | null | undefined;
@@ -29,7 +30,7 @@ export declare const cvaTreeChildren: (props?: ({
  * <daikin-tree-item>Tree item</daikin-tree-item>
  * ```
  */
-export declare class DaikinTreeItem extends LitElement {
+export declare class DaikinTreeItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Value of the tree item.
@@ -41,9 +42,7 @@ export declare class DaikinTreeItem extends LitElement {
     disabled: boolean;
     /**
      * Whether the tree item is selected.
-     * Ignored if disabled.
-     * Controlled by `daikin-tree` if its `selectable` is true.
-     * If the tree's `selected` is false, you can manually set this property to control the display of the selected state.
+     * Controlled by `daikin-tree`.
      */
     selected: boolean;
     /**
@@ -55,6 +54,7 @@ export declare class DaikinTreeItem extends LitElement {
      */
     level: number;
     private readonly _focusableRef;
+    private get _selected();
     private _handleKeyDown;
     constructor();
     render(): import('lit-html').TemplateResult<1>;
@@ -79,14 +79,14 @@ export declare class DaikinTreeItem extends LitElement {
      * @param value Tree item value.
      * @private
      */
-    selectItem(value: string | null): void;
+    selectItems(values: readonly string[]): void;
     /**
-     * Returns `this.value` if selected, or `null` if not selected.
+     * Returns `[this.value]` if selected, or `[]` if not selected.
      *
-     * @returns `this.value` if selected. `null` if not selected.
+     * @returns `[this.value]` if selected. `[]` if not selected.
      * @private
      */
-    getSelectedItem(): string | null;
+    getSelectedItems(): string[];
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,8 +1,11 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
 import { emitTreeSelect, getDirectionFromKey, emitTreeMoveFocus, emitTreeUnselect } from "../tree/common.js";
@@ -25,6 +28,7 @@ const cvaTreeChildren = cva(
     "py-3",
     "pr-4",
     "pl-[calc((var(--level)+1)*1rem)]",
+    "leading-[130%]",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
@@ -58,7 +62,8 @@ const cvaTreeChildren = cva(
           "before:i-daikin-chevron-right",
           "before:size-5",
           "before:m-0.5",
-          "before:transition-all"
+          "before:transition-all",
+          "before:flex-none"
         ]
       },
       open: {
@@ -68,7 +73,7 @@ const cvaTreeChildren = cva(
     }
   }
 );
-let DaikinTreeItem = class extends LitElement {
+let DaikinTreeItem = class extends DDSElement {
   constructor() {
     super();
     this.value = "";
@@ -82,6 +87,9 @@ let DaikinTreeItem = class extends LitElement {
       }
     });
   }
+  get _selected() {
+    return this.selected && !this.disabled;
+  }
   _handleKeyDown(event) {
     if (!isSimpleKeyEvent(event)) {
       return;
@@ -105,13 +113,13 @@ let DaikinTreeItem = class extends LitElement {
       ${ref(this._focusableRef)}
       class=${cvaTreeChildren({
       disabled: this.disabled,
-      selected: this.selected && !this.disabled,
+      selected: this._selected,
       icon: false,
       open: false
     })}
       role="treeitem"
       aria-disabled=${this.disabled}
-      aria-selected=${this.selected && !this.disabled}
+      aria-selected=${this._selected}
       tabindex=${ifDefined(!this.disabled ? 0 : void 0)}
       style=${`--level:${this.level}`}
       @click=${() => emitTreeSelect(this)}
@@ -123,7 +131,6 @@ let DaikinTreeItem = class extends LitElement {
   updated(changedProperties) {
     if (changedProperties.has("disabled")) {
       if (this.disabled) {
-        this.selectItem(null);
         emitTreeUnselect(this);
       }
     }
@@ -154,20 +161,17 @@ let DaikinTreeItem = class extends LitElement {
    * @param value Tree item value.
    * @private
    */
-  selectItem(value) {
-    if (this.disabled && value != null) {
-      return;
-    }
-    this.selected = this.value === value;
+  selectItems(values) {
+    this.selected = !this.disabled && values.includes(this.value);
   }
   /**
-   * Returns `this.value` if selected, or `null` if not selected.
+   * Returns `[this.value]` if selected, or `[]` if not selected.
    *
-   * @returns `this.value` if selected. `null` if not selected.
+   * @returns `[this.value]` if selected. `[]` if not selected.
    * @private
    */
-  getSelectedItem() {
-    return !this.disabled && this.selected ? this.value : null;
+  getSelectedItems() {
+    return !this.disabled && this.selected ? [this.value] : [];
   }
 };
 DaikinTreeItem.styles = css`
@@ -190,7 +194,7 @@ __decorateClass([
   property({ type: Number, attribute: false })
 ], DaikinTreeItem.prototype, "level", 2);
 DaikinTreeItem = __decorateClass([
-  customElement("daikin-tree-item")
+  ddsElement("daikin-tree-item")
 ], DaikinTreeItem);
 export {
   DaikinTreeItem,

package/dist/es-dev/components/tree-section/daikin-tree-section.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The tree section component that can be used within `daikin-tree` component.
  *
@@ -30,7 +31,7 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-tree-section>
  * ```
  */
-export declare class DaikinTreeSection extends LitElement {
+export declare class DaikinTreeSection extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Value of the tree section.
@@ -40,18 +41,9 @@ export declare class DaikinTreeSection extends LitElement {
      * Whether the tree section is disabled.
      */
     disabled: boolean;
-    /**
-     * Whether or not to enable tree selection.
-     * Controlled by `daikin-tree`.
-     *
-     * @private
-     */
-    selectable: boolean;
     /**
      * Whether the tree item is selected.
-     * Ignored if disabled.
-     * Controlled by `daikin-tree` if its `selectable` is true.
-     * If the tree's `selected` is false, you can manually set this property to control the display of the selected state.
+     * Controlled by `daikin-tree`.
      */
     selected: boolean;
     /**
@@ -68,12 +60,10 @@ export declare class DaikinTreeSection extends LitElement {
      */
     level: number;
     private readonly _children;
-    private readonly _sections;
     private readonly _focusableRef;
     private get _open();
     private get _selected();
     private _updateChildrenLevel;
-    private _updateSections;
     private _handleClick;
     private _handleSlotChange;
     private _handleTreeMoveFocus;
@@ -97,20 +87,20 @@ export declare class DaikinTreeSection extends LitElement {
     focusLastItem(options?: FocusOptions): void;
     /**
      * Updates the selection state (`this.selected`) to true if the argument `value` matches `this.value`. Otherwise, sets it to false.
-     * In addition, calls `selectItem` for the tree sections and tree items of the child elements in the slot in the same way.
+     * In addition, calls `selectItems` for the tree sections and tree items of the child elements in the slot in the same way.
      *
      * @param value Tree item value.
      * @private
      */
-    selectItem(value: string | null): void;
+    selectItems(values: readonly string[]): void;
     /**
-     * Returns the `value` of the currently selected section or item.
-     * If nothing is selected, returns `null`.
+     * Returns an array of the `value` of the currently selected sections and items.
+     * If nothing is selected, returns `[]`.
      *
-     * @returns The `value` of the selected section or item (if any). `null` if there is none.
+     * @returns An array of the `value` of the currently selected sections and items (if any). `[]` if there is none.
      * @private
      */
-    getSelectedItem(): string | null;
+    getSelectedItems(): string[];
 }
 declare global {
     interface HTMLElementTagNameMap {