tempest-react-sdk 0.73.0 → 0.74.0

package/dist/styles/inverse.css

@@ -0,0 +1,147 @@
+/* ============================================================
+ * Inverse surface — opt-in.
+ *
+ *   import "tempest-react-sdk/styles/inverse.css";
+ *
+ * Activated via [data-tempest-tone="inverse"] on any element (or
+ * `<Section tone="inverse">`): a hero, a call-to-action band, a footer
+ * painted in the brand colour.
+ *
+ * The components inside such a section must invert — a light action
+ * button labelled in the brand, light text, a ring that separates from
+ * the fill — and overriding a handful of tokens by hand leaves the rest
+ * on the page's values. Measured over a navy band with the eight-token
+ * override #409 started from: the inherited `--tempest-text-subtle` sat
+ * at 2.75:1, `--tempest-danger` at 2.12:1, the selected indicator at
+ * 2.01:1, and a `Card` put white text on `--tempest-surface` at 1.05:1.
+ *
+ * So the block redefines every colour token the components read, as
+ * literal colours rather than references to the ramp: the section paints
+ * the same under the light and the dark page scheme. The values are the
+ * output of `createTheme`'s inverse surface for the SDK's own `#0066ff`
+ * — whose fill is the ramp's `800`, because white on the `500` itself
+ * measures 4.83:1 and leaves no room for muted and subtle text to clear
+ * AA, on the fill or on a region of the band lifted 0.1 toward the ink
+ * (a radial glow, a hover). `src/theme/inverse-surface.test.ts` pins this
+ * block to the generator; a brand gets its own block from
+ * `createTheme({ primary, inverse: createInverseSurface })`, which needs no
+ * import.
+ *
+ * Why a separate file and not part of `colors.css`, `tokens.css` or
+ * `styles.css`: most apps never paint a section in the brand, and the
+ * block is 96 declarations — measured, it took the `tokens.css` +
+ * `scoped.css` foundation from 3.05 to 3.44 kB brotli for everyone. It
+ * stays out of `styles.css` too, so there is one rule for every entry
+ * point: the surface exists when this file (or a generated theme with
+ * `inverse: createInverseSurface`) is loaded. Without either, the attribute matches
+ * nothing and the section renders with the page's tokens — legible, just
+ * not inverted.
+ *
+ * The `:where()` rule paints the fill and the ink on the element itself,
+ * at zero specificity, so the attribute alone is a complete section and
+ * any background the app sets on the same element still wins.
+ * ============================================================ */
+[data-tempest-tone="inverse"] {
+    color-scheme: dark;
+    --tempest-bg: #042e75;
+    --tempest-surface: #012361;
+    --tempest-surface-2: #011949;
+    --tempest-surface-3: #000f34;
+    --tempest-border: #305ba6;
+    --tempest-border-strong: #436fbc;
+    --tempest-text: #ffffff;
+    --tempest-text-muted: #d0e1fd;
+    --tempest-text-subtle: #b2c5e7;
+    --tempest-primary: #ffffff;
+    --tempest-primary-hover: #e6efff;
+    --tempest-primary-active: #d0dff9;
+    --tempest-primary-foreground: #042e75;
+    --tempest-text-on-primary: #042e75;
+    --tempest-primary-soft: #18428b;
+    --tempest-primary-soft-hover: #244e98;
+    --tempest-primary-on-soft: #abc9fa;
+    --tempest-focus-ring-color: #9dc1fd;
+    --tempest-selected-indicator: #9dc1fd;
+    --tempest-primary-50: #131f33;
+    --tempest-primary-100: #112953;
+    --tempest-primary-200: #063688;
+    --tempest-primary-300: #0e4db6;
+    --tempest-primary-400: #0562f1;
+    --tempest-primary-500: #3e83fd;
+    --tempest-primary-600: #6fa1f9;
+    --tempest-primary-700: #95bbfb;
+    --tempest-primary-800: #bbd3fb;
+    --tempest-primary-900: #dbe8fd;
+    --tempest-success: #71d888;
+    --tempest-success-fg: #6cd383;
+    --tempest-success-bg: #142317;
+    --tempest-success-border: #0d4a20;
+    --tempest-success-solid: #16a34a;
+    --tempest-success-on-solid: #1f0606;
+    --tempest-warning: #feb57c;
+    --tempest-warning-fg: #fbaa6a;
+    --tempest-warning-bg: #291b11;
+    --tempest-warning-border: #613305;
+    --tempest-warning-solid: #d97706;
+    --tempest-warning-on-solid: #1f0606;
+    --tempest-danger: #fcb0a6;
+    --tempest-danger-fg: #fd8d81;
+    --tempest-danger-bg: #2f1715;
+    --tempest-danger-border: #6d0d0d;
+    --tempest-danger-solid: #dc2626;
+    --tempest-danger-on-solid: #ffffff;
+    --tempest-danger-hover: #bd0011;
+    --tempest-info: #a4c4ff;
+    --tempest-info-fg: #83acfc;
+    --tempest-info-bg: #151f31;
+    --tempest-info-border: #0f3078;
+    --tempest-info-solid: #2563eb;
+    --tempest-info-on-solid: #ffffff;
+    --tempest-chart-1: #60a5fa;
+    --tempest-chart-2: #4ade80;
+    --tempest-chart-3: #fbbf24;
+    --tempest-chart-4: #a78bfa;
+    --tempest-chart-5: #f472b6;
+    --tempest-chart-6: #22d3ee;
+    --tempest-chart-7: #fb923c;
+    --tempest-chart-8: #2dd4bf;
+    --tempest-chart-sequential-1: #152849;
+    --tempest-chart-sequential-2: #163d83;
+    --tempest-chart-sequential-3: #1c55b8;
+    --tempest-chart-sequential-4: #2e70e5;
+    --tempest-chart-sequential-5: #5591fa;
+    --tempest-chart-sequential-6: #89b3fa;
+    --tempest-chart-sequential-7: #b9d2fd;
+    --tempest-chart-diverging-1: #0844a7;
+    --tempest-chart-diverging-2: #3c6fc9;
+    --tempest-chart-diverging-3: #729ae0;
+    --tempest-chart-diverging-4: #afc5eb;
+    --tempest-chart-diverging-5: #000f34;
+    --tempest-chart-diverging-6: #d8c199;
+    --tempest-chart-diverging-7: #be9240;
+    --tempest-chart-diverging-8: #936a0e;
+    --tempest-chart-diverging-9: #64480b;
+    --tempest-chart-grid: #305ba6;
+    --tempest-chart-axis: #b2c5e7;
+    --tempest-code-comment: #a1aab2;
+    --tempest-code-punctuation: #9faab4;
+    --tempest-code-string: #76b784;
+    --tempest-code-number: #e79476;
+    --tempest-code-keyword: #a39ffa;
+    --tempest-code-literal: #ea9090;
+    --tempest-code-function: #4eb3e7;
+    --tempest-code-tag: #e391b8;
+    --tempest-code-attribute: #59b9b8;
+    --tempest-code-property: #59b9b8;
+    --tempest-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --tempest-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --tempest-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
+    --tempest-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
+    --tempest-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
+    --tempest-shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.06);
+}
+
+:where([data-tempest-tone="inverse"]) {
+    background-color: var(--tempest-bg);
+    color: var(--tempest-text);
+}

