@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

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

@@ -35,17 +35,22 @@ export class CoButton {
         };
     }
     render() {
-        var _a;
-        const iconSize = (_a = ICON_SIZE[this.size]) !== null && _a !== void 0 ? _a : 18;
-        return (h("button", { key: '6e8ec1767dafc2feecf773456ad2a1143bcc0fc0', class: {
+        var _a, _b;
+        const iconSize = (_b = (_a = this.iconSize) !== null && _a !== void 0 ? _a : ICON_SIZE[this.size]) !== null && _b !== void 0 ? _b : 18;
+        const customStyle = {};
+        if (this.color)
+            customStyle.background = this.color;
+        if (this.textColor)
+            customStyle.color = this.textColor;
+        return (h("button", { key: '05a61f0d95bb3c6e09207bb643545694c40b0976', class: {
                 'co-button': true,
                 [`co-button--${this.variant}`]: true,
                 [`co-button--${this.shape}`]: true,
                 [`co-button--${this.size}`]: true,
                 'co-button--disabled': this.disabled,
-            }, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
+            }, style: Object.keys(customStyle).length ? customStyle : undefined, type: this.type, disabled: this.disabled, onClick: this.handleClick, part: "button" }, this.iconLeft
             ? h("co-icon", { name: this.iconLeft, weight: this.iconWeight, size: iconSize })
-            : null, h("slot", { key: 'f1bb85bd1ad4d934e529b40273c65107e92102aa' }, this.label), this.iconRight
+            : null, h("slot", { key: '9ebae938e533d11c31899023bf35c8e071dabc6e' }, this.label), this.iconRight
             ? h("co-icon", { name: this.iconRight, weight: this.iconWeight, size: iconSize })
             : null));
     }
@@ -67,8 +72,8 @@ export class CoButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'stroke' | 'ghost'",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"stroke\"",
+                    "original": "'primary' | 'secondary' | 'stroke' | 'ghost' | 'danger' | 'success'",
+                    "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\" | \"stroke\" | \"success\"",
                     "references": {}
                 },
                 "required": false,
@@ -99,7 +104,7 @@ export class CoButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "shape",
                 "defaultValue": "'rounded'"
             },
@@ -239,6 +244,63 @@ export class CoButton {
                 "reflect": false,
                 "attribute": "type",
                 "defaultValue": "'button'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color (CSS value or token, e.g. \"var(--co-color-secondary-rojo-100)\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "textColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text/icon color (CSS value or token, e.g. \"var(--co-color-base-blanco)\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-color"
+            },
+            "iconSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the size-derived glyph px (e.g. 24). Falls back to the size default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size"
             }
         };
     }

package/dist/collection/components/co-button-group/co-button-group.js

