@threadlabs/looma 0.26.5 → 0.26.7
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-list-item/ui-list-item.html +9 -6
- package/components/ui-nav-item/ui-nav-item.html +5 -0
- package/components/ui-tree-item/ui-tree-item.html +3 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-list-item.css +11 -6
- package/styles/ui-nav-item.css +7 -0
- package/styles/ui-tree-item.css +3 -0
- package/tokens.css +1 -0
- package/vue/UiListItem.vue +9 -6
- package/vue/UiNavItem.vue +5 -0
- package/vue/UiTreeItem.vue +3 -0
- package/vue/chunks/UiListItem.js +1 -1
- package/vue/chunks/UiNavItem.js +1 -1
- package/vue/chunks/UiTreeItem.js +1 -1
- package/vue/components.css +175 -163
- package/vue/editor/LoomaEditor.d.ts +38 -0
- package/vue/editor/index.d.ts +1 -1
- package/vue/editor/index.js +83 -10
|
@@ -80,23 +80,26 @@
|
|
|
80
80
|
background: var(--ui-surface-raised);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
:host:where(:has(.title a[href])):hover
|
|
83
|
+
:host:where(:has(.title a[href])):hover,
|
|
84
|
+
:host([highlighted]),
|
|
85
|
+
:host([current]) {
|
|
84
86
|
background: var(--ui-selection-surface);
|
|
87
|
+
box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
|
|
85
88
|
}
|
|
86
89
|
|
|
87
90
|
:host([variant="card"]):where(:has(.title a[href])):hover {
|
|
88
91
|
border-color: var(--ui-border-strong);
|
|
89
92
|
}
|
|
90
93
|
|
|
91
|
-
:host([highlighted]) {
|
|
92
|
-
background: var(--ui-selection-surface);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
94
|
:host([current]) {
|
|
96
|
-
background: var(--ui-selection-surface);
|
|
97
95
|
color: var(--ui-selection-text);
|
|
98
96
|
}
|
|
99
97
|
|
|
98
|
+
/* Framed cards already have their own edge; the stronger focus ring stays separate. */
|
|
99
|
+
:host([variant="card"]) {
|
|
100
|
+
box-shadow: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
100
103
|
:host:has(.title a[href]:focus-visible) {
|
|
101
104
|
box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
|
|
102
105
|
}
|
|
@@ -113,6 +113,11 @@
|
|
|
113
113
|
color: var(--ui-selection-text);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
/* A complete inset edge separates pale fills without changing rail geometry. */
|
|
117
|
+
:host([variant="surface"]):is(:hover, [aria-current]) {
|
|
118
|
+
box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
|
|
119
|
+
}
|
|
120
|
+
|
|
116
121
|
:host([variant="line"]) {
|
|
117
122
|
border-radius: 0;
|
|
118
123
|
}
|
|
@@ -179,12 +179,14 @@
|
|
|
179
179
|
.row:focus-within {
|
|
180
180
|
color: var(--ui-text-primary);
|
|
181
181
|
background: var(--ui-surface-muted);
|
|
182
|
+
box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
|
|
182
183
|
}
|
|
183
184
|
|
|
184
185
|
/* Selection is the same surface recipe as destination and choice rows. */
|
|
185
186
|
:host([selected]) > .row {
|
|
186
187
|
color: var(--ui-selection-text);
|
|
187
188
|
background: var(--ui-selection-surface);
|
|
189
|
+
box-shadow: inset 0 0 0 var(--ui-border-width) var(--ui-selection-border);
|
|
188
190
|
}
|
|
189
191
|
:host([selected]):not([aria-disabled="true"]) > .row > .leading {
|
|
190
192
|
color: var(--ui-selection-text);
|
|
@@ -193,6 +195,7 @@
|
|
|
193
195
|
:host([disabled]) .row {
|
|
194
196
|
color: var(--ui-disabled-text);
|
|
195
197
|
background: var(--ui-disabled-surface);
|
|
198
|
+
box-shadow: none;
|
|
196
199
|
}
|
|
197
200
|
|
|
198
201
|
:host[data-dragging]:not([data-move-source]) .row {
|