@bluevolt-tech/lumen 2.3.1 → 2.6.1

package/README.md

@@ -225,7 +225,7 @@ The DevOps setup (npm org, automation token, GitHub secret) is documented once a
 **What gets published:**
 
 - `dist/` — Compiled JS + TypeScript declarations
-- `themes/` — Generated CSS files (base.css, layouts.css)
+- `themes/` — Theme CSS (`base.css`, generated from `tokens/base.json`; `layouts.css`, hand-maintained)
 - `assets/` — Static files (fonts.css, icons)
 
 **Local testing before publish:**

package/dist/components/_shared/attribute-dispatch.d.ts

@@ -0,0 +1,44 @@
+/**
+ * A table of attribute names to the updater that repaints that attribute.
+ *
+ * Written as an object literal at the call site, because a keyed handler table
+ * reads best that way. `dispatchAttribute` is what makes reading from it safe.
+ */
+export type AttributeHandlers = Record<string, () => void>;
+/**
+ * Run the handler registered for `name`, or nothing if there is none.
+ *
+ * Call this from `attributeChangedCallback` instead of indexing the table with
+ * the incoming name:
+ *
+ * ```ts
+ * attributeChangedCallback(name: string, _old: string | null, val: string | null) {
+ *   if (!this._rendered) return;
+ *   dispatchAttribute(
+ *     {
+ *       label: () => { … },
+ *       disabled: () => { … },
+ *     },
+ *     name,
+ *   );
+ * }
+ * ```
+ *
+ * Why not `handlers[name]?.()`: a plain-object index walks the prototype chain,
+ * so `handlers['constructor']` yields `Object.prototype.constructor` — a
+ * function, therefore truthy, therefore past the `?.` guard, and then called.
+ * `Object.entries` returns own enumerable properties only, and `Map.get` never
+ * consults a prototype, so a name that was not registered resolves to
+ * `undefined` and the optional call is a genuine no-op.
+ *
+ * `attributeChangedCallback` only fires for names in `observedAttributes`, so
+ * no prototype key can reach this from the browser today — BTN-11344 is debt,
+ * not a live hole. It is centralised anyway so the pattern has one place to be
+ * reviewed and fixed, rather than four copies that drift. The live version of
+ * the same bug was BTN-11341, where the name came off an attribute instead.
+ *
+ * The Map is built per call because the handlers close over the incoming `val`
+ * and cannot be hoisted. That costs less than the object literal and its
+ * closures, which the caller is already allocating on the same statement.
+ */
+export declare function dispatchAttribute(handlers: AttributeHandlers, name: string): void;

package/dist/components/_shared/tree-selection.d.ts

@@ -0,0 +1,67 @@
+/**
+ * One row of a flattened tree.
+ *
+ * `parent` is the `value` of the row's parent, or `null` for a root. It is
+ * deliberately NOT a nesting level: a level is positional, so it stops meaning
+ * anything the moment a filter removes a row from the middle. A parent id
+ * survives filtering, which is the case this has to work in.
+ */
+export interface TreeRow {
+    value: string;
+    parent: string | null;
+    checked: boolean;
+}
+/** How a node draws: `mixed` is the dash. */
+export type TriState = 'checked' | 'mixed' | 'unchecked';
+/** What a click resolves to. */
+export interface ClickResolution {
+    /** Every value the click changes, the clicked one first. */
+    affected: string[];
+    /** The state to apply to all of them. */
+    checked: boolean;
+}
+/**
+ * Every descendant of `value`, at any depth, in row order.
+ *
+ * The `seen` set is not defensive programming for its own sake: `parent` comes
+ * off a `data-*` attribute, so a consumer bug can produce a cycle, and a cycle
+ * here would hang the main thread inside a click handler — the exact failure
+ * BTN-11850 spent a day on. It costs one Set.
+ */
+export declare function descendantsOf(rows: TreeRow[], value: string): string[];
+/**
+ * How every node draws, given what is checked.
+ *
+ * A node is `checked` only when it AND all of its descendants are; `unchecked`
+ * only when none of them is; `mixed` otherwise. So a parent that is itself
+ * selected but has an unselected descendant draws a dash — which is the state
+ * the design shows for "Legrand University" after its "Channel Partners"
+ * branch is cleared, and the reason this cannot be read off the row's own
+ * `checked` alone.
+ *
+ * `mixed` propagates all the way up: clearing a leaf three levels down leaves
+ * every ancestor dashed, not just its immediate parent.
+ */
+export declare function computeStates(rows: TreeRow[]): Map<string, TriState>;
+/**
+ * What a click on `value` should do.
+ *
+ * One rule covers the whole acceptance table:
+ *
+ *   · a node that is fully selected clears its branch;
+ *   · a node that is unselected OR partial fills its branch.
+ *
+ * The second half is what makes a partial node fill rather than clear, and it
+ * falls out of asking "is this fully selected?" instead of "is this checked?".
+ * Reading the row's own `checked` would clear from partial for any parent
+ * whose own id happens to be in the set — which is most of them.
+ *
+ * `branch` is false while a search is narrowing the list. There the click
+ * takes only the node itself: the user filtered to something specific, and
+ * taking descendants they cannot see would put rows in the report with nothing
+ * on screen to explain them. The component reasons only about what is rendered
+ * — the same rule that makes the dash reflect visible rows. Decided with the
+ * team on 2026-09-17; the ticket does not cover this case, and the reasoning
+ * is recorded on it.
+ */
+export declare function resolveClick(rows: TreeRow[], value: string, branch: boolean): ClickResolution;

