@fusion.dev/helix 0.54.0 → 0.56.0

package/dist/grid/root/grid-root.css.js

@@ -52,17 +52,13 @@ gap: var(--helix-space-2xl);
 gap: var(--helix-space-3xl);
 }
 
-:host([align]) {
-text-align: inherit;
-}
-
-:host([align="start"]) {
+:host([align-items="start"]) {
 align-items: start;
 }
-:host([align="center"]) {
+:host([align-items="center"]) {
 align-items: center;
 }
-:host([align="end"]) {
+:host([align-items="end"]) {
 align-items: end;
 }
 

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

@@ -23,9 +23,21 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  */
 export declare class HelixGrid extends HelixElement {
     /**
-     * Alignment of each cell within its row.
+     * Alignment of each cell within its row, which is `align-items`.
+     *
+     * **Named for the CSS property it sets**, the way `Flex` is, and the same
+     * property on a grid: it places every cell in its row's track rather than
+     * placing the tracks. No `baseline`, which `Flex` offers, because cells in a
+     * row of a grid are boxes of unrelated content and lining their first lines
+     * up is a thing a reader asks for between siblings in a row, not between
+     * cells in a table of them.
+     *
+     * There is no `justifyContent` here for the same reason: the tracks are
+     * `1fr`, so they already fill the row and there is nothing left over to
+     * distribute. `columns`, `min` and `--grid-columns` are how a grid says how
+     * wide its tracks are.
      */
-    align?: 'start' | 'center' | 'end' | 'stretch';
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
     /**
      * Fixed number of equal columns.
      */

package/dist/grid/root/grid-root.js

@@ -38,8 +38,8 @@ let HelixGrid = class HelixGrid extends HelixElement {
     static { this.styles = styles; }
 };
 __decorate([
-    property({ reflect: true })
-], HelixGrid.prototype, "align", void 0);
+    property({ attribute: 'align-items', reflect: true })
+], HelixGrid.prototype, "alignItems", void 0);
 __decorate([
     property({ reflect: true, type: Number })
 ], HelixGrid.prototype, "columns", void 0);

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

@@ -6,7 +6,7 @@ overflow: hidden;
 position: relative;
 }
 
-:host([rounded]) {
+:host([shape="rounded"]) {
 border-radius: var(--image-radius, var(--helix-radii-md));
 }
 

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

@@ -18,19 +18,20 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --image-fit - How the picture fills it.
  * @cssproperty --image-placeholder-color - The resting surface behind both stand-ins.
  * @cssproperty --image-position - Which part survives a crop.
- * @cssproperty --image-radius - Corner radius, under `rounded`.
+ * @cssproperty --image-radius - Corner radius, under `shape="rounded"`.
  */
 export declare class HelixImage extends HelixHeadlessImage {
     static styles: CSSResultGroup;
     /**
      * Whether the corners are cut.
      *
-     * A boolean rather than a radius, because the radius is a token and the
-     * question a consumer is answering is whether this picture is a card's
-     * surface or a page's. `--image-radius` moves it for the case that is
-     * neither.
+     * The axis and not a boolean, because `rounded` is a registered word and a
+     * private spelling of a registry question is what `appearance` was retired
+     * for. Not a radius either: the radius is a token and the question a consumer
+     * is answering is whether this picture is a card's surface or a page's.
+     * `--image-radius` moves it for the case that is neither.
      */
-    rounded: boolean;
+    shape?: 'rounded';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -9,15 +9,11 @@ import { HelixHeadlessImage } from '@fusion.dev/helix-headless/image';
 import { property } from 'lit/decorators.js';
 import { styles } from './image-root.css.js';
 let HelixImage = class HelixImage extends HelixHeadlessImage {
-    constructor() {
-        super(...arguments);
-        this.rounded = false;
-    }
     static { this.styles = styles; }
 };
 __decorate([
-    property({ reflect: true, type: Boolean })
-], HelixImage.prototype, "rounded", void 0);
+    property({ reflect: true })
+], HelixImage.prototype, "shape", void 0);
 HelixImage = __decorate([
     customElement('helix-image')
 ], HelixImage);

package/dist/megamenu/root/megamenu-root.css.js

@@ -81,11 +81,11 @@ clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-
 }
 }
 
-:host(:not([variant="full"])) [part="surface"] {
+:host(:not([variant="band"])) [part="surface"] {
 clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1));
 }
 
-:host(:not([variant="full"])) [part="surface"]:popover-open {
+:host(:not([variant="band"])) [part="surface"]:popover-open {
 clip-path: inset(
 0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1)
 calc(var(--helix-space-xl) * -1)
@@ -93,12 +93,12 @@ calc(var(--helix-space-xl) * -1)
 }
 
 @starting-style {
-:host(:not([variant="full"])) [part="surface"]:popover-open {
+:host(:not([variant="band"])) [part="surface"]:popover-open {
 clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1));
 }
 }
 
