@fusion.dev/helix-headless 0.19.1 → 0.20.1

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

@@ -2,7 +2,7 @@ import { AriaForwardController, HelixFormElement, PopoverController } from '@fus
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../date-picker/index.js';
 import '../../tag/index.js';
-declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A date, typed or picked from a calendar.
  *
@@ -57,8 +57,9 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-previous-mark - The glyph on the previous month control.
  * @csspart picker-week - One row of days.
  * @csspart picker-weekday - A column header naming a day of the week.
- * @csspart rest - How many dates are held beyond the ones shown.
+ * @csspart rest - How many dates are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
  * @csspart surface - The floating panel.
+ * @csspart tags - The row the dates sit in.
  * @csspart trigger - The control that opens the calendar.
  * @csspart trigger-icon - The mark on the button that opens the calendar.
  */
@@ -117,20 +118,6 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * Latest date that can be chosen, as `YYYY-MM-DD`.
      */
     max: string;
-    /**
-     * How many dates are shown as tags before the rest are counted, in `multiple`.
-     *
-     * `0` is all of them, and is the default: a cap that guesses is worse than no
-     * cap, because the number that fits depends on the width of the field and the
-     * length of what is in it, neither of which this element knows. What a cap is
-     * genuinely for is a field in a row or a table cell, where a set of twelve
-     * dates would push everything below it down a line at a time.
-     *
-     * The remainder is counted rather than hidden. `+3` is a fact a reader can
-     * act on, where a row that silently stops is a field that appears to have lost
-     * what was put in it, and the count is what tells them there is more to see.
-     */
-    maxTags: number;
     /**
      * Earliest date that can be chosen, as `YYYY-MM-DD`.
      */
@@ -218,7 +205,7 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
     private readonly handleInput;
     /** Adds what was typed to the set, or takes the last one back out. */
     private readonly handleDraftKey;
-    /** The dates that get a tag, which is all of them until `maxTags` says not. */
+    /** The dates that get a tag, which is all of them until the cap says not. */
     private get shownDates();
     /** How many are held beyond the ones shown. */
     private get restCount();

package/dist/date-input/root/date-input-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, } from '@fusion.dev/helix-core';
 import { calendarBlank } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -18,7 +18,7 @@ const dates = (value) => value
     .split(',')
     .map((one) => one.trim())
     .filter(Boolean);
-let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
+let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
@@ -31,7 +31,6 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
         this.firstDayOfWeek = 0;
         this.locale = '';
         this.max = '';
-        this.maxTags = 0;
         this.min = '';
         this.months = 1;
         this.placeholder = 'YYYY-MM-DD';
@@ -153,7 +152,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
     }
     get shownDates() {
         const held = dates(this.value);
-        return this.maxTags > 0 ? held.slice(0, this.maxTags) : held;
+        return this.shownLimit > 0 ? held.slice(0, this.shownLimit) : held;
     }
     get restCount() {
         return Math.max(0, dates(this.value).length - this.shownDates.length);
@@ -272,8 +271,9 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinControlle
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
-        ${this.mode === 'multiple' ? this.shownDates.map((date) => this.renderTag(date)) : nothing}
-        ${this.restCount > 0 ? html `<span part="rest">${`+${this.restCount}`}</span>` : nothing}
+        ${this.mode === 'multiple'
+            ? this.renderTokenRow(this.shownDates.map((date) => this.renderTag(date)), this.restCount)
+            : nothing}
         <input
           part="control"
           id="control"
@@ -347,9 +347,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "max", void 0);
-__decorate([
-    property({ attribute: 'max-tags', type: Number })
-], HelixHeadlessDateInput.prototype, "maxTags", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "min", void 0);

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

@@ -3,7 +3,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
-declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A time, typed or picked from a list.
  *
@@ -76,8 +76,9 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-option-item - The row.
  * @csspart picker-option-label - The words.
  * @csspart picker-option-text - The words and the caption, as one column.
- * @csspart rest - How many times are held beyond the ones shown.
+ * @csspart rest - How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
  * @csspart surface - The floating panel.
+ * @csspart tags - The row the times sit in.
  * @csspart time - One held time, as a tag, in `multiple`.
  * @csspart time-dismiss - The remove button, when `dismissible`.
  * @csspart time-dismiss-mark - The glyph on the dismiss control, where none is slotted.
