placer-toolkit 0.5.1

package/src/components/popup/popup.styles.ts

@@ -0,0 +1,63 @@
+//! Popup is a low‐level utility built specifically for positioning elements. Do not mistake it for a tooltip or similar because it does not facilitate an accessible experience! Almost every correct usage of it will involve building other components. It should rarely, if ever, occur directly in your HTML.
+
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        --arrow-color: var(--pc-color-neutral-200);
+        --arrow-size: 6px;
+
+        /* These properties are computed to account for the arrow’s dimensions
+           after being rotated 45°. The constant 0.7071 is derived from sin(45°),
+           which is the diagonal size of the arrow’s container after rotating. */
+        --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+        --arrow-padding-offset: calc(
+            var(--arrow-size-diagonal) - var(--arrow-size)
+        );
+
+        display: contents;
+    }
+
+    .popup {
+        position: absolute;
+        isolation: isolate;
+        max-width: var(--auto-size-available-width, none);
+        max-height: var(--auto-size-available-height, none);
+    }
+
+    .popup-fixed {
+        position: fixed;
+    }
+
+    .popup:not(.popup-active) {
+        display: none;
+    }
+
+    .popup-arrow {
+        position: absolute;
+        width: calc(var(--arrow-size-diagonal) * 2);
+        height: calc(var(--arrow-size-diagonal) * 2);
+        background-color: var(--arrow-color);
+        rotate: 45deg;
+        z-index: 1;
+    }
+
+    .popup-hover-bridge:not(.popup-hover-bridge-visible) {
+        display: none;
+    }
+
+    .popup-hover-bridge {
+        position: fixed;
+        inset: 0;
+        z-index: calc(var(--pc-z-index-dropdown) - 1);
+        clip-path: polygon(
+            var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+            var(--hover-bridge-top-right-x, 0)
+                var(--hover-bridge-top-right-y, 0),
+            var(--hover-bridge-bottom-right-x, 0)
+                var(--hover-bridge-bottom-right-y, 0),
+            var(--hover-bridge-bottom-left-x, 0)
+                var(--hover-bridge-bottom-left-y, 0)
+        );
+    }
+`;

package/src/components/popup/popup.ts

@@ -0,0 +1,12 @@
+//! Popup is a low‐level utility built specifically for positioning elements. Do not mistake it for a tooltip or similar because it does not facilitate an accessible experience! Almost every correct usage of it will involve building other components. It should rarely, if ever, occur directly in your HTML.
+
+import { PcPopup } from "./popup.component.js";
+
+export * from "./popup.component.js";
+export default PcPopup;
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "pc-popup": PcPopup;
+    }
+}

package/src/components/qr-code/qr-code.component.ts

@@ -0,0 +1,70 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { watch } from "../../internal/watch.js";
+import QrCreator from "qr-creator";
+import { styles } from "./qr-code.styles.js";
+
+@customElement("pc-qr-code")
+export class PcQrCode extends LitElement {
+    static styles: CSSResultGroup = styles;
+
+    @query("canvas") canvas!: HTMLElement;
+
+    @property() background = "white";
+
+    @property({ attribute: "error-correction" }) errorCorrection:
+        | "L"
+        | "M"
+        | "Q"
+        | "H" = "M";
+
+    @property() fill = "black";
+
+    @property() label = "";
+
+    @property({ type: Number }) radius = 0;
+
+    @property({ type: Number }) size = 128;
+
+    @property() value = "";
+
+    firstUpdated() {
+        this.generate();
+    }
+
+    @watch(["background", "errorCorrection", "fill", "radius", "size", "value"])
+    generate() {
+        if (!this.hasUpdated) {
+            return;
+        }
+
+        QrCreator.render(
+            {
+                background: this.background,
+                ecLevel: this.errorCorrection,
+                fill: this.fill,
+                radius: this.radius,
+                size: this.size * 2,
+                text: this.value,
+            },
+            this.canvas,
+        );
+    }
+
+    render() {
+        return html`
+            <canvas
+                class="qr-code"
+                part="base"
+                role="img"
+                style=${styleMap({
+                    width: `${this.size}px`,
+                    height: `${this.size}px`,
+                })}
+                aria-label=${this.label?.length > 0 ? this.label : this.value}
+            ></canvas>
+        `;
+    }
+}

package/src/components/qr-code/qr-code.styles.ts

@@ -0,0 +1,7 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: inline-block;
+    }
+`;

package/src/components/qr-code/qr-code.ts

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

package/src/components/radio/radio.component.ts

