@daikin-oss/design-system-web-components 0.6.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";
@@ -63,7 +69,7 @@ let DaikinTooltip = class extends LitElement {
       return;
     }
     window.CSS.registerProperty({
-      name: "--dds-tooltip-spacing",
+      name: "--ddc-tooltip-spacing",
       syntax: "<length>",
       inherits: true,
       initialValue: "0px"
@@ -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))) {
@@ -99,10 +108,12 @@ let DaikinTooltip = class extends 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 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()}
       >
@@ -158,7 +170,7 @@ DaikinTooltip.styles = css`
     :host {
       display: inline-block;
 
-      --dds-tooltip-spacing: ${unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
+      --ddc-tooltip-spacing: ${unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
     }
   `;
 __decorateClass([
@@ -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/common.d.ts

@@ -0,0 +1,32 @@
+import { DaikinTreeItem } from "../tree-item/index.js";
+import { DaikinTreeSection } from "../tree-section/index.js";
+export type Direction = "up" | "down" | "left" | "right";
+export type DirectionDispatched = Exclude<Direction, "right">;
+export type TreeMoveFocusEventDetail = {
+    direction: DirectionDispatched;
+};
+export type TreeMoveFocusEvent = CustomEvent<TreeMoveFocusEventDetail>;
+/**
+ * Get direction from key name.
+ * @param key `event.key` where `event` is `KeyboardEvent`
+ * @returns direction
+ */
+export declare function getDirectionFromKey(key: string): Direction | undefined;
+/**
+ * `tree-move-focus` event handler for `daikin-tree-section`.
+ *
+ * @param section `daikin-tree-section`
+ * @param event `TreeMoveFocusEvent`
+ * @param children Children in the slot.
+ */
+export declare function handleTreeMoveFocusSection(section: DaikinTreeSection, event: TreeMoveFocusEvent, children: readonly (DaikinTreeSection | DaikinTreeItem)[]): void;
+/**
+ * `tree-move-focus` event handler for `daikin-tree`.
+ *
+ * @param event `TreeMoveFocusEvent`
+ * @param children Children in the slot.
+ */
+export declare function handleTreeMoveFocusRoot(event: TreeMoveFocusEvent, children: readonly (DaikinTreeSection | DaikinTreeItem)[]): void;
+export declare function emitTreeMoveFocus(target: HTMLElement, direction: DirectionDispatched): void;
+export declare function emitTreeSelect(target: HTMLElement): void;
+export declare function emitTreeUnselect(target: HTMLElement): void;

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

@@ -0,0 +1,90 @@
+function getDirectionFromKey(key) {
+  return {
+    ArrowUp: "up",
+    ArrowDown: "down",
+    ArrowLeft: "left",
+    ArrowRight: "right"
+  }[key];
+}
+function handleTreeMoveFocusCommon(event, children) {
+  const moveOffset = {
+    up: -1,
+    down: 1,
+    left: 0
+  }[event.detail.direction];
+  if (!moveOffset) {
+    return;
+  }
+  const target = event.target;
+  const enabledChildren = children.filter(({ disabled }) => !disabled);
+  const focusedItemIndex = enabledChildren.findIndex((item) => item === target);
+  if (focusedItemIndex < 0) {
+    return;
+  }
+  event.stopPropagation();
+  const child = enabledChildren[focusedItemIndex + moveOffset];
+  if (!child) {
+    return false;
+  }
+  if (moveOffset > 0) {
+    child.focus();
+  } else {
+    child.focusLastItem();
+  }
+  return true;
+}
+function handleTreeMoveFocusSection(section, event, children) {
+  const { direction } = event.detail;
+  if (direction === "left") {
+    event.stopPropagation();
+    section.focus();
+  } else {
+    const result = handleTreeMoveFocusCommon(event, children);
+    if (result === false) {
+      if (direction === "up") {
+        section.focus();
+      } else {
+        emitTreeMoveFocus(section, "down");
+      }
+    }
+  }
+}
+function handleTreeMoveFocusRoot(event, children) {
+  event.stopPropagation();
+  handleTreeMoveFocusCommon(event, children);
+}
+function emitTreeMoveFocus(target, direction) {
+  target.dispatchEvent(
+    new CustomEvent("tree-move-focus", {
+      detail: {
+        direction
+      },
+      composed: true,
+      bubbles: true
+    })
+  );
+}
+function emitTreeSelect(target) {
+  target.dispatchEvent(
+    new Event("tree-select", {
+      composed: true,
+      bubbles: true
+    })
+  );
+}
+function emitTreeUnselect(target) {
+  target.dispatchEvent(
+    new Event("tree-unselect", {
+      composed: true,
+      bubbles: true
+    })
+  );
+}
+export {
+  emitTreeMoveFocus,
+  emitTreeSelect,
+  emitTreeUnselect,
+  getDirectionFromKey,
+  handleTreeMoveFocusRoot,
+  handleTreeMoveFocusSection
+};

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

@@ -0,0 +1,73 @@
+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.
+ *
+ * Hierarchy:
+ * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-item`
+ * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-section` ...
+ * - `daikin-tree` > `daikin-tree-item`
+ *
+ * @slot - A slot for tree sections and tree items. Place `daikin-tree-section` or `daikin-tree-item` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tree/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tree-item/index.js";
+ * import "@daikin-oss/design-system-web-components/components/tree-section/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-tree>
+ *   <daikin-tree-section>
+ *     <span slot="label">Tree section 1</span>
+ *     <daikin-tree-item>Tree item 1-1</daikin-tree-item>
+ *     <daikin-tree-item>Tree item 1-2</daikin-tree-item>
+ *     <daikin-tree-item>Tree item 1-3</daikin-tree-item>
+ *   </daikin-tree-section>
+ * </daikin-tree>
+ * ```
+ */
+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 yourself.
+     */
+    selectable: boolean;
+    /**
+     * The value of the currently selected tree section or tree item.
+     * Even if `selectable` is `false`, you can still set this property yourself.
+     */
+    selectedItems: string[];
+    private readonly _children;
+    private _handleMouseDown;
+    private _handleSlotChange;
+    private _handleTreeMoveFocus;
+    private _handleTreeSelect;
+    private _handleTreeUnselect;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Calls `selectItems` for the tree sections and tree items of the child elements in the slot.
+     *
+     * @param value Tree item value.
+     * @private
+     */
+    selectItems(values: readonly string[]): void;
+    /**
+     * Returns an array of the `value` of the currently selected sections and items.
+     * If nothing is selected, returns `[]`.
+     *
+     * @returns An array of the `value` of the selected sections and items (if any). `[]` if there is none.
+     * @private
+     */
+    getSelectedItems(): string[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tree": DaikinTree;
+    }
+}

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

@@ -0,0 +1,109 @@
+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;
+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;
+};
+let DaikinTree = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.selectable = false;
+    this.selectedItems = [];
+  }
+  _handleMouseDown(event) {
+    if (event.detail >= 2) {
+      event.preventDefault();
+    }
+  }
+  _handleSlotChange() {
+    this._children.forEach((child) => child.level = 0);
+    this.selectItems(this.selectedItems);
+  }
+  _handleTreeMoveFocus(event) {
+    handleTreeMoveFocusRoot(event, this._children);
+  }
+  _handleTreeSelect(event) {
+    if (!this.selectable) {
+      return;
+    }
+    event.stopPropagation();
+    const target = event.target;
+    this.selectedItems = [target.value];
+  }
+  _handleTreeUnselect(event) {
+    if (!this.selectable) {
+      return;
+    }
+    event.stopPropagation();
+    this.selectedItems = this.getSelectedItems();
+  }
+  render() {
+    return html`<div role="tree" @mousedown=${this._handleMouseDown}>
+      <slot
+        @slotchange=${this._handleSlotChange}
+        @tree-move-focus=${this._handleTreeMoveFocus}
+        @tree-select=${this._handleTreeSelect}
+        @tree-unselect=${this._handleTreeUnselect}
+      ></slot>
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selectedItems")) {
+      this.selectItems(this.selectedItems);
+    }
+  }
+  /**
+   * Calls `selectItems` for the tree sections and tree items of the child elements in the slot.
+   *
+   * @param value Tree item value.
+   * @private
+   */
+  selectItems(values) {
+    this._children.forEach((child) => child.selectItems(values));
+  }
+  /**
+   * Returns an array of the `value` of the currently selected sections and items.
+   * If nothing is selected, returns `[]`.
+   *
+   * @returns An array of the `value` of the selected sections and items (if any). `[]` if there is none.
+   * @private
+   */
+  getSelectedItems() {
+    return Array.from(
+      new Set(this._children.flatMap((child) => child.getSelectedItems()))
+    );
+  }
+};
+DaikinTree.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTree.prototype, "selectable", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinTree.prototype, "selectedItems", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })
+], DaikinTree.prototype, "_children", 2);
+DaikinTree = __decorateClass([
+  ddsElement("daikin-tree")
+], DaikinTree);
+export {
+  DaikinTree
+};

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

