@voxket-ai/events-sdk 1.0.6 → 1.0.7

package/README.md

@@ -184,7 +184,7 @@ All available options for the `WidgetConfig` object:
 | `themeMode` | `'light' \| 'dark'` | `'light'` | Controls the base color scheme (clean white/gray or deep black `#000` with high-contrast text). |
 | `theme` | `object` | `{}` | Detailed appearance customization (see below). |
 | `theme.primaryColor` | `string` | `'#2563eb'` | Brand color used for primary buttons, tabs, highlights, and headers. |
-| `theme.fontFamily` | `string` | System font | Custom font family CSS string (e.g. `'Inter, sans-serif'`). |
+| `theme.fontFamily` | `string` | Host page's font | Leave it out to use the host page's font. Pass a font family CSS string (e.g. `'Inter, sans-serif'`) to use a different one. See [Matching the Host Site's Design](#matching-the-host-sites-design). |
 | `theme.mode` | `'light' \| 'dark' \| 'blue' \| 'white' \| 'custom'` | `'light'` | Preset theme mode alias. |
 | `isAbstract` | `boolean` | `false` | Abstract submission page: no attendee login, shows `is_review` fields, adds `accept_review_file: true` on submit. See [Abstract Submission Page](#3-abstract-submission-page). |
 | `headerBannerImage` | `string` | `undefined` | Banner image on the right of the top header, scaled to the header's height; its left edge fades into the header's theme-color gradient. See [Banner & Background Images](#banner--background-images). |
@@ -346,6 +346,58 @@ const config: WidgetConfig = {
 
 ---
 
+## Matching the Host Site's Design
+
+The widget renders inside a Shadow DOM, so the host site's classes (Tailwind, shadcn, global CSS) never reach it and never break it. The host site can still restyle it in two ways. Both are opt-in: if the host site sets nothing, the widget looks exactly as before.
+
+### 1. Fonts
+
+The widget uses the host page's font by default, with nothing to configure. To use a different font, pass it in the config:
+
+```typescript
+theme: { fontFamily: 'Inter, sans-serif' }
+```
+
+Headings use the same font unless the host page sets `--vx-font-heading`. Both can be set as CSS variables anywhere on the host page (`:root` works; they pass into the Shadow DOM), and they take priority over `theme.fontFamily`:
+
+```css
+:root {
+  --vx-font-family: var(--font-sans);      /* body text, inputs, buttons */
+  --vx-font-heading: var(--font-heading);  /* titles and headings */
+}
+```
+
+### 2. Element styles with `::part()`
+
+Key elements carry a `part` name. Target them from the host site's CSS through the widget host element `[data-voxket-shadow-host]`. These rules override the widget's own styles, including hover and focus states you target yourself (`::part(card):hover`, `::part(input):focus`).
+
+```css
+[data-voxket-shadow-host]::part(card) {
+  border-radius: 1.75rem;
+  border: 1px solid var(--border);
+  box-shadow: none;
+}
+[data-voxket-shadow-host]::part(card-title) { color: var(--foreground); }
+[data-voxket-shadow-host]::part(button-primary) { border-radius: 9999px; }
+```
+
+| Area | Part names |
+| :--- | :--- |
+| Whole widget | `widget`, `launcher` (popup "Join" button) |
+| Form-types list | `page`, `header`, `header-title`, `header-subtitle`, `tabs`, `tab`, `tab-active`, `list`, `search` (title + search toolbar), `list-title`, `list-count`, `search-input`, `empty-state`, `card-grid` |
+| Form-type card | `card`, `card-category`, `card-seats`, `card-title`, `card-price`, `card-tax`, `card-description`, `card-perks`, `card-button` |
+| Registration form | `form-page`, `form-header`, `back-button`, `form-type-name`, `form-type-price`, `form`, `form-intro`, `form-title`, `notice`, `notice-title`, `form-card` (card holding all fields), `field` (one section per field), `field-label`, `field-description`, `upload`, `review-upload`, `submit-button` |
+| Result screens | `screen`, `screen-payment`, `screen-success`, `screen-error`, `screen-header`, `screen-header-title`, `screen-title`, `screen-message`, `registration-number`, `copy-button` |
+| Attendee portal | `portal`, `portal-card` (login / get code / set password card, and every profile card), `profile-card`, `details-card`, `addons-card`, `logout-button`, `portal-title`, `back-button`, `field-label`, `upload`, `submit-button` |
+| Shared | `input` (text inputs, selects, textareas), `select`, `textarea`, `button`, `button-primary`, `button-secondary`, `button-link` |
+
+Notes:
+- `::part()` cannot reach inside a part (`::part(card) h3` does not work). Use the dedicated part (`::part(card-title)`).
+- Many inputs have an icon on the left. Avoid overriding `padding` on `::part(input)`, or the text will overlap the icon.
+- The widget's colors are still driven by `theme.primaryColor` and `themeMode`. Rules you add apply in both light and dark mode.
+
+---
+
 ## Client API Methods (`EventWidgetClient`)
 
 When using the vanilla JavaScript / non-React API:

package/dist/components/ShadowWrapper.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 export interface ShadowHostWrapperProps {
     children?: React.ReactNode;
     useShadow?: boolean;
+    inheritFont?: boolean;
 }
 export declare const ShadowHostWrapper: React.FC<ShadowHostWrapperProps>;