@erplora/outfitkit 0.1.18 → 0.1.20

package/dist/tabbar/tabbar.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Tabbar de footer — comportamiento compartido Cloud↔Hub para un `ion-segment` usado como barra de
+ * NAVEGACIÓN (no como el pill de filtro de iOS).
+ *
+ * Por qué está aquí y no en cada producto: el Hub y el SaaS habían resuelto POR SEPARADO el mismo
+ * problema, con reglas que ya divergían. Y es un hueco real de Ionic, no un wrapper: `ion-segment`
+ * no trae `scrollIntoView` a la pestaña activa, y su prop `scrollable` sólo cambia layout y gestos.
+ * Si desborda y por dónde va el scroll es justo lo que CSS no puede saber solo, así que se publica
+ * en `data-overflow` y el degradado lo pinta `tabbar.css`.
+ *
+ * Uso: una sola llamada, y guardar el cleanup.
+ *
+ *   const cleanup = bindTabbar(document.querySelector('ion-footer ion-segment'));
+ *   // al desmontar la vista → cleanup();
+ */
+/** Qué bordes del tabbar esconden pestañas. `none` = caben todas. */
+export type TabbarOverflow = 'none' | 'start' | 'end' | 'both';
+/**
+ * Calcula qué bordes esconden pestañas, para pintar el degradado SOLO donde hay más.
+ *
+ * Un degradado fijo a la derecha seguiría oscureciendo la última pestaña cuando ya has llegado al
+ * final: se lee como un fallo de pintado, no como "hay más". Por eso son cuatro estados.
+ */
+export declare function tabbarOverflow(segment: HTMLElement | null): TabbarOverflow;
+/** Publica el estado en `data-overflow` para que el degradado lo pinte desde CSS. */
+export declare function syncTabbarOverflow(segment: HTMLElement | null): void;
+/**
+ * Trae a la vista la pestaña activa.
+ *
+ * Hace falta cuando la pestaña activa la fija la RUTA y no un toque (deep-link, back/forward): al
+ * montar, la barra arranca en `scrollLeft: 0` y la activa puede quedar fuera de pantalla, así que el
+ * usuario no ve en cuál está. Se mueve `scrollLeft` y no `scrollIntoView` para no arrastrar a los
+ * ancestros scrolleables ni pelearse con el scroll de la página.
+ */
+export declare function scrollActiveTabIntoView(segment: HTMLElement | null): void;
+/**
+ * ¿Merece la pena la pista de scroll al entrar?
+ *
+ * El degradado dice que hay más; el movimiento enseña el GESTO. Pero es movimiento que el usuario
+ * no ha pedido, así que sólo se da cuando aporta: si caben todas no hay nada que descubrir; si ya
+ * estás al final a la derecha no queda nada; con `prefers-reduced-motion` no se anima; y si la barra
+ * ya se movió sola para revelar la activa, repetirlo sería un tirón raro.
+ */
+export declare function shouldHintScroll(opts: {
+    overflow: TabbarOverflow;
+    reducedMotion: boolean;
+    yaScrolleado: boolean;
+}): boolean;
+/**
+ * Asoma la barra unos píxeles y la devuelve: enseña que se puede deslizar.
+ *
+ * Mueve el scroll REAL (no un `transform`) para que el degradado se recalcule solo con el evento
+ * `scroll` — al asomarse aparece el degradado izquierdo, lo que refuerza la pista.
+ */
+export declare function hintScroll(segment: HTMLElement | null): void;
+/**
+ * Cablea un tabbar y devuelve su cleanup. Es la única llamada que necesita el consumidor.
+ *
+ * Observa tres cosas distintas porque son tres causas distintas de cambio:
+ * - `scroll` → el usuario desliza;
+ * - `ResizeObserver` → cambia el ancho disponible (rotar el móvil, plegar el menú);
+ * - `MutationObserver` → cambia el NÚMERO de pestañas sin cambiar el ancho (un shell que las carga
+ *   async desde un manifest), caso en el que el ResizeObserver no se entera.
+ *
+ * `hint: false` desactiva la pista de movimiento (el degradado se mantiene).
+ */
+export declare function bindTabbar(segment: HTMLElement | null, opts?: {
+    hint?: boolean;
+}): () => void;

