@domainkit/react 0.7.0 → 0.9.0

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 (6) hide show
  1. package/README.md +114 -36
  2. package/dist/index.d.mts +1219 -1308
  3. package/dist/index.mjs +2015 -1633
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles.css +1185 -1023
  6. package/package.json +2 -10
package/dist/styles.css CHANGED
@@ -1,51 +1,42 @@
1
- :where(
2
- [data-domainkit-root],
3
- [data-domainkit-part="copy-value"]:not([data-domainkit-root] *),
4
- [data-domainkit-part="record-card"]:not([data-domainkit-root] *),
5
- [data-domainkit-part="record-status"]:not([data-domainkit-root] *),
6
- [data-domainkit-part="records-panel"]:not([data-domainkit-root] *),
7
- [data-domainkit-part="zone-file"]:not([data-domainkit-root] *)
8
- ) {
9
- --domainkit-accent: #0070f3;
10
- --domainkit-accent-contrast: #ffffff;
11
- --domainkit-backdrop: rgb(15 23 42 / 0.45);
12
- --domainkit-background: #ffffff;
13
- --domainkit-border: #d4d4d8;
14
- --domainkit-danger: #dc2626;
15
- --domainkit-danger-contrast: #ffffff;
16
- --domainkit-fill: #f4f4f5;
17
- --domainkit-font-family: ui-sans-serif, system-ui, sans-serif;
18
- --domainkit-muted: #52525b;
19
- --domainkit-radius: 0.75rem;
20
- --domainkit-shadow: 0 16px 40px rgb(15 23 42 / 0.12);
21
- --domainkit-success: #059669;
22
- --domainkit-text: #18181b;
23
- --domainkit-control-radius: calc(var(--domainkit-radius) * 0.5);
24
- --domainkit-button-raised-glint: rgb(255 255 255 / 0.95);
25
- --domainkit-button-raised-shade: color-mix(in srgb, var(--domainkit-text) 10%, transparent);
26
- --domainkit-button-raised-shadow: 0 1px 2px
27
- color-mix(in srgb, var(--domainkit-text) 10%, transparent);
28
- color: var(--domainkit-text);
29
- color-scheme: light;
30
- font-family: var(--domainkit-font-family);
31
- }
32
-
33
- :where([data-domainkit-root][data-color-scheme="dark"]) {
34
- --domainkit-background: #18181b;
35
- --domainkit-border: #3f3f46;
36
- --domainkit-fill: #27272a;
37
- --domainkit-muted: #a1a1aa;
38
- --domainkit-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
39
- --domainkit-success: #34d399;
40
- --domainkit-text: #fafafa;
41
- --domainkit-button-raised-glint: rgb(255 255 255 / 0.14);
42
- --domainkit-button-raised-shade: rgb(0 0 0 / 0.42);
43
- --domainkit-button-raised-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
44
- color-scheme: dark;
45
- }
1
+ /**
2
+ * Every rule ships inside the `domainkit` cascade layer, so a host's own stylesheet wins
3
+ * without needing to out-specify a part selector. Nothing here relies on beating host CSS;
4
+ * a host that wants the package to win puts its own rules in a layer ordered below this one.
5
+ */
6
+ @layer domainkit {
7
+ :where(
8
+ [data-domainkit-root],
9
+ [data-domainkit-part="copy-value"]:not([data-domainkit-root] *),
10
+ [data-domainkit-part="record-card"]:not([data-domainkit-root] *),
11
+ [data-domainkit-part="record-status"]:not([data-domainkit-root] *),
12
+ [data-domainkit-part="records-panel"]:not([data-domainkit-root] *),
13
+ [data-domainkit-part="zone-file"]:not([data-domainkit-root] *)
14
+ ) {
15
+ --domainkit-accent: #0070f3;
16
+ --domainkit-accent-contrast: #ffffff;
17
+ --domainkit-backdrop: rgb(15 23 42 / 0.45);
18
+ --domainkit-background: #ffffff;
19
+ --domainkit-border: #d4d4d8;
20
+ --domainkit-danger: #dc2626;
21
+ --domainkit-danger-contrast: #ffffff;
22
+ --domainkit-fill: #f4f4f5;
23
+ --domainkit-font-family: ui-sans-serif, system-ui, sans-serif;
24
+ --domainkit-muted: #52525b;
25
+ --domainkit-radius: 0.75rem;
26
+ --domainkit-shadow: 0 16px 40px rgb(15 23 42 / 0.12);
27
+ --domainkit-success: #059669;
28
+ --domainkit-text: #18181b;
29
+ --domainkit-control-radius: calc(var(--domainkit-radius) * 0.5);
30
+ --domainkit-button-raised-glint: rgb(255 255 255 / 0.95);
31
+ --domainkit-button-raised-shade: color-mix(in srgb, var(--domainkit-text) 10%, transparent);
32
+ --domainkit-button-raised-shadow: 0 1px 2px
33
+ color-mix(in srgb, var(--domainkit-text) 10%, transparent);
34
+ color: var(--domainkit-text);
35
+ color-scheme: light;
36
+ font-family: var(--domainkit-font-family);
37
+ }
46
38
 
47
- @media (prefers-color-scheme: dark) {
48
- :where([data-domainkit-root][data-color-scheme="inherit"]) {
39
+ :where([data-domainkit-root][data-color-scheme="dark"]) {
49
40
  --domainkit-background: #18181b;
50
41
  --domainkit-border: #3f3f46;
51
42
  --domainkit-fill: #27272a;
@@ -58,1126 +49,1297 @@
58
49
  --domainkit-button-raised-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
59
50
  color-scheme: dark;
60
51
  }
61
- }
62
52
 
63
- :where([data-domainkit-part="connection-root"]) {
64
- display: grid;
65
- gap: 0.75rem;
66
- justify-items: stretch;
67
- width: 100%;
68
- }
53
+ @media (prefers-color-scheme: dark) {
54
+ :where([data-domainkit-root][data-color-scheme="inherit"]) {
55
+ --domainkit-background: #18181b;
56
+ --domainkit-border: #3f3f46;
57
+ --domainkit-fill: #27272a;
58
+ --domainkit-muted: #a1a1aa;
59
+ --domainkit-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
60
+ --domainkit-success: #34d399;
61
+ --domainkit-text: #fafafa;
62
+ --domainkit-button-raised-glint: rgb(255 255 255 / 0.14);
63
+ --domainkit-button-raised-shade: rgb(0 0 0 / 0.42);
64
+ --domainkit-button-raised-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
65
+ color-scheme: dark;
66
+ }
67
+ }
69
68
 
70
- :where([data-domainkit-part="connection-status"]) {
71
- color: var(--domainkit-muted);
72
- font-size: 0.875rem;
73
- line-height: 1.4;
74
- }
69
+ :where([data-domainkit-part="connection-root"]) {
70
+ display: grid;
71
+ gap: 0.75rem;
72
+ justify-items: stretch;
73
+ width: 100%;
74
+ }
75
75
 
76
- :where([data-domainkit-part="connection-status"][data-state="Connected"]) {
77
- color: var(--domainkit-success);
78
- font-weight: 500;
79
- }
76
+ :where([data-domainkit-part="connection-status"]) {
77
+ color: var(--domainkit-muted);
78
+ font-size: 0.875rem;
79
+ line-height: 1.4;
80
+ }
80
81
 
81
- :where([data-domainkit-part="connection-status"][data-state="Failure"]) {
82
- color: var(--domainkit-danger);
83
- }
82
+ :where([data-domainkit-part="connection-status"][data-state="Connected"]) {
83
+ color: var(--domainkit-success);
84
+ font-weight: 500;
85
+ }
84
86
 
85
- :where(
86
- [data-domainkit-recipe="connect"],
87
- [data-domainkit-part="integration-connect"],
88
- [data-domainkit-part="oauth-connect"],
89
- [data-domainkit-part="attach-target"],
90
- [data-domainkit-part="connection-retry"],
91
- [data-domainkit-part="plan-trigger"],
92
- [data-domainkit-part="plan-apply"],
93
- [data-domainkit-part="provisioning-retry"],
94
- [data-domainkit-part="observe-action"],
95
- [data-domainkit-part="cleanup-trigger"],
96
- [data-domainkit-part="cleanup-apply"],
97
- [data-domainkit-part="cleanup-retry"],
98
- [data-domainkit-part="disconnect-action"],
99
- [data-domainkit-part="disconnect-trigger"],
100
- [data-domainkit-part="actions-trigger"],
101
- [data-domainkit-part="token-connect"] button,
102
- [data-domainkit-part="copy-action"],
103
- [data-domainkit-part="zone-copy"],
104
- [data-domainkit-part="zone-download"],
105
- [data-domainkit-part="dialog-cancel"],
106
- [data-domainkit-part="dialog-close"]
107
- ) {
108
- align-items: center;
109
- border: 1px solid transparent;
110
- border-radius: var(--domainkit-control-radius);
111
- cursor: pointer;
112
- display: inline-flex;
113
- font: inherit;
114
- font-size: 0.875rem;
115
- font-weight: 500;
116
- justify-content: center;
117
- line-height: 1.2;
118
- min-height: 2.25rem;
119
- padding: 0.45rem 0.85rem;
120
- transition:
121
- background-color 120ms ease,
122
- background-image 120ms ease,
123
- border-color 120ms ease,
124
- box-shadow 120ms ease;
125
- }
87
+ :where([data-domainkit-part="connection-status"][data-state="Failure"]) {
88
+ color: var(--domainkit-danger);
89
+ }
126
90
 
127
- :where(
128
- [data-domainkit-recipe="connect"],
129
- [data-domainkit-part="integration-connect"],
130
- [data-domainkit-part="oauth-connect"],
131
- [data-domainkit-part="plan-trigger"],
132
- [data-domainkit-part="plan-apply"]
133
- ) {
134
- --domainkit-button-face: color-mix(in oklch, var(--domainkit-accent), white 22%);
135
- --domainkit-button-glint: color-mix(in oklch, var(--domainkit-accent), white 42%);
136
- --domainkit-button-edge: color-mix(in oklch, var(--domainkit-accent), black 18%);
137
- background-color: var(--domainkit-accent);
138
- background-image: linear-gradient(
139
- to bottom,
140
- var(--domainkit-button-face),
141
- var(--domainkit-accent)
142
- );
143
- border-color: var(--domainkit-button-edge);
144
- box-shadow:
145
- 0 1px 2px color-mix(in srgb, var(--domainkit-text) 18%, transparent),
146
- inset 0 1px 0 var(--domainkit-button-glint);
147
- color: var(--domainkit-accent-contrast);
148
- }
91
+ :where(
92
+ [data-domainkit-recipe="connect"],
93
+ [data-domainkit-part="integration-connect"],
94
+ [data-domainkit-part="oauth-connect"],
95
+ [data-domainkit-part="attach-target"],
96
+ [data-domainkit-part="connection-retry"],
97
+ [data-domainkit-part="plan-trigger"],
98
+ [data-domainkit-part="plan-apply"],
99
+ [data-domainkit-part="provisioning-retry"],
100
+ [data-domainkit-part="observe-action"],
101
+ [data-domainkit-part="cleanup-trigger"],
102
+ [data-domainkit-part="cleanup-apply"],
103
+ [data-domainkit-part="cleanup-retry"],
104
+ [data-domainkit-part="disconnect-action"],
105
+ [data-domainkit-part="disconnect-trigger"],
106
+ [data-domainkit-part="actions-trigger"],
107
+ [data-domainkit-part="token-connect"] button,
108
+ [data-domainkit-part="connection-trigger"],
109
+ [data-domainkit-part="token-submit"],
110
+ [data-domainkit-part="plan-decline"],
111
+ [data-domainkit-part="verification-retry"],
112
+ [data-domainkit-part="copy-action"],
113
+ [data-domainkit-part="zone-copy"],
114
+ [data-domainkit-part="zone-download"],
115
+ [data-domainkit-part="dialog-cancel"],
116
+ [data-domainkit-part="dialog-close"]
117
+ ) {
118
+ align-items: center;
119
+ border: 1px solid transparent;
120
+ border-radius: var(--domainkit-control-radius);
121
+ cursor: pointer;
122
+ display: inline-flex;
123
+ font: inherit;
124
+ font-size: 0.875rem;
125
+ font-weight: 500;
126
+ justify-content: center;
127
+ line-height: 1.2;
128
+ min-height: 2.25rem;
129
+ padding: 0.45rem 0.85rem;
130
+ transition:
131
+ background-color 120ms ease,
132
+ background-image 120ms ease,
133
+ border-color 120ms ease,
134
+ box-shadow 120ms ease;
135
+ }
149
136
 
150
- :where(
151
- [data-domainkit-recipe="connect"]:hover:not(:disabled),
152
- [data-domainkit-part="integration-connect"]:hover:not(:disabled),
153
- [data-domainkit-part="oauth-connect"]:hover:not(:disabled),
154
- [data-domainkit-part="plan-trigger"]:hover:not(:disabled),
155
- [data-domainkit-part="plan-apply"]:hover:not(:disabled)
156
- ) {
157
- --domainkit-button-face: color-mix(in oklch, var(--domainkit-accent), white 28%);
158
- }
137
+ :where(
138
+ [data-domainkit-recipe="connect"],
139
+ [data-domainkit-part="integration-connect"],
140
+ [data-domainkit-part="oauth-connect"],
141
+ [data-domainkit-part="plan-trigger"],
142
+ [data-domainkit-part="plan-apply"],
143
+ [data-domainkit-part="connection-trigger"],
144
+ [data-domainkit-part="token-submit"]
145
+ ) {
146
+ --domainkit-button-face: color-mix(in oklch, var(--domainkit-accent), white 22%);
147
+ --domainkit-button-glint: color-mix(in oklch, var(--domainkit-accent), white 42%);
148
+ --domainkit-button-edge: color-mix(in oklch, var(--domainkit-accent), black 18%);
149
+ background-color: var(--domainkit-accent);
150
+ background-image: linear-gradient(
151
+ to bottom,
152
+ var(--domainkit-button-face),
153
+ var(--domainkit-accent)
154
+ );
155
+ border-color: var(--domainkit-button-edge);
156
+ box-shadow:
157
+ 0 1px 2px color-mix(in srgb, var(--domainkit-text) 18%, transparent),
158
+ inset 0 1px 0 var(--domainkit-button-glint);
159
+ color: var(--domainkit-accent-contrast);
160
+ }
159
161
 
160
- :where(
161
- [data-domainkit-recipe="connect"]:active:not(:disabled),
162
- [data-domainkit-part="integration-connect"]:active:not(:disabled),
163
- [data-domainkit-part="oauth-connect"]:active:not(:disabled),
164
- [data-domainkit-part="plan-trigger"]:active:not(:disabled),
165
- [data-domainkit-part="plan-apply"]:active:not(:disabled)
166
- ) {
167
- background-image: linear-gradient(
168
- to bottom,
169
- var(--domainkit-accent),
170
- color-mix(in oklch, var(--domainkit-accent), black 10%)
171
- );
172
- box-shadow: inset 0 1px 2px color-mix(in srgb, var(--domainkit-text) 28%, transparent);
173
- }
162
+ :where(
163
+ [data-domainkit-recipe="connect"]:hover:not(:disabled),
164
+ [data-domainkit-part="integration-connect"]:hover:not(:disabled),
165
+ [data-domainkit-part="oauth-connect"]:hover:not(:disabled),
166
+ [data-domainkit-part="plan-trigger"]:hover:not(:disabled),
167
+ [data-domainkit-part="plan-apply"]:hover:not(:disabled),
168
+ [data-domainkit-part="connection-trigger"]:hover:not(:disabled),
169
+ [data-domainkit-part="token-submit"]:hover:not(:disabled)
170
+ ) {
171
+ --domainkit-button-face: color-mix(in oklch, var(--domainkit-accent), white 28%);
172
+ }
174
173
 
175
- :where(
176
- [data-domainkit-part="attach-target"],
177
- [data-domainkit-part="connection-retry"],
178
- [data-domainkit-part="provisioning-retry"],
179
- [data-domainkit-part="cleanup-retry"],
180
- [data-domainkit-part="observe-action"],
181
- [data-domainkit-part="zone-copy"],
182
- [data-domainkit-part="zone-download"],
183
- [data-domainkit-part="token-connect"] button
184
- ) {
185
- background-color: var(--domainkit-background);
186
- border-color: var(--domainkit-border);
187
- box-shadow:
188
- var(--domainkit-button-raised-shadow),
189
- inset 0 1px 0 var(--domainkit-button-raised-glint),
190
- inset 0 -1px 0 var(--domainkit-button-raised-shade);
191
- color: var(--domainkit-text);
192
- }
174
+ :where(
175
+ [data-domainkit-recipe="connect"]:active:not(:disabled),
176
+ [data-domainkit-part="integration-connect"]:active:not(:disabled),
177
+ [data-domainkit-part="oauth-connect"]:active:not(:disabled),
178
+ [data-domainkit-part="plan-trigger"]:active:not(:disabled),
179
+ [data-domainkit-part="plan-apply"]:active:not(:disabled),
180
+ [data-domainkit-part="connection-trigger"]:active:not(:disabled),
181
+ [data-domainkit-part="token-submit"]:active:not(:disabled)
182
+ ) {
183
+ background-image: linear-gradient(
184
+ to bottom,
185
+ var(--domainkit-accent),
186
+ color-mix(in oklch, var(--domainkit-accent), black 10%)
187
+ );
188
+ box-shadow: inset 0 1px 2px color-mix(in srgb, var(--domainkit-text) 28%, transparent);
189
+ }
193
190
 
194
- :where(
195
- [data-domainkit-part="attach-target"]:hover:not(:disabled),
196
- [data-domainkit-part="connection-retry"]:hover:not(:disabled),
197
- [data-domainkit-part="provisioning-retry"]:hover:not(:disabled),
198
- [data-domainkit-part="observe-action"]:hover:not(:disabled),
199
- [data-domainkit-part="zone-copy"]:hover:not(:disabled),
200
- [data-domainkit-part="zone-download"]:hover:not(:disabled),
201
- [data-domainkit-part="token-connect"] button:hover:not(:disabled)
202
- ) {
203
- background-color: var(--domainkit-fill);
204
- }
191
+ :where(
192
+ [data-domainkit-part="attach-target"],
193
+ [data-domainkit-part="connection-retry"],
194
+ [data-domainkit-part="provisioning-retry"],
195
+ [data-domainkit-part="cleanup-retry"],
196
+ [data-domainkit-part="observe-action"],
197
+ [data-domainkit-part="zone-copy"],
198
+ [data-domainkit-part="zone-download"],
199
+ [data-domainkit-part="plan-decline"]
200
+ ) {
201
+ background-color: var(--domainkit-background);
202
+ border-color: var(--domainkit-border);
203
+ box-shadow:
204
+ var(--domainkit-button-raised-shadow),
205
+ inset 0 1px 0 var(--domainkit-button-raised-glint),
206
+ inset 0 -1px 0 var(--domainkit-button-raised-shade);
207
+ color: var(--domainkit-text);
208
+ }
205
209
 
206
- :where([data-domainkit-part="cleanup-trigger"], [data-domainkit-part="disconnect-action"]) {
207
- background: transparent;
208
- border-color: transparent;
209
- box-shadow: none;
210
- color: var(--domainkit-danger);
211
- font-weight: 500;
212
- }
210
+ :where(
211
+ [data-domainkit-part="attach-target"]:hover:not(:disabled),
212
+ [data-domainkit-part="connection-retry"]:hover:not(:disabled),
213
+ [data-domainkit-part="provisioning-retry"]:hover:not(:disabled),
214
+ [data-domainkit-part="observe-action"]:hover:not(:disabled),
215
+ [data-domainkit-part="zone-copy"]:hover:not(:disabled),
216
+ [data-domainkit-part="zone-download"]:hover:not(:disabled),
217
+ [data-domainkit-part="plan-decline"]:hover:not(:disabled)
218
+ ) {
219
+ background-color: var(--domainkit-fill);
220
+ }
213
221
 
214
- :where(
215
- [data-domainkit-part="cleanup-trigger"]:hover:not(:disabled),
216
- [data-domainkit-part="disconnect-action"]:hover:not(:disabled)
217
- ) {
218
- background: color-mix(in srgb, var(--domainkit-danger) 8%, transparent);
219
- }
222
+ :where([data-domainkit-part="cleanup-trigger"], [data-domainkit-part="disconnect-action"]) {
223
+ background: transparent;
224
+ border-color: transparent;
225
+ box-shadow: none;
226
+ color: var(--domainkit-danger);
227
+ font-weight: 500;
228
+ }
220
229
 
221
- :where([data-domainkit-part="cleanup-apply"]) {
222
- --domainkit-button-face: color-mix(in oklch, var(--domainkit-danger), white 22%);
223
- --domainkit-button-glint: color-mix(in oklch, var(--domainkit-danger), white 42%);
224
- --domainkit-button-edge: color-mix(in oklch, var(--domainkit-danger), black 18%);
225
- background-color: var(--domainkit-danger);
226
- background-image: linear-gradient(
227
- to bottom,
228
- var(--domainkit-button-face),
229
- var(--domainkit-danger)
230
- );
231
- border-color: var(--domainkit-button-edge);
232
- box-shadow:
233
- 0 1px 2px color-mix(in srgb, var(--domainkit-text) 18%, transparent),
234
- inset 0 1px 0 var(--domainkit-button-glint);
235
- color: var(--domainkit-danger-contrast);
236
- }
230
+ :where(
231
+ [data-domainkit-part="cleanup-trigger"]:hover:not(:disabled),
232
+ [data-domainkit-part="disconnect-action"]:hover:not(:disabled)
233
+ ) {
234
+ background: color-mix(in srgb, var(--domainkit-danger) 8%, transparent);
235
+ }
237
236
 
238
- :where([data-domainkit-part="cleanup-apply"]:hover:not(:disabled)) {
239
- --domainkit-button-face: color-mix(in oklch, var(--domainkit-danger), white 28%);
240
- }
237
+ :where([data-domainkit-part="cleanup-apply"]) {
238
+ --domainkit-button-face: color-mix(in oklch, var(--domainkit-danger), white 22%);
239
+ --domainkit-button-glint: color-mix(in oklch, var(--domainkit-danger), white 42%);
240
+ --domainkit-button-edge: color-mix(in oklch, var(--domainkit-danger), black 18%);
241
+ background-color: var(--domainkit-danger);
242
+ background-image: linear-gradient(
243
+ to bottom,
244
+ var(--domainkit-button-face),
245
+ var(--domainkit-danger)
246
+ );
247
+ border-color: var(--domainkit-button-edge);
248
+ box-shadow:
249
+ 0 1px 2px color-mix(in srgb, var(--domainkit-text) 18%, transparent),
250
+ inset 0 1px 0 var(--domainkit-button-glint);
251
+ color: var(--domainkit-danger-contrast);
252
+ }
241
253
 
242
- :where([data-domainkit-part="cleanup-apply"]:active:not(:disabled)) {
243
- background-image: linear-gradient(
244
- to bottom,
245
- var(--domainkit-danger),
246
- color-mix(in oklch, var(--domainkit-danger), black 10%)
247
- );
248
- box-shadow: inset 0 1px 2px color-mix(in srgb, var(--domainkit-text) 28%, transparent);
249
- }
254
+ :where([data-domainkit-part="cleanup-apply"]:hover:not(:disabled)) {
255
+ --domainkit-button-face: color-mix(in oklch, var(--domainkit-danger), white 28%);
256
+ }
250
257
 
251
- :where([data-domainkit-part="dialog-cancel"], [data-domainkit-part="dialog-close"]) {
252
- background: transparent;
253
- border-color: transparent;
254
- color: var(--domainkit-muted);
255
- }
258
+ :where([data-domainkit-part="cleanup-apply"]:active:not(:disabled)) {
259
+ background-image: linear-gradient(
260
+ to bottom,
261
+ var(--domainkit-danger),
262
+ color-mix(in oklch, var(--domainkit-danger), black 10%)
263
+ );
264
+ box-shadow: inset 0 1px 2px color-mix(in srgb, var(--domainkit-text) 28%, transparent);
265
+ }
256
266
 
257
- :where([data-domainkit-part="dialog-cancel"]:hover, [data-domainkit-part="dialog-close"]:hover) {
258
- background: var(--domainkit-fill);
259
- color: var(--domainkit-text);
260
- }
267
+ :where([data-domainkit-part="dialog-cancel"], [data-domainkit-part="dialog-close"]) {
268
+ background: transparent;
269
+ border-color: transparent;
270
+ color: var(--domainkit-muted);
271
+ }
261
272
 
262
- :where([data-domainkit-part="copy-action"]) {
263
- background: var(--domainkit-fill);
264
- border-color: var(--domainkit-border);
265
- color: var(--domainkit-muted);
266
- display: inline-grid;
267
- flex: none;
268
- height: 1.5rem;
269
- min-height: 1.5rem;
270
- min-width: 1.5rem;
271
- overflow: hidden;
272
- padding: 0;
273
- place-items: center;
274
- width: 1.5rem;
275
- }
273
+ :where([data-domainkit-part="dialog-cancel"]:hover, [data-domainkit-part="dialog-close"]:hover) {
274
+ background: var(--domainkit-fill);
275
+ color: var(--domainkit-text);
276
+ }
276
277
 
277
- :where([data-domainkit-part="copy-action"]:hover) {
278
- background: var(--domainkit-background);
279
- color: var(--domainkit-text);
280
- }
278
+ :where([data-domainkit-part="copy-action"]) {
279
+ background: var(--domainkit-fill);
280
+ border-color: var(--domainkit-border);
281
+ color: var(--domainkit-muted);
282
+ display: inline-grid;
283
+ flex: none;
284
+ height: 1.5rem;
285
+ min-height: 1.5rem;
286
+ min-width: 1.5rem;
287
+ overflow: hidden;
288
+ padding: 0;
289
+ place-items: center;
290
+ width: 1.5rem;
291
+ }
281
292
 
282
- :where([data-domainkit-part="copy-value"][data-copied] [data-domainkit-part="copy-action"]) {
283
- border-color: color-mix(in srgb, var(--domainkit-success) 45%, var(--domainkit-border));
284
- color: var(--domainkit-success);
285
- }
293
+ :where([data-domainkit-part="copy-action"]:hover) {
294
+ background: var(--domainkit-background);
295
+ color: var(--domainkit-text);
296
+ }
286
297
 
287
- :where([data-icon] svg) {
288
- display: block;
289
- flex: none;
290
- height: 0.875rem;
291
- width: 0.875rem;
292
- }
298
+ :where([data-domainkit-part="copy-value"][data-copied] [data-domainkit-part="copy-action"]) {
299
+ border-color: color-mix(in srgb, var(--domainkit-success) 45%, var(--domainkit-border));
300
+ color: var(--domainkit-success);
301
+ }
293
302
 
294
- :where([data-domainkit-part="copy-glyph"]) {
295
- display: flex;
296
- grid-area: 1 / 1;
297
- transition:
298
- opacity 180ms ease,
299
- transform 180ms ease;
300
- }
303
+ :where([data-icon] svg) {
304
+ display: block;
305
+ flex: none;
306
+ height: 0.875rem;
307
+ width: 0.875rem;
308
+ }
301
309
 
302
- :where([data-domainkit-part="copy-glyph"][data-state="idle"]) {
303
- opacity: 1;
304
- transform: scale(1) rotate(0deg);
305
- }
310
+ :where([data-domainkit-part="copy-glyph"]) {
311
+ display: flex;
312
+ grid-area: 1 / 1;
313
+ transition:
314
+ opacity 180ms ease,
315
+ transform 180ms ease;
316
+ }
306
317
 
307
- :where(
308
- [data-domainkit-part="copy-value"][data-copied]
309
- [data-domainkit-part="copy-glyph"][data-state="idle"]
310
- ) {
311
- opacity: 0;
312
- transform: scale(0.5) rotate(-18deg);
313
- }
318
+ :where([data-domainkit-part="copy-glyph"][data-state="idle"]) {
319
+ opacity: 1;
320
+ transform: scale(1) rotate(0deg);
321
+ }
314
322
 
315
- :where([data-domainkit-part="copy-glyph"][data-state="done"]) {
316
- opacity: 0;
317
- transform: scale(0.5) rotate(18deg);
318
- }
323
+ :where(
324
+ [data-domainkit-part="copy-value"][data-copied]
325
+ [data-domainkit-part="copy-glyph"][data-state="idle"]
326
+ ) {
327
+ opacity: 0;
328
+ transform: scale(0.5) rotate(-18deg);
329
+ }
319
330
 
320
- :where(
321
- [data-domainkit-part="copy-value"][data-copied]
322
- [data-domainkit-part="copy-glyph"][data-state="done"]
323
- ) {
324
- opacity: 1;
325
- transform: scale(1) rotate(0deg);
326
- }
331
+ :where([data-domainkit-part="copy-glyph"][data-state="done"]) {
332
+ opacity: 0;
333
+ transform: scale(0.5) rotate(18deg);
334
+ }
327
335
 
328
- :where([data-domainkit-part="dialog-close"]) {
329
- flex: none;
330
- min-height: 2rem;
331
- padding: 0;
332
- width: 2rem;
333
- }
336
+ :where(
337
+ [data-domainkit-part="copy-value"][data-copied]
338
+ [data-domainkit-part="copy-glyph"][data-state="done"]
339
+ ) {
340
+ opacity: 1;
341
+ transform: scale(1) rotate(0deg);
342
+ }
334
343
 
335
- :where([data-domainkit-part]:disabled) {
336
- cursor: not-allowed;
337
- opacity: 0.5;
338
- }
344
+ :where([data-domainkit-part="dialog-close"]) {
345
+ flex: none;
346
+ min-height: 2rem;
347
+ padding: 0;
348
+ width: 2rem;
349
+ }
339
350
 
340
- :where([data-domainkit-part="dialog-backdrop"]) {
341
- background: var(--domainkit-backdrop);
342
- inset: 0;
343
- position: fixed;
344
- transition: opacity 150ms ease;
345
- z-index: 1000;
346
- }
351
+ :where([data-domainkit-part]:disabled) {
352
+ cursor: not-allowed;
353
+ opacity: 0.5;
354
+ }
347
355
 
348
- :where(
349
- [data-domainkit-part="connection-dialog"],
350
- [data-domainkit-part="plan-dialog"],
351
- [data-domainkit-part="cleanup-dialog"],
352
- [data-domainkit-part="disconnect-dialog"]
353
- ) {
354
- background: var(--domainkit-background);
355
- border: 1px solid var(--domainkit-border);
356
- border-color: color-mix(in oklab, var(--domainkit-border) 60%, var(--domainkit-background));
357
- border-radius: var(--domainkit-radius);
358
- box-shadow: var(--domainkit-shadow);
359
- color: var(--domainkit-text);
360
- display: grid;
361
- grid-template-rows: auto 1fr auto;
362
- left: 50%;
363
- max-height: calc(100vh - 2rem);
364
- max-width: calc(100vw - 2rem);
365
- overflow: hidden;
366
- outline: none;
367
- position: fixed;
368
- top: 50%;
369
- transform: translate(-50%, -50%);
370
- transition:
371
- opacity 150ms ease,
372
- transform 150ms ease;
373
- width: 24rem;
374
- z-index: 1001;
375
- }
356
+ :where([data-domainkit-part="dialog-backdrop"]) {
357
+ background: var(--domainkit-backdrop);
358
+ inset: 0;
359
+ position: fixed;
360
+ transition: opacity 150ms ease;
361
+ z-index: 1000;
362
+ }
376
363
 
377
- :where([data-domainkit-part="plan-dialog"], [data-domainkit-part="cleanup-dialog"]) {
378
- width: 36rem;
379
- }
364
+ :where(
365
+ [data-domainkit-part="connection-dialog"],
366
+ [data-domainkit-part="plan-dialog"],
367
+ [data-domainkit-part="cleanup-dialog"],
368
+ [data-domainkit-part="disconnect-dialog"]
369
+ ) {
370
+ background: var(--domainkit-background);
371
+ border: 1px solid var(--domainkit-border);
372
+ border-color: color-mix(in oklab, var(--domainkit-border) 60%, var(--domainkit-background));
373
+ border-radius: var(--domainkit-radius);
374
+ box-shadow: var(--domainkit-shadow);
375
+ color: var(--domainkit-text);
376
+ display: grid;
377
+ grid-template-rows: auto 1fr auto;
378
+ left: 50%;
379
+ max-height: calc(100vh - 2rem);
380
+ max-width: calc(100vw - 2rem);
381
+ overflow: hidden;
382
+ outline: none;
383
+ position: fixed;
384
+ top: 50%;
385
+ transform: translate(-50%, -50%);
386
+ transition:
387
+ opacity 150ms ease,
388
+ transform 150ms ease;
389
+ width: 24rem;
390
+ z-index: 1001;
391
+ }
380
392
 
381
- :where(
382
- [data-domainkit-part="connection-dialog"][data-starting-style],
383
- [data-domainkit-part="connection-dialog"][data-ending-style],
384
- [data-domainkit-part="plan-dialog"][data-starting-style],
385
- [data-domainkit-part="plan-dialog"][data-ending-style],
386
- [data-domainkit-part="cleanup-dialog"][data-starting-style],
387
- [data-domainkit-part="cleanup-dialog"][data-ending-style],
388
- [data-domainkit-part="disconnect-dialog"][data-starting-style],
389
- [data-domainkit-part="disconnect-dialog"][data-ending-style]
390
- ) {
391
- opacity: 0;
392
- transform: translate(-50%, -48%) scale(0.98);
393
- }
393
+ :where([data-domainkit-part="plan-dialog"], [data-domainkit-part="cleanup-dialog"]) {
394
+ width: 36rem;
395
+ }
394
396
 
395
- :where([data-domainkit-part="dialog-header"]) {
396
- align-items: flex-start;
397
- border-bottom: 1px solid var(--domainkit-border);
398
- display: flex;
399
- gap: 0.75rem;
400
- padding: 1rem 1rem 0.85rem;
401
- }
397
+ :where(
398
+ [data-domainkit-part="connection-dialog"][data-starting-style],
399
+ [data-domainkit-part="connection-dialog"][data-ending-style],
400
+ [data-domainkit-part="plan-dialog"][data-starting-style],
401
+ [data-domainkit-part="plan-dialog"][data-ending-style],
402
+ [data-domainkit-part="cleanup-dialog"][data-starting-style],
403
+ [data-domainkit-part="cleanup-dialog"][data-ending-style],
404
+ [data-domainkit-part="disconnect-dialog"][data-starting-style],
405
+ [data-domainkit-part="disconnect-dialog"][data-ending-style]
406
+ ) {
407
+ opacity: 0;
408
+ transform: translate(-50%, -48%) scale(0.98);
409
+ }
402
410
 
403
- :where([data-domainkit-part="dialog-heading"]) {
404
- display: grid;
405
- flex: 1;
406
- gap: 0.25rem;
407
- min-width: 0;
408
- }
411
+ :where([data-domainkit-part="dialog-header"]) {
412
+ align-items: flex-start;
413
+ border-bottom: 1px solid var(--domainkit-border);
414
+ display: flex;
415
+ gap: 0.75rem;
416
+ padding: 1rem 1rem 0.85rem;
417
+ }
409
418
 
410
- :where([data-domainkit-part="dialog-title"]) {
411
- font-size: 1rem;
412
- font-weight: 600;
413
- line-height: 1.3;
414
- margin: 0;
415
- }
419
+ :where([data-domainkit-part="dialog-heading"]) {
420
+ display: grid;
421
+ flex: 1;
422
+ gap: 0.25rem;
423
+ min-width: 0;
424
+ }
416
425
 
417
- :where([data-domainkit-part="dialog-description"]) {
418
- color: var(--domainkit-muted);
419
- font-size: 0.875rem;
420
- line-height: 1.45;
421
- margin: 0;
422
- }
426
+ :where([data-domainkit-part="dialog-title"]) {
427
+ font-size: 1rem;
428
+ font-weight: 600;
429
+ line-height: 1.3;
430
+ margin: 0;
431
+ }
423
432
 
424
- :where([data-domainkit-part="dialog-body"]) {
425
- display: grid;
426
- gap: 0.65rem;
427
- overflow: auto;
428
- padding: 1rem;
429
- }
433
+ :where([data-domainkit-part="dialog-description"]) {
434
+ color: var(--domainkit-muted);
435
+ font-size: 0.875rem;
436
+ line-height: 1.45;
437
+ margin: 0;
438
+ }
430
439
 
431
- :where([data-domainkit-part="provider-authentication"]) {
432
- display: grid;
433
- gap: 0.55rem;
434
- }
440
+ :where([data-domainkit-part="dialog-body"]) {
441
+ display: grid;
442
+ gap: 0.65rem;
443
+ overflow: auto;
444
+ padding: 1rem;
445
+ }
435
446
 
436
- :where([data-domainkit-part="authentication-separator"]) {
437
- align-items: center;
438
- color: var(--domainkit-muted);
439
- display: grid;
440
- font-size: 0.75rem;
441
- gap: 0.75rem;
442
- grid-template-columns: 1fr auto 1fr;
443
- line-height: 1;
444
- padding: 0.15rem 0;
445
- text-transform: lowercase;
446
- }
447
+ :where([data-domainkit-part="provider-authentication"]) {
448
+ display: grid;
449
+ gap: 0.55rem;
450
+ }
447
451
 
448
- :where([data-domainkit-part="authentication-separator"])::before,
449
- :where([data-domainkit-part="authentication-separator"])::after {
450
- border-top: 1px solid var(--domainkit-border);
451
- content: "";
452
- }
452
+ :where([data-domainkit-part="authentication-separator"]) {
453
+ align-items: center;
454
+ color: var(--domainkit-muted);
455
+ display: grid;
456
+ font-size: 0.75rem;
457
+ gap: 0.75rem;
458
+ grid-template-columns: 1fr auto 1fr;
459
+ line-height: 1;
460
+ padding: 0.15rem 0;
461
+ text-transform: lowercase;
462
+ }
453
463
 
454
- :where([data-domainkit-part="dialog-progress"]) {
455
- color: var(--domainkit-muted);
456
- margin: 0;
457
- min-height: 1.4em;
458
- }
464
+ :where([data-domainkit-part="authentication-separator"])::before,
465
+ :where([data-domainkit-part="authentication-separator"])::after {
466
+ border-top: 1px solid var(--domainkit-border);
467
+ content: "";
468
+ }
459
469
 
460
- :where(
461
- [data-domainkit-part="dialog-body"] [data-domainkit-part="oauth-connect"],
462
- [data-domainkit-part="dialog-body"] [data-domainkit-part="integration-connect"],
463
- [data-domainkit-part="dialog-body"] [data-domainkit-part="attach-target"]
464
- ) {
465
- width: 100%;
466
- }
470
+ :where([data-domainkit-part="dialog-progress"]) {
471
+ color: var(--domainkit-muted);
472
+ margin: 0;
473
+ min-height: 1.4em;
474
+ }
467
475
 
468
- :where([data-domainkit-part="reusable-connection"]) {
469
- background: var(--domainkit-fill);
470
- border: 1px solid var(--domainkit-border);
471
- border-radius: var(--domainkit-control-radius);
472
- display: grid;
473
- gap: 0.55rem;
474
- padding: 0.7rem;
475
- }
476
+ :where(
477
+ [data-domainkit-part="dialog-body"] [data-domainkit-part="oauth-connect"],
478
+ [data-domainkit-part="dialog-body"] [data-domainkit-part="integration-connect"],
479
+ [data-domainkit-part="dialog-body"] [data-domainkit-part="attach-target"]
480
+ ) {
481
+ width: 100%;
482
+ }
476
483
 
477
- :where([data-domainkit-part="reusable-connection-heading"]) {
478
- align-items: baseline;
479
- display: flex;
480
- gap: 0.5rem;
481
- justify-content: space-between;
482
- }
484
+ :where([data-domainkit-part="reusable-connection"]) {
485
+ background: var(--domainkit-fill);
486
+ border: 1px solid var(--domainkit-border);
487
+ border-radius: var(--domainkit-control-radius);
488
+ display: grid;
489
+ gap: 0.55rem;
490
+ padding: 0.7rem;
491
+ }
483
492
 
484
- :where([data-domainkit-part="reusable-connection-heading"] strong) {
485
- font-size: 0.8125rem;
486
- font-weight: 600;
487
- }
493
+ :where([data-domainkit-part="reusable-connection-heading"]) {
494
+ align-items: baseline;
495
+ display: flex;
496
+ gap: 0.5rem;
497
+ justify-content: space-between;
498
+ }
488
499
 
489
- :where([data-domainkit-part="reusable-connection-heading"] span) {
490
- color: var(--domainkit-muted);
491
- font-size: 0.6875rem;
492
- }
500
+ :where([data-domainkit-part="reusable-connection-heading"] strong) {
501
+ font-size: 0.8125rem;
502
+ font-weight: 600;
503
+ }
493
504
 
494
- :where([data-domainkit-part="target-list"]) {
495
- display: grid;
496
- gap: 0.45rem;
497
- }
505
+ :where([data-domainkit-part="reusable-connection-heading"] span) {
506
+ color: var(--domainkit-muted);
507
+ font-size: 0.6875rem;
508
+ }
498
509
 
499
- :where([data-domainkit-part="target-unavailable"]) {
500
- color: var(--domainkit-muted);
501
- font-size: 0.8125rem;
502
- margin: 0;
503
- }
510
+ :where([data-domainkit-part="target-list"]) {
511
+ display: grid;
512
+ gap: 0.45rem;
513
+ }
504
514
 
505
- :where([data-domainkit-part="dialog-footer"]) {
506
- border-top: 1px solid var(--domainkit-border);
507
- display: flex;
508
- gap: 0.5rem;
509
- justify-content: flex-end;
510
- padding: 0.75rem 1rem;
511
- }
515
+ :where([data-domainkit-part="target-unavailable"]) {
516
+ color: var(--domainkit-muted);
517
+ font-size: 0.8125rem;
518
+ margin: 0;
519
+ }
512
520
 
513
- :where([data-domainkit-part="provider-mark"]) {
514
- align-items: center;
515
- background: var(--domainkit-fill);
516
- border: 1px solid var(--domainkit-border);
517
- border-radius: var(--domainkit-control-radius);
518
- box-sizing: border-box;
519
- display: inline-flex;
520
- flex: none;
521
- font-size: 0.75rem;
522
- font-weight: 600;
523
- height: 2rem;
524
- justify-content: center;
525
- overflow: hidden;
526
- width: 2rem;
527
- }
521
+ :where([data-domainkit-part="dialog-footer"]) {
522
+ border-top: 1px solid var(--domainkit-border);
523
+ display: flex;
524
+ gap: 0.5rem;
525
+ justify-content: flex-end;
526
+ padding: 0.75rem 1rem;
527
+ }
528
528
 
529
- :where([data-domainkit-part="provider-mark"] img),
530
- :where([data-domainkit-part="provider-mark"] svg) {
531
- display: block;
532
- height: 100%;
533
- object-fit: cover;
534
- width: 100%;
535
- }
529
+ :where([data-domainkit-part="provider-mark"]) {
530
+ align-items: center;
531
+ background: var(--domainkit-fill);
532
+ border: 1px solid var(--domainkit-border);
533
+ border-radius: var(--domainkit-control-radius);
534
+ box-sizing: border-box;
535
+ display: inline-flex;
536
+ flex: none;
537
+ font-size: 0.75rem;
538
+ font-weight: 600;
539
+ height: 2rem;
540
+ justify-content: center;
541
+ overflow: hidden;
542
+ width: 2rem;
543
+ }
536
544
 
537
- :where([data-domainkit-recipe="connect"]) {
538
- gap: 0.45rem;
539
- }
545
+ :where([data-domainkit-part="provider-mark"] img),
546
+ :where([data-domainkit-part="provider-mark"] svg) {
547
+ display: block;
548
+ height: 100%;
549
+ object-fit: cover;
550
+ width: 100%;
551
+ }
540
552
 
541
- :where([data-domainkit-recipe="connect"] [data-domainkit-part="provider-mark"]) {
542
- background: var(--domainkit-accent-contrast);
543
- border-color: color-mix(in oklch, var(--domainkit-accent) 18%, transparent);
544
- font-size: 0.625rem;
545
- height: 1.25rem;
546
- width: 1.25rem;
547
- }
553
+ :where([data-domainkit-recipe="connect"]) {
554
+ gap: 0.45rem;
555
+ }
548
556
 
549
- :where([data-domainkit-part="provider-mark"][data-domainkit-provider="vercel"]) {
550
- border-color: transparent;
551
- }
557
+ :where([data-domainkit-recipe="connect"] [data-domainkit-part="provider-mark"]) {
558
+ background: var(--domainkit-accent-contrast);
559
+ border-color: color-mix(in oklch, var(--domainkit-accent) 18%, transparent);
560
+ font-size: 0.625rem;
561
+ height: 1.25rem;
562
+ width: 1.25rem;
563
+ }
552
564
 
553
- :where([data-domainkit-part="token-connect"]) {
554
- background: var(--domainkit-fill);
555
- border: 1px solid var(--domainkit-border);
556
- border-radius: var(--domainkit-control-radius);
557
- display: grid;
558
- gap: 0.65rem;
559
- padding: 0.75rem;
560
- }
565
+ :where([data-domainkit-part="provider-mark"][data-domainkit-provider="vercel"]) {
566
+ border-color: transparent;
567
+ }
561
568
 
562
- :where([data-domainkit-part="token-connect"] label) {
563
- color: var(--domainkit-muted);
564
- display: grid;
565
- font-size: 0.8125rem;
566
- gap: 0.35rem;
567
- }
569
+ :where([data-domainkit-part="token-connect"]) {
570
+ background: var(--domainkit-fill);
571
+ border: 1px solid var(--domainkit-border);
572
+ border-radius: var(--domainkit-control-radius);
573
+ display: grid;
574
+ gap: 0.65rem;
575
+ padding: 0.75rem;
576
+ }
568
577
 
569
- :where([data-domainkit-part="token-connect"] small) {
570
- color: var(--domainkit-muted);
571
- font-size: 0.75rem;
572
- }
578
+ :where([data-domainkit-part="token-connect"] label) {
579
+ color: var(--domainkit-muted);
580
+ display: grid;
581
+ font-size: 0.8125rem;
582
+ gap: 0.35rem;
583
+ }
573
584
 
574
- :where([data-domainkit-part="token-connect"] input) {
575
- background: var(--domainkit-background);
576
- border: 1px solid var(--domainkit-border);
577
- border-radius: var(--domainkit-control-radius);
578
- color: var(--domainkit-text);
579
- font: inherit;
580
- min-height: 2.25rem;
581
- padding: 0 0.65rem;
582
- }
585
+ :where([data-domainkit-part="token-connect"] small) {
586
+ color: var(--domainkit-muted);
587
+ font-size: 0.75rem;
588
+ }
583
589
 
584
- :where([data-domainkit-part="token-connect"] button) {
585
- justify-self: start;
586
- }
590
+ :where([data-domainkit-part="token-connect"] input) {
591
+ background: var(--domainkit-background);
592
+ border: 1px solid var(--domainkit-border);
593
+ border-radius: var(--domainkit-control-radius);
594
+ color: var(--domainkit-text);
595
+ font: inherit;
596
+ min-height: 2.25rem;
597
+ padding: 0 0.65rem;
598
+ }
587
599
 
588
- :where([data-domainkit-part="connected-shell"]) {
589
- display: grid;
590
- gap: 1rem;
591
- width: 100%;
592
- }
600
+ :where([data-domainkit-part="token-connect"] button) {
601
+ justify-self: start;
602
+ }
593
603
 
594
- :where([data-domainkit-part="connected-card"]) {
595
- align-items: center;
596
- background: var(--domainkit-background);
597
- border: 1px solid var(--domainkit-border);
598
- border-radius: var(--domainkit-radius);
599
- display: grid;
600
- gap: 0.75rem 1rem;
601
- grid-template-columns: minmax(0, 1fr) auto;
602
- justify-content: space-between;
603
- min-height: 4.25rem;
604
- padding: 1rem;
605
- width: 100%;
606
- }
604
+ :where([data-domainkit-part="connected-shell"]) {
605
+ display: grid;
606
+ gap: 1rem;
607
+ width: 100%;
608
+ }
607
609
 
608
- :where([data-domainkit-part="connected-identity"]) {
609
- align-items: center;
610
- display: flex;
611
- gap: 0.75rem;
612
- min-width: 0;
613
- }
610
+ :where([data-domainkit-part="connected-card"]) {
611
+ align-items: center;
612
+ background: var(--domainkit-background);
613
+ border: 1px solid var(--domainkit-border);
614
+ border-radius: var(--domainkit-radius);
615
+ display: grid;
616
+ gap: 0.75rem 1rem;
617
+ grid-template-columns: minmax(0, 1fr) auto;
618
+ justify-content: space-between;
619
+ min-height: 4.25rem;
620
+ padding: 1rem;
621
+ width: 100%;
622
+ }
614
623
 
615
- :where([data-domainkit-part="connected-actions"]) {
616
- align-items: center;
617
- display: flex;
618
- flex-wrap: nowrap;
619
- gap: 0.5rem;
620
- margin-left: auto;
621
- }
624
+ :where([data-domainkit-part="connected-identity"]) {
625
+ align-items: center;
626
+ display: flex;
627
+ gap: 0.75rem;
628
+ min-width: 0;
629
+ }
622
630
 
623
- :where([data-domainkit-part="actions-trigger"]) {
624
- background: transparent;
625
- border-color: transparent;
626
- color: var(--domainkit-muted);
627
- flex: none;
628
- font-size: 1.15rem;
629
- min-height: 2.25rem;
630
- padding: 0;
631
- width: 2.25rem;
632
- }
631
+ :where([data-domainkit-part="connected-actions"]) {
632
+ align-items: center;
633
+ display: flex;
634
+ flex-wrap: nowrap;
635
+ gap: 0.5rem;
636
+ margin-left: auto;
637
+ }
633
638
 
634
- :where(
635
- [data-domainkit-part="actions-trigger"]:hover:not(:disabled),
636
- [data-domainkit-part="actions-trigger"][data-popup-open]
637
- ) {
638
- background: var(--domainkit-fill);
639
- color: var(--domainkit-text);
640
- }
639
+ :where([data-domainkit-part="actions-trigger"]) {
640
+ background: transparent;
641
+ border-color: transparent;
642
+ color: var(--domainkit-muted);
643
+ flex: none;
644
+ font-size: 1.15rem;
645
+ min-height: 2.25rem;
646
+ padding: 0;
647
+ width: 2.25rem;
648
+ }
641
649
 
642
- :where([data-domainkit-part="actions-menu"]) {
643
- background: var(--domainkit-background);
644
- border: 1px solid var(--domainkit-border);
645
- border-radius: var(--domainkit-control-radius);
646
- box-shadow: var(--domainkit-shadow);
647
- color: var(--domainkit-text);
648
- display: grid;
649
- min-width: 11rem;
650
- padding: 0.3rem;
651
- transform-origin: var(--transform-origin);
652
- transition:
653
- opacity 120ms ease,
654
- transform 120ms ease;
655
- z-index: 1002;
656
- }
650
+ :where(
651
+ [data-domainkit-part="actions-trigger"]:hover:not(:disabled),
652
+ [data-domainkit-part="actions-trigger"][data-popup-open]
653
+ ) {
654
+ background: var(--domainkit-fill);
655
+ color: var(--domainkit-text);
656
+ }
657
657
 
658
- :where(
659
- [data-domainkit-part="actions-menu"][data-starting-style],
660
- [data-domainkit-part="actions-menu"][data-ending-style]
661
- ) {
662
- opacity: 0;
663
- transform: scale(0.98);
664
- }
658
+ :where([data-domainkit-part="actions-menu"]) {
659
+ background: var(--domainkit-background);
660
+ border: 1px solid var(--domainkit-border);
661
+ border-radius: var(--domainkit-control-radius);
662
+ box-shadow: var(--domainkit-shadow);
663
+ color: var(--domainkit-text);
664
+ display: grid;
665
+ min-width: 11rem;
666
+ padding: 0.3rem;
667
+ transform-origin: var(--transform-origin);
668
+ transition:
669
+ opacity 120ms ease,
670
+ transform 120ms ease;
671
+ z-index: 1002;
672
+ }
665
673
 
666
- :where([data-domainkit-part="actions-item"]) {
667
- align-items: center;
668
- background: transparent;
669
- border: 0;
670
- border-radius: calc(var(--domainkit-control-radius) * 0.75);
671
- cursor: pointer;
672
- display: flex;
673
- font: inherit;
674
- font-size: 0.875rem;
675
- min-height: 2.25rem;
676
- outline: none;
677
- padding: 0.45rem 0.65rem;
678
- text-align: left;
679
- width: 100%;
680
- }
674
+ :where(
675
+ [data-domainkit-part="actions-menu"][data-starting-style],
676
+ [data-domainkit-part="actions-menu"][data-ending-style]
677
+ ) {
678
+ opacity: 0;
679
+ transform: scale(0.98);
680
+ }
681
681
 
682
- :where([data-domainkit-part="actions-item"][data-highlighted]) {
683
- background: var(--domainkit-fill);
684
- }
682
+ :where([data-domainkit-part="actions-item"]) {
683
+ align-items: center;
684
+ background: transparent;
685
+ border: 0;
686
+ border-radius: calc(var(--domainkit-control-radius) * 0.75);
687
+ cursor: pointer;
688
+ display: flex;
689
+ font: inherit;
690
+ font-size: 0.875rem;
691
+ min-height: 2.25rem;
692
+ outline: none;
693
+ padding: 0.45rem 0.65rem;
694
+ text-align: left;
695
+ width: 100%;
696
+ }
685
697
 
686
- :where([data-domainkit-part="actions-item"][data-tone="danger"]) {
687
- color: var(--domainkit-danger);
688
- }
698
+ :where([data-domainkit-part="actions-item"][data-highlighted]) {
699
+ background: var(--domainkit-fill);
700
+ }
689
701
 
690
- :where([data-domainkit-part="actions-separator"]) {
691
- background: var(--domainkit-border);
692
- height: 1px;
693
- margin: 0.25rem 0.35rem;
694
- }
702
+ :where([data-domainkit-part="actions-item"][data-tone="danger"]) {
703
+ color: var(--domainkit-danger);
704
+ }
695
705
 
696
- @media (max-width: 36rem) {
697
- :where([data-domainkit-part="connected-card"]) {
698
- grid-template-columns: minmax(0, 1fr);
706
+ :where([data-domainkit-part="actions-separator"]) {
707
+ background: var(--domainkit-border);
708
+ height: 1px;
709
+ margin: 0.25rem 0.35rem;
699
710
  }
700
711
 
701
- :where([data-domainkit-part="connected-actions"]) {
702
- justify-content: space-between;
703
- margin-left: 0;
712
+ @media (max-width: 36rem) {
713
+ :where([data-domainkit-part="connected-card"]) {
714
+ grid-template-columns: minmax(0, 1fr);
715
+ }
716
+
717
+ :where([data-domainkit-part="connected-actions"]) {
718
+ justify-content: space-between;
719
+ margin-left: 0;
720
+ width: 100%;
721
+ }
722
+ }
723
+
724
+ :where(
725
+ [data-domainkit-part="provisioning-flow"],
726
+ [data-domainkit-part="verification-status"],
727
+ [data-domainkit-part="cleanup-flow"]
728
+ ) {
729
+ align-items: flex-start;
730
+ display: flex;
731
+ flex-wrap: wrap;
732
+ gap: 0.5rem;
704
733
  width: 100%;
705
734
  }
706
- }
707
735
 
708
- :where(
709
- [data-domainkit-part="provisioning-flow"],
710
- [data-domainkit-part="verification-status"],
711
- [data-domainkit-part="cleanup-flow"]
712
- ) {
713
- align-items: flex-start;
714
- display: flex;
715
- flex-wrap: wrap;
716
- gap: 0.5rem;
717
- width: 100%;
718
- }
736
+ :where([data-domainkit-part="verification-status"]) {
737
+ display: inline-flex;
738
+ width: auto;
739
+ }
719
740
 
720
- :where([data-domainkit-part="verification-status"]) {
721
- display: inline-flex;
722
- width: auto;
723
- }
741
+ :where(
742
+ [data-domainkit-part="connected-actions"] > [data-domainkit-part="provisioning-flow"],
743
+ [data-domainkit-part="connected-actions"] > [data-domainkit-part="verification-status"],
744
+ [data-domainkit-part="connected-actions"] > [data-domainkit-part="disconnect"]
745
+ ) {
746
+ flex: 0 0 auto;
747
+ width: auto;
748
+ }
724
749
 
725
- :where(
726
- [data-domainkit-part="connected-actions"] > [data-domainkit-part="provisioning-flow"],
727
- [data-domainkit-part="connected-actions"] > [data-domainkit-part="verification-status"],
728
- [data-domainkit-part="connected-actions"] > [data-domainkit-part="disconnect"]
729
- ) {
730
- flex: 0 0 auto;
731
- width: auto;
732
- }
750
+ :where([data-domainkit-part="provisioning-flow"] > [data-domainkit-part="records-panel"]),
751
+ :where([data-domainkit-part="provisioning-flow"] > [data-domainkit-part="flow-outcome"]),
752
+ :where([data-domainkit-part="cleanup-flow"] > [data-domainkit-part="flow-outcome"]) {
753
+ flex: 1 1 100%;
754
+ }
733
755
 
734
- :where([data-domainkit-part="provisioning-flow"] > [data-domainkit-part="records-panel"]),
735
- :where([data-domainkit-part="provisioning-flow"] > [data-domainkit-part="flow-outcome"]),
736
- :where([data-domainkit-part="cleanup-flow"] > [data-domainkit-part="flow-outcome"]) {
737
- flex: 1 1 100%;
738
- }
756
+ :where([data-domainkit-part="verification-positioner"]) {
757
+ max-width: min(var(--available-width), calc(100vw - 1rem));
758
+ z-index: 1002;
759
+ }
739
760
 
740
- :where([data-domainkit-part="verification-positioner"]) {
741
- max-width: min(var(--available-width), calc(100vw - 1rem));
742
- z-index: 1002;
743
- }
761
+ :where([data-domainkit-part="verification-popover"]) {
762
+ background: var(--domainkit-background);
763
+ border: 1px solid var(--domainkit-border);
764
+ border-radius: var(--domainkit-control-radius);
765
+ box-shadow: 0 6px 20px color-mix(in srgb, var(--domainkit-text) 12%, transparent);
766
+ box-sizing: border-box;
767
+ color: var(--domainkit-text);
768
+ display: grid;
769
+ gap: 0.625rem;
770
+ max-height: min(20rem, var(--available-height));
771
+ max-width: min(18rem, calc(100vw - 1rem), var(--available-width));
772
+ overflow-x: hidden;
773
+ overflow-y: auto;
774
+ padding: 0.625rem;
775
+ transform-origin: var(--transform-origin);
776
+ transition:
777
+ opacity 120ms ease,
778
+ transform 120ms ease;
779
+ width: 18rem;
780
+ }
744
781
 
745
- :where([data-domainkit-part="verification-popover"]) {
746
- background: var(--domainkit-background);
747
- border: 1px solid var(--domainkit-border);
748
- border-radius: var(--domainkit-control-radius);
749
- box-shadow: 0 6px 20px color-mix(in srgb, var(--domainkit-text) 12%, transparent);
750
- box-sizing: border-box;
751
- color: var(--domainkit-text);
752
- display: grid;
753
- gap: 0.625rem;
754
- max-height: min(20rem, var(--available-height));
755
- max-width: min(18rem, calc(100vw - 1rem), var(--available-width));
756
- overflow-x: hidden;
757
- overflow-y: auto;
758
- padding: 0.625rem;
759
- transform-origin: var(--transform-origin);
760
- transition:
761
- opacity 120ms ease,
762
- transform 120ms ease;
763
- width: 18rem;
764
- }
782
+ :where(
783
+ [data-domainkit-part="verification-popover"][data-starting-style],
784
+ [data-domainkit-part="verification-popover"][data-ending-style]
785
+ ) {
786
+ opacity: 0;
787
+ transform: scale(0.98);
788
+ }
765
789
 
766
- :where(
767
- [data-domainkit-part="verification-popover"][data-starting-style],
768
- [data-domainkit-part="verification-popover"][data-ending-style]
769
- ) {
770
- opacity: 0;
771
- transform: scale(0.98);
772
- }
790
+ :where([data-domainkit-part="verification-arrow"]) {
791
+ display: block;
792
+ height: 5px;
793
+ overflow: clip;
794
+ position: relative;
795
+ width: 10px;
796
+ }
773
797
 
774
- :where([data-domainkit-part="verification-arrow"]) {
775
- display: block;
776
- height: 5px;
777
- overflow: clip;
778
- position: relative;
779
- width: 10px;
780
- }
798
+ :where([data-domainkit-part="verification-arrow"])::before {
799
+ background: var(--domainkit-background);
800
+ border: 1px solid var(--domainkit-border);
801
+ box-sizing: border-box;
802
+ content: "";
803
+ display: block;
804
+ height: calc(5px * sqrt(2));
805
+ left: 50%;
806
+ position: absolute;
807
+ width: calc(5px * sqrt(2));
808
+ }
781
809
 
782
- :where([data-domainkit-part="verification-arrow"])::before {
783
- background: var(--domainkit-background);
784
- border: 1px solid var(--domainkit-border);
785
- box-sizing: border-box;
786
- content: "";
787
- display: block;
788
- height: calc(5px * sqrt(2));
789
- left: 50%;
790
- position: absolute;
791
- width: calc(5px * sqrt(2));
792
- }
810
+ :where([data-domainkit-part="verification-arrow"][data-side="bottom"]) {
811
+ top: -5px;
812
+ }
793
813
 
794
- :where([data-domainkit-part="verification-arrow"][data-side="bottom"]) {
795
- top: -5px;
796
- }
814
+ :where([data-domainkit-part="verification-arrow"][data-side="bottom"])::before {
815
+ bottom: 0;
816
+ transform: translate(-50%, 50%) rotate(45deg);
817
+ }
797
818
 
798
- :where([data-domainkit-part="verification-arrow"][data-side="bottom"])::before {
799
- bottom: 0;
800
- transform: translate(-50%, 50%) rotate(45deg);
801
- }
819
+ :where([data-domainkit-part="verification-arrow"][data-side="top"]) {
820
+ bottom: -5px;
821
+ rotate: 180deg;
822
+ }
802
823
 
803
- :where([data-domainkit-part="verification-arrow"][data-side="top"]) {
804
- bottom: -5px;
805
- rotate: 180deg;
806
- }
824
+ :where([data-domainkit-part="verification-arrow"][data-side="top"])::before {
825
+ bottom: 0;
826
+ transform: translate(-50%, 50%) rotate(45deg);
827
+ }
807
828
 
808
- :where([data-domainkit-part="verification-arrow"][data-side="top"])::before {
809
- bottom: 0;
810
- transform: translate(-50%, 50%) rotate(45deg);
811
- }
829
+ :where([data-domainkit-part="verification-arrow"][data-side="left"]) {
830
+ right: -7px;
831
+ rotate: 90deg;
832
+ }
812
833
 
813
- :where([data-domainkit-part="verification-arrow"][data-side="left"]) {
814
- right: -7px;
815
- rotate: 90deg;
816
- }
834
+ :where([data-domainkit-part="verification-arrow"][data-side="left"])::before,
835
+ :where([data-domainkit-part="verification-arrow"][data-side="right"])::before {
836
+ bottom: 0;
837
+ transform: translate(-50%, 50%) rotate(45deg);
838
+ }
817
839
 
818
- :where([data-domainkit-part="verification-arrow"][data-side="left"])::before,
819
- :where([data-domainkit-part="verification-arrow"][data-side="right"])::before {
820
- bottom: 0;
821
- transform: translate(-50%, 50%) rotate(45deg);
822
- }
840
+ :where([data-domainkit-part="verification-arrow"][data-side="right"]) {
841
+ left: -7px;
842
+ rotate: -90deg;
843
+ }
823
844
 
824
- :where([data-domainkit-part="verification-arrow"][data-side="right"]) {
825
- left: -7px;
826
- rotate: -90deg;
827
- }
845
+ :where([data-domainkit-part="verification-progress"]) {
846
+ color: var(--domainkit-muted);
847
+ font-size: 0.8125rem;
848
+ margin: 0;
849
+ }
828
850
 
829
- :where([data-domainkit-part="verification-progress"]) {
830
- color: var(--domainkit-muted);
831
- font-size: 0.8125rem;
832
- margin: 0;
833
- }
851
+ :where([data-domainkit-part="observation-list"]) {
852
+ background: var(--domainkit-fill);
853
+ border: 1px solid var(--domainkit-border);
854
+ border-radius: var(--domainkit-control-radius);
855
+ display: grid;
856
+ gap: 0.625rem;
857
+ max-width: 18rem;
858
+ padding: 0.75rem 0.85rem;
859
+ width: 100%;
860
+ }
834
861
 
835
- :where([data-domainkit-part="observation-list"]) {
836
- background: var(--domainkit-fill);
837
- border: 1px solid var(--domainkit-border);
838
- border-radius: var(--domainkit-control-radius);
839
- display: grid;
840
- gap: 0.625rem;
841
- max-width: 18rem;
842
- padding: 0.75rem 0.85rem;
843
- width: 100%;
844
- }
862
+ :where([data-domainkit-part="verification-popover"] > [data-domainkit-part="observation-list"]) {
863
+ background: transparent;
864
+ border: 0;
865
+ box-sizing: border-box;
866
+ max-width: none;
867
+ padding: 0;
868
+ }
845
869
 
846
- :where([data-domainkit-part="verification-popover"] > [data-domainkit-part="observation-list"]) {
847
- background: transparent;
848
- border: 0;
849
- box-sizing: border-box;
850
- max-width: none;
851
- padding: 0;
852
- }
870
+ :where([data-domainkit-part="observation-group"]) {
871
+ display: grid;
872
+ gap: 0.4rem;
873
+ }
853
874
 
854
- :where([data-domainkit-part="observation-group"]) {
855
- display: grid;
856
- gap: 0.4rem;
857
- }
875
+ :where([data-domainkit-part="observation-source"]) {
876
+ color: var(--domainkit-muted);
877
+ font-size: 0.6875rem;
878
+ font-weight: 650;
879
+ letter-spacing: 0.04em;
880
+ margin: 0 0 0.125rem;
881
+ text-transform: uppercase;
882
+ }
858
883
 
859
- :where([data-domainkit-part="observation-source"]) {
860
- color: var(--domainkit-muted);
861
- font-size: 0.6875rem;
862
- font-weight: 650;
863
- letter-spacing: 0.04em;
864
- margin: 0 0 0.125rem;
865
- text-transform: uppercase;
866
- }
884
+ :where([data-domainkit-part="observation-group"] ul) {
885
+ display: grid;
886
+ gap: 0.35rem;
887
+ list-style: none;
888
+ margin: 0;
889
+ padding: 0;
890
+ }
867
891
 
868
- :where([data-domainkit-part="observation-group"] ul) {
869
- display: grid;
870
- gap: 0.35rem;
871
- list-style: none;
872
- margin: 0;
873
- padding: 0;
874
- }
892
+ :where([data-domainkit-part="observation-group"] li) {
893
+ display: grid;
894
+ gap: 0.25rem;
895
+ }
875
896
 
876
- :where([data-domainkit-part="observation-group"] li) {
877
- display: grid;
878
- gap: 0.25rem;
879
- }
897
+ :where([data-domainkit-part="observation-row"]) {
898
+ align-items: center;
899
+ display: flex;
900
+ gap: 0.75rem;
901
+ justify-content: space-between;
902
+ min-height: 1.5rem;
903
+ }
880
904
 
881
- :where([data-domainkit-part="observation-row"]) {
882
- align-items: center;
883
- display: flex;
884
- gap: 0.75rem;
885
- justify-content: space-between;
886
- min-height: 1.5rem;
887
- }
905
+ :where([data-domainkit-part="observation-record"]) {
906
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
907
+ font-size: 0.75rem;
908
+ font-weight: 600;
909
+ }
888
910
 
889
- :where([data-domainkit-part="observation-record"]) {
890
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
891
- font-size: 0.75rem;
892
- font-weight: 600;
893
- }
911
+ :where([data-domainkit-part="observation-note"]) {
912
+ color: var(--domainkit-muted);
913
+ font-size: 0.75rem;
914
+ margin: 0;
915
+ }
894
916
 
895
- :where([data-domainkit-part="observation-note"]) {
896
- color: var(--domainkit-muted);
897
- font-size: 0.75rem;
898
- margin: 0;
899
- }
917
+ :where([data-domainkit-part="records-panel"]) {
918
+ background: var(--domainkit-fill);
919
+ border: 1px solid var(--domainkit-border);
920
+ border-radius: var(--domainkit-control-radius);
921
+ overflow-x: auto;
922
+ width: 100%;
923
+ }
900
924
 
901
- :where([data-domainkit-part="records-panel"]) {
902
- background: var(--domainkit-fill);
903
- border: 1px solid var(--domainkit-border);
904
- border-radius: var(--domainkit-control-radius);
905
- overflow-x: auto;
906
- width: 100%;
907
- }
925
+ :where([data-domainkit-part="records-table"]) {
926
+ border-collapse: collapse;
927
+ min-width: 36rem;
928
+ width: 100%;
929
+ }
908
930
 
909
- :where([data-domainkit-part="records-table"]) {
910
- border-collapse: collapse;
911
- min-width: 36rem;
912
- width: 100%;
913
- }
931
+ :where([data-domainkit-part="records-table"] th) {
932
+ color: var(--domainkit-muted);
933
+ font-size: 0.75rem;
934
+ font-weight: 600;
935
+ letter-spacing: 0.02em;
936
+ padding: 0.55rem 0.75rem;
937
+ text-align: left;
938
+ white-space: nowrap;
939
+ }
914
940
 
915
- :where([data-domainkit-part="records-table"] th) {
916
- color: var(--domainkit-muted);
917
- font-size: 0.75rem;
918
- font-weight: 600;
919
- letter-spacing: 0.02em;
920
- padding: 0.55rem 0.75rem;
921
- text-align: left;
922
- white-space: nowrap;
923
- }
941
+ :where([data-domainkit-part="records-table"] td) {
942
+ border-top: 1px solid var(--domainkit-border);
943
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
944
+ font-size: 0.75rem;
945
+ line-height: 1.4;
946
+ padding: 0.55rem 0.75rem;
947
+ text-align: left;
948
+ vertical-align: middle;
949
+ }
924
950
 
925
- :where([data-domainkit-part="records-table"] td) {
926
- border-top: 1px solid var(--domainkit-border);
927
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
928
- font-size: 0.75rem;
929
- line-height: 1.4;
930
- padding: 0.55rem 0.75rem;
931
- text-align: left;
932
- vertical-align: middle;
933
- }
951
+ :where([data-domainkit-part="records-table"] td:first-child) {
952
+ font-weight: 600;
953
+ white-space: nowrap;
954
+ width: 4.5rem;
955
+ }
934
956
 
935
- :where([data-domainkit-part="records-table"] td:first-child) {
936
- font-weight: 600;
937
- white-space: nowrap;
938
- width: 4.5rem;
939
- }
957
+ :where([data-domainkit-part="records-table"] [data-column="status"]) {
958
+ text-align: right;
959
+ white-space: nowrap;
960
+ width: 1%;
961
+ }
940
962
 
941
- :where([data-domainkit-part="records-table"] [data-column="status"]) {
942
- text-align: right;
943
- white-space: nowrap;
944
- width: 1%;
945
- }
963
+ :where([data-domainkit-part="copy-value"]) {
964
+ align-items: center;
965
+ display: inline-flex;
966
+ flex-wrap: nowrap;
967
+ gap: 0.35rem;
968
+ max-width: 100%;
969
+ min-width: 0;
970
+ }
946
971
 
947
- :where([data-domainkit-part="copy-value"]) {
948
- align-items: center;
949
- display: inline-flex;
950
- flex-wrap: nowrap;
951
- gap: 0.35rem;
952
- max-width: 100%;
953
- min-width: 0;
954
- }
972
+ :where([data-domainkit-part="copy-value"] code) {
973
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
974
+ font-size: inherit;
975
+ line-height: 1.25rem;
976
+ min-width: 0;
977
+ overflow-wrap: anywhere;
978
+ }
955
979
 
956
- :where([data-domainkit-part="copy-value"] code) {
957
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
958
- font-size: inherit;
959
- line-height: 1.25rem;
960
- min-width: 0;
961
- overflow-wrap: anywhere;
962
- }
980
+ :where([data-domainkit-part="record-value"]) {
981
+ align-items: flex-start;
982
+ display: flex;
983
+ flex-direction: column;
984
+ gap: 0.15rem;
985
+ max-width: 100%;
986
+ min-width: 0;
987
+ width: 100%;
988
+ }
963
989
 
964
- :where([data-domainkit-part="record-value"]) {
965
- align-items: flex-start;
966
- display: flex;
967
- flex-direction: column;
968
- gap: 0.15rem;
969
- max-width: 100%;
970
- min-width: 0;
971
- width: 100%;
972
- }
990
+ :where([data-domainkit-part="record-value"] [data-domainkit-part="copy-value"]) {
991
+ min-width: 0;
992
+ width: 100%;
993
+ }
973
994
 
974
- :where([data-domainkit-part="record-value"] [data-domainkit-part="copy-value"]) {
975
- min-width: 0;
976
- width: 100%;
977
- }
995
+ :where([data-domainkit-part="record-priority"]) {
996
+ color: var(--domainkit-muted);
997
+ flex: none;
998
+ font-variant-numeric: tabular-nums;
999
+ }
978
1000
 
979
- :where([data-domainkit-part="record-priority"]) {
980
- color: var(--domainkit-muted);
981
- flex: none;
982
- font-variant-numeric: tabular-nums;
983
- }
1001
+ :where([data-domainkit-part="record-value"] [data-domainkit-part="record-priority"]) {
1002
+ font-size: 0.6875rem;
1003
+ }
984
1004
 
985
- :where([data-domainkit-part="record-value"] [data-domainkit-part="record-priority"]) {
986
- font-size: 0.6875rem;
987
- }
1005
+ :where([data-domainkit-part="zone-file"]) {
1006
+ display: flex;
1007
+ flex-wrap: wrap;
1008
+ gap: 0.5rem;
1009
+ justify-content: flex-start;
1010
+ }
988
1011
 
989
- :where([data-domainkit-part="zone-file"]) {
990
- display: flex;
991
- flex-wrap: wrap;
992
- gap: 0.5rem;
993
- justify-content: flex-start;
994
- }
1012
+ :where([data-domainkit-part="zone-copy"], [data-domainkit-part="zone-download"]) {
1013
+ gap: 0.4rem;
1014
+ }
995
1015
 
996
- :where([data-domainkit-part="zone-copy"], [data-domainkit-part="zone-download"]) {
997
- gap: 0.4rem;
998
- }
1016
+ :where([data-domainkit-part="record-card"]) {
1017
+ background: var(--domainkit-fill);
1018
+ border: 1px solid var(--domainkit-border);
1019
+ border-radius: var(--domainkit-control-radius);
1020
+ display: grid;
1021
+ gap: 0.75rem;
1022
+ padding: 0.85rem 1rem;
1023
+ }
999
1024
 
1000
- :where([data-domainkit-part="record-card"]) {
1001
- background: var(--domainkit-fill);
1002
- border: 1px solid var(--domainkit-border);
1003
- border-radius: var(--domainkit-control-radius);
1004
- display: grid;
1005
- gap: 0.75rem;
1006
- padding: 0.85rem 1rem;
1007
- }
1025
+ :where([data-domainkit-part="record-card-head"]) {
1026
+ align-items: center;
1027
+ display: flex;
1028
+ gap: 0.5rem;
1029
+ justify-content: space-between;
1030
+ }
1008
1031
 
1009
- :where([data-domainkit-part="record-card-head"]) {
1010
- align-items: center;
1011
- display: flex;
1012
- gap: 0.5rem;
1013
- justify-content: space-between;
1014
- }
1032
+ :where([data-domainkit-part="record-card"] dl) {
1033
+ display: grid;
1034
+ gap: 0.65rem;
1035
+ margin: 0;
1036
+ }
1015
1037
 
1016
- :where([data-domainkit-part="record-card"] dl) {
1017
- display: grid;
1018
- gap: 0.65rem;
1019
- margin: 0;
1020
- }
1038
+ :where([data-domainkit-part="record-card"] dt) {
1039
+ color: var(--domainkit-muted);
1040
+ font-size: 0.6875rem;
1041
+ font-weight: 650;
1042
+ letter-spacing: 0.04em;
1043
+ text-transform: uppercase;
1044
+ }
1021
1045
 
1022
- :where([data-domainkit-part="record-card"] dt) {
1023
- color: var(--domainkit-muted);
1024
- font-size: 0.6875rem;
1025
- font-weight: 650;
1026
- letter-spacing: 0.04em;
1027
- text-transform: uppercase;
1028
- }
1046
+ :where([data-domainkit-part="record-card"] dd) {
1047
+ display: grid;
1048
+ gap: 0.25rem;
1049
+ justify-items: start;
1050
+ margin: 0.25rem 0 0;
1051
+ }
1029
1052
 
1030
- :where([data-domainkit-part="record-card"] dd) {
1031
- display: grid;
1032
- gap: 0.25rem;
1033
- justify-items: start;
1034
- margin: 0.25rem 0 0;
1035
- }
1053
+ :where([data-domainkit-part="record-card"] [data-domainkit-part="record-priority"]) {
1054
+ font-size: 0.6875rem;
1055
+ }
1036
1056
 
1037
- :where([data-domainkit-part="record-card"] [data-domainkit-part="record-priority"]) {
1038
- font-size: 0.6875rem;
1039
- }
1057
+ :where([data-domainkit-part="record-status"]) {
1058
+ border-radius: 999px;
1059
+ font-size: 0.6875rem;
1060
+ font-weight: 600;
1061
+ letter-spacing: 0.02em;
1062
+ padding: 0.15rem 0.45rem;
1063
+ }
1040
1064
 
1041
- :where([data-domainkit-part="record-status"]) {
1042
- border-radius: 999px;
1043
- font-size: 0.6875rem;
1044
- font-weight: 600;
1045
- letter-spacing: 0.02em;
1046
- padding: 0.15rem 0.45rem;
1047
- }
1065
+ :where([data-domainkit-part="record-status"][data-status="Found"]) {
1066
+ background: color-mix(in srgb, var(--domainkit-success) 16%, transparent);
1067
+ color: var(--domainkit-success);
1068
+ }
1048
1069
 
1049
- :where([data-domainkit-part="record-status"][data-status="Found"]) {
1050
- background: color-mix(in srgb, var(--domainkit-success) 16%, transparent);
1051
- color: var(--domainkit-success);
1052
- }
1070
+ :where([data-domainkit-part="record-status"][data-status="Missing"]),
1071
+ :where([data-domainkit-part="record-status"][data-status="Mismatch"]) {
1072
+ background: color-mix(in srgb, var(--domainkit-danger) 14%, transparent);
1073
+ color: var(--domainkit-danger);
1074
+ }
1053
1075
 
1054
- :where([data-domainkit-part="record-status"][data-status="Missing"]),
1055
- :where([data-domainkit-part="record-status"][data-status="Mismatch"]) {
1056
- background: color-mix(in srgb, var(--domainkit-danger) 14%, transparent);
1057
- color: var(--domainkit-danger);
1058
- }
1076
+ :where([data-domainkit-part="record-status"][data-status="Unavailable"]) {
1077
+ background: var(--domainkit-background);
1078
+ color: var(--domainkit-muted);
1079
+ }
1059
1080
 
1060
- :where([data-domainkit-part="record-status"][data-status="Unavailable"]) {
1061
- background: var(--domainkit-background);
1062
- color: var(--domainkit-muted);
1063
- }
1081
+ :where([data-domainkit-part="plan-operations"], [data-domainkit-part="cleanup-operations"]) {
1082
+ display: grid;
1083
+ gap: 0.35rem;
1084
+ list-style: none;
1085
+ margin: 0;
1086
+ padding: 0;
1087
+ }
1064
1088
 
1065
- :where([data-domainkit-part="plan-operations"], [data-domainkit-part="cleanup-operations"]) {
1066
- display: grid;
1067
- gap: 0.35rem;
1068
- list-style: none;
1069
- margin: 0;
1070
- padding: 0;
1071
- }
1089
+ :where(
1090
+ [data-domainkit-part="plan-operations"] li,
1091
+ [data-domainkit-part="cleanup-operations"] li
1092
+ ) {
1093
+ align-items: baseline;
1094
+ background: var(--domainkit-fill);
1095
+ border-radius: var(--domainkit-control-radius);
1096
+ display: grid;
1097
+ font-size: 0.8125rem;
1098
+ gap: 0.5rem 0.75rem;
1099
+ grid-template-columns: auto auto 1fr;
1100
+ padding: 0.6rem 0.75rem;
1101
+ }
1072
1102
 
1073
- :where([data-domainkit-part="plan-operations"] li, [data-domainkit-part="cleanup-operations"] li) {
1074
- align-items: baseline;
1075
- background: var(--domainkit-fill);
1076
- border-radius: var(--domainkit-control-radius);
1077
- display: grid;
1078
- font-size: 0.8125rem;
1079
- gap: 0.5rem 0.75rem;
1080
- grid-template-columns: auto auto 1fr;
1081
- padding: 0.6rem 0.75rem;
1082
- }
1103
+ :where([data-domainkit-part="operation-kind"]) {
1104
+ border-radius: 999px;
1105
+ font-size: 0.6875rem;
1106
+ font-weight: 600;
1107
+ letter-spacing: 0.02em;
1108
+ padding: 0.15rem 0.45rem;
1109
+ text-transform: uppercase;
1110
+ }
1083
1111
 
1084
- :where([data-domainkit-part="operation-kind"]) {
1085
- border-radius: 999px;
1086
- font-size: 0.6875rem;
1087
- font-weight: 600;
1088
- letter-spacing: 0.02em;
1089
- padding: 0.15rem 0.45rem;
1090
- text-transform: uppercase;
1091
- }
1112
+ :where([data-operation="Create"] [data-domainkit-part="operation-kind"]) {
1113
+ background: color-mix(in srgb, var(--domainkit-success) 16%, transparent);
1114
+ color: var(--domainkit-success);
1115
+ }
1092
1116
 
1093
- :where([data-operation="Create"] [data-domainkit-part="operation-kind"]) {
1094
- background: color-mix(in srgb, var(--domainkit-success) 16%, transparent);
1095
- color: var(--domainkit-success);
1096
- }
1117
+ :where([data-operation="Update"] [data-domainkit-part="operation-kind"]) {
1118
+ background: color-mix(in srgb, var(--domainkit-accent) 14%, transparent);
1119
+ color: var(--domainkit-accent);
1120
+ }
1097
1121
 
1098
- :where([data-operation="Update"] [data-domainkit-part="operation-kind"]) {
1099
- background: color-mix(in srgb, var(--domainkit-accent) 14%, transparent);
1100
- color: var(--domainkit-accent);
1101
- }
1122
+ :where(
1123
+ [data-operation="Delete"] [data-domainkit-part="operation-kind"],
1124
+ [data-operation="Remove"] [data-domainkit-part="operation-kind"]
1125
+ ) {
1126
+ background: color-mix(in srgb, var(--domainkit-danger) 14%, transparent);
1127
+ color: var(--domainkit-danger);
1128
+ }
1102
1129
 
1103
- :where(
1104
- [data-operation="Delete"] [data-domainkit-part="operation-kind"],
1105
- [data-operation="Remove"] [data-domainkit-part="operation-kind"]
1106
- ) {
1107
- background: color-mix(in srgb, var(--domainkit-danger) 14%, transparent);
1108
- color: var(--domainkit-danger);
1109
- }
1130
+ :where(
1131
+ [data-operation="Conflict"] [data-domainkit-part="operation-kind"],
1132
+ [data-operation="Blocked"] [data-domainkit-part="operation-kind"],
1133
+ [data-operation="Stale"] [data-domainkit-part="operation-kind"]
1134
+ ) {
1135
+ background: color-mix(in srgb, var(--domainkit-danger) 10%, var(--domainkit-fill));
1136
+ color: var(--domainkit-danger);
1137
+ }
1110
1138
 
1111
- :where(
1112
- [data-operation="Conflict"] [data-domainkit-part="operation-kind"],
1113
- [data-operation="Blocked"] [data-domainkit-part="operation-kind"],
1114
- [data-operation="Stale"] [data-domainkit-part="operation-kind"]
1115
- ) {
1116
- background: color-mix(in srgb, var(--domainkit-danger) 10%, var(--domainkit-fill));
1117
- color: var(--domainkit-danger);
1118
- }
1139
+ :where([data-operation="Noop"] [data-domainkit-part="operation-kind"]) {
1140
+ background: var(--domainkit-background);
1141
+ color: var(--domainkit-muted);
1142
+ }
1119
1143
 
1120
- :where([data-operation="Noop"] [data-domainkit-part="operation-kind"]) {
1121
- background: var(--domainkit-background);
1122
- color: var(--domainkit-muted);
1123
- }
1144
+ :where([data-domainkit-part="operation-record"]) {
1145
+ color: var(--domainkit-muted);
1146
+ display: grid;
1147
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1148
+ font-size: 0.75rem;
1149
+ gap: 0.2rem;
1150
+ min-width: 0;
1151
+ }
1124
1152
 
1125
- :where([data-domainkit-part="operation-record"]) {
1126
- color: var(--domainkit-muted);
1127
- display: grid;
1128
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1129
- font-size: 0.75rem;
1130
- gap: 0.2rem;
1131
- min-width: 0;
1132
- }
1153
+ :where([data-domainkit-part="operation-value"]) {
1154
+ color: var(--domainkit-text);
1155
+ overflow-wrap: anywhere;
1156
+ white-space: pre-wrap;
1157
+ }
1133
1158
 
1134
- :where([data-domainkit-part="operation-value"]) {
1135
- color: var(--domainkit-text);
1136
- overflow-wrap: anywhere;
1137
- white-space: pre-wrap;
1138
- }
1159
+ :where([data-domainkit-part="operation-priority"]) {
1160
+ font-size: 0.6875rem;
1161
+ }
1139
1162
 
1140
- :where([data-domainkit-part="operation-priority"]) {
1141
- font-size: 0.6875rem;
1142
- }
1163
+ :where([data-domainkit-part="operation-reason"]) {
1164
+ color: var(--domainkit-danger);
1165
+ }
1143
1166
 
1144
- :where([data-domainkit-part="operation-reason"]) {
1145
- color: var(--domainkit-danger);
1146
- }
1167
+ :where([data-operation="AlreadyAbsent"] [data-domainkit-part="operation-kind"]) {
1168
+ background: var(--domainkit-background);
1169
+ color: var(--domainkit-muted);
1170
+ }
1147
1171
 
1148
- :where([data-operation="AlreadyAbsent"] [data-domainkit-part="operation-kind"]) {
1149
- background: var(--domainkit-background);
1150
- color: var(--domainkit-muted);
1151
- }
1172
+ :where([data-domainkit-part="cleanup-flow"]) {
1173
+ display: flex;
1174
+ flex-wrap: wrap;
1175
+ gap: 0.5rem;
1176
+ }
1152
1177
 
1153
- :where([data-domainkit-part="cleanup-flow"]) {
1154
- display: flex;
1155
- flex-wrap: wrap;
1156
- gap: 0.5rem;
1157
- }
1178
+ :where([data-domainkit-part="flow-outcome"]) {
1179
+ font-size: 0.875rem;
1180
+ margin: 0;
1181
+ width: 100%;
1182
+ }
1158
1183
 
1159
- :where([data-domainkit-part="flow-outcome"]) {
1160
- font-size: 0.875rem;
1161
- margin: 0;
1162
- width: 100%;
1163
- }
1184
+ :where([data-domainkit-part="flow-outcome"][data-tone="success"]) {
1185
+ color: var(--domainkit-success);
1186
+ }
1164
1187
 
1165
- :where([data-domainkit-part="flow-outcome"][data-tone="success"]) {
1166
- color: var(--domainkit-success);
1167
- }
1188
+ :where([data-domainkit-part="flow-outcome"][data-tone="danger"]) {
1189
+ color: var(--domainkit-danger);
1190
+ }
1168
1191
 
1169
- :where([data-domainkit-part="flow-outcome"][data-tone="danger"]) {
1170
- color: var(--domainkit-danger);
1171
- }
1192
+ :where([data-domainkit-part]:focus-visible) {
1193
+ outline: 2px solid var(--domainkit-accent);
1194
+ outline-offset: 2px;
1195
+ }
1172
1196
 
1173
- :where([data-domainkit-part]:focus-visible) {
1174
- outline: 2px solid var(--domainkit-accent);
1175
- outline-offset: 2px;
1176
- }
1197
+ @media (prefers-reduced-motion: reduce) {
1198
+ :where([data-domainkit-part]) {
1199
+ scroll-behavior: auto !important;
1200
+ transition-duration: 0.01ms !important;
1201
+ }
1202
+ }
1203
+
1204
+ /* ---------------------------------------------------------------------------------------------
1205
+ * Domain.Flow, the connection form, and the review actions
1206
+ * ------------------------------------------------------------------------------------------- */
1207
+
1208
+ [data-domainkit-part="domain-flow"] {
1209
+ display: grid;
1210
+ gap: 0.75rem;
1211
+ justify-items: start;
1212
+ }
1213
+
1214
+ [data-domainkit-part="domain-flow"] > [data-domainkit-part="records-panel"],
1215
+ [data-domainkit-part="domain-flow"] > [data-domainkit-part="connected-card"] {
1216
+ justify-self: stretch;
1217
+ width: 100%;
1218
+ }
1219
+
1220
+ [data-domainkit-part="connection-form"] {
1221
+ display: grid;
1222
+ gap: 1rem;
1223
+ }
1224
+
1225
+ [data-domainkit-part="provider-heading"] {
1226
+ align-items: center;
1227
+ color: var(--domainkit-text);
1228
+ display: flex;
1229
+ font-size: 0.875rem;
1230
+ gap: 0.5rem;
1231
+ }
1232
+
1233
+ [data-domainkit-part="token-connect"] {
1234
+ display: grid;
1235
+ gap: 0.5rem;
1236
+ }
1237
+
1238
+ [data-domainkit-part="token-field"] {
1239
+ display: grid;
1240
+ gap: 0.25rem;
1241
+ }
1242
+
1243
+ [data-domainkit-part="token-field-label"] {
1244
+ align-items: baseline;
1245
+ color: var(--domainkit-muted);
1246
+ display: flex;
1247
+ font-size: 0.8125rem;
1248
+ gap: 0.375rem;
1249
+ }
1250
+
1251
+ [data-domainkit-part="token-field-optional"] {
1252
+ font-size: 0.75rem;
1253
+ opacity: 0.8;
1254
+ }
1255
+
1256
+ [data-domainkit-part="token-field-input"] {
1257
+ background-color: var(--domainkit-background);
1258
+ border: 1px solid var(--domainkit-border);
1259
+ border-radius: var(--domainkit-control-radius);
1260
+ color: var(--domainkit-text);
1261
+ font: inherit;
1262
+ font-size: 0.875rem;
1263
+ padding: 0.4375rem 0.625rem;
1264
+ width: 100%;
1265
+ }
1266
+
1267
+ [data-domainkit-part="token-field-input"]:focus-visible {
1268
+ border-color: var(--domainkit-accent);
1269
+ outline: none;
1270
+ }
1271
+
1272
+ [data-domainkit-part="token-docs"] {
1273
+ align-items: center;
1274
+ color: var(--domainkit-muted);
1275
+ display: inline-flex;
1276
+ font-size: 0.8125rem;
1277
+ gap: 0.25rem;
1278
+ justify-self: start;
1279
+ text-decoration: none;
1280
+ }
1281
+
1282
+ [data-domainkit-part="discovery-resolved"],
1283
+ [data-domainkit-part="discovery-candidates"] {
1284
+ display: grid;
1285
+ gap: 0.5rem;
1286
+ }
1287
+
1288
+ [data-domainkit-part="review-actions"] {
1289
+ display: flex;
1290
+ flex-wrap: wrap;
1291
+ gap: 0.5rem;
1292
+ }
1293
+
1294
+ [data-domainkit-part="provisioning-status"],
1295
+ [data-domainkit-part="cleanup-status"],
1296
+ [data-domainkit-part="plan-decline-reason"],
1297
+ [data-domainkit-part="plan-empty"] {
1298
+ color: var(--domainkit-muted);
1299
+ font-size: 0.875rem;
1300
+ margin: 0;
1301
+ }
1302
+
1303
+ [data-domainkit-part="provisioning-status"]:empty,
1304
+ [data-domainkit-part="cleanup-status"]:empty,
1305
+ [data-domainkit-part="connection-status"]:empty {
1306
+ display: none;
1307
+ }
1308
+
1309
+ [data-domainkit-part="record-purpose"] {
1310
+ color: var(--domainkit-muted);
1311
+ display: block;
1312
+ font-size: 0.8125rem;
1313
+ }
1314
+
1315
+ [data-domainkit-part="host-evidence"] {
1316
+ align-items: center;
1317
+ display: flex;
1318
+ flex-wrap: wrap;
1319
+ gap: 0.375rem;
1320
+ }
1321
+
1322
+ [data-domainkit-part="observation-expected"] {
1323
+ color: var(--domainkit-muted);
1324
+ font-size: 0.8125rem;
1325
+ margin: 0;
1326
+ }
1327
+
1328
+ /* The source line above these is a small uppercase label; the values under it are data. */
1329
+ [data-domainkit-part="observation-observed"] {
1330
+ color: var(--domainkit-text);
1331
+ display: block;
1332
+ font-size: 0.8125rem;
1333
+ font-weight: 400;
1334
+ letter-spacing: normal;
1335
+ margin-top: 0.125rem;
1336
+ overflow-wrap: anywhere;
1337
+ text-transform: none;
1338
+ }
1177
1339
 
1178
- @media (prefers-reduced-motion: reduce) {
1179
- :where([data-domainkit-part]) {
1180
- scroll-behavior: auto !important;
1181
- transition-duration: 0.01ms !important;
1340
+ [data-domainkit-part="observation-source"] [data-domainkit-part="observation-note"] {
1341
+ font-weight: 400;
1342
+ letter-spacing: normal;
1343
+ text-transform: none;
1182
1344
  }
1183
1345
  }