@celestia-island/hikari 0.55.76 → 0.55.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.76",
+  "version": "0.55.78",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkFilterBar.scss

@@ -0,0 +1,59 @@
+/* HkFilterBar — the standard filter strip chrome (inline + popover). */
+
+.hk-filter-bar {
+  min-width: 0;
+}
+
+/* ── inline: the standardized bare row ─────────────────────────────── */
+.hk-filter-bar:not(.hk-filter-bar-popover) {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-12, 0.75rem);
+  padding: var(--space-12, 0.75rem) var(--space-16, 1rem);
+  border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+  border-radius: var(--radius-md, 0.5rem);
+  background: rgb(var(--color-surface));
+}
+
+.hk-filter-bar-fields {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: var(--space-12, 0.75rem);
+  min-width: 0;
+}
+
+.hk-filter-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  flex-shrink: 0;
+}
+
+/* ── popover: collapsed behind the trigger button ──────────────────── */
+.hk-filter-bar-popover {
+  display: inline-flex;
+}
+
+.hk-filter-bar-count {
+  font-variant-numeric: tabular-nums;
+}
+
+.hk-filter-bar-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12, 0.75rem);
+  min-width: 280px;
+  padding: var(--space-4, 0.25rem);
+}
+
+.hk-filter-bar-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-8, 0.5rem);
+  padding-top: var(--space-8, 0.5rem);
+  border-top: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
+}

package/src/components/HkFilterBar.test.tsx

@@ -0,0 +1,130 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkFilterBar from "./HkFilterBar";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+function emitClick(el: Element) {
+  el.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+}
+
+/** HkPopover teleports its surface to document.body — query the document,
+ *  not the mount container, for everything inside the panel. */
+const panelQuery = (sel: string) => document.body.querySelector(sel);
+
+describe("HkFilterBar inline", () => {
+  it("renders the fields slot inside a search-landmark card row", () => {
+    const c = mount(
+      h(HkFilterBar, { label: "Ledger filters" }, { default: () => h("input", { "data-probe": "" }) }),
+    );
+    const bar = c.querySelector(".hk-filter-bar") as HTMLElement;
+    expect(bar).toBeTruthy();
+    expect(bar.getAttribute("role")).toBe("search");
+    expect(bar.getAttribute("aria-label")).toBe("Ledger filters");
+    expect(bar.className).not.toContain("hk-filter-bar-popover");
+    expect(c.querySelector(".hk-filter-bar-fields input[data-probe]")).toBeTruthy();
+  });
+
+  it("shows the reset button and the active-count badge", () => {
+    const c = mount(h(HkFilterBar, { activeCount: 2 }, { default: () => null }));
+    expect(c.querySelector(".hk-filter-bar-count")?.textContent).toBe("2");
+    const reset = c.querySelector(".hk-filter-bar-actions button") as HTMLButtonElement;
+    expect(reset).toBeTruthy();
+    expect(reset.textContent).toContain("Reset");
+  });
+
+  it("emits reset from the actions column and disables it at zero", () => {
+    const resets: number[] = [];
+    const c = mount(
+      h(HkFilterBar, { activeCount: 1, onReset: () => resets.push(1) }, { default: () => null }),
+    );
+    emitClick(c.querySelector(".hk-filter-bar-actions button")!);
+    expect(resets.length).toBe(1);
+    // zero active filters → the affordance is disabled, not hidden
+    const c2 = mount(h(HkFilterBar, { activeCount: 0 }, { default: () => null }));
+    const reset2 = c2.querySelector(".hk-filter-bar-actions button") as HTMLButtonElement;
+    expect(reset2.disabled).toBe(true);
+  });
+});
+
+describe("HkFilterBar popover", () => {
+  it("starts collapsed behind a trigger button carrying the count", () => {
+    const c = mount(
+      h(HkFilterBar, { mode: "popover", activeCount: 3 }, { default: () => h("input", { "data-probe": "" }) }),
+    );
+    const trigger = c.querySelector(".hk-filter-bar-popover button") as HTMLButtonElement;
+    expect(trigger).toBeTruthy();
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    expect(trigger.getAttribute("aria-haspopup")).toBe("dialog");
+    expect(trigger.textContent).toContain("Filters");
+    expect(trigger.querySelector(".hk-filter-bar-count")?.textContent).toBe("3");
+    // collapsed by default: the panel (and the fields with it) is not mounted
+    expect(panelQuery(".hk-filter-bar-panel")).toBeNull();
+  });
+
+  it("toggling the trigger opens the panel with the fields", async () => {
+    const c = mount(
+      h(HkFilterBar, { mode: "popover" }, { default: () => h("input", { "data-probe": "" }) }),
+    );
+    const trigger = c.querySelector(".hk-filter-bar-popover button") as HTMLButtonElement;
+    emitClick(trigger);
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    const panel = panelQuery(".hk-filter-bar-panel") as HTMLElement;
+    expect(panel).toBeTruthy();
+    expect(panel.querySelector("input[data-probe]")).toBeTruthy();
+  });
+
+  it("apply closes the popover and emits apply; footer carries reset", async () => {
+    const events: string[] = [];
+    const c = mount(
+      h(
+        HkFilterBar,
+        { mode: "popover", activeCount: 1, onApply: () => events.push("apply"), onReset: () => events.push("reset") },
+        { default: () => h("input", { "data-probe": "" }) },
+      ),
+    );
+    emitClick(c.querySelector(".hk-filter-bar-popover button")!);
+    await Promise.resolve();
+    await Promise.resolve();
+    const buttons = Array.from(document.body.querySelectorAll(".hk-filter-bar-footer button")) as HTMLButtonElement[];
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].textContent).toContain("Reset");
+    expect(buttons[1].textContent).toContain("Apply");
+    emitClick(buttons[1]);
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(events).toEqual(["apply"]);
+    expect(
+      (c.querySelector(".hk-filter-bar-popover button") as HTMLButtonElement).getAttribute("aria-expanded"),
+    ).toBe("false");
+  });
+
+  it("showFooter=false drops the footer (live-commit panels)", async () => {
+    const c = mount(
+      h(HkFilterBar, { mode: "popover", showFooter: false }, { default: () => null }),
+    );
+    emitClick(c.querySelector(".hk-filter-bar-popover button")!);
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(panelQuery(".hk-filter-bar-footer")).toBeNull();
+  });
+});

