@grantcodes/ui 2.15.7 → 2.16.0

package/src/components/dropdown/dropdown.component.js

@@ -1,165 +1,184 @@
-import { html, LitElement } from "lit";
-import { generateId } from "../../lib/generate-id.js";
-import dropdownStyles from "./dropdown.css" with { type: "css" };
+import { html, LitElement } from 'lit';
+import { generateId } from '../../lib/generate-id.js';
+import { startViewTransition } from '../../lib/view-transition.js';
+import dropdownStyles from './dropdown.css' with { type: 'css' };
 
 export class GrantCodesDropdown extends LitElement {
-	static styles = [dropdownStyles];
-
-	static properties = {
-		open: { type: Boolean, reflect: true },
-		placement: { type: String },
-		_triggerElement: { type: Object, state: true },
-	};
-
-	constructor() {
-		super();
-
-		/**
-		 * Whether the dropdown is open
-		 * @type {boolean}
-		 */
-		this.open = false;
-
-		/**
-		 * Placement of the dropdown menu
-		 * @type {string}
-		 */
-		this.placement = "bottom-start";
-
-		/**
-		 * Reference to the trigger element
-		 * @type {HTMLElement | null}
-		 */
-		this._triggerElement = null;
-
-		if (!this.id) {
-			this.id = generateId("dropdown");
-		}
-
-		this._handleDocumentClick = this._handleDocumentClick.bind(this);
-		this._handleEscape = this._handleEscape.bind(this);
-	}
-
-	get menuId() {
-		return `${this.id}-menu`;
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		if (typeof document === "undefined") return;
-		document.addEventListener("click", this._handleDocumentClick);
-		document.addEventListener("keydown", this._handleEscape);
-	}
-
-	disconnectedCallback() {
-		document.removeEventListener("click", this._handleDocumentClick);
-		document.removeEventListener("keydown", this._handleEscape);
-		super.disconnectedCallback();
-	}
-
-	firstUpdated() {
-		// Set up menu items roles
-		const menuSlot = this.renderRoot.querySelector('slot[name="menu"]');
-		if (menuSlot) {
-			const menuItems = menuSlot.assignedElements();
-			menuItems.forEach((item) => {
-				if (item.tagName === "GRANTCODES-DROPDOWN-ITEM") {
-					item.setAttribute("role", "menuitem");
-					item.setAttribute("tabindex", "-1");
-				}
-			});
-		}
-	}
-
-	updated(changedProperties) {
-		console.log({ changedProperties });
-		if (changedProperties.has("open")) {
-			// Update aria-expanded on trigger
-			const triggerSlot = this.renderRoot.querySelector('slot[name="trigger"]');
-			if (triggerSlot) {
-				const assignedElements = triggerSlot.assignedElements();
-				if (assignedElements.length > 0) {
-					assignedElements[0].setAttribute("aria-expanded", this.open);
-				}
-			}
-
-			if (this.open) {
-				// Focus first menu item when opened
-				requestAnimationFrame(() => {
-					const menu = this.renderRoot.querySelector(".dropdown__menu");
-					const firstItem = menu?.querySelector('[role="menuitem"]');
-					if (firstItem) {
-						firstItem.focus();
-					}
-				});
-			}
-		}
-	}
-
-	_handleDocumentClick(e) {
-		// Close dropdown if clicking outside
-		const path = e.composedPath();
-		if (!path.includes(this)) {
-			this.open = false;
-			this.requestUpdate();
-		}
-	}
-
-	_handleEscape(e) {
-		if (e.key === "Escape" && this.open) {
-			this.open = false;
-			this._triggerElement?.focus();
-		}
-	}
-
-	_handleTriggerClick(_e) {
-		this.open = !this.open;
-		this.requestUpdate();
-
-		this.dispatchEvent(
-			new CustomEvent("toggle", {
-				detail: { open: this.open },
-				bubbles: true,
-				composed: true,
-			}),
-		);
-	}
-
-	_handleMenuKeydown(e) {
-		const menu = this.renderRoot.querySelector(".dropdown__menu");
-		const items = Array.from(menu?.querySelectorAll('[role="menuitem"]') || []);
-		const currentIndex = items.indexOf(e.target);
-
-		switch (e.key) {
-			case "ArrowDown": {
-				e.preventDefault();
-				const nextIndex = (currentIndex + 1) % items.length;
-				items[nextIndex]?.focus();
-				break;
-			}
-			case "ArrowUp": {
-				e.preventDefault();
-				const prevIndex = (currentIndex - 1 + items.length) % items.length;
-				items[prevIndex]?.focus();
-				break;
-			}
-			case "Home":
-				e.preventDefault();
-				items[0]?.focus();
-				break;
-			case "End":
-				e.preventDefault();
-				items[items.length - 1]?.focus();
-				break;
-		}
-	}
-
-	render() {
-		const placementClass = this.placement
-			? `dropdown__menu--${this.placement}`
-			: "";
-		const openClass = this.open ? "dropdown__menu--open" : "";
-		return html`
+  static styles = [dropdownStyles];
+
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    placement: { type: String },
+    _triggerElement: { type: Object, state: true },
+  };
+
+  constructor() {
+    super();
+
+    /**
+     * Whether the dropdown is open
+     * @type {boolean}
+     */
+    this.open = false;
+
+    /**
+     * Placement of the dropdown menu
+     * @type {string}
+     */
+    this.placement = 'bottom-start';
+
+    /**
+     * Reference to the trigger element
+     * @type {HTMLElement | null}
+     */
+    this._triggerElement = null;
+
+    // Per-instance, so two dropdowns cannot abort each other's view transition.
+    this._viewTransitionName = generateId('dropdown-vt');
+    this._pendingOpen = null;
+    this._openScheduled = false;
+
+    this._handleDocumentClick = this._handleDocumentClick.bind(this);
+    this._handleEscape = this._handleEscape.bind(this);
+  }
+
+  get menuId() {
+    return `${this.id}-menu`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Not in the constructor: a custom element that gains an attribute there is never upgraded.
+    if (!this.id) {
+      this.id = generateId('dropdown');
+    }
+    if (typeof document === 'undefined') return;
+    document.addEventListener('click', this._handleDocumentClick);
+    document.addEventListener('keydown', this._handleEscape);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._handleDocumentClick);
+    document.removeEventListener('keydown', this._handleEscape);
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    // Set up menu items roles
+    const menuSlot = this.renderRoot.querySelector('slot[name="menu"]');
+    if (menuSlot) {
+      const menuItems = menuSlot.assignedElements();
+      menuItems.forEach((item) => {
+        if (item.tagName === 'GRANTCODES-DROPDOWN-ITEM') {
+          item.setAttribute('role', 'menuitem');
+          item.setAttribute('tabindex', '-1');
+        }
+      });
+    }
+
+    // Anchor name is per instance so multiple dropdowns cannot anchor to each other.
+    this.style.setProperty('--dropdown-anchor', `--dropdown-anchor-${this.id}`);
+    this.style.setProperty('--dropdown-vt-name', this._viewTransitionName);
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('open')) {
+      // Update aria-expanded on trigger
+      const triggerSlot = this.renderRoot.querySelector('slot[name="trigger"]');
+      if (triggerSlot) {
+        const assignedElements = triggerSlot.assignedElements();
+        if (assignedElements.length > 0) {
+          assignedElements[0].setAttribute('aria-expanded', this.open);
+        }
+      }
+
+      if (this.open) {
+        // Focus first menu item when opened
+        requestAnimationFrame(() => {
+          const menu = this.renderRoot.querySelector('.dropdown__menu');
+          const firstItem = menu?.querySelector('[role="menuitem"]');
+          if (firstItem) {
+            firstItem.focus();
+          }
+        });
+      }
+    }
+  }
+
+  _handleDocumentClick(e) {
+    // Close dropdown if clicking outside
+    const path = e.composedPath();
+    if (!path.includes(this)) {
+      this._setOpen(false);
+    }
+  }
+
+  _handleEscape(e) {
+    if (e.key === 'Escape' && (this._pendingOpen ?? this.open)) {
+      this._setOpen(false);
+      this._triggerElement?.focus();
+    }
+  }
+
+  _setOpen(open) {
+    if ((this._pendingOpen ?? this.open) === open) return;
+    this._pendingOpen = open;
+    if (this._openScheduled) return;
+
+    this._openScheduled = true;
+    startViewTransition(() => {
+      this.open = this._pendingOpen;
+      this._pendingOpen = null;
+      this._openScheduled = false;
+      return this.updateComplete;
+    });
+  }
+
+  _handleTriggerClick(_e) {
+    const open = !(this._pendingOpen ?? this.open);
+    this._setOpen(open);
+    this.dispatchEvent(
+      new CustomEvent('toggle', {
+        detail: { open },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  _handleMenuKeydown(e) {
+    const menu = this.renderRoot.querySelector('.dropdown__menu');
+    const items = Array.from(menu?.querySelectorAll('[role="menuitem"]') || []);
+    const currentIndex = items.indexOf(e.target);
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault();
+        const nextIndex = (currentIndex + 1) % items.length;
+        items[nextIndex]?.focus();
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        const prevIndex = (currentIndex - 1 + items.length) % items.length;
+        items[prevIndex]?.focus();
+        break;
+      }
+      case 'Home':
+        e.preventDefault();
+        items[0]?.focus();
+        break;
+      case 'End':
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+    }
+  }
+
+  render() {
+    const placementClass = this.placement ? `dropdown__menu--${this.placement}` : '';
+    const openClass = this.open ? 'dropdown__menu--open' : '';
+    return html`
       <div class="dropdown">
         <div class="dropdown__trigger" @click=${this._handleTriggerClick}>
           <slot name="trigger"></slot>
@@ -174,54 +193,54 @@ export class GrantCodesDropdown extends LitElement {
         </div>
       </div>
     `;
-	}
+  }
 }
 
 export class GrantCodesDropdownItem extends LitElement {
-	static styles = [dropdownStyles];
-
-	static properties = {
-		disabled: { type: Boolean },
-	};
-
-	constructor() {
-		super();
-
-		/**
-		 * Whether the item is disabled
-		 * @type {boolean}
-		 */
-		this.disabled = false;
-	}
-
-	_handleClick(e) {
-		if (this.disabled) {
-			e.preventDefault();
-			return;
-		}
-
-		this.dispatchEvent(
-			new CustomEvent("select", {
-				bubbles: true,
-				composed: true,
-			}),
-		);
-
-		// Close the dropdown
-		const dropdown = this.closest("grantcodes-dropdown");
-		if (dropdown) {
-			dropdown.open = false;
-		}
-	}
-
-	render() {
-		return html`
+  static styles = [dropdownStyles];
+
+  static properties = {
+    disabled: { type: Boolean },
+  };
+
+  constructor() {
+    super();
+
+    /**
+     * Whether the item is disabled
+     * @type {boolean}
+     */
+    this.disabled = false;
+  }
+
+  _handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('select', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    // Close the dropdown
+    const dropdown = this.closest('grantcodes-dropdown');
+    if (dropdown) {
+      dropdown.open = false;
+    }
+  }
+
+  render() {
+    return html`
       <div
-        class="dropdown-item ${this.disabled ? "dropdown-item--disabled" : ""}"
+        class="dropdown-item ${this.disabled ? 'dropdown-item--disabled' : ''}"
         @click=${this._handleClick}
       >
         <slot></slot>
       </div>
     `;
-	}
+  }
 }

package/src/components/dropdown/dropdown.css

@@ -1,126 +1,102 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host,
 .dropdown {
-	display: inline-block;
+  display: inline-block;
 }
 
 .dropdown__trigger {
-	display: inline-block;
-	cursor: pointer;
+  display: inline-block;
+  cursor: pointer;
+  anchor-name: var(--dropdown-anchor, none);
 }
 
 .dropdown__menu {
-	display: none;
-	position: fixed;
-	anchor-name: --dropdown-trigger;
-	z-index: 1000;
-	min-inline-size: 12rem;
-	margin-block: var(--g-spacing-xs);
-	padding-block: var(--g-spacing-sm);
-	background-color: var(--g-color-background-default);
-	border: 1px solid var(--g-color-border-default);
-	border-radius: var(--g-border-radius-md);
-	animation: dropdown-fade-in 0.15s ease-out;
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  min-inline-size: 12rem;
+  margin-block: var(--g-spacing-xs);
+  padding-block: var(--g-spacing-sm);
+  background-color: var(--g-color-background-default);
+  border: 1px solid var(--g-color-border-default);
+  border-radius: var(--g-border-radius-md);
+  view-transition-name: var(--dropdown-vt-name, none);
+  position-anchor: var(--dropdown-anchor, none);
 }
 
 .dropdown__menu--open {
-	display: block;
+  display: block;
 }
 
-/* Position using anchor positioning when available */
-@supports (anchor-name: --dropdown-trigger) {
-	.dropdown__menu--open {
-		position-area: bottom span-right;
-		position-try:
-			block-end,
-			block-start span-inline-start;
-	}
+/* Placement maps to position-area; the fallbacks flip the panel when the
+   preferred area does not fit. Bottom start is the default above. */
+@supports (position-anchor: --dropdown-anchor) {
+  .dropdown__menu--open {
+    position-area: bottom span-right;
+    /* The combined tactic is the one that actually fits a panel wider than the gap. */
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+  }
+
+  .dropdown__menu--bottom-end {
+    position-area: bottom span-left;
+  }
+
+  .dropdown__menu--top-start {
+    position-area: top span-right;
+  }
+
+  .dropdown__menu--top-end {
+    position-area: top span-left;
+  }
 }
 
 .dropdown__menu ::slotted(*) {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Dropdown item */
 .dropdown-item {
-	display: flex;
-	width: 100%;
-	align-items: center;
-	gap: var(--g-spacing-sm);
-	padding-block: var(--g-spacing-sm);
-	padding-inline: var(--g-spacing-md);
-	font-size: var(--g-typography-body-font-size);
-	color: var(--g-color-content-default);
-	cursor: pointer;
-	transition: background-color 0.15s ease;
-	user-select: none;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: var(--g-spacing-sm);
+  padding-block: var(--g-spacing-sm);
+  padding-inline: var(--g-spacing-md);
+  font-size: var(--g-typography-body-font-size);
+  color: var(--g-color-content-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  user-select: none;
 }
 
 .dropdown-item:hover {
-	background-color: var(--g-color-background-subtle-hover);
+  background-color: var(--g-color-background-subtle-hover);
 }
 
-.dropdown-item:focus {
-	outline: none;
-	background-color: var(--g-color-background-subtle-hover);
+:host(:focus-visible) .dropdown-item {
+  outline: var(--g-focus-ring-width-default) solid var(--g-focus-ring-color-default);
+  outline-offset: var(--g-focus-ring-offset-default);
+  background-color: var(--g-color-background-subtle-hover);
 }
 
 .dropdown-item:active {
-	background-color: var(--g-color-background-subtle);
+  background-color: var(--g-color-background-subtle);
 }
 
 .dropdown-item--disabled {
-	color: var(--g-color-content-disabled);
-	cursor: not-allowed;
-	opacity: 0.6;
+  color: var(--g-color-content-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
 .dropdown-item--disabled:hover,
 .dropdown-item--disabled:focus,
 .dropdown-item--disabled:active {
-	background-color: transparent;
-}
-
-/* Animation */
-@keyframes dropdown-fade-in {
-	from {
-		opacity: 0;
-		transform: translateY(-0.5rem);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-/* For top placement, reverse animation */
-.dropdown__menu--top-start,
-.dropdown__menu--top-end {
-	animation: dropdown-fade-in-top 0.15s ease-out;
-}
-
-@keyframes dropdown-fade-in-top {
-	from {
-		opacity: 0;
-		transform: translateY(0.5rem);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-/* View transitions support */
-@media (prefers-reduced-motion: no-preference) {
-	@supports (view-transition-name: auto) {
-		.dropdown__menu {
-			view-transition-name: dropdown-menu;
-		}
-	}
+  background-color: transparent;
 }

package/src/components/dropdown/dropdown.js

@@ -1,14 +1,11 @@
-import {
-	GrantCodesDropdown,
-	GrantCodesDropdownItem,
-} from "./dropdown.component.js";
+import { GrantCodesDropdown, GrantCodesDropdownItem } from './dropdown.component.js';
 
-export * from "./dropdown.component.js";
+export * from './dropdown.component.js';
 export default GrantCodesDropdown;
 
-if (!customElements.get("grantcodes-dropdown")) {
-	customElements.define("grantcodes-dropdown", GrantCodesDropdown);
+if (!customElements.get('grantcodes-dropdown')) {
+  customElements.define('grantcodes-dropdown', GrantCodesDropdown);
 }
-if (!customElements.get("grantcodes-dropdown-item")) {
-	customElements.define("grantcodes-dropdown-item", GrantCodesDropdownItem);
+if (!customElements.get('grantcodes-dropdown-item')) {
+  customElements.define('grantcodes-dropdown-item', GrantCodesDropdownItem);
 }