@threadlabs/looma 0.19.1 → 0.21.0

package/components/ui-menu/ui-menu.html

@@ -1,17 +1,30 @@
 <template component="ui-menu" controller="./ui-menu.js">
   <defs>
-    <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
+    >Compact trades padding and type size for rows that fit more on screen.</prop>
     <prop name="open" type="boolean" default="false">Whether the menu is open initially or when set externally.</prop>
     <prop name="inline" type="boolean" default="false">Displays the menu in the page flow without an overlay or trigger, for an embedded list of actions.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the menu.</prop>
     <prop name="placement" type="string" default="bottom-start">Positions an associated menu relative to its trigger.</prop>
     <state name="internalOpen" :value="false"></state>
-    <event name="select" type="object({ value: string, checked?: boolean, trigger: keyboard | pointer | programmatic })"></event>
-    <event name="open" type="object({ open: boolean, reason: action | programmatic, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="select" type="object">
+      <prop name="value" required type="string"></prop>
+      <prop name="checked" type="boolean"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="open" type="object">
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="close"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div role="menu" aria-orientation="vertical"><div class="surface"><slot></slot></div></div>
   <style>

package/components/ui-menu-group/ui-menu-group.html

@@ -2,7 +2,7 @@
   <defs>
     <prop name="label" type="string" default="">Visible heading and accessible name for this group of menu items.</prop>
   </defs>
-  <div role="group" :aria-label="label">
+  <div role="group" from:aria-label="label">
     <div class="heading" $if="label" $value="label"></div>
     <slot></slot>
   </div>

package/components/ui-menu-item/ui-menu-item.html

@@ -7,31 +7,36 @@
     >The value the enclosing menu reports in its select event when this item is chosen. Give each item a distinct value so one handler can tell them
       apart.</prop>
     <prop name="href" type="string" default="">A destination makes an action item a real link, with native navigation and link context actions.</prop>
-    <prop name="type" type="action | checkbox | radio" default="action"
+    <prop name="type" type="keyword" values="action, checkbox, radio" default="action"
     >An action closes its menu; a checkbox toggles, and a radio chooses one item within its nearest Menu Group. Checkable items keep the menu open.</prop>
     <prop name="checked" type="boolean" default="false">Initial or externally controlled checked state of a checkbox or radio item.</prop>
     <state name="internalChecked" :value="false"></state>
-    <event name="change" type="object({ checked: boolean, value: string, type: checkbox | radio, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object">
+      <prop name="checked" required type="boolean"></prop>
+      <prop name="value" required type="string"></prop>
+      <prop name="type" required type="keyword" values="checkbox, radio"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <template $match>
     <a
       $when="href and type = 'action'"
       role="menuitem"
       tabindex="-1"
-      :aria-disabled="disabled"
-      :data-value="value"
-      :href="{ true: null, false: href }[format('%s', disabled)]"
+      from:aria-disabled="disabled"
+      from:data-value="value"
+      from:href="{ true: null, false: href }[format('%s', disabled)]"
     >
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
     </a>
     <div
       $else
-      :role="{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]"
-      :aria-checked="{ action: null, checkbox: internalChecked, radio: internalChecked }[type]"
+      from:role="{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]"
+      from:aria-checked="{ action: null, checkbox: internalChecked, radio: internalChecked }[type]"
       tabindex="-1"
-      :aria-disabled="disabled"
-      :data-value="value"
+      from:aria-disabled="disabled"
+      from:data-value="value"
     >
       <span class="indicator" aria-hidden="true">
         <ui-icon $if="type = 'checkbox' and internalChecked" name="check"></ui-icon>

package/components/ui-meter/ui-meter.html

@@ -5,11 +5,11 @@
     <prop name="max" type="number" default="1"
     >The value of a full bar, as on a native meter: 1 for a fraction, or the whole amount (a total, a count of items) with value as the part of it. Must be
       above 0; otherwise the bar is empty.</prop>
