@threadlabs/looma 0.28.19 → 0.28.20

package/components/ui-editor-code-language/ui-editor-code-language.html

@@ -2,7 +2,7 @@
 <template component="ui-editor-code-language" controller="./ui-editor-code-language.js">
   <defs>
     <prop name="value" type="string" default="auto">The code block's language, or auto to detect it.</prop>
-    <prop name="languages" type="list(object({ value: string, label: string }))" default="[]"
+    <prop name="languages" type="list(object({ value: string, label: string }))"
     >The languages to offer, in order, each with its label; the editor lists Auto first and marks a saved language it cannot highlight.</prop>
     <event name="language" type="object">
       <prop name="value" required type="string"></prop>

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

@@ -31,14 +31,13 @@
   </defs>
   <div>
     <ui-text as="div" font="sans">
-      <!-- from:floating="true": a bare boolean converts to floating="" in Vue (HTML Next gap 2). data-image-*: the root reflects
-        props as data-<prop>, so data-placement would collide (gap 4). html-next #236 fixes both for the next alpha. -->
+      <!-- from:floating="true": alpha.53's Vue output still writes a bare boolean as floating="" (HTML Next gap 2). -->
       <ui-editor-toolbar from:floating="true" aria-label="Image actions">
         <ui-icon-button
           from:id="concat($base, '-block')"
           label="Image in line"
           size="sm"
-          data-image-placement="block"
+          data-placement="block"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'block')]"
           from:aria-pressed="concat($placement = 'block')"
         ><ui-icon name="panel-top"></ui-icon></ui-icon-button>
@@ -46,7 +45,7 @@
           from:id="concat($base, '-center')"
           label="Center image"
           size="sm"
-          data-image-placement="center"
+          data-placement="center"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'center')]"
           from:aria-pressed="concat($placement = 'center')"
         ><ui-icon name="align-center"></ui-icon></ui-icon-button>
@@ -54,7 +53,7 @@
           from:id="concat($base, '-wrap-left')"
           label="Wrap text to the right"
           size="sm"
-          data-image-placement="wrap-left"
+          data-placement="wrap-left"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'wrap-left')]"
           from:aria-pressed="concat($placement = 'wrap-left')"
         ><ui-icon name="panel-left"></ui-icon></ui-icon-button>
@@ -62,12 +61,12 @@
           from:id="concat($base, '-wrap-right')"
           label="Wrap text to the left"
           size="sm"
-          data-image-placement="wrap-right"
+          data-placement="wrap-right"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'wrap-right')]"
           from:aria-pressed="concat($placement = 'wrap-right')"
         ><ui-icon name="panel-right"></ui-icon></ui-icon-button>
         <ui-icon-button from:id="$base" label="Image description" size="sm" variant="ghost"><ui-icon name="file-text"></ui-icon></ui-icon-button>
-        <ui-icon-button from:id="concat($base, '-delete')" label="Delete image" size="sm" variant="ghost" data-image-action="delete"><ui-icon
+        <ui-icon-button from:id="concat($base, '-delete')" label="Delete image" size="sm" variant="ghost" data-action="delete"><ui-icon
             name="trash"
           ></ui-icon></ui-icon-button>
       </ui-editor-toolbar>
@@ -77,16 +76,16 @@
       <ui-tooltip from:for="concat($base, '-wrap-right')">Wrap text to the left</ui-tooltip>
       <ui-tooltip from:for="$base">Image description</ui-tooltip>
       <ui-tooltip from:for="concat($base, '-delete')">Delete image</ui-tooltip>
-      <ui-popover data-image-description from:for="$base" from:open="$describing" size="sm" aria-label="Image description">
+      <ui-popover $ref="description" from:for="$base" from:open="$describing" size="sm" aria-label="Image description">
         <form aria-label="Image description">
           <ui-stack gap="s">
             <ui-form-field>
               <label slot="label" from:for="concat($base, '-alt')">Alt text</label>
-              <ui-input data-image-alt from:id="concat($base, '-alt')" size="sm" from:value="$draft"></ui-input>
+              <ui-input $ref="alt" from:id="concat($base, '-alt')" size="sm" from:value="$draft"></ui-input>
             </ui-form-field>
             <ui-text size="xs" tone="secondary">Describe the image for people using a screen reader.</ui-text>
             <ui-cluster justify="end" gap="xs">
