@threadlabs/looma 0.23.0 → 0.23.2
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-scroll-area/ui-scroll-area.html +3 -2
- package/components/ui-search-result-row/ui-search-result-row.html +11 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-scroll-area.css +1 -1
- package/styles/ui-search-result-row.css +13 -0
- package/vue/UiScrollArea.vue +2 -2
- package/vue/UiSearchResultRow.vue +12 -0
- package/vue/chunks/UiScrollArea.js +2 -2
- package/vue/chunks/UiSearchResultRow.js +1 -1
- package/vue/components.css +39 -28
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<template component="ui-scroll-area" controller="./ui-scroll-area.js">
|
|
2
2
|
<defs>
|
|
3
3
|
<prop name="size" type="keyword" values="content, sm, md, lg" default="content"
|
|
4
|
-
>Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows, md is 20rem, and lg is
|
|
4
|
+
>Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows before the overflow fade, md is 20rem, and lg is
|
|
5
|
+
30rem.</prop>
|
|
5
6
|
<prop name="orientation" type="keyword" values="vertical, horizontal" default="vertical"
|
|
6
7
|
>The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical
|
|
7
8
|
overflow.</prop>
|
|
@@ -46,7 +47,7 @@
|
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
:host-state([size="sm"]) {
|
|
49
|
-
max-block-size: 9.375rem;
|
|
50
|
+
max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
|
|
50
51
|
}
|
|
51
52
|
:host-state([size="md"]) {
|
|
52
53
|
max-block-size: 20rem;
|
|
@@ -80,6 +80,17 @@
|
|
|
80
80
|
font-family: var(--ui-font-family-sans, sans-serif);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
+
/* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
|
|
84
|
+
:host-state([density="compact"]) .title {
|
|
85
|
+
font-size: var(--ui-font-size-sm);
|
|
86
|
+
line-height: var(--ui-line-height);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:host-state([density="compact"]) .meta {
|
|
90
|
+
font-size: var(--ui-font-size-xs);
|
|
91
|
+
line-height: var(--ui-line-height);
|
|
92
|
+
}
|
|
93
|
+
|
|
83
94
|
:host:hover:enabled {
|
|
84
95
|
background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
|
|
85
96
|
}
|