@threadlabs/looma 0.19.1 → 0.21.0

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

@@ -4,35 +4,113 @@
     <prop name="open" type="boolean" default="false">Shows the controls after the editor has supplied current geometry.</prop>
     <prop
       name="geometry"
-      type="object({ rowBoundaries: list(number), columnBoundaries: list(number), activeCell: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null, hoveredCell?: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null }) | null"
-    >The authoritative editor-measured table boundaries and active or hovered cell rectangles.</prop>
+      type="object"
+    >
+      <prop name="rowBoundaries" required type="array">
+        <prop type="number"></prop>
+      </prop>
+      <prop name="columnBoundaries" required type="array">
+        <prop type="number"></prop>
+      </prop>
+      <prop name="activeCell" required nullable type="object">
+        <prop name="left" required type="number"></prop>
+        <prop name="top" required type="number"></prop>
+        <prop name="width" required type="number"></prop>
+        <prop name="height" required type="number"></prop>
+        <prop name="rowIndex" required type="integer"></prop>
+        <prop name="columnIndex" required type="integer"></prop>
+      </prop>
+      <prop name="hoveredCell" nullable type="object">
+        <prop name="left" required type="number"></prop>
+        <prop name="top" required type="number"></prop>
+        <prop name="width" required type="number"></prop>
+        <prop name="height" required type="number"></prop>
+        <prop name="rowIndex" required type="integer"></prop>
+        <prop name="columnIndex" required type="integer"></prop>
+      </prop>
+      The authoritative editor-measured table boundaries and active or hovered cell rectangles.
+    </prop>
     <state
       name="rows"
-      type="list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))"
+      type="array"
       :value="[]"
-    ></state>
+    >
+      <prop type="object">
+        <prop name="key" required type="string"></prop>
+        <prop name="index" required type="integer"></prop>
+        <prop name="offset" required type="string"></prop>
+        <prop name="affordance" required type="keyword" values="insert-row, insert-column"></prop>
+        <prop name="action" required type="keyword" values="add-row-before, add-row-after, add-column-before, add-column-after"></prop>
+        <prop name="label" required type="string"></prop>
+      </prop>
+    </state>
     <state
       name="cols"
-      type="list(object({ key: string, index: integer, offset: string, affordance: insert-row | insert-column, action: add-row-before | add-row-after | add-column-before | add-column-after, label: string }))"
+      type="array"
       :value="[]"
-    ></state>
+    >
+      <prop type="object">
+        <prop name="key" required type="string"></prop>
+        <prop name="index" required type="integer"></prop>
+        <prop name="offset" required type="string"></prop>
+        <prop name="affordance" required type="keyword" values="insert-row, insert-column"></prop>
+        <prop name="action" required type="keyword" values="add-row-before, add-row-after, add-column-before, add-column-after"></prop>
+        <prop name="label" required type="string"></prop>
+      </prop>
+    </state>
     <state
       name="hovered"
-      type="object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, rowOffset: string, columnOffset: string }) | null"
+      type="object"
       :value="null"
-    ></state>
+      nullable
+    >
+      <prop name="left" required type="number"></prop>
+      <prop name="top" required type="number"></prop>
+      <prop name="width" required type="number"></prop>
+      <prop name="height" required type="number"></prop>
+      <prop name="rowIndex" required type="integer"></prop>
+      <prop name="columnIndex" required type="integer"></prop>
+      <prop name="rowOffset" required type="string"></prop>
+      <prop name="columnOffset" required type="string"></prop>
+    </state>
     <state
       name="active"
-      type="object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer, menuLeft: string, menuTop: string }) | null"
+      type="object"
       :value="null"
-    ></state>
+      nullable
+    >
+      <prop name="left" required type="number"></prop>
+      <prop name="top" required type="number"></prop>
+      <prop name="width" required type="number"></prop>
+      <prop name="height" required type="number"></prop>
+      <prop name="rowIndex" required type="integer"></prop>
+      <prop name="columnIndex" required type="integer"></prop>
+      <prop name="menuLeft" required type="string"></prop>
+      <prop name="menuTop" required type="string"></prop>
+    </state>
     <state name="activeKey" :value="''"></state>
