@threadlabs/looma 0.25.6 → 0.26.0

package/components/ui-avatar/ui-avatar.html

@@ -28,10 +28,10 @@
   </defs>
   <span>
     <slot></slot>
-    <img class="image" $ref="image" from:src="src" alt="" aria-hidden="true" from:hidden="hasAuthoredImage or not hasImage">
-    <span class="fallback" from:aria-hidden="hasImage" from:hidden="hasImage">
-      <span from:hidden="showGlyph">{$initials}</span>
-      <span from:hidden="not showGlyph"><ui-icon name="user-round"></ui-icon></span>
+    <img class="image" $ref="image" from:src="$src" alt="" aria-hidden="true" from:hidden="$hasAuthoredImage or not $hasImage">
+    <span class="fallback" from:aria-hidden="$hasImage" from:hidden="$hasImage">
+      <span from:hidden="$showGlyph">{$initials}</span>
+      <span from:hidden="not $showGlyph"><ui-icon name="user-round"></ui-icon></span>
     </span>
   </span>
   <style>

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

@@ -16,9 +16,9 @@
     <state type="integer" name="overflowCount" value="0"></state>
     <state type="string" name="overflowAnnouncement" value=""></state>
   </defs>
-  <div role="group" from:aria-label="label">
+  <div role="group" from:aria-label="$label">
     <slot></slot>
-    <span class="overflow" $ref="overflow" role="img" from:hidden="not overflowCount" from:aria-label="overflowAnnouncement">+{$overflowCount}</span>
+    <span class="overflow" $ref="overflow" role="img" from:hidden="not $overflowCount" from:aria-label="$overflowAnnouncement">+{$overflowCount}</span>
   </div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */

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

@@ -3,7 +3,7 @@
     <prop name="current" type="boolean" default="false"
     >Marks the step as the view you are on: it is plain text with aria-current="page". Every other step holds a link.</prop>
   </defs>
-  <li from:aria-current="{ true: 'page', false: null }[concat(current)]">
+  <li from:aria-current="{ true: 'page', false: null }[concat($current)]">
     <span class="separator" aria-hidden="true"><ui-icon name="chevron-right"></ui-icon></span>
     <span class="content"><slot></slot></span>
   </li>

package/components/ui-breadcrumbs/ui-breadcrumbs.html

@@ -2,7 +2,7 @@
   <defs>
     <prop name="label" type="string" default="Breadcrumb">The navigation landmark's accessible name.</prop>
   </defs>
-  <nav from:aria-label="label"><ol role="list"><slot></slot></ol></nav>
+  <nav from:aria-label="$label"><ol role="list"><slot></slot></ol></nav>
   <style>
     /* Where a view sits: a trail of ui-breadcrumb-item, from the top down to the current view. It wraps
        rather than scrolls, so every step stays reachable. */

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

@@ -40,53 +40,53 @@
   </defs>
   <template $match>
     <a
-      $when="variant = 'card' and as = 'a'"
-      from:href="{ true: null, false: href }[concat(disabled or loading or pending)]"
-      from:target="target"
-      from:rel="rel"
-      from:aria-disabled="{ true: 'true', false: null }[concat(disabled or loading or pending)]"
-      from:aria-busy="loading or pending"
-      from:tabindex="{ true: '0', false: null }[concat((loading or pending) and not disabled)]"
+      $when="$variant = 'card' and $as = 'a'"
+      from:href="{ true: null, false: $href }[concat($disabled or $loading or $pending)]"
+      from:target="$target"
+      from:rel="$rel"
+      from:aria-disabled="{ true: 'true', false: null }[concat($disabled or $loading or $pending)]"
+      from:aria-busy="$loading or $pending"
+      from:tabindex="{ true: '0', false: null }[concat(($loading or $pending) and not $disabled)]"
     >
