@threadlabs/looma 0.21.5 → 0.22.0

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

@@ -4,7 +4,7 @@
     <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>
+    <state type="boolean" name="engaged" value="false"></state>
   </defs>
   <span><slot></slot></span>
   <style>

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

@@ -21,10 +21,10 @@
     <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
       ("Ada Lovelace, editing").</prop>
-    <state name="hasImage" :value="false"></state>
-    <state name="hasAuthoredImage" :value="false"></state>
-    <state name="initials" :value="'?'"></state>
-    <state name="showGlyph" :value="false"></state>
+    <state type="boolean" name="hasImage" value="false"></state>
+    <state type="boolean" name="hasAuthoredImage" value="false"></state>
+    <state type="string" name="initials" value="?"></state>
+    <state type="boolean" name="showGlyph" value="false"></state>
   </defs>
   <span>
     <slot></slot>

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

@@ -10,10 +10,11 @@
     >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="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>
+    <prop name="size" type="keyword" values="xs, sm, md" default="md"
+    >The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size. xs suits a group inside a line of small text, such
+      as the people listed under a title.</prop>
+    <state type="integer" name="overflowCount" value="0"></state>
+    <state type="string" name="overflowAnnouncement" value=""></state>
   </defs>
   <div role="group" from:aria-label="label">
     <slot></slot>
@@ -88,6 +89,15 @@
       block-size: 1.75rem;
     }
 
+    :host-state([size="xs"]) .overflow {
+      margin-inline-start: -0.1875rem;
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+      /* Matches the xs Avatar's initials. */
+      font-size: calc(var(--ui-font-size) * 0.5625);
+      line-height: 1;
+    }
+
     .overflow[hidden] {
       display: none;
     }

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

