@threadlabs/looma 0.19.1 → 0.20.0

package/components/shared/trigger.js

@@ -4,14 +4,19 @@
  */
 export function trackTrigger(host) {
   let trigger = "programmatic";
-  const offKey = host.on("keydown", (event) => {
+  const onKey = (event) => {
     if (event.key === " " || event.key === "Enter" || event.key.startsWith("Arrow")) trigger = "keyboard";
-  });
-  const offPointer = host.on("pointerdown", () => { trigger = "pointer"; });
+  };
+  const onPointer = () => { trigger = "pointer"; };
+  host.element.addEventListener("keydown", onKey);
+  host.element.addEventListener("pointerdown", onPointer);
   const take = () => {
     const current = trigger;
     trigger = "programmatic";
     return current;
   };
-  return [take, () => { offKey(); offPointer(); }];
+  return [take, () => {
+    host.element.removeEventListener("keydown", onKey);
+    host.element.removeEventListener("pointerdown", onPointer);
+  }];
 }

package/components/ui-affordance-scope/ui-affordance-scope.html

@@ -1,7 +1,7 @@
 <template component="ui-affordance-scope" controller="./ui-affordance-scope.js">
   <defs>
     <prop name="nearRadius" type="number" default="16">How close, in pixels, the pointer must come to reveal an affordance.</prop>
-    <prop name="guide" type="dot | none" default="dot"
+    <prop name="guide" type="keyword" values="dot, none" default="dot"
     >What marks an anticipatory control at rest. dot shows a small guide dot where it will appear; none shows nothing until the pointer nears it, it is hovered,
       or it takes focus. Every guide inside the scope follows it, including a sidebar's resize line and the editor table's handles.</prop>
     <state name="engaged" :value="false"></state>

package/components/ui-avatar/ui-avatar.html

@@ -13,9 +13,9 @@
     <prop name="fallback" type="string" default=""
     >Text shown instead of the initials derived from name or alt, whenever there is no image. It is uppercased; keep it to a couple of characters, because the
       circle clips anything wider.</prop>
-    <prop name="size" type="sm | md" default="md"
+    <prop name="size" type="keyword" values="sm, md" default="md"
     >md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header.</prop>
-    <prop name="shape" type="circle | square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
+    <prop name="shape" type="keyword" values="circle, square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
     <prop name="decorative" type="boolean" default="false">Hides the avatar from assistive technology when adjacent text already identifies the person.</prop>
     <prop name="active" type="boolean" default="false"
     >Marks the person as active now, such as editing the same page: a fine accent ring around the avatar. The ring is not announced, so say what it means in alt

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

@@ -10,7 +10,7 @@
     >Accessible label for the overflow badge. Replace {count} with the number of people beyond the visible avatars.</prop>
     <prop name="label" type="string" default="People"
     >The group's accessible name, announced for the set of avatars as a whole. Name who they are rather than repeating the default.</prop>
-    <prop name="size" type="sm | md" default="md"
+    <prop name="size" type="keyword" values="sm, md" default="md"
     >The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size.</prop>
     <state name="overflowCount" :value="0"></state>
     <state name="overflowAnnouncement" :value="''"></state>

package/components/ui-avatar-group/ui-avatar-group.js

@@ -18,7 +18,7 @@ export default function controller(host) {
     });
     const authoredVisible = Math.min(avatars.length, visible);
     const suppliedTotal = Number(host.state.total);
-    const total = host.state.total === undefined || !Number.isFinite(suppliedTotal) ? avatars.length : Math.max(avatars.length, suppliedTotal);
+    const total = host.state.total == null || !Number.isFinite(suppliedTotal) ? avatars.length : Math.max(avatars.length, suppliedTotal);
     const count = Math.max(0, total - authoredVisible);
     host.state.overflowCount = count;
     host.state.overflowAnnouncement = String(host.state.overflowLabel || "{count} more").replaceAll("{count}", String(count));

package/components/ui-badge/ui-badge.html

@@ -1,13 +1,13 @@
 <template component="ui-badge">
   <defs>
-    <prop name="variant" type="solid | subtle | outline" default="subtle"
+    <prop name="variant" type="keyword" values="solid, subtle, outline" default="subtle"
     >Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.
       Neutral looks the same in solid and subtle.</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 badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
       colour, which overrides the tone.</prop>
-    <prop name="shape" type="pill | tag" default="pill"
+    <prop name="shape" type="keyword" values="pill, tag" default="pill"
     >Silhouette. pill is rounded at both ends; tag is a label: flat at the start and coming to a point at the end, for a tag or a chosen chip.</prop>
   </defs>
   <span><slot></slot></span>

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

