@soyio/soyio-widget 2.26.0 → 3.1.0

package/README.md

@@ -193,6 +193,9 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
       { id: "op_rectification", label: "Rectification" },
     ],
 
+    // Override the "exercise your rights" link shown in consent-only mode (optional)
+    externalRightsExerciseUrl: "https://privacy.example.com/rights",
+
     // Header and copy customization (optional)
     content: {
       header: {
@@ -268,6 +271,7 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
   - `allowedExtensions`: Array of allowed file extensions (e.g. `['pdf', 'jpg']`). Default: `['pdf', 'png', 'jpeg', 'jpg']`.
   - `maxFileSize`: Maximum file size in bytes. Default: `5 * 1024 * 1024` (5MB).
 - `redecOperationIds`: Optional array of `{ id, label }` values for the Redec operation select. Required if `redec` right is included in `enabledRights` param.
+- `externalRightsExerciseUrl`: Optional URL used by required consent alerts when users need to exercise their rights outside the embedded privacy center.
 - `appearance.config.showHeader`: Optional boolean to show/hide the privacy center header (title and description).
 - `content.header`: Optional object with `title` and `description` overrides for the privacy center header copy.
 - `appearance.config.showConsentManagementHeader`: Optional boolean to show/hide the title and description in the consent management page.
@@ -290,7 +294,7 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
 Note:
 - When `sessionToken` is provided, do not pass `companyId`.
 - `consentManagement.scopeGroups` is applied during initial iframe URL render and also synchronized through `SET_PRIVACY_CENTER_CONFIG` updates.
-- `content.header`, `content.consentManagement.header`, and `appearance.config.showConsentManagementHeader` are applied through `SET_PRIVACY_CENTER_CONFIG`; the header may briefly appear before the update is received.
+- `content.header`, `content.consentManagement.header`, `appearance.config.showConsentManagementHeader`, and `externalRightsExerciseUrl` are applied through `SET_PRIVACY_CENTER_CONFIG`; those overrides may briefly appear after the iframe is ready.
 
 ### Privacy Center Events
 
@@ -595,19 +599,31 @@ Built-in themes provide pre-configured color palettes and component styles:
 | Theme | Description |
 | ----- | ----------- |
 | `"soyio"` | Default light theme with Soyio brand colors (purple/indigo), uppercase titles |
-| `"night"` | Dark mode theme with deep blues, muted colors, and subtle borders |
 | `"flat"` | Minimal theme with square corners, normal-case titles, thicker borders |
+| `"neutral"` | Neutral palette that works well for both light and dark modes |
+| `"night"` | Deprecated alias for `theme: "soyio"` with `mode: "dark"` |
 
 **Theme style differences:**
 
 - **soyio**: Standard styling with rounded corners and uppercase card titles
-- **night**: Dark backgrounds, lighter text, borders using theme variables
 - **flat**: No border radius, sentence-case titles (no uppercase), 2px borders, lighter font weights
+- **neutral**: Balanced grayscale palette intended for a more subdued branded experience
+
+### Color Modes
+
+Appearance now supports a `mode` field:
+
+| Mode | Description |
+| ---- | ----------- |
+| `"light"` | Forces light mode |
+| `"dark"` | Forces dark mode |
+| `"auto"` | Follows the user's system color scheme |
 
 **Example:**
 ```javascript
 const appearance = {
-  theme: "night", // Use the dark theme
+  theme: "soyio",
+  mode: "dark",
   variables: {
     // You can still override specific variables
     colorPrimary: "#FF6B6B",
@@ -621,6 +637,8 @@ const appearance = {
 
 Theme variables and rules are applied first, then your custom overrides take precedence.
 
+> `theme: "night"` is still accepted as a deprecated alias for backwards compatibility, but new integrations should use `theme + mode`.
+
 ### Config
 
 The `config` object allows you to adjust component behavior settings.
@@ -1055,7 +1073,8 @@ const ajv = new Ajv();
 const validate = ajv.compile(appearanceSchema);
 
 const appearance = {
-  theme: "night",
+  theme: "soyio",
+  mode: "dark",
   variables: {
     colorPrimary: "#007bff",
     borderRadius: "8px"

package/dist/index.d.ts

@@ -329,6 +329,8 @@ export declare class PrivacyCenterBox extends BaseIframeBox<Record<string, unkno
 declare type PrivacyCenterConfig = BaseConfig & {
     enabledFeatures?: PrivacyManagerFeature[];
     enabledRights?: PrivacyCenterRight[];
+    /** @format uri @minLength 1 */
+    externalRightsExerciseUrl?: string;
     dataSubjects?: DataSubject[];
     requestReference?: string;
     demo?: boolean;
@@ -412,10 +414,11 @@ declare type SignatureRequestConfig = {
     developmentUrl?: string;
 };
 
-declare type SkeletonConstructor = new (id: string, theme?: SoyioTheme) => ISkeletonView;
+declare type SkeletonConstructor = new (id: string, appearance?: SoyioAppearance) => ISkeletonView;
 
 declare interface SoyioAppearance {
     theme?: SoyioTheme;
+    mode?: SoyioColorMode;
     variables?: SoyioAppearanceVariables;
     rules?: SoyioRule;
     config?: SoyioAppearanceConfig;
@@ -518,6 +521,15 @@ declare interface SoyioAppearanceVariables {
 
 declare type SoyioBaseRule = '.MainContainer' | '.Button' | '.Checkbox' | '.CheckboxInput' | '.CheckboxLabel' | '.CheckboxCheck' | '.Input' | '.Label' | '.HintIcon' | '.Title' | '.CategoryTag' | '.StepTitle' | '.Link' | '.Card' | '.CardTitle' | '.Select' | '.Loader' | '.TextArea' | '.ErrorMessage' | '.Description' | '.Switch' | '.SwitchRoot' | '.SwitchThumb' | '.SwitchIcon' | '.Alert' | '.AlertIcon' | '.AlertContent' | '.Radio' | '.RadioButton' | '.RadioIndicator' | '.RadioLabel' | '.Chip' | '.Dialog' | '.DialogOverlay' | '.DialogContent' | '.DialogTitle' | '.DialogDescription' | '.Combobox' | '.NinInput' | '.TrackingCodeInput' | '.TrackingCodeInputCell' | '.TrackingCodeInputSeparator' | '.RadioCard' | '.RadioCardButton' | '.RadioCardIndicator' | '.RadioCardTitle' | '.StepIndicatorContainer' | '.StepIndicator' | '.StepIndicatorLine' | '.StepIndicatorIcon' | '.StepIndicatorDot' | '.StepIndicatorNumber' | '.TooltipContent';
 
+/**
+ * Appearance color mode.
+ *
+ * - `light`: force light mode
+ * - `dark`: force dark mode
+ * - `auto`: follow the consumer's system color scheme
+ */
+declare type SoyioColorMode = 'light' | 'dark' | 'auto';
+
 declare type SoyioElementState = '--checked';
 
 declare interface SoyioIconConfig {
@@ -556,7 +568,12 @@ declare type SoyioRuleKey = `${SoyioBaseRule}${SoyioElementState | SoyioPseudoCl
 
 declare type SoyioStateRule = '.Input--error' | '.Alert--error' | '.Alert--warning' | '.Alert--info' | '.Alert--note' | '.Alert--success' | '.Chip--info' | '.Chip--green' | '.Chip--red' | '.Chip--amber' | '.RadioCard--checked' | '.RadioCardIndicator--checked' | '.StepIndicator--active' | '.StepIndicator--completed' | '.StepIndicator--pending' | '.StepIndicatorLine--top' | '.StepIndicatorLine--bottom';
 
-declare type SoyioTheme = 'soyio' | 'night' | 'flat';
+/**
+ * Appearance theme palette.
+ *
+ * `night` is kept as a deprecated alias for `theme: 'soyio'` + `mode: 'dark'`.
+ */
+declare type SoyioTheme = 'soyio' | 'flat' | 'neutral' | 'night';
 
 declare namespace SoyioTypes {
     export {
@@ -564,6 +581,10 @@ declare namespace SoyioTypes {
         ConsentConfig,
         PrivacyCenterConfig,
         SoyioAppearance,
+        SoyioAppearanceConfig,
+        SoyioAppearanceVariables,
+        SoyioColorMode,
+        SoyioTheme,
         Request_2 as Request,
         NewDisclosureRequestProps,
         ExistingDisclosureRequestProps,