@threadlabs/looma 0.22.2 → 0.22.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-editor-mention-menu/ui-editor-mention-menu.html +7 -0
- package/components/ui-editor-mention-menu-item/ui-editor-mention-menu-item.html +13 -0
- package/components/ui-tooltip/ui-tooltip.html +27 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-editor-mention-menu-item.css +19 -0
- package/styles/ui-editor-mention-menu.css +11 -1
- package/styles/ui-tooltip.css +26 -0
- package/vanilla/UiTooltip.js +13 -1
- package/vue/UiEditorMentionMenu.vue +7 -0
- package/vue/UiEditorMentionMenuItem.vue +13 -0
- package/vue/UiTooltip.d.ts +3 -1
- package/vue/UiTooltip.vue +27 -1
- package/vue/chunks/UiEditorMentionMenu.js +1 -1
- package/vue/chunks/UiEditorMentionMenuItem.js +1 -1
- package/vue/chunks/UiTooltip.js +3 -2
- package/vue/components.css +89 -48
- package/vue/editor/index.js +42 -20
|
@@ -127,6 +127,13 @@
|
|
|
127
127
|
background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
+
/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
|
|
131
|
+
the surface and a fine accent ring, so the initials stay visible. */
|
|
132
|
+
.item.active .avatar {
|
|
133
|
+
background: var(--ui-surface);
|
|
134
|
+
box-shadow: inset 0 0 0 1px var(--ui-accent-soft, var(--ui-accent-subtle));
|
|
135
|
+
}
|
|
136
|
+
|
|
130
137
|
.avatar {
|
|
131
138
|
display: inline-flex;
|
|
132
139
|
align-items: center;
|
|
@@ -23,6 +23,19 @@
|
|
|
23
23
|
background: var(--ui-accent-subtle);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
/* The highlight and the initials circle share a tint; on the highlighted row the circle takes
|
|
27
|
+
the surface and a fine accent ring, so the initials stay visible. */
|
|
28
|
+
:host[aria-selected="true"] .avatar {
|
|
29
|
+
background: var(--ui-surface);
|
|
30
|
+
box-shadow: inset 0 0 0 1px var(--ui-accent-soft);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* A slotted Avatar (a person's photo) is its own circle. */
|
|
34
|
+
:host .avatar:has(> [data-component~="ui-avatar"]) {
|
|
35
|
+
background: none;
|
|
36
|
+
box-shadow: none;
|
|
37
|
+
}
|
|
38
|
+
|
|
26
39
|
.avatar {
|
|
27
40
|
display: inline-flex;
|
|
28
41
|
align-items: center;
|
|
@@ -32,7 +32,10 @@
|
|
|
32
32
|
<prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
|
|
33
33
|
</event>
|
|
34
34
|
</defs>
|
|
35
|
-
<span role="tooltip" from:hidden="not internalOpen"><div class="surface"
|
|
35
|
+
<span role="tooltip" from:hidden="not internalOpen"><div class="surface">
|
|
36
|
+
<slot></slot>
|
|
37
|
+
<span class="shortcut"><slot name="shortcut"></slot></span>
|
|
38
|
+
</div></span>
|
|
36
39
|
<style>
|
|
37
40
|
/* This component's hooks style the element they are set on, and never a nested one. */
|
|
38
41
|
@property --ui-tooltip-arrow-size {
|
|
@@ -125,6 +128,29 @@
|
|
|
125
128
|
box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
|
|
126
129
|
}
|
|
127
130
|
|
|
131
|
+
/* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
|
|
132
|
+
it. The label stays first in the description, so a screen reader hears the name, then the keys. */
|
|
133
|
+
.shortcut {
|
|
134
|
+
display: inline-flex;
|
|
135
|
+
align-items: center;
|
|
136
|
+
margin-inline-start: var(--ui-space-2);
|
|
137
|
+
padding-inline-start: var(--ui-space-2);
|
|
138
|
+
border-inline-start: 1px solid color-mix(in oklab, currentColor 28%, transparent);
|
|
139
|
+
color: color-mix(in oklab, currentColor 72%, transparent);
|
|
140
|
+
font-size: var(--ui-font-size-xs);
|
|
141
|
+
font-weight: var(--ui-font-normal);
|
|
142
|
+
white-space: nowrap;
|
|
143
|
+
vertical-align: baseline;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.shortcut:empty {
|
|
147
|
+
display: none;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.shortcut kbd {
|
|
151
|
+
font: inherit;
|
|
152
|
+
}
|
|
153
|
+
|
|
128
154
|
:host-state([inverse]) .surface {
|
|
129
155
|
--_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
|
|
130
156
|
background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
|