@nomideusz/svelte-calendar 0.7.3 → 0.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/views/planner/PlannerDay.svelte +14 -5
  2. package/package.json +1 -1
  3. package/widget/svelte-calendar.css +13 -5
  4. package/widget/widget.js +1 -0
package/dist/views/planner/PlannerDay.svelte CHANGED
@@ -642,6 +642,7 @@
642
642
  style:--ev-color={p.ev.color ?? 'var(--dt-accent)'}
643
643
  role="button"
644
644
  tabindex="0"
645
+ title={p.ev.title}
645
646
  aria-label="{p.ev.title}{p.ev.status === 'cancelled' ? ' (cancelled)' : ''}{p.ev.status === 'tentative' ? ' (tentative)' : ''}{p.ev.status === 'full' ? ' (full)' : ''}{p.ev.status === 'limited' ? ' (limited)' : ''}{p.isCurrent ? ` (${L.inProgress})` : ''}{p.isNext ? ` (${L.upNext})` : ''}"
646
647
  onpointerdown={(e) => onEventPointerDown(e, p.ev)}
647
648
  onpointerenter={() => oneventhover?.(p.ev)}
@@ -949,8 +950,11 @@
949
950
  z-index: 6;
950
951
  border-radius: 6px;
951
952
  cursor: pointer;
952
- background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
953
+ background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
953
954
  border: 1px solid color-mix(in srgb, var(--ev-color) 40%, transparent);
955
+ /* Solid stripe at the start edge — matches the week view, keeps the
956
+ pure tour color visible while the body stays a readable tint. */
957
+ border-left: 3px solid var(--ev-color);
954
958
  overflow: hidden;
955
959
  display: flex;
956
960
  align-items: center;
@@ -961,7 +965,7 @@
961
965
  top 180ms cubic-bezier(0.2, 0.8, 0.2, 1), height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
962
966
  }
963
967
  .fs-event:hover {
964
- background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
968
+ background: color-mix(in srgb, var(--ev-color) 32%, var(--dt-surface, var(--dt-bg, #ffffff)));
965
969
  box-shadow: 0 2px 12px color-mix(in srgb, var(--ev-color) 25%, transparent);
966
970
  }
967
971
  .fs-event--selected {
@@ -972,8 +976,7 @@
972
976
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-color) 20%, transparent);
973
977
  }
974
978
  .fs-event--next {
975
- background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
976
- border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
979
+ border-color: color-mix(in srgb, var(--ev-color) 75%, transparent);
977
980
  }
978
981
  .fs-event--dragging {
979
982
  opacity: 0.85;
@@ -1050,7 +1053,13 @@
1050
1053
  color: var(--dt-text, rgba(0, 0, 0, 0.87));
1051
1054
  overflow: hidden;
1052
1055
  text-overflow: ellipsis;
1053
- white-space: nowrap;
1056
+ /* In vertical writing mode line boxes stack as columns — allow a
1057
+ second column before truncating so overlapping (short) cards keep
1058
+ readable names. Full name is in the title tooltip. */
1059
+ display: -webkit-box;
1060
+ -webkit-box-orient: vertical;
1061
+ -webkit-line-clamp: 2;
1062
+ white-space: normal;
1054
1063
  max-height: 100%;
1055
1064
  flex-shrink: 0;
1056
1065
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nomideusz/svelte-calendar",
3
- "version": "0.7.3",
3
+ "version": "0.7.5",
4
4
  "description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/widget/svelte-calendar.css CHANGED
@@ -242,8 +242,11 @@
242
242
  z-index: 6;
243
243
  border-radius: 6px;
244
244
  cursor: pointer;
245
- background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
245
+ background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
246
246
  border: 1px solid color-mix(in srgb, var(--ev-color) 40%, transparent);
247
+ /* Solid stripe at the start edge — matches the week view, keeps the
248
+ pure tour color visible while the body stays a readable tint. */
249
+ border-left: 3px solid var(--ev-color);
247
250
  overflow: hidden;
248
251
  display: flex;
249
252
  align-items: center;
@@ -254,7 +257,7 @@
254
257
  top 180ms cubic-bezier(0.2, 0.8, 0.2, 1), height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
255
258
  }
256
259
  .fs-event.svelte-mrwdy7:hover {
257
- background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
260
+ background: color-mix(in srgb, var(--ev-color) 32%, var(--dt-surface, var(--dt-bg, #ffffff)));
258
261
  box-shadow: 0 2px 12px color-mix(in srgb, var(--ev-color) 25%, transparent);
259
262
  }
260
263
  .fs-event--selected.svelte-mrwdy7 {
@@ -265,8 +268,7 @@
265
268
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-color) 20%, transparent);
266
269
  }
267
270
  .fs-event--next.svelte-mrwdy7 {
268
- background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
269
- border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
271
+ border-color: color-mix(in srgb, var(--ev-color) 75%, transparent);
270
272
  }
271
273
  .fs-event--dragging.svelte-mrwdy7 {
272
274
  opacity: 0.85;
@@ -343,7 +345,13 @@
343
345
  color: var(--dt-text, rgba(0, 0, 0, 0.87));
344
346
  overflow: hidden;
345
347
  text-overflow: ellipsis;
346
- white-space: nowrap;
348
+ /* In vertical writing mode line boxes stack as columns — allow a
349
+ second column before truncating so overlapping (short) cards keep
350
+ readable names. Full name is in the title tooltip. */
351
+ display: -webkit-box;
352
+ -webkit-box-orient: vertical;
353
+ -webkit-line-clamp: 2;
354
+ white-space: normal;
347
355
  max-height: 100%;
348
356
  flex-shrink: 0;
349
357
  }
package/widget/widget.js CHANGED
@@ -7238,6 +7238,7 @@
7238
7238
  "fs-event--full": get(p).ev.status === "full",
7239
7239
  "fs-event--limited": get(p).ev.status === "limited"
7240
7240
  });
7241
+ set_attribute(div_9, "title", get(p).ev.title);
7241
7242
  set_attribute(div_9, "aria-label", `${get(p).ev.title ?? ""}${get(p).ev.status === "cancelled" ? " (cancelled)" : ""}${get(p).ev.status === "tentative" ? " (tentative)" : ""}${get(p).ev.status === "full" ? " (full)" : ""}${get(p).ev.status === "limited" ? " (limited)" : ""}${get(p).isCurrent ? ` (${get(L).inProgress})` : ""}${get(p).isNext ? ` (${get(L).upNext})` : ""}`);
7242
7243
  styles_7 = set_style(div_9, "", styles_7, {
7243
7244
  left: `${get(p).x ?? ""}px`,