@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/tt-toolbar.js

@@ -0,0 +1,164 @@
+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, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+/**
+ * The row above a list: something to filter with on the left, actions on
+ * the right, and a gap between them that collapses when the row wraps.
+ *
+ * This is the third copy of the same flex row in this repo, which is the
+ * point at which a pattern earns a component. Directory, Members and Shop
+ * each had their own, and each had drifted: different gaps, different
+ * wrap behaviour, and a hand-rolled spacer div in two of them.
+ *
+ * Pure layout. It has no idea what is in it, so a search box, a segmented
+ * control or a count all work without it knowing.
+ */
+let TTToolbar = class TTToolbar extends LitElement {
+    constructor() {
+        super(...arguments);
+        // A rule underneath, when the toolbar sits directly on top of content
+        // rather than above a card that already has its own edge.
+        this.bordered = false;
+        // Stacks into two full-width rows instead of wrapping inline. Use when
+        // the start side is a search field that should stay full width on a
+        // phone rather than shrinking to a stub.
+        this.stack = false;
+        // Vertical alignment of the two sides. "center" is right for controls;
+        // "start" is right when one side is a block of filters that is much
+        // taller than the other.
+        this.align = "center";
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+      font-family: var(--tt-font-sans);
+    }
+
+    :host([bordered]) .bar {
+      padding-bottom: var(--tt-space-4);
+      border-bottom: 1px solid var(--tt-border);
+    }
+
+    .bar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+
+      /* Two values: a small gap between rows once it wraps, a larger one
+         between the two sides while it has not. */
+      gap: var(--tt-space-3) var(--tt-space-4);
+    }
+
+    :host([align="start"]) .bar {
+      align-items: flex-start;
+    }
+
+    /*
+      Each side is its own flex row so callers can drop several controls
+      into a slot without wrapping them in a div first.
+
+      min-width: 0 on both. Flex items refuse to shrink below their
+      content by default, so a long search field or a wide button group
+      would push the row wider than the page instead of wrapping.
+    */
+    .side {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--tt-space-3);
+
+      min-width: 0;
+    }
+
+    /*
+      The start side takes the leftover space, which is what pushes the
+      end side to the right edge. No spacer element needed: a spacer div
+      is the thing three pages were each reinventing.
+    */
+    .start {
+      flex: 1;
+    }
+
+    .end {
+      flex: 0 0 auto;
+      justify-content: flex-end;
+    }
+
+    /* Hidden when nothing is slotted, so an empty side draws no gap. */
+    .side:not(:has(*)) {
+      display: none;
+    }
+
+    :host([stack]) .bar {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    :host([stack]) .end {
+      justify-content: flex-start;
+    }
+
+    @media (max-width: 640px) {
+      .bar {
+        gap: var(--tt-space-2) var(--tt-space-3);
+      }
+
+      /* Below this width there is no room for two sides side by side, so
+         the end row moves under the start row rather than squeezing it. */
+      .start {
+        flex: 1 1 100%;
+      }
+
+      .end {
+        flex: 1 1 100%;
+        justify-content: flex-start;
+      }
+    }
+  `; }
+    render() {
+        return html `
+      <!--
+        No role="toolbar". That role is a promise: ONE Tab stop, arrow
+        keys between the controls inside. This is pure layout around a
+        search field and some buttons, which Tab through normally and
+        must, since arrows inside a text field move the caret. A screen
+        reader announced "toolbar" and its users pressed arrows for
+        nothing.
+      -->
+      <div class="bar" part="bar">
+        <div class="side start" part="start">
+          <slot></slot>
+        </div>
+
+        <div class="side end" part="end">
+          <slot name="end"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTToolbar.prototype, "bordered", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTToolbar.prototype, "stack", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTToolbar.prototype, "align", void 0);
+TTToolbar = __decorate([
+    customElement("tt-toolbar")
+], TTToolbar);
+export { TTToolbar };
+//# sourceMappingURL=tt-toolbar.js.map

package/dist/tt-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-toolbar.js","sourceRoot":"","sources":["../src/tt-toolbar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;GAWG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACL,sEAAsE;QACtE,0DAA0D;QACd,aAAQ,GAAG,KAAK,CAAC;QAE7D,uEAAuE;QACvE,oEAAoE;QACpE,yCAAyC;QACG,UAAK,GAAG,KAAK,CAAC;QAE1D,uEAAuE;QACvE,oEAAoE;QACpE,yBAAyB;QACkB,UAAK,GAC9C,QAAQ,CAAC;IAqHb,CAAC;aAnHQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FlB,AA5FY,CA4FX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;KAkBV,CAAC;IACJ,CAAC;;AA/H2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkB;AAKjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAe;AAKf;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC/B;AAdA,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmIrB"}

