@fusion.dev/helix-headless 0.0.0-dev → 0.0.2

package/dist/copy-button/root/copy-button-root.d.ts

@@ -49,16 +49,12 @@ import '../../tooltip/index.js';
  */
 export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     /**
-     * What goes on the clipboard.
+     * What it is called, and says, after one.
      *
-     * **Narrows `Button.value`, which is the submit value, and the two agree.**
-     * A copy button is `type="button"` and never submits, so the inherited
-     * meaning has nothing to act on; where a consumer changes the type, what it
-     * submits is what it copies, which is the reading anybody would expect of one
-     * property called `value`. Declared here rather than inherited because the
-     * clipboard is what this component is about and its own page should say so.
+     * `attribute` written out, because Lit lowercases a property name rather than
+     * dash-casing it, and `copiedlabel` is not what anyone would type.
      */
-    value: string;
+    copiedLabel: string;
     /**
      * What it is called, and says, before a press.
      *
@@ -68,12 +64,16 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      */
     label: string;
     /**
-     * What it is called, and says, after one.
+     * What goes on the clipboard.
      *
-     * `attribute` written out, because Lit lowercases a property name rather than
-     * dash-casing it, and `copiedlabel` is not what anyone would type.
+     * **Narrows `Button.value`, which is the submit value, and the two agree.**
+     * A copy button is `type="button"` and never submits, so the inherited
+     * meaning has nothing to act on; where a consumer changes the type, what it
+     * submits is what it copies, which is the reading anybody would expect of one
+     * property called `value`. Declared here rather than inherited because the
+     * clipboard is what this component is about and its own page should say so.
      */
-    copiedLabel: string;
+    value: string;
     /**
      * The words for the state it is in, used twice on purpose.
      *
@@ -88,19 +88,16 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     /**
      * The write, the confirmation, the timer and the event, all of them shared.
      *
-     * **This was a second implementation of `CopyController` with the hard half
-     * left out.** It reached straight for `navigator.clipboard.writeText` and had
-     * no `execCommand` fallback, so it was inert in a sandboxed iframe without
-     * `allow-same-origin`, which is the sandbox every example on the docs site
-     * runs in: the guard on the API existing does not help there, because the
-     * object exists and the write rejects. A copy button that does nothing is
-     * indistinguishable from a broken one, and this one was doing nothing in the
-     * one place a reader is most likely to try it.
+     * **Never reach for `navigator.clipboard.writeText` directly.** It is inert in
+     * a sandboxed iframe without `allow-same-origin`, which is the sandbox every
+     * example on the docs site runs in, and guarding on the API existing does not
+     * help there: the object exists and the write rejects. A copy button that does
+     * nothing is indistinguishable from a broken one.
      *
-     * The controller also carries the two things this had wrong on its own terms:
-     * it checks the host is still connected after the await, because writing is
-     * asynchronous and `hostDisconnected` clears a timer that does not exist yet,
-     * and it registers itself so the timer is released without an override here.
+     * The controller carries the `execCommand` fallback, checks the host is still
+     * connected after the await (writing is asynchronous, so `hostDisconnected`
+     * can run before there is a timer to clear), and registers itself so the timer
+     * is released without an override here.
      */
     private readonly clipboard;
     private get copied();

package/dist/copy-button/root/copy-button-root.js