@@ -0,0 +1,100 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { watch } from "../../internal/watch.js";
+import { emit } from "../../internal/emit.js";
+import { styles } from "./radio.styles.js";
+
+@customElement("pc-radio")
+export class PcRadio extends LitElement {
+    static styles: CSSResultGroup = styles;
+
+    @state() checked = false;
+    @state() protected hasFocus = false;
+
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
+
+    @property() value?: string;
+
+    constructor() {
+        super();
+
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("focus", this.handleFocus);
+        this.addEventListener("blur", this.handleBlur);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setInitialAttributes();
+    }
+
+    private handleClick() {
+        if (!this.disabled && !this.checked) {
+            this.checked = true;
+        }
+    }
+
+    private handleFocus() {
+        this.hasFocus = true;
+        emit(this, "pc-focus");
+    }
+
+    private handleBlur() {
+        this.hasFocus = false;
+        emit(this, "pc-blur");
+    }
+
+    private setInitialAttributes() {
+        this.setAttribute("role", "radio");
+        this.setAttribute("tabindex", "-1");
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+
+    @watch("checked")
+    handleCheckedChange() {
+        this.setAttribute("aria-checked", this.checked ? "true" : "false");
+        this.setAttribute("tabindex", this.checked ? "0" : "-1");
+    }
+
+    @watch("disabled", { waitUntilFirstUpdate: true })
+    handleDisabledChange() {
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+
+    render() {
+        return html`
+            <span
+                part="base"
+                class=${classMap({
+                    "radio": true,
+                    "radio-checked": this.checked,
+                    "radio-disabled": this.disabled === true,
+                    "radio-focused": this.hasFocus,
+                    "radio-small": this.size === "small",
+                    "radio-medium": this.size === "medium",
+                    "radio-large": this.size === "large",
+                })}
+            >
+                <span
+                    class="radio-control"
+                    part="${`control ${this.checked ? "control-checked" : ""}`}"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="checked-icon"
+                        part="checked-icon"
+                        viewBox="0 0 16 16"
+                    >
+                        <circle cx="8" cy="8" r="4.5" fill="currentColor" />
+                    </svg>
+                </span>
+
+                <slot class="label" part="label"></slot>
+            </span>
+        `;
+    }
+}

package/src/components/radio/radio.styles.ts

@@ -0,0 +1,130 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: block;
+    }
+
+    :host(:focus-visible) {
+        outline: 0;
+    }
+
+    .radio {
+        display: inline-flex;
+        align-items: top;
+        font-family: var(--pc-input-font-family);
+        font-size: var(--pc-input-font-size-m);
+        font-weight: var(--pc-input-font-weight);
+        color: var(--pc-input-label-color);
+        vertical-align: middle;
+        cursor: pointer;
+    }
+
+    .radio-small {
+        --toggle-size: var(--pc-toggle-size-s);
+        font-size: var(--pc-input-font-size-s);
+    }
+
+    .radio-medium {
+        --toggle-size: var(--pc-toggle-size-m);
+        font-size: var(--pc-input-font-size-m);
+    }
+
+    .radio-large {
+        --toggle-size: var(--pc-toggle-size-l);
+        font-size: var(--pc-input-font-size-l);
+    }
+
+    .checked-icon {
+        display: inline-flex;
+        width: var(--toggle-size);
+        height: var(--toggle-size);
+        opacity: 0;
+        transition: opacity 0.15s ease-in-out;
+    }
+
+    .radio-checked .checked-icon {
+        opacity: 1;
+    }
+
+    .radio-control {
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        width: var(--toggle-size);
+        height: var(--toggle-size);
+        border: var(--pc-input-border-width) solid var(--pc-input-border-color);
+        border-radius: var(--pc-border-radius-circle);
+        background-color: transparent;
+        color: transparent;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .radio-input {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--pc-transition-fast) ease-in-out;
+    }
+
+    .radio:not(.radio-checked):not(.radio-disabled) .radio-control:hover,
+    .radio:not(.radio-checked):not(.radio-disabled)
+        .radio-control:focus-visible {
+        border-color: var(--pc-input-border-color-hover);
+    }
+
+    .radio:not(.radio-checked):not(.radio-disabled) .radio-control:active {
+        border-color: var(--pc-input-border-color-active);
+    }
+
+    .radio-checked .radio-control {
+        color: var(--pc-color-neutral-0);
+        background-color: var(--pc-color-primary-500);
+        border-color: var(--pc-color-primary-500);
+    }
+
+    .radio.radio-checked:not(.radio-disabled) .radio-control:hover,
+    .radio.radio-checked:not(.radio-disabled) .radio-control:focus-visible {
+        background-color: var(--pc-color-primary-600);
+        border-color: var(--pc-color-primary-600);
+    }
+
+    .radio.radio-checked:not(.radio-disabled) .radio-control:active {
+        background-color: var(--pc-color-primary-400);
+        border-color: var(--pc-color-primary-400);
+    }
+
+    :host(:focus-visible) .radio-control {
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .radio-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    /* If the radio isn’t checked, hide the circle icon in High Contrast mode on Windows */
+    .radio:not(.radio-checked) svg {
+        opacity: 0;
+    }
+
+    .label {
+        display: inline-block;
+        color: var(--pc-input-label-color);
+        line-height: var(--toggle-size);
+        margin-inline-start: 0.5em;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    :host([required]) .label::after {
+        content: var(--pc-input-required-content);
+        color: var(--pc-input-required-content-color);
+        margin-inline-start: var(--pc-input-required-content-offset);
+    }
+`;

package/src/components/radio/radio.ts

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

package/src/components/radio-button/radio-button.component.ts

@@ -0,0 +1,116 @@
+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 { ifDefined } from "lit/directives/if-defined.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { watch } from "../../internal/watch.js";
+import { emit } from "../../internal/emit.js";
+import { styles } from "./radio-button.styles.js";
+
+@customElement("pc-radio-button")
+export class PcRadioButton extends LitElement {
+    static styles: CSSResultGroup = styles;
+
+    private readonly hasSlotController = new HasSlotController(
+        this,
+        "[default]",
+        "prefix",
+        "suffix",
+    );
+
+    @query(".button") input!: HTMLInputElement;
+    @query(".hidden-input") hiddenInput!: HTMLInputElement;
+
+    @state() protected hasFocus = false;
+
+    @property({ type: Boolean, reflect: true }) checked = false;
+
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    @property({ type: Boolean, reflect: true }) pill = false;
+
+    @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
+
+    @property() value?: string;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "presentation");
+    }
+
+    private handleClick(e: MouseEvent) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            return;
+        }
+
+        this.checked = true;
+    }
+
+    private handleFocus() {
+        this.hasFocus = true;
+        emit(this, "pc-focus");
+    }
+
+    private handleBlur() {
+        this.hasFocus = false;
+        emit(this, "pc-blur");
+    }
+
+    @watch("disabled", { waitUntilFirstUpdate: true })
+    handleDisabledChange() {
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    }
+
+    focus(options?: FocusOptions) {
+        this.input.focus(options);
+    }
+
+    blur() {
+        this.input.blur();
+    }
+
+    render() {
+        return html`
+            <div part="base" role="presentation">
+                <button
+                    class=${classMap({
+                        "radio": true,
+                        "button": true,
+                        "button-default": true,
+                        "button-small": this.size === "small",
+                        "button-medium": this.size === "medium",
+                        "button-large": this.size === "large",
+                        "button-checked": this.checked === true,
+                        "button-disabled": this.disabled === true,
+                        "button-focused": this.hasFocus === true,
+                        "button-outlined": true,
+                        "button-pill": this.pill === true,
+                        "button-has-label":
+                            this.hasSlotController.test("[default]"),
+                        "button-has-prefix":
+                            this.hasSlotController.test("prefix"),
+                        "button-has-suffix":
+                            this.hasSlotController.test("suffix"),
+                    })}
+                    part="button ${this.checked ? "button-checked" : ""}"
+                    type="button"
+                    role="radio"
+                    aria-checked=${this.checked}
+                    aria-disabled=${this.disabled}
+                    value=${ifDefined(this.value)}
+                    @click=${this.handleClick}
+                    @focus=${this.handleFocus}
+                    @blur=${this.handleBlur}
+                >
+                    <slot class="prefix" part="prefix" name="prefix"></slot>
+                    <slot class="label" part="label"></slot>
+                    <slot class="suffix" part="suffix" name="suffix"></slot>
+                </button>
+            </div>
+        `;
+    }
+}

package/src/components/radio-button/radio-button.styles.ts

@@ -0,0 +1,23 @@
+import { css } from "lit";
+import { styles as buttonStyles } from "../button/button.styles.js";
+
+export const styles = css`
+    ${buttonStyles}
+
+    .prefix,
+    .label,
+    .suffix {
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+    }
+
+    .hidden-input {
+        all: unset;
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        outline: 1px dotted var(--pc-color-danger-500);
+        z-index: -1;
+    }
+`;

package/src/components/radio-button/radio-button.ts

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