@threadlabs/looma 0.25.7 → 0.26.0

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

@@ -41,39 +41,39 @@
       ></prop>
     </event>
   </defs>
-  <div role="menu" from:hidden="not open">
-    <div $if="swatches" class="section" role="none">
+  <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">
         <button
-          $each="swatch of swatches"
-          $key="swatch.action"
+          $each="swatch of $swatches"
+          $key="$swatch.action"
           type="button"
           class="swatch-button"
-          class:selected="swatch.selected"
+          class:selected="$swatch.selected"
           role="menuitemradio"
-          from:aria-checked="swatch.selected"
-          from: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" class:default="not $swatch.color" style:--_swatch="$swatch.color"></span>
           <span class="swatch-label">{$swatch.label}</span>
         </button>
       </div>
     </div>
-    <template $each="section of sections" $key="section.heading">
+    <template $each="section of $sections" $key="$section.heading">
       <div class="sep"></div>
       <div class="section" role="none">
         <div class="heading" role="presentation">{$section.heading}</div>
         <button
-          $each="item of section.items"
-          $key="item.action"
+          $each="item of $section.items"
+          $key="$item.action"
           type="button"
-          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"
+          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"
         >
-          <ui-icon from:name="item.icon"></ui-icon>
+          <ui-icon from:name="$item.icon"></ui-icon>
           <span>{$item.label}</span>
         </button>
       </div>

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

@@ -106,25 +106,25 @@
       type="object({ rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
     ></event>
   </defs>
-  <div aria-label="Table controls" from:hidden="not open">
+  <div aria-label="Table controls" from:hidden="not $open">
     <div class="rows">
       <div
-        $each="control of rows"
-        $key="control.key"
+        $each="control of $rows"
+        $key="$control.key"
         class="control row"
-        class:active="control.key = activeKey"
-        style:top="control.offset"
-        from:data-control-key="control.key"
+        class:active="$control.key = $activeKey"
+        style:top="$control.offset"
+        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"
-          from:data-ui-affordance="control.affordance"
-          from:data-action="control.action"
-          from:data-boundary-index="control.index"
-          from: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">{$control.label}</span>
@@ -133,36 +133,36 @@
     </div>
     <div class="cols">
       <div
-        $each="control of cols"
-        $key="control.key"
+        $each="control of $cols"
+        $key="$control.key"
         class="control col"
-        class:active="control.key = activeKey"
-        style:left="control.offset"
-        from:data-control-key="control.key"
+        class:active="$control.key = $activeKey"
+        style:left="$control.offset"
+        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"
-          from:data-ui-affordance="control.affordance"
-          from:data-action="control.action"
-          from:data-boundary-index="control.index"
-          from: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">{$control.label}</span>
         </button>
       </div>
     </div>
-    <template $if="hovered">
+    <template $if="$hovered">
       <button
         type="button"
         class="selector row"
-        style:top="hovered.rowOffset"
+        style:top="$hovered.rowOffset"
         data-action="select-row"
-        from:data-row-index="hovered.rowIndex"
-        from: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"
       >
@@ -171,10 +171,10 @@
       <button
         type="button"
         class="selector column"
-        style:left="hovered.columnOffset"
+        style:left="$hovered.columnOffset"
         data-action="select-column"
-        from:data-row-index="hovered.rowIndex"
-        from: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"
       >
@@ -182,14 +182,14 @@
       </button>
     </template>
     <button
-      $if="active"
+      $if="$active"
       type="button"
       class="cell-menu"
-      style:left="active.menuLeft"
-      style:top="active.menuTop"
+      style:left="$active.menuLeft"
+      style:top="$active.menuTop"
       data-action="open-cell-menu"
-      from:data-row-index="active.rowIndex"
-      from: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,67 +51,67 @@
       ></prop>
     </event>
   </defs>
-  <div role="toolbar" aria-label="Table actions" from:hidden="not open">
-    <div $if="alignments" class="group" role="group" aria-label="Cell alignment">
+  <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"
-        $key="item.action"
+        $each="item of $alignments"
+        $key="$item.action"
         type="button"
         class="icon-button"
-        class:active="item.active"
-        from:data-action="item.action"
-        from:aria-label="item.label"
-        from:title="item.label"
-        from:aria-pressed="item.active"
+        class:active="$item.active"
+        from:data-action="$item.action"
+        from:aria-label="$item.label"
+        from:title="$item.label"
+        from:aria-pressed="$item.active"
       >