@@ -1,13 +1,13 @@
 <link rel="component" href="../ui-spinner/ui-spinner.html">
 <template component="ui-button" controller="./ui-button.js">
   <defs>
-    <prop name="variant" type="outline | solid | danger | ghost | link" default="outline"
+    <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is
       hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.</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. sm is the small control height (2rem by default) with tighter padding and smaller text, md is the standard control height
       (2.5rem), and lg is taller (3rem) with roomier padding.</prop>
-    <prop name="tone" type="accent | neutral | danger | success | warning | info" default="accent"
+    <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
     >Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:
       tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour.</prop>
     <prop name="disabled" type="boolean" default="false"
@@ -17,17 +17,18 @@
     >Keeps the action focusable and its label visible while work is in progress. It shows a decorative spinner, states aria-disabled and aria-busy, and prevents
       activation or form submission until cleared.</prop>
     <prop name="pending" type="boolean" default="false">Deprecated alias for loading.</prop>
-    <prop name="align" type="center | start" default="center"
+    <prop name="align" type="keyword" values="center, start" default="center"
     >Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.</prop>
     <prop name="stretch" type="boolean" default="false">Fills the inline size of its container.</prop>
-    <prop name="type" type="button | submit | reset" default="button"
+    <prop name="type" type="keyword" values="button, submit, reset" default="button"
     >The button's type, as on a native button. button by default, so it never submits a form by accident. A link has no type.</prop>
     <prop name="href" type="string"
     >The link's destination. Pair it with as="a" so the button renders as a real link that navigates. A disabled link drops its href and states
       aria-disabled="true", so it cannot be followed.</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 button 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 button renders: a button, or a link (a) that navigates to href.</prop>
     <!-- Each root carries only its own attributes: a link has no type or disabled, and a disabled link
          loses its href and states aria-disabled instead. The language has no conditional expression, so a
          table keyed by a boolean's text picks each value, and null leaves the attribute off. -->

package/components/ui-callout/ui-callout.html

@@ -1,6 +1,6 @@
 <template component="ui-callout">
   <defs>
-    <prop name="tone" type="info | neutral | note | warning | success | danger" default="info"
+    <prop name="tone" type="keyword" values="info, neutral, note, warning, success, danger" default="info"
     >Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, neutral for a muted aside, warning for a
       caution, success for a confirmation, and danger for a harmful consequence. note remains as an alias for neutral.</prop>
   </defs>

package/components/ui-card/ui-card.html

@@ -1,12 +1,13 @@
 <template component="ui-card">
   <defs>
-    <prop name="variant" type="outlined | subtle | elevated" default="outlined"
+    <prop name="variant" type="keyword" values="outlined, subtle, elevated" default="outlined"
     >The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;
       elevated floats above the page with a shadow, for a view's one card, such as sign-in.</prop>
-    <prop name="padding" type="sm | md | lg" default="md"
+    <prop name="padding" type="keyword" values="sm, md, lg" default="md"
     >The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
-    <prop name="tone" type="neutral | danger" default="neutral">danger adds a soft danger surface and a strong leading edge for consequential content.</prop>
-    <prop name="as" type="div | section | article | aside" default="div"
+    <prop name="tone" type="keyword" values="neutral, danger" default="neutral"
+    >danger adds a soft danger surface and a strong leading edge for consequential content.</prop>
+    <prop name="as" type="keyword" values="div, section, article, aside" default="div"
     >The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.</prop>
   </defs>
   <template $match>

package/components/ui-checkbox/ui-checkbox.html

@@ -15,12 +15,16 @@
     <prop name="value" type="string" default="on"
     >The value a form submits under name while the checkbox is checked, also reported in the change event's detail so one handler can tell checkboxes 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 checkbox 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

package/components/ui-cluster/ui-cluster.html

@@ -1,15 +1,15 @@
 <template component="ui-cluster">
   <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 (also the default), m 1rem, l 1.5rem, and xl 2rem. The --ui-cluster-gap custom property,
       set on the cluster 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 line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as
       its row.</prop>
-    <prop name="justify" type="start | center | end | between"
+    <prop name="justify" type="keyword" values="start, center, end, between"
     >Where items sit along each row: start (the default), center, end, or between, which pushes the first and last items to the ends of the row and spreads the
       spare space between them, as for a title with its actions.</prop>
-    <prop name="wrap" type="wrap | nowrap"
+    <prop name="wrap" type="keyword" values="wrap, nowrap"
     >Whether items move onto a new row when they run out of space: wrap (the default) or nowrap, which keeps them on one row at their own sizes. Use nowrap for
       a small group that must read as one unit, such as a meter and its value in a table cell, so the cell grows to fit it; a whole row of actions should keep
       wrapping so it fits narrow screens.</prop>

package/components/ui-combobox/ui-combobox.html

