@erplora/outfitkit 0.1.27 → 0.1.29

package/README.md

@@ -439,7 +439,7 @@ npm run build        # vite (dist/*.js, outfitkit.js, theme.example.css) + tsc (
 npm run typecheck    # comprobación de tipos sin emitir
 npm run verify:csp   # rechaza eval / new Function en dist (CSP estricta)
 npm run dev          # vite build --watch (showcase en local)
-npm run release      # release-it: corta una versión (ver docs/RELEASING.md)
+npm run release      # release-it a mano (NO hace falta: la CI publica al mergear, ver docs/RELEASING.md)
 ```
 
 Publicación a npm: [`docs/RELEASING.md`](docs/RELEASING.md) (Trusted Publishing / OIDC).

package/dist/components/ok-cta-band/ok-cta-band.test.d.ts

@@ -0,0 +1 @@
+import './ok-cta-band.js';

package/dist/components/ok-file-manager/ok-file-manager.d.ts

@@ -52,6 +52,22 @@ export interface OkFmQuota {
 /** Modo de visualización del área de archivos. */
 export type OkFmView = 'grid' | 'list';
 /** Textos i18n del componente (defaults en español). */
+/**
+ * Qué se puede hacer en la carpeta actual. La decide el HOST (en ERPlora, el módulo dueño de la
+ * carpeta — ADR-0172) y el componente solo la obedece al pintar: **no es una barrera de
+ * seguridad**, el servidor revalida siempre. Ver y descargar no están aquí porque son siempre
+ * posibles: "solo lectura" no significa "no puedes mirar".
+ *
+ * Ausente ⇒ todo disponible (los consumidores que no la pasan no cambian de comportamiento).
+ */
+export interface OkFmPolicy {
+    /** Subir ficheros y crear subcarpetas. */
+    upload: boolean;
+    /** Renombrar ficheros y la propia carpeta. */
+    rename: boolean;
+    /** Borrar ficheros y la propia carpeta. */
+    delete: boolean;
+}
 export interface OkFmLabels {
     /** Botón primario de subida. */
     upload: string;
@@ -73,6 +89,12 @@ export interface OkFmLabels {
     open: string;
     /** Botón de nueva carpeta. */
     newFolder: string;
+    /** Acción de renombrar (ficheros y carpetas). */
+    rename: string;
+    /** Renombrar la carpeta en la que se está. */
+    renameFolder: string;
+    /** Borrar la carpeta en la que se está (con su contenido). */
+    deleteFolder: string;
     /** Caption del medidor cuando no hay cuota dura. */
     noLimit: string;
 }
@@ -96,6 +118,9 @@ export declare class OkFileManager extends LitElement {
     searchable: boolean;
     /** Muestra el botón primario de subida y habilita drag&drop. */
     uploadable: boolean;
+    /** Acciones permitidas en la carpeta actual (ver `OkFmPolicy`). Ausente ⇒ todo permitido. */
+    policy?: OkFmPolicy;
+    private can;
     /** Muestra esqueletos de carga en lugar del contenido. */
     loading: boolean;
     /** Textos i18n (merge sobre los defaults en español). */
@@ -112,6 +137,12 @@ export declare class OkFileManager extends LitElement {
     private open;
     private download;
     private deleteFile;
+    /** Renombrar un fichero. Se manda el nombre actual para que el host lo proponga en su diálogo. */
+    private renameFile;
+    /** Etiqueta de la carpeta actual (para proponerla como nombre al renombrar). */
+    private get currentFolderLabel();
+    private renameCurrentFolder;
+    private deleteCurrentFolder;
     private createFolder;
     private changeView;
     private onSearch;
@@ -131,6 +162,7 @@ export declare class OkFileManager extends LitElement {
     private renderToolbar;
     private get iconOpen();
     private get iconDownload();
+    private get iconRename();
     private get iconDelete();
     private fileActions;
     private renderContent;

package/dist/components/ok-file-manager/ok-file-manager.test.d.ts

@@ -0,0 +1 @@
+import './ok-file-manager';

package/dist/ok-cta-band.js

@@ -20,12 +20,29 @@ class OkCtaBand extends LitElement {
     :host {
       display: block;
       width: 100%;
-      --primary: var(--ion-color-primary, #1496d6);
-      --primary-contrast: var(--ion-color-primary-contrast, #ffffff);
+      --primary: var(--ok-primary, var(--ion-color-primary, #1496d6));
+      --primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
       --color: var(--ok-text, var(--ion-text-color, #18181b));
       --muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
       --surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
       --radius: var(--ok-radius-lg, 28px);
+      --action-outline-color: var(--ok-cta-action-outline-color, var(--primary-contrast));
+      --action-outline-border-color: var(
+        --ok-cta-action-outline-border-color,
+        color-mix(in oklab, var(--action-outline-color) 62%, transparent)
+      );
+      --action-outline-background-hover: var(
+        --ok-cta-action-outline-background-hover,
+        color-mix(in oklab, var(--action-outline-color) 12%, transparent)
+      );
+      --action-outline-background-focused: var(
+        --ok-cta-action-outline-background-focused,
+        color-mix(in oklab, var(--action-outline-color) 16%, transparent)
+      );
+      --action-outline-background-activated: var(
+        --ok-cta-action-outline-background-activated,
+        color-mix(in oklab, var(--action-outline-color) 20%, transparent)
+      );
       font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
     }
     .band {
@@ -106,6 +123,18 @@ class OkCtaBand extends LitElement {
       justify-content: center;
       margin-top: 0.6rem;
     }
+    :host(:not([variant])) ::slotted(ion-button[fill='outline']),
+    :host([variant='solid']) ::slotted(ion-button[fill='outline']) {
+      --color: var(--action-outline-color);
+      --color-hover: var(--action-outline-color);
+      --color-focused: var(--action-outline-color);
+      --color-activated: var(--action-outline-color);
+      --border-color: var(--action-outline-border-color);
+      --background-hover: var(--action-outline-background-hover);
+      --background-focused: var(--action-outline-background-focused);
+      --background-activated: var(--action-outline-background-activated);
+      --ripple-color: var(--action-outline-color);
+    }
   `;
   }
   render() {

package/dist/ok-file-manager.js

@@ -22,6 +22,9 @@ const DEFAULT_LABELS = {
   delete: "Eliminar",
   open: "Abrir",
   newFolder: "Nueva carpeta",
+  rename: "Renombrar",
+  renameFolder: "Renombrar carpeta",
+  deleteFolder: "Eliminar carpeta",
   noLimit: "Sin límite"
 };
 class OkFileManager extends LitElement {
@@ -545,6 +548,11 @@ class OkFileManager extends LitElement {
     .action.danger:hover {
       color: var(--danger);
     }
+    /* Borrar la carpeta actual: se tiñe al pasar por encima, igual que el borrado de un fichero. */
+    .tbtn.danger:hover {
+      color: var(--danger);
+      border-color: var(--danger);
+    }
     .action svg {
       width: 15px;
       height: 15px;
@@ -644,6 +652,9 @@ class OkFileManager extends LitElement {
     }
   `;
   }
+  can(action) {
+    return this.policy ? this.policy[action] : true;
+  }
   // Textos efectivos.
   get t() {
     return { ...DEFAULT_LABELS, ...this.labels };
@@ -671,7 +682,21 @@ class OkFileManager extends LitElement {
     this.emit("ok-download", { id: file.id, url: file.url });
   }
   deleteFile(id) {
-    this.emit("ok-delete", { id });
+    this.emit("ok-delete", { id, kind: "file" });
+  }
+  /** Renombrar un fichero. Se manda el nombre actual para que el host lo proponga en su diálogo. */
+  renameFile(file) {
+    this.emit("ok-rename", { id: file.id, name: file.name, kind: "file" });
+  }
+  /** Etiqueta de la carpeta actual (para proponerla como nombre al renombrar). */
+  get currentFolderLabel() {
+    return this.path[this.path.length - 1]?.label ?? this.selected.split("/").pop() ?? "";
+  }
+  renameCurrentFolder() {
+    this.emit("ok-rename", { id: this.selected, name: this.currentFolderLabel, kind: "folder" });
+  }
+  deleteCurrentFolder() {
+    this.emit("ok-delete", { id: this.selected, kind: "folder" });
   }
   createFolder() {
     this.emit("ok-create-folder", { parent: this.selected });
@@ -877,23 +902,47 @@ class OkFileManager extends LitElement {
         </button>
       </div>
 
-      <button
-        type="button"
-        class="tbtn icon"
-        aria-label=${this.t.newFolder}
-        title=${this.t.newFolder}
-        @click=${() => this.createFolder()}
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-          stroke-linecap="round" stroke-linejoin="round">
-          <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-          <path d="M12 11v6M9 14h6" />
-        </svg>
-      </button>
+      ${this.selected && this.can("rename") ? html`<button
+            type="button"
+            class="tbtn icon"
+            data-act="rename-folder"
+            aria-label=${this.t.renameFolder}
+            title=${this.t.renameFolder}
+            @click=${() => this.renameCurrentFolder()}
+          >
+            ${this.iconRename}
+          </button>` : ""}
+
+      ${this.selected && this.can("delete") ? html`<button
+            type="button"
+            class="tbtn icon danger"
+            data-act="delete-folder"
+            aria-label=${this.t.deleteFolder}
+            title=${this.t.deleteFolder}
+            @click=${() => this.deleteCurrentFolder()}
+          >
+            ${this.iconDelete}
+          </button>` : ""}
+
+      ${this.can("upload") ? html`<button
+            type="button"
+            class="tbtn icon"
+            data-act="new-folder"
+            aria-label=${this.t.newFolder}
+            title=${this.t.newFolder}
+            @click=${() => this.createFolder()}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <path d="M12 11v6M9 14h6" />
+            </svg>
+          </button>` : ""}
 
-      ${this.uploadable ? html`<button
+      ${this.uploadable && this.can("upload") ? html`<button
             type="button"
             class="tbtn primary icon"
+            data-act="upload"
             aria-label=${this.t.upload}
             title=${this.t.upload}
             @click=${() => this.openPicker()}
@@ -920,17 +969,25 @@ class OkFileManager extends LitElement {
       <polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
     </svg>`;
   }
+  get iconRename() {
+    return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+      stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
+    </svg>`;
+  }
   get iconDelete() {
     return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
       <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
     </svg>`;
   }
-  // Acciones de un archivo (abrir/descargar/eliminar), reutilizadas en grid y lista.
+  // Acciones de un archivo, reutilizadas en grid y lista. Abrir y descargar SIEMPRE se ofrecen;
+  // renombrar y borrar solo si la política de la carpeta los concede.
   fileActions(file) {
     return html`<button
         type="button"
         class="action"
+        data-act="open"
         aria-label=${this.t.open}
         title=${this.t.open}
         @click=${(e) => {
@@ -943,6 +1000,7 @@ class OkFileManager extends LitElement {
       <button
         type="button"
         class="action"
+        data-act="download"
         aria-label=${this.t.download}
         title=${this.t.download}
         @click=${(e) => {
@@ -952,18 +1010,32 @@ class OkFileManager extends LitElement {
       >
         ${this.iconDownload}
       </button>
-      <button
-        type="button"
-        class="action danger"
-        aria-label=${this.t.delete}
-        title=${this.t.delete}
-        @click=${(e) => {
+      ${this.can("rename") ? html`<button
+            type="button"
+            class="action"
+            data-act="rename-file"
+            aria-label=${this.t.rename}
+            title=${this.t.rename}
+            @click=${(e) => {
+      e.stopPropagation();
+      this.renameFile(file);
+    }}
+          >
+            ${this.iconRename}
+          </button>` : ""}
+      ${this.can("delete") ? html`<button
+            type="button"
+            class="action danger"
+            data-act="delete-file"
+            aria-label=${this.t.delete}
+            title=${this.t.delete}
+            @click=${(e) => {
       e.stopPropagation();
       this.deleteFile(file.id);
     }}
-      >
-        ${this.iconDelete}
-      </button>`;
+          >
+            ${this.iconDelete}
+          </button>` : ""}`;
   }
   // ---- Render del contenido (grid/lista/vacío/loading) ----
   renderContent() {
@@ -1096,6 +1168,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], OkFileManager.prototype, "uploadable");
+__decorateClass([
+  property({ attribute: false })
+], OkFileManager.prototype, "policy");
 __decorateClass([
   property({ type: Boolean })
 ], OkFileManager.prototype, "loading");

package/dist/outfitkit.bundle.js

@@ -585,7 +585,7 @@ const _i = (n, e, t) => (t.configurable = !0, t.enumerable = !0, Reflect.decorat
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function T(n, e) {
+function B(n, e) {
   return (t, o, r) => {
     const i = (a) => a.renderRoot?.querySelector(n) ?? null;
     if (e) {
@@ -6669,7 +6669,7 @@ ho([
   l({ attribute: !1 })
 ], Mr.prototype, "labels", 2);
 ho([
-  T("input")
+  B("input")
 ], Mr.prototype, "firstInput", 2);
 k("ok-otp", Mr);
 var ll = Object.defineProperty, cl = Object.getOwnPropertyDescriptor, qe = (n, e, t, o) => {
@@ -7558,7 +7558,7 @@ ye([
   v()
 ], ie.prototype, "error", 2);
 ye([
-  T('input[type="file"]')
+  B('input[type="file"]')
 ], ie.prototype, "input", 2);
 k("ok-dropzone", ie);
 var yl = Object.defineProperty, kl = Object.getOwnPropertyDescriptor, Yt = (n, e, t, o) => {
@@ -7957,10 +7957,10 @@ $t([
   l({ attribute: !1 })
 ], He.prototype, "labels", 2);
 $t([
-  T(".log")
+  B(".log")
 ], He.prototype, "logEl", 2);
 $t([
-  T("ion-textarea")
+  B("ion-textarea")
 ], He.prototype, "textareaEl", 2);
 k("ok-chat", He);
 var zl = Object.defineProperty, _l = Object.getOwnPropertyDescriptor, ke = (n, e, t, o) => {
@@ -9282,7 +9282,7 @@ Ct([
   v()
 ], Ye.prototype, "slottedCount", 2);
 Ct([
-  T(".track")
+  B(".track")
 ], Ye.prototype, "trackEl", 2);
 k("ok-carousel", Ye);
 var jl = Object.defineProperty, Ll = Object.getOwnPropertyDescriptor, zt = (n, e, t, o) => {
@@ -9478,7 +9478,7 @@ zt([
   l({ attribute: !1 })
 ], We.prototype, "labels", 2);
 zt([
-  T("canvas")
+  B("canvas")
 ], We.prototype, "canvas", 2);
 k("ok-signature", We);
 var Tl = Object.defineProperty, Bl = Object.getOwnPropertyDescriptor, Wt = (n, e, t, o) => {
@@ -10275,7 +10275,7 @@ $e([
   v()
 ], se.prototype, "muted", 2);
 $e([
-  T("audio")
+  B("audio")
 ], se.prototype, "audioEl", 2);
 k("ok-audio", se);
 var oc = Object.defineProperty, ic = Object.getOwnPropertyDescriptor, ne = (n, e, t, o) => {
@@ -10594,10 +10594,10 @@ ne([
   v()
 ], G.prototype, "muted", 2);
 ne([
-  T("video")
+  B("video")
 ], G.prototype, "videoEl", 2);
 ne([
-  T(".stage")
+  B(".stage")
 ], G.prototype, "stageEl", 2);
 k("ok-video", G);
 var sc = Object.defineProperty, nc = Object.getOwnPropertyDescriptor, uo = (n, e, t, o) => {
@@ -11949,7 +11949,7 @@ Xe([
   v()
 ], Ce.prototype, "activeIndex", 2);
 Xe([
-  T(".search input")
+  B(".search input")
 ], Ce.prototype, "searchInput", 2);
 k("ok-command-palette", Ce);
 var $c = Object.defineProperty, Cc = Object.getOwnPropertyDescriptor, Gt = (n, e, t, o) => {
@@ -12131,7 +12131,7 @@ Gt([
   l({ attribute: "trigger-label" })
 ], Et.prototype, "triggerLabel", 2);
 Gt([
-  T(".top input")
+  B(".top input")
 ], Et.prototype, "input", 2);
 k("ok-spotlight-search", Et);
 var zc = Object.defineProperty, _c = Object.getOwnPropertyDescriptor, ze = (n, e, t, o) => {
@@ -14023,12 +14023,29 @@ class Ir extends g {
     :host {
       display: block;
       width: 100%;
-      --primary: var(--ion-color-primary, #1496d6);
-      --primary-contrast: var(--ion-color-primary-contrast, #ffffff);
+      --primary: var(--ok-primary, var(--ion-color-primary, #1496d6));
+      --primary-contrast: var(--ok-primary-contrast, var(--ion-color-primary-contrast, #ffffff));
       --color: var(--ok-text, var(--ion-text-color, #18181b));
       --muted: var(--ok-muted, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.62));
       --surface: var(--ok-surface, var(--ion-card-background, var(--ion-background-color, #fff)));
       --radius: var(--ok-radius-lg, 28px);
+      --action-outline-color: var(--ok-cta-action-outline-color, var(--primary-contrast));
+      --action-outline-border-color: var(
+        --ok-cta-action-outline-border-color,
+        color-mix(in oklab, var(--action-outline-color) 62%, transparent)
+      );
+      --action-outline-background-hover: var(
+        --ok-cta-action-outline-background-hover,
+        color-mix(in oklab, var(--action-outline-color) 12%, transparent)
+      );
+      --action-outline-background-focused: var(
+        --ok-cta-action-outline-background-focused,
+        color-mix(in oklab, var(--action-outline-color) 16%, transparent)
+      );
+      --action-outline-background-activated: var(
+        --ok-cta-action-outline-background-activated,
+        color-mix(in oklab, var(--action-outline-color) 20%, transparent)
+      );
       font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
     }
     .band {
@@ -14109,6 +14126,18 @@ class Ir extends g {
       justify-content: center;
       margin-top: 0.6rem;
     }
+    :host(:not([variant])) ::slotted(ion-button[fill='outline']),
+    :host([variant='solid']) ::slotted(ion-button[fill='outline']) {
+      --color: var(--action-outline-color);
+      --color-hover: var(--action-outline-color);
+      --color-focused: var(--action-outline-color);
+      --color-activated: var(--action-outline-color);
+      --border-color: var(--action-outline-border-color);
+      --background-hover: var(--action-outline-background-hover);
+      --background-focused: var(--action-outline-background-focused);
+      --background-activated: var(--action-outline-background-activated);
+      --ripple-color: var(--action-outline-color);
+    }
   `;
   }
   render() {
@@ -17973,10 +18002,10 @@ I([
   v()
 ], L.prototype, "above", 2);
 I([
-  T(".card")
+  B(".card")
 ], L.prototype, "cardEl", 2);
 I([
-  T(".trigger")
+  B(".trigger")
 ], L.prototype, "triggerEl", 2);
 k("ok-hover-card", L);
 var qd = Object.defineProperty, Ud = Object.getOwnPropertyDescriptor, nr = (n, e, t, o) => {
@@ -19316,7 +19345,7 @@ var tp = Object.defineProperty, rp = Object.getOwnPropertyDescriptor, U = (n, e,
     (a = n[i]) && (r = (o ? a(e, t, r) : a(r)) || r);
   return o && r && tp(e, t, r), r;
 };
-class F extends g {
+class R extends g {
   constructor() {
     super(...arguments), this.title = "", this.variant = "info", this.mode = "http", this.shortcuts = [], this.checks = [], this.detailsLabel = "Detalles técnicos", this.retryLabel = "Reintentando en", this.retrySeconds = 0, this.remaining = 0, this.initialSeconds = 0;
   }
@@ -19780,44 +19809,44 @@ class F extends g {
 }
 U([
   l()
-], F.prototype, "code", 2);
+], R.prototype, "code", 2);
 U([
   l()
-], F.prototype, "title", 2);
+], R.prototype, "title", 2);
 U([
   l()
-], F.prototype, "message", 2);
+], R.prototype, "message", 2);
 U([
   l({ reflect: !0 })
-], F.prototype, "variant", 2);
+], R.prototype, "variant", 2);
 U([
   l({ reflect: !0 })
-], F.prototype, "mode", 2);
+], R.prototype, "mode", 2);
 U([
   l({ attribute: !1 })
-], F.prototype, "shortcuts", 2);
+], R.prototype, "shortcuts", 2);
 U([
   l({ attribute: !1 })
-], F.prototype, "checks", 2);
+], R.prototype, "checks", 2);
 U([
   l()
-], F.prototype, "trace", 2);
+], R.prototype, "trace", 2);
 U([
   l({ attribute: "details-label" })
-], F.prototype, "detailsLabel", 2);
+], R.prototype, "detailsLabel", 2);
 U([
   l()
-], F.prototype, "meta", 2);
+], R.prototype, "meta", 2);
 U([
   l({ attribute: "retry-label" })
-], F.prototype, "retryLabel", 2);
+], R.prototype, "retryLabel", 2);
 U([
   l({ type: Number, attribute: "retry-seconds" })
-], F.prototype, "retrySeconds", 2);
+], R.prototype, "retrySeconds", 2);
 U([
   v()
-], F.prototype, "remaining", 2);
-k("ok-error-page", F);
+], R.prototype, "remaining", 2);
+k("ok-error-page", R);
 var op = Object.defineProperty, ip = Object.getOwnPropertyDescriptor, Lt = (n, e, t, o) => {
   for (var r = o > 1 ? void 0 : o ? ip(e, t) : e, i = n.length - 1, a; i >= 0; i--)
     (a = n[i]) && (r = (o ? a(e, t, r) : a(r)) || r);
@@ -20546,7 +20575,7 @@ ue([
   v()
 ], J.prototype, "words", 2);
 ue([
-  T(".content")
+  B(".content")
 ], J.prototype, "contentEl", 2);
 let np = J;
 k("ok-rich-text", np);
@@ -21932,7 +21961,7 @@ var zp = Object.defineProperty, _p = Object.getOwnPropertyDescriptor, V = (n, e,
     (a = n[i]) && (r = (o ? a(e, t, r) : a(r)) || r);
   return o && r && zp(e, t, r), r;
 };
-class R extends g {
+class N extends g {
   constructor() {
     super(...arguments), this.src = "", this.alt = "", this.ratio = "16:9", this.radius = "md", this.zoom = "none", this.placeholderText = "cargando…", this.loaded = !1, this.errored = !1, this.zooming = !1, this.lightboxOpen = !1, this.lensX = 50, this.lensY = 50, this.closeLightbox = () => {
       this.lightboxOpen = !1;
@@ -22319,44 +22348,44 @@ class R extends g {
 }
 V([
   l()
-], R.prototype, "src", 2);
+], N.prototype, "src", 2);
 V([
   l()
-], R.prototype, "alt", 2);
+], N.prototype, "alt", 2);
 V([
   l({ reflect: !0 })
-], R.prototype, "ratio", 2);
+], N.prototype, "ratio", 2);
 V([
   l()
-], R.prototype, "caption", 2);
+], N.prototype, "caption", 2);
 V([
   l({ reflect: !0 })
-], R.prototype, "radius", 2);
+], N.prototype, "radius", 2);
 V([
   l({ reflect: !0 })
-], R.prototype, "zoom", 2);
+], N.prototype, "zoom", 2);
 V([
   l({ attribute: "placeholder-text" })
-], R.prototype, "placeholderText", 2);
+], N.prototype, "placeholderText", 2);
 V([
   v()
-], R.prototype, "loaded", 2);
+], N.prototype, "loaded", 2);
 V([
   v()
-], R.prototype, "errored", 2);
+], N.prototype, "errored", 2);
 V([
   v()
-], R.prototype, "zooming", 2);
+], N.prototype, "zooming", 2);
 V([
   v()
-], R.prototype, "lightboxOpen", 2);
+], N.prototype, "lightboxOpen", 2);
 V([
   v()
-], R.prototype, "lensX", 2);
+], N.prototype, "lensX", 2);
 V([
   v()
-], R.prototype, "lensY", 2);
-k("ok-image", R);
+], N.prototype, "lensY", 2);
+k("ok-image", N);
 var Sp = Object.defineProperty, Ep = Object.getOwnPropertyDescriptor, Kr = (n, e, t, o) => {
   for (var r = o > 1 ? void 0 : o ? Ep(e, t) : e, i = n.length - 1, a; i >= 0; i--)
     (a = n[i]) && (r = (o ? a(e, t, r) : a(r)) || r);
@@ -24958,7 +24987,7 @@ it([
   v()
 ], De.prototype, "collapsed", 2);
 k("ok-org-chart", De);
-var Wp = Object.defineProperty, Xp = Object.getOwnPropertyDescriptor, N = (n, e, t, o) => {
+var Wp = Object.defineProperty, Xp = Object.getOwnPropertyDescriptor, F = (n, e, t, o) => {
   for (var r = o > 1 ? void 0 : o ? Xp(e, t) : e, i = n.length - 1, a; i >= 0; i--)
     (a = n[i]) && (r = (o ? a(e, t, r) : a(r)) || r);
   return o && r && Wp(e, t, r), r;
@@ -24974,9 +25003,12 @@ const Gp = {
   delete: "Eliminar",
   open: "Abrir",
   newFolder: "Nueva carpeta",
+  rename: "Renombrar",
+  renameFolder: "Renombrar carpeta",
+  deleteFolder: "Eliminar carpeta",
   noLimit: "Sin límite"
 };
-class B extends g {
+class T extends g {
   constructor() {
     super(...arguments), this.folders = [], this.files = [], this.path = [], this.selected = "", this.view = "grid", this.title = "", this.searchable = !0, this.uploadable = !0, this.loading = !1, this.labels = {}, this.expandedIds = /* @__PURE__ */ new Set(), this.dragging = !1, this.seeded = !1;
   }
@@ -25484,6 +25516,11 @@ class B extends g {
     .action.danger:hover {
       color: var(--danger);
     }
+    /* Borrar la carpeta actual: se tiñe al pasar por encima, igual que el borrado de un fichero. */
+    .tbtn.danger:hover {
+      color: var(--danger);
+      border-color: var(--danger);
+    }
     .action svg {
       width: 15px;
       height: 15px;
@@ -25583,6 +25620,9 @@ class B extends g {
     }
   `;
   }
+  can(e) {
+    return this.policy ? this.policy[e] : !0;
+  }
   // Textos efectivos.
   get t() {
     return { ...Gp, ...this.labels };
@@ -25606,7 +25646,21 @@ class B extends g {
     this.emit("ok-download", { id: e.id, url: e.url });
   }
   deleteFile(e) {
-    this.emit("ok-delete", { id: e });
+    this.emit("ok-delete", { id: e, kind: "file" });
+  }
+  /** Renombrar un fichero. Se manda el nombre actual para que el host lo proponga en su diálogo. */
+  renameFile(e) {
+    this.emit("ok-rename", { id: e.id, name: e.name, kind: "file" });
+  }
+  /** Etiqueta de la carpeta actual (para proponerla como nombre al renombrar). */
+  get currentFolderLabel() {
+    return this.path[this.path.length - 1]?.label ?? this.selected.split("/").pop() ?? "";
+  }
+  renameCurrentFolder() {
+    this.emit("ok-rename", { id: this.selected, name: this.currentFolderLabel, kind: "folder" });
+  }
+  deleteCurrentFolder() {
+    this.emit("ok-delete", { id: this.selected, kind: "folder" });
   }
   createFolder() {
     this.emit("ok-create-folder", { parent: this.selected });
@@ -25782,23 +25836,47 @@ class B extends g {
         </button>
       </div>
 
-      <button
-        type="button"
-        class="tbtn icon"
-        aria-label=${this.t.newFolder}
-        title=${this.t.newFolder}
-        @click=${() => this.createFolder()}
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-          stroke-linecap="round" stroke-linejoin="round">
-          <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-          <path d="M12 11v6M9 14h6" />
-        </svg>
-      </button>
+      ${this.selected && this.can("rename") ? s`<button
+            type="button"
+            class="tbtn icon"
+            data-act="rename-folder"
+            aria-label=${this.t.renameFolder}
+            title=${this.t.renameFolder}
+            @click=${() => this.renameCurrentFolder()}
+          >
+            ${this.iconRename}
+          </button>` : ""}
 
-      ${this.uploadable ? s`<button
+      ${this.selected && this.can("delete") ? s`<button
+            type="button"
+            class="tbtn icon danger"
+            data-act="delete-folder"
+            aria-label=${this.t.deleteFolder}
+            title=${this.t.deleteFolder}
+            @click=${() => this.deleteCurrentFolder()}
+          >
+            ${this.iconDelete}
+          </button>` : ""}
+
+      ${this.can("upload") ? s`<button
+            type="button"
+            class="tbtn icon"
+            data-act="new-folder"
+            aria-label=${this.t.newFolder}
+            title=${this.t.newFolder}
+            @click=${() => this.createFolder()}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+              <path d="M12 11v6M9 14h6" />
+            </svg>
+          </button>` : ""}
+
+      ${this.uploadable && this.can("upload") ? s`<button
             type="button"
             class="tbtn primary icon"
+            data-act="upload"
             aria-label=${this.t.upload}
             title=${this.t.upload}
             @click=${() => this.openPicker()}
@@ -25825,17 +25903,25 @@ class B extends g {
       <polyline points="7 10 12 15 17 10" /><line x1="12" y1="15" x2="12" y2="3" />
     </svg>`;
   }
+  get iconRename() {
+    return s`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+      stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
+    </svg>`;
+  }
   get iconDelete() {
     return s`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round">
       <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
     </svg>`;
   }
-  // Acciones de un archivo (abrir/descargar/eliminar), reutilizadas en grid y lista.
+  // Acciones de un archivo, reutilizadas en grid y lista. Abrir y descargar SIEMPRE se ofrecen;
+  // renombrar y borrar solo si la política de la carpeta los concede.
   fileActions(e) {
     return s`<button
         type="button"
         class="action"
+        data-act="open"
         aria-label=${this.t.open}
         title=${this.t.open}
         @click=${(t) => {
@@ -25847,6 +25933,7 @@ class B extends g {
       <button
         type="button"
         class="action"
+        data-act="download"
         aria-label=${this.t.download}
         title=${this.t.download}
         @click=${(t) => {
@@ -25855,17 +25942,30 @@ class B extends g {
       >
         ${this.iconDownload}
       </button>
-      <button
-        type="button"
-        class="action danger"
-        aria-label=${this.t.delete}
-        title=${this.t.delete}
-        @click=${(t) => {
+      ${this.can("rename") ? s`<button
+            type="button"
+            class="action"
+            data-act="rename-file"
+            aria-label=${this.t.rename}
+            title=${this.t.rename}
+            @click=${(t) => {
+      t.stopPropagation(), this.renameFile(e);
+    }}
+          >
+            ${this.iconRename}
+          </button>` : ""}
+      ${this.can("delete") ? s`<button
+            type="button"
+            class="action danger"
+            data-act="delete-file"
+            aria-label=${this.t.delete}
+            title=${this.t.delete}
+            @click=${(t) => {
       t.stopPropagation(), this.deleteFile(e.id);
     }}
-      >
-        ${this.iconDelete}
-      </button>`;
+          >
+            ${this.iconDelete}
+          </button>` : ""}`;
   }
   // ---- Render del contenido (grid/lista/vacío/loading) ----
   renderContent() {
@@ -25962,46 +26062,49 @@ class B extends g {
     <input type="file" multiple @change=${this.onPicked} />`;
   }
 }
-N([
+F([
   l({ attribute: !1 })
-], B.prototype, "folders", 2);
-N([
+], T.prototype, "folders", 2);
+F([
   l({ attribute: !1 })
-], B.prototype, "files", 2);
-N([
+], T.prototype, "files", 2);
+F([
   l({ attribute: !1 })
-], B.prototype, "path", 2);
-N([
+], T.prototype, "path", 2);
+F([
   l()
-], B.prototype, "selected", 2);
-N([
+], T.prototype, "selected", 2);
+F([
   l()
-], B.prototype, "view", 2);
-N([
+], T.prototype, "view", 2);
+F([
   l({ attribute: !1 })
-], B.prototype, "quota", 2);
-N([
+], T.prototype, "quota", 2);
+F([
   l()
-], B.prototype, "title", 2);
-N([
+], T.prototype, "title", 2);
+F([
   l({ type: Boolean })
-], B.prototype, "searchable", 2);
-N([
+], T.prototype, "searchable", 2);
+F([
   l({ type: Boolean })
-], B.prototype, "uploadable", 2);
-N([
+], T.prototype, "uploadable", 2);
+F([
+  l({ attribute: !1 })
+], T.prototype, "policy", 2);
+F([
   l({ type: Boolean })
-], B.prototype, "loading", 2);
-N([
+], T.prototype, "loading", 2);
+F([
   l({ attribute: !1 })
-], B.prototype, "labels", 2);
-N([
+], T.prototype, "labels", 2);
+F([
   v()
-], B.prototype, "expandedIds", 2);
-N([
+], T.prototype, "expandedIds", 2);
+F([
   v()
-], B.prototype, "dragging", 2);
-N([
-  T('input[type="file"]')
-], B.prototype, "fileInput", 2);
-k("ok-file-manager", B);
+], T.prototype, "dragging", 2);
+F([
+  B('input[type="file"]')
+], T.prototype, "fileInput", 2);
+k("ok-file-manager", T);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erplora/outfitkit",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "description": "OutfitKit — librería de Web Components (Lit) que CONSTRUYE lo que Ionic no tiene (tree, data-table rica, inline-feedback, kpi/stat, stepper/wizard, calendar, kanban…) sobre primitivos de Ionic. Ionic es la base; OutfitKit cubre los huecos. npm + CDN, imports individuales, CSP-safe. Tema vía tokens --ok-* (fallback a --ion-*).",
   "type": "module",
   "license": "MIT",