package/dist/tabbar/tabbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tabbar.css

@@ -0,0 +1,72 @@
+/* OutfitKit — tabbar.css
+ *
+ * Un `ion-segment` usado como barra de NAVEGACIÓN de footer (no como el pill de filtro de iOS).
+ * Complementa a Ionic en un hueco real, no lo envuelve: Ionic no tiene ninguna estrategia para un
+ * tabbar con más pestañas de las que caben, y su geometría cambia según el modo.
+ *
+ * La clase `.ok-tabbar` la pone `bindTabbar()` (`@erplora/outfitkit/tabbar`), no el consumidor:
+ * así el CSS y el comportamiento no pueden desincronizarse. Ese mismo JS mantiene `data-overflow`,
+ * que es lo único que CSS no puede calcular solo (si desborda y por dónde va el scroll).
+ *
+ * Tokens:
+ *   --ok-tabbar-min   ancho mínimo de pestaña antes de scrollear (default 88px)
+ *   --ok-tabbar-fade  anchura del degradado de borde (default 36px)
+ *
+ * Export del paquete: `@erplora/outfitkit/tabbar.css`. Cargar después del tema.
+ */
+
+.ok-tabbar {
+  /* En modo `ios` Ionic trata el segment como el segmented control compacto y le pone
+     `:host(.in-toolbar){ width:auto; margin-inline:auto }`, así que el host se encoge a su
+     contenido (medido: 289px dentro de una toolbar de 1560px) sin importar cómo dimensiones las
+     columnas. Esto es lo que lo arregla; el `grid-auto-columns` por sí solo NO basta. */
+  width: 100%;
+  margin-inline: 0;
+  box-sizing: border-box;
+
+  /* Con pocas pestañas manda el `1fr` y llenan el ancho; con muchas manda el mínimo y NO se
+     aplastan. El default de 88px sale de MEDIR el umbral en que se trunca el label más largo del
+     Hub (86px) más 2px de margen por si el render de la fuente es algo más ancho. Cada producto
+     puede ajustarlo con `--ok-tabbar-min`: preferimos scroll antes que labels cortados. */
+  grid-auto-columns: minmax(var(--ok-tabbar-min, 88px), 1fr);
+  justify-content: start;
+
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ok-tabbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Degradado de borde. Al esconder la barra de scroll hay que señalar de otro modo que quedan
+   pestañas fuera: sin esto el único indicio es una pestaña cortada a medias, que se lee como un
+   fallo de maquetación y no como una invitación a deslizar.
+   Va SOLO en el lado que esconde algo — uno fijo a la derecha seguiría oscureciendo la última
+   pestaña al llegar al final, que es justo el efecto de "roto" que se quiere evitar. */
+.ok-tabbar[data-overflow='end'] {
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--ok-tabbar-fade, 36px)), transparent 100%);
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ok-tabbar-fade, 36px)), transparent 100%);
+}
+
+.ok-tabbar[data-overflow='start'] {
+  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--ok-tabbar-fade, 36px)), transparent 100%);
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ok-tabbar-fade, 36px)), transparent 100%);
+}
+
+.ok-tabbar[data-overflow='both'] {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--ok-tabbar-fade, 36px),
+    #000 calc(100% - var(--ok-tabbar-fade, 36px)),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--ok-tabbar-fade, 36px),
+    #000 calc(100% - var(--ok-tabbar-fade, 36px)),
+    transparent 100%
+  );
+}

package/dist/tabbar.js

