tempest-react-sdk 0.74.0 → 0.75.0

package/dist/styles/inverse.css

@@ -145,3 +145,228 @@
     background-color: var(--tempest-bg);
     color: var(--tempest-text);
 }
+
+/* ============================================================
+ * Back to the page — [data-tempest-tone="default"] (or
+ * `<Section tone="default">`) inside an inverse surface: a white `Card`
+ * in a navy hero.
+ *
+ * Custom properties inherit from the parent, so the region cannot read
+ * `:root` again, and scoping the block above away from it (`@scope …
+ * to …`, `:not()`) changes nothing: the region still inherits what the
+ * section declared. So every element a theme is declared on saves the
+ * page's value of each token above in a `--tempest-default-*` twin,
+ * which inherits through the section untouched, and the region reads
+ * its tokens back from the twins — light or dark, the SDK's, a theme's
+ * or the app's own `:root` override. Measured in Chromium on a `Card`,
+ * an `Input` and a `Button`: 0 of 28 computed values differ from the
+ * same trio outside the section, in light, in dark and in a dark
+ * subtree. Generated by `renderInverseSurface`, pinned by the same test.
+ * ============================================================ */
+:where(:is(:root, [data-tempest-theme]):not([data-tempest-tone="inverse"])) {
+    --tempest-default-bg: var(--tempest-bg);
+    --tempest-default-surface: var(--tempest-surface);
+    --tempest-default-surface-2: var(--tempest-surface-2);
+    --tempest-default-surface-3: var(--tempest-surface-3);
+    --tempest-default-border: var(--tempest-border);
+    --tempest-default-border-strong: var(--tempest-border-strong);
+    --tempest-default-text: var(--tempest-text);
+    --tempest-default-text-muted: var(--tempest-text-muted);
+    --tempest-default-text-subtle: var(--tempest-text-subtle);
+    --tempest-default-primary: var(--tempest-primary);
+    --tempest-default-primary-hover: var(--tempest-primary-hover);
+    --tempest-default-primary-active: var(--tempest-primary-active);
+    --tempest-default-primary-foreground: var(--tempest-primary-foreground);
+    --tempest-default-text-on-primary: var(--tempest-text-on-primary);
+    --tempest-default-primary-soft: var(--tempest-primary-soft);
+    --tempest-default-primary-soft-hover: var(--tempest-primary-soft-hover);
+    --tempest-default-primary-on-soft: var(--tempest-primary-on-soft);
+    --tempest-default-focus-ring-color: var(--tempest-focus-ring-color);
+    --tempest-default-selected-indicator: var(--tempest-selected-indicator);
+    --tempest-default-primary-50: var(--tempest-primary-50);
+    --tempest-default-primary-100: var(--tempest-primary-100);
+    --tempest-default-primary-200: var(--tempest-primary-200);
+    --tempest-default-primary-300: var(--tempest-primary-300);
+    --tempest-default-primary-400: var(--tempest-primary-400);
+    --tempest-default-primary-500: var(--tempest-primary-500);
+    --tempest-default-primary-600: var(--tempest-primary-600);
+    --tempest-default-primary-700: var(--tempest-primary-700);
+    --tempest-default-primary-800: var(--tempest-primary-800);
+    --tempest-default-primary-900: var(--tempest-primary-900);
+    --tempest-default-success: var(--tempest-success);
+    --tempest-default-success-fg: var(--tempest-success-fg);
+    --tempest-default-success-bg: var(--tempest-success-bg);
+    --tempest-default-success-border: var(--tempest-success-border);
+    --tempest-default-success-solid: var(--tempest-success-solid);
+    --tempest-default-success-on-solid: var(--tempest-success-on-solid);
+    --tempest-default-warning: var(--tempest-warning);
+    --tempest-default-warning-fg: var(--tempest-warning-fg);
+    --tempest-default-warning-bg: var(--tempest-warning-bg);
+    --tempest-default-warning-border: var(--tempest-warning-border);
+    --tempest-default-warning-solid: var(--tempest-warning-solid);
+    --tempest-default-warning-on-solid: var(--tempest-warning-on-solid);
+    --tempest-default-danger: var(--tempest-danger);
+    --tempest-default-danger-fg: var(--tempest-danger-fg);
+    --tempest-default-danger-bg: var(--tempest-danger-bg);
+    --tempest-default-danger-border: var(--tempest-danger-border);
+    --tempest-default-danger-solid: var(--tempest-danger-solid);
+    --tempest-default-danger-on-solid: var(--tempest-danger-on-solid);
+    --tempest-default-danger-hover: var(--tempest-danger-hover);
+    --tempest-default-info: var(--tempest-info);
+    --tempest-default-info-fg: var(--tempest-info-fg);
+    --tempest-default-info-bg: var(--tempest-info-bg);
+    --tempest-default-info-border: var(--tempest-info-border);
+    --tempest-default-info-solid: var(--tempest-info-solid);
+    --tempest-default-info-on-solid: var(--tempest-info-on-solid);
+    --tempest-default-chart-1: var(--tempest-chart-1);
+    --tempest-default-chart-2: var(--tempest-chart-2);
+    --tempest-default-chart-3: var(--tempest-chart-3);
+    --tempest-default-chart-4: var(--tempest-chart-4);
+    --tempest-default-chart-5: var(--tempest-chart-5);
+    --tempest-default-chart-6: var(--tempest-chart-6);
+    --tempest-default-chart-7: var(--tempest-chart-7);
+    --tempest-default-chart-8: var(--tempest-chart-8);
+    --tempest-default-chart-sequential-1: var(--tempest-chart-sequential-1);
+    --tempest-default-chart-sequential-2: var(--tempest-chart-sequential-2);
+    --tempest-default-chart-sequential-3: var(--tempest-chart-sequential-3);
+    --tempest-default-chart-sequential-4: var(--tempest-chart-sequential-4);
+    --tempest-default-chart-sequential-5: var(--tempest-chart-sequential-5);
+    --tempest-default-chart-sequential-6: var(--tempest-chart-sequential-6);
+    --tempest-default-chart-sequential-7: var(--tempest-chart-sequential-7);
+    --tempest-default-chart-diverging-1: var(--tempest-chart-diverging-1);
+    --tempest-default-chart-diverging-2: var(--tempest-chart-diverging-2);
+    --tempest-default-chart-diverging-3: var(--tempest-chart-diverging-3);
+    --tempest-default-chart-diverging-4: var(--tempest-chart-diverging-4);
+    --tempest-default-chart-diverging-5: var(--tempest-chart-diverging-5);
+    --tempest-default-chart-diverging-6: var(--tempest-chart-diverging-6);
+    --tempest-default-chart-diverging-7: var(--tempest-chart-diverging-7);
+    --tempest-default-chart-diverging-8: var(--tempest-chart-diverging-8);
+    --tempest-default-chart-diverging-9: var(--tempest-chart-diverging-9);
+    --tempest-default-chart-grid: var(--tempest-chart-grid);
+    --tempest-default-chart-axis: var(--tempest-chart-axis);
+    --tempest-default-code-comment: var(--tempest-code-comment);
+    --tempest-default-code-punctuation: var(--tempest-code-punctuation);
+    --tempest-default-code-string: var(--tempest-code-string);
+    --tempest-default-code-number: var(--tempest-code-number);
+    --tempest-default-code-keyword: var(--tempest-code-keyword);
+    --tempest-default-code-literal: var(--tempest-code-literal);
+    --tempest-default-code-function: var(--tempest-code-function);
+    --tempest-default-code-tag: var(--tempest-code-tag);
+    --tempest-default-code-attribute: var(--tempest-code-attribute);
+    --tempest-default-code-property: var(--tempest-code-property);
+    --tempest-default-shadow-xs: var(--tempest-shadow-xs);
+    --tempest-default-shadow-sm: var(--tempest-shadow-sm);
+    --tempest-default-shadow-md: var(--tempest-shadow-md);
+    --tempest-default-shadow-lg: var(--tempest-shadow-lg);
+    --tempest-default-shadow-xl: var(--tempest-shadow-xl);
+    --tempest-default-shadow-inner: var(--tempest-shadow-inner);
+}
+
+:where([data-tempest-tone="default"]:not(:root, [data-tempest-theme])) {
+    --tempest-bg: var(--tempest-default-bg);
+    --tempest-surface: var(--tempest-default-surface);
+    --tempest-surface-2: var(--tempest-default-surface-2);
+    --tempest-surface-3: var(--tempest-default-surface-3);
+    --tempest-border: var(--tempest-default-border);
+    --tempest-border-strong: var(--tempest-default-border-strong);
+    --tempest-text: var(--tempest-default-text);
+    --tempest-text-muted: var(--tempest-default-text-muted);
+    --tempest-text-subtle: var(--tempest-default-text-subtle);
+    --tempest-primary: var(--tempest-default-primary);
+    --tempest-primary-hover: var(--tempest-default-primary-hover);
+    --tempest-primary-active: var(--tempest-default-primary-active);
+    --tempest-primary-foreground: var(--tempest-default-primary-foreground);
+    --tempest-text-on-primary: var(--tempest-default-text-on-primary);
+    --tempest-primary-soft: var(--tempest-default-primary-soft);
+    --tempest-primary-soft-hover: var(--tempest-default-primary-soft-hover);
+    --tempest-primary-on-soft: var(--tempest-default-primary-on-soft);
+    --tempest-focus-ring-color: var(--tempest-default-focus-ring-color);
+    --tempest-selected-indicator: var(--tempest-default-selected-indicator);
+    --tempest-primary-50: var(--tempest-default-primary-50);
+    --tempest-primary-100: var(--tempest-default-primary-100);
+    --tempest-primary-200: var(--tempest-default-primary-200);
+    --tempest-primary-300: var(--tempest-default-primary-300);
+    --tempest-primary-400: var(--tempest-default-primary-400);
+    --tempest-primary-500: var(--tempest-default-primary-500);
+    --tempest-primary-600: var(--tempest-default-primary-600);
+    --tempest-primary-700: var(--tempest-default-primary-700);
+    --tempest-primary-800: var(--tempest-default-primary-800);
+    --tempest-primary-900: var(--tempest-default-primary-900);
+    --tempest-success: var(--tempest-default-success);
+    --tempest-success-fg: var(--tempest-default-success-fg);
+    --tempest-success-bg: var(--tempest-default-success-bg);
+    --tempest-success-border: var(--tempest-default-success-border);
+    --tempest-success-solid: var(--tempest-default-success-solid);
+    --tempest-success-on-solid: var(--tempest-default-success-on-solid);
+    --tempest-warning: var(--tempest-default-warning);
+    --tempest-warning-fg: var(--tempest-default-warning-fg);
+    --tempest-warning-bg: var(--tempest-default-warning-bg);
+    --tempest-warning-border: var(--tempest-default-warning-border);
+    --tempest-warning-solid: var(--tempest-default-warning-solid);
+    --tempest-warning-on-solid: var(--tempest-default-warning-on-solid);
+    --tempest-danger: var(--tempest-default-danger);
+    --tempest-danger-fg: var(--tempest-default-danger-fg);
+    --tempest-danger-bg: var(--tempest-default-danger-bg);
+    --tempest-danger-border: var(--tempest-default-danger-border);
+    --tempest-danger-solid: var(--tempest-default-danger-solid);
+    --tempest-danger-on-solid: var(--tempest-default-danger-on-solid);
+    --tempest-danger-hover: var(--tempest-default-danger-hover);
+    --tempest-info: var(--tempest-default-info);
+    --tempest-info-fg: var(--tempest-default-info-fg);
+    --tempest-info-bg: var(--tempest-default-info-bg);
+    --tempest-info-border: var(--tempest-default-info-border);
+    --tempest-info-solid: var(--tempest-default-info-solid);
+    --tempest-info-on-solid: var(--tempest-default-info-on-solid);
+    --tempest-chart-1: var(--tempest-default-chart-1);
+    --tempest-chart-2: var(--tempest-default-chart-2);
+    --tempest-chart-3: var(--tempest-default-chart-3);
+    --tempest-chart-4: var(--tempest-default-chart-4);
+    --tempest-chart-5: var(--tempest-default-chart-5);
+    --tempest-chart-6: var(--tempest-default-chart-6);
+    --tempest-chart-7: var(--tempest-default-chart-7);
+    --tempest-chart-8: var(--tempest-default-chart-8);
+    --tempest-chart-sequential-1: var(--tempest-default-chart-sequential-1);
+    --tempest-chart-sequential-2: var(--tempest-default-chart-sequential-2);
+    --tempest-chart-sequential-3: var(--tempest-default-chart-sequential-3);
+    --tempest-chart-sequential-4: var(--tempest-default-chart-sequential-4);
+    --tempest-chart-sequential-5: var(--tempest-default-chart-sequential-5);
+    --tempest-chart-sequential-6: var(--tempest-default-chart-sequential-6);
+    --tempest-chart-sequential-7: var(--tempest-default-chart-sequential-7);
+    --tempest-chart-diverging-1: var(--tempest-default-chart-diverging-1);
+    --tempest-chart-diverging-2: var(--tempest-default-chart-diverging-2);
+    --tempest-chart-diverging-3: var(--tempest-default-chart-diverging-3);
+    --tempest-chart-diverging-4: var(--tempest-default-chart-diverging-4);
+    --tempest-chart-diverging-5: var(--tempest-default-chart-diverging-5);
+    --tempest-chart-diverging-6: var(--tempest-default-chart-diverging-6);
+    --tempest-chart-diverging-7: var(--tempest-default-chart-diverging-7);
+    --tempest-chart-diverging-8: var(--tempest-default-chart-diverging-8);
+    --tempest-chart-diverging-9: var(--tempest-default-chart-diverging-9);
+    --tempest-chart-grid: var(--tempest-default-chart-grid);
+    --tempest-chart-axis: var(--tempest-default-chart-axis);
+    --tempest-code-comment: var(--tempest-default-code-comment);
+    --tempest-code-punctuation: var(--tempest-default-code-punctuation);
+    --tempest-code-string: var(--tempest-default-code-string);
+    --tempest-code-number: var(--tempest-default-code-number);
+    --tempest-code-keyword: var(--tempest-default-code-keyword);
+    --tempest-code-literal: var(--tempest-default-code-literal);
+    --tempest-code-function: var(--tempest-default-code-function);
+    --tempest-code-tag: var(--tempest-default-code-tag);
+    --tempest-code-attribute: var(--tempest-default-code-attribute);
+    --tempest-code-property: var(--tempest-default-code-property);
+    --tempest-shadow-xs: var(--tempest-default-shadow-xs);
+    --tempest-shadow-sm: var(--tempest-default-shadow-sm);
+    --tempest-shadow-md: var(--tempest-default-shadow-md);
+    --tempest-shadow-lg: var(--tempest-default-shadow-lg);
+    --tempest-shadow-xl: var(--tempest-default-shadow-xl);
+    --tempest-shadow-inner: var(--tempest-default-shadow-inner);
+}
+
+:where([data-tempest-tone="default"]) {
+    color-scheme: light;
+    background-color: var(--tempest-bg);
+    color: var(--tempest-text);
+}
+
+:where(:is([data-tempest-theme="dark"]) [data-tempest-tone="default"]) {
+    color-scheme: dark;
+}

