placer-toolkit 0.5.1

package/src/components/switch/switch.component.ts

@@ -0,0 +1,253 @@
+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 { live } from "lit/directives/live.js";
+import { defaultValue } from "../../internal/default-value.js";
+import { FormControlController } from "../../internal/form.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { watch } from "../../internal/watch.js";
+import { emit } from "../../internal/emit.js";
+import { styles } from "./switch.styles.js";
+
+/**
+ * @summary Switches allow the user to toggle an option on or off.
+ * @status experimental
+ * @since 0.1.0
+ *
+ * @slot — The switch’s label.
+ * @slot hint — Text that describes how to use the switch. Alternatively, you can use the `hint` attribute.
+ *
+ * @event pc-change — Emitted when the switch’s state changes.
+ * @event pc-focus — Emitted when the switch gains focus.
+ * @event pc-blur — Emitted when the switch loses focus (i.e. is blurred).
+ * @event pc-input — Emitted when the switch receives input.
+ * @event pc-invalid — Emitted when the form control has been checked for validity and its constraints aren’t satisfied.
+ *
+ * @csspart base — The component’s base wrapper.
+ * @csspart control — The control that houses the switch’s thumb.
+ * @csspart thumb — The switch’s thumb.
+ * @csspart label — The switch’s label.
+ * @csspart hint — The hint’s wrapper.
+ *
+ * @cssproperty --width — The width of the switch.
+ * @cssproperty --height — The height of the switch.
+ * @cssproperty --thumb-size — The size of the thumb.
+ */
+@customElement("pc-switch")
+export class PcSwitch extends LitElement {
+    static styles: CSSResultGroup = styles;
+
+    // @ts-expect-error
+    private readonly formControlController = new FormControlController(this, {
+        value: (control: PcSwitch) =>
+            control.checked ? control.value || "on" : undefined,
+        defaultValue: (control: PcSwitch) => control.defaultChecked,
+        setValue: (control: PcSwitch, checked: boolean) =>
+            (control.checked = checked),
+    });
+    private readonly hasSlotController = new HasSlotController(this, "hint");
+
+    /** @internal This is an internal property. */
+    @query("input[type='checkbox']") input!: HTMLInputElement;
+
+    @state() private hasFocus = false;
+    /** @internal This is an internal property. */
+    @property() title = "";
+
+    /** The name of the switch, submitted as a name/value pair with form data. */
+    @property() name = "";
+
+    /** The current value of the switch, submitted as a name/value pair with form data. */
+    @property() value?: string;
+
+    /** The switch’s size. */
+    @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
+
+    /** Disables the switch. */
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    /** Enables the switch. */
+    @property({ type: Boolean, reflect: true }) checked = false;
+
+    /** The default value of the switch. Primarily used for resetting the switch. */
+    @defaultValue("checked") defaultChecked = false;
+
+    /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work. */
+    @property({ reflect: true }) form = "";
+
+    /** Makes the switch a required field. */
+    @property({ type: Boolean, reflect: true }) required = false;
+
+    /** The switch’s hint. if you need to display HTML, use the `hint` slot instead. */
+    @property() hint = "";
+
+    /** Gets the validity state object. */
+    get validity() {
+        return this.input.validity;
+    }
+
+    /** Gets the validation message. */
+    get validationMessage() {
+        return this.input.validationMessage;
+    }
+
+    firstUpdated() {
+        this.formControlController.updateValidity();
+    }
+
+    private handleClick() {
+        this.checked = !this.checked;
+        emit(this, "pc-change");
+    }
+
+    private handleInput() {
+        emit(this, "pc-input");
+    }
+
+    private handleFocus() {
+        this.hasFocus = true;
+        emit(this, "pc-focus");
+    }
+
+    private handleBlur() {
+        this.hasFocus = false;
+        emit(this, "pc-blur");
+    }
+
+    private handleInvalid(event: Event) {
+        this.formControlController.setValidity(false);
+        this.formControlController.emitInvalidEvent(event);
+    }
+
+    private handleKeyDown(event: KeyboardEvent) {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.checked = false;
+            emit(this, "pc-change");
+            emit(this, "pc-input");
+        } else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            this.checked = true;
+            emit(this, "pc-change");
+            emit(this, "pc-input");
+        }
+    }
+
+    /** @internal This is an internal property. */
+    @watch("checked", { waitUntilFirstUpdate: true })
+    handleCheckedChange() {
+        this.input.checked = this.checked;
+        this.formControlController.updateValidity();
+    }
+
+    /** @internal This is an internal property. */
+    @watch("disabled", { waitUntilFirstUpdate: true })
+    handleDisabledChange() {
+        this.formControlController.setValidity(true);
+    }
+
+    /** Simulates a click on the switch. */
+    click() {
+        this.input.click();
+    }
+
+    /** Focuses the switch. */
+    focus(options?: FocusOptions) {
+        this.input.focus(options);
+    }
+
+    /** Unfocuses/blurs the switch. */
+    blur() {
+        this.input.blur();
+    }
+
+    /** Checks for validity but doesn’t show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity() {
+        return this.input.checkValidity();
+    }
+
+    /** Gets the associated form if one exists. */
+    getForm(): HTMLFormElement | null {
+        return this.formControlController.getForm();
+    }
+
+    /** Checks for validity and shows the browser’s validation message if the control is invalid. */
+    reportValidity() {
+        return this.input.reportValidity();
+    }
+
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string) {
+        this.input.setCustomValidity(message);
+        this.formControlController.updateValidity();
+    }
+
+    render() {
+        const hasHintSlot = this.hasSlotController.test("hint");
+        const hasHint = this.hint ? true : !!hasHintSlot;
+
+        return html`
+            <div
+                class=${classMap({
+                    "form-control": true,
+                    "form-control-small": this.size === "small",
+                    "form-control-medium": this.size === "medium",
+                    "form-control-large": this.size === "large",
+                    "form-control-has-hint": hasHint,
+                })}
+            >
+                <label
+                    part="base"
+                    class=${classMap({
+                        "switch": true,
+                        "switch-checked": this.checked,
+                        "switch-disabled": this.disabled,
+                        "switch-focused": this.hasFocus,
+                        "switch-small": this.size === "small",
+                        "switch-medium": this.size === "medium",
+                        "switch-large": this.size === "large",
+                    })}
+                >
+                    <input
+                        class="switch-input"
+                        type="checkbox"
+                        role="switch"
+                        title=${this.title}
+                        name=${this.name}
+                        value=${ifDefined(this.value)}
+                        .checked=${live(this.checked)}
+                        .disabled=${this.disabled}
+                        .required=${this.required}
+                        aria-checked=${this.checked ? "true" : "false"}
+                        aria-describedby="hint-text"
+                        @click=${this.handleClick}
+                        @input=${this.handleInput}
+                        @focus=${this.handleFocus}
+                        @blur=${this.handleBlur}
+                        @invalid=${this.handleInvalid}
+                        @keydown=${this.handleKeyDown}
+                    />
+
+                    <span part="control" class="control">
+                        <span part="thumb" class="thumb"></span>
+                    </span>
+
+                    <div part="label" class="label">
+                        <slot></slot>
+                    </div>
+                </label>
+
+                <div
+                    class="hint"
+                    part="hint"
+                    id="hint-text"
+                    aria-hidden=${hasHint ? "false" : "true"}
+                >
+                    <slot name="hint">${this.hint}</slot>
+                </div>
+            </div>
+        `;
+    }
+}

