@fusion.dev/helix-headless 0.227.0 → 0.229.0

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

@@ -116,29 +116,6 @@ export declare class HelixHeadlessAnnouncement extends HelixHeadlessAnnouncement
      * Off by default, so every announcement on a page shows at once.
      */
     queued: boolean;
-    /**
-     * The band's color.
-     *
-     * Paint only: unlike `Callout`, no value here draws a mark, changes the label,
-     * or moves the live region off polite. `neutral` is the resting value, said
-     * out loud so a consumer can put a band back to it from markup.
-     *
-     * **The set is `Tag`'s and `Badge`'s, and now actually is.** This doc claimed
-     * to match `Tag` while differing from it in both directions: it carried
-     * `surface`, which `Tag` does not, and lacked `accent`, which `Tag` has. Three
-     * components saying what a thing means, in three vocabularies, one of which
-     * described itself as a fourth.
-     *
-     * `accent` is the second emphasis, the second color a theme names, and the
-     * brand itself until one is named. `primary` is the brand.
-     *
-     * **`surface` was never a color and has moved to `separation`**, which is the
-     * axis that owns where a box sits relative to the page. It said the band rode
-     * the surface step instead of the sunken one, which is an elevation, and a
-     * band can be `info` and elevated at once: two values true together are two
-     * axes, which is the test the registry answers to.
-     */
-    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
     /** Whether a queued announcement before this one is still there. */
     private waiting;
     /** Watches the parent for the announcements before this one leaving. */

package/dist/announcement/root/announcement-root.js

@@ -213,9 +213,6 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessAnnouncement.prototype, "queued", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessAnnouncement.prototype, "tone", void 0);
 __decorate([
     state()
 ], HelixHeadlessAnnouncement.prototype, "waiting", void 0);

package/dist/button-group/root/button-group-root.d.ts

@@ -103,9 +103,8 @@ export declare class HelixHeadlessButtonGroup extends HelixElement {
      * Unset is a row and stays unset, so a reflected default cannot appear on a
      * host whose server output never had it.
      *
-     * **A property and not an `auto`, which the splitter and the carousel earned
-     * and this has not.** Turning those two changes what they *do*: a drag axis,
-     * arrow keys, how many slides a page holds. A group of buttons turning is
+     * **A property and not an `auto`, which the splitter earned and this has not.**
+     * Turning a splitter changes what it *does*: a drag axis and arrow keys. A group of buttons turning is
      * paint, so there is no state to resolve and nothing to observe; what it needs
      * is for a consumer who knows the column is narrow to be able to say so.
      *

package/dist/canvas/node/canvas-node.d.ts

@@ -55,8 +55,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart node - The box the content sits in.
  * @csspart outline - The drawn outline of a `diamond` card, a shape a box cannot draw.
  *
+ * @cssstate active - The card that receives focus when you tab into the board.
  * @cssstate candidate - While a connection is being drawn and this card is somewhere it could arrive.
- * @cssstate current - The card that receives focus when you tab into the board.
  * @cssstate placed - Placed on the board.
  * @cssstate selected - The card is selected.
  * @cssstate target - A connection being drawn would end here if you released it.

package/dist/canvas/node/canvas-node.js

@@ -48,7 +48,7 @@ let HelixHeadlessCanvasNode = class HelixHeadlessCanvasNode extends HelixElement
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('candidate', this.candidate);
-        this.toggleState('current', this.current);
+        this.toggleState('active', this.current);
         this.toggleState('selected', this.selected);
         this.toggleState('target', this.target);
     }

package/dist/filter-input/chip/filter-chip.js

@@ -33,7 +33,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
       ${operator
             ? html `<span part="operator"><slot name="operator">${this.operatorLabel}</slot></span>`
             : nothing}
