@tartaguti/ui-components 0.0.0-stage → 0.1.0

package/dist/bento/tt-bento-item.js

@@ -0,0 +1,201 @@
+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, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+/**
+ * A tile surface for a `tt-bento`.
+ *
+ * It owns no placement. `bento-span` and `bento-rows` are read by the grid
+ * off any direct child, so this component exists purely to give bare
+ * content a surface: background, border, the 2xl corner, padding, and the
+ * concentric radius its own children read.
+ *
+ * Anything that already brings its own surface - a tt-card, a tt-stat, a
+ * tt-chart - goes straight into the grid and needs none of this:
+ *
+ *   <tt-bento>
+ *     <tt-stat bento-span="2"></tt-stat>
+ *     <tt-bento-item bento-span="2">bare content</tt-bento-item>
+ *   </tt-bento>
+ */
+let TTBentoItem = class TTBentoItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Drop the tile surface and render as a bare grid cell. */
+        this.plain = false;
+        /**
+         * The whole tile leads somewhere. Adds hover, focus and keyboard
+         * activation. Named clickable, as on tt-card and tt-sidebar-footer.
+         */
+        this.clickable = false;
+    }
+    activate(event) {
+        // Only a key pressed on the tile itself. Enter on a button inside the
+        // tile bubbles here too, and would click the tile as well. Same guard
+        // as tt-card.
+        if (event.target !== event.currentTarget)
+            return;
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        this.click();
+    }
+    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 {
+      /*
+        No grid-column, no grid-row, no min-width. tt-bento sets all three
+        on every direct child through ::slotted, so placement is declared
+        once by the thing that owns the grid rather than reimplemented by
+        every element that might sit in one.
+
+        The tile keeps only what a surface is: background, border, corner,
+        padding, and the concentric radius it publishes downward.
+      */
+
+      /*
+        The tile's own corner, read from whatever contains it.
+
+        Nested inside another tile it takes the concentric value that tile
+        published; standing on its own the fallback fires and it takes the
+        full 2xl. That is what makes nesting work: without it a tile drew a
+        second 24px arc inside its parent's 24px arc, which is exactly the
+        pair of unrelated shapes the concentric rule exists to prevent.
+
+        This has to live on :host rather than on .tile, because .tile
+        publishes --tt-radius-nested for its own children. Two properties
+        referencing each other on the SAME element is a cycle, and CSS
+        throws both away. Reading on the host and publishing on the child
+        keeps them on different elements.
+      */
+      --_radius: var(--tt-radius-nested, var(--tt-radius-2xl));
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+
+      color: var(--tt-card-foreground);
+    }
+
+    .tile {
+      height: 100%;
+      box-sizing: border-box;
+
+      display: flex;
+      flex-direction: column;
+
+      /* space-4, matched to the smaller module. The concentric calc below
+         subtracts the same value, so the two stay in step. */
+      padding: var(--tt-space-4);
+
+      background: var(--tt-card);
+      border: 1px solid var(--tt-border);
+      border-radius: var(--_radius);
+
+      /*
+        Continuous curvature rather than a circular arc. This is most of why
+        an Apple corner looks softer than a plain border-radius at the same
+        number. Ignored where unsupported, which degrades to exactly what
+        the line above already draws.
+      */
+      corner-shape: squircle;
+
+      /*
+        Concentric corners for whatever is slotted in. A 24px tile with 20px
+        of padding hands its content a 4px curve, so the two arcs stay
+        parallel instead of meeting as two unrelated shapes.
+
+        Only meaningful for children that FILL the padding box. A button
+        sitting in the middle of a tile keeps its own radius.
+      */
+      --tt-radius-nested: max(
+        var(--tt-radius-sm),
+        calc(var(--_radius) - var(--tt-space-4))
+      );
+
+      transition:
+        transform var(--tt-duration-slow) var(--tt-ease-spring),
+        box-shadow var(--tt-duration-slow) var(--tt-ease-out),
+        border-color var(--tt-duration-normal) var(--tt-ease);
+    }
+
+    :host([plain]) .tile {
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: 0;
+    }
+
+    /*
+      The lift. Small on purpose: 2px and a shadow is enough to say "this
+      responds", and the spring easing is what makes it feel picked up
+      rather than slid. Anything larger reads as a card animation demo.
+    */
+    :host([clickable]) .tile {
+      cursor: pointer;
+    }
+
+    :host([clickable]) .tile:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--tt-elevation-2);
+      border-color: var(--tt-muted-foreground);
+    }
+
+    :host([clickable]) .tile:active {
+      transform: translateY(0);
+    }
+
+    :host([clickable]) .tile:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    @media (pointer: coarse) {
+      /* Hover lift on a touchscreen fires on tap and sticks until the next
+         tap elsewhere, which reads as a stuck tile. */
+      :host([clickable]) .tile:hover {
+        transform: none;
+        box-shadow: none;
+      }
+    }
+  `; }
+    render() {
+        /*
+          A plain tile gets no role and no tabindex at all. Marking a container
+          of real content as presentational would hide it, and a tabindex of -1
+          on something with nothing to activate is noise in the DOM.
+        */
+        const interactive = this.clickable;
+        return html `
+      <div
+        class="tile"
+        part="tile"
+        role=${ifDefined(interactive ? "button" : undefined)}
+        tabindex=${ifDefined(interactive ? 0 : undefined)}
+        @keydown=${interactive ? this.activate : nothing}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTBentoItem.prototype, "plain", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTBentoItem.prototype, "clickable", void 0);
+TTBentoItem = __decorate([
+    customElement("tt-bento-item")
+], TTBentoItem);
+export { TTBentoItem };
+//# sourceMappingURL=tt-bento-item.js.map

