@threadlabs/looma 0.5.0 → 0.5.1
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/shared/input-modality.d.ts +8 -0
- package/components/shared/input-modality.js +2 -0
- package/components/ui-button/ui-button.html +29 -1
- package/components/ui-icon-button/ui-icon-button.html +14 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-button.css +31 -1
- package/styles/ui-icon-button.css +16 -1
- package/vue/UiButton.vue +29 -1
- package/vue/UiIconButton.vue +14 -1
- package/vue/chunks/UiButton.js +1 -1
- package/vue/chunks/UiIconButton.js +1 -1
- package/vue/components.css +88 -51
- package/vue/index.d.ts +1 -0
- package/vue/index.js +2 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Marks the document `data-ui-input-modality="touch"` once the user actually touches it, rather than
|
|
3
|
+
* guessing from capability media queries: hybrid devices keep compact pointer affordances until then.
|
|
4
|
+
* Idempotent per document; touch is sticky once observed.
|
|
5
|
+
*
|
|
6
|
+
* @param {Document} document
|
|
7
|
+
*/
|
|
8
|
+
export function trackInputModality(document: Document): void;
|
|
@@ -4,6 +4,8 @@ const initialized = new WeakSet();
|
|
|
4
4
|
* Marks the document `data-ui-input-modality="touch"` once the user actually touches it, rather than
|
|
5
5
|
* guessing from capability media queries: hybrid devices keep compact pointer affordances until then.
|
|
6
6
|
* Idempotent per document; touch is sticky once observed.
|
|
7
|
+
*
|
|
8
|
+
* @param {Document} document
|
|
7
9
|
*/
|
|
8
10
|
export function trackInputModality(document) {
|
|
9
11
|
if (initialized.has(document)) return;
|
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
border-color: transparent;
|
|
115
115
|
background: transparent;
|
|
116
116
|
box-shadow: none;
|
|
117
|
+
color: var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary)));
|
|
117
118
|
}
|
|
118
119
|
|
|
119
120
|
/* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
|
|
@@ -141,9 +142,31 @@
|
|
|
141
142
|
var(--ui-focus-halo);
|
|
142
143
|
}
|
|
143
144
|
|
|
145
|
+
/* Disabled colours fall back to each variant's own; ghost and link take only the text colour. */
|
|
144
146
|
:host:disabled {
|
|
145
|
-
opacity: 0.6;
|
|
147
|
+
opacity: var(--ui-button-disabled-opacity, 0.6);
|
|
146
148
|
cursor: not-allowed;
|
|
149
|
+
border-color: var(--ui-button-disabled-border, var(--ui-button-border, var(--ui-border-strong)));
|
|
150
|
+
background-color: var(--ui-button-disabled-surface, var(--ui-button-surface, var(--ui-surface-elevated)));
|
|
151
|
+
color: var(--ui-button-disabled-text, var(--ui-button-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
:host-state([variant="solid"]):disabled {
|
|
155
|
+
border-color: var(--ui-button-disabled-border, var(--ui-action-primary-surface, var(--ui-accent-solid)));
|
|
156
|
+
background-color: var(--ui-button-disabled-surface, var(--ui-action-primary-surface, var(--ui-accent-solid)));
|
|
157
|
+
color: var(--ui-button-disabled-text, var(--ui-action-primary-text, var(--ui-text-on-accent)));
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
:host-state([variant="danger"]):disabled {
|
|
161
|
+
border-color: var(--ui-button-disabled-border, var(--ui-danger-solid));
|
|
162
|
+
background-color: var(--ui-button-disabled-surface, var(--ui-danger-solid));
|
|
163
|
+
color: var(--ui-button-disabled-text, var(--ui-text-on-accent));
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
:host-state([variant="ghost"]):disabled {
|
|
167
|
+
border-color: transparent;
|
|
168
|
+
background-color: transparent;
|
|
169
|
+
color: var(--ui-button-disabled-text, var(--ui-button-ghost-text, var(--ui-action-secondary-text, var(--ui-text-primary))));
|
|
147
170
|
}
|
|
148
171
|
|
|
149
172
|
@media (pointer: coarse) {
|
|
@@ -183,6 +206,11 @@
|
|
|
183
206
|
transform: none;
|
|
184
207
|
}
|
|
185
208
|
|
|
209
|
+
:host-state([variant="link"]):disabled {
|
|
210
|
+
background: none;
|
|
211
|
+
color: var(--ui-button-disabled-text, var(--ui-button-link-color, var(--ui-text-secondary)));
|
|
212
|
+
}
|
|
213
|
+
|
|
186
214
|
:host-state([variant="link"]):focus-visible {
|
|
187
215
|
box-shadow: none;
|
|
188
216
|
/* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
|
|
@@ -135,11 +135,24 @@
|
|
|
135
135
|
box-shadow: var(--ui-focus-halo);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
/* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
|
|
138
139
|
:host:disabled {
|
|
139
|
-
opacity: 0.6;
|
|
140
|
+
opacity: var(--ui-icon-button-disabled-opacity, 0.6);
|
|
141
|
+
color: var(--ui-icon-button-disabled-color, inherit);
|
|
140
142
|
cursor: not-allowed;
|
|
141
143
|
}
|
|
142
144
|
|
|
145
|
+
:host-state([variant="outline"]):disabled {
|
|
146
|
+
border-color: var(--ui-icon-button-disabled-border, var(--ui-icon-button-border, var(--ui-border-default)));
|
|
147
|
+
background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-outline-bg, var(--ui-surface-default)));
|
|
148
|
+
color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-outline-color, var(--ui-text-primary)));
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
:host-state([variant="solid"]):disabled {
|
|
152
|
+
background-color: var(--ui-icon-button-disabled-bg, var(--ui-icon-button-solid-bg, var(--ui-accent-solid)));
|
|
153
|
+
color: var(--ui-icon-button-disabled-color, var(--ui-icon-button-solid-color, var(--ui-text-on-accent)));
|
|
154
|
+
}
|
|
155
|
+
|
|
143
156
|
:host {
|
|
144
157
|
--_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
|
|
145
158
|
}
|