@bluevolt-tech/lumen 2.0.0 → 2.0.1

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

@@ -19,5 +19,9 @@ export declare class BvCourseGridCard extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
     private _render;
+    private _toggleSelected;
+    private _buildAriaLabel;
+    private _setPrefixedStrong;
+    private _syncSelectionA11y;
     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  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";
+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.card:focus-visible {\n  outline: var(--bv-focus-ring);\n  outline-offset: 2px;\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:host([variant='outline-secondary']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-neutral-100);\n  --bv-button-color: var(--bv-color-neutral-700);\n  --bv-button-border-color: var(--bv-color-neutral-300);\n  --bv-button-border-color-hover: var(--bv-color-neutral-300);\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";
@@ -311,20 +311,23 @@ var BvCourseGridCard = class extends HTMLElement {
         }
       },
       title: () => {
+        var _a2;
         if (this._els.title) this._els.title.textContent = val ?? "";
+        (_a2 = this._els.card) == null ? void 0 : _a2.setAttribute("aria-label", this._buildAriaLabel());
       },
       publisher: () => {
-        if (this._els.publisher) this._els.publisher.innerHTML = `By <strong>${val ?? ""}</strong>`;
+        var _a2;
+        this._setPrefixedStrong(this._els.publisher, "By ", val);
+        (_a2 = this._els.card) == null ? void 0 : _a2.setAttribute("aria-label", this._buildAriaLabel());
       },
       description: () => {
         if (this._els.description) this._els.description.textContent = val ?? "";
       },
       duration: () => {
-        if (this._els.duration) this._els.duration.innerHTML = `<strong>${val ?? ""}</strong>`;
+        this._setPrefixedStrong(this._els.duration, "", val);
       },
       "last-updated": () => {
-        if (this._els.lastUpdated)
-          this._els.lastUpdated.innerHTML = `Last Updated: <strong>${val ?? ""}</strong>`;
+        this._setPrefixedStrong(this._els.lastUpdated, "Last Updated: ", val);
       },
       "primary-label": () => {
         if (this._els.primaryBtn) this._els.primaryBtn.textContent = val ?? "";
@@ -354,8 +357,16 @@ var BvCourseGridCard = class extends HTMLElement {
       "hide-secondary": () => {
         if (this._els.secondaryBtn) this._els.secondaryBtn.hidden = this.hideSecondary;
       },
+      selected: () => {
+        var _a2;
+        (_a2 = this._els.card) == null ? void 0 : _a2.setAttribute("aria-checked", this.selected ? "true" : "false");
+      },
+      "disable-selection": () => {
+        this._syncSelectionA11y();
+      },
       loading: () => {
         this._syncLoading();
+        this._syncSelectionA11y();
       }
     };
     (_a = map[name]) == null ? void 0 : _a.call(map);
@@ -371,6 +382,10 @@ var BvCourseGridCard = class extends HTMLElement {
     }
     const card = document.createElement("div");
     card.className = "card";
+    card.setAttribute("role", "checkbox");
+    card.setAttribute("tabindex", "0");
+    card.setAttribute("aria-checked", this.selected ? "true" : "false");
+    card.setAttribute("aria-label", this._buildAriaLabel());
     this._els.card = card;
     const thumbWrap = document.createElement("div");
     thumbWrap.className = "thumbnail-wrap";
@@ -394,8 +409,8 @@ var BvCourseGridCard = class extends HTMLElement {
     this._els.title = title;
     const publisher = document.createElement("span");
     publisher.className = "publisher";
-    publisher.innerHTML = `By <strong>${this.getAttribute("publisher") ?? ""}</strong>`;
     this._els.publisher = publisher;
+    this._setPrefixedStrong(publisher, "By ", this.getAttribute("publisher"));
     const description = document.createElement("p");
     description.className = "description";
     description.textContent = this.getAttribute("description") ?? "";
@@ -404,12 +419,12 @@ var BvCourseGridCard = class extends HTMLElement {
     infoRow.className = "info-row";
     const duration = document.createElement("span");
     duration.className = "info-item";
-    duration.innerHTML = `<strong>${this.getAttribute("duration") ?? ""}</strong>`;
     this._els.duration = duration;
+    this._setPrefixedStrong(duration, "", this.getAttribute("duration"));
     const lastUpdated = document.createElement("span");
     lastUpdated.className = "info-item";
-    lastUpdated.innerHTML = `Last Updated: <strong>${this.getAttribute("last-updated") ?? ""}</strong>`;
     this._els.lastUpdated = lastUpdated;
+    this._setPrefixedStrong(lastUpdated, "Last Updated: ", this.getAttribute("last-updated"));
     infoRow.append(duration, lastUpdated);
     content.append(title, publisher, description, infoRow);
     const actions = document.createElement("div");
@@ -449,18 +464,60 @@ var BvCourseGridCard = class extends HTMLElement {
     card.append(thumbWrap, content, actions, skeleton);
     shadow.appendChild(card);
     this._syncLoading();
+    this._syncSelectionA11y();
     card.addEventListener("click", (e) => {
       if (this.disableSelection || this.loading) return;
-      if (e.composedPath().includes(this._els.actions)) return;
-      this.selected = !this.selected;
-      this.dispatchEvent(
-        new CustomEvent("bv-select", {
-          bubbles: true,
-          composed: true,
-          detail: { selected: this.selected }
-        })
-      );
+      const actionsEl = this._els.actions;
+      if (actionsEl && e.composedPath().includes(actionsEl)) return;
+      this._toggleSelected();
     });
+    card.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      if (this.disableSelection || this.loading) return;
+      const actionsEl = this._els.actions;
+      if (actionsEl && e.composedPath().includes(actionsEl)) return;
+      e.preventDefault();
+      this._toggleSelected();
+    });
+  }
+  _toggleSelected() {
+    this.selected = !this.selected;
+    this.dispatchEvent(
+      new CustomEvent("bv-select", {
+        bubbles: true,
+        composed: true,
+        detail: { selected: this.selected }
+      })
+    );
+  }
+  _buildAriaLabel() {
+    const title = this.getAttribute("title") ?? "";
+    const publisher = this.getAttribute("publisher") ?? "";
+    const parts = [];
+    if (title) parts.push(title);
+    if (publisher) parts.push(`by ${publisher}`);
+    return parts.join(", ");
+  }
+  _setPrefixedStrong(el, prefix, val) {
+    if (!el) return;
+    const value = val ?? "";
+    if (!value) {
+      el.hidden = true;
+      el.replaceChildren();
+      return;
+    }
+    el.hidden = false;
+    const strong = document.createElement("strong");
+    strong.textContent = value;
+    if (prefix) el.replaceChildren(document.createTextNode(prefix), strong);
+    else el.replaceChildren(strong);
+  }
+  _syncSelectionA11y() {
+    var _a, _b, _c;
+    const inert = this.disableSelection || this.loading;
+    (_a = this._els.card) == null ? void 0 : _a.setAttribute("tabindex", inert ? "-1" : "0");
+    if (inert) (_b = this._els.card) == null ? void 0 : _b.setAttribute("aria-disabled", "true");
+    else (_c = this._els.card) == null ? void 0 : _c.removeAttribute("aria-disabled");
   }
   _syncLoading() {
     var _a;

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

@@ -19,5 +19,9 @@ export declare class BvCourseListCard extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
     private _render;
+    private _toggleSelected;
+    private _buildAriaLabel;
+    private _setPrefixedStrong;
+    private _syncSelectionA11y;
     private _syncLoading;
 }

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

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-course-list-card/bv-course-list-card.css
-var bv_course_list_card_default = ":host {\n  display: block;\n}\n\n.card {\n  display: flex;\n  align-items: stretch;\n  gap: var(--bv-spacing-md);\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  flex-shrink: 0;\n  width: 200px;\n  min-height: 123px;\n  border-radius: var(--bv-radius-lg);\n  overflow: hidden;\n  background: var(--bv-color-neutral-200);\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  flex: 1;\n  min-width: 0;\n  justify-content: space-between;\n}\n\n.meta {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\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-wrap {\n  height: 40px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.description {\n  margin: 0;\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}\n\n.info-row {\n  display: flex;\n  gap: var(--bv-spacing-md);\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  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  flex-shrink: 0;\n  width: 209px;\n  justify-content: center;\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  align-items: stretch;\n  gap: var(--bv-spacing-md);\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  flex-shrink: 0;\n  width: 200px;\n  min-height: 123px;\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-content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  flex: 1;\n  min-width: 0;\n  justify-content: center;\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: 60%;\n}\n\n.skeleton-short-line {\n  width: 40%;\n}\n\n.skeleton-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  flex-shrink: 0;\n  width: 209px;\n  justify-content: center;\n}\n\n.skeleton-button {\n  height: 40px;\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@keyframes bv-skeleton-shimmer {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n";
+var bv_course_list_card_default = ":host {\n  display: block;\n}\n\n.card {\n  display: flex;\n  align-items: stretch;\n  gap: var(--bv-spacing-md);\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.card:focus-visible {\n  outline: var(--bv-focus-ring);\n  outline-offset: 2px;\n}\n\n/* Thumbnail */\n.thumbnail-wrap {\n  position: relative;\n  flex-shrink: 0;\n  width: 200px;\n  min-height: 123px;\n  border-radius: var(--bv-radius-lg);\n  overflow: hidden;\n  background: var(--bv-color-neutral-200);\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  flex: 1;\n  min-width: 0;\n  justify-content: space-between;\n}\n\n.meta {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\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-wrap {\n  height: 40px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.description {\n  margin: 0;\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}\n\n.info-row {\n  display: flex;\n  gap: var(--bv-spacing-md);\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  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  flex-shrink: 0;\n  width: 209px;\n  justify-content: center;\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  align-items: stretch;\n  gap: var(--bv-spacing-md);\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  flex-shrink: 0;\n  width: 200px;\n  min-height: 123px;\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-content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  flex: 1;\n  min-width: 0;\n  justify-content: center;\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: 60%;\n}\n\n.skeleton-short-line {\n  width: 40%;\n}\n\n.skeleton-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-sm);\n  flex-shrink: 0;\n  width: 209px;\n  justify-content: center;\n}\n\n.skeleton-button {\n  height: 40px;\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@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:host([variant='outline-secondary']) {\n  --bv-button-bg: transparent;\n  --bv-button-bg-hover: var(--bv-color-neutral-100);\n  --bv-button-color: var(--bv-color-neutral-700);\n  --bv-button-border-color: var(--bv-color-neutral-300);\n  --bv-button-border-color-hover: var(--bv-color-neutral-300);\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";
@@ -312,20 +312,23 @@ var BvCourseListCard = class extends HTMLElement {
         }
       },
       title: () => {
+        var _a2;
         if (this._els.title) this._els.title.textContent = val ?? "";
+        (_a2 = this._els.card) == null ? void 0 : _a2.setAttribute("aria-label", this._buildAriaLabel());
       },
       publisher: () => {
-        if (this._els.publisher) this._els.publisher.innerHTML = `By <strong>${val ?? ""}</strong>`;
+        var _a2;
+        this._setPrefixedStrong(this._els.publisher, "By ", val);
+        (_a2 = this._els.card) == null ? void 0 : _a2.setAttribute("aria-label", this._buildAriaLabel());
       },
       description: () => {
         if (this._els.description) this._els.description.textContent = val ?? "";
       },
       duration: () => {
-        if (this._els.duration) this._els.duration.innerHTML = `<strong>${val ?? ""}</strong>`;
+        this._setPrefixedStrong(this._els.duration, "", val);
       },
       "last-updated": () => {
-        if (this._els.lastUpdated)
-          this._els.lastUpdated.innerHTML = `Last Updated: <strong>${val ?? ""}</strong>`;
+        this._setPrefixedStrong(this._els.lastUpdated, "Last Updated: ", val);
       },
       "primary-label": () => {
         if (this._els.primaryBtn) this._els.primaryBtn.textContent = val ?? "";
@@ -358,8 +361,16 @@ var BvCourseListCard = class extends HTMLElement {
       "hide-secondary": () => {
         if (this._els.secondaryBtn) this._els.secondaryBtn.hidden = this.hideSecondary;
       },
+      selected: () => {
+        var _a2;
+        (_a2 = this._els.card) == null ? void 0 : _a2.setAttribute("aria-checked", this.selected ? "true" : "false");
+      },
+      "disable-selection": () => {
+        this._syncSelectionA11y();
+      },
       loading: () => {
         this._syncLoading();
+        this._syncSelectionA11y();
       }
     };
     (_a = map[name]) == null ? void 0 : _a.call(map);
@@ -375,6 +386,10 @@ var BvCourseListCard = class extends HTMLElement {
     }
     const card = document.createElement("div");
     card.className = "card";
+    card.setAttribute("role", "checkbox");
+    card.setAttribute("tabindex", "0");
+    card.setAttribute("aria-checked", this.selected ? "true" : "false");
+    card.setAttribute("aria-label", this._buildAriaLabel());
     this._els.card = card;
     const thumbWrap = document.createElement("div");
     thumbWrap.className = "thumbnail-wrap";
@@ -400,8 +415,8 @@ var BvCourseListCard = class extends HTMLElement {
     this._els.title = title;
     const publisher = document.createElement("span");
     publisher.className = "publisher";
-    publisher.innerHTML = `By <strong>${this.getAttribute("publisher") ?? ""}</strong>`;
     this._els.publisher = publisher;
+    this._setPrefixedStrong(publisher, "By ", this.getAttribute("publisher"));
     meta.append(title, publisher);
     const descriptionWrap = document.createElement("div");
     descriptionWrap.className = "description-wrap";
@@ -414,12 +429,12 @@ var BvCourseListCard = class extends HTMLElement {
     infoRow.className = "info-row";
     const duration = document.createElement("span");
     duration.className = "info-item";
-    duration.innerHTML = `<strong>${this.getAttribute("duration") ?? ""}</strong>`;
     this._els.duration = duration;
+    this._setPrefixedStrong(duration, "", this.getAttribute("duration"));
     const lastUpdated = document.createElement("span");
     lastUpdated.className = "info-item";
-    lastUpdated.innerHTML = `Last Updated: <strong>${this.getAttribute("last-updated") ?? ""}</strong>`;
     this._els.lastUpdated = lastUpdated;
+    this._setPrefixedStrong(lastUpdated, "Last Updated: ", this.getAttribute("last-updated"));
     infoRow.append(duration, lastUpdated);
     content.append(meta, descriptionWrap, infoRow);
     const actions = document.createElement("div");
@@ -455,18 +470,60 @@ var BvCourseListCard = class extends HTMLElement {
     card.append(thumbWrap, content, actions, skeleton);
     shadow.appendChild(card);
     this._syncLoading();
+    this._syncSelectionA11y();
     card.addEventListener("click", (e) => {
       if (this.disableSelection || this.loading) return;
-      if (e.composedPath().includes(this._els.actions)) return;
-      this.selected = !this.selected;
-      this.dispatchEvent(
-        new CustomEvent("bv-select", {
-          bubbles: true,
-          composed: true,
-          detail: { selected: this.selected }
-        })
-      );
+      const actionsEl = this._els.actions;
+      if (actionsEl && e.composedPath().includes(actionsEl)) return;
+      this._toggleSelected();
     });
+    card.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      if (this.disableSelection || this.loading) return;
+      const actionsEl = this._els.actions;
+      if (actionsEl && e.composedPath().includes(actionsEl)) return;
+      e.preventDefault();
+      this._toggleSelected();
+    });
+  }
+  _toggleSelected() {
+    this.selected = !this.selected;
+    this.dispatchEvent(
+      new CustomEvent("bv-select", {
+        bubbles: true,
+        composed: true,
+        detail: { selected: this.selected }
+      })
+    );
+  }
+  _buildAriaLabel() {
+    const title = this.getAttribute("title") ?? "";
+    const publisher = this.getAttribute("publisher") ?? "";
+    const parts = [];
+    if (title) parts.push(title);
+    if (publisher) parts.push(`by ${publisher}`);
+    return parts.join(", ");
+  }
+  _setPrefixedStrong(el, prefix, val) {
+    if (!el) return;
+    const value = val ?? "";
+    if (!value) {
+      el.hidden = true;
+      el.replaceChildren();
+      return;
+    }
+    el.hidden = false;
+    const strong = document.createElement("strong");
+    strong.textContent = value;
+    if (prefix) el.replaceChildren(document.createTextNode(prefix), strong);
+    else el.replaceChildren(strong);
+  }
+  _syncSelectionA11y() {
+    var _a, _b, _c;
+    const inert = this.disableSelection || this.loading;
+    (_a = this._els.card) == null ? void 0 : _a.setAttribute("tabindex", inert ? "-1" : "0");
+    if (inert) (_b = this._els.card) == null ? void 0 : _b.setAttribute("aria-disabled", "true");
+    else (_c = this._els.card) == null ? void 0 : _c.removeAttribute("aria-disabled");
   }
   _syncLoading() {
     var _a;

package/dist/themes/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 17 Jul 2026 02:50:38 GMT
+ * Generated on Wed, 22 Jul 2026 02:07:11 GMT
  */
 
 :root {
@@ -76,4 +76,5 @@
   --bv-transition-fast: 100ms ease-in-out;
   --bv-transition-normal: 200ms ease-in-out;
   --bv-transition-slow: 300ms ease-in-out;
+  --bv-focus-ring: 2px solid #0277bd;
 }

package/package.json

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

package/themes/base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 17 Jul 2026 02:50:38 GMT
+ * Generated on Wed, 22 Jul 2026 02:07:11 GMT
  */
 
 :root {
@@ -76,4 +76,5 @@
   --bv-transition-fast: 100ms ease-in-out;
   --bv-transition-normal: 200ms ease-in-out;
   --bv-transition-slow: 300ms ease-in-out;
+  --bv-focus-ring: 2px solid #0277bd;
 }