-      <span class="card-icon"><ui-spinner $if="loading or pending" size="sm"></ui-spinner><template $if="not (loading or pending)"><slot
+      <span class="card-icon"><ui-spinner $if="$loading or $pending" size="sm"></ui-spinner><template $if="not ($loading or $pending)"><slot
             name="icon"
           ></slot></template></span>
       <span class="card-content"><slot></slot></span>
       <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
     </a>
     <button
-      $when="variant = 'card'"
-      from:type="type"
-      from:disabled="disabled"
-      from:aria-disabled="{ true: 'true', false: null }[concat(loading or pending)]"
-      from:aria-busy="loading or pending"
+      $when="$variant = 'card'"
+      from:type="$type"
+      from:disabled="$disabled"
+      from:aria-disabled="{ true: 'true', false: null }[concat($loading or $pending)]"
+      from:aria-busy="$loading or $pending"
     >
-      <span class="card-icon"><ui-spinner $if="loading or pending" size="sm"></ui-spinner><template $if="not (loading or pending)"><slot
+      <span class="card-icon"><ui-spinner $if="$loading or $pending" size="sm"></ui-spinner><template $if="not ($loading or $pending)"><slot
             name="icon"
           ></slot></template></span>
       <span class="card-content"><slot></slot></span>
       <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
     </button>
     <a
-      $when="as = 'a'"
-      from:href="{ true: null, false: href }[concat(disabled or loading or pending)]"
-      from:target="target"
-      from:rel="rel"
-      from:aria-disabled="{ true: 'true', false: null }[concat(disabled or loading or pending)]"
-      from:aria-busy="loading or pending"
-      from:tabindex="{ true: '0', false: null }[concat((loading or pending) and not disabled)]"
+      $when="$as = 'a'"
+      from:href="{ true: null, false: $href }[concat($disabled or $loading or $pending)]"
+      from:target="$target"
+      from:rel="$rel"
+      from:aria-disabled="{ true: 'true', false: null }[concat($disabled or $loading or $pending)]"
+      from:aria-busy="$loading or $pending"
+      from:tabindex="{ true: '0', false: null }[concat(($loading or $pending) and not $disabled)]"
     >
-      <span $if="loading or pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
+      <span $if="$loading or $pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>
     </a>
     <button
       $else
-      from:type="type"
-      from:disabled="disabled"
-      from:aria-disabled="{ true: 'true', false: null }[concat(loading or pending)]"
-      from:aria-busy="loading or pending"
+      from:type="$type"
+      from:disabled="$disabled"
+      from:aria-disabled="{ true: 'true', false: null }[concat($loading or $pending)]"
+      from:aria-busy="$loading or $pending"
     >
-      <span $if="loading or pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
+      <span $if="$loading or $pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>
     </button>
   </template>

package/components/ui-callout/ui-callout.html

@@ -6,13 +6,13 @@
   </defs>
   <div role="note">
     <span class="icon" aria-hidden="true">
-      <svg $if="tone = 'info'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg $if="$tone = 'info'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
         <path d="M12 16v-4"></path>
         <path d="M12 8h.01"></path>
       </svg>
       <svg
-        $if="tone = 'neutral' or tone = 'note'"
+        $if="$tone = 'neutral' or $tone = 'note'"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -24,16 +24,16 @@
         <path d="M13 2v7h7"></path>
         <path d="m9.5 17.5 4-4 2 2-4 4H9.5v-2Z"></path>
       </svg>
-      <svg $if="tone = 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg $if="$tone = 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
         <path d="M12 9v4"></path>
         <path d="M12 17h.01"></path>
       </svg>
-      <svg $if="tone = 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg $if="$tone = 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
         <path d="m9 12 2 2 4-4"></path>
       </svg>
-      <svg $if="tone = 'danger'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <svg $if="$tone = 'danger'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
         <path d="m15 9-6 6"></path>
         <path d="m9 9 6 6"></path>

package/components/ui-card/ui-card.html

@@ -14,9 +14,9 @@
     >The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.</prop>
   </defs>
   <template $match>
