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

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.js

@@ -21,7 +21,7 @@ const cvaHeaderCell = cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-system-element-text-primary",
+    "text-ddt-color-common-text-primary",
     "font-bold"
   ],
   {
@@ -34,15 +34,14 @@ const cvaHeaderCell = cva(
       sortable: {
         false: [],
         true: [
-          "hover:bg-system-background-surface-hover",
-          "active:bg-system-background-surface-press",
+          "hover:bg-ddt-color-common-surface-hover",
+          "active:bg-ddt-color-common-surface-press",
           "focus-visible:outline",
           "focus-visible:outline-2",
           "focus-visible:-outline-offset-2",
-          "focus-visible:outline-system-state-focus",
+          "focus-visible:outline-ddt-color-common-border-focus",
           "after:flex-none",
           "after:size-6",
-          "after:text-system-element-text-primary",
           "after:i-daikin-sort"
         ]
       }

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

@@ -178,7 +178,7 @@ let DaikinTabs = class extends LitElement {
   render() {
     return html`
       <div
-        class="flex flex-nowrap w-full p-[3px] overflow-auto relative before:absolute before:h-[1px] before:inset-[3px] before:top-auto before:bg-system-element-divider-secondary"
+        class="flex flex-nowrap w-full p-[3px] overflow-auto relative before:absolute before:h-[1px] before:inset-[3px] before:top-auto before:bg-ddt-color-divider"
         role="tablist"
         @click=${this._handleTabClick}
         @keydown=${this._handleKeyDown}

package/dist/es-dev/components/text-area/daikin-text-area.js

@@ -17,15 +17,16 @@ const cvaTextArea = cva(
   [
     "w-full",
     "h-full",
+    "bg-ddt-color-common-background-default",
     "px-4",
     "py-3",
     "rounded",
     "font-daikinSerif",
     "outline",
     "outline-[--color-border]",
-    "outline-0",
-    "-outline-offset-2",
-    "placeholder:text-system-element-text-secondary",
+    "outline-1",
+    "-outline-offset-1",
+    "placeholder:text-ddt-color-common-text-secondary",
     // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
     // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
     "define-[--color-state-active,--color-state-focus,--color-base]/color-border",
@@ -33,23 +34,24 @@ const cvaTextArea = cva(
     "border-[--color-border]",
     // Update `--color-base` depending on the state.
     // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
-    "enabled:text-system-element-text-primary",
-    "enabled:hover:bg-system-background-surface-hover",
-    "enabled:active:bg-system-background-surface-press",
+    "enabled:text-ddt-color-common-text-primary",
+    "enabled:hover:bg-ddt-color-common-surface-hover",
+    "enabled:active:bg-ddt-color-common-surface-press",
     "focus-visible:outline-2",
-    "disabled:var-color-system-state-disabled/color-base",
-    "disabled:text-system-state-disabled",
-    "disabled:bg-white",
-    "disabled:placeholder:text-system-state-disabled"
+    "focus-visible:-outline-offset-2",
+    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:bg-color-common-background-default",
+    "disabled:placeholder:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       error: {
         false: [
-          "enabled:var-color-system-state-neutral-active/color-base",
-          "focus-visible:var-color-system-state-focus/color-state-focus"
+          "enabled:var-color-ddt-color-common-neutral-default/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
         ],
-        true: ["enabled:var-color-system-state-error-active/color-base"]
+        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
       },
       resize: {
         false: ["resize-none"],
@@ -110,7 +112,7 @@ let DaikinTextArea = class extends LitElement {
     this._updateValue(this.value);
   }
   reflectInputGroup(inputGroup) {
-    const isError = !inputGroup.disabled && !!inputGroup.error;
+    const isError = !inputGroup.disabled && (!!inputGroup.error || !!inputGroup.textareaLimitExceeded);
     this.disabled = !!inputGroup.disabled;
     this.required = !!inputGroup.required;
     this.error = isError;

package/dist/es-dev/components/text-field/daikin-text-field.js

@@ -19,6 +19,7 @@ const cvaInput = cva(
     "items-center",
     "w-full",
     "h-full",
+    "bg-ddt-color-common-background-default",
     "relative",
     "px-2",
     "rounded",
@@ -28,7 +29,7 @@ const cvaInput = cva(
     "outline-[--color-border]",
     "outline-0",
     "-outline-offset-2",
-    "placeholder:text-system-element-text-secondary",
+    "placeholder:text-ddt-color-common-text-secondary",
     // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
     // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
     "define-[--color-state-focus,--color-base]/color-border",
@@ -36,23 +37,23 @@ const cvaInput = cva(
     "border-[--color-border]",
     // Update `--color-base` depending on the state.
     // The default `--color-base` and `--color-state-focus` values are defined in `variants.error` because they differ depending on whether or not the input has an error state.
-    "enabled:text-system-element-text-primary",
-    "enabled:hover:bg-system-background-surface-hover",
-    "enabled:active:bg-system-background-surface-press",
+    "enabled:text-ddt-color-common-text-primary",
+    "enabled:hover:bg-ddt-color-common-surface-hover",
+    "enabled:active:bg-ddt-color-common-surface-press",
     "focus-visible:outline-2",
-    "disabled:var-color-system-state-disabled/color-base",
-    "disabled:text-system-state-disabled",
-    "disabled:bg-white",
-    "disabled:placeholder:text-system-state-disabled"
+    "disabled:var-color-ddt-color-common-disabled/color-base",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:bg-ddt-color-common-background-default",
+    "disabled:placeholder:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       error: {
         false: [
-          "enabled:var-color-system-state-neutral-active/color-base",
-          "focus-visible:var-color-system-state-focus/color-state-focus"
+          "enabled:var-color-ddt-color-common-neutral-default/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-state-focus"
         ],
-        true: ["enabled:var-color-system-state-error-active/color-base"]
+        true: ["enabled:var-color-ddt-color-common-danger-default/color-base"]
       },
       leftIcon: {
         false: ["pl-4"],
@@ -74,8 +75,8 @@ const cvaIcon = cva(
         right: "right-3"
       },
       disabled: {
-        false: ["text-system-element-text-primary"],
-        true: ["text-system-state-disabled"]
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-disabled"]
       }
     }
   }

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

@@ -16,22 +16,22 @@ const TOGGLE_CLASS_NAME = 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",
@@ -43,8 +43,8 @@ const TOGGLE_CLASS_NAME = 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"
 ])();
 let DaikinToggle = class extends LitElement {
   constructor() {

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

@@ -8,7 +8,7 @@ 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
  *
  * @example
  *

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

@@ -63,7 +63,7 @@ let DaikinTooltip = class extends LitElement {
       return;
     }
     window.CSS.registerProperty({
-      name: "--dds-tooltip-spacing",
+      name: "--ddc-tooltip-spacing",
       syntax: "<length>",
       inherits: true,
       initialValue: "0px"
@@ -99,7 +99,7 @@ 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">
@@ -158,7 +158,7 @@ DaikinTooltip.styles = css`
     :host {
       display: inline-block;
 
-      --dds-tooltip-spacing: ${unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
+      --ddc-tooltip-spacing: ${unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
     }
   `;
 __decorateClass([

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,74 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * 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 LitElement {
+    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.
+     */
+    selectable: boolean;
+    /**
+     * The value of the currently selected tree section or tree item.
+     * Only used if `selectable` is `true`.
+     */
+    selected: string | null;
+    private readonly _children;
+    private readonly _sections;
+    private _updateChildrenLevel;
+    private _updateSections;
+    private _handleSlotChange;
+    private _handleTreeMoveFocus;
+    private _handleTreeSelect;
+    private _handleTreeUnselect;
+    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.
+     *
+     * @param value Tree item value.
+     * @private
+     */
+    selectItem(value: string | null): void;
+    /**
+     * Returns the `value` of the currently selected section or item.
+     * If nothing is selected, returns `null`.
+     *
+     * @returns The `value` of the selected section or item (if any). `null` if there is none.
+     * @private
+     */
+    getSelectedItem(): string | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tree": DaikinTree;
+    }
+}

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

@@ -0,0 +1,110 @@
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.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 LitElement {
+  constructor() {
+    super(...arguments);
+    this.selectable = false;
+    this.selected = null;
+  }
+  _updateChildrenLevel() {
+    this._children.forEach((child) => child.level = 0);
+  }
+  _updateSections() {
+    this._sections.forEach((section) => {
+      section.selectable = this.selectable;
+    });
+  }
+  _handleSlotChange() {
+    this._updateChildrenLevel();
+    this._updateSections();
+  }
+  _handleTreeMoveFocus(event) {
+    handleTreeMoveFocusRoot(event, this._children);
+  }
+  _handleTreeSelect(event) {
+    event.stopPropagation();
+    if (!this.selectable) {
+      return;
+    }
+    const target = event.target;
+    this.selected = target.value;
+  }
+  _handleTreeUnselect(event) {
+    event.stopPropagation();
+    this.selected = this.getSelectedItem();
+  }
+  render() {
+    return html`<div role="tree">
+      <slot
+        @slotchange=${this._handleSlotChange}
+        @tree-move-focus=${this._handleTreeMoveFocus}
+        @tree-select=${this._handleTreeSelect}
+        @tree-unselect=${this._handleTreeUnselect}
+      ></slot>
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selectable")) {
+      this._updateSections();
+    }
+    if (changedProperties.has("selected") && this.selectable) {
+      this.selectItem(this.selected);
+    }
+  }
+  /**
+   * Calls `selectItem` 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));
+  }
+  /**
+   * Returns the `value` of the currently selected section or item.
+   * If nothing is selected, returns `null`.
+   *
+   * @returns The `value` of the selected section or item (if any). `null` if there is none.
+   * @private
+   */
+  getSelectedItem() {
+    return this._children.map((child) => child.getSelectedItem()).find((item) => !!item) ?? null;
+  }
+};
+DaikinTree.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTree.prototype, "selectable", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTree.prototype, "selected", 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")
+], 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 { LitElement, PropertyValues } from 'lit';
+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 LitElement {
+    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.
+     * 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.
+     */
+    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 _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
+     */
+    selectItem(value: string | null): void;
+    /**
+     * Returns `this.value` if selected, or `null` if not selected.
+     *
+     * @returns `this.value` if selected. `null` if not selected.
+     * @private
+     */
+    getSelectedItem(): string | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-tree-item": DaikinTreeItem;
+    }
+}