package/dist/styles/navigation.css

@@ -3,6 +3,7 @@
 .tempest_bar_SHqWS.tempest_centered_S0CCw{grid-template-columns:1fr auto 1fr}
 .tempest_bar_SHqWS.tempest_surface_fusKb{background:var(--tempest-surface);color:var(--tempest-text)}
 .tempest_bar_SHqWS.tempest_primary_QcCyN{background:var(--tempest-primary);color:var(--tempest-primary-foreground)}
+.tempest_bar_SHqWS.tempest_inverse_Icool{background:var(--tempest-bg);color:var(--tempest-text)}
 .tempest_bar_SHqWS.tempest_transparent_uGrsu{color:inherit;background:0 0}
 .tempest_bar_SHqWS.tempest_bordered_5M9FZ{border-bottom:1px solid var(--tempest-border)}
 .tempest_bar_SHqWS.tempest_sticky_DStUO{z-index:30;position:sticky;top:0}
@@ -32,26 +33,26 @@
 .tempest_current_JdlcS{color:var(--tempest-text);font-weight:var(--tempest-weight-semibold)}
 .tempest_separator_zGWyJ{color:var(--tempest-text-subtle);-webkit-user-select:none;user-select:none;margin:0 2px}
 .tempest_root_-w3-j{width:100%;font-family:var(--tempest-font-sans);position:relative}