@@ -7,7 +7,7 @@ export default function controller(host) {
     const visible = Number.isFinite(max) ? Math.max(0, Math.floor(max)) : 0;
     const avatars = Array.from(element.children).filter((child) => child !== host.refs.overflow);
     // Small avatars overlap less, so their initials stay clear of the next one.
-    const overlap = host.state.size === "sm" ? "-0.25rem" : "-0.5rem";
+    const overlap = { xs: "-0.1875rem", sm: "-0.25rem" }[host.state.size] ?? "-0.5rem";
     avatars.forEach((avatar, index) => {
       avatar.style.display = index >= visible ? "none" : "";
       avatar.style.marginInlineStart = index === 0 ? "0px" : overlap;

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

@@ -6,8 +6,8 @@
       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="keyword" values="xs, sm, md, lg" default="md"
     >Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; 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. Under touch, xs
-      and sm grow to the touch minimum.</prop>
+      default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, sm
+      grows to the touch minimum, while xs keeps its size inside its line and gains an invisible touch-sized hit area.</prop>
     <prop name="shape" type="keyword" values="rounded, pill" default="rounded"
     >rounded uses the theme's action radius; pill rounds the ends fully, for a compact choice such as a status or a person.</prop>
     <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
@@ -213,7 +213,7 @@
 
     :host-state([size="xs"]) {
       min-block-size: 1.5rem;
-      padding: var(--ui-space-0-5) calc(var(--ui-space-1) * 1.5);
+      padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
       font-size: var(--ui-font-size-xs);
     }
 
@@ -368,7 +368,7 @@
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :host, :host-state([size="sm"]), :host-state([size="xs"]) {
+      :host, :host-state([size="sm"]) {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
@@ -376,12 +376,15 @@
     /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
        area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
-       area. Only the link needs it: a hit area on every button would reach over its neighbours. */
-    html[data-ui-input-modality="touch"] :host-state([variant="link"]) {
+       area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
+       Only these need it: a hit area on every button would reach over its neighbours. */
+    html[data-ui-input-modality="touch"] :host-state([variant="link"]),
+    html[data-ui-input-modality="touch"] :host-state([size="xs"]) {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :host-state([variant="link"])::after {
+    html[data-ui-input-modality="touch"] :host-state([variant="link"])::after,
+    html[data-ui-input-modality="touch"] :host-state([size="xs"])::after {
       position: absolute;
       inset: 50% auto auto 50%;
       inline-size: max(100%, var(--ui-control-min-block-size));

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

@@ -19,7 +19,7 @@
     >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>
+    <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
       <prop name="value" required type="string"></prop>

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

@@ -91,7 +91,7 @@
     <state
       name="internalItems"
       type="list"
-      :value="[]"
+      value="[]"
     >
       <prop type="object">
         <prop name="id" required type="string"></prop>
@@ -107,14 +107,14 @@
         </prop>
       </prop>
     </state>
-    <state name="raw" :value="''"></state>
-    <state name="display" :value="''"></state>
-    <state name="selected" type="string" :value="null" nullable></state>
-    <state name="expanded" :value="false"></state>
+    <state type="string" name="raw" value=""></state>
+    <state type="string" name="display" value=""></state>
+    <state name="selected" type="string"></state>
+    <state type="boolean" name="expanded" value="false"></state>
     <state
       name="rows"
       type="list"
-      :value="[]"
+      value="[]"
     >
       <prop type="object">
         <prop name="id" required type="string"></prop>
@@ -131,13 +131,13 @@
         </prop>
       </prop>
     </state>
-    <state name="active" :value="-1"></state>
-    <state name="helpOpen" :value="false"></state>
-    <state name="lookupError" :value="''"></state>
+    <state type="integer" name="active" value="-1"></state>
+    <state type="boolean" name="helpOpen" value="false"></state>
+    <state type="string" name="lookupError" value=""></state>
     <state
       name="validation"
       type="object"
-      :value="{ status: 'pristine', touched: false, dirty: false, issues: [] }"
+      value="{ status: 'pristine', touched: false, dirty: false, issues: [] }"
       open
     >
       <prop name="status" required type="keyword" values="pristine, pending, valid, warning, error"></prop>
@@ -149,12 +149,12 @@
         </prop>
       </prop>
     </state>
-    <state name="uid" :value="''"></state>
-    <state name="submitted" :value="''"></state>
+    <state type="string" name="uid" value=""></state>
+    <state type="string" name="submitted" value=""></state>
     <state
       name="groups"
       type="list"
-      :value="[]"
+      value="[]"
     >
       <prop type="object">
         <prop name="name" required type="string"></prop>
@@ -181,11 +181,11 @@
         </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>
+    <state type="boolean" name="creatable" value="false"></state>
+    <state type="integer" name="createIndex" value="0"></state>
+    <state type="string" name="message" value=""></state>
+    <state type="string" name="statusText" value=""></state>
+    <state type="string" name="validationStatus" value="pristine"></state>
     <event name="query-change" type="object">
       <prop name="query" required type="string"></prop>
       <prop name="display" required type="string"></prop>

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

@@ -2,7 +2,7 @@
   <defs>
     <prop name="open" type="boolean" default="false">Whether the context menu is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the element whose context click (right-click, long-press, Shift+F10, or the Menu key) opens the menu.</prop>
-    <state name="internalOpen" :value="false"></state>
+    <state type="boolean" name="internalOpen" value="false"></state>
     <event
       name="open"
       type="object"

package/components/ui-dialog/ui-dialog.html

@@ -16,8 +16,8 @@
     <prop name="size" type="keyword" values="sm, md, lg, fullscreen" default="md">Choose a compact, standard, wide, or viewport-filling dialog.</prop>
     <prop name="label" type="string">Visible title in the dialog header; also its accessible name.</prop>
     <prop name="for" type="string" default="">ID of the control that opens the dialog.</prop>
-    <state name="internalOpen" :value="false"></state>
-    <state name="accessibleLabel" :value="'Dialog'"></state>
+    <state type="boolean" name="internalOpen" value="false"></state>
+    <state type="string" name="accessibleLabel" value="Dialog"></state>
     <event
       name="open"
       type="object"

package/components/ui-disclosure/ui-disclosure.html

@@ -13,10 +13,10 @@
       items.</prop>
     <prop name="headingLevel" type="integer" default="0"
     >Adds heading semantics around the trigger at level 2 through 6. Zero leaves it a plain disclosure; choose a level that matches the page outline.</prop>
-    <state name="internalOpen" :value="false"></state>
-    <state name="contentId" :value="''"></state>
-    <state name="headingRole" :value="null"></state>
-    <state name="headingAriaLevel" :value="null"></state>
+    <state type="boolean" name="internalOpen" value="false"></state>
+    <state type="string" name="contentId" value=""></state>
+    <state type="keyword" name="headingRole"></state>
+    <state type="integer" name="headingAriaLevel"></state>
     <event
       name="open"
       type="object"

package/components/ui-editable/ui-editable.html

@@ -14,9 +14,9 @@
     <prop name="placeholder" type="string" default="">Hint shown in the text input while the draft is empty.</prop>
     <prop name="required" type="boolean" default="false">Prevent an empty draft from being saved.</prop>
     <prop name="maxLength" type="number" default="0">Maximum draft length; 0 leaves the length unrestricted.</prop>
-    <state name="internalEdit" :value="false"></state>
-    <state name="internalValue" :value="''"></state>
-    <state name="draft" :value="''"></state>
+    <state type="boolean" name="internalEdit" value="false"></state>
+    <state type="string" name="internalValue" value=""></state>
+    <state type="string" name="draft" value=""></state>
     <event name="input" type="object">
       <prop name="value" required type="string"></prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -7,12 +7,12 @@
     <state
       name="cells"
       type="list(object({ key: string, row: integer, col: integer, label: string, selected: boolean, tabIndex: integer }))"
-      :value="[]"
+      value="[]"
     ></state>
-    <state name="rows" :value="8"></state>
-    <state name="cols" :value="8"></state>
-    <state name="hint" :value="''"></state>
-    <state name="withHeaderRow" :value="false"></state>
+    <state type="integer" name="rows" value="8"></state>
+    <state type="integer" name="cols" value="8"></state>
+    <state type="string" name="hint" value=""></state>
+    <state type="boolean" name="withHeaderRow" value="false"></state>
     <event name="insert" type="object({ rows: integer, cols: integer, withHeaderRow: boolean })"></event>
   </defs>
   <div from:hidden="not open">

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

@@ -14,11 +14,11 @@
       name="anchorRect"
       type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number })"
     >Where the @ was typed, in viewport coordinates.</prop>
-    <state name="visible" :value="false"></state>
-    <state name="rows" type="list(object({ id: string, label: string, detail?: string, initials: string }))" :value="[]"></state>
-    <state name="searching" :value="false"></state>
-    <state name="active" :value="0"></state>
-    <state name="prefix" :value="'ui-editor-mention-menu'"></state>
+    <state type="boolean" name="visible" value="false"></state>
+    <state name="rows" type="list(object({ id: string, label: string, detail?: string, initials: string }))" value="[]"></state>
+    <state type="boolean" name="searching" value="false"></state>
+    <state type="integer" name="active" value="0"></state>
+    <state type="string" name="prefix" value="ui-editor-mention-menu"></state>
     <event name="highlight" type="object({ index: integer, value: string })"></event>
     <event name="select" type="object({ index: integer, value: string })"></event>
   </defs>

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

@@ -16,9 +16,9 @@
       name="anchorRect"
       type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number })"
     >Where the slash was typed, in viewport coordinates.</prop>
-    <state name="visible" :value="false"></state>
-    <state name="active" :value="0"></state>
-    <state name="rows" type="list(object({ value: string, title: string, description: string, icon: string }))" :value="[]"></state>
+    <state type="boolean" name="visible" value="false"></state>
+    <state type="integer" name="active" value="0"></state>
+    <state name="rows" type="list(object({ value: string, title: string, description: string, icon: string }))" value="[]"></state>
     <event name="highlight" type="object({ index: integer, value: string })"></event>
     <event name="select" type="object({ index: integer, value: string })"></event>
   </defs>

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -16,7 +16,7 @@
       ></prop>
       The complete set of commands the current selection permits.
     </prop>
-    <state name="swatches" type="list" :value="[]" nullable>
+    <state name="swatches" type="list" value="[]">
       <prop type="object">
         <prop name="action" required type="string"></prop>
         <prop name="label" required type="string"></prop>
@@ -27,7 +27,7 @@
     <state
       name="sections"
       type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean, checkable: boolean, checked: boolean })) }))"