package/src/components/HkFilterBar.tsx

@@ -0,0 +1,143 @@
+import { defineComponent, ref, type PropType } from "vue";
+import { SlidersHorizontal } from "lucide-vue-next";
+
+import HkBadge from "./HkBadge";
+import HkButton from "./HkButton";
+import HkPopover, { type PopupPlacement } from "./HkPopover";
+import { useI18n } from "../i18n/context";
+import "./HkFilterBar.scss";
+
+/**
+ * HkFilterBar — the standard filter strip for list/table pages.
+ *
+ * Two standardized shapes (a page picks one; hand-rolled rows of inputs
+ * are retired in favor of this):
+ *
+ * - `inline` (default) — the bare row, standardized: one card surface,
+ *   aligned fields, and a trailing actions column carrying the active-
+ *   filter count and the reset button. For pages where the filters ARE
+ *   the primary interaction (dense ledgers).
+ * - `popover` — the collapsed shape: one trigger button (icon + label +
+ *   active-count badge) anchoring a popover panel that holds the same
+ *   fields plus an Apply/Reset footer. The default posture for filters —
+ *   they should not permanently occupy a band of the page.
+ *
+ * Fields are the consumer's own controls in the default slot; the bar
+ * owns only the chrome, the count and the apply/reset verbs.
+ *
+ * ```tsx
+ * <HkFilterBar mode="popover" activeCount={n} onApply={search} onReset={clearFilters}>
+ *   <HkSelect … /> <HkInput … />
+ * </HkFilterBar>
+ * ```
+ */
+export default defineComponent({
+  name: "HkFilterBar",
+  props: {
+    mode: { type: String as PropType<"inline" | "popover">, default: "inline" },
+    /** How many filters are currently active (drives the count badge). */
+    activeCount: { type: Number, default: 0 },
+    /** Accessible name / trigger text. Defaults to the localized "Filters". */
+    label: { type: String, default: undefined },
+    /** popover mode: render the Apply/Reset footer. Keep it off only when
+     *  the fields commit live on their own. */
+    showFooter: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    placement: { type: String as PropType<PopupPlacement>, default: "bottom-start" },
+  },
+  emits: {
+    /** popover mode: the Apply button in the footer. */
+    apply: () => true,
+    /** The reset button (inline actions column / popover footer). */
+    reset: () => true,
+  },
+  setup(props, { emit, slots }) {
+    const { t } = useI18n();
+    const open = ref(false);
+    const anchorRef = ref<HTMLElement | null>(null);
+
+    const resetButton = () => (
+      <HkButton
+        variant="ghost"
+        size="sm"
+        disabled={props.disabled || props.activeCount === 0}
+        onClick={() => emit("reset")}
+      >
+        {t("hikari::filterBar.reset", "Reset")}
+      </HkButton>
+    );
+
+    return () => {
+      const label = props.label ?? t("hikari::filterBar.trigger", "Filters");
+
+      if (props.mode === "popover") {
+        return (
+          <div
+            ref={anchorRef}
+            class="hk-filter-bar hk-filter-bar-popover"
+          >
+            <HkButton
+              variant="secondary"
+              size="sm"
+              disabled={props.disabled}
+              ariaLabel={label}
+              aria-expanded={open.value ? "true" : "false"}
+              aria-haspopup="dialog"
+              onClick={() => (open.value = !open.value)}
+            >
+              <SlidersHorizontal size={14} aria-hidden="true" />
+              <span>{label}</span>
+              {props.activeCount > 0 && (
+                <HkBadge size="sm" variant="primary" class="hk-filter-bar-count">
+                  {props.activeCount}
+                </HkBadge>
+              )}
+            </HkButton>
+            <HkPopover
+              modelValue={open.value}
+              onUpdate:modelValue={(v: boolean) => (open.value = v)}
+              anchorRef={anchorRef.value}
+              placement={props.placement}
+              offset={6}
+              title={label}
+            >
+              <div class="hk-filter-bar-panel" data-testid="hk-filter-bar-panel">
+                {slots.default?.()}
+                {props.showFooter && (
+                  <div class="hk-filter-bar-footer">
+                    {resetButton()}
+                    <HkButton
+                      variant="primary"
+                      size="sm"
+                      disabled={props.disabled}
+                      onClick={() => {
+                        open.value = false;
+                        emit("apply");
+                      }}
+                    >
+                      {t("hikari::filterBar.apply", "Apply")}
+                    </HkButton>
+                  </div>
+                )}
+              </div>
+            </HkPopover>
+          </div>
+        );
+      }
+
+      return (
+        <div class="hk-filter-bar" role="search" aria-label={label}>
+          <div class="hk-filter-bar-fields">{slots.default?.()}</div>
+          <div class="hk-filter-bar-actions">
+            {props.activeCount > 0 && (
+              <HkBadge size="sm" variant="primary" class="hk-filter-bar-count">
+                {props.activeCount}
+              </HkBadge>
+            )}
+            {resetButton()}
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkGaugeRing.tsx

@@ -10,6 +10,14 @@ interface RingData {
   trackColor: string;
 }
 
+// Ring colors ride INLINE STYLES, not just the stroke presentation
+// attributes: var() references in a presentation attribute are not
+// substituted on every engine (Firefox drops the whole declaration →
+// stroke:none → an invisible ring; svgwg#1031, 2025-11: browsers still
+// disagree and the spec has not pinned the behavior). Same contract
+// HkProgressRing documents for its segment color.
+
+
 const RING_ANIM_MS = 800;
 
 export default defineComponent({
@@ -95,6 +103,7 @@ export default defineComponent({
                 r={ring.radius}
                 fill="none"
                 stroke={ring.trackColor}
+                style={{ stroke: ring.trackColor }}
                 stroke-width={ring.strokeWidth}
               />
               <circle
@@ -108,7 +117,10 @@ export default defineComponent({
                 stroke-dasharray={ring.circumference}
                 stroke-dashoffset={ring.dashOffset}
                 style={{
-                  transition: props.animate ? "stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1)" : "none",
+                  stroke: ring.color,
+                  transition: props.animate
+                    ? "stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1)"
+                    : "none",
                 }}
               />
             </g>

package/src/components/HkSelectionGrid.scss

@@ -218,3 +218,94 @@
     transition: opacity 200ms ease;
   }
 }
+
+/* ── List layout ─────────────────────────────────────────────────────────
+   The same option vocabulary as full-width rows in ONE column — the
+   picker-list dress (a credential, an image, a disk) rather than a card
+   grid. The check leaves the corner and sits centered on the row's
+   trailing edge, where a list's selection mark belongs. */
+.hk-selection-grid[data-layout="list"] {
+  .hk-selection-grid-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .hk-selection-grid-item {
+    align-items: center;
+    padding-inline-end: var(--space-40, 2.5rem);
+  }
+
+  .hk-selection-grid-check {
+    top: 50%;
+    translate: 0 -50%;
+    inset-inline-end: var(--space-10, 0.625rem);
+  }
+}
+
+/* ── Trailing item actions ───────────────────────────────────────────────
+   Icon buttons on the row's right edge (remove / dismiss …). They never
+   select the item — the component stops their click propagation — and
+   they sit in the row's own trailing cell. */
+.hk-selection-grid-actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.125rem);
+  margin-inline-start: auto;
+  align-self: center;
+  // Keep clear of the corner check in grid layout; the list layout already
+  // reserves that room on the item itself.
+  padding-inline-end: var(--space-16, 1rem);
+}
+
+.hk-selection-grid[data-layout="list"] .hk-selection-grid-actions {
+  padding-inline-end: 0;
+}
+
+.hk-selection-grid-action {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm, 4px);
+  background: transparent;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  cursor: pointer;
+  transition:
+    color 200ms ease,
+    background 200ms ease;
+
+  &:hover:not(:disabled) {
+    color: rgb(var(--color-text));
+    background: rgb(var(--color-text) / 8%);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+}
+
+/* ── Optional selected edge ──────────────────────────────────────────────
+   A thickened primary bar on the item's LEADING side, drawn inside the
+   border box (a pseudo element, so nothing shifts) — the "this is the
+   chosen one" cue some hosts want on top of the ring + check. */
+.hk-selection-grid[data-edge] .hk-selection-grid-item[data-selected]::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  border-start-start-radius: var(--radius-sm, 4px);
+  border-end-start-radius: var(--radius-sm, 4px);
+  background: var(--hi-color-primary, #7aa2f7);
+}

package/src/components/HkSelectionGrid.test.tsx

@@ -165,4 +165,72 @@ describe("HkSelectionGrid adaptive floor mode (minItemWidth)", () => {
       expect(grid.getAttribute("data-cols")).toBe("3");
     }
   });
+
+describe("HkSelectionGrid list layout, actions and edge", () => {
+  it("marks the root with the layout and edge hooks", () => {
+    const container = mount(
+      h(HkSelectionGrid, { items: ITEMS, layout: "list", selectedEdge: true }),
+    );
+    const root = container.querySelector(".hk-selection-grid")!;
+    expect(root.getAttribute("data-layout")).toBe("list");
+    expect(root.hasAttribute("data-edge")).toBe(true);
+  });
+
+  it("defaults to the grid layout with no edge", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS }));
+    const root = container.querySelector(".hk-selection-grid")!;
+    expect(root.getAttribute("data-layout")).toBe("grid");
+    expect(root.hasAttribute("data-edge")).toBe(false);
+  });
+
+  it("renders per-item trailing actions as labelled icon buttons", () => {
+    const items: SelectionGridItem[] = [
+      { id: "a", title: "A", actions: [{ id: "rm", label: "Remove" }] },
+      { id: "b", title: "B" },
+    ];
+    const container = mount(h(HkSelectionGrid, { items }));
+    const buttons = container.querySelectorAll(".hk-selection-grid-action");
+    expect(buttons.length).toBe(1);
+    expect(buttons[0].getAttribute("title")).toBe("Remove");
+    expect(buttons[0].getAttribute("aria-label")).toBe("Remove");
+    // Only the item that declared actions renders the actions cell.
+    const rows = cards(container);
+    expect(rows[0].querySelector(".hk-selection-grid-actions")).not.toBeNull();
+    expect(rows[1].querySelector(".hk-selection-grid-actions")).toBeNull();
+  });
+
+  it("emits action without selecting the item (propagation stopped)", () => {
+    const seen: Array<[string, string]> = [];
+    const items: SelectionGridItem[] = [
+      { id: "a", title: "A", actions: [{ id: "rm", label: "Remove" }] },
+    ];
+    const container = mount(
+      h(HkSelectionGrid, {
+        items,
+        onSelect: (item: SelectionGridItem) => seen.push(["select", item.id]),
+        onAction: (item: SelectionGridItem, action: { id: string }) =>
+          seen.push(["action", `${item.id}:${action.id}`]),
+      }),
+    );
+    (container.querySelector(".hk-selection-grid-action") as HTMLElement).click();
+    expect(seen).toEqual([["action", "a:rm"]]);
+  });
+
+  it("suppresses the action emit when the action is disabled", () => {
+    const seen: string[] = [];
+    const items: SelectionGridItem[] = [
+      { id: "a", title: "A", actions: [{ id: "rm", label: "Remove", disabled: true }] },
+    ];
+    const container = mount(
+      h(HkSelectionGrid, {
+        items,
+        onAction: () => seen.push("action"),
+      }),
+    );
+    const btn = container.querySelector(".hk-selection-grid-action") as HTMLButtonElement;
+    expect(btn.disabled).toBe(true);
+    btn.click();
+    expect(seen).toEqual([]);
+  });
+});
 });

