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

package/dist/pagination/size/pagination-size.js

@@ -23,37 +23,26 @@ import '../../select/index.js';
  * consumer's, and a control that can only sit at one end of one row has taken
  * that decision for them.
  *
- * **`Select`, not a native `<select>`.** It was native first, on the argument
- * that the platform's own menu is a wheel on a phone and the widget a
- * screen-reader user already knows. What that argument leaves out is that the
- * library then has two dropdowns that are identical closed and different open,
- * and a reader meets both in the same footer as a table's filters. Consistency
- * is the whole product here, and it wins.
+ * **`Select`, not a native `<select>`.** Two dropdowns identical closed and
+ * different open meet each other in the same footer as a table's filters. The
+ * caret is `Select`'s rather than a color literal baked into a data URI,
+ * because a background image cannot read `currentColor`, and the label is a
+ * real `<label for>` against the trigger's own id.
  *
- * What it takes back with it: the caret is `Select`'s again rather than a color
- * literal baked into a data URI, because a background image cannot read
- * `currentColor`, and the label is a real `<label for>` against the trigger's
- * own id, which `Select` already renders and already tests.
+ * **The label sits on the row, not above it.** `Select`'s host is a column, and
+ * an outer-tree rule beats a `:host` rule, so turning it into a row needs no
+ * property on `Select` and nothing written into the consumer's markup.
  *
- * **The label sits on the row, not above it.** Every other field in the library
- * stacks its label because it stands in a column of fields; this one stands in a
- * footer beside a run of page numbers, and a two-line control there makes the
- * whole row two lines tall. `Select`'s host is a column, and an outer-tree rule
- * beats a `:host` rule, so turning it into a row needs no property on `Select`
- * and nothing written into the consumer's markup.
+ * **An empty `sizes` renders nothing**, rather than falling back to the
+ * built-in list, which would be a component overruling a consumer who said
+ * "none". Same rule as `Pagination` over a single page, and reported the same
+ * way, through `ElementInternals.states` rather than an attribute the server
+ * never wrote.
  *
- * **An empty `sizes` renders nothing.** A chooser with nothing to choose from
- * is a control a reader can operate and cannot use, which is worse than an
- * absence. Falling back to the built-in list was the other answer and it is a
- * component overruling a consumer who said "none". Same rule as `Pagination`
- * over a single page, and reported the same way, through
- * `ElementInternals.states` rather than an attribute the server never wrote.
- *
- * `value` is the controlled property and `default-value` seeds one this owns,
- * the same contract every other stateful element here carries. Changing it
- * announces `helix-before-change`; what a consumer does with that is re-query and move
- * back to page one, which is theirs to decide because only they know whether
- * the reader's position should survive it.
+ * `value` is the controlled property and `default-value` seeds one this owns.
+ * Changing it announces `helix-before-change`; re-querying and moving back to
+ * page one is the consumer's, because only they know whether the reader's
+ * position should survive it.
  *
  * @since 0.1.0
  * @status experimental
@@ -70,14 +59,6 @@ import '../../select/index.js';
 let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * The sizes offered, comma separated.
-         *
-         * A string rather than an array, so the whole control is expressible in
-         * markup and survives a server render. Anything that is not a positive number
-         * is dropped rather than rendered as an option that cannot mean anything.
-         */
-        this.sizes = '10,25,50,100';
         /**
          * Size to start on, where nothing declared one.
          */
@@ -92,6 +73,14 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
          * Absent uses the runtime's own.
          */
         this.locale = '';