package/dist/tt-tooltip.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+/**
+ * A short hint attached to whatever you slot into it.
+ *
+ * Only ever supplementary. A tooltip is invisible on touch devices and to
+ * anyone who does not hover, so never put information here that a user
+ * needs in order to complete a task.
+ */
+export declare class TTTooltip extends LitElement {
+    content: string;
+    placement: TooltipPlacement;
+    disabled: boolean;
+    delay: number;
+    private open;
+    private tip;
+    private anchor;
+    private timer?;
+    private described?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleFocusin;
+    private handleFocusout;
+    private describe;
+    private undescribe;
+    private show;
+    private hide;
+    private scheduleHide;
+    private keepOpen;
+    private handleKeydown;
+    private position;
+    updated(changed: PropertyValues<this>): void;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-tooltip": TTTooltip;
+    }
+}
+//# sourceMappingURL=tt-tooltip.d.ts.map

package/dist/tt-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-tooltip.d.ts","sourceRoot":"","sources":["../src/tt-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,UAAU;IACX,OAAO,SAAM;IAEE,SAAS,EAAE,gBAAgB,CAAS;IAEnC,QAAQ,UAAS;IAIjC,KAAK,SAAO;IAE/B,OAAO,CAAC,IAAI,CAAS;IAEf,OAAO,CAAC,GAAG,CAAe;IACvB,OAAO,CAAC,MAAM,CAAe;IAE/C,OAAO,CAAC,KAAK,CAAC,CAAgC;IAI9C,OAAO,CAAC,SAAS,CAAC,CAAU;IAE5B,iBAAiB;IAMjB,oBAAoB;IAuBpB,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,IAAI,CAQV;IAEF,OAAO,CAAC,IAAI,CAGV;IAUF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,QAAQ,CAEd;IAQF,OAAO,CAAC,aAAa,CAOnB;IAQF,OAAO,CAAC,QAAQ;IAgDhB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAYrC,MAAM,CAAC,MAAM,0BAoEX;IAEF,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/tt-tooltip.js

