@erplora/outfitkit 0.1.20 → 0.1.22

package/README.md

@@ -89,10 +89,14 @@ El bundle `outfitkit.js` deja `lit` external, así que necesitas un **import-map
 
 ## Inventario de componentes
 
-97 web components rellena-huecos (todos registran su tag `ok-*` vía `define()`). Abajo el qué-hace y
+92 web components rellena-huecos (todos registran su tag `ok-*` vía `define()`). Abajo el qué-hace y
 los **eventos `ok-*`** que emite cada uno (`—` = presentacional, sin eventos). La **referencia viva
 de props/slots** es el [showcase](https://erplora.github.io/outfitkit/).
 
+Los patrones que Ionic ya resuelve no se exportan como `ok-*`: drawer lateral (`ion-modal`),
+skeleton (`ion-skeleton-text`), fecha/hora (`ion-datetime`) y rango doble (`ion-range dual-knobs`)
+viven como recetas copiables en el showcase.
+
 ### Datos y tablas
 
 | Componente | Qué hace | Eventos clave |
@@ -128,7 +132,6 @@ de props/slots** es el [showcase](https://erplora.github.io/outfitkit/).
 | `ok-error-page` | Plantilla full-screen para errores HTTP (403/404/500), retry con cuenta atrás, modo bootstrap con checklist. | `ok-retry`, `ok-shortcut` |
 | `ok-status-pill` | Pill de estado con fondo tonal suave + icono/punto (celdas de tabla). | — |
 | `ok-status-dot` | Punto de presencia coloreado con pulso opcional. | — |
-| `ok-skeleton` | Placeholders de carga (shimmer) con variantes y presets (card/table/chart). | — |
 | `ok-coachmark` | Tour guiado con spotlight, bubble anclado y navegación por teclado. | `ok-step`, `ok-next`, `ok-prev`, `ok-finish`, `ok-skip` |
 | `ok-hover-card` | Popover de previsualización (avatar/título/stats/acciones) anclada a hover/focus. | `ok-action`, `ok-open` |
 
@@ -163,9 +166,6 @@ de props/slots** es el [showcase](https://erplora.github.io/outfitkit/).
 | `ok-currency` | Input monetario con máscara (miles/decimales/símbolo `Intl`). | `ok-change` |
 | `ok-phone` | Teléfono con prefijo de país (bandera + dial) y número (E.164). | `ok-change` |
 | `ok-dropzone` | Subida drag&drop + click con validación de tipo/tamaño. | `ok-change`, `ok-error` |
-| `ok-date-picker` | Campo fecha + popover calendario, single/range, chips de preset. | `ok-change` |
-| `ok-time-picker` | Pastilla HH:MM + popover de listas (horas/minutos/AM-PM), canónico 24h. | `ok-change` |
-| `ok-range-dual` | Slider min-max de doble thumb con readout. | `ok-change` |
 | `ok-color-picker` | Selector de color (SV + hue + hex + presets). | `ok-change`, `ok-open` |
 | `ok-theme-picker` | Selector de tema compartido Cloud↔Hub: paleta de marca (swatches) + modo claro/oscuro/sistema. | `ok-change` |
 | `ok-rich-text` | Editor WYSIWYG con toolbar y contador de palabras. | `ok-input` |
@@ -182,7 +182,6 @@ de props/slots** es el [showcase](https://erplora.github.io/outfitkit/).
 | `ok-split-button` | Botón principal pegado a un caret que abre menú. | `ok-main`, `ok-select`, `ok-open` |
 | `ok-menu` | Menú desplegable/contextual con submenús, checkbox/radio, divisores. | `ok-select`, `ok-open` |
 | `ok-menubar` | Barra de menús de app (Archivo/Editar/Ver) con dropdowns. | `ok-select`, `ok-open` |
-| `ok-drawer` | Panel lateral deslizante (slide-over) modal con focus-trap y cierre por ESC/scrim. | `ok-open`, `ok-close` |
 | `ok-spotlight-search` | Buscador overlay estilo Spotlight (macOS): `<dialog>` top-layer translúcido, chrome solo (input+✕+panel); resultados los pone el consumidor por slot. | `ok-input`, `ok-open` |
 
 ### Media y archivos

package/dist/cdn.d.ts

@@ -42,7 +42,6 @@ import './components/ok-spotlight-search/ok-spotlight-search.js';
 import './components/ok-color-picker/ok-color-picker.js';
 import './components/ok-avatar/ok-avatar.js';
 import './components/ok-status-pill/ok-status-pill.js';
-import './components/ok-drawer/ok-drawer.js';
 import './components/ok-page-header/ok-page-header.js';
 import './components/ok-bento/ok-bento.js';
 import './components/ok-bento-item/ok-bento-item.js';
@@ -58,7 +57,6 @@ import './components/ok-navbar/ok-navbar.js';
 import './components/ok-footer/ok-footer.js';
 import './components/ok-hero/ok-hero.js';
 import './components/ok-pagination/ok-pagination.js';
-import './components/ok-skeleton/ok-skeleton.js';
 import './components/ok-gauge/ok-gauge.js';
 import './components/ok-chart/ok-chart.js';
 import './components/ok-donut/ok-donut.js';
@@ -76,9 +74,6 @@ import './components/ok-coachmark/ok-coachmark.js';
 import './components/ok-select-card/ok-select-card.js';
 import './components/ok-theme-picker/ok-theme-picker.js';
 import './components/ok-error-page/ok-error-page.js';
-import './components/ok-date-picker/ok-date-picker.js';
-import './components/ok-time-picker/ok-time-picker.js';
-import './components/ok-range-dual/ok-range-dual.js';
 import './components/ok-file-item/ok-file-item.js';
 import './components/ok-rich-text/ok-rich-text.js';
 import './components/ok-code/ok-code.js';

package/dist/index.d.ts

@@ -68,8 +68,6 @@ export { OkAvatar } from './components/ok-avatar/ok-avatar.js';
 export type { OkAvatarSize, OkAvatarShape, OkAvatarTone, OkAvatarStatus } from './components/ok-avatar/ok-avatar.js';
 export { OkStatusPill } from './components/ok-status-pill/ok-status-pill.js';
 export type { OkStatusPillTone, OkStatusPillSize } from './components/ok-status-pill/ok-status-pill.js';
-export { OkDrawer } from './components/ok-drawer/ok-drawer.js';
-export type { OkDrawerSide, OkDrawerLabels } from './components/ok-drawer/ok-drawer.js';
 export { OkPageHeader } from './components/ok-page-header/ok-page-header.js';
 export { OkBento } from './components/ok-bento/ok-bento.js';
 export { OkBentoItem } from './components/ok-bento-item/ok-bento-item.js';
@@ -86,8 +84,6 @@ export { OkFooter } from './components/ok-footer/ok-footer.js';
 export { OkHero } from './components/ok-hero/ok-hero.js';
 export { OkPagination } from './components/ok-pagination/ok-pagination.js';
 export type { PaginationVariant } from './components/ok-pagination/ok-pagination.js';
-export { OkSkeleton } from './components/ok-skeleton/ok-skeleton.js';
-export type { OkSkeletonVariant, OkSkeletonPreset } from './components/ok-skeleton/ok-skeleton.js';
 export { OkGauge } from './components/ok-gauge/ok-gauge.js';
 export type { OkGaugeThreshold, OkGaugeType } from './components/ok-gauge/ok-gauge.js';
 export { OkChart } from './components/ok-chart/ok-chart.js';
@@ -122,11 +118,6 @@ export { OkThemePicker, DEFAULT_PALETTES, applyPalette } from './components/ok-t
 export type { OkThemePickerPalette, OkThemePickerMode, OkThemePickerLabels, } from './components/ok-theme-picker/ok-theme-picker.js';
 export { OkErrorPage } from './components/ok-error-page/ok-error-page.js';
 export type { OkErrorPageVariant, OkErrorPageMode, OkErrorCheckStatus, OkErrorShortcut, OkErrorCheck } from './components/ok-error-page/ok-error-page.js';
-export { OkDatePicker } from './components/ok-date-picker/ok-date-picker.js';
-export type { OkDatePickerMode, OkDateRange, OkDatePickerValue, OkDatePreset, OkDatePickerLabels } from './components/ok-date-picker/ok-date-picker.js';
-export { OkTimePicker } from './components/ok-time-picker/ok-time-picker.js';
-export { OkRangeDual } from './components/ok-range-dual/ok-range-dual.js';
-export type { OkRangeDualChangeDetail } from './components/ok-range-dual/ok-range-dual.js';
 export { OkFileItem } from './components/ok-file-item/ok-file-item.js';
 export type { OkFileItemState } from './components/ok-file-item/ok-file-item.js';
 export { OkRichText } from './components/ok-rich-text/ok-rich-text.js';

package/dist/index.js

@@ -44,7 +44,6 @@ import { OkSpotlightSearch } from "./ok-spotlight-search.js";
 import { OkColorPicker } from "./ok-color-picker.js";
 import { OkAvatar } from "./ok-avatar.js";
 import { OkStatusPill } from "./ok-status-pill.js";
-import { OkDrawer } from "./ok-drawer.js";
 import { OkPageHeader } from "./ok-page-header.js";
 import { OkBento } from "./ok-bento.js";
 import { OkBentoItem } from "./ok-bento-item.js";
@@ -60,7 +59,6 @@ import { OkNavbar } from "./ok-navbar.js";
 import { OkFooter } from "./ok-footer.js";
 import { OkHero } from "./ok-hero.js";
 import { OkPagination } from "./ok-pagination.js";
-import { OkSkeleton } from "./ok-skeleton.js";
 import { OkGauge } from "./ok-gauge.js";
 import { OkChart } from "./ok-chart.js";
 import { OkDonut } from "./ok-donut.js";
@@ -78,9 +76,6 @@ import { OkCoachmark } from "./ok-coachmark.js";
 import { OkSelectCard } from "./ok-select-card.js";
 import { DEFAULT_PALETTES, OkThemePicker, applyPalette } from "./ok-theme-picker.js";
 import { OkErrorPage } from "./ok-error-page.js";
-import { OkDatePicker } from "./ok-date-picker.js";
-import { OkTimePicker } from "./ok-time-picker.js";
-import { OkRangeDual } from "./ok-range-dual.js";
 import { OkFileItem } from "./ok-file-item.js";
 import { OkRichText } from "./ok-rich-text.js";
 import { OkCode } from "./ok-code.js";
@@ -122,11 +117,9 @@ export {
   OkCtaBand,
   OkCurrency,
   OkDataTable,
-  OkDatePicker,
   OkDetailList,
   OkDiff,
   OkDonut,
-  OkDrawer,
   OkDropzone,
   OkEmptyState,
   OkErrorPage,
@@ -170,7 +163,6 @@ export {
   OkProductCard,
   OkQr,
   OkQtyStepper,
-  OkRangeDual,
   OkRating,
   OkReceipt,
   OkReveal,
@@ -178,7 +170,6 @@ export {
   OkScheduler,
   OkSelectCard,
   OkSignature,
-  OkSkeleton,
   OkSparkline,
   OkSplitButton,
   OkSplitter,
@@ -191,7 +182,6 @@ export {
   OkTagInput,
   OkTestimonial,
   OkThemePicker,
-  OkTimePicker,
   OkTimeline,
   OkTree,
   OkVideo,

package/dist/layout.css

@@ -53,10 +53,11 @@
   min-width: 0;
 }
 
-/* Grid de cards/KPIs sin clases de breakpoint: se adapta solo al ancho útil. */
+/* Grid de cards/KPIs sin clases de breakpoint: se adapta solo al ancho útil.
+   auto-fit colapsa tracks vacíos para que 2–3 tarjetas sigan llenando el eje. */
 .ok-grid-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--ok-card-min, 260px), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--ok-card-min, 16rem), 100%), 1fr));
   gap: var(--ok-grid-gap);
 }
 
@@ -120,6 +121,17 @@
   border-top: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 8%, transparent);
 }
 
