@threadlabs/looma 0.25.6 → 0.26.0

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

@@ -15,7 +15,7 @@
     </event>
   </defs>
   <div>
-    <dialog $ref="dialog" from: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" from:hidden="not heading">{$heading}</h2>
+        <h2 class="heading" from:hidden="not $heading">{$heading}</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 from:disabled="disabled" from:required="required" from: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

@@ -7,7 +7,7 @@
     <prop name="selectable" type="boolean" default="false">Gives a document divider a pointer-sized hit area. The editor owns selection and deletion.</prop>
     <prop name="selected" type="boolean" default="false">Shows the selected document divider. Selection does not change separator semantics.</prop>
   </defs>
-  <hr from: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

@@ -32,8 +32,8 @@
       aria-orientation="vertical"
       tabindex="0"
       data-ui-affordance="resize"
-      from:aria-label="resizeLabel"
-      from: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"
-    from:role="{ true: 'status', false: null }[concat(label != '')]"
-    from:aria-label="{ true: label, false: null }[concat(label != '')]"
-    from:aria-live="{ true: 'polite', false: null }[concat(label != '')]"
-    from:aria-hidden="{ true: null, false: 'true' }[concat(label != '')]"
+    from:role="{ true: 'status', false: null }[concat($label != '')]"
+    from:aria-label="{ true: $label, false: null }[concat($label != '')]"
+    from:aria-live="{ true: 'polite', false: null }[concat($label != '')]"
+    from:aria-hidden="{ true: null, false: 'true' }[concat($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-stack/ui-stack.html

@@ -12,7 +12,7 @@
     >Where items sit along a stack that is taller than its content: start (the default), center, end, or between, which spreads the spare space between items.
       It has no effect unless the stack is given a height or stretched to one.</prop>
   </defs>
