placer-toolkit 0.5.1 → 1.0.0-alpha.2

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

@@ -1,101 +0,0 @@
-import { LitElement, html } from "lit";
-import type { CSSResultGroup } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { styles } from "./button-group.styles.js";
-
-function findButton(element: HTMLElement) {
-    const selector = "pc-button, pc-radio-button";
-
-    return element.closest(selector) ?? element.querySelector(selector);
-}
-
-/**
- * @summary Button groups can be used to group related buttons into groups.
- * @status experimental
- * @since 0.3.0
- *
- * @slot — One or more `<pc-button>` elements to display in the button group.
- *
- * @csspart base — The component’s base wrapper.
- */
-@customElement("pc-button-group")
-export class PcButtonGroup extends LitElement {
-    static styles: CSSResultGroup = styles;
-
-    /** @internal This is an internal property. */
-    @query("slot") defaultSlot!: HTMLSlotElement;
-
-    /** @internal This is an internal property. */
-    @state() disableRole = false;
-
-    /** A label to use for the button group. This won’t be displayed on the screen, but it will be announced by assistive devices when interacting with the control and is highly recommended. */
-    @property() label = "";
-
-    private handleFocus(event: Event) {
-        const button = findButton(event.target as HTMLElement);
-        button?.toggleAttribute("data-pc-button-group-button-focus", true);
-    }
-
-    private handleBlur(event: Event) {
-        const button = findButton(event.target as HTMLElement);
-        button?.toggleAttribute("data-pc-button-group-button-focus", false);
-    }
-
-    private handleMouseOver(event: Event) {
-        const button = findButton(event.target as HTMLElement);
-        button?.toggleAttribute("data-pc-button-group-button-hover", true);
-    }
-
-    private handleMouseOut(event: Event) {
-        const button = findButton(event.target as HTMLElement);
-        button?.toggleAttribute("data-pc-button-group-button-hover", false);
-    }
-
-    private handleSlotChange() {
-        const slottedElements = [
-            ...this.defaultSlot.assignedElements({ flatten: true }),
-        ] as HTMLElement[];
-
-        slottedElements.forEach((element) => {
-            const index = slottedElements.indexOf(element);
-            const button = findButton(element);
-
-            if (button) {
-                button.toggleAttribute("data-pc-button-group-button", true);
-                button.toggleAttribute(
-                    "data-pc-button-group-button-first",
-                    index === 0,
-                );
-                button.toggleAttribute(
-                    "data-pc-button-group-button-inner",
-                    index > 0 && index < slottedElements.length - 1,
-                );
-                button.toggleAttribute(
-                    "data-pc-button-group-button-last",
-                    index === slottedElements.length - 1,
-                );
-                button.toggleAttribute(
-                    "data-pc-button-group-button-radio",
-                    button.tagName.toLowerCase() === "pc-radio-button",
-                );
-            }
-        });
-    }
-
-    render() {
-        return html`
-            <div
-                class="button-group"
-                part="base"
-                role=${this.disableRole ? "presentation" : "group"}
-                aria-label=${this.label}
-                @focusin=${this.handleFocus}
-                @focusout=${this.handleBlur}
-                @mouseover=${this.handleMouseOver}
-                @mouseout=${this.handleMouseOut}
-            >
-                <slot @slotchange=${this.handleSlotChange}></slot>
-            </div>
-        `;
-    }
-}

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

@@ -1,12 +0,0 @@
-import { css } from "lit";
-
-export const styles = css`
-    :host {
-        display: inline-block;
-    }
-
-    .button-group {
-        display: flex;
-        flex-wrap: nowrap;
-    }
-`;

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

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

package/src/components/callout/callout.component.ts

