placer-toolkit 0.5.1

package/dist/components/select/select.d.ts

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

package/dist/components/select/select.js

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

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

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

package/dist/components/select/select.styles.js

@@ -0,0 +1,363 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        display: block;
+    }
+
+    .select {
+        display: inline-flex;
+        position: relative;
+        flex: 1 1 auto;
+        width: 100%;
+        vertical-align: middle;
+    }
+
+    .select::part(popup) {
+        z-index: var(--pc-z-index-dropdown);
+    }
+
+    .select[data-current-placement^="top"]::part(popup) {
+        transform-origin: bottom;
+    }
+
+    .select[data-current-placement^="bottom"]::part(popup) {
+        transform-origin: top;
+    }
+
+    .select-combobox {
+        display: flex;
+        position: relative;
+        align-items: center;
+        justify-content: start;
+        flex: 1;
+        min-width: 0;
+        width: 100%;
+        font-family: var(--pc-input-font-family);
+        font-weight: var(--pc-input-font-weight);
+        letter-spacing: var(--pc-input-letter-spacing);
+        vertical-align: middle;
+        overflow: hidden;
+        cursor: pointer;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .select-input {
+        -webkit-appearance: none;
+        position: relative;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: var(--pc-input-color);
+        font: inherit;
+        cursor: inherit;
+        overflow: hidden;
+    }
+
+    .select-input::placeholder {
+        color: var(--pc-input-placeholder-color);
+    }
+
+    .select:not(.select-disabled):hover .select-input {
+        color: var(--pc-input-color-hover);
+    }
+
+    .select-input:focus {
+        outline: none;
+    }
+
+    .select-multiple:not(.select-placeholder-visible) .select-input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        z-index: -1;
+    }
+
+    .select-value-input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        z-index: -1;
+    }
+
+    .select-tags {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        flex-wrap: wrap;
+        margin-inline-start: var(--pc-spacing-xs);
+    }
+
+    .select-tags::slotted(pc-tag) {
+        cursor: pointer !important;
+    }
+
+    .select-disabled .select-tags,
+    .select-disabled .select-tags::slotted(pc-tag) {
+        cursor: not-allowed !important;
+    }
+
+    .select-standard .select-combobox {
+        background-color: var(--pc-input-background-color);
+        border: var(--pc-input-border-width) solid var(--pc-input-border-color);
+    }
+
+    .select-standard .select-combobox:hover {
+        background-color: var(--pc-input-background-color-hover);
+        border-color: var(--pc-input-border-color-hover);
+    }
+
+    .select-standard:not(.select-disabled).select-open .select-combobox,
+    .select-standard:not(.select-disabled).select-focused .select-combobox {
+        background-color: var(--pc-input-background-color-focus);
+        border-color: var(--pc-input-border-color);
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .select-standard.select-disabled .select-combobox {
+        background-color: var(--pc-input-background-color-disabled);
+        border-color: var(--pc-input-border-color-disabled);
+        color: var(--pc-input-color-disabled);
+        opacity: 0.6;
+        cursor: not-allowed;
+        outline: none;
+    }
+
+    .select-filled .select-combobox {
+        background-color: var(--pc-input-filled-background-color);
+        color: var(--pc-input-color);
+        border: var(--pc-input-border-width) solid transparent;
+    }
+
+    .select-filled .select-combobox:hover {
+        background-color: var(--pc-input-filled-background-color-hover);
+    }
+
+    .select-filled:not(.select-disabled).select-open .select-combobox,
+    .select-filled:not(.select-disabled).select-focused .select-combobox {
+        background-color: var(--pc-input-filled-background-color-focus);
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .select-filled.select-disabled .select-combobox {
+        background-color: var(--pc-input-filled-background-color-disabled);
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .select-small .select-combobox {
+        height: var(--pc-input-height-s);
+        font-size: var(--pc-input-font-size-s);
+        border-radius: var(--pc-input-border-radius-s);
+        padding-block: 0;
+        padding-inline: var(--pc-input-spacing-s);
+    }
+
+    .select-small .clear-button {
+        margin-inline-start: var(--pc-input-spacing-s);
+    }
+
+    .select-small .prefix::slotted(*) {
+        margin-inline-end: var(--pc-input-spacing-s);
+    }
+
+    .select-small.select-multiple:not(.select-placeholder-visible)
+        .prefix::slotted(*) {
+        margin-inline-start: var(--pc-input-spacing-s);
+    }
+
+    .select-small.select-multiple:not(.select-placeholder-visible)
+        .select-combobox {
+        padding-block: 2px;
+        padding-inline-start: 0;
+    }
+
+    .select-small .select-tags {
+        gap: 2px;
+    }
+
+    .select-medium .select-combobox {
+        height: var(--pc-input-height-m);
+        font-size: var(--pc-input-font-size-m);
+        border-radius: var(--pc-input-border-radius-m);
+        padding-block: 0;
+        padding-inline: var(--pc-input-spacing-m);
+    }
+
+    .select-medium .clear-button {
+        margin-inline-start: var(--pc-input-spacing-m);
+    }
+
+    .select-medium .prefix::slotted(*) {
+        margin-inline-end: var(--pc-input-spacing-m);
+    }
+
+    .select-medium.select-multiple:not(.select-placeholder-visible)
+        .prefix::slotted(*) {
+        margin-inline-start: var(--pc-input-spacing-m);
+    }
+
+    .select-medium.select-multiple:not(.select-placeholder-visible)
+        .select-combobox {
+        padding-block: 3px;
+        padding-inline-start: 0;
+    }
+
+    .select-medium .select-tags {
+        gap: 3px;
+    }
+
+    .select-large .select-combobox {
+        height: var(--pc-input-height-l);
+        font-size: var(--pc-input-font-size-l);
+        border-radius: var(--pc-input-border-radius-l);
+        padding-block: 0;
+        padding-inline: var(--pc-input-spacing-l);
+    }
+
+    .select-large .clear-button {
+        margin-inline-start: var(--pc-input-spacing-l);
+    }
+
+    .select-large .prefix::slotted(*) {
+        margin-inline-end: var(--pc-input-spacing-l);
+    }
+
+    .select-large.select-multiple:not(.select-placeholder-visible)
+        .prefix::slotted(*) {
+        margin-inline-start: var(--pc-input-spacing-l);
+    }
+
+    .select-large.select-multiple:not(.select-placeholder-visible)
+        .select-combobox {
+        padding-block: 4px;
+        padding-inline-start: 0;
+    }
+
+    .select-large .select-tags {
+        gap: 4px;
+    }
+
+    .select-pill .select-combobox {
+        border-radius: var(--pc-border-radius-pill);
+    }
+
+    .prefix,
+    .suffix {
+        display: inline-flex;
+        align-items: center;
+        flex: 0;
+        color: var(--pc-input-placeholder-color);
+    }
+
+    .suffix::slotted(*) {
+        margin-inline-start: var(--pc-spacing-m);
+    }
+
+    .clear-select-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: var(--pc-input-icon-color);
+        font-size: inherit;
+        cursor: pointer;
+        transition: color var(--pc-transition-fast) ease-in-out;
+    }
+
+    .clear-select-button:hover {
+        color: var(--pc-input-icon-color-hover);
+    }
+
+    .clear-select-button:active {
+        color: var(--pc-input-icon-color-active);
+    }
+
+    .clear-select-button:focus {
+        outline: none;
+    }
+
+    .expand-icon {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        rotate: 0;
+        margin-inline-start: var(--pc-spacing-m);
+        transition: rotate var(--pc-transition-fast) ease-in-out;
+    }
+
+    .select-open .expand-icon {
+        rotate: 180deg;
+    }
+
+    .select-listbox {
+        display: block;
+        position: relative;
+        font-family: var(--pc-font-sans);
+        font-size: var(--pc-font-size-m);
+        font-weight: var(--pc-font-weight-normal);
+        background-color: var(--pc-panel-background-color);
+        border: none;
+        border-radius: var(--pc-border-radius-m);
+        padding: var(--pc-spacing-xs);
+        max-width: var(--auto-size-available-width);
+        max-height: var(--auto-size-available-height);
+        overflow: auto;
+        box-shadow: var(--pc-shadow-l);
+        overscroll-behavior: none;
+    }
+
+    .select-listbox ::slotted(pc-divider) {
+        --spacing: var(--pc-spacing-xs);
+    }
+
+    .select-listbox ::slotted(small) {
+        display: block;
+        font-size: var(--pc-font-size-s);
+        font-weight: var(--pc-font-weight-semibold);
+        color: var(--pc-color-neutral-500);
+        padding-block: var(--pc-spacing-xs);
+        padding-inline-start: 2rem;
+    }
+
+    .form-control .label,
+    .form-control .hint {
+        display: none;
+    }
+
+    .form-control-has-label .label {
+        display: inline-block;
+        color: var(--pc-input-label-color);
+        line-height: var(--pc-line-height-normal);
+        margin-bottom: var(--pc-spacing-xs);
+        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-has-hint .hint {
+        color: var(--pc-input-hint-color);
+        font-family: var(--pc-input-font-family);
+        margin-top: var(--pc-spacing-xs);
+    }
+`;
+
+export { styles };

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

@@ -0,0 +1,20 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @status experimental
+ * @since 0.1.0
+ *
+ * @csspart base — The component’s base wrapper.
+ *
+ * @cssproperty --track-width — The width of the track.
+ * @cssproperty --track-color — The colour of the track.
+ * @cssproperty --indicator-color — The colour of the spinner’s indicator.
+ * @cssproperty --speed — The time it takes for the spinner to complete one animation cycle.
+ */
+export declare class PcSpinner extends LitElement {
+    static styles: CSSResultGroup;
+    /** The switch’s label. */
+    label: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/spinner/spinner.component.js

@@ -0,0 +1,47 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { styles } from './spinner.styles.js';
+
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @status experimental
+ * @since 0.1.0
+ *
+ * @csspart base — The component’s base wrapper.
+ *
+ * @cssproperty --track-width — The width of the track.
+ * @cssproperty --track-color — The colour of the track.
+ * @cssproperty --indicator-color — The colour of the spinner’s indicator.
+ * @cssproperty --speed — The time it takes for the spinner to complete one animation cycle.
+ */
+let PcSpinner = class PcSpinner extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The switch’s label. */
+        this.label = "";
+    }
+    render() {
+        return html `
+            <svg
+                class="spinner"
+                part="base"
+                role="progressbar"
+                aria-label=${this.label}
+            >
+                <circle class="track"></circle>
+                <circle class="indicator"></circle>
+            </svg>
+        `;
+    }
+};
+PcSpinner.styles = styles;
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcSpinner.prototype, "label", void 0);
+PcSpinner = __decorate([
+    customElement("pc-spinner")
+], PcSpinner);
+
+export { PcSpinner };

package/dist/components/spinner/spinner.d.ts

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

package/dist/components/spinner/spinner.js

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

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

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

package/dist/components/spinner/spinner.styles.js

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        --track-width: 0.125rem;
+        --track-color: rgb(112 120 128 / 25%);
+        --indicator-color: var(--pc-color-primary-600);
+        --speed: 2s;
+
+        display: inline-flex;
+        width: 1em;
+        height: 1em;
+        flex: none;
+    }
+
+    .spinner {
+        flex: 1 1 auto;
+        height: 100%;
+        width: 100%;
+        overflow: visible;
+    }
+
+    .track,
+    .indicator {
+        fill: none;
+        stroke-width: var(--track-width);
+        r: calc(0.5em - var(--track-width) / 2);
+        cx: 0.5em;
+        cy: 0.5em;
+        transform-origin: 50% 50%;
+    }
+
+    .track {
+        stroke: var(--track-color);
+        transform-origin: 0% 0%;
+    }
+
+    .indicator {
+        stroke: var(--indicator-color);
+        stroke-linecap: round;
+        stroke-dasharray: 150% 75%;
+        animation: spin var(--speed) linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            rotate: 0deg;
+            stroke-dasharray: 0% 314.159%;
+        }
+        50% {
+            rotate: 450deg;
+            stroke-dasharray: 157.08% 157.08%;
+        }
+        100% {
+            rotate: 1080deg;
+            stroke-dasharray: 0% 314.159%;
+        }
+    }
+`;
+
+export { styles };

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

@@ -0,0 +1,84 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+/**
+ * @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.
+ */
+export declare class PcSwitch extends LitElement {
+    static styles: CSSResultGroup;
+    private readonly formControlController;
+    private readonly hasSlotController;
+    /** @internal This is an internal property. */
+    input: HTMLInputElement;
+    private hasFocus;
+    /** @internal This is an internal property. */
+    title: string;
+    /** The name of the switch, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the switch, submitted as a name/value pair with form data. */
+    value?: string;
+    /** The switch’s size. */
+    size: "small" | "medium" | "large";
+    /** Disables the switch. */
+    disabled: boolean;
+    /** Enables the switch. */
+    checked: boolean;
+    /** The default value of the switch. Primarily used for resetting the switch. */
+    defaultChecked: boolean;
+    /** 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. */
+    form: string;
+    /** Makes the switch a required field. */
+    required: boolean;
+    /** The switch’s hint. if you need to display HTML, use the `hint` slot instead. */
+    hint: string;
+    /** Gets the validity state object. */
+    get validity(): ValidityState;
+    /** Gets the validation message. */
+    get validationMessage(): string;
+    firstUpdated(): void;
+    private handleClick;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleInvalid;
+    private handleKeyDown;
+    /** @internal This is an internal property. */
+    handleCheckedChange(): void;
+    /** @internal This is an internal property. */
+    handleDisabledChange(): void;
+    /** Simulates a click on the switch. */
+    click(): void;
+    /** Focuses the switch. */
+    focus(options?: FocusOptions): void;
+    /** Unfocuses/blurs the switch. */
+    blur(): void;
+    /** Checks for validity but doesn’t show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser’s validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}