@threadlabs/looma 0.20.0 → 0.21.0

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

@@ -27,10 +27,10 @@
   </defs>
   <span>
     <slot></slot>
-    <img class="image" $ref="image" :src="src" alt="" aria-hidden="true" :hidden="hasAuthoredImage or not hasImage">
-    <span class="fallback" :aria-hidden="hasImage" :hidden="hasImage">
-      <span :hidden="showGlyph" $value="initials"></span>
-      <span :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" $value="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

@@ -15,9 +15,9 @@
     <state name="overflowCount" :value="0"></state>
     <state name="overflowAnnouncement" :value="''"></state>
   </defs>
-  <div role="group" :aria-label="label">
+  <div role="group" from:aria-label="label">
     <slot></slot>
-    <span class="overflow" $ref="overflow" role="img" :hidden="not overflowCount" :aria-label="overflowAnnouncement"><template
+    <span class="overflow" $ref="overflow" role="img" from:hidden="not overflowCount" from:aria-label="overflowAnnouncement"><template
         $value="format('+%s', overflowCount)"
       ></template></span>
   </div>

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 :aria-current="{ true: 'page', false: null }[format('%s', current)]">
+  <li from:aria-current="{ true: 'page', false: null }[format('%s', 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 :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

@@ -36,22 +36,22 @@
   <template $match>
     <a
       $when="as = 'a'"
-      :href="{ true: null, false: href }[format('%s', disabled or loading or pending)]"
-      :target="target"
-      :rel="rel"
-      :aria-disabled="{ true: 'true', false: null }[format('%s', disabled or loading or pending)]"
-      :aria-busy="loading or pending"
-      :tabindex="{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]"
+      from:href="{ true: null, false: href }[format('%s', disabled or loading or pending)]"
+      from:target="target"
+      from:rel="rel"
+      from:aria-disabled="{ true: 'true', false: null }[format('%s', disabled or loading or pending)]"
+      from:aria-busy="loading or pending"
+      from:tabindex="{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]"
     >
       <span $if="loading or pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>
     </a>
     <button
       $else
-      :type="type"
-      :disabled="disabled"
-      :aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
-      :aria-busy="loading or pending"
+      from:type="type"
+      from:disabled="disabled"
+      from:aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
+      from:aria-busy="loading or pending"
     >
       <span $if="loading or pending" class="spinner-wrap"><ui-spinner size="sm"></ui-spinner></span>
       <slot></slot>

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

@@ -32,11 +32,11 @@
       $ref="input"
       .checked="internalChecked"
       .indeterminate="indeterminate"
-      :disabled="disabled"
-      :aria-invalid="invalid"
-      :required="required"
-      :name="name"
-      :value="value"
+      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

@@ -365,7 +365,7 @@
     <method name="focusInput" export="focusInput" returns="promise(undefined)"></method>
   </defs>
   <div>
-    <label :for="format('%s-input', uid)" class:sr-only="labelVisibility = 'sr-only'"><template $value="label"></template><template $if="required">
+    <label from:for="format('%s-input', uid)" class:sr-only="labelVisibility = 'sr-only'"><template $value="label"></template><template $if="required">
         *</template></label>
     <div class="control">
       <div class="field" $ref="field">
@@ -378,40 +378,40 @@
               class="item"
               type="button"
               tabindex="-1"
-              :data-index="index"
-              :disabled="disabled or readonly or item.disabled"
-              :aria-label="format('%s, press Delete or Backspace to remove', item.label)"
+              from:data-index="index"
+              from:disabled="disabled or readonly or item.disabled"
+              from:aria-label="format('%s, press Delete or Backspace to remove', item.label)"
             >
-              <slot :name="format('item-%s', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
+              <slot from:name="format('item-%s', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
             </button>
           </template>
           <input
             $ref="input"
-            :id="format('%s-input', uid)"
+            from:id="format('%s-input', uid)"
             role="combobox"
             aria-autocomplete="list"
             autocomplete="off"
