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

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

@@ -0,0 +1,212 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import tailwindStyles from "../../tailwind.css.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;
+};
+const cvaInput = cva(
+  [
+    "flex",
+    "items-center",
+    "w-full",
+    "h-full",
+    "relative",
+    "px-2",
+    "rounded-md",
+    "overflow-hidden",
+    "font-daikinSerif",
+    "outline",
+    "outline-[--color-border]",
+    "outline-0",
+    "-outline-offset-2",
+    "placeholder:text-system-element-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",
+    "border",
+    "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",
+    "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"
+  ],
+  {
+    variants: {
+      error: {
+        false: [
+          "enabled:var-color-system-state-neutral-hover/color-base",
+          "focus-visible:var-color-system-state-focus/color-state-focus"
+        ],
+        true: ["enabled:var-color-system-state-error-active/color-base"]
+      },
+      leftIcon: {
+        false: ["pl-4"],
+        true: ["pl-11"]
+      },
+      rightIcon: {
+        false: ["pr-4"],
+        true: ["pr-11"]
+      }
+    }
+  }
+);
+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"]
+    }
+  }
+});
+let DaikinTextField = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._internals = this.attachInternals();
+    this.type = "text";
+    this.value = "";
+    this.name = "";
+    this.placeholder = null;
+    this.readonly = false;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this._label = null;
+    this._hasLeftIcon = false;
+    this._hasRightIcon = false;
+  }
+  _handleSlotChange(event) {
+    const target = event.target;
+    const name = target.name;
+    const hasIcon = !!target.assignedNodes().length;
+    switch (name) {
+      case "left-icon":
+        this._hasLeftIcon = hasIcon;
+        break;
+      case "right-icon":
+        this._hasRightIcon = hasIcon;
+        break;
+    }
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+    this._internals.setFormValue(this.value);
+  }
+  render() {
+    const isError = !this.disabled && this.error;
+    return html`<input
+        class=${cvaInput({
+      error: isError,
+      leftIcon: this._hasLeftIcon,
+      rightIcon: this._hasRightIcon
+    })}
+        type=${this.type}
+        value=${this.value}
+        placeholder=${ifDefined(this.placeholder ?? void 0)}
+        name=${ifDefined(this.name)}
+        maxlength=${ifDefined(this.maxlength)}
+        autocomplete=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.autocomplete)}
+        aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this._label)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        @change=${(e) => this.dispatchEvent(new Event("change", e))}
+        @input=${this._handleInput}
+      />
+      <div class=${cvaIcon({ icon: "left", disabled: this.disabled })}>
+        <slot name="left-icon" @slotchange=${this._handleSlotChange}></slot>
+      </div>
+      <div class=${cvaIcon({ icon: "right", disabled: this.disabled })}>
+        <slot name="right-icon" @slotchange=${this._handleSlotChange}></slot>
+      </div>`;
+  }
+  updated(changedProperties) {
+    if (!changedProperties.has("value")) {
+      return;
+    }
+    this._internals.setFormValue(this.value);
+  }
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this._label = inputGroup.label;
+  }
+};
+DaikinTextField.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      height: 48px;
+      position: relative;
+    }
+  `;
+DaikinTextField.formAssociated = true;
+__decorateClass([
+  property({ type: String })
+], DaikinTextField.prototype, "type", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinTextField.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTextField.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinTextField.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextField.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextField.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextField.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTextField.prototype, "error", 2);
+__decorateClass([
+  property({ type: Number })
+], DaikinTextField.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String })
+], DaikinTextField.prototype, "autocomplete", 2);
+__decorateClass([
+  state()
+], DaikinTextField.prototype, "_label", 2);
+__decorateClass([
+  state()
+], DaikinTextField.prototype, "_hasLeftIcon", 2);
+__decorateClass([
+  state()
+], DaikinTextField.prototype, "_hasRightIcon", 2);
+DaikinTextField = __decorateClass([
+  customElement("daikin-text-field")
+], DaikinTextField);
+export {
+  DaikinTextField
+};

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

@@ -0,0 +1 @@
+export * from './daikin-text-field';

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

@@ -0,0 +1,4 @@
+import { DaikinTextField } from "./daikin-text-field.js";
+export {
+  DaikinTextField
+};

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

@@ -1,9 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-import { MergeVariantProps } from '../../type-utils';
-declare const cvaToggle: (props?: ({
-    size?: "default" | "small" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type ToggleVariantProps = MergeVariantProps<typeof cvaToggle>;
 /**
  * The toggle switch component is a UI element that allows users to switch between two states, typically "on" and "off".
  * It functions similarly to a `daikin-checkbox` component but provides a more visually intuitive way to represent binary options.
@@ -14,41 +9,36 @@ type ToggleVariantProps = MergeVariantProps<typeof cvaToggle>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/toggle/index.js";
+ * ```
+ *
  * ```html
  * <daikin-toggle name="name" value="value"></daikin-toggle>
  * ```
  */
 export declare class DaikinToggle extends LitElement {
     static readonly styles: import('lit').CSSResult;
-    static readonly formAssociated = true;
-    private _internals;
-    private _updateFormValue;
-    private _input;
-    private _handleChange;
     /**
-     * Specify the component size
+     * Form name of the toggle switch.
      */
-    size: ToggleVariantProps["size"];
+    name: string;
     /**
-     * Specify whether the Toggle should be disabled
+     * Form value of the toggle switch.
      */
-    disabled: boolean;
+    value: string;
     /**
-     * Specify whether the control is checked
+     * Whether the toggle switch is turned on.
      */
     checked: boolean;
     /**
-     * The form name.
-     */
-    name: string;
-    /**
-     * The value.
-     */
-    value: string;
-    /**
-     * Specify whether the Toggle is in a error state
+     * Whether the toggle switch is disabled.
      */
-    error: boolean;
+    disabled: boolean;
+    static readonly formAssociated = true;
+    private _internals;
+    private _updateFormValue;
+    private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: PropertyValues<this>): void;
 }
