@erplora/outfitkit 0.1.1

package/dist/ok-navbar.js

@@ -0,0 +1,306 @@
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { define } from "./define.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const DEFAULT_LABELS = {
+  menu: "Menu",
+  close: "Close"
+};
+const MOBILE_BREAKPOINT = "(max-width: 800px)";
+let panelSheetAdopted = false;
+function adoptPanelSheet() {
+  if (panelSheetAdopted) return;
+  panelSheetAdopted = true;
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`
+    ion-modal.ok-navbar-modal {
+      --width: var(--ok-navbar-panel-width, min(320px, 86vw));
+      --height: 100%;
+      --border-radius: 0;
+      --background: var(--ok-surface, var(--ion-card-background, #ffffff));
+      --box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
+      /* El host del modal es un flex que centra el wrapper: lo anclamos a la derecha. */
+      justify-content: flex-end;
+      align-items: stretch;
+    }
+    .ok-navbar-modal .ok-navbar-panel {
+      box-sizing: border-box;
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      padding: 0.5rem var(--ok-spacing, var(--ion-padding, 16px)) var(--ok-spacing, var(--ion-padding, 16px));
+      background: var(--ok-surface, var(--ion-card-background, #ffffff));
+      color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      font-family: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+    }
+    .ok-navbar-modal .ok-navbar-panel-head { display: flex; justify-content: flex-end; }
+    .ok-navbar-modal .ok-navbar-close {
+      background: none;
+      border: 0;
+      cursor: pointer;
+      padding: 0.5rem;
+      color: inherit;
+    }
+    .ok-navbar-modal .ok-navbar-close span { display: block; width: 22px; height: 2px; position: relative; }
+    .ok-navbar-modal .ok-navbar-close span::before,
+    .ok-navbar-modal .ok-navbar-close span::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 22px;
+      height: 2px;
+      background: currentColor;
+      border-radius: 2px;
+    }
+    .ok-navbar-modal .ok-navbar-close span::before { transform: rotate(45deg); }
+    .ok-navbar-modal .ok-navbar-close span::after { transform: rotate(-45deg); }
+    .ok-navbar-modal .ok-navbar-links { display: flex; flex-direction: column; }
+    .ok-navbar-modal .ok-navbar-links a {
+      display: block;
+      padding: 0.85rem 0;
+      color: inherit;
+      text-decoration: none;
+      font-size: 0.95rem;
+      border-top: 1px solid var(--ok-border-soft, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.07));
+    }
+    .ok-navbar-modal .ok-navbar-links a:first-child { border-top: 0; }
+    /* Acciones al pie: en columna, separadas de los enlaces y a ancho completo. */
+    .ok-navbar-modal .ok-navbar-actions {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.6rem;
+      margin-top: 1.25rem;
+      padding-top: 1.25rem;
+      border-top: 1px solid var(--ok-border, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.12));
+    }
+    .ok-navbar-modal .ok-navbar-actions ion-button { width: 100%; }
+  `);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+class OkNavbar extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.sticky = false;
+    this.glass = false;
+    this.open = false;
+    this.labels = {};
+    this.isMobile = false;
+    this.mq = null;
+    this.modal = null;
+    this.linksHost = null;
+    this.actionsHost = null;
+    this.closeBtn = null;
+    this.movedNodes = [];
+    this.onMqChange = (e) => {
+      this.isMobile = e.matches;
+      if (!e.matches) this.open = false;
+    };
+  }
+  static {
+    this.styles = css`
+    :host {
+      /* Vars overridable (estilo Ionic), default = cadena --ok-* → --ion-* → hex */
+      --background: var(--ok-surface, var(--ion-card-background, #ffffff));
+      --color: var(--ok-text, var(--ion-text-color, #1c1b17));
+      --border-color: var(--ok-border, rgba(var(--ion-text-color-rgb, 24, 24, 27), 0.12));
+      --primary-color: var(--ok-primary, var(--ion-color-primary, #3880ff));
+      --max-width: var(--ok-container-max, 1140px);
+      --padding: var(--ok-spacing, var(--ion-padding, 16px));
+      --font: var(--ok-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+
+      display: block;
+      background: var(--background);
+      border-bottom: 1px solid var(--border-color);
+      color: var(--color);
+      font-family: var(--font);
+    }
+    :host([sticky]) { position: sticky; top: 0; z-index: 50; }
+    /* Navbar de cristal (tendencia 2026): fondo translúcido + desenfoque. Úsalo con sticky. */
+    :host([glass]) {
+      background: color-mix(in oklab, var(--background) 72%, transparent);
+      -webkit-backdrop-filter: blur(14px) saturate(1.4);
+      backdrop-filter: blur(14px) saturate(1.4);
+      border-bottom-color: color-mix(in oklab, var(--color) 9%, transparent);
+    }
+    .bar {
+      position: relative;
+      max-width: var(--max-width);
+      margin-inline: auto;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 0.6rem var(--padding);
+    }
+    .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
+    .spacer { flex: 1; }
+    .links { display: flex; align-items: center; gap: 1.75rem; }
+    .links-inner { display: flex; align-items: center; gap: 1.25rem; }
+    .actions { display: flex; align-items: center; gap: 0.5rem; }
+    ::slotted(a) {
+      color: var(--color);
+      text-decoration: none;
+      font-size: 0.95rem;
+      /* Micro-interacción: transición sutil en color al hacer hover. */
+      transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease), border-color var(--ok-transition, 150ms ease), box-shadow var(--ok-transition, 150ms ease), transform 120ms ease;
+    }
+    /* Hover de enlaces solo con ratón (evita estados pegados en táctil). */
+    @media (hover: hover) {
+      ::slotted(a:hover) { color: var(--primary-color); }
+    }
+
+    .burger {
+      display: block;
+      background: none;
+      border: 0;
+      cursor: pointer;
+      padding: 0.5rem;
+      color: var(--color);
+      /* Micro-interacción: feedback sutil al presionar el burger. */
+      transition: background-color var(--ok-transition, 150ms ease), color var(--ok-transition, 150ms ease), border-color var(--ok-transition, 150ms ease), box-shadow var(--ok-transition, 150ms ease), transform 120ms ease;
+    }
+    @media (hover: hover) {
+      .burger:hover { color: var(--primary-color); }
+    }
+    .burger:active { transform: scale(var(--ok-press-scale, 0.97)); }
+    @media (prefers-reduced-motion: reduce) {
+      ::slotted(a):active, .burger:hover, .burger:active { transform: none; }
+    }
+    .burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
+    .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
+    .burger span::before { top: -7px; }
+    .burger span::after { top: 7px; }
+  `;
+  }
+  get t() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mq = window.matchMedia(MOBILE_BREAKPOINT);
+    this.isMobile = this.mq.matches;
+    this.mq.addEventListener("change", this.onMqChange);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mq?.removeEventListener("change", this.onMqChange);
+    this.mq = null;
+    this.restoreNodes();
+    this.modal?.remove();
+    this.modal = null;
+  }
+  updated(changed) {
+    if (changed.has("open")) {
+      if (this.open) void this.presentPanel();
+      else void this.modal?.dismiss();
+    }
+    if (changed.has("labels")) this.closeBtn?.setAttribute("aria-label", this.t.close);
+  }
+  openPanel() {
+    this.open = true;
+  }
+  // ── Panel móvil (ion-modal en <body>, contenido movido imperativamente) ────────────
+  buildModal() {
+    const modal = document.createElement("ion-modal");
+    modal.classList.add("ok-navbar-modal");
+    const panel = document.createElement("div");
+    panel.className = "ok-navbar-panel";
+    const head = document.createElement("div");
+    head.className = "ok-navbar-panel-head";
+    this.closeBtn = document.createElement("button");
+    this.closeBtn.className = "ok-navbar-close";
+    this.closeBtn.setAttribute("aria-label", this.t.close);
+    this.closeBtn.appendChild(document.createElement("span"));
+    this.closeBtn.addEventListener("click", () => {
+      this.open = false;
+    });
+    head.appendChild(this.closeBtn);
+    this.linksHost = document.createElement("nav");
+    this.linksHost.className = "ok-navbar-links";
+    this.actionsHost = document.createElement("div");
+    this.actionsHost.className = "ok-navbar-actions";
+    panel.append(head, this.linksHost, this.actionsHost);
+    panel.addEventListener("click", (e) => {
+      if (e.target?.closest("a")) this.open = false;
+    });
+    modal.appendChild(panel);
+    modal.addEventListener("ionModalDidDismiss", () => {
+      this.restoreNodes();
+      this.open = false;
+    });
+    document.body.appendChild(modal);
+    return modal;
+  }
+  async presentPanel() {
+    if (!this.isMobile) return;
+    adoptPanelSheet();
+    if (!this.modal) this.modal = this.buildModal();
+    if (this.movedNodes.length === 0 && this.linksHost && this.actionsHost) {
+      for (const el of Array.from(this.children)) {
+        const slot = el.getAttribute("slot");
+        if (slot === "brand") continue;
+        this.movedNodes.push(el);
+        (slot === "actions" ? this.actionsHost : this.linksHost).appendChild(el);
+      }
+    }
+    await customElements.whenDefined("ion-modal");
+    await this.modal.present();
+  }
+  restoreNodes() {
+    for (const el of this.movedNodes) this.appendChild(el);
+    this.movedNodes = [];
+  }
+  render() {
+    return html`
+      <nav class="bar">
+        <div class="brand"><slot name="brand"></slot></div>
+        <div class="spacer"></div>
+        ${this.isMobile ? html`
+              <button
+                class="burger"
+                aria-label=${this.t.menu}
+                aria-haspopup="dialog"
+                aria-expanded=${this.open ? "true" : "false"}
+                @click=${this.openPanel}
+              >
+                <span></span>
+              </button>
+            ` : html`
+              <div class="links">
+                <div class="links-inner"><slot></slot></div>
+                <div class="actions"><slot name="actions"></slot></div>
+              </div>
+            `}
+      </nav>
+    `;
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkNavbar.prototype, "sticky");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkNavbar.prototype, "glass");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OkNavbar.prototype, "open");
+__decorateClass([
+  property({ attribute: false })
+], OkNavbar.prototype, "labels");
+__decorateClass([
+  state()
+], OkNavbar.prototype, "isMobile");
+define("ok-navbar", OkNavbar);
+export {
+  OkNavbar
+};