@usereq/widget 0.2.19 → 0.2.20

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 (3) hide show
  1. package/dist/widget.js +20 -8
  2. package/package.json +1 -1
  3. package/src/shared/shadow-theme.ts +20 -8
package/dist/widget.js CHANGED
@@ -132,20 +132,32 @@ Error generating stack: `+s.message+`
132
132
  * Anchor inherited typography to the design system.
133
133
  *
134
134
  * Shadow DOM isolates SELECTORS but NOT inherited properties — the
135
- * <usereq-agent-widget> custom element inherits color / font-family /
136
- * font-size / line-height from the host page's <body>, and form
137
- * controls inside (textarea, input, button) re-inherit via Tailwind's
138
- * preflight rule \`color: inherit\`. If the host page sets
139
- * \`body { color: #fff }\` the widget's textarea becomes invisible.
135
+ * <usereq-agent-widget> custom element inherits a long list of text
136
+ * properties from the host page's <body>, and form controls inside
137
+ * (textarea, input, button) re-inherit via Tailwind's preflight rule
138
+ * \`color: inherit\`. Host pages set things like:
140
139
  *
141
- * Setting these here makes :host the canonical source so every
142
- * descendant inside the shadow tree uses our tokens regardless of
143
- * what the host page is doing.
140
+ * body { color: #fff; } → textarea text invisible
141
+ * body { text-align: center; } → every message bubble centered
142
+ * body { font-family: cursive; } → widget renders in cursive
143
+ * body { text-transform: uppercase; } → ALL CAPS UI
144
+ *
145
+ * Setting these on :host makes the widget the canonical source so
146
+ * every descendant inside the shadow tree uses our tokens regardless
147
+ * of what the host page is doing. Each line below addresses a
148
+ * commonly-reported customer bleed.
144
149
  */
145
150
  color: var(--foreground);
146
151
  font-family: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
147
152
  font-size: 16px;
153
+ font-style: normal;
154
+ font-weight: 400;
148
155
  line-height: 1.5;
156
+ text-align: left;
157
+ text-decoration: none;
158
+ text-transform: none;
159
+ letter-spacing: normal;
160
+ word-spacing: normal;
149
161
  --tw-border-style: solid;
150
162
  --radius: 0.625rem;
151
163
  --font-geist-sans: Geist, sans-serif;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usereq/widget",
3
- "version": "0.2.19",
3
+ "version": "0.2.20",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/shared/shadow-theme.ts CHANGED
@@ -5,20 +5,32 @@ export const WIDGET_SHADOW_THEME_CSS = `
5
5
  * Anchor inherited typography to the design system.
6
6
  *
7
7
  * Shadow DOM isolates SELECTORS but NOT inherited properties — the
8
- * <usereq-agent-widget> custom element inherits color / font-family /
9
- * font-size / line-height from the host page's <body>, and form
10
- * controls inside (textarea, input, button) re-inherit via Tailwind's
11
- * preflight rule \`color: inherit\`. If the host page sets
12
- * \`body { color: #fff }\` the widget's textarea becomes invisible.
8
+ * <usereq-agent-widget> custom element inherits a long list of text
9
+ * properties from the host page's <body>, and form controls inside
10
+ * (textarea, input, button) re-inherit via Tailwind's preflight rule
11
+ * \`color: inherit\`. Host pages set things like:
13
12
  *
14
- * Setting these here makes :host the canonical source so every
15
- * descendant inside the shadow tree uses our tokens regardless of
16
- * what the host page is doing.
13
+ * body { color: #fff; } → textarea text invisible
14
+ * body { text-align: center; } → every message bubble centered
15
+ * body { font-family: cursive; } → widget renders in cursive
16
+ * body { text-transform: uppercase; } → ALL CAPS UI
17
+ *
18
+ * Setting these on :host makes the widget the canonical source so
19
+ * every descendant inside the shadow tree uses our tokens regardless
20
+ * of what the host page is doing. Each line below addresses a
21
+ * commonly-reported customer bleed.
17
22
  */
18
23
  color: var(--foreground);
19
24
  font-family: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
20
25
  font-size: 16px;
26
+ font-style: normal;
27
+ font-weight: 400;
21
28
  line-height: 1.5;
29
+ text-align: left;
30
+ text-decoration: none;
31
+ text-transform: none;
32
+ letter-spacing: normal;
33
+ word-spacing: normal;
22
34
  --tw-border-style: solid;
23
35
  --radius: 0.625rem;
24
36
  --font-geist-sans: Geist, sans-serif;