-        <ui-icon from: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" from:data-action="item.action">
-        <ui-icon from:name="item.icon"></ui-icon>
+    <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" from:data-action="$item.action">
+        <ui-icon from:name="$item.icon"></ui-icon>
         <span>{$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" from:aria-expanded="overflowOpen">
+    <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" 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>
       </button>
-      <div $if="overflowOpen" class="menu" role="menu" aria-label="More table actions">
-        <div $if="swatches" class="menu-section" role="none">
+      <div $if="$overflowOpen" class="menu" role="menu" aria-label="More table actions">
+        <div $if="$swatches" class="menu-section" role="none">
           <div class="menu-heading" role="presentation">Background</div>
           <div class="swatches" role="group" aria-label="Cell background">
             <button
-              $each="swatch of swatches"
-              $key="swatch.action"
+              $each="swatch of $swatches"
+              $key="$swatch.action"
               type="button"
               class="swatch-button"
-              class:selected="swatch.selected"
+              class:selected="$swatch.selected"
               role="menuitemradio"
-              from:aria-checked="swatch.selected"
-              from: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" class:default="not $swatch.color" style:--_swatch="$swatch.color"></span>
               <span>{$swatch.label}</span>
             </button>
           </div>
         </div>
-        <div $each="section of sections" $key="section.heading" class="menu-section divided" role="none">
+        <div $each="section of $sections" $key="$section.heading" class="menu-section divided" role="none">
           <div class="menu-heading" role="presentation">{$section.heading}</div>
           <button
-            $each="item of section.items"
-            $key="item.action"
+            $each="item of $section.items"
+            $key="$item.action"
             type="button"
-            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"
+            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"
           >
-            <ui-icon from:name="item.icon"></ui-icon>
+            <ui-icon from:name="$item.icon"></ui-icon>
             <span>{$item.label}</span>
           </button>
         </div>

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

@@ -6,7 +6,7 @@
       widths.</prop>
     <prop name="label" type="string" default="">The button's accessible name. The button usually holds only an icon, so name the action it performs.</prop>
   </defs>
-  <button type="button" from:aria-label="label" from:disabled="disabled"><slot></slot></button>
+  <button type="button" from:aria-label="$label" from:disabled="$disabled"><slot></slot></button>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-floating-action-button-inset-block-end {

package/components/ui-grid/ui-grid.html

@@ -9,7 +9,7 @@
     <prop name="columns" type="integer"
     >Maximum columns when there is room. Omit for no cap. The grid still drops columns as its container narrows; it never forces a fixed column count.</prop>
   </defs>
-  <div style:--_grid-column-cap="columns"><slot></slot></div>
+  <div style:--_grid-column-cap="$columns"><slot></slot></div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-grid-gap {

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

@@ -79,25 +79,25 @@
         'user-round': [{ tag: 'circle', cx: '12', cy: '8', r: '5' }, { tag: 'path', d: 'M20 21a8 8 0 0 0-16 0' }],
         'users': [{ tag: 'path', d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }, { tag: 'path', d: 'M16 3.128a4 4 0 0 1 0 7.744' }, { tag: 'path', d: 'M22 21v-2a4 4 0 0 0-3-3.87' }, { tag: 'circle', cx: '9', cy: '7', r: '4' }],
         'x': [{ tag: 'path', d: 'M18 6 6 18' }, { tag: 'path', d: 'm6 6 12 12' }],
-      }[name]"
+      }[$name]"
     ></computed>
   </defs>
   <span aria-hidden="true">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false">
-      <g $each="shape of shapes">
-        <path $if="shape.tag = 'path'" from:d="shape.d"></path>
-        <circle $if="shape.tag = 'circle'" from:cx="shape.cx" from:cy="shape.cy" from:r="shape.r"></circle>
+      <g $each="shape of $shapes">
+        <path $if="$shape.tag = 'path'" from:d="$shape.d"></path>
+        <circle $if="$shape.tag = 'circle'" from:cx="$shape.cx" from:cy="$shape.cy" from:r="$shape.r"></circle>
         <rect
-          $if="shape.tag = 'rect'"
-          from:x="shape.x"
-          from:y="shape.y"
-          from:width="shape.width"
-          from:height="shape.height"
-          from:rx="shape.rx"
-          from:ry="shape.ry"
+          $if="$shape.tag = 'rect'"
+          from:x="$shape.x"
+          from:y="$shape.y"
+          from:width="$shape.width"
+          from:height="$shape.height"
+          from:rx="$shape.rx"
+          from:ry="$shape.ry"
         >
         </rect>
-        <line $if="shape.tag = 'line'" from:x1="shape.x1" from:y1="shape.y1" from:x2="shape.x2" from:y2="shape.y2"></line>
+        <line $if="$shape.tag = 'line'" from:x1="$shape.x1" from:y1="$shape.y1" from:x2="$shape.x2" from:y2="$shape.y2"></line>
       </g>
     </svg>
   </span>

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

@@ -23,14 +23,14 @@
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
   <button
-    from:disabled="disabled"
+    from:disabled="$disabled"
     type="button"
-    from:aria-label="label"
-    from:data-match-button="matchButton"
-    from:aria-disabled="{ true: 'true', false: null }[concat(loading or pending)]"
-    from:aria-busy="loading or pending"
+    from:aria-label="$label"
+    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>
+    <ui-spinner $if="$loading or $pending" size="sm"></ui-spinner>
     <span class="content"><slot></slot></span>
   </button>
   <style>

package/components/ui-image/ui-image.html

@@ -20,8 +20,8 @@
   </defs>
   <figure>
     <div class="frame" $ref="frame">
-      <slot name="media"><img from:src="src" from:alt="alt" from:width="width" from:height="height"></slot>
-      <div class="handles" from:hidden="not (selected and resizable)">
+      <slot name="media"><img from:src="$src" from:alt="$alt" from:width="$width" from:height="$height"></slot>
+      <div class="handles" from:hidden="not ($selected and $resizable)">
         <button type="button" class="handle" data-corner="top-left" aria-label="Resize image from top left"></button>
         <button type="button" class="handle" data-corner="top-right" aria-label="Resize image from top right"></button>
         <button type="button" class="handle" data-corner="bottom-left" aria-label="Resize image from bottom left"></button>

package/components/ui-input/ui-input.html

@@ -38,7 +38,7 @@
       coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. Change it after render through this option; the element's size property is
       the native one.</prop>
   </defs>
-  <input from:type="type" from:value="value" from:disabled="disabled" from:readonly="readonly" from:required="required" from:aria-invalid="invalid">
+  <input from:type="$type" from:value="$value" from:disabled="$disabled" from:readonly="$readonly" from:required="$required" from:aria-invalid="$invalid">
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. An Input
        Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */

package/components/ui-list/ui-list.html

@@ -11,7 +11,7 @@
       padding, for a short list of facts inside other content, such as the features a plan includes.</prop>
   </defs>
   <template $match>
-    <ol $when="as = 'ol'"><slot></slot></ol>
+    <ol $when="$as = 'ol'"><slot></slot></ol>
     <ul $else role="list"><slot></slot></ul>
   </template>
   <style>

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

@@ -15,7 +15,7 @@
     >Gives an item a quiet accent wash without changing its text or announcing selection. Several items may be highlighted, such as new messages. Describe the
       reason in the item's text; use current only for the current destination.</prop>
   </defs>
-  <li from:aria-current="current">
+  <li from:aria-current="$current">
     <span class="leading"><slot name="leading"></slot></span>
     <span class="content">
       <span class="title"><slot></slot></span>

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

@@ -25,26 +25,26 @@
   </defs>
   <div
     role="listbox"
-    from:tabindex="{ true: '-1', false: '0' }[concat(disabled)]"
-    from:aria-multiselectable="multiple"
-    from:aria-disabled="disabled"
-    from:aria-required="required"
-    from:aria-invalid="invalid or validationError"
-    style:--_rows="rows"
+    from:tabindex="{ true: '-1', false: '0' }[concat($disabled)]"
+    from:aria-multiselectable="$multiple"
+    from:aria-disabled="$disabled"
+    from:aria-required="$required"
+    from:aria-invalid="$invalid or $validationError"
+    style:--_rows="$rows"
   >
     <ui-scroll-area class="choices" $ref="choices">
       <div
-        $each="choice of choices"
-        $key="choice.index"
+        $each="choice of $choices"
+        $key="$choice.index"
         class="option"
-        class:active="choice.index = active"
+        class:active="$choice.index = $active"
         role="option"
         data-ui-choice-option
-        from:data-multiple="multiple"
-        from:id="concat(uid, '-option-', choice.index)"
-        from:data-index="choice.index"
-        from:aria-selected="choice.selected"
-        from:aria-disabled="choice.disabled"
+        from:data-multiple="$multiple"
+        from:id="concat($uid, '-option-', $choice.index)"
+        from:data-index="$choice.index"
+        from:aria-selected="$choice.selected"
+        from:aria-disabled="$choice.disabled"
       >
         <span>{$choice.label}</span>
       </div>
@@ -52,25 +52,25 @@
     <select
       class="fallback"
       $ref="options"
-      from:size="rows"
-      from:multiple="multiple"
-      from:disabled="disabled"
-      from:required="required"
-      from:name="name"
+      from:size="$rows"
+      from:multiple="$multiple"
+      from:disabled="$disabled"
+      from:required="$required"
+      from:name="$name"
       aria-label="Choices"
     >
       <slot></slot>
     </select>
-    <template $if="name and not disabled">
-      <input $each="selected of selection" type="hidden" from:name="name" from:value="selected">
+    <template $if="$name and not $disabled">
+      <input $each="selected of $selection" type="hidden" from:name="$name" from:value="$selected">
     </template>
     <input
       class="validity"
       $ref="validity"
       type="checkbox"
-      from:required="required and not hasSelection and not disabled"
-      from:checked="hasSelection"
-      from:disabled="disabled"
+      from:required="$required and not $hasSelection and not $disabled"
+      from:checked="$hasSelection"
+      from:disabled="$disabled"
       aria-hidden="true"
       tabindex="-1"
     >

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

@@ -2,8 +2,8 @@
   <defs>
     <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">{$label}</div>
+  <div role="group" from:aria-label="$label">
+    <div class="heading" $if="$label">{$label}</div>
     <slot></slot>
   </div>
   <style>

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

@@ -20,26 +20,26 @@
   </defs>
   <template $match>
     <a
-      $when="href and type = 'action'"
+      $when="$href and $type = 'action'"
       role="menuitem"
       tabindex="-1"
-      from:aria-disabled="disabled"
-      from:data-value="value"
-      from:href="{ true: null, false: href }[concat(disabled)]"
+      from:aria-disabled="$disabled"
+      from:data-value="$value"
+      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>
     </a>
     <div
       $else
-      from:role="{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[type]"
-      from:aria-checked="{ action: null, checkbox: internalChecked, radio: internalChecked }[type]"
+      from:role="{ action: 'menuitem', checkbox: 'menuitemcheckbox', radio: 'menuitemradio' }[$type]"
+      from:aria-checked="{ action: null, checkbox: $internalChecked, radio: $internalChecked }[$type]"
       tabindex="-1"
-      from:aria-disabled="disabled"
-      from:data-value="value"
+      from:aria-disabled="$disabled"
+      from:data-value="$value"
     >
       <span class="indicator" aria-hidden="true">
-        <ui-icon $if="(type = 'checkbox' or type = 'radio') and internalChecked" name="check"></ui-icon>
+        <ui-icon $if="($type = 'checkbox' or $type = 'radio') and $internalChecked" name="check"></ui-icon>
       </span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>

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

@@ -21,19 +21,19 @@
     >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 }[concat(max > 0)]"></computed>