-      :value="[]"
+      value="[]"
     ></state>
     <event
       name="action"

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

@@ -33,7 +33,7 @@
     <state
       name="rows"
       type="list"
-      :value="[]"
+      value="[]"
     >
       <prop type="object">
         <prop name="key" required type="string"></prop>
@@ -47,7 +47,7 @@
     <state
       name="cols"
       type="list"
-      :value="[]"
+      value="[]"
     >
       <prop type="object">
         <prop name="key" required type="string"></prop>
@@ -61,8 +61,6 @@
     <state
       name="hovered"
       type="object"
-      :value="null"
-      nullable
     >
       <prop name="left" required type="number"></prop>
       <prop name="top" required type="number"></prop>
@@ -76,8 +74,6 @@
     <state
       name="active"
       type="object"
-      :value="null"
-      nullable
     >
       <prop name="left" required type="number"></prop>
       <prop name="top" required type="number"></prop>
@@ -88,7 +84,7 @@
       <prop name="menuLeft" required type="string"></prop>
       <prop name="menuTop" required type="string"></prop>
     </state>
-    <state name="activeKey" :value="''"></state>
+    <state type="string" 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>

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

@@ -17,28 +17,28 @@
       ></prop>
       The complete set of commands the current selection permits.
     </prop>
-    <state name="alignments" type="list" :value="[]">
+    <state name="alignments" type="list" 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="list" :value="[]">
+    <state name="structure" type="list" 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="swatches" type="list(object({ action: string, label: string, color: string, selected: boolean }))" value="[]"></state>
     <state
       name="sections"
       type="list(object({ heading: string, items: list(object({ action: string, label: string, icon: string, danger: boolean, checkable: boolean, checked: boolean })) }))"
