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

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

@@ -21,7 +21,7 @@ const cvaInput = cva(
     "h-full",
     "relative",
     "px-2",
-    "rounded-md",
+    "rounded",
     "overflow-hidden",
     "font-daikinSerif",
     "outline",
@@ -49,7 +49,7 @@ const cvaInput = cva(
     variants: {
       error: {
         false: [
-          "enabled:var-color-system-state-neutral-hover/color-base",
+          "enabled:var-color-system-state-neutral-active/color-base",
           "focus-visible:var-color-system-state-focus/color-state-focus"
         ],
         true: ["enabled:var-color-system-state-error-active/color-base"]
@@ -65,18 +65,21 @@ const cvaInput = cva(
     }
   }
 );
-const cvaIcon = cva(["absolute", "pointer-events-none"], {
-  variants: {
-    icon: {
-      left: "left-3",
-      right: "right-3"
-    },
-    disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+const cvaIcon = cva(
+  ["flex", "items-center", "absolute", "pointer-events-none"],
+  {
+    variants: {
+      icon: {
+        left: "left-3",
+        right: "right-3"
+      },
+      disabled: {
+        false: ["text-system-element-text-primary"],
+        true: ["text-system-state-disabled"]
+      }
     }
   }
-});
+);
 let DaikinTextField = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -119,7 +122,6 @@ let DaikinTextField = class extends LitElement {
       rightIcon: this._hasRightIcon
     })}
         type=${this.type}
-        value=${this.value}
         placeholder=${ifDefined(this.placeholder ?? void 0)}
         name=${ifDefined(this.name)}
         maxlength=${ifDefined(this.maxlength)}
@@ -127,6 +129,7 @@ let DaikinTextField = class extends LitElement {
     ifDefined(this.autocomplete)}
         aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
     ifDefined(this._label)}
