@threadlabs/looma 0.20.0 → 0.21.1

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

@@ -6,7 +6,7 @@
       widths.</prop>
     <prop name="label" type="string" default="">The button's accessible name. The button usually holds only an icon, so name the action it performs.</prop>
   </defs>
-  <button type="button" :aria-label="label" :disabled="disabled"><slot></slot></button>
+  <button type="button" from:aria-label="label" from:disabled="disabled"><slot></slot></button>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-floating-action-button-inset-block-end {

package/components/ui-icon/ui-icon.html

@@ -78,10 +78,19 @@
   <span aria-hidden="true">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
       <g $each="shape of shapes">
-        <path $if="shape.tag = 'path'" :d="shape.d"></path>
-        <circle $if="shape.tag = 'circle'" :cx="shape.cx" :cy="shape.cy" :r="shape.r"></circle>
-        <rect $if="shape.tag = 'rect'" :x="shape.x" :y="shape.y" :width="shape.width" :height="shape.height" :rx="shape.rx" :ry="shape.ry"></rect>
-        <line $if="shape.tag = 'line'" :x1="shape.x1" :y1="shape.y1" :x2="shape.x2" :y2="shape.y2"></line>
+        <path $if="shape.tag = 'path'" from:d="shape.d"></path>
+        <circle $if="shape.tag = 'circle'" from:cx="shape.cx" from:cy="shape.cy" from:r="shape.r"></circle>
+        <rect
+          $if="shape.tag = 'rect'"
+          from:x="shape.x"
+          from:y="shape.y"
+          from:width="shape.width"
+          from:height="shape.height"
+          from:rx="shape.rx"
+          from:ry="shape.ry"
+        >
+        </rect>
+        <line $if="shape.tag = 'line'" from:x1="shape.x1" from:y1="shape.y1" from:x2="shape.x2" from:y2="shape.y2"></line>
       </g>
     </svg>
   </span>

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

@@ -20,11 +20,11 @@
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
   <button
-    :disabled="disabled"
+    from:disabled="disabled"
     type="button"
-    :aria-label="label"
-    :aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
-    :aria-busy="loading or pending"
+    from:aria-label="label"
+    from:aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
+    from:aria-busy="loading or pending"
   >
     <ui-spinner $if="loading or pending" size="sm"></ui-spinner>
     <span class="content"><slot></slot></span>

package/components/ui-input/ui-input.html

@@ -36,7 +36,7 @@
       coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. Change it after render through this option; the element's size property is
       the native one.</prop>
   </defs>
-  <input :type="type" :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid">
+  <input from:type="type" from:value="value" from:disabled="disabled" from:readonly="readonly" from:required="required" from:aria-invalid="invalid">
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. An Input
        Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */

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

@@ -7,7 +7,7 @@
     >Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology
       announces. Set it on one item at a time.</prop>
   </defs>
-  <li :aria-current="current">
+  <li from:aria-current="current">
     <span class="leading"><slot name="leading"></slot></span>
     <span class="content">
       <span class="title"><slot></slot></span>

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

@@ -25,11 +25,11 @@
   </defs>
   <div
     role="listbox"
-    :tabindex="{ true: '-1', false: '0' }[format('%s', disabled)]"
-    :aria-multiselectable="multiple"
-    :aria-disabled="disabled"
-    :aria-required="required"
-    :aria-invalid="invalid or validationError"
+    from:tabindex="{ true: '-1', false: '0' }[format('%s', disabled)]"
+    from:aria-multiselectable="multiple"
+    from:aria-disabled="disabled"
+    from:aria-required="required"
+    from:aria-invalid="invalid or validationError"
     style:--_rows="rows"
   >
     <ui-scroll-area class="choices" $ref="choices">
@@ -40,28 +40,37 @@
         class:active="choice.index = active"
         role="option"
         data-ui-choice-option
-        :data-multiple="multiple"
-        :id="format('%s-option-%s', uid, choice.index)"
-        :data-index="choice.index"
-        :aria-selected="choice.selected"
-        :aria-disabled="choice.disabled"
+        from:data-multiple="multiple"
+        from:id="format('%s-option-%s', uid, choice.index)"
+        from:data-index="choice.index"
+        from:aria-selected="choice.selected"
+        from:aria-disabled="choice.disabled"
       >
         <span $value="choice.label"></span>
       </div>
     </ui-scroll-area>
-    <select class="fallback" $ref="options" :size="rows" :multiple="multiple" :disabled="disabled" :required="required" :name="name" aria-label="Choices">
+    <select
+      class="fallback"
+      $ref="options"
+      from:size="rows"
+      from:multiple="multiple"
+      from:disabled="disabled"
+      from:required="required"
+      from:name="name"
+      aria-label="Choices"
+    >
       <slot></slot>
     </select>
     <template $if="name and not disabled">
-      <input $each="selected of selection" type="hidden" :name="name" :value="selected">
+      <input $each="selected of selection" type="hidden" from:name="name" from:value="selected">
     </template>
     <input
       class="validity"
       $ref="validity"
       type="checkbox"
-      :required="required and not hasSelection and not disabled"
-      :checked="hasSelection"
-      :disabled="disabled"
+      from:required="required and not hasSelection and not disabled"
+      from:checked="hasSelection"
+      from:disabled="disabled"
       aria-hidden="true"
       tabindex="-1"
     >

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

@@ -2,7 +2,7 @@
   <defs>
     <prop name="label" type="string" default="">Visible heading and accessible name for this group of menu items.</prop>
   </defs>
-  <div role="group" :aria-label="label">
+  <div role="group" from:aria-label="label">
     <div class="heading" $if="label" $value="label"></div>
     <slot></slot>
   </div>

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

@@ -23,20 +23,20 @@
       $when="href and type = 'action'"
       role="menuitem"
       tabindex="-1"
-      :aria-disabled="disabled"
-      :data-value="value"
-      :href="{ true: null, false: href }[format('%s', disabled)]"
+      from:aria-disabled="disabled"
+      from:data-value="value"
+      from:href="{ true: null, false: href }[format('%s', disabled)]"
     >
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
     </a>
     <div
       $else
-      :role="{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]"
-      :aria-checked="{ action: null, checkbox: internalChecked, radio: internalChecked }[type]"
+      from:role="{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]"
+      from:aria-checked="{ action: null, checkbox: internalChecked, radio: internalChecked }[type]"
       tabindex="-1"
-      :aria-disabled="disabled"
-      :data-value="value"
+      from:aria-disabled="disabled"
+      from:data-value="value"
     >
       <span class="indicator" aria-hidden="true">
         <ui-icon $if="type = 'checkbox' and internalChecked" name="check"></ui-icon>

package/components/ui-meter/ui-meter.html

@@ -28,11 +28,11 @@
   <span
     role="meter"
     aria-valuemin="0"
-    :aria-valuemax="max"
-    :aria-valuenow="amount"
-    :aria-valuetext="{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]"
-    :aria-label="{ true: label, false: null }[format('%s', label != '')]"
-    :data-ui-meter-segments="{ true: segments, false: null }[format('%s', segments > 1)]"
+    from:aria-valuemax="max"
+    from:aria-valuenow="amount"
+    from:aria-valuetext="{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]"
+    from:aria-label="{ true: label, false: null }[format('%s', label != '')]"
+    from:data-ui-meter-segments="{ true: segments, false: null }[format('%s', segments > 1)]"
   >
     <span class="fill" style:inline-size="format('%s%', percent)"></span>
   </span>

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

@@ -18,10 +18,10 @@
   <template $match>
     <a
       $when="as = 'a'"
-      :href="href"
-      :target="target"
-      :rel="rel"
-      :aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]"
+      from:href="href"
+      from:target="target"
+      from:rel="rel"
+      from:aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]"
     >
       <span class="indicator" aria-hidden="true"></span>
       <span class="leading"><slot name="leading"></slot></span>
