@prolibu-suite/cobalt-core 0.9.1 → 0.9.3

package/dist/collection/components/co-drawer/co-drawer.css

@@ -180,7 +180,9 @@
   flex-shrink: 0;
   border-bottom: 1px solid var(--co-semantic-border-default);
 }
-.co-drawer__tabs:empty { display: none; }
+/* `:empty` can't detect slotted content (the <slot> is itself a child, so the
+   wrapper is never empty) — JS slotchange drives this class. */
+.co-drawer__tabs--empty { display: none; }
 
 /* ─── Body ────────────────────────────────────────────────── */
 .co-drawer__body {
@@ -247,7 +249,8 @@
   border-top: 1px solid var(--co-semantic-border-default);
   flex-shrink: 0;
 }
-.co-drawer__footer:empty { display: none; }
+/* Same as tabs: `:empty` never matches a wrapper that holds a <slot>. */
+.co-drawer__footer--empty { display: none; }
 
 /* Loading overlay is rendered by <co-loader overlay> in the drawer body. */
 

package/dist/collection/components/co-drawer/co-drawer.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { slotHasContent } from "../../utils/slotContent";
 /**
  * @slot header  - Custom header content (overrides `heading` prop). Receives close button next to it.
  * @slot tabs    - Optional row under the header (e.g. <co-tab-group>).
@@ -33,6 +34,19 @@ export class CoDrawer {
         this.modeless = false;
         /** Show a loading overlay over the body */
         this.loading = false;