package/dist/bento/tt-bento-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-bento-item.js","sourceRoot":"","sources":["../../src/bento/tt-bento-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACL,4DAA4D;QAE5D,UAAK,GAAG,KAAK,CAAC;QAEd;;;WAGG;QAEH,cAAS,GAAG,KAAK,CAAC;IA6JpB,CAAC;IA3JS,QAAQ,CAAC,KAAoB;QACnC,sEAAsE;QACtE,sEAAsE;QACtE,cAAc;QACd,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa;YAAE,OAAO;QACjD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;YAAE,OAAO;QAEvD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0HlB,AA1HY,CA0HX;IAEF,MAAM;QACJ;;;;UAIE;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;QAEnC,OAAO,IAAI,CAAA;;;;eAIA,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;mBACzC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;mBACtC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;;;;KAInD,CAAC;IACJ,CAAC;;AAnKD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC7B;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACzB;AAVP,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAuKvB"}

package/dist/bento/tt-bento.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+/**
+ * The grid net. Tiles span whole cells of it, so a composition reads as a
+ * deliberate arrangement rather than a row of equal boxes:
+ *
+ *   <tt-bento>
+ *     <tt-stat bento-span="6" bento-rows="4"></tt-stat>
+ *     <tt-bento-item bento-span="2" bento-rows="2">module</tt-bento-item>
+ *   </tt-bento>
+ *
+ * It measures ITSELF, not the viewport, so a bento in a sidebar and a bento
+ * on a full page get the right column count with neither knowing where it
+ * is. Cells are square, so a span and a row count describe a shape.
+ */
+export declare class TTBento extends LitElement {
+    columns: 12 | 24;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-bento": TTBento;
+    }
+}
+//# sourceMappingURL=tt-bento.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-bento.d.ts","sourceRoot":"","sources":["../../src/bento/tt-bento.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAuJvD;;;;;;;;;;;;GAYG;AACH,qBACa,OAAQ,SAAQ,UAAU;IAkBrC,OAAO,EAAE,EAAE,GAAG,EAAE,CAAM;IAEtB,MAAM,CAAC,MAAM,4BAgIX;IAEF,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/bento/tt-bento.js