-      :value="[]"
+      value="[]"
     ></state>
-    <state name="hasOverflow" :value="false"></state>
-    <state name="overflowOpen" :value="false"></state>
+    <state type="boolean" name="hasOverflow" value="false"></state>
+    <state type="boolean" name="overflowOpen" value="false"></state>
     <event
       name="action"
       type="object"

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

@@ -9,12 +9,12 @@
     <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
     <prop name="required" type="boolean" default="false">Requires at least one choice before form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
-    <state name="choices" type="list(object({ value: string, label: string, disabled: boolean, selected: boolean, index: integer }))" :value="[]"></state>
-    <state name="selection" type="list(string)" :value="[]"></state>
-    <state name="hasSelection" type="boolean" :value="false"></state>
-    <state name="active" type="integer" :value="-1"></state>
-    <state name="uid" type="string" :value="''"></state>
-    <state name="validationError" type="boolean" :value="false"></state>
+    <state name="choices" type="list(object({ value: string, label: string, disabled: boolean, selected: boolean, index: integer }))" value="[]"></state>
+    <state name="selection" type="list(string)" value="[]"></state>
+    <state name="hasSelection" type="boolean" value="false"></state>
+    <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">
       <prop name="value" required nullable type="string"></prop>
       <prop name="values" required type="list">

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

@@ -9,7 +9,7 @@
     <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>
+    <state type="boolean" name="internalOpen" value="false"></state>
     <event name="select" type="object">
       <prop name="value" required type="string"></prop>
       <prop name="checked" type="boolean"></prop>

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

@@ -10,7 +10,7 @@
     <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>
+    <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
       <prop name="value" required type="string"></prop>

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

