@bluevolt-tech/lumen 1.3.2

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

@@ -0,0 +1,72 @@
+// 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";
+
+// components/bv-chip/bv-chip.ts
+var BvChip = class extends HTMLElement {
+  static observedAttributes = ["label"];
+  get label() {
+    return this.getAttribute("label") ?? "";
+  }
+  set label(v) {
+    this.setAttribute("label", v);
+  }
+  _rendered = false;
+  _labelEl = null;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    if ("replaceSync" in CSSStyleSheet.prototype) {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(bv_chip_default);
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+    }
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (!this._rendered) return;
+    if (name === "label" && this._labelEl) {
+      this._labelEl.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_chip_default;
+      shadow.appendChild(s);
+    }
+    const chip = document.createElement("span");
+    chip.className = "chip";
+    const labelEl = document.createElement("span");
+    labelEl.className = "label";
+    labelEl.textContent = this.label;
+    this._labelEl = labelEl;
+    const dismiss = document.createElement("button");
+    dismiss.className = "dismiss";
+    dismiss.type = "button";
+    dismiss.setAttribute("aria-label", "Remove");
+    dismiss.innerHTML = `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true"><path d="M1 1l8 8M9 1L1 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+    dismiss.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.dispatchEvent(
+        new CustomEvent("bv-dismiss", {
+          bubbles: true,
+          composed: true,
+          detail: { label: this.label }
+        })
+      );
+    });
+    chip.append(labelEl, dismiss);
+    shadow.appendChild(chip);
+  }
+};
+if (!customElements.get("bv-chip")) {
+  customElements.define("bv-chip", BvChip);
+}
+export {
+  BvChip
+};

package/dist/components/bv-course-detail/bv-course-detail.d.ts

@@ -0,0 +1,28 @@
+import '../bv-category-pill/bv-category-pill.ts';
+export declare class BvCourseDetail extends HTMLElement {
+    static readonly observedAttributes: readonly ["thumbnail", "title", "description", "categories"];
+    private _rendered;
+    private _categories;
+    private _thumbImg;
+    private _thumbPlaceholder;
+    private _pillsRow;
+    private _titleEl;
+    private _descEl;
+    private _descWrap;
+    private _readMoreBtn;
+    constructor();
+    get thumbnail(): string;
+    set thumbnail(v: string);
+    get title(): string;
+    set title(v: string);
+    get description(): string;
+    set description(v: string);
+    get categories(): string[];
+    set categories(v: string[]);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _render;
+    private _syncThumbnail;
+    private _syncDesc;
+    private _syncPills;
+}

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

@@ -0,0 +1,269 @@
+// 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";
+
+// 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";
+
+// components/bv-category-pill/bv-category-pill.ts
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_category_pill_default);
+  }
+  return _sheet;
+}
+var BvCategoryPill = class extends HTMLElement {
+  static observedAttributes = ["label"];
+  _rendered = false;
+  _labelEl = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
+    }
+  }
+  get label() {
+    return this.getAttribute("label") ?? "";
+  }
+  set label(v) {
+    this.setAttribute("label", v);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (!this._rendered) return;
+    if (name === "label" && this._labelEl) this._labelEl.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_category_pill_default;
+      shadow.appendChild(s);
+    }
+    const pill = document.createElement("span");
+    pill.className = "pill";
+    pill.setAttribute("part", "pill");
+    const labelEl = document.createElement("span");
+    labelEl.textContent = this.label;
+    this._labelEl = labelEl;
+    pill.appendChild(labelEl);
+    shadow.appendChild(pill);
+  }
+};
+if (!customElements.get("bv-category-pill")) {
+  customElements.define("bv-category-pill", BvCategoryPill);
+}
+
+// components/bv-course-detail/bv-course-detail.ts
+var _sheet2 = null;
+function getSheet2() {
+  if (!_sheet2) {
+    _sheet2 = new CSSStyleSheet();
+    _sheet2.replaceSync(bv_course_detail_default);
+  }
+  return _sheet2;
+}
+var BvCourseDetail = class extends HTMLElement {
+  static observedAttributes = ["thumbnail", "title", "description", "categories"];
+  _rendered = false;
+  _categories = [];
+  _thumbImg = null;
+  _thumbPlaceholder = null;
+  _pillsRow = null;
+  _titleEl = null;
+  _descEl = null;
+  _descWrap = null;
+  _readMoreBtn = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet2()];
+    }
+  }
+  get thumbnail() {
+    return this.getAttribute("thumbnail") ?? "";
+  }
+  set thumbnail(v) {
+    this.setAttribute("thumbnail", v);
+  }
+  get title() {
+    return this.getAttribute("title") ?? "";
+  }
+  set title(v) {
+    this.setAttribute("title", v);
+  }
+  get description() {
+    return this.getAttribute("description") ?? "";
+  }
+  set description(v) {
+    this.setAttribute("description", v);
+  }
+  get categories() {
+    return this._categories;
+  }
+  set categories(v) {
+    this._categories = v;
+    this.setAttribute("categories", JSON.stringify(v));
+    if (this._rendered) this._syncPills();
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (!this._rendered) return;
+    switch (name) {
+      case "thumbnail":
+        this._syncThumbnail(val);
+        break;
+      case "title":
+        if (this._titleEl) this._titleEl.textContent = val ?? "";
+        break;
+      case "description":
+        this._syncDesc(val);
+        break;
+      case "categories":
+        try {
+          this._categories = JSON.parse(val ?? "[]");
+        } catch {
+          this._categories = [];
+        }
+        this._syncPills();
+        break;
+    }
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const attrCats = this.getAttribute("categories");
+    if (attrCats) {
+      try {
+        this._categories = JSON.parse(attrCats);
+      } catch {
+        this._categories = [];
+      }
+    }
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_course_detail_default;
+      shadow.appendChild(s);
+    }
+    const root = document.createElement("div");
+    root.className = "course-detail";
+    const thumbCol = document.createElement("div");
+    thumbCol.className = "thumb-col";
+    const thumbWrap = document.createElement("div");
+    thumbWrap.className = "thumb-wrap";
+    const thumbImg = document.createElement("img");
+    thumbImg.className = "thumb-img";
+    thumbImg.alt = "";
+    if (this.thumbnail) thumbImg.src = this.thumbnail;
+    thumbImg.hidden = !this.thumbnail;
+    this._thumbImg = thumbImg;
+    const thumbPlaceholder = document.createElement("div");
+    thumbPlaceholder.className = "thumb-placeholder";
+    thumbPlaceholder.setAttribute("aria-hidden", "true");
+    thumbPlaceholder.innerHTML = `<svg viewBox="0 0 54 54" fill="none" stroke="var(--bv-color-neutral-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="1" y="1" width="52" height="52" rx="6"/><circle cx="17" cy="18" r="5"/><path d="M1 38 L18 22 L28 32 L37 23 L53 38"/></svg>`;
+    thumbPlaceholder.hidden = !!this.thumbnail;
+    this._thumbPlaceholder = thumbPlaceholder;
+    thumbWrap.append(thumbImg, thumbPlaceholder);
+    thumbCol.appendChild(thumbWrap);
+    const rightCol = document.createElement("div");
+    rightCol.className = "right-col";
+    const topRow = document.createElement("div");
+    topRow.className = "top-row";
+    const header = document.createElement("div");
+    header.className = "card-header";
+    const pillsRow = document.createElement("div");
+    pillsRow.className = "pills-row";
+    this._pillsRow = pillsRow;
+    this._syncPills();
+    const titleEl = document.createElement("span");
+    titleEl.className = "course-title";
+    titleEl.textContent = this.title;
+    this._titleEl = titleEl;
+    header.append(pillsRow, titleEl);
+    const sep = document.createElement("div");
+    sep.className = "separator";
+    sep.setAttribute("role", "separator");
+    topRow.append(header, sep);
+    const descSection = document.createElement("div");
+    descSection.className = "desc-section";
+    const descWrap = document.createElement("div");
+    descWrap.className = "desc-wrap";
+    this._descWrap = descWrap;
+    const descEl = document.createElement("p");
+    descEl.className = "desc-text";
+    descEl.textContent = this.description;
+    this._descEl = descEl;
+    const readMoreBtn = document.createElement("button");
+    readMoreBtn.className = "read-more-btn";
+    readMoreBtn.textContent = "Read More";
+    readMoreBtn.hidden = true;
+    this._readMoreBtn = readMoreBtn;
+    readMoreBtn.addEventListener("click", () => {
+      const expanded = descWrap.classList.toggle("desc-wrap--expanded");
+      readMoreBtn.textContent = expanded ? "Read Less" : "Read More";
+      this.dispatchEvent(
+        new CustomEvent("bv-read-more", {
+          bubbles: true,
+          composed: true,
+          detail: { expanded }
+        })
+      );
+    });
+    requestAnimationFrame(() => {
+      readMoreBtn.hidden = descEl.scrollHeight <= descEl.clientHeight;
+    });
+    descWrap.appendChild(descEl);
+    descSection.append(descWrap, readMoreBtn);
+    rightCol.append(topRow, descSection);
+    root.append(thumbCol, rightCol);
+    shadow.appendChild(root);
+  }
+  _syncThumbnail(src) {
+    if (!this._thumbImg || !this._thumbPlaceholder) return;
+    if (src) {
+      this._thumbImg.src = src;
+      this._thumbImg.hidden = false;
+      this._thumbPlaceholder.hidden = true;
+    } else {
+      this._thumbImg.hidden = true;
+      this._thumbPlaceholder.hidden = false;
+    }
+  }
+  _syncDesc(val) {
+    if (!this._descEl || !this._readMoreBtn || !this._descWrap) return;
+    this._descEl.textContent = val ?? "";
+    this._descWrap.classList.remove("desc-wrap--expanded");
+    this._readMoreBtn.textContent = "Read More";
+    requestAnimationFrame(() => {
+      if (this._descEl && this._readMoreBtn) {
+        this._readMoreBtn.hidden = this._descEl.scrollHeight <= this._descEl.clientHeight;
+      }
+    });
+  }
+  _syncPills() {
+    if (!this._pillsRow) return;
+    this._pillsRow.innerHTML = "";
+    this._categories.forEach((cat) => {
+      const pill = document.createElement("bv-category-pill");
+      pill.setAttribute("label", cat);
+      this._pillsRow.appendChild(pill);
+    });
+    this._pillsRow.hidden = this._categories.length === 0;
+  }
+};
+if (!customElements.get("bv-course-detail")) {
+  customElements.define("bv-course-detail", BvCourseDetail);
+}
+export {
+  BvCourseDetail
+};