-            :aria-controls="format('%s-listbox', uid)"
-            :aria-expanded="expanded"
-            :aria-invalid="invalid or validationStatus = 'error'"
-            :aria-busy="loading or validationStatus = 'pending'"
+            from:aria-controls="format('%s-listbox', uid)"
+            from:aria-expanded="expanded"
+            from:aria-invalid="invalid or validationStatus = 'error'"
+            from:aria-busy="loading or validationStatus = 'pending'"
             .value="display"
-            :placeholder="placeholder"
-            :disabled="disabled"
-            :readonly="readonly"
-            :required="required and not (multiple and internalItems[0])"
+            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" :name="name" :value="submitted" :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" :name="name" :value="item.value" :disabled="disabled">
+          <input $each="item of internalItems" $key="item.id" type="hidden" from:name="name" from:value="item.value" from:disabled="disabled">
         </template>
         <button
           $if="clearable"
           type="button"
           data-combobox-action="clear"
           aria-label="Clear"
-          :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>
@@ -423,8 +423,8 @@
           data-combobox-action="disclosure"
           tabindex="-1"
           aria-label="Show suggestions"
-          :aria-controls="format('%s-listbox', uid)"
-          :disabled="disabled or readonly"
+          from:aria-controls="format('%s-listbox', uid)"
+          from:disabled="disabled or readonly"
         >
           <svg
             class="affordance-icon"
@@ -440,7 +440,7 @@
           </svg>
         </button>
       </div>
-      <button $if="help" class="help" :id="format('%s-help', uid)" type="button" aria-label="Help" :disabled="disabled">
+      <button $if="help" class="help" from:id="format('%s-help', uid)" type="button" aria-label="Help" from:disabled="disabled">
         <svg
           class="help-icon"
           aria-hidden="true"
@@ -457,10 +457,12 @@
         </svg>
       </button>
     </div>
-    <ui-tooltip $if="help" trigger="click" :id="format('%s-help-text', uid)" :for="format('%s-help', uid)"><template $value="help"></template></ui-tooltip>
-    <div class="popup" $ref="popup" :hidden="not expanded">
-      <div role="listbox" $ref="listbox" :id="format('%s-listbox', uid)" :aria-label="format('%s suggestions', label)" :aria-busy="loading">
-        <div $each="group of groups" $key="group.name" :role="group.role" :aria-label="group.label">
+    <ui-tooltip $if="help" trigger="click" from:id="format('%s-help-text', uid)" from:for="format('%s-help', uid)"><template
+        $value="help"
+      ></template></ui-tooltip>
+    <div class="popup" $ref="popup" from:hidden="not expanded">
+      <div role="listbox" $ref="listbox" from:id="format('%s-listbox', uid)" from:aria-label="format('%s suggestions', label)" 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
             $each="row of group.rows"
@@ -469,24 +471,24 @@
             class:active="row.index = active"
             role="option"
             data-ui-choice-option
-            :data-multiple="multiple"
-            :id="format('%s-option-%s', uid, row.index)"
-            :aria-selected="row.selected"
-            :aria-disabled="row.disabled"
-            :data-index="row.index"
-            :aria-labelledby="row.labelledBy"
-            :aria-describedby="row.detail"
+            from:data-multiple="multiple"
+            from:id="format('%s-option-%s', uid, 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 :name="format('option-%s', row.id)">
+            <slot from:name="format('option-%s', row.id)">
               <span $if="row.detail" class="detail">
                 <span class="line">
-                  <span class="primary" :id="format('%s-option-%s-label', uid, row.index)" $value="row.label"></span>
-                  <ui-badge $if="row.tag" :tone="row.tag.tone" style:--ui-badge-color="row.tag.color"><span
-                      :id="format('%s-option-%s-tag', uid, row.index)"
+                  <span class="primary" from:id="format('%s-option-%s-label', uid, row.index)" $value="row.label"></span>
+                  <ui-badge $if="row.tag" from:tone="row.tag.tone" style:--ui-badge-color="row.tag.color"><span
+                      from:id="format('%s-option-%s-tag', uid, row.index)"
                       $value="row.tag.label"
                     ></span></ui-badge>
                 </span>