-      ${values ? html `<span part="values"><slot></slot></span>` : nothing}
+      <span part="values" ?hidden=${!values}><slot></slot></span>
       ${this.dismissible
             ? html `<button
               part="dismiss"

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

@@ -40,6 +40,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {Event} load - The image loaded. Relayed from the inner image, whose own event stays inside the shadow root.
  *
  * @csspart fallback - The fallback, shown when the image fails to load.
+ * @csspart fallback-mark - The mark drawn where a failed image has no `fallback` slot.
  * @csspart image - The image itself.
  * @csspart placeholder - The placeholder, shown until the image loads.
  *
@@ -239,6 +240,8 @@ export declare class HelixHeadlessImage extends HelixElement {
     get naturalHeight(): number;
     /** The image's intrinsic width in pixels. Zero until the image loads. */
     get naturalWidth(): number;
+    /** What a failed image shows, a mark where the `fallback` slot is empty. */
+    protected renderFallback(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/image/root/image-root.js

@@ -124,6 +124,14 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
     get naturalWidth() {
         return this.image?.naturalWidth ?? 0;
     }
+    renderFallback() {
+        return html `<span
+      part="fallback"
+      aria-hidden=${this.status === 'error' ? nothing : 'true'}
+      ?hidden=${this.status !== 'error'}
+      ><slot name="fallback"><span part="fallback-mark"></span></slot
+    ></span>`;
+    }
     render() {
         return html `<img
         part="image"
@@ -145,12 +153,7 @@ let HelixHeadlessImage = class HelixHeadlessImage extends HelixElement {
         ?hidden=${this.status !== 'loading' || this.waiting}
         ><slot name="placeholder"></slot
       ></span>
-      <span
-        part="fallback"
-        aria-hidden=${this.status === 'error' ? nothing : 'true'}
-        ?hidden=${this.status !== 'error'}
-        ><slot name="fallback"></slot
-      ></span>`;
+      ${this.renderFallback()}`;
     }
 };
 __decorate([

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

@@ -146,7 +146,7 @@ export declare class HelixHeadlessList extends HelixElement {
     emptyLabel?: string;
     /**
      * The text of the row shown while the list has no rows, where the `empty`
-     * slot is empty. Empty, the default, shows no row.
+     * slot is empty. An empty string shows no row.
      */
     emptyText: string;
     /**

package/dist/list/root/list-root.js

@@ -11,7 +11,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         super(...arguments);
         this.canceledLabel = 'Canceled';
         this.droppedLabel = 'Dropped';
-        this.emptyText = '';
+        this.emptyText = 'No items';
         this.label = '';
         this.loading = false;
         this.loadingText = 'Loading more';
@@ -461,6 +461,7 @@ __decorate([
     property({ attribute: 'empty-label' })
 ], HelixHeadlessList.prototype, "emptyLabel", void 0);
 __decorate([
+    words,
     property({ attribute: 'empty-text' })
 ], HelixHeadlessList.prototype, "emptyText", void 0);
 __decorate([

package/dist/map/marker/map-marker.d.ts

@@ -30,10 +30,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart marker - The button, holding the point and the name.
  * @csspart point - The dot on the place, holding the icon if there is one.
  *
+ * @cssstate active - Holds the map's tab stop.
  * @cssstate behind - On the far side of a globe, out of sight until the globe turns it into view.
  * @cssstate cluster - Shows several markers as one count.
  * @cssstate clustered - Hidden inside another marker's cluster.
- * @cssstate current - Holds the map's tab stop.
  * @cssstate fanned - Spread out from a location it shares with other markers, after their cluster was pressed.
  * @cssstate icon - Has content in the icon slot.
  * @cssstate passed - Marked as passed.

package/dist/map/marker/map-marker.js

@@ -44,7 +44,7 @@ let HelixHeadlessMapMarker = class HelixHeadlessMapMarker extends HelixElement {
         this.toggleState('behind', this.behind);
         this.toggleState('cluster', this.gathered.length > 1);
         this.toggleState('clustered', this.gatheredBy !== undefined);
-        this.toggleState('current', this.current);
+        this.toggleState('active', this.current);
         this.toggleState('fanned', this.fanned);
         this.toggleState('passed', this.passed);
         this.toggleState('start', this.side === 'start');

package/dist/meter/segment/meter-segment.d.ts

@@ -40,11 +40,6 @@ export declare class HelixHeadlessMeterSegment extends HelixElement {
      * Not announced: see the note on a meter's children above.
      */
     label: string;
-    /**
-     * What the segment means, as it does on a callout. Takes the tone's color in
-     * place of the next color in the series.
-     */
-    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
     /**
      * How much of the meter's range the segment takes, in the units of the meter's
      * `min` and `max`.

package/dist/meter/segment/meter-segment.js

@@ -35,9 +35,6 @@ let HelixHeadlessMeterSegment = class HelixHeadlessMeterSegment extends HelixEle
 __decorate([
     property()
 ], HelixHeadlessMeterSegment.prototype, "label", void 0);
-__decorate([
-    property({ reflect: true })
-], HelixHeadlessMeterSegment.prototype, "tone", void 0);
 __decorate([
     property({ converter: numberConverter('value', 0) })
 ], HelixHeadlessMeterSegment.prototype, "value", void 0);

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

@@ -52,7 +52,7 @@ export { isOption, optionsAmong } from '../among.js';
  * @cssstate disabled - While the option cannot be chosen.
  * @cssstate has-indicator - An icon is slotted into `indicator`.
  * @cssstate hovered - While a mouse or a pen is over the option. A touch sets no hover, as React Aria's `data-hovered` does not.
- * @cssstate pressed - While a pointer presses the option, from the press to the release.
+ * @cssstate pressing - While a pointer presses the option, from the press to the release.
  * @cssstate selected - While the option is chosen.
  */
 export declare class HelixHeadlessOption extends HelixElement {

package/dist/option/root/option-root.js

@@ -25,13 +25,13 @@ let HelixHeadlessOption = class HelixHeadlessOption extends HelixElement {
         };
         this.handlePointerLeave = () => {
             this.toggleState('hovered', false);
-            this.toggleState('pressed', false);
+            this.toggleState('pressing', false);
         };
         this.handlePointerDown = (event) => {
-            this.toggleState('pressed', event.button === 0 && !this.disabled);
+            this.toggleState('pressing', event.button === 0 && !this.disabled);
         };
         this.handlePointerUp = () => {
-            this.toggleState('pressed', false);
+            this.toggleState('pressing', false);
         };
     }
     get defaultSelected() {

package/dist/select/root/select-root.js

@@ -374,7 +374,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         @keydown=${this.handleTriggerKeydown}
       >
         <slot name="start"></slot>
-        <span part="value" id="value">${this.renderValue()}</span>
+        <span part="value" id="value" ?data-placeholder=${this.chosen.length === 0}>${this.renderValue()}</span>
         <slot name="end"></slot>
         ${this.renderIndicator()}
       </button>

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

@@ -83,6 +83,7 @@ export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
     private sync;
     /** Returns the switch to the state its markup declared. */
     formResetCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**
      * Says on the `label` region whether anything is in it.

package/dist/switch/root/switch-root.js

@@ -33,6 +33,10 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         super.formResetCallback();
         this.resetChecked();
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.markEmpty());
+    }
     updated(changed) {
         super.updated(changed);
         this.markEmpty();