-    <section $when="as = 'section'"><slot></slot></section>
-    <article $when="as = 'article'"><slot></slot></article>
-    <aside $when="as = 'aside'"><slot></slot></aside>
+    <section $when="$as = 'section'"><slot></slot></section>
+    <article $when="$as = 'article'"><slot></slot></article>
+    <aside $when="$as = 'aside'"><slot></slot></aside>
     <div $else><slot></slot></div>
   </template>
   <style>

package/components/ui-checkbox/ui-checkbox.html

@@ -30,15 +30,15 @@
   <label>
     <input
       type="checkbox"
-      from:aria-label="label"
+      from:aria-label="$label"
       $ref="input"
-      .checked="internalChecked"
-      .indeterminate="indeterminate"
-      from:disabled="disabled"
-      from:aria-invalid="invalid"
-      from:required="required"
-      from:name="name"
-      from:value="value"
+      .checked="$internalChecked"
+      .indeterminate="$indeterminate"
+      from:disabled="$disabled"
+      from:aria-invalid="$invalid"
+      from:required="$required"
+      from:name="$name"
+      from:value="$value"
     >
     <span class="text">
       <span class="label"><slot></slot></span>

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

@@ -369,66 +369,66 @@
     </event>
   </defs>
   <div>
-    <label from:for="concat(uid, '-input')" class:sr-only="labelVisibility = 'sr-only'">{$label}<template $if="required">
+    <label from:for="concat($uid, '-input')" class:sr-only="$labelVisibility = 'sr-only'">{$label}<template $if="$required">
         *</template></label>
     <div class="control">
       <div class="field" $ref="field">
         <div class="entry">
           <slot name="start"></slot>
-          <template $if="multiple">
+          <template $if="$multiple">
             <button
-              $each="item, index of internalItems"
-              $key="item.id"
+              $each="item, index of $internalItems"
+              $key="$item.id"
               class="item"
               type="button"
               tabindex="-1"
-              from:data-index="index"
-              from:disabled="disabled or readonly or item.disabled"
-              from:aria-label="concat(item.label, ', press Delete or Backspace to remove')"
+              from:data-index="$index"
+              from:disabled="$disabled or $readonly or $item.disabled"
+              from:aria-label="concat($item.label, ', press Delete or Backspace to remove')"
             >
-              <slot from:name="concat('item-', item.id)"><ui-badge>{$item.label}</ui-badge></slot>
+              <slot from:name="concat('item-', $item.id)"><ui-badge>{$item.label}</ui-badge></slot>
             </button>
           </template>
           <input
             $ref="input"
-            from:id="concat(uid, '-input')"
+            from:id="concat($uid, '-input')"
             role="combobox"
             aria-autocomplete="list"
             autocomplete="off"
-            from:aria-controls="concat(uid, '-listbox')"
-            from:aria-expanded="expanded"
-            from:aria-invalid="invalid or validationStatus = 'error'"
-            from:aria-busy="loading or validationStatus = 'pending'"
-            .value="display"
-            from:placeholder="placeholder"
-            from:disabled="disabled"
-            from:readonly="readonly"
-            from:required="required and not (multiple and internalItems.0)"
+            from:aria-controls="concat($uid, '-listbox')"
+            from:aria-expanded="$expanded"
+            from:aria-invalid="$invalid or $validationStatus = 'error'"
+            from:aria-busy="$loading or $validationStatus = 'pending'"
+            .value="$display"
+            from:placeholder="$placeholder"
+            from:disabled="$disabled"
+            from:readonly="$readonly"
+            from:required="$required and not ($multiple and $internalItems.0)"
           >
         </div>
-        <input $if="name and not multiple" type="hidden" from:name="name" from:value="submitted" from:disabled="disabled">
-        <template $if="name and multiple">
-          <input $each="item of internalItems" $key="item.id" type="hidden" from:name="name" from:value="item.value" from:disabled="disabled">
+        <input $if="$name and not $multiple" type="hidden" from:name="$name" from:value="$submitted" from:disabled="$disabled">
+        <template $if="$name and $multiple">
+          <input $each="item of $internalItems" $key="$item.id" type="hidden" from:name="$name" from:value="$item.value" from:disabled="$disabled">
         </template>
         <button
