@threadlabs/looma 0.23.15 → 0.23.17

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

@@ -30,7 +30,7 @@
     <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" $value="initials"></span>
+      <span from:hidden="showGlyph">{$initials}</span>
       <span from:hidden="not showGlyph"><ui-icon name="user-round"></ui-icon></span>
     </span>
   </span>

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

@@ -18,9 +18,7 @@
   </defs>
   <div role="group" from:aria-label="label">
     <slot></slot>
-    <span class="overflow" $ref="overflow" role="img" from:hidden="not overflowCount" from:aria-label="overflowAnnouncement"><template
-        $value="format('+%s', overflowCount)"
-      ></template></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 }[format('%s', 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-button/ui-button.html

@@ -39,12 +39,12 @@
   <template $match>
     <a
       $when="as = 'a'"
-      from:href="{ true: null, false: href }[format('%s', disabled or loading or pending)]"
+      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 }[format('%s', disabled or loading or pending)]"
+      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 }[format('%s', (loading or pending) and not disabled)]"
+      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>
       <slot></slot>
@@ -53,7 +53,7 @@
       $else
       from:type="type"
       from:disabled="disabled"
-      from:aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
+      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>

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

@@ -371,7 +371,7 @@
     <method name="focusInput" export="focusInput" returns="promise(undefined)"></method>
   </defs>
   <div>
-    <label from:for="format('%s-input', uid)" class:sr-only="labelVisibility = 'sr-only'"><template $value="label"></template><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">
@@ -386,18 +386,18 @@
               tabindex="-1"
               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)"
+              from:aria-label="concat(item.label, ', press Delete or Backspace to remove')"
             >
-              <slot from:name="format('item-%s', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
+              <slot from:name="concat('item-', item.id)"><ui-badge $value="item.label"></ui-badge></slot>
             </button>
           </template>
           <input
             $ref="input"
-            from:id="format('%s-input', uid)"
+            from:id="concat(uid, '-input')"
             role="combobox"
             aria-autocomplete="list"
             autocomplete="off"
-            from:aria-controls="format('%s-listbox', uid)"
+            from:aria-controls="concat(uid, '-listbox')"
             from:aria-expanded="expanded"
             from:aria-invalid="invalid or validationStatus = 'error'"
             from:aria-busy="loading or validationStatus = 'pending'"
@@ -429,7 +429,7 @@
           data-combobox-action="disclosure"
           tabindex="-1"
           aria-label="Show suggestions"
-          from:aria-controls="format('%s-listbox', uid)"
+          from:aria-controls="concat(uid, '-listbox')"
           from:disabled="disabled or readonly"
         >
           <svg
@@ -446,7 +446,7 @@
           </svg>
         </button>
       </div>
-      <button $if="help" class="help" from:id="format('%s-help', uid)" 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"
@@ -463,11 +463,9 @@
         </svg>
       </button>
     </div>
-    <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>
+    <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="format('%s-listbox', uid)" from:aria-label="format('%s suggestions', label)" from:aria-busy="loading">
+      <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
@@ -478,23 +476,23 @@
             role="option"
             data-ui-choice-option
             from:data-multiple="multiple"
-            from:id="format('%s-option-%s', uid, row.index)"
+            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="format('option-%s', row.id)">
+            <slot from:name="concat('option-', row.id)">
               <span $if="row.detail" class="detail">
                 <span class="line">
-                  <span class="primary" from:id="format('%s-option-%s-label', uid, row.index)" $value="row.label"></span>
+                  <span class="primary" from:id="concat(uid, '-option-', row.index, '-label')" $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)"
+                      from:id="concat(uid, '-option-', row.index, '-tag')"
                       $value="row.tag.label"
                     ></span></ui-badge>
                 </span>
-                <span $if="row.description" class="description" from:id="format('%s-option-%s-description', uid, row.index)" $value="row.description"></span>
+                <span $if="row.description" class="description" from:id="concat(uid, '-option-', row.index, '-description')" $value="row.description"></span>
               </span>
               <span $if="not row.detail" class="primary" $value="row.label"></span>
             </slot>
@@ -508,20 +506,20 @@
           data-ui-choice-option
           from:data-multiple="multiple"
           aria-selected="false"
-          from:id="format('%s-option-%s', uid, createIndex)"
+          from:id="concat(uid, '-option-', createIndex)"
           from:data-index="createIndex"
-          $value="format('Create “%s”', raw)"
+          $value="concat('Create “', raw, '”')"
         >
         </div>
-        <div $if="message" class="message" $value="message"></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="format('%s-validation', uid)" from:hidden="not validation.issues.length">
+    <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>
-    <div class="sr-only" role="status" aria-live="polite" aria-atomic="true" $value="statusText"></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>
   </div>
   <style>

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

@@ -3,7 +3,7 @@
     <prop name="term" type="string" default="">What the value is, such as "Invited by". The value is the item's content.</prop>
   </defs>
   <div>
-    <dt><template $value="term"></template></dt>
+    <dt>{$term}</dt>
     <dd><slot></slot></dd>
   </div>
   <style>

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

