placer-toolkit 0.5.1

package/dist/components/tab/tab.styles.js

@@ -0,0 +1,85 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        display: inline-block;
+    }
+
+    :host(:focus) {
+        outline: transparent;
+    }
+
+    :host(:focus-visible) {
+        color: var(--pc-color-primary-800);
+        outline: var(--pc-focus-ring);
+        outline-offset: calc(
+            -1 * var(--pc-focus-ring-width) - var(--pc-focus-ring-offset)
+        );
+    }
+
+    .tab {
+        display: inline-flex;
+        align-items: center;
+        font-family: var(--pc-font-sans);
+        font-size: var(--pc-font-size-s);
+        font-weight: var(--pc-font-weight-semibold);
+        border-radius: var(--pc-border-radius-m);
+        color: var(--pc-color-neutral-600);
+        padding: var(--pc-spacing-m);
+        white-space: nowrap;
+        user-select: none;
+        -webkit-user-select: none;
+        cursor: pointer;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .tab:hover:not(.tab-disabled, .tab-active),
+    .tab:focus-visible:not(.tab-disabled, .tab-active) {
+        color: var(--pc-color-neutral-700);
+    }
+
+    .tab:active:not(.tab-disabled, .tab-active) {
+        color: var(--pc-color-neutral-500);
+    }
+
+    .tab.tab-active:not(.tab-disabled) {
+        color: var(--pc-color-neutral-900);
+    }
+
+    .tab.tab-closable {
+        padding-inline-end: var(--pc-spacing-s);
+    }
+
+    .tab.tab-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .close-button {
+        font-size: var(--pc-font-size-s);
+        margin-inline-start: var(--pc-spacing-s);
+    }
+
+    .close-button::part(base) {
+        padding: var(--pc-spacing-xxxs);
+    }
+
+    .close-button::part(base):hover {
+        background-color: transparent;
+        color: var(--pc-color-neutral-700);
+    }
+
+    .close-button::part(base):active {
+        background-color: transparent;
+        color: var(--pc-color-neutral-500);
+    }
+
+    @media (forced-colors: active) {
+        .tab.tab-active:not(.tab-disabled) {
+            outline: 1px solid transparent;
+            outline-offset: -3px;
+        }
+    }
+`;
+
+export { styles };

package/dist/components/tab-group/tab-group.component.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIconButton } from "../icon-button/icon-button.js";
+import { PcResizeObserver } from "../resize-observer/resize-observer.js";
+import "../../internal/scrollend-polyfill.js";
+export declare class PcTabGroup extends LitElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pc-icon-button": typeof PcIconButton;
+        "pc-resize-observer": typeof PcResizeObserver;
+    };
+    private activeTab?;
+    private mutationObserver;
+    private resizeObserver;
+    private tabs;
+    private focusableTabs;
+    private panels;
+    tabGroup: HTMLElement;
+    body: HTMLSlotElement;
+    navigation: HTMLElement;
+    indicator: HTMLElement;
+    private hasScrollControls;
+    private shouldHideScrollStartButton;
+    private shouldHideScrollEndButton;
+    activation: "auto" | "manual";
+    fixedScrollControls: boolean;
+    noScrollControls: boolean;
+    placement: "top" | "bottom" | "start" | "end";
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getAllTabs;
+    private getAllPanels;
+    private getActiveTab;
+    private handleClick;
+    private handleKeyDown;
+    private handleScrollToStart;
+    private handleScrollToEnd;
+    private setActiveTab;
+    private setAriaLabels;
+    private repositionIndicator;
+    private syncTabsAndPanels;
+    private findNextFocusableTab;
+    private scrollOffset;
+    private updateScrollButtons;
+    private isScrolledToEnd;
+    private scrollFromStart;
+    updateScrollControls(): void;
+    syncIndicator(): void;
+    show(panel: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/tab-group/tab-group.component.js

@@ -0,0 +1,513 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, state, property, eventOptions, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { scrollIntoView } from '../../internal/scroll.js';
+import { watch } from '../../internal/watch.js';
+import { emit } from '../../internal/emit.js';
+import { PcIconButton } from '../icon-button/icon-button.component.js';
+import { PcResizeObserver } from '../resize-observer/resize-observer.component.js';
+import { styles } from './tab-group.styles.js';
+import '../../internal/scrollend-polyfill.js';
+
+let PcTabGroup = class PcTabGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tabs = [];
+        this.focusableTabs = [];
+        this.panels = [];
+        this.hasScrollControls = false;
+        this.shouldHideScrollStartButton = false;
+        this.shouldHideScrollEndButton = false;
+        this.activation = "auto";
+        this.fixedScrollControls = false;
+        this.noScrollControls = false;
+        this.placement = "top";
+        this.scrollOffset = 1;
+    }
+    connectedCallback() {
+        const whenAllDefined = Promise.all([
+            customElements.whenDefined("pc-tab"),
+            customElements.whenDefined("pc-tab-panel"),
+        ]);
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.repositionIndicator();
+            this.updateScrollControls();
+        });
+        this.mutationObserver = new MutationObserver((mutations) => {
+            const instanceMutations = mutations.filter(({ target }) => {
+                if (target === this) {
+                    return true;
+                }
+                if (target.closest("pc-tab-group") !== this) {
+                    return false;
+                }
+                const tagName = target.tagName.toLowerCase();
+                return tagName === "pc-tab" || tagName === "pc-tab-panel";
+            });
+            if (instanceMutations.length === 0) {
+                return;
+            }
+            if (instanceMutations.some((mutation) => !["aria-labelledby", "aria-controls"].includes(mutation.attributeName))) {
+                setTimeout(() => this.setAriaLabels());
+            }
+            if (instanceMutations.some((mutation) => mutation.attributeName === "disabled")) {
+                this.syncTabsAndPanels();
+            }
+            else if (instanceMutations.some((mutation) => mutation.attributeName === "active")) {
+                const tabs = instanceMutations
+                    .filter((mutation) => mutation.attributeName === "active" &&
+                    mutation.target.tagName.toLowerCase() === "pc-tab")
+                    .map((mutation) => mutation.target);
+                const newActiveTab = tabs.find((tab) => tab.active);
+                if (newActiveTab) {
+                    this.setActiveTab(newActiveTab);
+                }
+            }
+        });
+        this.updateComplete.then(() => {
+            this.syncTabsAndPanels();
+            this.mutationObserver.observe(this, {
+                attributes: true,
+                attributeFilter: ["active", "disabled", "name", "panel"],
+                childList: true,
+                subtree: true,
+            });
+            this.resizeObserver.observe(this.navigation);
+            whenAllDefined.then(() => {
+                const intersectionObserver = new IntersectionObserver((entries, observer) => {
+                    if (entries[0].intersectionRatio > 0) {
+                        this.setAriaLabels();
+                        this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
+                        observer.unobserve(entries[0].target);
+                    }
+                });
+                intersectionObserver.observe(this.tabGroup);
+            });
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mutationObserver?.disconnect();
+        if (this.navigation) {
+            this.resizeObserver?.unobserve(this.navigation);
+        }
+    }
+    getAllTabs() {
+        const slot = this.shadowRoot.querySelector('slot[name="navigation"]');
+        return slot.assignedElements();
+    }
+    getAllPanels() {
+        return [...this.body.assignedElements()].filter((element) => element.tagName.toLowerCase() === "pc-tab-panel");
+    }
+    getActiveTab() {
+        return this.tabs.find((element) => element.active);
+    }
+    handleClick(event) {
+        const target = event.target;
+        const tab = target.closest("pc-tab");
+        const tabGroup = tab?.closest("pc-tab-group");
+        if (tabGroup !== this) {
+            return;
+        }
+        if (tab !== null) {
+            this.setActiveTab(tab, { scrollBehavior: "smooth" });
+        }
+    }
+    handleKeyDown(event) {
+        const target = event.target;
+        const tab = target.closest("pc-tab");
+        const tabGroup = tab?.closest("pc-tab-group");
+        if (tabGroup !== this) {
+            return;
+        }
+        if (["Enter", " "].includes(event.key)) {
+            if (tab !== null) {
+                this.setActiveTab(tab, { scrollBehavior: "smooth" });
+                event.preventDefault();
+            }
+        }
+        if ([
+            "ArrowLeft",
+            "ArrowRight",
+            "ArrowUp",
+            "ArrowDown",
+            "Home",
+            "End",
+        ].includes(event.key)) {
+            const activeElement = this.tabs.find((tab) => tab.matches(":focus"));
+            const isRTL = document.documentElement.dir === "rtl" ||
+                (!document.documentElement.dir &&
+                    getComputedStyle(document.documentElement).direction ===
+                        "rtl");
+            let nextTab = null;
+            if (activeElement?.tagName.toLowerCase() === "pc-tab") {
+                if (event.key === "Home") {
+                    nextTab = this.focusableTabs[0];
+                }
+                else if (event.key === "End") {
+                    nextTab = this.focusableTabs[this.focusableTabs.length - 1];
+                }
+                else if ((["top", "bottom"].includes(this.placement) &&
+                    event.key === (isRTL ? "ArrowRight" : "ArrowLeft")) ||
+                    (["start", "end"].includes(this.placement) &&
+                        event.key === "ArrowUp")) {
+                    const currentIndex = this.tabs.findIndex((element) => element === activeElement);
+                    nextTab = this.findNextFocusableTab(currentIndex, "backward");
+                }
+                else if ((["top", "bottom"].includes(this.placement) &&
+                    event.key === (isRTL ? "ArrowLeft" : "ArrowRight")) ||
+                    (["start", "end"].includes(this.placement) &&
+                        event.key === "ArrowDown")) {
+                    const currentIndex = this.tabs.findIndex((element) => element === activeElement);
+                    nextTab = this.findNextFocusableTab(currentIndex, "forward");
+                }
+                if (!nextTab) {
+                    return;
+                }
+                nextTab.tabIndex = 0;
+                nextTab.focus({ preventScroll: true });
+                if (this.activation === "auto") {
+                    this.setActiveTab(nextTab, { scrollBehavior: "smooth" });
+                }
+                else {
+                    this.tabs.forEach((tabElement) => {
+                        tabElement.tabIndex = tabElement === nextTab ? 0 : -1;
+                    });
+                }
+                if (["top", "bottom"].includes(this.placement)) {
+                    scrollIntoView(nextTab, this.navigation, "horizontal");
+                }
+                event.preventDefault();
+            }
+        }
+    }
+    handleScrollToStart() {
+        this.navigation.scroll({
+            left: document.documentElement.dir === "rtl"
+                ? this.navigation.scrollLeft + this.navigation.clientWidth
+                : this.navigation.scrollLeft - this.navigation.clientWidth,
+            behavior: "smooth",
+        });
+    }
+    handleScrollToEnd() {
+        this.navigation.scroll({
+            left: document.documentElement.dir === "rtl"
+                ? this.navigation.scrollLeft - this.navigation.clientWidth
+                : this.navigation.scrollLeft + this.navigation.clientWidth,
+            behavior: "smooth",
+        });
+    }
+    setActiveTab(tab, options) {
+        options = {
+            emitEvents: true,
+            scrollBehavior: "auto",
+            ...options,
+        };
+        if (tab !== this.activeTab && !tab.disabled) {
+            const previousTab = this.activeTab;
+            this.activeTab = tab;
+            this.tabs.forEach((element) => {
+                element.active = element === this.activeTab;
+                element.tabIndex = element === this.activeTab ? 0 : -1;
+            });
+            this.panels.forEach((element) => (element.active = element.name === this.activeTab?.panel));
+            this.syncIndicator();
+            if (["top", "bottom"].includes(this.placement)) {
+                scrollIntoView(this.activeTab, this.navigation, "horizontal", options.scrollBehavior);
+            }
+            if (options.emitEvents) {
+                if (previousTab) {
+                    emit(this, "pc-tab-hide", {
+                        detail: { name: previousTab.panel },
+                    });
+                }
+                emit(this, "pc-tab-show", {
+                    detail: { name: this.activeTab.panel },
+                });
+            }
+        }
+    }
+    setAriaLabels() {
+        this.tabs.forEach((tab) => {
+            const panel = this.panels.find((element) => element.name === tab.panel);
+            if (panel) {
+                tab.setAttribute("aria-controls", panel.getAttribute("id"));
+                panel.setAttribute("aria-labelledby", tab.getAttribute("id"));
+            }
+        });
+    }
+    repositionIndicator() {
+        const currentTab = this.getActiveTab();
+        if (!currentTab) {
+            return;
+        }
+        const width = currentTab.clientWidth;
+        const height = currentTab.clientHeight;
+        const isRTL = document.documentElement.dir === "rtl" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "rtl");
+        const allTabs = this.getAllTabs();
+        const precedingTabs = allTabs.slice(0, allTabs.indexOf(currentTab));
+        const offset = precedingTabs.reduce((previous, current) => ({
+            left: previous.left + current.clientWidth,
+            top: previous.top + current.clientHeight,
+        }), { left: 0, top: 0 });
+        switch (this.placement) {
+            case "top":
+            case "bottom":
+                this.indicator.style.width = `${width}px`;
+                this.indicator.style.height = "auto";
+                this.indicator.style.translate = isRTL
+                    ? `${ -1 * offset.left}px`
+                    : `${offset.left}px`;
+                break;
+            case "start":
+            case "end":
+                this.indicator.style.width = "auto";
+                this.indicator.style.height = `${height}px`;
+                this.indicator.style.translate = `0 ${offset.top}px`;
+                break;
+        }
+    }
+    syncTabsAndPanels() {
+        this.tabs = this.getAllTabs();
+        this.focusableTabs = this.tabs.filter((el) => !el.disabled);
+        this.panels = this.getAllPanels();
+        this.syncIndicator();
+        this.updateComplete.then(() => this.updateScrollControls());
+    }
+    findNextFocusableTab(currentIndex, direction) {
+        let nextTab = null;
+        const iterator = direction === "forward" ? 1 : -1;
+        let nextIndex = currentIndex + iterator;
+        while (currentIndex < this.tabs.length) {
+            nextTab = this.tabs[nextIndex] || null;
+            if (nextTab === null) {
+                if (direction === "forward") {
+                    nextTab = this.focusableTabs[0];
+                }
+                else {
+                    nextTab = this.focusableTabs[this.focusableTabs.length - 1];
+                }
+                break;
+            }
+            if (!nextTab.disabled) {
+                break;
+            }
+            nextIndex += iterator;
+        }
+        return nextTab;
+    }
+    updateScrollButtons() {
+        if (this.hasScrollControls && !this.fixedScrollControls) {
+            this.shouldHideScrollStartButton =
+                this.scrollFromStart() <= this.scrollOffset;
+            this.shouldHideScrollEndButton = this.isScrolledToEnd();
+        }
+    }
+    isScrolledToEnd() {
+        return (this.scrollFromStart() + this.navigation.clientWidth >=
+            this.navigation.scrollWidth - this.scrollOffset);
+    }
+    scrollFromStart() {
+        return document.documentElement.dir === "rtl"
+            ? -this.navigation.scrollLeft
+            : this.navigation.scrollLeft;
+    }
+    updateScrollControls() {
+        if (this.noScrollControls) {
+            this.hasScrollControls = false;
+        }
+        else {
+            this.hasScrollControls =
+                ["top", "bottom"].includes(this.placement) &&
+                    this.navigation.scrollWidth > this.navigation.clientWidth + 1;
+        }
+        this.updateScrollButtons();
+    }
+    syncIndicator() {
+        const tab = this.getActiveTab();
+        if (tab) {
+            this.indicator.style.display = "block";
+            this.repositionIndicator();
+        }
+        else {
+            this.indicator.style.display = "none";
+        }
+    }
+    show(panel) {
+        const tab = this.tabs.find((el) => el.panel === panel);
+        if (tab) {
+            this.setActiveTab(tab, { scrollBehavior: "smooth" });
+        }
+    }
+    render() {
+        const isRTL = document.documentElement.dir === "rtl" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "rtl");
+        return html `
+            <div
+                part="base"
+                class=${classMap({
+            "tab-group": true,
+            "tab-group-top": this.placement === "top",
+            "tab-group-bottom": this.placement === "bottom",
+            "tab-group-start": this.placement === "start",
+            "tab-group-end": this.placement === "end",
+            "tab-group-rtl": isRTL === true,
+            "tab-group-has-scroll-controls": this.hasScrollControls,
+        })}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                <div class="tab-group-navigation-container" part="navigation">
+                    ${this.hasScrollControls
+            ? html `
+                              <pc-icon-button
+                                  part="scroll-button scroll-button-start"
+                                  class=${classMap({
+                "tab-group-scroll-button": true,
+                "tab-group-scroll-button-start": true,
+                "tab-group-scroll-button-start-hidden": this.shouldHideScrollStartButton,
+            })}
+                                  library="system"
+                                  icon-style="solid"
+                                  name=${isRTL
+                ? "chevron-right"
+                : "chevron-left"}
+                                  tabindex="-1"
+                                  aria-hidden="true"
+                                  label="Scroll left"
+                                  @click=${this.handleScrollToStart}
+                                  exportparts="base:scroll-button__base"
+                              ></pc-icon-button>
+                          `
+            : ""}
+
+                    <div
+                        class="tab-group-navigation"
+                        @scrollend=${this.updateScrollButtons}
+                    >
+                        <div part="tabs" class="tab-group-tabs" role="tablist">
+                            <div
+                                class="tab-group-indicator"
+                                part="active-tab-indicator"
+                            ></div>
+                            <pc-resize-observer
+                                @pc-resize=${this.syncIndicator}
+                            >
+                                <slot
+                                    name="navigation"
+                                    @slotchange=${this.syncTabsAndPanels}
+                                ></slot>
+                            </pc-resize-observer>
+                        </div>
+                    </div>
+
+                    ${this.hasScrollControls
+            ? html `
+                              <pc-icon-button
+                                  part="scroll-button scroll-button-end"
+                                  class=${classMap({
+                "tab-group-scroll-button": true,
+                "tab-group-scroll-button-end": true,
+                "tab-group-scroll-button-end-hidden": this.shouldHideScrollEndButton,
+            })}
+                                  library="system"
+                                  icon-style="solid"
+                                  name=${isRTL
+                ? "chevron-left"
+                : "chevron-right"}
+                                  tabindex="-1"
+                                  aria-hidden="true"
+                                  label="Scroll right"
+                                  @click=${this.handleScrollToEnd}
+                                  exportparts="base:scroll-button__base"
+                              ></pc-icon-button>
+                          `
+            : ""}
+                </div>
+
+                <slot
+                    class="tab-group-body"
+                    part="body"
+                    @slotchange=${this.syncTabsAndPanels}
+                ></slot>
+            </div>
+        `;
+    }
+};
+PcTabGroup.styles = styles;
+PcTabGroup.dependencies = {
+    "pc-icon-button": PcIconButton,
+    "pc-resize-observer": PcResizeObserver,
+};
+__decorate([
+    query(".tab-group"),
+    __metadata("design:type", HTMLElement)
+], PcTabGroup.prototype, "tabGroup", void 0);
+__decorate([
+    query(".tab-group-body"),
+    __metadata("design:type", HTMLSlotElement)
+], PcTabGroup.prototype, "body", void 0);
+__decorate([
+    query(".tab-group-navigation"),
+    __metadata("design:type", HTMLElement)
+], PcTabGroup.prototype, "navigation", void 0);
+__decorate([
+    query(".tab-group-indicator"),
+    __metadata("design:type", HTMLElement)
+], PcTabGroup.prototype, "indicator", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcTabGroup.prototype, "hasScrollControls", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcTabGroup.prototype, "shouldHideScrollStartButton", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcTabGroup.prototype, "shouldHideScrollEndButton", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcTabGroup.prototype, "activation", void 0);
+__decorate([
+    property({ attribute: "fixed-scroll-controls", type: Boolean }),
+    __metadata("design:type", Object)
+], PcTabGroup.prototype, "fixedScrollControls", void 0);
+__decorate([
+    property({ attribute: "no-scroll-controls", type: Boolean }),
+    __metadata("design:type", Object)
+], PcTabGroup.prototype, "noScrollControls", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcTabGroup.prototype, "placement", void 0);
+__decorate([
+    eventOptions({ passive: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcTabGroup.prototype, "updateScrollButtons", null);
+__decorate([
+    watch("noScrollControls", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcTabGroup.prototype, "updateScrollControls", null);
+__decorate([
+    watch("placement", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcTabGroup.prototype, "syncIndicator", null);
+PcTabGroup = __decorate([
+    customElement("pc-tab-group")
+], PcTabGroup);
+
+export { PcTabGroup };

package/dist/components/tab-group/tab-group.d.ts

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

package/dist/components/tab-group/tab-group.js

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

package/dist/components/tab-group/tab-group.styles.d.ts

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