@daikin-oss/design-system-web-components 2.0.1-next.1 → 2.1.0-next.3

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

@@ -5,7 +5,7 @@ import { ddsElement } from "../../base/decorators.js";
 import "../../base/index.js";
 import tailwind_default from "../../tailwind.css.js";
 import { css, html, nothing, unsafeCSS } from "lit";
-import { query } from "lit/decorators.js";
+import { query, state } from "lit/decorators.js";
 import { cva } from "class-variance-authority";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/components/chip/daikin-chip.ts
@@ -16,7 +16,9 @@ var cvaInputChipWrapper = cva([
 	"size-full",
 	"border",
 	"py-0.5",
-	"px-1"
+	"px-1",
+	"min-h-6",
+	"min-w-12"
 ], {
 	variants: {
 		variant: {
@@ -42,12 +44,15 @@ var cvaInputChipIcon = cva([
 var cvaInputChipText = cva([
 	"text-(length:--dds-font-size-350)",
 	"px-1",
-	"mr-0.5",
 	"overflow-hidden",
 	"whitespace-nowrap",
 	"flex-1",
+	"text-center",
 	"text-ddt-color-common-text-primary"
-]);
+], { variants: { hasLeftIcon: {
+	true: ["pl-0.5"],
+	false: []
+} } });
 var cvaRemoveButton = cva([
 	"flex-none",
 	"relative",
@@ -77,6 +82,7 @@ var cvaRemoveButton = cva([
 var cvaFilterChipWrapper = cva([
 	"flex",
 	"items-center",
+	"justify-center",
 	"rounded-full",
 	"overflow-hidden",
 	"size-full",
@@ -84,6 +90,7 @@ var cvaFilterChipWrapper = cva([
 	"py-0.5",
 	"px-1",
 	"min-h-6",
+	"min-w-12",
 	"focus-visible:outline",
 	"focus-visible:outline-2",
 	"focus-visible:outline-offset-2",
@@ -142,7 +149,7 @@ var cvaFilterChipWrapper = cva([
 var cvaFilterChipText = cva([
 	"text-(length:--dds-font-size-350)",
 	"px-1",
-	"mr-0.5"
+	"text-center"
 ], { variants: { checked: {
 	true: ["text-ddt-color-common-text-inverse"],
 	false: ["text-(--color-primary)"]
@@ -156,6 +163,7 @@ var DaikinChip = class DaikinChip extends DDSElement {
 		this.disabled = false;
 		this.withCheckedIcon = false;
 		this.chipAriaLabel = null;
+		this._hasLeftIcon = false;
 	}
 	static {
 		this.styles = css`
@@ -245,6 +253,9 @@ var DaikinChip = class DaikinChip extends DDSElement {
     }
   `;
 	}
+	_handleLeftIconSlotChange(event) {
+		this._hasLeftIcon = event.target.assignedElements().length > 0;
+	}
 	_handleRemoveClick(event) {
 		event.stopPropagation();
 		this.dispatchEvent(new Event("remove", {
@@ -291,8 +302,14 @@ var DaikinChip = class DaikinChip extends DDSElement {
 			})}
             aria-label=${ifDefined(this.chipAriaLabel)}
           >
-            <slot name="left-icon" class=${cvaInputChipIcon()}></slot>
-            <span class=${cvaInputChipText()}>
+            <slot
+              name="left-icon"
+              class=${cvaInputChipIcon()}
+              @slotchange=${this._handleLeftIconSlotChange}
+            ></slot>
+            <span
+              class=${cvaInputChipText({ hasLeftIcon: this._hasLeftIcon })}
+            >
               <slot></slot>
             </span>
             ${this.hideRemoveButton ? nothing : html`<button
@@ -389,6 +406,7 @@ __decorate([property$1({
 	attribute: "chip-aria-label"
 })], DaikinChip.prototype, "chipAriaLabel", void 0);
 __decorate([query("button")], DaikinChip.prototype, "_focusableElement", void 0);
+__decorate([state()], DaikinChip.prototype, "_hasLeftIcon", void 0);
 DaikinChip = __decorate([ddsElement("daikin-chip")], DaikinChip);
 //#endregion
 export { DaikinChip };

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

@@ -100,6 +100,14 @@ export declare class DaikinCombobox extends DDSFormElement {
     private _moveFocusByKeydown;
     private _updateFormValue;
     private _closePopup;
+    /**
+     * Whether focus should be restored to the input the next time the popup closes.
+     * This is only `true` right before selecting an option, where hiding the popover blurs the
+     * clicked option button to `document.body`. It must stay `false` for closes caused by the
+     * focus/click moving to something else (outside click, focusout), otherwise we would steal
+     * focus back from whatever the user actually clicked.
+     */
+    private _shouldRestoreFocusOnClose;
     private _handleLeftIconSlotChange;
     private _handleFocusOut;
     private _handleClick;

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

@@ -171,6 +171,7 @@ var DaikinCombobox = class DaikinCombobox extends DDSFormElement {
 		this._hasLeftIcon = false;
 		this._autoUpdateController = new FloatingUIAutoUpdateController(this);
 		this._clickOutsideController = new ClickOutsideController(this, this._onClickOutside);
+		this._shouldRestoreFocusOnClose = false;
 	}
 	static {
 		this.styles = css`
@@ -255,8 +256,10 @@ var DaikinCombobox = class DaikinCombobox extends DDSFormElement {
 	_handleFocusOut(event) {
 		if (this.open && (!event.relatedTarget || !this.renderRoot.contains(event.relatedTarget))) this._closePopup();
 	}
-	_handleClick() {
-		if (this.disabled || this.readonly) return;
+	_handleClick(shouldFocusInput = false) {
+		if (this.disabled) return;
+		if (shouldFocusInput) this.focus();
+		if (this.readonly) return;
 		this._autoUpdateController.setTriggerContext({ trigger: "mouse" });
 		this._synchronizeShowItems();
 		this.open = !this.open;
@@ -266,12 +269,16 @@ var DaikinCombobox = class DaikinCombobox extends DDSFormElement {
 		event.preventDefault();
 		event.stopPropagation();
 		event.stopImmediatePropagation();
+		setTimeout(() => {
+			this.focus();
+		}, 0);
 		this._handleClick();
 	}
 	_handleClickItem(item) {
 		if (this.disabled || this.readonly) return;
 		const value = getItemValue(item);
 		this.value = value;
+		this._shouldRestoreFocusOnClose = true;
 		this.open = false;
 		this._currentFocusItemIndex = null;
 		this.dispatchEvent(new Event("input", {
@@ -413,7 +420,7 @@ var DaikinCombobox = class DaikinCombobox extends DDSFormElement {
           aria-activedescendant=${this._currentFocusItemIndex !== null ? `combobox-item-${this._currentFocusItemIndex}` : nothing}
           @input=${this._handleInput}
           @change=${this._handleChange}
-          @click=${this._handleClick}
+          @click=${() => this._handleClick(true)}
           @focusout=${this._handleFocusOut}
           ${this._autoUpdateController.refReference()}
         />
@@ -502,7 +509,10 @@ var DaikinCombobox = class DaikinCombobox extends DDSFormElement {
 		if (changedProperties.has("value")) this._updateFormValue();
 		if (changedProperties.has("open") || changedProperties.has("disabled") || changedProperties.has("readonly")) {
 			this._autoUpdateController.floatingElement?.togglePopover(this._isPopupOpen);
-			if (changedProperties.get("open") && !this.open && !this.disabled) this.focus();
+			if (changedProperties.get("open") && !this.open && !this.disabled) {
+				if (this._shouldRestoreFocusOnClose) this.focus();
+				this._shouldRestoreFocusOnClose = false;
+			}
 		}
 		if (changedProperties.has("open")) {
 			const wasOpen = changedProperties.get("open");

package/dist/es/components/icon-button/daikin-icon-button.js

@@ -24,30 +24,34 @@ var cvaIconButton = cva([
 	"focus-visible:outline-offset-2",
 	"focus-visible:outline-ddt-color-common-border-focus",
 	"[--color-secondary:transparent]",
-	"link-disabled:[--color-primary:var(--dds-color-common-disabled)]"
+	"link-disabled:[--color-primary:var(--ddc-color-common-disabled)]",
+	"link-disabled:[--color-secondary:var(--ddc-color-common-surface-disabled)]"
 ], {
 	variants: {
 		color: {
 			default: [
 				"link-enabled:[--color-primary:var(--dds-color-common-brand-default)]",
+				"link-enabled:[--color-secondary:var(--ddc-color-common-surface-brand-default)]",
 				"hover:link-enabled:[--color-primary:var(--dds-color-common-brand-hover)]",
-				"hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-hover)]",
+				"hover:link-enabled:[--color-secondary:var(--ddc-color-common-surface-brand-hover)]",
 				"active:link-enabled:[--color-primary:var(--dds-color-common-brand-press)]",
-				"active:link-enabled:[--color-secondary:var(--dds-color-common-surface-brand-press)]"
+				"active:link-enabled:[--color-secondary:var(--ddc-color-common-surface-brand-press)]"
 			],
 			neutral: [
 				"link-enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
+				"link-enabled:[--color-secondary:var(--ddc-color-common-surface-neutral-default)]",
 				"hover:link-enabled:[--color-primary:var(--dds-color-common-neutral-hover)]",
-				"hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-hover)]",
+				"hover:link-enabled:[--color-secondary:var(--ddc-color-common-surface-neutral-hover)]",
 				"active:link-enabled:[--color-primary:var(--dds-color-common-neutral-press)]",
-				"active:link-enabled:[--color-secondary:var(--dds-color-common-surface-neutral-press)]"
+				"active:link-enabled:[--color-secondary:var(--ddc-color-common-surface-neutral-press)]"
 			],
 			danger: [
 				"link-enabled:[--color-primary:var(--dds-color-common-danger-default)]",
+				"link-enabled:[--color-secondary:var(--ddc-color-common-surface-danger-default)]",
 				"hover:link-enabled:[--color-primary:var(--dds-color-common-danger-hover)]",
-				"hover:link-enabled:[--color-secondary:var(--dds-color-common-surface-danger-hover)]",
+				"hover:link-enabled:[--color-secondary:var(--ddc-color-common-surface-danger-hover)]",
 				"active:link-enabled:[--color-primary:var(--dds-color-common-danger-press)]",
-				"active:link-enabled:[--color-secondary:var(--dds-color-common-surface-danger-press)]"
+				"active:link-enabled:[--color-secondary:var(--ddc-color-common-surface-danger-press)]"
 			]
 		},
 		variant: {
@@ -107,6 +111,8 @@ var DaikinIconButton = class DaikinIconButton extends DDSFormSubmitElement {
       display: inline-block;
       width: var(--ddc-icon-button-size, 2rem);
       height: var(--ddc-icon-button-size, 2rem);
+      --ddc-color-common-disabled: var(--dds-color-common-disabled);
+      --ddc-color-common-surface-disabled: transparent;
     }
 
     :host([size="s"]) {
@@ -116,6 +122,35 @@ var DaikinIconButton = class DaikinIconButton extends DDSFormSubmitElement {
     :host([size="m"]) {
       --ddc-icon-button-size: 3rem; /* 48px */
     }
+
+    :host(:not([color])),
+    :host([color="default"]) {
+      --ddc-color-common-surface-brand-default: none;
+      --ddc-color-common-surface-brand-hover: var(
+        --dds-color-common-surface-brand-hover
+      );
+      --ddc-color-common-surface-brand-press: var(
+        --dds-color-common-surface-brand-press
+      );
+    }
+    :host([color="neutral"]) {
+      --ddc-color-common-surface-neutral-default: none;
+      --ddc-color-common-surface-neutral-hover: var(
+        --dds-color-common-surface-neutral-hover
+      );
+      --ddc-color-common-surface-neutral-press: var(
+        --dds-color-common-surface-neutral-press
+      );
+    }
+    :host([color="danger"]) {
+      --ddc-color-common-surface-danger-default: none;
+      --ddc-color-common-surface-danger-hover: var(
+        --dds-color-common-surface-danger-hover
+      );
+      --ddc-color-common-surface-danger-press: var(
+        --dds-color-common-surface-danger-press
+      );
+    }
   `;
 	}
 	constructor() {

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

@@ -17,7 +17,9 @@ var cvaWrapper = cva([
 	"overflow-hidden",
 	"size-full",
 	"gap-1",
-	"bg-(--bg-color-base)"
+	"bg-(--bg-color-base)",
+	"min-h-[2.125rem]",
+	"min-w-12"
 ], { variants: { elevated: {
 	true: ["shadow-[0px_1px_2px_1px_var(--dds-color-common-background-overlay)]"],
 	false: []

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

@@ -296,18 +296,18 @@ var DaikinTextField = class DaikinTextField extends DDSFormElement {
                 ></span>
               </daikin-icon-button>
             </span>`}`;
-			case "password": return html`${leftIconSlot}${this.readonly && !this.disabled ? nothing : html`<daikin-icon-button
-              color="neutral"
-              variant="ghost"
-              ?disabled=${this.disabled}
-              button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
-              class="absolute right-(--dds-padding-20) size-(--dds-icon-button)"
-              @click=${this._handleShowPasswordClick}
-            >
-              <span
-                class=${cvaShowPasswordIcon({ showPassword: this.showPassword })}
-              ></span>
-            </daikin-icon-button>`}`;
+			case "password": return html`${leftIconSlot}${html`<daikin-icon-button
+          color="neutral"
+          variant="ghost"
+          ?disabled=${this.disabled}
+          button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
+          class="absolute right-(--dds-padding-20) size-(--dds-icon-button)"
+          @click=${this._handleShowPasswordClick}
+        >
+          <span
+            class=${cvaShowPasswordIcon({ showPassword: this.showPassword })}
+          ></span>
+        </daikin-icon-button>`}`;
 			case "search": return html`<span
             class=${cvaIcon({
 				icon: "left",

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

@@ -13,8 +13,8 @@ import { ReactiveControllerHost } from 'lit';
  *     this._onClickOutside
  *   );
  *
- *   private _onClickOutside(event: MouseEvent): void {
- *     console.debug("Click Outside", event);
+ *   private _onClickOutside(event: PointerEvent): void {
+ *     console.debug("Pointer outside", event);
  *     this.open = false;
  *   }
  *
@@ -32,6 +32,6 @@ import { ReactiveControllerHost } from 'lit';
 export declare class ClickOutsideController<T extends ReactiveControllerHost & HTMLElement> {
     private readonly _host;
     private readonly _callback;
-    constructor(_host: T, _callback: (this: T, event: MouseEvent) => void);
+    constructor(_host: T, _callback: (this: T, event: PointerEvent) => void);
     directive(enabled?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
 }

package/dist/es/controllers/click-outside.js

@@ -2,21 +2,19 @@ import { createControllerDirective } from "./helpers/controller-directive.js";
 import { nothing } from "lit";
 //#region src/controllers/click-outside.ts
 /**
-* An async directive that listens for outside clicks.
+* An async directive that listens for pointer presses outside an element.
 * This directive takes the target HTMLElement and a callback function as arguments.
 * When the directive is connected to the DOM, an event listener is registered, and when it is disconnected from or removed from the DOM, the event listener will be unregistered.
 * Also, when the directive arguments are updated, the event listener is re-registered.
 */
 var clickOutsideDirective = createControllerDirective((element, callback) => {
 	const listener = (event) => {
-		if (!event.target || element.contains(event.target)) return;
+		if (event.composedPath().includes(element)) return;
 		callback.call(element, event);
 	};
-	setTimeout(() => {
-		window.addEventListener("click", listener);
-	}, 0);
+	window.addEventListener("pointerdown", listener, true);
 	return () => {
-		window.removeEventListener("click", listener);
+		window.removeEventListener("pointerdown", listener, true);
 	};
 });
 /**
@@ -33,8 +31,8 @@ var clickOutsideDirective = createControllerDirective((element, callback) => {
 *     this._onClickOutside
 *   );
 *
-*   private _onClickOutside(event: MouseEvent): void {
-*     console.debug("Click Outside", event);
+*   private _onClickOutside(event: PointerEvent): void {
+*     console.debug("Pointer outside", event);
 *     this.open = false;
 *   }
 *