@@ -30,7 +30,7 @@
         <span class="description"><slot name="description"></slot></span>
       </span>
     </a>
-    <button $else type="button" :aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]">
+    <button $else type="button" from:aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[format('%s', current)]">
       <span class="indicator" aria-hidden="true"></span>
       <span class="leading"><slot name="leading"></slot></span>
       <span class="content">

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

@@ -24,7 +24,7 @@
     </event>
   </defs>
   <label>
-    <input type="radio" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :value="value" :name="name">
+    <input type="radio" $ref="input" .checked="internalChecked" from:disabled="disabled" from:required="required" from:value="value" from:name="name">
     <span class="text">
       <span class="label"><slot></slot></span>
       <span class="description" $ref="description" aria-hidden="true"><slot name="description"></slot></span>

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

@@ -30,7 +30,7 @@
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
   </defs>
-  <fieldset role="radiogroup" :aria-required="required" :aria-invalid="invalid" :disabled="disabled">
+  <fieldset role="radiogroup" from:aria-required="required" from:aria-invalid="invalid" from:disabled="disabled">
     <legend><template $value="label"></template></legend>
     <slot></slot>
   </fieldset>

package/components/ui-search-result-row/ui-search-result-row.html

@@ -6,7 +6,7 @@
     >Marks the row as the current result: it gets the hover surface and aria-current="true", which assistive technology announces as current. Set it on one row
       at a time, such as the result the arrow keys have moved to.</prop>
   </defs>
-  <button type="button" :disabled="disabled" :aria-current="selected">
+  <button type="button" from:disabled="disabled" from:aria-current="selected">
     <span class="leading"><slot name="leading"></slot></span>
     <span class="content">
       <span class="title"><slot name="title"></slot></span>

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

@@ -15,7 +15,7 @@
     </event>
   </defs>
   <div>
