placer-toolkit 0.5.1

package/dist/components/menu-label/menu-label.component.js

@@ -0,0 +1,25 @@
+import { __decorate } from 'tslib';
+import { LitElement, html } 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.
+ */
+let PcMenuLabel = class PcMenuLabel extends LitElement {
+    render() {
+        return html `<slot part="base" class="menu-label"></slot>`;
+    }
+};
+PcMenuLabel.styles = styles;
+PcMenuLabel = __decorate([
+    customElement("pc-menu-label")
+], PcMenuLabel);
+
+export { PcMenuLabel };

package/dist/components/menu-label/menu-label.d.ts

@@ -0,0 +1,8 @@
+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/dist/components/menu-label/menu-label.js

@@ -0,0 +1,5 @@
+import { PcMenuLabel as PcMenuLabel$1 } from './menu-label.component.js';
+
+var PcMenuLabel = PcMenuLabel$1;
+
+export { PcMenuLabel$1 as PcMenuLabel, PcMenuLabel as default };

package/dist/components/menu-label/menu-label.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/menu-label/menu-label.styles.js

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+
+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;
+    }
+`;
+
+export { styles };

package/dist/components/option/option.component.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIcon } from "../icon/icon.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.
+ */
+export declare class PcOption extends LitElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pc-icon": typeof PcIcon;
+    };
+    private isInitialized;
+    defaultSlot: HTMLSlotElement;
+    current: boolean;
+    selected: boolean;
+    /** 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. */
+    value: string;
+    /** Disables the option, preventing selection. */
+    disabled: boolean;
+    connectedCallback(): void;
+    private handleDefaultSlotChange;
+    handleDisabledChange(): void;
+    handleSelectedChange(): void;
+    handleValueChange(): void;
+    /** Returns a plain text label based on the option’s content. */
+    getTextLabel(): string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/option/option.component.js

@@ -0,0 +1,161 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, state, property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { watch } from '../../internal/watch.js';
+import { PcIcon } from '../icon/icon.component.js';
+import { styles } from './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.
+ */
+let PcOption = class PcOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isInitialized = false;
+        this.current = false;
+        this.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. */
+        this.value = "";
+        /** Disables the option, preventing selection. */
+        this.disabled = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "option");
+        this.setAttribute("aria-selected", "false");
+    }
+    handleDefaultSlotChange() {
+        if (this.isInitialized) {
+            customElements.whenDefined("pc-select").then(() => {
+                const controller = this.closest("pc-select");
+                if (controller &&
+                    typeof controller.handleDefaultSlotChange === "function") {
+                    controller.handleDefaultSlotChange();
+                }
+            });
+        }
+        else {
+            this.isInitialized = true;
+        }
+    }
+    handleDisabledChange() {
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+    handleSelectedChange() {
+        this.setAttribute("aria-selected", this.selected ? "true" : "false");
+    }
+    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.hasAttribute("slot")) {
+                    label += node.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>
+        `;
+    }
+};
+PcOption.styles = styles;
+PcOption.dependencies = { "pc-icon": PcIcon };
+__decorate([
+    query(".option-label"),
+    __metadata("design:type", HTMLSlotElement)
+], PcOption.prototype, "defaultSlot", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcOption.prototype, "current", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcOption.prototype, "selected", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], PcOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcOption.prototype, "disabled", void 0);
+__decorate([
+    watch("disabled"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcOption.prototype, "handleDisabledChange", null);
+__decorate([
+    watch("selected"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcOption.prototype, "handleSelectedChange", null);
+__decorate([
+    watch("value"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcOption.prototype, "handleValueChange", null);
+PcOption = __decorate([
+    customElement("pc-option")
+], PcOption);
+
+export { PcOption };

package/dist/components/option/option.d.ts

@@ -0,0 +1,8 @@
+import { PcOption } from "./option.component.js";
+export * from "./option.component.js";
+export default PcOption;
+declare global {
+    interface HTMLElementTagNameMap {
+        "pc-option": PcOption;
+    }
+}

package/dist/components/option/option.js

@@ -0,0 +1,5 @@
+import { PcOption as PcOption$1 } from './option.component.js';
+
+var PcOption = PcOption$1;
+
+export { PcOption$1 as PcOption, PcOption as default };

package/dist/components/option/option.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/option/option.styles.js

@@ -0,0 +1,108 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        display: block;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    :host(:focus) {
+        outline: none;
+    }
+
+    .option {
+        display: flex;
+        position: relative;
+        align-items: center;
+        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-s) var(--pc-spacing-xxl) var(--pc-spacing-s)
+            var(--pc-spacing-s);
+        cursor: pointer;
+        border-radius: var(--pc-border-radius-m);
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .option:hover:not(.option-disabled) {
+        background-color: var(--pc-color-neutral-100);
+        color: var(--pc-color-neutral-950);
+    }
+
+    .option:active:not(.option-disabled) {
+        background-color: var(--pc-color-neutral-100);
+        color: var(--pc-color-neutral-950);
+        filter: brightness(95%);
+    }
+
+    .option-current,
+    .option-current.option-disabled {
+        background-color: var(--pc-color-neutral-100);
+        opacity: 1;
+    }
+
+    .option-current:hover,
+    .option-current.option-disabled:hover {
+        background-color: var(--pc-color-neutral-100);
+        filter: brightness(105%);
+    }
+
+    .option-current:active,
+    .option-current.option-disabled:active {
+        background-color: var(--pc-color-neutral-100);
+        filter: brightness(95%);
+    }
+
+    .option-disabled {
+        outline: none;
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .label {
+        display: inline-block;
+        flex: 1 1 auto;
+        line-height: var(--pc-line-height-dense);
+    }
+
+    .option .option-check {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        visibility: hidden;
+        padding-inline-end: var(--pc-spacing-s);
+    }
+
+    .option-selected .option-check {
+        visibility: visible;
+    }
+
+    .prefix,
+    .suffix {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .prefix::slotted(*) {
+        margin-inline-end: var(--pc-spacing-s);
+    }
+
+    .suffix::slotted(*) {
+        margin-inline-start: var(--pc-spacing-s);
+    }
+
+    @media (forced-colors: active) {
+        :host(:hover:not([aria-disabled="true"])) .option {
+            outline: 1px dashed SelectedItem;
+            outline-offset: -1px;
+        }
+    }
+`;
+
+export { styles };

package/dist/components/popup/popup.component.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+export interface VirtualElement {
+    getBoundingClientRect: () => DOMRect;
+    contextElement?: Element;
+}
+export declare class PcPopup extends LitElement {
+    static styles: CSSResultGroup;
+    private anchorElement;
+    private cleanup;
+    popup: HTMLElement;
+    private arrowElement;
+    active: boolean;
+    anchor?: Element | string | VirtualElement;
+    arrow: boolean;
+    arrowPadding: number;
+    arrowPlacement: "start" | "end" | "center" | "anchor";
+    autoSize?: "horizontal" | "vertical" | "both";
+    autoSizeBoundary?: Element | Element[];
+    autoSizePadding: number;
+    distance: number;
+    flip: boolean;
+    flipBoundary?: Element | Element[];
+    flipFallbackPlacements: string;
+    flipFallbackStrategy: "best-fit" | "initial";
+    flipPadding: number;
+    hoverBridge: boolean;
+    placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end";
+    shift: boolean;
+    shiftBoundary?: Element | Element[];
+    shiftPadding: number;
+    skidding: number;
+    strategy: "absolute" | "fixed";
+    sync?: "width" | "height" | "both";
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    private handleAnchorChange;
+    private start;
+    private stop;
+    reposition(): void;
+    private updateHoverBridge;
+    render(): import("lit-html").TemplateResult<1>;
+}