package/dist/components/bv-course-detail-modal/bv-course-detail-modal.d.ts

@@ -0,0 +1,35 @@
+import '../bv-modal/bv-modal.ts';
+import '../bv-course-detail/bv-course-detail.ts';
+import '../bv-course-outline/bv-course-outline.ts';
+import '../bv-button/bv-button.ts';
+import type { OutlineSection, OutlineMode } from '../bv-course-outline/bv-course-outline.ts';
+export declare class BvCourseDetailModal extends HTMLElement {
+    static readonly observedAttributes: readonly ["open", "title", "course-title", "thumbnail", "description", "categories", "sections", "outline-mode"];
+    private _rendered;
+    private _categories;
+    private _sections;
+    private _modalEl;
+    private _detailEl;
+    private _showOutlineBtn;
+    private _outlineEl;
+    constructor();
+    get open(): boolean;
+    set open(v: boolean);
+    get title(): string;
+    set title(v: string);
+    get courseTitle(): string;
+    set courseTitle(v: string);
+    get thumbnail(): string;
+    set thumbnail(v: string);
+    get description(): string;
+    set description(v: string);
+    get categories(): string[];
+    set categories(v: string[]);
+    get sections(): OutlineSection[];
+    set sections(v: OutlineSection[]);
+    get outlineMode(): OutlineMode;
+    set outlineMode(v: OutlineMode);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _render;
+}