@threadlabs/looma 0.21.0 → 0.21.2

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

@@ -17,7 +17,7 @@
       option with selected sets the initial value.</prop>
     <prop
       name="items"
-      type="array"
+      type="list"
     >
       <prop type="object">
         <prop name="id" required type="string"></prop>
@@ -90,7 +90,7 @@
       it.</prop>
     <state
       name="internalItems"
-      type="array"
+      type="list"
       :value="[]"
     >
       <prop type="object">
@@ -113,7 +113,7 @@
     <state name="expanded" :value="false"></state>
     <state
       name="rows"
-      type="array"
+      type="list"
       :value="[]"
     >
       <prop type="object">
@@ -143,7 +143,7 @@
       <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 name="issues" required type="list">
         <prop type="object">
           <prop name="message" required type="string"></prop>
         </prop>
@@ -153,14 +153,14 @@
     <state name="submitted" :value="''"></state>
     <state
       name="groups"
-      type="array"
+      type="list"
       :value="[]"
     >
       <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 name="rows" required type="list">
           <prop type="object">
             <prop name="id" required type="string"></prop>
             <prop name="value" required type="string"></prop>
@@ -215,7 +215,7 @@
     </event>
     <event
       name="items-change"
-      type="array"
+      type="list"
     >
       <prop type="object">
         <prop name="id" required type="string"></prop>
@@ -282,10 +282,10 @@
       <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 name="issues" required type="list">
         <prop type="object">
           <prop name="message" required type="string"></prop>
-          <prop name="path" type="array">
+          <prop name="path" type="list">
             <prop type="unknown"></prop>
           </prop>
           <prop name="severity" type="keyword" values="error, warning"></prop>
@@ -295,7 +295,7 @@
     </event>
     <event
       name="options-change"
-      type="array"
+      type="list"
     >
       <prop type="object">
         <prop name="id" required type="string"></prop>
@@ -356,7 +356,7 @@
       <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 name="selectedValues" required type="list">
         <prop type="string"></prop>
       </prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>

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

@@ -8,7 +8,7 @@
     <prop name="headerColumn" type="boolean" default="false">Whether the table's first column currently uses header cells.</prop>
     <prop
       name="actions"
-      type="array"
+      type="list"
     >
       <prop
         type="keyword"
@@ -16,7 +16,7 @@
       ></prop>
       The complete set of commands the current selection permits.
     </prop>
-    <state name="swatches" type="array" :value="[]" nullable>
+    <state name="swatches" type="list" :value="[]" nullable>
       <prop type="object">
         <prop name="action" required type="string"></prop>
         <prop name="label" required type="string"></prop>

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

@@ -6,10 +6,10 @@
       name="geometry"
       type="object"
     >
-      <prop name="rowBoundaries" required type="array">
+      <prop name="rowBoundaries" required type="list">
         <prop type="number"></prop>
       </prop>
-      <prop name="columnBoundaries" required type="array">
+      <prop name="columnBoundaries" required type="list">
         <prop type="number"></prop>
       </prop>
       <prop name="activeCell" required nullable type="object">
@@ -32,7 +32,7 @@
     </prop>
     <state
       name="rows"
-      type="array"
+      type="list"
       :value="[]"
     >
       <prop type="object">
@@ -46,7 +46,7 @@
     </state>
     <state
       name="cols"
-      type="array"
+      type="list"
       :value="[]"
     >
       <prop type="object">

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

@@ -9,7 +9,7 @@
     <prop name="headerColumn" type="boolean" default="false">Whether the table's first column currently uses header cells.</prop>
     <prop
       name="actions"
-      type="array"
+      type="list"
     >
       <prop
         type="keyword"
@@ -17,14 +17,14 @@
       ></prop>
       The complete set of commands the current selection permits.
     </prop>
-    <state name="alignments" type="array" :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="array" :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>

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

@@ -17,7 +17,7 @@
     <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="array">
+      <prop name="values" required type="list">
         <prop type="string"></prop>
       </prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer"></prop>

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

@@ -8,7 +8,7 @@
     >Screen edge where the stack appears. Start and end follow the writing direction.</prop>
     <state
       name="toasts"
-      type="array"
+      type="list"
       :value="[]"
     >
       <prop type="object">

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

@@ -42,7 +42,7 @@
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
     <event name="select" type="object">
-      <prop name="ids" required type="array">
+      <prop name="ids" required type="list">
         <prop type="string"></prop>
       </prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>

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

@@ -146,7 +146,7 @@
       position: relative;
       display: block;
       min-inline-size: 0;
-      margin-inline-start: calc(var(--ui-tree-item-depth, 0) * var(--_ui-tree-indent, 16px));
+      margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
     }
 
     .row {

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

@@ -55,7 +55,10 @@ export default function controller(host) {
     if (host.state.lazy && expanded && childItems().length === 0) element.setAttribute("aria-busy", "true");
     else element.removeAttribute("aria-busy");
     element.tabIndex = host.state.disabled || !host.state.tabStop ? -1 : 0;
-    element.style.setProperty("--ui-tree-item-depth", String(Number(host.state.structuralLevel ?? 1) - 1));
+    const depth = Number(host.state.structuralLevel ?? 1) - 1;
+    element.style.setProperty("--ui-tree-item-depth", String(depth));
+    // Nested items already sit inside their parent's indented box. Add just one local step.
+    element.style.setProperty("--_ui-tree-item-indent-step", depth > 0 ? "1" : "0");
     disclosure.setAttribute("aria-expanded", String(expanded));
     disclosure.setAttribute("aria-label", `${expanded ? "Collapse" : "Expand"} ${name}`);
   };