@fusion.dev/helix 0.54.0 → 0.55.0

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

@@ -23,7 +23,7 @@ overflow: hidden;
 --_avatar-size: var(--avatar-size, var(--helix-size-avatar-lg));
 }
 
-:host([shape="square"]) {
+:host([shape="rounded"]) {
 border-radius: var(--helix-radii-md);
 }
 

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

@@ -26,8 +26,12 @@ import type { CSSResultGroup } from 'lit';
 export declare class HelixAvatar extends HelixHeadlessAvatar {
     /**
      * Whether the avatar is a circle or a rounded square.
+     *
+     * `rounded` and not `square`, which is the sharp-cornered pole of the same
+     * axis and what `QrCode` draws with it. This corner is `radii-md`, so the word
+     * for it is the one the registry already has.
      */
-    shape?: 'circle' | 'square';
+    shape?: 'circle' | 'rounded';
     /**
      * Edge length of the avatar.
      */

package/dist/bar-chart/root/bar-chart-root.css.js

@@ -31,7 +31,7 @@ clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));
 fill: var(--_bar-chart-series);
 }
 
-:host([direction="horizontal"]) [part="bar"] {
+:host([orientation="horizontal"]) [part="bar"] {
 --_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;
 --_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2);
 }
@@ -51,27 +51,27 @@ text-overflow: ellipsis;
 white-space: nowrap;
 }
 
