@base316/react 0.7.0 → 0.8.0

package/dist/manifest.json

@@ -41,12 +41,12 @@
 				},
 				{
 					"name": "appearance",
-					"summary": "Colours, radius and font as tokens. Restyles everything at once.",
+					"summary": "Colors, radius and font as tokens. Restyles everything at once.",
 					"required": false
 				},
 				{
 					"name": "tenant",
-					"summary": "White-label everything inside for one tenant — `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colours on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
+					"summary": "White-label everything inside for one tenant — `{ organizationId }` or `{ organizationExternalId }`. A firm's name, logo and colors on the screens it runs its clients on; its own branding, then its parent's, then the environment's. Change it when the user switches team.",
 					"required": false
 				},
 				{
@@ -148,7 +148,7 @@
 				},
 				{
 					"name": "secondFactorLabels",
-					"summary": "Wording for the second-factor step (code box, or enrolment when the environment requires a factor and the user has none), for translation. English when omitted.",
+					"summary": "Wording for the second-factor step (code box, or enrollment when the environment requires a factor and the user has none), for translation. English when omitted.",
 					"required": false
 				},
 				{
@@ -792,10 +792,25 @@
 				"PricingTable"
 			]
 		},
+		{
+			"name": "useAddons",
+			"kind": "hook",
+			"summary": "The signed-in user's addons and the ones on sale for their plan, with buy, resize and remove — settled by the API (more now and charged for the rest of the period, fewer at the period end). No markup.",
+			"useWhen": "You sell extras on top of a plan (more apps, seats, storage) as self-serve addons.",
+			"requires": [
+				"session"
+			],
+			"props": [],
+			"whenUnmet": "Loads nothing without a session; `lastError` carries the API's code.",
+			"seeAlso": [
+				"usePlans",
+				"SubscriptionManager"
+			]
+		},
 		{
 			"name": "SubscriptionManager",
 			"kind": "component",
-			"summary": "The current plan, its renewal date, a scheduled plan change with its undo, cancelling at the period end — asking why, and showing the environment's retention offer when it makes one — and resuming a cancelled one.",
+			"summary": "The current plan, its renewal date, a scheduled plan change with its undo, canceling at the period end — asking why, and showing the environment's retention offer when it makes one — and resuming a canceled one.",
 			"useWhen": "A billing settings page.",
 			"requires": [
 				"session"
@@ -1323,7 +1338,7 @@
 		{
 			"name": "Chart",
 			"kind": "component",
-			"summary": "Records over time, counted or totalled.",
+			"summary": "Records over time, counted or totaled.",
 			"useWhen": "The question is how many or how much, by day, week or month.",
 			"requires": [
 				"session",

package/dist/src/CaptchaWidget.d.ts

@@ -0,0 +1,22 @@
+interface Turnstile {
+    render: (container: HTMLElement, options: {
+        sitekey: string;
+        size?: "normal" | "flexible" | "compact";
+        callback: (token: string) => void;
+        "expired-callback": () => void;
+        "error-callback": () => void;
+    }) => string;
+    remove: (widgetId: string) => void;
+}
+declare global {
+    interface Window {
+        turnstile?: Turnstile;
+    }
+}
+export declare function CaptchaWidget({ siteKey, onToken, }: {
+    siteKey: string;
+    /** Called with a token, and with null when it expires or the widget fails. */
+    onToken: (token: string | null) => void;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CaptchaWidget.d.ts.map

package/dist/src/CaptchaWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptchaWidget.d.ts","sourceRoot":"","sources":["../../src/CaptchaWidget.tsx"],"names":[],"mappings":"AAmBA,UAAU,SAAS;IAClB,MAAM,EAAE,CACP,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;QACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;QAC/B,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC7B,KACG,MAAM,CAAC;IACZ,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,MAAM;QACf,SAAS,CAAC,EAAE,SAAS,CAAC;KACtB;CACD;AAiCD,wBAAgB,aAAa,CAAC,EAC7B,OAAO,EACP,OAAO,GACP,EAAE;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC,+BAuCA"}

package/dist/src/SecondFactorStep.d.ts

@@ -8,12 +8,12 @@ import { type CSSProperties } from "react";
  * - **A challenge** (`enroll: false`): a code box for the factor the person
  *   already has — their authenticator app, or the code just sent to their inbox
  *   or phone — or one of their recovery codes.
- * - **An enrolment** (`enroll: true`): the environment requires a second factor
+ * - **An enrollment** (`enroll: true`): the environment requires a second factor
  *   and this person has none, so there is nothing a code box could check. They
  *   choose one of `enrollMethods`, prove it with its first code, and are shown
  *   their recovery codes once before the session is handed over.
  *
- * The enrolment branch is what used to be missing. `SignIn` showed "from your
+ * The enrollment branch is what used to be missing. `SignIn` showed "from your
  * authenticator app" to somebody who had never set one up, and `SignUp`
  * silently stopped — so under a required policy nobody new could ever get in.
  *

package/dist/src/SignIn.d.ts

@@ -10,7 +10,7 @@ import { type SecondFactorLabels } from "./SecondFactorStep";
  * Handles the MFA branch, because an account with a second factor gets a
  * challenge instead of a session, and a form that ignores that case appears to
  * fail for exactly the users who most need it to work. That includes the case
- * where the environment requires a factor and the person has none: they enrol
+ * where the environment requires a factor and the person has none: they enroll
  * one here (`SecondFactorStep`), see their recovery codes, and are signed in.
  *
  * Social and SSO sign-in leave the page: the browser goes to the provider and

package/dist/src/SignUp.d.ts

@@ -56,6 +56,8 @@ export interface SignUpLabels {
     or: string;
     /** The environment is not accepting new accounts. */
     closed: string;
+    /** Passwords off and no social provider to sign up with: nothing to offer. */
+    noMethods: string;
 }
 export declare const DEFAULT_SIGN_UP_LABELS: SignUpLabels;
 export interface SignUpProps {

package/dist/src/SignUp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../src/SignUp.tsx"],"names":[],"mappings":"AASA,OAAO,EAAuB,KAAK,aAAa,EAAkB,MAAM,OAAO,CAAC;AAIhF,OAAO,EAAoB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAI/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6EAA6E;IAC7E,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE,+CAA+C;IAC/C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,sBAAsB,EAAE,YAuBpC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM,EAAE,CAAC;IACrC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACtB;AAiBD,wBAAgB,MAAM,CAAC,EACtB,UAAU,EACV,eAAe,EAAE,kBAAkB,EACnC,QAAQ,EACR,MAAM,EAAE,SAAS,EACjB,kBAAkB,EAClB,MAAM,EACN,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,KAAK,GACL,EAAE,WAAW,+BA+Qb"}
+{"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../src/SignUp.tsx"],"names":[],"mappings":"AASA,OAAO,EAAuB,KAAK,aAAa,EAAkB,MAAM,OAAO,CAAC;AAKhF,OAAO,EAAoB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAI/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,6EAA6E;IAC7E,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,OAAO,EAAE,CAAC,gBAAgB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE,+CAA+C;IAC/C,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,sBAAsB,EAAE,YAwBpC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,MAAM,EAAE,CAAC;IACrC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACtB;AAiBD,wBAAgB,MAAM,CAAC,EACtB,UAAU,EACV,eAAe,EAAE,kBAAkB,EACnC,QAAQ,EACR,MAAM,EAAE,SAAS,EACjB,kBAAkB,EAClB,MAAM,EACN,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,KAAK,GACL,EAAE,WAAW,+BAuSb"}

package/dist/src/SocialButtons.d.ts

@@ -2,7 +2,7 @@ import type { SocialSignInOption } from "@base316/sdk";
 /**
  * "Continue with Google", "Continue with Apple" — one button per enabled
  * provider, drawn as each provider's guidelines ask: its own mark, its own
- * colours (Google white with a grey outline, Apple black with the white logo,
+ * colors (Google white with a gray outline, Apple black with the white logo,
  * Microsoft its four squares), and a label naming it. "Continue with" is a
  * title both Google's and Apple's guidelines accept, and it reads right on a
  * sign-up form as well as a sign-in one.

package/dist/src/SocialSignIn.d.ts

@@ -3,7 +3,7 @@
  * that draws the rest of its sign-in or sign-up form itself.
  *
  * The same buttons `<SignIn>` and `<SignUp>` show, from the same
- * `GET /v1/auth/methods`: each enabled provider with its mark and colours,
+ * `GET /v1/auth/methods`: each enabled provider with its mark and colors,
  * leaving for Base316's host with a `b316_oauth_state` cookie and the same
  * value as `state`, and coming back to `socialRedirectUrl` with a single-use
  * code for your server to check (`readOAuthState`) and redeem

package/dist/src/TeamMembers.d.ts

@@ -6,7 +6,7 @@ import { type CSSProperties } from "react";
  * appear: a list of people, a list of people who have not arrived yet, a box to
  * add another, and a way to leave. Splitting them would make the common case —
  * a Team settings page — four imports and some layout, which is exactly the
- * assembly work the catalogue exists to remove.
+ * assembly work the catalog exists to remove.
  *
  * What it offers depends on what the viewer may do, and that is the server's
  * answer rather than this component's guess: inviting and removing are gated on

package/dist/src/TwoFactorManager.d.ts

@@ -10,7 +10,7 @@ import { type CSSProperties } from "react";
  *
  * Three steps, kept separate because the middle one is what stops people
  * locking themselves out: enrolling produces a secret that is useless until a
- * code proves the app actually holds it. Activating on enrolment would mean a
+ * code proves the app actually holds it. Activating on enrollment would mean a
  * QR code that failed to scan leaves somebody unable to sign in, with no way
  * back.
  *

package/dist/src/appearance.d.ts

@@ -11,7 +11,7 @@ import type { CSSProperties } from "react";
  * - CSS custom properties, with every value read through a variable, let the
  *   host restyle without either side guessing at specificity.
  *
- * So: one small stylesheet, injected once, with every colour, radius and font
+ * So: one small stylesheet, injected once, with every color, radius and font
  * behind a `--b316-*` variable. A customer can restyle in three ways, from
  * least to most invasive:
  *
@@ -26,7 +26,7 @@ import type { CSSProperties } from "react";
 export interface Base316Appearance {
     /** Buttons, links, focus rings. */
     colorPrimary?: string;
-    /** Text on primary-coloured surfaces. */
+    /** Text on primary-colored surfaces. */
     colorPrimaryText?: string;
     colorText?: string;
     colorMuted?: string;
@@ -50,7 +50,7 @@ export declare const STYLE_ELEMENT_ID = "base316-components";
  * never sets a token still gets a coherent look, and one that sets tokens on a
  * parent still wins through normal inheritance.
  */
-export declare const STYLESHEET = "\n.b316-root {\n  --b316-color-primary: #111827;\n  --b316-color-primary-text: #ffffff;\n  --b316-color-text: #111827;\n  --b316-color-muted: #6b7280;\n  --b316-color-background: #ffffff;\n  --b316-color-border: #e5e7eb;\n  --b316-color-danger: #991b1b;\n  --b316-color-danger-bg: #fef2f2;\n  --b316-color-success: #166534;\n  --b316-radius: 12px;\n  --b316-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  --b316-font-size: 15px;\n  --b316-spacing: 12px;\n\n  font-family: var(--b316-font);\n  font-size: var(--b316-font-size);\n  line-height: 1.5;\n  color: var(--b316-color-text);\n}\n\n.b316-card {\n  border: 1px solid var(--b316-color-border);\n  border-radius: var(--b316-radius);\n  padding: calc(var(--b316-spacing) * 1.6);\n  background: var(--b316-color-background);\n}\n\n.b316-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--b316-spacing); }\n.b316-label { font-size: 0.87em; color: var(--b316-color-muted); }\n\n.b316-input {\n  padding: 9px 11px;\n  border: 1px solid var(--b316-color-border);\n  border-radius: calc(var(--b316-radius) / 1.6);\n  font: inherit;\n  color: inherit;\n  background: var(--b316-color-background);\n}\n.b316-input:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 1px; }\n\n.b316-button {\n  width: 100%;\n  padding: 10px 14px;\n  border: 0;\n  border-radius: calc(var(--b316-radius) / 1.6);\n  background: var(--b316-color-primary);\n  color: var(--b316-color-primary-text);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n.b316-button:hover:not([disabled]) { filter: brightness(1.12); }\n.b316-button:active:not([disabled]) { transform: translateY(1px); }\n.b316-button:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }\n.b316-button[disabled] { opacity: .55; cursor: not-allowed; }\n\n.b316-button-secondary {\n  width: auto;\n  transition: background-color .12s ease;\n  background: var(--b316-color-background);\n  color: var(--b316-color-text);\n  border: 1px solid var(--b316-color-border);\n  font-weight: 500;\n}\n\n.b316-button-link {\n  width: auto;\n  background: none;\n  border: 0;\n  padding: 0;\n  color: var(--b316-color-primary);\n  font: inherit;\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n/*\n * An armed confirmation: the question and its way out, side by side.\n *\n * Inline rather than a dialog, because a sandboxed iframe does not get dialogs\n * and these components are meant to be embedded in one.\n */\n.b316-confirm {\n  display: inline-flex;\n  gap: .4rem;\n  align-items: center;\n}\n\n.b316-error {\n  background: var(--b316-color-danger-bg);\n  color: var(--b316-color-danger);\n  padding: 8px 10px;\n  border-radius: calc(var(--b316-radius) / 2);\n  font-size: 0.9em;\n  margin-bottom: var(--b316-spacing);\n}\n\n.b316-muted { color: var(--b316-color-muted); font-size: 0.87em; }\n.b316-success { color: var(--b316-color-success); }\n\n.b316-plans {\n  display: grid;\n  gap: calc(var(--b316-spacing) * 1.3);\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  align-items: stretch;\n}\n\n/* Messages above the cards span the row rather than taking a card's column. */\n.b316-plans-error,\n.b316-plans-managed { grid-column: 1 / -1; }\n\n.b316-plan {\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  overflow: hidden;\n}\n\n/* The recommended plan. Lifted rather than merely tinted: on a pricing table\n   the eye needs one obvious default, and colour alone does not survive being\n   viewed in greyscale or by someone who cannot distinguish the accent. */\n.b316-plan-featured {\n  border-color: var(--b316-color-primary);\n  box-shadow: 0 0 0 1px var(--b316-color-primary);\n}\n\n.b316-plan-badge {\n  display: inline-block;\n  background: var(--b316-color-primary);\n  color: var(--b316-color-primary-text);\n  border-radius: 999px;\n  padding: 2px 9px;\n  font-size: 0.75em;\n  font-weight: 600;\n  letter-spacing: .02em;\n  margin-bottom: 8px;\n}\n\n/* Occupies the badge's height without drawing anything, so a featured card\n   does not push its own price and features out of line with the others. */\n.b316-plan-badge-spacer {\n  display: inline-block;\n  padding: 2px 9px;\n  font-size: 0.75em;\n  margin-bottom: 8px;\n  visibility: hidden;\n}\n\n.b316-plan-head { padding: calc(var(--b316-spacing) * 1.6); padding-bottom: 0; }\n.b316-plan-name { font-weight: 600; font-size: 1.06em; }\n.b316-plan-desc { color: var(--b316-color-muted); font-size: 0.87em; margin-top: 2px; }\n\n.b316-plan-pricing { padding: 0 calc(var(--b316-spacing) * 1.6) calc(var(--b316-spacing) * 1.4); }\n\n.b316-plan-price {\n  font-size: 2.1em;\n  font-weight: 640;\n  letter-spacing: -.02em;\n  margin-top: calc(var(--b316-spacing) * 0.7);\n  /* Lining figures of even width, so prices do not shimmer between cards. */\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.b316-plan-cadence { color: var(--b316-color-muted); font-size: 0.87em; min-height: 1.35em; }\n.b316-plan-trial { color: var(--b316-color-success); font-size: 0.87em; min-height: 1.35em; }\n\n.b316-plan-features {\n  list-style: none;\n  padding: calc(var(--b316-spacing) * 1.2) calc(var(--b316-spacing) * 1.6);\n  margin: 0;\n  flex: 1;\n  border-top: 1px solid var(--b316-color-border);\n}\n.b316-plan-feature {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 5px 0;\n  font-size: 0.94em;\n}\n.b316-plan-feature-value { color: var(--b316-color-muted); font-variant-numeric: tabular-nums; }\n\n.b316-plan-action {\n  padding: calc(var(--b316-spacing) * 1.2) calc(var(--b316-spacing) * 1.6);\n  border-top: 1px solid var(--b316-color-border);\n}\n\n/* The plan already held. A faded primary button reads as broken rather than\n   as \"you are here\", so this is a flat, quiet, genuinely inert surface. */\n.b316-button-current,\n.b316-button-current[disabled] {\n  background: transparent;\n  color: var(--b316-color-muted);\n  border: 1px solid var(--b316-color-border);\n  font-weight: 500;\n  opacity: 1;\n  cursor: default;\n}\n\n.b316-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }\n\n/* Credential lists. A row is a thing plus the actions on it, and the actions\n   stay put as names vary in length, so the eye tracks one column not two. */\n.b316-list { list-style: none; margin: 0; padding: 0; }\n\n.b316-list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 12px 0;\n  border-top: 1px solid var(--b316-color-border);\n}\n\n.b316-list-item:first-child { border-top: none; }\n\n/* Carries a secret shown exactly once, so it has to read as different from the\n   rest of the card rather than as another paragraph. */\n.b316-notice {\n  border: 1px solid var(--b316-color-border);\n  border-radius: var(--b316-radius);\n  background: var(--b316-color-subtle, rgba(0,0,0,0.03));\n  padding: 12px;\n  font-size: 0.93em;\n}\n\n.b316-checkbox {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  padding: 4px 0;\n  cursor: pointer;\n}\n\n.b316-checkbox input[disabled] { cursor: default; }\n.b316-checkbox.b316-muted { cursor: default; }\n";
+export declare const STYLESHEET = "\n.b316-root {\n  --b316-color-primary: #111827;\n  --b316-color-primary-text: #ffffff;\n  --b316-color-text: #111827;\n  --b316-color-muted: #6b7280;\n  --b316-color-background: #ffffff;\n  --b316-color-border: #e5e7eb;\n  --b316-color-danger: #991b1b;\n  --b316-color-danger-bg: #fef2f2;\n  --b316-color-success: #166534;\n  --b316-radius: 12px;\n  --b316-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  --b316-font-size: 15px;\n  --b316-spacing: 12px;\n\n  font-family: var(--b316-font);\n  font-size: var(--b316-font-size);\n  line-height: 1.5;\n  color: var(--b316-color-text);\n}\n\n.b316-card {\n  border: 1px solid var(--b316-color-border);\n  border-radius: var(--b316-radius);\n  padding: calc(var(--b316-spacing) * 1.6);\n  background: var(--b316-color-background);\n}\n\n.b316-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--b316-spacing); }\n.b316-label { font-size: 0.87em; color: var(--b316-color-muted); }\n\n.b316-input {\n  padding: 9px 11px;\n  border: 1px solid var(--b316-color-border);\n  border-radius: calc(var(--b316-radius) / 1.6);\n  font: inherit;\n  color: inherit;\n  background: var(--b316-color-background);\n}\n.b316-input:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 1px; }\n\n.b316-button {\n  width: 100%;\n  padding: 10px 14px;\n  border: 0;\n  border-radius: calc(var(--b316-radius) / 1.6);\n  background: var(--b316-color-primary);\n  color: var(--b316-color-primary-text);\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n.b316-button:hover:not([disabled]) { filter: brightness(1.12); }\n.b316-button:active:not([disabled]) { transform: translateY(1px); }\n.b316-button:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }\n.b316-button[disabled] { opacity: .55; cursor: not-allowed; }\n\n.b316-button-secondary {\n  width: auto;\n  transition: background-color .12s ease;\n  background: var(--b316-color-background);\n  color: var(--b316-color-text);\n  border: 1px solid var(--b316-color-border);\n  font-weight: 500;\n}\n\n.b316-button-link {\n  width: auto;\n  background: none;\n  border: 0;\n  padding: 0;\n  color: var(--b316-color-primary);\n  font: inherit;\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n/*\n * An armed confirmation: the question and its way out, side by side.\n *\n * Inline rather than a dialog, because a sandboxed iframe does not get dialogs\n * and these components are meant to be embedded in one.\n */\n.b316-confirm {\n  display: inline-flex;\n  gap: .4rem;\n  align-items: center;\n}\n\n.b316-error {\n  background: var(--b316-color-danger-bg);\n  color: var(--b316-color-danger);\n  padding: 8px 10px;\n  border-radius: calc(var(--b316-radius) / 2);\n  font-size: 0.9em;\n  margin-bottom: var(--b316-spacing);\n}\n\n.b316-muted { color: var(--b316-color-muted); font-size: 0.87em; }\n.b316-success { color: var(--b316-color-success); }\n\n.b316-plans {\n  display: grid;\n  gap: calc(var(--b316-spacing) * 1.3);\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  align-items: stretch;\n}\n\n/* Messages above the cards span the row rather than taking a card's column. */\n.b316-plans-error,\n.b316-plans-managed { grid-column: 1 / -1; }\n\n.b316-plan {\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  overflow: hidden;\n}\n\n/* The recommended plan. Lifted rather than merely tinted: on a pricing table\n   the eye needs one obvious default, and color alone does not survive being\n   viewed in greyscale or by someone who cannot distinguish the accent. */\n.b316-plan-featured {\n  border-color: var(--b316-color-primary);\n  box-shadow: 0 0 0 1px var(--b316-color-primary);\n}\n\n.b316-plan-badge {\n  display: inline-block;\n  background: var(--b316-color-primary);\n  color: var(--b316-color-primary-text);\n  border-radius: 999px;\n  padding: 2px 9px;\n  font-size: 0.75em;\n  font-weight: 600;\n  letter-spacing: .02em;\n  margin-bottom: 8px;\n}\n\n/* Occupies the badge's height without drawing anything, so a featured card\n   does not push its own price and features out of line with the others. */\n.b316-plan-badge-spacer {\n  display: inline-block;\n  padding: 2px 9px;\n  font-size: 0.75em;\n  margin-bottom: 8px;\n  visibility: hidden;\n}\n\n.b316-plan-head { padding: calc(var(--b316-spacing) * 1.6); padding-bottom: 0; }\n.b316-plan-name { font-weight: 600; font-size: 1.06em; }\n.b316-plan-desc { color: var(--b316-color-muted); font-size: 0.87em; margin-top: 2px; }\n\n.b316-plan-pricing { padding: 0 calc(var(--b316-spacing) * 1.6) calc(var(--b316-spacing) * 1.4); }\n\n.b316-plan-price {\n  font-size: 2.1em;\n  font-weight: 640;\n  letter-spacing: -.02em;\n  margin-top: calc(var(--b316-spacing) * 0.7);\n  /* Lining figures of even width, so prices do not shimmer between cards. */\n  font-variant-numeric: tabular-nums lining-nums;\n}\n\n.b316-plan-cadence { color: var(--b316-color-muted); font-size: 0.87em; min-height: 1.35em; }\n.b316-plan-trial { color: var(--b316-color-success); font-size: 0.87em; min-height: 1.35em; }\n\n.b316-plan-features {\n  list-style: none;\n  padding: calc(var(--b316-spacing) * 1.2) calc(var(--b316-spacing) * 1.6);\n  margin: 0;\n  flex: 1;\n  border-top: 1px solid var(--b316-color-border);\n}\n.b316-plan-feature {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 5px 0;\n  font-size: 0.94em;\n}\n.b316-plan-feature-value { color: var(--b316-color-muted); font-variant-numeric: tabular-nums; }\n\n.b316-plan-action {\n  padding: calc(var(--b316-spacing) * 1.2) calc(var(--b316-spacing) * 1.6);\n  border-top: 1px solid var(--b316-color-border);\n}\n\n/* The plan already held. A faded primary button reads as broken rather than\n   as \"you are here\", so this is a flat, quiet, genuinely inert surface. */\n.b316-button-current,\n.b316-button-current[disabled] {\n  background: transparent;\n  color: var(--b316-color-muted);\n  border: 1px solid var(--b316-color-border);\n  font-weight: 500;\n  opacity: 1;\n  cursor: default;\n}\n\n.b316-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; }\n\n/* Credential lists. A row is a thing plus the actions on it, and the actions\n   stay put as names vary in length, so the eye tracks one column not two. */\n.b316-list { list-style: none; margin: 0; padding: 0; }\n\n.b316-list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 12px 0;\n  border-top: 1px solid var(--b316-color-border);\n}\n\n.b316-list-item:first-child { border-top: none; }\n\n/* Carries a secret shown exactly once, so it has to read as different from the\n   rest of the card rather than as another paragraph. */\n.b316-notice {\n  border: 1px solid var(--b316-color-border);\n  border-radius: var(--b316-radius);\n  background: var(--b316-color-subtle, rgba(0,0,0,0.03));\n  padding: 12px;\n  font-size: 0.93em;\n}\n\n.b316-checkbox {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  padding: 4px 0;\n  cursor: pointer;\n}\n\n.b316-checkbox input[disabled] { cursor: default; }\n.b316-checkbox.b316-muted { cursor: default; }\n";
 /** Join the component's own class with any the host passed in. */
 export declare function cls(base: string, extra?: string): string;
 /**
@@ -59,5 +59,5 @@ export declare function cls(base: string, extra?: string): string;
  * Appended as a second block so the print rules stay next to the invoice they
  * apply to, rather than being buried in the middle of the component styles.
  */
-export declare const STYLESHEET_EXTRA = "\n.b316-pay__element { margin-bottom: var(--b316-spacing); min-height: 40px; }\n\n.b316-pay__submit {\n  width: 100%;\n  padding: 11px 14px;\n  border: 0;\n  border-radius: calc(var(--b316-radius) / 1.6);\n  background: var(--b316-color-primary);\n  color: #fff;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.b316-pay__submit[disabled] { opacity: 0.55; cursor: progress; }\n\n.b316-pay__error {\n  background: var(--b316-color-danger-bg);\n  color: var(--b316-color-danger);\n  padding: 8px 10px;\n  border-radius: calc(var(--b316-radius) / 2);\n  font-size: 0.9em;\n  margin-bottom: var(--b316-spacing);\n}\n\n.b316-pay__done {\n  background: var(--b316-color-success-bg, #f0fdf4);\n  color: var(--b316-color-success);\n  padding: 12px 14px;\n  border-radius: calc(var(--b316-radius) / 2);\n  text-align: center;\n  margin: 0;\n}\n\n.b316-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--b316-color-border); }\n.b316-tab {\n  flex: 1; padding: 8px 4px; background: none; border: 0; cursor: pointer;\n  font: inherit; font-size: .95em; color: var(--b316-color-muted);\n  border-bottom: 2px solid transparent; margin-bottom: -1px;\n}\n.b316-tab-on { color: var(--b316-color-text); border-bottom-color: var(--b316-color-primary); }\n.b316-social { display: flex; flex-direction: column; gap: 8px; }\n.b316-social-button {\n  display: flex; align-items: center; justify-content: center; gap: 10px;\n  width: 100%; min-height: 40px; padding: 9px 14px;\n  border: 1px solid; border-radius: calc(var(--b316-radius) / 1.6);\n  font: inherit; font-weight: 500; cursor: pointer;\n}\n.b316-social-button:hover:not([disabled]) { filter: brightness(.96); }\n.b316-social-button:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }\n.b316-social-button[disabled] { opacity: .55; cursor: not-allowed; }\n.b316-social-icon { display: inline-flex; width: 18px; height: 18px; flex: none; }\n.b316-social-icon svg { width: 18px; height: 18px; }\n.b316-divider {\n  display: flex; align-items: center; gap: 10px; margin: 14px 0;\n  color: var(--b316-color-muted); font-size: .87em;\n}\n.b316-divider::before, .b316-divider::after { content: \"\"; flex: 1; border-top: 1px solid var(--b316-color-border); }\n.b316-branding { display: flex; flex-direction: column; gap: 4px; }\n.b316-branding-logo { max-height: 40px; width: auto; align-self: flex-start; }\n.b316-branding-name { font-size: 1.5em; font-weight: 650; letter-spacing: -.01em; }\n.b316-branding-tagline { color: var(--b316-color-muted); }\n\n.b316-invoice-table { width: 100%; border-collapse: collapse; font-size: 0.94em; }\n.b316-invoice-table th {\n  text-align: left;\n  font-weight: 500;\n  color: var(--b316-color-muted);\n  font-size: 0.85em;\n  padding: 0 0 6px;\n  border-bottom: 1px solid var(--b316-color-border);\n}\n.b316-invoice-table td { padding: 9px 0; border-bottom: 1px solid var(--b316-color-border); }\n/* Columns need breathing room or the amount runs straight into the action \u2014\n   \"$49.00View\" \u2014 which is what happens when only the row has padding. */\n.b316-invoice-table th + th,\n.b316-invoice-table td + td { padding-left: 16px; }\n.b316-invoice-table td:last-child,\n.b316-invoice-table th:last-child { text-align: right; width: 1%; white-space: nowrap; }\n.b316-invoice-table tr:last-child td { border-bottom: 0; }\n.b316-num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.b316-invoice-view {\n  margin-top: calc(var(--b316-spacing) * 1.4);\n  border-top: 1px solid var(--b316-color-border);\n  padding-top: calc(var(--b316-spacing) * 1.4);\n}\n.b316-invoice-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: var(--b316-spacing); }\n.b316-invoice-doc { display: flex; flex-direction: column; gap: calc(var(--b316-spacing) * 1.4); }\n.b316-invoice-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b316-spacing); }\n.b316-invoice-totals { display: flex; flex-direction: column; gap: 6px; margin-left: auto; min-width: 240px; }\n.b316-invoice-total { font-weight: 650; border-top: 1px solid var(--b316-color-border); padding-top: 6px; }\n\n/* Printing an invoice emits the invoice alone, and printing anything else is\n   none of this package's business.\n\n   This used to start with a bare \"body * { visibility: hidden }\", which is the\n   usual recipe for printing one element \u2014 and it is scoped to the document,\n   not to us. The stylesheet is injected into the host page's head the first\n   time any Base316 component mounts, so from that moment every print in the\n   host application came out blank unless the content happened to sit inside\n   .b316-invoice-doc. A customer printing their own page had no way to connect\n   it back to us.\n\n   Scoped to a root the invoice sets on <html> while it is being printed\n   instead, so nothing applies unless an invoice asked for it. */\n@media print {\n  [data-b316-printing] body * { visibility: hidden; }\n  [data-b316-printing] .b316-invoice-doc,\n  [data-b316-printing] .b316-invoice-doc * { visibility: visible; }\n  [data-b316-printing] .b316-invoice-doc {\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: 100%;\n    padding: 24px;\n  }\n  .b316-invoice-actions { display: none; }\n}\n\n/* --- Collections: tables, forms and detail views ------------------------- */\n\n.b316-table-wrap { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-table-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); flex-wrap: wrap; }\n.b316-table-actions { display: flex; align-items: center; gap: var(--b316-spacing); }\n\n/* The table scrolls inside its own box rather than pushing the page sideways:\n   a collection with twenty fields is normal, and a horizontally scrolling page\n   makes every other component on it unreachable. */\n.b316-table-scroll { overflow-x: auto; border: 1px solid var(--b316-color-border); border-radius: var(--b316-radius); }\n.b316-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }\n.b316-table th, .b316-table td { padding: 10px 12px; text-align: left; vertical-align: top; white-space: nowrap; }\n.b316-table thead th { background: var(--b316-color-surface-muted, rgba(0,0,0,.03)); font-weight: 600; font-size: 0.87em; color: var(--b316-color-muted); border-bottom: 1px solid var(--b316-color-border); }\n.b316-table tbody tr + tr td { border-top: 1px solid var(--b316-color-border); }\n.b316-row-clickable { cursor: pointer; }\n.b316-row-clickable:hover td { background: var(--b316-color-surface-muted, rgba(0,0,0,.02)); }\n.b316-table-rowactions { text-align: right; white-space: nowrap; }\n.b316-table-more { display: flex; justify-content: center; }\n\n.b316-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }\n.b316-sort:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }\n\n.b316-empty { padding: calc(var(--b316-spacing) * 2); text-align: center; color: var(--b316-color-muted); }\n\n.b316-button-quiet {\n  background: none;\n  border: 0;\n  padding: 4px 6px;\n  font: inherit;\n  font-size: 0.9em;\n  color: var(--b316-color-primary);\n  cursor: pointer;\n  border-radius: calc(var(--b316-radius) / 2);\n}\n.b316-button-quiet:hover:not([disabled]) { background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); }\n.b316-button-quiet:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 1px; }\n.b316-button-quiet[disabled] { opacity: .55; cursor: not-allowed; }\n.b316-danger { color: var(--b316-color-danger, #b42318); }\n\n.b316-chip {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--b316-color-surface-muted, rgba(0,0,0,.05));\n  font-size: 0.87em;\n}\n.b316-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }\n\n.b316-form { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-form-title { margin: 0; font-size: 1.05em; }\n.b316-form-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.b316-field { display: flex; flex-direction: column; gap: 4px; }\n.b316-hint { font-size: 0.82em; color: var(--b316-color-muted); }\n.b316-input-invalid { border-color: var(--b316-color-danger, #b42318); }\n.b316-choices { display: flex; flex-wrap: wrap; gap: 10px; }\n.b316-choice { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95em; }\n.b316-suffixed { display: flex; align-items: center; gap: 8px; }\n.b316-address { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n\n.b316-relation-chosen { display: flex; align-items: center; gap: 8px; }\n.b316-relation-results {\n  list-style: none;\n  margin: 4px 0 0;\n  padding: 4px;\n  border: 1px solid var(--b316-color-border);\n  border-radius: var(--b316-radius);\n  max-height: 220px;\n  overflow-y: auto;\n  background: var(--b316-color-surface, #fff);\n}\n.b316-relation-result { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 8px; font: inherit; cursor: pointer; border-radius: calc(var(--b316-radius) / 2); }\n.b316-relation-result:hover, .b316-relation-result:focus-visible { background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); outline: none; }\n.b316-relation-empty { padding: 6px 8px; }\n\n.b316-detail { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b316-spacing); }\n.b316-detail-title { margin: 0; font-size: 1.1em; }\n.b316-detail-actions { display: flex; gap: 4px; }\n.b316-detail-fields { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px var(--b316-spacing); margin: 0; }\n.b316-detail-row { display: contents; }\n.b316-detail-fields dd { margin: 0; }\n\n/* One column on a narrow screen. A label column of 200px beside a value leaves\n   nothing for the value on a phone. */\n/* --- Teams --------------------------------------------------------------- */\n\n.b316-team { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-team-title { margin: 0; font-size: 1em; font-weight: 600; }\n.b316-team-subtitle { margin: 0; font-size: .9em; font-weight: 600; color: var(--b316-color-muted); }\n.b316-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }\n.b316-team-member { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); }\n.b316-team-member-side { display: flex; align-items: center; gap: 8px; }\n.b316-team-invite { display: flex; flex-direction: column; gap: 4px; }\n.b316-team-invite-row { display: flex; gap: 8px; }\n.b316-team-invite-row input { flex: 1; }\n/* Selectable and wrapping: this is copied by hand and pasted into an email. */\n.b316-team-link { display: flex; flex-direction: column; gap: 4px; }\n.b316-team-link code { word-break: break-all; user-select: all; padding: 8px; border: 1px solid var(--b316-color-border); border-radius: var(--b316-radius); }\n\n.b316-invitation { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-invitation-actions { display: flex; align-items: center; gap: var(--b316-spacing); }\n\n/* --- Sessions, two-factor and the password flows ------------------------- */\n\n.b316-sessions { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-sessions-head { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); flex-wrap: wrap; }\n.b316-sessions-title, .b316-mfa-title { margin: 0; font-size: 1em; font-weight: 600; }\n.b316-sessions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }\n.b316-session { display: flex; flex-direction: column; gap: 2px; }\n.b316-session-device { display: flex; align-items: center; gap: 6px; font-size: 0.95em; }\n\n.b316-device { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-device-title { margin: 0; font-size: 1em; font-weight: 600; }\n/* What is being granted, listed rather than run together: somebody is deciding\n   on this, and a comma-separated line is read as one thing. */\n.b316-device-scopes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }\n.b316-device-scopes li { padding: 2px 8px; border-radius: 999px; font-size: 0.85em; background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); }\n.b316-device-actions { display: flex; gap: 8px; }\n\n.b316-privacy { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-privacy-title { margin: 0; font-size: 1em; font-weight: 600; }\n/* Wraps rather than squeezes: the explanation beside each control is the part\n   that matters, and on a narrow screen it belongs above the button. */\n.b316-privacy-row { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; }\n.b316-privacy-row p { margin: 0; }\n.b316-privacy-confirm { display: flex; flex-direction: column; gap: 8px; }\n.b316-privacy-actions { display: flex; justify-content: flex-end; gap: 8px; }\n\n.b316-mfa { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-mfa-enrol, .b316-mfa-codes, .b316-mfa-on, .b316-mfa-off { display: flex; flex-direction: column; gap: 10px; }\n.b316-mfa-actions { display: flex; justify-content: flex-end; gap: 8px; }\n/* Selectable and wrapping: this is copied by hand on the device that cannot\n   scan its own screen. */\n.b316-mfa-secret code {\n  display: block;\n  padding: 10px;\n  border: 1px solid var(--b316-color-border);\n  border-radius: var(--b316-radius);\n  font-size: 1.05em;\n  letter-spacing: .08em;\n  word-break: break-all;\n  user-select: all;\n}\n.b316-mfa-uri { font-size: 0.9em; }\n.b316-mfa-code-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.b316-mfa-code-list code { user-select: all; }\n/* The enrolment choices: whole-width buttons with their explanation inside,\n   so the explanation is part of what a screen reader announces. */\n.b316-mfa-methods { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }\n.b316-mfa-method { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; }\n.b316-mfa-method .b316-muted { font-weight: 400; }\n/* Always on white with a margin: a QR code on a dark theme does not scan. */\n.b316-mfa-qr { align-self: center; width: 180px; height: 180px; padding: 8px; background: #fff; border-radius: var(--b316-radius); }\n\n@media (max-width: 560px) {\n  .b316-mfa-code-list { grid-template-columns: 1fr; }\n  .b316-detail-fields { grid-template-columns: 1fr; }\n  .b316-detail-row { display: block; margin-bottom: 10px; }\n  .b316-address { grid-template-columns: 1fr; }\n}\n\n/* --- Board --------------------------------------------------------------- */\n\n.b316-board-wrap { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n/* The board scrolls sideways inside itself. Six columns is normal and a page\n   that scrolls horizontally puts everything else on it out of reach. */\n.b316-board { display: flex; gap: var(--b316-spacing); overflow-x: auto; align-items: flex-start; padding-bottom: 4px; }\n.b316-board-column {\n  flex: 0 0 260px;\n  background: var(--b316-color-surface-muted, rgba(0,0,0,.03));\n  border: 1px solid transparent;\n  border-radius: var(--b316-radius);\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.b316-board-over { border-color: var(--b316-color-primary); }\n.b316-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.b316-board-title { font-weight: 600; font-size: 0.92em; }\n.b316-board-cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }\n.b316-board-card {\n  background: var(--b316-color-surface, #fff);\n  border: 1px solid var(--b316-color-border);\n  border-radius: calc(var(--b316-radius) * .8);\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 0.9em;\n}\n.b316-board-card[draggable=\"true\"] { cursor: grab; }\n.b316-board-card-title { font-weight: 600; }\n.b316-board-card-field { display: flex; justify-content: space-between; gap: 8px; }\n.b316-board-move { display: flex; align-items: center; gap: 6px; margin-top: 2px; }\n.b316-board-move select { flex: 1; font-size: 0.9em; padding: 2px 4px; }\n.b316-board-empty { color: var(--b316-color-muted); font-size: 0.87em; padding: 6px 2px; }\n\n/* --- Chart --------------------------------------------------------------- */\n\n.b316-chart { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-chart-title { font-weight: 600; font-size: 0.95em; }\n.b316-chart-plot { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; }\n.b316-chart-col { flex: 1 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }\n.b316-chart-bar { width: 100%; background: var(--b316-color-primary); border-radius: 3px 3px 0 0; min-height: 2px; }\n.b316-chart-label { font-size: 0.7em; color: var(--b316-color-muted); white-space: nowrap; transform: rotate(-45deg); transform-origin: top left; height: 1.6em; }\n.b316-chart-data summary { cursor: pointer; font-size: 0.87em; color: var(--b316-color-muted); }\n.b316-chart-data table { margin-top: 8px; }\n\n/* --- Billing portal ------------------------------------------------------ */\n\n.b316-billing-portal { display: grid; gap: var(--b316-spacing); }\n.b316-billing-portal-section-title { font-weight: 600; font-size: 1em; margin: 0 0 8px; }\n.b316-billing-portal .b316-plans { margin: 0; }\n.b316-invoice-row-actions { white-space: nowrap; text-align: right; }\n.b316-invoice-row-actions .b316-button-link + .b316-button-link { margin-left: 8px; }\n.b316-review-table { width: 100%; border-collapse: collapse; font-size: 0.92em; margin: 8px 0; }\n.b316-review-table th, .b316-review-table td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--b316-color-border, #e5e7eb); }\n.b316-review-table th { color: var(--b316-color-muted); font-weight: 500; border-top: 0; }\n.b316-review-gain { color: #065f46; }\n.b316-review-loss { color: var(--b316-color-danger); }\n.b316-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }\n@media (max-width: 560px) {\n  .b316-invoice-table th:nth-child(2), .b316-invoice-table td:nth-child(2) { display: none; }\n  .b316-review-actions .b316-button { flex: 1 1 100%; }\n}\n";
+export declare const STYLESHEET_EXTRA = "\n.b316-pay__element { margin-bottom: var(--b316-spacing); min-height: 40px; }\n\n.b316-pay__submit {\n  width: 100%;\n  padding: 11px 14px;\n  border: 0;\n  border-radius: calc(var(--b316-radius) / 1.6);\n  background: var(--b316-color-primary);\n  color: #fff;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.b316-pay__submit[disabled] { opacity: 0.55; cursor: progress; }\n\n.b316-pay__error {\n  background: var(--b316-color-danger-bg);\n  color: var(--b316-color-danger);\n  padding: 8px 10px;\n  border-radius: calc(var(--b316-radius) / 2);\n  font-size: 0.9em;\n  margin-bottom: var(--b316-spacing);\n}\n\n.b316-pay__done {\n  background: var(--b316-color-success-bg, #f0fdf4);\n  color: var(--b316-color-success);\n  padding: 12px 14px;\n  border-radius: calc(var(--b316-radius) / 2);\n  text-align: center;\n  margin: 0;\n}\n\n.b316-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--b316-color-border); }\n.b316-tab {\n  flex: 1; padding: 8px 4px; background: none; border: 0; cursor: pointer;\n  font: inherit; font-size: .95em; color: var(--b316-color-muted);\n  border-bottom: 2px solid transparent; margin-bottom: -1px;\n}\n.b316-tab-on { color: var(--b316-color-text); border-bottom-color: var(--b316-color-primary); }\n.b316-social { display: flex; flex-direction: column; gap: 8px; }\n.b316-social-button {\n  display: flex; align-items: center; justify-content: center; gap: 10px;\n  width: 100%; min-height: 40px; padding: 9px 14px;\n  border: 1px solid; border-radius: calc(var(--b316-radius) / 1.6);\n  font: inherit; font-weight: 500; cursor: pointer;\n}\n.b316-social-button:hover:not([disabled]) { filter: brightness(.96); }\n.b316-social-button:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }\n.b316-social-button[disabled] { opacity: .55; cursor: not-allowed; }\n.b316-social-icon { display: inline-flex; width: 18px; height: 18px; flex: none; }\n.b316-social-icon svg { width: 18px; height: 18px; }\n.b316-divider {\n  display: flex; align-items: center; gap: 10px; margin: 14px 0;\n  color: var(--b316-color-muted); font-size: .87em;\n}\n.b316-divider::before, .b316-divider::after { content: \"\"; flex: 1; border-top: 1px solid var(--b316-color-border); }\n.b316-branding { display: flex; flex-direction: column; gap: 4px; }\n.b316-branding-logo { max-height: 40px; width: auto; align-self: flex-start; }\n.b316-branding-name { font-size: 1.5em; font-weight: 650; letter-spacing: -.01em; }\n.b316-branding-tagline { color: var(--b316-color-muted); }\n\n.b316-invoice-table { width: 100%; border-collapse: collapse; font-size: 0.94em; }\n.b316-invoice-table th {\n  text-align: left;\n  font-weight: 500;\n  color: var(--b316-color-muted);\n  font-size: 0.85em;\n  padding: 0 0 6px;\n  border-bottom: 1px solid var(--b316-color-border);\n}\n.b316-invoice-table td { padding: 9px 0; border-bottom: 1px solid var(--b316-color-border); }\n/* Columns need breathing room or the amount runs straight into the action \u2014\n   \"$49.00View\" \u2014 which is what happens when only the row has padding. */\n.b316-invoice-table th + th,\n.b316-invoice-table td + td { padding-left: 16px; }\n.b316-invoice-table td:last-child,\n.b316-invoice-table th:last-child { text-align: right; width: 1%; white-space: nowrap; }\n.b316-invoice-table tr:last-child td { border-bottom: 0; }\n.b316-num { text-align: right; font-variant-numeric: tabular-nums; }\n\n.b316-invoice-view {\n  margin-top: calc(var(--b316-spacing) * 1.4);\n  border-top: 1px solid var(--b316-color-border);\n  padding-top: calc(var(--b316-spacing) * 1.4);\n}\n.b316-invoice-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: var(--b316-spacing); }\n.b316-invoice-doc { display: flex; flex-direction: column; gap: calc(var(--b316-spacing) * 1.4); }\n.b316-invoice-meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b316-spacing); }\n.b316-invoice-totals { display: flex; flex-direction: column; gap: 6px; margin-left: auto; min-width: 240px; }\n.b316-invoice-total { font-weight: 650; border-top: 1px solid var(--b316-color-border); padding-top: 6px; }\n\n/* Printing an invoice emits the invoice alone, and printing anything else is\n   none of this package's business.\n\n   This used to start with a bare \"body * { visibility: hidden }\", which is the\n   usual recipe for printing one element \u2014 and it is scoped to the document,\n   not to us. The stylesheet is injected into the host page's head the first\n   time any Base316 component mounts, so from that moment every print in the\n   host application came out blank unless the content happened to sit inside\n   .b316-invoice-doc. A customer printing their own page had no way to connect\n   it back to us.\n\n   Scoped to a root the invoice sets on <html> while it is being printed\n   instead, so nothing applies unless an invoice asked for it. */\n@media print {\n  [data-b316-printing] body * { visibility: hidden; }\n  [data-b316-printing] .b316-invoice-doc,\n  [data-b316-printing] .b316-invoice-doc * { visibility: visible; }\n  [data-b316-printing] .b316-invoice-doc {\n    position: absolute;\n    inset: 0 auto auto 0;\n    width: 100%;\n    padding: 24px;\n  }\n  .b316-invoice-actions { display: none; }\n}\n\n/* --- Collections: tables, forms and detail views ------------------------- */\n\n.b316-table-wrap { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-table-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); flex-wrap: wrap; }\n.b316-table-actions { display: flex; align-items: center; gap: var(--b316-spacing); }\n\n/* The table scrolls inside its own box rather than pushing the page sideways:\n   a collection with twenty fields is normal, and a horizontally scrolling page\n   makes every other component on it unreachable. */\n.b316-table-scroll { overflow-x: auto; border: 1px solid var(--b316-color-border); border-radius: var(--b316-radius); }\n.b316-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }\n.b316-table th, .b316-table td { padding: 10px 12px; text-align: left; vertical-align: top; white-space: nowrap; }\n.b316-table thead th { background: var(--b316-color-surface-muted, rgba(0,0,0,.03)); font-weight: 600; font-size: 0.87em; color: var(--b316-color-muted); border-bottom: 1px solid var(--b316-color-border); }\n.b316-table tbody tr + tr td { border-top: 1px solid var(--b316-color-border); }\n.b316-row-clickable { cursor: pointer; }\n.b316-row-clickable:hover td { background: var(--b316-color-surface-muted, rgba(0,0,0,.02)); }\n.b316-table-rowactions { text-align: right; white-space: nowrap; }\n.b316-table-more { display: flex; justify-content: center; }\n\n.b316-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }\n.b316-sort:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 2px; }\n\n.b316-empty { padding: calc(var(--b316-spacing) * 2); text-align: center; color: var(--b316-color-muted); }\n\n.b316-button-quiet {\n  background: none;\n  border: 0;\n  padding: 4px 6px;\n  font: inherit;\n  font-size: 0.9em;\n  color: var(--b316-color-primary);\n  cursor: pointer;\n  border-radius: calc(var(--b316-radius) / 2);\n}\n.b316-button-quiet:hover:not([disabled]) { background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); }\n.b316-button-quiet:focus-visible { outline: 2px solid var(--b316-color-primary); outline-offset: 1px; }\n.b316-button-quiet[disabled] { opacity: .55; cursor: not-allowed; }\n.b316-danger { color: var(--b316-color-danger, #b42318); }\n\n.b316-chip {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 999px;\n  background: var(--b316-color-surface-muted, rgba(0,0,0,.05));\n  font-size: 0.87em;\n}\n.b316-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }\n\n.b316-form { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-form-title { margin: 0; font-size: 1.05em; }\n.b316-form-actions { display: flex; justify-content: flex-end; gap: 8px; }\n.b316-field { display: flex; flex-direction: column; gap: 4px; }\n.b316-hint { font-size: 0.82em; color: var(--b316-color-muted); }\n.b316-input-invalid { border-color: var(--b316-color-danger, #b42318); }\n.b316-choices { display: flex; flex-wrap: wrap; gap: 10px; }\n.b316-choice { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95em; }\n.b316-suffixed { display: flex; align-items: center; gap: 8px; }\n.b316-address { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n\n.b316-relation-chosen { display: flex; align-items: center; gap: 8px; }\n.b316-relation-results {\n  list-style: none;\n  margin: 4px 0 0;\n  padding: 4px;\n  border: 1px solid var(--b316-color-border);\n  border-radius: var(--b316-radius);\n  max-height: 220px;\n  overflow-y: auto;\n  background: var(--b316-color-surface, #fff);\n}\n.b316-relation-result { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 8px; font: inherit; cursor: pointer; border-radius: calc(var(--b316-radius) / 2); }\n.b316-relation-result:hover, .b316-relation-result:focus-visible { background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); outline: none; }\n.b316-relation-empty { padding: 6px 8px; }\n\n.b316-detail { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--b316-spacing); }\n.b316-detail-title { margin: 0; font-size: 1.1em; }\n.b316-detail-actions { display: flex; gap: 4px; }\n.b316-detail-fields { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px var(--b316-spacing); margin: 0; }\n.b316-detail-row { display: contents; }\n.b316-detail-fields dd { margin: 0; }\n\n/* One column on a narrow screen. A label column of 200px beside a value leaves\n   nothing for the value on a phone. */\n/* --- Teams --------------------------------------------------------------- */\n\n.b316-team { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-team-title { margin: 0; font-size: 1em; font-weight: 600; }\n.b316-team-subtitle { margin: 0; font-size: .9em; font-weight: 600; color: var(--b316-color-muted); }\n.b316-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }\n.b316-team-member { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); }\n.b316-team-member-side { display: flex; align-items: center; gap: 8px; }\n.b316-team-invite { display: flex; flex-direction: column; gap: 4px; }\n.b316-team-invite-row { display: flex; gap: 8px; }\n.b316-team-invite-row input { flex: 1; }\n/* Selectable and wrapping: this is copied by hand and pasted into an email. */\n.b316-team-link { display: flex; flex-direction: column; gap: 4px; }\n.b316-team-link code { word-break: break-all; user-select: all; padding: 8px; border: 1px solid var(--b316-color-border); border-radius: var(--b316-radius); }\n\n.b316-invitation { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-invitation-actions { display: flex; align-items: center; gap: var(--b316-spacing); }\n\n/* --- Sessions, two-factor and the password flows ------------------------- */\n\n.b316-sessions { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-sessions-head { display: flex; align-items: center; justify-content: space-between; gap: var(--b316-spacing); flex-wrap: wrap; }\n.b316-sessions-title, .b316-mfa-title { margin: 0; font-size: 1em; font-weight: 600; }\n.b316-sessions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }\n.b316-session { display: flex; flex-direction: column; gap: 2px; }\n.b316-session-device { display: flex; align-items: center; gap: 6px; font-size: 0.95em; }\n\n.b316-device { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-device-title { margin: 0; font-size: 1em; font-weight: 600; }\n/* What is being granted, listed rather than run together: somebody is deciding\n   on this, and a comma-separated line is read as one thing. */\n.b316-device-scopes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }\n.b316-device-scopes li { padding: 2px 8px; border-radius: 999px; font-size: 0.85em; background: var(--b316-color-surface-muted, rgba(0,0,0,.05)); }\n.b316-device-actions { display: flex; gap: 8px; }\n\n.b316-privacy { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-privacy-title { margin: 0; font-size: 1em; font-weight: 600; }\n/* Wraps rather than squeezes: the explanation beside each control is the part\n   that matters, and on a narrow screen it belongs above the button. */\n.b316-privacy-row { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; }\n.b316-privacy-row p { margin: 0; }\n.b316-privacy-confirm { display: flex; flex-direction: column; gap: 8px; }\n.b316-privacy-actions { display: flex; justify-content: flex-end; gap: 8px; }\n\n.b316-mfa { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-mfa-enrol, .b316-mfa-codes, .b316-mfa-on, .b316-mfa-off { display: flex; flex-direction: column; gap: 10px; }\n.b316-mfa-actions { display: flex; justify-content: flex-end; gap: 8px; }\n/* Selectable and wrapping: this is copied by hand on the device that cannot\n   scan its own screen. */\n.b316-mfa-secret code {\n  display: block;\n  padding: 10px;\n  border: 1px solid var(--b316-color-border);\n  border-radius: var(--b316-radius);\n  font-size: 1.05em;\n  letter-spacing: .08em;\n  word-break: break-all;\n  user-select: all;\n}\n.b316-mfa-uri { font-size: 0.9em; }\n.b316-mfa-code-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.b316-mfa-code-list code { user-select: all; }\n/* The enrollment choices: whole-width buttons with their explanation inside,\n   so the explanation is part of what a screen reader announces. */\n.b316-mfa-methods { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }\n.b316-mfa-method { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; }\n.b316-mfa-method .b316-muted { font-weight: 400; }\n/* Always on white with a margin: a QR code on a dark theme does not scan. */\n.b316-mfa-qr { align-self: center; width: 180px; height: 180px; padding: 8px; background: #fff; border-radius: var(--b316-radius); }\n\n@media (max-width: 560px) {\n  .b316-mfa-code-list { grid-template-columns: 1fr; }\n  .b316-detail-fields { grid-template-columns: 1fr; }\n  .b316-detail-row { display: block; margin-bottom: 10px; }\n  .b316-address { grid-template-columns: 1fr; }\n}\n\n/* --- Board --------------------------------------------------------------- */\n\n.b316-board-wrap { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n/* The board scrolls sideways inside itself. Six columns is normal and a page\n   that scrolls horizontally puts everything else on it out of reach. */\n.b316-board { display: flex; gap: var(--b316-spacing); overflow-x: auto; align-items: flex-start; padding-bottom: 4px; }\n.b316-board-column {\n  flex: 0 0 260px;\n  background: var(--b316-color-surface-muted, rgba(0,0,0,.03));\n  border: 1px solid transparent;\n  border-radius: var(--b316-radius);\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.b316-board-over { border-color: var(--b316-color-primary); }\n.b316-board-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.b316-board-title { font-weight: 600; font-size: 0.92em; }\n.b316-board-cards { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }\n.b316-board-card {\n  background: var(--b316-color-surface, #fff);\n  border: 1px solid var(--b316-color-border);\n  border-radius: calc(var(--b316-radius) * .8);\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 0.9em;\n}\n.b316-board-card[draggable=\"true\"] { cursor: grab; }\n.b316-board-card-title { font-weight: 600; }\n.b316-board-card-field { display: flex; justify-content: space-between; gap: 8px; }\n.b316-board-move { display: flex; align-items: center; gap: 6px; margin-top: 2px; }\n.b316-board-move select { flex: 1; font-size: 0.9em; padding: 2px 4px; }\n.b316-board-empty { color: var(--b316-color-muted); font-size: 0.87em; padding: 6px 2px; }\n\n/* --- Chart --------------------------------------------------------------- */\n\n.b316-chart { display: flex; flex-direction: column; gap: var(--b316-spacing); }\n.b316-chart-title { font-weight: 600; font-size: 0.95em; }\n.b316-chart-plot { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; }\n.b316-chart-col { flex: 1 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }\n.b316-chart-bar { width: 100%; background: var(--b316-color-primary); border-radius: 3px 3px 0 0; min-height: 2px; }\n.b316-chart-label { font-size: 0.7em; color: var(--b316-color-muted); white-space: nowrap; transform: rotate(-45deg); transform-origin: top left; height: 1.6em; }\n.b316-chart-data summary { cursor: pointer; font-size: 0.87em; color: var(--b316-color-muted); }\n.b316-chart-data table { margin-top: 8px; }\n\n/* --- Billing portal ------------------------------------------------------ */\n\n.b316-billing-portal { display: grid; gap: var(--b316-spacing); }\n.b316-billing-portal-section-title { font-weight: 600; font-size: 1em; margin: 0 0 8px; }\n.b316-billing-portal .b316-plans { margin: 0; }\n.b316-invoice-row-actions { white-space: nowrap; text-align: right; }\n.b316-invoice-row-actions .b316-button-link + .b316-button-link { margin-left: 8px; }\n.b316-review-table { width: 100%; border-collapse: collapse; font-size: 0.92em; margin: 8px 0; }\n.b316-review-table th, .b316-review-table td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--b316-color-border, #e5e7eb); }\n.b316-review-table th { color: var(--b316-color-muted); font-weight: 500; border-top: 0; }\n.b316-review-gain { color: #065f46; }\n.b316-review-loss { color: var(--b316-color-danger); }\n.b316-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }\n@media (max-width: 560px) {\n  .b316-invoice-table th:nth-child(2), .b316-invoice-table td:nth-child(2) { display: none; }\n  .b316-review-actions .b316-button { flex: 1 1 100%; }\n}\n";
 //# sourceMappingURL=appearance.d.ts.map

package/dist/src/appearance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,WAAW,iBAAiB;IACjC,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAkBD,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,UAAU,CAAC,EAAE,iBAAiB,GAAG,aAAa,CAgB/E;AAED,eAAO,MAAM,gBAAgB,uBAAuB,CAAC;AAErD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,yiOA8OtB,CAAC;AAEF,kEAAkE;AAClE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAExD;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,2vkBA0V5B,CAAC"}
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,WAAW,iBAAiB;IACjC,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAkBD,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,UAAU,CAAC,EAAE,iBAAiB,GAAG,aAAa,CAgB/E;AAED,eAAO,MAAM,gBAAgB,uBAAuB,CAAC;AAErD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,wiOA8OtB,CAAC;AAEF,kEAAkE;AAClE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAExD;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,4vkBA0V5B,CAAC"}

package/dist/src/manifest.d.ts

@@ -56,7 +56,7 @@ export interface ManifestEntry {
     /** When to reach for this one rather than a sibling. */
     useWhen: string;
     requires: Requirement[];
-    /** Parameterised by a collection defined at runtime. */
+    /** Parameterized by a collection defined at runtime. */
     bindsToCollection?: boolean;
     props: PropEntry[];
     /** What appears when a requirement is not met. The answer to "why is it blank". */

package/dist/src/manifest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../../src/manifest.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH;;;;GAIG;AACH,MAAM,MAAM,WAAW;AACtB,8EAA8E;AAC5E,SAAS;AACX,gFAAgF;GAC9E,YAAY;AACd,kDAAkD;GAChD,OAAO;AACT,mFAAmF;GACjF,gBAAgB;AAClB,mEAAmE;GACjE,aAAa,CAAC;AAEjB,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;IACxC,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAOD,eAAO,MAAM,QAAQ,EAAE,aAAa,EA67BnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;aACvB,KAAK,YACJ,qEAAqE,EACrE,yIAAyI,EACzI,2JAA2J,EAC3J,+QAA+Q,EAC/Q,0ZAA0Z,EAC1Z,4KAA4K;IAE7K,uDAAuD;aACvD,OAAO;CAyBE,CAAC;AAEX,2BAA2B;AAC3B,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAEzE;AAED,sFAAsF;AACtF,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,GAAG,aAAa,EAAE,CAE7E"}
+{"version":3,"file":"manifest.d.ts","sourceRoot":"","sources":["../../src/manifest.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH;;;;GAIG;AACH,MAAM,MAAM,WAAW;AACtB,8EAA8E;AAC5E,SAAS;AACX,gFAAgF;GAC9E,YAAY;AACd,kDAAkD;GAChD,OAAO;AACT,mFAAmF;GACjF,gBAAgB;AAClB,mEAAmE;GACjE,aAAa,CAAC;AAEjB,MAAM,WAAW,SAAS;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,kFAAkF;IAClF,QAAQ,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;IACxC,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAOD,eAAO,MAAM,QAAQ,EAAE,aAAa,EAw8BnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;aACvB,KAAK,YACJ,qEAAqE,EACrE,yIAAyI,EACzI,2JAA2J,EAC3J,+QAA+Q,EAC/Q,0ZAA0Z,EAC1Z,4KAA4K;IAE7K,uDAAuD;aACvD,OAAO;CAyBE,CAAC;AAEX,2BAA2B;AAC3B,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAEzE;AAED,sFAAsF;AACtF,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,GAAG,aAAa,EAAE,CAE7E"}

package/dist/src/provider.d.ts

@@ -16,7 +16,7 @@ import { type Base316Appearance } from "./appearance";
  */
 interface Base316ContextValue {
     client: Base316Browser;
-    /** The environment's logo, name and colours. Null until it loads. */
+    /** The environment's logo, name and colors. Null until it loads. */
     branding: BrandingInfo | null;
     token: string | null;
     setToken: (token: string | null) => void;
@@ -31,11 +31,11 @@ export declare function Base316Provider({ publishableKey, baseUrl, token: contro
     /** Supply this to own session storage yourself. */
     token?: string | null;
     onTokenChange?: (token: string | null) => void;
-    /** Colours, radius and font, as tokens. See `Base316Appearance`. */
+    /** Colors, radius and font, as tokens. See `Base316Appearance`. */
     appearance?: Base316Appearance;
     /**
      * White-label every component under this provider for one tenant: a firm's
-     * name, logo and colours on the screens your application shows its clients.
+     * name, logo and colors on the screens your application shows its clients.
      * Its own branding, then its parent's, then the environment's, field by
      * field. Change it — when the user switches team, say — and the components
      * restyle without a reload. Omit it for the environment's own branding.

package/dist/src/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,IAAI,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAON,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAEf,OAAO,EAKN,KAAK,iBAAiB,EACtB,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;;GAWG;AAEH,UAAU,mBAAmB;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,qEAAqE;IACrE,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AA4BD,wBAAgB,eAAe,CAAC,EAC/B,cAAc,EACd,OAAO,EACP,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,UAAU,EACV,MAAM,EACN,cAAc,EACd,SAAS,EACT,QAAQ,GACR,EAAE;IACF,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,oEAAoE;IACpE,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,sBAAsB,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChF;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB,+BA0JA;AAED,wBAAgB,UAAU,IAAI,mBAAmB,CAQhD;AAED,oFAAoF;AACpF,wBAAgB,UAAU,IAAI;IAAE,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAGlF"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,IAAI,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,EAON,KAAK,SAAS,EACd,MAAM,OAAO,CAAC;AAEf,OAAO,EAKN,KAAK,iBAAiB,EACtB,MAAM,cAAc,CAAC;AAEtB;;;;;;;;;;;GAWG;AAEH,UAAU,mBAAmB;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,oEAAoE;IACpE,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7B;AA4BD,wBAAgB,eAAe,CAAC,EAC/B,cAAc,EACd,OAAO,EACP,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,UAAU,EACV,MAAM,EACN,cAAc,EACd,SAAS,EACT,QAAQ,GACR,EAAE;IACF,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,sBAAsB,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAChF;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB,+BA0JA;AAED,wBAAgB,UAAU,IAAI,mBAAmB,CAQhD;AAED,oFAAoF;AACpF,wBAAgB,UAAU,IAAI;IAAE,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAGlF"}

package/dist/src/useAddons.d.ts

@@ -0,0 +1,29 @@
+import type { AddonChangeOutcome, SelfServiceAddon, SelfServiceAttachedAddon } from "@base316/sdk";
+/**
+ * The signed-in user's addons, and buying, resizing and removing them —
+ * without any markup, like `usePlans`.
+ *
+ * The account and its subscription come from the session; the hook only names
+ * an addon and a count. How a change is settled is the API's: more applies now
+ * and the rest of the period is charged, fewer and removals wait for the
+ * period end. Every action reloads, so `attached` shows the result (a waiting
+ * decrease as `scheduledQuantity`).
+ */
+export interface UseAddonsResult {
+    /** Null until loaded, or when there is no subscription to carry addons. */
+    attached: SelfServiceAttachedAddon[] | null;
+    /** What the user can buy for their current plan. */
+    available: SelfServiceAddon[] | null;
+    loading: boolean;
+    /** The API's error code from the last load or action (`no_payment_method`, …). */
+    lastError: string | null;
+    /** The addon (attachment id or addon id) an action is running for. */
+    busy: string | null;
+    signedIn: boolean;
+    attach: (addonId: string, quantity?: number) => Promise<AddonChangeOutcome | null>;
+    setQuantity: (attachmentId: string, quantity: number) => Promise<AddonChangeOutcome | null>;
+    remove: (attachmentId: string) => Promise<AddonChangeOutcome | null>;
+    reload: () => void;
+}
+export declare function useAddons(): UseAddonsResult;
+//# sourceMappingURL=useAddons.d.ts.map

package/dist/src/useAddons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAddons.d.ts","sourceRoot":"","sources":["../../src/useAddons.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAKnG;;;;;;;;;GASG;AAEH,MAAM,WAAW,eAAe;IAC/B,2EAA2E;IAC3E,QAAQ,EAAE,wBAAwB,EAAE,GAAG,IAAI,CAAC;IAC5C,oDAAoD;IACpD,SAAS,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;IACrC,OAAO,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sEAAsE;IACtE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IACnF,WAAW,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IAC5F,MAAM,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IACrE,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB;AASD,wBAAgB,SAAS,IAAI,eAAe,CA+F3C"}

package/dist/src/usePaymentLink.d.ts

@@ -33,7 +33,7 @@ export declare function usePaymentLink({ token, environmentId, intervalMs, onPai
     environmentId: string;
     /**
      * How often to ask. The default is chosen against the thing being waited for
-     * — somebody tapping a phone a metre away — rather than against server load.
+     * — somebody tapping a phone a meter away — rather than against server load.
      */
     intervalMs?: number;
     onPaid?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base316/react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Drop-in React components for Base316 authentication and billing.",
   "homepage": "https://base316.com",
   "bugs": "https://github.com/ThinkfleetAI/base316/issues",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "qrcode-generator": "2.0.4",
-    "@base316/sdk": "0.9.0"
+    "@base316/sdk": "0.10.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.2",