-                <span $if="row.description" class="description" :id="format('%s-option-%s-description', uid, row.index)" $value="row.description"></span>
+                <span $if="row.description" class="description" from:id="format('%s-option-%s-description', uid, row.index)" $value="row.description"></span>
               </span>
               <span $if="not row.detail" class="primary" $value="row.label"></span>
             </slot>
@@ -498,10 +500,10 @@
           class:active="createIndex = active"
           role="option"
           data-ui-choice-option
-          :data-multiple="multiple"
+          from:data-multiple="multiple"
           aria-selected="false"
-          :id="format('%s-option-%s', uid, createIndex)"
-          :data-index="createIndex"
+          from:id="format('%s-option-%s', uid, createIndex)"
+          from:data-index="createIndex"
           $value="format('Create “%s”', raw)"
         >
         </div>
@@ -510,7 +512,7 @@
       </div>
       <slot name="footer"></slot>
     </div>
-    <div class="message" :id="format('%s-validation', uid)" :hidden="not validation.issues.length">
+    <div class="message" from:id="format('%s-validation', uid)" from:hidden="not validation.issues.length">
       <div $each="issue of validation.issues" $value="issue.message"></div>
     </div>
     <div class="sr-only" role="status" aria-live="polite" aria-atomic="true" $value="statusText"></div>

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

@@ -35,7 +35,7 @@
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
   </defs>
-  <dialog :aria-label="accessibleLabel">
+  <dialog from:aria-label="accessibleLabel">
     <header>
       <h2 class="title" $if="label" $value="label"></h2>
       <button class="close" $ref="close" type="button" aria-label="Close"></button>

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

@@ -35,13 +35,13 @@
     </event>
   </defs>
   <div>
-    <div class="heading" :role="headingRole" :aria-level="headingAriaLevel">
-      <button class="trigger" type="button" $ref="trigger" :aria-controls="contentId" :aria-expanded="internalOpen" :disabled="disabled">
+    <div class="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="summary"><slot name="summary"><template $value="summary"></template></slot></span>
         <span class="chevron" aria-hidden="true"></span>
       </button>
     </div>
-    <div class="panel" $ref="panel" :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,7 +37,7 @@
   </defs>
   <div>
     <div class="field">
-      <button class="preview" $ref="preview" type="button" :disabled="disabled">
+      <button class="preview" $ref="preview" type="button" from:disabled="disabled">
         <span class="text" $value="internalValue"></span>
         <span $if="hint" class="hint" aria-hidden="true" $value="hint"></span>
       </button>
@@ -46,10 +46,10 @@
         $ref="input"
         type="text"
         .value="draft"
-        :aria-label="label"
-        :placeholder="placeholder"
-        :required="required"
-        :disabled="disabled or not internalEdit"
+        from:aria-label="label"
+        from:placeholder="placeholder"
+        from:required="required"
+        from:disabled="disabled or not internalEdit"
       >
     </div>
     <div $if="actions" class="actions">

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

@@ -15,7 +15,7 @@
     <state name="withHeaderRow" :value="false"></state>
     <event name="insert" type="object({ rows: integer, cols: integer, withHeaderRow: boolean })"></event>
   </defs>
-  <div :hidden="not open">
+  <div from:hidden="not open">
     <p class="hint" $value="hint"></p>
     <div class="grid" $ref="grid" role="group" aria-label="Table dimensions" style:--_rows="rows" style:--_cols="cols">
       <button
@@ -24,11 +24,11 @@
         type="button"
         class="cell"
         class:selected="cell.selected"
-        :data-row="cell.row"
-        :data-col="cell.col"
-        :aria-label="cell.label"
-        :aria-pressed="cell.selected"
-        :tabindex="cell.tabIndex"
+        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>

package/components/ui-editor-mention-menu/ui-editor-mention-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" :aria-busy="loading" :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" $value="loadingLabel"></div>
     <ul $if="not searching" class="list" role="presentation">
       <li
         $each="row, index of rows"
-        :id="format('%s-option-%s', prefix, index)"
+        from:id="format('%s-option-%s', prefix, index)"
         class="item"
         class:active="index = active"
         role="option"
-        :aria-selected="index = active"
-        :data-index="index"
-        :data-value="row.id"
+        from:aria-selected="index = active"
+        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>

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