-:host([variant="full"]) [part="surface"],
+:host([variant="band"]) [part="surface"],
 :host(:state(narrow)) [part="surface"] {
 
 backdrop-filter: var(--megamenu-backdrop, none);
@@ -124,13 +124,13 @@ padding-inline: max(var(--helix-space-xl), calc((100% - var(--megamenu-full-size
 position: fixed;
 }
 
-:host([variant="full"]) [part="surface"]:popover-open,
+:host([variant="band"]) [part="surface"]:popover-open,
 :host(:state(narrow)) [part="surface"]:popover-open {
 clip-path: inset(0 0 calc(var(--helix-space-xl) * -1) 0);
 }
 
 @starting-style {
-:host([variant="full"]) [part="surface"]:popover-open,
+:host([variant="band"]) [part="surface"]:popover-open,
 :host(:state(narrow)) [part="surface"]:popover-open {
 clip-path: inset(0 0 100% 0);
 }

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

@@ -66,11 +66,18 @@ export declare class HelixOrb extends HelixElement {
     /**
      * Diameter relative to the surrounding text.
      *
+     * **`Loader`'s three steps, because the two are swapped for each other.** An
+     * orb and a spinner are the same job drawn differently, a wait a reader is
+     * looking at, and a product that replaces one with the other should not find
+     * that a step it was writing has stopped existing. `md` is the resting one
+     * and selects nothing, landing on the base rule the way a written resting
+     * value does everywhere else.
+     *
      * Reflected because the stylesheet selects on it. The mesh is chosen from the
      * rendered box rather than from this, so `--orb-size` and a consumer's own
      * `inline-size` get the same treatment as the named steps.
      */
-    size?: 'lg' | 'sm';
+    size?: 'sm' | 'md' | 'lg';
     /**
      * What the agent is doing.
      *

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

@@ -24,6 +24,8 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --progress-color - Fill of the part that is done.
  * @cssproperty --progress-ring-size - Diameter of the ring appearance.
  * @cssproperty --progress-ring-width - Thickness of its stroke.
+ * @cssproperty --progress-size - Thickness of the bar.
+ * @cssproperty --progress-track-color - Fill of the part that is not.
  */
 export declare class HelixProgress extends HelixHeadlessProgress {
     /**
@@ -44,8 +46,6 @@ export declare class HelixProgress extends HelixHeadlessProgress {
      * from, so an outline there costs legibility and buys no distinction. `solid`
      * is the resting state and is written by not writing it, per the rule that a
      * reflected property takes no default.
-     * @cssproperty --progress-size - Thickness of the bar.
-     * @cssproperty --progress-track-color - Fill of the part that is not.
      */
     emphasis?: 'subtle';
     static styles: CSSResultGroup;

package/dist/radio/root/radio-root.css.js

@@ -71,11 +71,11 @@ font-weight: var(--helix-weight-medium);
 line-height: var(--helix-leading-tight);
 }
 
-:host([variant="card"]) {
+:host(:is([separation="filled"], [separation="outlined"])) {
 display: block;
 }
 
-:host([variant="card"]) [part="item"] {
+:host(:is([separation="filled"], [separation="outlined"])) [part="item"] {
 align-items: start;
 background-color: var(--radio-card-background-color, var(--helix-color-surface));
 border: var(--helix-border-thin) solid var(--radio-card-border-color, var(--helix-color-border));
@@ -89,33 +89,43 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-:host(:not([disabled])[variant="card"]) [part="item"]:hover {
+:host([separation="filled"]) [part="item"] {
+border-color: transparent;
+}
+
+:host(:not([disabled]):is([separation="filled"], [separation="outlined"])) [part="item"]:hover {
 border-color: var(--helix-color-foreground-muted);
 }
 
-:host([variant="card"]:state(selected)) [part="item"] {
+:host(:is([separation="filled"], [separation="outlined"]):state(selected)) [part="item"] {
 background-color: var(--helix-color-surface-raised);
 border-color: var(--helix-color-primary);
 box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);
 }
 
-:host([variant="card"]) [part="item"]:focus-visible {
+:host(:is([separation="filled"], [separation="outlined"])) [part="item"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
-:host([variant="card"]) [part="item"]:focus-visible [part="box"] {
+:host(:is([separation="filled"], [separation="outlined"]))
+[part="item"]:focus-visible
+[part="box"] {
 outline: none;
 }
 
-:host([variant="card"]) [part="box"] {
-margin-block-start: calc(
-(var(--helix-text-sm) * var(--helix-leading-tight) - var(--_radio-size)) /
-2
-);
+:host(:is([separation="filled"], [separation="outlined"])) [part="label"] {
+font-size: var(--helix-text-md);
+line-height: var(--helix-leading-normal);
+}
+
+:host(:is([separation="filled"], [separation="outlined"])) [part="box"] {
+font-size: var(--helix-text-md);
+line-height: var(--helix-leading-normal);
+margin-block-start: calc((1lh - var(--_radio-size)) / 2);
 }
 
-:host([variant="card"][hide-control]) [part="box"] {
+:host(:is([separation="filled"], [separation="outlined"])[hide-control]) [part="box"] {
 display: none;
 }
 

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

@@ -36,9 +36,9 @@ export declare class HelixRadio extends HelixHeadlessRadio {
      * Unnecessary under `chip`, which has no room for a circle beside its mark
      * and hides it already.
      *
-     * `card` only, and it is a graphic that goes rather than a radio: the control
-     * in the shadow root is untouched, so the row is still focusable, still
-     * reported to a screen reader, and still the thing a form submits.
+     * A separated choice only, and it is a graphic that goes rather than a radio:
+     * the control in the shadow root is untouched, so the row is still focusable,
+     * still reported to a screen reader, and still the thing a form submits.
      *
      * Safe because the card already carries the answer in its surface, a raised
      * fill inside a primary edge and a three-pixel ring of it. Without that ring
@@ -50,23 +50,45 @@ export declare class HelixRadio extends HelixHeadlessRadio {
      */
     hideControl: boolean;
     /**
-     * How the choice presents itself.
+     * Where the choice's own surface ends.
      *
-     * - `plain` is the default and is never written: a circle beside its words,
-     *   which is what a list of choices should be almost always.
-     * - `card` puts it in a bounded surface, for options that need room to
+     * The question `separation` asks everywhere else, asked of one option, so it
+     * is that word: what these values pick is a surface, and `plain` is already
+     * the registry's own word for the answer this family used it for.
+     *
+     * - `plain` is the resting one and is never written: a circle beside its
+     *   words, which is what a list of choices should be almost always.
+     * - `outlined` puts it in a bounded surface, for options that need room to
      *   explain themselves: a description, an icon, a price. It is the half a
      *   `data-card` link cannot do, because a link reports no value and belongs
      *   to no group, so a card that is genuinely an answer has to be this.
-     * - `chip` is the answer as its own small surface, for a row of short
-     *   choices read at a glance. It hides the circle, the surface being the
-     *   whole mark, which is why `hide-control` says it is unnecessary here.
+     * - `filled` is that same card on a ground of its own with no edge, which is
+     *   what a column of choices wants where a hairline around every one of them
+     *   is a grid of lines rather than a set of answers.
+     *
+     * **`elevated` is the one value of the axis this family does not take.** A
+     * raised choice competes with a dialog: the top layer is where a thing that
+     * interrupts you lives, and an option in a form is not one of those, so a
+     * column of lifted cards reads as a stack of floating things none of which is
+     * settled.
+     *
+     * The circle stays in all of them. A card whose only marker was its own
+     * border would ask a reader to compare surfaces across a row to find the
+     * answer, and would leave nothing for a high-contrast display.
+     */
+    separation?: 'filled' | 'outlined' | 'plain';
+    /**
+     * The answer as its own small surface, for a row of short choices read at a
+     * glance.
      *
-     * The circle stays in both. A card whose only marker was its own border would
-     * ask a reader to compare surfaces across a row to find the answer, and would
-     * leave nothing for a high-contrast display.
+     * **Not a separation, which is why it is still `variant`.** The other values
+     * pick where a surface ends around a row that keeps its circle and its words;
+     * a chip has neither. It hides the circle, the surface being the whole mark,
+     * which is why `hide-control` says it is unnecessary here, and it takes the
+     * words out of the flow to be the accessible name. That removes the
+     * distinction `separation` exists to make rather than answering it.
      */
-    variant?: 'chip' | 'plain' | 'card';
+    variant?: 'chip';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/radio/root/radio-root.js

@@ -18,6 +18,9 @@ let HelixRadio = class HelixRadio extends HelixHeadlessRadio {
 __decorate([
     property({ attribute: 'hide-control', reflect: true, type: Boolean })
 ], HelixRadio.prototype, "hideControl", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixRadio.prototype, "separation", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixRadio.prototype, "variant", void 0);

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

@@ -87,11 +87,11 @@ font-variant-numeric: tabular-nums;
 line-height: 1;
 }
 
-:host([variant="dots"]) {
+:host([shape="dots"]) {
 --_rating-mark-size: var(--rating-size, var(--helix-size-icon-sm));
 }
 
-:host([variant="dots"]) [part="mark"] {
+:host([shape="dots"]) [part="mark"] {
 border-radius: var(--helix-radii-full);
 mask-image: none;
 }

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

@@ -25,24 +25,29 @@ import type { CSSResultGroup } from 'lit';
 export declare class HelixRating extends HelixHeadlessRating {
     static styles: CSSResultGroup;
     /**
-     * Which mark the row is drawn with.
+     * The geometry one mark is drawn to.
      *
-     * `marks` is the star, and is what a rating means to most readers. `dots`
-     * drops the glyph for a plain circle, which says how much rather than how
-     * good: a star carries a judgment that a level of spice, a difficulty or a
-     * confidence has not earned.
+     * The registry's word, because the question is the registry's: `Avatar`,
+     * `Skeleton`, `IconButton`, `Meter` and `Progress` each ask what geometry
+     * their own thing is cut to under this name, and `dots` is already a value
+     * the axis holds. What is picked here is the outline of one mark and nothing
+     * else, which is a shape and not a component-specific choice.
      *
-     * Both are one shape repeated and clipped to the score, so halves work in
-     * either, and both are only a choice of drawing. A scale whose marks are
+     * `dots` drops the glyph for a plain circle, which says how much rather than
+     * how good: a star carries a judgment that a level of spice, a difficulty or
+     * a confidence has not earned. Either way it is one shape repeated and
+     * clipped to the score, so halves work in both. A scale whose marks are
      * *different* drawings is a set of choices rather than a quantity: that is
      * `Radio.Group`, whose options already carry a value and a name each.
      *
-     * **Undefaulted, because it reflects.** A default of `marks` writes
-     * `variant="marks"` onto every server-rendered rating, which React holds no
-     * prop for and reports as a hydration mismatch. The stylesheet names only
-     * `dots`, so an unset one draws marks anyway.
+     * **The star is the resting one and has no word**, which is the rule every
+     * axis follows and is also what this family needed anyway: it reflects, so a
+     * default would write the resting value onto every server-rendered rating,
+     * an attribute React holds no prop for and so a hydration mismatch for each
+     * one. The stylesheet names only `dots`, so an unset one draws the star by
+     * landing on the base rule.
      */
-    variant?: 'dots' | 'marks';
+    shape?: 'dots';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -15,7 +15,7 @@ let HelixRating = class HelixRating extends HelixHeadlessRating {
 };
 __decorate([
     property({ reflect: true })
-], HelixRating.prototype, "variant", void 0);
+], HelixRating.prototype, "shape", void 0);
 HelixRating = __decorate([
     customElement('helix-rating')
 ], HelixRating);

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

@@ -58,11 +58,11 @@ export declare class HelixSelect extends HelixHeadlessSelect {
      * `outlined` is what the unset frame already draws, so writing it would be
      * writing the resting state out.
      *
-     * **The other three fields want this too and do not have it yet.** `Input`,
-     * `Textarea` and `Combobox` wear the same frame from the same shared
-     * stylesheet, and an inline one of each is as reasonable as an inline select.
-     * They are left alone rather than swept, because each has a different thing
-     * inside the frame and guessing at three is how an axis ends up meaning four
+     * **Every field wearing `field-frame.css` wants this too and does not have it
+     * yet**, which this trigger is not one of: it draws its own frame below. An
+     * inline number input in a toolbar is as reasonable as an inline select. They
+     * are left alone rather than swept, because each has a different thing inside
+     * the frame and guessing at a set of them is how an axis ends up meaning four
      * things, which is the fault `appearance` was retired for.
      */
     emphasis?: 'ghost';

package/dist/table/column/table-column.css.js

@@ -42,13 +42,13 @@ gap: var(--helix-space-2xs);
 min-inline-size: 0;
 }
 
-:host([align="center"]) [part="column"],
-:host([align="center"]) [part="sort"] {
+:host([text-align="center"]) [part="column"],
+:host([text-align="center"]) [part="sort"] {
 justify-content: center;
 }
 
-:host([align="end"]) [part="column"],
-:host([align="end"]) [part="sort"] {
+:host([text-align="end"]) [part="column"],
+:host([text-align="end"]) [part="sort"] {
 justify-content: flex-end;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.54.0",
+  "version": "0.56.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.54.0",
-    "@fusion.dev/helix-headless": "0.54.0",
-    "@fusion.dev/helix-styles": "0.54.0"
+    "@fusion.dev/helix-core": "0.56.0",
+    "@fusion.dev/helix-headless": "0.56.0",
+    "@fusion.dev/helix-styles": "0.56.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.54.0",
-    "@fusion.dev/helix-testing": "0.54.0",
+    "@fusion.dev/helix-cem": "0.56.0",
+    "@fusion.dev/helix-testing": "0.56.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",