@michaelmishin/speclens 0.1.2 → 0.2.0

package/dist/speclens.js

@@ -20292,8 +20292,10 @@ let SlHeader = class extends i$1 {
         </button>
 
         <div class="title-area">
-          <span class="title">${this.spec.title}</span>
-          <span class="version">${this.spec.version}</span>
+          <slot name="logo">
+            <span class="title">${this.spec.title}</span>
+            <span class="version">${this.spec.version}</span>
+          </slot>
         </div>
 
         <div class="spacer"></div>
@@ -20312,6 +20314,8 @@ let SlHeader = class extends i$1 {
             </button>
           ` : null}
 
+          <slot name="header-actions"></slot>
+
           <button class="action-btn" @click=${() => this.dispatchEvent(new CustomEvent("toggle-theme"))} title="Toggle theme">
             <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
               <circle cx="9" cy="9" r="4"/>
@@ -20471,6 +20475,8 @@ let SlSidebar = class extends i$1 {
     this.activeOperationId = "";
     this.open = false;
     this.searchEngine = null;
+    this.layout = "page";
+    this.securitySchemes = [];
     this._searchQuery = "";
     this._searchResults = [];
   }
@@ -20559,6 +20565,19 @@ let SlSidebar = class extends i$1 {
             `)}
           `}
         </div>
+
+        ${this.layout === "embed" && this.securitySchemes.length > 0 ? b`
+          <button
+            class="sidebar-auth-btn"
+            @click=${() => this.dispatchEvent(new CustomEvent("toggle-auth", { bubbles: true, composed: true }))}
+          >
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="7" width="10" height="7" rx="1.5"/>
+              <path d="M5.5 7V5a2.5 2.5 0 015 0v2"/>
+            </svg>
+            Authorize
+          </button>
+        ` : null}
       </nav>
     `;
   }
@@ -20804,6 +20823,31 @@ SlSidebar.styles = [
         color: var(--sl-color-text-muted);
         text-align: center;
       }
+
+      /* ── Embed-mode auth button ───────────── */
+      .sidebar-auth-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: var(--sl-spacing-sm) var(--sl-spacing-md) var(--sl-spacing-md);
+        padding: 8px 14px;
+        border-radius: var(--sl-radius-md);
+        border: 1.5px solid var(--sl-color-border);
+        color: var(--sl-color-text-secondary);
+        background: transparent;
+        font-size: var(--sl-font-size-sm);
+        font-weight: 600;
+        cursor: pointer;
+        transition: all var(--sl-transition-fast);
+        flex-shrink: 0;
+        width: calc(100% - var(--sl-spacing-xl));
+      }
+
+      .sidebar-auth-btn:hover {
+        border-color: var(--sl-color-primary);
+        color: var(--sl-color-primary);
+        background: var(--sl-color-sidebar-active);
+      }
     `
 ];
 __decorateClass$9([
@@ -20818,6 +20862,12 @@ __decorateClass$9([
 __decorateClass$9([
   n2({ type: Object })
 ], SlSidebar.prototype, "searchEngine", 2);
+__decorateClass$9([
+  n2()
+], SlSidebar.prototype, "layout", 2);
+__decorateClass$9([
+  n2({ type: Array })
+], SlSidebar.prototype, "securitySchemes", 2);
 __decorateClass$9([
   r$1()
 ], SlSidebar.prototype, "_searchQuery", 2);
@@ -30111,6 +30161,7 @@ let SpecLensElement = class extends i$1 {
     this.theme = "auto";
     this.hideTryIt = false;
     this.hideCodeSamples = false;
+    this.layout = "page";
     this.config = {};
     this._spec = null;
     this._loading = false;
@@ -30230,18 +30281,27 @@ let SpecLensElement = class extends i$1 {
   _handleTryIt(e2) {
     this._tryItOperation = e2.detail;
   }
+  /** Set the color theme programmatically. Useful in embed mode where the header is hidden. */
+  setTheme(preference) {
+    this.theme = preference;
+  }
   render() {
     var _a2, _b2;
     return b`
       <div class="sl-root" data-theme=${((_a2 = this._themeManager) == null ? void 0 : _a2.resolved) ?? "light"}>
         ${this._spec ? b`
-          <sl-header
-            .spec=${this._spec}
-            .authOpen=${this._authOpen}
-            @toggle-theme=${this._handleThemeToggle}
-            @toggle-sidebar=${() => this._sidebarOpen = !this._sidebarOpen}
-            @toggle-auth=${() => this._authOpen = !this._authOpen}
-          ></sl-header>
+          ${this.layout === "page" ? b`
+            <sl-header
+              .spec=${this._spec}
+              .authOpen=${this._authOpen}
+              @toggle-theme=${this._handleThemeToggle}
+              @toggle-sidebar=${() => this._sidebarOpen = !this._sidebarOpen}
+              @toggle-auth=${() => this._authOpen = !this._authOpen}
+            >
+              <slot name="logo" slot="logo"></slot>
+              <slot name="header-actions" slot="header-actions"></slot>
+            </sl-header>
+          ` : null}
 
           <div class="sl-body">
             <sl-sidebar
@@ -30249,12 +30309,15 @@ let SpecLensElement = class extends i$1 {
               .activeOperationId=${this._activeOperationId}
               .open=${this._sidebarOpen}
               .searchEngine=${this._search}
+              .layout=${this.layout}
+              .securitySchemes=${this._spec.securitySchemes}
               @navigate=${(e2) => {
       var _a3;
       return (_a3 = this._router) == null ? void 0 : _a3.navigateTo(e2.detail);
     }}
               @navigate-intro=${() => this._scrollToIntro()}
               @close-sidebar=${() => this._sidebarOpen = false}
+              @toggle-auth=${() => this._authOpen = !this._authOpen}
             ></sl-sidebar>
 
             <main class="sl-main">
@@ -30892,6 +30955,12 @@ SpecLensElement.styles = [
           padding: var(--sl-spacing-md);
         }
       }
+
+      /* ── Embed mode ──────────────────────── */
+      :host([layout="embed"]) {
+        --sl-header-height: 0px;
+        min-height: unset;
+      }
     `
 ];
 __decorateClass([
@@ -30909,6 +30978,9 @@ __decorateClass([
 __decorateClass([
   n2({ type: Boolean, attribute: "hide-code-samples" })
 ], SpecLensElement.prototype, "hideCodeSamples", 2);
+__decorateClass([
+  n2({ reflect: true, attribute: "layout" })
+], SpecLensElement.prototype, "layout", 2);
 __decorateClass([
   r$1()
 ], SpecLensElement.prototype, "_spec", 2);