package/dist/components/bv-alert-banner/bv-alert-banner.js

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-alert-banner/bv-alert-banner.css
-var bv_alert_banner_default = ":host {\n  --banner-bg: var(--bv-color-neutral-0);\n  --banner-border: var(--bv-color-neutral-200);\n  --banner-color: var(--bv-color-neutral-700);\n  --banner-color-subtle: var(--bv-color-neutral-500);\n  --banner-icon-color: var(--bv-color-neutral-500);\n\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='primary']) {\n  --banner-bg: var(--bv-color-primary-50);\n  --banner-border: color-mix(in srgb, var(--bv-color-primary) 40%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-primary);\n  --banner-color-subtle: var(--bv-color-primary);\n  --banner-icon-color: var(--bv-color-primary);\n}\n\n:host([variant='error']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-danger-light) 35%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-danger) 45%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-danger-dark);\n  --banner-color-subtle: var(--bv-color-danger-dark);\n  --banner-icon-color: var(--bv-color-danger);\n}\n\n:host([variant='warning']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-warning-light) 35%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-warning) 50%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-warning-dark);\n  --banner-color-subtle: var(--bv-color-warning-dark);\n  --banner-icon-color: var(--bv-color-warning);\n}\n\n:host([variant='success']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-success-light) 30%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-success) 40%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-success-dark);\n  --banner-color-subtle: var(--bv-color-success-dark);\n  --banner-icon-color: var(--bv-color-success);\n}\n\n/* \u2500\u2500 Banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bv-spacing-md);\n  padding: var(--bv-spacing-md);\n  background: var(--banner-bg);\n  border: 1px solid var(--banner-border);\n  border-radius: var(--bv-radius-xl);\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 */\n\n.banner-icon {\n  display: flex;\n  flex-shrink: 0;\n  margin-top: 0;\n  color: var(--banner-icon-color);\n  line-height: 0;\n}\n\n/* \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-xs);\n  min-width: 0;\n}\n\n.banner-heading {\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  color: var(--banner-color);\n}\n\n.banner-heading[hidden] {\n  display: none;\n}\n\n.banner-message {\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  line-height: 20px;\n  color: var(--banner-color);\n}\n\n.banner-message[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-md);\n  margin-top: var(--bv-spacing-xs);\n}\n\n.banner-actions[hidden] {\n  display: none;\n}\n\n.action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  color: var(--banner-color);\n  transition: opacity 0.15s;\n}\n\n.action-btn[hidden] {\n  display: none;\n}\n\n.action-btn:hover {\n  opacity: 0.75;\n}\n\n.action-btn:focus-visible {\n  outline: 2px solid var(--banner-color);\n  outline-offset: 2px;\n  border-radius: var(--bv-radius-sm);\n}\n\n/* \u2500\u2500 Close 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 */\n\n.close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  margin: -6px -6px 0 0;\n  background: none;\n  border: none;\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  color: var(--banner-icon-color);\n  transition: background 0.15s;\n  padding: 0;\n}\n\n.close-btn[hidden] {\n  display: none;\n}\n\n.close-btn:hover {\n  background: color-mix(in srgb, var(--banner-border) 60%, var(--banner-bg));\n}\n\n.close-btn:focus-visible {\n  outline: 2px solid var(--banner-color);\n  outline-offset: 2px;\n}\n";
+var bv_alert_banner_default = ":host {\n  --banner-bg: var(--bv-color-neutral-0);\n  --banner-border: var(--bv-color-neutral-200);\n  --banner-color: var(--bv-color-neutral-700);\n  --banner-color-subtle: var(--bv-color-neutral-500);\n  --banner-icon-color: var(--bv-color-neutral-500);\n\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='primary']) {\n  --banner-bg: var(--bv-color-primary-50);\n  --banner-border: color-mix(in srgb, var(--bv-color-primary) 40%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-primary);\n  --banner-color-subtle: var(--bv-color-primary);\n  --banner-icon-color: var(--bv-color-primary);\n}\n\n:host([variant='error']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-danger-light) 35%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-danger) 45%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-danger-dark);\n  --banner-color-subtle: var(--bv-color-danger-dark);\n  --banner-icon-color: var(--bv-color-danger);\n}\n\n:host([variant='warning']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-warning-light) 35%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-warning) 50%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-warning-dark);\n  --banner-color-subtle: var(--bv-color-warning-dark);\n  --banner-icon-color: var(--bv-color-warning);\n}\n\n:host([variant='success']) {\n  --banner-bg: color-mix(in srgb, var(--bv-color-success-light) 30%, var(--bv-color-neutral-0));\n  --banner-border: color-mix(in srgb, var(--bv-color-success) 40%, var(--bv-color-neutral-0));\n  --banner-color: var(--bv-color-success-dark);\n  --banner-color-subtle: var(--bv-color-success-dark);\n  --banner-icon-color: var(--bv-color-success);\n}\n\n/* \u2500\u2500 Banner \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--bv-spacing-md);\n  padding: var(--bv-spacing-md);\n  background: var(--banner-bg);\n  border: 1px solid var(--banner-border);\n  border-radius: var(--bv-radius-xl);\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 */\n\n.banner-icon {\n  display: flex;\n  flex-shrink: 0;\n  margin-top: 0;\n  color: var(--banner-icon-color);\n  line-height: 0;\n}\n\n/* \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--bv-spacing-xs);\n  min-width: 0;\n}\n\n.banner-heading {\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  color: var(--banner-color);\n}\n\n.banner-heading[hidden] {\n  display: none;\n}\n\n.banner-message {\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  line-height: 20px;\n  color: var(--banner-color);\n}\n\n.banner-message[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.banner-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--bv-spacing-md);\n  margin-top: var(--bv-spacing-xs);\n}\n\n.banner-actions[hidden] {\n  display: none;\n}\n\n.action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  line-height: 20px;\n  color: var(--banner-color);\n  transition: opacity 0.15s;\n}\n\n.action-btn[hidden] {\n  display: none;\n}\n\n.action-btn:hover {\n  opacity: 0.75;\n}\n\n.action-btn:focus-visible {\n  outline: 2px solid var(--banner-color);\n  outline-offset: 2px;\n  border-radius: var(--bv-radius-sm);\n}\n\n/* \u2500\u2500 Close 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 */\n\n.close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  margin: -6px -6px 0 0;\n  background: none;\n  border: none;\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  color: var(--banner-icon-color);\n  transition: background 0.15s;\n  padding: 0;\n}\n\n.close-btn[hidden] {\n  display: none;\n}\n\n.close-btn:hover {\n  background: color-mix(in srgb, var(--banner-border) 60%, var(--banner-bg));\n}\n\n.close-btn:focus-visible {\n  outline: 2px solid var(--banner-color);\n  outline-offset: 2px;\n}\n\n/* These elements have an author `display`, which beats the user-agent\n   `[hidden] { display: none }` regardless of specificity. The component\n   toggles their `hidden`, so without this the property changes nothing on\n   screen (BTN-11521). */\n.close-btn[hidden] {\n  display: none;\n}\n";
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();

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

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-avatar/bv-avatar.css
-var bv_avatar_default = ":host {\n  --bv-avatar-size: 40px;\n  --bv-avatar-bg: var(--bv-color-primary-light);\n  --bv-avatar-color: var(--bv-color-primary);\n  --bv-avatar-radius: var(--bv-radius-full);\n  display: inline-flex;\n}\n\n:host([size='xs']) {\n  --bv-avatar-size: 24px;\n}\n:host([size='sm']) {\n  --bv-avatar-size: 32px;\n}\n:host([size='md']) {\n  --bv-avatar-size: 40px;\n}\n:host([size='lg']) {\n  --bv-avatar-size: 48px;\n}\n:host([size='xl']) {\n  --bv-avatar-size: 64px;\n}\n\n.avatar {\n  width: var(--bv-avatar-size);\n  height: var(--bv-avatar-size);\n  border-radius: var(--bv-avatar-radius);\n  background: var(--bv-avatar-bg);\n  color: var(--bv-avatar-color);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  flex-shrink: 0;\n  font-family: var(--bv-font-family-base);\n  font-weight: var(--bv-font-weight-semibold);\n  font-size: calc(var(--bv-avatar-size) * 0.38);\n  user-select: none;\n}\n\n.avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n";
+var bv_avatar_default = ":host {\n  --bv-avatar-size: 40px;\n  --bv-avatar-bg: var(--bv-color-primary-light);\n  --bv-avatar-color: var(--bv-color-primary);\n  --bv-avatar-radius: var(--bv-radius-full);\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='xs']) {\n  --bv-avatar-size: 24px;\n}\n:host([size='sm']) {\n  --bv-avatar-size: 32px;\n}\n:host([size='md']) {\n  --bv-avatar-size: 40px;\n}\n:host([size='lg']) {\n  --bv-avatar-size: 48px;\n}\n:host([size='xl']) {\n  --bv-avatar-size: 64px;\n}\n\n.avatar {\n  width: var(--bv-avatar-size);\n  height: var(--bv-avatar-size);\n  border-radius: var(--bv-avatar-radius);\n  background: var(--bv-avatar-bg);\n  color: var(--bv-avatar-color);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  flex-shrink: 0;\n  font-family: var(--bv-font-family-base);\n  font-weight: var(--bv-font-weight-semibold);\n  font-size: calc(var(--bv-avatar-size) * 0.38);\n  user-select: none;\n}\n\n.avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n";
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();

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

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-badge/bv-badge.css
-var bv_badge_default = ":host {\n  --bv-badge-bg: var(--bv-color-neutral-200);\n  --bv-badge-color: var(--bv-color-neutral-700);\n  display: inline-flex;\n}\n\n:host([variant='primary']) {\n  --bv-badge-bg: var(--bv-color-primary-light);\n  --bv-badge-color: var(--bv-color-primary);\n}\n:host([variant='success']) {\n  --bv-badge-bg: var(--bv-color-success-light);\n  --bv-badge-color: var(--bv-color-success);\n}\n:host([variant='warning']) {\n  --bv-badge-bg: var(--bv-color-warning-light);\n  --bv-badge-color: var(--bv-color-warning);\n}\n:host([variant='danger']) {\n  --bv-badge-bg: var(--bv-color-danger-light);\n  --bv-badge-color: var(--bv-color-danger);\n}\n:host([variant='info']) {\n  --bv-badge-bg: var(--bv-color-primary-50);\n  --bv-badge-color: var(--bv-color-primary);\n}\n:host([variant='purple']) {\n  --bv-badge-bg: var(--bv-color-purple-light);\n  --bv-badge-color: var(--bv-color-purple);\n}\n:host([variant='orange']) {\n  --bv-badge-bg: var(--bv-color-orange-light);\n  --bv-badge-color: var(--bv-color-orange);\n}\n:host([variant='indigo']) {\n  --bv-badge-bg: var(--bv-color-neutral-100);\n  --bv-badge-color: var(--bv-color-indigo);\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-badge-bg);\n  color: var(--bv-badge-color);\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  white-space: nowrap;\n}\n\n:host([size='sm']) .badge {\n  padding: 1px 6px;\n  font-size: 11px;\n  line-height: 16px;\n}\n\n:host([size='lg']) .badge {\n  padding: 3px 10px;\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n}\n\n.dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: currentColor;\n  flex-shrink: 0;\n}\n";
+var bv_badge_default = ":host {\n  --bv-badge-bg: var(--bv-color-neutral-200);\n  --bv-badge-color: var(--bv-color-neutral-700);\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='primary']) {\n  --bv-badge-bg: var(--bv-color-primary-light);\n  --bv-badge-color: var(--bv-color-primary);\n}\n:host([variant='success']) {\n  --bv-badge-bg: var(--bv-color-success-light);\n  --bv-badge-color: var(--bv-color-success);\n}\n:host([variant='warning']) {\n  --bv-badge-bg: var(--bv-color-warning-light);\n  --bv-badge-color: var(--bv-color-warning);\n}\n:host([variant='danger']) {\n  --bv-badge-bg: var(--bv-color-danger-light);\n  --bv-badge-color: var(--bv-color-danger);\n}\n:host([variant='info']) {\n  --bv-badge-bg: var(--bv-color-primary-50);\n  --bv-badge-color: var(--bv-color-primary);\n}\n:host([variant='purple']) {\n  --bv-badge-bg: var(--bv-color-purple-light);\n  --bv-badge-color: var(--bv-color-purple);\n}\n:host([variant='orange']) {\n  --bv-badge-bg: var(--bv-color-orange-light);\n  --bv-badge-color: var(--bv-color-orange);\n}\n:host([variant='indigo']) {\n  --bv-badge-bg: var(--bv-color-neutral-100);\n  --bv-badge-color: var(--bv-color-indigo);\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: var(--bv-radius-full);\n  background: var(--bv-badge-bg);\n  color: var(--bv-badge-color);\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  white-space: nowrap;\n}\n\n:host([size='sm']) .badge {\n  padding: 1px 6px;\n  font-size: 11px;\n  line-height: 16px;\n}\n\n:host([size='lg']) .badge {\n  padding: 3px 10px;\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n}\n\n.dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: currentColor;\n  flex-shrink: 0;\n}\n";
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();

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