-    <dialog $ref="dialog" :aria-label="label">
+    <dialog $ref="dialog" from:aria-label="label">
       <div class="panel">
         <div class="search"><slot name="search"></slot></div>
         <div class="status"><slot name="status"></slot></div>

package/components/ui-section/ui-section.html

@@ -11,7 +11,7 @@
   <section>
     <span class="head">
       <span class="copy">
-        <h2 class="heading" :hidden="not heading"><template $value="heading"></template></h2>
+        <h2 class="heading" from:hidden="not heading"><template $value="heading"></template></h2>
         <span class="description"><slot name="description"></slot></span>
       </span>
       <span class="actions"><slot name="actions"></slot></span>

package/components/ui-select/ui-select.html

@@ -12,7 +12,7 @@
       with roomier padding. Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. It is not the native size attribute: a select
       is always a single-choice dropdown. Change it after render through this option; the element's size property is the native one.</prop>
   </defs>
-  <select :disabled="disabled" :required="required" :aria-invalid="invalid"><slot></slot></select>
+  <select from:disabled="disabled" from:required="required" from:aria-invalid="invalid"><slot></slot></select>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-select-border {

package/components/ui-separator/ui-separator.html

@@ -3,7 +3,7 @@
     <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >Whether the separator divides stacked content (horizontal) or inline content (vertical).</prop>
   </defs>
-  <hr :aria-orientation="orientation">
+  <hr from:aria-orientation="orientation">
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-separator-color {

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

@@ -31,8 +31,8 @@
       aria-orientation="vertical"
       tabindex="0"
       data-ui-affordance="resize"
-      :aria-label="resizeLabel"
-      :hidden="not resizable or drawer or internalCollapsed"
+      from:aria-label="resizeLabel"
+      from:hidden="not resizable or drawer or internalCollapsed"
     >
       <span class="guide" aria-hidden="true"></span>
     </div>

package/components/ui-spinner/ui-spinner.html

@@ -7,10 +7,10 @@
   </defs>
   <span
     class="ring"
-    :role="{ true: 'status', false: null }[format('%s', label != '')]"
-    :aria-label="{ true: label, false: null }[format('%s', label != '')]"
-    :aria-live="{ true: 'polite', false: null }[format('%s', label != '')]"
-    :aria-hidden="{ true: null, false: 'true' }[format('%s', label != '')]"
+    from:role="{ true: 'status', false: null }[format('%s', label != '')]"
+    from:aria-label="{ true: label, false: null }[format('%s', label != '')]"
+    from:aria-live="{ true: 'polite', false: null }[format('%s', label != '')]"
+    from:aria-hidden="{ true: null, false: 'true' }[format('%s', label != '')]"
   >
     <svg viewBox="0 0 50 50" fill="none" aria-hidden="true" focusable="false">
       <circle class="track" cx="25" cy="25" r="20"></circle>

package/components/ui-status-message/ui-status-message.html

@@ -8,10 +8,10 @@
     >Where it sits. inline takes its place in the view's flow; panel sits it on a dashed surface, for an empty area in a page; fill centres it in all the space
       it is given, for a whole view that is loading or failed.</prop>
   </defs>
-  <div :role="{ true: 'alert', false: 'status' }[format('%s', kind = 'error')]">
-    <ui-spinner size="sm" :hidden="kind != 'loading'"></ui-spinner>
+  <div from:role="{ true: 'alert', false: 'status' }[format('%s', kind = 'error')]">
+    <ui-spinner size="sm" from:hidden="kind != 'loading'"></ui-spinner>
     <span class="copy">
-      <strong class="heading" :hidden="not heading"><template $value="heading"></template></strong>
+      <strong class="heading" from:hidden="not heading"><template $value="heading"></template></strong>
       <span class="message"><slot></slot></span>
     </span>
     <span class="action"><slot name="action"></slot></span>

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

@@ -21,7 +21,16 @@
     </event>
   </defs>
   <label>
-    <input type="checkbox" role="switch" $ref="input" .checked="internalChecked" :disabled="disabled" :required="required" :name="name" :value="value">
+    <input
+      type="checkbox"
+      role="switch"
+      $ref="input"
+      .checked="internalChecked"
+      from:disabled="disabled"
+      from:required="required"
+      from:name="name"
+      from:value="value"
+    >
     <span class="text">
       <span class="label"><slot></slot></span>
       <span class="description" $ref="description" aria-hidden="true"><slot name="description"></slot></span>

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

@@ -23,17 +23,17 @@
     </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-textarea/ui-textarea.html

@@ -15,7 +15,15 @@
     >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

@@ -12,10 +12,10 @@
       <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

@@ -28,10 +28,18 @@
   </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

@@ -32,7 +32,7 @@
       <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-item/ui-tree-item.html

@@ -52,16 +52,16 @@
   </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
@@ -70,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"
@@ -90,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>
@@ -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}`);
   };