-.tempest_root_-w3-j:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
+.tempest_root_-w3-j:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:var(--tempest-focus-ring-offset)}
 .tempest_viewport_n0hzM{border-radius:var(--tempest-radius-lg);overflow:hidden}
 .tempest_track_5PA8h{transition:transform var(--tempest-duration-base) var(--tempest-ease-out);display:flex}
 .tempest_slide_fhfjg{flex:0 0 100%;min-width:0}
 .tempest_arrow_S92Lt{background-color:var(--tempest-bg);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-full);width:2rem;height:2rem;box-shadow:var(--tempest-shadow-md);color:var(--tempest-text);font-size:var(--tempest-text-xl);cursor:pointer;transition:var(--tempest-transition-color);justify-content:center;align-items:center;line-height:1;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}
 @media (hover:hover) and (pointer:fine){.tempest_arrow_S92Lt:hover:not(:disabled){background-color:var(--tempest-surface)}}
-.tempest_arrow_S92Lt:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
+.tempest_arrow_S92Lt:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:var(--tempest-focus-ring-offset)}
 .tempest_arrow_S92Lt:disabled{opacity:.4;cursor:not-allowed}
 .tempest_prev_X8whU{left:var(--tempest-space-2)}
 .tempest_next_jBRSz{right:var(--tempest-space-2)}
 .tempest_dots_fL3Hr{justify-content:center;align-items:center;gap:var(--tempest-space-2);margin-top:var(--tempest-space-3);display:flex}
 .tempest_dot_vEB56{background-color:var(--tempest-border);border-radius:var(--tempest-radius-full);cursor:pointer;width:.5rem;height:.5rem;transition:var(--tempest-transition-color);border:none;padding:0}
 .tempest_dotActive_OSSUg{background-color:var(--tempest-primary)}