@@ -11,15 +11,30 @@
     >The form field name the combobox submits its value under, never the label shown in the field. Single mode sends one entry: the selected option's value, the
       typed text when allowFreeText is set and no option is selected, or an empty string. Multiple mode sends one entry per chosen item's value, and nothing
       when none is chosen. A disabled combobox sends nothing.</prop>
-    <prop name="value" type="string | null"
+    <prop name="value" type="string"
     >The selected value in single mode, which a named combobox submits with its form. The field shows the matching option's label, and a form reset returns to
       this value. In a strict combobox, typing a search does not change the selection; leaving with no match restores its label. If omitted, the first authored
       option with selected sets the initial value.</prop>
     <prop
       name="items"
-      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
-    >The selected items in multiple mode, as JSON; a named combobox submits each one's value. A form reset returns to these items, or to authored selected
-      options when unset.</prop>
+      type="array"
+    >
+      <prop type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+      The selected items in multiple mode, as JSON; a named combobox submits each one's value. A form reset returns to these items, or to authored selected
+      options when unset.
+    </prop>
     <prop name="selectedValues" type="list(string)"
     >The selected option values in multiple mode, when the consumer controls the selection. Without it or items, authored options with selected set the initial
       selection. Once set, the consumer owns it: each value shows as a badge with its authored option's label, adding or removing one reports
@@ -27,7 +42,7 @@
       It takes precedence over items; leave it unset to let the combobox keep its own selection.</prop>
     <prop name="multiple" type="boolean" default="false"
     >Lets the user choose several options. Each choice becomes a removable badge before the input, the list stays open between picks, and choosing a checked
-      option removes it. value-change then reports the whole list of items, and selected-values-change the list of their values; use selectedValues or items,
+      option removes it. items-change then reports the whole list of items, and selected-values-change the list of their values; use selectedValues or items,
       not value, in this mode.</prop>
     <prop name="tokenSeparators" type="list(string)"
     >Keys that commit the typed text in multiple mode, as KeyboardEvent key values such as "," or ";". The text is added as the option whose label matches it,
@@ -35,7 +50,7 @@
     <prop name="query" type="string"
     >The input's text, when the consumer controls it. Once set, the consumer owns the text: typing reports query-change, and the input returns to query unless
       query is updated to match. Leave it unset to let the combobox manage its own text, showing the chosen option's label.</prop>
-    <prop name="filter" type="label | none" default="label"
+    <prop name="filter" type="keyword" values="label, none" default="label"
     >How the list narrows as the user types. label lists the options whose label contains the typed text, ignoring case. none lists every authored option, for
       options already narrowed elsewhere, such as a server search, so a result that matched on data other than its label still shows. Leaving the field still
       commits an option whose label matches the text, or the only one listed.</prop>
@@ -57,11 +72,11 @@
     <prop name="openOnFocus" type="boolean" default="false">Opens suggestions when the input receives focus, before typing.</prop>
     <prop name="loading" type="boolean" default="false"
     >Marks the suggestion list busy while the consumer loads options. It announces loading and suppresses the empty state and create offer until cleared.</prop>
-    <prop name="size" type="sm | md | lg" default="md"
+    <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Field 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. The label keeps its size.</prop>
-    <prop name="labelVisibility" type="visible | sr-only" default="visible"
+    <prop name="labelVisibility" type="keyword" values="visible, sr-only" default="visible"
     >visible shows the label above the field; sr-only hides it visually but keeps it as the input's accessible name. Use sr-only only when the surrounding
       layout already makes the field's purpose clear.</prop>
     <prop name="disclosure" type="boolean" default="false"
@@ -75,69 +90,277 @@
       it.</prop>
     <state
       name="internalItems"
-      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
+      type="array"
       :value="[]"
-    ></state>
+    >
+      <prop type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+    </state>
     <state name="raw" :value="''"></state>
     <state name="display" :value="''"></state>
-    <state name="selected" type="string | null" :value="null"></state>
+    <state name="selected" type="string" :value="null" nullable></state>
     <state name="expanded" :value="false"></state>
     <state
       name="rows"
-      type="list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
+      type="array"
       :value="[]"
-    ></state>
+    >
+      <prop type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" required type="boolean"></prop>
+        <prop name="selected" required type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+    </state>
     <state name="active" :value="-1"></state>
     <state name="helpOpen" :value="false"></state>
     <state name="lookupError" :value="''"></state>
     <state
       name="validation"
-      type="object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string })), ... })"
+      type="object"
       :value="{ status: 'pristine', touched: false, dirty: false, issues: [] }"