@@ -0,0 +1 @@
+export * from "./daikin-tree.js";

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

@@ -0,0 +1,4 @@
+import { DaikinTree } from "./daikin-tree.js";
+export {
+  DaikinTree
+};

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

@@ -0,0 +1,95 @@
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
+export declare const cvaTreeChildren: (props?: ({
+    disabled?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    icon?: boolean | null | undefined;
+    open?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The tree item component that can be used within `daikin-tree` and `daikin-tree-section` component.
+ *
+ * This can be placed either under the tree section or directly under the tree. Elements cannot be placed any deeper than tree item.
+ *
+ * Hierarchy:
+ * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-item`
+ * - `daikin-tree` > `daikin-tree-item`
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<a>` or `<button>` element. Suppressed if `disabled` is true,
+ * @fires tree-move-focus - _Internal use._ A custom event used to move the focus within a tree.
+ *
+ * @slot - A slot for the tree item content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tree-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-tree-item>Tree item</daikin-tree-item>
+ * ```
+ */
+export declare class DaikinTreeItem extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Value of the tree item.
+     */
+    value: string;
+    /**
+     * Whether the tree item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the tree item is selected.
+     * Controlled by `daikin-tree`.
+     */
+    selected: boolean;
+    /**
+     * _Internal use._
+     * The current nesting depth when the root's children are 0.
+     * Automatically set by the parent.
+     *
+     * @private
+     */
+    level: number;
+    private readonly _focusableRef;
+    private get _selected();
+    private _handleKeyDown;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Focuses on the inner button.
+     *
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Focuses on the inner button.
+     * This is provided to ensure consistency of the interface.
+     *
+     * @param options focus options
+     * @private
+     */
+    focusLastItem(options?: FocusOptions): void;
+    /**
+     * Updates the selection state (`this.selected`) to true if the argument `value` matches `this.value`. Otherwise, sets it to false.
+     *
+     * @param value Tree item value.
+     * @private
+     */
+    selectItems(values: readonly string[]): void;
+    /**
+     * Returns `[this.value]` if selected, or `[]` if not selected.
+     *
+     * @returns `[this.value]` if selected. `[]` if not selected.
+     * @private
+     */
+    getSelectedItems(): string[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tree-item": DaikinTreeItem;
+    }
+}