@@ -2,7 +2,7 @@
 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";
 
 // components/bv-icon/icons.ts
-var icons = {
+var icons = Object.assign(/* @__PURE__ */ Object.create(null), {
   // Navigation
   "chevron-up": `<path d="M18 15l-6-6-6 6"/>`,
   "chevron-down": `<path d="M6 9l6 6 6-6"/>`,
@@ -53,16 +53,16 @@ var icons = {
   bell: `<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>`,
   mail: `<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>`,
   link: `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`
-};
+});
 function getIconSvg(name, size = 16) {
-  const raw = rawIcons[name];
+  const raw = RAW_ICON_MAP.get(name);
   if (raw)
     return raw.replace(/width="[^"]*"/, `width="${size}"`).replace(/height="[^"]*"/, `height="${size}"`);
-  const paths = icons[name];
+  const paths = ICON_MAP.get(name);
   if (!paths) return "";
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
 }
-var rawIcons = {
+var rawIcons = Object.assign(/* @__PURE__ */ Object.create(null), {
   // Module type (small, ~18px)
   "module-scorm": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 15.03 16.28" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.9014 4.60034L7.51368 8.14201M7.51368 8.14201L1.126 4.60034M7.51368 8.14201L7.5137 15.267M14.2771 11.1859V5.09812C14.2771 4.84113 14.2771 4.71264 14.2392 4.59804C14.2056 4.49666 14.1508 4.4036 14.0783 4.32508C13.9963 4.23633 13.8838 4.17393 13.6587 4.04913L8.09763 0.965793C7.88451 0.847624 7.77794 0.78854 7.66509 0.765376C7.56521 0.744875 7.46219 0.744875 7.36231 0.765376C7.24946 0.78854 7.1429 0.847624 6.92977 0.965793L1.36873 4.04913C1.14364 4.17393 1.0311 4.23633 0.949147 4.32508C0.876647 4.4036 0.82178 4.49666 0.788217 4.59804C0.750278 4.71264 0.750278 4.84113 0.750278 5.09812V11.1859C0.750278 11.4429 0.750278 11.5714 0.788217 11.686C0.82178 11.7874 0.876647 11.8805 0.949147 11.959C1.0311 12.0477 1.14364 12.1101 1.36873 12.2349L6.92977 15.3183C7.1429 15.4364 7.24946 15.4955 7.36231 15.5187C7.46219 15.5392 7.56521 15.5392 7.66509 15.5187C7.77794 15.4955 7.88451 15.4364 8.09763 15.3183L13.6587 12.2349C13.8838 12.1101 13.9963 12.0477 14.0783 11.959C14.1508 11.8805 14.2056 11.7874 14.2392 11.686C14.2771 11.5714 14.2771 11.4429 14.2771 11.1859Z"/></svg>`,
   "module-assessment": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 13.72 16.13" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.507 6.1875V4.1625C12.507 2.90238 12.507 2.27232 12.2629 1.79102C12.0482 1.36766 11.7056 1.02345 11.2841 0.807736C10.8051 0.5625 10.1779 0.5625 8.92364 0.5625H4.14585C2.89156 0.5625 2.26441 0.5625 1.78534 0.807736C1.36393 1.02345 1.02132 1.36766 0.806601 1.79102C0.5625 2.27232 0.5625 2.90238 0.5625 4.1625V11.9625C0.5625 13.2226 0.5625 13.8527 0.806601 14.334C1.02132 14.7573 1.36393 15.1015 1.78534 15.3173C2.26441 15.5625 2.89156 15.5625 4.14585 15.5625H8.0278M8.0278 7.3125H3.54862M5.04168 10.3125H3.54862M9.52086 4.3125H3.54862M9.89413 10.3142C10.0257 9.93852 10.2853 9.62175 10.627 9.41998C10.9688 9.21821 11.3705 9.14445 11.7612 9.21178C12.1519 9.2791 12.5062 9.48315 12.7615 9.7878C13.0168 10.0925 13.1565 10.478 13.1559 10.8763C13.1559 12.0004 11.4775 12.5625 11.4775 12.5625M11.4991 14.8125H11.5066"/></svg>`,
@@ -72,7 +72,9 @@ var rawIcons = {
   "module-adobe-connect": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16.06 14.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.7605 0.56252L8.0278 3.56252L4.29515 0.56252M4.14585 14.0625H11.9098C13.164 14.0625 13.7912 14.0625 14.2703 13.8173C14.6917 13.6016 15.0343 13.2574 15.249 12.834C15.4931 12.3527 15.4931 11.7226 15.4931 10.4625V7.16252C15.4931 5.9024 15.4931 5.27234 15.249 4.79104C15.0343 4.36768 14.6917 4.02347 14.2703 3.80776C13.7912 3.56252 13.164 3.56252 11.9098 3.56252H4.14585C2.89156 3.56252 2.26441 3.56252 1.78534 3.80776C1.36393 4.02347 1.02132 4.36768 0.806601 4.79104C0.5625 5.27234 0.5625 5.9024 0.5625 7.16252V10.4625C0.5625 11.7226 0.5625 12.3527 0.806601 12.834C1.02132 13.2574 1.36393 13.6016 1.78534 13.8173C2.26441 14.0625 2.89156 14.0625 4.14585 14.0625Z"/></svg>`,
   "module-video": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16.06 11.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.4931 3.51103C15.4931 3.05667 15.4931 2.82949 15.4037 2.72429C15.3261 2.63301 15.2097 2.58457 15.0906 2.59399C14.9533 2.60484 14.7934 2.76548 14.4736 3.08676L11.7605 5.8125L14.4736 8.53824C14.7934 8.85952 14.9533 9.02016 15.0906 9.03101C15.2097 9.04043 15.3261 8.99199 15.4037 8.90071C15.4931 8.79552 15.4931 8.56833 15.4931 8.11397V3.51103ZM0.5625 4.1625C0.5625 2.90238 0.5625 2.27232 0.806601 1.79102C1.02132 1.36766 1.36393 1.02345 1.78534 0.807736C2.26441 0.5625 2.89156 0.5625 4.14585 0.5625H8.17711C9.4314 0.5625 10.0585 0.5625 10.5376 0.807736C10.959 1.02345 11.3016 1.36766 11.5164 1.79102C11.7605 2.27232 11.7605 2.90238 11.7605 4.1625V7.4625C11.7605 8.72262 11.7605 9.35268 11.5164 9.83398C11.3016 10.2573 10.959 10.6015 10.5376 10.8173C10.0585 11.0625 9.4314 11.0625 8.17711 11.0625H4.14584C2.89156 11.0625 2.26441 11.0625 1.78534 10.8173C1.36393 10.6015 1.02132 10.2573 0.806601 9.83398C0.5625 9.35268 0.5625 8.72262 0.5625 7.4625V4.1625Z"/></svg>`,
   "module-upload": `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 14.75 16.13" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.39 4.3125V4.1625C13.39 2.90238 13.39 2.27232 13.1278 1.79102C12.8972 1.36766 12.5293 1.02345 12.0767 0.807736C11.5622 0.5625 10.8887 0.5625 9.54172 0.5625H4.41074C3.06373 0.5625 2.39022 0.5625 1.87573 0.807736C1.42318 1.02345 1.05524 1.36766 0.824646 1.79102C0.5625 2.27232 0.5625 2.90238 0.5625 4.1625V11.9625C0.5625 13.2226 0.5625 13.8527 0.824646 14.334C1.05524 14.7573 1.42318 15.1015 1.87573 15.3173C2.39022 15.5625 3.06373 15.5625 4.41074 15.5625H7.37709M7.37709 7.3125H3.76936M6.57537 10.3125H3.76936M10.1831 4.3125H3.76936M11.7865 12.5625V8.4375C11.7865 7.81618 12.3249 7.3125 12.9891 7.3125C13.6533 7.3125 14.1917 7.81618 14.1917 8.4375V12.5625C14.1917 13.8051 13.1149 14.8125 11.7865 14.8125C10.4582 14.8125 9.38138 13.8051 9.38138 12.5625V9.5625"/></svg>`
-};
+});
+var RAW_ICON_MAP = new Map(Object.entries(rawIcons));
+var ICON_MAP = new Map(Object.entries(icons));
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();

package/dist/components/bv-category-pill/bv-category-pill.js

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-category-pill/bv-category-pill.css
-var bv_category_pill_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px 6px;\n  border: 0.5px solid var(--bv-color-neutral-900);\n  border-radius: var(--bv-radius-sm);\n  font-size: 10px;\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  line-height: 1;\n  white-space: nowrap;\n}\n";
+var bv_category_pill_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px 6px;\n  border: 0.5px solid var(--bv-color-neutral-900);\n  border-radius: var(--bv-radius-sm);\n  font-size: 10px;\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  line-height: 1;\n  white-space: nowrap;\n}\n";
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();