@@ -8,7 +8,7 @@
       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>
+    <state type="boolean" name="internalOpen" value="false"></state>
     <event
       name="open"
       type="object"

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

@@ -16,7 +16,7 @@
     >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>
+    <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
       <prop name="value" required type="string"></prop>

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

@@ -18,7 +18,7 @@
       form validation fails until one is checked.</prop>
     <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>
+    <state type="string" name="internalValue" value=""></state>
     <event name="select" type="object">
       <prop name="value" required type="string"></prop>
       <prop name="previousValue" required type="string"></prop>

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

@@ -4,7 +4,7 @@
     <prop name="modal" type="boolean" default="false">Makes the rest of the page inert while the search surface is open.</prop>
     <prop name="dismissible" type="boolean" default="false">Allows backdrop activation to close the search surface. Escape always closes it.</prop>
     <prop name="label" type="string" default="Search">Provides the native dialog's accessible name.</prop>
-    <state name="internalOpen" :value="false"></state>
+    <state type="boolean" name="internalOpen" value="false"></state>
     <event
       name="close"
       type="object"

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

@@ -10,8 +10,8 @@
     <prop name="collapsed" type="boolean" default="false">Whether the docked sidebar is collapsed.</prop>
     <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>
+    <state type="boolean" name="internalCollapsed" value="false"></state>
+    <state type="boolean" name="drawer" value="false"></state>
     <event name="resize" type="object">
       <prop name="width" required type="number"></prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>

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

@@ -13,7 +13,7 @@
     >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>
+    <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
       <prop name="value" required type="string"></prop>

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

@@ -11,7 +11,7 @@
       bottoms.</prop>
     <prop name="limit" type="integer"
     >Most children allowed in a horizontal row. When the count exceeds this value, every child stacks regardless of width. Omit it for no count limit.</prop>
-    <state name="overLimit" :value="false"></state>
+    <state type="boolean" name="overLimit" value="false"></state>
   </defs>
   <div><slot></slot></div>
   <style>

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

@@ -14,8 +14,8 @@
     >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>
+    <state type="string" name="internalValue" value=""></state>
+    <state name="tabs" type="list(object({ id: string, label: string }))" value="[]"></state>
     <event name="select" type="object">
       <prop name="value" required type="string"></prop>
       <prop name="previousValue" required type="string"></prop>

package/components/ui-toast-region/ui-toast-region.html

@@ -9,7 +9,7 @@
     <state
       name="toasts"
       type="list"
-      :value="[]"
+      value="[]"
     >
       <prop type="object">
         <prop name="id" required type="string"></prop>

package/components/ui-tooltip/ui-tooltip.html

@@ -14,7 +14,7 @@
     <prop name="showDelay" type="number" default="500">Waits this many milliseconds before showing after pointer entry.</prop>
     <prop name="hideDelay" type="number" default="100">Waits this many milliseconds before hiding after pointer exit.</prop>
     <prop name="inverse" type="boolean" default="false">Use the high-contrast inverse surface (dark on light themes, light on dark themes).</prop>
-    <state name="internalOpen" :value="false"></state>
+    <state type="boolean" name="internalOpen" value="false"></state>
     <event
       name="open"
       type="object"

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

@@ -40,10 +40,10 @@
       still list.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Makes the item unavailable: faded, skipped by keyboard navigation, unable to expand or be dragged, and closed to drops inside it.</prop>
-    <state name="internalExpanded" :value="false"></state>
-    <state name="structuralLevel" :value="1"></state>
-    <state name="tabStop" :value="false"></state>
-    <state name="isContainer" :value="false"></state>
+    <state type="boolean" name="internalExpanded" value="false"></state>
+    <state type="integer" name="structuralLevel" value="1"></state>
+    <state type="boolean" name="tabStop" value="false"></state>
+    <state type="boolean" name="isContainer" value="false"></state>
     <event name="expand" bubbles="false" type="object">
       <prop name="id" required type="string"></prop>
       <prop name="expanded" required type="boolean"></prop>