@bluevolt-tech/lumen 1.3.2 → 1.5.0

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.
@@ -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 = `/* \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
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 = {
@@ -445,7 +265,7 @@ var BvButton = class extends HTMLElement {
445
265
  }
446
266
  btn.querySelectorAll(".btn-icon").forEach((el) => el.remove());
447
267
  const iconName = this.getAttribute("icon");
448
- if (iconName) {
268
+ if (iconName && !this.loading) {
449
269
  const svg = getIconSvg(iconName, 16);
450
270
  if (svg) {
451
271
  const iconEl = document.createElement("span");
@@ -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 editBtn = document.createElement("bv-button");
558
- editBtn.className = "edit-btn";
559
- editBtn.setAttribute("icon", "edit");
560
- editBtn.textContent = "Edit Profile";
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")) {