-    <prop name="tone" type="neutral | accent | info | success | warning | danger" default="neutral"
+    <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
     >Which colour the filled part speaks in, as on Badge: neutral is a quiet grey, accent draws the eye, and info, success, warning, and danger mark a state
       (such as nothing yet, partial, complete, or needs attention). Colour alone says nothing to assistive technology or in forced colours, so say the state in
       valueText or in text beside the meter too.</prop>
-    <prop name="size" type="sm | md" default="md"
+    <prop name="size" type="keyword" values="sm, md" default="md"
     >Thickness. sm is a thin bar that sits in a line of text, such as a table cell beside an amount; md stands on its own.</prop>
     <prop name="segments" type="number" default="0"
     >How many equal segments to draw the bar as, from 2 to 12, for a count of steps: set max to the same number and value to the steps done, so whole segments
@@ -28,11 +28,11 @@
   <span
     role="meter"
     aria-valuemin="0"
-    :aria-valuemax="max"
-    :aria-valuenow="amount"
-    :aria-valuetext="{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]"
-    :aria-label="{ true: label, false: null }[format('%s', label != '')]"
-    :data-ui-meter-segments="{ true: segments, false: null }[format('%s', segments > 1)]"
+    from:aria-valuemax="max"
+    from:aria-valuenow="amount"
+    from:aria-valuetext="{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]"
+    from:aria-label="{ true: label, false: null }[format('%s', label != '')]"
+    from:data-ui-meter-segments="{ true: segments, false: null }[format('%s', segments > 1)]"
   >
     <span class="fill" style:inline-size="format('%s%', percent)"></span>
   </span>

package/components/ui-nav-item/ui-nav-item.html

@@ -1,15 +1,16 @@
 <template component="ui-nav-item">
   <defs>
-    <prop name="current" type="boolean | page | step | location" default="false"
+    <prop name="current" type="keyword" values="true, false, page, step, location" default="false"
     >Marks the item as where you are: it takes the selected surface, a stronger label, and a bar on its start edge, and states aria-current, which assistive
-      technology announces. true means the current page (aria-current="page"); step marks the current step of a process, and location the current place in a
-      set, such as a section of a record. Set it on one item at a time.</prop>
+      technology announces. "true" means the current page (aria-current="page"); "step" marks the current step of a process, and "location" the current place in
+      a set, such as a section of a record. Set it on one item at a time.</prop>
     <prop name="href" type="string"
     >The link's destination. Pair it with as="a" so the item renders as a real link: a router, a modified click, and "open in new tab" all work. Without it the
       item is a button, for switching views inside the app.</prop>
     <prop name="target" type="string">Where a link opens, as on a native link. Only meaningful with as="a".</prop>
     <prop name="rel" type="string">The link's relationship to its destination, as on a native link. Only meaningful with as="a".</prop>
-    <prop name="as" type="button | a" default="button">The native element the item renders: a button, or a link (a) that navigates to href.</prop>
+    <prop name="as" type="keyword" values="button, a" default="button"
+    >The native element the item renders: a button, or a link (a) that navigates to href.</prop>
     <!-- A button or a link, as Button does. A button never submits a form; a link carries no type. The
          language has no conditional expression, so a table keyed by a value's text picks each attribute,
          and null leaves it off. -->
@@ -17,10 +18,10 @@
   <template $match>
     <a
       $when="as = 'a'"
-      :href="href"
-      :target="target"
-      :rel="rel"
-      :aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]"
+      from:href="href"
+      from:target="target"
+      from:rel="rel"
+      from:aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]"
     >
       <span class="indicator" aria-hidden="true"></span>
       <span class="leading"><slot name="leading"></slot></span>
@@ -29,7 +30,7 @@
         <span class="description"><slot name="description"></slot></span>
       </span>
     </a>
-    <button $else type="button" :aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]">
+    <button $else type="button" from:aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]">
       <span class="indicator" aria-hidden="true"></span>
       <span class="leading"><slot name="leading"></slot></span>
       <span class="content">

package/components/ui-page-header/ui-page-header.html

@@ -1,6 +1,6 @@
 <template component="ui-page-header">
   <defs>
-    <prop name="align" type="start | center" default="start"
+    <prop name="align" type="keyword" values="start, center" default="start"
     >Where the header sits. start runs along the page's start edge with actions at the end; center stacks everything centred, for a standalone card such as
       sign-in.</prop>
   </defs>