@@ -104,14 +105,6 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * Latest time that can be chosen, as `HH:mm`.
      */
     max: string;
-    /**
-     * How many times are shown as tags before the rest are counted, in `multiple`.
-     *
-     * `0` is all of them, and is the default, for the reason Date Input gives: how
-     * many fit depends on the width of the field and the length of what is in it,
-     * and this element knows neither.
-     */
-    maxTags: number;
     /**
      * Earliest time that can be chosen, as `HH:mm`.
      */
@@ -181,7 +174,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * being added to, so the field needs somewhere to hold a time before it joins.
      */
     private draft;
-    /** The times that get a tag, which is all of them until `maxTags` says not. */
+    /** The times that get a tag, which is all of them until the cap says not. */
     private get shownTimes();
     /** How many are held beyond the ones shown. */
     private get restCount();

package/dist/time-input/root/time-input-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, PopoverController, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsTime as asTime, customElement, timeAsValue as fromTime, HelixFormElement, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, } from '@fusion.dev/helix-core';
 import { clock } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -14,7 +14,7 @@ import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
 import { isTime, toMinutes, writeTime } from '../../time-picker/root/time-picker-root.js';
-let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControllerOpen(MixinControllerValue(MixinField(HelixFormElement))) {
+let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
@@ -23,7 +23,6 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
         this.autocomplete = '';
         this.locale = '';
         this.max = '23:59';
-        this.maxTags = 0;
         this.min = '00:00';
         this.placeholder = 'HH:mm';
         this.readOnly = false;
@@ -140,7 +139,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
     }
     get shownTimes() {
         const held = this.held;
-        return this.maxTags > 0 ? held.slice(0, this.maxTags) : held;
+        return this.shownLimit > 0 ? held.slice(0, this.shownLimit) : held;
     }
     get restCount() {
         return Math.max(0, this.held.length - this.shownTimes.length);
@@ -272,8 +271,9 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinControlle
     render() {
         return html `${this.renderLabel()}
       <div part="field" @keydown=${this.handleKeydown}>
-        ${this.mode === 'multiple' ? this.shownTimes.map((at) => this.renderTag(at)) : nothing}
-        ${this.restCount > 0 ? html `<span part="rest">${`+${this.restCount}`}</span>` : nothing}
+        ${this.mode === 'multiple'
+            ? this.renderTokenRow(this.shownTimes.map((at) => this.renderTag(at)), this.restCount)
+            : nothing}
         <input
           part="control"
           id="control"
@@ -332,9 +332,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "max", void 0);
-__decorate([
-    property({ attribute: 'max-tags', type: Number })
-], HelixHeadlessTimeInput.prototype, "maxTags", void 0);
 __decorate([
     property()
 ], HelixHeadlessTimeInput.prototype, "min", void 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.19.1",
+  "version": "0.20.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -45,14 +45,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.19.1",
-    "@fusion.dev/helix-icons": "0.19.1",
+    "@fusion.dev/helix-core": "0.20.1",
+    "@fusion.dev/helix-icons": "0.20.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.19.1",
-    "@fusion.dev/helix-testing": "0.19.1",
+    "@fusion.dev/helix-cem": "0.20.1",
+    "@fusion.dev/helix-testing": "0.20.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/types/jsx.d.ts

@@ -4207,30 +4207,6 @@ submits and what `min` and `max` compare against. */
   locale?: (HelixHeadlessDateInput["locale"]) | undefined;
   /** Latest date that can be chosen, as `YYYY-MM-DD`. */
   max?: (HelixHeadlessDateInput["max"]) | undefined;
-  /** How many dates are shown as tags before the rest are counted, in `multiple`.
-
-`0` is all of them, and is the default: a cap that guesses is worse than no
-cap, because the number that fits depends on the width of the field and the
-length of what is in it, neither of which this element knows. What a cap is
-genuinely for is a field in a row or a table cell, where a set of twelve
-dates would push everything below it down a line at a time.
-
-The remainder is counted rather than hidden. `+3` is a fact a reader can
-act on, where a row that silently stops is a field that appears to have lost
-what was put in it, and the count is what tells them there is more to see. */
-  "max-tags"?: (HelixHeadlessDateInput["maxTags"]) | undefined;
-  /** How many dates are shown as tags before the rest are counted, in `multiple`.
-
-`0` is all of them, and is the default: a cap that guesses is worse than no
-cap, because the number that fits depends on the width of the field and the
-length of what is in it, neither of which this element knows. What a cap is
-genuinely for is a field in a row or a table cell, where a set of twelve
-dates would push everything below it down a line at a time.
-
-The remainder is counted rather than hidden. `+3` is a fact a reader can
-act on, where a row that silently stops is a field that appears to have lost
-what was put in it, and the count is what tells them there is more to see. */
-  maxTags?: (HelixHeadlessDateInput["maxTags"]) | undefined;
   /** Earliest date that can be chosen, as `YYYY-MM-DD`. */
   min?: (HelixHeadlessDateInput["min"]) | undefined;
   /** How many dates can be held at once.
@@ -4299,6 +4275,20 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "default-open"?: (HelixHeadlessDateInput["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   defaultOpen?: (HelixHeadlessDateInput["defaultOpen"]) | undefined;
+  /** What the control is called once everything is showing. */
+  "collapse-label"?: (HelixHeadlessDateInput["collapseLabel"]) | undefined;
+  /** What the control is called once everything is showing. */
+  collapseLabel?: (HelixHeadlessDateInput["collapseLabel"]) | undefined;
+  /** Whether the count is a control that shows the rest. */
+  expandable?: (HelixHeadlessDateInput["expandable"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "expand-label"?: (HelixHeadlessDateInput["expandLabel"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  expandLabel?: (HelixHeadlessDateInput["expandLabel"]) | undefined;
+  /** How many tokens to show before the rest become a count. */
+  "max-tags"?: (HelixHeadlessDateInput["maxTags"]) | undefined;
+  /** How many tokens to show before the rest become a count. */
+  maxTags?: (HelixHeadlessDateInput["maxTags"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
   "default-value"?: (HelixHeadlessDateInput["defaultValue"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
@@ -4448,30 +4438,6 @@ submits and what `min` and `max` compare against. */
   "prop:locale"?: (HelixHeadlessDateInput["locale"]) | undefined;
   /** Latest date that can be chosen, as `YYYY-MM-DD`. */
   "prop:max"?: (HelixHeadlessDateInput["max"]) | undefined;
-  /** How many dates are shown as tags before the rest are counted, in `multiple`.
-
-`0` is all of them, and is the default: a cap that guesses is worse than no
-cap, because the number that fits depends on the width of the field and the
-length of what is in it, neither of which this element knows. What a cap is
-genuinely for is a field in a row or a table cell, where a set of twelve
-dates would push everything below it down a line at a time.
-
-The remainder is counted rather than hidden. `+3` is a fact a reader can
-act on, where a row that silently stops is a field that appears to have lost
-what was put in it, and the count is what tells them there is more to see. */
-  "attr:max-tags"?: (HelixHeadlessDateInput["maxTags"]) | undefined;
-  /** How many dates are shown as tags before the rest are counted, in `multiple`.
-
-`0` is all of them, and is the default: a cap that guesses is worse than no
-cap, because the number that fits depends on the width of the field and the
-length of what is in it, neither of which this element knows. What a cap is
-genuinely for is a field in a row or a table cell, where a set of twelve
-dates would push everything below it down a line at a time.
-
-The remainder is counted rather than hidden. `+3` is a fact a reader can
-act on, where a row that silently stops is a field that appears to have lost
-what was put in it, and the count is what tells them there is more to see. */
-  "prop:maxTags"?: (HelixHeadlessDateInput["maxTags"]) | undefined;
   /** Earliest date that can be chosen, as `YYYY-MM-DD`. */
   "prop:min"?: (HelixHeadlessDateInput["min"]) | undefined;
   /** How many dates can be held at once.
@@ -4540,6 +4506,20 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "bool:default-open"?: (HelixHeadlessDateInput["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   "prop:defaultOpen"?: (HelixHeadlessDateInput["defaultOpen"]) | undefined;
+  /** What the control is called once everything is showing. */
+  "attr:collapse-label"?: (HelixHeadlessDateInput["collapseLabel"]) | undefined;
+  /** What the control is called once everything is showing. */
+  "prop:collapseLabel"?: (HelixHeadlessDateInput["collapseLabel"]) | undefined;
+  /** Whether the count is a control that shows the rest. */
+  "prop:expandable"?: (HelixHeadlessDateInput["expandable"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "attr:expand-label"?: (HelixHeadlessDateInput["expandLabel"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "prop:expandLabel"?: (HelixHeadlessDateInput["expandLabel"]) | undefined;
+  /** How many tokens to show before the rest become a count. */
+  "attr:max-tags"?: (HelixHeadlessDateInput["maxTags"]) | undefined;
+  /** How many tokens to show before the rest become a count. */
+  "prop:maxTags"?: (HelixHeadlessDateInput["maxTags"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
   "attr:default-value"?: (HelixHeadlessDateInput["defaultValue"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
@@ -12954,18 +12934,6 @@ Absent uses the runtime's own. */
   locale?: (HelixHeadlessTimeInput["locale"]) | undefined;
   /** Latest time that can be chosen, as `HH:mm`. */
   max?: (HelixHeadlessTimeInput["max"]) | undefined;
-  /** How many times are shown as tags before the rest are counted, in `multiple`.
-
-`0` is all of them, and is the default, for the reason Date Input gives: how
-many fit depends on the width of the field and the length of what is in it,
-and this element knows neither. */
-  "max-tags"?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
-  /** How many times are shown as tags before the rest are counted, in `multiple`.
-
-`0` is all of them, and is the default, for the reason Date Input gives: how
-many fit depends on the width of the field and the length of what is in it,
-and this element knows neither. */
-  maxTags?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
   /** Earliest time that can be chosen, as `HH:mm`. */
   min?: (HelixHeadlessTimeInput["min"]) | undefined;
   /** How many times can be held at once.
@@ -13052,6 +13020,20 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "default-open"?: (HelixHeadlessTimeInput["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   defaultOpen?: (HelixHeadlessTimeInput["defaultOpen"]) | undefined;
+  /** What the control is called once everything is showing. */
+  "collapse-label"?: (HelixHeadlessTimeInput["collapseLabel"]) | undefined;
+  /** What the control is called once everything is showing. */
+  collapseLabel?: (HelixHeadlessTimeInput["collapseLabel"]) | undefined;
+  /** Whether the count is a control that shows the rest. */
+  expandable?: (HelixHeadlessTimeInput["expandable"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "expand-label"?: (HelixHeadlessTimeInput["expandLabel"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  expandLabel?: (HelixHeadlessTimeInput["expandLabel"]) | undefined;
+  /** How many tokens to show before the rest become a count. */
+  "max-tags"?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
+  /** How many tokens to show before the rest become a count. */
+  maxTags?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
   "default-value"?: (HelixHeadlessTimeInput["defaultValue"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
@@ -13140,18 +13122,6 @@ Absent uses the runtime's own. */
   "prop:locale"?: (HelixHeadlessTimeInput["locale"]) | undefined;
   /** Latest time that can be chosen, as `HH:mm`. */
   "prop:max"?: (HelixHeadlessTimeInput["max"]) | undefined;
-  /** How many times are shown as tags before the rest are counted, in `multiple`.
-
-`0` is all of them, and is the default, for the reason Date Input gives: how
-many fit depends on the width of the field and the length of what is in it,
-and this element knows neither. */
-  "attr:max-tags"?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
-  /** How many times are shown as tags before the rest are counted, in `multiple`.
-
-`0` is all of them, and is the default, for the reason Date Input gives: how
-many fit depends on the width of the field and the length of what is in it,
-and this element knows neither. */
-  "prop:maxTags"?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
   /** Earliest time that can be chosen, as `HH:mm`. */
   "prop:min"?: (HelixHeadlessTimeInput["min"]) | undefined;
   /** How many times can be held at once.
@@ -13238,6 +13208,20 @@ the resolved state for stylesheets, which is what the mirror is for. */
   "bool:default-open"?: (HelixHeadlessTimeInput["defaultOpen"]) | undefined;
   /** Initial open state for uncontrolled use, where nothing declared one. */
   "prop:defaultOpen"?: (HelixHeadlessTimeInput["defaultOpen"]) | undefined;
+  /** What the control is called once everything is showing. */
+  "attr:collapse-label"?: (HelixHeadlessTimeInput["collapseLabel"]) | undefined;
+  /** What the control is called once everything is showing. */
+  "prop:collapseLabel"?: (HelixHeadlessTimeInput["collapseLabel"]) | undefined;
+  /** Whether the count is a control that shows the rest. */
+  "prop:expandable"?: (HelixHeadlessTimeInput["expandable"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "attr:expand-label"?: (HelixHeadlessTimeInput["expandLabel"]) | undefined;
+  /** What the collapsed count is called, since `+3` names nothing. */
+  "prop:expandLabel"?: (HelixHeadlessTimeInput["expandLabel"]) | undefined;
+  /** How many tokens to show before the rest become a count. */
+  "attr:max-tags"?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
+  /** How many tokens to show before the rest become a count. */
+  "prop:maxTags"?: (HelixHeadlessTimeInput["maxTags"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
   "attr:default-value"?: (HelixHeadlessTimeInput["defaultValue"]) | undefined;
   /** The value the markup declared, which is where a reset returns to. */
@@ -19314,17 +19298,6 @@ export type CustomElements = {
    * - `first-day-of-week`/`firstDayOfWeek`: First column of the week in the calendar, `0` for Sunday through `6`.
    * - `locale`: Language tag the calendar names its months and days in.
    * - `max`: Latest date that can be chosen, as `YYYY-MM-DD`.
-   * - `max-tags`/`maxTags`: How many dates are shown as tags before the rest are counted, in `multiple`.
-   *
-   * `0` is all of them, and is the default: a cap that guesses is worse than no
-   * cap, because the number that fits depends on the width of the field and the
-   * length of what is in it, neither of which this element knows. What a cap is
-   * genuinely for is a field in a row or a table cell, where a set of twelve
-   * dates would push everything below it down a line at a time.
-   *
-   * The remainder is counted rather than hidden. `+3` is a fact a reader can
-   * act on, where a row that silently stops is a field that appears to have lost
-   * what was put in it, and the count is what tells them there is more to see.
    * - `min`: Earliest date that can be chosen, as `YYYY-MM-DD`.
    * - `mode`: How many dates can be held at once.
    *
@@ -19368,6 +19341,10 @@ export type CustomElements = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `default-open`/`defaultOpen`: Initial open state for uncontrolled use, where nothing declared one.
+   * - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
+   * - `expandable`: Whether the count is a control that shows the rest.
+   * - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
+   * - `max-tags`/`maxTags`: How many tokens to show before the rest become a count.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
    *
@@ -19540,8 +19517,9 @@ export type CustomElements = {
    * - `picker-previous-mark`: The glyph on the previous month control.
    * - `picker-week`: One row of days.
    * - `picker-weekday`: A column header naming a day of the week.
-   * - `rest`: How many dates are held beyond the ones shown.
+   * - `rest`: How many dates are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
    * - `surface`: The floating panel.
+   * - `tags`: The row the dates sit in.
    * - `trigger`: The control that opens the calendar.
    * - `trigger-icon`: The mark on the button that opens the calendar.
    */
@@ -27649,11 +27627,6 @@ export type CustomElements = {
    *
    * Absent uses the runtime's own.
    * - `max`: Latest time that can be chosen, as `HH:mm`.
-   * - `max-tags`/`maxTags`: How many times are shown as tags before the rest are counted, in `multiple`.
-   *
-   * `0` is all of them, and is the default, for the reason Date Input gives: how
-   * many fit depends on the width of the field and the length of what is in it,
-   * and this element knows neither.
    * - `min`: Earliest time that can be chosen, as `HH:mm`.
    * - `mode`: How many times can be held at once.
    *
@@ -27707,6 +27680,10 @@ export type CustomElements = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `default-open`/`defaultOpen`: Initial open state for uncontrolled use, where nothing declared one.
+   * - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
+   * - `expandable`: Whether the count is a control that shows the rest.
+   * - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
+   * - `max-tags`/`maxTags`: How many tokens to show before the rest become a count.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
    *
@@ -27886,8 +27863,9 @@ export type CustomElements = {
    * - `picker-option-item`: The row.
    * - `picker-option-label`: The words.
    * - `picker-option-text`: The words and the caption, as one column.
-   * - `rest`: How many times are held beyond the ones shown.
+   * - `rest`: How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
    * - `surface`: The floating panel.
+   * - `tags`: The row the times sit in.
    * - `time`: One held time, as a tag, in `multiple`.
    * - `time-dismiss`: The remove button, when `dismissible`.
    * - `time-dismiss-mark`: The glyph on the dismiss control, where none is slotted.
@@ -33825,17 +33803,6 @@ export type CustomElementsSolidJs = {
    * - `first-day-of-week`/`firstDayOfWeek`: First column of the week in the calendar, `0` for Sunday through `6`.
    * - `locale`: Language tag the calendar names its months and days in.
    * - `max`: Latest date that can be chosen, as `YYYY-MM-DD`.
-   * - `max-tags`/`maxTags`: How many dates are shown as tags before the rest are counted, in `multiple`.
-   *
-   * `0` is all of them, and is the default: a cap that guesses is worse than no
-   * cap, because the number that fits depends on the width of the field and the
-   * length of what is in it, neither of which this element knows. What a cap is
-   * genuinely for is a field in a row or a table cell, where a set of twelve
-   * dates would push everything below it down a line at a time.
-   *
-   * The remainder is counted rather than hidden. `+3` is a fact a reader can
-   * act on, where a row that silently stops is a field that appears to have lost
-   * what was put in it, and the count is what tells them there is more to see.
    * - `min`: Earliest date that can be chosen, as `YYYY-MM-DD`.
    * - `mode`: How many dates can be held at once.
    *
@@ -33879,6 +33846,10 @@ export type CustomElementsSolidJs = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `default-open`/`defaultOpen`: Initial open state for uncontrolled use, where nothing declared one.
+   * - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
+   * - `expandable`: Whether the count is a control that shows the rest.
+   * - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
+   * - `max-tags`/`maxTags`: How many tokens to show before the rest become a count.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
    *
@@ -34051,8 +34022,9 @@ export type CustomElementsSolidJs = {
    * - `picker-previous-mark`: The glyph on the previous month control.
    * - `picker-week`: One row of days.
    * - `picker-weekday`: A column header naming a day of the week.
-   * - `rest`: How many dates are held beyond the ones shown.
+   * - `rest`: How many dates are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
    * - `surface`: The floating panel.
+   * - `tags`: The row the dates sit in.
    * - `trigger`: The control that opens the calendar.
    * - `trigger-icon`: The mark on the button that opens the calendar.
    */
@@ -42328,11 +42300,6 @@ export type CustomElementsSolidJs = {
    *
    * Absent uses the runtime's own.
    * - `max`: Latest time that can be chosen, as `HH:mm`.
-   * - `max-tags`/`maxTags`: How many times are shown as tags before the rest are counted, in `multiple`.
-   *
-   * `0` is all of them, and is the default, for the reason Date Input gives: how
-   * many fit depends on the width of the field and the length of what is in it,
-   * and this element knows neither.
    * - `min`: Earliest time that can be chosen, as `HH:mm`.
    * - `mode`: How many times can be held at once.
    *
@@ -42386,6 +42353,10 @@ export type CustomElementsSolidJs = {
    * last reader did rather than what the author wrote. `:state(open)` carries
    * the resolved state for stylesheets, which is what the mirror is for.
    * - `default-open`/`defaultOpen`: Initial open state for uncontrolled use, where nothing declared one.
+   * - `collapse-label`/`collapseLabel`: What the control is called once everything is showing.
+   * - `expandable`: Whether the count is a control that shows the rest.
+   * - `expand-label`/`expandLabel`: What the collapsed count is called, since `+3` names nothing.
+   * - `max-tags`/`maxTags`: How many tokens to show before the rest become a count.
    * - `default-value`/`defaultValue`: The value the markup declared, which is where a reset returns to.
    * - `value`: What the control holds now, and what its form submits.
    *
@@ -42565,8 +42536,9 @@ export type CustomElementsSolidJs = {
    * - `picker-option-item`: The row.
    * - `picker-option-label`: The words.
    * - `picker-option-text`: The words and the caption, as one column.
-   * - `rest`: How many times are held beyond the ones shown.
+   * - `rest`: How many times are held beyond the ones shown. A `<button>` with `expandable`, a `<span>` without it.
    * - `surface`: The floating panel.
+   * - `tags`: The row the times sit in.
    * - `time`: One held time, as a tag, in `multiple`.
    * - `time-dismiss`: The remove button, when `dismissible`.
    * - `time-dismiss-mark`: The glyph on the dismiss control, where none is slotted.