@@ -65,16 +65,12 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
     constructor() {
         super(...arguments);
         /**
-         * What goes on the clipboard.
+         * What it is called, and says, after one.
          *
-         * **Narrows `Button.value`, which is the submit value, and the two agree.**
-         * A copy button is `type="button"` and never submits, so the inherited
-         * meaning has nothing to act on; where a consumer changes the type, what it
-         * submits is what it copies, which is the reading anybody would expect of one
-         * property called `value`. Declared here rather than inherited because the
-         * clipboard is what this component is about and its own page should say so.
+         * `attribute` written out, because Lit lowercases a property name rather than
+         * dash-casing it, and `copiedlabel` is not what anyone would type.
          */
-        this.value = '';
+        this.copiedLabel = 'Copied';
         /**
          * What it is called, and says, before a press.
          *
@@ -84,35 +80,29 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
          */
         this.label = 'Copy';
         /**
-         * What it is called, and says, after one.
-         *
-         * `attribute` written out, because Lit lowercases a property name rather than
-         * dash-casing it, and `copiedlabel` is not what anyone would type.
-         */
-        this.copiedLabel = 'Copied';
-        /*
-         * Whether the confirmation is showing.
+         * What goes on the clipboard.
          *
-         * `@state`, so it is the component's and not API: a consumer setting this
-         * would be claiming a copy happened, which is the one thing this element
-         * exists to be honest about.
+         * **Narrows `Button.value`, which is the submit value, and the two agree.**
+         * A copy button is `type="button"` and never submits, so the inherited
+         * meaning has nothing to act on; where a consumer changes the type, what it
+         * submits is what it copies, which is the reading anybody would expect of one
+         * property called `value`. Declared here rather than inherited because the
+         * clipboard is what this component is about and its own page should say so.
          */
+        this.value = '';
         /**
          * The write, the confirmation, the timer and the event, all of them shared.
          *
-         * **This was a second implementation of `CopyController` with the hard half
-         * left out.** It reached straight for `navigator.clipboard.writeText` and had
-         * no `execCommand` fallback, so it was inert in a sandboxed iframe without
-         * `allow-same-origin`, which is the sandbox every example on the docs site
-         * runs in: the guard on the API existing does not help there, because the
-         * object exists and the write rejects. A copy button that does nothing is
-         * indistinguishable from a broken one, and this one was doing nothing in the
-         * one place a reader is most likely to try it.
+         * **Never reach for `navigator.clipboard.writeText` directly.** It is inert in
+         * a sandboxed iframe without `allow-same-origin`, which is the sandbox every
+         * example on the docs site runs in, and guarding on the API existing does not
+         * help there: the object exists and the write rejects. A copy button that does
+         * nothing is indistinguishable from a broken one.
          *
-         * The controller also carries the two things this had wrong on its own terms:
-         * it checks the host is still connected after the await, because writing is
-         * asynchronous and `hostDisconnected` clears a timer that does not exist yet,
-         * and it registers itself so the timer is released without an override here.
+         * The controller carries the `execCommand` fallback, checks the host is still
+         * connected after the await (writing is asynchronous, so `hostDisconnected`
+         * can run before there is a timer to clear), and registers itself so the timer
+         * is released without an override here.
          */
         this.clipboard = new CopyController(this, { after: CONFIRM });
         this.handleCopy = async () => {
@@ -211,14 +201,14 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
     }
 };
 __decorate([
-    property()
-], HelixHeadlessCopyButton.prototype, "value", void 0);
+    property({ attribute: 'copied-label' })
+], HelixHeadlessCopyButton.prototype, "copiedLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessCopyButton.prototype, "label", void 0);
 __decorate([
-    property({ attribute: 'copied-label' })
-], HelixHeadlessCopyButton.prototype, "copiedLabel", void 0);
+    property()
+], HelixHeadlessCopyButton.prototype, "value", void 0);
 HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = __decorate([
     customElement('helix-headless-copy-button')
 ], HelixHeadlessCopyButton);

package/dist/data-table/root/data-table-root.d.ts