+    <computed name="amount" from="clamp(0, $value, $max)"></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($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)]"
+    from:aria-valuemax="$max"
+    from:aria-valuenow="$amount"
+    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="concat(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

@@ -22,11 +22,11 @@
   </defs>
   <template $match>
     <a
-      $when="as = 'a'"
-      from:href="href"
-      from:target="target"
-      from:rel="rel"
-      from:aria-current="{ true: 'page', false: null, page: 'page', step: 'step', location: 'location' }[concat(current)]"
+      $when="$as = 'a'"
+      from:href="$href"
+      from:target="$target"
+      from:rel="$rel"
+      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' }[concat(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/ui-radio.html

@@ -24,7 +24,7 @@
     </event>
   </defs>
   <label>
-    <input type="radio" $ref="input" .checked="internalChecked" from:disabled="disabled" from:required="required" from:value="value" from:name="name">
+    <input type="radio" $ref="input" .checked="$internalChecked" from:disabled="$disabled" from:required="$required" from:value="$value" from:name="$name">
     <span class="text">
       <span class="label"><slot></slot></span>
       <span class="description" $ref="description" aria-hidden="true"><slot name="description"></slot></span>

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

@@ -30,7 +30,7 @@
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
   </defs>
-  <fieldset role="radiogroup" from:aria-required="required" from:aria-invalid="invalid" from:disabled="disabled">
+  <fieldset role="radiogroup" from:aria-required="$required" from:aria-invalid="$invalid" from:disabled="$disabled">
     <legend>{$label}</legend>
     <slot></slot>
   </fieldset>

package/components/ui-search-result-row/ui-search-result-row.html

@@ -8,7 +8,7 @@
     >Marks the row as the current result: it gets the hover surface and aria-current="true", which assistive technology announces as current. Set it on one row
       at a time, such as the result the arrow keys have moved to.</prop>
   </defs>
-  <button type="button" from:disabled="disabled" from:aria-current="selected">
+  <button type="button" from:disabled="$disabled" from:aria-current="$selected">
     <span class="leading"><slot name="leading"></slot></span>
     <span class="content">
       <span class="title"><slot name="title"></slot></span>