@threadlabs/looma 0.21.2 → 0.21.3
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-avatar/ui-avatar.html +10 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-avatar.css +7 -0
- package/vanilla/UiAvatar.d.ts +1 -1
- package/vanilla/UiAvatar.js +1 -1
- package/vue/UiAvatar.d.ts +3 -3
- package/vue/UiAvatar.vue +11 -4
- package/vue/UiSwitcher.d.ts +1 -1
- package/vue/UiText.d.ts +1 -1
- package/vue/chunks/UiAvatar.js +6 -2
- package/vue/components.css +16 -10
|
@@ -13,8 +13,9 @@
|
|
|
13
13
|
<prop name="fallback" type="string" default=""
|
|
14
14
|
>Text shown instead of the initials derived from name or alt, whenever there is no image. It is uppercased; keep it to a couple of characters, because the
|
|
15
15
|
circle clips anything wider.</prop>
|
|
16
|
-
<prop name="size" type="keyword" values="sm, md" default="md"
|
|
17
|
-
>md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header
|
|
16
|
+
<prop name="size" type="keyword" values="xs, sm, md" default="md"
|
|
17
|
+
>md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header; xs is
|
|
18
|
+
1.25rem with the smallest initials, for a person named inline in a line of small text.</prop>
|
|
18
19
|
<prop name="shape" type="keyword" values="circle, square" default="circle">Circle by default; square uses the theme's medium radius.</prop>
|
|
19
20
|
<prop name="decorative" type="boolean" default="false">Hides the avatar from assistive technology when adjacent text already identifies the person.</prop>
|
|
20
21
|
<prop name="active" type="boolean" default="false"
|
|
@@ -80,6 +81,13 @@
|
|
|
80
81
|
font-size: var(--ui-font-size-xs);
|
|
81
82
|
}
|
|
82
83
|
|
|
84
|
+
:host-state([size="xs"]) {
|
|
85
|
+
--_ui-default-icon-size: 0.75rem;
|
|
86
|
+
inline-size: 1.25rem;
|
|
87
|
+
block-size: 1.25rem;
|
|
88
|
+
font-size: var(--ui-font-size-2xs);
|
|
89
|
+
}
|
|
90
|
+
|
|
83
91
|
:host-state([hasImage]) {
|
|
84
92
|
border-color: var(--ui-avatar-border, var(--ui-border-strong));
|
|
85
93
|
}
|