placer-toolkit 0.5.1

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

@@ -0,0 +1,217 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        --indicator-color: var(--pc-color-primary-500);
+        --track-width: 4px;
+        display: block;
+    }
+
+    .tab-group {
+        display: flex;
+        border-radius: 0;
+    }
+
+    .tab-group-tabs {
+        display: flex;
+        position: relative;
+    }
+
+    .tab-group-indicator {
+        position: absolute;
+        transition: all var(--pc-transition-medium) ease-in-out;
+    }
+
+    .tab-group-has-scroll-controls .tab-group-navigation-container {
+        position: relative;
+        padding: 0 var(--pc-spacing-xxxl);
+    }
+
+    .tab-group-has-scroll-controls .tab-group-scroll-button-start-hidden,
+    .tab-group-has-scroll-controls .tab-group-scroll-button-end-hidden {
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+    }
+
+    .tab-group-navigation-container,
+    .tab-group-navigation {
+        outline: none;
+    }
+
+    .tab-group-body {
+        display: block;
+        overflow: auto;
+    }
+
+    .tab-group-scroll-button {
+        display: flex;
+        position: absolute;
+        align-items: center;
+        justify-content: center;
+        top: 0;
+        bottom: 0;
+        width: var(--pc-spacing-xxxl);
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+        transition: opacity var(--pc-transition-fast) ease-in-out,
+            visibility 0s ease-in-out var(--pc-transition-fast);
+    }
+
+    .tab-group-scroll-button-start {
+        left: 0;
+    }
+
+    .tab-group-scroll-button-end {
+        right: 0;
+    }
+
+    .tab-group-rtl .tab-group-scroll-button-start {
+        left: auto;
+        right: 0;
+    }
+
+    .tab-group-rtl .tab-group-scroll-button-end {
+        left: 0;
+        right: auto;
+    }
+
+    .tab-group-top {
+        flex-direction: column;
+    }
+
+    .tab-group-top .tab-group-navigation-container {
+        order: 1;
+    }
+
+    .tab-group-top .tab-group-navigation {
+        display: flex;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+
+    .tab-group-top .tab-group-navigation::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+
+    .tab-group-top .tab-group-tabs {
+        position: relative;
+        flex-direction: row;
+        flex: 1 1 auto;
+    }
+
+    .tab-group-top .tab-group-indicator {
+        bottom: 0;
+        min-height: var(--track-width);
+        background-color: var(--indicator-color);
+        border-radius: var(--pc-border-radius-pill);
+    }
+
+    .tab-group-top .tab-group-body {
+        order: 2;
+    }
+
+    .tab-group-top ::slotted(pc-tab-panel) {
+        padding: var(--pc-spacing-m) 0;
+    }
+
+    .tab-group-bottom {
+        flex-direction: column;
+    }
+
+    .tab-group-bottom .tab-group-navigation-container {
+        order: 2;
+    }
+
+    .tab-group-bottom .tab-group-navigation {
+        display: flex;
+        overflow-x: auto;
+        scrollbar-width: none;
+    }
+
+    .tab-group-bottom .tab-group-tabs {
+        position: relative;
+        flex-direction: row;
+        flex: 1 1 auto;
+    }
+
+    .tab-group-bottom .tab-group-indicator {
+        top: 0;
+        min-height: var(--track-width);
+        background-color: var(--indicator-color);
+        border-radius: var(--pc-border-radius-pill);
+    }
+
+    .tab-group-bottom .tab-group-body {
+        order: 1;
+    }
+
+    .tab-group-bottom ::slotted(pc-tab-panel) {
+        padding: var(--pc-spacing-m) 0;
+    }
+
+    .tab-group-start {
+        flex-direction: row;
+    }
+
+    .tab-group-start .tab-group-navigation-container {
+        order: 1;
+    }
+
+    .tab-group-start .tab-group-tabs {
+        flex-direction: column;
+        flex: 0 0 auto;
+    }
+
+    .tab-group-start .tab-group-indicator {
+        right: 0;
+        min-width: var(--track-width);
+        background-color: var(--indicator-color);
+        border-radius: var(--pc-border-radius-pill);
+    }
+
+    .tab-group-start .tab-group-body {
+        flex: 1 1 auto;
+        order: 2;
+    }
+
+    .tab-group-start ::slotted(pc-tab-panel) {
+        padding: 0 var(--pc-spacing-m);
+    }
+
+    .tab-group-end {
+        flex-direction: row;
+    }
+
+    .tab-group-end .tab-group-navigation-container {
+        order: 2;
+    }
+
+    .tab-group-end .tab-group-tabs {
+        flex-direction: column;
+        flex: 0 0 auto;
+    }
+
+    .tab-group-end .tab-group-indicator {
+        left: 0;
+        min-width: var(--track-width);
+        background-color: var(--indicator-color);
+        border-radius: var(--pc-border-radius-pill);
+    }
+
+    .tab-group-end.tab-group-rtl .tab-group-indicator {
+        right: 0;
+        left: auto;
+    }
+
+    .tab-group-end .tab-group-body {
+        flex: 1 1 auto;
+        order: 1;
+    }
+
+    .tab-group-end ::slotted(pc-tab-panel) {
+        padding: 0 var(--pc-spacing-m);
+    }
+`;

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

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

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

@@ -0,0 +1,43 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { watch } from "../../internal/watch.js";
+import { styles } from "./tab-panel.styles.js";
+
+let id = 0;
+
+@customElement("pc-tab-panel")
+export class PcTabPanel extends LitElement {
+    static styles: CSSResultGroup = styles;
+
+    private readonly attributeID = ++id;
+    private readonly componentID = `pc-tab-panel-${this.attributeID}`;
+
+    @property({ type: Boolean, reflect: true }) active = false;
+
+    @property({ reflect: true }) name = "";
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.id = this.id.length > 0 ? this.id : this.componentID;
+        this.setAttribute("role", "tabpanel");
+    }
+
+    @watch("active")
+    handleActiveChange() {
+        this.setAttribute("aria-hidden", this.active ? "false" : "true");
+    }
+
+    render() {
+        return html`
+            <slot
+                part="base"
+                class=${classMap({
+                    "tab-panel": true,
+                    "tab-panel-active": this.active === true,
+                })}
+            ></slot>
+        `;
+    }
+}

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

@@ -0,0 +1,16 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: none;
+    }
+
+    :host([active]) {
+        display: block;
+    }
+
+    .tab-panel {
+        display: block;
+        padding: 0;
+    }
+`;

package/src/components/tab-panel/tab-panel.ts

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

package/src/components/tag/tag.component.ts

@@ -0,0 +1,94 @@
+import { LitElement, html } from "lit";
+import type { CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { emit } from "../../internal/emit.js";
+import { PcIconButton } from "../icon-button/icon-button.js";
+import { styles } from "./tag.styles.js";
+
+/**
+ * @summary Tags are used as labels to organise things or to indicate a selection.
+ * @status experimental
+ * @since 0.5.1
+ *
+ * @dependency pc-icon-button
+ *
+ * @slot — The tag’s content.
+ *
+ * @event pc-remove — Emitted when the remove button is pressed.
+ *
+ * @csspart base — The tag’s base wrapper.
+ * @csspart content — The tag’s content.
+ * @csspart remove-button — The tag’s remove button, a `<pc-icon-button>`.
+ * @csspart remove-button__base — The remove button’s base part.
+ */
+@customElement("pc-tag")
+export class PcTag extends LitElement {
+    static styles: CSSResultGroup = styles;
+    /** @internal This is an internal property. */
+    static dependencies = { "pc-icon-button": PcIconButton };
+
+    /** The tag’s appearance. */
+    @property({ reflect: true }) appearance:
+        | "primary"
+        | "success"
+        | "neutral"
+        | "warning"
+        | "danger" = "neutral";
+
+    /** The tag’s size. */
+    @property({ reflect: true }) size: "small" | "medium" | "large" = "medium";
+
+    /** Draws an outlined tag. */
+    @property({ type: Boolean, reflect: true }) outlined = false;
+
+    /** Draws a pill‐style tag. */
+    @property({ type: Boolean, reflect: true }) pill = false;
+
+    /** Adds a remove button to the tag. */
+    @property({ type: Boolean }) removable = false;
+
+    private handleRemoveClick() {
+        emit(this, "pc-remove");
+    }
+
+    render() {
+        return html`
+            <span
+                part="base"
+                class=${classMap({
+                    "tag": true,
+                    "tag-primary": this.appearance === "primary",
+                    "tag-success": this.appearance === "success",
+                    "tag-neutral": this.appearance === "neutral",
+                    "tag-warning": this.appearance === "warning",
+                    "tag-danger": this.appearance === "danger",
+                    "tag-small": this.size === "small",
+                    "tag-medium": this.size === "medium",
+                    "tag-large": this.size === "large",
+                    "tag-outlined": this.outlined === true,
+                    "tag-pill": this.pill === true,
+                    "tag-removable": this.removable === true,
+                })}
+            >
+                <slot class="tag-content" part="content"></slot>
+
+                ${this.removable
+                    ? html`
+                          <pc-icon-button
+                              class="remove-tag-button"
+                              part="remove-button"
+                              library="system"
+                              icon-style="solid"
+                              name="xmark"
+                              label="Remove tag"
+                              tabindex="-1"
+                              @click=${this.handleRemoveClick}
+                              exportparts="base:remove-button__base"
+                          ></pc-icon-button>
+                      `
+                    : ""}
+            </span>
+        `;
+    }
+}

package/src/components/tag/tag.styles.ts

@@ -0,0 +1,153 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: inline-block;
+    }
+
+    .tag {
+        display: flex;
+        align-items: center;
+        line-height: var(--pc-line-height-denser);
+        white-space: nowrap;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    .remove-tag-button::part(base) {
+        background-color: transparent;
+        padding: 0;
+    }
+
+    .tag-primary {
+        background-color: var(--pc-color-primary-50);
+        border: 1px solid var(--pc-color-primary-200);
+        color: var(--pc-color-primary-700);
+    }
+
+    .tag-primary > pc-icon-button::part(base) {
+        color: var(--pc-color-primary-500);
+    }
+
+    .tag-primary > pc-icon-button:hover::part(base) {
+        color: var(--pc-color-primary-600);
+    }
+
+    .tag-primary > pc-icon-button:active::part(base) {
+        color: var(--pc-color-primary-400);
+    }
+
+    .tag-success {
+        background-color: var(--pc-color-success-50);
+        border: 1px solid var(--pc-color-success-200);
+        color: var(--pc-color-success-700);
+    }
+
+    .tag-success > pc-icon-button::part(base) {
+        color: var(--pc-color-success-500);
+    }
+
+    .tag-success > pc-icon-button:hover::part(base) {
+        color: var(--pc-color-success-600);
+    }
+
+    .tag-success > pc-icon-button:active::part(base) {
+        color: var(--pc-color-success-400);
+    }
+
+    .tag-neutral {
+        background-color: var(--pc-color-neutral-50);
+        border: 1px solid var(--pc-color-neutral-200);
+        color: var(--pc-color-neutral-700);
+    }
+
+    .tag-neutral > pc-icon-button::part(base) {
+        color: var(--pc-color-neutral-500);
+    }
+
+    .tag-neutral > pc-icon-button:hover::part(base) {
+        color: var(--pc-color-neutral-600);
+    }
+
+    .tag-neutral > pc-icon-button:active::part(base) {
+        color: var(--pc-color-neutral-400);
+    }
+
+    .tag-warning {
+        background-color: var(--pc-color-warning-50);
+        border: 1px solid var(--pc-color-warning-200);
+        color: var(--pc-color-warning-700);
+    }
+
+    .tag-warning > pc-icon-button::part(base) {
+        color: var(--pc-color-warning-500);
+    }
+
+    .tag-warning > pc-icon-button:hover::part(base) {
+        color: var(--pc-color-warning-600);
+    }
+
+    .tag-warning > pc-icon-button:active::part(base) {
+        color: var(--pc-color-warning-400);
+    }
+
+    .tag-danger {
+        background-color: var(--pc-color-danger-50);
+        border: 1px solid var(--pc-color-danger-200);
+        color: var(--pc-color-danger-700);
+    }
+
+    .tag-danger > pc-icon-button::part(base) {
+        color: var(--pc-color-danger-500);
+    }
+
+    .tag-danger > pc-icon-button:hover::part(base) {
+        color: var(--pc-color-danger-600);
+    }
+
+    .tag-danger > pc-icon-button:active::part(base) {
+        color: var(--pc-color-danger-400);
+    }
+
+    .tag-small {
+        font-size: var(--pc-button-font-size-s);
+        height: calc(var(--pc-input-height-s) * 0.8);
+        line-height: calc(
+            var(--pc-input-height-s) - var(--pc-input-border-width) * 2
+        );
+        border-radius: var(--pc-border-radius-s);
+        padding: 0 var(--pc-spacing-s);
+    }
+
+    .tag-medium {
+        font-size: var(--pc-button-font-size-m);
+        height: calc(var(--pc-input-height-m) * 0.8);
+        line-height: calc(
+            var(--pc-input-height-m) - var(--pc-input-border-width) * 2
+        );
+        border-radius: var(--pc-border-radius-m);
+        padding: 0 var(--pc-spacing-m);
+    }
+
+    .tag-large {
+        font-size: var(--pc-button-font-size-l);
+        height: calc(var(--pc-input-height-l) * 0.8);
+        line-height: calc(
+            var(--pc-input-height-l) - var(--pc-input-border-width) * 2
+        );
+        border-radius: var(--pc-border-radius-l);
+        padding: 0 var(--pc-spacing-l);
+    }
+
+    .remove-tag-button {
+        margin-inline-start: var(--pc-spacing-s);
+    }
+
+    .tag-outlined {
+        background-color: transparent;
+    }
+
+    .tag-pill {
+        border-radius: var(--pc-border-radius-pill);
+    }
+`;

package/src/components/tag/tag.ts

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