@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -363,7 +363,7 @@ export class CoCalendar {
     render() {
         var _a, _b;
         const t = getDateStrings(this.locale);
-        return (h("div", { key: '38278f3489400b035c01cfcdb5e5afbcc5000b21', class: "co-calendar", part: "root" }, h("div", { key: '0bcd5c42678b1057fb327853cacad03a8b49cdd1', class: "co-calendar__header", part: "header" }, h("button", { key: '6e7210ea64062171c0f94f463251e6373c01c348', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '053ff755d082dae52d5cce4b0338f795d56829b7', name: "caret-left", size: 16 })), h("button", { key: '70af310b739b910e850715ac626430c1a30e3479', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'b06bc1fb2aa4c8c31e53fa68eebade370d8026f9', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '0eee7bed8085c2d3fd495f8b4152b359c3e246ad', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: 'ffc4ff19f0ba3e69cb6b04a2888bc2a093f090be', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
+        return (h("div", { key: '7320bd2eb0ee092cf3499bd1d40d05cceb26a32f', class: "co-calendar", part: "root" }, h("div", { key: '1271d1d9a335b8d8a5bf206351e5b00a8e2f0528', class: "co-calendar__header", part: "header" }, h("button", { key: '456e7a68d6a910c8495e5cf7eeabd7fe13dce120', type: "button", class: "co-calendar__nav", onClick: this.handlePrev, "aria-label": (_a = this.prevMonthLabel) !== null && _a !== void 0 ? _a : t.prevMonth }, h("co-icon", { key: '84eefee59bfec282afd4e4ec66b5c73f1a96ee7f', name: "caret-left", size: 16 })), h("button", { key: 'bd214b4dc78e77bed5038bf6e9ce44f401857518', type: "button", class: "co-calendar__title", "aria-live": "polite", onClick: this.toggleView }, this.headerTitle(), h("co-icon", { key: 'fb3eec407771f96375dfd6451065e20f627c3516', name: "caret-down", size: 12, class: "co-calendar__title-caret" })), h("button", { key: '6063b0cbb2f4bef653e25b1087f43c8a9141dbac', type: "button", class: "co-calendar__nav", onClick: this.handleNext, "aria-label": (_b = this.nextMonthLabel) !== null && _b !== void 0 ? _b : t.nextMonth }, h("co-icon", { key: '24d805b7ba812a0b3f33e58714e0378ca7c03944', name: "caret-right", size: 16 }))), this.view === 'days' && this.renderDays(t), this.view === 'months' && this.renderMonths(), this.view === 'years' && this.renderYears()));
     }
     static get is() { return "co-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,231 @@
+/*
+ * co-calendar-month — month grid + overlaid multi-day event bars.
+ *
+ * Themed ENTIRELY through --co-cal-* tokens, each defaulting to a semantic
+ * Cobalt token so dark mode and brand overrides work for free (Spike #2). Hosts
+ * override any --co-cal-* on the element to reskin without touching internals.
+ */
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+
+  /* Geometry */
+  --co-cal-daynum-h: 24px; /* height reserved for the day number */
+  --co-cal-lane-h: 22px; /* height of one event lane */
+  --co-cal-min-week-h: 92px; /* minimum week-row height */
+  --co-cal-gap: 2px;
+
+  /* Surfaces & text */
+  --co-cal-surface: var(--co-semantic-surface-page);
+  --co-cal-border: var(--co-semantic-border-default);
+  --co-cal-text: var(--co-semantic-text-default);
+  --co-cal-text-muted: var(--co-semantic-text-muted);
+  --co-cal-hover: var(--co-semantic-surface-hover);
+  --co-cal-today-ring: var(--co-color-primary-azul);
+
+  /* Event chips */
+  --co-cal-event-bg: var(--co-color-primary-azul);
+  --co-cal-event-border: transparent;
+  --co-cal-event-text: var(--co-color-base-blanco, #fff);
+  --co-cal-event-text-light: var(--co-color-base-blanco, #fff);
+  --co-cal-event-text-dark: var(--co-semantic-text-default);
+}
+
+.cal-month {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--co-cal-border);
+  border-radius: var(--co-border-radius-xs);
+  overflow: hidden;
+  background: var(--co-cal-surface);
+}
+
+/* ── Weekday header ─────────────────────────────────────────── */
+.cal-month__dow {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border-bottom: 1px solid var(--co-cal-border);
+}
+.cal-month__dow-cell {
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  font-size: var(--co-font-size-10, 10px);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--co-cal-text-muted);
+  text-align: right;
+}
+
+/* ── Week row ───────────────────────────────────────────────── */
+.cal-month__week {
+  position: relative;
+  min-height: var(--co-cal-min-week-h);
+}
+.cal-month__week:not(:last-child) {
+  border-bottom: 1px solid var(--co-cal-border);
+}
+
+.cal-month__days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  height: 100%;
+  position: absolute;
+  inset: 0;
+}
+
+.cal-month__day {
+  border-right: 1px solid var(--co-cal-border);
+  padding: var(--co-spacing-xxs);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.cal-month__day:last-child {
+  border-right: 0;
+}
+.cal-month__day:hover {
+  background: var(--co-cal-hover);
+}
+.cal-month__day:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: -2px;
+}
+.cal-month__day--outside .cal-month__daynum {
+  color: var(--co-cal-text-muted);
+}
+.cal-month__day--disabled {
+  cursor: not-allowed;
+  background: color-mix(in srgb, var(--co-cal-border) 20%, transparent);
+}
+.cal-month__day--drag-over {
+  background: color-mix(in srgb, var(--co-cal-today-ring) 14%, transparent);
+  box-shadow: inset 0 0 0 2px var(--co-cal-today-ring);
+}
+
+.cal-month__daynum {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  margin-left: auto;
+  float: right;
+  font-size: var(--co-font-size-12, 12px);
+  color: var(--co-cal-text);
+  border-radius: var(--co-border-radius-full);
+}
+.cal-month__day--today .cal-month__daynum {
+  background: var(--co-cal-today-ring);
+  color: var(--co-color-base-blanco, #fff);
+  font-weight: 600;
+}
+
+/* ── Event layer (absolute bars over the day grid) ──────────── */
+.cal-month__events {
+  position: absolute;
+  inset: 0;
+  pointer-events: none; /* let day-cell clicks through; chips re-enable below */
+}
+
+.cal-chip,
+.cal-month__more {
+  position: absolute;
+  height: calc(var(--co-cal-lane-h) - 3px);
+  box-sizing: border-box;
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xxs);
+  margin: 0 3px;
+  padding: 0 var(--co-spacing-xs);
+  border: 1px solid var(--co-cal-event-border);
+  border-radius: var(--co-border-radius-xxs);
+  font-family: inherit;
+  font-size: var(--co-font-size-12, 12px);
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.cal-chip {
+  background: var(--co-cal-event-bg);
+  color: var(--co-cal-event-text);
+}
+.cal-chip:hover {
+  filter: brightness(0.95);
+}
+.cal-chip:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+}
+
+/* All-day / multi-day bars read as solid blocks; timed events as a dot + time. */
+.cal-chip--all-day {
+  font-weight: 500;
+}
+.cal-chip__dot {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--co-border-radius-full);
+  background: var(--co-cal-event-bg);
+}
+/* When the chip has no solid fill (timed), recolor for a light surface. */
+.cal-chip:not(.cal-chip--all-day) {
+  background: transparent;
+  color: var(--co-cal-text);
+  border-color: transparent;
+}
+.cal-chip:not(.cal-chip--all-day):hover {
+  background: var(--co-cal-hover);
+  filter: none;
+}
+.cal-chip__time {
+  flex: 0 0 auto;
+  color: var(--co-cal-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.cal-chip__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cal-chip__ext {
+  flex: 0 0 auto;
+  opacity: 0.8;
+}
+
+.cal-chip--past {
+  opacity: 0.55;
+}
+.cal-chip--locked {
+  cursor: default;
+}
+.cal-chip--external {
+  border-style: dashed;
+}
+.cal-chip--dragging {
+  opacity: 0.4;
+}
+.cal-chip--continues-before {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: 0;
+}
+.cal-chip--continues-after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: 0;
+}
+
+.cal-month__more {
+  background: transparent;
+  color: var(--co-cal-text-muted);
+  border-color: transparent;
+  font-weight: 600;
+  font-size: var(--co-font-size-11, 11px);
+}
+.cal-month__more:hover {
+  background: var(--co-cal-hover);
+  color: var(--co-cal-text);
+}