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

package/dist/cjs/components/chip/daikin-chip.d.cts

@@ -71,6 +71,8 @@ export declare class DaikinChip extends DDSElement {
      */
     chipAriaLabel: string | null;
     private _focusableElement;
+    private _hasLeftIcon;
+    private _handleLeftIconSlotChange;
     private _handleRemoveClick;
     /**
      * Emits `before-select` event if necessary and returns whether we should proceed.

package/dist/cjs/components/combobox/daikin-combobox.cjs

@@ -171,6 +171,7 @@ var DaikinCombobox = class DaikinCombobox extends require_dds_form_element.DDSFo
 		this._hasLeftIcon = false;
 		this._autoUpdateController = new require_floating_ui_auto_update.FloatingUIAutoUpdateController(this);
 		this._clickOutsideController = new require_click_outside.ClickOutsideController(this, this._onClickOutside);
+		this._shouldRestoreFocusOnClose = false;
 	}
 	static {
 		this.styles = lit.css`
@@ -255,8 +256,10 @@ var DaikinCombobox = class DaikinCombobox extends require_dds_form_element.DDSFo
 	_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 require_dds_form_element.DDSFo
 		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 require_dds_form_element.DDSFo
           aria-activedescendant=${this._currentFocusItemIndex !== null ? `combobox-item-${this._currentFocusItemIndex}` : lit.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 require_dds_form_element.DDSFo
 		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/cjs/components/combobox/daikin-combobox.d.cts

@@ -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/cjs/components/icon-button/daikin-icon-button.cjs

@@ -24,30 +24,34 @@ var cvaIconButton = (0, class_variance_authority.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 require_dds_form_element.D
       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 require_dds_form_element.D
     :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/cjs/components/tag/daikin-tag.cjs

@@ -17,7 +17,9 @@ var cvaWrapper = (0, class_variance_authority.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/cjs/components/text-field/daikin-text-field.cjs

@@ -296,18 +296,18 @@ var DaikinTextField = class DaikinTextField extends require_dds_form_element.DDS
                 ></span>
               </daikin-icon-button>
             </span>`}`;
-			case "password": return lit.html`${leftIconSlot}${this.readonly && !this.disabled ? lit.nothing : lit.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 lit.html`${leftIconSlot}${lit.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 lit.html`<span
             class=${cvaIcon({
 				icon: "left",

package/dist/cjs/controllers/click-outside.cjs

@@ -2,7 +2,7 @@ const require_controller_directive = require("./helpers/controller-directive.cjs
 let lit = require("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.
@@ -12,11 +12,9 @@ var clickOutsideDirective = require_controller_directive.createControllerDirecti
 		if (!event.target || element.contains(event.target)) 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 = require_controller_directive.createControllerDirecti
 *     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;
 *   }
 *

package/dist/cjs/controllers/click-outside.d.cts

@@ -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>;
 }