@floegence/floe-webapp-core 0.50.4 → 0.50.6
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.
- package/dist/floe.css +1 -38
- package/dist/input-focus.css +37 -0
- package/dist/styles.css +1 -1
- package/package.json +3 -2
package/dist/floe.css
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import './input-focus.css';
|
|
1
2
|
/*
|
|
2
3
|
* Floe design tokens + base styles + custom utilities.
|
|
3
4
|
*
|
|
@@ -431,44 +432,6 @@
|
|
|
431
432
|
}
|
|
432
433
|
}
|
|
433
434
|
|
|
434
|
-
/* A field has one visible border. Compound controls mark the element that owns it.
|
|
435
|
-
* This utility changes color only; it never replaces an existing decorative shadow.
|
|
436
|
-
*/
|
|
437
|
-
@layer utilities {
|
|
438
|
-
:is(
|
|
439
|
-
input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
|
|
440
|
-
textarea, select, [data-floe-input-surface]
|
|
441
|
-
) {
|
|
442
|
-
outline: none;
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
:is(
|
|
446
|
-
input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
|
|
447
|
-
textarea, select, [data-floe-input-surface]
|
|
448
|
-
):focus:not(:disabled):not([aria-disabled='true']):not([data-floe-input-surface] :is(input, textarea, select)),
|
|
449
|
-
[data-floe-input-surface]:focus-within:not(:disabled):not([aria-disabled='true']) {
|
|
450
|
-
border-color: var(--floe-input-focus-color, var(--ring));
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
:is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
|
|
454
|
-
--floe-input-focus-color: var(--error);
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
/* Internal buttons use a local fill to identify keyboard focus without a second frame. */
|
|
458
|
-
[data-floe-input-surface] button:focus-visible {
|
|
459
|
-
outline: none;
|
|
460
|
-
background-color: var(--accent);
|
|
461
|
-
color: var(--accent-foreground);
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
@media (forced-colors: active) {
|
|
465
|
-
:is(input, textarea, select, [data-floe-input-surface]),
|
|
466
|
-
:is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
|
|
467
|
-
--floe-input-focus-color: Highlight;
|
|
468
|
-
}
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
|
|
472
435
|
/* Animation utilities */
|
|
473
436
|
@layer utilities {
|
|
474
437
|
.floe-floating-presence {
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/* A field has one visible border. Compound controls mark the element that owns it.
|
|
2
|
+
* Keep the contract unlayered so host base borders cannot silently hide focus.
|
|
3
|
+
* It changes color only and never replaces an existing decorative shadow.
|
|
4
|
+
*/
|
|
5
|
+
:is(
|
|
6
|
+
input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
|
|
7
|
+
textarea, select, [data-floe-input-surface]
|
|
8
|
+
) {
|
|
9
|
+
outline: none;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:is(
|
|
13
|
+
input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='button'], [type='submit'], [type='reset'], [type='image']),
|
|
14
|
+
textarea, select, [data-floe-input-surface]
|
|
15
|
+
):focus:not(:disabled):not([aria-disabled='true']):not([data-floe-input-surface] :is(input, textarea, select)),
|
|
16
|
+
[data-floe-input-surface]:focus-within:not(:disabled):not([aria-disabled='true']) {
|
|
17
|
+
border-color: var(--floe-input-focus-color, var(--ring));
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
|
|
21
|
+
--floe-input-focus-color: var(--error);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Internal buttons use a local fill to identify keyboard focus without a second frame. */
|
|
25
|
+
[data-floe-input-surface] button:focus-visible {
|
|
26
|
+
outline: none;
|
|
27
|
+
background-color: var(--accent);
|
|
28
|
+
color: var(--accent-foreground);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@media (forced-colors: active) {
|
|
32
|
+
:is(input, textarea, select, [data-floe-input-surface]),
|
|
33
|
+
:is(input, textarea, select, [data-floe-input-surface])[aria-invalid='true'] {
|
|
34
|
+
--floe-input-focus-color: Highlight;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|