package/components/ui-popover/ui-popover.html

@@ -4,18 +4,27 @@
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the popover.</prop>
     <prop
       name="placement"
-      type="top | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-end"
+      type="keyword"
+      values="top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end"
       default="bottom-start"
     >Positions the surface around its trigger. Start and end on top or bottom follow the writing direction.</prop>
     <state name="internalOpen" :value="false"></state>
     <event
       name="open"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="close"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <span><div class="surface"><slot></slot></div></span>
   <style>

package/components/ui-radio/ui-radio.html

@@ -12,15 +12,19 @@
     <prop name="value" type="string" default="on"
     >The value this radio stands for: submitted with a form, reported in its change event, and matched against a ui-radio-group's value to decide which radio is
       checked.</prop>
-    <prop name="size" type="sm | md | lg" default="md"
+    <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Aligns the radio with fields and buttons of the same size. It keeps its box size; the label takes that size's field type size and its first line centres in
       that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text baseline.
       Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
     <state name="internalChecked" :value="false"></state>
-    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object">
+      <prop name="checked" required type="boolean"></prop>
+      <prop name="value" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <label>
-    <input type="radio" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :value="value" :name="name">
+    <input type="radio" $ref="input" .checked="internalChecked" from:disabled="disabled" from:required="required" from:value="value" from:name="name">
     <span class="text">
       <span class="label"><slot></slot></span>
       <span class="description" $ref="description" aria-hidden="true"><slot name="description"></slot></span>

package/components/ui-radio-group/ui-radio-group.html

@@ -8,7 +8,7 @@
       the radios together, so set it when the choice submits with a form.</prop>
     <prop name="label" type="string" default="Options"
     >The group's legend, shown above the radios and announced as the group's name. Phrase it as the question the radios answer.</prop>
-    <prop name="orientation" type="horizontal | vertical" default="horizontal"
+    <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >horizontal lays the radios out in a row; vertical stacks them in a column. The arrow keys move between radios either way.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Disables every radio in the group through the native fieldset, so no choice can be made and the group submits nothing with its form. A radio disabled on
@@ -19,10 +19,18 @@
     <prop name="invalid" type="boolean" default="false"
     >Exposes an externally validated error on the group and styles its legend with the field danger colour.</prop>
     <state name="internalValue" :value="''"></state>
-    <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
-    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="select" type="object">
+      <prop name="value" required type="string"></prop>
+      <prop name="previousValue" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="change" type="object">
+      <prop name="checked" required type="boolean"></prop>
+      <prop name="value" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
-  <fieldset role="radiogroup" :aria-required="required" :aria-invalid="invalid" :disabled="disabled">
+  <fieldset role="radiogroup" from:aria-required="required" from:aria-invalid="invalid" from:disabled="disabled">
     <legend><template $value="label"></template></legend>
     <slot></slot>
   </fieldset>

package/components/ui-reel/ui-reel.html

@@ -1,12 +1,12 @@
 <template component="ui-reel">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl"
+    <prop name="gap" type="keyword" values="xs, s, m, l, xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-reel-gap custom property,
       set on the reel itself, overrides it; set on an ancestor, it does nothing.</prop>
-    <prop name="itemWidth" type="sm | md | lg"
+    <prop name="itemWidth" type="keyword" values="sm, md, lg"
     >A fixed width for every item: sm is 12rem, md is 16rem, and lg is 20rem. Unset, each item keeps its content's width. Items never shrink to fit, so the reel
       scrolls sideways once they overflow.</prop>
-    <prop name="snap" type="start | center"
+    <prop name="snap" type="keyword" values="start, center"
     >Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel
       scrolls freely.</prop>
   </defs>

package/components/ui-scroll-area/ui-scroll-area.html

@@ -1,6 +1,6 @@
 <template component="ui-scroll-area" controller="./ui-scroll-area.js">
   <defs>
-    <prop name="orientation" type="vertical | horizontal" default="vertical"
+    <prop name="orientation" type="keyword" values="vertical, horizontal" default="vertical"
     >The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical
       overflow.</prop>
   </defs>