package/dist/styles/layout.css

@@ -1,6 +1,6 @@
 /* Generated by scripts/split-css.mjs — do not edit. */
 .tempest_shell_-xp0O{background:var(--tempest-bg);width:100%;min-height:100dvh;color:var(--tempest-text);font-family:var(--tempest-font-sans);flex-direction:column;display:flex}
-.tempest_navbar_liTKV{flex:none}
+.tempest_navbar_liTKV{display:contents}
 .tempest_row_PE41P{flex:auto;width:100%;min-height:0;display:flex}
 .tempest_sidebar_wyx-V{flex:none}
 .tempest_main_O3GFv{flex:auto;min-width:0;overflow-x:auto}
@@ -61,12 +61,6 @@
 .tempest_page_THNNc{width:100%;min-height:100%;font-family:var(--tempest-font-sans);color:var(--tempest-text);flex-direction:column;display:flex}
 .tempest_padded_bzjoF{padding:var(--tempest-space-5) var(--tempest-space-4)}
 @media (width>=768px){.tempest_padded_bzjoF{padding:var(--tempest-space-6) var(--tempest-space-6)}}
-.tempest_header_PZEzk{align-items:flex-start;gap:var(--tempest-space-4);margin-bottom:var(--tempest-space-5);flex-wrap:wrap;display:flex}
-.tempest_headerText_qYXFI{flex:auto;min-width:0}
-.tempest_eyebrow_651RV{font-size:var(--tempest-text-xs);color:var(--tempest-text-muted);margin-bottom:var(--tempest-space-1)}
-.tempest_title_2oGnT{font-size:var(--tempest-text-2xl);font-weight:var(--tempest-weight-bold);line-height:var(--tempest-leading-tight);margin:0}
-.tempest_description_YzmWl{margin:var(--tempest-space-2) 0 0;font-size:var(--tempest-text-sm);color:var(--tempest-text-muted)}
-.tempest_actions_-rB3U{gap:var(--tempest-space-2);flex-wrap:wrap;flex:none;display:flex}
 .tempest_toolbar_sA7sD{margin-bottom:var(--tempest-space-4)}
 .tempest_content_RCB4b{flex:auto;min-width:0}
 .tempest_footer_540pQ{margin-top:var(--tempest-space-6);padding-top:var(--tempest-space-4);border-top:1px solid var(--tempest-border)}
