@triptease/tt-calendar 6.2.0 → 6.3.0

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/src/Styles.js +4 -4
  2. package/dist/cjs/src/Styles.js.map +1 -1
  3. package/dist/esm/src/Styles.js +4 -4
  4. package/dist/esm/src/Styles.js.map +1 -1
  5. package/package.json +1 -1
package/dist/cjs/src/Styles.js CHANGED
@@ -128,7 +128,7 @@ exports.styles = (0, lit_1.css) `
128
128
  }
129
129
 
130
130
  .day.in-range {
131
- background: var(--color-primary-300);
131
+ background: var(--tt-calendar-range-bg, var(--color-primary-300));
132
132
 
133
133
  &:first-child {
134
134
  border-top-left-radius: var(--space-scale-1);
@@ -155,7 +155,7 @@ exports.styles = (0, lit_1.css) `
155
155
  left: 0;
156
156
  width: 100%;
157
157
  height: 100%;
158
- background: var(--color-primary-300);
158
+ background: var(--tt-calendar-range-bg, var(--color-primary-300));
159
159
  z-index: -1;
160
160
  border-radius: var(--space-scale-1);
161
161
  border-bottom-right-radius: 0;
@@ -169,7 +169,7 @@ exports.styles = (0, lit_1.css) `
169
169
  left: 0;
170
170
  width: 100%;
171
171
  height: 100%;
172
- background: var(--color-primary-300);
172
+ background: var(--tt-calendar-range-bg, var(--color-primary-300));
173
173
  z-index: -1;
174
174
  border-radius: var(--space-scale-1);
175
175
  border-bottom-left-radius: 0;
@@ -191,7 +191,7 @@ exports.styles = (0, lit_1.css) `
191
191
  left: 0;
192
192
  width: 100%;
193
193
  height: 100%;
194
- background: var(--color-primary-300);
194
+ background: var(--tt-calendar-range-bg, var(--color-primary-300));
195
195
  z-index: -1;
196
196
  border-radius: var(--bg-border-radius, 0);
197
197
  }