@@ -0,0 +1,314 @@
+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, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+/*
+  The net sizes on offer, and the only two worth offering.
+
+  Both are highly divisible, which is the only thing a column count is
+  really for: 12 gives halves, thirds, quarters and sixths; 24 adds eighths
+  and twelfths. That is the same property that made 12 the standard page
+  grid - it is the smallest integer with six divisors.
+
+  32 is deliberately absent despite being the obvious "finer" choice. Its
+  divisors are 1, 2, 4, 8, 16, 32, so it has no thirds at all: on a
+  32-column net you could never express a third of the page, which is the
+  single most common asymmetric split there is.
+*/
+const NETS = [12, 24];
+/*
+  Tiers. Each one states its own column count and its own mapping from an
+  authored span to the span it takes at that width.
+
+  A mapping rather than a single factor, because the two tiers genuinely
+  want different behaviour. Halving the net still leaves enough columns for
+  a fraction to land somewhere distinct, so that tier is proportional. Two
+  columns leaves exactly two possible widths, where proportional collapses:
+  a sixth of the net and a half of it both round to one column and the
+  anchor stops being an anchor. See the note on that tier.
+
+  Both axes go through the same mapping, so a SQUARE tile stays exactly
+  square at every tier. Other ratios drift a little, because the two axes
+  round independently and rounding bites at small counts: a 6x4 becomes a
+  2x1 rather than the 1.5x1 that has no meaning on a grid. That is the
+  honest cost of integer tracks, and it lands on height, which is the cheap
+  axis on a phone.
+
+  There is deliberately no minimum size floor anywhere. None is needed: the
+  container shrinks along with the counts, so a tile lands at a sensible
+  physical size on its own.
+*/
+const TIERS = [
+    {
+        query: "(width < 64rem)",
+        /* Half the net. Proportional works cleanly while there are still
+           enough columns for a fraction to land on a distinct width. */
+        cols: (net) => Math.max(1, Math.round(net / 2)),
+        units: (n, _net) => Math.max(1, Math.round(n / 2)),
+    },
+    {
+        query: "(width < 40rem)",
+        /*
+          Two columns, and NOT a proportional factor.
+    
+          Two is set by the content, not by the maths: a module is an icon
+          badge over a value over a label, and on a phone two columns puts a
+          cell near 175px, which fits that comfortably and is a generous touch
+          target. Three lands near 112px, where the three parts stop fitting
+          once the tile's own padding is taken off. Four is 81px, which is
+          barely more than the icon.
+    
+          With only two columns there are only two possible widths, so a
+          proportional factor breaks down: a sixth of the net and a half of it
+          both round to a single column, and the anchor ends up exactly as wide
+          as the modules it was supposed to dominate. A bucket is the honest
+          model at this size - module width, or full width, and nothing else
+          exists. The threshold is a sixth of the net rather than a fixed
+          number so it means the same thing on a 12 net and on a 24 one.
+        */
+        cols: () => 2,
+        units: (n, net) => (n <= net / 6 ? 1 : 2),
+    },
+];
+/**
+ * Placement rules for every span and row value on the largest net.
+ *
+ * Generated rather than hand-written. A 24 net needs 24 values on each of
+ * two axes across three tiers, which is around a hundred and fifty rules:
+ * writable once, unmaintainable forever, and impossible to keep consistent
+ * by eye. Generating it means the tier maths is stated once, as maths.
+ */
+function placement(max) {
+    const rules = [];
+    for (let n = 2; n <= max; n++) {
+        rules.push(`::slotted([bento-span="${n}"]) { grid-column: span ${n}; }`);
+        rules.push(`::slotted([bento-rows="${n}"]) { grid-row: span ${n}; }`);
+    }
+    return rules.join("\n");
+}
+/**
+ * The same values remapped for one tier, per net.
+ *
+ * Scoped by net, because the mapping depends on how many columns the author
+ * started from: a span of 4 is a third of a 12 net and a sixth of a 24 one,
+ * and those should not land on the same width.
+ */
+function clamp(tier) {
+    return NETS.map((net) => {
+        const scope = selectorFor(net);
+        const rules = [];
+        for (let n = 2; n <= net; n++) {
+            const next = tier.units(n, net);
+            if (next === n)
+                continue;
+            rules.push(`${scope}::slotted([bento-span="${n}"]) { grid-column: span ${next}; }`);
+            rules.push(`${scope}::slotted([bento-rows="${n}"]) { grid-row: span ${next}; }`);
+        }
+        return rules.join("\n");
+    }).join("\n");
+}
+/*
+  The default net needs no attribute, so it is the bare selector. Both forms
+  keep the same specificity as each other within a tier, which is what lets
+  source order decide instead of a specificity fight.
+*/
+function selectorFor(net) {
+    return net === 12 ? "" : `:host([columns="${net}"]) `;
+}
+/** Column count per net, per tier. */
+function columnCounts(cols) {
+    return NETS.map((net) => `${selectorFor(net)}.bento { --_cols: ${cols(net)}; }`).join("\n");
+}
+const GENERATED = unsafeCSS([
+    placement(Math.max(...NETS)),
+    columnCounts((net) => net),
+    ...TIERS.map((tier) => `
+        @container tt-bento ${tier.query} {
+          ${columnCounts(tier.cols)}
+          ${clamp(tier)}
+        }
+      `),
+].join("\n"));
+/**
+ * The grid net. Tiles span whole cells of it, so a composition reads as a
+ * deliberate arrangement rather than a row of equal boxes:
+ *
+ *   <tt-bento>
+ *     <tt-stat bento-span="6" bento-rows="4"></tt-stat>
+ *     <tt-bento-item bento-span="2" bento-rows="2">module</tt-bento-item>
+ *   </tt-bento>
+ *
+ * It measures ITSELF, not the viewport, so a bento in a sidebar and a bento
+ * on a full page get the right column count with neither knowing where it
+ * is. Cells are square, so a span and a row count describe a shape.
+ */
+let TTBento = class TTBento extends LitElement {
+    constructor() {
+        super(...arguments);
+        /*
+          Columns at the widest tier.
+      
+          Twelve by default. Cells are square, so the column count decides how big
+          a unit is: on a typical page twelve puts a cell near 85px, which makes a
+          module a clean 2x2 and a half-width tile a 6. Twenty-four halves that to
+          around 36px, which buys finer control at the cost of every tile becoming
+          a four-to-eight span in both directions, where the numbers stop meaning
+          anything at a glance.
+      
+          Rough vocabulary on the default net:
+            2x2    a module
+            4x2    a wide readout
+            6x4    a half-width anchor
+            12xN   a full-width band
+        */
+        this.columns = 12;
+    }
+    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;
+
+        /*
+          A bento is often a grid item of another bento. Without this it
+          keeps the default min-width: auto, so one long unbreakable word
+          inside can push the outer column past its 1fr share.
+        */
+        min-width: 0;
+
+        /*
+          The host is the container the tiles measure against. It has to be
+          the host rather than the inner grid, because a tile is a light-DOM
+          child of this element and looks up its own ancestors.
+        */
+        container-type: inline-size;
+        container-name: tt-bento;
+
+        font-family: var(--tt-font-sans);
+      }
+
+      .bento {
+        display: grid;
+
+        /*
+          A gap reads against the size of what it separates, and on a fine
+          net it also has to survive being repeated eleven or twenty-three
+          times across the width. Tiles spanning several cells absorb the
+          gaps inside them, so the visible gap between two tiles stays this
+          value however wide they are.
+        */
+        --_gap: var(--tt-bento-gap, var(--tt-space-3));
+        gap: var(--_gap);
+
+        grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
+
+        /*
+          Square cells.
+
+          The row height is the column width, computed the same way the
+          column is: the container's inline size less the gaps, divided by
+          the column count. cqw is 1% of that inline size, and this
+          component already establishes a container for the tier queries, so
+          the measurement is there for free.
+
+          Because it is exact it composes: an NxN tile covers N columns plus
+          N-1 gaps across and N rows plus N-1 gaps down, which are the same
+          number, so every square span stays square at every width.
+
+          minmax, not a fixed height, so a tile whose content genuinely
+          needs more room grows instead of clipping.
+
+          NOTE: 100cqw is the host's inline size. Keep the host free of
+          horizontal padding and borders, or the two stop agreeing.
+        */
+        grid-auto-rows: minmax(
+          var(
+            --tt-bento-row,
+            calc((100cqw - (var(--_cols) - 1) * var(--_gap)) / var(--_cols))
+          ),
+          auto
+        );
+      }
+
+      /* ---- Placement ----
+
+         Every direct child participates, whether or not it is a
+         tt-bento-item:
+
+           <tt-bento>
+             <tt-stat bento-span="6" bento-rows="4"></tt-stat>
+             <tt-chart bento-span="12"></tt-chart>
+             <tt-bento-item>bare content that wants a tile</tt-bento-item>
+           </tt-bento>
+
+         The rules live here rather than in the child, and that is the whole
+         design. No component has to know bento exists: the grid reads a
+         plain attribute off whatever it was handed. Adding a second
+         arrangement later is a second container, not a prop on
+         seventy-three components.
+
+         ::slotted can set layout properties on a slotted element because
+         they apply to the element's own box. It cannot reach inside one,
+         which is what --tt-group-radius exists for over in tt-button-group.
+         Placement is on the outside, so this is the right tool.
+
+         The attributes are namespaced because the short names are taken:
+         tt-textarea already has rows, and tt-table and tt-data-table have
+         both rows and columns. A bare rows attribute would quietly give
+         <tt-textarea rows="3"> a three-row grid span.
+
+         The rules themselves are generated above. */
+
+      ::slotted(*) {
+        /* Stops a long unbreakable word inside one child forcing its column
+           wider than its share, which is how a grid of 1fr columns quietly
+           stops being equal. */
+        min-width: 0;
+      }
+
+      /*
+        The floor. Very narrow containers, and anyone who has scaled their
+        text up far enough that a fraction of the width would be a fraction
+        of a word. Everything goes full width and content sets the height.
+      */
+      @container tt-bento (width < 20rem) {
+        .bento {
+          --_cols: 1;
+        }
+
+        ::slotted([bento-span]) {
+          grid-column: span 1;
+        }
+
+        ::slotted([bento-rows]) {
+          grid-row: span 1;
+        }
+      }
+    `,
+        GENERATED,
+    ]; }
+    render() {
+        return html `
+      <div class="bento" part="bento">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, reflect: true })
+], TTBento.prototype, "columns", void 0);
+TTBento = __decorate([
+    customElement("tt-bento")
+], TTBento);
+export { TTBento };
+//# sourceMappingURL=tt-bento.js.map

