@ostack.tech/ui-kform 0.1.0 → 0.1.2

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 (2) hide show
  1. package/dist/ostack-ui-kform.css +309 -309
  2. package/package.json +7 -7
package/dist/ostack-ui-kform.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- @keyframes oui-fade-in {
2
+ @keyframes o-ui-fade-in {
3
3
  from {
4
4
  opacity: 0;
5
5
  }
@@ -7,7 +7,7 @@
7
7
  opacity: 1;
8
8
  }
9
9
  }
10
- @keyframes oui-fade-out {
10
+ @keyframes o-ui-fade-out {
11
11
  from {
12
12
  opacity: 1;
13
13
  }
@@ -15,27 +15,27 @@
15
15
  opacity: 0;
16
16
  }
17
17
  }
18
- @keyframes oui-transform-in {
18
+ @keyframes o-ui-transform-in {
19
19
  from {
20
20
  opacity: 0;
21
- transform: var(--oui-animation-transform);
21
+ transform: var(--o-ui-animation-transform);
22
22
  }
23
23
  to {
24
24
  opacity: 1;
25
25
  transform: none;
26
26
  }
27
27
  }
28
- @keyframes oui-transform-out {
28
+ @keyframes o-ui-transform-out {
29
29
  from {
30
30
  opacity: 1;
31
31
  transform: none;
32
32
  }
33
33
  to {
34
34
  opacity: 0;
35
- transform: var(--oui-animation-transform);
35
+ transform: var(--o-ui-animation-transform);
36
36
  }
37
37
  }
38
- @keyframes oui-expand-vertical {
38
+ @keyframes o-ui-expand-vertical {
39
39
  from {
40
40
  opacity: 0;
41
41
  height: 0;
@@ -45,13 +45,13 @@
45
45
  }
46
46
  to {
47
47
  opacity: 1;
48
- height: var(--oui-animation-height);
48
+ height: var(--o-ui-animation-height);
49
49
  }
50
50
  }
51
- @keyframes oui-collapse-vertical {
51
+ @keyframes o-ui-collapse-vertical {
52
52
  from {
53
53
  opacity: 1;
54
- height: var(--oui-animation-height);
54
+ height: var(--o-ui-animation-height);
55
55
  }
56
56
  75% {
57
57
  opacity: 0;
@@ -61,7 +61,7 @@
61
61
  height: 0;
62
62
  }
63
63
  }
64
- @keyframes oui-expand-horizontal {
64
+ @keyframes o-ui-expand-horizontal {
65
65
  from {
66
66
  opacity: 0;
67
67
  width: 0;
@@ -71,13 +71,13 @@
71
71
  }
72
72
  to {
73
73
  opacity: 1;
74
- width: var(--oui-animation-width);
74
+ width: var(--o-ui-animation-width);
75
75
  }
76
76
  }
77
- @keyframes oui-collapse-horizontal {
77
+ @keyframes o-ui-collapse-horizontal {
78
78
  from {
79
79
  opacity: 1;
80
- width: var(--oui-animation-width);
80
+ width: var(--o-ui-animation-width);
81
81
  }
82
82
  75% {
83
83
  opacity: 0;
@@ -87,210 +87,210 @@
87
87
  width: 0;
88
88
  }
89
89
  }
90
- @keyframes oui-spinner-rotate {
90
+ @keyframes o-ui-spinner-rotate {
91
91
  to {
92
92
  transform: rotate(360deg);
93
93
  }
94
94
  }
95
- .oui-kform-annexes {
95
+ .o-ui-kform-annexes {
96
96
  display: flex;
97
97
  flex-direction: column;
98
98
  }
99
- .oui-kform-annexes__manager {
99
+ .o-ui-kform-annexes__manager {
100
100
  min-width: 200px;
101
101
  display: flex;
102
102
  align-items: flex-end;
103
103
  flex: 1 1 auto;
104
104
  }
105
- .oui-kform-annexes__manager:not(:last-child) {
106
- margin-right: calc(var(--oui-space) * 2);
105
+ .o-ui-kform-annexes__manager:not(:last-child) {
106
+ margin-right: calc(var(--o-ui-space) * 2);
107
107
  }
108
108
  @media (min-width: 576px) {
109
- .oui-kform-annexes__manager:not(:last-child) {
110
- margin-right: calc(var(--oui-space) * 4);
109
+ .o-ui-kform-annexes__manager:not(:last-child) {
110
+ margin-right: calc(var(--o-ui-space) * 4);
111
111
  }
112
112
  }
113
- .oui-kform-annexes__menu-container {
113
+ .o-ui-kform-annexes__menu-container {
114
114
  margin-bottom: 2px;
115
- padding-right: calc(var(--oui-space) * 2);
116
- box-shadow: 0 2px 0 0 var(--oui-primary-9);
115
+ padding-right: calc(var(--o-ui-space) * 2);
116
+ box-shadow: 0 2px 0 0 var(--o-ui-primary-9);
117
117
  }
118
118
  @media (min-width: 576px) {
119
- .oui-kform-annexes__menu-container {
120
- padding-right: calc(var(--oui-space) * 4);
119
+ .o-ui-kform-annexes__menu-container {
120
+ padding-right: calc(var(--o-ui-space) * 4);
121
121
  }
122
122
  }
123
- .oui-kform-annexes__issues-popover-container {
124
- margin-left: calc(var(--oui-space) * -4);
125
- margin-right: calc(var(--oui-space) * 7);
126
- padding-top: calc(var(--oui-space) * 0.5);
123
+ .o-ui-kform-annexes__issues-popover-container {
124
+ margin-left: calc(var(--o-ui-space) * -4);
125
+ margin-right: calc(var(--o-ui-space) * 7);
126
+ padding-top: calc(var(--o-ui-space) * 0.5);
127
127
  height: 44px;
128
128
  }
129
- .oui-kform-annexes__tab-list-container {
129
+ .o-ui-kform-annexes__tab-list-container {
130
130
  flex: 1;
131
131
  overflow: hidden;
132
132
  }
133
- .oui-kform-annexes__menu-trigger {
133
+ .o-ui-kform-annexes__menu-trigger {
134
134
  height: 44px;
135
135
  border-bottom-left-radius: 0;
136
136
  border-bottom-right-radius: 0;
137
- color: var(--oui-primary-9) !important;
137
+ color: var(--o-ui-primary-9) !important;
138
138
  }
139
- .oui-kform-annexes__menu-trigger[data-state=open] {
139
+ .o-ui-kform-annexes__menu-trigger[data-state=open] {
140
140
  border-color: #cdced6;
141
141
  border-bottom-color: transparent;
142
- background-color: var(--oui-background-color) !important;
142
+ background-color: var(--o-ui-background-color) !important;
143
143
  position: relative;
144
144
  z-index: 1001;
145
145
  }
146
- .oui-kform-annexes__menu {
146
+ .o-ui-kform-annexes__menu {
147
147
  width: 270px;
148
148
  }
149
- .oui-kform-annexes__menu[data-align=start][data-side=bottom] {
149
+ .o-ui-kform-annexes__menu[data-align=start][data-side=bottom] {
150
150
  border-top-left-radius: 0;
151
151
  }
152
- .oui-kform-annexes__menu[data-align=start][data-side=top] {
152
+ .o-ui-kform-annexes__menu[data-align=start][data-side=top] {
153
153
  border-bottom-left-radius: 0;
154
154
  }
155
155
  @media (max-width: 575.98px) {
156
- .oui-kform-annexes__menu {
156
+ .o-ui-kform-annexes__menu {
157
157
  min-width: 100vw;
158
158
  margin-left: -5px;
159
159
  border-radius: 0;
160
160
  border-right-width: 0;
161
161
  }
162
162
  }
163
- .oui-kform-annexes__menu-annex[data-status] {
163
+ .o-ui-kform-annexes__menu-annex[data-status] {
164
164
  position: relative;
165
165
  }
166
- .oui-kform-annexes__menu-annex[data-status]::after {
166
+ .o-ui-kform-annexes__menu-annex[data-status]::after {
167
167
  content: "";
168
168
  position: absolute;
169
169
  top: 0;
170
- left: calc((var(--oui-space) * 5 + var(--oui-space) * -3) * -1);
170
+ left: calc((var(--o-ui-space) * 5 + var(--o-ui-space) * -3) * -1);
171
171
  height: 100%;
172
172
  width: 3px;
173
- border-radius: 0 var(--oui-border-radius-sm) var(--oui-border-radius-sm) 0;
174
- background-color: var(--oui-accent-9);
173
+ border-radius: 0 var(--o-ui-border-radius-sm) var(--o-ui-border-radius-sm) 0;
174
+ background-color: var(--o-ui-accent-9);
175
175
  }
176
- .oui-kform-annexes__menu-annex-action {
176
+ .o-ui-kform-annexes__menu-annex-action {
177
177
  position: relative;
178
178
  min-height: 40px;
179
179
  }
180
- .oui-kform-annexes__menu-annex-content {
180
+ .o-ui-kform-annexes__menu-annex-content {
181
181
  display: flex;
182
182
  align-items: center;
183
183
  justify-content: space-between;
184
184
  width: 100%;
185
185
  }
186
- .oui-kform-annexes__menu-annex-content-container {
186
+ .o-ui-kform-annexes__menu-annex-content-container {
187
187
  overflow: hidden;
188
188
  }
189
- .oui-kform-annexes__menu-annex-title {
189
+ .o-ui-kform-annexes__menu-annex-title {
190
190
  font-weight: 700;
191
191
  overflow: hidden;
192
192
  text-overflow: ellipsis;
193
193
  white-space: nowrap;
194
194
  }
195
- .oui-kform-annexes__menu-annex-subtitle {
196
- margin-left: calc(var(--oui-space) * 2);
195
+ .o-ui-kform-annexes__menu-annex-subtitle {
196
+ margin-left: calc(var(--o-ui-space) * 2);
197
197
  font-weight: 400;
198
198
  font-size: 0.75rem;
199
199
  line-height: 0.75rem;
200
200
  text-transform: none;
201
201
  }
202
- .oui-kform-annexes__menu-annex-description {
202
+ .o-ui-kform-annexes__menu-annex-description {
203
203
  font-weight: 400;
204
204
  text-transform: none;
205
205
  }
206
- .oui-kform-annexes__menu-annex-remove {
207
- margin-left: calc(var(--oui-space) * 2);
206
+ .o-ui-kform-annexes__menu-annex-remove {
207
+ margin-left: calc(var(--o-ui-space) * 2);
208
208
  min-height: 28px;
209
209
  min-width: 28px;
210
210
  }
211
- .oui-kform-annexes__menu-new-annex-content {
211
+ .o-ui-kform-annexes__menu-new-annex-content {
212
212
  display: flex;
213
213
  width: 100%;
214
214
  }
215
- .oui-kform-annexes__menu-new-annex-title {
215
+ .o-ui-kform-annexes__menu-new-annex-title {
216
216
  flex: 1;
217
217
  font-weight: 700;
218
218
  color: #3e63dd;
219
219
  }
220
- .oui-kform-annexes__menu-new-annex-description {
220
+ .o-ui-kform-annexes__menu-new-annex-description {
221
221
  flex: 2;
222
- margin-left: calc(var(--oui-space) * 2);
222
+ margin-left: calc(var(--o-ui-space) * 2);
223
223
  font-weight: 400;
224
224
  text-transform: none;
225
225
  }
226
- .oui-kform-annexes__tab-inner {
226
+ .o-ui-kform-annexes__tab-inner {
227
227
  flex-direction: column;
228
228
  height: 100%;
229
229
  min-height: 44px;
230
230
  }
231
- .oui-kform-annexes__tab-title, .oui-kform-annexes__tab-subtitle {
231
+ .o-ui-kform-annexes__tab-title, .o-ui-kform-annexes__tab-subtitle {
232
232
  display: block;
233
233
  max-width: 100%;
234
234
  overflow: hidden;
235
235
  text-overflow: ellipsis;
236
236
  white-space: nowrap;
237
237
  }
238
- .oui-kform-annexes__tab-subtitle {
238
+ .o-ui-kform-annexes__tab-subtitle {
239
239
  font-weight: 400;
240
240
  font-size: 0.75rem;
241
241
  line-height: 1.3333333333;
242
242
  }
243
- .oui-kform-annexes__tab[data-has-issues] .oui-kform-annexes__tab-inner {
244
- padding-right: calc(var(--oui-space) * 2 * 2 + var(--oui-font-size-md) + (32px - var(--oui-font-size-md) - 2px) / 2);
243
+ .o-ui-kform-annexes__tab[data-has-issues] .o-ui-kform-annexes__tab-inner {
244
+ padding-right: calc(var(--o-ui-space) * 2 * 2 + var(--o-ui-font-size-md) + (32px - var(--o-ui-font-size-md) - 2px) / 2);
245
245
  }
246
- .oui-kform-annexes__tab-issues-popover-button-container {
247
- z-index: calc(var(--oui-z-index-focused) + 1);
248
- margin-left: calc(-32px - var(--oui-tabs-tab-list-gap-x) - (32px - var(--oui-font-size-md) - 2px) / 2 / 2);
249
- padding-right: calc(var(--oui-tabs-tab-list-gap-x) + (32px - var(--oui-font-size-md) - 2px) / 2 / 2);
246
+ .o-ui-kform-annexes__tab-issues-popover-button-container {
247
+ z-index: calc(var(--o-ui-z-index-focused) + 1);
248
+ margin-left: calc(-32px - var(--o-ui-tabs-tab-list-gap-x) - (32px - var(--o-ui-font-size-md) - 2px) / 2 / 2);
249
+ padding-right: calc(var(--o-ui-tabs-tab-list-gap-x) + (32px - var(--o-ui-font-size-md) - 2px) / 2 / 2);
250
250
  }
251
- .oui-kform-annexes__tab-issues-popover-button .oui-icon {
252
- filter: drop-shadow(0 -1px 0 var(--oui-background-color)) drop-shadow(1px 0 0 var(--oui-background-color)) drop-shadow(0 1px 0 var(--oui-background-color)) drop-shadow(-1px 0 0 var(--oui-background-color));
251
+ .o-ui-kform-annexes__tab-issues-popover-button .o-ui-icon {
252
+ filter: drop-shadow(0 -1px 0 var(--o-ui-background-color)) drop-shadow(1px 0 0 var(--o-ui-background-color)) drop-shadow(0 1px 0 var(--o-ui-background-color)) drop-shadow(-1px 0 0 var(--o-ui-background-color));
253
253
  }
254
- .oui-kform-annexes__annex {
255
- min-height: calc(var(--oui-kform-form-app-min-height) - var(--oui-kform-top-bar-height) - var(--oui-kform-bottom-panel-height));
254
+ .o-ui-kform-annexes__annex {
255
+ min-height: calc(var(--o-ui-kform-form-app-min-height) - var(--o-ui-kform-top-bar-height) - var(--o-ui-kform-bottom-panel-height));
256
256
  }
257
257
 
258
- .oui-kform-file-control__viewer-dialog {
258
+ .o-ui-kform-file-control__viewer-dialog {
259
259
  width: fit-content;
260
260
  min-width: 0;
261
- max-width: min(100dvw - var(--oui-space) * 14, 1140px);
261
+ max-width: min(100dvw - var(--o-ui-space) * 14, 1140px);
262
262
  }
263
- .oui-kform-file-control__viewer-download {
264
- margin-left: calc(var(--oui-space) * 4);
263
+ .o-ui-kform-file-control__viewer-download {
264
+ margin-left: calc(var(--o-ui-space) * 4);
265
265
  }
266
- .oui-kform-file-control__viewer-dialog-title {
266
+ .o-ui-kform-file-control__viewer-dialog-title {
267
267
  overflow: hidden;
268
268
  text-overflow: ellipsis;
269
269
  white-space: nowrap;
270
270
  }
271
- .oui-kform-file-control__viewer-dialog-body {
271
+ .o-ui-kform-file-control__viewer-dialog-body {
272
272
  padding: 0 !important;
273
273
  }
274
- .oui-kform-file-control__viewer-object {
274
+ .o-ui-kform-file-control__viewer-object {
275
275
  display: flex;
276
276
  justify-content: center;
277
277
  max-width: 100%;
278
278
  width: auto;
279
279
  max-height: calc(100dvh - 50px - 64px);
280
280
  margin: 0 auto;
281
- border-bottom-left-radius: var(--oui-border-radius-xs);
282
- border-bottom-right-radius: var(--oui-border-radius-xs);
283
- background-color: var(--oui-background-color);
281
+ border-bottom-left-radius: var(--o-ui-border-radius-xs);
282
+ border-bottom-right-radius: var(--o-ui-border-radius-xs);
283
+ background-color: var(--o-ui-background-color);
284
284
  }
285
- .oui-kform-file-control__viewer-object:not([type^="image/"]):not([type^="video/"]):not([type^="audio/"]) {
285
+ .o-ui-kform-file-control__viewer-object:not([type^="image/"]):not([type^="video/"]):not([type^="audio/"]) {
286
286
  width: 100vw;
287
287
  height: calc(100dvh - 50px - 64px);
288
288
  }
289
- .oui-kform-file-control__viewer-fallback {
290
- margin: calc(var(--oui-space) * 3) calc(var(--oui-space) * 4);
289
+ .o-ui-kform-file-control__viewer-fallback {
290
+ margin: calc(var(--o-ui-space) * 3) calc(var(--o-ui-space) * 4);
291
291
  }
292
292
 
293
- .oui-spinner {
293
+ .o-ui-spinner {
294
294
  display: inline-flex;
295
295
  flex: none;
296
296
  width: 1em;
@@ -298,114 +298,114 @@
298
298
  border-radius: 50%;
299
299
  border: clamp(1px, 0.15em, 6px) solid currentColor;
300
300
  border-right-color: transparent;
301
- animation: 0.75s linear infinite oui-spinner-rotate;
301
+ animation: 0.75s linear infinite o-ui-spinner-rotate;
302
302
  }
303
303
  @media (prefers-reduced-motion: reduce) {
304
- .oui-spinner {
304
+ .o-ui-spinner {
305
305
  animation-duration: 1.5s;
306
306
  }
307
307
  }
308
- .oui-spinner[data-accent] {
309
- color: var(--oui-accent-a11);
308
+ .o-ui-spinner[data-accent] {
309
+ color: var(--o-ui-accent-a11);
310
310
  }
311
- .oui-spinner--3xs {
311
+ .o-ui-spinner--3xs {
312
312
  font-size: 0.5625rem;
313
313
  }
314
- .oui-spinner--2xs {
314
+ .o-ui-spinner--2xs {
315
315
  font-size: 0.625rem;
316
316
  }
317
- .oui-spinner--xs {
317
+ .o-ui-spinner--xs {
318
318
  font-size: 0.75rem;
319
319
  }
320
- .oui-spinner--sm {
320
+ .o-ui-spinner--sm {
321
321
  font-size: 0.875rem;
322
322
  }
323
- .oui-spinner--md {
323
+ .o-ui-spinner--md {
324
324
  font-size: 1rem;
325
325
  }
326
- .oui-spinner--lg {
326
+ .o-ui-spinner--lg {
327
327
  font-size: 1.125rem;
328
328
  }
329
- .oui-spinner--xl {
329
+ .o-ui-spinner--xl {
330
330
  font-size: 1.25rem;
331
331
  }
332
- .oui-spinner--2xl {
332
+ .o-ui-spinner--2xl {
333
333
  font-size: 1.5rem;
334
334
  }
335
- .oui-spinner--3xl {
335
+ .o-ui-spinner--3xl {
336
336
  font-size: 1.875rem;
337
337
  }
338
- .oui-spinner--4xl {
338
+ .o-ui-spinner--4xl {
339
339
  font-size: 2.25rem;
340
340
  }
341
- .oui-spinner--5xl {
341
+ .o-ui-spinner--5xl {
342
342
  font-size: 3rem;
343
343
  }
344
- .oui-spinner--6xl {
344
+ .o-ui-spinner--6xl {
345
345
  font-size: 3.75rem;
346
346
  }
347
- .oui-spinner--7xl {
347
+ .o-ui-spinner--7xl {
348
348
  font-size: 4.5rem;
349
349
  }
350
- .oui-spinner--8xl {
350
+ .o-ui-spinner--8xl {
351
351
  font-size: 6rem;
352
352
  }
353
- .oui-spinner--9xl {
353
+ .o-ui-spinner--9xl {
354
354
  font-size: 8rem;
355
355
  }
356
356
 
357
- .oui-kform-form-app {
357
+ .o-ui-kform-form-app {
358
358
  position: relative;
359
- min-height: var(--oui-kform-form-app-min-height);
359
+ min-height: var(--o-ui-kform-form-app-min-height);
360
360
  margin-bottom: 0;
361
- background-color: var(--oui-background-color);
362
- --oui-kform-form-app-min-height: 100dvh;
361
+ background-color: var(--o-ui-background-color);
362
+ --o-ui-kform-form-app-min-height: 100dvh;
363
363
  }
364
- .oui-kform-form-app[data-has-min-height-xs] {
365
- --oui-kform-form-app-min-height: var(--oui-kform-form-app-min-height-xs);
364
+ .o-ui-kform-form-app[data-has-min-height-xs] {
365
+ --o-ui-kform-form-app-min-height: var(--o-ui-kform-form-app-min-height-xs);
366
366
  }
367
367
  @media (min-width: 576px) {
368
- .oui-kform-form-app[data-has-min-height-sm] {
369
- --oui-kform-form-app-min-height: var(--oui-kform-form-app-min-height-sm);
368
+ .o-ui-kform-form-app[data-has-min-height-sm] {
369
+ --o-ui-kform-form-app-min-height: var(--o-ui-kform-form-app-min-height-sm);
370
370
  }
371
371
  }
372
372
  @media (min-width: 768px) {
373
- .oui-kform-form-app[data-has-min-height-md] {
374
- --oui-kform-form-app-min-height: var(--oui-kform-form-app-min-height-md);
373
+ .o-ui-kform-form-app[data-has-min-height-md] {
374
+ --o-ui-kform-form-app-min-height: var(--o-ui-kform-form-app-min-height-md);
375
375
  }
376
376
  }
377
377
  @media (min-width: 992px) {
378
- .oui-kform-form-app[data-has-min-height-lg] {
379
- --oui-kform-form-app-min-height: var(--oui-kform-form-app-min-height-lg);
378
+ .o-ui-kform-form-app[data-has-min-height-lg] {
379
+ --o-ui-kform-form-app-min-height: var(--o-ui-kform-form-app-min-height-lg);
380
380
  }
381
381
  }
382
382
  @media (min-width: 1200px) {
383
- .oui-kform-form-app[data-has-min-height-xl] {
384
- --oui-kform-form-app-min-height: var(--oui-kform-form-app-min-height-xl);
383
+ .o-ui-kform-form-app[data-has-min-height-xl] {
384
+ --o-ui-kform-form-app-min-height: var(--o-ui-kform-form-app-min-height-xl);
385
385
  }
386
386
  }
387
387
  @media (min-width: 1400px) {
388
- .oui-kform-form-app[data-has-min-height-xxl] {
389
- --oui-kform-form-app-min-height: var(--oui-kform-form-app-min-height-xxl);
388
+ .o-ui-kform-form-app[data-has-min-height-xxl] {
389
+ --o-ui-kform-form-app-min-height: var(--o-ui-kform-form-app-min-height-xxl);
390
390
  }
391
391
  }
392
- .oui-kform-form-app:focus-visible {
392
+ .o-ui-kform-form-app:focus-visible {
393
393
  outline: none;
394
394
  }
395
- .oui-kform-form-app::after {
395
+ .o-ui-kform-form-app::after {
396
396
  content: "";
397
397
  position: absolute;
398
398
  pointer-events: none;
399
399
  z-index: 1300;
400
400
  }
401
401
  @media (prefers-reduced-motion: no-preference) {
402
- .oui-kform-form-app::after {
402
+ .o-ui-kform-form-app::after {
403
403
  transition-property: outline-color;
404
- transition-duration: var(--oui-transition-duration);
405
- transition-timing-function: var(--oui-transition-timing-function);
404
+ transition-duration: var(--o-ui-transition-duration);
405
+ transition-timing-function: var(--o-ui-transition-timing-function);
406
406
  }
407
407
  }
408
- .oui-kform-form-app:focus-visible::after {
408
+ .o-ui-kform-form-app:focus-visible::after {
409
409
  top: 0;
410
410
  left: 0;
411
411
  width: 100%;
@@ -413,16 +413,16 @@
413
413
  outline: 2px solid #8da4ef;
414
414
  outline-offset: -3px;
415
415
  }
416
- .oui-overlay .oui-kform-form-app {
417
- --oui-kform-form-app-min-height: auto;
416
+ .o-ui-overlay .o-ui-kform-form-app {
417
+ --o-ui-kform-form-app-min-height: auto;
418
418
  }
419
- .oui-kform-form-app__container:empty {
419
+ .o-ui-kform-form-app__container:empty {
420
420
  display: flex;
421
421
  align-items: center;
422
422
  justify-content: center;
423
- padding: calc(var(--oui-space) * 30) calc(var(--oui-space) * 10);
423
+ padding: calc(var(--o-ui-space) * 30) calc(var(--o-ui-space) * 10);
424
424
  }
425
- .oui-kform-form-app__container:empty::after {
425
+ .o-ui-kform-form-app__container:empty::after {
426
426
  content: "";
427
427
  color: #3e63dd;
428
428
  font-size: 3.75rem;
@@ -433,273 +433,273 @@
433
433
  border-radius: 50%;
434
434
  border: clamp(1px, 0.15em, 6px) solid currentColor;
435
435
  border-right-color: transparent;
436
- animation: 0.75s linear infinite oui-spinner-rotate;
436
+ animation: 0.75s linear infinite o-ui-spinner-rotate;
437
437
  }
438
438
  @media (prefers-reduced-motion: reduce) {
439
- .oui-kform-form-app__container:empty::after {
439
+ .o-ui-kform-form-app__container:empty::after {
440
440
  animation-duration: 1.5s;
441
441
  }
442
442
  }
443
443
 
444
- .oui-kform-form-pages {
444
+ .o-ui-kform-form-pages {
445
445
  display: flex;
446
446
  justify-content: stretch;
447
447
  height: 100%;
448
448
  }
449
- .oui-kform-form-pages__navigation[data-navigation-mode=sidebar] {
449
+ .o-ui-kform-form-pages__navigation[data-navigation-mode=sidebar] {
450
450
  flex-shrink: 0;
451
451
  width: 220px;
452
- min-height: calc(var(--oui-kform-form-app-min-height) - var(--oui-kform-top-bar-height));
453
- margin-bottom: calc(var(--oui-kform-bottom-panel-height) * -1);
454
- background-color: var(--oui-primary-a3);
455
- border-right: 1px solid var(--oui-primary-4);
452
+ min-height: calc(var(--o-ui-kform-form-app-min-height) - var(--o-ui-kform-top-bar-height));
453
+ margin-bottom: calc(var(--o-ui-kform-bottom-panel-height) * -1);
454
+ background-color: var(--o-ui-primary-a3);
455
+ border-right: 1px solid var(--o-ui-primary-4);
456
456
  }
457
457
  @media (min-width: 1200px) {
458
- .oui-kform-form-pages__navigation[data-navigation-mode=sidebar] {
458
+ .o-ui-kform-form-pages__navigation[data-navigation-mode=sidebar] {
459
459
  width: 300px;
460
460
  }
461
461
  }
462
- .oui-kform-form-pages__sidebar {
462
+ .o-ui-kform-form-pages__sidebar {
463
463
  position: sticky;
464
- top: var(--oui-kform-top-bar-height);
465
- z-index: calc(var(--oui-z-index-sticky) + 1);
466
- max-height: calc(100dvh - var(--oui-kform-top-bar-height));
464
+ top: var(--o-ui-kform-top-bar-height);
465
+ z-index: calc(var(--o-ui-z-index-sticky) + 1);
466
+ max-height: calc(100dvh - var(--o-ui-kform-top-bar-height));
467
467
  overflow: auto;
468
468
  }
469
- .oui-kform-form-pages__sidebar-item-content {
469
+ .o-ui-kform-form-pages__sidebar-item-content {
470
470
  display: flex;
471
471
  align-items: center;
472
472
  }
473
- .oui-kform-form-pages__sidebar-item-code {
473
+ .o-ui-kform-form-pages__sidebar-item-code {
474
474
  display: flex;
475
475
  flex: 0 0 auto;
476
476
  align-items: center;
477
477
  justify-content: center;
478
478
  min-width: 20px;
479
479
  min-height: 20px;
480
- margin-right: calc(var(--oui-space) * 2);
481
- padding: calc(var(--oui-space) * 0.5);
482
- border-radius: var(--oui-border-radius-sm);
483
- font-size: var(--oui-font-size-xs);
484
- line-height: var(--oui-line-height-xs);
480
+ margin-right: calc(var(--o-ui-space) * 2);
481
+ padding: calc(var(--o-ui-space) * 0.5);
482
+ border-radius: var(--o-ui-border-radius-sm);
483
+ font-size: var(--o-ui-font-size-xs);
484
+ line-height: var(--o-ui-line-height-xs);
485
485
  font-weight: 700;
486
- background-color: var(--oui-primary-2);
487
- color: var(--oui-primary-9);
486
+ background-color: var(--o-ui-primary-2);
487
+ color: var(--o-ui-primary-9);
488
488
  }
489
489
  @media (prefers-reduced-motion: no-preference) {
490
- .oui-kform-form-pages__sidebar-item-code {
491
- transition-property: var(--oui-transition-property);
492
- transition-duration: var(--oui-transition-duration);
493
- transition-timing-function: var(--oui-transition-timing-function);
490
+ .o-ui-kform-form-pages__sidebar-item-code {
491
+ transition-property: var(--o-ui-transition-property);
492
+ transition-duration: var(--o-ui-transition-duration);
493
+ transition-timing-function: var(--o-ui-transition-timing-function);
494
494
  }
495
495
  }
496
- .oui-kform-form-pages__sidebar-item-code[data-selected] {
496
+ .o-ui-kform-form-pages__sidebar-item-code[data-selected] {
497
497
  background-color: rgba(255, 255, 255, 0.25);
498
- color: var(--oui-primary-contrast);
498
+ color: var(--o-ui-primary-contrast);
499
499
  }
500
- .oui-kform-form-pages__sidebar-item-code[data-status] {
501
- background-color: var(--oui-accent-9);
502
- color: var(--oui-accent-contrast);
500
+ .o-ui-kform-form-pages__sidebar-item-code[data-status] {
501
+ background-color: var(--o-ui-accent-9);
502
+ color: var(--o-ui-accent-contrast);
503
503
  }
504
- .oui-kform-form-pages[data-navigation-mode=select] {
504
+ .o-ui-kform-form-pages[data-navigation-mode=select] {
505
505
  flex-direction: column;
506
506
  }
507
- .oui-kform-form-pages__navigation[data-navigation-mode=select] {
507
+ .o-ui-kform-form-pages__navigation[data-navigation-mode=select] {
508
508
  position: sticky;
509
- top: var(--oui-kform-top-bar-height);
510
- z-index: calc(var(--oui-z-index-sticky) + 2);
509
+ top: var(--o-ui-kform-top-bar-height);
510
+ z-index: calc(var(--o-ui-z-index-sticky) + 2);
511
511
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
512
512
  }
513
- .oui-kform-form-pages__select-container[data-variant=default] {
513
+ .o-ui-kform-form-pages__select-container[data-variant=default] {
514
514
  border-radius: 0;
515
515
  border: 0;
516
- background-color: var(--oui-primary-9);
516
+ background-color: var(--o-ui-primary-9);
517
517
  background-image: none;
518
518
  }
519
- .oui-kform-form-pages__select-container[data-variant=default][data-focused] {
520
- box-shadow: inset 0 0 0 2px var(--oui-neutral-a12);
519
+ .o-ui-kform-form-pages__select-container[data-variant=default][data-focused] {
520
+ box-shadow: inset 0 0 0 2px var(--o-ui-neutral-a12);
521
521
  }
522
- .oui-kform-form-pages__select[data-variant=default] {
523
- padding-top: calc(var(--oui-space) * 2 - 2px);
524
- padding-bottom: calc(var(--oui-space) * 2);
522
+ .o-ui-kform-form-pages__select[data-variant=default] {
523
+ padding-top: calc(var(--o-ui-space) * 2 - 2px);
524
+ padding-bottom: calc(var(--o-ui-space) * 2);
525
525
  height: auto;
526
526
  border-radius: 0 !important;
527
527
  font-weight: 700;
528
528
  font-size: 1rem;
529
- color: var(--oui-background-color);
529
+ color: var(--o-ui-background-color);
530
530
  }
531
531
  @media (prefers-reduced-motion: no-preference) {
532
- .oui-kform-form-pages__select[data-variant=default] {
533
- transition-property: var(--oui-transition-property);
534
- transition-duration: var(--oui-transition-duration);
535
- transition-timing-function: var(--oui-transition-timing-function);
532
+ .o-ui-kform-form-pages__select[data-variant=default] {
533
+ transition-property: var(--o-ui-transition-property);
534
+ transition-duration: var(--o-ui-transition-duration);
535
+ transition-timing-function: var(--o-ui-transition-timing-function);
536
536
  }
537
537
  }
538
- .oui-kform-form-pages__select-value > span, .oui-kform-form-pages__select-option > span {
538
+ .o-ui-kform-form-pages__select-value > span, .o-ui-kform-form-pages__select-option > span {
539
539
  display: flex;
540
540
  align-items: center;
541
541
  }
542
- .oui-kform-form-pages__select-popover {
542
+ .o-ui-kform-form-pages__select-popover {
543
543
  min-width: 0;
544
- width: calc(100dvw - var(--oui-space));
544
+ width: calc(100dvw - var(--o-ui-space));
545
545
  }
546
- .oui-kform-form-pages__select-option-code {
546
+ .o-ui-kform-form-pages__select-option-code {
547
547
  display: inline-flex;
548
548
  flex: 0 0 auto;
549
549
  align-items: center;
550
550
  justify-content: center;
551
551
  min-width: 30px;
552
552
  min-height: 30px;
553
- margin-right: calc(var(--oui-space) * 3);
554
- padding: calc(var(--oui-space) * 0.5) var(--oui-space);
555
- border-radius: var(--oui-border-radius-sm);
556
- font-size: var(--oui-font-size-sm);
557
- line-height: var(--oui-line-height-sm);
553
+ margin-right: calc(var(--o-ui-space) * 3);
554
+ padding: calc(var(--o-ui-space) * 0.5) var(--o-ui-space);
555
+ border-radius: var(--o-ui-border-radius-sm);
556
+ font-size: var(--o-ui-font-size-sm);
557
+ line-height: var(--o-ui-line-height-sm);
558
558
  font-weight: 700;
559
559
  background-color: rgba(255, 255, 255, 0.6);
560
- color: var(--oui-primary-9);
560
+ color: var(--o-ui-primary-9);
561
561
  }
562
562
  @media (prefers-reduced-motion: no-preference) {
563
- .oui-kform-form-pages__select-option-code {
564
- transition-property: var(--oui-transition-property);
565
- transition-duration: var(--oui-transition-duration);
566
- transition-timing-function: var(--oui-transition-timing-function);
563
+ .o-ui-kform-form-pages__select-option-code {
564
+ transition-property: var(--o-ui-transition-property);
565
+ transition-duration: var(--o-ui-transition-duration);
566
+ transition-timing-function: var(--o-ui-transition-timing-function);
567
567
  }
568
568
  }
569
- .oui-kform-form-pages__select-value .oui-kform-form-pages__select-option-code, .oui-kform-form-pages__select-option[data-state=checked] .oui-kform-form-pages__select-option-code:not([data-status]) {
569
+ .o-ui-kform-form-pages__select-value .o-ui-kform-form-pages__select-option-code, .o-ui-kform-form-pages__select-option[data-state=checked] .o-ui-kform-form-pages__select-option-code:not([data-status]) {
570
570
  background-color: rgba(255, 255, 255, 0.25);
571
- color: var(--oui-background-color);
571
+ color: var(--o-ui-background-color);
572
572
  }
573
- .oui-kform-form-pages__select-option-code[data-status] {
574
- background-color: var(--oui-accent-9);
575
- color: var(--oui-accent-contrast);
573
+ .o-ui-kform-form-pages__select-option-code[data-status] {
574
+ background-color: var(--o-ui-accent-9);
575
+ color: var(--o-ui-accent-contrast);
576
576
  }
577
- .oui-kform-form-pages__select-arrow {
578
- color: var(--oui-background-color);
577
+ .o-ui-kform-form-pages__select-arrow {
578
+ color: var(--o-ui-background-color);
579
579
  }
580
- .oui-kform-form-pages__page {
580
+ .o-ui-kform-form-pages__page {
581
581
  flex: 1;
582
582
  min-width: 0;
583
- min-height: calc(var(--oui-kform-form-app-min-height) - var(--oui-kform-top-bar-height) - var(--oui-kform-form-pages-navigation-select-height) - var(--oui-kform-bottom-panel-height));
584
- background-color: var(--oui-background-color);
583
+ min-height: calc(var(--o-ui-kform-form-app-min-height) - var(--o-ui-kform-top-bar-height) - var(--o-ui-kform-form-pages-navigation-select-height) - var(--o-ui-kform-bottom-panel-height));
584
+ background-color: var(--o-ui-background-color);
585
585
  }
586
- .oui-kform-form-pages__page-header {
586
+ .o-ui-kform-form-pages__page-header {
587
587
  position: sticky;
588
- top: var(--oui-kform-top-bar-height);
588
+ top: var(--o-ui-kform-top-bar-height);
589
589
  z-index: 1101;
590
590
  display: flex;
591
591
  align-items: center;
592
- padding: calc(var(--oui-space) * 2) calc(var(--oui-space) * 4);
593
- border-bottom: 1px solid var(--oui-primary-3);
594
- background-color: var(--oui-background-color);
592
+ padding: calc(var(--o-ui-space) * 2) calc(var(--o-ui-space) * 4);
593
+ border-bottom: 1px solid var(--o-ui-primary-3);
594
+ background-color: var(--o-ui-background-color);
595
595
  }
596
596
  @media (max-width: 575.98px) {
597
- .oui-kform-form-pages__navigation + .oui-kform-form-pages__page > .oui-kform-form-pages__page-header {
597
+ .o-ui-kform-form-pages__navigation + .o-ui-kform-form-pages__page > .o-ui-kform-form-pages__page-header {
598
598
  background-color: transparent;
599
- padding-left: calc(var(--oui-space) * 2.5);
600
- padding-right: calc(var(--oui-space) * 2.5);
599
+ padding-left: calc(var(--o-ui-space) * 2.5);
600
+ padding-right: calc(var(--o-ui-space) * 2.5);
601
601
  overflow: hidden;
602
602
  }
603
- .oui-kform-form-pages__navigation + .oui-kform-form-pages__page > .oui-kform-form-pages__page-header:not([data-has-popovers]) {
603
+ .o-ui-kform-form-pages__navigation + .o-ui-kform-form-pages__page > .o-ui-kform-form-pages__page-header:not([data-has-popovers]) {
604
604
  padding: 0;
605
605
  border: 0;
606
606
  }
607
- .oui-kform-form-pages__navigation + .oui-kform-form-pages__page > .oui-kform-form-pages__page-header > .oui-kform-form-pages__page-code, .oui-kform-form-pages__navigation + .oui-kform-form-pages__page > .oui-kform-form-pages__page-header > .oui-kform-form-pages__page-title {
607
+ .o-ui-kform-form-pages__navigation + .o-ui-kform-form-pages__page > .o-ui-kform-form-pages__page-header > .o-ui-kform-form-pages__page-code, .o-ui-kform-form-pages__navigation + .o-ui-kform-form-pages__page > .o-ui-kform-form-pages__page-header > .o-ui-kform-form-pages__page-title {
608
608
  display: none;
609
609
  }
610
- .oui-kform-form-pages__navigation + .oui-kform-form-pages__page > .oui-kform-form-pages__page-content {
611
- top: calc(var(--oui-kform-top-bar-height) + var(--oui-kform-form-pages-navigation-select-height));
610
+ .o-ui-kform-form-pages__navigation + .o-ui-kform-form-pages__page > .o-ui-kform-form-pages__page-content {
611
+ top: calc(var(--o-ui-kform-top-bar-height) + var(--o-ui-kform-form-pages-navigation-select-height));
612
612
  }
613
613
  }
614
- .oui-kform-form-pages__page-code {
614
+ .o-ui-kform-form-pages__page-code {
615
615
  display: flex;
616
616
  align-items: center;
617
617
  justify-content: center;
618
618
  min-height: 24px;
619
619
  min-width: 24px;
620
- margin-right: calc(var(--oui-space) * 2);
621
- border-radius: var(--oui-border-radius-sm);
622
- padding: calc(var(--oui-space) * 0.5) var(--oui-space);
623
- background-color: var(--oui-primary-3);
624
- color: var(--oui-primary-9);
620
+ margin-right: calc(var(--o-ui-space) * 2);
621
+ border-radius: var(--o-ui-border-radius-sm);
622
+ padding: calc(var(--o-ui-space) * 0.5) var(--o-ui-space);
623
+ background-color: var(--o-ui-primary-3);
624
+ color: var(--o-ui-primary-9);
625
625
  font-size: 0.875rem;
626
626
  line-height: 1.4285714286;
627
627
  font-weight: 700;
628
628
  }
629
629
  @media (prefers-reduced-motion: no-preference) {
630
- .oui-kform-form-pages__page-code {
631
- transition-property: var(--oui-transition-property);
632
- transition-duration: var(--oui-transition-duration);
633
- transition-timing-function: var(--oui-transition-timing-function);
630
+ .o-ui-kform-form-pages__page-code {
631
+ transition-property: var(--o-ui-transition-property);
632
+ transition-duration: var(--o-ui-transition-duration);
633
+ transition-timing-function: var(--o-ui-transition-timing-function);
634
634
  }
635
635
  }
636
- .oui-kform-form-pages__page-code[data-status] {
637
- background-color: var(--oui-accent-9);
638
- color: var(--oui-accent-contrast);
636
+ .o-ui-kform-form-pages__page-code[data-status] {
637
+ background-color: var(--o-ui-accent-9);
638
+ color: var(--o-ui-accent-contrast);
639
639
  }
640
- .oui-kform-form-pages__page-title {
640
+ .o-ui-kform-form-pages__page-title {
641
641
  margin: 0;
642
- color: var(--oui-primary-9);
642
+ color: var(--o-ui-primary-9);
643
643
  font-size: 1rem;
644
644
  line-height: 1.5;
645
645
  font-weight: 700;
646
646
  }
647
- .oui-kform-form-pages__page-title:not(:last-child) {
648
- margin-right: calc(var(--oui-space) * 4);
647
+ .o-ui-kform-form-pages__page-title:not(:last-child) {
648
+ margin-right: calc(var(--o-ui-space) * 4);
649
649
  }
650
- .oui-kform-form-pages__page-header-popovers {
650
+ .o-ui-kform-form-pages__page-header-popovers {
651
651
  margin-left: auto;
652
- margin-right: calc(var(--oui-space) * -0.5);
652
+ margin-right: calc(var(--o-ui-space) * -0.5);
653
653
  }
654
- .oui-kform-form-pages__page-helper-button, .oui-kform-form-pages__page-issues-popover-button {
655
- margin-top: calc(var(--oui-space) * -3) !important;
656
- margin-bottom: calc(var(--oui-space) * -3) !important;
657
- margin-right: calc(var(--oui-space) * -1.5) !important;
654
+ .o-ui-kform-form-pages__page-helper-button, .o-ui-kform-form-pages__page-issues-popover-button {
655
+ margin-top: calc(var(--o-ui-space) * -3) !important;
656
+ margin-bottom: calc(var(--o-ui-space) * -3) !important;
657
+ margin-right: calc(var(--o-ui-space) * -1.5) !important;
658
658
  }
659
- .oui-kform-form-pages__page-helper-popover {
659
+ .o-ui-kform-form-pages__page-helper-popover {
660
660
  max-width: min(720px, var(--radix-popover-content-available-width));
661
661
  max-height: min(600px, var(--radix-popover-content-available-height));
662
- padding: var(--oui-space) calc(var(--oui-space) * 2);
662
+ padding: var(--o-ui-space) calc(var(--o-ui-space) * 2);
663
663
  }
664
- .oui-kform-form-pages__page-content {
664
+ .o-ui-kform-form-pages__page-content {
665
665
  position: sticky;
666
- top: calc(var(--oui-kform-top-bar-height) + var(--oui-kform-form-pages-page-header-height));
666
+ top: calc(var(--o-ui-kform-top-bar-height) + var(--o-ui-kform-form-pages-page-header-height));
667
667
  z-index: 1100;
668
- padding: calc(var(--oui-space) * 4);
668
+ padding: calc(var(--o-ui-space) * 4);
669
669
  }
670
670
  @media (min-width: 576px) {
671
- .oui-kform-form-pages__page-content {
672
- padding-bottom: calc(var(--oui-kform-bottom-panel-height) + var(--oui-space) * 4);
673
- margin-bottom: calc(var(--oui-kform-bottom-panel-height) * -1);
671
+ .o-ui-kform-form-pages__page-content {
672
+ padding-bottom: calc(var(--o-ui-kform-bottom-panel-height) + var(--o-ui-space) * 4);
673
+ margin-bottom: calc(var(--o-ui-kform-bottom-panel-height) * -1);
674
674
  }
675
675
  }
676
676
 
677
- .oui-kform-issue-messages__issue-code {
677
+ .o-ui-kform-issue-messages__issue-code {
678
678
  font-style: italic;
679
679
  opacity: 0.9;
680
680
  }
681
- .oui-kform-issue-messages__issue-code::before {
681
+ .o-ui-kform-issue-messages__issue-code::before {
682
682
  content: " ";
683
683
  }
684
684
 
685
- .oui-kform-issues-panel {
686
- border-radius: var(--oui-border-radius-sm) var(--oui-border-radius-sm) 0 0;
685
+ .o-ui-kform-issues-panel {
686
+ border-radius: var(--o-ui-border-radius-sm) var(--o-ui-border-radius-sm) 0 0;
687
687
  pointer-events: auto;
688
688
  overflow: auto;
689
689
  }
690
- .oui-kform-issues-panel.oui-card {
690
+ .o-ui-kform-issues-panel.o-ui-card {
691
691
  padding: 0;
692
692
  border-width: 1px 1px 0 1px;
693
693
  }
694
694
  @media (max-width: 575.98px) {
695
- .oui-kform-issues-panel {
695
+ .o-ui-kform-issues-panel {
696
696
  border-radius: 0;
697
697
  }
698
- .oui-kform-issues-panel.oui-card {
698
+ .o-ui-kform-issues-panel.o-ui-card {
699
699
  border-width: 1px 0 0 0;
700
700
  }
701
701
  }
702
- .oui-kform-issues-panel__container {
702
+ .o-ui-kform-issues-panel__container {
703
703
  position: sticky;
704
704
  bottom: 0;
705
705
  z-index: 1101;
@@ -708,31 +708,31 @@
708
708
  pointer-events: none;
709
709
  }
710
710
  @media (prefers-reduced-motion: no-preference) {
711
- .oui-kform-issues-panel__container {
712
- animation: oui-fade-in var(--oui-animation-fade-duration) var(--oui-animation-fade-timing-function);
711
+ .o-ui-kform-issues-panel__container {
712
+ animation: o-ui-fade-in var(--o-ui-animation-fade-duration) var(--o-ui-animation-fade-timing-function);
713
713
  }
714
714
  }
715
715
  @media (min-width: 576px) {
716
- .oui-kform-issues-panel {
717
- width: calc(100% - var(--oui-space) * 4 * 2);
718
- padding: calc(var(--oui-space) * 3) calc(var(--oui-space) * 4);
716
+ .o-ui-kform-issues-panel {
717
+ width: calc(100% - var(--o-ui-space) * 4 * 2);
718
+ padding: calc(var(--o-ui-space) * 3) calc(var(--o-ui-space) * 4);
719
719
  }
720
- .oui-kform-issues-panel__container {
721
- padding-left: var(--oui-kform-left-sidebar-width);
720
+ .o-ui-kform-issues-panel__container {
721
+ padding-left: var(--o-ui-kform-left-sidebar-width);
722
722
  }
723
723
  }
724
- .oui-kform-issues-panel--messages {
724
+ .o-ui-kform-issues-panel--messages {
725
725
  min-height: 190px;
726
726
  max-height: 260px;
727
727
  }
728
- .oui-kform-issues-panel__header {
728
+ .o-ui-kform-issues-panel__header {
729
729
  display: block;
730
- padding: 0 calc(var(--oui-space) * 4) calc(var(--oui-space) * 2) !important;
730
+ padding: 0 calc(var(--o-ui-space) * 4) calc(var(--o-ui-space) * 2) !important;
731
731
  position: sticky;
732
732
  top: 0;
733
733
  z-index: 1100;
734
734
  }
735
- .oui-kform-issues-panel__header[data-stuck]::before {
735
+ .o-ui-kform-issues-panel__header[data-stuck]::before {
736
736
  content: "";
737
737
  pointer-events: none;
738
738
  position: absolute;
@@ -742,117 +742,117 @@
742
742
  bottom: -8px;
743
743
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent);
744
744
  }
745
- .oui-kform-issues-panel--summary .oui-kform-issues-panel__header {
745
+ .o-ui-kform-issues-panel--summary .o-ui-kform-issues-panel__header {
746
746
  padding-bottom: 0 !important;
747
747
  }
748
- .oui-kform-issues-panel__body {
749
- padding: 0 calc(var(--oui-space) * 4) calc(var(--oui-space) * 3) !important;
748
+ .o-ui-kform-issues-panel__body {
749
+ padding: 0 calc(var(--o-ui-space) * 4) calc(var(--o-ui-space) * 3) !important;
750
750
  }
751
- .oui-kform-issues-panel__loading-spinner, .oui-kform-issues-panel__icon {
751
+ .o-ui-kform-issues-panel__loading-spinner, .o-ui-kform-issues-panel__icon {
752
752
  display: inline-block;
753
753
  vertical-align: middle;
754
- margin: calc(var(--oui-space) * 5) calc(var(--oui-space) * 3) calc(var(--oui-space) * 5) 0;
754
+ margin: calc(var(--o-ui-space) * 5) calc(var(--o-ui-space) * 3) calc(var(--o-ui-space) * 5) 0;
755
755
  }
756
- .oui-kform-issues-panel__action:not(:first-child) {
757
- margin-left: var(--oui-space);
756
+ .o-ui-kform-issues-panel__action:not(:first-child) {
757
+ margin-left: var(--o-ui-space);
758
758
  }
759
- .oui-kform-issues-panel__title {
759
+ .o-ui-kform-issues-panel__title {
760
760
  display: inline-block;
761
761
  vertical-align: middle;
762
762
  font-size: 1rem !important;
763
763
  line-height: 1.5 !important;
764
764
  }
765
765
  @media (max-width: 575.98px) {
766
- .oui-kform-issues-panel__title {
766
+ .o-ui-kform-issues-panel__title {
767
767
  font-size: 0.875rem !important;
768
768
  line-height: !important;
769
769
  }
770
770
  }
771
- .oui-kform-issues-panel__breadcrumb-item:not(:last-child)::after {
771
+ .o-ui-kform-issues-panel__breadcrumb-item:not(:last-child)::after {
772
772
  content: "›";
773
- margin: 0 calc(var(--oui-space) * 1.5);
773
+ margin: 0 calc(var(--o-ui-space) * 1.5);
774
774
  }
775
- .oui-kform-issues-panel__controls {
775
+ .o-ui-kform-issues-panel__controls {
776
776
  float: right;
777
777
  display: flex;
778
778
  align-items: center;
779
- margin: calc(var(--oui-space) * 3.5) 0 calc(var(--oui-space) * 3.5) calc(var(--oui-space) * 4);
779
+ margin: calc(var(--o-ui-space) * 3.5) 0 calc(var(--o-ui-space) * 3.5) calc(var(--o-ui-space) * 4);
780
780
  }
781
- .oui-kform-issues-panel__validating-spinner {
782
- margin-right: calc(var(--oui-space) * 2);
781
+ .o-ui-kform-issues-panel__validating-spinner {
782
+ margin-right: calc(var(--o-ui-space) * 2);
783
783
  }
784
- .oui-kform-issues-panel__pagination {
784
+ .o-ui-kform-issues-panel__pagination {
785
785
  flex-shrink: 0;
786
786
  font-size: 0.75rem;
787
787
  line-height: 1.3333333333;
788
788
  font-weight: 700;
789
789
  text-align: right;
790
790
  }
791
- .oui-kform-issues-panel__pagination, .oui-kform-issues-panel__focus, .oui-kform-issues-panel__last {
792
- margin-right: calc(var(--oui-space) * 3);
791
+ .o-ui-kform-issues-panel__pagination, .o-ui-kform-issues-panel__focus, .o-ui-kform-issues-panel__last {
792
+ margin-right: calc(var(--o-ui-space) * 3);
793
793
  }
794
- .oui-kform-issues-panel__close-button {
794
+ .o-ui-kform-issues-panel__close-button {
795
795
  margin-left: auto;
796
796
  }
797
- .oui-kform-issues-panel__issues-list-title {
798
- margin: 0 0 calc(var(--oui-space) * 2);
799
- font-size: var(--oui-font-size-sm) !important;
800
- line-height: var(--oui-line-height-sm) !important;
797
+ .o-ui-kform-issues-panel__issues-list-title {
798
+ margin: 0 0 calc(var(--o-ui-space) * 2);
799
+ font-size: var(--o-ui-font-size-sm) !important;
800
+ line-height: var(--o-ui-line-height-sm) !important;
801
801
  }
802
- .oui-kform-issues-panel__issues-list {
803
- margin: 0 0 calc(var(--oui-space) * 4);
804
- padding-left: calc(var(--oui-space) * 4);
802
+ .o-ui-kform-issues-panel__issues-list {
803
+ margin: 0 0 calc(var(--o-ui-space) * 4);
804
+ padding-left: calc(var(--o-ui-space) * 4);
805
805
  }
806
- .oui-kform-issues-panel__issue, .oui-kform-issues-panel__resolved-message {
807
- font-size: var(--oui-font-size-xs);
808
- line-height: var(--oui-line-height-xs);
806
+ .o-ui-kform-issues-panel__issue, .o-ui-kform-issues-panel__resolved-message {
807
+ font-size: var(--o-ui-font-size-xs);
808
+ line-height: var(--o-ui-line-height-xs);
809
809
  }
810
- .oui-kform-issues-panel__issue:not(:first-child) {
811
- margin-top: calc(var(--oui-space) * 2);
810
+ .o-ui-kform-issues-panel__issue:not(:first-child) {
811
+ margin-top: calc(var(--o-ui-space) * 2);
812
812
  }
813
- .oui-kform-issues-panel__issue-code {
813
+ .o-ui-kform-issues-panel__issue-code {
814
814
  font-style: italic;
815
815
  opacity: 0.9;
816
816
  }
817
- .oui-kform-issues-panel__issue-code::before {
817
+ .o-ui-kform-issues-panel__issue-code::before {
818
818
  content: " ";
819
819
  }
820
820
 
821
- .oui-kform-table-control > .oui-kform-table-control__add-row-trigger {
821
+ .o-ui-kform-table-control > .o-ui-kform-table-control__add-row-trigger {
822
822
  float: right;
823
- margin-bottom: calc(var(--oui-space) * 2);
824
- margin-left: calc(var(--oui-space) * 2);
823
+ margin-bottom: calc(var(--o-ui-space) * 2);
824
+ margin-left: calc(var(--o-ui-space) * 2);
825
825
  }
826
- .oui-kform-table-control > .oui-kform-table-control__add-row-trigger + .oui-kform-table-control__content-container {
826
+ .o-ui-kform-table-control > .o-ui-kform-table-control__add-row-trigger + .o-ui-kform-table-control__content-container {
827
827
  margin-top: 0;
828
828
  }
829
- .oui-kform-table-control > .oui-kform-table-control__content-container ~ .oui-kform-table-control__add-row-trigger {
829
+ .o-ui-kform-table-control > .o-ui-kform-table-control__content-container ~ .o-ui-kform-table-control__add-row-trigger {
830
830
  margin-bottom: 0;
831
831
  }
832
832
 
833
- .oui-kform-top-bar {
833
+ .o-ui-kform-top-bar {
834
834
  display: flex;
835
835
  align-items: flex-end;
836
836
  justify-content: space-between;
837
837
  position: sticky;
838
838
  top: 0;
839
839
  z-index: 1103;
840
- padding: var(--oui-space) var(--oui-space) 0;
840
+ padding: var(--o-ui-space) var(--o-ui-space) 0;
841
841
  border-bottom: 2px solid #3e63dd;
842
- background-color: var(--oui-background-color);
842
+ background-color: var(--o-ui-background-color);
843
843
  }
844
- .oui-kform-top-bar .oui-kform-annexes__menu-container, .oui-kform-top-bar .oui-kform-annexes__tab-list-root {
844
+ .o-ui-kform-top-bar .o-ui-kform-annexes__menu-container, .o-ui-kform-top-bar .o-ui-kform-annexes__tab-list-root {
845
845
  box-shadow: none;
846
846
  margin-bottom: 0;
847
847
  }
848
- .oui-kform-top-bar .oui-kform-annexes__tab:focus-visible:not(:disabled):not([data-disabled]) {
848
+ .o-ui-kform-top-bar .o-ui-kform-annexes__tab:focus-visible:not(:disabled):not([data-disabled]) {
849
849
  box-shadow: inset -1px 0 0 0 #1c2024, inset 0 1px 0 0 #1c2024, inset 1px 0 0 0 #1c2024, inset 0 -2px 0 #1c2024;
850
850
  }
851
- .oui-kform-top-bar .oui-kform-annexes__tab:focus-visible:not(:disabled):not([data-disabled])[data-status] {
851
+ .o-ui-kform-top-bar .o-ui-kform-annexes__tab:focus-visible:not(:disabled):not([data-disabled])[data-status] {
852
852
  box-shadow: inset -1px 0 0 0 #1c2024, inset 1px 0 0 0 #1c2024, inset 0 -2px 0 #1c2024;
853
853
  }
854
- .oui-kform-top-bar__actions {
855
- margin: 0 0 var(--oui-space) auto;
854
+ .o-ui-kform-top-bar__actions {
855
+ margin: 0 0 var(--o-ui-space) auto;
856
856
  }
857
857
 
858
858
  /*# sourceMappingURL=ostack-ui-kform.css.map */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ostack.tech/ui-kform",
3
3
  "description": "Integration of ostack/UI with ostack/KForm.",
4
- "version": "0.1.0",
4
+ "version": "0.1.2",
5
5
  "homepage": "https://ui.ostack.tech/",
6
6
  "author": {
7
7
  "name": "Opensoft",
@@ -32,15 +32,15 @@
32
32
  "./package.json": "./package.json"
33
33
  },
34
34
  "files": [
35
- "dist",
36
- "scss"
35
+ "dist/",
36
+ "scss/"
37
37
  ],
38
38
  "scripts": {
39
- "clean": "rimraf dist scss",
39
+ "clean": "rimraf dist/ scss/",
40
40
  "build": "npm run build:js && npm run build:css",
41
41
  "build:js": "vite build && tsc -b tsconfig.build.json",
42
- "build:css": "npm run copy-scss && sass -I ../../node_modules scss/index.scss dist/ostack-ui-kform.css",
43
- "copy-scss": "cpy 'src/**/*.scss' '!src/**/*.stories.scss' scss"
42
+ "build:css": "npm run copy-scss && sass -I ../../node_modules/ scss/index.scss dist/ostack-ui-kform.css",
43
+ "copy-scss": "cpy 'src/**/*.scss' '!src/**/*.stories.scss' scss/"
44
44
  },
45
45
  "dependencies": {
46
46
  "browser-fs-access": "^0.38.0"
@@ -51,7 +51,7 @@
51
51
  "@fortawesome/free-solid-svg-icons": "^6.2.0 || ^7.0.0",
52
52
  "@ostack.tech/kform": "~0.31.0",
53
53
  "@ostack.tech/kform-react": "~0.31.0",
54
- "@ostack.tech/ui": "~0.1.0",
54
+ "@ostack.tech/ui": "~0.1.2",
55
55
  "@types/react": "^18.0.0 || ^19.0.0",
56
56
  "@types/react-dom": "^18.0.0 || ^19.0.0",
57
57
  "date-fns": "^4.1.0",