@fusion.dev/helix-headless 0.179.0 → 0.180.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.179.0",
+  "version": "0.180.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -49,13 +49,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.179.0",
-    "@fusion.dev/helix-icons": "0.179.0",
+    "@fusion.dev/helix-core": "0.180.0",
+    "@fusion.dev/helix-icons": "0.180.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.179.0",
-    "@fusion.dev/helix-testing": "0.179.0",
+    "@fusion.dev/helix-cem": "0.180.0",
+    "@fusion.dev/helix-testing": "0.180.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -10476,6 +10476,12 @@ for the page's language, then the English. */
 so a form in another language speaks it. Unset is the sentence registered
 for the page's language, then the English. */
   rangeLengthMessage?: (HelixHeadlessDateInput["rangeLengthMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "range-order-message"?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  rangeOrderMessage?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
   /** The message shown when a date is after `max`. `{max}` is replaced with
 `max`, written the way the field writes dates. */
   "range-overflow-message"?: (HelixHeadlessDateInput["rangeOverflowMessage"]) | undefined;
@@ -11008,6 +11014,12 @@ for the page's language, then the English. */
 so a form in another language speaks it. Unset is the sentence registered
 for the page's language, then the English. */
   "prop:rangeLengthMessage"?: (HelixHeadlessDateInput["rangeLengthMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "attr:range-order-message"?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "prop:rangeOrderMessage"?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
   /** The message shown when a date is after `max`. `{max}` is replaced with
 `max`, written the way the field writes dates. */
   "attr:range-overflow-message"?: (HelixHeadlessDateInput["rangeOverflowMessage"]) | undefined;
@@ -11527,6 +11539,12 @@ it. */
   "previous-years-label"?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
   /** Accessible name for the control that moves back a page, in the years. */
   previousYearsLabel?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "range-order-message"?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  rangeOrderMessage?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "range-overflow-message"?: (HelixHeadlessDatePicker["rangeOverflowMessage"]) | undefined;
@@ -11882,6 +11900,12 @@ it. */
   "attr:previous-years-label"?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
   /** Accessible name for the control that moves back a page, in the years. */
   "prop:previousYearsLabel"?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "attr:range-order-message"?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "prop:rangeOrderMessage"?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "attr:range-overflow-message"?: (HelixHeadlessDatePicker["rangeOverflowMessage"]) | undefined;
@@ -19157,7 +19181,8 @@ React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
 
 **The list needs a height to scroll in**: the styled tier's
 `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-headless tier. Import the Option family as well, whose elements are drawn.
+headless tier. The options drawn are this tier's Option, which the page
+imports, as it imports the options it writes.
 A server sends the list empty, and the options are drawn once it hydrates. */
   items?: (HelixHeadlessListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
@@ -19455,7 +19480,8 @@ React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
 
 **The list needs a height to scroll in**: the styled tier's
 `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-headless tier. Import the Option family as well, whose elements are drawn.
+headless tier. The options drawn are this tier's Option, which the page
+imports, as it imports the options it writes.
 A server sends the list empty, and the options are drawn once it hydrates. */
   "prop:items"?: (HelixHeadlessListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
@@ -40938,7 +40964,8 @@ export type CustomElements = {
    * The composer clears only when no listener cancels the send, so the text is
    * kept when you cancel a send that failed.
    *
-   * **In a form, the draft is the composer's value**, submitted under `name`. A
+   * **In a form, the draft is the composer's value**, submitted under `name`,
+   * and an empty draft submits an empty entry, as a native textarea does. A
    * form reset puts back the `value` the markup declared, and a `<fieldset
    * disabled>` turns the composer off. Sending is still `helix-send`, and it
    * does not submit the form.
@@ -43223,6 +43250,18 @@ export type CustomElements = {
    * framework would re-render over an element the combobox inserted, so add the
    * option in your event handler.
    *
+   * **The options are an import of their own.** An option is the Option family's,
+   * which the combobox does not register, so a page that writes one imports it
+   * beside the combobox:
+   *
+   * ```js
+   * import '@fusion.dev/helix/combobox'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a combobox holding an option nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -43655,6 +43694,18 @@ export type CustomElements = {
    * Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
    * the loading text are said in a polite live region.
    *
+   * **The commands are an import of their own.** A command is an option, the
+   * Option family's, which the palette does not register, so a page that writes
+   * one imports it beside the palette:
+   *
+   * ```js
+   * import '@fusion.dev/helix/command'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a palette holding an option nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -44230,6 +44281,18 @@ export type CustomElements = {
    * Written on `DataTable`, `columns` has no effect, so watch for it when you
    * move a table from `Table` to `DataTable`.
    *
+   * **The columns are an import of their own.** A column is the Table family's
+   * `TableColumn`, which the data table does not register, so a page that writes
+   * one imports the Table entry beside the data table:
+   *
+   * ```js
+   * import '@fusion.dev/helix/data-table'
+   * import '@fusion.dev/helix/table'
+   * ```
+   *
+   * In development, a data table holding a column nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -44628,6 +44691,8 @@ export type CustomElements = {
    * digits or the arrow keys. Alt+Down opens the calendar from a segment. A
    * `range` is two rows with a dash between them, the start and the end, as
    * React Aria's DateRangePicker draws them, and `multiple` keeps the text.
+   * A range whose end is before its start reports `rangeUnderflow`, as Date
+   * Picker does, with `range-order-message`.
    *
    * Text that is not a date gives the form an empty value, as a native date
    * field does, and `value` keeps the text so it can be corrected.
@@ -44748,6 +44813,8 @@ export type CustomElements = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * so a form in another language speaks it. Unset is the sentence registered
    * for the page's language, then the English.
+   * - `range-order-message`/`rangeOrderMessage`: The message shown when a range ends before it starts. `{start}` is
+   * replaced with the start, written the way the field writes dates.
    * - `range-overflow-message`/`rangeOverflowMessage`: The message shown when a date is after `max`. `{max}` is replaced with
    * `max`, written the way the field writes dates.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The message shown when a date is before `min`. `{min}` is replaced with
@@ -45152,7 +45219,8 @@ export type CustomElements = {
    * when Previous or Next is pressed. Neither moves past `min` or `max`, and the
    * keys stop at them too. A value outside the bounds, on a barred day, or off
    * `step` reports `rangeUnderflow`, `rangeOverflow`, `badInput` or
-   * `stepMismatch`, so a form does not submit it.
+   * `stepMismatch`, so a form does not submit it. A range set from a script
+   * whose end is before its start reports `rangeUnderflow` as well.
    *
    * ## Attributes & Properties
    *
@@ -45233,6 +45301,8 @@ export type CustomElements = {
    * it.
    * - `previous-year-label`/`previousYearLabel`: Accessible name for the control that moves back a year, in the months.
    * - `previous-years-label`/`previousYearsLabel`: Accessible name for the control that moves back a page, in the years.
+   * - `range-order-message`/`rangeOrderMessage`: The validation message for a range that ends before it starts. `{start}`
+   * is replaced with the start, written as a date in `locale`.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a date after `max`. `{max}` is replaced with
    * `max`, written as a date in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a date before `min`. `{min}` is replaced with
@@ -47885,6 +47955,19 @@ export type CustomElements = {
    *   filter goes. Set `chips` and the field adds, updates, and removes those
    *   chips itself, from every `helix-facet` you do not cancel.
    *
+   * **The suggestions you write are an import of their own.** A suggestion is an
+   * option, the Option family's, which the field does not register, so a page
+   * that slots one imports it beside the field:
+   *
+   * ```js
+   * import '@fusion.dev/helix/filter-input'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a field holding an option nobody registered says so once the
+   * page has loaded, with the line to add. The options `source` gives are drawn
+   * as this Option too, and need the same import.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -51459,6 +51542,19 @@ export type CustomElements = {
    *   filter narrows the list, under `layout="grid"`, or while the list is
    *   disabled.
    *
+   * **The options are an import of their own.** An option you write is the Option
+   * family's, which the list does not register, so a page that writes one imports
+   * it beside the list:
+   *
+   * ```js
+   * import '@fusion.dev/helix/listbox'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a list holding an option nobody registered says so once the
+   * page has loaded, with the line to add. The options `items` draws are this
+   * Option too, and need the same import.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -51627,7 +51723,8 @@ export type CustomElements = {
    *
    * **The list needs a height to scroll in**: the styled tier's
    * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-   * headless tier. Import the Option family as well, whose elements are drawn.
+   * headless tier. The options drawn are this tier's Option, which the page
+   * imports, as it imports the options it writes.
    * A server sends the list empty, and the options are drawn once it hydrates. (property only)
    * - `selectedIndex`: Which option is chosen, as an index, or `-1` where none is.
    *
@@ -57836,9 +57933,10 @@ export type CustomElements = {
    *
    * The plot runs left to right in every text direction, as a number line does.
    * The plot, its axes, and the axis names sit in a `plane` part with
-   * `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
-   * reads in its own direction. The summary and the tooltip bubble follow the
-   * page's direction.
+   * `dir="ltr"`, and the arrow keys follow the drawing: Right moves to the next
+   * point on a right-to-left page too. The axis names carry `dir="auto"`, so a
+   * name in Arabic or Hebrew reads in its own direction. The summary and the
+   * tooltip bubble follow the page's direction.
    *
    * **A tap shows the reading under it**, and keeps it until a tap lands
    * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
@@ -57860,7 +57958,7 @@ export type CustomElements = {
    * | Key | What it does |
    * |---|---|
    * | Tab | Moves focus to the plot and shows the first reading. |
-   * | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
+   * | Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. |
    * | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
    * | Home, End | Moves to the first or the last point. |
    * | Page Down, Page Up | Moves a tenth of the points on or back. |
@@ -58312,6 +58410,18 @@ export type CustomElements = {
    * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
    * with the same attribute would.
    *
+   * **The options are an import of their own.** An option is the Option family's,
+   * which the select does not register, so a page that writes one imports it
+   * beside the select:
+   *
+   * ```js
+   * import '@fusion.dev/helix/select'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a select holding an option nobody registered says so once the
+   * page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -70539,7 +70649,8 @@ export type CustomElementsSolidJs = {
    * The composer clears only when no listener cancels the send, so the text is
    * kept when you cancel a send that failed.
    *
-   * **In a form, the draft is the composer's value**, submitted under `name`. A
+   * **In a form, the draft is the composer's value**, submitted under `name`,
+   * and an empty draft submits an empty entry, as a native textarea does. A
    * form reset puts back the `value` the markup declared, and a `<fieldset
    * disabled>` turns the composer off. Sending is still `helix-send`, and it
    * does not submit the form.
@@ -72841,6 +72952,18 @@ export type CustomElementsSolidJs = {
    * framework would re-render over an element the combobox inserted, so add the
    * option in your event handler.
    *
+   * **The options are an import of their own.** An option is the Option family's,
+   * which the combobox does not register, so a page that writes one imports it
+   * beside the combobox:
+   *
+   * ```js
+   * import '@fusion.dev/helix/combobox'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a combobox holding an option nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -73276,6 +73399,18 @@ export type CustomElementsSolidJs = {
    * Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
    * the loading text are said in a polite live region.
    *
+   * **The commands are an import of their own.** A command is an option, the
+   * Option family's, which the palette does not register, so a page that writes
+   * one imports it beside the palette:
+   *
+   * ```js
+   * import '@fusion.dev/helix/command'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a palette holding an option nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -73855,6 +73990,18 @@ export type CustomElementsSolidJs = {
    * Written on `DataTable`, `columns` has no effect, so watch for it when you
    * move a table from `Table` to `DataTable`.
    *
+   * **The columns are an import of their own.** A column is the Table family's
+   * `TableColumn`, which the data table does not register, so a page that writes
+   * one imports the Table entry beside the data table:
+   *
+   * ```js
+   * import '@fusion.dev/helix/data-table'
+   * import '@fusion.dev/helix/table'
+   * ```
+   *
+   * In development, a data table holding a column nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -74256,6 +74403,8 @@ export type CustomElementsSolidJs = {
    * digits or the arrow keys. Alt+Down opens the calendar from a segment. A
    * `range` is two rows with a dash between them, the start and the end, as
    * React Aria's DateRangePicker draws them, and `multiple` keeps the text.
+   * A range whose end is before its start reports `rangeUnderflow`, as Date
+   * Picker does, with `range-order-message`.
    *
    * Text that is not a date gives the form an empty value, as a native date
    * field does, and `value` keeps the text so it can be corrected.
@@ -74376,6 +74525,8 @@ export type CustomElementsSolidJs = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * so a form in another language speaks it. Unset is the sentence registered
    * for the page's language, then the English.
+   * - `range-order-message`/`rangeOrderMessage`: The message shown when a range ends before it starts. `{start}` is
+   * replaced with the start, written the way the field writes dates.
    * - `range-overflow-message`/`rangeOverflowMessage`: The message shown when a date is after `max`. `{max}` is replaced with
    * `max`, written the way the field writes dates.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The message shown when a date is before `min`. `{min}` is replaced with
@@ -74783,7 +74934,8 @@ export type CustomElementsSolidJs = {
    * when Previous or Next is pressed. Neither moves past `min` or `max`, and the
    * keys stop at them too. A value outside the bounds, on a barred day, or off
    * `step` reports `rangeUnderflow`, `rangeOverflow`, `badInput` or
-   * `stepMismatch`, so a form does not submit it.
+   * `stepMismatch`, so a form does not submit it. A range set from a script
+   * whose end is before its start reports `rangeUnderflow` as well.
    *
    * ## Attributes & Properties
    *
@@ -74864,6 +75016,8 @@ export type CustomElementsSolidJs = {
    * it.
    * - `previous-year-label`/`previousYearLabel`: Accessible name for the control that moves back a year, in the months.
    * - `previous-years-label`/`previousYearsLabel`: Accessible name for the control that moves back a page, in the years.
+   * - `range-order-message`/`rangeOrderMessage`: The validation message for a range that ends before it starts. `{start}`
+   * is replaced with the start, written as a date in `locale`.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a date after `max`. `{max}` is replaced with
    * `max`, written as a date in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a date before `min`. `{min}` is replaced with
@@ -77543,6 +77697,19 @@ export type CustomElementsSolidJs = {
    *   filter goes. Set `chips` and the field adds, updates, and removes those
    *   chips itself, from every `helix-facet` you do not cancel.
    *
+   * **The suggestions you write are an import of their own.** A suggestion is an
+   * option, the Option family's, which the field does not register, so a page
+   * that slots one imports it beside the field:
+   *
+   * ```js
+   * import '@fusion.dev/helix/filter-input'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a field holding an option nobody registered says so once the
+   * page has loaded, with the line to add. The options `source` gives are drawn
+   * as this Option too, and need the same import.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -81154,6 +81321,19 @@ export type CustomElementsSolidJs = {
    *   filter narrows the list, under `layout="grid"`, or while the list is
    *   disabled.
    *
+   * **The options are an import of their own.** An option you write is the Option
+   * family's, which the list does not register, so a page that writes one imports
+   * it beside the list:
+   *
+   * ```js
+   * import '@fusion.dev/helix/listbox'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a list holding an option nobody registered says so once the
+   * page has loaded, with the line to add. The options `items` draws are this
+   * Option too, and need the same import.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -81322,7 +81502,8 @@ export type CustomElementsSolidJs = {
    *
    * **The list needs a height to scroll in**: the styled tier's
    * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-   * headless tier. Import the Option family as well, whose elements are drawn.
+   * headless tier. The options drawn are this tier's Option, which the page
+   * imports, as it imports the options it writes.
    * A server sends the list empty, and the options are drawn once it hydrates. (property only)
    * - `selectedIndex`: Which option is chosen, as an index, or `-1` where none is.
    *
@@ -87612,9 +87793,10 @@ export type CustomElementsSolidJs = {
    *
    * The plot runs left to right in every text direction, as a number line does.
    * The plot, its axes, and the axis names sit in a `plane` part with
-   * `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
-   * reads in its own direction. The summary and the tooltip bubble follow the
-   * page's direction.
+   * `dir="ltr"`, and the arrow keys follow the drawing: Right moves to the next
+   * point on a right-to-left page too. The axis names carry `dir="auto"`, so a
+   * name in Arabic or Hebrew reads in its own direction. The summary and the
+   * tooltip bubble follow the page's direction.
    *
    * **A tap shows the reading under it**, and keeps it until a tap lands
    * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
@@ -87636,7 +87818,7 @@ export type CustomElementsSolidJs = {
    * | Key | What it does |
    * |---|---|
    * | Tab | Moves focus to the plot and shows the first reading. |
-   * | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
+   * | Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. |
    * | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
    * | Home, End | Moves to the first or the last point. |
    * | Page Down, Page Up | Moves a tenth of the points on or back. |
@@ -88090,6 +88272,18 @@ export type CustomElementsSolidJs = {
    * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
    * with the same attribute would.
    *
+   * **The options are an import of their own.** An option is the Option family's,
+   * which the select does not register, so a page that writes one imports it
+   * beside the select:
+   *
+   * ```js
+   * import '@fusion.dev/helix/select'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a select holding an option nobody registered says so once the
+   * page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.