package/src/components/switch/switch.styles.ts

@@ -0,0 +1,176 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: inline-block;
+    }
+
+    :host([size="small"]) {
+        --width: calc(var(--height) * 1.75);
+        --height: var(--pc-toggle-size-s);
+        --thumb-size: calc(var(--pc-toggle-size-s) - 2px);
+        font-size: var(--pc-input-font-size-s);
+    }
+
+    :host([size="medium"]) {
+        --width: calc(var(--height) * 1.75);
+        --height: var(--pc-toggle-size-m);
+        --thumb-size: calc(var(--pc-toggle-size-m) - 2px);
+        font-size: var(--pc-input-font-size-m);
+    }
+
+    :host([size="large"]) {
+        --width: calc(var(--height) * 1.75);
+        --height: var(--pc-toggle-size-l);
+        --thumb-size: calc(var(--pc-toggle-size-l) - 2px);
+        font-size: var(--pc-input-font-size-l);
+    }
+
+    .switch {
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+        vertical-align: middle;
+        color: var(--pc-input-label-color);
+        font-size: inherit;
+        font-family: var(--pc-input-font-family);
+        font-weight: var(--pc-input-font-weight);
+        cursor: pointer;
+    }
+
+    .control {
+        display: inline-flex;
+        position: relative;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        width: var(--width);
+        height: var(--height);
+        background-color: var(--pc-color-neutral-200);
+        border: var(--pc-input-border-width) solid var(--pc-color-neutral-200);
+        border-radius: var(--pc-border-radius-pill);
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .control .thumb {
+        background-color: hsl(220, 25%, 96%);
+        width: var(--thumb-size);
+        height: var(--thumb-size);
+        border-radius: var(--pc-border-radius-circle);
+        translate: calc((var(--width) - var(--height)) / -2);
+        box-shadow: var(--pc-shadow-xs);
+        transition: outline var(--pc-transition-fast) ease-in-out,
+            translate var(--pc-transition-medium)
+                cubic-bezier(0.34, 1.35, 0.64, 1);
+    }
+
+    .switch-input {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .switch:not(.switch-checked):not(.switch-disabled) .control:hover,
+    .switch:not(.switch-checked):not(.switch-disabled) .control:focus-visible {
+        background-color: var(--pc-color-neutral-300);
+        border-color: var(--pc-color-neutral-300);
+    }
+
+    .switch:not(.switch-checked):not(.switch-disabled) .control:active {
+        background-color: var(--pc-color-neutral-100);
+        border-color: var(--pc-color-neutral-100);
+    }
+
+    .switch:not(.switch-checked):not(.switch-disabled)
+        .switch-input:focus-visible
+        ~ .control
+        .thumb {
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .switch-checked .control {
+        background-color: var(--pc-color-primary-400);
+        border-color: var(--pc-color-primary-400);
+    }
+
+    .switch-checked .control .thumb {
+        translate: calc((var(--width) - var(--height)) / 2);
+    }
+
+    .switch.switch-checked:not(.switch-disabled) .control:hover,
+    .switch.switch-checked:not(.switch-disabled) .control:focus-visible {
+        background-color: var(--pc-color-primary-500);
+        border-color: var(--pc-color-primary-500);
+    }
+
+    .switch.switch-checked:not(.switch-disabled) .control:active {
+        background-color: var(--pc-color-primary-300);
+        border-color: var(--pc-color-primary-300);
+    }
+
+    .switch.switch-checked:not(.switch-disabled)
+        .switch-input:focus-visible
+        ~ .control {
+        background-color: var(--pc-color-primary-600);
+        border-color: var(--pc-color-primary-600);
+    }
+
+    .switch.switch-checked:not(.switch-disabled)
+        .switch-input:focus-visible
+        ~ .control
+        .thumb {
+        outline: var(--pc-focus-ring);
+        outline-color: var(--pc-color-primary-300);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .switch-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .label {
+        display: inline-block;
+        line-height: var(--height);
+        margin-inline-start: var(--pc-spacing-s);
+        user-select: none;
+        -webkit-user-select: none;
+        transition: color var(--pc-transition-fast) ease-in-out;
+    }
+
+    :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);
+    }
+
+    .form-control .hint {
+        display: none;
+    }
+
+    .form-control-has-hint .hint {
+        color: var(--pc-input-hint-color);
+        font-family: var(--pc-input-font-family);
+    }
+
+    @media (forced-colors: active) {
+        .switch:not(.switch-disabled) .control:hover .thumb,
+        .switch:not(.switch-disabled) .control:focus-visible .thumb,
+        .switch .control .thumb {
+            border: 1px solid ButtonText;
+            width: calc(var(--thumb-size) - 2px);
+            height: calc(var(--thumb-size) - 2px);
+        }
+
+        .switch.switch-checked:not(.switch-disabled) .control:hover .thumb,
+        .switch.switch-checked:not(.switch-disabled)
+            .control:focus-visible
+            .thumb,
+        .switch-checked .control .thumb {
+            background-color: ButtonText;
+        }
+    }
+`;

package/src/components/switch/switch.ts

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

package/src/components/tab/tab.component.ts

@@ -0,0 +1,87 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property, query } 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 { PcIconButton } from "../icon-button/icon-button.js";
+import { styles } from "./tab.styles.js";
+
+let id = 0;
+
+@customElement("pc-tab")
+export class PcTab extends LitElement {
+    static styles: CSSResultGroup = styles;
+    static dependencies = { "pc-icon-button": PcIconButton };
+
+    private readonly attributeID = ++id;
+    private readonly componentID = `pc-tab-${this.attributeID}`;
+
+    @query(".tab") tab!: HTMLElement;
+
+    @property({ type: Boolean, reflect: true }) active = false;
+
+    @property({ type: Boolean, reflect: true }) closable = false;
+
+    @property({ type: Boolean, reflect: true }) disabled = false;
+
+    @property({ reflect: true }) panel = "";
+
+    @property({ type: Number, reflect: true }) tabIndex = 0;
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "tab");
+    }
+
+    private handleCloseClick(event: Event) {
+        event.stopPropagation();
+        emit(this, "pc-close");
+    }
+
+    @watch("active")
+    handleActiveChange() {
+        this.setAttribute("aria-selected", this.active ? "true" : "false");
+    }
+
+    @watch("disabled")
+    handleDisabledChange() {
+        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+
+        if (this.disabled && !this.active) {
+            this.tabIndex = -1;
+        }
+    }
+
+    render() {
+        this.id = this.id.length > 0 ? this.id : this.componentID;
+
+        return html`
+            <div
+                part="base"
+                class=${classMap({
+                    "tab": true,
+                    "tab-active": this.active === true,
+                    "tab-closable": this.closable === true,
+                    "tab-disabled": this.disabled === true,
+                })}
+            >
+                <slot></slot>
+                ${this.closable
+                    ? html`
+                          <pc-icon-button
+                              class="close-button"
+                              library="system"
+                              icon-style="solid"
+                              name="xmark"
+                              label="Close tab"
+                              @click=${this.handleCloseClick}
+                              tabindex="-1"
+                              exportparts="base:close-button__base"
+                          ></pc-icon-button>
+                      `
+                    : ""}
+            </div>
+        `;
+    }
+}

package/src/components/tab/tab.styles.ts

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

package/src/components/tab/tab.ts

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