@@ -4,7 +4,7 @@
     <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" :data-value="value">
+  <li role="option" tabindex="-1" from:data-value="value">
     <span class="avatar" aria-hidden="true"><slot name="start"><template $value="initials"></template></slot></span>
     <span class="body"><span class="label"><slot></slot></span><span $if="detail" class="detail" $value="detail"></span></span>
   </li>

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

@@ -22,7 +22,7 @@
     <event name="highlight" type="object({ index: integer, value: string })"></event>
     <event name="select" type="object({ index: integer, value: string })"></event>
   </defs>
-  <div role="listbox" :hidden="not visible">
+  <div role="listbox" from:hidden="not visible">
     <div class="header"><slot name="header"></slot></div>
     <ul class="list" role="presentation">
       <li
@@ -30,11 +30,11 @@
         class="item"
         class:active="index = active"
         role="option"
-        :aria-selected="index = active"
-        :data-index="index"
-        :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 :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" $value="item.title"></span><span class="description" $value="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" :aria-label="label">
+    <div role="group" from:aria-label="label">
       <div class="heading" $value="label"></div>
       <ul role="presentation"><slot></slot></ul>
     </div>

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

@@ -7,8 +7,8 @@
     <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" :aria-disabled="disabled" :data-value="value" :data-keywords="keywords">
-    <span $if="icon" class="icon" aria-hidden="true"><ui-icon :name="icon"></ui-icon></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" $value="description"></span></span>
   </li>
   <style>

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

@@ -41,7 +41,7 @@
       ></prop>
     </event>
   </defs>
-  <div role="menu" :hidden="not open">
+  <div role="menu" from:hidden="not open">
     <div $if="swatches" class="section" role="none">
       <div class="heading" role="presentation">Cell background</div>
       <div class="swatches" role="group" aria-label="Cell background">
@@ -52,8 +52,8 @@
           class="swatch-button"
           class:selected="swatch.selected"
           role="menuitemradio"
-          :aria-checked="swatch.selected"
-          :data-action="swatch.action"
+          from:aria-checked="swatch.selected"
+          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>
@@ -68,12 +68,12 @@
           $each="item of section.items"
           $key="item.action"
           type="button"
-          :role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
-          :aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
+          from:role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
+          from:aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
           class:danger="item.danger"
-          :data-action="item.action"
+          from:data-action="item.action"
         >
-          <ui-icon :name="item.icon"></ui-icon>
+          <ui-icon from:name="item.icon"></ui-icon>
           <span $value="item.label"></span>
         </button>
       </div>

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

@@ -110,7 +110,7 @@
       type="object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
     ></event>
   </defs>
-  <div aria-label="Table controls" :hidden="not open">
+  <div aria-label="Table controls" from:hidden="not open">
     <div class="rows">
       <div
         $each="control of rows"
@@ -118,17 +118,17 @@
         class="control row"
         class:active="control.key = activeKey"
         style:top="control.offset"
-        :data-control-key="control.key"
+        from:data-control-key="control.key"
       >
         <span class="line" aria-hidden="true"></span>
         <span class="guide" data-ui-guide aria-hidden="true"></span>
         <button
           type="button"
           class="handle"
-          :data-ui-affordance="control.affordance"
-          :data-action="control.action"
-          :data-boundary-index="control.index"
-          :aria-label="control.label"
+          from:data-ui-affordance="control.affordance"
+          from:data-action="control.action"
+          from:data-boundary-index="control.index"
+          from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
           <span class="tooltip" role="tooltip" $value="control.label"></span>
@@ -142,17 +142,17 @@
         class="control col"
         class:active="control.key = activeKey"
         style:left="control.offset"
-        :data-control-key="control.key"
+        from:data-control-key="control.key"
       >
         <span class="line" aria-hidden="true"></span>
         <span class="guide" data-ui-guide aria-hidden="true"></span>
         <button
           type="button"
           class="handle"
