@bluevolt-tech/lumen 1.5.0 → 1.5.2

package/dist/components/bv-button/bv-button.js

@@ -30,6 +30,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
@@ -92,7 +93,8 @@ var BvButton = class extends HTMLElement {
     "full-width",
     "icon",
     "icon-position",
-    "count"
+    "count",
+    "aria-label"
   ];
   constructor() {
     super();
@@ -169,6 +171,9 @@ var BvButton = class extends HTMLElement {
     btn.type = this.type;
     btn.disabled = this.disabled || this.loading;
     btn.className = "btn";
+    const ariaLabel = this.getAttribute("aria-label");
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    else btn.removeAttribute("aria-label");
     if (this.loading) {
       btn.setAttribute("aria-busy", "true");
       if (!btn.querySelector(".spinner")) {

package/dist/components/bv-course-detail-modal/bv-course-detail-modal.js

@@ -888,6 +888,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
@@ -950,7 +951,8 @@ var BvButton = class extends HTMLElement {
     "full-width",
     "icon",
     "icon-position",
-    "count"
+    "count",
+    "aria-label"
   ];
   constructor() {
     super();
@@ -1027,6 +1029,9 @@ var BvButton = class extends HTMLElement {
     btn.type = this.type;
     btn.disabled = this.disabled || this.loading;
     btn.className = "btn";
+    const ariaLabel = this.getAttribute("aria-label");
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    else btn.removeAttribute("aria-label");
     if (this.loading) {
       btn.setAttribute("aria-busy", "true");
       if (!btn.querySelector(".spinner")) {

package/dist/components/bv-course-grid-card/bv-course-grid-card.d.ts

@@ -19,6 +19,5 @@ export declare class BvCourseGridCard extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
     private _render;
-    private _syncSecondaryLabel;
     private _syncLoading;
 }

package/dist/components/bv-course-grid-card/bv-course-grid-card.js

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-course-grid-card/bv-course-grid-card.css
-var bv_course_grid_card_default = ":host {\n  display: block;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  padding: 12px;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-xl);\n  box-shadow: var(--bv-shadow-sm);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n:host([selected]) .card {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n  box-shadow: none;\n}\n\n/* Thumbnail */\n.thumbnail-wrap {\n  position: relative;\n  width: 100%;\n  height: 153px;\n  border-radius: var(--bv-radius-lg);\n  overflow: hidden;\n  background: var(--bv-color-neutral-200);\n  flex-shrink: 0;\n}\n\n.thumbnail {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.status-badge {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  padding: 0 var(--bv-spacing-sm);\n  border-radius: var(--bv-radius-sm);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  line-height: 18px;\n  background: var(--bv-color-success-light);\n  color: var(--bv-color-success-dark);\n}\n\n/* Content */\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-900);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.publisher {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-500);\n}\n\n.publisher strong {\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.description {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  line-height: 20px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin: 0;\n}\n\n.info-row {\n  display: flex;\n  gap: var(--bv-spacing-md);\n  margin-top: 2px;\n}\n\n.info-item {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-900);\n}\n\n.info-item strong {\n  font-weight: var(--bv-font-weight-bold);\n}\n\n/* Actions */\n.actions {\n  display: flex;\n  gap: var(--bv-spacing-sm);\n  align-items: stretch;\n}\n\n.primary-action {\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.secondary-action {\n  display: block;\n  width: 48px;\n  flex-shrink: 0;\n}\n\n/* Disabled selection: card body is no longer interactive */\n:host([disable-selection]) .card {\n  cursor: default;\n}\n\n/* Loading skeleton */\n.skeleton {\n  display: none;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  flex: 1;\n  min-width: 0;\n}\n\n:host([loading]) .card {\n  cursor: default;\n}\n\n:host([loading]) .thumbnail-wrap,\n:host([loading]) .content,\n:host([loading]) .actions {\n  display: none;\n}\n\n:host([loading]) .skeleton {\n  display: flex;\n}\n\n.skeleton-thumb {\n  width: 100%;\n  height: 153px;\n  border-radius: var(--bv-radius-lg);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-line {\n  height: 12px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-title-line {\n  height: 20px;\n  width: 70%;\n}\n\n.skeleton-short-line {\n  width: 45%;\n}\n\n.skeleton-actions {\n  display: flex;\n  gap: var(--bv-spacing-sm);\n  align-items: stretch;\n  margin-top: 2px;\n}\n\n.skeleton-button {\n  height: 44px;\n  border-radius: var(--bv-radius-md);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-primary {\n  flex: 1;\n  min-width: 0;\n}\n\n.skeleton-icon-btn {\n  width: 48px;\n  flex-shrink: 0;\n}\n\n@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n";
+var bv_course_grid_card_default = ":host {\n  display: block;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  padding: 12px;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-xl);\n  box-shadow: var(--bv-shadow-sm);\n  cursor: pointer;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n:host([selected]) .card {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n  box-shadow: none;\n}\n\n/* Thumbnail */\n.thumbnail-wrap {\n  position: relative;\n  width: 100%;\n  height: 153px;\n  border-radius: var(--bv-radius-lg);\n  overflow: hidden;\n  background: var(--bv-color-neutral-200);\n  flex-shrink: 0;\n}\n\n.thumbnail {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.status-badge {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  padding: 0 var(--bv-spacing-sm);\n  border-radius: var(--bv-radius-sm);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-medium);\n  line-height: 18px;\n  background: var(--bv-color-success-light);\n  color: var(--bv-color-success-dark);\n}\n\n/* Content */\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-900);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.publisher {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-500);\n}\n\n.publisher strong {\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n}\n\n.description {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  line-height: 20px;\n  min-height: 40px; /* Reserve space for 2 lines so cards align at the bottom in the grid, matching the list card's .description-wrap. */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin: 0;\n}\n\n.info-row {\n  display: flex;\n  gap: var(--bv-spacing-md);\n  margin-top: 2px;\n}\n\n.info-item {\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-900);\n}\n\n.info-item strong {\n  font-weight: var(--bv-font-weight-bold);\n}\n\n/* Actions */\n.actions {\n  display: flex;\n  gap: var(--bv-spacing-sm);\n  align-items: stretch;\n}\n\n.primary-action {\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.secondary-action {\n  display: block;\n  width: 48px;\n  flex-shrink: 0;\n}\n\n/* Disabled selection: card body is no longer interactive */\n:host([disable-selection]) .card {\n  cursor: default;\n}\n\n/* Loading skeleton */\n.skeleton {\n  display: none;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  flex: 1;\n  min-width: 0;\n}\n\n:host([loading]) .card {\n  cursor: default;\n}\n\n:host([loading]) .thumbnail-wrap,\n:host([loading]) .content,\n:host([loading]) .actions {\n  display: none;\n}\n\n:host([loading]) .skeleton {\n  display: flex;\n}\n\n.skeleton-thumb {\n  width: 100%;\n  height: 153px;\n  border-radius: var(--bv-radius-lg);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-line {\n  height: 12px;\n  border-radius: var(--bv-radius-sm);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-title-line {\n  height: 20px;\n  width: 70%;\n}\n\n.skeleton-short-line {\n  width: 45%;\n}\n\n.skeleton-actions {\n  display: flex;\n  gap: var(--bv-spacing-sm);\n  align-items: stretch;\n  margin-top: 2px;\n}\n\n.skeleton-button {\n  height: 44px;\n  border-radius: var(--bv-radius-md);\n  background: var(--bv-color-neutral-200);\n  animation: bv-skeleton-shimmer 1.5s ease-in-out infinite;\n}\n\n.skeleton-primary {\n  flex: 1;\n  min-width: 0;\n}\n\n.skeleton-icon-btn {\n  width: 48px;\n  flex-shrink: 0;\n}\n\n@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n";
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-button/bv-button.css
 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";
@@ -33,6 +33,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
@@ -95,7 +96,8 @@ var BvButton = class extends HTMLElement {
     "full-width",
     "icon",
     "icon-position",
-    "count"
+    "count",
+    "aria-label"
   ];
   constructor() {
     super();
@@ -172,6 +174,9 @@ var BvButton = class extends HTMLElement {
     btn.type = this.type;
     btn.disabled = this.disabled || this.loading;
     btn.className = "btn";
+    const ariaLabel = this.getAttribute("aria-label");
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    else btn.removeAttribute("aria-label");
     if (this.loading) {
       btn.setAttribute("aria-busy", "true");
       if (!btn.querySelector(".spinner")) {
@@ -229,7 +234,6 @@ var BvCourseGridCard = class extends HTMLElement {
     "primary-icon",
     "primary-loading",
     "primary-disabled",
-    "secondary-label",
     "secondary-icon",
     "selected",
     "disable-selection",
@@ -343,9 +347,6 @@ var BvCourseGridCard = class extends HTMLElement {
         if (val === null) (_a2 = this._els.primaryBtn) == null ? void 0 : _a2.removeAttribute("disabled");
         else (_b = this._els.primaryBtn) == null ? void 0 : _b.setAttribute("disabled", "");
       },
-      "secondary-label": () => {
-        this._syncSecondaryLabel();
-      },
       "secondary-icon": () => {
         var _a2;
         (_a2 = this._els.secondaryBtn) == null ? void 0 : _a2.setAttribute("icon", val ?? "");
@@ -431,13 +432,13 @@ var BvCourseGridCard = class extends HTMLElement {
     secondaryBtn.setAttribute("icon", this.getAttribute("secondary-icon") ?? "");
     secondaryBtn.setAttribute("size", "lg");
     secondaryBtn.setAttribute("full-width", "");
+    secondaryBtn.setAttribute("aria-label", "View details");
     secondaryBtn.className = "secondary-action";
     secondaryBtn.hidden = this.hideSecondary;
     secondaryBtn.addEventListener("click", () => {
       this.dispatchEvent(new CustomEvent("bv-secondary-action", { bubbles: true, composed: true }));
     });
     this._els.secondaryBtn = secondaryBtn;
-    this._syncSecondaryLabel();
     actions.append(primaryBtn, secondaryBtn);
     this._els.actions = actions;
     const skeleton = document.createElement("div");
@@ -461,11 +462,6 @@ var BvCourseGridCard = class extends HTMLElement {
       );
     });
   }
-  _syncSecondaryLabel() {
-    if (!this._els.secondaryBtn) return;
-    const label = this.getAttribute("secondary-label");
-    this._els.secondaryBtn.textContent = label ?? "";
-  }
   _syncLoading() {
     var _a;
     const loading = this.loading;

package/dist/components/bv-course-list-card/bv-course-list-card.js

@@ -33,6 +33,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
@@ -95,7 +96,8 @@ var BvButton = class extends HTMLElement {
     "full-width",
     "icon",
     "icon-position",
-    "count"
+    "count",
+    "aria-label"
   ];
   constructor() {
     super();
@@ -172,6 +174,9 @@ var BvButton = class extends HTMLElement {
     btn.type = this.type;
     btn.disabled = this.disabled || this.loading;
     btn.className = "btn";
+    const ariaLabel = this.getAttribute("aria-label");
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    else btn.removeAttribute("aria-label");
     if (this.loading) {
       btn.setAttribute("aria-busy", "true");
       if (!btn.querySelector(".spinner")) {

package/dist/components/bv-empty-state/bv-empty-state.js

@@ -116,6 +116,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
@@ -178,7 +179,8 @@ var BvButton = class extends HTMLElement {
     "full-width",
     "icon",
     "icon-position",
-    "count"
+    "count",
+    "aria-label"
   ];
   constructor() {
     super();
@@ -255,6 +257,9 @@ var BvButton = class extends HTMLElement {
     btn.type = this.type;
     btn.disabled = this.disabled || this.loading;
     btn.className = "btn";
+    const ariaLabel = this.getAttribute("aria-label");
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    else btn.removeAttribute("aria-label");
     if (this.loading) {
       btn.setAttribute("aria-busy", "true");
       if (!btn.querySelector(".spinner")) {

package/dist/components/bv-icon/bv-icon.js

@@ -30,6 +30,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,

package/dist/components/bv-portal-header/bv-portal-header.js

@@ -115,6 +115,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
@@ -177,7 +178,8 @@ var BvButton = class extends HTMLElement {
     "full-width",
     "icon",
     "icon-position",
-    "count"
+    "count",
+    "aria-label"
   ];
   constructor() {
     super();
@@ -254,6 +256,9 @@ var BvButton = class extends HTMLElement {
     btn.type = this.type;
     btn.disabled = this.disabled || this.loading;
     btn.className = "btn";
+    const ariaLabel = this.getAttribute("aria-label");
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    else btn.removeAttribute("aria-label");
     if (this.loading) {
       btn.setAttribute("aria-busy", "true");
       if (!btn.querySelector(".spinner")) {
@@ -296,6 +301,54 @@ if (!customElements.get("bv-button")) {
   customElements.define("bv-button", BvButton);
 }
 
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-icon/bv-icon.css
+var bv_icon_default = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: inherit;\n}\n\n.icon-wrap {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n}\n\n.icon-wrap svg {\n  display: block;\n}\n";
+
+// components/bv-icon/bv-icon.ts
+var BvIcon = class extends HTMLElement {
+  static observedAttributes = ["name", "size"];
+  _rendered = false;
+  _wrap = null;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    if ("replaceSync" in CSSStyleSheet.prototype) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(bv_icon_default);
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this._rendered) this._update();
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_icon_default;
+      shadow.appendChild(s);
+    }
+    this._wrap = document.createElement("span");
+    this._wrap.className = "icon-wrap";
+    shadow.appendChild(this._wrap);
+    this._update();
+  }
+  _update() {
+    if (!this._wrap) return;
+    const name = this.getAttribute("name") ?? "";
+    const size = parseInt(this.getAttribute("size") ?? "16", 10);
+    this._wrap.innerHTML = getIconSvg(name, size);
+  }
+};
+if (!customElements.get("bv-icon")) {
+  customElements.define("bv-icon", BvIcon);
+}
+
 // components/bv-user-row/bv-user-row.ts
 var BvUserRow = class extends HTMLElement {
   static observedAttributes = [
@@ -418,7 +471,12 @@ var BvUserRow = class extends HTMLElement {
       link.href = href;
       link.rel = "noopener noreferrer";
       if (target) link.setAttribute("target", target);
-      link.textContent = "Edit Profile";
+      const icon = document.createElement("bv-icon");
+      icon.setAttribute("name", "user-pen");
+      icon.setAttribute("aria-hidden", "true");
+      const label = document.createElement("span");
+      label.textContent = "Edit Profile";
+      link.append(icon, label);
       link.addEventListener("click", () => {
         this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
       });
@@ -426,7 +484,7 @@ var BvUserRow = class extends HTMLElement {
     } else {
       const btn = document.createElement("bv-button");
       btn.className = "edit-btn";
-      btn.setAttribute("icon", "edit");
+      btn.setAttribute("icon", "user-pen");
       btn.textContent = "Edit Profile";
       btn.addEventListener("click", () => {
         this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));

package/dist/components/bv-user-row/bv-user-row.d.ts

@@ -1,5 +1,6 @@
 import '../bv-avatar/bv-avatar.ts';
 import '../bv-button/bv-button.ts';
+import '../bv-icon/bv-icon.ts';
 export type UserRowEditProfileTarget = '_self' | '_blank' | '_parent' | '_top' | '';
 export declare class BvUserRow extends HTMLElement {
     static readonly observedAttributes: string[];

package/dist/components/bv-user-row/bv-user-row.js

@@ -112,6 +112,7 @@ var icons = {
   // User / profile
   user: `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
   users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+  "user-pen": `<path d="M11.5 15H7a4 4 0 0 0-4 4v2"/><path d="M21.378 16.626a1 1 0 0 0-3.004-3.004l-4.01 4.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"/><circle cx="10" cy="7" r="4"/>`,
   // Content
   star: `<polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26 12,2"/>`,
   eye: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>`,
@@ -174,7 +175,8 @@ var BvButton = class extends HTMLElement {
     "full-width",
     "icon",
     "icon-position",
-    "count"
+    "count",
+    "aria-label"
   ];
   constructor() {
     super();
@@ -251,6 +253,9 @@ var BvButton = class extends HTMLElement {
     btn.type = this.type;
     btn.disabled = this.disabled || this.loading;
     btn.className = "btn";
+    const ariaLabel = this.getAttribute("aria-label");
+    if (ariaLabel) btn.setAttribute("aria-label", ariaLabel);
+    else btn.removeAttribute("aria-label");
     if (this.loading) {
       btn.setAttribute("aria-busy", "true");
       if (!btn.querySelector(".spinner")) {
@@ -293,6 +298,54 @@ if (!customElements.get("bv-button")) {
   customElements.define("bv-button", BvButton);
 }
 
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-icon/bv-icon.css
+var bv_icon_default = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: inherit;\n}\n\n.icon-wrap {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n}\n\n.icon-wrap svg {\n  display: block;\n}\n";
+
+// components/bv-icon/bv-icon.ts
+var BvIcon = class extends HTMLElement {
+  static observedAttributes = ["name", "size"];
+  _rendered = false;
+  _wrap = null;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    if ("replaceSync" in CSSStyleSheet.prototype) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(bv_icon_default);
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback() {
+    if (this._rendered) this._update();
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_icon_default;
+      shadow.appendChild(s);
+    }
+    this._wrap = document.createElement("span");
+    this._wrap.className = "icon-wrap";
+    shadow.appendChild(this._wrap);
+    this._update();
+  }
+  _update() {
+    if (!this._wrap) return;
+    const name = this.getAttribute("name") ?? "";
+    const size = parseInt(this.getAttribute("size") ?? "16", 10);
+    this._wrap.innerHTML = getIconSvg(name, size);
+  }
+};
+if (!customElements.get("bv-icon")) {
+  customElements.define("bv-icon", BvIcon);
+}
+
 // components/bv-user-row/bv-user-row.ts
 var BvUserRow = class extends HTMLElement {
   static observedAttributes = [
@@ -415,7 +468,12 @@ var BvUserRow = class extends HTMLElement {
       link.href = href;
       link.rel = "noopener noreferrer";
       if (target) link.setAttribute("target", target);
-      link.textContent = "Edit Profile";
+      const icon = document.createElement("bv-icon");
+      icon.setAttribute("name", "user-pen");
+      icon.setAttribute("aria-hidden", "true");
+      const label = document.createElement("span");
+      label.textContent = "Edit Profile";
+      link.append(icon, label);
       link.addEventListener("click", () => {
         this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));
       });
@@ -423,7 +481,7 @@ var BvUserRow = class extends HTMLElement {
     } else {
       const btn = document.createElement("bv-button");
       btn.className = "edit-btn";
-      btn.setAttribute("icon", "edit");
+      btn.setAttribute("icon", "user-pen");
       btn.textContent = "Edit Profile";
       btn.addEventListener("click", () => {
         this.dispatchEvent(new CustomEvent("bv-edit-profile", { bubbles: true, composed: true }));

package/dist/storybook/stories/screens/course-catalog.data.js

@@ -1068,7 +1068,7 @@ var ALL_COURSES = [
     type: "HR & Onboarding",
     title: "ADA Accommodation Procedures",
     publisher: "A.Y. McDonald",
-    description: "Understand ADA requirements, the interactive accommodation process, and best practices for inclusive workplace design.",
+    description: "Understand ADA requirements",
     durationMinutes: 90,
     lastUpdatedDate: "2024-02-20",
     downloaded: false,

package/dist/themes/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 Jul 2026 02:57:57 GMT
+ * Generated on Thu, 16 Jul 2026 03:00:05 GMT
  */
 
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluevolt-tech/lumen",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/themes/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 09 Jul 2026 02:57:57 GMT
+ * Generated on Thu, 16 Jul 2026 03:00:05 GMT
  */
 
 :root {