@@ -21,12 +21,8 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * </helix-data-table>
  * ```
  *
- * This is the resolution of a deferral rather than a new idea. `helix-table`
- * takes rows as markup and is the right component for a table of twelve things
- * a person wrote out; the repeated `page`, `page-size` and `total` attributes on
- * the three pagination elements are placeholders whose own comments name the fix
- * as "a data table composing a pagination inside itself", and `helix-table`
- * already carried `@aliases DataTable`: a name claimed and not kept.
+ * `helix-table` takes rows as markup and is the right component for a table of
+ * twelve things a person wrote out.
  *
  * **Sort and filter apply to the whole set, never the page.** Sorting the drawn
  * window is correct on the first screen and wrong on every other one, which is
@@ -46,10 +42,10 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * `helix-table` where the content has to be in the served HTML and the result is
  * small enough to write out; use this where the result is large, and accept that
  * the first paint is a shell. The obvious workaround, a `columns` property
- * beside the markup columns, is deliberately not offered: this family has
- * already shipped one source of truth for columns splitting into two, nothing
- * checked that they agreed, and a table rendering one way on the server and
- * another in the browser is that failure with a hydration mismatch on top.
+ * beside the markup columns, is deliberately not offered: it splits one source
+ * of truth for the columns into two that nothing checks against each other, and
+ * a table rendering one way on the server and another in the browser is that
+ * failure with a hydration mismatch on top.
  *
  * **Every axis is controlled or uncontrolled, and that is what makes a server
  * mode fall out rather than be bolted on.** `sort`, `filter`, `page` and
@@ -97,17 +93,21 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     static shadowRootOptions: ShadowRootInit;
     /**
-     * The whole result, in the order it arrived.
-     *
-     * A property and not an attribute: it is an array. Left alone this element
-     * filters, sorts and pages it; in `server` mode it is the page the consumer
-     * already fetched and none of the three is applied.
-     *
-     * **Read, never written.** Sorting produces a new array rather than reordering
-     * this one, because a consumer's array may be the same object their own state
-     * holds and reordering it under them is a mutation they did not ask for.
+     * Query to open with, where nothing declared one.
      */
-    rows: readonly DataRow[];
+    defaultFilter: string;
+    /**
+     * Page to open on, where nothing declared one.
+     */
+    defaultPage: number;
+    /**
+     * Page size to open with, where nothing declared one.
+     */
+    defaultPageSize: number;
+    /**
+     * Order to open on, where nothing declared one.
+     */
+    defaultSort: string;
     /**
      * The field naming a row's stable identity.
      *
@@ -119,75 +119,60 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * that works and is worth setting anyway.
      */
     key: string;
-    /**
-     * Whether this element does the work or asks the consumer to.
-     *
-     * `client` filters, sorts and pages `rows` itself. `server` applies none of
-     * them: `rows` is the page, `total` is the size of the whole result, and the
-     * three events are requests the consumer answers by fetching. Past some size
-     * the client cannot hold the data, so this is not an optimization, it is the
-     * only mode that works, and it is here from the start because adding it later
-     * inverts the data flow.
-     */
-    mode: 'client' | 'server';
-    /**
-     * How many rows the whole result has, where this element cannot count them.
-     *
-     * Only read in `server` mode, where `rows` is one page and its length says
-     * nothing about the result. Ignored in `client` mode rather than trusted,
-     * because two sources for one count is the mistake, and here the array is the
-     * one that cannot be stale.
-     */
-    total: number;
-    /**
-     * Accessible name for the grid.
-     */
-    label: string;
     /**
      * The order, as `field:direction`.
      *
      * Set it and this element defers: a reader's click fires `helix-sort` and
      * changes nothing until a new value arrives. `default-sort` seeds an order this
      * element then owns.
-     *
-     *
      */
     get sort(): string;
     set sort(next: string);
     /**
-     * Order to open on, where nothing declared one.
+     * Accessible name for the grid.
      */
-    defaultSort: string;
+    label: string;
     /**
      * What the rows are narrowed to, as one query across every column.
      *
      * One query rather than a predicate per column, which is what a reader means
      * by a search box above a table. It matches on each column's ordering value,
      * so search and sort cannot disagree about what a column holds.
-     *
-     *
      */
     get filter(): string;
     set filter(next: string);
     /**
-     * Query to open with, where nothing declared one.
+     * Whether this element does the work or asks the consumer to.
+     *
+     * `client` filters, sorts and pages `rows` itself. `server` applies none of
+     * them: `rows` is the page, `total` is the size of the whole result, and the
+     * three events are requests the consumer answers by fetching. Past some size
+     * the client cannot hold the data, so this is not an optimization, it is the
+     * only mode that works, and it is here from the start because adding it later
+     * inverts the data flow.
      */
-    defaultFilter: string;
+    mode: 'client' | 'server';
     /**
      * The page on show, from 1.
      *
      * Clamped on the way out, so what this reports is the page it drew: a
      * bookmarked link to page 99 of a result that has since shrunk reads back as
      * the last page rather than as 99.
-     *
-     *
      */
     get page(): number;
     set page(next: number);
     /**
-     * Page to open on, where nothing declared one.
+     * The whole result, in the order it arrived.
+     *
+     * A property and not an attribute: it is an array. Left alone this element
+     * filters, sorts and pages it; in `server` mode it is the page the consumer
+     * already fetched and none of the three is applied.
+     *
+     * **Read, never written.** Sorting produces a new array rather than reordering
+     * this one, because a consumer's array may be the same object their own state
+     * holds and reordering it under them is a mutation they did not ask for.
      */
-    defaultPage: number;
+    rows: readonly DataRow[];
     /**
      * How many rows a page holds. Zero is every row, which is what "no paging" means.
      *
@@ -200,9 +185,14 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     get pageSize(): number;
     set pageSize(next: number);
     /**
-     * Page size to open with, where nothing declared one.
+     * How many rows the whole result has, where this element cannot count them.
+     *
+     * Only read in `server` mode, where `rows` is one page and its length says
+     * nothing about the result. Ignored in `client` mode rather than trusted,
+     * because two sources for one count is the mistake, and here the array is the
+     * one that cannot be stale.
      */
-    defaultPageSize: number;
+    total: number;
     /**
      * Whether to draw a pagination under the grid.
      *
@@ -245,19 +235,18 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * which means the out-of-the-box arrangement is the unbounded one and nothing
      * about it says that a result of any size will simply be drawn.
      *
-     * **Windowing was considered and refused**, which is worth recording because
-     * it is the obvious answer. This element already has two: `paginated` with a
+     * **Windowing was refused**, which is worth recording because it is the
+     * obvious answer. This element already has two mechanisms: `paginated` with a
      * `page-size`, and `mode="server"` where `rows` is one page, `total` is the
      * whole result and `aria-rowcount` already reports the result rather than the
      * window, which is the hard half of virtualization done correctly. A third
-     * mechanism would fight the first two, and virtualizing a grid means variable
-     * row heights, a sticky header and keeping `aria-rowindex` honest against a
-     * result the element is no longer holding. `VirtualizeController` exists for
-     * the case where the rows are a flat list and this is not that. See #326.
+     * would fight the first two, and virtualizing a grid means variable row
+     * heights, a sticky header and keeping `aria-rowindex` honest against a result
+     * the element is no longer holding. `VirtualizeController` exists for the case
+     * where the rows are a flat list and this is not that.
      *
-     * So the gap was never the capability, it was that nothing said which of the
-     * two to reach for. Once per element, in a browser only: a warning during a
-     * server render is one nobody can act on and one that would print per request.
+     * Warned once per element, in a browser only: a warning during a server render
+     * is one nobody can act on and one that would print per request.
      */
     private warnIfCrowded;
     /**
@@ -317,13 +306,11 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     /**
      * Says on the toolbar and the footer whether anything is in them.
      *
-     * **The stylesheet used to ask, and could not.** It read
-     * `[part="toolbar"]:has(> slot:not(:has(*)))`, which is two faults at once:
-     * `:has()` may not be nested inside `:has()`, so the selector failed to parse
-     * and the whole rule was discarded; and `slot:not(:has(*))` is as true of a
-     * filled slot as of an empty one, because assigned nodes are not a slot's DOM
-     * children. Both verified in a browser. A table with no toolbar paid the gap
-     * above the grid for one that was not there.
+     * **A stylesheet cannot ask.** `[part="toolbar"]:has(> slot:not(:has(*)))` is
+     * two faults at once: `:has()` may not be nested inside `:has()`, so the
+     * selector fails to parse and the whole rule is discarded; and
+     * `slot:not(:has(*))` is as true of a filled slot as of an empty one, because
+     * assigned nodes are not a slot's DOM children. Both verified in a browser.
      */
     private markEmpty;
     /**
@@ -337,6 +324,21 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     private markRegion;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Tells each column which way it is ordered, if it is the one.
+     *
+     * **The table owns the sort and the column carries the semantics**, which is
+     * the only arrangement that can be right: `role="columnheader"` is on the
+     * column, so `aria-sort` has to be there too, and the value is a fact about
+     * the table's `sort` rather than about any column. Pushed down here rather
+     * than pulled up there, because a column asking its parent would have to know
+     * what kind of parent it has, and it is slotted into two.
+     *
+     * In `updated` and after `assign`, so the order announced is the order the
+     * rows are already in. Announced before the rows moved is the sort a reader is
+     * told about being one they cannot see yet.
+     */
+    private announceSort;
     /** Columns arrive from the light DOM, which changes no property here. */
     private readonly handleSlotChange;
     private renderCell;
@@ -360,8 +362,7 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * node passes through the slot in the flattened tree, and does not work in
      * happy-dom, which does not implement that propagation: measured, the host
      * hears the click and the slot does not. A spec written against the slot fails
-     * in the suite while the component is correct, and the same trust in the
-     * flattened tree could as easily have gone the other way.
+     * in the suite while the component is correct.
      *
      * Added here rather than in the template because there is nothing in the
      * shadow tree to attach it to, and removed on disconnect because this element