@bluevolt-tech/lumen 1.3.2 → 1.4.1
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/dist/components/bv-button/bv-button.js +1 -181
- package/dist/components/bv-course-detail-modal/bv-course-detail-modal.js +1 -181
- package/dist/components/bv-course-grid-card/bv-course-grid-card.d.ts +8 -0
- package/dist/components/bv-course-grid-card/bv-course-grid-card.js +58 -184
- package/dist/components/bv-course-list-card/bv-course-list-card.d.ts +7 -0
- package/dist/components/bv-course-list-card/bv-course-list-card.js +48 -184
- package/dist/components/bv-empty-state/bv-empty-state.d.ts +22 -1
- package/dist/components/bv-empty-state/bv-empty-state.js +410 -5
- package/dist/components/bv-empty-state/illustrations.d.ts +3 -0
- package/dist/components/bv-filter-panel/bv-filter-panel.d.ts +4 -0
- package/dist/components/bv-filter-panel/bv-filter-panel.js +30 -3
- package/dist/components/bv-portal-header/bv-portal-header.d.ts +1 -0
- package/dist/components/bv-portal-header/bv-portal-header.js +98 -194
- package/dist/components/bv-promo-banner/bv-promo-banner.d.ts +4 -0
- package/dist/components/bv-promo-banner/bv-promo-banner.js +16 -1
- package/dist/components/bv-user-row/bv-user-row.d.ts +6 -0
- package/dist/components/bv-user-row/bv-user-row.js +58 -192
- package/dist/storybook/stories/screens/course-catalog.data.js +1842 -153
- package/dist/themes/base.css +1 -1
- package/package.json +1 -1
- package/themes/base.css +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-user-row/bv-user-row.css
|
|
2
|
-
var bv_user_row_default = ":host {\n display: inline-block;\n}\n\n.row {\n display: inline-flex;\n align-items: center;\n gap: var(--bv-spacing-lg);\n}\n\n/* User info */\n.user-info {\n display: flex;\n align-items: center;\n gap: var(--bv-spacing-md);\n min-width: 0;\n}\n\nbv-avatar {\n --bv-avatar-size: 56px;\n flex-shrink: 0;\n}\n\n.text-col {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.user-name {\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-lg);\n font-weight: var(--bv-font-weight-semibold);\n color: var(--bv-color-secondary-foreground);\n line-height: 28px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.user-org {\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-md);\n font-weight: var(--bv-font-weight-regular);\n color: var(--bv-color-neutral-600);\n line-height: 24px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Edit button \u2014 white bg, neutral border */\n.edit-btn {\n --bv-button-bg: var(--bv-color-neutral-0);\n --bv-button-bg-hover: var(--bv-color-neutral-100);\n --bv-button-color: var(--bv-color-secondary-foreground);\n --bv-button-border-color: var(--bv-color-neutral-300);\n --bv-button-border-color-hover: var(--bv-color-neutral-400);\n flex-shrink: 0;\n}\n";
|
|
2
|
+
var bv_user_row_default = ":host {\n display: inline-block;\n}\n\n.row {\n display: inline-flex;\n align-items: center;\n gap: var(--bv-spacing-lg);\n}\n\n/* User info */\n.user-info {\n display: flex;\n align-items: center;\n gap: var(--bv-spacing-md);\n min-width: 0;\n}\n\nbv-avatar {\n --bv-avatar-size: 56px;\n flex-shrink: 0;\n}\n\n.text-col {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.user-name {\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-lg);\n font-weight: var(--bv-font-weight-semibold);\n color: var(--bv-color-secondary-foreground);\n line-height: 28px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.user-org {\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-md);\n font-weight: var(--bv-font-weight-regular);\n color: var(--bv-color-neutral-600);\n line-height: 24px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Edit action host \u2014 flex to keep either <bv-button> or <a> aligned */\n.edit-action {\n flex-shrink: 0;\n display: inline-flex;\n}\n\n/* Edit button \u2014 white bg, neutral border */\n.edit-btn {\n --bv-button-bg: var(--bv-color-neutral-0);\n --bv-button-bg-hover: var(--bv-color-neutral-100);\n --bv-button-color: var(--bv-color-secondary-foreground);\n --bv-button-border-color: var(--bv-color-neutral-300);\n --bv-button-border-color-hover: var(--bv-color-neutral-400);\n flex-shrink: 0;\n}\n\n/* Edit link \u2014 same visual as .edit-btn, but a real anchor */\n.edit-link {\n display: inline-flex;\n align-items: center;\n gap: var(--bv-spacing-sm);\n padding: 8px 16px;\n background: var(--bv-color-neutral-0);\n color: var(--bv-color-secondary-foreground);\n border: 1px solid var(--bv-color-neutral-300);\n border-radius: var(--bv-radius-md);\n font-family: var(--bv-font-family-base);\n font-size: var(--bv-font-size-sm);\n font-weight: var(--bv-font-weight-medium);\n text-decoration: none;\n cursor: pointer;\n transition:\n background var(--bv-transition-fast),\n border-color var(--bv-transition-fast);\n}\n\n.edit-link:hover {\n background: var(--bv-color-neutral-100);\n border-color: var(--bv-color-neutral-400);\n}\n\n.edit-link:focus-visible {\n outline: 2px solid var(--bv-color-primary);\n outline-offset: 2px;\n}\n";
|
|
3
3
|
|
|
4
4
|
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-avatar/bv-avatar.css
|
|
5
5
|
var bv_avatar_default = ":host {\n --bv-avatar-size: 40px;\n --bv-avatar-bg: var(--bv-color-primary-light);\n --bv-avatar-color: var(--bv-color-primary);\n --bv-avatar-radius: var(--bv-radius-full);\n display: inline-flex;\n}\n\n:host([size='xs']) {\n --bv-avatar-size: 24px;\n}\n:host([size='sm']) {\n --bv-avatar-size: 32px;\n}\n:host([size='md']) {\n --bv-avatar-size: 40px;\n}\n:host([size='lg']) {\n --bv-avatar-size: 48px;\n}\n:host([size='xl']) {\n --bv-avatar-size: 64px;\n}\n\n.avatar {\n width: var(--bv-avatar-size);\n height: var(--bv-avatar-size);\n border-radius: var(--bv-avatar-radius);\n background: var(--bv-avatar-bg);\n color: var(--bv-avatar-color);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n flex-shrink: 0;\n font-family: var(--bv-font-family-base);\n font-weight: var(--bv-font-weight-semibold);\n font-size: calc(var(--bv-avatar-size) * 0.38);\n user-select: none;\n}\n\n.avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n}\n";
|
|
@@ -81,187 +81,7 @@ if (!customElements.get("bv-avatar")) {
|
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-button/bv-button.css
|
|
84
|
-
var bv_button_default =
|
|
85
|
-
Apps can override these three properties per-instance:
|
|
86
|
-
|
|
87
|
-
HTML: <bv-button style="--bv-button-bg: #e53e3e;">
|
|
88
|
-
Angular: <bv-button [style.--bv-button-bg]="brandColor">
|
|
89
|
-
JavaScript: btn.style.setProperty('--bv-button-bg', value)
|
|
90
|
-
|
|
91
|
-
Hover is auto-computed from the base colors via color-mix().
|
|
92
|
-
Override --bv-button-bg-hover / --bv-button-border-color-hover
|
|
93
|
-
if you need explicit control over the hovered state.
|
|
94
|
-
\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
95
|
-
:host {
|
|
96
|
-
/* Default values \u2014 map to global tokens (primary variant) */
|
|
97
|
-
--bv-button-bg: var(--bv-color-primary);
|
|
98
|
-
--bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);
|
|
99
|
-
--bv-button-color: var(--bv-color-neutral-0);
|
|
100
|
-
--bv-button-border-color: var(--bv-color-primary);
|
|
101
|
-
--bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);
|
|
102
|
-
--bv-button-font-family: var(--bv-font-family-base);
|
|
103
|
-
--bv-button-font-size: var(--bv-font-size-sm);
|
|
104
|
-
|
|
105
|
-
display: inline-block;
|
|
106
|
-
font-family: var(--bv-font-family-base);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
:host([hidden]) {
|
|
110
|
-
display: none;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
:host([full-width]) {
|
|
114
|
-
display: block;
|
|
115
|
-
width: 100%;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
/* \u2500\u2500 Variant tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
119
|
-
Each variant re-points the component tokens to different global
|
|
120
|
-
tokens. Apps can still override with inline styles \u2014 inline style
|
|
121
|
-
always wins due to higher specificity.
|
|
122
|
-
\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
123
|
-
|
|
124
|
-
:host([variant='secondary']) {
|
|
125
|
-
--bv-button-bg: var(--bv-color-secondary);
|
|
126
|
-
--bv-button-border-color: var(--bv-color-secondary);
|
|
127
|
-
--bv-button-color: var(--bv-color-secondary-foreground);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
:host([variant='tertiary']) {
|
|
131
|
-
--bv-button-bg: var(--bv-color-tertiary);
|
|
132
|
-
--bv-button-border-color: var(--bv-color-tertiary);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
:host([variant='danger']) {
|
|
136
|
-
--bv-button-bg: var(--bv-color-danger);
|
|
137
|
-
--bv-button-border-color: var(--bv-color-danger);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
:host([variant='ghost']) {
|
|
141
|
-
--bv-button-bg: transparent;
|
|
142
|
-
--bv-button-bg-hover: var(--bv-color-primary-light);
|
|
143
|
-
--bv-button-color: var(--bv-color-primary);
|
|
144
|
-
--bv-button-border-color: transparent;
|
|
145
|
-
--bv-button-border-color-hover: transparent;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
:host([variant='outline']) {
|
|
149
|
-
--bv-button-bg: transparent;
|
|
150
|
-
--bv-button-bg-hover: var(--bv-color-primary-light);
|
|
151
|
-
--bv-button-color: var(--bv-color-primary);
|
|
152
|
-
--bv-button-border-color: var(--bv-color-primary);
|
|
153
|
-
--bv-button-border-color-hover: var(--bv-color-primary);
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/* \u2500\u2500 Base button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
157
|
-
All visual properties read from the component-level tokens above.
|
|
158
|
-
\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
159
|
-
|
|
160
|
-
.btn {
|
|
161
|
-
display: inline-flex;
|
|
162
|
-
align-items: center;
|
|
163
|
-
justify-content: center;
|
|
164
|
-
gap: var(--bv-spacing-xs);
|
|
165
|
-
padding: 10px var(--bv-spacing-md);
|
|
166
|
-
min-height: 40px;
|
|
167
|
-
width: auto;
|
|
168
|
-
font-family: var(--bv-button-font-family);
|
|
169
|
-
font-size: var(--bv-button-font-size);
|
|
170
|
-
font-style: normal;
|
|
171
|
-
font-weight: var(--bv-font-weight-semibold);
|
|
172
|
-
line-height: 20px;
|
|
173
|
-
border: 1px solid var(--bv-button-border-color);
|
|
174
|
-
border-radius: var(--bv-radius-lg);
|
|
175
|
-
cursor: pointer;
|
|
176
|
-
transition:
|
|
177
|
-
background var(--bv-transition-fast),
|
|
178
|
-
color var(--bv-transition-fast),
|
|
179
|
-
border-color var(--bv-transition-fast),
|
|
180
|
-
box-shadow var(--bv-transition-fast),
|
|
181
|
-
opacity var(--bv-transition-fast);
|
|
182
|
-
white-space: nowrap;
|
|
183
|
-
user-select: none;
|
|
184
|
-
text-decoration: none;
|
|
185
|
-
outline: none;
|
|
186
|
-
box-sizing: border-box;
|
|
187
|
-
background: var(--bv-button-bg);
|
|
188
|
-
color: var(--bv-button-color);
|
|
189
|
-
box-shadow: var(--bv-shadow-sm);
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
:host([full-width]) .btn {
|
|
193
|
-
width: 100%;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.btn:hover:not(:disabled) {
|
|
197
|
-
background: var(--bv-button-bg-hover);
|
|
198
|
-
border-color: var(--bv-button-border-color-hover);
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.btn:active:not(:disabled) {
|
|
202
|
-
transform: translateY(1px);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.btn:focus-visible {
|
|
206
|
-
outline: 2px solid var(--bv-button-border-color);
|
|
207
|
-
outline-offset: 2px;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.btn:disabled {
|
|
211
|
-
opacity: 0.5;
|
|
212
|
-
cursor: not-allowed;
|
|
213
|
-
pointer-events: none;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
/* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
|
|
217
|
-
|
|
218
|
-
:host([size='sm']) .btn {
|
|
219
|
-
padding: 6px 12px;
|
|
220
|
-
min-height: 32px;
|
|
221
|
-
font-size: var(--bv-font-size-sm);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
:host([size='lg']) .btn {
|
|
225
|
-
padding: 12px var(--bv-spacing-lg);
|
|
226
|
-
min-height: 48px;
|
|
227
|
-
font-size: var(--bv-font-size-md);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
/* \u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
|
|
231
|
-
|
|
232
|
-
.btn-icon {
|
|
233
|
-
display: inline-flex;
|
|
234
|
-
align-items: center;
|
|
235
|
-
flex-shrink: 0;
|
|
236
|
-
line-height: 0;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
/* \u2500\u2500 Count badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
|
|
240
|
-
|
|
241
|
-
.btn-count {
|
|
242
|
-
opacity: 0.8;
|
|
243
|
-
font-weight: var(--bv-font-weight-regular);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
/* \u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
|
|
247
|
-
|
|
248
|
-
.spinner {
|
|
249
|
-
display: inline-block;
|
|
250
|
-
width: 1em;
|
|
251
|
-
height: 1em;
|
|
252
|
-
border: 2px solid currentColor;
|
|
253
|
-
border-top-color: transparent;
|
|
254
|
-
border-radius: 50%;
|
|
255
|
-
flex-shrink: 0;
|
|
256
|
-
animation: bv-spin 700ms linear infinite;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
@keyframes bv-spin {
|
|
260
|
-
to {
|
|
261
|
-
transform: rotate(360deg);
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
`;
|
|
84
|
+
var bv_button_default = "/* \u2500\u2500 Public theming API \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Apps can override these three properties per-instance:\n\n HTML: <bv-button style=\"--bv-button-bg: #e53e3e;\">\n Angular: <bv-button [style.--bv-button-bg]=\"brandColor\">\n JavaScript: btn.style.setProperty('--bv-button-bg', value)\n\n Hover is auto-computed from the base colors via color-mix().\n Override --bv-button-bg-hover / --bv-button-border-color-hover\n if you need explicit control over the hovered state.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host {\n /* Default values \u2014 map to global tokens (primary variant) */\n --bv-button-bg: var(--bv-color-primary);\n --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);\n --bv-button-color: var(--bv-color-neutral-0);\n --bv-button-border-color: var(--bv-color-primary);\n --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);\n --bv-button-font-family: var(--bv-font-family-base);\n --bv-button-font-size: var(--bv-font-size-sm);\n\n display: inline-block;\n font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n /* `!important` so `hidden` always wins over :host([full-width]) / other display rules. */\n display: none !important;\n}\n\n:host([full-width]) {\n display: block;\n width: 100%;\n}\n\n/* \u2500\u2500 Variant tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Each variant re-points the component tokens to different global\n tokens. Apps can still override with inline styles \u2014 inline style\n always wins due to higher specificity.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n:host([variant='secondary']) {\n --bv-button-bg: var(--bv-color-secondary);\n --bv-button-border-color: var(--bv-color-secondary);\n --bv-button-color: var(--bv-color-secondary-foreground);\n}\n\n:host([variant='tertiary']) {\n --bv-button-bg: var(--bv-color-tertiary);\n --bv-button-border-color: var(--bv-color-tertiary);\n}\n\n:host([variant='danger']) {\n --bv-button-bg: var(--bv-color-danger);\n --bv-button-border-color: var(--bv-color-danger);\n}\n\n:host([variant='ghost']) {\n --bv-button-bg: transparent;\n --bv-button-bg-hover: var(--bv-color-primary-light);\n --bv-button-color: var(--bv-color-primary);\n --bv-button-border-color: transparent;\n --bv-button-border-color-hover: transparent;\n}\n\n:host([variant='outline']) {\n --bv-button-bg: transparent;\n --bv-button-bg-hover: var(--bv-color-primary-light);\n --bv-button-color: var(--bv-color-primary);\n --bv-button-border-color: var(--bv-color-primary);\n --bv-button-border-color-hover: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Base button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n All visual properties read from the component-level tokens above.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bv-spacing-xs);\n padding: 10px var(--bv-spacing-md);\n min-height: 40px;\n width: auto;\n font-family: var(--bv-button-font-family);\n font-size: var(--bv-button-font-size);\n font-style: normal;\n font-weight: var(--bv-font-weight-semibold);\n line-height: 20px;\n border: 1px solid var(--bv-button-border-color);\n border-radius: var(--bv-radius-lg);\n cursor: pointer;\n transition:\n background var(--bv-transition-fast),\n color var(--bv-transition-fast),\n border-color var(--bv-transition-fast),\n box-shadow var(--bv-transition-fast),\n opacity var(--bv-transition-fast);\n white-space: nowrap;\n user-select: none;\n text-decoration: none;\n outline: none;\n box-sizing: border-box;\n background: var(--bv-button-bg);\n color: var(--bv-button-color);\n box-shadow: var(--bv-shadow-sm);\n}\n\n:host([full-width]) .btn {\n width: 100%;\n}\n\n.btn:hover:not(:disabled) {\n background: var(--bv-button-bg-hover);\n border-color: var(--bv-button-border-color-hover);\n}\n\n.btn:active:not(:disabled) {\n transform: translateY(1px);\n}\n\n.btn:focus-visible {\n outline: 2px solid var(--bv-button-border-color);\n outline-offset: 2px;\n}\n\n.btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n:host([size='sm']) .btn {\n padding: 6px 12px;\n min-height: 32px;\n font-size: var(--bv-font-size-sm);\n}\n\n:host([size='lg']) .btn {\n padding: 12px var(--bv-spacing-lg);\n min-height: 48px;\n font-size: var(--bv-font-size-md);\n}\n\n/* \u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 0;\n}\n\n/* \u2500\u2500 Count badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.btn-count {\n opacity: 0.8;\n font-weight: var(--bv-font-weight-regular);\n}\n\n/* \u2500\u2500 Loading spinner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/\n\n.spinner {\n display: inline-block;\n width: 1em;\n height: 1em;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n flex-shrink: 0;\n animation: bv-spin 700ms linear infinite;\n}\n\n@keyframes bv-spin {\n to {\n transform: rotate(360deg);\n }\n}\n";
|
|
265
85
|
|
|
266
86
|
// components/bv-icon/icons.ts
|
|
267
87
|
var icons = {
|
|
@@ -480,8 +300,24 @@ var BvUserRow = class extends HTMLElement {
|
|
|
480
300
|
"user-org",
|
|
481
301
|
"avatar-src",
|
|
482
302
|
"avatar-initials",
|
|
483
|
-
"greeting"
|
|
303
|
+
"greeting",
|
|
304
|
+
"edit-profile-href",
|
|
305
|
+
"edit-profile-target"
|
|
484
306
|
];
|
|
307
|
+
get editProfileHref() {
|
|
308
|
+
return this.getAttribute("edit-profile-href") ?? "";
|
|
309
|
+
}
|
|
310
|
+
set editProfileHref(v) {
|
|
311
|
+
if (v) this.setAttribute("edit-profile-href", v);
|
|
312
|
+
else this.removeAttribute("edit-profile-href");
|
|
313
|
+
}
|
|
314
|
+
get editProfileTarget() {
|
|
315
|
+
return this.getAttribute("edit-profile-target") ?? "";
|
|
316
|
+
}
|
|
317
|
+
set editProfileTarget(v) {
|
|
318
|
+
if (v) this.setAttribute("edit-profile-target", v);
|
|
319
|
+
else this.removeAttribute("edit-profile-target");
|
|
320
|
+
}
|
|
485
321
|
_rendered = false;
|
|
486
322
|
_els = {};
|
|
487
323
|
constructor() {
|
|
@@ -517,6 +353,12 @@ var BvUserRow = class extends HTMLElement {
|
|
|
517
353
|
greeting: () => {
|
|
518
354
|
if (this._els.name)
|
|
519
355
|
this._els.name.textContent = this._greeting() + (this.getAttribute("user-name") ?? "");
|
|
356
|
+
},
|
|
357
|
+
"edit-profile-href": () => {
|
|
358
|
+
this._syncEditAction();
|
|
359
|
+
},
|
|
360
|
+
"edit-profile-target": () => {
|
|
361
|
+
this._syncEditAction();
|
|
520
362
|
}
|
|
521
363
|
};
|
|
522
364
|
(_a = map[name]) == null ? void 0 : _a.call(map);
|
|
@@ -554,16 +396,40 @@ var BvUserRow = class extends HTMLElement {
|
|
|
554
396
|
this._els.org = org;
|
|
555
397
|
textCol.append(name, org);
|
|
556
398
|
userInfo.append(avatar, textCol);
|
|
557
|
-
const
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
editBtn.addEventListener("click", () => {
|
|
562
|
-
this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
|
|
563
|
-
});
|
|
564
|
-
this._els.editBtn = editBtn;
|
|
565
|
-
row.append(userInfo, editBtn);
|
|
399
|
+
const actionHost = document.createElement("div");
|
|
400
|
+
actionHost.className = "edit-action";
|
|
401
|
+
this._els.actionHost = actionHost;
|
|
402
|
+
row.append(userInfo, actionHost);
|
|
566
403
|
shadow.appendChild(row);
|
|
404
|
+
this._syncEditAction();
|
|
405
|
+
}
|
|
406
|
+
_syncEditAction() {
|
|
407
|
+
const host = this._els.actionHost;
|
|
408
|
+
if (!host) return;
|
|
409
|
+
const href = this.getAttribute("edit-profile-href") ?? "";
|
|
410
|
+
const target = this.getAttribute("edit-profile-target") ?? "";
|
|
411
|
+
host.innerHTML = "";
|
|
412
|
+
if (href) {
|
|
413
|
+
const link = document.createElement("a");
|
|
414
|
+
link.className = "edit-link";
|
|
415
|
+
link.href = href;
|
|
416
|
+
link.rel = "noopener noreferrer";
|
|
417
|
+
if (target) link.setAttribute("target", target);
|
|
418
|
+
link.textContent = "Edit Profile";
|
|
419
|
+
link.addEventListener("click", () => {
|
|
420
|
+
this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
|
|
421
|
+
});
|
|
422
|
+
host.appendChild(link);
|
|
423
|
+
} else {
|
|
424
|
+
const btn = document.createElement("bv-button");
|
|
425
|
+
btn.className = "edit-btn";
|
|
426
|
+
btn.setAttribute("icon", "edit");
|
|
427
|
+
btn.textContent = "Edit Profile";
|
|
428
|
+
btn.addEventListener("click", () => {
|
|
429
|
+
this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
|
|
430
|
+
});
|
|
431
|
+
host.appendChild(btn);
|
|
432
|
+
}
|
|
567
433
|
}
|
|
568
434
|
};
|
|
569
435
|
if (!customElements.get("bv-user-row")) {
|