-.tempest_dot_vEB56:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
+.tempest_dot_vEB56:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:var(--tempest-focus-ring-offset)}
 @media (prefers-reduced-motion:reduce){.tempest_track_5PA8h{transition:none}}
 .tempest_root_PGUO2{align-items:center;gap:var(--tempest-space-1);font-family:var(--tempest-font-sans);font-size:var(--tempest-text-sm);display:flex}
 .tempest_menu_hEVLT{position:relative}
 .tempest_trigger_ZlZBx{padding:var(--tempest-space-1) var(--tempest-space-3);border-radius:var(--tempest-radius-sm);color:var(--tempest-text);font-family:inherit;font-size:inherit;line-height:var(--tempest-leading-snug);cursor:pointer;transition:var(--tempest-transition-color);background:0 0;border:none;align-items:center;display:inline-flex}
 @media (hover:hover) and (pointer:fine){.tempest_trigger_ZlZBx:hover{background-color:var(--tempest-surface)}}
-.tempest_trigger_ZlZBx:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
+.tempest_trigger_ZlZBx:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:var(--tempest-focus-ring-offset)}
 .tempest_triggerOpen_Hpfbu{background-color:var(--tempest-surface)}
 .tempest_panel_6ta6u{z-index:var(--tempest-z-dropdown);background-color:var(--tempest-bg);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-lg);min-width:200px;max-width:360px;box-shadow:var(--tempest-shadow-lg);padding:var(--tempest-space-1);animation:tempest_tempest-menubar-in_gOQQD var(--tempest-duration-fast) var(--tempest-ease-out);margin:0;list-style:none;position:absolute;top:calc(100% + 4px);left:0}
 .tempest_item_wM-61{justify-content:space-between;align-items:center;gap:var(--tempest-space-4);width:100%;padding:var(--tempest-space-2) var(--tempest-space-3);border-radius:var(--tempest-radius-sm);color:var(--tempest-text);font-family:inherit;font-size:var(--tempest-text-base);line-height:var(--tempest-leading-snug);text-align:left;cursor:pointer;transition:var(--tempest-transition-color);background:0 0;border:none;display:flex}