-  <div style:--ui-stack-height="height"><slot></slot></div>
+  <div style:--ui-stack-height="$height"><slot></slot></div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-stack-height {

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 from:role="{ true: 'alert', false: 'status' }[concat(kind = 'error')]">
-    <ui-spinner size="sm" from:hidden="kind != 'loading'"></ui-spinner>
+  <div from:role="{ true: 'alert', false: 'status' }[concat($kind = 'error')]">
+    <ui-spinner size="sm" from:hidden="$kind != 'loading'"></ui-spinner>
     <span class="copy">
-      <strong class="heading" from:hidden="not heading">{$heading}</strong>
+      <strong class="heading" from:hidden="not $heading">{$heading}</strong>
       <span class="message"><slot></slot></span>
     </span>
     <span class="action"><slot name="action"></slot></span>

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

@@ -25,11 +25,11 @@
       type="checkbox"
       role="switch"
       $ref="input"
-      .checked="internalChecked"
-      from:disabled="disabled"
-      from:required="required"
-      from:name="name"
-      from:value="value"
+      .checked="$internalChecked"
+      from:disabled="$disabled"
+      from:required="$required"
+      from:name="$name"
+      from:value="$value"
     >
     <span class="text">
       <span class="label"><slot></slot></span>

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

@@ -23,18 +23,18 @@
     </event>
   </defs>
   <div>
-    <div class="list" $ref="list" role="tablist" from:aria-label="label" from: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"
+          $each="tab of $tabs"
+          $key="$tab.id"
           type="button"
           role="tab"
-          from:id="concat(tab.id, '-tab')"
-          from:value="tab.id"
-          from:aria-controls="tab.id"
-          from:aria-selected="tab.id = internalValue"
-          $value="tab.label"
+          from:id="concat($tab.id, '-tab')"
+          from:value="$tab.id"
+          from:aria-controls="$tab.id"
+          from:aria-selected="$tab.id = $internalValue"
+          $value="$tab.label"
         >
         </button>
       </slot>

package/components/ui-text/ui-text.html

@@ -24,16 +24,16 @@
       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>
   <template $match>
-    <span $when="as = 'span'"><slot></slot></span>
-    <div $when="as = 'div'"><slot></slot></div>
-    <small $when="as = 'small'"><slot></slot></small>
-    <strong $when="as = 'strong'"><slot></slot></strong>
-    <label $when="as = 'label'"><slot></slot></label>
-    <h2 $when="as = 'h2'"><slot></slot></h2>
-    <h3 $when="as = 'h3'"><slot></slot></h3>
-    <h4 $when="as = 'h4'"><slot></slot></h4>
-    <h5 $when="as = 'h5'"><slot></slot></h5>
-    <h6 $when="as = 'h6'"><slot></slot></h6>
+    <span $when="$as = 'span'"><slot></slot></span>
+    <div $when="$as = 'div'"><slot></slot></div>
+    <small $when="$as = 'small'"><slot></slot></small>
+    <strong $when="$as = 'strong'"><slot></slot></strong>
+    <label $when="$as = 'label'"><slot></slot></label>
+    <h2 $when="$as = 'h2'"><slot></slot></h2>
+    <h3 $when="$as = 'h3'"><slot></slot></h3>
+    <h4 $when="$as = 'h4'"><slot></slot></h4>
+    <h5 $when="$as = 'h5'"><slot></slot></h5>
+    <h6 $when="$as = 'h6'"><slot></slot></h6>
     <p $else><slot></slot></p>
   </template>
   <style>

package/components/ui-textarea/ui-textarea.html

@@ -18,14 +18,14 @@
       text, for compact forms; lg has roomier padding. Under a coarse pointer, sm keeps body-size text.</prop>
   </defs>
   <textarea
-    from:value="value"
-    from:disabled="disabled"
-    from:readonly="readonly"
-    from:required="required"
-    from:aria-invalid="invalid"
-    from:rows="rows"
-    style:--_rows="rows"
-    style:--_max-rows="maxRows"
+    from:value="$value"
+    from:disabled="$disabled"
+    from:readonly="$readonly"
+    from:required="$required"
+    from:aria-invalid="$invalid"
+    from:rows="$rows"
+    style:--_rows="$rows"
+    style:--_max-rows="$maxRows"
   ></textarea>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */

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

@@ -12,7 +12,7 @@
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
   </defs>
-  <div from: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" from:round="true" label="Dismiss notification">

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

@@ -34,17 +34,17 @@
   <div role="region" aria-label="Notifications" aria-live="polite" popover="manual">
     <slot></slot>
     <div
-      $each="toast of toasts"
-      $key="toast.id"
+      $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"
+      class:closing="$toast.closing"
+      from:id="$toast.id"
+      from:role="$toast.role"
+      from:data-tone="$toast.tone"
     >
       <span class="message">{$toast.message}</span>
-      <span class="dismiss" from:data-toast="toast.id">
-        <ui-icon-button size="sm" variant="ghost" from:round="true" from:label="concat('Dismiss ', toast.message)">
+      <span class="dismiss" from:data-toast="$toast.id">
+        <ui-icon-button size="sm" variant="ghost" from:round="true" from:label="concat('Dismiss ', $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" from:hidden="not internalOpen"><div class="surface">
+  <span role="tooltip" from:hidden="not $internalOpen"><div class="surface">
       <slot></slot>
       <span class="shortcut"><slot name="shortcut"></slot></span>
     </div></span>

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

@@ -35,6 +35,9 @@
     <prop name="selected" type="boolean" default="false"
     >Marks the item selected: it sets aria-selected and highlights the row. This is controlled state; respond to the parent Tree's select request by updating
       it.</prop>
+    <prop name="actionsVisible" type="boolean" default="false"
+    >Keeps the actions slot visible before hover or focus, for persistent status or controls. The label fades beneath its measured width on pointer devices;
+      touch rows retain a separate actions column with a short end fade. Does not change keyboard navigation or start the marquee.</prop>
     <prop name="marquee" type="boolean" default="false"
     >Scrolls a name too long for its row while a pointer hovers the row or keyboard focus is in it, rests at the end, then scrolls it again from the start. A
       touch does not start it. Off by default: a tree of short names should not move, and a product decides whether reading the whole name matters more than a
@@ -54,25 +57,25 @@
   </defs>
   <div
     role="treeitem"
-    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"
+    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
-        $if="sortable and not disabled"
+        $if="$sortable and not $disabled"
         class="drag-handle"
         $ref="dragHandle"
         type="button"
         draggable="true"
-        from:aria-label="{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]"
+        from:aria-label="{ true: concat('Cancel moving ', $label), false: concat('Drag ', $label, ' to reorder') }[concat($moving)]"
       >
         <svg
           aria-hidden="true"
@@ -92,26 +95,26 @@
           <circle cx="15" cy="19" r="1"></circle>
         </svg>
       </button>
-      <button class="disclosure" $ref="disclosure" type="button" from:disabled="disabled" from: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"
-          from:checked="selected"
-          from:disabled="disabled"
-          from:aria-label="concat('Select ', label)"
+          from:checked="$selected"
+          from:disabled="$disabled"
+          from:aria-label="concat('Select ', $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">{$label}</slot></span></span>
       <span class="actions" $ref="actions">
-        <ui-button $if="moving" data-tree-cancel-move variant="ghost" tone="neutral" size="sm" aria-label="Cancel move">Cancel</ui-button>
+        <ui-button $if="$moving" data-tree-cancel-move variant="ghost" tone="neutral" size="sm" aria-label="Cancel move">Cancel</ui-button>
         <span $else><slot name="actions"></slot></span>
       </span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
-    <div class="children" $ref="children" role="group" from: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>
@@ -371,6 +374,7 @@
        the truncation mark while it shows: an ellipsis under it would read as a second one. */
     .row:hover > .label,
     .row:focus-within > .label,
+    :host([actionsVisible]) > .row > .label,
     :host[data-move-source] > .row > .label {
       text-overflow: clip;
       mask-image: linear-gradient(
@@ -382,6 +386,7 @@
 
     .row:hover > .label:dir(rtl),
     .row:focus-within > .label:dir(rtl),
+    :host([actionsVisible]) > .row > .label:dir(rtl),
     :host[data-move-source] > .row > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
@@ -464,6 +469,7 @@
 
     .row:hover > .actions,
     .row:focus-within > .actions,
+    :host([actionsVisible]) > .row > .actions,
     :host[data-move-source] > .row > .actions {
       opacity: 1;
       pointer-events: auto;
@@ -500,6 +506,14 @@
         );
       }
 
+      /* Persistent content has its own column on touch. Fade only the label's end. */
+      :host([actionsVisible]) > .row > .label {
+        mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+      :host([actionsVisible]) > .row > .label:dir(rtl) {
+        mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+
       .row[data-ui-marquee] > .label:dir(rtl) {
         mask-image: linear-gradient(
           to left,