package/components/ui-search-result-row/ui-search-result-row.html

@@ -6,7 +6,7 @@
     >Marks the row as the current result: it gets the hover surface and aria-current="true", which assistive technology announces as current. Set it on one row
       at a time, such as the result the arrow keys have moved to.</prop>
   </defs>
-  <button type="button" :disabled="disabled" :aria-current="selected">
+  <button type="button" from:disabled="disabled" from:aria-current="selected">
     <span class="leading"><slot name="leading"></slot></span>
     <span class="content">
       <span class="title"><slot name="title"></slot></span>

package/components/ui-search-shell/ui-search-shell.html

@@ -7,11 +7,15 @@
     <state name="internalOpen" :value="false"></state>
     <event
       name="close"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div>
-    <dialog $ref="dialog" :aria-label="label">
+    <dialog $ref="dialog" from:aria-label="label">
       <div class="panel">
         <div class="search"><slot name="search"></slot></div>
         <div class="status"><slot name="status"></slot></div>

package/components/ui-section/ui-section.html

@@ -2,16 +2,16 @@
   <defs>
     <prop name="heading" type="string" default=""
     >The section's heading, an h2. Leave it empty for a section with no visible heading, and name the section with aria-label.</prop>
-    <prop name="variant" type="plain | card | divided" default="plain"
+    <prop name="variant" type="keyword" values="plain, card, divided" default="plain"
     >How the section is set apart. plain is a heading and content in the flow of the page; card sits it on a bordered surface, for a settings group; divided
       rules it off from the section before it, for a long form.</prop>
-    <prop name="tone" type="neutral | danger" default="neutral"
+    <prop name="tone" type="keyword" values="neutral, danger" default="neutral"
     >danger marks a section of destructive actions (a danger zone): its heading and a card's border take the danger colour.</prop>
   </defs>
   <section>
     <span class="head">
       <span class="copy">
-        <h2 class="heading" :hidden="not heading"><template $value="heading"></template></h2>
+        <h2 class="heading" from:hidden="not heading"><template $value="heading"></template></h2>
         <span class="description"><slot name="description"></slot></span>
       </span>
       <span class="actions"><slot name="actions"></slot></span>

package/components/ui-select/ui-select.html

@@ -6,13 +6,13 @@
     <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
     <prop name="required" type="boolean" default="false">Requires a non-empty option for form validation.</prop>
-    <prop name="size" type="sm | md | lg" default="md"
+    <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Height, padding, chevron, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by
       default) with smaller text and a smaller chevron, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller
       with roomier padding. Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. It is not the native size attribute: a select
       is always a single-choice dropdown. Change it after render through this option; the element's size property is the native one.</prop>
   </defs>