-              <ui-button type="button" variant="ghost" tone="neutral" size="sm" data-image-action="cancel">Cancel</ui-button>
+              <ui-button type="button" variant="ghost" tone="neutral" size="sm" data-action="cancel">Cancel</ui-button>
               <ui-button type="submit" variant="solid" size="sm">Save</ui-button>
             </ui-cluster>
           </ui-stack>

package/components/ui-editor-image-toolbar/ui-editor-image-toolbar.js

@@ -4,15 +4,13 @@ function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-image-toolbar") host.state.base = `ui-editor-image-toolbar-${Math.random().toString(36).slice(2, 11)}`;
   let target = null;
-  // Marked by attribute: the converted Vue component's host.refs has no entry for a nested component
-  // (HTML Next gap 1, fixed by html-next #236 for the next alpha).
-  const isDescription = (event) => event.target.hasAttribute?.("data-image-description") && element.contains(event.target);
+  const isDescription = (event) => event.target === host.refs.description;
   const onClick = (event) => {
-    const control = event.target.closest?.("[data-image-placement], [data-image-action]");
+    const control = event.target.closest?.("[data-placement], [data-action]");
     if (!control || !element.contains(control)) return;
-    if (control.dataset.imagePlacement) host.dispatch("placement", { placement: control.dataset.imagePlacement });
-    else if (control.dataset.imageAction === "delete") host.dispatch("delete", {});
-    else if (control.dataset.imageAction === "cancel") host.state.describing = false;
+    if (control.dataset.placement) host.dispatch("placement", { placement: control.dataset.placement });
+    else if (control.dataset.action === "delete") host.dispatch("delete", {});
+    else if (control.dataset.action === "cancel") host.state.describing = false;
   };
   const onOpen = (event) => {
     if (!isDescription(event)) return;
@@ -24,7 +22,7 @@ function connect(host) {
     if (isDescription(event)) host.state.describing = false;
   };
   const onInput = (event) => {
-    if (event.target.hasAttribute?.("data-image-alt")) host.state.draft = event.target.value;
+    if (event.target === host.refs.alt) host.state.draft = event.target.value;
   };
   const onSubmit = (event) => {
     event.preventDefault();

package/components/ui-editor-link-form/ui-editor-link-form.html

@@ -24,8 +24,7 @@
     <prop name="error" type="string" default="">A problem to show under the fields, announced as an alert.</prop>
     <prop name="status" type="string" default=""
     >A line above the results, such as Searching… or No results found., announced politely. Shown only for a search.</prop>
-    <!-- default="[]": without it the generated Vue v-for receives null (HTML Next item 7; html-next #236 treats a missing list as empty for the next alpha). -->
-    <prop name="results" type="list(object({ id: string, label: string, detail?: string }))" default="[]">The destinations a search found.</prop>
+    <prop name="results" type="list(object({ id: string, label: string, detail?: string }))">The destinations a search found.</prop>
     <prop name="selected" type="string" default="">The id of the chosen result, which shows a check.</prop>
     <state name="base" type="string" value="ui-editor-link-form"></state>
     <computed name="heading" from="{ true: 'Edit link', false: 'Add link' }[concat($existing)]"></computed>
@@ -95,7 +94,7 @@
             from:data-link-id="$result.id"
           >
             <ui-icon slot="leading" name="file-text"></ui-icon>
-            <!-- from:truncate="true": a bare boolean converts to truncate="" in Vue (HTML Next gap 2, fixed by html-next #236 for the next alpha). -->
+            <!-- from:truncate="true": alpha.53's Vue output still writes a bare boolean as truncate="" (HTML Next gap 2). -->
             <ui-text slot="title" as="strong" size="sm" weight="medium" from:truncate="true" from:title="$result.label">{$result.label}</ui-text>
             <ui-text $if="$result.detail" slot="meta" as="span" size="xs" tone="secondary" from:truncate="true" from:title="$result.detail"
             >{$result.detail}</ui-text>