@threadlabs/looma 0.22.3 → 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-tooltip/ui-tooltip.html +27 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-tooltip.css +26 -0
- package/vanilla/UiTooltip.js +13 -1
- package/vue/UiTooltip.d.ts +3 -1
- package/vue/UiTooltip.vue +27 -1
- package/vue/chunks/UiTooltip.js +3 -2
- package/vue/components.css +40 -19
- package/vue/editor/index.js +42 -20
|
@@ -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));
|