@threadlabs/looma 0.23.20 → 0.23.21

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

@@ -388,7 +388,7 @@
               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 $value="item.label"></ui-badge></slot>
+              <slot from:name="concat('item-', item.id)"><ui-badge>{$item.label}</ui-badge></slot>
             </button>
           </template>
           <input
@@ -467,7 +467,7 @@
     <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" $value="group.name"></div>
+          <div $if="group.name" class="group">{$group.name}</div>
           <div
             $each="row of group.rows"
             $key="row.id"
@@ -486,15 +486,14 @@
             <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')" $value="row.label"></span>
+                  <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')"
-                      $value="row.tag.label"
-                    ></span></ui-badge>
+                    >{$row.tag.label}</span></ui-badge>
                 </span>
-                <span $if="row.description" class="description" from:id="concat(uid, '-option-', row.index, '-description')" $value="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" $value="row.label"></span>
+              <span $if="not row.detail" class="primary">{$row.label}</span>
             </slot>
           </div>
         </div>
@@ -517,7 +516,7 @@
       <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" $value="issue.message"></div>
+      <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-editor-mention-menu/ui-editor-mention-menu.html

@@ -36,8 +36,8 @@
         from:data-index="index"
         from:data-value="row.id"
       >
-        <span class="avatar" aria-hidden="true" $value="row.initials"></span>
-        <span class="body"><span class="label" $value="row.label"></span><span $if="row.detail" class="detail" $value="row.detail"></span></span>
+        <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>
       </li>
       <slot></slot>
     </ul>

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

@@ -35,7 +35,7 @@
         from:data-value="item.value"
       >
         <span class="icon" aria-hidden="true"><ui-icon from:name="item.icon"></ui-icon></span>
-        <span class="body"><span class="title" $value="item.title"></span><span class="description" $value="item.description"></span></span>
+        <span class="body"><span class="title">{$item.title}</span><span class="description">{$item.description}</span></span>
       </li>
       <slot></slot>
     </ul>

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

@@ -56,14 +56,14 @@
           from:data-action="swatch.action"
         >
           <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
-          <span class="swatch-label" $value="swatch.label"></span>
+          <span class="swatch-label">{$swatch.label}</span>
         </button>
       </div>
     </div>
     <template $each="section of sections" $key="section.heading">
       <div class="sep"></div>
       <div class="section" role="none">
-        <div class="heading" role="presentation" $value="section.heading"></div>
+        <div class="heading" role="presentation">{$section.heading}</div>
         <button
           $each="item of section.items"
           $key="item.action"
@@ -74,7 +74,7 @@
           from:data-action="item.action"
         >
           <ui-icon from:name="item.icon"></ui-icon>
-          <span $value="item.label"></span>
+          <span>{$item.label}</span>
         </button>
       </div>
     </template>

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

@@ -127,7 +127,7 @@
           from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
-          <span class="tooltip" role="tooltip" $value="control.label"></span>
+          <span class="tooltip" role="tooltip">{$control.label}</span>
         </button>
       </div>
     </div>
@@ -151,7 +151,7 @@
           from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
-          <span class="tooltip" role="tooltip" $value="control.label"></span>
+          <span class="tooltip" role="tooltip">{$control.label}</span>
         </button>
       </div>
     </div>

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

@@ -71,7 +71,7 @@
     <div $if="structure" class="group" role="group" aria-label="Table structure">
       <button $each="item of structure" $key="item.action" type="button" from:data-action="item.action">
         <ui-icon from:name="item.icon"></ui-icon>
-        <span $value="item.label"></span>
+        <span>{$item.label}</span>
       </button>
     </div>
     <div $if="(alignments or structure) and hasOverflow" class="sep" aria-hidden="true"></div>
@@ -96,12 +96,12 @@
               from:data-action="swatch.action"
             >
               <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
-              <span $value="swatch.label"></span>
+              <span>{$swatch.label}</span>
             </button>
           </div>
         </div>
         <div $each="section of sections" $key="section.heading" class="menu-section divided" role="none">
-          <div class="menu-heading" role="presentation" $value="section.heading"></div>
+          <div class="menu-heading" role="presentation">{$section.heading}</div>
           <button
             $each="item of section.items"
             $key="item.action"
@@ -112,7 +112,7 @@
             from:data-action="item.action"
           >
             <ui-icon from:name="item.icon"></ui-icon>
-            <span $value="item.label"></span>
+            <span>{$item.label}</span>
           </button>
         </div>
       </div>

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

@@ -46,7 +46,7 @@
         from:aria-selected="choice.selected"
         from:aria-disabled="choice.disabled"
       >
-        <span $value="choice.label"></span>
+        <span>{$choice.label}</span>
       </div>
     </ui-scroll-area>
     <select

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

@@ -37,7 +37,7 @@
       from:role="toast.role"
       from:data-tone="toast.tone"
     >
-      <span class="message" $value="toast.message"></span>
+      <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)">
           <ui-icon name="x"></ui-icon>