@bluevolt-tech/lumen 1.3.2

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

@@ -0,0 +1,488 @@
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-course-outline/bv-course-outline.css
+var bv_course_outline_default = ":host {\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Outer container \u2500\u2500 */\n\n.container {\n  border: 0.5px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-xl);\n  overflow: hidden;\n}\n\n.container-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: #f9fafb;\n  border-bottom: 0.5px solid var(--bv-color-neutral-300);\n}\n\n.container-title {\n  font-size: var(--bv-font-size-2xl);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-700);\n  line-height: 32px;\n}\n\n.expand-all-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-md);\n  font-weight: var(--bv-font-weight-bold);\n  color: var(--bv-color-primary);\n  line-height: 24px;\n  white-space: nowrap;\n}\n\n.expand-all-btn:hover {\n  text-decoration: underline;\n}\n\n.outline {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 24px;\n  background: var(--bv-color-neutral-0);\n}\n\n/* \u2500\u2500 Section \u2500\u2500 */\n\n.section {\n  background: var(--bv-color-neutral-0);\n  border: 0.5px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-xl);\n  overflow: hidden;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 20px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.section-header:hover {\n  background: linear-gradient(90deg, #fff, #f9fafb 15% 85%, #fff);\n}\n\n.section-header:focus-visible {\n  outline: 2px solid var(--bv-color-primary);\n  outline-offset: -2px;\n  border-radius: var(--bv-radius-xl);\n}\n\n.section-header-left {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1;\n  min-width: 0;\n  gap: 12px;\n}\n\n.section-title-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n.section-title {\n  font-size: var(--bv-font-size-lg);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n  line-height: 28px;\n}\n\n.section-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 8px;\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-full);\n  font-size: 10px;\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-500);\n  line-height: 18px;\n  white-space: nowrap;\n}\n\n.section-chevron {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  color: var(--bv-color-neutral-500);\n  transition: transform var(--bv-transition-fast);\n}\n\n.section-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n.section--expanded .section-chevron {\n  transform: rotate(180deg);\n}\n\n/* \u2500\u2500 Section body \u2500\u2500 */\n\n.section-body {\n  display: none;\n  border-top: 0.5px solid var(--bv-color-neutral-300);\n}\n\n.section--expanded .section-body {\n  display: block;\n}\n\n/* \u2500\u2500 Description \u2500\u2500 */\n\n.section-desc-wrap {\n  padding: 16px 20px 20px;\n}\n\n.section-desc {\n  margin: 0 0 4px;\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-700);\n  line-height: 24px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.section-desc-wrap--expanded .section-desc {\n  -webkit-line-clamp: unset;\n}\n\n.read-more {\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-md);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-primary);\n  line-height: 24px;\n}\n\n.read-more:hover {\n  text-decoration: underline;\n}\n\n/* \u2500\u2500 Module list \u2500\u2500 */\n\n.module-list {\n  padding-left: 20px;\n  padding-right: 20px;\n}\n\n.module-sep {\n  height: 0;\n  border-top: 0.5px solid var(--bv-color-neutral-300);\n  margin-left: 20px;\n}\n\n.desc-sep {\n  height: 0;\n  border-top: 0.5px solid var(--bv-color-neutral-300);\n  margin: 0 20px;\n}\n\n.module-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-height: 72px;\n  padding: 0 0 0 20px;\n}\n\n.module-row:hover {\n  background: linear-gradient(90deg, #fff, #f9fafb 15% 85%, #fff);\n}\n\n/* \u2500\u2500 Module icon \u2500\u2500 */\n\n.module-icon {\n  flex-shrink: 0;\n  width: 34px;\n  height: 34px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.module-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* \u2500\u2500 Module content \u2500\u2500 */\n\n.module-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.module-title-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.module-type-icon {\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  color: var(--bv-color-neutral-500);\n  display: flex;\n  align-items: center;\n}\n\n.module-type-icon svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.module-title {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-700);\n  line-height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* \u2500\u2500 Module status \u2500\u2500 */\n\n.module-status {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-bold);\n  line-height: 20px;\n}\n\n.module-status span {\n  white-space: nowrap;\n}\n\n.status-icon {\n  width: 18px;\n  height: 18px;\n  flex-shrink: 0;\n}\n\n.module-status--completed,\n.module-status--viewed,\n.module-status--pending-review {\n  color: var(--bv-color-success-dark);\n}\n\n.module-status--in-progress,\n.module-status--not-started {\n  color: var(--bv-color-neutral-700);\n}\n\n.module-status--max-retakes,\n.module-status--rejected {\n  color: #f04438;\n}\n\n.module-status--seat-time {\n  color: var(--bv-color-primary);\n}\n\n/* \u2500\u2500 Module actions \u2500\u2500 */\n\n.module-actions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.module-action-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-sm);\n  font-weight: var(--bv-font-weight-bold);\n  color: var(--bv-color-primary);\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.module-action-btn:hover {\n  text-decoration: underline;\n}\n\n/* \u2500\u2500 Pre-enrollment section \u2500\u2500 */\n\n.section--pre-enrollment .section-header {\n  align-items: flex-start;\n}\n\n.pre-title-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n}\n\n.section-count-text {\n  flex-shrink: 0;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-regular);\n  color: var(--bv-color-neutral-500);\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.section--pre-enrollment .section-chevron {\n  margin-top: 2px;\n}\n\n.pre-section-desc-wrap {\n  width: 100%;\n}\n\n/* \u2500\u2500 Pre-enrollment module list \u2500\u2500 */\n\n.pre-module-list {\n  display: flex;\n  flex-direction: column;\n  padding: 0 20px;\n}\n\n.pre-module-list .module-sep {\n  margin-left: 0;\n}\n\n.pre-module-wrap {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.pre-module-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 24px;\n  padding: 16px 0;\n}\n\n.pre-module-list > .pre-module-wrap:first-child .pre-module-row {\n  padding-top: 16px;\n}\n.pre-module-list > .pre-module-wrap:last-child .pre-module-row {\n  padding-bottom: 16px;\n}\n\n.pre-module-row:hover {\n  background: linear-gradient(90deg, #fff, #f9fafb 15% 85%, #fff);\n}\n\n.pre-module-title-group {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 0;\n}\n\n.pre-module-title {\n  min-width: 0;\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-700);\n  line-height: 24px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.pre-module-badges {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.pre-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: var(--bv-radius-full);\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.pre-badge--inactive {\n  background: var(--bv-color-neutral-700);\n  color: var(--bv-color-neutral-0);\n}\n\n.pre-badge--optional {\n  background: var(--bv-color-neutral-100);\n  color: var(--bv-color-neutral-700);\n}\n\n.pre-module-toggle {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--bv-color-neutral-700);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.pre-module-toggle:hover {\n  color: var(--bv-color-primary);\n}\n\n.pre-module-toggle svg {\n  width: 100%;\n  height: 100%;\n}\n\n.pre-module-wrap--expanded .pre-module-row {\n  padding-bottom: 0;\n}\n\n.pre-module-desc {\n  padding: 0 0 16px;\n  margin: 0;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  line-height: 20px;\n}\n\n/* Empty state */\n.pre-section-empty {\n  padding: 20px;\n  margin: 0;\n  font-size: var(--bv-font-size-md);\n  color: var(--bv-color-neutral-500);\n  line-height: 24px;\n}\n";
+
+// components/bv-course-outline/bv-course-outline.ts
+var BvCourseOutline = class extends HTMLElement {
+  static observedAttributes = ["sections", "mode"];
+  _sections = [];
+  _rendered = false;
+  _listEl = null;
+  _expandBtn = null;
+  _mode = "enrolled";
+  get sections() {
+    return this._sections;
+  }
+  set sections(val) {
+    this._sections = val;
+    if (this._rendered) this._flush();
+  }
+  get mode() {
+    return this._mode;
+  }
+  set mode(v) {
+    this._mode = v;
+    this.setAttribute("mode", v);
+    if (this._rendered) this._flush();
+  }
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    if ("replaceSync" in CSSStyleSheet.prototype) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(bv_course_outline_default);
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (name === "sections") {
+      try {
+        this._sections = JSON.parse(val ?? "[]");
+      } catch {
+        this._sections = [];
+      }
+      if (this._rendered) this._flush();
+    }
+    if (name === "mode") {
+      this._mode = val === "pre-enrollment" ? "pre-enrollment" : "enrolled";
+      if (this._rendered) this._flush();
+    }
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_course_outline_default;
+      shadow.appendChild(s);
+    }
+    const attr = this.getAttribute("sections");
+    if (attr !== null) {
+      try {
+        this._sections = JSON.parse(attr);
+      } catch {
+        this._sections = [];
+      }
+    }
+    const modeAttr = this.getAttribute("mode");
+    if (modeAttr === "pre-enrollment") this._mode = "pre-enrollment";
+    const container = document.createElement("div");
+    container.className = "container";
+    const containerHeader = document.createElement("div");
+    containerHeader.className = "container-header";
+    const containerTitle = document.createElement("span");
+    containerTitle.className = "container-title";
+    containerTitle.textContent = "Course Outline";
+    this._expandBtn = document.createElement("button");
+    this._expandBtn.className = "expand-all-btn";
+    this._expandBtn.addEventListener("click", () => this._toggleAll());
+    this._updateExpandBtn();
+    containerHeader.append(containerTitle, this._expandBtn);
+    container.appendChild(containerHeader);
+    const list = document.createElement("div");
+    list.className = "outline";
+    this._listEl = list;
+    this._flush();
+    container.appendChild(list);
+    shadow.appendChild(container);
+  }
+  _updateExpandBtn() {
+    if (!this._expandBtn) return;
+    const allExpanded = this._sections.length > 0 && this._sections.every((s) => s.expanded);
+    this._expandBtn.textContent = allExpanded ? "Collapse All" : "Expand All";
+  }
+  _toggleAll() {
+    const allExpanded = this._sections.every((s) => s.expanded);
+    this._sections.forEach((s) => {
+      s.expanded = !allExpanded;
+    });
+    this._flush();
+    this._updateExpandBtn();
+    this.dispatchEvent(
+      new CustomEvent("bv-expand-all", {
+        bubbles: true,
+        composed: true,
+        detail: { expanded: !allExpanded }
+      })
+    );
+  }
+  _flush() {
+    const el = this._listEl;
+    el.innerHTML = "";
+    this._sections.forEach((sec, i) => el.appendChild(this._buildSection(sec, i)));
+    this._updateExpandBtn();
+  }
+  // ── Section ────────────────────────────────────────────────────────────────
+  _buildSection(sec, sIdx) {
+    var _a, _b;
+    if (this._mode === "pre-enrollment") return this._buildPreEnrollSection(sec, sIdx);
+    const wrap = document.createElement("div");
+    wrap.className = "section" + (sec.expanded ? " section--expanded" : "");
+    const header = document.createElement("div");
+    header.className = "section-header";
+    header.setAttribute("role", "button");
+    header.setAttribute("tabindex", "0");
+    header.setAttribute("aria-expanded", String(!!sec.expanded));
+    const left = document.createElement("div");
+    left.className = "section-header-left";
+    const titleEl = document.createElement("span");
+    titleEl.className = "section-title";
+    titleEl.textContent = sec.title;
+    const badge = document.createElement("span");
+    badge.className = "section-badge";
+    badge.textContent = `${((_a = sec.modules) == null ? void 0 : _a.length) ?? 0} Modules`;
+    const titleRow = document.createElement("div");
+    titleRow.className = "section-title-row";
+    titleRow.append(titleEl, badge);
+    left.appendChild(titleRow);
+    if (sec.description) {
+      const descWrap = document.createElement("div");
+      descWrap.className = "section-desc-wrap";
+      const desc = document.createElement("p");
+      desc.className = "section-desc";
+      desc.textContent = sec.description;
+      const readMore = document.createElement("button");
+      readMore.className = "read-more";
+      readMore.textContent = "Read More";
+      readMore.hidden = true;
+      readMore.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const expanded = descWrap.classList.toggle("section-desc-wrap--expanded");
+        readMore.textContent = expanded ? "Read Less" : "Read More";
+        this.dispatchEvent(
+          new CustomEvent("bv-read-more", {
+            bubbles: true,
+            composed: true,
+            detail: { sectionIndex: sIdx }
+          })
+        );
+      });
+      requestAnimationFrame(() => {
+        readMore.hidden = desc.scrollHeight <= desc.clientHeight;
+      });
+      descWrap.append(desc, readMore);
+      left.appendChild(descWrap);
+    }
+    const chevron = document.createElement("div");
+    chevron.className = "section-chevron";
+    chevron.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+    header.append(left, chevron);
+    const toggle = () => {
+      sec.expanded = !sec.expanded;
+      wrap.classList.toggle("section--expanded", sec.expanded);
+      header.setAttribute("aria-expanded", String(sec.expanded));
+      this._updateExpandBtn();
+      this.dispatchEvent(
+        new CustomEvent("bv-section-toggle", {
+          bubbles: true,
+          composed: true,
+          detail: { sectionIndex: sIdx, expanded: sec.expanded }
+        })
+      );
+    };
+    header.addEventListener("click", toggle);
+    header.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    wrap.appendChild(header);
+    if ((_b = sec.modules) == null ? void 0 : _b.length) {
+      const body = document.createElement("div");
+      body.className = "section-body";
+      const moduleList = document.createElement("div");
+      moduleList.className = "module-list";
+      sec.modules.forEach((mod, mIdx) => {
+        if (mIdx > 0) {
+          const sep = document.createElement("div");
+          sep.className = "module-sep";
+          moduleList.appendChild(sep);
+        }
+        moduleList.appendChild(this._buildModule(mod, sIdx, mIdx));
+      });
+      body.appendChild(moduleList);
+      wrap.appendChild(body);
+    }
+    return wrap;
+  }
+  // ── Module row ─────────────────────────────────────────────────────────────
+  _buildModule(mod, sIdx, mIdx) {
+    const row = document.createElement("div");
+    row.className = "module-row";
+    const typeIcon = document.createElement("div");
+    typeIcon.className = "module-icon";
+    typeIcon.innerHTML = this._bigIcon(mod.type, mod.status ?? "not-started");
+    const content = document.createElement("div");
+    content.className = "module-content";
+    const titleRow = document.createElement("div");
+    titleRow.className = "module-title-row";
+    const smallIcon = document.createElement("span");
+    smallIcon.className = "module-type-icon";
+    smallIcon.innerHTML = this._smallIcon(mod.type);
+    const titleEl = document.createElement("span");
+    titleEl.className = "module-title";
+    titleEl.textContent = mod.title;
+    titleRow.append(smallIcon, titleEl);
+    const status = mod.status ?? "not-started";
+    const statusEl = this._buildStatusEl(status, mod.statusLabel);
+    content.append(titleRow, statusEl);
+    const actionsEl = document.createElement("div");
+    actionsEl.className = "module-actions";
+    (mod.actions ?? []).forEach((action) => {
+      const btn = document.createElement("button");
+      btn.className = "module-action-btn";
+      btn.textContent = action.label;
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.dispatchEvent(
+          new CustomEvent("bv-module-action", {
+            bubbles: true,
+            composed: true,
+            detail: { sectionIndex: sIdx, moduleIndex: mIdx, action: action.key }
+          })
+        );
+      });
+      actionsEl.appendChild(btn);
+    });
+    row.append(typeIcon, content, actionsEl);
+    return row;
+  }
+  // ── Status element ─────────────────────────────────────────────────────────
+  _buildStatusEl(status, label) {
+    const checkSvg = `<svg class="status-icon" viewBox="0 0 18 13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 1L6 12L1 7"/></svg>`;
+    const clockSvg = `<svg class="status-icon" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 5V11L15 13M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z"/></svg>`;
+    const defaults = {
+      completed: "Completed",
+      viewed: "Viewed",
+      "in-progress": "In Progress",
+      "not-started": "Not Started",
+      "max-retakes": "Maximum retakes reached",
+      rejected: "Rejected",
+      "pending-review": "Pending Review",
+      "seat-time": "Seat time required"
+    };
+    const el = document.createElement("div");
+    el.className = `module-status module-status--${status}`;
+    const span = document.createElement("span");
+    span.textContent = label ?? defaults[status] ?? status;
+    el.appendChild(span);
+    if (status === "completed" || status === "viewed") {
+      el.insertAdjacentHTML("beforeend", checkSvg);
+    } else if (status === "pending-review") {
+      el.insertAdjacentHTML("beforeend", clockSvg);
+    }
+    return el;
+  }
+  // ── Icons ──────────────────────────────────────────────────────────────────
+  _bigIcon(type, status) {
+    const inactive = status === "completed" || status === "viewed" || status === "max-retakes";
+    const primary = "var(--bv-color-primary)";
+    if (type === "download") {
+      return `<svg viewBox="0 0 34 34" fill="none" aria-hidden="true"><path d="M17 34C26.3888 34 34 26.3888 34 17C34 7.61116 26.3888 0 17 0C7.61116 0 0 7.61116 0 17C0 26.3888 7.61116 34 17 34Z" fill="${primary}"/><path d="M23.8 17L17 23.8L10.2 17M17 23.8V10.2" stroke="white" stroke-width="2.83333" stroke-linecap="round" stroke-linejoin="round"/><circle cx="17" cy="17" r="14.5" stroke="${primary}"/></svg>`;
+    }
+    if (type === "upload") {
+      return `<svg viewBox="0 0 34 34" fill="none" aria-hidden="true"><path d="M17 34C26.3888 34 34 26.3888 34 17C34 7.61116 26.3888 0 17 0C7.61116 0 0 7.61116 0 17C0 26.3888 7.61116 34 17 34Z" fill="${primary}"/><path d="M10.2 17L17 10.2L23.8 17M17 10.2V23.8" stroke="white" stroke-width="2.83333" stroke-linecap="round" stroke-linejoin="round"/><circle cx="17" cy="17" r="14.5" stroke="${primary}"/></svg>`;
+    }
+    if (type === "link") {
+      return `<svg viewBox="0 0 36.8338 36.8338" fill="none" aria-hidden="true"><path d="M29.6472 5.65447C22.5987 -0.547875 11.8568 0.138072 5.65446 7.18657C-0.547874 14.2351 0.138072 24.977 7.18657 31.1793C14.2351 37.3817 24.977 36.6957 31.1793 29.6472C37.3817 22.5987 36.6957 11.8568 29.6472 5.65447Z" fill="${primary}"/><path d="M22.909 13.3119L13.3119 13.9248M22.909 13.3119L23.5219 22.909M22.909 13.3119L13.2216 12.511M7.39696 27.9929L17.3883 17.4428M17.3534 17.481L21.8455 12.3761" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+    }
+    const playPath = `M13 20.6775C13 21.3934 13 21.7514 13.1496 21.9512C13.28 22.1254 13.4796 22.2343 13.6966 22.2498C13.9456 22.2676 14.2467 22.074 14.8489 21.6869L21.9298 17.1349C22.4524 16.7989 22.7137 16.631 22.8039 16.4174C22.8828 16.2308 22.8828 16.0202 22.8039 15.8336C22.7137 15.62 22.4524 15.452 21.9298 15.1161L14.8489 10.5641C14.2467 10.1769 13.9456 9.98334 13.6966 10.0011C13.4796 10.0166 13.28 10.1256 13.1496 10.2997C13 10.4996 13 10.8575 13 11.5735L13 20.6775Z`;
+    const opacity = inactive ? ' opacity="0.2"' : "";
+    return `<svg viewBox="0 0 32 32" fill="none" aria-hidden="true"><g${opacity}><rect x="1" y="1" width="30" height="30" rx="15" stroke="${primary}" stroke-width="2"/><circle cx="16" cy="16" r="14" fill="${primary}"/><path d="${playPath}" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`;
+  }
+  _smallIcon(type) {
+    const icons = {
+      scorm: `<svg 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>`,
+      assessment: `<svg 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>`,
+      survey: `<svg viewBox="0 0 14.56 11.63" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5.8125L5.04168 5.8125M14 1.3125L5.04168 1.3125M14 10.3125L5.04168 10.3125M2.05556 5.8125C2.05556 6.22671 1.72133 6.5625 1.30903 6.5625C0.896733 6.5625 0.5625 6.22671 0.5625 5.8125C0.5625 5.39829 0.896733 5.0625 1.30903 5.0625C1.72133 5.0625 2.05556 5.39829 2.05556 5.8125ZM2.05556 1.3125C2.05556 1.72671 1.72133 2.0625 1.30903 2.0625C0.896733 2.0625 0.5625 1.72671 0.5625 1.3125C0.5625 0.898286 0.896733 0.5625 1.30903 0.5625C1.72133 0.5625 2.05556 0.898286 2.05556 1.3125ZM2.05556 10.3125C2.05556 10.7267 1.72133 11.0625 1.30903 11.0625C0.896733 11.0625 0.5625 10.7267 0.5625 10.3125C0.5625 9.89829 0.896733 9.5625 1.30903 9.5625C1.72133 9.5625 2.05556 9.89829 2.05556 10.3125Z"/></svg>`,
+      download: `<svg 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="M8.77433 3.56259L7.94155 1.88928C7.70187 1.40769 7.58202 1.16689 7.40323 0.990961C7.24512 0.835387 7.05457 0.717069 6.84535 0.644571C6.60877 0.562589 6.3408 0.562589 5.80485 0.562589H2.9514C2.1152 0.562589 1.69711 0.562589 1.37773 0.726079C1.09679 0.869889 0.868379 1.09936 0.725234 1.3816C0.562501 1.70247 0.562501 2.12251 0.562501 2.96259V3.56259M0.562501 3.56259H11.9098C13.164 3.56259 13.7912 3.56259 14.2703 3.80782C14.6917 4.02354 15.0343 4.36775 15.249 4.79111C15.4931 5.27241 15.4931 5.90247 15.4931 7.16259V10.4626C15.4931 11.7227 15.4931 12.3528 15.249 12.8341C15.0343 13.2574 14.6917 13.6016 14.2703 13.8174C13.7912 14.0626 13.164 14.0626 11.9098 14.0626H4.14585C2.89156 14.0626 2.26441 14.0626 1.78534 13.8174C1.36393 13.6016 1.02132 13.2574 0.806601 12.8341C0.562501 12.3528 0.562501 11.7227 0.562501 10.4626V3.56259ZM10.2674 8.81259L8.0278 11.0626L5.78821 8.81259M8.0278 11.0626V6.56259"/></svg>`,
+      link: `<svg viewBox="0 0 15.97 16.03" fill="none" stroke="currentColor" stroke-width="1.125" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.49261 8.76267C6.81321 9.19327 7.22223 9.54956 7.69194 9.80737C8.16166 10.0652 8.68106 10.2185 9.21494 10.2569C9.74882 10.2953 10.2847 10.2179 10.7862 10.03C11.2876 9.84207 11.743 9.54797 12.1214 9.16767L14.361 6.91767C15.041 6.21041 15.4172 5.26315 15.4087 4.27991C15.4002 3.29668 15.0076 2.35613 14.3156 1.66085C13.6235 0.965569 12.6873 0.571186 11.7086 0.562642C10.7299 0.554098 9.78705 0.932077 9.08307 1.61517L7.79903 2.89767M9.47873 7.26267C9.15813 6.83207 8.7491 6.47578 8.27939 6.21796C7.80968 5.96015 7.29027 5.80683 6.75639 5.76842C6.22252 5.73001 5.68666 5.80739 5.18517 5.99533C4.68369 6.18327 4.2283 6.47737 3.84989 6.85767L1.6103 9.10767C0.930367 9.81493 0.554137 10.7622 0.562641 11.7454C0.571146 12.7287 0.963705 13.6692 1.65577 14.3645C2.34783 15.0598 3.28403 15.4542 4.26272 15.4627C5.24141 15.4712 6.18428 15.0933 6.88827 14.4102L8.16483 13.1277"/></svg>`,
+      "adobe-connect": `<svg 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>`,
+      video: `<svg 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>`,
+      upload: `<svg 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>`
+    };
+    return icons[type] ?? icons["scorm"];
+  }
+  // ── Pre-enrollment section ─────────────────────────────────────────────────
+  _buildPreEnrollSection(sec, sIdx) {
+    var _a;
+    const wrap = document.createElement("div");
+    wrap.className = "section section--pre-enrollment" + (sec.expanded ? " section--expanded" : "");
+    const header = document.createElement("div");
+    header.className = "section-header";
+    header.setAttribute("role", "button");
+    header.setAttribute("tabindex", "0");
+    header.setAttribute("aria-expanded", String(!!sec.expanded));
+    const left = document.createElement("div");
+    left.className = "section-header-left";
+    const titleRow = document.createElement("div");
+    titleRow.className = "pre-title-row";
+    const titleEl = document.createElement("span");
+    titleEl.className = "section-title";
+    titleEl.textContent = sec.title;
+    const count = ((_a = sec.modules) == null ? void 0 : _a.length) ?? 0;
+    let countEl = null;
+    if (count > 0) {
+      countEl = document.createElement("span");
+      countEl.className = "section-badge";
+      countEl.textContent = `${count} Modules`;
+      titleRow.append(titleEl, countEl);
+    } else {
+      titleRow.appendChild(titleEl);
+    }
+    left.appendChild(titleRow);
+    if (sec.description) {
+      const descWrap = document.createElement("div");
+      descWrap.className = "pre-section-desc-wrap";
+      const desc = document.createElement("p");
+      desc.className = "section-desc";
+      desc.textContent = sec.description;
+      const readMore = document.createElement("button");
+      readMore.className = "read-more";
+      readMore.textContent = "Read More";
+      readMore.hidden = true;
+      readMore.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const expanded = descWrap.classList.toggle("section-desc-wrap--expanded");
+        readMore.textContent = expanded ? "Read Less" : "Read More";
+        this.dispatchEvent(
+          new CustomEvent("bv-read-more", {
+            bubbles: true,
+            composed: true,
+            detail: { sectionIndex: sIdx }
+          })
+        );
+      });
+      requestAnimationFrame(() => {
+        readMore.hidden = desc.scrollHeight <= desc.clientHeight;
+      });
+      descWrap.append(desc, readMore);
+      left.appendChild(descWrap);
+    }
+    const chevron = document.createElement("div");
+    chevron.className = "section-chevron";
+    chevron.setAttribute("aria-hidden", "true");
+    chevron.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+    header.append(left, chevron);
+    const toggle = () => {
+      sec.expanded = !sec.expanded;
+      wrap.classList.toggle("section--expanded", sec.expanded);
+      header.setAttribute("aria-expanded", String(sec.expanded));
+      this._updateExpandBtn();
+      this.dispatchEvent(
+        new CustomEvent("bv-section-toggle", {
+          bubbles: true,
+          composed: true,
+          detail: { sectionIndex: sIdx, expanded: sec.expanded }
+        })
+      );
+    };
+    header.addEventListener("click", toggle);
+    header.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    });
+    wrap.appendChild(header);
+    const body = document.createElement("div");
+    body.className = "section-body";
+    if (!count) {
+      const empty = document.createElement("p");
+      empty.className = "pre-section-empty";
+      empty.textContent = "There are no modules in this section yet.";
+      body.appendChild(empty);
+    } else {
+      const moduleList = document.createElement("div");
+      moduleList.className = "pre-module-list";
+      sec.modules.forEach((mod, mIdx) => {
+        if (mIdx > 0) {
+          const sep = document.createElement("div");
+          sep.className = "module-sep";
+          moduleList.appendChild(sep);
+        }
+        moduleList.appendChild(this._buildPreEnrollModule(mod, sIdx, mIdx));
+      });
+      body.appendChild(moduleList);
+    }
+    wrap.appendChild(body);
+    return wrap;
+  }
+  // ── Pre-enrollment module row ──────────────────────────────────────────────
+  _buildPreEnrollModule(mod, sIdx, mIdx) {
+    const plusSvg = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`;
+    const minusSvg = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/></svg>`;
+    const wrap = document.createElement("div");
+    wrap.className = "pre-module-wrap";
+    const row = document.createElement("div");
+    row.className = "pre-module-row";
+    const typeIcon = document.createElement("span");
+    typeIcon.className = "module-type-icon";
+    typeIcon.innerHTML = this._smallIcon(mod.type);
+    const titleEl = document.createElement("span");
+    titleEl.className = "pre-module-title";
+    titleEl.textContent = mod.title;
+    const badges = document.createElement("div");
+    badges.className = "pre-module-badges";
+    if (mod.inactive) {
+      const b = document.createElement("span");
+      b.className = "pre-badge pre-badge--inactive";
+      b.textContent = "Inactive";
+      badges.appendChild(b);
+    }
+    if (mod.optional) {
+      const b = document.createElement("span");
+      b.className = "pre-badge pre-badge--optional";
+      b.textContent = "Optional";
+      badges.appendChild(b);
+    }
+    let descEl = null;
+    if (mod.description) {
+      descEl = document.createElement("p");
+      descEl.className = "pre-module-desc";
+      descEl.textContent = mod.description;
+      descEl.hidden = true;
+    }
+    const titleGroup = document.createElement("div");
+    titleGroup.className = "pre-module-title-group";
+    titleGroup.append(titleEl, badges);
+    row.append(typeIcon, titleGroup);
+    if (descEl) {
+      const toggleBtn = document.createElement("button");
+      toggleBtn.className = "pre-module-toggle";
+      toggleBtn.setAttribute("aria-expanded", "false");
+      toggleBtn.innerHTML = plusSvg;
+      toggleBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const nowExpanded = toggleBtn.getAttribute("aria-expanded") !== "true";
+        toggleBtn.setAttribute("aria-expanded", String(nowExpanded));
+        toggleBtn.innerHTML = nowExpanded ? minusSvg : plusSvg;
+        descEl.hidden = !nowExpanded;
+        wrap.classList.toggle("pre-module-wrap--expanded", nowExpanded);
+        this.dispatchEvent(
+          new CustomEvent("bv-module-toggle", {
+            bubbles: true,
+            composed: true,
+            detail: { sectionIndex: sIdx, moduleIndex: mIdx, expanded: nowExpanded }
+          })
+        );
+      });
+      row.appendChild(toggleBtn);
+      wrap.appendChild(row);
+      wrap.appendChild(descEl);
+    } else {
+      wrap.appendChild(row);
+    }
+    return wrap;
+  }
+};
+if (!customElements.get("bv-course-outline")) {
+  customElements.define("bv-course-outline", BvCourseOutline);
+}
+export {
+  BvCourseOutline
+};