@@ -117,6 +111,14 @@
 .tempest_root_cWKqF::-webkit-scrollbar-thumb{background-color:var(--tempest-border);border-radius:var(--tempest-radius-full);background-clip:padding-box;border:2px solid #0000}
 @media (hover:hover) and (pointer:fine){.tempest_root_cWKqF::-webkit-scrollbar-thumb:hover{background-color:var(--tempest-text-muted)}}
 .tempest_root_cWKqF:focus-visible{outline:var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);outline-offset:2px}
+.tempest_header_38yhB{align-items:flex-start;gap:var(--tempest-space-4);margin-bottom:var(--tempest-space-5);flex-wrap:wrap;display:flex}
+.tempest_headerText_3YDF-{flex:auto;min-width:0}
+.tempest_eyebrow_slLcy{font-size:var(--tempest-text-xs);color:var(--tempest-text-muted);margin-bottom:var(--tempest-space-1)}
+.tempest_title_nY6QC{font-size:var(--tempest-text-2xl);font-weight:var(--tempest-weight-bold);line-height:var(--tempest-leading-tight);margin:0}
+.tempest_description_-Gbs9{margin:var(--tempest-space-2) 0 0;font-size:var(--tempest-text-sm);color:var(--tempest-text-muted)}
+.tempest_actions_dzFrP{gap:var(--tempest-space-2);flex-wrap:wrap;flex:none;display:flex}
+.tempest_center_lDAVK{text-align:center;flex-direction:column;align-items:center}
+.tempest_center_lDAVK .tempest_actions_dzFrP{justify-content:center}
 .tempest_spacer_okdOd.tempest_both_85qSF{flex:auto}
 .tempest_spacer_okdOd.tempest_x_QiU2B{flex:1 0 auto;width:auto}
 .tempest_spacer_okdOd.tempest_y_hTtCp{flex:1 0 auto;height:auto}

package/dist/styles/manifest.json

@@ -75,6 +75,9 @@
     "Button": [
       "component/Button.css"
     ],
+    "ButtonSlot": [
+      "component/Button.css"
+    ],
     "CEPInput": [
       "component/Input.css"
     ],
