@threadlabs/looma 0.19.1 → 0.20.0

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

@@ -2,11 +2,15 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-toast" controller="./ui-toast.js">
   <defs>
-    <prop name="tone" type="neutral | info | success | warning | danger" default="neutral"
+    <prop name="tone" type="keyword" values="neutral, info, success, warning, danger" default="neutral"
     >Semantic accent for this message. Danger uses an assertive alert role; the other tones use polite status semantics.</prop>
     <prop name="duration" type="number" default="0"
     >Milliseconds before requesting dismissal; 0 keeps the toast until an action dismisses it. The timer pauses on hover or focus.</prop>
-    <event name="dismiss" type="object({ id: string, reason: action | timeout, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="dismiss" type="object">
+      <prop name="id" required type="string"></prop>
+      <prop name="reason" required type="keyword" values="action, timeout"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div :role="{ neutral: 'status', info: 'status', success: 'status', warning: 'status', danger: 'alert' }[tone]">
     <div class="message"><slot></slot></div>

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

@@ -4,14 +4,26 @@
   <defs>
     <prop name="duration" type="number" default="0"
     >Default milliseconds for toasts added with show() or the show command; 0 keeps each until dismissed. Hover or focus pauses a timer.</prop>
-    <prop name="placement" type="top | top-start | top-end | bottom | bottom-start | bottom-end" default="top"
+    <prop name="placement" type="keyword" values="top, top-start, top-end, bottom, bottom-start, bottom-end" default="top"
     >Screen edge where the stack appears. Start and end follow the writing direction.</prop>
     <state
       name="toasts"
-      type="list(object({ id: string, message: string, tone: neutral | info | success | warning | danger, role: alert | status, closing: boolean }))"
+      type="array"
       :value="[]"
-    ></state>
-    <event name="dismiss" type="object({ id: string, reason: action | timeout, trigger: keyboard | pointer | programmatic })"></event>
+    >
+      <prop type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="message" required type="string"></prop>
+        <prop name="tone" required type="keyword" values="neutral, info, success, warning, danger"></prop>
+        <prop name="role" required type="keyword" values="alert, status"></prop>
+        <prop name="closing" required type="boolean"></prop>
+      </prop>
+    </state>
+    <event name="dismiss" type="object">
+      <prop name="id" required type="string"></prop>
+      <prop name="reason" required type="keyword" values="action, timeout"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <method name="show" export="show" returns="promise(string)"></method>
   </defs>
   <div role="region" aria-label="Notifications" aria-live="polite" popover="manual">

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

@@ -4,10 +4,11 @@
     <prop name="open" type="boolean" default="false">Whether the tooltip is open initially or when set externally.</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="top"
     >Positions the description around its trigger. Start and end on top or bottom follow the writing direction.</prop>
-    <prop name="trigger" type="hover | click | focus" default="hover"
+    <prop name="trigger" type="keyword" values="hover, click, focus" default="hover"
     >How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus
       opens only while the trigger holds focus.</prop>
     <prop name="showDelay" type="number" default="500">Waits this many milliseconds before showing after pointer entry.</prop>
@@ -16,12 +17,20 @@
     <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 role="tooltip" :hidden="not internalOpen"><div class="surface"><slot></slot></div></span>
   <style>

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

@@ -1,9 +1,10 @@
 <link rel="component" href="../ui-tree-item/ui-tree-item.html">
 <template component="ui-tree" controller="./ui-tree.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="Tree">The tree's accessible name, announced when focus enters it. Name what the tree holds.</prop>
-    <prop name="selection" type="none | single | multiple" default="none"
+    <prop name="selection" type="keyword" values="none, single, multiple" default="none"
     >How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with
       its descendants. The application owns each Tree Item's selected state and responds to select.</prop>
     <prop name="hoverExpandDelay" type="number" default="700"
@@ -17,13 +18,35 @@
       that fit should not move. An item may set its own marquee to opt in or out on its own.</prop>
     <event
       name="reorder"
-      type="object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="sourceId" required type="string"></prop>
+      <prop name="targetId" required type="string"></prop>
+      <prop name="position" required type="keyword" values="before, inside, after"></prop>
+      <prop name="sourceType" required type="string"></prop>
+      <prop name="targetType" required type="string"></prop>
+      <prop name="sourceScope" required type="string"></prop>
+      <prop name="targetScope" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="reorder-rejected"
-      type="object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })"
-    ></event>
-    <event name="select" type="object({ ids: list(string), trigger: keyboard | pointer | programmatic })"></event>
+      type="object"
+    >
+      <prop name="sourceId" required type="string"></prop>
+      <prop name="targetId" required type="string"></prop>
+      <prop name="position" required type="keyword" values="before, inside, after"></prop>
+      <prop name="reason" required type="keyword" values="max-depth"></prop>
+      <prop name="maxDepth" required type="integer"></prop>
+      <prop name="resultingDepth" required type="integer"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="select" type="object">
+      <prop name="ids" required type="array">
+        <prop type="string"></prop>
+      </prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div role="tree"><slot></slot></div>
   <style>

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

@@ -44,7 +44,11 @@
     <state name="structuralLevel" :value="1"></state>
     <state name="tabStop" :value="false"></state>
     <state name="isContainer" :value="false"></state>
-    <event name="expand" bubbles="false" type="object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="expand" bubbles="false" type="object">
+      <prop name="id" required type="string"></prop>
+      <prop name="expanded" required type="boolean"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div
     role="treeitem"