@threadlabs/looma 0.11.3 → 0.11.4
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/components/ui-callout/ui-callout.html +8 -0
- package/components/ui-form-field/ui-form-field.html +2 -1
- package/components/ui-input/ui-input.html +5 -3
- package/components/ui-input-group/ui-input-group.html +2 -0
- package/components/ui-text/ui-text.html +9 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-callout.css +10 -0
- package/styles/ui-form-field.css +4 -1
- package/styles/ui-input-group.css +2 -0
- package/styles/ui-input.css +5 -3
- package/styles/ui-text.css +12 -0
- package/vue/UiCallout.vue +8 -0
- package/vue/UiFormField.vue +2 -1
- package/vue/UiInput.vue +5 -3
- package/vue/UiInputGroup.vue +2 -0
- package/vue/UiText.vue +9 -0
- package/vue/chunks/UiCallout.js +2 -2
- package/vue/chunks/UiFormField.js +1 -1
- package/vue/chunks/UiInput.js +1 -1
- package/vue/chunks/UiInputGroup.js +1 -1
- package/vue/chunks/UiText.js +2 -2
- package/vue/components.css +82 -59
|
@@ -98,6 +98,14 @@
|
|
|
98
98
|
--_callout-icon: var(--ui-danger-solid);
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
+
/* A link in the callout's text is underlined, so it reads as a link by more than colour. */
|
|
102
|
+
.content :slotted(a) {
|
|
103
|
+
color: var(--ui-accent-active);
|
|
104
|
+
text-decoration: underline;
|
|
105
|
+
text-decoration-thickness: 0.06em;
|
|
106
|
+
text-underline-offset: 0.18em;
|
|
107
|
+
}
|
|
108
|
+
|
|
101
109
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
102
110
|
:host[hidden] {
|
|
103
111
|
display: none;
|
|
@@ -48,9 +48,10 @@
|
|
|
48
48
|
min-block-size: var(--ui-form-field-help-min-block-size, 0);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
/* An error reads in the danger colour, the one the invalid control's border takes. */
|
|
51
52
|
.error,
|
|
52
53
|
:slotted([role="alert"]) {
|
|
53
|
-
color: var(--ui-
|
|
54
|
+
color: var(--ui-danger);
|
|
54
55
|
font-size: var(--ui-font-size-sm);
|
|
55
56
|
}
|
|
56
57
|
|
|
@@ -56,13 +56,15 @@
|
|
|
56
56
|
/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
|
|
57
57
|
:host[aria-invalid="true"],
|
|
58
58
|
:host:user-invalid {
|
|
59
|
-
border-color: var(--ui-danger-solid);
|
|
59
|
+
border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
:host:is([aria-invalid="true"], :user-invalid):focus-visible {
|
|
63
|
-
box-shadow:
|
|
63
|
+
box-shadow: var(
|
|
64
|
+
--ui-input-invalid-focus-shadow,
|
|
64
65
|
var(--ui-control-inset),
|
|
65
|
-
0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
|
|
66
|
+
0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
|
|
67
|
+
);
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
:host:disabled {
|
|
@@ -18,6 +18,8 @@
|
|
|
18
18
|
--ui-input-border: transparent;
|
|
19
19
|
--ui-input-border-hover: transparent;
|
|
20
20
|
--ui-input-focus-border: transparent;
|
|
21
|
+
--ui-input-invalid-border: transparent;
|
|
22
|
+
--ui-input-invalid-focus-shadow: none;
|
|
21
23
|
--ui-input-shadow: none;
|
|
22
24
|
--ui-input-focus-shadow: none;
|
|
23
25
|
--ui-input-radius: 0;
|
|
@@ -78,6 +78,15 @@
|
|
|
78
78
|
font-family: var(--ui-font-family-mono);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
+
/* A link in running text is underlined, so it stands apart from the words around it by more than
|
|
82
|
+
colour. */
|
|
83
|
+
:host :slotted(a) {
|
|
84
|
+
color: var(--ui-accent-active);
|
|
85
|
+
text-decoration: underline;
|
|
86
|
+
text-decoration-thickness: 0.06em;
|
|
87
|
+
text-underline-offset: 0.18em;
|
|
88
|
+
}
|
|
89
|
+
|
|
81
90
|
:host-state([truncate]) {
|
|
82
91
|
overflow: hidden;
|
|
83
92
|
text-overflow: ellipsis;
|