@f-ewald/components 1.12.0 → 1.13.0

package/dist/scroll-to-bottom.js

@@ -0,0 +1,189 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { iconChevronDown } from "./icons.js";
+import { distanceFromBottom, scrollToEdge } from "./utils/scroll.js";
+import { tokens } from "./tokens.js";
+/**
+ * Overlay button that appears once the page (or a given `target` container)
+ * has scrolled more than `threshold` pixels away from the bottom edge, and
+ * scrolls back to the bottom on click.
+ *
+ * With no `target` (default), the button is `position: fixed` to the
+ * viewport. When `target` is set, the button switches to `position:
+ * absolute` and expects to be placed as a descendant of a `position:
+ * relative` (or otherwise positioned) ancestor that establishes the visual
+ * bounds to float within — typically `target` itself, given `overflow-y:
+ * auto; position: relative`, so the button stays pinned to that container's
+ * own visible corner as its content scrolls, rather than floating over the
+ * whole page.
+ *
+ * @element scroll-to-bottom
+ * @fires scroll-to-bottom-triggered - The button was clicked, just before
+ *   scrolling; detail: `{ target }`.
+ */
+let ScrollToBottom = class ScrollToBottom extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Scrollable container to control; `null` (default) scrolls `window`. */
+        this.target = null;
+        /** Pixels scrolled away from the bottom before the button appears. */
+        this.threshold = 200;
+        /** Visible button text, and its accessible name. */
+        this.label = "Scroll to bottom";
+        this._visible = false;
+        this.#listenedTo = null;
+        this.#onScroll = () => {
+            this._visible = distanceFromBottom(this.target ?? window) > this.threshold;
+        };
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        position: fixed;
+        bottom: 0.75rem;
+        right: 0.75rem;
+        z-index: 40;
+        pointer-events: none;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 150ms ease,
+          visibility 0s linear 150ms;
+      }
+      :host([contained]) {
+        position: absolute;
+      }
+      :host([visible]) {
+        opacity: 1;
+        visibility: visible;
+        transition:
+          opacity 150ms ease,
+          visibility 0s linear 0s;
+      }
+      button {
+        pointer-events: auto;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        height: 2rem;
+        box-sizing: border-box;
+        padding: 0 0.75rem;
+        color: var(--ui-text, #0f172a);
+        background: var(--ui-surface, #ffffff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: 999px;
+        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+        cursor: pointer;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: var(--ui-font-weight-medium, 500);
+        line-height: var(--ui-line-height-tight, 1.25);
+        white-space: nowrap;
+      }
+      button:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      button:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          transition: none;
+        }
+        :host([visible]) {
+          transition: none;
+        }
+      }
+      @media (forced-colors: active) {
+        button:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+    `,
+    ]; }
+    #listenedTo;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#subscribe();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#unsubscribe();
+    }
+    willUpdate(changed) {
+        if (changed.has("target")) {
+            this.toggleAttribute("contained", this.target !== null);
+            // Resubscribing here (not in `updated()`) lets `#onScroll()`'s
+            // `_visible` write fold into the update already in progress instead of
+            // scheduling a new one. Guarded against the initial update, where
+            // `target` is always in `changed` too, but `connectedCallback` already
+            // subscribed to it.
+            if (this.#listenedTo !== (this.target ?? window))
+                this.#subscribe();
+        }
+    }
+    updated(changed) {
+        if (changed.has("_visible"))
+            this.toggleAttribute("visible", this._visible);
+    }
+    #subscribe() {
+        this.#unsubscribe();
+        this.#listenedTo = this.target ?? window;
+        this.#listenedTo.addEventListener("scroll", this.#onScroll, { passive: true });
+        this.#onScroll();
+    }
+    #unsubscribe() {
+        this.#listenedTo?.removeEventListener("scroll", this.#onScroll);
+        this.#listenedTo = null;
+    }
+    #onScroll;
+    #onClick() {
+        const target = this.target ?? window;
+        this.dispatchEvent(new CustomEvent("scroll-to-bottom-triggered", { detail: { target }, bubbles: true, composed: true }));
+        scrollToEdge(target, "bottom");
+    }
+    render() {
+        return html `
+      <button type="button" @click=${() => this.#onClick()}>
+        ${iconChevronDown(14)}
+        <span>${this.label}</span>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], ScrollToBottom.prototype, "target", void 0);
+__decorate([
+    property({ type: Number })
+], ScrollToBottom.prototype, "threshold", void 0);
+__decorate([
+    property()
+], ScrollToBottom.prototype, "label", void 0);
+__decorate([
+    state()
+], ScrollToBottom.prototype, "_visible", void 0);
+ScrollToBottom = __decorate([
+    customElement("scroll-to-bottom")
+], ScrollToBottom);
+export { ScrollToBottom };
+//# sourceMappingURL=scroll-to-bottom.js.map

package/dist/scroll-to-bottom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-to-bottom.js","sourceRoot":"","sources":["../src/scroll-to-bottom.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconChevronDown } from \"./icons.js\";\nimport { distanceFromBottom, scrollToEdge } from \"./utils/scroll.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Overlay button that appears once the page (or a given `target` container)\n * has scrolled more than `threshold` pixels away from the bottom edge, and\n * scrolls back to the bottom on click.\n *\n * With no `target` (default), the button is `position: fixed` to the\n * viewport. When `target` is set, the button switches to `position:\n * absolute` and expects to be placed as a descendant of a `position:\n * relative` (or otherwise positioned) ancestor that establishes the visual\n * bounds to float within — typically `target` itself, given `overflow-y:\n * auto; position: relative`, so the button stays pinned to that container's\n * own visible corner as its content scrolls, rather than floating over the\n * whole page.\n *\n * @element scroll-to-bottom\n * @fires scroll-to-bottom-triggered - The button was clicked, just before\n *   scrolling; detail: `{ target }`.\n */\n@customElement(\"scroll-to-bottom\")\nexport class ScrollToBottom extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        position: fixed;\n        bottom: 0.75rem;\n        right: 0.75rem;\n        z-index: 40;\n        pointer-events: none;\n        opacity: 0;\n        visibility: hidden;\n        transition:\n          opacity 150ms ease,\n          visibility 0s linear 150ms;\n      }\n      :host([contained]) {\n        position: absolute;\n      }\n      :host([visible]) {\n        opacity: 1;\n        visibility: visible;\n        transition:\n          opacity 150ms ease,\n          visibility 0s linear 0s;\n      }\n      button {\n        pointer-events: auto;\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        height: 2rem;\n        box-sizing: border-box;\n        padding: 0 0.75rem;\n        color: var(--ui-text, #0f172a);\n        background: var(--ui-surface, #ffffff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: 999px;\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n        cursor: pointer;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-medium, 500);\n        line-height: var(--ui-line-height-tight, 1.25);\n        white-space: nowrap;\n      }\n      button:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (prefers-reduced-motion: reduce) {\n        :host {\n          transition: none;\n        }\n        :host([visible]) {\n          transition: none;\n        }\n      }\n      @media (forced-colors: active) {\n        button:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Scrollable container to control; `null` (default) scrolls `window`. */\n  @property({ attribute: false }) target: HTMLElement | null = null;\n  /** Pixels scrolled away from the bottom before the button appears. */\n  @property({ type: Number }) threshold = 200;\n  /** Visible button text, and its accessible name. */\n  @property() label = \"Scroll to bottom\";\n\n  @state() private _visible = false;\n\n  #listenedTo: HTMLElement | Window | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#subscribe();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unsubscribe();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    if (changed.has(\"target\")) {\n      this.toggleAttribute(\"contained\", this.target !== null);\n      // Resubscribing here (not in `updated()`) lets `#onScroll()`'s\n      // `_visible` write fold into the update already in progress instead of\n      // scheduling a new one. Guarded against the initial update, where\n      // `target` is always in `changed` too, but `connectedCallback` already\n      // subscribed to it.\n      if (this.#listenedTo !== (this.target ?? window)) this.#subscribe();\n    }\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"_visible\")) this.toggleAttribute(\"visible\", this._visible);\n  }\n\n  #subscribe(): void {\n    this.#unsubscribe();\n    this.#listenedTo = this.target ?? window;\n    this.#listenedTo.addEventListener(\"scroll\", this.#onScroll, { passive: true });\n    this.#onScroll();\n  }\n\n  #unsubscribe(): void {\n    this.#listenedTo?.removeEventListener(\"scroll\", this.#onScroll);\n    this.#listenedTo = null;\n  }\n\n  #onScroll = (): void => {\n    this._visible = distanceFromBottom(this.target ?? window) > this.threshold;\n  };\n\n  #onClick(): void {\n    const target = this.target ?? window;\n    this.dispatchEvent(\n      new CustomEvent(\"scroll-to-bottom-triggered\", { detail: { target }, bubbles: true, composed: true }),\n    );\n    scrollToEdge(target, \"bottom\");\n  }\n\n  override render() {\n    return html`\n      <button type=\"button\" @click=${() => this.#onClick()}>\n        ${iconChevronDown(14)}\n        <span>${this.label}</span>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"scroll-to-bottom\": ScrollToBottom;\n  }\n}\n"]}

package/dist/scroll-to-top.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, type PropertyValues } from "lit";
+/**
+ * Overlay button that appears once the page (or a given `target` container)
+ * has scrolled more than `threshold` pixels away from the top edge, and
+ * scrolls back to the top on click.
+ *
+ * With no `target` (default), the button is `position: fixed` to the
+ * viewport. When `target` is set, the button switches to `position:
+ * absolute` and expects to be placed as a descendant of a `position:
+ * relative` (or otherwise positioned) ancestor that establishes the visual
+ * bounds to float within — typically `target` itself, given `overflow-y:
+ * auto; position: relative`, so the button stays pinned to that container's
+ * own visible corner as its content scrolls, rather than floating over the
+ * whole page.
+ *
+ * @element scroll-to-top
+ * @fires scroll-to-top-triggered - The button was clicked, just before
+ *   scrolling; detail: `{ target }`.
+ */
+export declare class ScrollToTop extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Scrollable container to control; `null` (default) scrolls `window`. */
+    target: HTMLElement | null;
+    /** Pixels scrolled away from the top before the button appears. */
+    threshold: number;
+    /** Visible button text, and its accessible name. */
+    label: string;
+    private _visible;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "scroll-to-top": ScrollToTop;
+    }
+}
+//# sourceMappingURL=scroll-to-top.d.ts.map