+        .value=${this.value}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         ?required=${this.required}
@@ -134,10 +137,18 @@ let DaikinTextField = class extends LitElement {
         @input=${this._handleInput}
       />
       <div class=${cvaIcon({ icon: "left", disabled: this.disabled })}>
-        <slot name="left-icon" @slotchange=${this._handleSlotChange}></slot>
+        <slot
+          name="left-icon"
+          class="icon-size-6"
+          @slotchange=${this._handleSlotChange}
+        ></slot>
       </div>
       <div class=${cvaIcon({ icon: "right", disabled: this.disabled })}>
-        <slot name="right-icon" @slotchange=${this._handleSlotChange}></slot>
+        <slot
+          name="right-icon"
+          class="icon-size-6"
+          @slotchange=${this._handleSlotChange}
+        ></slot>
       </div>`;
   }
   updated(changedProperties) {
@@ -160,7 +171,7 @@ DaikinTextField.styles = css`
     :host {
       display: flex;
       align-items: center;
-      height: 48px;
+      height: 3rem;
       position: relative;
     }
   `;

package/dist/es/components/text-field/index.d.ts

@@ -1 +1 @@
-export * from './daikin-text-field';
+export * from "./daikin-text-field.js";

package/dist/es/components/toggle/daikin-toggle.d.ts

@@ -20,11 +20,11 @@ import { LitElement, PropertyValues } from 'lit';
 export declare class DaikinToggle extends LitElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Form name of the toggle switch.
+     * The form name, submitted as a name/value pair when submitting the form.
      */
     name: string;
     /**
-     * Form value of the toggle switch.
+     * The form value, submitted as a name/value pair when submitting the form.
      */
     value: string;
     /**
@@ -32,7 +32,7 @@ export declare class DaikinToggle extends LitElement {
      */
     checked: boolean;
     /**
-     * Whether the toggle switch is disabled.
+     * Specify the toggle switch disabled state.
      */
     disabled: boolean;
     static readonly formAssociated = true;

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

@@ -68,7 +68,7 @@ let DaikinToggle = class extends LitElement {
       class=${TOGGLE_CLASS_NAME}
       type="checkbox"
       name=${this.name}
-      value=${this.value}
+      .value=${this.value}
       role="switch"
       .checked=${this.checked}
       ?disabled=${this.disabled}

package/dist/es/components/toggle/index.d.ts

@@ -1 +1 @@
-export * from './daikin-toggle';
+export * from "./daikin-toggle.js";

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

@@ -62,23 +62,8 @@ export declare class DaikinTooltip extends LitElement {
      * - `manual`: The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
      */
     trigger: "hover" | "click" | "manual";
-    private _popover;
-    /**
-     * Whether the inner elements are focused.
-     * This variable is set independently of `_isMouseOpened`, and whether or not to display the tooltip is determined by `_isFocused || _isMouseOpened`.
-     */
-    private _isFocused;
-    /**
-     * Whether the mouse operation (hover and click) opened the tooltip.
-     * This variable is set independently of `_isFocused`, and whether or not to display the tooltip is determined by `_isFocused || _isMouseOpened`.
-     */
-    private _isMouseOpened;
-    private _tooltipRef;
-    private _triggerRef;
-    private _autoUpdateCleanup;
+    private _autoUpdateController;
     private _hostStyles;
-    private _startAutoUpdate;
-    private _uninstallAutoUpdate;
     private _handleClick;
     private _handleMouseEnter;
     private _handleMouseLeave;
@@ -86,12 +71,7 @@ export declare class DaikinTooltip extends LitElement {
     private _handleFocusOut;
     private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;
-    willUpdate(changedProperties: PropertyValues<Omit<this, "_isFocused" | "_isMouseOpened"> & {
-        _isFocused: boolean;
-        _isMouseOpened: boolean;
-    }>): void;
     protected updated(changedProperties: PropertyValues<this>): void;
-    disconnectedCallback(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,11 +1,12 @@
-import { autoUpdate, computePosition, offset, flip, shift } from "@floating-ui/dom";
+import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, state, customElement } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
+import { property, customElement } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.js";
+import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
 import { isClient } from "../../is-client.js";
 import tailwindStyles from "../../tailwind.css.js";
-import { reDispatch } from "../../utils/reDispatch.js";
+import { reDispatch } from "../../utils/re-dispatch.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,6 +19,10 @@ 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",
@@ -28,8 +33,6 @@ const cvaTooltip = cva(
     "text-sm",
     "font-daikinSerif",
     "font-normal",
-    "absolute",
-    "inset-[unset]",
     "not-italic",
     "leading-5"
   ],
@@ -52,11 +55,7 @@ let DaikinTooltip = class extends LitElement {
     this.description = "";
     this.popoverValue = "auto";
     this.trigger = "hover";
-    this._isFocused = false;
-    this._isMouseOpened = false;
-    this._tooltipRef = createRef();
-    this._triggerRef = createRef();
-    this._autoUpdateCleanup = null;
+    this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient ? window.getComputedStyle(this) : null;
   }
   static registerCSSCustomProperties() {
@@ -70,74 +69,45 @@ let DaikinTooltip = class extends LitElement {
       initialValue: "0px"
     });
   }
-  _startAutoUpdate() {
-    var _a;
-    if (!isClient) {
-      return;
-    }
-    const reference = this._triggerRef.value;
-    const float = this._tooltipRef.value;
-    if (!reference || !float) {
-      return;
-    }
-    (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
-    this._autoUpdateCleanup = autoUpdate(reference, float, () => {
-      var _a2;
-      const spacing = parseInt(
-        ((_a2 = this._hostStyles) == null ? void 0 : _a2.getPropertyValue("--dds-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
-        10
-      );
-      computePosition(reference, float, {
-        placement: this.placement,
-        middleware: [offset({ mainAxis: spacing }), flip(), shift()]
-      }).then(
-        ({ x, y }) => Object.assign(float.style, {
-          left: `${x}px`,
-          top: `${y}px`
-        })
-      ).catch(() => {
-      });
-    });
-  }
-  _uninstallAutoUpdate() {
-    var _a;
-    this.open = false;
-    (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
-    this._autoUpdateCleanup = null;
-  }
-  _handleClick() {
+  _handleClick(event) {
     if (this.trigger === "click") {
-      this._isMouseOpened = !this._isMouseOpened;
+      event.preventDefault();
+      this.open = !this.open;
     }
   }
   _handleMouseEnter() {
     if (this.trigger === "hover") {
-      this._isMouseOpened = true;
+      this.open = true;
     }
   }
   _handleMouseLeave() {
     if (this.trigger === "hover") {
-      this._isMouseOpened = false;
+      this.open = false;
     }
   }
   _handleFocusIn() {
-    this._isFocused = true;
+    this.open = true;
   }
   _handleFocusOut() {
-    this._isFocused = false;
+    this.open = false;
   }
   _handleToggle(event) {
-    if (reDispatch(this, event, new ToggleEvent("beforetoggle", event))) {
+    if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
       this.open = event.newState === "open";
     }
   }
   render() {
+    var _a;
+    const spacing = parseInt(
+      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--dds-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
+      10
+    );
     return html`<div class="relative inline-block">
       <div
-        ${ref(this._triggerRef)}
         id="trigger"
         aria-labelledby="trigger"
         aria-describedby="tooltip"
+        ${this._autoUpdateController.refReference()}
       >
         <slot
           @click=${this._handleClick}
@@ -148,43 +118,39 @@ let DaikinTooltip = class extends LitElement {
         ></slot>
       </div>
       <span
-        ${ref(this._tooltipRef)}
         id="tooltip"
         role="tooltip"
         aria-labelledby="tooltip"
-        class=${cvaTooltip({
-      variant: this.variant
-    })}
-        .popover=${this.popoverValue}
+        class=${cvaTooltip({ variant: this.variant })}
+        popover=${this.popoverValue}
         @beforetoggle=${(event) => reDispatch(this, event, new ToggleEvent("beforetoggle", event))}
         @toggle=${this._handleToggle}
+        ${this._autoUpdateController.refFloating()}
       >
         <slot name="description">
           <span class="whitespace-pre-line">${this.description}</span>
         </slot>
       </span>
+      ${// Activate auto update only when the tooltip is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    guard(
+      [this.open, this.placement, spacing],
+      () => this._autoUpdateController.directive(
+        {
+          placement: this.placement,
+          middleware: [offset({ mainAxis: spacing }), flip(), shift()]
+        },
+        this.open
+      )
+    )}
     </div>`;
   }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("_isFocused") || changedProperties.has("_isMouseOpened")) {
-      this.open = this._isFocused || this._isMouseOpened;
-    }
-  }
   updated(changedProperties) {
     var _a;
     if (changedProperties.has("open")) {
-      this._popover.togglePopover(this.open);
-      if (this.open) {
-        this._startAutoUpdate();
-      } else {
-        (_a = this._autoUpdateCleanup) == null ? void 0 : _a.call(this);
-        this._autoUpdateCleanup = null;
-      }
+      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this.open);
     }
   }
-  disconnectedCallback() {
-    this._uninstallAutoUpdate();
-  }
 };
 DaikinTooltip.styles = css`
     ${unsafeCSS(tailwindStyles)}
@@ -213,15 +179,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinTooltip.prototype, "trigger", 2);
-__decorateClass([
-  query("span[popover]")
-], DaikinTooltip.prototype, "_popover", 2);
-__decorateClass([
-  state()
-], DaikinTooltip.prototype, "_isFocused", 2);
-__decorateClass([
-  state()
-], DaikinTooltip.prototype, "_isMouseOpened", 2);
 DaikinTooltip = __decorateClass([
   customElement("daikin-tooltip")
 ], DaikinTooltip);

