@kodaris/krubble-app-components 1.0.127 → 1.0.129

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { KRRouter, KRRouterOutlet } from './router.js';
 export { KRChatbot } from './chatbot.js';
 export type { KRSubbarBreadcrumb } from './subbar.js';
 export type { KRNavItem, KRNavItemFlat, KRUser } from './scaffold.js';
-export type { KRScreenNavItem } from './screen-nav.js';
+export type { KRScreenNavItem, KRScreenNavAction } from './screen-nav.js';
 export type { KRRoute, KRRouterConfig, KRMatchedRoute } from './router.js';
 export type { KRChatbotMessage, KRChatbotSend, KRChatbotConversationFile, KRChatbotSendFile } from './chatbot.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC3E,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC1E,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC3E,YAAY,EAAE,gBAAgB,EAAE,aAAa,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/dist/krubble-app.bundled.js

@@ -11508,17 +11508,31 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
  *     { id: 'activity', label: 'Activity', url: '/companies/123/activity' },
  *   ]}
  *   activeId="overview"
+ *   .actions=${[
+ *     { id: 'edit', label: 'Edit', variant: 'flat' },
+ *     { id: 'archive', label: 'Archive' },
+ *     { id: 'delete', label: 'Delete' },
+ *     { id: 'export', label: 'Export' },
+ *   ]}
  * >
  *   <div>Screen content here</div>
  * </kr-screen-nav>
  * ```
  *
+ * Actions render in a footer at the bottom of the nav column. With more than
+ * `maxVisibleActions` (default 3), the overflow collapses into a "More" dropdown.
+ * Listen for `action-click` to handle a click: `e.detail.action` is the action id.
+ *
  * @slot - The main screen content
  *
  * @property {string} label - Main label (e.g., entity name like "Acme Corporation")
  * @property {string} subLabel - Sub label (e.g., entity type like "Company")
  * @property {KRScreenNavItem[]} items - Navigation items as JSON array
  * @property {string} activeId - Currently active item ID
+ * @property {KRScreenNavAction[]} actions - Action buttons rendered in the nav footer
+ * @property {number} maxVisibleActions - Max inline actions before collapsing into a "More" dropdown (default 3)
+ *
+ * @fires action-click - When an action button (inline or overflow) is clicked; detail is `{ action: id }`
  */
 class KRScreenNav extends i$3 {
     constructor() {
@@ -11540,6 +11554,17 @@ class KRScreenNav extends i$3 {
          * Can be set explicitly by the parent to override.
          */
         this.activeId = '';
+        /**
+         * Action buttons rendered in the nav footer.
+         */
+        this.actions = [];
+        /**
+         * Max number of inline action buttons before the overflow collapses into a
+         * "More" dropdown. When actions exceed this count, the last visible slot is
+         * used for the "More" button so the total footer button count never exceeds
+         * this value.
+         */
+        this.maxVisibleActions = 3;
         this.handlePopstate = () => {
             this.syncActiveFromUrl();
         };
@@ -11600,7 +11625,35 @@ class KRScreenNav extends i$3 {
             this.activeId = match.id;
         }
     }
+    handleActionClick(e, action) {
+        this.dispatchEvent(new CustomEvent('action-click', {
+            detail: { action: action.id },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // Fired by the "More" kr-button when an overflow option is chosen; detail is { id, label }.
+    handleMoreSelect(e) {
+        this.dispatchEvent(new CustomEvent('action-click', {
+            detail: { action: e.detail.id },
+            bubbles: true,
+            composed: true,
+        }));
+    }
     render() {
+        const hasOverflow = this.actions.length > this.maxVisibleActions;
+        // When collapsing, the last visible slot is the "More" button, so only
+        // show the first (maxVisibleActions - 1) actions inline.
+        let inlineActions = this.actions;
+        let overflowOptions = [];
+        if (hasOverflow) {
+            inlineActions = this.actions.slice(0, this.maxVisibleActions - 1);
+            // Everything past the inline slots goes into the "More" dropdown.
+            overflowOptions = this.actions.slice(this.maxVisibleActions - 1).map((action) => ({
+                id: action.id,
+                label: action.label,
+            }));
+        }
         return b `
       <nav class="nav">
         ${this.label ? b `
@@ -11627,6 +11680,31 @@ class KRScreenNav extends i$3 {
               `)}
           </div>
         </div>
+        ${this.actions.length ? b `
+          <div class="nav-actions">
+            ${inlineActions.map((action) => b `
+                <kr-button
+                  class="nav-actions__button"
+                  variant=${action.variant || 'outline'}
+                  size="small"
+                  @click=${(e) => this.handleActionClick(e, action)}
+                >
+                  ${action.label}
+                </kr-button>
+              `)}
+            ${hasOverflow ? b `
+              <kr-button
+                class="nav-actions__button"
+                variant="outline"
+                size="small"
+                .options=${overflowOptions}
+                @option-select=${this.handleMoreSelect}
+              >
+                More
+              </kr-button>
+            ` : A}
+          </div>
+        ` : A}
       </nav>
       <main class="content">
         <div class="content__main">
@@ -11715,6 +11793,19 @@ KRScreenNav.styles = i$6 `
       font-weight: 700;
     }
 
+    .nav-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid rgba(0, 0, 0, 0.08);
+      flex-shrink: 0;
+    }
+
+    .nav-actions__button {
+      width: 100%;
+    }
+
     .content {
       flex: 1;
       min-width: 0;
@@ -11739,6 +11830,12 @@ __decorate$2([
 __decorate$2([
     n$1({ type: String })
 ], KRScreenNav.prototype, "activeId", void 0);
+__decorate$2([
+    n$1({ type: Array })
+], KRScreenNav.prototype, "actions", void 0);
+__decorate$2([
+    n$1({ type: Number })
+], KRScreenNav.prototype, "maxVisibleActions", void 0);
 // Guarded registration: no-op if the tag is already defined, so a second copy of krubble on
 // the page (e.g. the Operations shell loads krubble globally while an embedded app bundled its
 // own copy) doesn't throw. First definition wins.