@crisp-ui-kit/crisp 0.7.0 → 0.7.1

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 (5) hide show
  1. package/dist/cjs/components/datepicker/datepicker.recipe.js +13 -3
  2. package/dist/datepicker.css +13 -3
  3. package/dist/esm/components/datepicker/datepicker.recipe.js +13 -3
  4. package/dist/styles.css +13 -3
  5. package/package.json +1 -1
package/dist/cjs/components/datepicker/datepicker.recipe.js CHANGED
@@ -81,16 +81,26 @@ const config = (0, core_1.defineRecipe)({
81
81
  }
82
82
  & .datepicker-empty-cell { min-height: ${tokens_1.contract.size.calendarCell}; }
83
83
 
84
- /* the bridge joining days inside a completed range */
84
+ /* The bridge joining days inside a completed range.
85
+ The endpoints do NOT carry data-in-range -- only the interior days do --
86
+ so these are three independent rules, not a base plus two modifiers. A
87
+ modifier that sets only inset-inline-start never generates a pseudo
88
+ element on an endpoint, which leaves a half-cell of white between the
89
+ endpoint's pill and the run of grey beside it. Each rule declares its
90
+ own content. */
85
91
  & .datepicker-cell[data-range-complete][data-in-range]::before {
86
92
  content: ""; position: absolute; z-index: -1; inset-inline: 0;
87
93
  top: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
88
94
  }
89
95
  & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
90
- inset-inline-start: 50%;
96
+ content: ""; position: absolute; z-index: -1;
97
+ inset-inline-start: 50%; inset-inline-end: 0;
98
+ top: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
91
99
  }
92
100
  & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
93
- inset-inline-end: 50%;
101
+ content: ""; position: absolute; z-index: -1;
102
+ inset-inline-start: 0; inset-inline-end: 50%;
103
+ top: ${pillInset}; height: ${tokens_1.contract.size.calendarPill}; background: ${tokens_1.contract.bgNeutralWeak};
94
104
  }
95
105
 
96
106
  & .datepicker-date {
package/dist/datepicker.css CHANGED
@@ -62,16 +62,26 @@
62
62
  }
63
63
  & .datepicker-empty-cell { min-height: var(--size-calendarCell); }
64
64
 
65
- /* the bridge joining days inside a completed range */
65
+ /* The bridge joining days inside a completed range.
66
+ The endpoints do NOT carry data-in-range -- only the interior days do --
67
+ so these are three independent rules, not a base plus two modifiers. A
68
+ modifier that sets only inset-inline-start never generates a pseudo
69
+ element on an endpoint, which leaves a half-cell of white between the
70
+ endpoint's pill and the run of grey beside it. Each rule declares its
71
+ own content. */
66
72
  & .datepicker-cell[data-range-complete][data-in-range]::before {
67
73
  content: ""; position: absolute; z-index: -1; inset-inline: 0;
68
74
  top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
69
75
  }
70
76
  & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
71
- inset-inline-start: 50%;
77
+ content: ""; position: absolute; z-index: -1;
78
+ inset-inline-start: 50%; inset-inline-end: 0;
79
+ top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
72
80
  }
73
81
  & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
74
- inset-inline-end: 50%;
82
+ content: ""; position: absolute; z-index: -1;
83
+ inset-inline-start: 0; inset-inline-end: 50%;
84
+ top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
75
85
  }
76
86
 
77
87
  & .datepicker-date {
package/dist/esm/components/datepicker/datepicker.recipe.js CHANGED
@@ -78,16 +78,26 @@ const config = defineRecipe({
78
78
  }
79
79
  & .datepicker-empty-cell { min-height: ${c.size.calendarCell}; }
80
80
 
81
- /* the bridge joining days inside a completed range */
81
+ /* The bridge joining days inside a completed range.
82
+ The endpoints do NOT carry data-in-range -- only the interior days do --
83
+ so these are three independent rules, not a base plus two modifiers. A
84
+ modifier that sets only inset-inline-start never generates a pseudo
85
+ element on an endpoint, which leaves a half-cell of white between the
86
+ endpoint's pill and the run of grey beside it. Each rule declares its
87
+ own content. */
82
88
  & .datepicker-cell[data-range-complete][data-in-range]::before {
83
89
  content: ""; position: absolute; z-index: -1; inset-inline: 0;
84
90
  top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
85
91
  }
86
92
  & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
87
- inset-inline-start: 50%;
93
+ content: ""; position: absolute; z-index: -1;
94
+ inset-inline-start: 50%; inset-inline-end: 0;
95
+ top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
88
96
  }
89
97
  & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
90
- inset-inline-end: 50%;
98
+ content: ""; position: absolute; z-index: -1;
99
+ inset-inline-start: 0; inset-inline-end: 50%;
100
+ top: ${pillInset}; height: ${c.size.calendarPill}; background: ${c.bgNeutralWeak};
91
101
  }
92
102
 
93
103
  & .datepicker-date {
package/dist/styles.css CHANGED
@@ -632,16 +632,26 @@
632
632
  }
633
633
  & .datepicker-empty-cell { min-height: var(--size-calendarCell); }
634
634
 
635
- /* the bridge joining days inside a completed range */
635
+ /* The bridge joining days inside a completed range.
636
+ The endpoints do NOT carry data-in-range -- only the interior days do --
637
+ so these are three independent rules, not a base plus two modifiers. A
638
+ modifier that sets only inset-inline-start never generates a pseudo
639
+ element on an endpoint, which leaves a half-cell of white between the
640
+ endpoint's pill and the run of grey beside it. Each rule declares its
641
+ own content. */
636
642
  & .datepicker-cell[data-range-complete][data-in-range]::before {
637
643
  content: ""; position: absolute; z-index: -1; inset-inline: 0;
638
644
  top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
639
645
  }
640
646
  & .datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before {
641
- inset-inline-start: 50%;
647
+ content: ""; position: absolute; z-index: -1;
648
+ inset-inline-start: 50%; inset-inline-end: 0;
649
+ top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
642
650
  }
643
651
  & .datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before {
644
- inset-inline-end: 50%;
652
+ content: ""; position: absolute; z-index: -1;
653
+ inset-inline-start: 0; inset-inline-end: 50%;
654
+ top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); height: var(--size-calendarPill); background: var(--bg-neutral-weak);
645
655
  }
646
656
 
647
657
  & .datepicker-date {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crisp-ui-kit/crisp",
3
- "version": "0.7.0",
3
+ "version": "0.7.1",
4
4
  "description": "A lean React design system, measured pixel-for-pixel from Attio.",
5
5
  "license": "MIT",
6
6
  "type": "module",