package/dist/bento/tt-bento.js.map

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

package/dist/floating.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Keeping a top-layer element glued to the thing that opened it.
+ *
+ * THE BUG THIS EXISTS FOR: `scroll` events are not composed, so they do
+ * not escape a shadow root. A `window.addEventListener("scroll", fn, true)`
+ * never fires for a scroll container living inside some component's shadow
+ * DOM, which in this library is the norm rather than the exception: the
+ * page scrolls inside tt-layout's `.content`, not on the document. The
+ * result was a menu that stayed nailed to the viewport while the button it
+ * belonged to scrolled away underneath it.
+ *
+ * The fix is the same one positioning libraries use: find every scrollable
+ * ancestor of the anchor and listen on each of them directly, hopping out
+ * of shadow roots on the way up.
+ */
+/**
+ * Every scrollable ancestor of `element` in the FLATTENED tree.
+ *
+ * Three different "parents" matter here, and using the wrong one is why
+ * the first version of this did nothing:
+ *
+ *   assignedSlot  A slotted element renders wherever its slot is, which is
+ *                 inside some other component's shadow root. Its parentNode
+ *                 still points at its light-DOM parent, which is NOT where
+ *                 it visually sits. Stepping to the slot is what follows
+ *                 the element to where it is actually painted.
+ *   ShadowRoot    Has no parentElement, so a plain walk stops dead. Its
+ *                 `host` continues in the outer tree.
+ *   parentNode    The ordinary case.
+ *
+ * Missing the first one is what left the page's real scroll container
+ * unwatched: tt-layout's .content lives in tt-layout's shadow root, and
+ * every page is slotted into it, so no parentNode chain ever reaches it.
+ */
+export declare function scrollAncestors(element: Element): Element[];
+/**
+ * Calls `onChange` whenever the anchor may have moved: any ancestor
+ * scrolling, the window scrolling or resizing, or the anchor itself
+ * changing size.
+ *
+ * Returns the unsubscribe function. Call it when the floating element
+ * closes, or these listeners outlive it.
+ */
+export declare function trackAnchor(anchor: Element, onChange: () => void): () => void;
+export interface PlaceOptions {
+    align?: "start" | "end";
+    gap?: number;
+    edge?: number;
+}
+/**
+ * Park a top-layer element under its anchor, flipping above when there
+ * is no room below and clamping so it never leaves the viewport.
+ *
+ * CALL THIS AFTER showPopover(), never before. A closed popover is
+ * display:none and a display:none element measures 0x0, so positioning
+ * first works with a width of zero: the align=end offset collapses onto
+ * the anchor's right edge and the clamp has nothing to clamp with, which
+ * puts a menu near the right edge off screen.
+ */
+export declare function placeBelow(anchor: Element, floating: HTMLElement, options?: PlaceOptions): void;
+//# sourceMappingURL=floating.d.ts.map

package/dist/floating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.d.ts","sourceRoot":"","sources":["../src/floating.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAUH;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,CA6B3D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CA2B7E;AAED,MAAM,WAAW,YAAY;IAE3B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAExB,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CACxB,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,WAAW,EACrB,OAAO,GAAE,YAAiB,GACzB,IAAI,CAqBN"}