@kodaris/krubble-app-components 1.0.127 → 1.0.129

package/dist/krubble-app.umd.js

@@ -11511,17 +11511,31 @@
    *     { 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() {
@@ -11543,6 +11557,17 @@
            * 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();
           };
@@ -11603,7 +11628,35 @@
               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 `
@@ -11630,6 +11683,31 @@
               `)}
           </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">
@@ -11718,6 +11796,19 @@
       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;
@@ -11742,6 +11833,12 @@
   __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.