@threadlabs/looma 0.19.1 → 0.21.0

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

@@ -1,34 +1,39 @@
 <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">
+    <div class="list" $ref="list" role="tablist" from:aria-label="label" from:aria-orientation="orientation">
       <slot name="tab">
         <button
           $each="tab of tabs"
           $key="tab.id"
           type="button"
           role="tab"
-          :id="format('%s-tab', tab.id)"
-          :value="tab.id"
-          :aria-controls="tab.id"
-          :aria-selected="tab.id = internalValue"
+          from:id="format('%s-tab', tab.id)"
+          from:value="tab.id"
+          from:aria-controls="tab.id"
+          from:aria-selected="tab.id = internalValue"
           $value="tab.label"
         >
         </button>

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,11 +11,19 @@
     <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>
-  <textarea :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid" :rows="rows" style:--_rows="rows"></textarea>
+  <textarea
+    from:value="value"
+    from:disabled="disabled"
+    from:readonly="readonly"
+    from:required="required"
+    from:aria-invalid="invalid"
+    from:rows="rows"
+    style:--_rows="rows"
+  ></textarea>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-textarea-focus-shadow {

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

@@ -2,16 +2,20 @@
 <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 from:role="{ neutral: 'status', info: 'status', success: 'status', warning: 'status', danger: 'alert' }[tone]">
     <div class="message"><slot></slot></div>
     <div class="action" $ref="action"><slot name="action"></slot></div>
-    <ui-icon-button class="dismiss" size="sm" variant="ghost" :round="true" label="Dismiss notification">
+    <ui-icon-button class="dismiss" size="sm" variant="ghost" from:round="true" label="Dismiss notification">
       <ui-icon name="x"></ui-icon>
     </ui-icon-button>
   </div>

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

@@ -4,22 +4,42 @@
   <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">
     <slot></slot>
-    <div $each="toast of toasts" $key="toast.id" class="toast" class:closing="toast.closing" :id="toast.id" :role="toast.role" :data-tone="toast.tone">
+    <div
+      $each="toast of toasts"
+      $key="toast.id"
+      class="toast"
+      class:closing="toast.closing"
+      from:id="toast.id"
+      from:role="toast.role"
+      from:data-tone="toast.tone"
+    >
       <span class="message" $value="toast.message"></span>
-      <span class="dismiss" :data-toast="toast.id">
-        <ui-icon-button size="sm" variant="ghost" :round="true" :label="format('Dismiss %s', toast.message)">
+      <span class="dismiss" from:data-toast="toast.id">
+        <ui-icon-button size="sm" variant="ghost" from:round="true" from:label="format('Dismiss %s', toast.message)">
           <ui-icon name="x"></ui-icon>
         </ui-icon-button>
       </span>

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,14 +17,22 @@
     <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>
+  <span role="tooltip" from:hidden="not internalOpen"><div class="surface"><slot></slot></div></span>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-tooltip-arrow-size {

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,20 +44,24 @@
     <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"
-    :aria-label="label"
-    :aria-level="structuralLevel"
-    :aria-selected="selected"
-    :aria-disabled="disabled"
-    :data-item-id="itemId"
-    :data-drag-type="dragType"
-    :data-drop-scope="dropScope"
-    :data-accepts="accepts"
-    :data-drop-depth="dropDepth"
-    :data-subtree-depth="subtreeDepth"
+    from:aria-label="label"
+    from:aria-level="structuralLevel"
+    from:aria-selected="selected"
+    from:aria-disabled="disabled"
+    from:data-item-id="itemId"
+    from:data-drag-type="dragType"
+    from:data-drop-scope="dropScope"
+    from:data-accepts="accepts"
+    from:data-drop-depth="dropDepth"
+    from:data-subtree-depth="subtreeDepth"
   >
     <div class="row" $ref="row">
       <button
@@ -66,7 +70,7 @@
         $ref="dragHandle"
         type="button"
         draggable="true"
-        :aria-label="format('Drag %s to reorder', label)"
+        from:aria-label="format('Drag %s to reorder', label)"
       >
         <svg
           aria-hidden="true"
@@ -86,23 +90,23 @@
           <circle cx="15" cy="19" r="1"></circle>
         </svg>
       </button>
-      <button class="disclosure" $ref="disclosure" type="button" :disabled="disabled" :hidden="not isContainer">
+      <button class="disclosure" $ref="disclosure" type="button" from:disabled="disabled" from:hidden="not isContainer">
         <span class="disclosure-icon" aria-hidden="true"></span>
       </button>
       <label class="selection-hit"><input
           class="selection-checkbox"
           type="checkbox"
           tabindex="-1"
-          :checked="selected"
-          :disabled="disabled"
-          :aria-label="format('Select %s', label)"
+          from:checked="selected"
+          from:disabled="disabled"
+          from:aria-label="format('Select %s', label)"
         ></label>
       <span class="leading" $ref="leading"><slot name="leading"></slot></span>
       <span class="label" $ref="label"><span class="label-text" $ref="labelText"><slot name="label"><template $value="label"></template></slot></span></span>
       <span class="actions" $ref="actions"><slot name="actions"></slot></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
-    <div class="children" $ref="children" role="group" :hidden="not (isContainer and internalExpanded)"><slot></slot></div>
+    <div class="children" $ref="children" role="group" from:hidden="not (isContainer and internalExpanded)"><slot></slot></div>
     <span class="drop-indicator subtree-drop-indicator" aria-hidden="true"></span>
   </div>
   <style>