@fusion.dev/helix-core 0.13.1 → 0.14.0

package/custom-elements.json

@@ -7045,6 +7045,40 @@
               },
               "description": "How many tokens to show before the rest become a count.\n\n`0` is all of them, and is the default: a cap that guesses is worse than no\ncap, because the number that fits depends on the width of the field and the\nlength of what is in it, neither of which this element knows. What a cap is\ngenuinely for is a field in a row or a table cell, where a set of twelve\nchoices would push everything below it down a line at a time.\n\nThe remainder is counted rather than hidden. `+3` is a fact a reader can act\non, where a row that silently stops is a field that appears to have lost\nwhat was put in it. Date Input and Time Input carry the same property and\nthe same reasoning without taking this mixin, which is why the name is\ntheirs rather than a fourth word for one idea."
             },
+            {
+              "kind": "field",
+              "name": "expandable",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the count is a control that shows the rest.\n\n**Off by default, and that is about focus rather than caution.** The count\nbecomes a real button when this is set, which is a new stop in the tab\norder inside the field. Combobox's whole arrangement is that focus stays in\nthe text while the arrows work the list, so a button appearing between the\ntags and the caret is a change to its keyboard model and not a detail. A\nhost that wants it asks.\n\nLeft off, the count stays the `<span>` it has always been: no tab stop, no\nbehavior, and nothing a consumer is holding changes."
+            },
+            {
+              "kind": "field",
+              "name": "expandLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "What the collapsed count is called, since `+3` names nothing."
+            },
+            {
+              "kind": "field",
+              "name": "collapseLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "What the control says once everything is showing.\n\nA word rather than a count, because there is no longer a number to give:\nexpanded, nothing is hidden. It is the visible text and the accessible name\ntogether, which is why it is a phrase and not a glyph."
+            },
+            {
+              "kind": "field",
+              "name": "shownLimit",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "protected",
+              "readonly": true,
+              "description": "The cap in force right now, which is none while the reader has expanded it.\n\nHosts that slice their own tokens read this rather than `maxTags`, or\nexpanding would hide the very tokens it was asked to show."
+            },
             {
               "kind": "method",
               "name": "renderTokenRow",
@@ -7133,6 +7167,36 @@
           "description": "A row of tokens inside a field, and the behavior that goes with it.\n\n**This owns the row and knows nothing about what a token is.** Not where they\ncame from, not whether they were chosen from a list or invented, not what\nremoving one means. Combobox's tokens are a view of its selection and carry a\n`data-value` it reads back; a filter field's are whatever a reader typed.\nBoth get the same row, the same overflow count and the same Backspace.\n\n**What it does not own is where the tokens come from, and that is not a gap.**\nCombobox renders its tags into its own shadow root from the options it was\ngiven; a filter field takes them as slotted children of the host. A slot\ncannot assign a shadow root's own children, so one route cannot serve both,\nand pretending otherwise would put a mode inside the mixin to hide a\ndifference that is real. The host passes what it has and this draws the row\naround it.\n\n**The control stays in the host's shadow root**, which is why this is a mixin\nand not an element to nest. Combobox reaches `[part=\"control\"]` four times,\nfor focus twice, for the floating anchor's width, and to set the selection\nrange across a completion. A shadow root does not pierce a child's, so a\nnested field holding that control would answer `null` to all four.",
           "name": "MixinTokens",
           "members": [
+            {
+              "kind": "field",
+              "name": "collapseLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Show fewer'",
+              "description": "What the control says once everything is showing.",
+              "attribute": "collapse-label"
+            },
+            {
+              "kind": "field",
+              "name": "expandable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the count is a control that shows the rest.",
+              "attribute": "expandable"
+            },
+            {
+              "kind": "field",
+              "name": "expandLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Show all'",
+              "description": "What the collapsed count is called, since `+3` names nothing.",
+              "attribute": "expand-label"
+            },
             {
               "kind": "field",
               "name": "maxTags",
@@ -7143,6 +7207,32 @@
               "description": "How many tokens to show before the rest become a count.",
               "attribute": "max-tags"
             },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the reader has asked for all of them.\n\nState and private, the way `Input`'s `revealed` is: it is a reader's\nmomentary choice about what is on their own screen, it must not survive\nanything, and a consumer who wants the field opened is asking for\n`max-tags=\"0\"` rather than for a second way to say it."
+            },
+            {
+              "kind": "field",
+              "name": "shownLimit",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "protected",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "toggleExpanded",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Turns the cap off and on, which is all expanding is."
+            },
             {
               "kind": "method",
               "name": "renderTokenRow",
@@ -7167,6 +7257,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "renderRest",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "over",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "The count, as a control where the host asked for one and a word otherwise.\n\n**`part=\"rest\"` either way**, so a consumer's `::part(rest)` keeps working\nacross the change. The element under it is different, which is the point:\na `<span>` that looks like an affordance and answers nothing is the fault\nthis exists to fix, and the way to fix it is a real button rather than a\nclick handler on text.\n\n**Expanded, it renders on no count.** `shownLimit` is zero while expanded,\nso `over` is zero too, and gating the control on the number would take\naway the only way back."
+            },
             {
               "kind": "method",
               "name": "hideOverflow",
@@ -7221,6 +7330,33 @@
             }
           ],
           "attributes": [
+            {
+              "name": "collapse-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Show fewer'",
+              "description": "What the control says once everything is showing.",
+              "fieldName": "collapseLabel"
+            },
+            {
+              "name": "expandable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the count is a control that shows the rest.",
+              "fieldName": "expandable"
+            },
+            {
+              "name": "expand-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Show all'",
+              "description": "What the collapsed count is called, since `+3` names nothing.",
+              "fieldName": "expandLabel"
+            },
             {
               "name": "max-tags",
               "type": {

package/dist/mixins/mixin-tokens/mixin-tokens.d.ts

@@ -24,6 +24,39 @@ export declare class MixinTokensInterface {
      * theirs rather than a fourth word for one idea.
      */
     maxTags: number;
+    /**
+     * Whether the count is a control that shows the rest.
+     *
+     * **Off by default, and that is about focus rather than caution.** The count
+     * becomes a real button when this is set, which is a new stop in the tab
+     * order inside the field. Combobox's whole arrangement is that focus stays in
+     * the text while the arrows work the list, so a button appearing between the
+     * tags and the caret is a change to its keyboard model and not a detail. A
+     * host that wants it asks.
+     *
+     * Left off, the count stays the `<span>` it has always been: no tab stop, no
+     * behavior, and nothing a consumer is holding changes.
+     */
+    expandable: boolean;
+    /**
+     * What the collapsed count is called, since `+3` names nothing.
+     */
+    expandLabel: string;
+    /**
+     * What the control says once everything is showing.
+     *
+     * A word rather than a count, because there is no longer a number to give:
+     * expanded, nothing is hidden. It is the visible text and the accessible name
+     * together, which is why it is a phrase and not a glyph.
+     */
+    collapseLabel: string;
+    /**
+     * The cap in force right now, which is none while the reader has expanded it.
+     *
+     * Hosts that slice their own tokens read this rather than `maxTags`, or
+     * expanding would hide the very tokens it was asked to show.
+     */
+    protected readonly shownLimit: number;
     /**
      * The row, given what goes in it and how many did not fit.
      *

package/dist/mixins/mixin-tokens/mixin-tokens.js

@@ -5,16 +5,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 export const MixinTokens = (Base) => {
     class TokensElement extends Base {
         constructor() {
             super(...arguments);
+            this.collapseLabel = 'Show fewer';
+            this.expandable = false;
+            this.expandLabel = 'Show all';
             this.maxTags = 0;
+            this.expanded = false;
+            this.toggleExpanded = () => {
+                this.expanded = !this.expanded;
+            };
+        }
+        get shownLimit() {
+            return this.expanded ? 0 : this.maxTags;
         }
         renderTokenRow(content, over) {
-            return html `<span part="tags"
-        >${content}${over > 0 ? html `<span part="rest">${`+${over}`}</span>` : nothing}</span
+            return html `<span part="tags">${content}${this.renderRest(over)}</span>`;
+        }
+        renderRest(over) {
+            if (!this.expandable) {
+                return over > 0 ? html `<span part="rest">${`+${over}`}</span>` : nothing;
+            }
+            if (over < 1 && !this.expanded) {
+                return nothing;
+            }
+            return html `<button
+        part="rest"
+        type="button"
+        aria-expanded=${this.expanded ? 'true' : 'false'}
+        aria-label=${this.expanded ? nothing : this.expandLabel}
+        @click=${this.toggleExpanded}
+        >${this.expanded ? this.collapseLabel : `+${over}`}</button
       >`;
         }
         hideOverflow(slot) {
@@ -22,10 +46,11 @@ export const MixinTokens = (Base) => {
                 return 0;
             }
             const tokens = slot.assignedElements({ flatten: true });
+            const limit = this.shownLimit;
             for (const [at, token] of tokens.entries()) {
-                token.toggleAttribute('hidden', this.maxTags > 0 && at >= this.maxTags);
+                token.toggleAttribute('hidden', limit > 0 && at >= limit);
             }
-            return this.maxTags > 0 ? Math.max(0, tokens.length - this.maxTags) : 0;
+            return limit > 0 ? Math.max(0, tokens.length - limit) : 0;
         }
         tokenKeydown(event, typed) {
             if (event.key !== 'Backspace' || typed !== '') {
@@ -37,8 +62,20 @@ export const MixinTokens = (Base) => {
         }
         removeLastToken() { }
     }
+    __decorate([
+        property({ attribute: 'collapse-label' })
+    ], TokensElement.prototype, "collapseLabel", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], TokensElement.prototype, "expandable", void 0);
+    __decorate([
+        property({ attribute: 'expand-label' })
+    ], TokensElement.prototype, "expandLabel", void 0);
     __decorate([
         property({ attribute: 'max-tags', type: Number })
     ], TokensElement.prototype, "maxTags", void 0);
+    __decorate([
+        state()
+    ], TokensElement.prototype, "expanded", void 0);
     return TokensElement;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-core",
   "description": "Helix element primitives: base classes, mixins, decorators, utilities.",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -34,12 +34,12 @@
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@fusion.dev/helix-icons": "0.13.1"
+    "@fusion.dev/helix-icons": "0.14.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.13.1",
-    "@fusion.dev/helix-testing": "0.13.1",
+    "@fusion.dev/helix-cem": "0.14.0",
+    "@fusion.dev/helix-testing": "0.14.0",
     "lit": "^3.2.1"
   },
   "homepage": "https://fusion.dev",