package/dist/components/bv-empty-state/bv-empty-state.d.ts

@@ -0,0 +1,10 @@
+export declare class BvEmptyState extends HTMLElement {
+    static readonly observedAttributes: string[];
+    private _rendered;
+    private _titleEl;
+    private _descEl;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _render;
+}

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

@@ -0,0 +1,69 @@
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-empty-state/bv-empty-state.css
+var bv_empty_state_default = ":host {\n  display: flex;\n  width: 100%;\n}\n\n.wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 48px 24px;\n  gap: 16px;\n  width: 100%;\n  font-family: var(--bv-font-family-base);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: var(--bv-radius-lg);\n  background: var(--bv-color-neutral-100);\n  color: var(--bv-color-neutral-500);\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-width: 360px;\n}\n\n.title {\n  font-size: var(--bv-font-size-md);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin: 0;\n  line-height: 24px;\n}\n\n.description {\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-500);\n  margin: 0;\n  line-height: 20px;\n}\n\n.action ::slotted(*) {\n  margin-top: 4px;\n}\n";
+
+// components/bv-empty-state/bv-empty-state.ts
+var BvEmptyState = class extends HTMLElement {
+  static observedAttributes = ["title", "description"];
+  _rendered = false;
+  _titleEl = null;
+  _descEl = null;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    if ("replaceSync" in CSSStyleSheet.prototype) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(bv_empty_state_default);
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (!this._rendered) return;
+    if (name === "title" && this._titleEl) this._titleEl.textContent = val ?? "";
+    if (name === "description" && this._descEl) this._descEl.textContent = val ?? "";
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_empty_state_default;
+      shadow.appendChild(s);
+    }
+    const wrap = document.createElement("div");
+    wrap.className = "wrap";
+    const iconWrap = document.createElement("div");
+    iconWrap.className = "icon";
+    const iconSlot = document.createElement("slot");
+    iconSlot.name = "icon";
+    iconSlot.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>`;
+    iconWrap.appendChild(iconSlot);
+    const textWrap = document.createElement("div");
+    textWrap.className = "text";
+    this._titleEl = document.createElement("p");
+    this._titleEl.className = "title";
+    this._titleEl.textContent = this.getAttribute("title") ?? "";
+    this._descEl = document.createElement("p");
+    this._descEl.className = "description";
+    this._descEl.textContent = this.getAttribute("description") ?? "";
+    textWrap.append(this._titleEl, this._descEl);
+    const actionWrap = document.createElement("div");
+    actionWrap.className = "action";
+    const actionSlot = document.createElement("slot");
+    actionSlot.name = "action";
+    actionWrap.appendChild(actionSlot);
+    wrap.append(iconWrap, textWrap, actionWrap);
+    shadow.appendChild(wrap);
+  }
+};
+if (!customElements.get("bv-empty-state")) {
+  customElements.define("bv-empty-state", BvEmptyState);
+}
+export {
+  BvEmptyState
+};

package/dist/components/bv-filter-dropdown/bv-filter-dropdown.d.ts

@@ -0,0 +1,26 @@
+export interface FilterDropdownOption {
+    label: string;
+    value: string;
+}
+export declare class BvFilterDropdown extends HTMLElement {
+    static readonly observedAttributes: string[];
+    private _rendered;
+    private _labelEl;
+    private _panelEl;
+    private _options;
+    private _value;
+    private _offClick;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get value(): string;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _render;
+    private _toggle;
+    private _open;
+    private _close;
+    private _syncLabel;
+    private _renderOptions;
+    private _syncSelected;
+    private _select;
+}