-          $if="clearable"
+          $if="$clearable"
           type="button"
           data-combobox-action="clear"
           aria-label="Clear"
-          from:disabled="disabled or readonly or (not raw and (multiple or selected = null))"
+          from:disabled="$disabled or $readonly or (not $raw and ($multiple or $selected = null))"
         >
           <svg class="affordance-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
             <path d="M7 7l10 10M17 7 7 17"></path>
           </svg>
         </button>
         <button
-          $if="disclosure"
+          $if="$disclosure"
           type="button"
           data-combobox-action="disclosure"
           tabindex="-1"
           aria-label="Show suggestions"
-          from:aria-controls="concat(uid, '-listbox')"
-          from:disabled="disabled or readonly"
+          from:aria-controls="concat($uid, '-listbox')"
+          from:disabled="$disabled or $readonly"
         >
           <svg
             class="affordance-icon"
@@ -444,7 +444,7 @@
           </svg>
         </button>
       </div>
-      <button $if="help" class="help" from:id="concat(uid, '-help')" type="button" aria-label="Help" from:disabled="disabled">
+      <button $if="$help" class="help" from:id="concat($uid, '-help')" type="button" aria-label="Help" from:disabled="$disabled">
         <svg
           class="help-icon"
           aria-hidden="true"
@@ -461,60 +461,60 @@
         </svg>
       </button>
     </div>
-    <ui-tooltip $if="help" trigger="click" from:id="concat(uid, '-help-text')" from:for="concat(uid, '-help')">{$help}</ui-tooltip>
-    <div class="popup" $ref="popup" from:hidden="not expanded">
-      <div role="listbox" $ref="listbox" from:id="concat(uid, '-listbox')" from:aria-label="concat(label, ' suggestions')" from:aria-busy="loading">
-        <div $each="group of groups" $key="group.name" from:role="group.role" from:aria-label="group.label">
-          <div $if="group.name" class="group">{$group.name}</div>
+    <ui-tooltip $if="$help" trigger="click" from:id="concat($uid, '-help-text')" from:for="concat($uid, '-help')">{$help}</ui-tooltip>
+    <div class="popup" $ref="popup" from:hidden="not $expanded">
+      <div role="listbox" $ref="listbox" from:id="concat($uid, '-listbox')" from:aria-label="concat($label, ' suggestions')" from:aria-busy="$loading">
+        <div $each="group of $groups" $key="$group.name" from:role="$group.role" from:aria-label="$group.label">
+          <div $if="$group.name" class="group">{$group.name}</div>
           <div
-            $each="row of group.rows"
-            $key="row.id"
+            $each="row of $group.rows"
+            $key="$row.id"
             class="option"
-            class:active="row.index = active"
+            class:active="$row.index = $active"
             role="option"
             data-ui-choice-option
-            from:data-multiple="multiple"
-            from:id="concat(uid, '-option-', row.index)"
-            from:aria-selected="row.selected"
-            from:aria-disabled="row.disabled"
-            from:data-index="row.index"
-            from:aria-labelledby="row.labelledBy"
-            from:aria-describedby="row.detail"
+            from:data-multiple="$multiple"
+            from:id="concat($uid, '-option-', $row.index)"
+            from:aria-selected="$row.selected"
+            from:aria-disabled="$row.disabled"
+            from:data-index="$row.index"
+            from:aria-labelledby="$row.labelledBy"
+            from:aria-describedby="$row.detail"
           >
-            <slot from:name="concat('option-', row.id)">
-              <span $if="row.detail" class="detail">
+            <slot from:name="concat('option-', $row.id)">
+              <span $if="$row.detail" class="detail">
                 <span class="line">