+    <event name="add-row-before" type="object({ boundaryIndex: integer })"></event>
+    <event name="add-row-after" type="object({ boundaryIndex: integer })"></event>
+    <event name="add-column-before" type="object({ boundaryIndex: integer })"></event>
+    <event name="add-column-after" type="object({ boundaryIndex: integer })"></event>
+    <event name="select-row" type="object({ rowIndex: integer, columnIndex: integer })"></event>
+    <event name="select-column" type="object({ rowIndex: integer, columnIndex: integer })"></event>
+    <event name="reorder-row" type="object({ fromIndex: integer, toIndex: integer })"></event>
+    <event name="reorder-column" type="object({ fromIndex: integer, toIndex: integer })"></event>
+    <event
+      name="open-cell-menu"
+      type="object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+    ></event>
+    <event
+      name="open-row-menu"
+      type="object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+    ></event>
     <event
-      name="action"
-      type="object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: reorder-row | reorder-column, fromIndex: integer, toIndex: integer }) | object({ action: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+      name="open-column-menu"
+      type="object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
     ></event>
   </defs>
-  <div aria-label="Table controls" :hidden="not open">
+  <div aria-label="Table controls" from:hidden="not open">
     <div class="rows">
       <div
         $each="control of rows"
@@ -40,17 +118,17 @@
         class="control row"
         class:active="control.key = activeKey"
         style:top="control.offset"
-        :data-control-key="control.key"
+        from:data-control-key="control.key"
       >
         <span class="line" aria-hidden="true"></span>
         <span class="guide" data-ui-guide aria-hidden="true"></span>
         <button
           type="button"
           class="handle"
-          :data-ui-affordance="control.affordance"
-          :data-action="control.action"
-          :data-boundary-index="control.index"
-          :aria-label="control.label"
+          from:data-ui-affordance="control.affordance"
+          from:data-action="control.action"
+          from:data-boundary-index="control.index"
+          from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
           <span class="tooltip" role="tooltip" $value="control.label"></span>
@@ -64,17 +142,17 @@
         class="control col"
         class:active="control.key = activeKey"
         style:left="control.offset"
-        :data-control-key="control.key"
+        from:data-control-key="control.key"
       >
         <span class="line" aria-hidden="true"></span>
         <span class="guide" data-ui-guide aria-hidden="true"></span>
         <button
           type="button"
           class="handle"
-          :data-ui-affordance="control.affordance"
-          :data-action="control.action"
-          :data-boundary-index="control.index"
-          :aria-label="control.label"
+          from:data-ui-affordance="control.affordance"
+          from:data-action="control.action"
+          from:data-boundary-index="control.index"
+          from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
           <span class="tooltip" role="tooltip" $value="control.label"></span>
@@ -87,8 +165,8 @@
         class="selector row"
         style:top="hovered.rowOffset"
         data-action="select-row"
-        :data-row-index="hovered.rowIndex"
-        :data-column-index="hovered.columnIndex"
+        from:data-row-index="hovered.rowIndex"
+        from:data-column-index="hovered.columnIndex"
         title="Drag row to reorder; click for actions"
         aria-label="Row actions"
       >
@@ -99,8 +177,8 @@
         class="selector column"
         style:left="hovered.columnOffset"
         data-action="select-column"
-        :data-row-index="hovered.rowIndex"
-        :data-column-index="hovered.columnIndex"
+        from:data-row-index="hovered.rowIndex"
+        from:data-column-index="hovered.columnIndex"
         title="Drag column to reorder; click for actions"
         aria-label="Column actions"
       >
@@ -114,8 +192,8 @@
       style:left="active.menuLeft"
       style:top="active.menuTop"
       data-action="open-cell-menu"
-      :data-row-index="active.rowIndex"
-      :data-column-index="active.columnIndex"
+      from:data-row-index="active.rowIndex"
+      from:data-column-index="active.columnIndex"
       title="Cell actions"
       aria-label="Cell actions"
     >

package/components/ui-editor-table-overlay/ui-editor-table-overlay.js

