@bluevolt-tech/lumen 1.3.2 → 1.5.0

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

@@ -1,188 +1,8 @@
 // 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";
+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";
 
 // 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
-   Apps can override these three properties per-instance:
-
-   HTML:       <bv-button style="--bv-button-bg: #e53e3e;">
-   Angular:    <bv-button [style.--bv-button-bg]="brandColor">
-   JavaScript: btn.style.setProperty('--bv-button-bg', value)
-
-   Hover is auto-computed from the base colors via color-mix().
-   Override --bv-button-bg-hover / --bv-button-border-color-hover
-   if you need explicit control over the hovered state.
-\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-:host {
-  /* Default values \u2014 map to global tokens (primary variant) */
-  --bv-button-bg: var(--bv-color-primary);
-  --bv-button-bg-hover: color-mix(in srgb, var(--bv-button-bg) 82%, black);
-  --bv-button-color: var(--bv-color-neutral-0);
-  --bv-button-border-color: var(--bv-color-primary);
-  --bv-button-border-color-hover: color-mix(in srgb, var(--bv-button-border-color) 82%, black);
-  --bv-button-font-family: var(--bv-font-family-base);
-  --bv-button-font-size: var(--bv-font-size-sm);
-
-  display: inline-block;
-  font-family: var(--bv-font-family-base);
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-:host([full-width]) {
-  display: block;
-  width: 100%;
-}
-
-/* \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
-   Each variant re-points the component tokens to different global
-   tokens. Apps can still override with inline styles \u2014 inline style
-   always wins due to higher specificity.
-\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-:host([variant='secondary']) {
-  --bv-button-bg: var(--bv-color-secondary);
-  --bv-button-border-color: var(--bv-color-secondary);
-  --bv-button-color: var(--bv-color-secondary-foreground);
-}
-
-:host([variant='tertiary']) {
-  --bv-button-bg: var(--bv-color-tertiary);
-  --bv-button-border-color: var(--bv-color-tertiary);
-}
-
-:host([variant='danger']) {
-  --bv-button-bg: var(--bv-color-danger);
-  --bv-button-border-color: var(--bv-color-danger);
-}
-
-:host([variant='ghost']) {
-  --bv-button-bg: transparent;
-  --bv-button-bg-hover: var(--bv-color-primary-light);
-  --bv-button-color: var(--bv-color-primary);
-  --bv-button-border-color: transparent;
-  --bv-button-border-color-hover: transparent;
-}
-
-:host([variant='outline']) {
-  --bv-button-bg: transparent;
-  --bv-button-bg-hover: var(--bv-color-primary-light);
-  --bv-button-color: var(--bv-color-primary);
-  --bv-button-border-color: var(--bv-color-primary);
-  --bv-button-border-color-hover: var(--bv-color-primary);
-}
-
-/* \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
-   All visual properties read from the component-level tokens above.
-\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--bv-spacing-xs);
-  padding: 10px var(--bv-spacing-md);
-  min-height: 40px;
-  width: auto;
-  font-family: var(--bv-button-font-family);
-  font-size: var(--bv-button-font-size);
-  font-style: normal;
-  font-weight: var(--bv-font-weight-semibold);
-  line-height: 20px;
-  border: 1px solid var(--bv-button-border-color);
-  border-radius: var(--bv-radius-lg);
-  cursor: pointer;
-  transition:
-    background var(--bv-transition-fast),
-    color var(--bv-transition-fast),
-    border-color var(--bv-transition-fast),
-    box-shadow var(--bv-transition-fast),
-    opacity var(--bv-transition-fast);
-  white-space: nowrap;
-  user-select: none;
-  text-decoration: none;
-  outline: none;
-  box-sizing: border-box;
-  background: var(--bv-button-bg);
-  color: var(--bv-button-color);
-  box-shadow: var(--bv-shadow-sm);
-}
-
-:host([full-width]) .btn {
-  width: 100%;
-}
-
-.btn:hover:not(:disabled) {
-  background: var(--bv-button-bg-hover);
-  border-color: var(--bv-button-border-color-hover);
-}
-
-.btn:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.btn:focus-visible {
-  outline: 2px solid var(--bv-button-border-color);
-  outline-offset: 2px;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* \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*/
-
-:host([size='sm']) .btn {
-  padding: 6px 12px;
-  min-height: 32px;
-  font-size: var(--bv-font-size-sm);
-}
-
-:host([size='lg']) .btn {
-  padding: 12px var(--bv-spacing-lg);
-  min-height: 48px;
-  font-size: var(--bv-font-size-md);
-}
-
-/* \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*/
-
-.btn-icon {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  line-height: 0;
-}
-
-/* \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*/
-
-.btn-count {
-  opacity: 0.8;
-  font-weight: var(--bv-font-weight-regular);
-}
-
-/* \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*/
-
-.spinner {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  flex-shrink: 0;
-  animation: bv-spin 700ms linear infinite;
-}
-
-@keyframes bv-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-`;
+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";
 
 // components/bv-icon/icons.ts
 var icons = {
@@ -366,7 +186,7 @@ var BvButton = class extends HTMLElement {
     }
     btn.querySelectorAll(".btn-icon").forEach((el) => el.remove());
     const iconName = this.getAttribute("icon");
-    if (iconName) {
+    if (iconName && !this.loading) {
       const svg = getIconSvg(iconName, 16);
       if (svg) {
         const iconEl = document.createElement("span");
@@ -407,8 +227,14 @@ var BvCourseGridCard = class extends HTMLElement {
     "primary-label",
     "primary-variant",
     "primary-icon",
+    "primary-loading",
+    "primary-disabled",
+    "secondary-label",
     "secondary-icon",
-    "selected"
+    "selected",
+    "disable-selection",
+    "hide-secondary",
+    "loading"
   ];
   get selected() {
     return this.hasAttribute("selected");
@@ -417,6 +243,41 @@ var BvCourseGridCard = class extends HTMLElement {
     if (v) this.setAttribute("selected", "");
     else this.removeAttribute("selected");
   }
+  get disableSelection() {
+    return this.hasAttribute("disable-selection");
+  }
+  set disableSelection(v) {
+    if (v) this.setAttribute("disable-selection", "");
+    else this.removeAttribute("disable-selection");
+  }
+  get hideSecondary() {
+    return this.hasAttribute("hide-secondary");
+  }
+  set hideSecondary(v) {
+    if (v) this.setAttribute("hide-secondary", "");
+    else this.removeAttribute("hide-secondary");
+  }
+  get primaryLoading() {
+    return this.hasAttribute("primary-loading");
+  }
+  set primaryLoading(v) {
+    if (v) this.setAttribute("primary-loading", "");
+    else this.removeAttribute("primary-loading");
+  }
+  get primaryDisabled() {
+    return this.hasAttribute("primary-disabled");
+  }
+  set primaryDisabled(v) {
+    if (v) this.setAttribute("primary-disabled", "");
+    else this.removeAttribute("primary-disabled");
+  }
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(v) {
+    if (v) this.setAttribute("loading", "");
+    else this.removeAttribute("loading");
+  }
   _rendered = false;
   _els = {};
   constructor() {
@@ -472,9 +333,28 @@ var BvCourseGridCard = class extends HTMLElement {
         var _a2;
         (_a2 = this._els.primaryBtn) == null ? void 0 : _a2.setAttribute("icon", val ?? "");
       },
+      "primary-loading": () => {
+        var _a2, _b;
+        if (val === null) (_a2 = this._els.primaryBtn) == null ? void 0 : _a2.removeAttribute("loading");
+        else (_b = this._els.primaryBtn) == null ? void 0 : _b.setAttribute("loading", "");
+      },
+      "primary-disabled": () => {
+        var _a2, _b;
+        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 ?? "");
+      },
+      "hide-secondary": () => {
+        if (this._els.secondaryBtn) this._els.secondaryBtn.hidden = this.hideSecondary;
+      },
+      loading: () => {
+        this._syncLoading();
       }
     };
     (_a = map[name]) == null ? void 0 : _a.call(map);
@@ -490,6 +370,7 @@ var BvCourseGridCard = class extends HTMLElement {
     }
     const card = document.createElement("div");
     card.className = "card";
+    this._els.card = card;
     const thumbWrap = document.createElement("div");
     thumbWrap.className = "thumbnail-wrap";
     const thumb = document.createElement("img");
@@ -539,6 +420,8 @@ var BvCourseGridCard = class extends HTMLElement {
     primaryBtn.setAttribute("full-width", "");
     primaryBtn.className = "primary-action";
     primaryBtn.textContent = this.getAttribute("primary-label") ?? "Enroll Now";
+    if (this.primaryLoading) primaryBtn.setAttribute("loading", "");
+    if (this.primaryDisabled) primaryBtn.setAttribute("disabled", "");
     primaryBtn.addEventListener("click", () => {
       this.dispatchEvent(new CustomEvent("bv-primary-action", { bubbles: true, composed: true }));
     });
@@ -549,15 +432,24 @@ var BvCourseGridCard = class extends HTMLElement {
     secondaryBtn.setAttribute("size", "lg");
     secondaryBtn.setAttribute("full-width", "");
     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;
-    card.append(thumbWrap, content, actions);
+    const skeleton = document.createElement("div");
+    skeleton.className = "skeleton";
+    skeleton.setAttribute("aria-hidden", "true");
+    skeleton.innerHTML = '<div class="skeleton-thumb"></div><div class="skeleton-line skeleton-title-line"></div><div class="skeleton-line skeleton-short-line"></div><div class="skeleton-line"></div><div class="skeleton-line skeleton-short-line"></div><div class="skeleton-actions"><div class="skeleton-button skeleton-primary"></div><div class="skeleton-button skeleton-icon-btn"></div></div>';
+    this._els.skeleton = skeleton;
+    card.append(thumbWrap, content, actions, skeleton);
     shadow.appendChild(card);
+    this._syncLoading();
     card.addEventListener("click", (e) => {
+      if (this.disableSelection || this.loading) return;
       if (e.composedPath().includes(this._els.actions)) return;
       this.selected = !this.selected;
       this.dispatchEvent(
@@ -569,6 +461,16 @@ 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;
+    (_a = this._els.card) == null ? void 0 : _a.setAttribute("aria-busy", loading ? "true" : "false");
+  }
 };
 if (!customElements.get("bv-course-grid-card")) {
   customElements.define("bv-course-grid-card", BvCourseGridCard);

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

@@ -3,10 +3,21 @@ export declare class BvCourseListCard extends HTMLElement {
     static readonly observedAttributes: string[];
     get selected(): boolean;
     set selected(v: boolean);
+    get disableSelection(): boolean;
+    set disableSelection(v: boolean);
+    get hideSecondary(): boolean;
+    set hideSecondary(v: boolean);
+    get primaryLoading(): boolean;
+    set primaryLoading(v: boolean);
+    get primaryDisabled(): boolean;
+    set primaryDisabled(v: boolean);
+    get loading(): boolean;
+    set loading(v: boolean);
     private _rendered;
     private _els;
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
     private _render;
+    private _syncLoading;
 }