-                  <span class="primary" from:id="concat(uid, '-option-', row.index, '-label')">{$row.label}</span>
-                  <ui-badge $if="row.tag" from:tone="row.tag.tone" style:--ui-badge-color="row.tag.color"><span
-                      from:id="concat(uid, '-option-', row.index, '-tag')"
+                  <span class="primary" from:id="concat($uid, '-option-', $row.index, '-label')">{$row.label}</span>
+                  <ui-badge $if="$row.tag" from:tone="$row.tag.tone" style:--ui-badge-color="$row.tag.color"><span
+                      from:id="concat($uid, '-option-', $row.index, '-tag')"
                     >{$row.tag.label}</span></ui-badge>
                 </span>
-                <span $if="row.description" class="description" from:id="concat(uid, '-option-', row.index, '-description')">{$row.description}</span>
+                <span $if="$row.description" class="description" from:id="concat($uid, '-option-', $row.index, '-description')">{$row.description}</span>
               </span>
-              <span $if="not row.detail" class="primary">{$row.label}</span>
+              <span $if="not $row.detail" class="primary">{$row.label}</span>
             </slot>
           </div>
         </div>
         <div
-          $if="creatable"
+          $if="$creatable"
           class="option"
-          class:active="createIndex = active"
+          class:active="$createIndex = $active"
           role="option"
           data-ui-choice-option
-          from:data-multiple="multiple"
+          from:data-multiple="$multiple"
           aria-selected="false"
-          from:id="concat(uid, '-option-', createIndex)"
-          from:data-index="createIndex"
-          $value="concat('Create “', raw, '”')"
+          from:id="concat($uid, '-option-', $createIndex)"
+          from:data-index="$createIndex"
+          $value="concat('Create “', $raw, '”')"
         >
         </div>
-        <div $if="message" class="message">{$message}</div>
-        <div $if="not loading and not rows.0 and not creatable and not lookupError" class="message"><slot name="empty">No suggestions.</slot></div>
+        <div $if="$message" class="message">{$message}</div>
+        <div $if="not $loading and not $rows.0 and not $creatable and not $lookupError" class="message"><slot name="empty">No suggestions.</slot></div>
       </div>
       <slot name="footer"></slot>
     </div>
-    <div class="message" from:id="concat(uid, '-validation')" from:hidden="not validation.issues.length">
-      <div $each="issue of validation.issues">{$issue.message}</div>
+    <div class="message" from:id="concat($uid, '-validation')" from:hidden="not $validation.issues.length">
+      <div $each="issue of $validation.issues">{$issue.message}</div>
     </div>
     <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">{$statusText}</div>
     <div class="authored-options" $ref="options" hidden aria-hidden="true"><slot></slot></div>

package/components/ui-dialog/ui-dialog.html

@@ -35,9 +35,9 @@
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
   </defs>
-  <dialog from:aria-label="accessibleLabel">
+  <dialog from:aria-label="$accessibleLabel">
     <header>
-      <h2 class="title" $if="label">{$label}</h2>
+      <h2 class="title" $if="$label">{$label}</h2>
       <button class="close" $ref="close" type="button" aria-label="Close"></button>
     </header>
     <ui-scroll-area class="body"><slot></slot></ui-scroll-area>

package/components/ui-disclosure/ui-disclosure.html

@@ -44,14 +44,14 @@
     </event>
   </defs>
   <div>
-    <div class="heading" $ref="heading" from:role="headingRole" from:aria-level="headingAriaLevel">
-      <button class="trigger" type="button" $ref="trigger" from:aria-controls="contentId" from:aria-expanded="internalOpen" from:disabled="disabled">
+    <div class="heading" $ref="heading" from:role="$headingRole" from:aria-level="$headingAriaLevel">
+      <button class="trigger" type="button" $ref="trigger" from:aria-controls="$contentId" from:aria-expanded="$internalOpen" from:disabled="$disabled">
         <span class="leading"><slot name="leading"></slot></span>
         <span class="summary"><slot name="summary">{$summary}</slot></span>
         <span class="indicator" aria-hidden="true"><slot name="indicator"><span class="chevron"></span></slot></span>
       </button>
     </div>