@@ -0,0 +1,299 @@
+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, html, css } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+/**
+ * A short hint attached to whatever you slot into it.
+ *
+ * Only ever supplementary. A tooltip is invisible on touch devices and to
+ * anyone who does not hover, so never put information here that a user
+ * needs in order to complete a task.
+ */
+let TTTooltip = class TTTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.content = "";
+        this.placement = "top";
+        this.disabled = false;
+        // Stops a tooltip flashing up as the pointer crosses on its way
+        // somewhere else.
+        this.delay = 150;
+        this.open = false;
+        /*
+          HOW THE TEXT REACHES A SCREEN READER.
+      
+          The tip lives in this shadow root and the trigger does not, so
+          neither reference works: an aria-describedby id never crosses a shadow
+          boundary, and ariaDescribedByElements may point OUT of a shadow root
+          but never INTO one. So the text itself goes onto the focused element
+          as aria-description, which takes a string and needs no reference.
+      
+          The focused element, not the slotted one: composedPath()[0] is what
+          really holds focus, even inside a slotted component's own shadow root
+          (tt-button's inner <button>). An aria attribute on a tt-button host
+          reaches nothing. Set on focus, removed on blur, so the page's own
+          markup is only touched while it is focused, and an aria-description
+          the page wrote itself is left alone.
+        */
+        this.handleFocusin = (event) => {
+            const target = event.composedPath()[0];
+            if (target instanceof Element)
+                this.describe(target);
+            this.show();
+        };
+        this.handleFocusout = () => {
+            this.undescribe();
+            this.hide();
+        };
+        this.show = () => {
+            if (this.disabled || !this.content)
+                return;
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.open = true;
+                this.updateComplete.then(() => this.position());
+            }, this.delay);
+        };
+        this.hide = () => {
+            clearTimeout(this.timer);
+            this.open = false;
+        };
+        // Escape closes it, which matters because a tooltip triggered by
+        // keyboard focus otherwise has no way to be dismissed.
+        /*
+          Leaving the trigger hides AFTER a short grace period, so the pointer
+          can cross the gap onto the tooltip itself and stay there (WCAG 1.4.13,
+          "hoverable"). Someone zoomed in, or reading slowly, has to be able to
+          keep a tooltip up long enough to read it.
+        */
+        this.scheduleHide = () => {
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => (this.open = false), 120);
+        };
+        this.keepOpen = () => {
+            clearTimeout(this.timer);
+        };
+        /*
+          Escape from ANYWHERE while it is showing (WCAG 1.4.13, "dismissable").
+          The listener used to sit on the trigger, so it only heard Escape while
+          the trigger had focus; a tooltip shown by hovering could not be
+          dismissed from the keyboard at all.
+        */
+        this.handleKeydown = (event) => {
+            if (event.key !== "Escape" || !this.open)
+                return;
+            // Consumed, so a dialog around the trigger does not ALSO close: the
+            // first Escape dismisses the smallest thing. tt-modal skips an Escape
+            // that is already defaultPrevented.
+            event.preventDefault();
+            this.hide();
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Escape while showing; see handleKeydown.
+        document.addEventListener("keydown", this.handleKeydown);
+    }
+    disconnectedCallback() {
+        clearTimeout(this.timer);
+        document.removeEventListener("keydown", this.handleKeydown);
+        this.undescribe();
+        super.disconnectedCallback();
+    }
+    describe(target) {
+        this.undescribe();
+        if (this.disabled || !this.content)
+            return;
+        if (target.hasAttribute("aria-description"))
+            return;
+        target.setAttribute("aria-description", this.content);
+        this.described = target;
+    }
+    undescribe() {
+        this.described?.removeAttribute("aria-description");
+        this.described = undefined;
+    }
+    /*
+      Rendered in the top layer via popover, so no ancestor's overflow can
+      clip it. The top layer sits outside normal flow, so the position has
+      to be set from script using the trigger's viewport rectangle.
+    */
+    position() {
+        const tip = this.tip;
+        const anchor = this.anchor;
+        if (!tip || !anchor)
+            return;
+        if (!tip.matches(":popover-open"))
+            tip.showPopover();
+        const a = anchor.getBoundingClientRect();
+        const t = tip.getBoundingClientRect();
+        const gap = 8;
+        let top = 0;
+        let left = 0;
+        switch (this.placement) {
+            case "bottom":
+                top = a.bottom + gap;
+                left = a.left + a.width / 2 - t.width / 2;
+                break;
+            case "left":
+                top = a.top + a.height / 2 - t.height / 2;
+                left = a.left - t.width - gap;
+                break;
+            case "right":
+                top = a.top + a.height / 2 - t.height / 2;
+                left = a.right + gap;
+                break;
+            default:
+                top = a.top - t.height - gap;
+                left = a.left + a.width / 2 - t.width / 2;
+        }
+        // Keep it on screen. A tooltip half off the viewport is worse than
+        // one on the wrong side.
+        const margin = 8;
+        left = Math.max(margin, Math.min(left, window.innerWidth - t.width - margin));
+        top = Math.max(margin, Math.min(top, window.innerHeight - t.height - margin));
+        tip.style.left = `${left}px`;
+        tip.style.top = `${top}px`;
+    }
+    updated(changed) {
+        if (!this.open && this.tip?.matches(":popover-open")) {
+            this.tip.hidePopover();
+        }
+        // New text, or disabled, while focused: keep the description in step.
+        if (this.described && (changed.has("content") || changed.has("disabled"))) {
+            if (this.disabled || !this.content)
+                this.undescribe();
+            else
+                this.described.setAttribute("aria-description", this.content);
+        }
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: inline-block;
+    }
+
+    .anchor {
+      display: inline-flex;
+    }
+
+    .tip {
+      position: fixed;
+      margin: 0;
+      padding: 6px 10px;
+
+      max-width: 260px;
+
+      border: none;
+      border-radius: var(--tt-radius);
+
+      background: var(--tt-foreground);
+      color: var(--tt-background);
+
+      font-family: var(--tt-font-sans);
+      font-size: var(--tt-text-xs);
+      line-height: var(--tt-leading-snug);
+
+      box-shadow: var(--tt-elevation-2);
+
+      /* The pointer may rest on it (see scheduleHide). It only exists
+         while hovered or focused, so it never sits over a click target
+         the user has not already moved away from. */
+    }
+
+    /* In and out of the top layer, as on tt-dropdown-menu: see the note
+       there for why display and overlay ride along. A fade only: it can
+       sit on any of four sides, so there is no one direction to come from,
+       and a tooltip that slides draws more attention than its text. */
+    .tip {
+      transition:
+        opacity var(--tt-duration-fast) var(--tt-ease-in),
+        overlay var(--tt-duration-fast) allow-discrete,
+        display var(--tt-duration-fast) allow-discrete;
+    }
+
+    .tip:popover-open {
+      transition-duration: var(--tt-duration-normal);
+      transition-timing-function: var(--tt-ease-out);
+    }
+
+    @starting-style {
+      .tip:popover-open {
+        opacity: 0;
+      }
+    }
+
+    /* Closing: the pointer passes through, so it cannot land on the
+       fading tip and hold it open again. */
+    .tip:not(:popover-open) {
+      display: none;
+      opacity: 0;
+      pointer-events: none;
+    }
+  `; }
+    render() {
+        return html `
+      <!--
+        Focus and blur as well as pointer events, so a keyboard user gets
+        the tooltip too. The focus handlers also hand the text to a screen
+        reader; see handleFocusin.
+      -->
+      <span
+        class="anchor"
+        part="anchor"
+        @mouseenter=${this.show}
+        @mouseleave=${this.scheduleHide}
+        @focusin=${this.handleFocusin}
+        @focusout=${this.handleFocusout}
+      >
+        <slot></slot>
+      </span>
+
+      <div
+        class="tip"
+        part="tip"
+        role="tooltip"
+        popover="manual"
+        @mouseenter=${this.keepOpen}
+        @mouseleave=${this.scheduleHide}
+      >
+        ${this.content}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTTooltip.prototype, "content", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], TTTooltip.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTTooltip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], TTTooltip.prototype, "delay", void 0);
+__decorate([
+    state()
+], TTTooltip.prototype, "open", void 0);
+__decorate([
+    query(".tip")
+], TTTooltip.prototype, "tip", void 0);
+__decorate([
+    query(".anchor")
+], TTTooltip.prototype, "anchor", void 0);
+TTTooltip = __decorate([
+    customElement("tt-tooltip")
+], TTTooltip);
+export { TTTooltip };
+//# sourceMappingURL=tt-tooltip.js.map