@@ -67,6 +68,7 @@
 .tempest_navbar_Ey25T{align-items:center;gap:var(--tempest-space-4);padding:var(--tempest-space-3) var(--tempest-space-4);width:100%;min-height:56px;font-family:var(--tempest-font-sans);padding-top:max(var(--tempest-space-3), env(safe-area-inset-top,0));display:flex}
 .tempest_navbar_Ey25T.tempest_surface_xyKhM{background:var(--tempest-surface);color:var(--tempest-text)}
 .tempest_navbar_Ey25T.tempest_primary_w3ft-{background:var(--tempest-primary);color:var(--tempest-primary-foreground)}
+.tempest_navbar_Ey25T.tempest_inverse_f26-i{background:var(--tempest-bg);color:var(--tempest-text)}
 .tempest_navbar_Ey25T.tempest_transparent_N1vMR{color:inherit;background:0 0}
 .tempest_navbar_Ey25T.tempest_bordered_HD49R{border-bottom:1px solid var(--tempest-border)}
 .tempest_navbar_Ey25T.tempest_sticky_0XsOs{z-index:30;-webkit-backdrop-filter:saturate(180%)blur(8px);backdrop-filter:saturate(180%)blur(8px);position:sticky;top:0}
@@ -78,7 +80,7 @@
 .tempest_item_9RzZ7{position:relative}
 .tempest_link_67ULr,.tempest_trigger_2gBDu{align-items:center;gap:var(--tempest-space-1);padding:var(--tempest-space-2) var(--tempest-space-3);border-radius:var(--tempest-radius-sm);color:var(--tempest-text);font-family:inherit;font-size:inherit;line-height:var(--tempest-leading-snug);text-align:left;cursor:pointer;transition:var(--tempest-transition-color);background:0 0;border:none;text-decoration:none;display:inline-flex}
 @media (hover:hover) and (pointer:fine){.tempest_link_67ULr:hover,.tempest_trigger_2gBDu:hover{background-color:var(--tempest-surface)}}
