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

package/dist/tabs/root/tabs-root.d.ts

@@ -6,8 +6,8 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  *
  * @description
  * Selection is coordinated by event, the same shape the accordion and the tree
- * use: a tab dispatches `SelectionChange` and the root pairs it with the panel
- * of the same value. Nothing registers with anything, so tabs added later work
+ * use: a tab dispatches `helix-select` and the root pairs it with the panel of
+ * the same value. Nothing registers with anything, so tabs added later work
  * without the root being told.
  *
  * The tab list is a single tab stop, moved with the arrow keys through
@@ -35,6 +35,18 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     protected readonly keys: KeyboardNavigationController;
     private readonly indicator;
+    /**
+     * Accessible name for the tab list.
+     */
+    label: string;
+    /**
+     * Whether arrowing to a tab also selects it.
+     *
+     * Automatic is the default because showing a panel is usually cheap. Set this
+     * where it is not, so a reader arrowing past four tabs does not load four
+     * panels on the way.
+     */
+    manual: boolean;
     /**
      * How the row reads.
      *
@@ -44,35 +56,14 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      * heads a page. `segmented` puts the pill in a framed, sunken track, which
      * reads as one control rather than as a row.
      *
-     * `segmented` and not `toggle`, which is what this was called. An appearance
-     * value that is another component's name says "it looks like that one", which
-     * a reader can only act on if they already know what that one looks like, and
-     * every other appearance in the library describes itself: `outlined`,
-     * `spaced`, `plain`. This component's own comments called it segmented in
-     * both places it explained itself, which is the name that was doing the work.
-     *
-     * `underlined` and not `underline` for the shape of the word rather than the
-     * sense: the two values sit in one list and read as a pair, and `segmented`
-     * is a participle. `outlined` on Accordion is the same word doing the same
-     * job. The example file was already `underlined.html`, which is what a reader
-     * meets first.
+     * A value describes itself rather than naming another component: `segmented`
+     * and `underlined` are participles reading as a pair, the way `outlined` on
+     * Accordion does.
      *
      * Reflected and left unset by default, so the host carries nothing a
      * consumer's server markup does not already have.
      */
     variant?: 'segmented' | 'underlined';
-    /**
-     * Accessible name for the tab list.
-     */
-    label: string;
-    /**
-     * Whether arrowing to a tab also selects it.
-     *
-     * Automatic is the default because showing a panel is usually cheap. Set this
-     * where it is not, so a reader arrowing past four tabs does not load four
-     * panels on the way.
-     */
-    manual: boolean;
     /** Watches for anything that moves a tab, since none of it is a property. */
     private observer;
     private get tabs();
@@ -99,17 +90,17 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     /**
      * The set changed: pair it up, watch it, and measure it.
      *
-     * All three, where this used to be `sync()` alone, and the missing `place()`
-     * is why an indicator could stay unplaced for the life of the page. The order
-     * of events is what does it: the host renders and measures before its tabs
-     * have upgraded, so there is no selected tab to measure and `place` refuses;
-     * the ResizeObserver's one initial callback lands in that same gap; and then
-     * the tabs upgrade, `slotchange` pairs them, nothing measures, and nothing
-     * ever will again, because the host's size never changes.
+     * All three, and dropping `place()` leaves an indicator unplaced for the life
+     * of the page. The order of events is what does it: the host renders and
+     * measures before its tabs have upgraded, so there is no selected tab to
+     * measure and `place` refuses; the ResizeObserver's one initial callback
+     * lands in that same gap; and then the tabs upgrade, `slotchange` pairs them,
+     * nothing measures, and nothing ever will again, because the host's size
+     * never changes.
      *
      * Invisible in every example, because a tab strip that is only tabs is
      * exactly as tall as its tabs, so a mark at the top of the strip is a mark on
-     * the tab. It showed up where something gives the strip a height of its own.
+     * the tab. It shows only where something gives the strip a height of its own.
      */
     private readonly handleSlotChange;
     protected updated(changed: PropertyValues): void;

