placer-toolkit 0.5.1

package/src/components/menu-item/menu-item.styles.ts

@@ -0,0 +1,155 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        --submenu-offset: -2px;
+        display: block;
+    }
+
+    :host([inert]) {
+        display: none;
+    }
+
+    .menu-item {
+        display: flex;
+        position: relative;
+        align-items: stretch;
+        font-family: var(--pc-font-sans);
+        font-size: var(--pc-font-size-m);
+        font-weight: var(--pc-font-weight-normal);
+        line-height: var(--pc-line-height-normal);
+        letter-spacing: var(--pc-letter-spacing-normal);
+        color: var(--pc-color-neutral-700);
+        padding: var(--pc-spacing-xs);
+        border-radius: var(--pc-border-radius-m);
+        user-select: none;
+        -webkit-user-select: none;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .menu-item.menu-item-disabled {
+        outline: none;
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .menu-item.menu-item-loading {
+        outline: none;
+        cursor: wait;
+    }
+
+    .menu-item.menu-item-loading *:not(pc-spinner) {
+        opacity: 0.6;
+    }
+
+    .menu-item-loading pc-spinner {
+        --indicator-color: currentColor;
+        --track-width: 0.0625em;
+        position: absolute;
+        font-size: 0.75em;
+        top: calc(50% - 0.5em);
+        left: 0.65rem;
+        opacity: 1;
+    }
+
+    .menu-item .label {
+        display: inline-block;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .menu-item .prefix {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .menu-item .prefix::slotted(*) {
+        margin-inline-end: var(--pc-spacing-s);
+    }
+
+    .menu-item .suffix {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .menu-item .suffix::slotted(*) {
+        margin-inline-start: var(--pc-spacing-s);
+    }
+
+    .menu-item-submenu-expanded::after {
+        content: "";
+        position: fixed;
+        inset: 0;
+        clip-path: polygon(
+            var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+            var(--safe-triangle-submenu-start-x, 0)
+                var(--safe-triangle-submenu-start-y, 0),
+            var(--safe-triangle-submenu-end-x, 0)
+                var(--safe-triangle-submenu-end-y, 0)
+        );
+        z-index: calc(var(--pc-z-index-dropdown) - 1);
+    }
+
+    :host(:focus-visible) {
+        outline: none;
+    }
+
+    :host(:hover:not([aria-disabled="true"], :focus-visible)) .menu-item,
+    .menu-item-submenu-expanded {
+        background-color: var(--pc-color-neutral-100);
+        color: var(--pc-color-neutral-950);
+    }
+
+    :host(:active:not([aria-disabled="true"], :focus-visible)) .menu-item,
+    .menu-item-submenu-expanded {
+        filter: brightness(95%);
+    }
+
+    :host(:focus-visible) .menu-item {
+        outline: 2px var(--pc-focus-ring-style) var(--pc-focus-ring-color);
+        outline-offset: -2px;
+    }
+
+    .menu-item .menu-item-check,
+    .menu-item .menu-item-chevron {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        width: 1.75em;
+        visibility: hidden;
+    }
+
+    .menu-item-checked .menu-item-check,
+    .menu-item-has-submenu .menu-item-chevron {
+        visibility: visible;
+    }
+
+    pc-popup::part(popup) {
+        margin-left: var(--submenu-offset);
+        z-index: var(--pc-z-index-dropdown);
+        box-shadow: var(--pc-shadow-l);
+    }
+
+    .menu-item-rtl pc-popup::part(popup) {
+        margin-left: calc(-1 * var(--submenu-offset));
+    }
+
+    ::slotted(pc-menu) {
+        max-width: var(--auto-size-available-width) !important;
+        max-height: var(--auto-size-available-height) !important;
+    }
+
+    @media (forced-colors: active) {
+        :host(:hover:not([aria-disabled="true"])) .menu-item,
+        :host(:focus-visible) .menu-item {
+            outline: 1px dashed SelectedItem;
+            outline-offset: -1px;
+        }
+    }
+`;

package/src/components/menu-item/menu-item.ts

@@ -0,0 +1,10 @@
+import { PcMenuItem } from "./menu-item.component.js";
+
+export * from "./menu-item.component.js";
+export default PcMenuItem;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pc-menu-item": PcMenuItem;
+    }
+}

package/src/components/menu-item/submenu-controller.ts

@@ -0,0 +1,337 @@
+import { html, css } from "lit";
+import type {
+    CSSResultGroup,
+    ReactiveController,
+    ReactiveControllerHost,
+} from "lit";
+import { createRef, ref, type Ref } from "lit/directives/ref.js";
+import { type HasSlotController } from "../../internal/slot.js";
+import type { PcMenuItem } from "./menu-item.js";
+import type { PcPopup } from "../popup/popup.js";
+
+export class SubmenuController implements ReactiveController {
+    static styles: CSSResultGroup = css`
+        slot[hidden] {
+            display: none !important;
+        }
+    `;
+
+    private host: ReactiveControllerHost & PcMenuItem;
+    private popupRef: Ref<PcPopup> = createRef();
+    private enableSubmenuTimer = -1;
+    private isConnected = false;
+    private isPopupConnected = false;
+    private skidding = 0;
+    private readonly hasSlotController: HasSlotController;
+    private readonly submenuOpenDelay = 100;
+
+    constructor(
+        host: ReactiveControllerHost & PcMenuItem,
+        hasSlotController: HasSlotController,
+    ) {
+        (this.host = host).addController(this);
+        this.hasSlotController = hasSlotController;
+    }
+
+    hostConnected() {
+        if (this.hasSlotController.test("submenu") && !this.host.disabled) {
+            this.addListeners();
+        }
+    }
+
+    hostDisconnected() {
+        this.removeListeners();
+    }
+
+    hostUpdated() {
+        if (this.hasSlotController.test("submenu") && !this.host.disabled) {
+            this.addListeners();
+            this.updateSkidding();
+        } else {
+            this.removeListeners();
+        }
+    }
+
+    private addListeners() {
+        if (!this.isConnected) {
+            this.host.addEventListener("mousemove", this.handleMouseMove);
+            this.host.addEventListener("mouseover", this.handleMouseOver);
+            this.host.addEventListener("keydown", this.handleKeyDown);
+            this.host.addEventListener("click", this.handleClick);
+            this.host.addEventListener("focusout", this.handleFocusOut);
+            this.isConnected = true;
+        }
+
+        if (!this.isPopupConnected) {
+            if (this.popupRef.value) {
+                this.popupRef.value.addEventListener(
+                    "mouseover",
+                    this.handlePopupMouseover,
+                );
+                this.popupRef.value.addEventListener(
+                    "pc-reposition",
+                    this.handlePopupReposition,
+                );
+                this.isPopupConnected = true;
+            }
+        }
+    }
+
+    private removeListeners() {
+        if (this.isConnected) {
+            this.host.removeEventListener("mousemove", this.handleMouseMove);
+            this.host.removeEventListener("mouseover", this.handleMouseOver);
+            this.host.removeEventListener("keydown", this.handleKeyDown);
+            this.host.removeEventListener("click", this.handleClick);
+            this.host.removeEventListener("focusout", this.handleFocusOut);
+            this.isConnected = false;
+        }
+
+        if (this.isPopupConnected) {
+            if (this.popupRef.value) {
+                this.popupRef.value.removeEventListener(
+                    "mouseover",
+                    this.handlePopupMouseover,
+                );
+                this.popupRef.value.removeEventListener(
+                    "pc-reposition",
+                    this.handlePopupReposition,
+                );
+                this.isPopupConnected = false;
+            }
+        }
+    }
+
+    private handleMouseMove = (event: MouseEvent) => {
+        this.host.style.setProperty(
+            "--safe-triangle-cursor-x",
+            `${event.clientX}px`,
+        );
+        this.host.style.setProperty(
+            "--safe-triangle-cursor-y",
+            `${event.clientY}px`,
+        );
+    };
+
+    private handleMouseOver = () => {
+        if (this.hasSlotController.test("submenu")) {
+            this.enableSubmenu();
+        }
+    };
+
+    private handleSubmenuEntry(event: KeyboardEvent) {
+        const submenuSlot: HTMLSlotElement | null =
+            this.host.renderRoot.querySelector('slot[name="submenu"]');
+
+        if (!submenuSlot) {
+            console.error(
+                `Cannot activate a submenu if no corresponding menu item can be found. ${this}`,
+            );
+            return;
+        }
+
+        let menuItems: NodeListOf<Element> | null = null;
+
+        for (const element of submenuSlot.assignedElements()) {
+            menuItems = element.querySelectorAll(
+                'pc-menu-item, [role^="menuitem"]',
+            );
+
+            if (menuItems.length !== 0) {
+                break;
+            }
+        }
+
+        if (!menuItems || menuItems.length === 0) {
+            return;
+        }
+
+        menuItems[0].setAttribute("tabindex", "0");
+
+        for (let i = 1; i !== menuItems.length; ++i) {
+            menuItems[i].setAttribute("tabindex", "-1");
+        }
+
+        if (this.popupRef.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.popupRef.value.active) {
+                if (menuItems[0] instanceof HTMLElement) {
+                    menuItems[0].focus();
+                }
+            } else {
+                this.enableSubmenu(false);
+                this.host.updateComplete.then(() => {
+                    if (menuItems[0] instanceof HTMLElement) {
+                        menuItems[0].focus();
+                    }
+                });
+                this.host.requestUpdate();
+            }
+        }
+    }
+
+    private handleKeyDown = (event: KeyboardEvent) => {
+        switch (event.key) {
+            case "Escape":
+            case "Tab":
+                this.disableSubmenu();
+                break;
+            case "ArrowLeft":
+                if (event.target !== this.host) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.host.focus();
+                    this.disableSubmenu();
+                }
+                break;
+            case "ArrowRight":
+            case "Enter":
+            case " ":
+                this.handleSubmenuEntry(event);
+                break;
+            default:
+                break;
+        }
+    };
+
+    private handleClick = (event: MouseEvent) => {
+        if (event.target === this.host) {
+            event.preventDefault();
+            event.stopPropagation();
+        } else if (
+            event.target instanceof Element &&
+            (event.target.tagName === "pc-menu-item" ||
+                event.target.role?.startsWith("menuitem"))
+        ) {
+            this.disableSubmenu();
+        }
+    };
+
+    private handleFocusOut = (event: FocusEvent) => {
+        if (
+            event.relatedTarget &&
+            event.relatedTarget instanceof Element &&
+            this.host.contains(event.relatedTarget)
+        ) {
+            return;
+        }
+        this.disableSubmenu();
+    };
+
+    private handlePopupMouseover = (event: MouseEvent) => {
+        event.stopPropagation();
+    };
+
+    private handlePopupReposition = () => {
+        const submenuSlot: HTMLSlotElement | null =
+            this.host.renderRoot.querySelector('slot[name="submenu"]');
+        const menu = submenuSlot
+            ?.assignedElements({ flatten: true })
+            .filter((element) => element.localName === "pc-menu")[0];
+        const isRTL = getComputedStyle(this.host).direction === "rtl";
+
+        if (!menu) {
+            return;
+        }
+
+        const { left, top, width, height } = menu.getBoundingClientRect();
+
+        this.host.style.setProperty(
+            "--safe-triangle-submenu-start-x",
+            `${isRTL ? left + width : left}px`,
+        );
+        this.host.style.setProperty(
+            "--safe-triangle-submenu-start-y",
+            `${top}px`,
+        );
+        this.host.style.setProperty(
+            "--safe-triangle-submenu-end-x",
+            `${isRTL ? left + width : left}px`,
+        );
+        this.host.style.setProperty(
+            "--safe-triangle-submenu-end-y",
+            `${top + height}px`,
+        );
+    };
+
+    private setSubmenuState(state: boolean) {
+        if (this.popupRef.value) {
+            if (this.popupRef.value.active !== state) {
+                this.popupRef.value.active = state;
+                this.host.requestUpdate();
+            }
+        }
+    }
+
+    private enableSubmenu(delay = true) {
+        if (delay) {
+            window.clearTimeout(this.enableSubmenuTimer);
+            this.enableSubmenuTimer = window.setTimeout(() => {
+                this.setSubmenuState(true);
+            }, this.submenuOpenDelay);
+        } else {
+            this.setSubmenuState(true);
+        }
+    }
+
+    private disableSubmenu() {
+        window.clearTimeout(this.enableSubmenuTimer);
+        this.setSubmenuState(false);
+    }
+
+    private updateSkidding(): void {
+        if (!this.host.parentElement?.computedStyleMap) {
+            return;
+        }
+
+        const styleMap: StylePropertyMapReadOnly =
+            this.host.parentElement.computedStyleMap();
+        const attributes: string[] = [
+            "padding-top",
+            "border-top-width",
+            "margin-top",
+        ];
+
+        const skidding = attributes.reduce((accumulator, attribute) => {
+            const styleValue: CSSStyleValue =
+                styleMap.get(attribute) ?? new CSSUnitValue(0, "px");
+            const unitValue =
+                styleValue instanceof CSSUnitValue
+                    ? styleValue
+                    : new CSSUnitValue(0, "px");
+            const pxValue = unitValue.to("px");
+            return accumulator - pxValue.value;
+        }, 0);
+
+        this.skidding = skidding;
+    }
+
+    isExpanded(): boolean {
+        return this.popupRef.value ? this.popupRef.value.active : false;
+    }
+
+    renderSubmenu() {
+        const isRTL = getComputedStyle(this.host).direction === "rtl";
+
+        if (!this.isConnected) {
+            return html`<slot name="submenu" hidden></slot>`;
+        }
+
+        return html`
+            <pc-popup
+                ${ref(this.popupRef)}
+                placement=${isRTL ? "left-start" : "right-start"}
+                anchor="anchor"
+                flip-fallback-strategy="best-fit"
+                skidding=${this.skidding}
+                strategy="fixed"
+                auto-size="vertical"
+                auto-size-padding="10"
+                flip
+            >
+                <slot name="submenu"></slot>
+            </pc-popup>
+        `;
+    }
+}

package/src/components/menu-label/menu-label.component.ts

@@ -0,0 +1,22 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators.js";
+import { styles } from "./menu-label.styles.js";
+
+/**
+ * @summary Menu labels are used to describe a group of menu items.
+ * @status experimental
+ * @since 0.5.1
+ *
+ * @slot — The menu label’s content.
+ *
+ * @csspart base — The component’s base wrapper.
+ */
+@customElement("pc-menu-label")
+export class PcMenuLabel extends LitElement {
+    static styles: CSSResultGroup = styles;
+
+    render() {
+        return html`<slot part="base" class="menu-label"></slot>`;
+    }
+}

package/src/components/menu-label/menu-label.styles.ts

@@ -0,0 +1,20 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: block;
+    }
+
+    .menu-label {
+        display: inline-block;
+        font-family: var(--pc-font-sans);
+        font-size: var(--pc-font-size-s);
+        font-weight: var(--pc-font-weight-semibold);
+        line-height: var(--pc-line-height-normal);
+        letter-spacing: var(--pc-letter-spacing-normal);
+        color: var(--pc-color-neutral-500);
+        padding: var(--pc-spacing-s) 2rem;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+`;

package/src/components/menu-label/menu-label.ts

@@ -0,0 +1,10 @@
+import { PcMenuLabel } from "./menu-label.component.js";
+
+export * from "./menu-label.component.js";
+export default PcMenuLabel;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pc-menu-label": PcMenuLabel;
+    }
+}

package/src/components/option/option.component.ts

@@ -0,0 +1,141 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { watch } from "../../internal/watch.js";
+import { PcIcon } from "../icon/icon.js";
+import { styles } from "../option/option.styles.js";
+
+/**
+ * @summary Options define the selectable items within various form controls such as a [select](/components/select).
+ * @status experimental
+ * @since 0.5.1
+ *
+ * @dependency pc-icon
+ *
+ * @slot — The option’s label.
+ * @slot prefix — Used to prepend an icon or similar element to the menu item.
+ * @slot suffix — Used to append an icon or similar element to the menu item.
+ *
+ * @csspart checked-icon — The checked icon, a `<pc-icon>` element.
+ * @csspart base — The component’s base wrapper.
+ * @csspart label — The option’s label.
+ * @csspart prefix — The container that wraps the prefix.
+ * @csspart suffix — The container that wraps the suffix.
+ */
+@customElement("pc-option")
+export class PcOption extends LitElement {
+    static styles: CSSResultGroup = styles;
+    static dependencies = { "pc-icon": PcIcon };
+
+    private isInitialized = false;
+
+    @query(".option-label") defaultSlot!: HTMLSlotElement;
+
+    @state() current = false;
+    @state() selected = false;
+
+    /** The option’s value. When selected, the containing form control will receive this value. The value must be unique from other options in the same group. Values must not contain spaces, as spaces are used as delimiters when listing multiple values. */
+    @property({ reflect: true }) value = "";
+
+    /** Disables the option, preventing selection. */
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "option");
+        this.setAttribute("aria-selected", "false");
+    }
+
+    private handleDefaultSlotChange() {
+        if (this.isInitialized) {
+            customElements.whenDefined("pc-select").then(() => {
+                const controller = this.closest("pc-select") as {
+                    handleDefaultSlotChange?: () => void;
+                } | null;
+                if (
+                    controller &&
+                    typeof controller.handleDefaultSlotChange === "function"
+                ) {
+                    controller.handleDefaultSlotChange();
+                }
+            });
+        } else {
+            this.isInitialized = true;
+        }
+    }
+
+    @watch("disabled")
+    handleDisabledChange() {
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+
+    @watch("selected")
+    handleSelectedChange() {
+        this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    }
+
+    @watch("value")
+    handleValueChange() {
+        if (typeof this.value !== "string") {
+            this.value = String(this.value);
+        }
+
+        if (this.value.includes(" ")) {
+            console.warn(
+                `Option values must not contain a space. All spaces have been replaced with underscores. ${this}`,
+            );
+            this.value = this.value.replace(/ /g, "_");
+        }
+    }
+
+    /** Returns a plain text label based on the option’s content. */
+    getTextLabel() {
+        const nodes = this.childNodes;
+        let label = "";
+
+        [...nodes].forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                if (!(node as HTMLElement).hasAttribute("slot")) {
+                    label += (node as HTMLElement).textContent;
+                }
+            }
+
+            if (node.nodeType === Node.TEXT_NODE) {
+                label += node.textContent;
+            }
+        });
+
+        return label.trim();
+    }
+
+    render() {
+        return html`
+            <div
+                part="base"
+                class=${classMap({
+                    "option": true,
+                    "option-current": this.current === true,
+                    "option-selected": this.selected === true,
+                    "option-disabled": this.disabled === true,
+                })}
+            >
+                <pc-icon
+                    class="option-check"
+                    part="checked-icon"
+                    library="system"
+                    icon-style="solid"
+                    name="check"
+                    aria-hidden="true"
+                ></pc-icon>
+                <slot class="prefix" part="prefix" name="prefix"></slot>
+                <slot
+                    class="label"
+                    part="label"
+                    @slotchange=${this.handleDefaultSlotChange}
+                ></slot>
+                <slot class="suffix" part="suffix" name="prefix"></slot>
+            </div>
+        `;
+    }
+}