-    <div class="panel" $ref="panel" from:id="contentId"><div class="panel-inner"><slot></slot></div></div>
+    <div class="panel" $ref="panel" from:id="$contentId"><div class="panel-inner"><slot></slot></div></div>
   </div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */

package/components/ui-editable/ui-editable.html

@@ -37,22 +37,22 @@
   </defs>
   <div>
     <div class="field">
-      <button class="preview" $ref="preview" type="button" from:disabled="disabled">
+      <button class="preview" $ref="preview" type="button" from:disabled="$disabled">
         <span class="text">{$internalValue}</span>
-        <span $if="hint" class="hint" aria-hidden="true">{$hint}</span>
+        <span $if="$hint" class="hint" aria-hidden="true">{$hint}</span>
       </button>
       <input
         class="input"
         $ref="input"
         type="text"
-        .value="draft"
-        from:aria-label="label"
-        from:placeholder="placeholder"
-        from:required="required"
-        from:disabled="disabled or not internalEdit"
+        .value="$draft"
+        from:aria-label="$label"
+        from:placeholder="$placeholder"
+        from:required="$required"
+        from:disabled="$disabled or not $internalEdit"
       >
     </div>
-    <div $if="actions" class="actions">
+    <div $if="$actions" class="actions">
       <button class="save" type="button">{$saveLabel}</button>
       <button class="cancel" type="button">{$cancelLabel}</button>
     </div>

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html

@@ -15,24 +15,24 @@
     <state type="boolean" name="withHeaderRow" value="false"></state>
     <event name="insert" type="object({ rows: integer, cols: integer, withHeaderRow: boolean })"></event>
   </defs>
-  <div from:hidden="not open">
+  <div from:hidden="not $open">
     <p class="hint">{$hint}</p>
-    <div class="grid" $ref="grid" role="group" aria-label="Table dimensions" style:--_rows="rows" style:--_cols="cols">
+    <div class="grid" $ref="grid" role="group" aria-label="Table dimensions" style:--_rows="$rows" style:--_cols="$cols">
       <button
-        $each="cell of cells"
-        $key="cell.key"
+        $each="cell of $cells"
+        $key="$cell.key"
         type="button"
         class="cell"
-        class:selected="cell.selected"
-        from:data-row="cell.row"
-        from:data-col="cell.col"
-        from:aria-label="cell.label"
-        from:aria-pressed="cell.selected"
-        from:tabindex="cell.tabIndex"
+        class:selected="$cell.selected"
+        from:data-row="$cell.row"
+        from:data-col="$cell.col"
+        from:aria-label="$cell.label"
+        from:aria-pressed="$cell.selected"
+        from:tabindex="$cell.tabIndex"
       >
       </button>
     </div>
