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

package/dist/es/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/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/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/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 {

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

@@ -1,7 +1,10 @@
-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 { 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 { cvaTreeChildren } from "../tree-item/daikin-tree-item.js";
@@ -16,12 +19,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinTreeSection = class extends LitElement {
+let DaikinTreeSection = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
     this.disabled = false;
-    this.selectable = false;
     this.selected = false;
     this.open = false;
     this.level = 0;
@@ -38,11 +40,6 @@ let DaikinTreeSection = class extends LitElement {
       item.level = this.level + 1;
     }
   }
-  _updateSections() {
-    this._sections.forEach((section) => {
-      section.selectable = this.selectable;
-    });
-  }
   _handleClick() {
     if (!this.disabled && this.dispatchEvent(
       new Event("toggle", {
@@ -55,7 +52,6 @@ let DaikinTreeSection = class extends LitElement {
   }
   _handleSlotChange() {
     this._updateChildrenLevel();
-    this._updateSections();
   }
   _handleTreeMoveFocus(event) {
     handleTreeMoveFocusSection(this, event, this._children);
@@ -68,9 +64,7 @@ let DaikinTreeSection = class extends LitElement {
     if (!this.disabled && ["Enter", " "].includes(event.key)) {
       event.preventDefault();
       this._handleClick();
-      if (this.selectable) {
-        emitTreeSelect(this);
-      }
+      emitTreeSelect(this);
       return;
     }
     const direction = getDirectionFromKey(event.key);
@@ -143,13 +137,9 @@ let DaikinTreeSection = class extends LitElement {
     }
     if (changedProperties.has("disabled")) {
       if (this.disabled) {
-        this.selectItem(null);
         emitTreeUnselect(this);
       }
     }
-    if (changedProperties.has("selectable")) {
-      this._updateSections();
-    }
   }
   /**
    * Focuses on the inner button.
@@ -178,33 +168,34 @@ let DaikinTreeSection = class extends LitElement {
   }
   /**
    * 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) {
-    if (this.disabled && value != null) {
-      return;
-    }
-    this.selected = this.value === value;
-    this._children.forEach((child) => child.selectItem(value));
+  selectItems(values) {
+    this.selected = !this.disabled && values.includes(this.value);
+    this._children.forEach(
+      (child) => child.selectItems(this.disabled ? [] : 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 currently selected sections and items (if any). `[]` if there is none.
    * @private
    */
-  getSelectedItem() {
+  getSelectedItems() {
     if (this.disabled) {
-      return null;
-    }
-    if (this.selected) {
-      return this.value;
+      return [];
     }
-    return this._children.map((child) => child.getSelectedItem()).find((item) => !!item) ?? null;
+    return Array.from(
+      /* @__PURE__ */ new Set([
+        ...this.selected ? [this.value] : [],
+        ...this._children.flatMap((child) => child.getSelectedItems())
+      ])
+    );
   }
 };
 DaikinTreeSection.styles = css`
@@ -220,9 +211,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTreeSection.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: false })
-], DaikinTreeSection.prototype, "selectable", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTreeSection.prototype, "selected", 2);
@@ -235,11 +223,8 @@ __decorateClass([
 __decorateClass([
   queryAssignedElements({ selector: "daikin-tree-section,daikin-tree-item" })
 ], DaikinTreeSection.prototype, "_children", 2);
-__decorateClass([
-  queryAssignedElements({ selector: "daikin-tree-section" })
-], DaikinTreeSection.prototype, "_sections", 2);
 DaikinTreeSection = __decorateClass([
-  customElement("daikin-tree-section")
+  ddsElement("daikin-tree-section")
 ], DaikinTreeSection);
 export {
   DaikinTreeSection

package/dist/es/controllers/click-outside.d.ts

@@ -7,7 +7,7 @@ import { ReactiveControllerHost } from 'lit';
  * @example
  *
  * ```ts
- * class MyComponent extends LitElement {
+ * class MyComponent extends DDSElement {
  *   private _clickOutsideController = new ClickOutsideController(
  *     this,
  *     this._onClickOutside

package/dist/es/index.js

@@ -6,16 +6,18 @@ import { DaikinButton } from "./components/button/daikin-button.js";
 import { DaikinCard } from "./components/card/daikin-card.js";
 import { DaikinCardFooter } from "./components/card-footer/daikin-card-footer.js";
 import { DaikinCardHeader } from "./components/card-header/daikin-card-header.js";
+import { DaikinCarousel } from "./components/carousel/daikin-carousel.js";
+import { DaikinCarouselItem } from "./components/carousel-item/daikin-carousel-item.js";
 import { DaikinCheckbox } from "./components/checkbox/daikin-checkbox.js";
 import { DaikinDropdown } from "./components/dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./components/dropdown-item/daikin-dropdown-item.js";
 import { DaikinIcon, iconList } from "./components/icon/daikin-icon.js";
 import { DaikinIconButton } from "./components/icon-button/daikin-icon-button.js";
+import { DaikinInlineNotification } from "./components/inline-notification/daikin-inline-notification.js";
 import { DaikinInputGroup } from "./components/input-group/daikin-input-group.js";
 import { DaikinLink } from "./components/link/daikin-link.js";
 import { DaikinList } from "./components/list/daikin-list.js";
 import { DaikinListItem } from "./components/list-item/daikin-list-item.js";
-import { DaikinNotification } from "./components/notification/daikin-notification.js";
 import { DaikinPagination } from "./components/pagination/daikin-pagination.js";
 import { DaikinProgressBar } from "./components/progress-bar/daikin-progress-bar.js";
 import { DaikinProgressIndicator } from "./components/progress-indicator/daikin-progress-indicator.js";
@@ -30,6 +32,8 @@ import { DaikinTableHeaderCell } from "./components/table-header-cell/daikin-tab
 import { DaikinTabs } from "./components/tabs/daikin-tabs.js";
 import { DaikinTextArea } from "./components/text-area/daikin-text-area.js";
 import { DaikinTextField } from "./components/text-field/daikin-text-field.js";
+import { DaikinToastNotification } from "./components/toast-notification/daikin-toast-notification.js";
+import { DaikinToastNotificationManager } from "./components/toast-notification-manager/daikin-toast-notification-manager.js";
 import { DaikinToggle } from "./components/toggle/daikin-toggle.js";
 import { DaikinTooltip } from "./components/tooltip/daikin-tooltip.js";
 import { DaikinTree } from "./components/tree/daikin-tree.js";
@@ -44,16 +48,18 @@ export {
   DaikinCard,
   DaikinCardFooter,
   DaikinCardHeader,
+  DaikinCarousel,
+  DaikinCarouselItem,
   DaikinCheckbox,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinIcon,
   DaikinIconButton,
+  DaikinInlineNotification,
   DaikinInputGroup,
   DaikinLink,
   DaikinList,
   DaikinListItem,
-  DaikinNotification,
   DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
@@ -68,6 +74,8 @@ export {
   DaikinTabs,
   DaikinTextArea,
   DaikinTextField,
+  DaikinToastNotification,
+  DaikinToastNotificationManager,
   DaikinToggle,
   DaikinTooltip,
   DaikinTree,