@threadlabs/looma 0.22.10 → 0.22.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.22.10",
+  "version": "0.22.12",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-dialog.css

@@ -213,6 +213,12 @@
       background-color: var(--ui-overlay-backdrop);
       animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
+
+    :scope[open][data-ui-backdrop-hidden]::backdrop {
+      background-color: transparent;
+      animation: none;
+      transition: none;
+    }
 }
 @scope ([data-component~="ui-dialog"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */

package/styles/ui-input-group.css

@@ -125,6 +125,20 @@
       white-space: nowrap;
     }
 
+    /* Fixed text is part of the value, but should not look editable. */
+    .affix:has([slot="prefix"]),
+    .affix:has([slot="suffix"]) {
+      background: var(--ui-surface-muted);
+    }
+
+    .affix:has([slot="prefix"]) {
+      border-inline-end: 1px solid var(--ui-border-divider);
+    }
+
+    .affix:has([slot="suffix"]) {
+      border-inline-start: 1px solid var(--ui-border-divider);
+    }
+
     /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
        small button sits inside it with the difference split evenly, and the field keeps its height. */
     .action {
@@ -166,6 +180,8 @@
     @media (forced-colors: active) {
     }
 
+    /* Fixed text is part of the value, but should not look editable. */
+
     /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
        small button sits inside it with the difference split evenly, and the field keeps its height. */
 

package/styles/ui-search-shell.css

@@ -80,6 +80,14 @@
       background: var(--ui-overlay-backdrop);
     }
 
+    dialog:modal {
+      background: transparent;
+    }
+
+    dialog[data-ui-backdrop-hidden]::backdrop {
+      background: transparent;
+    }
+
     .panel {
       position: relative;
       display: flex;

package/vue/UiDialog.vue

@@ -545,6 +545,12 @@ footer:empty {
     var(--ui-motion-ease);
 }
 
+[data-component~="ui-dialog"][open][data-ui-backdrop-hidden]::backdrop {
+  background-color: transparent;
+  animation: none;
+  transition: none;
+}
+
 @keyframes ui-dialog-backdrop-enter {
   from {
     background-color: transparent;

package/vue/UiInputGroup.vue

@@ -269,6 +269,20 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
   white-space: nowrap;
 }
 
+/* Fixed text is part of the value, but should not look editable. */
+.affix:has([slot="prefix"]),
+.affix:has([slot="suffix"]) {
+  background: var(--ui-surface-muted);
+}
+
+.affix:has([slot="prefix"]) {
+  border-inline-end: 1px solid var(--ui-border-divider);
+}
+
+.affix:has([slot="suffix"]) {
+  border-inline-start: 1px solid var(--ui-border-divider);
+}
+
 /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
    small button sits inside it with the difference split evenly, and the field keeps its height. */
 .action {

package/vue/UiSearchShell.vue

@@ -298,6 +298,14 @@ dialog::backdrop {
   background: var(--ui-overlay-backdrop);
 }
 
+dialog:modal {
+  background: transparent;
+}
+
+dialog[data-ui-backdrop-hidden]::backdrop {
+  background: transparent;
+}
+
 .panel {
   position: relative;
   display: flex;

package/vue/chunks/UiDialog.js

@@ -327,6 +327,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-6680d681"]]);
+}), [["__scopeId", "data-v-89cad3bb"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiInputGroup.js

@@ -99,6 +99,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4ad9e91a"]]);
+}), [["__scopeId", "data-v-5cf4aea5"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiSearchShell.js

@@ -194,6 +194,6 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d7cd9501"]]);
+}), [["__scopeId", "data-v-34344651"]]);
 //#endregion
 export { UiSearchShell_default as t };

package/vue/components.css

@@ -2381,7 +2381,7 @@ dd[data-v-7a7db3d1] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-dialog"][data-v-6680d681] {
+[data-component~="ui-dialog"][data-v-89cad3bb] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -2416,21 +2416,21 @@ dd[data-v-7a7db3d1] {
     display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-6680d681] {
+[data-component~="ui-dialog"][open][data-v-89cad3bb] {
   display: flex;
   visibility: visible;
   pointer-events: auto;
   opacity: 1;
   transform: scale(1);
-  animation: ui-dialog-enter-6680d681 var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+  animation: ui-dialog-enter-89cad3bb var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"][data-v-6680d681] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"][data-v-89cad3bb] {
   --_ui-dialog-size: 360px;
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"][data-v-6680d681] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"][data-v-89cad3bb] {
   --_ui-dialog-size: 640px;
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"][data-v-6680d681] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"][data-v-89cad3bb] {
   inset: 0;
   inline-size: 100%;
   block-size: 100dvh;
@@ -2438,12 +2438,12 @@ dd[data-v-7a7db3d1] {
   margin: 0;
   border-radius: var(--ui-dialog-radius, 0);
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close[data-v-6680d681] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close[data-v-89cad3bb] {
   display: none;
 }
 
 /* Header and actions stay pinned; only the body scrolls when content is long. */
-header[data-v-6680d681] {
+header[data-v-89cad3bb] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
@@ -2452,7 +2452,7 @@ header[data-v-6680d681] {
 }
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-[data-component~="ui-dialog"] .title[data-v-6680d681] {
+[data-component~="ui-dialog"] .title[data-v-89cad3bb] {
   flex: 1;
   min-inline-size: 0;
   margin: 0;
@@ -2464,7 +2464,7 @@ header[data-v-6680d681] {
   font-weight: var(--ui-font-semibold);
   line-height: var(--ui-line-height-tight);
 }
-.close[data-v-6680d681] {
+.close[data-v-89cad3bb] {
   display: inline-grid;
   place-items: center;
   flex: none;
@@ -2483,8 +2483,8 @@ header[data-v-6680d681] {
 }
 
 /* A CSS-drawn X. */
-.close[data-v-6680d681]::before,
-.close[data-v-6680d681]::after {
+.close[data-v-89cad3bb]::before,
+.close[data-v-89cad3bb]::after {
   content: "";
   grid-area: 1 / 1;
   inline-size: 0.875rem;
@@ -2493,35 +2493,35 @@ header[data-v-6680d681] {
   background: currentColor;
   transform: rotate(45deg);
 }
-.close[data-v-6680d681]::after {
+.close[data-v-89cad3bb]::after {
   transform: rotate(-45deg);
 }
-.close[data-v-6680d681]:hover {
+.close[data-v-89cad3bb]:hover {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-.close[data-v-6680d681]:focus-visible {
+.close[data-v-89cad3bb]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
 
 /* A touch target, like Button on coarse pointers. */
 @media (pointer: coarse) {
-.close[data-v-6680d681] {
+.close[data-v-89cad3bb] {
     inline-size: var(--ui-control-min-block-size);
     block-size: var(--ui-control-min-block-size);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-6680d681] {
+html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-89cad3bb] {
   inline-size: var(--ui-control-min-block-size);
   block-size: var(--ui-control-min-block-size);
 }
-.body[data-v-6680d681] {
+.body[data-v-89cad3bb] {
   flex: 1 1 auto;
   min-block-size: 0;
   padding: var(--ui-space-5);
 }
-footer[data-v-6680d681] {
+footer[data-v-89cad3bb] {
   display: flex;
   flex: none;
   flex-wrap: wrap;
@@ -2529,28 +2529,33 @@ footer[data-v-6680d681] {
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-5);
 }
-footer[data-v-6680d681]:empty {
+footer[data-v-89cad3bb]:empty {
   display: none;
 }
-@keyframes ui-dialog-enter-6680d681 {
+@keyframes ui-dialog-enter-89cad3bb {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-[data-component~="ui-dialog"][data-v-6680d681]::backdrop {
+[data-component~="ui-dialog"][data-v-89cad3bb]::backdrop {
   background-color: transparent;
   transition:
     background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
     display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-6680d681]::backdrop {
+[data-component~="ui-dialog"][open][data-v-89cad3bb]::backdrop {
   background-color: var(--ui-overlay-backdrop);
-  animation: ui-dialog-backdrop-enter-6680d681 var(--_ui-dialog-duration, var(--ui-motion-base))
+  animation: ui-dialog-backdrop-enter-89cad3bb var(--_ui-dialog-duration, var(--ui-motion-base))
     var(--ui-motion-ease);
 }
-@keyframes ui-dialog-backdrop-enter-6680d681 {
+[data-component~="ui-dialog"][open][data-ui-backdrop-hidden][data-v-89cad3bb]::backdrop {
+  background-color: transparent;
+  animation: none;
+  transition: none;
+}
+@keyframes ui-dialog-backdrop-enter-89cad3bb {
 from {
     background-color: transparent;
 }
@@ -4790,7 +4795,7 @@ svg[data-v-0d1b1c7d-s] {
    whole value is. The action slot takes one button at the end, inside the border, for the one
    thing the field is for ("Continue" after a site's address), so it reads as the field's action
    and not the form's. */
-[data-component~="ui-input-group"][data-v-4ad9e91a] {
+[data-component~="ui-input-group"][data-v-5cf4aea5] {
   /* The group's own border and height stand for the input's, so the group is a lone Input's height.
      Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
   --_ui-default-input-border-width: 0;
@@ -4826,36 +4831,36 @@ svg[data-v-0d1b1c7d-s] {
 }
 
 /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
-[data-component~="ui-input-group"][data-v-4ad9e91a]:has(.field [data-ui-input-state~="size=sm"]) {
+[data-component~="ui-input-group"][data-v-5cf4aea5]:has(.field [data-ui-input-state~="size=sm"]) {
   min-block-size: var(--ui-control-size-sm);
 }
-[data-component~="ui-input-group"][data-v-4ad9e91a]:has(.field [data-ui-input-state~="size=lg"]) {
+[data-component~="ui-input-group"][data-v-5cf4aea5]:has(.field [data-ui-input-state~="size=lg"]) {
   min-block-size: var(--ui-control-size-lg);
 }
 @media (pointer: coarse) {
-[data-component~="ui-input-group"][data-v-4ad9e91a]:has(.field [data-ui-input-state~="size=sm"]) {
+[data-component~="ui-input-group"][data-v-5cf4aea5]:has(.field [data-ui-input-state~="size=sm"]) {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
-[data-component~="ui-input-group"][data-v-4ad9e91a]:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
+[data-component~="ui-input-group"][data-v-5cf4aea5]:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
 
 /* The ring shows when the field's input would show its own: when it is focus-visible, which a
    text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-[data-component~="ui-input-group"][data-v-4ad9e91a]:has(.field input:focus-visible) {
+[data-component~="ui-input-group"][data-v-5cf4aea5]:has(.field input:focus-visible) {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-[data-component~="ui-input-group"][data-v-4ad9e91a]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+[data-component~="ui-input-group"][data-v-5cf4aea5]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
   border-color: var(
     --ui-input-group-invalid-border,
     var(--ui-field-danger, var(--ui-danger-solid))
   );
 }
-[data-component~="ui-input-group"][data-v-4ad9e91a]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+[data-component~="ui-input-group"][data-v-5cf4aea5]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
   box-shadow: var(
     --ui-input-group-invalid-focus-shadow,
     var(--ui-control-inset),
@@ -4869,23 +4874,23 @@ svg[data-v-0d1b1c7d-s] {
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input-group"][data-v-4ad9e91a]:has(input:focus-visible) {
+[data-component~="ui-input-group"][data-v-5cf4aea5]:has(input:focus-visible) {
     outline: 2px solid Highlight;
     outline-offset: 1px;
 }
 }
-[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-4ad9e91a],
-[data-component~="ui-input-group"][data-v-4ad9e91a]:has(input:disabled) {
+[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-5cf4aea5],
+[data-component~="ui-input-group"][data-v-5cf4aea5]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   box-shadow: none;
   cursor: not-allowed;
 }
-.field[data-v-4ad9e91a] {
+.field[data-v-5cf4aea5] {
   display: flex;
   flex: 1;
   min-inline-size: 0;
 }
-.affix[data-v-4ad9e91a] {
+.affix[data-v-5cf4aea5] {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -4896,21 +4901,33 @@ svg[data-v-0d1b1c7d-s] {
   white-space: nowrap;
 }
 
+/* Fixed text is part of the value, but should not look editable. */
+.affix[data-v-5cf4aea5]:has([slot="prefix"]),
+.affix[data-v-5cf4aea5]:has([slot="suffix"]) {
+  background: var(--ui-surface-muted);
+}
+.affix[data-v-5cf4aea5]:has([slot="prefix"]) {
+  border-inline-end: 1px solid var(--ui-border-divider);
+}
+.affix[data-v-5cf4aea5]:has([slot="suffix"]) {
+  border-inline-start: 1px solid var(--ui-border-divider);
+}
+
 /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
    small button sits inside it with the difference split evenly, and the field keeps its height. */
-.action[data-v-4ad9e91a] {
+.action[data-v-5cf4aea5] {
   display: flex;
   flex: none;
   align-items: center;
   padding-inline: var(--ui-space-1);
 }
-.affix[data-v-4ad9e91a]:empty,
-.action[data-v-4ad9e91a]:empty {
+.affix[data-v-5cf4aea5]:empty,
+.action[data-v-5cf4aea5]:empty {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input-group"][hidden][data-v-4ad9e91a] {
+[data-component~="ui-input-group"][hidden][data-v-5cf4aea5] {
   display: none;
 }
 
@@ -6319,7 +6336,7 @@ legend[data-v-f7b72b3f] + * {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-search-shell"][data-v-d7cd9501] {
+[data-component~="ui-search-shell"][data-v-34344651] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
   --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
@@ -6334,7 +6351,7 @@ legend[data-v-f7b72b3f] + * {
 
   display: contents;
 }
-dialog[data-v-d7cd9501] {
+dialog[data-v-34344651] {
   position: fixed;
   inset: 0;
   z-index: var(--_ui-search-shell-z-index, 400);
@@ -6352,10 +6369,16 @@ dialog[data-v-d7cd9501] {
   background: var(--ui-overlay-backdrop);
   color: var(--ui-text-primary);
 }
-dialog[data-v-d7cd9501]::backdrop {
+dialog[data-v-34344651]::backdrop {
   background: var(--ui-overlay-backdrop);
 }
-.panel[data-v-d7cd9501] {
+dialog[data-v-34344651]:modal {
+  background: transparent;
+}
+dialog[data-ui-backdrop-hidden][data-v-34344651]::backdrop {
+  background: transparent;
+}
+.panel[data-v-34344651] {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -6375,10 +6398,10 @@ dialog[data-v-d7cd9501]::backdrop {
     var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
   );
 }
-.search[data-v-d7cd9501] {
+.search[data-v-34344651] {
   padding: var(--ui-space-3);
 }
-input[slot="search"][data-v-d7cd9501-s] {
+input[slot="search"][data-v-34344651-s] {
   box-sizing: border-box;
   inline-size: 100%;
   min-block-size: var(--ui-control-min-block-size);
@@ -6390,24 +6413,24 @@ input[slot="search"][data-v-d7cd9501-s] {
   font: inherit;
   box-shadow: var(--ui-shadow-xs);
 }
-input[slot="search"][data-v-d7cd9501-s]:focus-visible {
+input[slot="search"][data-v-34344651-s]:focus-visible {
   border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
-.status[data-v-d7cd9501],
-.actions[data-v-d7cd9501] {
+.status[data-v-34344651],
+.actions[data-v-34344651] {
   flex-shrink: 0;
   padding: var(--ui-space-2) var(--ui-space-4);
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
 }
-.status[data-v-d7cd9501] {
+.status[data-v-34344651] {
   padding-block-start: 0;
 }
 
 /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
-.actions[data-v-d7cd9501] {
+.actions[data-v-34344651] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -6415,11 +6438,11 @@ input[slot="search"][data-v-d7cd9501-s]:focus-visible {
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-4);
 }
-.status[data-v-d7cd9501]:empty,
-.actions[data-v-d7cd9501]:empty {
+.status[data-v-34344651]:empty,
+.actions[data-v-34344651]:empty {
   display: none;
 }
-.body[data-v-d7cd9501] {
+.body[data-v-34344651] {
   flex: 1;
   min-block-size: 0;
   overflow: auto;
@@ -6447,10 +6470,10 @@ input[slot="search"][data-v-d7cd9501-s]:focus-visible {
     calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
 @media (max-width: 47.9375rem) {
-dialog[data-v-d7cd9501] {
+dialog[data-v-34344651] {
     padding: 0;
 }
-.panel[data-v-d7cd9501] {
+.panel[data-v-34344651] {
     inline-size: 100%;
     min-block-size: 100dvh;
     max-block-size: none;
@@ -6460,7 +6483,7 @@ dialog[data-v-d7cd9501] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-search-shell"][hidden][data-v-d7cd9501] {
+[data-component~="ui-search-shell"][hidden][data-v-34344651] {
   display: none;
 }
 
@@ -9047,18 +9070,26 @@ html[data-ui-input-modality="touch"]
 
 .looma-editor__link-context-actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
 }
 
 .looma-editor__link-context-url {
   min-width: 0;
-  max-width: 10rem;
-  overflow: hidden;
+  flex: 1 1 100%;
   padding-inline: var(--ui-space-2);
   color: var(--ui-text-secondary);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  font-size: var(--ui-font-size-sm);
+}
+
+.looma-editor__link-context-url :is(strong, small) {
+  display: block;
+}
+
+.looma-editor__link-context-url strong {
+  color: var(--ui-text-primary);
 }
 
 .looma-editor__link-context-actions :is(button, a) {
@@ -9175,6 +9206,57 @@ html[data-ui-input-modality="touch"]
   align-items: center;
 }
 
+.looma-editor__link-modes {
+  display: flex;
+  gap: var(--ui-space-1);
+}
+
+.looma-editor__link-modes button,
+.looma-editor__link-results button {
+  min-height: var(--ui-control-min-block-size);
+  padding: var(--ui-space-2);
+  border: 1px solid var(--ui-control-border);
+  border-radius: var(--ui-field-radius, var(--ui-radius-md));
+  background: var(--ui-control-surface);
+  color: var(--ui-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.looma-editor__link-modes button[aria-pressed="true"] {
+  border-color: var(--ui-accent);
+  color: var(--ui-accent);
+}
+
+.looma-editor__link-results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-1);
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.looma-editor__link-results p {
+  margin: 0;
+  color: var(--ui-text-secondary);
+  font-size: var(--ui-font-size-sm);
+}
+
+.looma-editor__link-results button {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.looma-editor__link-results button:is(:hover, :focus-visible) {
+  background: var(--ui-surface-subtle);
+}
+
+.looma-editor__link-results button small {
+  color: var(--ui-text-secondary);
+}
+
 .looma-editor__link-error {
   margin: 0;
   color: var(--ui-field-danger, var(--ui-danger));