-    ></state>
+      open
+    >
+      <prop name="status" required type="keyword" values="pristine, pending, valid, warning, error"></prop>
+      <prop name="touched" required type="boolean"></prop>
+      <prop name="dirty" required type="boolean"></prop>
+      <prop name="issues" required type="array">
+        <prop type="object">
+          <prop name="message" required type="string"></prop>
+        </prop>
+      </prop>
+    </state>
     <state name="uid" :value="''"></state>
     <state name="submitted" :value="''"></state>
     <state
       name="groups"
-      type="list(object({ name: string, role: group | presentation, label: string | null, rows: list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }), index: integer, labelledBy: string | null, detail: string | null })) }))"
+      type="array"
       :value="[]"
-    ></state>
+    >
+      <prop type="object">
+        <prop name="name" required type="string"></prop>
+        <prop name="role" required type="keyword" values="group, presentation"></prop>
+        <prop name="label" required nullable type="string"></prop>
+        <prop name="rows" required type="array">
+          <prop type="object">
+            <prop name="id" required type="string"></prop>
+            <prop name="value" required type="string"></prop>
+            <prop name="label" required type="string"></prop>
+            <prop name="group" type="string"></prop>
+            <prop name="disabled" required type="boolean"></prop>
+            <prop name="selected" required type="boolean"></prop>
+            <prop name="description" type="string"></prop>
+            <prop name="tag" type="object">
+              <prop name="label" required type="string"></prop>
+              <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+              <prop name="color" type="string"></prop>
+            </prop>
+            <prop name="index" required type="integer"></prop>
+            <prop name="labelledBy" required nullable type="string"></prop>
+            <prop name="detail" required nullable type="string"></prop>
+          </prop>
+        </prop>
+      </prop>
+    </state>
     <state name="creatable" :value="false"></state>
     <state name="createIndex" :value="0"></state>
     <state name="message" :value="''"></state>
     <state name="statusText" :value="''"></state>
     <state name="validationStatus" :value="'pristine'"></state>
-    <event name="query-change" type="object({ query: string, display: string, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="query-change" type="object">
+      <prop name="query" required type="string"></prop>
+      <prop name="display" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="value-change"
-      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
-    ></event>
+      type="object"
+    >
+      <prop name="value" required nullable type="string"></prop>
+      <prop name="query" required type="string"></prop>
+      <prop name="option" required nullable type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+      <prop name="kind" required type="keyword" values="selection, clear, free-entry, create"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event
+      name="items-change"
+      type="array"
+    >
+      <prop type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+    </event>
     <event
       name="free-entry"
-      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="value" required nullable type="string"></prop>
+      <prop name="query" required type="string"></prop>
+      <prop name="option" required nullable type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+      <prop name="kind" required type="keyword" values="selection, clear, free-entry, create"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="create-entry"
-      type="object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="value" required nullable type="string"></prop>
+      <prop name="query" required type="string"></prop>
+      <prop name="option" required nullable type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+      <prop name="kind" required type="keyword" values="selection, clear, free-entry, create"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="validation-change"
-      type="object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string, path?: list(unknown), severity?: error | warning })), output?: unknown })"
-    ></event>
+      type="object"
+    >
+      <prop name="status" required type="keyword" values="pristine, pending, valid, warning, error"></prop>
+      <prop name="touched" required type="boolean"></prop>
+      <prop name="dirty" required type="boolean"></prop>
+      <prop name="issues" required type="array">
+        <prop type="object">
+          <prop name="message" required type="string"></prop>
+          <prop name="path" type="array">
+            <prop type="unknown"></prop>
+          </prop>
+          <prop name="severity" type="keyword" values="error, warning"></prop>
+        </prop>
+      </prop>
+      <prop name="output" type="unknown"></prop>
+    </event>
     <event
       name="options-change"
-      type="list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }))"
-    ></event>
+      type="array"
+    >
+      <prop type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+    </event>
     <event
       name="add-item"
-      type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }), index: integer, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="item" required type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+      <prop name="index" required type="integer"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="remove-item"
-      type="object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger, color?: string }) }), index: integer, trigger: keyboard | pointer | programmatic })"
-    ></event>
-    <event name="create-item" type="object({ query: string, trigger: keyboard | pointer | programmatic })"></event>
-    <event name="selected-values-change" type="object({ selectedValues: list(string), trigger: keyboard | pointer | programmatic })"></event>
+      type="object"
+    >
+      <prop name="item" required type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+      <prop name="index" required type="integer"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="create-item" type="object">
+      <prop name="query" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="selected-values-change" type="object">
+      <prop name="selectedValues" required type="array">
+        <prop type="string"></prop>
+      </prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <method name="validate" export="validate" returns="promise(unknown)"></method>
     <method name="focusInput" export="focusInput" returns="promise(undefined)"></method>
   </defs>