+/* Superficie alterna para crear ritmo entre secciones de página. Funciona
+   tanto sobre .ok-section como sobre un wrapper full-bleed con .ok-container
+   en su interior. */
+.ok-section--soft {
+  background: color-mix(
+    in oklab,
+    var(--ok-text, var(--ion-text-color, #18181b)) 2.5%,
+    var(--ok-surface, var(--ion-background-color, #fff))
+  );
+}
+
 .ok-section-head {
   display: flex;
   flex-direction: column;
@@ -187,6 +199,10 @@
  *      propio sustituye al flex de ion-row; ::before sí renderiza en hosts
  *      con shadow DOM)
  *
+ * En tablas editoriales, envolver con .ok-table-surface para obtener una
+ * superficie común sin añadir bordes de página. .ok-table-group identifica
+ * filas de sección que no deben convertirse en superficies independientes.
+ *
  * Tokens: --ok-table-cols (columnas del markup no-<table>; por defecto
  * partes iguales) · --ok-table-label-w (ancho de la etiqueta en móvil, 45%).
  * Celdas sin data-title (p.ej. acciones) ocupan el ancho completo en móvil.
@@ -203,6 +219,24 @@ table.ok-table-stack {
   border-collapse: collapse;
 }
 
+/* Marco editorial reutilizable. Usa una línea óptica muy suave en escritorio
+ * y desaparece en móvil, donde las filas ya construyen su propia superficie. */
+.ok-table-surface {
+  width: 100%;
+  overflow-x: auto;
+  background: var(--ok-surface, var(--ion-card-background, #fff));
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 6%, transparent);
+}
+
+.ok-table-surface > .ok-table-stack {
+  margin: 0;
+}
+
+.ok-table-surface > .ok-table-stack :is(tbody tr:last-child td, .ok-trow:last-child .ok-tcell) {
+  border-bottom: 0;
+}
+
 /* Markup no-<table>: cabecera y filas como grid de columnas iguales */
 .ok-table-stack > .ok-thead,
 .ok-table-stack > .ok-trow {
@@ -230,6 +264,13 @@ table.ok-table-stack {
 }
 
 @media (max-width: 767px) {
+  .ok-table-surface {
+    overflow: visible;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
   /* La tabla nativa deja de comportarse como tabla */
   table.ok-table-stack,
   table.ok-table-stack :is(thead, tbody, tfoot, tr, th, td),
@@ -248,12 +289,24 @@ table.ok-table-stack {
     border: 0;
   }
 
-  /* Fila = card */
+  /* Fila = superficie ligera. Sin borde: la separación procede del fondo,
+     la sombra mínima y los divisores internos, evitando superficies anidadas. */
   .ok-table-stack :is(tbody tr, .ok-trow) {
-    border: 1px solid color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 12%, transparent);
-    border-radius: 8px;
+    border: 0;
+    border-radius: 12px;
     margin-bottom: 0.75rem;
     overflow: hidden;
+    background: var(--ok-surface, var(--ion-card-background, #fff));
+    box-shadow: 0 1px 3px color-mix(in oklab, var(--ok-text, var(--ion-text-color, #18181b)) 9%, transparent);
+  }
+
+  /* Una fila de grupo es un rótulo editorial, no otra card de datos. */
+  .ok-table-stack :is(tbody tr.ok-table-group, .ok-trow.ok-table-group) {
+    margin: 1.25rem 0 0.35rem;
+    border-radius: 0;
+    overflow: visible;
+    background: transparent;
+    box-shadow: none;
   }
 
   /* Celda = par etiqueta/valor (display/width explícitos: pisan el :host

package/dist/ok-data-table.js

@@ -3,7 +3,7 @@ import { property, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { define } from "./define.js";
-import { N as iconCalendarOutline, s as iconEllipsisVertical, o as okIcon, m as iconClose, a as iconChevronBack, Q as iconChevronForward, R as iconFileTrayOutline, S as iconSwapVerticalOutline, T as iconChevronUpOutline, w as iconChevronDownOutline } from "./shared/icons.js";
+import { P as iconCalendarOutline, s as iconEllipsisVertical, o as okIcon, m as iconClose, a as iconChevronBack, Q as iconChevronForward, R as iconFileTrayOutline, S as iconSwapVerticalOutline, T as iconChevronUpOutline, w as iconChevronDownOutline } from "./shared/icons.js";
 const CSV_BOM = "\uFEFF";
 function decodeCsvBuffer(buf) {
   let text;

package/dist/ok-file-manager.js

@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { property, state, query } from "lit/decorators.js";
 import { define } from "./define.js";
-import { g as iconChevronForwardOutline, o as okIcon, P as iconFolderOpenOutline } from "./shared/icons.js";
+import { g as iconChevronForwardOutline, o as okIcon, O as iconFolderOpenOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;

package/dist/ok-lightbox.js

@@ -1,7 +1,7 @@
 import { LitElement, css, render, nothing, html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { define } from "./define.js";
-import { H as iconExpandOutline, v as iconCloseOutline, t as iconChevronBackOutline, g as iconChevronForwardOutline, D as iconDownloadOutline, O as iconPlayOutline } from "./shared/icons.js";
+import { H as iconExpandOutline, v as iconCloseOutline, t as iconChevronBackOutline, g as iconChevronForwardOutline, D as iconDownloadOutline, N as iconPlayOutline } from "./shared/icons.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;