@threadlabs/looma 0.39.5 → 0.40.0

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

@@ -29,8 +29,8 @@
       tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field
       variant always uses neutral field colors.</prop>
     <prop name="disabled" type="boolean" default="false"
-    >Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as="a" with href) drops its
-      href and states aria-disabled="true" instead, because a link has no native disabled state.</prop>
+    >Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (with href) drops its href and
+      states aria-disabled="true" instead, because a link has no native disabled state.</prop>
     <prop name="loading" type="boolean" default="false"
     >Keeps the action focusable and its label visible while work is in progress. It shows a decorative spinner, states aria-disabled and aria-busy, and prevents
       activation or form submission until cleared.</prop>
@@ -41,12 +41,10 @@
     <prop name="type" type="keyword" values="button, submit, reset" default="button"
     >The button's type, as on a native button. button by default, so it never submits a form by accident. A link has no type.</prop>
     <prop name="href" type="string"
-    >The link's destination. Pair it with as="a" so the button renders as a real link that navigates. A disabled link drops its href and states
-      aria-disabled="true", so it cannot be followed.</prop>
-    <prop name="target" type="string">Where a link opens, as on a native link. Only meaningful with as="a".</prop>
-    <prop name="rel" type="string">The link's relationship to its destination, as on a native link. Only meaningful with as="a".</prop>
-    <prop name="as" type="keyword" values="button, a" default="button"
-    >The native element the button renders: a button, or a link (a) that navigates to href.</prop>
+    >The link's destination. Supplying href automatically renders a native link instead of a button, including an empty href for the current document. A
+      disabled link drops its href and states aria-disabled="true", so it cannot be followed.</prop>
+    <prop name="target" type="string">Where a link opens, as on a native link. Only meaningful with href.</prop>
+    <prop name="rel" type="string">The link's relationship to its destination, as on a native link. Only meaningful with href.</prop>
     <!-- Each root carries only its own attributes: a link has no type or disabled, and a disabled link
          loses its href and states aria-disabled instead. The language has no conditional expression, so a
          table keyed by a boolean's text picks each value, and null leaves the attribute off. -->
@@ -55,7 +53,7 @@
     <a
       from:data-appearance="$appearance"
       from:data-tone="$colorTone"
-      $when="$appearance = 'card' and $as = 'a'"
+      $when="$appearance = 'card' and $href != null"
       from:href="{ true: null, false: $href }[concat($disabled or $loading or $pending)]"
       from:target="$target"
       from:rel="$rel"
@@ -87,7 +85,7 @@
     <a
       from:data-appearance="$appearance"
       from:data-tone="$colorTone"
-      $when="$as = 'a'"
+      $when="$href != null"
       from:href="{ true: null, false: $href }[concat($disabled or $loading or $pending)]"
       from:target="$target"
       from:rel="$rel"

package/components/ui-button/ui-button.js

@@ -5,6 +5,9 @@ export function connect(host) {
     event.preventDefault();
     event.stopImmediatePropagation();
   };
-  host.element.addEventListener("click", onClick, true);
-  return () => host.element.removeEventListener("click", onClick, true);
+  return host.effect(() => {
+    const element = host.element;
+    element.addEventListener("click", onClick, true);
+    return () => element.removeEventListener("click", onClick, true);
+  });
 }

package/components/ui-callout/ui-callout.html

@@ -118,7 +118,7 @@
       --_ui-callout-icon: var(--ui-callout-icon);
       --_ui-callout-icon-size: var(--ui-callout-icon-size);
 
-      --_callout-surface: color-mix(in srgb, var(--_callout-border) 19%, var(--ui-surface-default));
+      --_callout-surface: oklch(from var(--_callout-border) l c h / 10%);
       --_ui-selection-context-surface: light-dark(
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l - 0.045) calc(max(c, min(0.045, c * 3))) h),
         oklch(from var(--ui-callout-surface, var(--_callout-surface)) calc(l + 0.045) calc(max(c, min(0.045, c * 3))) h)

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

@@ -32,7 +32,6 @@
         <template $if="$openHref != ''">
           <ui-button
             from:id="concat($base, '-open')"
-            as="a"
             variant="ghost"
             tone="neutral"
             size="sm"

package/components/ui-pagination/ui-pagination.html

@@ -37,8 +37,7 @@
         tone="neutral"
         from:size="$size"
         from:disabled="$disabled or not $hasPrevious or $page <= 1"
-        from:as="{ true: 'a', false: 'button' }[concat($previousHref != '')]"
-        from:href="$previousHref"
+        from:href="{ true: $previousHref, false: null }[concat($previousHref != '')]"
         from:aria-label="$previousLabel"
         from:data-pagination-page="$page - 1"
       ><ui-icon name="chevron-left"></ui-icon></ui-button>
@@ -50,8 +49,7 @@
           from:tone="{ true: 'accent', false: 'neutral' }[concat($item.value = $page)]"
           from:size="$size"
           from:disabled="$disabled"
-          from:as="{ true: 'a', false: 'button' }[concat(default($item.href, '') != '')]"
-          from:href="$item.href"
+          from:href="{ true: $item.href, false: null }[concat(default($item.href, '') != '')]"
           from:data-pagination-page="$item.value"
           from:aria-label="concat($pageLabel, ' ', format($item.value, 'number'))"
           from:aria-current="{ true: 'page', false: null }[concat($item.value = $page)]"
@@ -63,8 +61,7 @@
         tone="neutral"
         from:size="$size"
         from:disabled="$disabled or not $hasNext"
-        from:as="{ true: 'a', false: 'button' }[concat($nextHref != '')]"
-        from:href="$nextHref"
+        from:href="{ true: $nextHref, false: null }[concat($nextHref != '')]"
         from:aria-label="$nextLabel"
         from:data-pagination-page="$page + 1"
       ><ui-icon name="chevron-right"></ui-icon></ui-button>