@fusion.dev/helix-headless 0.47.1 → 0.48.0

package/dist/rating/root/rating-root.js

@@ -89,18 +89,28 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         this.handleLeave = () => {
             this.previewing = undefined;
         };
+        this.warned = false;
+    }
+    get floor() {
+        if (!Number.isFinite(this.min)) {
+            return 0;
+        }
+        return Math.min(Math.max(this.min, 0), Math.max(this.max, 0));
     }
     get score() {
         const parsed = Number.parseFloat(this.value);
         if (!Number.isFinite(parsed)) {
-            return 0;
+            return this.floor;
         }
-        return Math.min(Math.max(parsed, 0), this.max);
+        return Math.min(Math.max(parsed, this.floor), this.max);
     }
-    get steps() {
+    get positions() {
         const count = Math.max(1, Math.round(this.max / this.step));
         return Array.from({ length: count }, (_, index) => Number(((index + 1) * this.step).toFixed(2)));
     }
+    get steps() {
+        return this.positions.filter((score) => score >= this.floor);
+    }
     get options() {
         const found = [...(this.renderRoot?.querySelectorAll('[part="option"]') ?? [])];
         return found.map((element) => ({
@@ -157,6 +167,12 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
     updated(changed) {
         super.updated?.(changed);
         this.sync();
+        if (this.floor !== this.min && !this.warned) {
+            this.warned = true;
+            console.warn(`<${this.localName}> has min="${this.min}", which is not a score between 0 and its max of ` +
+                `${this.max}, so the lowest score it offers is ${this.floor}. Put min inside the marks, ` +
+                'or move max.');
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -177,12 +193,16 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
         const first = this.steps[0];
         const mark = (layer, index) => html `<span part="mark">${this.markFor(layer, index)}</span>`;
         const marksIn = (layer) => Array.from({ length: count }, (_, index) => mark(layer, index));
-        return html `<div
+        return html `${this.renderGroupLabel()}
+    <div part="field">
+    <div
       part="marks"
       role=${this.readOnly ? 'img' : 'radiogroup'}
       aria-label=${this.readOnly ? said : this.label || nothing}
+      aria-describedby=${this.describedBy ?? nothing}
+      aria-required=${this.required && !this.readOnly ? 'true' : nothing}
       data-slotted=${this.markSource ? '' : nothing}
-      style=${`--rating-full: ${Math.floor(showing)}; --rating-part: ${showing - Math.floor(showing)}; --rating-steps: ${this.steps.length}`}
+      style=${`--rating-full: ${Math.floor(showing)}; --rating-part: ${showing - Math.floor(showing)}; --rating-steps: ${this.positions.length}`}
       @pointercancel=${this.handleDragCancel}
       @pointerdown=${this.handleDragStart}
       @pointermove=${this.handleDragMove}
@@ -207,7 +227,10 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
       >
       ${this.readOnly
             ? nothing
-            : this.steps.map((score, index) => html `<button
+            :
+                this.positions.map((score, index) => score < this.floor
+                    ? nothing
+                    : html `<button
                 part="option"
                 role="radio"
                 type="button"
@@ -216,7 +239,9 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
                 data-score=${String(score)}
                 style=${`--rating-step: ${index + 1}`}
                 ?disabled=${this.isDisabled}
-                tabindex=${this.score === score || (this.score === 0 && score === first) ? '0' : '-1'}
+                tabindex=${this.score === score || (this.score === this.floor && score === first)
+                        ? '0'
+                        : '-1'}
                 @click=${this.handleOptionClick}
                 @pointerenter=${this.handleOptionEnter}
               ></button>`)}
@@ -227,7 +252,9 @@ let HelixHeadlessRating = class HelixHeadlessRating extends MixinControllerValue
           aria-hidden="true"
           >${showing}</span
         >`
-            : nothing}`;
+            : nothing}
+    </div>
+    ${this.renderHint()}${this.renderFeedback()}`;
     }
     get valueAsNumber() {
         return asNumber(this.value);

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

@@ -43,6 +43,19 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  * string, which is the whole reason the shape is that one. What each row *says*
  * is the reader's own convention, from `Intl`.
  *
+ * **The chosen row is marked in the markup, not worked out on upgrade.** The
+ * listbox is handed the answer as `.value`, and lit-ssr serializes no property
+ * binding, so a served `value="09:30"` shipped ninety-six rows with nothing on
+ * any of them saying which one it was: the mark arrived when the listbox
+ * upgraded and ran `place`. So each option is given `selected` as well, which
+ * is an attribute binding and does serve, and which the listbox then agrees
+ * with rather than fights, `place` writing the same answer from the same value.
+ * `selected` is the declaration a consumer writes on `Option` anywhere else in
+ * the library, and Date Picker expresses its own choice as markup for the same
+ * reason: a picker whose answer is invisible until a script runs is a picker
+ * whose answer is not served at all. Both readings do it, the list and the
+ * wheels, a wheel being a listbox like the list is.
+ *
  * @since 0.1.0
  * @status experimental
  * @category forms

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

@@ -248,6 +248,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
               label: option-label, text: option-text"
             value=${one}
             ?disabled=${barred(one)}
+            ?selected=${one === value}
             >${written(one)}</${this.tag('option')}
           >`)}
     </${this.tag('listbox')}>`;
@@ -291,6 +292,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             label: option-label, text: option-text"
           value=${at}
           ?disabled=${this.barred(at)}
+          ?selected=${this.held.includes(at)}
           data-between=${between ? '' : nothing}
           >${writeTime(at, this.locale)}</${this.tag('option')}
         >`;

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.47.1",
+  "version": "0.48.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.47.1",
-    "@fusion.dev/helix-icons": "0.47.1",
+    "@fusion.dev/helix-core": "0.48.0",
+    "@fusion.dev/helix-icons": "0.48.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.47.1",
-    "@fusion.dev/helix-testing": "0.47.1",
+    "@fusion.dev/helix-cem": "0.48.0",
+    "@fusion.dev/helix-testing": "0.48.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",