@kodaris/krubble-app-components 1.0.37 → 1.0.39

package/dist/krubble-app.bundled.js

@@ -55,971 +55,15 @@ const t={ATTRIBUTE:1,CHILD:2},e$2=t=>(...e)=>({_$litDirective$:t,values:e});clas
 
 /**
  * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */const e$1=e$2(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o=e$2(e);
-
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * Global shell component with app bar for app switching.
- *
- * The shell provides a horizontal app bar across the top of the viewport containing:
- * - Logo/home link on the left
- * - App switcher icons in the middle
- * - User avatar/menu on the right
- *
- * This allows individual apps (using kr-scaffold) to utilize the full width
- * of the browser window while maintaining consistent global navigation.
- *
- * @slot - The main content (typically kr-scaffold with the app)
- *
- * @property {string} logo - URL for the logo image
- * @property {KRApp[]} apps - Available applications for the switcher
- * @property {string} activeAppId - ID of the currently active app
- * @property {KRShellUser} user - User profile data
- * @property {KRShellMenuItem[]} menuItems - Custom menu items for user menu
- *
- * @fires app-click - When an app icon is clicked. Detail: { app: KRApp }
- * @fires menu-item-click - When a menu item is clicked. Detail: { item: KRShellMenuItem }
- * @fires logout - When logout is clicked
- */
-let KRShell = class KRShell extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.logo = 'https://s3.amazonaws.com/kodariscom/kodariscom/content/website/kodaris-logo-icon-light-53.png';
-        this.apps = [];
-        this.activeAppId = '';
-        this.user = null;
-        this.menuItems = [];
-        this.isUserMenuOpen = false;
-        this.isAppsMenuOpen = false;
-        this.pendingRequests = 0;
-        this.originalFetch = null;
-        this.originalXhrOpen = null;
-        // Default icons
-        this.defaultLogoutIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>';
-        this.appsGridIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>';
-        this.closeIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.installFetchInterceptor();
-        // Hide the default Chatlio close button (we use our own custom button)
-        if (!document.getElementById('chatlio-widget-styles')) {
-            const style = document.createElement('style');
-            style.id = 'chatlio-widget-styles';
-            style.textContent = `
-        .chatlio-title-bar {
-          display: none !important;
-        }
-        
-        .chatlio-widget-body {
-          bottom: 36px !important;
-        }
-      `;
-            document.head.appendChild(style);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.uninstallFetchInterceptor();
-    }
-    /**
-     * Installs global interceptors for fetch and XMLHttpRequest to track pending HTTP requests.
-     * Updates `pendingRequests` state when requests start/complete.
-     */
-    installFetchInterceptor() {
-        if (this.originalFetch)
-            return;
-        const shell = this;
-        // Intercept fetch
-        this.originalFetch = window.fetch.bind(window);
-        const originalFetch = this.originalFetch;
-        window.fetch = function (...args) {
-            shell.pendingRequests++;
-            return originalFetch(...args).finally(() => {
-                shell.pendingRequests--;
-            });
-        };
-        // Intercept XMLHttpRequest
-        this.originalXhrOpen = XMLHttpRequest.prototype.open;
-        const originalXhrOpen = this.originalXhrOpen;
-        XMLHttpRequest.prototype.open = function (method, url, async = true, username, password) {
-            shell.pendingRequests++;
-            this.addEventListener('loadend', () => {
-                shell.pendingRequests--;
-            }, { once: true });
-            return originalXhrOpen.call(this, method, url, async, username, password);
-        };
-    }
-    /**
-     * Restores the original fetch and XMLHttpRequest functions.
-     */
-    uninstallFetchInterceptor() {
-        if (this.originalFetch) {
-            window.fetch = this.originalFetch;
-            this.originalFetch = null;
-        }
-        if (this.originalXhrOpen) {
-            XMLHttpRequest.prototype.open = this.originalXhrOpen;
-            this.originalXhrOpen = null;
-        }
-    }
-    handleLogoClick() {
-        this.dispatchEvent(new CustomEvent('logo-click', {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    toggleUserMenu() {
-        this.isUserMenuOpen = !this.isUserMenuOpen;
-        this.isAppsMenuOpen = false;
-    }
-    closeUserMenu() {
-        this.isUserMenuOpen = false;
-    }
-    toggleAppsMenu() {
-        this.isAppsMenuOpen = !this.isAppsMenuOpen;
-        this.isUserMenuOpen = false;
-    }
-    closeAppsMenu() {
-        this.isAppsMenuOpen = false;
-    }
-    handleMenuItemClick(item) {
-        this.closeUserMenu();
-        this.dispatchEvent(new CustomEvent('menu-item-click', {
-            detail: { item },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleLogout() {
-        this.closeUserMenu();
-        this.dispatchEvent(new CustomEvent('logout', {
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleChatClick() {
-        // Toggle Chatlio widget
-        if (typeof window._chatlio !== 'undefined') {
-            window._chatlio.showOrHide();
-        }
-    }
-    renderAppsMenu() {
-        return b `
-      <div class="appbar-apps">
-        ${this.isAppsMenuOpen ? b `
-          <div class="menu-backdrop" @click=${this.closeAppsMenu}></div>
-        ` : A}
-
-        <button
-          class=${e$1({
-            'appbar-apps-btn': true,
-            'appbar-apps-btn--open': this.isAppsMenuOpen,
-        })}
-          @click=${this.toggleAppsMenu}
-        >
-          <span class="appbar-apps-btn__icon">${o(this.appsGridIcon)}</span>
-        </button>
-
-        <div class=${e$1({
-            'appbar-apps-menu': true,
-            'appbar-apps-menu--open': this.isAppsMenuOpen,
-        })}>
-          <div class="appbar-apps-menu__header">
-            <h2 class="appbar-apps-menu__title">Applications</h2>
-            <button class="appbar-apps-menu__close" @click=${this.closeAppsMenu}>
-              ${o(this.closeIcon)}
-            </button>
-          </div>
-          <div class="appbar-apps-menu__content">
-            <div class="appbar-apps-menu__list">
-              ${this.apps.map((app) => b `
-                <a
-                  class="appbar-apps-menu__item"
-                  href=${app.url}
-                  @click=${(e) => {
-            this.closeAppsMenu();
-            const event = new CustomEvent('app-click', {
-                detail: { app },
-                bubbles: true,
-                composed: true,
-                cancelable: true,
-            });
-            this.dispatchEvent(event);
-            if (event.defaultPrevented) {
-                e.preventDefault();
-            }
-        }}
-                >
-                  ${app.name}
-                </a>
-              `)}
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    renderUserMenu() {
-        if (!this.user)
-            return A;
-        const initials = this.user.name
-            .split(' ')
-            .map((part) => part[0])
-            .join('')
-            .toUpperCase()
-            .slice(0, 2);
-        return b `
-      <div class="appbar-user">
-        ${this.isUserMenuOpen ? b `
-          <div class="menu-backdrop" @click=${this.closeUserMenu}></div>
-        ` : A}
-
-        <div
-          class="appbar-user__avatar"
-          @click=${this.toggleUserMenu}
-        >
-          ${this.user.avatar
-            ? b `<img src=${this.user.avatar} alt=${this.user.name} />`
-            : initials}
-        </div>
-
-        <div class=${e$1({
-            'appbar-user__menu': true,
-            'appbar-user__menu--open': this.isUserMenuOpen,
-        })}>
-          <div class="appbar-user__header">
-            <p class="appbar-user__name">${this.user.name}</p>
-            ${this.user.email ? b `
-              <p class="appbar-user__email">${this.user.email}</p>
-            ` : A}
-          </div>
-
-          ${this.menuItems.map((item) => item.divider
-            ? b `<div class="appbar-user__menu-divider"></div>`
-            : b `
-                <button
-                  class="appbar-user__menu-item"
-                  @click=${() => this.handleMenuItemClick(item)}
-                >
-                  ${item.icon ? b `
-                    <span class="appbar-user__menu-item__icon">${o(item.icon)}</span>
-                  ` : A}
-                  ${item.label}
-                </button>
-              `)}
-
-          ${this.menuItems.length > 0 ? b `
-            <div class="appbar-user__menu-divider"></div>
-          ` : A}
-
-          <button
-            class="appbar-user__menu-item appbar-user__menu-item--danger"
-            @click=${this.handleLogout}
-          >
-            <span class="appbar-user__menu-item__icon">${o(this.defaultLogoutIcon)}</span>
-            Sign Out
-          </button>
-        </div>
-      </div>
-    `;
-    }
-    render() {
-        return b `
-      <div class=${e$1({
-            'progress': true,
-            'progress--loading': this.pendingRequests > 0,
-        })}>
-        <div class="progress__track"></div>
-        <div class="progress__bar progress__bar--primary">
-          <span class="progress__bar-inner"></span>
-        </div>
-        <div class="progress__bar progress__bar--secondary">
-          <span class="progress__bar-inner"></span>
-        </div>
-      </div>
-
-      <header class="appbar">
-        <!-- Logo -->
-        ${this.logo ? b `
-          <div class="appbar-logo" @click=${this.handleLogoClick}>
-            <img src=${this.logo} alt="Home" />
-          </div>
-          <div class="appbar-divider"></div>
-        ` : A}
-
-        <!-- App Switcher -->
-        ${this.renderAppsMenu()}
-
-        <div class="appbar-spacer"></div>
-
-        <!-- User -->
-        ${this.renderUserMenu()}
-      </header>
-
-<!--      <div class="subbar">-->
-<!--        <nav class="breadcrumbs">-->
-<!--          <a href="#">Home</a>-->
-<!--          <span class="breadcrumbs__separator">/</span>-->
-<!--          <a href="#">Companies</a>-->
-<!--          <span class="breadcrumbs__separator">/</span>-->
-<!--          <span>Acme Corp</span>-->
-<!--        </nav>-->
-<!--      </div>-->
-
-      <main class="main">
-        <slot></slot>
-      </main>
-      
-      <footer class="footer">
-        <div class="footer-content">
-          <div class="footer-info">
-            <span>© ${new Date().getFullYear()} Kodaris. All Rights Reserved.</span>
-          </div>
-          <a class="footer-link" target="_blank" href="https://www.kodaris.com/content/privacy-policy">Privacy</a>
-          <a class="footer-link" target="_blank" href="https://www.kodaris.com/content/terms-use">Terms</a>
-          <button class="footer-chat" data-chatlio-widget-button @click=${this.handleChatClick}>
-            <span class="footer-chat__icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square-icon lucide-messages-square">
-                    <path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"/>
-                </svg>
-            </span>
-            Chat with us
-          </button>
-        </div>
-      </footer>
-    `;
-    }
-};
-KRShell.styles = i$4 `
-    :host {
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-      width: 100vw;
-      --kr-shell-bar-height: 48px;
-      --kr-shell-bar-bg: #10172a; /* matches scaffold nav-bg */
-      /* --kr-shell-bar-bg: #0a0f1a; */ /* original darker bg */
-      --kr-shell-bar-border: rgba(255, 255, 255, 0.08);
-      --kr-shell-icon-size: 36px;
-      --kr-shell-icon-color: rgba(255, 255, 255, 0.7);
-      --kr-shell-icon-color-hover: rgba(255, 255, 255, 1);
-      --kr-shell-icon-color-active: #beea4e;
-      --kr-shell-icon-bg-hover: rgba(255, 255, 255, 0.08);
-      --kr-shell-icon-bg-active: rgba(190, 234, 78, 0.15);
-      --kr-shell-tooltip-bg: #1a2332;
-      --kr-shell-tooltip-color: #ffffff;
-      --kr-shell-menu-bg: #1a2332;
-      --kr-shell-menu-border: rgba(255, 255, 255, 0.1);
-      --kr-shell-menu-hover: rgba(255, 255, 255, 0.08);
-    }
-
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
-
-    /* App Bar */
-    .appbar {
-      height: var(--kr-shell-bar-height);
-      background: var(--kr-shell-bar-bg);
-      border-bottom: 1px solid var(--kr-shell-bar-border);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      flex-shrink: 0;
-      z-index: 100;
-    }
-
-    /* Logo */
-    .appbar-logo {
-      cursor: pointer;
-      margin-right: 8px;
-    }
-
-    .appbar-logo img {
-      display: block;
-      max-width: 24px;
-      max-height: 24px;
-      object-fit: contain;
-    }
-
-    /* Divider */
-    .appbar-divider {
-      width: 1px;
-      height: 24px;
-      background: #ffffff4f;
-      margin: 0 10px;
-    }
-
-    /* Apps Button */
-    .appbar-apps {
-      position: relative;
-    }
-
-    .appbar-apps-btn {
-      width: var(--kr-shell-icon-size);
-      height: var(--kr-shell-icon-size);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 6px;
-      cursor: pointer;
-      color: var(--kr-shell-icon-color);
-      background: transparent;
-      border: none;
-      padding: 0;
-      transition: all 0.15s ease;
-    }
-
-    .appbar-apps-btn:hover {
-      color: var(--kr-shell-icon-color-hover);
-      background: var(--kr-shell-icon-bg-hover);
-    }
-
-    .appbar-apps-btn--open {
-      color: var(--kr-shell-icon-color-hover);
-      background: var(--kr-shell-icon-bg-hover);
-    }
-
-    .appbar-apps-btn__icon {
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #ffffff;
-    }
-
-    .appbar-apps-btn__icon svg {
-      width: 100%;
-      height: 100%;
-      fill: currentColor;
-    }
-
-    /* Apps Megamenu */
-    .appbar-apps-menu {
-      position: absolute;
-      left: 0;
-      top: 100%;
-      margin-top: 6px;
-      min-width: 320px;
-      min-height: 90vh;
-      max-height: calc(100vh - var(--kr-shell-bar-height));
-      background: #10172a;
-      border: 1px solid var(--kr-shell-menu-border);
-      border-top: none;
-      border-radius: 0 0 8px 8px;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(-10px);
-      transition: all 0.15s ease;
-      overflow-y: auto;
-    }
-
-    .appbar-apps-menu--open {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    .appbar-apps-menu__header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 16px 16px 16px 24px;
-      border-bottom: 1px solid var(--kr-shell-menu-border);
-    }
-
-    .appbar-apps-menu__title {
-      font-size: 16px;
-      font-weight: 500;
-      color: #ffffff;
-      margin: 0;
-    }
-
-    .appbar-apps-menu__close {
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.6);
-      cursor: pointer;
-      border-radius: 6px;
-      transition: all 0.15s ease;
-    }
-
-    .appbar-apps-menu__close:hover {
-      background: var(--kr-shell-menu-hover);
-      color: #ffffff;
-    }
-
-    .appbar-apps-menu__close svg {
-      width: 24px;
-      height: 24px;
-      fill: #ffffff;
-    }
-
-    .appbar-apps-menu__content {
-      padding: 16px 8px;
-    }
-
-    .appbar-apps-menu__list {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      max-width: 320px;
-    }
-
-    .appbar-apps-menu__item {
-      display: block;
-      width: 100%;
-      padding: 12px 16px;
-      background: none;
-      border: none;
-      color: #ffffff;
-      font-size: 14px;
-      font-family: inherit;
-      text-align: left;
-      text-decoration: none;
-      cursor: pointer;
-      border-radius: 6px;
-      transition: all 0.15s ease;
-    }
-
-    .appbar-apps-menu__item:hover {
-      background: var(--kr-shell-menu-hover);
-    }
-
-    .appbar-apps-menu__item--active,
-    .appbar-apps-menu__item--active:hover {
-      color: var(--kr-shell-icon-color-active);
-    }
-
-    /* Spacer to push user to the right */
-    .appbar-spacer {
-      flex: 1;
-    }
-
-    /* User Section */
-    .appbar-user {
-      position: relative;
-      margin-left: 8px;
-    }
-
-    .appbar-user__avatar {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: #beea4e;
-      color: #0a0f1a;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      overflow: hidden;
-      border: 2px solid transparent;
-      transition: border-color 0.15s ease;
-    }
-
-    .appbar-user__avatar:hover {
-      border-color: rgba(255, 255, 255, 0.3);
-    }
-
-    .appbar-user__avatar img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    /* User Menu */
-    .appbar-user__menu {
-      position: absolute;
-      right: 0;
-      top: calc(100% + 8px);
-      min-width: 200px;
-      background: var(--kr-shell-menu-bg);
-      border: 1px solid var(--kr-shell-menu-border);
-      border-radius: 8px;
-      padding: 8px;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(-8px);
-      transition: all 0.15s ease;
-    }
-
-    .appbar-user__menu--open {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    .appbar-user__header {
-      padding: 8px 12px 12px;
-      border-bottom: 1px solid var(--kr-shell-menu-border);
-      margin-bottom: 8px;
-    }
-
-    .appbar-user__name {
-      font-size: 14px;
-      font-weight: 600;
-      color: #ffffff;
-      margin: 0 0 2px;
-    }
-
-    .appbar-user__email {
-      font-size: 12px;
-      color: rgba(255, 255, 255, 0.6);
-      margin: 0;
-    }
-
-    .appbar-user__menu-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      width: 100%;
-      padding: 10px 12px;
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 13px;
-      font-family: inherit;
-      text-align: left;
-      cursor: pointer;
-      border-radius: 6px;
-      transition: all 0.15s ease;
-    }
-
-    .appbar-user__menu-item:hover {
-      background: var(--kr-shell-menu-hover);
-      color: #ffffff;
-    }
-
-    .appbar-user__menu-item--danger {
-      color: #f87171;
-    }
-
-    .appbar-user__menu-item--danger:hover {
-      background: rgba(248, 113, 113, 0.1);
-      color: #f87171;
-    }
-
-    .appbar-user__menu-item__icon {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-
-    .appbar-user__menu-item__icon svg {
-      width: 100%;
-      height: 100%;
-      fill: currentColor;
-    }
-
-    .appbar-user__menu-divider {
-      height: 1px;
-      background: var(--kr-shell-menu-border);
-      margin: 8px 0;
-    }
-
-    /* Secondary App Bar */
-    .subbar {
-      height: 30px;
-      background: #364365;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-      display: flex;
-      align-items: center;
-      padding: 0 16px;
-      flex-shrink: 0;
-    }
-
-    .breadcrumbs {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      color: #ffffff;
-    }
-
-    .breadcrumbs a {
-      color: #ffffff;
-      text-decoration: none;
-    }
-
-    .breadcrumbs a:hover {
-      text-decoration: underline;
-    }
-
-    .breadcrumbs__separator {
-      color: #ffffff;
-    }
-
-    /* Main Content */
-    .main {
-      flex: 1;
-      min-height: 0;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      position: relative;
-    }
-
-    /* Click outside overlay */
-    .menu-backdrop {
-      position: fixed;
-      inset: 0;
-      z-index: 999;
-    }
-
-    /* Progress bar */
-    .progress {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 4px;
-      overflow-x: hidden;
-      z-index: 1000;
-      display: none;
-    }
-
-    .progress--loading {
-      display: block;
-    }
-
-    .progress__track {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 100%;
-      background: rgb(190 234 78 / 50%); // rgba(190, 234, 78, 0.3);
-    }
-
-    .progress__bar {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      width: 100%;
-      transform-origin: left center;
-    }
-
-    .progress__bar-inner {
-      display: inline-block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: #beea4e;
-    }
-
-    .progress__bar--primary {
-      left: -145.166611%;
-    }
-
-    .progress--loading .progress__bar--primary {
-      animation: progress-primary-translate 2s infinite linear;
-    }
-
-    .progress--loading .progress__bar--primary .progress__bar-inner {
-      animation: progress-primary-scale 2s infinite linear;
-    }
-
-    .progress__bar--secondary {
-      left: -54.888891%;
-    }
-
-    .progress--loading .progress__bar--secondary {
-      animation: progress-secondary-translate 2s infinite linear;
-    }
-
-    .progress--loading .progress__bar--secondary .progress__bar-inner {
-      animation: progress-secondary-scale 2s infinite linear;
-    }
-
-    @keyframes progress-primary-translate {
-      0% {
-        transform: translateX(0);
-      }
-      20% {
-        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-        transform: translateX(0);
-      }
-      59.15% {
-        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-        transform: translateX(83.67142%);
-      }
-      100% {
-        transform: translateX(200.611057%);
-      }
-    }
-
-    @keyframes progress-primary-scale {
-      0% {
-        transform: scaleX(0.08);
-      }
-      36.65% {
-        animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
-        transform: scaleX(0.08);
-      }
-      69.15% {
-        animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
-        transform: scaleX(0.661479);
-      }
-      100% {
-        transform: scaleX(0.08);
-      }
-    }
-
-    @keyframes progress-secondary-translate {
-      0% {
-        animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-        transform: translateX(0);
-      }
-      25% {
-        animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-        transform: translateX(37.651913%);
-      }
-      48.35% {
-        animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-        transform: translateX(84.386165%);
-      }
-      100% {
-        transform: translateX(160.277782%);
-      }
-    }
-
-    @keyframes progress-secondary-scale {
-      0% {
-        animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
-        transform: scaleX(0.08);
-      }
-      19.15% {
-        animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
-        transform: scaleX(0.457104);
-      }
-      44.15% {
-        animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
-        transform: scaleX(0.72796);
-      }
-      100% {
-        transform: scaleX(0.08);
-      }
-    }
-
-    .footer {
-      background: var(--kr-shell-bar-bg);
-      border-top: 1px solid var(--kr-shell-bar-border);
-      padding: 8px 16px;
-      flex-shrink: 0;
-    }
-
-    .footer-content {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      gap: 36px;
-    }
-
-    .footer-info {
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.7);
-    }
-    
-    .footer-link {
-      color: rgba(255, 255, 255, 0.7);
-      text-decoration: none;
-      font-size: 12px;
-    }
-
-    .footer-link:hover {
-      color: #ffffff;
-      text-decoration: underline;
-    }
-
-    .footer-chat {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 14px;
-      color: #beea4e;
-      cursor: pointer;
-      background: none;
-      border: none;
-      border-radius: 4px;
-      font-family: inherit;
-      transition: background 0.15s ease;
-    }
-
-    .footer-chat:hover {
-      background: rgba(255, 255, 255, 0.08);
-    }
-
-    .footer-chat__icon {
-      width: 16px;
-      height: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let e$1 = class e extends i{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}};e$1.directiveName="unsafeHTML",e$1.resultType=1;const o=e$2(e$1);
 
-    .footer-chat__icon svg {
-      width: 100%;
-      height: 100%;
-      stroke: currentColor;
-    }
-  `;
-__decorate$5([
-    n({ type: String })
-], KRShell.prototype, "logo", void 0);
-__decorate$5([
-    n({ type: Array })
-], KRShell.prototype, "apps", void 0);
-__decorate$5([
-    n({ type: String, attribute: 'active-app-id' })
-], KRShell.prototype, "activeAppId", void 0);
-__decorate$5([
-    n({ type: Object })
-], KRShell.prototype, "user", void 0);
-__decorate$5([
-    n({ type: Array, attribute: 'menu-items' })
-], KRShell.prototype, "menuItems", void 0);
-__decorate$5([
-    r()
-], KRShell.prototype, "isUserMenuOpen", void 0);
-__decorate$5([
-    r()
-], KRShell.prototype, "isAppsMenuOpen", void 0);
-__decorate$5([
-    r()
-], KRShell.prototype, "pendingRequests", void 0);
-KRShell = __decorate$5([
-    t$1('kr-shell')
-], KRShell);
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const e=e$2(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -2215,7 +1259,7 @@ let KRScaffold = class KRScaffold extends i$1 {
             const children = this.getNavItemChildren(item.id);
             return b `
         <button
-          class=${e$1({
+          class=${e({
                 'nav-item': true,
                 'nav-item--expanded': this.navItemsExpanded.has(item.id),
                 'nav-item--hidden': this.isEditing && item.active === false,
@@ -2240,7 +1284,7 @@ let KRScaffold = class KRScaffold extends i$1 {
             <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
           </svg>
         </button>
-        <div class=${e$1({
+        <div class=${e({
                 'nav-group': true,
                 'nav-group--expanded': this.navItemsExpanded.has(item.id),
             })}>
@@ -2250,7 +1294,7 @@ let KRScaffold = class KRScaffold extends i$1 {
         }
         return b `
       <a
-        class=${e$1({
+        class=${e({
             'nav-item': true,
             'nav-item--active': this.activeNavItemId === item.id,
             'nav-item--hidden': this.isEditing && item.active === false,
@@ -2275,7 +1319,7 @@ let KRScaffold = class KRScaffold extends i$1 {
         // Use unfiltered count to determine if search should show (so it doesn't disappear while typing)
         const totalTopLevelItems = this.getComputedNav().filter(item => item.parentId === null).length;
         return b `
-      <div class=${e$1({
+      <div class=${e({
             'progress': true,
             'progress--loading': this.pendingRequests > 0,
         })}>
@@ -2295,7 +1339,7 @@ let KRScaffold = class KRScaffold extends i$1 {
       ` : A}
 
       <div class="wrapper">
-        <nav class=${e$1({
+        <nav class=${e({
             'nav': true,
             'nav--scrolled': this.isNavScrolled,
             'nav--opened': !this.subbar || this.isNavOpened,
@@ -3269,8 +2313,8 @@ KRScreenNav.styles = i$4 `
 
     .nav {
       width: 200px;
-      background: #F3F7FC;
-      //border-right: 1px solid #000000;
+      background: white;
+      border-right: 1px solid #e5e7eb;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
@@ -3287,7 +2331,7 @@ KRScreenNav.styles = i$4 `
     }
 
     .nav-header__title {
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 600;
       color: #111827;
       white-space: nowrap;
@@ -3562,7 +2606,7 @@ let KRSubbar = class KRSubbar extends i$1 {
             return b `
             ${index > 0 ? b `<span class="breadcrumb-separator">/</span>` : ''}
             <a
-              class=${e$1({ 'breadcrumb': true, 'breadcrumb--current': isCurrent })}
+              class=${e({ 'breadcrumb': true, 'breadcrumb--current': isCurrent })}
               href=${this.resolveUrl(crumb)}
               @click=${(e) => this._handleBreadcrumbClick(e, crumb, isCurrent)}
             >${crumb.label}</a>
@@ -3653,5 +2697,5 @@ KRSubbar = __decorate([
     t$1('kr-subbar')
 ], KRSubbar);
 
-export { KRScaffold, KRScreenDetail, KRScreenNav, KRShell, KRSubbar };
+export { KRScaffold, KRScreenDetail, KRScreenNav, KRSubbar };
 //# sourceMappingURL=krubble-app.bundled.js.map