@@ -0,0 +1,76 @@
+const EPSILON = 1;
+const HINT_PX = 28;
+const HINT_VUELTA_MS = 420;
+const CLASE = "ok-tabbar";
+function tabbarOverflow(segment) {
+  if (!segment) return "none";
+  const maximo = segment.scrollWidth - segment.clientWidth;
+  if (maximo <= EPSILON) return "none";
+  const hayAntes = segment.scrollLeft > EPSILON;
+  const hayDespues = segment.scrollLeft < maximo - EPSILON;
+  if (hayAntes && hayDespues) return "both";
+  if (hayAntes) return "start";
+  return "end";
+}
+function syncTabbarOverflow(segment) {
+  if (!segment) return;
+  segment.dataset.overflow = tabbarOverflow(segment);
+}
+function scrollActiveTabIntoView(segment) {
+  if (!segment) return;
+  const activa = segment.querySelector(".segment-button-checked");
+  if (!activa) return;
+  if (segment.scrollWidth <= segment.clientWidth) return;
+  const inicio = activa.offsetLeft;
+  const fin = inicio + activa.offsetWidth;
+  const visibleInicio = segment.scrollLeft;
+  const visibleFin = visibleInicio + segment.clientWidth;
+  if (inicio < visibleInicio) segment.scrollLeft = inicio;
+  else if (fin > visibleFin) segment.scrollLeft = fin - segment.clientWidth;
+}
+function shouldHintScroll(opts) {
+  if (opts.reducedMotion) return false;
+  if (opts.yaScrolleado) return false;
+  return opts.overflow === "end" || opts.overflow === "both";
+}
+function hintScroll(segment) {
+  if (!segment) return;
+  segment.scrollTo({ left: HINT_PX, behavior: "smooth" });
+  setTimeout(() => segment.scrollTo({ left: 0, behavior: "smooth" }), HINT_VUELTA_MS);
+}
+function bindTabbar(segment, opts = {}) {
+  if (!segment) return () => {
+  };
+  segment.classList.add(CLASE);
+  const sync = () => syncTabbarOverflow(segment);
+  sync();
+  segment.addEventListener("scroll", sync, { passive: true });
+  const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(sync) : null;
+  ro?.observe(segment);
+  const mo = typeof MutationObserver !== "undefined" ? new MutationObserver(sync) : null;
+  mo?.observe(segment, { childList: true });
+  let pista = null;
+  if (opts.hint !== false) {
+    pista = setTimeout(() => {
+      pista = null;
+      const reducedMotion = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (shouldHintScroll({ overflow: tabbarOverflow(segment), reducedMotion, yaScrolleado: segment.scrollLeft > 1 })) {
+        hintScroll(segment);
+      }
+    }, 450);
+  }
+  return () => {
+    segment.removeEventListener("scroll", sync);
+    ro?.disconnect();
+    mo?.disconnect();
+    if (pista) clearTimeout(pista);
+  };
+}
+export {
+  bindTabbar,
+  hintScroll,
+  scrollActiveTabIntoView,
+  shouldHintScroll,
+  syncTabbarOverflow,
+  tabbarOverflow
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erplora/outfitkit",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "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",
@@ -27,6 +27,10 @@
       "types": "./dist/store/controller.d.ts",
       "import": "./dist/store-controller.js"
     },
+    "./tabbar": {
+      "types": "./dist/tabbar/tabbar.d.ts",
+      "import": "./dist/tabbar.js"
+    },
     "./ok-store": "./dist/ok-store.js",
     "./ok-data-table": "./dist/ok-data-table.js",
     "./ok-mail": "./dist/ok-mail.js",
@@ -128,6 +132,7 @@
     "./erplora.css": "./dist/erplora.css",
     "./palettes.css": "./dist/palettes.css",
     "./layout.css": "./dist/layout.css",
+    "./tabbar.css": "./dist/tabbar.css",
     "./cdn": "./dist/outfitkit.js",
     "./bundle": "./dist/outfitkit.bundle.js"
   },