@@ -96,7 +96,7 @@ export default function controller(host) {
     if (to === null) return;
     suppressClick = true;
     setTimeout(() => { suppressClick = false; }, 0);
-    if (to !== from) host.dispatch("action", { action: axis === "row" ? "reorder-row" : "reorder-column", fromIndex: from, toIndex: to });
+    if (to !== from) host.dispatch(axis === "row" ? "reorder-row" : "reorder-column", { fromIndex: from, toIndex: to });
   };
   const boundaries = (axis) => {
     const values = host.state.geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
@@ -141,13 +141,13 @@ export default function controller(host) {
     const action = button.dataset.action;
     const cell = { rowIndex: Number(button.dataset.rowIndex), columnIndex: Number(button.dataset.columnIndex) };
     if (action === "select-row" || action === "select-column") {
-      host.dispatch("action", { action, ...cell });
+      host.dispatch(action, cell);
       const rect = button.getBoundingClientRect();
-      host.dispatch("action", { action: action === "select-row" ? "open-row-menu" : "open-column-menu", ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
+      host.dispatch(action === "select-row" ? "open-row-menu" : "open-column-menu", { ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
     } else if (action === "open-cell-menu") {
       const rect = button.getBoundingClientRect();
-      host.dispatch("action", { action, ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
-    } else host.dispatch("action", { action, boundaryIndex: Number(button.dataset.boundaryIndex) });
+      host.dispatch(action, { ...cell, anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
+    } else host.dispatch(action, { boundaryIndex: Number(button.dataset.boundaryIndex) });
   };
   const keyOf = (target) => target instanceof Element ? target.closest("[data-control-key]")?.dataset.controlKey ?? "" : "";
   const enter = (event) => { host.state.activeKey = keyOf(event.target); };

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

@@ -2,16 +2,35 @@
 <template component="ui-editor-table-toolbar" controller="./ui-editor-table-toolbar.js">
   <defs>
     <prop name="open" type="boolean" default="false">Shows the toolbar while a table selection is active.</prop>
-    <prop name="cellAlignment" type="left | center | right" default="left">Marks the alignment command that is active for the current cell.</prop>
+    <prop name="cellAlignment" type="keyword" values="left, center, right" default="left"
+    >Marks the alignment command that is active for the current cell.</prop>
     <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>
     <prop name="headerRow" type="boolean" default="false">Whether the table's first row currently uses header cells.</prop>
     <prop name="headerColumn" type="boolean" default="false">Whether the table's first column currently uses header cells.</prop>
     <prop
       name="actions"
-      type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | toggle-header-row | toggle-header-column | move-row-up | move-row-down | move-column-left | move-column-right | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
-    >The complete set of commands the current selection permits.</prop>
-    <state name="alignments" type="list(object({ action: align-left | align-center | align-right, label: string, active: boolean }))" :value="[]"></state>
-    <state name="structure" type="list(object({ action: add-row-after | add-column-after, label: string, icon: string }))" :value="[]"></state>
+      type="array"
+    >
+      <prop
+        type="keyword"
+        values="align-left, align-center, align-right, background-none, background-gray, background-yellow, background-blue, background-green, background-red, add-row-before, add-row-after, add-column-before, add-column-after, toggle-header-row, toggle-header-column, move-row-up, move-row-down, move-column-left, move-column-right, clear-cells, merge-cells, split-cell, delete-row, delete-column, delete-table"
+      ></prop>
+      The complete set of commands the current selection permits.
+    </prop>
+    <state name="alignments" type="array" :value="[]">
+      <prop type="object">
+        <prop name="action" required type="keyword" values="align-left, align-center, align-right"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="active" required type="boolean"></prop>
+      </prop>
+    </state>
+    <state name="structure" type="array" :value="[]">
+      <prop type="object">
+        <prop name="action" required type="keyword" values="add-row-after, add-column-after"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="icon" required type="string"></prop>
+      </prop>
+    </state>
     <state name="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean }))" :value="[]"></state>
     <state
       name="sections"
@@ -22,10 +41,17 @@
     <state name="overflowOpen" :value="false"></state>
     <event
       name="action"
-      type="object({ action: align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | toggle-header-row | toggle-header-column | move-row-up | move-row-down | move-column-left | move-column-right | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"
-    ></event>
+      type="object"
+    >
+      <prop
+        name="action"
+        required
+        type="keyword"
+        values="align-left, align-center, align-right, background-none, background-gray, background-yellow, background-blue, background-green, background-red, add-row-before, add-row-after, add-column-before, add-column-after, toggle-header-row, toggle-header-column, move-row-up, move-row-down, move-column-left, move-column-right, clear-cells, merge-cells, split-cell, delete-row, delete-column, delete-table"
+      ></prop>
+    </event>
   </defs>
-  <div role="toolbar" aria-label="Table actions" :hidden="not open">
+  <div role="toolbar" aria-label="Table actions" from:hidden="not open">
     <div $if="alignments" class="group" role="group" aria-label="Cell alignment">
       <button
         $each="item of alignments"
@@ -33,24 +59,24 @@
         type="button"
         class="icon-button"
         class:active="item.active"
-        :data-action="item.action"
-        :aria-label="item.label"
-        :title="item.label"
-        :aria-pressed="item.active"
+        from:data-action="item.action"
+        from:aria-label="item.label"
+        from:title="item.label"
+        from:aria-pressed="item.active"
       >
-        <ui-icon :name="item.action"></ui-icon>
+        <ui-icon from:name="item.action"></ui-icon>
       </button>
     </div>
     <div $if="alignments and structure" class="sep" aria-hidden="true"></div>
     <div $if="structure" class="group" role="group" aria-label="Table structure">
-      <button $each="item of structure" $key="item.action" type="button" :data-action="item.action">
-        <ui-icon :name="item.icon"></ui-icon>
+      <button $each="item of structure" $key="item.action" type="button" from:data-action="item.action">
+        <ui-icon from:name="item.icon"></ui-icon>
         <span $value="item.label"></span>
       </button>
     </div>
     <div $if="(alignments or structure) and hasOverflow" class="sep" aria-hidden="true"></div>
     <div $if="hasOverflow" class="overflow">
-      <button type="button" class="more" data-action="toggle-overflow" aria-haspopup="menu" :aria-expanded="overflowOpen">
+      <button type="button" class="more" data-action="toggle-overflow" aria-haspopup="menu" from:aria-expanded="overflowOpen">
         <ui-icon name="table"></ui-icon>
         <span>Table options</span>
         <span class="chevron"><ui-icon name="chevron-down"></ui-icon></span>
@@ -66,8 +92,8 @@
               class="swatch-button"
               class:selected="swatch.selected"
               role="menuitemradio"
-              :aria-checked="swatch.selected"
-              :data-action="swatch.action"
+              from:aria-checked="swatch.selected"
+              from:data-action="swatch.action"
             >
               <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
               <span $value="swatch.label"></span>
@@ -80,12 +106,12 @@
             $each="item of section.items"
             $key="item.action"
             type="button"
-            :role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
-            :aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
+            from:role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
+            from:aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
             class:danger="item.danger"
-            :data-action="item.action"
+            from:data-action="item.action"
           >
-            <ui-icon :name="item.icon"></ui-icon>
+            <ui-icon from:name="item.icon"></ui-icon>
             <span $value="item.label"></span>
           </button>
         </div>

package/components/ui-floating-action-button/ui-floating-action-button.html

@@ -6,7 +6,7 @@
       widths.</prop>
     <prop name="label" type="string" default="">The button's accessible name. The button usually holds only an icon, so name the action it performs.</prop>
   </defs>
-  <button type="button" :aria-label="label" :disabled="disabled"><slot></slot></button>
+  <button type="button" from:aria-label="label" from:disabled="disabled"><slot></slot></button>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-floating-action-button-inset-block-end {

package/components/ui-grid/ui-grid.html

@@ -1,9 +1,9 @@
 <template component="ui-grid">
   <defs>
-    <prop name="gap" type="xs | s | m | l | xl"
+    <prop name="gap" type="keyword" values="xs, s, m, l, xl"
     >Space between cells, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-grid-gap custom property,
       set on the grid itself, overrides it; set on an ancestor, it does nothing.</prop>
-    <prop name="min" type="sm | md | lg"
+    <prop name="min" type="keyword" values="sm, md, lg"
     >The narrowest a column may get before the grid drops to fewer columns: sm is 12rem (also the default), md is 16rem, and lg is 20rem. The grid fits as many
       equal columns as its width allows, and a single column never overflows a narrower container.</prop>
     <prop name="columns" type="integer"

package/components/ui-icon/ui-icon.html

@@ -78,10 +78,19 @@
   <span aria-hidden="true">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
       <g $each="shape of shapes">
-        <path $if="shape.tag = 'path'" :d="shape.d"></path>
-        <circle $if="shape.tag = 'circle'" :cx="shape.cx" :cy="shape.cy" :r="shape.r"></circle>
-        <rect $if="shape.tag = 'rect'" :x="shape.x" :y="shape.y" :width="shape.width" :height="shape.height" :rx="shape.rx" :ry="shape.ry"></rect>
-        <line $if="shape.tag = 'line'" :x1="shape.x1" :y1="shape.y1" :x2="shape.x2" :y2="shape.y2"></line>
+        <path $if="shape.tag = 'path'" from:d="shape.d"></path>
+        <circle $if="shape.tag = 'circle'" from:cx="shape.cx" from:cy="shape.cy" from:r="shape.r"></circle>
+        <rect
+          $if="shape.tag = 'rect'"
+          from:x="shape.x"
+          from:y="shape.y"
+          from:width="shape.width"
+          from:height="shape.height"
+          from:rx="shape.rx"
+          from:ry="shape.ry"
+        >
+        </rect>
+        <line $if="shape.tag = 'line'" from:x1="shape.x1" from:y1="shape.y1" from:x2="shape.x2" from:y2="shape.y2"></line>
       </g>
     </svg>
   </span>

package/components/ui-icon-button/ui-icon-button.html

@@ -8,10 +8,10 @@
       cleared.</prop>
     <prop name="pending" type="boolean" default="false">Deprecated alias for loading.</prop>
     <prop name="label" type="string">Accessible name for the icon.</prop>
-    <prop name="size" type="sm | md | lg" default="md"
+    <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit
       area of at least 44px.</prop>
-    <prop name="variant" type="ghost | outline | solid" default="ghost"
+    <prop name="variant" type="keyword" values="ghost, outline, solid" default="ghost"
     >Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the
       accent colour, for the one primary action in a group.</prop>
     <prop name="anticipatory" type="boolean" default="false"
@@ -20,11 +20,11 @@
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
   <button
-    :disabled="disabled"
+    from:disabled="disabled"
     type="button"
-    :aria-label="label"
-    :aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
-    :aria-busy="loading or pending"
+    from:aria-label="label"
+    from:aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
+    from:aria-busy="loading or pending"
   >
     <ui-spinner $if="loading or pending" size="sm"></ui-spinner>
     <span class="content"><slot></slot></span>

package/components/ui-input/ui-input.html

@@ -1,20 +1,42 @@
 <template component="ui-input" controller="./ui-input.js">
   <defs>
-    <prop name="value" type="string | number"
-    >The input's value: text, or a number for a type="number" field. Setting or changing it replaces the live text; between changes the user's typing stands, so
-      follow input events to keep it in step. A number field keeps text that means the same number, such as 1.0 for 1. It is also the input's default, so a form
-      reset returns to it.</prop>
+    <prop
+      name="type"
+      type="keyword"
+      values="text, search, tel, url, email, password, date, month, week, time, datetime-local, number, range, color"
+      default="text"
+    >The native input mode. Number and range modes accept numeric values; the other supported modes accept strings.</prop>
+    <type name="input-value" from="type">
+      <option value="text" type="string"></option>
+      <option value="search" type="string"></option>
+      <option value="tel" type="string"></option>
+      <option value="url" type="string"></option>
+      <option value="email" type="string"></option>
+      <option value="password" type="string"></option>
+      <option value="date" type="string"></option>
+      <option value="month" type="string"></option>
+      <option value="week" type="string"></option>
+      <option value="time" type="string"></option>
+      <option value="datetime-local" type="string"></option>
+      <option value="number" type="number"></option>
+      <option value="range" type="number"></option>
+      <option value="color" type="string"></option>
+    </type>
+    <prop name="value" type="input-value"
+    >The input's value: text, or a number for type="number" and type="range" fields. Setting or changing it replaces the live text; between changes the user's
+      typing stands, so follow input events to keep it in step. A number field keeps text that means the same number, such as 1.0 for 1. It is also the input's
+      default, so a form reset returns to it.</prop>
     <prop name="disabled" type="boolean" default="false">Prevents editing and form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
     <prop name="readonly" type="boolean" default="false">Allows selection without allowing edits.</prop>
     <prop name="required" type="boolean" default="false">Marks the control as required 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, 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, 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. Change it after render through this option; the element's size property is
       the native one.</prop>
   </defs>
-  <input :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid">
+  <input from:type="type" from:value="value" from:disabled="disabled" from:readonly="readonly" from:required="required" from:aria-invalid="invalid">
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. An Input
        Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */

package/components/ui-list/ui-list.html

@@ -1,11 +1,12 @@
 <template component="ui-list">
   <defs>
-    <prop name="as" type="ul | ol" default="ul">The native list element. Use ol when item order matters; its native numbers are shown.</prop>
-    <prop name="markers" type="none | disc" default="none">Show disc bullets for a ul of native li elements. An ol always shows native numbers.</prop>
-    <prop name="layout" type="rows | grid" default="rows"
+    <prop name="as" type="keyword" values="ul, ol" default="ul">The native list element. Use ol when item order matters; its native numbers are shown.</prop>
+    <prop name="markers" type="keyword" values="none, disc" default="none"
+    >Show disc bullets for a ul of native li elements. An ol always shows native numbers.</prop>
+    <prop name="layout" type="keyword" values="rows, grid" default="rows"
     >How the items are laid out. Rows stack the items one per line, for a list read top to bottom. Grid sets them in as many columns as fit, each at least
       --ui-list-min-item-width (14rem) wide, for card items such as pinned or featured entries.</prop>
-    <prop name="density" type="comfortable | compact" default="comfortable"
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
     >How much room each item takes. comfortable is a full row, easy to point at, for lists of things to open; compact sets items close together with no row
       padding, for a short list of facts inside other content, such as the features a plan includes.</prop>
   </defs>

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

@@ -1,13 +1,13 @@
 <template component="ui-list-item">
   <defs>
-    <prop name="variant" type="row | card" default="row"
+    <prop name="variant" type="keyword" values="row, card" default="row"
     >How the item is drawn. A row is flat and takes a hover surface when it is a link, for items read down a list. A card sits on a raised, bordered surface,
       for items set in a grid (a List with layout="grid"). Both have the same parts: leading, title, description, and trailing.</prop>
     <prop name="current" type="boolean" default="false"
     >Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology
       announces. Set it on one item at a time.</prop>
   </defs>
-  <li :aria-current="current">
+  <li from:aria-current="current">
     <span class="leading"><slot name="leading"></slot></span>
     <span class="content">
       <span class="title"><slot></slot></span>

package/components/ui-listbox/ui-listbox.html

@@ -15,15 +15,21 @@
     <state name="active" type="integer" :value="-1"></state>
     <state name="uid" type="string" :value="''"></state>
     <state name="validationError" type="boolean" :value="false"></state>
-    <event name="change" type="object({ value: string | null, values: list(string), trigger: keyboard | pointer })"></event>
+    <event name="change" type="object">
+      <prop name="value" required nullable type="string"></prop>
+      <prop name="values" required type="array">
+        <prop type="string"></prop>
+      </prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer"></prop>
+    </event>
   </defs>
   <div
     role="listbox"
-    :tabindex="{ true: '-1', false: '0' }[format('%s', disabled)]"
-    :aria-multiselectable="multiple"
-    :aria-disabled="disabled"
-    :aria-required="required"
-    :aria-invalid="invalid or validationError"
+    from:tabindex="{ true: '-1', false: '0' }[format('%s', disabled)]"
+    from:aria-multiselectable="multiple"
+    from:aria-disabled="disabled"
+    from:aria-required="required"
+    from:aria-invalid="invalid or validationError"
     style:--_rows="rows"
   >
     <ui-scroll-area class="choices" $ref="choices">
@@ -34,28 +40,37 @@
         class:active="choice.index = active"
         role="option"
         data-ui-choice-option
-        :data-multiple="multiple"
-        :id="format('%s-option-%s', uid, choice.index)"
-        :data-index="choice.index"
-        :aria-selected="choice.selected"
-        :aria-disabled="choice.disabled"
+        from:data-multiple="multiple"
+        from:id="format('%s-option-%s', uid, choice.index)"
+        from:data-index="choice.index"
+        from:aria-selected="choice.selected"
+        from:aria-disabled="choice.disabled"
       >
         <span $value="choice.label"></span>
       </div>
     </ui-scroll-area>
-    <select class="fallback" $ref="options" :size="rows" :multiple="multiple" :disabled="disabled" :required="required" :name="name" aria-label="Choices">
+    <select
+      class="fallback"
+      $ref="options"
+      from:size="rows"
+      from:multiple="multiple"
+      from:disabled="disabled"
+      from:required="required"
+      from:name="name"
+      aria-label="Choices"
+    >
       <slot></slot>
     </select>
     <template $if="name and not disabled">
-      <input $each="selected of selection" type="hidden" :name="name" :value="selected">
+      <input $each="selected of selection" type="hidden" from:name="name" from:value="selected">
     </template>
     <input
       class="validity"
       $ref="validity"
       type="checkbox"
-      :required="required and not hasSelection and not disabled"
-      :checked="hasSelection"
-      :disabled="disabled"
+      from:required="required and not hasSelection and not disabled"
+      from:checked="hasSelection"
+      from:disabled="disabled"
       aria-hidden="true"
       tabindex="-1"
     >