+        /* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
+        this.hasFooter = false;
+        this.hasTabs = false;
+        this.hasHeaderSlot = false;
+        this.handleFooterSlotChange = (e) => {
+            this.hasFooter = slotHasContent(e);
+        };
+        this.handleTabsSlotChange = (e) => {
+            this.hasTabs = slotHasContent(e);
+        };
+        this.handleHeaderSlotChange = (e) => {
+            this.hasHeaderSlot = slotHasContent(e);
+        };
         this.handleOverlayClose = () => {
             if (this.closeOnOverlay)
                 this.coClose.emit();
@@ -69,6 +83,27 @@ export class CoDrawer {
             }
         };
     }
+    /**
+     * The internal `<h2 id="co-drawer-heading">` is the FALLBACK content of the
+     * header slot. When a consumer fills that slot the h2 stops being RENDERED,
+     * but it stays in the shadow tree still carrying the `heading` prop's text —
+     * so the old hardcoded `aria-labelledby="co-drawer-heading"` named the dialog
+     * from content nobody can see, and named it with the EMPTY string in the
+     * common case where a consumer slots a header and sets no `heading` at all.
+     * Either way the visible header never became the accessible name.
+     *
+     * - Slotted header → label from the wrapper that CONTAINS the slot. Accessible
+     *   name computation walks the flattened tree, so the consumer's own header
+     *   text becomes the name (same shape Shoelace uses for its dialog label).
+     * - No slot, `heading` set → the internal h2, which is the tightest label.
+     * - Neither → omit, so the dialog degrades to a plain "dialog" instead of
+     *   advertising a label that resolves to empty text.
+     */
+    get labelledBy() {
+        if (this.hasHeaderSlot)
+            return 'co-drawer-header-content';
+        return this.heading ? 'co-drawer-heading' : undefined;
+    }
     onOpenChange(next, prev) {
         if (next && !prev)
             this.coOpen.emit();
@@ -93,7 +128,7 @@ export class CoDrawer {
                 'co-drawer--modeless': this.modeless,
                 [`co-drawer--${this.position}`]: true,
                 [`co-drawer--${this.size}`]: true,
-            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": "co-drawer-heading", onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "co-drawer__card", part: "card" }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content" }, h("slot", { name: "header" }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: "co-drawer__tabs", part: "tabs" }, h("slot", { name: "tabs" })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: "co-drawer__footer", part: "footer" }, h("slot", { name: "footer" })))));
+            }, popover: this.modeless ? 'manual' : undefined, ref: this.modeless ? this.promoteModeless : undefined, part: "drawer", role: "dialog", "aria-modal": this.modeless ? 'false' : 'true', "aria-labelledby": this.labelledBy, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "co-drawer__card", part: "card" }, h("header", { class: "co-drawer__header", part: "header" }, h("div", { class: "co-drawer__header-content", id: "co-drawer-header-content" }, h("slot", { name: "header", onSlotchange: this.handleHeaderSlotChange }, h("div", { class: "co-drawer__heading-row" }, this.icon && h("co-icon", { name: this.icon, size: 20, class: "co-drawer__icon" }), h("h2", { class: "co-drawer__heading", id: "co-drawer-heading" }, this.heading)), this.description && h("p", { class: "co-drawer__description" }, this.description))), this.closable && (h("button", { class: "co-drawer__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { name: "x", size: 20 })))), h("div", { class: { 'co-drawer__tabs': true, 'co-drawer__tabs--empty': !this.hasTabs }, part: "tabs" }, h("slot", { name: "tabs", onSlotchange: this.handleTabsSlotChange })), h("div", { class: "co-drawer__body", part: "body" }, h("slot", null), h("co-loader", { overlay: true, visible: this.loading, part: "loader" })), h("footer", { class: { 'co-drawer__footer': true, 'co-drawer__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { name: "footer", onSlotchange: this.handleFooterSlotChange })))));
         if (this.modeless)
             return aside;
         return (h("co-overlay", { open: this.open, onCoClose: this.handleOverlayClose }, aside));
@@ -334,6 +369,13 @@ export class CoDrawer {
             }
         };
     }
+    static get states() {
+        return {
+            "hasFooter": {},
+            "hasTabs": {},
+            "hasHeaderSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "coClose",

package/dist/collection/components/co-emoji-picker/co-emoji-picker.css

@@ -0,0 +1,290 @@
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+/* Alto de celda/fila. DEBE coincidir con ROW_HEIGHT de emojiPickerLogic.ts:
+   la virtualización posiciona las filas con `row * ROW_HEIGHT`, así que si esto
+   se desincroniza la grilla se desalinea del scroll. */
+.co-emoji-picker {
+  --co-emoji-picker-cell: 36px;
+  /* Sobrescrito inline por la prop `columns`. */
+  --co-emoji-picker-columns: 8;
+
+  display: flex;
+  flex-direction: column;
+  width: calc(var(--co-emoji-picker-columns) * var(--co-emoji-picker-cell) + 2 * var(--co-spacing-sm2));
+  box-sizing: border-box;
+  background: var(--co-semantic-surface-page);
+  color: var(--co-semantic-text-default);
+}
+
+/* ── Buscador ────────────────────────────────────────────── */
+.co-emoji-picker__search {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm);
+  margin: var(--co-spacing-sm2) var(--co-spacing-sm2) 0;
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
+  border-radius: var(--co-border-radius-xs);
+  box-sizing: border-box;
+  color: var(--co-semantic-text-muted);
+  transition: border-color var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-emoji-picker__search:focus-within {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-emoji-picker__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-default);
+  padding: var(--co-spacing-xxs) 0;
+}
+
+.co-emoji-picker__input::placeholder {
+  color: var(--co-semantic-text-muted);
+}
+
+/* ── Selector de tono de piel ────────────────────────────── */
+.co-emoji-picker__tones {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.co-emoji-picker__tone-toggle,
+.co-emoji-picker__tone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--co-border-radius-xxs);
+  font-size: var(--co-font-size-14);
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-emoji-picker__tone-toggle:hover,
+.co-emoji-picker__tone:hover {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-emoji-picker__tone-toggle:focus-visible,
+.co-emoji-picker__tone:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-emoji-picker__tone--selected {
+  background: var(--co-semantic-surface-secondary);
+}
+
+/* Fila desplegable. Va absoluta para no re-maquetar la barra del buscador al
+   abrirse (el input no cambia de ancho). */
+.co-emoji-picker__tone-row {
+  position: absolute;
+  top: calc(100% + var(--co-spacing-xs));
+  right: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  padding: var(--co-spacing-xxs);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-xs);
+  box-shadow: var(--co-shadow-lg);
+}
+
+/* ── Strip de categorías ─────────────────────────────────── */
+.co-emoji-picker__categories {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--co-spacing-xxs);
+  padding: var(--co-spacing-sm2) var(--co-spacing-sm2) var(--co-spacing-xs);
+}
+
+.co-emoji-picker__category {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--co-border-radius-xxs);
+  color: var(--co-semantic-text-muted);
+  cursor: pointer;
+  transition: color var(--co-motion-duration-fast) var(--co-motion-ease-out),
+    background var(--co-motion-duration-fast) var(--co-motion-ease-out);
+}
+
+.co-emoji-picker__category:hover {
+  color: var(--co-semantic-text-default);
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-emoji-picker__category--active {
+  color: var(--co-semantic-text-default);
+  background: var(--co-semantic-surface-secondary);
+}
+
+.co-emoji-picker__category:focus-visible {
+  outline: none;
+  color: var(--co-semantic-text-default);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+/* ── Scrollport de la grilla ─────────────────────────────── */
+.co-emoji-picker__scroll {
+  position: relative;
+  /* 8 filas visibles. El host lo puede ajustar con --co-emoji-picker-height. */
+  height: var(--co-emoji-picker-height, calc(8 * var(--co-emoji-picker-cell)));
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0 var(--co-spacing-sm2);
+  box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: var(--co-semantic-border-default) transparent;
+  outline: none;
+}
+
+.co-emoji-picker__scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.co-emoji-picker__scroll::-webkit-scrollbar-thumb {
+  background: var(--co-semantic-border-default);
+  border-radius: var(--co-border-radius-full);
+}
+
+.co-emoji-picker__scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Sizer: reserva el alto TOTAL del dataset para que la barra de scroll sea
+   real; la ventana renderizada se desplaza por transform. */
+.co-emoji-picker__sizer {
+  position: relative;
+  width: 100%;
+}
+
+.co-emoji-picker__window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  will-change: transform;
+}
+
+/* ── Filas y celdas ──────────────────────────────────────── */
+.co-emoji-picker__section {
+  display: flex;
+  align-items: flex-end;
+  height: var(--co-emoji-picker-cell);
+  padding-bottom: var(--co-spacing-xs);
+  box-sizing: border-box;
+  font-size: var(--co-font-size-11);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: var(--co-font-letter-spacing-caption, normal);
+  color: var(--co-semantic-text-muted);
+  /* Una sola línea: el nombre de categoría largo se recorta, nunca hace
+     scroll horizontal ni empuja la grilla. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-emoji-picker__row {
+  display: flex;
+  height: var(--co-emoji-picker-cell);
+}
+
+.co-emoji-picker__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--co-emoji-picker-cell);
+  height: var(--co-emoji-picker-cell);
+  flex: 0 0 var(--co-emoji-picker-cell);
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--co-border-radius-xxs);
+  cursor: pointer;
+  transition: background var(--co-motion-duration-instant) var(--co-motion-ease-out),
+    transform var(--co-motion-duration-instant) var(--co-motion-ease-out);
+}
+
+/* El hover es puramente CSS (no toca estado): el resaltado por teclado
+   (--active) y el del mouse son señales distintas y pueden coexistir. */
+.co-emoji-picker__cell:hover,
+.co-emoji-picker__cell--active {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-emoji-picker__cell:focus-visible {
+  outline: none;
+  background: var(--co-semantic-surface-hover);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-emoji-picker__cell:active {
+  transform: scale(0.92);
+}
+
+.co-emoji-picker__glyph {
+  /* Fuentes de emoji del SO. La primaria (Geist) no trae glifos de emoji y
+     dejaría cuadros vacíos en Windows/Linux, y el sistema de tokens todavía no
+     define una familia de emoji: se expone como var themeable con el stack del
+     SO de fallback, así que el día que exista --co-font-family-emoji este CSS
+     la toma sin tocar nada. */
+  font-family: var(
+    --co-font-family-emoji,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Noto Color Emoji',
+    'Segoe UI Symbol',
+    sans-serif
+  );
+  font-size: var(--co-font-size-22);
+  line-height: 1;
+  /* El glifo puede pasarse del alto de línea nominal y desalinear la fila. */
+  display: block;
+}
+
+/* ── Vacío ───────────────────────────────────────────────── */
+.co-emoji-picker__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--co-spacing-sm);
+  height: 100%;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-13);
+  text-align: center;
+}