package/dist/components/bv-checkbox/bv-checkbox.d.ts

@@ -1,6 +1,7 @@
 export declare class BvCheckbox extends HTMLElement {
-    static readonly observedAttributes: string[];
+    static readonly observedAttributes: readonly ["checked", "indeterminate", "disabled", "label", "size"];
     private _rendered;
+    private _wrapEl;
     private _checkEl;
     private _labelEl;
     constructor();
@@ -9,6 +10,19 @@ export declare class BvCheckbox extends HTMLElement {
     get checked(): boolean;
     set checked(v: boolean);
     get indeterminate(): boolean;
+    /**
+     * Focus the checkbox. The focusable element is the internal `.wrap`, not the
+     * host, so `hostEl.focus()` would otherwise be a silent no-op. Consumers that
+     * rebuild a list of checkboxes (bv-filter-panel, and any screen re-rendering
+     * a tree into bv-input-dropdown) need this to restore focus after the rebuild
+     * without reaching into this component's shadow root.
+     *
+     * No-op before the first render, and when disabled — a native disabled
+     * checkbox cannot be focused programmatically either, and `tabindex="-1"`
+     * alone would not have stopped it (that only removes it from Tab order).
+     */
+    focus(options?: FocusOptions): void;
     private _render;
     private _syncIcon;
+    private _syncAria;
 }

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

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-checkbox/bv-checkbox.css
-var bv_checkbox_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Size 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\u2500 */\n\n:host,\n:host([size='sm']) {\n  --_box-size: 16px;\n  --_box-radius: 4px;\n  --_gap: 8px;\n  --_check-size: 10px;\n  --_label-size: var(--bv-font-size-sm);\n  --_label-lh: 20px;\n}\n\n:host([size='md']) {\n  --_box-size: 20px;\n  --_box-radius: 6px;\n  --_gap: 12px;\n  --_check-size: 12px;\n  --_label-size: var(--bv-font-size-md);\n  --_label-lh: 24px;\n}\n\n/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.wrap {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--_gap);\n  cursor: pointer;\n  user-select: none;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* \u2500\u2500 Box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.box {\n  width: var(--_box-size);\n  height: var(--_box-size);\n  border-radius: var(--_box-radius);\n  border: 1px solid var(--bv-color-neutral-300);\n  background: var(--bv-color-neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: 2px;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast);\n}\n\n:host([checked]) .box,\n:host([indeterminate]) .box {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Check 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 */\n\n.check {\n  display: none;\n  width: var(--_check-size);\n  height: var(--_check-size);\n  color: var(--bv-color-primary);\n  line-height: 0;\n}\n\n.check svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n:host([checked]) .check,\n:host([indeterminate]) .check {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.label {\n  font-size: var(--_label-size);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-secondary-foreground);\n  line-height: var(--_label-lh);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n";
+var bv_checkbox_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n/* `:host { display: inline-flex }` is an author rule, and author rules beat the\n   user-agent's `[hidden] { display: none }` regardless of specificity. Without\n   this, `el.hidden = true` on a bv-checkbox sets the property and changes\n   nothing on screen \u2014 which is how bv-input-dropdown shipped a \"Select All\"\n   that stayed visible with `select-all` unset (found in BTN-11521). */\n:host([hidden]) {\n  display: none;\n}\n\n/* \u2500\u2500 Size 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\u2500 */\n\n:host,\n:host([size='sm']) {\n  --_box-size: 16px;\n  --_box-radius: 4px;\n  --_gap: 8px;\n  --_check-size: 10px;\n  --_label-size: var(--bv-font-size-sm);\n  --_label-lh: 20px;\n}\n\n:host([size='md']) {\n  --_box-size: 20px;\n  --_box-radius: 6px;\n  --_gap: 12px;\n  --_check-size: 12px;\n  --_label-size: var(--bv-font-size-md);\n  --_label-lh: 24px;\n}\n\n/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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-10252 \u2014 `flex`, not `inline-flex`.\n *\n * In the default case this changes nothing: `:host` is `inline-flex`, so\n * `.wrap` is a flex item and its display is blockified either way. It matters\n * when a consumer overrides the host's display, which bv-input-dropdown does \u2014\n * `::slotted(*) { display: block }` wins over our `:host`. An inline-level\n * `.wrap` inside a block host lives in a line box, and a line box is sized off\n * the baseline. Checking the box switches `.check` from `display: none` to\n * `display: flex`, which moves `.wrap`'s baseline, which resizes the line:\n * measured at 35.33px unchecked and 32px checked, with four of five rows in the\n * dropdown jumping every time one was ticked. As a block-level flex container\n * there is no line box and no baseline to move. */\n.wrap {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--_gap);\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--bv-radius-sm);\n}\n\n.wrap:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: 2px;\n}\n\n:host([disabled]) .wrap {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* \u2500\u2500 Box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.box {\n  width: var(--_box-size);\n  height: var(--_box-size);\n  border-radius: var(--_box-radius);\n  border: 1px solid var(--bv-color-neutral-300);\n  background: var(--bv-color-neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: 2px;\n  transition:\n    background var(--bv-transition-fast),\n    border-color var(--bv-transition-fast);\n}\n\n:host([checked]) .box,\n:host([indeterminate]) .box {\n  background: var(--bv-color-primary-50);\n  border-color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Check 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 */\n\n.check {\n  display: none;\n  width: var(--_check-size);\n  height: var(--_check-size);\n  color: var(--bv-color-primary);\n  line-height: 0;\n}\n\n.check svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n:host([checked]) .check,\n:host([indeterminate]) .check {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.label {\n  font-size: var(--_label-size);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-secondary-foreground);\n  line-height: var(--_label-lh);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n/* BTN-10252 \u2014 the label span is always in the DOM, even when the consumer\n * passes the text through the default slot instead of the `label` attribute.\n * Empty, it is still a flex item, so `gap` applied twice and the text sat 16px\n * from the box instead of 8px. That is the \"extra padding\" in the ticket, and\n * it is the path CET Light takes: `<bv-checkbox>{{ label }}</bv-checkbox>`. */\n.label:empty {\n  display: none;\n}\n\n/* BTN-10252 \u2014 give slotted content the same typography as the attribute path,\n * so the two ways of labelling a checkbox line up identically.\n *\n * On the `slot` element rather than `::slotted(*)` on purpose: `::slotted()`\n * only matches elements, and the case that was broken passes a bare text node.\n * Inheritance runs down the flattened tree, so a text node assigned here picks\n * these up from the slot; `::slotted()` never would. */\nslot {\n  font-size: var(--_label-size);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-secondary-foreground);\n  line-height: var(--_label-lh);\n}\n";
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();
@@ -27,8 +27,15 @@ var INDETERMINATE_ICON = `<svg viewBox="0 0 12 12" fill="none" xmlns="http://www
   <path d="M2 6H10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 </svg>`;
 var BvCheckbox = class extends HTMLElement {
-  static observedAttributes = ["checked", "indeterminate", "disabled", "label", "size"];
+  static observedAttributes = [
+    "checked",
+    "indeterminate",
+    "disabled",
+    "label",
+    "size"
+  ];
   _rendered = false;
+  _wrapEl = null;
   _checkEl = null;
   _labelEl = null;
   constructor() {
@@ -40,7 +47,11 @@ var BvCheckbox = class extends HTMLElement {
   }
   attributeChangedCallback(name, _old, val) {
     if (!this._rendered) return;
-    if (name === "checked" || name === "indeterminate") this._syncIcon();
+    if (name === "checked" || name === "indeterminate") {
+      this._syncIcon();
+      this._syncAria();
+    }
+    if (name === "disabled") this._syncAria();
     if (name === "label" && this._labelEl) this._labelEl.textContent = val ?? "";
   }
   get checked() {
@@ -53,12 +64,31 @@ var BvCheckbox = class extends HTMLElement {
   get indeterminate() {
     return this.hasAttribute("indeterminate");
   }
+  /**
+   * Focus the checkbox. The focusable element is the internal `.wrap`, not the
+   * host, so `hostEl.focus()` would otherwise be a silent no-op. Consumers that
+   * rebuild a list of checkboxes (bv-filter-panel, and any screen re-rendering
+   * a tree into bv-input-dropdown) need this to restore focus after the rebuild
+   * without reaching into this component's shadow root.
+   *
+   * No-op before the first render, and when disabled — a native disabled
+   * checkbox cannot be focused programmatically either, and `tabindex="-1"`
+   * alone would not have stopped it (that only removes it from Tab order).
+   */
+  focus(options) {
+    var _a;
+    if (this.hasAttribute("disabled")) return;
+    (_a = this._wrapEl) == null ? void 0 : _a.focus(options);
+  }
   _render() {
     if (this._rendered) return;
     this._rendered = true;
     const shadow = this.shadowRoot;
-    const wrap = document.createElement("label");
+    const wrap = document.createElement("div");
     wrap.className = "wrap";
+    wrap.setAttribute("role", "checkbox");
+    wrap.setAttribute("part", "checkbox");
+    this._wrapEl = wrap;
     const box = document.createElement("span");
     box.className = "box";
     this._checkEl = document.createElement("span");
@@ -71,7 +101,7 @@ var BvCheckbox = class extends HTMLElement {
     const slot = document.createElement("slot");
     wrap.append(box, this._labelEl, slot);
     shadow.appendChild(wrap);
-    wrap.addEventListener("click", () => {
+    const toggle = () => {
       if (this.hasAttribute("disabled")) return;
       this.checked = !this.checked;
       this.removeAttribute("indeterminate");
@@ -82,12 +112,27 @@ var BvCheckbox = class extends HTMLElement {
           detail: { checked: this.checked }
         })
       );
+    };
+    wrap.addEventListener("click", toggle);
+    wrap.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      if (e.key === " ") e.preventDefault();
+      toggle();
     });
+    this._syncAria();
   }
   _syncIcon() {
     if (!this._checkEl) return;
     this._checkEl.innerHTML = this.indeterminate ? INDETERMINATE_ICON : CHECK_ICON;
   }
+  _syncAria() {
+    if (!this._wrapEl) return;
+    const disabled = this.hasAttribute("disabled");
+    this._wrapEl.tabIndex = disabled ? -1 : 0;
+    this._wrapEl.setAttribute("aria-checked", this.indeterminate ? "mixed" : String(this.checked));
+    if (disabled) this._wrapEl.setAttribute("aria-disabled", "true");
+    else this._wrapEl.removeAttribute("aria-disabled");
+  }
 };
 if (!customElements.get("bv-checkbox")) {
   customElements.define("bv-checkbox", BvCheckbox);

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

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-chip/bv-chip.css
-var bv_chip_default = ":host {\n  display: inline-flex;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  height: 28px;\n  padding: 0 10px 0 12px;\n  border-radius: var(--bv-radius-md, 6px);\n  background: var(--bv-color-primary-50, #eff8ff);\n  border: 1px solid #b9e6fe;\n  color: var(--bv-color-primary-dark, #026aa2);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n}\n\n.label {\n  flex: none;\n}\n\n.dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  padding: 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  flex-shrink: 0;\n  opacity: 0.6;\n  border-radius: 2px;\n  transition: opacity var(--bv-transition-fast, 150ms);\n}\n\n.dismiss:hover {\n  opacity: 1;\n}\n\n.dismiss:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: 1px;\n}\n";
+var bv_chip_default = ":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  height: 28px;\n  padding: 0 10px 0 12px;\n  border-radius: var(--bv-radius-md, 6px);\n  background: var(--bv-color-primary-50, #eff8ff);\n  border: 1px solid #b9e6fe;\n  color: var(--bv-color-primary-dark, #026aa2);\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n}\n\n.label {\n  flex: none;\n}\n\n.dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  padding: 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  flex-shrink: 0;\n  opacity: 0.6;\n  border-radius: 2px;\n  transition: opacity var(--bv-transition-fast, 150ms);\n}\n\n.dismiss:hover {\n  opacity: 1;\n}\n\n.dismiss:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: 1px;\n}\n";
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();

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

@@ -1,5 +1,5 @@
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-course-detail/bv-course-detail.css
-var bv_course_detail_default = ":host {\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* \u2500\u2500 Root layout \u2500\u2500 */\n\n.course-detail {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n/* \u2500\u2500 Thumbnail column \u2500\u2500 */\n\n.thumb-col {\n  flex-shrink: 0;\n  width: 160px;\n}\n\n.thumb-wrap {\n  width: 160px;\n  height: 113px;\n  background: var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.thumb-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.thumb-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n}\n\n.thumb-placeholder svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* \u2500\u2500 Right column \u2500\u2500 */\n\n.right-col {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n/* \u2500\u2500 Top row: pills + title + separator \u2500\u2500 */\n\n.top-row {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.card-header {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.pills-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.course-title {\n  font-size: var(--bv-font-size-xl);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n  line-height: 32px;\n}\n\n.separator {\n  height: 0;\n  border-top: 0.5px solid var(--bv-color-neutral-300);\n}\n\n/* \u2500\u2500 Description \u2500\u2500 */\n\n.desc-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.desc-text {\n  margin: 0;\n  font-size: var(--bv-font-size-xs);\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: 6;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Read More expands the clamp */\n.desc-wrap--expanded .desc-text {\n  -webkit-line-clamp: unset;\n}\n\n.read-more-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-primary);\n  line-height: 24px;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.read-more-btn:hover {\n  text-decoration: underline;\n}\n";
+var bv_course_detail_default = ":host {\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* \u2500\u2500 Root layout \u2500\u2500 */\n\n.course-detail {\n  display: flex;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n/* \u2500\u2500 Thumbnail column \u2500\u2500 */\n\n.thumb-col {\n  flex-shrink: 0;\n  width: 160px;\n}\n\n.thumb-wrap {\n  width: 160px;\n  height: 113px;\n  background: var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.thumb-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.thumb-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n}\n\n.thumb-placeholder svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* \u2500\u2500 Right column \u2500\u2500 */\n\n.right-col {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n/* \u2500\u2500 Top row: pills + title + separator \u2500\u2500 */\n\n.top-row {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.card-header {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.pills-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.course-title {\n  font-size: var(--bv-font-size-xl);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n  line-height: 32px;\n}\n\n.separator {\n  height: 0;\n  border-top: 0.5px solid var(--bv-color-neutral-300);\n}\n\n/* \u2500\u2500 Description \u2500\u2500 */\n\n.desc-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.desc-text {\n  margin: 0;\n  font-size: var(--bv-font-size-xs);\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: 6;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Read More expands the clamp */\n.desc-wrap--expanded .desc-text {\n  -webkit-line-clamp: unset;\n}\n\n.read-more-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: var(--bv-font-family-base);\n  font-size: var(--bv-font-size-xs);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-primary);\n  line-height: 24px;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.read-more-btn:hover {\n  text-decoration: underline;\n}\n\n/* These elements have an author `display`, which beats the user-agent\n   `[hidden] { display: none }` regardless of specificity. The component\n   toggles their `hidden`, so without this the property changes nothing on\n   screen (BTN-11521). */\n.thumb-img[hidden],\n.thumb-placeholder[hidden],\n.pills-row[hidden] {\n  display: none;\n}\n";
 
 // components/_shared/adopt-styles.ts
 var _sheetCache = /* @__PURE__ */ new Map();
@@ -20,7 +20,7 @@ function adoptStyles(shadow, css) {
 }
 
 // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-category-pill/bv-category-pill.css
-var bv_category_pill_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px 6px;\n  border: 0.5px solid var(--bv-color-neutral-900);\n  border-radius: var(--bv-radius-sm);\n  font-size: 10px;\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  line-height: 1;\n  white-space: nowrap;\n}\n";
+var bv_category_pill_default = ":host {\n  display: inline-flex;\n  font-family: var(--bv-font-family-base);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px 6px;\n  border: 0.5px solid var(--bv-color-neutral-900);\n  border-radius: var(--bv-radius-sm);\n  font-size: 10px;\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  line-height: 1;\n  white-space: nowrap;\n}\n";
 
 // components/bv-category-pill/bv-category-pill.ts
 var BvCategoryPill = class extends HTMLElement {