-  <select :disabled="disabled" :required="required" :aria-invalid="invalid"><slot></slot></select>
+  <select from:disabled="disabled" from:required="required" from:aria-invalid="invalid"><slot></slot></select>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-select-border {

package/components/ui-separator/ui-separator.html

@@ -1,9 +1,9 @@
 <template component="ui-separator">
   <defs>
-    <prop name="orientation" type="horizontal | vertical" default="horizontal"
+    <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >Whether the separator divides stacked content (horizontal) or inline content (vertical).</prop>
   </defs>
-  <hr :aria-orientation="orientation">
+  <hr from:aria-orientation="orientation">
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-separator-color {

package/components/ui-sidebar/ui-sidebar.html

@@ -1,6 +1,6 @@
 <template component="ui-sidebar" controller="./ui-sidebar.js">
   <defs>
-    <prop name="side" type="start | end" default="start">The edge the sidebar sits on. The page places it beside its main content.</prop>
+    <prop name="side" type="keyword" values="start, end" default="start">The edge the sidebar sits on. The page places it beside its main content.</prop>
     <prop name="width" type="number" default="0">Docked width in pixels. 0 uses --ui-sidebar-width (280px by default); dragging the handle updates it.</prop>
     <prop name="minWidth" type="number" default="200">The narrowest width the resize handle allows, in pixels.</prop>
     <prop name="maxWidth" type="number" default="480">The widest width the resize handle allows, in pixels.</prop>
@@ -8,12 +8,19 @@
     <prop name="resizeStep" type="number" default="16">Arrow-key resize step in pixels.</prop>
     <prop name="resizeLabel" type="string" default="Resize sidebar">Accessible name of the resize handle.</prop>
     <prop name="collapsed" type="boolean" default="false">Whether the docked sidebar is collapsed.</prop>
-    <prop name="breakpoint" type="sm | md | lg" default="md"
+    <prop name="breakpoint" type="keyword" values="sm, md, lg" default="md"
     >Below this viewport width (40rem, 48rem, 64rem) the sidebar becomes an off-canvas drawer, closed until toggled.</prop>
     <state name="internalCollapsed" :value="false"></state>
     <state name="drawer" :value="false"></state>
-    <event name="resize" type="object({ width: number, trigger: keyboard | pointer | programmatic })"></event>
-    <event name="toggle" type="object({ open: boolean, mode: docked | drawer, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="resize" type="object">
+      <prop name="width" required type="number"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="toggle" type="object">
+      <prop name="open" required type="boolean"></prop>
+      <prop name="mode" required type="keyword" values="docked, drawer"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <aside>
     <div class="content"><slot></slot></div>
@@ -24,8 +31,8 @@
       aria-orientation="vertical"
       tabindex="0"
       data-ui-affordance="resize"
-      :aria-label="resizeLabel"
-      :hidden="not resizable or drawer or internalCollapsed"
+      from:aria-label="resizeLabel"
+      from:hidden="not resizable or drawer or internalCollapsed"
     >
       <span class="guide" aria-hidden="true"></span>
     </div>

package/components/ui-spinner/ui-spinner.html

@@ -3,14 +3,14 @@
     <prop name="label" type="string" default=""
     >What is loading, for assistive technology ("Loading pages"). With a label the spinner is a status that is announced; without one it is decoration, for a
       spinner beside visible text that already says so.</prop>
-    <prop name="size" type="sm | md" default="md">sm fits inside a button or a line of small text; md sits beside body text.</prop>
+    <prop name="size" type="keyword" values="sm, md" default="md">sm fits inside a button or a line of small text; md sits beside body text.</prop>
   </defs>
   <span
     class="ring"
-    :role="{ true: 'status', false: null }[format('%s', label != '')]"
-    :aria-label="{ true: label, false: null }[format('%s', label != '')]"
-    :aria-live="{ true: 'polite', false: null }[format('%s', label != '')]"
-    :aria-hidden="{ true: null, false: 'true' }[format('%s', label != '')]"
+    from:role="{ true: 'status', false: null }[format('%s', label != '')]"
+    from:aria-label="{ true: label, false: null }[format('%s', label != '')]"
+    from:aria-live="{ true: 'polite', false: null }[format('%s', label != '')]"
+    from:aria-hidden="{ true: null, false: 'true' }[format('%s', label != '')]"
   >
     <svg viewBox="0 0 50 50" fill="none" aria-hidden="true" focusable="false">
       <circle class="track" cx="25" cy="25" r="20"></circle>

package/components/ui-stack/ui-stack.html

@@ -1,12 +1,12 @@
 <template component="ui-stack">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl"
+    <prop name="gap" type="keyword" values="xs, s, m, l, xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap custom property,
       set on the stack itself, overrides it; set on an ancestor, it does nothing.</prop>
-    <prop name="align" type="start | center | end | stretch"
+    <prop name="align" type="keyword" values="start, center, end, stretch"
     >How items sit across the stack: stretch (the default) makes each fill the stack's width; start, center, and end keep each at its own width, against the
       start, in the middle, or against the end.</prop>
-    <prop name="justify" type="start | center | end | between"
+    <prop name="justify" type="keyword" values="start, center, end, between"
     >Where items sit along a stack that is taller than its content: start (the default), center, end, or between, which spreads the spare space between items.
       It has no effect unless the stack is given a height or stretched to one.</prop>
   </defs>

package/components/ui-status-message/ui-status-message.html

@@ -1,17 +1,17 @@
 <template component="ui-status-message">
   <defs>
-    <prop name="kind" type="empty | loading | error" default="empty"
+    <prop name="kind" type="keyword" values="empty, loading, error" default="empty"
     >What the view is saying. empty: there is nothing here yet (announced politely); loading: it is on its way, with a spinner (announced politely); error: it
       could not be shown, in the danger tone (announced at once).</prop>
     <prop name="heading" type="string" default="">A short heading above the message, such as "No pages yet". Optional.</prop>
-    <prop name="layout" type="inline | panel | fill" default="inline"
+    <prop name="layout" type="keyword" values="inline, panel, fill" default="inline"
     >Where it sits. inline takes its place in the view's flow; panel sits it on a dashed surface, for an empty area in a page; fill centres it in all the space
       it is given, for a whole view that is loading or failed.</prop>
   </defs>
-  <div :role="{ true: 'alert', false: 'status' }[format('%s', kind = 'error')]">
-    <ui-spinner size="sm" :hidden="kind != 'loading'"></ui-spinner>
+  <div from:role="{ true: 'alert', false: 'status' }[format('%s', kind = 'error')]">
+    <ui-spinner size="sm" from:hidden="kind != 'loading'"></ui-spinner>
     <span class="copy">
-      <strong class="heading" :hidden="not heading"><template $value="heading"></template></strong>
+      <strong class="heading" from:hidden="not heading"><template $value="heading"></template></strong>
       <span class="message"><slot></slot></span>
     </span>
     <span class="action"><slot name="action"></slot></span>

package/components/ui-switch/ui-switch.html

@@ -9,15 +9,28 @@
     <prop name="value" type="string" default="on"
     >The value a form submits under name while the switch is on, also reported in the change event's detail so one handler can tell switches apart. on by
       default, as on a native checkbox.</prop>
-    <prop name="size" type="sm | md | lg" default="md"
+    <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Aligns the switch with fields and buttons of the same size. It keeps its track size; the label takes that size's field type size and its first line centres
       in that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text
       baseline. Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
     <state name="internalChecked" :value="false"></state>
-    <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="change" type="object">
+      <prop name="checked" required type="boolean"></prop>
+      <prop name="value" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <label>
-    <input type="checkbox" role="switch" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :name="name" :value="value">
+    <input
+      type="checkbox"
+      role="switch"
+      $ref="input"
+      .checked="internalChecked"
+      from:disabled="disabled"
+      from:required="required"
+      from:name="name"
+      from:value="value"
+    >
     <span class="text">
       <span class="label"><slot></slot></span>
       <span class="description" $ref="description" aria-hidden="true"><slot name="description"></slot></span>

package/components/ui-switcher/ui-switcher.html

@@ -1,12 +1,12 @@
 <template component="ui-switcher" controller="./ui-switcher.js">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl"
+    <prop name="gap" type="keyword" values="xs, s, m, l, xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-switcher-gap custom
       property, set on the switcher itself, overrides it; set on an ancestor, it does nothing.</prop>
-    <prop name="threshold" type="xs | sm | md | lg"
+    <prop name="threshold" type="keyword" values="xs, sm, md, lg"
     >The container width at which items switch between a row and a stack: wider, they all sit side by side; narrower, each takes the full width. xs is 20rem, sm
       is 30rem (also the default), md is 45rem, and lg is 60rem.</prop>
-    <prop name="align" type="start | center | end | stretch"
+    <prop name="align" type="keyword" values="start, center, end, stretch"
     >How items line up while they sit in a row: stretch (the default) makes them equally tall; start, center, and end align their tops, middles, or
       bottoms.</prop>
     <prop name="limit" type="integer"

package/components/ui-table/ui-table.html

@@ -1,6 +1,6 @@
 <template component="ui-table" controller="./ui-table.js">
   <defs>
-    <prop name="density" type="comfortable | compact" default="comfortable"
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >How tall each row is. Every row is at least one control tall, so a row holding a control lines up with the rows around it. comfortable fits a control of
       the standard height (2.5rem), for tables read or edited at a glance; compact fits a small one (2rem), such as a Checkbox or a Button with size="sm", for
       long tables to scan.</prop>