@inkbar/theme 0.9.0 → 0.10.0

package/README.md

@@ -83,6 +83,21 @@ The theme gives a toolbar a background and padding and styles the controls in it
 }
 ```
 
+## Your own controls
+
+Two classes give your own controls the look of the built-in ones. Add `ink-select` to a `<select>` to give it the zoom select's box and chevron. To put an icon in a field, wrap the input in `ink-input-group` and add an `ink-input-accessory` before it for an icon at the start, or after it for one at the end. The icon lets clicks through to the field, and the input makes room for it. The find bar and the search results field use this for their search icon.
+
+```html
+<select class="ink-select">
+  …
+</select>
+
+<div class="ink-input-group">
+  <span class="ink-input-accessory"><svg aria-hidden="true">…</svg></span>
+  <input type="text" aria-label="Filter notes" />
+</div>
+```
+
 ## Licence
 
 [MIT](https://github.com/inkbar/inkbar/blob/main/LICENSE). From the team behind [Redactr](https://redactr.io).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkbar/theme",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Default stylesheet for Inkbar. Zero specificity, so your CSS wins.",
   "license": "MIT",
   "homepage": "https://inkbar.dev",

package/theme.css

@@ -11,9 +11,13 @@
  * new annotations only.
  */
 @layer inkbar {
-  /* Tokens. Popovers are portalled out of the root, so they carry the tokens too. */
+  /*
+   * Tokens. Popovers are portalled out of the root, and a sidebar may sit outside it, so they
+   * carry the tokens too.
+   */
   :where(
     [data-ink-root],
+    [data-ink-sidebar],
     [data-ink-thread-popover],
     [data-ink-popover],
     [data-ink-select-content],
@@ -33,6 +37,12 @@
     /* Pages stay white in dark mode and the search layer multiplies, so these serve both. */
     --ink-search-hit: #f1ffa0;
     --ink-search-current: #e4ff4a;
+    /* The selected record's mark; pages stay white in dark mode, so this serves both. */
+    --ink-mark-selected-outline: 2px solid #2740f5;
+    /* Sidebars (createSidebar and the bindings' sidebar): the open sidebar and its rail. */
+    --ink-sidebar-width: 280px;
+    --ink-sidebar-rail-width: 48px;
+    --ink-thumbnail-width: 120px;
 
     --ink-bg: var(--muted, #f1f2f5);
     --ink-fg: var(--foreground, #151820);
@@ -44,6 +54,8 @@
     --ink-ring: var(--ring, #2b5a9e);
     --ink-radius: var(--radius, 0.5rem);
     --ink-page-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+    /* Thumbnails are small, so the page shadow reads heavy on them: a hairline edge and a soft lift. */
+    --ink-thumbnail-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px rgb(0 0 0 / 0.08);
     --ink-text-selection: color-mix(in srgb, AccentColor, transparent 50%);
     /* Form fields sit on the white page, in light and dark alike. */
     --ink-form-field-bg: rgb(43 90 158 / 0.12);
@@ -56,6 +68,7 @@
   @media (prefers-color-scheme: dark) {
     :where(
       [data-ink-root]:not(.light, .light *),
+      [data-ink-sidebar]:not(.light, .light *),
       [data-ink-thread-popover]:not(.light *),
       [data-ink-popover]:not(.light *),
       [data-ink-select-content]:not(.light *),
@@ -71,6 +84,7 @@
       --ink-accent-fg: var(--primary-foreground, #151820);
       --ink-ring: var(--ring, #7aa5e6);
       --ink-page-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
+      --ink-thumbnail-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
       --ink-form-field-bg: rgb(43 90 158 / 0.16);
       --ink-form-field-focus: #3d73c4;
       --ink-form-field-invalid: #c0392b;
@@ -81,6 +95,8 @@
   :where(
     .dark [data-ink-root]:not(.light, .dark .light *),
     [data-ink-root].dark,
+    .dark [data-ink-sidebar]:not(.light, .dark .light *),
+    [data-ink-sidebar].dark,
     .dark [data-ink-thread-popover]:not(.dark .light *),
     .dark [data-ink-popover]:not(.dark .light *),
     .dark [data-ink-select-content]:not(.dark .light *),
@@ -96,6 +112,7 @@
     --ink-accent-fg: var(--primary-foreground, #151820);
     --ink-ring: var(--ring, #7aa5e6);
     --ink-page-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
+    --ink-thumbnail-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
     --ink-form-field-bg: rgb(43 90 158 / 0.16);
     --ink-form-field-focus: #3d73c4;
     --ink-form-field-invalid: #c0392b;
@@ -367,6 +384,11 @@
     pointer-events: auto;
   }
 
+  /* The mark of the record selected in a list, the page or the host app. */
+  :where(.ink-plugin-layer > button[data-selected]) {
+    outline: var(--ink-mark-selected-outline);
+  }
+
   /* Form fields: over the text layer, under the annotations (after the overlay in the page, at
      the same level), so a press on an annotation's shape is the annotation's. A field is
      tinted, except while it is read-only or signed or highlighting is off. It is ringed while
@@ -481,6 +503,14 @@
     cursor: default;
   }
 
+  /* A locked note still opens its thread on a click. */
+  :where(
+    [data-ink-tool='select'] .ink-annotation[data-locked][data-type='text'],
+    [data-ink-tool='select-text'] .ink-annotation[data-locked][data-type='text']
+  ) {
+    cursor: pointer;
+  }
+
   /* While an annotation is moved the whole viewport shows it, over any element's own cursor.
      The one rule here that is not zero specificity: it has to beat them. */
   [data-ink-dragging],
@@ -522,14 +552,12 @@
     outline-style: dotted;
   }
 
+  /* The icon fills the note's box, so it scales with the zoom as the PDF's own icons do. */
   :where(.ink-note-icon) {
     position: absolute;
-    left: 0;
-    top: 0;
+    inset: 0;
     display: block;
-    width: 20px;
-    height: 20px;
-    border-radius: 3px 3px 3px 0;
+    border-radius: 15% 15% 15% 0;
     background: var(--ink-note);
     box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
     pointer-events: none;
@@ -802,6 +830,373 @@
     outline-offset: 2px;
   }
 
+  /*
+   * Sidebars (createSidebar and the bindings' sidebar): a plain block the app places with its
+   * own layout. --ink-sidebar-width sets the open width and --ink-sidebar-rail-width the rail's.
+   * The border and the rail sit on the inner edge, beside the document: data-side="right"
+   * mirrors them.
+   */
+  :where(.ink-sidebar) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: var(--ink-sidebar-width);
+    min-height: 0;
+    border-right: 1px solid var(--ink-border);
+    background: var(--ink-surface);
+    color: var(--ink-fg);
+  }
+
+  :where(.ink-sidebar[data-side='right']) {
+    border-right: 0;
+    border-left: 1px solid var(--ink-border);
+  }
+
+  /* The rail: icon buttons beside the document, so they stay put as the panel opens and closes;
+     the sidebar narrows to the rail with no panel open. The rail comes first in the markup. */
+  :where(.ink-sidebar[data-layout='rail']) {
+    flex-direction: row-reverse;
+    width: auto;
+  }
+
+  :where(.ink-sidebar[data-layout='rail'][data-side='right']) {
+    flex-direction: row;
+  }
+
+  :where(.ink-sidebar-rail) {
+    display: flex;
+    flex: none;
+    flex-direction: column;
+    gap: 0.25rem;
+    box-sizing: border-box;
+    width: var(--ink-sidebar-rail-width);
+    padding: 0.375rem 0;
+    align-items: center;
+  }
+
+  :where(.ink-sidebar[data-layout='rail'] .ink-sidebar-panels) {
+    width: calc(var(--ink-sidebar-width) - var(--ink-sidebar-rail-width));
+    border-right: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-sidebar[data-layout='rail'][data-side='right'] .ink-sidebar-panels) {
+    border-right: 0;
+    border-left: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-sidebar-tabs) {
+    display: flex;
+    flex: none;
+    border-bottom: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-sidebar-panels) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  /* After the rule above, which it overrides at the same specificity. */
+  :where(.ink-sidebar[data-layout='rail'][data-state='closed'] .ink-sidebar-panels) {
+    display: none;
+  }
+
+  /* Tabs collapse as a whole, strip and all: the host's own button sets `open` to reopen it. */
+  :where(.ink-sidebar[data-layout='tabs'][data-state='closed']) {
+    display: none;
+  }
+
+  :where(.ink-sidebar-panel) {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  :where(.ink-sidebar-panel[hidden]) {
+    display: none;
+  }
+
+  /* Not visible: the whole sidebar goes, its state kept. After every display rule above. */
+  :where(.ink-sidebar[hidden]) {
+    display: none;
+  }
+
+  /* The panel's title shows in the rail only, where the buttons carry no text: a strip as tall
+     as the rail is wide, so it lines up with the first button. Tabs and stack name the panel in
+     their own triggers, and there the body steps out of the layout. */
+  :where(.ink-sidebar-panel-title) {
+    display: none;
+  }
+
+  :where(.ink-sidebar-panel-body) {
+    display: contents;
+  }
+
+  :where(.ink-sidebar-panel[data-layout='rail']:not([hidden])) {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  :where(.ink-sidebar-panel[data-layout='rail'] > .ink-sidebar-panel-title) {
+    display: flex;
+    flex: none;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: var(--ink-sidebar-rail-width);
+    padding: 0 1rem;
+    border-bottom: 1px solid var(--ink-border);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  :where(.ink-sidebar-panel[data-layout='rail'] > .ink-sidebar-panel-body) {
+    display: block;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  /* The bindings wrap each panel in .ink-sidebar-slot, the stack's section in that layout. In
+     rail and tabs it steps out of the layout, so the panel fills the panels area. */
+  :where(.ink-sidebar-panels > .ink-sidebar-slot) {
+    display: contents;
+  }
+
+  /* The stack scrolls as a whole; each expanded panel takes the height of its content. */
+  :where(.ink-sidebar[data-layout='stack']) {
+    overflow: auto;
+  }
+
+  :where(.ink-sidebar-section) {
+    border-bottom: 1px solid var(--ink-border);
+  }
+
+  :where(.ink-sidebar-section > .ink-sidebar-panel) {
+    overflow: visible;
+  }
+
+  :where(.ink-sidebar-rail button, .ink-sidebar-tabs button, .ink-sidebar-header) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0 0.75rem;
+    border: 0;
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  /* Rail buttons match the toolbar's (--ink-control-size); a halo keeps the 44px hit area. */
+  :where(.ink-sidebar-rail button) {
+    justify-content: center;
+    width: var(--ink-control-size, 2.25rem);
+    min-width: 0;
+    height: var(--ink-control-size, 2.25rem);
+    min-height: 0;
+    padding: 0;
+  }
+
+  :where(.ink-sidebar-rail button)::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+  }
+
+  :where(.ink-sidebar-tabs button) {
+    flex: 1;
+    justify-content: center;
+    border-radius: 0;
+    border-bottom: 2px solid transparent;
+  }
+
+  :where(.ink-sidebar-header) {
+    width: 100%;
+    border-radius: 0;
+    text-align: start;
+    font-weight: 600;
+  }
+
+  :where(
+    .ink-sidebar-rail button:hover,
+    .ink-sidebar-tabs button:hover,
+    .ink-sidebar-header:hover
+  ) {
+    background: color-mix(in srgb, var(--ink-fg) 8%, transparent);
+  }
+
+  :where(.ink-sidebar-rail button[aria-selected='true']) {
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+  }
+
+  :where(.ink-sidebar-tabs button[aria-selected='true']) {
+    border-bottom-color: var(--ink-accent);
+  }
+
+  :where(
+    .ink-sidebar-rail button:focus-visible,
+    .ink-sidebar-tabs button:focus-visible,
+    .ink-sidebar-header:focus-visible
+  ) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: -2px;
+  }
+
+  :where(.ink-sidebar-badge) {
+    min-width: 1.125rem;
+    padding: 0 0.3125rem;
+    border-radius: 999px;
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.ink-sidebar-header .ink-sidebar-badge) {
+    margin-inline-start: auto;
+  }
+
+  /* On the rail the badge sits on the button's corner. */
+  :where(.ink-sidebar-rail .ink-sidebar-badge) {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    z-index: 1;
+    box-shadow: 0 0 0 2px var(--ink-surface);
+  }
+
+  :where(.ink-sidebar-rail button[aria-selected='true'] .ink-sidebar-badge) {
+    background: var(--ink-accent-fg);
+    color: var(--ink-accent);
+  }
+
+  :where(.ink-sidebar-badge[hidden]) {
+    display: none;
+  }
+
+  /* Thumbnails: a page as paper, its placeholder the same shape until it renders. The painter
+     sets the size inline; the layers inside are inert copies. */
+  :where(.ink-thumbnail) {
+    position: relative;
+    display: block;
+    flex: none;
+    overflow: hidden;
+    background: #ffffff;
+    box-shadow: var(--ink-thumbnail-shadow);
+  }
+
+  :where(.ink-thumbnail-annotation > svg) {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  /* A note's icon fills its box instead of keeping its on-page size; comment glyphs, which keep
+     a fixed size at every zoom, would cover a small page, so they are left out. */
+  :where(.ink-thumbnail-annotation .ink-note-icon) {
+    box-shadow: none;
+  }
+
+  :where(.ink-thumbnail-annotation .ink-comment-marker) {
+    display: none;
+  }
+
+  /*
+   * The thumbnail list (createThumbnails and the bindings' list): it fills its parent's height
+   * and scrolls, with only the items near the visible part mounted, each placed absolutely at
+   * its offset over a spacer of the full height. The controller fits each thumbnail to the list
+   * less a 16px gutter each side, and counts an item as its thumbnail plus 38px: the 16px gutter
+   * above, a 6px gap and the 16px number. The list's own 16px padding closes the last one.
+   */
+  /* The list is a small viewport: pages on the same canvas, with the same shadow. */
+  :where(.ink-thumbnails) {
+    position: relative;
+    box-sizing: border-box;
+    height: 100%;
+    padding-bottom: 16px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    /* A scrollbar takes the same room on both sides, so the gutters stay even. */
+    scrollbar-gutter: stable both-edges;
+    background: var(--ink-bg);
+  }
+
+  :where(.ink-thumbnails-entry) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  :where(.ink-thumbnails-item) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0;
+    border: 0;
+    border-radius: var(--ink-radius);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  /* The page carries the states, as the main view's pages do: a ring on hover, the accent ring
+     on the current page, and its number in the accent like a pressed toolbar button. */
+  :where(.ink-thumbnails-item:hover .ink-thumbnail) {
+    box-shadow:
+      var(--ink-thumbnail-shadow),
+      0 0 0 2px color-mix(in srgb, var(--ink-fg) 20%, transparent);
+  }
+
+  :where(.ink-thumbnails-item:focus-visible) {
+    outline: none;
+  }
+
+  :where(.ink-thumbnails-item:focus-visible .ink-thumbnail) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: 3px;
+  }
+
+  :where(.ink-thumbnails-item[aria-current='page'] .ink-thumbnail) {
+    box-shadow:
+      var(--ink-thumbnail-shadow),
+      0 0 0 2px var(--ink-accent);
+  }
+
+  :where(.ink-thumbnails-label) {
+    min-width: 1.5rem;
+    padding: 0 0.375rem;
+    border-radius: 999px;
+    color: var(--ink-muted-fg);
+    font-size: 0.75rem;
+    line-height: 16px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.ink-thumbnails-item[aria-current='page'] .ink-thumbnails-label) {
+    background: var(--ink-accent);
+    color: var(--ink-accent-fg);
+    font-weight: 600;
+  }
+
   /* Text for assistive technology only, such as the find bar's live region. */
   :where(.ink-visually-hidden) {
     position: absolute;
@@ -848,41 +1243,40 @@
   }
 
   /*
-   * Zoom select. The bindings render a button trigger (`.ink-select-trigger`) and a portalled
-   * listbox; createViewer renders a native select. Both take the same box and chevron.
+   * Select. `.ink-select` is the toolbar's select box, for a native select or a button trigger
+   * (`.ink-select-trigger`) with a portalled listbox. The zoom select uses it in every binding,
+   * and an app's own toolbar select takes the class to match.
    */
-  :where(.ink-toolbar .ink-zoom-select) {
+  :where(.ink-select) {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
-    width: 7.5rem;
     height: var(--ink-control-size, 2.25rem);
     padding: 0 0.5rem 0 0.75rem;
     border: 1px solid var(--ink-border);
     border-radius: calc(var(--ink-radius) - 2px);
-    background: var(--ink-surface);
+    background-color: var(--ink-surface);
     color: inherit;
     font: inherit;
     font-size: 0.875rem;
-    font-variant-numeric: tabular-nums;
     text-align: left;
     white-space: nowrap;
     cursor: pointer;
   }
 
-  :where(.ink-toolbar .ink-zoom-select:hover) {
-    background: color-mix(in srgb, var(--ink-fg) 4%, var(--ink-surface));
+  :where(.ink-select:hover) {
+    background-color: color-mix(in srgb, var(--ink-fg) 4%, var(--ink-surface));
   }
 
-  :where(.ink-toolbar .ink-zoom-select:disabled) {
+  :where(.ink-select:disabled) {
     opacity: 0.5;
     cursor: default;
   }
 
-  /* The native select draws the same chevron as the trigger's icon: Lucide's ChevronDown; see LICENSE. */
-  :where(.ink-toolbar select.ink-zoom-select) {
+  /* A native select draws the same chevron as the trigger's icon: Lucide's ChevronDown; see LICENSE. */
+  :where(select.ink-select) {
     padding-right: 2rem;
     appearance: none;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6170' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
@@ -891,6 +1285,12 @@
     background-size: 1rem;
   }
 
+  /* The zoom select keeps one width as its value changes. */
+  :where(.ink-zoom-select) {
+    width: 7.5rem;
+    font-variant-numeric: tabular-nums;
+  }
+
   :where(.ink-select-value) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1611,7 +2011,7 @@
     font-size: 0.875rem;
   }
 
-  :where(.ink-card-title, .ink-card-meta, .ink-card-body) {
+  :where(.ink-card-title, .ink-card-meta, .ink-card-body, .ink-card-excerpt) {
     margin: 0;
   }
 
@@ -1640,6 +2040,17 @@
     color: var(--ink-muted-fg);
   }
 
+  :where(.ink-card-excerpt) {
+    margin-top: 0.25rem;
+    color: var(--ink-muted-fg);
+  }
+
+  :where(.ink-card-excerpt mark) {
+    background: var(--ink-search-hit);
+    /* The hit colour is light in both themes, so the text on it stays dark. */
+    color: var(--ink-free-text);
+  }
+
   :where(.ink-card-actions) {
     display: flex;
     gap: 0.375rem;
@@ -1663,6 +2074,269 @@
     color: var(--ink-accent-fg);
   }
 
+  /*
+   * Record lists (createRecordList, createSearchResults and the bindings' lists): the same
+   * cards as the popover, in a list that fills its parent's height and scrolls. These follow the
+   * card rules so a row's card drops the popover's float, width and shadow.
+   */
+  :where(.ink-records) {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+  }
+
+  :where(.ink-records:focus-visible) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: -2px;
+  }
+
+  :where(.ink-record-list) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-height: 0;
+    margin: 0;
+    padding: 0.5rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    list-style: none;
+  }
+
+  :where(.ink-record-list[hidden], .ink-record-list-empty[hidden]) {
+    display: none;
+  }
+
+  :where(.ink-record) {
+    border-radius: var(--ink-radius);
+    cursor: pointer;
+  }
+
+  :where(.ink-record > .ink-card) {
+    z-index: auto;
+    width: auto;
+    max-width: none;
+    box-shadow: none;
+  }
+
+  :where(.ink-record:hover > .ink-card) {
+    background: color-mix(in srgb, var(--ink-fg) 4%, var(--ink-surface));
+  }
+
+  :where(.ink-record:focus-visible) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: 2px;
+  }
+
+  :where(.ink-record[aria-current='true'] > .ink-card) {
+    border-color: var(--ink-accent);
+    box-shadow: inset 0 0 0 1px var(--ink-accent);
+  }
+
+  :where(.ink-record .ink-card-actions:empty) {
+    display: none;
+  }
+
+  :where(.ink-record .ink-card-actions button) {
+    min-height: 44px;
+  }
+
+  :where(.ink-record-list-empty) {
+    margin: 0;
+    padding: 1rem 0.75rem;
+    color: var(--ink-muted-fg);
+    font-size: 0.875rem;
+  }
+
+  /*
+   * Search results frame their cards as the viewer frames its pages: the field on the surface
+   * at the top, the cards on the page canvas, and the count in a footer on the surface at the
+   * bottom, shown only when it has something to say.
+   */
+  :where(.ink-search-results) {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    background: var(--ink-bg);
+  }
+
+  :where(.ink-search-results-bar) {
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--ink-border);
+    background: var(--ink-surface);
+  }
+
+  :where(.ink-search-results-count) {
+    flex: none;
+    min-width: 0;
+    padding: 0.5rem 0.75rem;
+    border-top: 1px solid var(--ink-border);
+    background: var(--ink-surface);
+    color: var(--ink-muted-fg);
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1rem;
+  }
+
+  :where(.ink-search-results-count:empty) {
+    display: none;
+  }
+
+  :where(.ink-search-results-bar input) {
+    box-sizing: border-box;
+    flex: 1;
+    min-width: 0;
+    min-height: 44px;
+    padding: 0 0.5rem;
+    border: 1px solid var(--ink-border);
+    border-radius: calc(var(--ink-radius) - 2px);
+    background: var(--ink-surface);
+    color: inherit;
+    font: inherit;
+  }
+
+  :where(.ink-search-results-bar input:focus-visible) {
+    outline: 2px solid var(--ink-ring);
+    outline-offset: 2px;
+  }
+
+  /*
+   * An input with an accessory icon: wrap the input in `.ink-input-group` with an
+   * `.ink-input-accessory` before it (at the start) or after it (at the end). The icon is
+   * decorative and lets clicks through to the field. The group holds only the input and its
+   * accessories, so an input that is not first or last has one beside it (no :has(), which
+   * costs frames on long documents). After the find bar's and search results' input rules, so
+   * its padding wins over theirs.
+   */
+  :where(.ink-input-group) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  :where(.ink-input-group > input) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  :where(.ink-input-accessory) {
+    position: absolute;
+    display: inline-flex;
+    color: var(--ink-muted-fg);
+    pointer-events: none;
+  }
+
+  :where(.ink-input-accessory:first-child) {
+    left: 0.625rem;
+  }
+
+  :where(.ink-input-accessory:last-child) {
+    right: 0.625rem;
+  }
+
+  :where(.ink-input-accessory .ink-icon) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  :where(.ink-input-group > input:not(:first-child)) {
+    padding-left: 2rem;
+  }
+
+  :where(.ink-input-group > input:not(:last-child)) {
+    padding-right: 2rem;
+  }
+
+  /* In the find bar and the search results, the group takes the field's place in the row. */
+  :where(.ink-find-bar .ink-input-group, .ink-search-results-bar .ink-input-group) {
+    flex: 1;
+  }
+
+  :where(.ink-search-results > .ink-records) {
+    flex: 1;
+    height: auto;
+  }
+
+  /*
+   * Search result cards: the matched text leads, at full strength, and its page and place sit
+   * in a small footer under a hairline. The cards are surfaces on the page canvas, as the
+   * thumbnails are. The card's markup stays title, meta, excerpt; the grid reorders it.
+   */
+  :where(.ink-search-results .ink-record > .ink-card) {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      'excerpt excerpt'
+      'title meta';
+    padding: 0;
+    overflow: hidden;
+    border-color: color-mix(in srgb, var(--ink-fg) 10%, transparent);
+    box-shadow: var(--ink-thumbnail-shadow);
+  }
+
+  /* The ring sits outside: an inset one would go under the footer's background. */
+  :where(.ink-search-results .ink-record[aria-current='true'] > .ink-card) {
+    border-color: var(--ink-accent);
+    box-shadow:
+      0 0 0 1px var(--ink-accent),
+      var(--ink-thumbnail-shadow);
+  }
+
+  :where(.ink-search-results .ink-card-excerpt) {
+    display: -webkit-box;
+    grid-area: excerpt;
+    margin: 0;
+    /* The space below is a border: a clamped box shows its next line through its padding, and
+       an app's reset of p margins would win over the theme's layer. */
+    padding: 0.625rem 0.75rem 0;
+    border-bottom: 0.75rem solid transparent;
+    overflow: hidden;
+    color: var(--ink-fg);
+    line-height: 1.45;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
+
+  :where(.ink-search-results .ink-card-excerpt mark) {
+    padding: 0 1px;
+    border-radius: 2px;
+  }
+
+  /* The current match's text takes the current hit's colour, as it does on the page. */
+  :where(.ink-search-results .ink-record[aria-current='true'] .ink-card-excerpt mark) {
+    background: var(--ink-search-current);
+  }
+
+  :where(.ink-search-results .ink-card-title, .ink-search-results .ink-card-meta) {
+    margin: 0;
+    padding: 0.3125rem 0.75rem;
+    border-top: 1px solid color-mix(in srgb, var(--ink-fg) 8%, transparent);
+    background: color-mix(in srgb, var(--ink-fg) 3%, var(--ink-surface));
+    font-size: 0.6875rem;
+    line-height: 1rem;
+  }
+
+  :where(.ink-search-results .ink-card-title) {
+    grid-area: title;
+    padding-right: 0;
+    font-weight: 600;
+  }
+
+  :where(.ink-search-results .ink-card-meta) {
+    grid-area: meta;
+    color: var(--ink-muted-fg);
+    font-weight: 400;
+  }
+
   :where(.ink-select-item:focus-visible) {
     outline: none;
   }
@@ -1675,7 +2349,7 @@
   :where(
     .ink-toolbar button:focus-visible,
     .ink-toolbar select:focus-visible,
-    .ink-select-trigger:focus-visible,
+    .ink-select:focus-visible,
     .ink-toolbar input:focus-visible,
     .ink-thread-actions button:focus-visible,
     .ink-thread-reply textarea:focus-visible,