package/dist/tt-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-tooltip.js","sourceRoot":"","sources":["../src/tt-tooltip.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,86 @@
 {
   "name": "@tartaguti/ui-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Reusable Lit web components for Tartaguti projects",
+  "keywords": [
+    "lit",
+    "web-components",
+    "design-system"
+  ],
+  "license": "MIT",
+  "author": "negilatifi",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/negilatifi/tartaguti-base.git",
+    "directory": "packages/ui-components"
+  },
+  "type": "module",
+  "sideEffects": true,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./sidebar/*": {
+      "types": "./dist/sidebar/*.d.ts",
+      "default": "./dist/sidebar/*.js"
+    },
+    "./accordion/*": {
+      "types": "./dist/accordion/*.d.ts",
+      "default": "./dist/accordion/*.js"
+    },
+    "./bento/*": {
+      "types": "./dist/bento/*.d.ts",
+      "default": "./dist/bento/*.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "THIRD-PARTY-NOTICES.md",
+    "CHANGELOG.md",
+    "custom-elements.json",
+    "vscode.html-custom-data.json"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-assets.mjs && npm run analyze",
+    "prepublishOnly": "npm run build && npm run verify",
+    "test": "web-test-runner --config web-test-runner.config.mjs",
+    "test:watch": "web-test-runner --config web-test-runner.config.mjs --watch",
+    "verify": "node scripts/verify-package.mjs",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --outdir . && npm run custom-data",
+    "custom-data": "node scripts/html-custom-data.mjs",
+    "lint:lit": "lit-analyzer \"src/**/*.ts\" --rules.no-invalid-css off"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "dependencies": {
+    "chart.js": "^4.5.1",
+    "prismjs": "^1.30.0"
+  },
+  "devDependencies": {
+    "@open-wc/testing": "^5.0.0",
+    "@types/mocha": "^10.0.10",
+    "@types/prismjs": "^1.26.6",
+    "@web/dev-server-esbuild": "^2.0.0",
+    "@web/test-runner": "^1.0.0",
+    "@web/test-runner-playwright": "^1.0.0",
+    "lit": "^3.3.3",
+    "typescript": "~6.0.2"
+  },
+  "//sideEffects": "Never set this to false. Importing a component module is what registers its custom element; tree-shaking would silently remove every component.",
+  "customElements": "custom-elements.json"
+}