package/dist/es/components/tooltip/index.d.ts

@@ -1 +1 @@
-export * from './daikin-tooltip';
+export * from "./daikin-tooltip.js";

package/dist/es/controllers/floating-ui-auto-update.d.ts

@@ -16,6 +16,8 @@ export declare class FloatingUIAutoUpdateController<T extends ReactiveController
     constructor(_host: T, _isOptionsUpdated?: ((current: Partial<ComputePositionConfig>, previous: Partial<ComputePositionConfig>) => boolean) | undefined);
     private readonly _refCallbackFloating;
     private readonly _refCallbackReference;
+    get floatingElement(): HTMLElement | undefined;
+    get referenceElement(): Element | undefined;
     refFloating(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/ref.js').RefDirective>;
     refReference(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/ref.js').RefDirective>;
     directive(options: Partial<ComputePositionConfig>, enabled?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;

package/dist/es/controllers/floating-ui-auto-update.js

@@ -52,6 +52,12 @@ class FloatingUIAutoUpdateController {
     };
     _host.addController(this);
   }
+  get floatingElement() {
+    return this._floatingElement;
+  }
+  get referenceElement() {
+    return this._referenceElement;
+  }
   refFloating() {
     return ref(this._refCallbackFloating);
   }

package/dist/es/index.d.ts

@@ -1,3 +1,3 @@
-export * from './colors';
-export * from './components';
-export * from './lit-analyzer-types';
+export * from "./colors.js";
+export * from "./components/index.js";
+export * from "./lit-analyzer-types.js";

package/dist/es/index.js

@@ -8,10 +8,13 @@ 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 { 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";
 import { DaikinProgressIndicatorItem } from "./components/progress-indicator-item/daikin-progress-indicator-item.js";
@@ -19,6 +22,9 @@ import { DaikinRadio } from "./components/radio/daikin-radio.js";
 import { DaikinSelect } from "./components/select/daikin-select.js";
 import { DaikinTab } from "./components/tab/daikin-tab.js";
 import { DaikinTabPanels } from "./components/tab-panels/daikin-tab-panels.js";
+import { DaikinTable } from "./components/table/daikin-table.js";
+import { DaikinTableCell } from "./components/table-cell/daikin-table-cell.js";
+import { DaikinTableHeaderCell } from "./components/table-header-cell/daikin-table-header-cell.js";
 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";
@@ -34,10 +40,13 @@ export {
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinIcon,
+  DaikinIconButton,
   DaikinInputGroup,
+  DaikinLink,
   DaikinList,
   DaikinListItem,
   DaikinNotification,
+  DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
   DaikinProgressIndicatorItem,
@@ -45,6 +54,9 @@ export {
   DaikinSelect,
   DaikinTab,
   DaikinTabPanels,
+  DaikinTable,
+  DaikinTableCell,
+  DaikinTableHeaderCell,
   DaikinTabs,
   DaikinTextArea,
   DaikinTextField,