-:host([direction="horizontal"]) {
+:host([orientation="horizontal"]) {
 grid-template-columns: auto 1fr;
 }
 
-:host([direction="horizontal"]) [part="labels"] {
+:host([orientation="horizontal"]) [part="labels"] {
 grid-column: 1;
 grid-row: 1;
 }
 
-:host([direction="horizontal"]) [part="plot"] {
+:host([orientation="horizontal"]) [part="plot"] {
 grid-column: 2;
 grid-row: 1;
 }
 
-:host([direction="horizontal"]) [part="labels"] {
+:host([orientation="horizontal"]) [part="labels"] {
 grid-auto-columns: auto;
 grid-auto-flow: row;
 grid-auto-rows: 1fr;
 }
 
-:host([direction="horizontal"]) [part="label"] {
+:host([orientation="horizontal"]) [part="label"] {
 align-self: center;
 text-align: end;
 }
@@ -98,12 +98,12 @@ y var(--helix-duration-normal) var(--helix-easing-decelerate);
 }
 
 @starting-style {
-:host(:not([direction="horizontal"])) [part="bar"] {
+:host(:not([orientation="horizontal"])) [part="bar"] {
 height: 0;
 y: 100;
 }
 
-:host([direction="horizontal"]) [part="bar"] {
+:host([orientation="horizontal"]) [part="bar"] {
 width: 0;
 }
 }
@@ -166,27 +166,27 @@ grid-column: 2;
 grid-row: 2;
 }
 
-:host([direction="horizontal"][secondary]) {
+:host([orientation="horizontal"][secondary]) {
 grid-template-columns: auto 1fr;
 grid-template-rows: auto 1fr auto;
 }
 
-:host([direction="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {
+:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {
 grid-column: 2;
 grid-row: 1;
 }
 
-:host([direction="horizontal"][secondary]) [part="labels"] {
+:host([orientation="horizontal"][secondary]) [part="labels"] {
 grid-column: 1;
 grid-row: 2;
 }
 
-:host([direction="horizontal"][secondary]) [part="plot"] {
+:host([orientation="horizontal"][secondary]) [part="plot"] {
 grid-column: 2;
 grid-row: 2;
 }
 
-:host([direction="horizontal"][secondary]) [part="axis"][data-axis="primary"] {
+:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {
 grid-column: 2;
 grid-row: 3;
 }
@@ -199,11 +199,11 @@ pointer-events: none;
 position: relative;
 }
 
-:host(:not([direction="horizontal"])) [part="axis"] {
+:host(:not([orientation="horizontal"])) [part="axis"] {
 inline-size: var(--bar-chart-axis, 3ch);
 }
 
-:host([direction="horizontal"]) [part="axis"] {
+:host([orientation="horizontal"]) [part="axis"] {
 block-size: 1lh;
 }
 
@@ -211,20 +211,20 @@ block-size: 1lh;
 position: absolute;
 }
 
-:host(:not([direction="horizontal"])) [part="tick"] {
+:host(:not([orientation="horizontal"])) [part="tick"] {
 inset-inline-end: 0;
 translate: 0 -50%;
 }
 
-:host([direction="horizontal"]) [part="tick"] {
+:host([orientation="horizontal"]) [part="tick"] {
 translate: -50% 0;
 }
 
-:host([direction="horizontal"]:dir(rtl)) [part="tick"] {
+:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {
 translate: 50% 0;
 }
 
-:host(:not([direction="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {
+:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {
 inset-inline-end: auto;
 inset-inline-start: 0;
 }

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

@@ -50,18 +50,18 @@ padding-inline: var(--_carousel-bleed);
 }
 }
 
-:host([indicator-placement="block-start"]) [part="indicators"] {
+:host([indicator-placement="top"]) [part="indicators"] {
 grid-area: 1 / 2;
 padding-block: var(--helix-space-none) var(--helix-space-sm);
 }
 
-:host([controls-placement="block-start"]) [part="controls"] {
+:host([controls-placement="top"]) [part="controls"] {
 grid-area: 1 / 2;
 padding-block: var(--helix-space-none) var(--helix-space-sm);
 }
 
-:host([indicator-placement="inline-start"]) [part="indicators"],
-:host([indicator-placement="inline-end"]) [part="indicators"] {
+:host([indicator-placement="start"]) [part="indicators"],
+:host([indicator-placement="end"]) [part="indicators"] {
 align-self: var(--_carousel-indicators-along);
 flex-direction: column;
 justify-self: center;
@@ -69,8 +69,8 @@ padding-block-start: var(--helix-space-none);
 padding-inline: var(--helix-space-none);
 }
 
-:host([controls-placement="inline-start"]) [part="controls"],
-:host([controls-placement="inline-end"]) [part="controls"] {
+:host([controls-placement="start"]) [part="controls"],
+:host([controls-placement="end"]) [part="controls"] {
 align-self: var(--_carousel-controls-along);
 flex-direction: column;
 justify-self: center;
@@ -78,13 +78,13 @@ padding-block-start: var(--helix-space-none);
 padding-inline: var(--helix-space-none);
 }
 
-:host([indicator-placement="inline-start"]) [part="indicators"],
-:host([indicator-placement="inline-end"]) [part="indicators"] {
+:host([indicator-placement="start"]) [part="indicators"],
+:host([indicator-placement="end"]) [part="indicators"] {
 --_carousel-indicators-along: center;
 }
 
-:host([controls-placement="inline-start"]) [part="controls"],
-:host([controls-placement="inline-end"]) [part="controls"],
+:host([controls-placement="start"]) [part="controls"],
+:host([controls-placement="end"]) [part="controls"],
 :host([controls-placement="overlay"]) [part="controls"] {
 --_carousel-controls-along: center;
 }
@@ -113,22 +113,22 @@ padding-inline: var(--helix-space-none);
 --_carousel-controls-along: end;
 }
 
-:host([indicator-placement="inline-start"]) [part="indicators"] {
+:host([indicator-placement="start"]) [part="indicators"] {
 grid-area: 2 / 1;
 padding-inline-end: var(--helix-space-sm);
 }
 
-:host([controls-placement="inline-start"]) [part="controls"] {
+:host([controls-placement="start"]) [part="controls"] {
 grid-area: 2 / 1;
 padding-inline-end: var(--helix-space-sm);
 }
 
-:host([indicator-placement="inline-end"]) [part="indicators"] {
+:host([indicator-placement="end"]) [part="indicators"] {
 grid-area: 2 / 3;
 padding-inline-start: var(--helix-space-sm);
 }
 
-:host([controls-placement="inline-end"]) [part="controls"] {
+:host([controls-placement="end"]) [part="controls"] {
 grid-area: 2 / 3;
 padding-inline-start: var(--helix-space-sm);
 }
@@ -261,15 +261,15 @@ background-color: var(--helix-color-primary);
 inline-size: var(--helix-space-lg);
 }
 
-:host([indicator-placement="inline-start"]) [part~="indicator"],
-:host([indicator-placement="inline-end"]) [part~="indicator"] {
+:host([indicator-placement="start"]) [part~="indicator"],
+:host([indicator-placement="end"]) [part~="indicator"] {
 transition:
 background-color var(--_carousel-indicator-motion),
 block-size var(--_carousel-indicator-motion);
 }
 
-:host([indicator-placement="inline-start"]) [part~="indicator"][data-current],
-:host([indicator-placement="inline-end"]) [part~="indicator"][data-current] {
+:host([indicator-placement="start"]) [part~="indicator"][data-current],
+:host([indicator-placement="end"]) [part~="indicator"][data-current] {
 block-size: var(--helix-space-lg);
 inline-size: var(--helix-space-xs);
 }

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

@@ -40,9 +40,9 @@ export declare class HelixCarousel extends HelixHeadlessCarousel {
      * Which side of the slides the arrows sit on.
      *
      * The same four sides as `indicatorPlacement` and the same default, so a
-     * carousel that moves only one of them keeps the other where it was.
-     * `inline-start` or `inline-end` stacks the arrows into a column, which is
-     * what a vertical track usually wants.
+     * carousel that moves only one of them keeps the other where it was. `start`
+     * or `end` stacks the arrows into a column, which is what a vertical track
+     * usually wants.
      *
      * `overlay` puts them on the slides, at the track's own edges, which is what a
      * full-bleed carousel wants: the slide is the page and the controls are on it
@@ -56,7 +56,7 @@ export declare class HelixCarousel extends HelixHeadlessCarousel {
      * follow from it. These two placements are the whole of where a carousel's
      * chrome can go.
      */
-    controlsPlacement?: 'block-end' | 'block-start' | 'inline-end' | 'inline-start' | 'overlay';
+    controlsPlacement?: 'start' | 'end' | 'top' | 'bottom' | 'overlay';
     /**
      * Where along that side the dots sit.
      *
@@ -72,8 +72,9 @@ export declare class HelixCarousel extends HelixHeadlessCarousel {
      * is a column and the same question is `align-self`. A consumer should not
      * have to know which of those two words their edge wanted.
      *
-     * Logical, like the placement: `start` is the left in English and the right in
-     * Arabic on a horizontal run, and the top on a vertical one.
+     * Logical, like the placement's own `start` and `end`: `start` is the left in
+     * English and the right in Arabic on a horizontal run, and the top on a
+     * vertical one.
      *
      * Unset splits the row, dots to the start and arrows to the end, which is
      * what keeps two items in one grid cell from landing on each other. Beside the
@@ -86,20 +87,26 @@ export declare class HelixCarousel extends HelixHeadlessCarousel {
     /**
      * Which side of the slides the dots sit on.
      *
-     * Unset is `block-end`, under them. `block-start` puts them above,
-     * `inline-start` and `inline-end` beside, where a run of dots becomes a
-     * column.
+     * Unset is `bottom`, under them. `top` puts them above, `start` and `end`
+     * beside, where a run of dots becomes a column.
      *
-     * **The sides of the content, not positions along a bar**, and logical names
-     * rather than `top`/`left`: an `inline-start` carousel should put its dots on
-     * the right in Arabic without being told.
+     * **The sides of the content, not positions along a bar.** `start` and `end`
+     * are the logical ones and they are logical because that axis flips: a
+     * carousel with its dots at the start should put them on the right in Arabic
+     * without being told. `top` and `bottom` are the block edges, which flip in
+     * no writing mode this library draws for, so the plain word is the honest one
+     * and `block-start` would be jargon standing in for it.
      *
-     * Independent of `controlsPlacement`. Both default to the block end, where
-     * they share the row and split it, dots to the start and arrows to the end,
+     * **`Drawer` and `Toast` say it in exactly these four words**, and one
+     * vocabulary across the three is worth more than each family's own: a
+     * consumer who has placed a drawer knows where a carousel's dots go.
+     *
+     * Independent of `controlsPlacement`. Both default to the bottom, where they
+     * share the row and split it, dots to the start and arrows to the end,
      * arrived at by two defaults rather than by a rule about the pair, so moving
      * one leaves the other alone.
      */
-    indicatorPlacement?: 'block-end' | 'block-start' | 'inline-end' | 'inline-start';
+    indicatorPlacement?: 'start' | 'end' | 'top' | 'bottom';
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -105,11 +105,11 @@ border-color: var(--helix-color-danger);
 display: none;
 }
 
-:host([variant="card"]) {
+:host(:is([separation="filled"], [separation="outlined"])) {
 display: block;
 }
 
-:host([variant="card"]) [part="field"] {
+:host(:is([separation="filled"], [separation="outlined"])) [part="field"] {
 align-items: start;
 background-color: var(--checkbox-card-background-color, var(--helix-color-surface));
 border: var(--helix-border-thin) solid
@@ -124,30 +124,39 @@ 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="field"]:hover {
+:host([separation="filled"]) [part="field"] {
+border-color: transparent;
+}
+
+:host(:not(:disabled):is([separation="filled"], [separation="outlined"])) [part="field"]:hover {
 border-color: var(--helix-color-foreground-muted);
 }
 
-:host([variant="card"]:state(checked)) [part="field"] {
+:host(:is([separation="filled"], [separation="outlined"]):state(checked)) [part="field"] {
 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="field"]:has([part="control"]:focus-visible) {
+:host(:is([separation="filled"], [separation="outlined"]))
+[part="field"]:has([part="control"]: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="control"]:focus-visible {
+:host(:is([separation="filled"], [separation="outlined"])) [part="control"]:focus-visible {
 outline: none;
 }
 
-:host([variant="card"]) [part="box"] {
-margin-block-start: calc(
-(var(--helix-text-sm) * var(--helix-leading-tight) - var(--_checkbox-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);
+min-block-size: 1lh;
 }
 
 @media print {

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

@@ -30,20 +30,32 @@ import type { CSSResultGroup } from 'lit';
 export declare class HelixCheckbox extends HelixHeadlessCheckbox {
     static styles: CSSResultGroup;
     /**
-     * How the choice presents itself.
+     * Where the choice's own surface ends.
      *
-     * - `plain` is the default and is never written: a box beside its words,
+     * 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. `Radio`
+     * takes the same three for the same reason.
+     *
+     * - `plain` is the resting one and is never written: a box 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
+     * - `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.
+     * - `filled` is that same card on a ground of its own with no edge, which is
+     *   what a column of options 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.
      *
-     * The box 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.
+     * The box 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.
      */
-    variant?: 'plain' | 'card';
+    separation?: 'filled' | 'outlined' | 'plain';
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/checkbox/root/checkbox-root.js

@@ -15,7 +15,7 @@ let HelixCheckbox = class HelixCheckbox extends HelixHeadlessCheckbox {
 };
 __decorate([
     property({ reflect: true })
-], HelixCheckbox.prototype, "variant", void 0);
+], HelixCheckbox.prototype, "separation", void 0);
 HelixCheckbox = __decorate([
     customElement('helix-checkbox')
 ], HelixCheckbox);

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

@@ -37,9 +37,12 @@ export declare class HelixDescriptionList extends HelixHeadlessDescriptionList {
      * width so a column of numbers lines up by its digits. Only with
      * `direction="row"`: stacked, a label and its value share one edge already.
      *
-     * Flex's word for the same thing, and a grid rather than a flex row
-     * underneath, so the labels still share one column while the values share an
-     * end.
+     * Flex's value for the same idea, under a shorter name than Flex's own:
+     * there it is `justify-content`, the CSS property it sets, and here the
+     * underlying layout is a grid handing an edge down to each item as a custom
+     * property, so the labels still share one column while the values share an
+     * end. Naming a property this does not set after it would be the wrong kind
+     * of precision.
      */
     justify?: 'between';
     /**

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

@@ -164,15 +164,15 @@ display: block;
 inline-size: var(--dialog-icon-size, calc(var(--helix-size-icon-lg) * 2));
 }
 
-:host([align="center"]) [part="dialog"] {
+:host([text-align="center"]) [part="dialog"] {
 text-align: center;
 }
 
-:host([align="center"]) ::slotted([slot="footer"]) {
+:host([text-align="center"]) ::slotted([slot="footer"]) {
 justify-content: center;
 }
 
-:host([align="center"]) ::slotted([slot="icon"]) {
+:host([text-align="center"]) ::slotted([slot="icon"]) {
 margin-inline: auto;
 }
 

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

@@ -29,19 +29,6 @@ import type { CSSResultGroup } from 'lit';
  *   floating surface sits over content nobody can predict, so it keeps a lift by default.
  */
 export declare class HelixDialog extends HelixHeadlessDialog {
-    /**
-     * Which way the panel's contents read.
-     *
-     * One property for the whole panel rather than one per region. The regions are
-     * never mixed in practice: a dialog that asks a short question centers its
-     * mark, its title, its sentence and its buttons together, and a dialog holding
-     * a form runs all four from the start. Three properties would be three ways to
-     * write the same two arrangements, and a fourth way to get one of them wrong.
-     *
-     * Unset is `start` and stays unset, so a reflected default cannot appear on a
-     * host whose server output never had it.
-     */
-    align?: 'center' | 'start';
     /**
      * How wide the panel is allowed to be.
      *
@@ -59,11 +46,32 @@ export declare class HelixDialog extends HelixHeadlessDialog {
      * rule's own test is whether two of them sitting together could legitimately
      * differ, and it is answering "a ragged row is unwritable". Two dialogs never
      * sit together. One is on screen at a time, in the top layer, and it is the
-     * region rather than a control in one, which is the same reason `Avatar` and
-     * `Spinner` keep theirs. Not `appearance`, which says how a thing reads
-     * rather than how wide it is.
+     * region rather than a control in one, which is the other half of the axis's
+     * domain: the rest of it is pictures, which are not controls either. Not
+     * `appearance`, which says how a thing reads rather than how wide it is.
      */
     size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Which way the panel's contents read.
+     *
+     * **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
+     * box-alignment question, where things sit in a container, and they are named
+     * for the properties they mirror; this one is `text-align` on a panel of
+     * prose, and `Table.Column` answers the same question under the same name.
+     * One word for both questions is how a consumer who learned it on a layout
+     * writes it here and gets no error, a value a component does not have leaving
+     * the default in place and looking deliberate.
+     *
+     * One property for the whole panel rather than one per region. The regions are
+     * never mixed in practice: a dialog that asks a short question centers its
+     * mark, its title, its sentence and its buttons together, and a dialog holding
+     * a form runs all four from the start. Three properties would be three ways to
+     * write the same two arrangements, and a fourth way to get one of them wrong.
+     *
+     * Unset is `start` and stays unset, so a reflected default cannot appear on a
+     * host whose server output never had it.
+     */
+    textAlign?: 'center' | 'start';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/dialog/root/dialog-root.js

@@ -11,12 +11,12 @@ import { styles } from './dialog-root.css.js';
 let HelixDialog = class HelixDialog extends HelixHeadlessDialog {
     static { this.styles = styles; }
 };
-__decorate([
-    property({ reflect: true })
-], HelixDialog.prototype, "align", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixDialog.prototype, "size", void 0);
+__decorate([
+    property({ attribute: 'text-align', reflect: true })
+], HelixDialog.prototype, "textAlign", void 0);
 HelixDialog = __decorate([
     customElement('helix-dialog')
 ], HelixDialog);

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

@@ -43,33 +43,29 @@ gap: var(--helix-space-2xl);
 gap: var(--helix-space-3xl);
 }
 
-:host([align]) {
-text-align: inherit;
-}
-
-:host([align="start"]) {
+:host([align-items="start"]) {
 align-items: flex-start;
 }
-:host([align="center"]) {
+:host([align-items="center"]) {
 align-items: center;
 }
-:host([align="end"]) {
+:host([align-items="end"]) {
 align-items: flex-end;
 }
-:host([align="baseline"]) {
+:host([align-items="baseline"]) {
 align-items: baseline;
 }
 
-:host([justify="center"]) {
+:host([justify-content="center"]) {
 justify-content: center;
 }
-:host([justify="end"]) {
+:host([justify-content="end"]) {
 justify-content: flex-end;
 }
-:host([justify="between"]) {
+:host([justify-content="between"]) {
 justify-content: space-between;
 }
-:host([justify="around"]) {
+:host([justify-content="around"]) {
 justify-content: space-around;
 }
 

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

@@ -28,9 +28,24 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  */
 export declare class HelixFlex extends HelixElement {
     /**
-     * Alignment across the direction.
+     * Alignment across the direction, which is `align-items`.
+     *
+     * **Named for the CSS property it sets, because it is that property.** A flex
+     * container is the one place where the box-alignment words are already the
+     * reader's, so a shorter name would be a second vocabulary for something they
+     * can already say, and `align` alone is the word four other families use for
+     * four other questions: `Dialog` and `Table.Column` mean `text-align` by it.
+     *
+     * **It also keeps the name out of the browser's way.** `align` is a legacy
+     * HTML presentational attribute mapped to `text-align` on any element that
+     * carries one, this one included: measured, an invented tag with
+     * `align="center"` computes centered text too, so it is nothing to do with
+     * being a known element. A row that carried it therefore centered the text
+     * inside every field in it, through a hint no rule here declares and none can
+     * see, and the fix is a name the platform has no opinion about rather than a
+     * guard against the hint.
      */
-    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
     /**
      * Whether items run across or down.
      */
@@ -44,9 +59,13 @@ export declare class HelixFlex extends HelixElement {
      */
     inline: boolean;
     /**
-     * Distribution along the direction.
+     * Distribution along the direction, which is `justify-content`.
+     *
+     * Named for the property it sets, the way `alignItems` is. `between` and
+     * `around` drop the `space-` prefix and nothing else does, because those two
+     * are the only values whose CSS spelling is two words.
      */
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around';
     /**
      * Whether items wrap onto more lines.
      */

package/dist/flex/root/flex-root.js

@@ -20,8 +20,8 @@ let HelixFlex = class HelixFlex extends HelixElement {
     static { this.styles = styles; }
 };
 __decorate([
-    property({ reflect: true })
-], HelixFlex.prototype, "align", void 0);
+    property({ attribute: 'align-items', reflect: true })
+], HelixFlex.prototype, "alignItems", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixFlex.prototype, "direction", void 0);
@@ -32,8 +32,8 @@ __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixFlex.prototype, "inline", void 0);
 __decorate([
-    property({ reflect: true })
-], HelixFlex.prototype, "justify", void 0);
+    property({ attribute: 'justify-content', reflect: true })
+], HelixFlex.prototype, "justifyContent", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixFlex.prototype, "wrap", void 0);