package/dist/cjs/src/Styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n border-radius: var(--space-scale-1);\n padding-block: var(--space-scale-1);\n padding-inline: var(--space-scale-2);\n\n &.compact {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &:hover {\n cursor: pointer;\n box-shadow:\n 0px 2px 5px 0px rgba(60, 66, 87, 0.08),\n 0px 1px 1px 0px rgba(0, 0, 0, 0.12);\n }\n\n &:focus {\n outline: 1px solid var(--color-primary-400);\n }\n\n svg {\n display: block;\n }\n\n &.right svg {\n transform: rotate(180deg);\n }\n }\n\n h2 {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-500);\n font-size: var(--font-size-400);\n display: contents;\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 16px 24px;\n }\n\n .calendar-grid {\n text-align: center;\n border-top: var(--color-border-200) 1px solid;\n padding: 0 24px;\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n tbody {\n display: grid;\n row-gap: 4px;\n }\n\n tr {\n display: grid;\n grid-template-columns: repeat(7, 48px);\n }\n\n th {\n color: var(--color-text-400);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n line-height: 20px;\n padding: 16px 0;\n }\n\n td {\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n }\n }\n\n .calendar-footer {\n display: flex;\n flex-direction: column;\n //gap: var(--space-scale-2);\n\n svg {\n vertical-align: middle;\n }\n\n .actions {\n display: flex;\n flex: 1 0 auto;\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n button {\n background-color: var(--color-surface-200);\n border-color: var(--color-primary-400);\n border-width: 1px;\n border-style: solid;\n color: var(--color-primary-400);\n font-weight: var(--font-weight-semibold);\n width: 100%;\n height: 40px;\n }\n }\n }\n\n .day {\n aspect-ratio: 1;\n cursor: pointer;\n position: relative; // For focus outline\n box-sizing: border-box;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .day.in-range {\n background: var(--color-primary-300);\n\n &:first-child {\n border-top-left-radius: var(--space-scale-1);\n border-bottom-left-radius: var(--space-scale-1);\n }\n\n &:last-child {\n border-top-right-radius: var(--space-scale-1);\n border-bottom-right-radius: var(--space-scale-1);\n }\n }\n\n .day[aria-disabled='true'] {\n opacity: 0.7;\n background-color: var(--color-surface-300);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .day.start-date:has(+ .in-range):after {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .day.in-range + :is(.day:hover, .day:not(.in-range)):before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .day[aria-selected='true']:not(.in-range),\n .day:hover {\n background: var(--color-primary-400);\n color: var(--color-text-100);\n border-radius: var(--space-scale-1);\n font-weight: var(--font-weight-semibold);\n\n &.in-range {\n &:before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--bg-border-radius, 0);\n }\n\n &:first-child {\n --bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1);\n }\n\n &:last-child {\n --bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0;\n }\n }\n }\n\n .side-panel-wrapper {\n border-right: 1px solid var(--color-border-200, var(--color-surface-300));\n display: flex;\n align-items: start;\n }\n\n .side-panel {\n padding: var(--space-scale-3);\n grid-template-columns: 1fr;\n display: grid;\n gap: var(--space-scale-3);\n\n button {\n font-size: var(--font-size-200);\n text-wrap: nowrap;\n line-height: var(--space-scale-3);\n padding-block: 0;\n padding-inline: 0;\n\n &:hover {\n color: var(--color-primary-400);\n box-shadow: none;\n }\n\n &[aria-selected='true'] {\n color: var(--color-primary-400);\n }\n }\n }\n\n details {\n border-top: 1px solid var(--color-border-200);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n summary {\n font-weight: var(--font-weight-semibold);\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\n\n &::marker {\n content: '';\n }\n\n svg.chevron-down {\n margin-left: var(--space-scale-1);\n transform: rotate(-90deg);\n }\n }\n\n &[open] svg.chevron-down {\n transform: rotate(0deg);\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n border-radius: var(--space-scale-1);\n padding-block: var(--space-scale-1);\n padding-inline: var(--space-scale-2);\n\n &.compact {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &:hover {\n cursor: pointer;\n box-shadow:\n 0px 2px 5px 0px rgba(60, 66, 87, 0.08),\n 0px 1px 1px 0px rgba(0, 0, 0, 0.12);\n }\n\n &:focus {\n outline: 1px solid var(--color-primary-400);\n }\n\n svg {\n display: block;\n }\n\n &.right svg {\n transform: rotate(180deg);\n }\n }\n\n h2 {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-500);\n font-size: var(--font-size-400);\n display: contents;\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 16px 24px;\n }\n\n .calendar-grid {\n text-align: center;\n border-top: var(--color-border-200) 1px solid;\n padding: 0 24px;\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n tbody {\n display: grid;\n row-gap: 4px;\n }\n\n tr {\n display: grid;\n grid-template-columns: repeat(7, 48px);\n }\n\n th {\n color: var(--color-text-400);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n line-height: 20px;\n padding: 16px 0;\n }\n\n td {\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n }\n }\n\n .calendar-footer {\n display: flex;\n flex-direction: column;\n //gap: var(--space-scale-2);\n\n svg {\n vertical-align: middle;\n }\n\n .actions {\n display: flex;\n flex: 1 0 auto;\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n button {\n background-color: var(--color-surface-200);\n border-color: var(--color-primary-400);\n border-width: 1px;\n border-style: solid;\n color: var(--color-primary-400);\n font-weight: var(--font-weight-semibold);\n width: 100%;\n height: 40px;\n }\n }\n }\n\n .day {\n aspect-ratio: 1;\n cursor: pointer;\n position: relative; // For focus outline\n box-sizing: border-box;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .day.in-range {\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n\n &:first-child {\n border-top-left-radius: var(--space-scale-1);\n border-bottom-left-radius: var(--space-scale-1);\n }\n\n &:last-child {\n border-top-right-radius: var(--space-scale-1);\n border-bottom-right-radius: var(--space-scale-1);\n }\n }\n\n .day[aria-disabled='true'] {\n opacity: 0.7;\n background-color: var(--color-surface-300);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .day.start-date:has(+ .in-range):after {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .day.in-range + :is(.day:hover, .day:not(.in-range)):before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .day[aria-selected='true']:not(.in-range),\n .day:hover {\n background: var(--color-primary-400);\n color: var(--color-text-100);\n border-radius: var(--space-scale-1);\n font-weight: var(--font-weight-semibold);\n\n &.in-range {\n &:before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--bg-border-radius, 0);\n }\n\n &:first-child {\n --bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1);\n }\n\n &:last-child {\n --bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0;\n }\n }\n }\n\n .side-panel-wrapper {\n border-right: 1px solid var(--color-border-200, var(--color-surface-300));\n display: flex;\n align-items: start;\n }\n\n .side-panel {\n padding: var(--space-scale-3);\n grid-template-columns: 1fr;\n display: grid;\n gap: var(--space-scale-3);\n\n button {\n font-size: var(--font-size-200);\n text-wrap: nowrap;\n line-height: var(--space-scale-3);\n padding-block: 0;\n padding-inline: 0;\n\n &:hover {\n color: var(--color-primary-400);\n box-shadow: none;\n }\n\n &[aria-selected='true'] {\n color: var(--color-primary-400);\n }\n }\n }\n\n details {\n border-top: 1px solid var(--color-border-200);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n summary {\n font-weight: var(--font-weight-semibold);\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\n\n &::marker {\n content: '';\n }\n\n svg.chevron-down {\n margin-left: var(--space-scale-1);\n transform: rotate(-90deg);\n }\n }\n\n &[open] svg.chevron-down {\n transform: rotate(0deg);\n }\n }\n`;\n"]}
package/dist/esm/src/Styles.js CHANGED
@@ -125,7 +125,7 @@ export const styles = css `
125
125
  }
126
126
 
127
127
  .day.in-range {
128
- background: var(--color-primary-300);
128
+ background: var(--tt-calendar-range-bg, var(--color-primary-300));
129
129
 
130
130
  &:first-child {
131
131
  border-top-left-radius: var(--space-scale-1);
@@ -152,7 +152,7 @@ export const styles = css `
152
152
  left: 0;
153
153
  width: 100%;
154
154
  height: 100%;
155
- background: var(--color-primary-300);
155
+ background: var(--tt-calendar-range-bg, var(--color-primary-300));
156
156
  z-index: -1;
157
157
  border-radius: var(--space-scale-1);
158
158
  border-bottom-right-radius: 0;
@@ -166,7 +166,7 @@ export const styles = css `
166
166
  left: 0;
167
167
  width: 100%;
168
168
  height: 100%;
169
- background: var(--color-primary-300);
169
+ background: var(--tt-calendar-range-bg, var(--color-primary-300));
170
170
  z-index: -1;
171
171
  border-radius: var(--space-scale-1);
172
172
  border-bottom-left-radius: 0;
@@ -188,7 +188,7 @@ export const styles = css `
188
188
  left: 0;
189
189
  width: 100%;
190
190
  height: 100%;
191
- background: var(--color-primary-300);
191
+ background: var(--tt-calendar-range-bg, var(--color-primary-300));
192
192
  z-index: -1;
193
193
  border-radius: var(--bg-border-radius, 0);
194
194
  }
