@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

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

@@ -29,13 +29,13 @@ export class CoCard {
         return nodes.length > 0;
     }
     render() {
-        return (h("div", { key: 'accbb972f6881a7e13b37a5523d10a3614730603', class: {
+        return (h("div", { key: '52e3eb679a025b1b53854b38063b6fa951cf9f70', class: {
                 'co-card': true,
                 [`co-card--${this.variant}`]: true,
                 [`co-card--pad-${this.padding}`]: true,
                 'co-card--clickable': this.clickable,
                 'co-card--stretch': this.stretch,
-            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '282946088ac5d725587fbc21678e09b430ac2492', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: '7a23d56c1c2024fe163f6d4dc8d484cf8b718901', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'dcec3cc0ab89d8e9b5abbc4bded028a18f5108a9', class: "co-card__body", part: "body" }, h("slot", { key: '94b9b7db62590372a19b87372c2c288658848896' })), h("div", { key: '8aa4852f91fdaa4ad785b7d6f90f6c9d1dffef99', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '3417ff7a18b113f42b172593e86fafc8268c613a', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
+            }, part: "card", role: this.clickable ? 'button' : undefined, tabIndex: this.clickable ? 0 : undefined }, h("div", { key: '753b2277a6629673e8583774e126b2472709221d', class: { 'co-card__header': true, 'co-card__header--empty': !this.hasHeader }, part: "header" }, h("slot", { key: 'f73192e7fa291c8a2d831a0f9db7ebe8a7ef8907', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '2916b424d3cb1feacf438678132d10217df51ad9', class: "co-card__body", part: "body" }, h("slot", { key: 'f957907056567d135c3de5d412251911c7cf8db0' })), h("div", { key: 'f1f183b7d3eacbd11787e0cc3d0ef438f8272480', class: { 'co-card__footer': true, 'co-card__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: '2171a95906d5b862c7b39a756cafee17d86f7dbc', name: "footer", onSlotchange: this.handleFooterSlotChange }))));
     }
     static get is() { return "co-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,152 @@
+/* ═══════════════════════════════════════════════════
+   co-carousel
+   ═══════════════════════════════════════════════════ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  --co-carousel-arrow-size: 36px;
+  /* surface-page, NOT surface-primary: primary es la superficie INVERSA
+     (negra en light) y con text-default daba ícono negro sobre círculo
+     negro en ambos temas. page + text-default flipan juntas. */
+  --co-carousel-arrow-bg: var(--co-semantic-surface-page);
+  --co-carousel-arrow-color: var(--co-semantic-text-default);
+  --co-carousel-dot-size: 6px;
+  --co-carousel-dot-color: var(--co-semantic-border-default);
+  --co-carousel-dot-active-color: var(--co-semantic-text-default);
+  --co-carousel-transition: 320ms cubic-bezier(0.25, 0.8, 0.4, 1);
+}
+
+/* ─── Container ─────────────────────────────────── */
+
+.co-carousel {
+  position: relative;
+  width: 100%;
+  outline: none;
+}
+
+.co-carousel:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--co-border-radius-sm);
+}
+
+/* ─── Aspect Ratios (union de co-video) ─────────── */
+
+.co-carousel--16-9 { aspect-ratio: 16 / 9; }
+.co-carousel--4-3  { aspect-ratio: 4 / 3; }
+.co-carousel--1-1  { aspect-ratio: 1 / 1; }
+.co-carousel--21-9 { aspect-ratio: 21 / 9; }
+.co-carousel--auto { aspect-ratio: unset; }
+
+.co-carousel--16-9 .co-carousel__viewport,
+.co-carousel--4-3 .co-carousel__viewport,
+.co-carousel--1-1 .co-carousel__viewport,
+.co-carousel--21-9 .co-carousel__viewport {
+  position: absolute;
+  inset: 0;
+}
+
+/* ─── Viewport & track ──────────────────────────── */
+
+.co-carousel__viewport {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  touch-action: pan-y;
+}
+
+.co-carousel__track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transition: transform var(--co-carousel-transition);
+  will-change: transform;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .co-carousel__track {
+    transition: none;
+  }
+}
+
+/* ─── Arrows ────────────────────────────────────── */
+
+.co-carousel__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--co-carousel-arrow-size);
+  height: var(--co-carousel-arrow-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--co-semantic-border-subtle);
+  border-radius: 50%;
+  background: var(--co-carousel-arrow-bg);
+  color: var(--co-carousel-arrow-color);
+  cursor: pointer;
+  padding: 0;
+  opacity: 0.9;
+  transition: opacity 120ms ease, background 120ms ease;
+  z-index: 1;
+}
+
+.co-carousel__arrow:hover {
+  opacity: 1;
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-carousel__arrow:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus-ring);
+  outline-offset: 1px;
+}
+
+.co-carousel__arrow--prev { left: var(--co-spacing-sm, 8px); }
+.co-carousel__arrow--next { right: var(--co-spacing-sm, 8px); }
+
+.co-carousel__arrow--disabled {
+  opacity: 0.35;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ─── Dots ──────────────────────────────────────── */
+
+.co-carousel__dots {
+  position: absolute;
+  left: 50%;
+  bottom: var(--co-spacing-sm, 8px);
+  transform: translateX(-50%);
+  display: flex;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: var(--co-border-radius-xl);
+  /* Scrim sobre surface-page (misma razón que las flechas: primary es la
+     superficie inversa y dejaba el dot activo text-default sin contraste). */
+  background: color-mix(in srgb, var(--co-semantic-surface-page) 65%, transparent);
+  backdrop-filter: blur(4px);
+  z-index: 1;
+}
+
+.co-carousel__dot {
+  width: var(--co-carousel-dot-size);
+  height: var(--co-carousel-dot-size);
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  background: var(--co-carousel-dot-color);
+  cursor: pointer;
+  transition: background 120ms ease, width 200ms ease;
+}
+
+.co-carousel__dot--active {
+  background: var(--co-carousel-dot-active-color);
+  width: calc(var(--co-carousel-dot-size) * 2.6);
+  border-radius: var(--co-border-radius-xl);
+}
+
+.co-carousel__dot:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus-ring);
+  outline-offset: 1px;
+}