+        /**
+         * The sizes offered, comma separated.
+         *
+         * A string rather than an array, so the whole control is expressible in
+         * markup and survives a server render. Anything that is not a positive number
+         * is dropped rather than rendered as an option that cannot mean anything.
+         */
+        this.sizes = '10,25,50,100';
         /** The size, whoever set it, and `undefined` until somebody has. */
         this.valueState = undefined;
         this.handleChange = (event) => {
@@ -136,8 +125,6 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
      * Reading gives the real one; writing declares it the consumer's, and
      * `default-value` seeds one this element owns. Same accessor pair as
      * `Pagination.page` and the calendar's `month`.
-     *
-     *
      */
     get value() {
         return this.valueState ?? this.defaultValue;
@@ -166,8 +153,7 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
     willUpdate(changed) {
         super.willUpdate(changed);
         /* Through `toggleState`, like `Pagination`'s: an engine without
-           `CustomStateSet` gets an empty select rather than no element, which is the
-           behavior this had before. */
+           `CustomStateSet` gets an empty select rather than no element. */
         this.toggleState('empty', this.options.length === 0);
     }
     /**
@@ -177,16 +163,10 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
      * wrap this one, pass it a property the base does not know about, or leave it
      * out, without reimplementing the whole template to do any of them.
      *
-     * **The tags are interpolated, so each tier renders its own.** They were
-     * written out as `<helix-select>` on the argument that each tier imports its
-     * own element under that name, which works and costs more than it looks: the
-     * name means two different things depending on what a consumer imported, this
-     * tier composes an element it does not ship, and the composition cannot be
-     * tested here at all, since there is no `helix-select` on this tier to test it
-     * against. `tier` resolves the name instead, and the styled subclass changes
-     * it in one line rather than reimplementing this method. A tier that renders
-     * its own elements is a tier that stands alone, which is the claim the package
-     * makes.
+     * **The tags are interpolated, so each tier renders its own.** Writing
+     * `<helix-select>` out would make this tier compose an element it does not
+     * ship and cannot test against, there being no `helix-select` here. `tier`
+     * resolves the name instead, and the styled subclass changes it in one line.
      */
     renderSelect() {
         const select = this.tag('select');
@@ -212,20 +192,20 @@ let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends Heli
     }
 };
 __decorate([
-    property()
-], HelixHeadlessPaginationSize.prototype, "sizes", void 0);
+    property({ attribute: 'default-value', type: Number })
+], HelixHeadlessPaginationSize.prototype, "defaultValue", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPaginationSize.prototype, "value", null);
-__decorate([
-    property({ attribute: 'default-value', type: Number })
-], HelixHeadlessPaginationSize.prototype, "defaultValue", void 0);
 __decorate([
     property()
 ], HelixHeadlessPaginationSize.prototype, "label", void 0);
 __decorate([
     property()
 ], HelixHeadlessPaginationSize.prototype, "locale", void 0);
+__decorate([
+    property()
+], HelixHeadlessPaginationSize.prototype, "sizes", void 0);
 HelixHeadlessPaginationSize = __decorate([
     customElement('helix-headless-pagination-size')
 ], HelixHeadlessPaginationSize);

package/dist/pagination/summary/pagination-summary.d.ts

@@ -45,18 +45,6 @@ import { type TemplateResult } from 'lit';
  * @documentation https://helix.fusion.dev/components/pagination
  */
 export declare class HelixHeadlessPaginationSummary extends HelixElement {
-    /**
-     * The page on show, one-based.
-     */
-    page: number;
-    /**
-     * How many items are on a page.
-     */
-    pageSize: number;
-    /**
-     * How many items there are across every page.
-     */
-    total: number;
     /**
      * The reading, with `{from}`, `{to}` and `{total}` filled in.
      *
@@ -79,6 +67,18 @@ export declare class HelixHeadlessPaginationSummary extends HelixElement {
      * Absent uses the runtime's own.
      */
     locale: string;
+    /**
+     * The page on show, one-based.
+     */
+    page: number;
+    /**
+     * How many items are on a page.
+     */
+    pageSize: number;
+    /**
+     * How many items there are across every page.
+     */
+    total: number;
     /** Held across every component asking for the same locale. */
     private get numbers();
     protected render(): TemplateResult;

package/dist/pagination/summary/pagination-summary.js

@@ -54,18 +54,6 @@ import { property } from 'lit/decorators.js';
 let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extends HelixElement {
     constructor() {
         super(...arguments);
-        /**
-         * The page on show, one-based.
-         */
-        this.page = 1;
-        /**
-         * How many items are on a page.
-         */
-        this.pageSize = 0;
-        /**
-         * How many items there are across every page.
-         */
-        this.total = 0;
         /**
          * The reading, with `{from}`, `{to}` and `{total}` filled in.
          *
@@ -88,6 +76,18 @@ let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extend
          * Absent uses the runtime's own.
          */
         this.locale = '';
+        /**
+         * The page on show, one-based.
+         */
+        this.page = 1;
+        /**
+         * How many items are on a page.
+         */
+        this.pageSize = 0;
+        /**
+         * How many items there are across every page.
+         */
+        this.total = 0;
     }
     /** Held across every component asking for the same locale. */
     get numbers() {
@@ -124,6 +124,12 @@ let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extend
             .replaceAll('{total}', this.numbers(this.total))}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessPaginationSummary.prototype, "format", void 0);
+__decorate([
+    property()
+], HelixHeadlessPaginationSummary.prototype, "locale", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPaginationSummary.prototype, "page", void 0);
@@ -133,12 +139,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessPaginationSummary.prototype, "total", void 0);
-__decorate([
-    property()
-], HelixHeadlessPaginationSummary.prototype, "format", void 0);
-__decorate([
-    property()
-], HelixHeadlessPaginationSummary.prototype, "locale", void 0);
 HelixHeadlessPaginationSummary = __decorate([
     customElement('helix-headless-pagination-summary')
 ], HelixHeadlessPaginationSummary);

