@nebulr-group/bridge-svelte 0.9.2 → 0.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/client/components/sdk-auth/BridgeAuthRoutes.svelte +9 -6
  2. package/dist/client/components/subscription/BridgeBillingNotice.svelte +124 -121
  3. package/dist/client/components/subscription/BridgeBillingRoutes.svelte +56 -53
  4. package/dist/client/components/subscription/BridgePaywall.svelte +32 -29
  5. package/dist/client/components/subscription/BridgePaywallPage.svelte +15 -12
  6. package/dist/client/components/subscription/BridgeQuotaBanner.svelte +73 -70
  7. package/dist/client/components/subscription/BridgeSubscriptionStatus.svelte +55 -52
  8. package/dist/styles.css +1438 -1393
  9. package/package.json +1 -1
package/dist/client/components/subscription/BridgeQuotaBanner.svelte CHANGED
@@ -152,87 +152,90 @@
152
152
  {/if}
153
153
 
154
154
  <style>
155
- .bridge-quota-banner {
156
- display: flex;
157
- align-items: center;
158
- justify-content: space-between;
159
- gap: 1rem;
160
- padding: 0.75rem 1rem;
161
- border-radius: 0.5rem;
162
- font: inherit;
163
- transition: opacity 280ms ease, transform 320ms ease;
164
- }
155
+ /* TBP-814 — in the `bridge` layer with the stylesheet, so any CSS of the app wins. */
156
+ @layer bridge {
157
+ .bridge-quota-banner {
158
+ display: flex;
159
+ align-items: center;
160
+ justify-content: space-between;
161
+ gap: 1rem;
162
+ padding: 0.75rem 1rem;
163
+ border-radius: 0.5rem;
164
+ font: inherit;
165
+ transition: opacity 280ms ease, transform 320ms ease;
166
+ }
165
167
 
166
- .bqb-content {
167
- display: flex;
168
- flex-direction: column;
169
- gap: 0.25rem;
170
- flex: 1 1 auto;
171
- }
168
+ .bqb-content {
169
+ display: flex;
170
+ flex-direction: column;
171
+ gap: 0.25rem;
172
+ flex: 1 1 auto;
173
+ }
172
174
 
173
- .bqb-title {
174
- font-weight: 600;
175
- }
175
+ .bqb-title {
176
+ font-weight: var(--bridge-font-weight-heading, 600);
177
+ }
176
178
 
177
- .bqb-body {
178
- font-size: 0.875rem;
179
- opacity: 0.85;
180
- }
179
+ .bqb-body {
180
+ font-size: calc(0.875 * var(--bridge-text-base, 1rem));
181
+ opacity: 0.85;
182
+ }
181
183
 
182
- .bqb-meter {
183
- margin-top: 0.25rem;
184
- width: 100%;
185
- height: 0.375rem;
186
- background: color-mix(in srgb, currentColor 15%, transparent);
187
- border-radius: 999px;
188
- overflow: hidden;
189
- }
184
+ .bqb-meter {
185
+ margin-top: 0.25rem;
186
+ width: 100%;
187
+ height: 0.375rem;
188
+ background: color-mix(in srgb, currentColor 15%, transparent);
189
+ border-radius: 999px;
190
+ overflow: hidden;
191
+ }
190
192
 
191
- .bqb-meter-fill {
192
- height: 100%;
193
- background: currentColor;
194
- border-radius: 999px;
195
- transition: width 320ms ease;
196
- }
193
+ .bqb-meter-fill {
194
+ height: 100%;
195
+ background: currentColor;
196
+ border-radius: 999px;
197
+ transition: width 320ms ease;
198
+ }
197
199
 
198
- .bqb-cta {
199
- padding: 0.5rem 1rem;
200
- border-radius: 0.375rem;
201
- border: 1px solid currentColor;
202
- background: transparent;
203
- color: inherit;
204
- font: inherit;
205
- font-weight: 500;
206
- cursor: pointer;
207
- flex: 0 0 auto;
208
- }
200
+ .bqb-cta {
201
+ padding: 0.5rem 1rem;
202
+ border-radius: 0.375rem;
203
+ border: 1px solid currentColor;
204
+ background: transparent;
205
+ color: inherit;
206
+ font: inherit;
207
+ font-weight: var(--bridge-font-weight-button, 500);
208
+ cursor: pointer;
209
+ flex: 0 0 auto;
210
+ }
209
211
 
210
- .bqb-cta:hover {
211
- background: currentColor;
212
- color: var(--bridge-bg, #ffffff);
213
- }
212
+ .bqb-cta:hover {
213
+ background: currentColor;
214
+ color: var(--bridge-bg, #ffffff);
215
+ }
214
216
 
215
- /* Chassis — rail only for US-11. */
216
- .bqb-chassis-rail {
217
- border-left: 4px solid currentColor;
218
- border-radius: 0 0.5rem 0.5rem 0;
219
- }
217
+ /* Chassis — rail only for US-11. */
218
+ .bqb-chassis-rail {
219
+ border-left: 4px solid currentColor;
220
+ border-radius: 0 0.5rem 0.5rem 0;
221
+ }
220
222
 
221
- /* Severity tokens — mirror BridgeBillingNotice for visual consistency. */
222
- .bqb-severity-warn {
223
- background: var(--bridge-alert-warning-bg, #fffbeb);
224
- color: var(--bridge-alert-warning-fg, #92400e);
225
- }
223
+ /* Severity tokens — mirror BridgeBillingNotice for visual consistency. */
224
+ .bqb-severity-warn {
225
+ background: var(--bridge-alert-warning-bg, #fffbeb);
226
+ color: var(--bridge-alert-warning-fg, #92400e);
227
+ }
226
228
 
227
- .bqb-severity-critical {
228
- background: var(--bridge-alert-error-bg, #fef2f2);
229
- color: var(--bridge-alert-error-fg, #991b1b);
230
- }
229
+ .bqb-severity-critical {
230
+ background: var(--bridge-alert-error-bg, #fef2f2);
231
+ color: var(--bridge-alert-error-fg, #991b1b);
232
+ }
231
233
 
232
- @media (prefers-reduced-motion: reduce) {
233
- .bridge-quota-banner,
234
- .bqb-meter-fill {
235
- transition: none;
234
+ @media (prefers-reduced-motion: reduce) {
235
+ .bridge-quota-banner,
236
+ .bqb-meter-fill {
237
+ transition: none;
238
+ }
236
239
  }
237
240
  }
238
241
  </style>
package/dist/client/components/subscription/BridgeSubscriptionStatus.svelte CHANGED
@@ -77,57 +77,60 @@
77
77
  </span>
78
78
 
79
79
  <style>
80
- .bridge-subscription-status {
81
- display: inline-flex;
82
- align-items: center;
83
- gap: 0.5rem;
84
- font: inherit;
85
- }
86
-
87
- .bss-plan {
88
- font-weight: 600;
89
- }
90
-
91
- .bss-badge {
92
- display: inline-block;
93
- padding: 0.125rem 0.5rem;
94
- border-radius: 9999px;
95
- font-size: 0.75rem;
96
- font-weight: 500;
97
- text-transform: lowercase;
98
- background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
99
- color: var(--bridge-foreground, #111827);
100
- }
101
-
102
- .bss-badge-active {
103
- background: var(--bridge-alert-success-bg, #f0fdf4);
104
- color: var(--bridge-alert-success-fg, #166534);
105
- }
106
-
107
- .bss-badge-trial {
108
- background: var(--bridge-alert-info-bg, #eff6ff);
109
- color: var(--bridge-alert-info-fg, #1e40af);
110
- }
111
-
112
- .bss-badge-past_due,
113
- .bss-badge-cancel_at_period_end {
114
- background: var(--bridge-alert-warning-bg, #fffbeb);
115
- color: var(--bridge-alert-warning-fg, #92400e);
116
- }
117
-
118
- .bss-badge-canceled {
119
- background: var(--bridge-alert-error-bg, #fef2f2);
120
- color: var(--bridge-alert-error-fg, #991b1b);
121
- }
122
-
123
- .bss-loading,
124
- .bss-empty {
125
- color: var(--bridge-muted, #6b7280);
126
- font-style: italic;
127
- }
128
-
129
- .bss-error,
130
- .bss-error-reason {
131
- color: var(--bridge-alert-error-fg, #991b1b);
80
+ /* TBP-814 — in the `bridge` layer with the stylesheet, so any CSS of the app wins. */
81
+ @layer bridge {
82
+ .bridge-subscription-status {
83
+ display: inline-flex;
84
+ align-items: center;
85
+ gap: 0.5rem;
86
+ font: inherit;
87
+ }
88
+
89
+ .bss-plan {
90
+ font-weight: var(--bridge-font-weight-heading, 600);
91
+ }
92
+
93
+ .bss-badge {
94
+ display: inline-block;
95
+ padding: 0.125rem 0.5rem;
96
+ border-radius: 9999px;
97
+ font-size: calc(0.75 * var(--bridge-text-base, 1rem));
98
+ font-weight: var(--bridge-font-weight-label, 500);
99
+ text-transform: lowercase;
100
+ background: var(--bridge-muted-bg, var(--bridge-bg-muted, #f3f4f6));
101
+ color: var(--bridge-foreground, #111827);
102
+ }
103
+
104
+ .bss-badge-active {
105
+ background: var(--bridge-alert-success-bg, #f0fdf4);
106
+ color: var(--bridge-alert-success-fg, #166534);
107
+ }
108
+
109
+ .bss-badge-trial {
110
+ background: var(--bridge-alert-info-bg, #eff6ff);
111
+ color: var(--bridge-alert-info-fg, #1e40af);
112
+ }
113
+
114
+ .bss-badge-past_due,
115
+ .bss-badge-cancel_at_period_end {
116
+ background: var(--bridge-alert-warning-bg, #fffbeb);
117
+ color: var(--bridge-alert-warning-fg, #92400e);
118
+ }
119
+
120
+ .bss-badge-canceled {
121
+ background: var(--bridge-alert-error-bg, #fef2f2);
122
+ color: var(--bridge-alert-error-fg, #991b1b);
123
+ }
124
+
125
+ .bss-loading,
126
+ .bss-empty {
127
+ color: var(--bridge-muted, #6b7280);
128
+ font-style: italic;
129
+ }
130
+
131
+ .bss-error,
132
+ .bss-error-reason {
133
+ color: var(--bridge-alert-error-fg, #991b1b);
134
+ }
132
135
  }
133
136
  </style>