-.tempest_link_67ULr:focus-visible,.tempest_trigger_2gBDu:focus-visible{outline:2px solid var(--tempest-primary);outline-offset:2px}
+.tempest_link_67ULr:focus-visible,.tempest_trigger_2gBDu:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:var(--tempest-focus-ring-offset)}
 .tempest_panel_N2ujp{z-index:var(--tempest-z-dropdown);background-color:var(--tempest-bg);border:1px solid var(--tempest-border);border-radius:var(--tempest-radius-lg);min-width:180px;max-width:320px;box-shadow:var(--tempest-shadow-lg);padding:var(--tempest-space-1);animation:tempest_tempest-nav-menu-in_8tNCR var(--tempest-duration-fast) var(--tempest-ease-out);margin:0;list-style:none;position:absolute;top:calc(100% + 4px);left:0}
 .tempest_subItem_LjtO7{display:block}
 .tempest_subItem_LjtO7 .tempest_link_67ULr{width:100%}
@@ -91,7 +93,7 @@
 .tempest_footer_ojpGC{width:100%;padding-top:var(--tempest-space-2);justify-content:center;align-items:center;margin-top:auto;display:flex}
 .tempest_item_XEXI9{width:100%;padding:var(--tempest-space-2) var(--tempest-space-1);border-radius:var(--tempest-radius-md);cursor:pointer;color:var(--tempest-text-muted);font-size:var(--tempest-text-2xs);transition:color var(--tempest-duration-fast,.12s) var(--tempest-ease-out,ease-out), background var(--tempest-duration-fast,.12s) var(--tempest-ease-out,ease-out);background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex}
 .tempest_item_XEXI9:hover{color:var(--tempest-text);background:var(--tempest-surface-2)}
-.tempest_item_XEXI9:focus-visible{outline:var(--tempest-focus-ring-width,2px) solid var(--tempest-focus-ring-color,var(--tempest-primary));outline-offset:var(--tempest-focus-ring-offset,2px)}
+.tempest_item_XEXI9:focus-visible{outline:var(--tempest-focus-ring-width,2px) solid var(--tempest-focus-ring-color,currentColor);outline-offset:var(--tempest-focus-ring-offset,2px)}
 .tempest_item_XEXI9.tempest_active_U3hSU{color:var(--tempest-primary-on-soft);background:var(--tempest-primary-soft)}
 .tempest_item_XEXI9:disabled{opacity:.4;cursor:not-allowed}
 .tempest_iconWrap_iVwlb{display:inline-flex;position:relative}