@@ -1,60 +0,0 @@
-import { LitElement, html, nothing } from "lit";
-import type { CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { styles } from "./callout.styles.js";
-
-/**
- * @summary Callouts are used to display important messages inline.
- * @status experimental
- * @since 0.5.1
- *
- * @slot — The callout’s content.
- * @slot icon — An informational icon.
- *
- * @csspart base — The component’s base wrapper.
- * @csspart icon — The callout’s icon.
- * @csspart message — The callout’s content.
- */
-@customElement("pc-callout")
-export class PcCallout extends LitElement {
-    static styles: CSSResultGroup = styles;
-
-    /** The callout’s appearance. */
-    @property() appearance:
-        | "primary"
-        | "success"
-        | "neutral"
-        | "warning"
-        | "danger" = "primary";
-
-    /** @internal This is an internal property. */
-    get isCritical() {
-        return this.appearance === "warning" || this.appearance === "danger";
-    }
-
-    render() {
-        return html`
-            <aside
-                part="base"
-                class=${classMap({
-                    "callout": true,
-                    "callout-primary": this.appearance === "primary",
-                    "callout-success": this.appearance === "success",
-                    "callout-neutral": this.appearance === "neutral",
-                    "callout-warning": this.appearance === "warning",
-                    "callout-danger": this.appearance === "danger",
-                })}
-                role=${this.isCritical ? "alert" : nothing}
-                aria-live=${this.isCritical ? "assertive" : "polite"}
-            >
-                <div part="icon">
-                    <slot name="icon" aria-hidden="true"></slot>
-                </div>
-                <div part="message">
-                    <slot></slot>
-                </div>
-            </aside>
-        `;
-    }
-}

package/src/components/callout/callout.styles.ts

@@ -1,66 +0,0 @@
-import { css } from "lit";
-
-export const styles = css`
-    :host {
-        --icon-color: currentColor;
-        --icon-size: var(--pc-font-size-l);
-        --spacing: var(--pc-spacing-l);
-    }
-
-    .callout {
-        display: flex;
-        position: relative;
-        align-items: stretch;
-        gap: var(--spacing);
-        border-radius: var(--pc-border-radius-l);
-        padding: var(--spacing);
-    }
-
-    .callout ::slotted(p) {
-        margin: 0;
-    }
-
-    .callout-primary {
-        background-color: var(--pc-color-primary-50);
-        color: var(--pc-color-primary-700);
-        border: 1px solid var(--pc-color-primary-200);
-    }
-
-    .callout-success {
-        background-color: var(--pc-color-success-50);
-        color: var(--pc-color-success-700);
-        border: 1px solid var(--pc-color-success-200);
-    }
-
-    .callout-neutral {
-        background-color: var(--pc-color-neutral-50);
-        color: var(--pc-color-neutral-700);
-        border: 1px solid var(--pc-color-neutral-200);
-    }
-
-    .callout-warning {
-        background-color: var(--pc-color-warning-50);
-        color: var(--pc-color-warning-700);
-        border: 1px solid var(--pc-color-warning-200);
-    }
-
-    .callout-danger {
-        background-color: var(--pc-color-danger-50);
-        color: var(--pc-color-danger-700);
-        border: 1px solid var(--pc-color-danger-200);
-    }
-
-    div[part="icon"] {
-        display: flex;
-        align-items: center;
-        flex: 0 0 auto;
-        color: var(--icon-color);
-        font-size: var(--icon-size);
-    }
-
-    div[part="message"] {
-        display: block;
-        flex: 1 1 auto;
-        overflow: hidden;
-    }
-`;

package/src/components/callout/callout.ts

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

package/src/components/card/card.component.ts

@@ -1,59 +0,0 @@
-import { LitElement, html } from "lit";
-import type { CSSResultGroup } from "lit";
-import { customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { HasSlotController } from "../../internal/slot.js";
-import { styles } from "./card.styles.js";
-
-/**
- * @summary Cards can be used to group related subjects in a container.
- * @status experimental
- * @since 0.1.0
- *
- * @slot — The card’s main content.
- * @slot image — An optional image to render at the start of the card.
- * @slot header — An optional header for the card.
- * @slot footer — An optional footer for the card.
- * @slot image — An optional image to render at the start of the card.
- *
- * @csspart base — The component’s base wrapper.
- * @csspart image — The container that wraps the card’s image.
- * @csspart header — The container that wraps the card’s header.
- * @csspart body — The container that wraps the card’s main content.
- * @csspart footer — The container that wraps the card’s footer.
- *
- * @cssproperty --border-color — The card’s border colour, including borders inside the card.
- * @cssproperty --border-radius — The border radius of the card.
- * @cssproperty --border-width — The stroke width of the card’s borders.
- * @cssproperty --padding — The padding surrounding the card’s content.
- */
-@customElement("pc-card")
-export class PcCard extends LitElement {
-    static styles: CSSResultGroup = styles;
-
-    private readonly hasSlotController = new HasSlotController(
-        this,
-        "image",
-        "header",
-        "footer",
-    );
-
-    render() {
-        return html`
-            <div
-                part="base"
-                class=${classMap({
-                    "card": true,
-                    "card-has-image": this.hasSlotController.test("image"),
-                    "card-has-header": this.hasSlotController.test("header"),
-                    "card-has-footer": this.hasSlotController.test("footer"),
-                })}
-            >
-                <slot class="image" name="image" part="image"></slot>
-                <slot class="header" name="header" part="header"></slot>
-                <slot class="body" part="body"></slot>
-                <slot class="footer" name="footer" part="footer"></slot>
-            </div>
-        `;
-    }
-}

package/src/components/card/card.styles.ts

@@ -1,63 +0,0 @@
-import { css } from "lit";
-
-export const styles = css`
-    :host {
-        --border-color: var(--pc-color-neutral-200);
-        --border-radius: var(--pc-border-radius-l);
-        --border-width: 1px;
-        --padding: var(--pc-spacing-l);
-        display: inline-block;
-    }
-
-    .card {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--pc-panel-background-color);
-        border: var(--border-width) solid var(--border-color);
-        border-radius: var(--border-radius);
-        box-shadow: var(--pc-shadow-l);
-    }
-
-    .image {
-        display: flex;
-        border-radius: var(--border-radius) var(--border-radius) 0 0;
-        margin: calc(-1 * var(--border-width));
-        overflow: hidden;
-    }
-
-    .image::slotted(img),
-    .image::slotted(video) {
-        display: block;
-        width: 100%;
-        border-radius: 0;
-    }
-
-    .card:not(.card-has-image) .image {
-        display: none;
-    }
-
-    .header {
-        display: block;
-        border-bottom: var(--border-width) solid var(--border-color);
-        padding: calc(var(--padding) / 2) var(--padding);
-    }
-
-    .card:not(.card-has-header) .header {
-        display: none;
-    }
-
-    .body {
-        display: block;
-        padding: var(--padding);
-    }
-
-    .card-has-footer .footer {
-        display: block;
-        border-top: var(--border-width) solid var(--border-color);
-        padding: var(--padding);
-    }
-
-    .card:not(.card-has-footer) .footer {
-        display: none;
-    }
-`;

package/src/components/card/card.ts

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

package/src/components/checkbox/checkbox.component.ts

@@ -1,244 +0,0 @@
-import { CSSResultGroup, LitElement, html, nothing } 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 { PcIcon } from "../icon/icon.js";
-import { styles } from "./checkbox.styles.js";
-
-@customElement("pc-checkbox")
-export class PcCheckbox extends LitElement {
-    static styles?: CSSResultGroup = styles;
-    static dependencies = { "pc-icon": PcIcon };
-
-    // @ts-expect-error
-    private readonly formControlController = new FormControlController(this, {
-        value: (control: PcCheckbox) =>
-            control.checked ? control.value || "on" : undefined,
-        defaultValue: (control: PcCheckbox) => control.defaultChecked,
-        setValue: (control: PcCheckbox, checked: boolean) =>
-            (control.checked = checked),
-    });
-    private readonly hasSlotController = new HasSlotController(this, "hint");
-
-    @query("input[type='checkbox']") input!: HTMLInputElement;
-
-    @state() private hasFocus = false;
-    @state() private isFadingOut = false;
-
-    @property({ type: Boolean, reflect: true }) checked = false;
-
-    @defaultValue("checked") defaultChecked = false;
-
-    @property({ type: Boolean, reflect: true }) disabled = false;
-
-    @property({ reflect: true }) form = "";
-
-    @property({ attribute: "hint" }) hint = "";
-
-    @property({ type: Boolean, reflect: true }) indeterminate = false;
-
-    @property({ type: Boolean, reflect: true }) invalid = false;
-
-    @property() name = "";
-
-    @property({ type: Boolean, reflect: true }) pressed = false;
-
-    @property({ type: Boolean }) required = false;
-
-    @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
-
-    @property() title = "";
-
-    @property() value: string = "";
-
-    get validity() {
-        return this.input.validity;
-    }
-
-    get validationMessage() {
-        return this.input.validationMessage;
-    }
-
-    firstUpdated() {
-        this.formControlController.updateValidity();
-    }
-
-    private handleClick() {
-        if (!this.indeterminate) {
-            if (this.checked) {
-                this.isFadingOut = true;
-                setTimeout(() => (this.isFadingOut = false), 150);
-            }
-        }
-
-        this.checked = !this.checked;
-        this.indeterminate = false;
-        emit(this, "pc-change");
-    }
-
-    private handleFocus() {
-        this.hasFocus = true;
-        emit(this, "pc-focus");
-    }
-
-    private handleBlur() {
-        this.hasFocus = false;
-        emit(this, "pc-blur");
-    }
-
-    private handleInput() {
-        emit(this, "pc-input");
-    }
-
-    private handleInvalid(event: Event) {
-        this.formControlController.setValidity(false);
-        this.formControlController.emitInvalidEvent(event);
-    }
-
-    @watch("disabled", { waitUntilFirstUpdate: true })
-    handleDisabledChange() {
-        this.formControlController.setValidity(this.disabled);
-    }
-
-    @watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
-    handleStateChange() {
-        if (!this.indeterminate && this.checked) {
-            this.isFadingOut = false;
-        }
-        this.input.checked = this.checked;
-        this.input.indeterminate = this.indeterminate;
-        this.formControlController.updateValidity();
-    }
-
-    click() {
-        this.input.click();
-    }
-
-    focus(options?: FocusOptions) {
-        this.input.focus(options);
-    }
-
-    blur() {
-        this.input.blur();
-    }
-
-    checkValidity() {
-        return this.input.checkValidity();
-    }
-
-    getForm(): HTMLFormElement | null {
-        return this.formControlController.getForm();
-    }
-
-    reportValidity() {
-        return this.input.reportValidity();
-    }
-
-    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",
-                })}
-            >
-                <label
-                    part="base"
-                    class=${classMap({
-                        "checkbox": true,
-                        "checkbox-small": this.size === "small",
-                        "checkbox-medium": this.size === "medium",
-                        "checkbox-large": this.size === "large",
-                        "checkbox-invalid": this.invalid === true,
-                        "checkbox-checked": this.checked && !this.isFadingOut,
-                        "checkbox-indeterminate": this.indeterminate,
-                        "checkbox-disabled": this.disabled === true,
-                        "checkbox-has-focus": this.hasFocus === true,
-                    })}
-                >
-                    <input
-                        class="checkbox-input"
-                        type="checkbox"
-                        title=${this.title}
-                        name=${this.name}
-                        value=${ifDefined(this.value)}
-                        .indeterminate=${live(this.indeterminate)}
-                        .checked=${live(this.checked)}
-                        .disabled=${this.disabled}
-                        .required=${this.required}
-                        aria-checked=${this.checked ? "true" : "false"}
-                        aria-describedby=${this.hint ? "hint-text" : nothing}
-                        @click=${this.handleClick}
-                        @input=${this.handleInput}
-                        @focus=${this.handleFocus}
-                        @blur=${this.handleBlur}
-                        @invalid=${this.handleInvalid}
-                    />
-
-                    <span
-                        part="control ${this.checked
-                            ? "checkbox-checked"
-                            : ""} ${this.indeterminate
-                            ? "checkbox-indeterminate"
-                            : ""}"
-                        class=${classMap({
-                            "control": true,
-                            "fade-in": this.checked && !this.isFadingOut,
-                            "fade-out": this.isFadingOut,
-                        })}
-                    >
-                        ${this.checked || this.isFadingOut
-                            ? html`
-                                  <pc-icon
-                                      library="system"
-                                      icon-style="solid"
-                                      name="check"
-                                      part="icon-checked"
-                                  ></pc-icon>
-                              `
-                            : ""}
-                        ${this.indeterminate
-                            ? html`
-                                  <pc-icon
-                                      library="system"
-                                      icon-style="solid"
-                                      name="minus"
-                                      part="icon-indeterminate"
-                                  ></pc-icon>
-                              `
-                            : ""}
-                    </span>
-
-                    <div class="label" part="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>
-        `;
-    }
-}