@@ -37,7 +37,7 @@
   </defs>
   <dialog from:aria-label="accessibleLabel">
     <header>
-      <h2 class="title" $if="label" $value="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

@@ -47,7 +47,7 @@
     <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"><template $value="summary"></template></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>

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

@@ -38,8 +38,8 @@
   <div>
     <div class="field">
       <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>
+        <span class="text">{$internalValue}</span>
+        <span $if="hint" class="hint" aria-hidden="true">{$hint}</span>
       </button>
       <input
         class="input"
@@ -53,8 +53,8 @@
       >
     </div>
     <div $if="actions" class="actions">
-      <button class="save" type="button" $value="saveLabel"></button>
-      <button class="cancel" type="button" $value="cancelLabel"></button>
+      <button class="save" type="button">{$saveLabel}</button>
+      <button class="cancel" type="button">{$cancelLabel}</button>
     </div>
   </div>
   <style>

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

@@ -16,7 +16,7 @@
     <event name="insert" type="object({ rows: integer, cols: integer, withHeaderRow: boolean })"></event>
   </defs>
   <div from:hidden="not open">
-    <p class="hint" $value="hint"></p>
+    <p class="hint">{$hint}</p>
     <div class="grid" $ref="grid" role="group" aria-label="Table dimensions" style:--_rows="rows" style:--_cols="cols">
       <button
         $each="cell of cells"

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

@@ -24,11 +24,11 @@
   </defs>
   <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>
+    <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="format('%s-option-%s', prefix, index)"
+        from:id="concat(prefix, '-option-', index)"
         class="item"
         class:active="index = active"
         role="option"

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

@@ -5,8 +5,8 @@
     <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">
-    <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>
+    <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>
   </li>
   <style>
     :host {

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

@@ -4,7 +4,7 @@
   </defs>
   <li role="presentation">
     <div role="group" from:aria-label="label">
-      <div class="heading" $value="label"></div>
+      <div class="heading">{$label}</div>
       <ul role="presentation"><slot></slot></ul>
     </div>
   </li>

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

@@ -9,7 +9,7 @@
   </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" $value="description"></span></span>
+    <span class="body"><span class="title"><slot></slot></span><span $if="description" class="description">{$description}</span></span>
   </li>
   <style>
     :host {

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

@@ -68,8 +68,8 @@
           $each="item of section.items"
           $key="item.action"
           type="button"
-          from:role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
-          from:aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
+          from:role="{ true: 'menuitemcheckbox', false: 'menuitem' }[concat(item.checkable)]"
+          from:aria-checked="{ true: item.checked, false: null }[concat(item.checkable)]"
           class:danger="item.danger"
           from:data-action="item.action"
         >

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

@@ -106,8 +106,8 @@
             $each="item of section.items"
             $key="item.action"
             type="button"
-            from:role="{ true: 'menuitemcheckbox', false: 'menuitem' }[format('%s', item.checkable)]"
-            from:aria-checked="{ true: item.checked, false: null }[format('%s', item.checkable)]"
+            from:role="{ true: 'menuitemcheckbox', false: 'menuitem' }[concat(item.checkable)]"
+            from:aria-checked="{ true: item.checked, false: null }[concat(item.checkable)]"
             class:danger="item.danger"
             from:data-action="item.action"
           >

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

@@ -11,6 +11,9 @@
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit
       area of at least 44px.</prop>
+    <prop name="matchButton" type="boolean" default="false"
+    >Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row's height, including
+      touch-sized controls. Leave it off for compact toolbar and inline icon buttons.</prop>
     <prop name="variant" type="keyword" values="ghost, outline, solid" default="ghost"
     >Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the
       accent colour, for the one primary action in a group.</prop>
@@ -23,7 +26,8 @@
     from:disabled="disabled"
     type="button"
     from:aria-label="label"
-    from:aria-disabled="{ true: 'true', false: null }[format('%s', loading or pending)]"
+    from:data-match-button="matchButton"
+    from:aria-disabled="{ true: 'true', false: null }[concat(loading or pending)]"
     from:aria-busy="loading or pending"
   >
     <ui-spinner $if="loading or pending" size="sm"></ui-spinner>
@@ -245,6 +249,29 @@
       min-block-size: var(--ui-icon-button-size, var(--_size));
     }
 
+    /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+    :host-state([matchButton]) {
+      --_size: var(--ui-control-size-md);
+      block-size: auto;
+      align-self: stretch;
+    }
+
+    :host-state([matchButton][size="sm"]) {
+      --_size: var(--ui-control-size-sm);
+    }
+
+    :host-state([matchButton][size="lg"]) {
+      --_size: var(--ui-control-size-lg);
+    }
+
+    @media (pointer: coarse) {
+      :host-state([matchButton]) {
+        inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+      }
+    }
+
     :host-state([round]) {
       border-radius: var(--ui-radius-round);
     }

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

@@ -25,7 +25,7 @@
   </defs>
   <div
     role="listbox"
-    from:tabindex="{ true: '-1', false: '0' }[format('%s', disabled)]"
+    from:tabindex="{ true: '-1', false: '0' }[concat(disabled)]"
     from:aria-multiselectable="multiple"
     from:aria-disabled="disabled"
     from:aria-required="required"
@@ -41,7 +41,7 @@
         role="option"
         data-ui-choice-option
         from:data-multiple="multiple"
-        from:id="format('%s-option-%s', uid, choice.index)"
+        from:id="concat(uid, '-option-', choice.index)"
         from:data-index="choice.index"
         from:aria-selected="choice.selected"
         from:aria-disabled="choice.disabled"

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

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

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

@@ -25,7 +25,7 @@
       tabindex="-1"
       from:aria-disabled="disabled"
       from:data-value="value"
-      from:href="{ true: null, false: href }[format('%s', disabled)]"
+      from:href="{ true: null, false: href }[concat(disabled)]"
     >
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>

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

@@ -18,23 +18,22 @@
     <prop name="label" type="string" default=""
     >What the meter measures, as its accessible name ("Collected"). Leave it empty only when aria-labelledby names the meter from visible text.</prop>
     <prop name="valueText" type="string" default=""
-    >The value as assistive technology reads it ("$750 of $1,240 collected", "3 of 5 done, overdue"). Empty reads the percentage.</prop>
+    >The value as assistive technology reads it ("$750 of $1,240 collected", "3 of 5 done, overdue"). Empty reads the whole percentage in the current
+      locale.</prop>
     <!-- Derived as it renders, so every render path, a server render included, draws the bar and states its value without JavaScript. -->
     <computed name="amount" from="clamp(0, value, max)"></computed>
-    <computed name="percent" from="{ true: amount / max * 100, false: 0 }[format('%s', max > 0)]"></computed>
-    <!-- percent rounded half up, for the text: round() on a derived number does not compile to Vue yet. -->
-    <computed name="whole" from="percent + 0.5 - (percent + 0.5) % 1"></computed>
+    <computed name="percent" from="{ true: amount / max * 100, false: 0 }[concat(max > 0)]"></computed>
   </defs>
   <span
     role="meter"
     aria-valuemin="0"
     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)]"