package/dist/tabs/root/tabs-root.js

@@ -14,8 +14,8 @@ import { HelixHeadlessTab } from '../tab/tab.js';
  *
  * @description
  * Selection is coordinated by event, the same shape the accordion and the tree
- * use: a tab dispatches `SelectionChange` and the root pairs it with the panel
- * of the same value. Nothing registers with anything, so tabs added later work
+ * use: a tab dispatches `helix-select` and the root pairs it with the panel of
+ * the same value. Nothing registers with anything, so tabs added later work
  * without the root being told.
  *
  * The tab list is a single tab stop, moved with the arrow keys through
@@ -44,13 +44,8 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     constructor() {
         super(...arguments);
         /* Arrow keys, Home and End. Same controller as the radio group and the toggle
-           group, which is what the audit asked for once the indicator controller had
-           landed, and this is the traversal that had to grow it: `origin: 'focus'`
-           because `manual` lets focus and selection diverge, and `selects` because
-           `manual` is what decides whether arriving chooses.
-      
-           Roughly thirty lines of index arithmetic went, and with them the last copy
-           of a wrap that had to be right in four places. */
+           group: `origin: 'focus'` because `manual` lets focus and selection diverge,
+           and `selects` because `manual` is what decides whether arriving chooses. */
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.tabs,
             origin: 'focus',
@@ -74,26 +69,26 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
          * panels on the way.
          */
         this.manual = false;
-        /* Through the mixin, so a consumer can refuse the change. It was written
-           straight from the event, which meant `helix-before-activate` was an announcement
-           nobody could answer, while `Radio.Group` two folders away could be. */
+        /* Through the mixin, so a consumer can refuse the change. Moving `active`
+           straight from the event leaves `helix-before-activate` an announcement
+           nobody can answer. */
         this.handleSelection = (event) => {
             this.requestActive(event.detail.value);
         };
         /**
          * The set changed: pair it up, watch it, and measure it.
          *
-         * All three, where this used to be `sync()` alone, and the missing `place()`
-         * is why an indicator could stay unplaced for the life of the page. The order
-         * of events is what does it: the host renders and measures before its tabs
-         * have upgraded, so there is no selected tab to measure and `place` refuses;
-         * the ResizeObserver's one initial callback lands in that same gap; and then
-         * the tabs upgrade, `slotchange` pairs them, nothing measures, and nothing
-         * ever will again, because the host's size never changes.
+         * All three, and dropping `place()` leaves an indicator unplaced for the life
+         * of the page. The order of events is what does it: the host renders and
+         * measures before its tabs have upgraded, so there is no selected tab to
+         * measure and `place` refuses; the ResizeObserver's one initial callback
+         * lands in that same gap; and then the tabs upgrade, `slotchange` pairs them,
+         * nothing measures, and nothing ever will again, because the host's size
+         * never changes.
          *
          * Invisible in every example, because a tab strip that is only tabs is
          * exactly as tall as its tabs, so a mark at the top of the strip is a mark on
-         * the tab. It showed up where something gives the strip a height of its own.
+         * the tab. It shows only where something gives the strip a height of its own.
          */
         this.handleSlotChange = () => {
             this.sync();
@@ -110,9 +105,9 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     /** Pushes the current value down to whichever tab and panel own it. */
     sync() {
         const tabs = this.tabs;
-        /* Through the mixin, which also skips a disabled first tab. The
-           hand-written fallback did not, so a set opening on a disabled tab showed
-           it as current and its panel with it. */
+        /* Through the mixin, which also skips a disabled first tab. A hand-written
+           fallback to the first child shows a disabled tab as current and opens its
+           panel with it. */
         const value = this.resolveActive(tabs)?.value ?? '';
         for (const tab of tabs) {
             tab.selected = tab.value === value;
@@ -136,8 +131,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
          * reordering a list left this permanently dead: the observer gone, nothing
          * to rebuild it, and the component still rendering as though it were
          * watching. Guarded on `hasUpdated`, because the first connection happens
-         * before the first render and there is nothing to watch yet.
-         * `check:observers` holds it. */
+         * before the first render and there is nothing to watch yet. */
         if (this.hasUpdated) {
             this.measure();
             this.watch();
@@ -202,15 +196,15 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
       <div part="panels"><slot name="panels" @slotchange=${this.handleSlotChange}></slot></div>`;
     }
 };
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessTabs.prototype, "variant", void 0);
 __decorate([
     property()
 ], HelixHeadlessTabs.prototype, "label", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTabs.prototype, "manual", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTabs.prototype, "variant", void 0);
 HelixHeadlessTabs = __decorate([
     customElement('helix-headless-tabs')
 ], HelixHeadlessTabs);

package/dist/tabs/tab/tab.d.ts

@@ -24,17 +24,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  */
 export declare class HelixHeadlessTab extends HelixElement {
     /**
-     * Identifies the tab, and pairs it with the panel of the same value.
+     * Whether the tab can be chosen.
      */
-    value: string;
+    disabled: boolean;
     /**
      * Whether this tab is the current one.
      */
     selected: boolean;
     /**
-     * Whether the tab can be chosen.
+     * Identifies the tab, and pairs it with the panel of the same value.
      */
-    disabled: boolean;
+    value: string;
     /** Moves focus to this tab, for the list's arrow keys. */
     focusItem(): void;
     /** Selects this tab and announces it. */
@@ -42,17 +42,17 @@ export declare class HelixHeadlessTab extends HelixElement {
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *
-     * **A custom state and not the `selected` attribute it used to reflect.** The
-     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
-     * radio group answering for its set. Reflected, that put the element's own
-     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
-     * which React reconciles and reports as a mismatch, and which a serialized
-     * element pasted back declares as a choice nobody made. `ElementInternals`
-     * holds it instead, where it is not in the DOM at all.
+     * **A custom state, not a reflected `selected` attribute.** The parent writes
+     * this: a listbox choosing a row, a tab strip moving the tab, a radio group
+     * answering for its set. Reflected, it puts the element's own bookkeeping onto
+     * markup a consumer wrote and a consumer's server never sent, which React
+     * reconciles and reports as a mismatch, and which a serialized element pasted
+     * back declares as a choice nobody made. `ElementInternals` holds it instead,
+     * where it is not in the DOM at all.
      *
      * Reading `selected` is unaffected and so is writing it: the attribute still
      * seeds the property, which is what `<helix-tab selected>` in a consumer's
-     * markup means. What stops is the write back. See 302 and 304.
+     * markup means. What stops is the write back.
      */
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;

package/dist/tabs/tab/tab.js

@@ -33,17 +33,17 @@ let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
     constructor() {
         super(...arguments);
         /**
-         * Identifies the tab, and pairs it with the panel of the same value.
+         * Whether the tab can be chosen.
          */
-        this.value = '';
+        this.disabled = false;
         /**
          * Whether this tab is the current one.
          */
         this.selected = false;
         /**
-         * Whether the tab can be chosen.
+         * Identifies the tab, and pairs it with the panel of the same value.
          */
-        this.disabled = false;
+        this.value = '';
     }
     /** Moves focus to this tab, for the list's arrow keys. */
     focusItem() {
@@ -59,17 +59,17 @@ let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
     /**
      * Mirrors the chosen state where a stylesheet can select on it.
      *
-     * **A custom state and not the `selected` attribute it used to reflect.** The
-     * parent writes this: a listbox choosing a row, a tab strip moving the tab, a
-     * radio group answering for its set. Reflected, that put the element's own
-     * bookkeeping onto markup a consumer wrote and a consumer's server never sent,
-     * which React reconciles and reports as a mismatch, and which a serialized
-     * element pasted back declares as a choice nobody made. `ElementInternals`
-     * holds it instead, where it is not in the DOM at all.
+     * **A custom state, not a reflected `selected` attribute.** The parent writes
+     * this: a listbox choosing a row, a tab strip moving the tab, a radio group
+     * answering for its set. Reflected, it puts the element's own bookkeeping onto
+     * markup a consumer wrote and a consumer's server never sent, which React
+     * reconciles and reports as a mismatch, and which a serialized element pasted
+     * back declares as a choice nobody made. `ElementInternals` holds it instead,
+     * where it is not in the DOM at all.
      *
      * Reading `selected` is unaffected and so is writing it: the attribute still
      * seeds the property, which is what `<helix-tab selected>` in a consumer's
-     * markup means. What stops is the write back. See 302 and 304.
+     * markup means. What stops is the write back.
      */
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -78,10 +78,9 @@ let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
     render() {
         /* No `aria-controls`, and no id for one to point at.
          *
-         * It named `panel-${value}`, an id rendered inside the panel's *own* shadow
-         * root, and an IDREF resolves only within the tree it is written in. So it
-         * pointed at nothing from the day it was written, on every tab, and this
-         * file's own comment said a dangling `aria-controls` is worse than none.
+         * An IDREF resolves only within the tree it is written in, and the panel's
+         * id is rendered inside the panel's *own* shadow root, so an `aria-controls`
+         * here would point at nothing on every tab.
          *
          * There is no id form that could work and no element reference either: a
          * reference is valid only into the same tree or a shadow-including ancestor
@@ -102,14 +101,14 @@ let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
     }
 };
 __decorate([
-    property()
-], HelixHeadlessTab.prototype, "value", void 0);
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTab.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTab.prototype, "selected", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessTab.prototype, "disabled", void 0);
+    property()
+], HelixHeadlessTab.prototype, "value", void 0);
 HelixHeadlessTab = __decorate([
     customElement('helix-headless-tab')
 ], HelixHeadlessTab);

package/dist/textarea/root/textarea-root.d.ts

@@ -51,20 +51,6 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * Whether the box follows its own content rather than scrolling.
      */
     autoGrow: boolean;
-    /**
-     * Shown while the field is empty.
-     *
-     * Not a label: it goes when typing starts.
-     */
-    placeholder: string;
-    /**
-     * Whether the field refuses input while still submitting its value.
-     */
-    readOnly: boolean;
-    /**
-     * How many lines the box is before anything is typed.
-     */
-    rows: number;
     /**
      * How many characters wide the box is, where the layout is not deciding.
      *
@@ -87,10 +73,28 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      */
     dirName: string;
     /**
-     * How the browser wraps the text, and whether the breaks are submitted with
-     * it.
+     * Most characters the value may have.
      */
-    wrap: 'hard' | 'off' | 'soft';
+    maxLength?: number;
+    /**
+     * Fewest characters the value may have.
+     *
+     * Forwarded to the real `<textarea>` rather than checked here, which is what
+     * makes the message the browser's and therefore the reader's own language.
+     * No `pattern`: the platform does not give a textarea one, and inventing it
+     * would be this library guessing where the point is to stop guessing.
+     */
+    minLength?: number;
+    /**
+     * Shown while the field is empty.
+     *
+     * Not a label: it goes when typing starts.
+     */
+    placeholder: string;
+    /**
+     * Whether the field refuses input while still submitting its value.
+     */
+    readOnly: boolean;
     /** Focus is delegated to the control, so the host is never the target. */
     static shadowRootOptions: ShadowRootInit;
     private get control();
@@ -119,11 +123,11 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
     /**
      * Re-measures when the box changes rather than only when a property does.
      *
-     * The height was computed on Lit updates alone, and nothing about a container
-     * narrowing, a font swapping, or the field finally gaining a layout box is a
-     * property change here. A field that wrapped to three lines at one width kept
-     * a three-line height at half the width and clipped the rest behind
-     * `overflow: hidden`, with no way for a reader to reach it.
+     * Nothing about a container narrowing, a font swapping, or the field finally
+     * gaining a layout box is a property change here, so on Lit updates alone a
+     * field that wrapped to three lines at one width keeps that three-line height
+     * at half the width and clips the rest behind `overflow: hidden`, with no way
+     * for a reader to reach it.
      *
      * Observing the control also covers the zero case above from the other side:
      * a `ResizeObserver` fires when an element gains a box, so a field that was
@@ -143,11 +147,11 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * The caret and the selection, under the platform's own names.
      *
      * **The whole reason this renders a real `<textarea>` is the caret**, and the
-     * caret was the one thing a consumer could not reach: the control is inside
-     * this shadow root, so `querySelector` does not find it and there was no way
-     * to ask where the selection is, let alone move it. A field that cannot be
-     * scripted at the caret cannot do an insert-at-cursor toolbar, which is the
-     * first thing anybody builds on a textarea.
+     * control is inside this shadow root, so `querySelector` does not find it and
+     * a consumer has no other way to ask where the selection is, let alone move
+     * it. A field that cannot be scripted at the caret cannot do an
+     * insert-at-cursor toolbar, which is the first thing anybody builds on a
+     * textarea.
      *
      * Written through to the control, and answering zero before there is one,
      * which is where an empty field's caret would be anyway.
@@ -193,18 +197,14 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
-     * Fewest characters the value may have.
-     *
-     * Forwarded to the real `<textarea>` rather than checked here, which is what
-     * makes the message the browser's and therefore the reader's own language.
-     * No `pattern`: the platform does not give a textarea one, and inventing it
-     * would be this library guessing where the point is to stop guessing.
+     * How many lines the box is before anything is typed.
      */
-    minLength?: number;
+    rows: number;
     /**
-     * Most characters the value may have.
+     * How the browser wraps the text, and whether the breaks are submitted with
+     * it.
      */
-    maxLength?: number;
+    wrap: 'hard' | 'off' | 'soft';
     protected render(): TemplateResult;
 }
 declare global {

package/dist/textarea/root/textarea-root.js

@@ -66,20 +66,6 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
          * Whether the box follows its own content rather than scrolling.
          */
         this.autoGrow = false;
-        /**
-         * Shown while the field is empty.
-         *
-         * Not a label: it goes when typing starts.
-         */
-        this.placeholder = '';
-        /**
-         * Whether the field refuses input while still submitting its value.
-         */
-        this.readOnly = false;
-        /**
-         * How many lines the box is before anything is typed.
-         */
-        this.rows = 3;
         /**
          * The name a second entry carries, holding which way the text runs.
          *
@@ -92,10 +78,15 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
          */
         this.dirName = '';
         /**
-         * How the browser wraps the text, and whether the breaks are submitted with
-         * it.
+         * Shown while the field is empty.
+         *
+         * Not a label: it goes when typing starts.
          */
-        this.wrap = 'soft';
+        this.placeholder = '';
+        /**
+         * Whether the field refuses input while still submitting its value.
+         */
+        this.readOnly = false;
         /**
          * Every keystroke, cancelable, and put back where it is refused.
          *
@@ -111,9 +102,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
             const next = control.value;
             /* Through the mixin, which announces and then applies only if the value is
                the element's to move. The native control has already changed either way,
-               so wherever the answer does not follow it has to be put back: that is a
-               refusal, and it is equally a consumer who owns the value and has not
-               given a new one yet. Both are "what is on screen is not the answer". */
+               so wherever the answer does not follow it has to be put back. */
             this.requestValue(next);
             restoreValue(control, this.value);
             this.grow();
@@ -123,6 +112,15 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
             event.stopPropagation();
             this.dispatchEvent(new Event('change', { bubbles: true, composed: false }));
         };
+        /**
+         * How many lines the box is before anything is typed.
+         */
+        this.rows = 3;
+        /**
+         * How the browser wraps the text, and whether the breaks are submitted with
+         * it.
+         */
+        this.wrap = 'soft';
     }
     /** Focus is delegated to the control, so the host is never the target. */
     static { this.shadowRootOptions = {
@@ -152,11 +150,10 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         /* Zero is not a height, it is the absence of a layout box.
          *
          * An element with `display: none` anywhere above it reports `scrollHeight`
-         * as zero, and this wrote that straight back as a fixed `block-size`. The
-         * field then had a real inline height of zero pixels and stayed there:
-         * every later call measured a control pinned to zero and measured zero
-         * again. A textarea inside a tab panel, an accordion, or anything else that
-         * renders shut and opens later came out as a hairline with the text hidden
+         * as zero. Written back as a fixed `block-size` it pins the field there,
+         * since every later call then measures a control at zero and measures zero
+         * again: a textarea inside a tab panel, an accordion, or anything else that
+         * renders shut and opens later comes out as a hairline with the text hidden
          * behind it. `tabs-root` refuses zero for the same reason.
          *
          * The reset to `auto` above has already been written by this point, which
@@ -190,11 +187,11 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
      * The caret and the selection, under the platform's own names.
      *
      * **The whole reason this renders a real `<textarea>` is the caret**, and the
-     * caret was the one thing a consumer could not reach: the control is inside
-     * this shadow root, so `querySelector` does not find it and there was no way
-     * to ask where the selection is, let alone move it. A field that cannot be
-     * scripted at the caret cannot do an insert-at-cursor toolbar, which is the
-     * first thing anybody builds on a textarea.
+     * control is inside this shadow root, so `querySelector` does not find it and
+     * a consumer has no other way to ask where the selection is, let alone move
+     * it. A field that cannot be scripted at the caret cannot do an
+     * insert-at-cursor toolbar, which is the first thing anybody builds on a
+     * textarea.
      *
      * Written through to the control, and answering zero before there is one,
      * which is where an empty field's caret would be anyway.
@@ -267,11 +264,10 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     /* Rebuilt on reconnection, because nothing else does it.
      *
      * `firstUpdated` runs once for the life of the element and
-     * `disconnectedCallback` runs every time it moves, so a framework reordering
-     * a list left this permanently dead: the observer gone, nothing to rebuild
-     * it, and the component still rendering as though it were watching. Guarded
-     * on `hasUpdated`, because the first connection happens before the first
-     * render and there is nothing to watch yet. `check:observers` holds it. */
+     * `disconnectedCallback` runs every time it moves, so without this a
+     * framework reordering a list leaves the observer gone with nothing to
+     * rebuild it. Guarded on `hasUpdated`, because the first connection happens
+     * before the first render and there is nothing to watch yet. */
     connectedCallback() {
         super.connectedCallback();
         if (this.hasUpdated) {
@@ -350,6 +346,18 @@ __decorate([
 __decorate([
     property({ attribute: 'auto-grow', reflect: true, type: Boolean })
 ], HelixHeadlessTextarea.prototype, "autoGrow", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessTextarea.prototype, "cols", void 0);
+__decorate([
+    property({ attribute: 'dirname' })
+], HelixHeadlessTextarea.prototype, "dirName", void 0);
+__decorate([
+    property({ attribute: 'maxlength', type: Number })
+], HelixHeadlessTextarea.prototype, "maxLength", void 0);
+__decorate([
+    property({ attribute: 'minlength', type: Number })
+], HelixHeadlessTextarea.prototype, "minLength", void 0);
 __decorate([
     property()
 ], HelixHeadlessTextarea.prototype, "placeholder", void 0);
@@ -359,21 +367,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTextarea.prototype, "rows", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessTextarea.prototype, "cols", void 0);
-__decorate([
-    property({ attribute: 'dirname' })
-], HelixHeadlessTextarea.prototype, "dirName", void 0);
 __decorate([
     property()
 ], HelixHeadlessTextarea.prototype, "wrap", void 0);
-__decorate([
-    property({ attribute: 'minlength', type: Number })
-], HelixHeadlessTextarea.prototype, "minLength", void 0);
-__decorate([
-    property({ attribute: 'maxlength', type: Number })
-], HelixHeadlessTextarea.prototype, "maxLength", void 0);
 HelixHeadlessTextarea = __decorate([
     customElement('helix-headless-textarea')
 ], HelixHeadlessTextarea);