-          :data-ui-affordance="control.affordance"
-          :data-action="control.action"
-          :data-boundary-index="control.index"
-          :aria-label="control.label"
+          from:data-ui-affordance="control.affordance"
+          from:data-action="control.action"
+          from:data-boundary-index="control.index"
+          from:aria-label="control.label"
         >
           <ui-icon name="plus"></ui-icon>
           <span class="tooltip" role="tooltip" $value="control.label"></span>
@@ -165,8 +165,8 @@
         class="selector row"
         style:top="hovered.rowOffset"
         data-action="select-row"
-        :data-row-index="hovered.rowIndex"
-        :data-column-index="hovered.columnIndex"
+        from:data-row-index="hovered.rowIndex"
+        from:data-column-index="hovered.columnIndex"
         title="Drag row to reorder; click for actions"
         aria-label="Row actions"
       >
@@ -177,8 +177,8 @@
         class="selector column"
         style:left="hovered.columnOffset"
         data-action="select-column"
-        :data-row-index="hovered.rowIndex"
-        :data-column-index="hovered.columnIndex"
+        from:data-row-index="hovered.rowIndex"
+        from:data-column-index="hovered.columnIndex"
         title="Drag column to reorder; click for actions"
         aria-label="Column actions"
       >
@@ -192,8 +192,8 @@
       style:left="active.menuLeft"
       style:top="active.menuTop"
       data-action="open-cell-menu"
-      :data-row-index="active.rowIndex"
-      :data-column-index="active.columnIndex"
+      from:data-row-index="active.rowIndex"
+      from:data-column-index="active.columnIndex"
       title="Cell actions"
       aria-label="Cell actions"
     >

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

@@ -51,7 +51,7 @@
       ></prop>
     </event>
   </defs>
-  <div role="toolbar" aria-label="Table actions" :hidden="not open">
+  <div role="toolbar" aria-label="Table actions" from:hidden="not open">
     <div $if="alignments" class="group" role="group" aria-label="Cell alignment">
       <button
         $each="item of alignments"
@@ -59,24 +59,24 @@
         type="button"
         class="icon-button"
         class:active="item.active"
-        :data-action="item.action"
-        :aria-label="item.label"
-        :title="item.label"
-        :aria-pressed="item.active"
+        from:data-action="item.action"
+        from:aria-label="item.label"
+        from:title="item.label"
+        from:aria-pressed="item.active"
       >
-        <ui-icon :name="item.action"></ui-icon>
+        <ui-icon from:name="item.action"></ui-icon>
       </button>
     </div>
     <div $if="alignments and structure" class="sep" aria-hidden="true"></div>
     <div $if="structure" class="group" role="group" aria-label="Table structure">
-      <button $each="item of structure" $key="item.action" type="button" :data-action="item.action">
-        <ui-icon :name="item.icon"></ui-icon>
+      <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>
       </button>
     </div>
     <div $if="(alignments or structure) and hasOverflow" class="sep" aria-hidden="true"></div>
     <div $if="hasOverflow" class="overflow">
-      <button type="button" class="more" data-action="toggle-overflow" aria-haspopup="menu" :aria-expanded="overflowOpen">
+      <button type="button" class="more" data-action="toggle-overflow" aria-haspopup="menu" from:aria-expanded="overflowOpen">
         <ui-icon name="table"></ui-icon>
         <span>Table options</span>
         <span class="chevron"><ui-icon name="chevron-down"></ui-icon></span>
@@ -92,8 +92,8 @@
               class="swatch-button"
               class:selected="swatch.selected"
               role="menuitemradio"
-              :aria-checked="swatch.selected"
-              :data-action="swatch.action"
+              from:aria-checked="swatch.selected"
+              from:data-action="swatch.action"
             >
               <span class="swatch" class:default="not swatch.color" style:--_swatch="swatch.color"></span>
               <span $value="swatch.label"></span>
@@ -106,12 +106,12 @@
             $each="item of section.items"
             $key="item.action"
             type="button"
-            :role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
-            :aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
+            from:role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
+            from:aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
             class:danger="item.danger"
-            :data-action="item.action"
+            from:data-action="item.action"
           >
-            <ui-icon :name="item.icon"></ui-icon>
+            <ui-icon from:name="item.icon"></ui-icon>
             <span $value="item.label"></span>
           </button>
         </div>