package/dist/esm/src/Styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n border-radius: var(--space-scale-1);\n padding-block: var(--space-scale-1);\n padding-inline: var(--space-scale-2);\n\n &.compact {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &:hover {\n cursor: pointer;\n box-shadow:\n 0px 2px 5px 0px rgba(60, 66, 87, 0.08),\n 0px 1px 1px 0px rgba(0, 0, 0, 0.12);\n }\n\n &:focus {\n outline: 1px solid var(--color-primary-400);\n }\n\n svg {\n display: block;\n }\n\n &.right svg {\n transform: rotate(180deg);\n }\n }\n\n h2 {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-500);\n font-size: var(--font-size-400);\n display: contents;\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 16px 24px;\n }\n\n .calendar-grid {\n text-align: center;\n border-top: var(--color-border-200) 1px solid;\n padding: 0 24px;\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n tbody {\n display: grid;\n row-gap: 4px;\n }\n\n tr {\n display: grid;\n grid-template-columns: repeat(7, 48px);\n }\n\n th {\n color: var(--color-text-400);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n line-height: 20px;\n padding: 16px 0;\n }\n\n td {\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n }\n }\n\n .calendar-footer {\n display: flex;\n flex-direction: column;\n //gap: var(--space-scale-2);\n\n svg {\n vertical-align: middle;\n }\n\n .actions {\n display: flex;\n flex: 1 0 auto;\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n button {\n background-color: var(--color-surface-200);\n border-color: var(--color-primary-400);\n border-width: 1px;\n border-style: solid;\n color: var(--color-primary-400);\n font-weight: var(--font-weight-semibold);\n width: 100%;\n height: 40px;\n }\n }\n }\n\n .day {\n aspect-ratio: 1;\n cursor: pointer;\n position: relative; // For focus outline\n box-sizing: border-box;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .day.in-range {\n background: var(--color-primary-300);\n\n &:first-child {\n border-top-left-radius: var(--space-scale-1);\n border-bottom-left-radius: var(--space-scale-1);\n }\n\n &:last-child {\n border-top-right-radius: var(--space-scale-1);\n border-bottom-right-radius: var(--space-scale-1);\n }\n }\n\n .day[aria-disabled='true'] {\n opacity: 0.7;\n background-color: var(--color-surface-300);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .day.start-date:has(+ .in-range):after {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .day.in-range + :is(.day:hover, .day:not(.in-range)):before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .day[aria-selected='true']:not(.in-range),\n .day:hover {\n background: var(--color-primary-400);\n color: var(--color-text-100);\n border-radius: var(--space-scale-1);\n font-weight: var(--font-weight-semibold);\n\n &.in-range {\n &:before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--bg-border-radius, 0);\n }\n\n &:first-child {\n --bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1);\n }\n\n &:last-child {\n --bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0;\n }\n }\n }\n\n .side-panel-wrapper {\n border-right: 1px solid var(--color-border-200, var(--color-surface-300));\n display: flex;\n align-items: start;\n }\n\n .side-panel {\n padding: var(--space-scale-3);\n grid-template-columns: 1fr;\n display: grid;\n gap: var(--space-scale-3);\n\n button {\n font-size: var(--font-size-200);\n text-wrap: nowrap;\n line-height: var(--space-scale-3);\n padding-block: 0;\n padding-inline: 0;\n\n &:hover {\n color: var(--color-primary-400);\n box-shadow: none;\n }\n\n &[aria-selected='true'] {\n color: var(--color-primary-400);\n }\n }\n }\n\n details {\n border-top: 1px solid var(--color-border-200);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n summary {\n font-weight: var(--font-weight-semibold);\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\n\n &::marker {\n content: '';\n }\n\n svg.chevron-down {\n margin-left: var(--space-scale-1);\n transform: rotate(-90deg);\n }\n }\n\n &[open] svg.chevron-down {\n transform: rotate(0deg);\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n border-radius: var(--space-scale-1);\n padding-block: var(--space-scale-1);\n padding-inline: var(--space-scale-2);\n\n &.compact {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &:hover {\n cursor: pointer;\n box-shadow:\n 0px 2px 5px 0px rgba(60, 66, 87, 0.08),\n 0px 1px 1px 0px rgba(0, 0, 0, 0.12);\n }\n\n &:focus {\n outline: 1px solid var(--color-primary-400);\n }\n\n svg {\n display: block;\n }\n\n &.right svg {\n transform: rotate(180deg);\n }\n }\n\n h2 {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-500);\n font-size: var(--font-size-400);\n display: contents;\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 16px 24px;\n }\n\n .calendar-grid {\n text-align: center;\n border-top: var(--color-border-200) 1px solid;\n padding: 0 24px;\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n tbody {\n display: grid;\n row-gap: 4px;\n }\n\n tr {\n display: grid;\n grid-template-columns: repeat(7, 48px);\n }\n\n th {\n color: var(--color-text-400);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n line-height: 20px;\n padding: 16px 0;\n }\n\n td {\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n }\n }\n\n .calendar-footer {\n display: flex;\n flex-direction: column;\n //gap: var(--space-scale-2);\n\n svg {\n vertical-align: middle;\n }\n\n .actions {\n display: flex;\n flex: 1 0 auto;\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n button {\n background-color: var(--color-surface-200);\n border-color: var(--color-primary-400);\n border-width: 1px;\n border-style: solid;\n color: var(--color-primary-400);\n font-weight: var(--font-weight-semibold);\n width: 100%;\n height: 40px;\n }\n }\n }\n\n .day {\n aspect-ratio: 1;\n cursor: pointer;\n position: relative; // For focus outline\n box-sizing: border-box;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .day.in-range {\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n\n &:first-child {\n border-top-left-radius: var(--space-scale-1);\n border-bottom-left-radius: var(--space-scale-1);\n }\n\n &:last-child {\n border-top-right-radius: var(--space-scale-1);\n border-bottom-right-radius: var(--space-scale-1);\n }\n }\n\n .day[aria-disabled='true'] {\n opacity: 0.7;\n background-color: var(--color-surface-300);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .day.start-date:has(+ .in-range):after {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .day.in-range + :is(.day:hover, .day:not(.in-range)):before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .day[aria-selected='true']:not(.in-range),\n .day:hover {\n background: var(--color-primary-400);\n color: var(--color-text-100);\n border-radius: var(--space-scale-1);\n font-weight: var(--font-weight-semibold);\n\n &.in-range {\n &:before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--bg-border-radius, 0);\n }\n\n &:first-child {\n --bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1);\n }\n\n &:last-child {\n --bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0;\n }\n }\n }\n\n .side-panel-wrapper {\n border-right: 1px solid var(--color-border-200, var(--color-surface-300));\n display: flex;\n align-items: start;\n }\n\n .side-panel {\n padding: var(--space-scale-3);\n grid-template-columns: 1fr;\n display: grid;\n gap: var(--space-scale-3);\n\n button {\n font-size: var(--font-size-200);\n text-wrap: nowrap;\n line-height: var(--space-scale-3);\n padding-block: 0;\n padding-inline: 0;\n\n &:hover {\n color: var(--color-primary-400);\n box-shadow: none;\n }\n\n &[aria-selected='true'] {\n color: var(--color-primary-400);\n }\n }\n }\n\n details {\n border-top: 1px solid var(--color-border-200);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n summary {\n font-weight: var(--font-weight-semibold);\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\n\n &::marker {\n content: '';\n }\n\n svg.chevron-down {\n margin-left: var(--space-scale-1);\n transform: rotate(-90deg);\n }\n }\n\n &[open] svg.chevron-down {\n transform: rotate(0deg);\n }\n }\n`;\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent tt-calendar following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "@triptease",
6
- "version": "6.2.0",
6
+ "version": "6.3.0",
7
7
  "type": "module",
8
8
  "files": [
9
9
  "dist/esm",