package/dist/scroll-to-top.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-to-top.d.ts","sourceRoot":"","sources":["../src/scroll-to-top.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BA6EpB;IAEF,0EAA0E;IAC1C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAQ;IAClE,mEAAmE;IACvC,SAAS,SAAO;IAC5C,oDAAoD;IACxC,KAAK,SAAmB;IAE3B,OAAO,CAAC,QAAQ,CAAS;IAIzB,iBAAiB,IAAI,IAAI,CAGjC;IAEQ,oBAAoB,IAAI,IAAI,CAGpC;IAED,UAAmB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAU3D;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAExD;IA0BQ,MAAM,yCAOd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/scroll-to-top.js

@@ -0,0 +1,189 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { iconChevronUp } from "./icons.js";
+import { distanceFromTop, scrollToEdge } from "./utils/scroll.js";
+import { tokens } from "./tokens.js";
+/**
+ * Overlay button that appears once the page (or a given `target` container)
+ * has scrolled more than `threshold` pixels away from the top edge, and
+ * scrolls back to the top on click.
+ *
+ * With no `target` (default), the button is `position: fixed` to the
+ * viewport. When `target` is set, the button switches to `position:
+ * absolute` and expects to be placed as a descendant of a `position:
+ * relative` (or otherwise positioned) ancestor that establishes the visual
+ * bounds to float within — typically `target` itself, given `overflow-y:
+ * auto; position: relative`, so the button stays pinned to that container's
+ * own visible corner as its content scrolls, rather than floating over the
+ * whole page.
+ *
+ * @element scroll-to-top
+ * @fires scroll-to-top-triggered - The button was clicked, just before
+ *   scrolling; detail: `{ target }`.
+ */
+let ScrollToTop = class ScrollToTop extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Scrollable container to control; `null` (default) scrolls `window`. */
+        this.target = null;
+        /** Pixels scrolled away from the top before the button appears. */
+        this.threshold = 200;
+        /** Visible button text, and its accessible name. */
+        this.label = "Scroll to top";
+        this._visible = false;
+        this.#listenedTo = null;
+        this.#onScroll = () => {
+            this._visible = distanceFromTop(this.target ?? window) > this.threshold;
+        };
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        position: fixed;
+        bottom: 0.75rem;
+        right: 0.75rem;
+        z-index: 40;
+        pointer-events: none;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 150ms ease,
+          visibility 0s linear 150ms;
+      }
+      :host([contained]) {
+        position: absolute;
+      }
+      :host([visible]) {
+        opacity: 1;
+        visibility: visible;
+        transition:
+          opacity 150ms ease,
+          visibility 0s linear 0s;
+      }
+      button {
+        pointer-events: auto;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        height: 2rem;
+        box-sizing: border-box;
+        padding: 0 0.75rem;
+        color: var(--ui-text, #0f172a);
+        background: var(--ui-surface, #ffffff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: 999px;
+        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+        cursor: pointer;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        font-weight: var(--ui-font-weight-medium, 500);
+        line-height: var(--ui-line-height-tight, 1.25);
+        white-space: nowrap;
+      }
+      button:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      button:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          transition: none;
+        }
+        :host([visible]) {
+          transition: none;
+        }
+      }
+      @media (forced-colors: active) {
+        button:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+    `,
+    ]; }
+    #listenedTo;
+    connectedCallback() {
+        super.connectedCallback();
+        this.#subscribe();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#unsubscribe();
+    }
+    willUpdate(changed) {
+        if (changed.has("target")) {
+            this.toggleAttribute("contained", this.target !== null);
+            // Resubscribing here (not in `updated()`) lets `#onScroll()`'s
+            // `_visible` write fold into the update already in progress instead of
+            // scheduling a new one. Guarded against the initial update, where
+            // `target` is always in `changed` too, but `connectedCallback` already
+            // subscribed to it.
+            if (this.#listenedTo !== (this.target ?? window))
+                this.#subscribe();
+        }
+    }
+    updated(changed) {
+        if (changed.has("_visible"))
+            this.toggleAttribute("visible", this._visible);
+    }
+    #subscribe() {
+        this.#unsubscribe();
+        this.#listenedTo = this.target ?? window;
+        this.#listenedTo.addEventListener("scroll", this.#onScroll, { passive: true });
+        this.#onScroll();
+    }
+    #unsubscribe() {
+        this.#listenedTo?.removeEventListener("scroll", this.#onScroll);
+        this.#listenedTo = null;
+    }
+    #onScroll;
+    #onClick() {
+        const target = this.target ?? window;
+        this.dispatchEvent(new CustomEvent("scroll-to-top-triggered", { detail: { target }, bubbles: true, composed: true }));
+        scrollToEdge(target, "top");
+    }
+    render() {
+        return html `
+      <button type="button" @click=${() => this.#onClick()}>
+        ${iconChevronUp(14)}
+        <span>${this.label}</span>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], ScrollToTop.prototype, "target", void 0);
+__decorate([
+    property({ type: Number })
+], ScrollToTop.prototype, "threshold", void 0);
+__decorate([
+    property()
+], ScrollToTop.prototype, "label", void 0);
+__decorate([
+    state()
+], ScrollToTop.prototype, "_visible", void 0);
+ScrollToTop = __decorate([
+    customElement("scroll-to-top")
+], ScrollToTop);
+export { ScrollToTop };
+//# sourceMappingURL=scroll-to-top.js.map

package/dist/scroll-to-top.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-to-top.js","sourceRoot":"","sources":["../src/scroll-to-top.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconChevronUp } from \"./icons.js\";\nimport { distanceFromTop, scrollToEdge } from \"./utils/scroll.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Overlay button that appears once the page (or a given `target` container)\n * has scrolled more than `threshold` pixels away from the top edge, and\n * scrolls back to the top on click.\n *\n * With no `target` (default), the button is `position: fixed` to the\n * viewport. When `target` is set, the button switches to `position:\n * absolute` and expects to be placed as a descendant of a `position:\n * relative` (or otherwise positioned) ancestor that establishes the visual\n * bounds to float within — typically `target` itself, given `overflow-y:\n * auto; position: relative`, so the button stays pinned to that container's\n * own visible corner as its content scrolls, rather than floating over the\n * whole page.\n *\n * @element scroll-to-top\n * @fires scroll-to-top-triggered - The button was clicked, just before\n *   scrolling; detail: `{ target }`.\n */\n@customElement(\"scroll-to-top\")\nexport class ScrollToTop extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        position: fixed;\n        bottom: 0.75rem;\n        right: 0.75rem;\n        z-index: 40;\n        pointer-events: none;\n        opacity: 0;\n        visibility: hidden;\n        transition:\n          opacity 150ms ease,\n          visibility 0s linear 150ms;\n      }\n      :host([contained]) {\n        position: absolute;\n      }\n      :host([visible]) {\n        opacity: 1;\n        visibility: visible;\n        transition:\n          opacity 150ms ease,\n          visibility 0s linear 0s;\n      }\n      button {\n        pointer-events: auto;\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n        height: 2rem;\n        box-sizing: border-box;\n        padding: 0 0.75rem;\n        color: var(--ui-text, #0f172a);\n        background: var(--ui-surface, #ffffff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: 999px;\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n        cursor: pointer;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-medium, 500);\n        line-height: var(--ui-line-height-tight, 1.25);\n        white-space: nowrap;\n      }\n      button:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (prefers-reduced-motion: reduce) {\n        :host {\n          transition: none;\n        }\n        :host([visible]) {\n          transition: none;\n        }\n      }\n      @media (forced-colors: active) {\n        button:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Scrollable container to control; `null` (default) scrolls `window`. */\n  @property({ attribute: false }) target: HTMLElement | null = null;\n  /** Pixels scrolled away from the top before the button appears. */\n  @property({ type: Number }) threshold = 200;\n  /** Visible button text, and its accessible name. */\n  @property() label = \"Scroll to top\";\n\n  @state() private _visible = false;\n\n  #listenedTo: HTMLElement | Window | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#subscribe();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unsubscribe();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    if (changed.has(\"target\")) {\n      this.toggleAttribute(\"contained\", this.target !== null);\n      // Resubscribing here (not in `updated()`) lets `#onScroll()`'s\n      // `_visible` write fold into the update already in progress instead of\n      // scheduling a new one. Guarded against the initial update, where\n      // `target` is always in `changed` too, but `connectedCallback` already\n      // subscribed to it.\n      if (this.#listenedTo !== (this.target ?? window)) this.#subscribe();\n    }\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (changed.has(\"_visible\")) this.toggleAttribute(\"visible\", this._visible);\n  }\n\n  #subscribe(): void {\n    this.#unsubscribe();\n    this.#listenedTo = this.target ?? window;\n    this.#listenedTo.addEventListener(\"scroll\", this.#onScroll, { passive: true });\n    this.#onScroll();\n  }\n\n  #unsubscribe(): void {\n    this.#listenedTo?.removeEventListener(\"scroll\", this.#onScroll);\n    this.#listenedTo = null;\n  }\n\n  #onScroll = (): void => {\n    this._visible = distanceFromTop(this.target ?? window) > this.threshold;\n  };\n\n  #onClick(): void {\n    const target = this.target ?? window;\n    this.dispatchEvent(\n      new CustomEvent(\"scroll-to-top-triggered\", { detail: { target }, bubbles: true, composed: true }),\n    );\n    scrollToEdge(target, \"top\");\n  }\n\n  override render() {\n    return html`\n      <button type=\"button\" @click=${() => this.#onClick()}>\n        ${iconChevronUp(14)}\n        <span>${this.label}</span>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"scroll-to-top\": ScrollToTop;\n  }\n}\n"]}

package/dist/ui-checkbox.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, type PropertyValues } from "lit";
+/**
+ * A form-associated boolean checkbox, usable standalone or inside a native
+ * `<form>`. Submits `name=on` when checked (matching native
+ * `<input type="checkbox">` semantics) and participates fully in form
+ * `reset()`, ancestor `<fieldset disabled>`, and `required` validity.
+ *
+ * Renders a native `<input type="checkbox">` wrapped in a `<label>`, styled
+ * via `:has()` on the wrapping label (matching `radio-pills`/`radio-cards`)
+ * rather than styling the native input directly; the checkbox itself renders
+ * at `1rem`, matching the existing radio-input convention.
+ *
+ * @element ui-checkbox
+ * @fires change - The checkbox was toggled by the user, in either direction;
+ *   detail: `{ checked }`. Programmatic `checked` assignments do not fire it.
+ */
+export declare class UiCheckbox extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** Whether the box is checked. */
+    checked: boolean;
+    /** Visual "partial selection" state; cleared on the next user interaction. */
+    indeterminate: boolean;
+    /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */
+    disabled: boolean;
+    /** Marks the control invalid via `ElementInternals` while unchecked. */
+    required: boolean;
+    /** Form field name; submitted as `name=on` only while checked. */
+    name: string;
+    /** Visible label text rendered next to the box. */
+    label: string;
+    private _formDisabled;
+    protected willUpdate(_changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Restores the checked state captured at first render, per the form contract. */
+    formResetCallback(): void;
+    /** Mirrors an ancestor fieldset's disabled state. */
+    formDisabledCallback(disabled: boolean): void;
+    /** Restores the checked state from saved form state (bfcache/autofill). */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ui-checkbox": UiCheckbox;
+    }
+}
+//# sourceMappingURL=ui-checkbox.d.ts.map

package/dist/ui-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-checkbox.d.ts","sourceRoot":"","sources":["../src/ui-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAKjE;;;;;;;;;;;;;;GAcG;AACH,qBACa,UAAW,SAAQ,UAAU;;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAkEpB;IAEF,kCAAkC;IACL,OAAO,UAAS;IAC7C,8EAA8E;IACjD,aAAa,UAAS;IACnD,2EAA2E;IAC9C,QAAQ,UAAS;IAC9C,wEAAwE;IAC3C,QAAQ,UAAS;IAC9C,kEAAkE;IACtD,IAAI,SAAM;IACtB,mDAAmD;IACvC,KAAK,SAAM;IAEd,OAAO,CAAC,aAAa,CAAS;IAWvC,UAAmB,UAAU,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAE5D;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQxD;IAED,kFAAkF;IAClF,iBAAiB,IAAI,IAAI,CAGxB;IAED,qDAAqD;IACrD,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAE5C;IAED,2EAA2E;IAC3E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,CAGrE;IAwCQ,MAAM,yCAoBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}