package/dist/pin-input/root/pin-input-root.d.ts

@@ -7,11 +7,10 @@ declare const HelixHeadlessPinInput_base: (new (...args: any[]) => import("@fusi
  * @summary A short code, one character to a box.
  *
  * @description
- * **One `<input>` per cell, rather than one input drawn as cells.** Both are
- * built in the wild and the trade is real: a single field autofills perfectly
- * and needs a drawn caret nobody can style well, and separate fields give every
- * box a real focus ring, a real caret and a real tab stop for free. This takes
- * the second, and then closes autofill's gap rather than living with it, below.
+ * **One `<input>` per cell, rather than one input drawn as cells.** A single
+ * field autofills perfectly and needs a drawn caret nobody can style well;
+ * separate fields give every box a real focus ring, a real caret and a real tab
+ * stop for free. Autofill's gap is closed below rather than lived with.
  *
  * **Anything longer than one character is treated as a paste, wherever it
  * lands.** That covers the obvious case and two that are not: a browser
@@ -59,33 +58,13 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      */
     autocomplete: string;
     /**
-     * How many characters the code has.
+     * Accessible name for one box, with `{index}` and `{length}` filled in.
      */
-    length: number;
+    cellLabel: string;
     /**
-     * What a box accepts, which decides the keyboard a phone offers.
-     *
-     * `numeric` and `alphanumeric` also refuse anything else on the way in,
-     * because a code that is digits is digits: letting a letter into a box a
-     * reader cannot submit is a mistake they have to find and undo themselves.
-     * `text` refuses nothing and only trims, so it is the mode for a code with a
-     * hyphen in it.
-     *
-     * **`alphanumeric` is ASCII letters and digits**, which is narrower than the
-     * word is in general and is the right narrowness here. A code of this kind
-     * comes off a keypad, an SMS or an authenticator, and none of them emit `é`;
-     * a filter that accepted it would let through a character the service on the
-     * other end is going to reject. A consumer whose codes really do carry
-     * marked letters wants `text`, which judges nothing.
-     *
-     * **Not reflected**, and it was until this component's own server spec caught
-     * it: nothing selects on it, so all reflection did was write `type="numeric"`
-     * onto every `<helix-pin-input>` ever rendered, an attribute no consumer's
-     * markup had. That is the fault `Input`'s own `type` had and the reason the
-     * area rules carry the sentence "reflect only what CSS selects on". The real
-     * inputs take it as a binding, which is what makes the keyboard follow.
+     * How many characters the code has.
      */
-    type: PinType;
+    length: number;
     /**
      * Whether the characters are hidden, the way a password is.
      */
@@ -99,9 +78,7 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * `mask`, where the cell is a password input and a hand-drawn glyph would
      * have to know that.
      *
-     * Empty by default, because a row of boxes already reads as a row of boxes
-     * and a dot in each is a choice about how much the field should announce
-     * itself before anybody has touched it.
+     * Empty by default, because a row of boxes already reads as a row of boxes.
      */
     placeholder: string;
     /**
@@ -109,9 +86,28 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      */
     readOnly: boolean;
     /**
-     * Accessible name for one box, with `{index}` and `{length}` filled in.
+     * What a box accepts, which decides the keyboard a phone offers.
+     *
+     * `numeric` and `alphanumeric` also refuse anything else on the way in,
+     * because a code that is digits is digits: letting a letter into a box a
+     * reader cannot submit is a mistake they have to find and undo themselves.
+     * `text` refuses nothing and only trims, so it is the mode for a code with a
+     * hyphen in it.
+     *
+     * **`alphanumeric` is ASCII letters and digits**, which is narrower than the
+     * word is in general and is the right narrowness here. A code of this kind
+     * comes off a keypad, an SMS or an authenticator, and none of them emit `é`;
+     * a filter that accepted it would let through a character the service on the
+     * other end is going to reject. A consumer whose codes really do carry
+     * marked letters wants `text`, which judges nothing.
+     *
+     * **Not reflected**: nothing selects on it, so reflecting only writes
+     * `type="numeric"` onto every `<helix-pin-input>` ever rendered, an attribute
+     * no consumer's markup had. The area rules carry the sentence "reflect only
+     * what CSS selects on". The real inputs take it as a binding, which is what
+     * makes the keyboard follow.
      */
-    cellLabel: string;
+    type: PinType;
     /** Focus is delegated, so the host is never the focus target. */
     static shadowRootOptions: ShadowRootInit;
     /** How many boxes there are, clamped once so every reader agrees. */
@@ -153,17 +149,9 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * The code as it stood when focus arrived, so a visit that changed nothing
      * says nothing.
      *
-     * **This is the platform's reading, and it was the other one until it was
-     * measured.** It held the value at the last *commit*, on the argument that
-     * recognizing an arrival is hard here: this component moves focus itself on
-     * every character, so most `focus` events are ones it caused, and telling
-     * those apart rests entirely on `relatedTarget`. That is true and it is not
-     * an obstacle, because `handleFocusOut` was already doing exactly that guard
-     * one method away. The reasoning had talked itself out of a check it had
-     * already written.
-     *
-     * **What the two readings do to a real browser**, measured in Chromium
-     * against a native `<input>` with real keystrokes:
+     * **Baselined on arrival, not at the last commit**, which is the platform's
+     * reading. What the two do to a real browser, measured in Chromium against a
+     * native `<input>` with real keystrokes:
      *
      * | | native | last commit | on arrival |
      * |---|---|---|---|
@@ -195,13 +183,12 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * Whether focus is currently somewhere inside the row.
      *
      * **The arrival is a transition, not a `relatedTarget` reading**, which is
-     * what the first version of this did and is what the exit still does. It does
-     * not work on the way in for two separate reasons and the second is the one
-     * that decides it. Every character moves focus to the next box, so an
-     * unguarded `focusin` re-baselines on each keystroke and the row can never
-     * report anything: measured, the three commit specs went silent at once. And
-     * `focusin` carries `relatedTarget` in a browser and not in happy-dom, so a
-     * guard written on it is a guard that holds in production and not in the
+     * what the exit still does. `relatedTarget` does not work on the way in for
+     * two reasons and the second decides it. Every character moves focus to the
+     * next box, so an unguarded `focusin` re-baselines on each keystroke and the
+     * row can never report anything: measured, the three commit specs went silent
+     * at once. And `focusin` carries `relatedTarget` in a browser and not in
+     * happy-dom, so a guard written on it holds in production and not in the
      * specs, which is the worse half. This flag needs neither: entering is
      * `focusin` while it is `false`, and nothing else is.
      */
@@ -214,16 +201,15 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      */
     private readonly handleFocusIn;
     /**
-     * Commits when focus leaves the row, which is the moment every other field in
-     * the library has and this one did not.
+     * Commits when focus leaves the row.
      *
      * `change` is one of the two events `MixinField` reads as "the reader has had
-     * a go at this", so a code that was never completed was never `touched` and
-     * its own `tooShort` message could not show: two boxes of four filled and
-     * tabbed away from was answered with nothing at all. `Input` gets this for
-     * free by relaying its control's own `change`; here the cells each fire one,
-     * none of them means the code is entered, and neither does any single one of
-     * them mean the reader has left.
+     * a go at this", so without this a code that was never completed is never
+     * `touched` and its own `tooShort` message cannot show: two boxes of four
+     * filled and tabbed away from is answered with nothing at all. `Input` gets
+     * this for free by relaying its control's own `change`; here the cells each
+     * fire one, none of them means the code is entered, and neither does any
+     * single one of them mean the reader has left.
      *
      * **Focus leaving the row, and not a cell.** Every character moves focus to
      * the next box, so a per-cell blur would commit on every keystroke, which is
@@ -234,11 +220,9 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * Announces the code as entered, from whichever moment reached it first.
      *
      * **One writer, because the fact has two moments and only one meaning.** A
-     * filled code and a row being left are both "the reader is done with this",
-     * and they were two dispatch sites kept from disagreeing by both remembering
-     * to update `committed`. They are one call now, so a third moment cannot be
-     * added that fires without baselining, which is the way the pair would have
-     * drifted.
+     * filled code and a row being left are both "the reader is done with this".
+     * Dispatching from either site directly is how a moment gets added that fires
+     * without baselining.
      *
      * Silent when nothing moved since the baseline, which is what makes it safe
      * to call from both: completing a code that is already the committed one, or
@@ -252,11 +236,10 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * Reports the code and a verdict on it.
      *
      * **A half-entered code is invalid whether or not it is required, and that is
-     * the platform's answer rather than ours.** It looked like an oversight worth
-     * a question: `required` guards `valueMissing` and nothing guards `tooShort`,
-     * so an optional code is refused for being half filled. Measured in Chromium
-     * against a native `<input minlength="4">` with real keystrokes, which is the
-     * feature this is the same shape as:
+     * the platform's answer rather than ours.** `required` guards `valueMissing`
+     * and nothing guards `tooShort`, so an optional code is refused for being half
+     * filled. Measured in Chromium against a native `<input minlength="4">` with
+     * real keystrokes, which is the feature this is the same shape as:
      *
      * | | optional | required |
      * |---|---|---|