@@ -57,4 +47,3 @@ declare global {
         "daikin-toggle": DaikinToggle;
     }
 }
-export {};

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

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
-import { query, property, customElement } from "lit/decorators.js";
+import { property, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -12,79 +12,64 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaToggle = cva(
-  [
-    "appearance-none",
-    "cursor-pointer",
-    "relative",
-    "bg-daikinNeutral-200",
-    "rounded-3xl",
-    "transition-color",
-    "duration-300",
-    "disabled:bg-daikinNeutral-200",
-    "before:content-['']",
-    "before:absolute",
-    "before:rounded-full",
-    "before:transition",
-    "before:disabled:bg-daikinNeutral-400"
-  ],
-  {
-    variants: {
-      size: {
-        default: [
-          "w-[51px]",
-          "h-[31px]",
-          "checked:bg-daikinBlue-500",
-          "before:h-[27px]",
-          "before:w-[27px]",
-          "before:bg-white",
-          "before:top-[2px]",
-          "before:left-[2px]",
-          "before:checked:translate-x-5"
-        ],
-        small: [
-          "w-8",
-          "h-[14px]",
-          "checked:bg-daikinBlue-50",
-          "before:h-5",
-          "before:w-5",
-          "before:top-[-3px]",
-          "before:bg-daikinNeutral-600",
-          "before:checked:bg-daikinBlue-500",
-          "before:checked:translate-x-3"
-        ]
-      }
-    }
-  }
-);
+const TOGGLE_CLASS_NAME = cva([
+  "w-12",
+  "h-6",
+  "relative",
+  "bg-system-state-neutral-active",
+  "rounded-full",
+  "cursor-pointer",
+  "transition-colors",
+  "duration-300",
+  "appearance-none",
+  "enabled:hover:bg-system-state-neutral-hover",
+  "enabled:active:bg-system-state-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",
+  "disabled:cursor-default",
+  "before:size-4",
+  "before:m-auto",
+  "before:rounded-full",
+  "before:absolute",
+  "before:top-0",
+  "before:bottom-0",
+  "before:left-1",
+  "before:transition",
+  "before:duration-300",
+  "before:checked:translate-x-6",
+  "enabled:before:bg-system-background-base",
+  "disabled:before:bg-system-background-surface-hover"
+])();
 let DaikinToggle = class extends LitElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.size = "default";
-    this.disabled = false;
-    this.checked = false;
     this.name = "";
     this.value = "";
-    this.error = false;
+    this.checked = false;
+    this.disabled = false;
+    this._internals = this.attachInternals();
   }
   _updateFormValue() {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
   _handleChange(event) {
-    if (!this._input) {
-      return;
-    }
+    this.checked = event.target.checked;
     this._updateFormValue();
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    const toggleClassName = cvaToggle({ size: this.size });
     return html`<input
-      class=${toggleClassName}
+      class=${TOGGLE_CLASS_NAME}
       type="checkbox"
       name=${this.name}
       value=${this.value}
+      role="switch"
       .checked=${this.checked}
       ?disabled=${this.disabled}
       @change=${this._handleChange}
@@ -104,18 +89,6 @@ DaikinToggle.styles = css`
     }
   `;
 DaikinToggle.formAssociated = true;
-__decorateClass([
-  query("input")
-], DaikinToggle.prototype, "_input", 2);
-__decorateClass([
-  property({ type: String })
-], DaikinToggle.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinToggle.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinToggle.prototype, "checked", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinToggle.prototype, "name", 2);
@@ -124,7 +97,10 @@ __decorateClass([
 ], DaikinToggle.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], DaikinToggle.prototype, "error", 2);
+], DaikinToggle.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinToggle.prototype, "disabled", 2);
 DaikinToggle = __decorateClass([
   customElement("daikin-toggle")
 ], DaikinToggle);

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

@@ -2,26 +2,30 @@ import { LitElement, PropertyValues } from 'lit';
 /**
  * A tooltip component is used to show brief information when a user interacts with an element.
  *
- * @fires beforetoggle - _Cancellable._ A custom event emitted when the tooltip is about to be opened or closed by user interaction.
- * @fires toggle - A custom event emitted when the tooltip is opened or closed.
+ * @fires beforetoggle - _Cancellable._ A event emitted when the tooltip is about to be opened or closed by user interaction.
+ * @fires toggle - A event emitted when the tooltip is opened or closed.
  *
  * @slot - A slot for the element to which the tooltip is attached (the trigger element).
- * @slot tooltip - A slot for the tooltip content.
+ * @slot description - A slot for the tooltip description content.
  *
  * @cssprop [--dds-tooltip-spacing=20px] - Spacing between the tooltip and the trigger
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/tooltip/index.js";
+ * ```
+ *
  * ```html
- * </daikin-tooltip>
- *   <span slot="tooltip">This is a message</span>
- *   <span>hover me</span>
+ * <daikin-tooltip>
+ *   <span>Hover me</span>
+ *   <span slot="description">This is a message</span>
  * </daikin-tooltip>
  * ```
  *
  * ```html
- * </daikin-tooltip description="This is a message">
- *   <span>hover me</span>
+ * <daikin-tooltip description="This is a message">
+ *   <span>Hover me</span>
  * </daikin-tooltip>
  * ```
  */
@@ -46,26 +50,46 @@ export declare class DaikinTooltip extends LitElement {
      */
     description: string;
     /**
-     * if true, the tooltip will hide on click.
+     * Specify the value of the popover attribute in the Popover API.
+     * - `auto`: Clicking on a trigger element will open a tooltip, and clicking again will close it. You can also close it using the Esc button. You cannot open multiple tooltips at the same time.
+     * - `manual`: No click operation is specified for the trigger element. It will not close even if the Esc button is pressed. Multiple tooltips can be opened at once.
      */
-    closeOnClick: boolean;
+    popoverValue: "auto" | "manual";
     /**
      * How the tooltip is controlled.
-     * - "hover": The tooltip is displayed when the mouse hovers over the trigger element, and hidden when the mouse is no longer hovering. (default)
-     * - "manual": The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
+     * - `hover`: The tooltip is displayed when the mouse hovers over the trigger element, and hidden when the mouse is no longer hovering. (default)
+     * - `click`: The tooltip is displayed when the mouse clicks on the trigger element, and hidden when you click on it again.
+     * - `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`.
      */
-    trigger: "hover" | "manual";
+    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 _hostStyles;
     private _startAutoUpdate;
     private _uninstallAutoUpdate;
-    private _changeOpenState;
     private _handleClick;
-    private _handleMouseLeave;
     private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _handleFocusIn;
+    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;
 }