-    <label class="header"><input type="checkbox" $ref="header" .checked="withHeaderRow"> Header row</label>
+    <label class="header"><input type="checkbox" $ref="header" .checked="$withHeaderRow"> Header row</label>
   </div>
   <style>
     :host {

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -22,22 +22,22 @@
     <event name="highlight" type="object({ index: integer, value: string })"></event>
     <event name="select" type="object({ index: integer, value: string })"></event>
   </defs>
-  <div role="listbox" from:aria-busy="loading" from:hidden="not visible">
+  <div role="listbox" from:aria-busy="$loading" from:hidden="not $visible">
     <div class="header"><slot name="header"></slot></div>
-    <div $if="searching" class="loading" role="status">{$loadingLabel}</div>
-    <ul $if="not searching" class="list" role="presentation">
+    <div $if="$searching" class="loading" role="status">{$loadingLabel}</div>
+    <ul $if="not $searching" class="list" role="presentation">
       <li
-        $each="row, index of rows"
-        from:id="concat(prefix, '-option-', index)"
+        $each="row, index of $rows"
+        from:id="concat($prefix, '-option-', $index)"
         class="item"
-        class:active="index = active"
+        class:active="$index = $active"
         role="option"
-        from:aria-selected="index = active"
-        from:data-index="index"
-        from:data-value="row.id"
+        from:aria-selected="$index = $active"
+        from:data-index="$index"
+        from:data-value="$row.id"
       >
         <span class="avatar" aria-hidden="true">{$row.initials}</span>
-        <span class="body"><span class="label">{$row.label}</span><span $if="row.detail" class="detail">{$row.detail}</span></span>
+        <span class="body"><span class="label">{$row.label}</span><span $if="$row.detail" class="detail">{$row.detail}</span></span>
       </li>
       <slot></slot>
     </ul>

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

@@ -4,9 +4,9 @@
     <prop name="detail" type="string" default="">Secondary text, such as a team or role.</prop>
     <prop name="initials" type="string" default="">Text fallback for the start slot when no avatar is supplied.</prop>
   </defs>
-  <li role="option" tabindex="-1" from:data-value="value">
+  <li role="option" tabindex="-1" from:data-value="$value">
     <span class="avatar" aria-hidden="true"><slot name="start">{$initials}</slot></span>
-    <span class="body"><span class="label"><slot></slot></span><span $if="detail" class="detail">{$detail}</span></span>
+    <span class="body"><span class="label"><slot></slot></span><span $if="$detail" class="detail">{$detail}</span></span>
   </li>
   <style>
     :host {

package/components/ui-editor-slash-menu/ui-editor-slash-menu.html

@@ -22,19 +22,19 @@
     <event name="highlight" type="object({ index: integer, value: string })"></event>
     <event name="select" type="object({ index: integer, value: string })"></event>
   </defs>
-  <div role="listbox" from:hidden="not visible">
+  <div role="listbox" from:hidden="not $visible">
     <div class="header"><slot name="header"></slot></div>
     <ul class="list" role="presentation">
       <li
-        $each="item, index of rows"
+        $each="item, index of $rows"
         class="item"
-        class:active="index = active"
+        class:active="$index = $active"
         role="option"
-        from:aria-selected="index = active"
-        from:data-index="index"
-        from:data-value="item.value"
+        from:aria-selected="$index = $active"
+        from:data-index="$index"
+        from:data-value="$item.value"
       >
-        <span class="icon" aria-hidden="true"><ui-icon from:name="item.icon"></ui-icon></span>
+        <span class="icon" aria-hidden="true"><ui-icon from:name="$item.icon"></ui-icon></span>
         <span class="body"><span class="title">{$item.title}</span><span class="description">{$item.description}</span></span>
       </li>
       <slot></slot>

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

@@ -3,7 +3,7 @@
     <prop name="label" type="string" default="">Names this group of related slash commands.</prop>
   </defs>
   <li role="presentation">
-    <div role="group" from:aria-label="label">
+    <div role="group" from:aria-label="$label">
       <div class="heading">{$label}</div>
       <ul role="presentation"><slot></slot></ul>
     </div>

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

@@ -7,9 +7,9 @@
     <prop name="keywords" type="string" default="">Additional space-separated search terms matched by the containing Slash Menu.</prop>
     <prop name="disabled" type="boolean" default="false">Keeps the command visible but unavailable for selection.</prop>
   </defs>
-  <li role="option" tabindex="-1" from:aria-disabled="disabled" from:data-value="value" from:data-keywords="keywords">
-    <span $if="icon" class="icon" aria-hidden="true"><ui-icon from:name="icon"></ui-icon></span>
-    <span class="body"><span class="title"><slot></slot></span><span $if="description" class="description">{$description}</span></span>
+  <li role="option" tabindex="-1" from:aria-disabled="$disabled" from:data-value="$value" from:data-keywords="$keywords">
+    <span $if="$icon" class="icon" aria-hidden="true"><ui-icon from:name="$icon"></ui-icon></span>
+    <span class="body"><span class="title"><slot></slot></span><span $if="$description" class="description">{$description}</span></span>
   </li>
   <style>
     :host {