@threadlabs/looma 0.37.5 → 0.37.6
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-skeleton/ui-skeleton.html +91 -0
- package/dist/index.js +1 -1
- package/docs/catalog.json +169 -1
- package/package.json +1 -1
- package/styles/ui-skeleton.css +91 -0
- package/vanilla/UiSkeleton.d.ts +26 -0
- package/vanilla/UiSkeleton.js +42 -0
- package/vanilla/index.js +1 -0
- package/vue/UiSkeleton.d.ts +37 -0
- package/vue/UiSkeleton.js +2 -0
- package/vue/UiSkeleton.vue +235 -0
- package/vue/chunks/UiSkeleton.js +151 -0
- package/vue/components.css +71 -0
- package/vue/index.d.ts +1 -0
- package/vue/index.js +2 -1
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<template component="ui-skeleton">
|
|
2
|
+
<defs>
|
|
3
|
+
<prop name="shape" type="keyword" values="text, circle, rectangle" default="text"
|
|
4
|
+
>The content's silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media
|
|
5
|
+
area.</prop>
|
|
6
|
+
<prop name="width" type="string" default=""
|
|
7
|
+
>Inline size as a CSS length or percentage, constrained to the container. Empty fills the available width for text and rectangles, or matches a medium
|
|
8
|
+
Avatar's outer size for circles.</prop>
|
|
9
|
+
<prop name="height" type="string" default=""
|
|
10
|
+
>Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.</prop>
|
|
11
|
+
<prop name="animated" type="boolean" default="false"
|
|
12
|
+
>Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.</prop>
|
|
13
|
+
</defs>
|
|
14
|
+
<span aria-hidden="true" style:--ui-skeleton-width="$width" style:--ui-skeleton-height="$height"></span>
|
|
15
|
+
<style>
|
|
16
|
+
/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
|
|
17
|
+
@property --ui-skeleton-width {
|
|
18
|
+
syntax: "*";
|
|
19
|
+
inherits: false;
|
|
20
|
+
}
|
|
21
|
+
@property --ui-skeleton-height {
|
|
22
|
+
syntax: "*";
|
|
23
|
+
inherits: false;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:host {
|
|
27
|
+
display: block !important;
|
|
28
|
+
position: relative;
|
|
29
|
+
box-sizing: border-box !important;
|
|
30
|
+
flex: none;
|
|
31
|
+
min-inline-size: 0;
|
|
32
|
+
max-inline-size: 100%;
|
|
33
|
+
inline-size: var(--ui-skeleton-width, 100%);
|
|
34
|
+
block-size: var(--ui-skeleton-height, 1lh);
|
|
35
|
+
margin: 0 !important;
|
|
36
|
+
font: inherit;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host::before {
|
|
40
|
+
content: "";
|
|
41
|
+
position: absolute;
|
|
42
|
+
inset: 0;
|
|
43
|
+
border-radius: var(--ui-radius-sm);
|
|
44
|
+
background: color-mix(in srgb, var(--ui-text-primary) 16%, transparent);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:host([shape="text"])::before {
|
|
48
|
+
inset-block: 22%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
:host([shape="circle"]) {
|
|
52
|
+
inline-size: var(--ui-skeleton-width, calc(2.5rem + 2 * var(--ui-border-width)));
|
|
53
|
+
block-size: var(--ui-skeleton-height, auto);
|
|
54
|
+
aspect-ratio: 1;
|
|
55
|
+
}
|
|
56
|
+
:host([shape="circle"])::before {
|
|
57
|
+
border-radius: var(--ui-radius-round);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host([shape="rectangle"]) {
|
|
61
|
+
block-size: var(--ui-skeleton-height, 8rem);
|
|
62
|
+
}
|
|
63
|
+
:host([shape="rectangle"])::before {
|
|
64
|
+
border-radius: var(--ui-radius-md);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
:host([animated])::before {
|
|
68
|
+
animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
|
|
69
|
+
}
|
|
70
|
+
@keyframes ui-skeleton-pulse {
|
|
71
|
+
50% {
|
|
72
|
+
opacity: 0.45;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
@media (prefers-reduced-motion: reduce) {
|
|
76
|
+
:host([animated])::before {
|
|
77
|
+
animation: none;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
@media (forced-colors: active) {
|
|
81
|
+
:host::before {
|
|
82
|
+
background: CanvasText;
|
|
83
|
+
opacity: 0.2;
|
|
84
|
+
animation: none;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
:host[hidden] {
|
|
88
|
+
display: none !important;
|
|
89
|
+
}
|
|
90
|
+
</style>
|
|
91
|
+
</template>
|