@threadlabs/looma 0.29.16 → 0.29.18

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

@@ -22,12 +22,12 @@
     <event name="remove" type="object">Requests removing this link.</event>
   </defs>
   <div>
-    <ui-card variant="elevated" padding="xs" size="content">
+    <ui-card variant="elevated" padding="xs" size="sm">
       <ui-cluster gap="xs" wrap="nowrap" role="group" aria-label="Link actions">
         <ui-icon from:name="{ true: 'file-text', false: 'link' }[concat($resolved)]"></ui-icon>
-        <ui-stack gap="none" from:title="$href" from:aria-label="concat({ true: $targetLabel, false: 'URL' }[concat($resolved)], ': ', $shown)">
-          <ui-text as="strong" size="sm" weight="medium" font="sans" wrap="anywhere">{$shown}</ui-text>
-          <ui-text $if="$detail != ''" as="small" size="xs" tone="secondary" font="sans">{$detail}</ui-text>
+        <ui-stack gap="none" fill from:title="$href" from:aria-label="concat({ true: $targetLabel, false: 'URL' }[concat($resolved)], ': ', $shown)">
+          <ui-text as="strong" size="sm" weight="medium" font="sans" truncate>{$shown}</ui-text>
+          <ui-text $if="$detail != ''" as="small" size="xs" tone="secondary" font="sans" truncate>{$detail}</ui-text>
         </ui-stack>
         <template $if="$openHref != ''">
           <ui-button
@@ -40,7 +40,7 @@
             target="_blank"
             rel="noopener noreferrer"
             aria-label="Open link"
-          ><ui-cluster gap="xs" wrap="nowrap"><ui-icon name="external-link"></ui-icon>Open link</ui-cluster></ui-button>
+          ><ui-icon name="external-link"></ui-icon></ui-button>
           <ui-tooltip from:for="concat($base, '-open')">Open link</ui-tooltip>
         </template>
         <ui-icon-button from:id="concat($base, '-edit')" label="Edit link" variant="ghost" size="sm" data-link-action="edit"><ui-icon

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

@@ -1,5 +1,7 @@
 <template component="ui-icon">
   <defs>
+    <prop name="tone" type="keyword" values="inherit, secondary, muted" default="inherit"
+    >Icon colour. inherit follows its control; secondary and muted keep a supporting icon quiet without a text wrapper.</prop>
     <prop name="name" type="string" default=""
     >Which icon to draw, by its name in Looma's icon set (LOOMA_ICONS), such as "align-left". An unknown or empty name draws nothing. The icon is hidden from
       assistive technology, so name the control it sits in.</prop>
@@ -125,6 +127,14 @@
       block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     }
 
+    :host([tone="secondary"]) {
+      color: var(--ui-text-secondary);
+    }
+
+    :host([tone="muted"]) {
+      color: var(--ui-text-muted);
+    }
+
     svg {
       inline-size: 100%;
       block-size: 100%;

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

@@ -26,6 +26,8 @@
     <prop name="guide" type="keyword" values="dot, bar" default="dot"
     >The idle marker of an anticipatory button: dot for contextual actions, or a slim neutral rounded bar for a panel-edge control. The icon appears on hover or
       keyboard focus; touch always shows the icon.</prop>
+    <prop name="revealed" type="boolean" default="false"
+    >Keeps an anticipatory button visible while its context is active, such as a selected block or an open popup. It does not imply a pressed or expanded state.</prop>
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
   <button
@@ -195,13 +197,13 @@
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :host([anticipatory]):not(:host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+      :host([anticipatory]):not(:host([revealed]), :host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :host([anticipatory]):not(:host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      :host([anticipatory]):not(:host([revealed]), :host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -209,7 +211,7 @@
       }
     }
 
-    :host([anticipatory]):is(:host([variant="solid"]), [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :host([anticipatory]):is(:host([revealed]), :host([variant="solid"]), [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }