@threadlabs/looma 0.19.0 → 0.20.0

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"

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 :type="type" :value="value" :disabled="disabled" :readonly="readonly" :required="required" :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,6 +1,6 @@
 <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"

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

@@ -15,7 +15,13 @@
     <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"

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-item/ui-menu-item.html

@@ -7,11 +7,16 @@
     >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

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

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. -->

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,12 +12,16 @@
     <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">

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,8 +19,16 @@
     <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">
     <legend><template $value="label"></template></legend>

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-shell/ui-search-shell.html

@@ -7,8 +7,12 @@
     <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">

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

@@ -2,10 +2,10 @@
   <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>

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

@@ -6,7 +6,7 @@
     <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

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

@@ -1,6 +1,6 @@
 <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">

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>

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

@@ -3,7 +3,7 @@
     <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"

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,10 +1,10 @@
 <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>

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

@@ -9,12 +9,16 @@
     <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">

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>

package/components/ui-tabs/ui-tabs.html

@@ -1,21 +1,26 @@
 <template component="ui-tabs" controller="./ui-tabs.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="label" type="string" default="Tabs"
     >The tab list's accessible name, announced when focus enters the list. Name what the tabs switch between.</prop>
     <prop name="value" type="string" default=""
     >The id of the selected panel, initially or when set externally; empty selects the first panel. Choosing a tab updates it from there and reports a select
       event. A panel without an id is given a generated one.</prop>
-    <prop name="orientation" type="horizontal | vertical" default="horizontal"
+    <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >horizontal puts the tabs in a row above the panels, moved between with the Left and Right arrow keys; vertical puts them in a column beside the panels,
       moved between with Up and Down.</prop>
-    <prop name="activation" type="auto | manual" default="auto"
+    <prop name="activation" type="keyword" values="auto, manual" default="auto"
     >In auto mode, arrow keys move focus and select the next panel. In manual mode, arrows move focus while Enter or Space selects a panel. Use manual when
       displaying a panel takes time.</prop>
     <prop name="stretch" type="boolean" default="false">Share the full width of the tab list equally between tabs instead of sizing each to its label.</prop>
     <state name="internalValue" :value="''"></state>
     <state name="tabs" type="list(object({ id: string, label: string }))" :value="[]"></state>
-    <event name="select" type="object({ value: string, previousValue: 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>
   </defs>
   <div>
     <div class="list" $ref="list" role="tablist" :aria-label="label" :aria-orientation="orientation">

package/components/ui-text/ui-text.html

@@ -1,20 +1,20 @@
 <template component="ui-text">
   <defs>
-    <prop name="size" type="inherit | xs | sm | md | lg" default="inherit"
+    <prop name="size" type="keyword" values="inherit, xs, sm, md, lg" default="inherit"
     >The step on the type scale. inherit (the default) keeps the size of the text around it; xs is for fine print, sm for supporting text such as help and
       metadata, md is body text, and lg is a lead paragraph.</prop>
-    <prop name="tone" type="default | secondary | muted | accent | danger | success | info | warning" default="default"
+    <prop name="tone" type="keyword" values="default, secondary, muted, accent, danger, success, info, warning" default="default"
     >The text's colour, by meaning. secondary is supporting prose such as a description; muted is quieter still, for metadata and hints; accent draws the eye;
       danger states an error; success confirms one; info marks something moving forward normally; warning marks something that needs attention. Colour alone
       does not carry the meaning, so the words must say it too.</prop>
-    <prop name="weight" type="inherit | normal | medium | semibold" default="inherit"
+    <prop name="weight" type="keyword" values="inherit, normal, medium, semibold" default="inherit"
     >The weight. inherit keeps the surrounding weight; medium and semibold emphasise a name or a figure.</prop>
-    <prop name="variant" type="body | eyebrow | code" default="body"
+    <prop name="variant" type="keyword" values="body, eyebrow, code" default="body"
     >body is running text. eyebrow is a short, uppercase, tracked label that names what follows, such as a group of links; code sets a value to copy or read
       exactly, such as an address, in the monospace face.</prop>
     <prop name="truncate" type="boolean" default="false">Keeps the text on one line, ending in an ellipsis when it does not fit.</prop>
-    <prop name="align" type="start | center" default="start">Aligns the text within its line.</prop>
-    <prop name="as" type="p | span | div | small | strong | label | h2 | h3 | h4 | h5 | h6" default="p"
+    <prop name="align" type="keyword" values="start, center" default="start">Aligns the text within its line.</prop>
+    <prop name="as" type="keyword" values="p, span, div, small, strong, label, h2, h3, h4, h5, h6" default="p"
     >The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a
       heading, h2 to h6, below a Page Header's h1 and a Section's h2. A heading takes its size and weight from size and weight, like any other text.</prop>
   </defs>

package/components/ui-textarea/ui-textarea.html

@@ -11,7 +11,7 @@
     <prop name="autosize" type="boolean" default="false"
     >Grow with the text while keeping rows as the minimum visible height. Uses CSS field sizing where supported; other browsers keep the native rows
       behavior.</prop>
-    <prop name="size" type="sm | md | lg" default="md"
+    <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Padding and type size, matching Input's sizes so a textarea sits with fields of the same size; rows sets its height. sm has tighter padding and smaller
       text, for compact forms; lg has roomier padding. Under a coarse pointer, sm keeps body-size text.</prop>
   </defs>