package/src/components/HkSelectionGrid.tsx

@@ -3,6 +3,21 @@ import { defineComponent, type PropType } from "vue";
 
 import "./HkSelectionGrid.scss";
 
+/**
+ * One trailing icon button on an item (e.g. a row's remove / dismiss
+ * affordance). Actions never select the item: their clicks stop the
+ * propagation the item's own handler rides on.
+ */
+export interface SelectionGridAction {
+  id: string;
+  /** Lucide component rendered inside the button. */
+  icon?: ReturnType<typeof defineComponent>;
+  /** Accessible name — becomes the button's `title` (the house tooltip
+   *  bridge upgrades it) and its aria-label. */
+  label: string;
+  disabled?: boolean;
+}
+
 export interface SelectionGridItem {
   id: string;
   title: string;
@@ -10,6 +25,8 @@ export interface SelectionGridItem {
   badge?: string;
   badgeVariant?: string;
   icon?: ReturnType<typeof defineComponent>;
+  /** Trailing icon buttons (right edge), rendered before the check cell. */
+  actions?: SelectionGridAction[];
 }
 
 export type SelectionGridCols = 2 | 3 | 4;
@@ -37,9 +54,18 @@ export default defineComponent({
     groupTitle: { type: String, default: undefined },
     hint: { type: String, default: undefined },
     dense: { type: Boolean, default: false },
+    /** `list` lays the same options as full-width rows in one column (a
+     *  picker list rather than a card grid): the check cell centers on the
+     *  row's trailing edge instead of parking at the top corner. */
+    layout: { type: String as PropType<"grid" | "list">, default: "grid" },
+    /** Optional emphasis for the selected item: a thickened primary edge
+     *  bar on the item's leading side (drawn inside the border box, so the
+     *  geometry never shifts). */
+    selectedEdge: { type: Boolean, default: false },
   },
   emits: {
     select: (_item: SelectionGridItem) => true,
+    action: (_item: SelectionGridItem, _action: SelectionGridAction) => true,
   },
   setup(props, { emit }) {
     return () => {
@@ -54,7 +80,11 @@ export default defineComponent({
         props.minItemWidth > 0;
 
       return (
-        <div class="hk-selection-grid">
+        <div
+          class="hk-selection-grid"
+          data-layout={props.layout}
+          data-edge={props.selectedEdge || undefined}
+        >
           {props.groupTitle && (
             <h4 class="hk-selection-grid-title">{props.groupTitle}</h4>
           )}
@@ -121,6 +151,31 @@ export default defineComponent({
                       </p>
                     )}
                   </div>
+                  {item.actions?.length ? (
+                    <div class="hk-selection-grid-actions">
+                      {item.actions.map((action) => {
+                        const ActionIcon = action.icon;
+                        return (
+                          <button
+                            key={action.id}
+                            type="button"
+                            class="hk-selection-grid-action"
+                            title={action.label}
+                            aria-label={action.label}
+                            disabled={action.disabled || undefined}
+                            onClick={(e: MouseEvent) => {
+                              // An action is not a selection: without this
+                              // the row's own handler fires too.
+                              e.stopPropagation();
+                              if (!action.disabled) emit("action", item, action);
+                            }}
+                          >
+                            {ActionIcon && <ActionIcon size={14} />}
+                          </button>
+                        );
+                      })}
+                    </div>
+                  ) : null}
                 </div>
               );
             })}

package/src/components/HkSettingsDialog.scss

@@ -54,7 +54,18 @@
 
     &:focus-visible {
       outline: 2px solid rgb(var(--color-primary));
-      outline-offset: 1px;
+      // Drawn INSIDE the box: the rail's items sit flush with the rail's
+      // own start edge (the rail carries no start padding) and the rail
+      // scrolls, so an outside ring gets shaved down its inline-start
+      // side — "the selected item's contour is cut on the left" (user
+      // report 2026-09-23). Same reasoning as HSelectionGrid's inset ring.
+      //
+      // HOUSE CONVENTION (this bug class, third occurrence): a focus ring
+      // on a row that sits flush with a scroll container's edge MUST be
+      // drawn inside — `outline-offset: -2px`, or the border + inset-ring
+      // pairing HkSelectionGrid uses. Outside rings belong only on
+      // floating surfaces (popovers, panels) where nothing clips them.
+      outline-offset: -2px;
     }
 
     &:disabled {