+    from:aria-valuetext="{ true: valueText, false: format($percent / 100, 'percent', { maximumFractionDigits: 0 }) }[concat(valueText != '')]"
+    from:aria-label="{ true: label, false: null }[concat(label != '')]"
+    from:data-ui-meter-segments="{ true: segments, false: null }[concat(segments > 1)]"
   >
-    <span class="fill" style:inline-size="format('%s%', percent)"></span>
+    <span class="fill" style:inline-size="concat(percent, '%')"></span>
   </span>
   <style>
     /* How far along something is: a track, filled from the start in the tone's colour. The track is a

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

@@ -26,7 +26,7 @@
       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)]"
+      from:aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[concat(current)]"
     >
       <span class="indicator" aria-hidden="true"></span>
       <span class="leading"><slot name="leading"></slot></span>
@@ -36,7 +36,7 @@
       </span>
       <span class="trailing"><slot name="trailing"></slot></span>
     </a>
-    <button $else type="button" from: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' }[concat(current)]">
       <span class="indicator" aria-hidden="true"></span>
       <span class="leading"><slot name="leading"></slot></span>
       <span class="content">

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

@@ -31,7 +31,7 @@
     </event>
   </defs>
   <fieldset role="radiogroup" from:aria-required="required" from:aria-invalid="invalid" from:disabled="disabled">
-    <legend><template $value="label"></template></legend>
+    <legend>{$label}</legend>
     <slot></slot>
   </fieldset>
   <style>

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"><template $value="heading"></template></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-spinner/ui-spinner.html

@@ -7,10 +7,10 @@
   </defs>
   <span
     class="ring"
-    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 != '')]"
+    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-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' }[format('%s', kind = 'error')]">
+  <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"><template $value="heading"></template></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-tabs/ui-tabs.html

@@ -30,7 +30,7 @@
           $key="tab.id"
           type="button"
           role="tab"
-          from:id="format('%s-tab', tab.id)"
+          from:id="concat(tab.id, '-tab')"
           from:value="tab.id"
           from:aria-controls="tab.id"
           from:aria-selected="tab.id = internalValue"

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

@@ -39,7 +39,7 @@
     >
       <span class="message" $value="toast.message"></span>
       <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-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-tree-item/ui-tree-item.html

@@ -72,7 +72,7 @@
         $ref="dragHandle"
         type="button"
         draggable="true"
-        from:aria-label="{ true: format('Cancel moving %s', label), false: format('Drag %s to reorder', label) }[format('%s', moving)]"
+        from:aria-label="{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]"
       >
         <svg
           aria-hidden="true"
@@ -101,10 +101,10 @@
           tabindex="-1"
           from:checked="selected"
           from:disabled="disabled"
-          from:aria-label="format('Select %s', label)"
+          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"><template $value="label"></template></slot></span></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>
         <span $else><slot name="actions"></slot></span>