@threadlabs/looma 0.39.6 → 0.41.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-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>

package/components/ui-site-header/ui-site-header.html

@@ -0,0 +1,164 @@
+<template component="ui-site-header">
+  <defs>
+    <prop name="label" type="string" default="Main">Accessible name for the primary navigation region.</prop>
+    <prop name="sticky" type="boolean" default="false">Keeps the header at the top of its scrolling container.</prop>
+    <prop name="breakpoint" type="keyword" values="sm, md, lg" default="lg"
+    >The viewport width at which navigation replaces the menu trigger: sm is 40rem, md 48rem, and lg 64rem. The consumer owns the menu or drawer the trigger
+      opens.</prop>
+  </defs>
+  <header>
+    <span class="menu"><slot name="menu"></slot></span>
+    <div class="identity">
+      <div class="brand"><slot name="brand"></slot></div>
+      <nav class="navigation" from:aria-label="$label"><slot name="navigation"></slot></nav>
+    </div>
+    <div class="actions"><slot name="actions"></slot></div>
+  </header>
+  <style>
+    @property --ui-site-header-height {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-compact-height {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-site-header-z-index {
+      syntax: "*";
+      inherits: false;
+    }
+
+    :host {
+      box-sizing: border-box !important;
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      align-content: center !important;
+      gap: var(--ui-space-2) !important;
+      min-inline-size: 0;
+      min-block-size: var(--ui-site-header-compact-height, 3.75rem);
+      padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
+      border-block-end: var(--ui-border-width) solid var(--ui-site-header-border, var(--ui-border));
+      background: var(--ui-site-header-surface, var(--ui-surface));
+      color: var(--ui-text-primary);
+    }
+    :host([sticky]) {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: var(--ui-site-header-z-index, 10);
+    }
+    .menu, .actions {
+      display: flex !important;
+      flex: none;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+    }
+    .actions {
+      flex-wrap: wrap !important;
+      margin-inline-start: auto !important;
+    }
+    /* Text shares a baseline inside one group; the group is centred beside any control height. */
+    .identity {
+      display: flex !important;
+      flex: 1 1 auto;
+      flex-wrap: wrap !important;
+      align-items: baseline !important;
+      gap: var(--ui-space-2) var(--ui-space-6) !important;
+      min-inline-size: 0;
+    }
+    .brand {
+      min-inline-size: 0;
+      font-size: var(--ui-font-size-lg);
+      font-weight: var(--ui-font-bold);
+    }
+    .brand > :slotted(a) {
+      display: inline-flex !important;
+      align-items: baseline !important;
+      gap: var(--ui-space-3) !important;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      color: inherit;
+      text-decoration: none;
+    }
+    .navigation {
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: baseline !important;
+      gap: var(--ui-space-2) var(--ui-space-5) !important;
+      min-inline-size: 0;
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-semibold);
+    }
+    /* Without a supplied menu trigger, keep the destinations available on narrow screens. */
+    :host:has(> .menu:not(:empty)) .navigation {
+      display: none !important;
+    }
+    .navigation > :slotted(a) {
+      color: inherit;
+      text-decoration: none;
+    }
+    .navigation > :slotted(a):is(:hover, [aria-current="page"], [aria-current="true"]) {
+      color: var(--ui-accent-active);
+    }
+    .brand > :slotted(a):focus-visible, .navigation > :slotted(a):focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
+    }
+    .menu:empty, .actions:empty, .brand:empty, .navigation:empty {
+      display: none !important;
+    }
+    @media (min-width: 40rem) {
+      :host([breakpoint="sm"]) {
+        min-block-size: var(--ui-site-header-height, 4.25rem);
+        column-gap: var(--ui-space-4) !important;
+      }
+      :host([breakpoint="sm"]) .navigation:not(:empty) {
+        display: flex !important;
+      }
+      :host([breakpoint="sm"]) .menu {
+        display: none !important;
+      }
+    }
+    @media (min-width: 48rem) {
+      :host([breakpoint="md"]) {
+        min-block-size: var(--ui-site-header-height, 4.25rem);
+        column-gap: var(--ui-space-4) !important;
+      }
+      :host([breakpoint="md"]) .navigation:not(:empty) {
+        display: flex !important;
+      }
+      :host([breakpoint="md"]) .menu {
+        display: none !important;
+      }
+    }
+    @media (min-width: 64rem) {
+      :host([breakpoint="lg"]) {
+        min-block-size: var(--ui-site-header-height, 4.25rem);
+        column-gap: var(--ui-space-4) !important;
+      }
+      :host([breakpoint="lg"]) .navigation:not(:empty) {
+        display: flex !important;
+      }
+      :host([breakpoint="lg"]) .menu {
+        display: none !important;
+      }
+    }
+    :host[hidden] {
+      display: none !important;
+    }
+  </style>
+</template>