@@ -10,12 +10,12 @@ export class CoButtonGroup {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: '1cb2ae54992e103811c5e13d3b332fc2eb7d4d3f', class: {
+        return (h("div", { key: 'd95d8e7435cdef2385751f66442871f0f3bfea3b', class: {
                 'co-button-group': true,
                 [`co-button-group--${this.direction}`]: true,
                 [`co-button-group--${this.variant}`]: true,
                 'co-button-group--disabled': this.disabled,
-            }, role: "group" }, h("slot", { key: '35b74774de7adec0eafdced70ff56a34575eb037' })));
+            }, role: "group" }, h("slot", { key: 'd7e6aab7a87a34c080d922dca30b1e3d00e0a7b2' })));
     }
     static get is() { return "co-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,236 @@
+:host {
+  display: inline-block;
+  font-family: var(--co-font-family-primary);
+  /* Day-cell size. Bumped to 44px on touch via [data-touch] (mobile, Fase 7). */
+  --co-calendar-day-size: 36px;
+}
+
+:host([data-touch]) {
+  --co-calendar-day-size: 44px;
+}
+
+.co-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm);
+  width: max-content;
+}
+
+/* ── Header ──────────────────────────────────────────────── */
+.co-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-calendar__month {
+  font-size: var(--co-font-size-14);
+  font-weight: 600;
+  color: var(--co-semantic-text-default);
+  text-transform: capitalize;
+}
+
+/* Clickable title (switches day → month → year views). */
+.co-calendar__title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--co-font-size-14);
+  font-weight: 600;
+  color: var(--co-semantic-text-default);
+  text-transform: capitalize;
+  padding: var(--co-spacing-xxs) var(--co-spacing-sm);
+  border-radius: var(--co-border-radius-xs);
+}
+.co-calendar__title:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.co-calendar__title:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+.co-calendar__title-caret {
+  color: var(--co-semantic-text-muted);
+}
+
+/* Month / year picker grid. */
+.co-calendar__panel {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--co-spacing-xs);
+  width: calc(var(--co-calendar-day-size) * 7 + 12px);
+  padding-top: var(--co-spacing-xs);
+}
+
+.co-calendar__cell {
+  height: calc(var(--co-calendar-day-size) + 8px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--co-border-radius-xs);
+  font-family: inherit;
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  text-transform: capitalize;
+  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
+}
+.co-calendar__cell:hover:not(.co-calendar__cell--disabled):not(.co-calendar__cell--selected) {
+  background: var(--co-semantic-surface-hover);
+}
+.co-calendar__cell:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+.co-calendar__cell--muted {
+  color: var(--co-semantic-text-muted);
+}
+.co-calendar__cell--today {
+  border-color: var(--co-color-primary-azul);
+  font-weight: 600;
+}
+.co-calendar__cell--selected {
+  background: var(--co-color-primary-azul);
+  border-color: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  font-weight: 600;
+}
+.co-calendar__cell--disabled {
+  color: var(--co-semantic-text-disabled);
+  cursor: not-allowed;
+}
+
+.co-calendar__nav {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  padding: var(--co-spacing-xs);
+  border-radius: var(--co-border-radius-xxs);
+  display: inline-flex;
+  align-items: center;
+  color: var(--co-semantic-text-default);
+}
+.co-calendar__nav:hover {
+  background: var(--co-semantic-surface-hover);
+}
+.co-calendar__nav:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* ── Grid ────────────────────────────────────────────────── */
+.co-calendar__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.co-calendar__row {
+  display: grid;
+  grid-template-columns: repeat(7, var(--co-calendar-day-size));
+  gap: 2px;
+}
+
+.co-calendar__row--dow {
+  margin-bottom: 2px;
+}
+
+.co-calendar__dow {
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--co-font-size-10, 10px);
+  font-weight: 600;
+  color: var(--co-semantic-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ── Day cell ────────────────────────────────────────────── */
+.co-calendar__day {
+  width: var(--co-calendar-day-size);
+  height: var(--co-calendar-day-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--co-border-radius-xs);
+  font-size: var(--co-font-size-14);
+  font-family: inherit;
+  color: var(--co-semantic-text-default);
+  cursor: pointer;
+  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
+}
+
+.co-calendar__day:hover:not(.co-calendar__day--disabled):not(.co-calendar__day--selected) {
+  background: var(--co-semantic-surface-hover);
+}
+
+.co-calendar__day:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* Outside-month days are muted but still navigable. */
+.co-calendar__day--outside {
+  color: var(--co-semantic-text-muted);
+}
+
+/*
+ * TODAY — a subtle ring only. Deliberately distinct from `selected` so the two
+ * never read the same (hard requirement).
+ */
+.co-calendar__day--today {
+  border-color: var(--co-color-primary-azul);
+  font-weight: 600;
+}
+
+/* SELECTED — solid fill + inverse text. */
+.co-calendar__day--selected {
+  background: var(--co-color-primary-azul);
+  border-color: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  font-weight: 600;
+}
+
+.co-calendar__day--disabled {
+  color: var(--co-semantic-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Range states ────────────────────────────────────────── */
+/* Middle of the range (incl. hover preview): soft tinted band. */
+.co-calendar__day--in-range {
+  background: var(--co-semantic-surface-hover);
+  border-radius: 0;
+  color: var(--co-semantic-text-default);
+}
+
+/* Endpoints: solid fill + inverse text (same language as `selected`). */
+.co-calendar__day--range-start,
+.co-calendar__day--range-end {
+  background: var(--co-color-primary-azul);
+  border-color: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  font-weight: 600;
+}
+
+/* Connect the endpoints visually to the band when a range spans both. */
+.co-calendar__day--range-start:not(.co-calendar__day--range-end) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.co-calendar__day--range-end:not(.co-calendar__day--range-start) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}