@@ -308,7 +311,8 @@
       "component/OfflineIndicator.css"
     ],
     "Page": [
-      "component/Page.css"
+      "component/Page.css",
+      "component/SectionHeader.css"
     ],
     "Pagination": [
       "component/Pagination.css"
@@ -350,6 +354,9 @@
     "Resizable": [
       "component/Resizable.css"
     ],
+    "Reveal": [
+      "component/Reveal.css"
+    ],
     "SafeArea": [
       "component/SafeArea.css"
     ],
@@ -362,6 +369,12 @@
     "SearchBar": [
       "component/SearchBar.css"
     ],
+    "Section": [
+      "component/SectionHeader.css"
+    ],
+    "SectionHeader": [
+      "component/SectionHeader.css"
+    ],
     "SegmentedControl": [
       "component/SegmentedControl.css"
     ],

package/dist/styles/overlay.css

@@ -56,8 +56,8 @@
 .tempest_md_gvyR7{max-width:560px}
 .tempest_lg_BgB1a{max-width:800px}
 .tempest_xl_MR-68{max-width:1024px}
-.tempest_size2xl_-PH9e{max-width:1280px}
-.tempest_size3xl_iqDwN{max-width:1440px}
+.tempest_size2Xl_oLq5O{max-width:1280px}
+.tempest_size3Xl_YzlSH{max-width:1440px}
 .tempest_fullscreen_o84Xi{border-radius:0;width:100%;max-width:100%;height:100%;max-height:100dvh}
 @media (width<=639.98px){.tempest_fullscreenOnMobile_0bDwe{border-radius:0;width:100%;max-width:100%;height:100%;max-height:100dvh}.tempest_dialog_ptM-K:not(.tempest_fullscreen_o84Xi):not(.tempest_fullscreenOnMobile_0bDwe){border-radius:var(--tempest-radius-lg)}.tempest_body_lVhql{padding:var(--tempest-space-4)}.tempest_header_ILG9i,.tempest_footer_rro2w{padding:var(--tempest-space-3) var(--tempest-space-4)}}
 .tempest_header_ILG9i{justify-content:space-between;align-items:center;gap:var(--tempest-space-3);padding:var(--tempest-space-4) var(--tempest-space-5);border-bottom:1px solid var(--tempest-border);display:flex}

package/dist/styles/utility.css

@@ -35,5 +35,13 @@
 .tempest_image_Zq9Zs{max-width:100%;height:auto;display:block}
 .tempest_wrapper_SiXGR{border-radius:var(--tempest-radius-md);line-height:0;display:inline-block;overflow:hidden}
 .tempest_svg_EblZu{width:100%;height:100%;display:block}
+.tempest_reveal_jBgJJ[data-state=hidden]{opacity:0}
+.tempest_reveal_jBgJJ[data-state=hidden][data-variant=up]{transform:translate3d(0, var(--tempest-reveal-distance,1.5rem), 0)}
+.tempest_reveal_jBgJJ[data-state=hidden][data-variant=down]{transform:translate3d(0, calc(-1 * var(--tempest-reveal-distance,1.5rem)), 0)}
+.tempest_reveal_jBgJJ[data-state=hidden][data-variant=left]{transform:translate3d(var(--tempest-reveal-distance,1.5rem), 0, 0)}
+.tempest_reveal_jBgJJ[data-state=hidden][data-variant=right]{transform:translate3d(calc(-1 * var(--tempest-reveal-distance,1.5rem)), 0, 0)}
+.tempest_reveal_jBgJJ[data-state=hidden][data-variant=scale]{transform:scale(var(--tempest-reveal-scale,.95))}
+.tempest_reveal_jBgJJ[data-state=shown]{opacity:1;transition:opacity var(--tempest-reveal-duration,var(--tempest-duration-slower)) var(--tempest-reveal-easing,var(--tempest-ease-out)), transform var(--tempest-reveal-duration,var(--tempest-duration-slower)) var(--tempest-reveal-easing,var(--tempest-ease-emphasized));transition-delay:var(--tempest-reveal-delay,0s);transform:none}
+@media (prefers-reduced-motion:reduce){.tempest_reveal_jBgJJ[data-state][data-variant]{opacity:1;transition:none;transform:none}}
 .tempest_clamp_r43C-{-webkit-line-clamp:var(--tempest-clamp-lines,1);line-clamp:var(--tempest-clamp-lines,1);text-overflow:ellipsis;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
 .tempest_hidden_k7p-e{clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}