placer-toolkit 0.5.1

package/dist/components/switch/switch.component.js

@@ -0,0 +1,281 @@
+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 { 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.
+ */
+let PcSwitch = class PcSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        // @ts-expect-error
+        this.formControlController = new FormControlController(this, {
+            value: (control) => control.checked ? control.value || "on" : undefined,
+            defaultValue: (control) => control.defaultChecked,
+            setValue: (control, checked) => (control.checked = checked),
+        });
+        this.hasSlotController = new HasSlotController(this, "hint");
+        this.hasFocus = false;
+        /** @internal This is an internal property. */
+        this.title = "";
+        /** The name of the switch, submitted as a name/value pair with form data. */
+        this.name = "";
+        /** The switch’s size. */
+        this.size = "medium";
+        /** Disables the switch. */
+        this.disabled = false;
+        /** Enables the switch. */
+        this.checked = false;
+        /** The default value of the switch. Primarily used for resetting the switch. */
+        this.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. */
+        this.form = "";
+        /** Makes the switch a required field. */
+        this.required = false;
+        /** The switch’s hint. if you need to display HTML, use the `hint` slot instead. */
+        this.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();
+    }
+    handleClick() {
+        this.checked = !this.checked;
+        emit(this, "pc-change");
+    }
+    handleInput() {
+        emit(this, "pc-input");
+    }
+    handleFocus() {
+        this.hasFocus = true;
+        emit(this, "pc-focus");
+    }
+    handleBlur() {
+        this.hasFocus = false;
+        emit(this, "pc-blur");
+    }
+    handleInvalid(event) {
+        this.formControlController.setValidity(false);
+        this.formControlController.emitInvalidEvent(event);
+    }
+    handleKeyDown(event) {
+        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. */
+    handleCheckedChange() {
+        this.input.checked = this.checked;
+        this.formControlController.updateValidity();
+    }
+    /** @internal This is an internal property. */
+    handleDisabledChange() {
+        this.formControlController.setValidity(true);
+    }
+    /** Simulates a click on the switch. */
+    click() {
+        this.input.click();
+    }
+    /** Focuses the switch. */
+    focus(options) {
+        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() {
+        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) {
+        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>
+        `;
+    }
+};
+PcSwitch.styles = styles;
+__decorate([
+    query("input[type='checkbox']"),
+    __metadata("design:type", HTMLInputElement)
+], PcSwitch.prototype, "input", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "hasFocus", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "title", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "name", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcSwitch.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], PcSwitch.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "checked", void 0);
+__decorate([
+    defaultValue("checked"),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "defaultChecked", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "form", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "required", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcSwitch.prototype, "hint", void 0);
+__decorate([
+    watch("checked", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcSwitch.prototype, "handleCheckedChange", null);
+__decorate([
+    watch("disabled", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcSwitch.prototype, "handleDisabledChange", null);
+PcSwitch = __decorate([
+    customElement("pc-switch")
+], PcSwitch);
+
+export { PcSwitch };

package/dist/components/switch/switch.d.ts

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

package/dist/components/switch/switch.js

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

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

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

package/dist/components/switch/switch.styles.js

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

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

@@ -0,0 +1,22 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIconButton } from "../icon-button/icon-button.js";
+export declare class PcTab extends LitElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pc-icon-button": typeof PcIconButton;
+    };
+    private readonly attributeID;
+    private readonly componentID;
+    tab: HTMLElement;
+    active: boolean;
+    closable: boolean;
+    disabled: boolean;
+    panel: string;
+    tabIndex: number;
+    connectedCallback(): void;
+    private handleCloseClick;
+    handleActiveChange(): void;
+    handleDisabledChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,112 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, property, customElement } 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.component.js';
+import { styles } from './tab.styles.js';
+
+let id = 0;
+let PcTab = class PcTab extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.attributeID = ++id;
+        this.componentID = `pc-tab-${this.attributeID}`;
+        this.active = false;
+        this.closable = false;
+        this.disabled = false;
+        this.panel = "";
+        this.tabIndex = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "tab");
+    }
+    handleCloseClick(event) {
+        event.stopPropagation();
+        emit(this, "pc-close");
+    }
+    handleActiveChange() {
+        this.setAttribute("aria-selected", this.active ? "true" : "false");
+    }
+    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>
+        `;
+    }
+};
+PcTab.styles = styles;
+PcTab.dependencies = { "pc-icon-button": PcIconButton };
+__decorate([
+    query(".tab"),
+    __metadata("design:type", HTMLElement)
+], PcTab.prototype, "tab", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcTab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcTab.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcTab.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], PcTab.prototype, "panel", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Object)
+], PcTab.prototype, "tabIndex", void 0);
+__decorate([
+    watch("active"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcTab.prototype, "handleActiveChange", null);
+__decorate([
+    watch("disabled"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcTab.prototype, "handleDisabledChange", null);
+PcTab = __decorate([
+    customElement("pc-tab")
+], PcTab);
+
+export { PcTab };

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

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

package/dist/components/tab/tab.js

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

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

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