@triptease/tt-date-range-picker 6.4.0 → 6.4.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.
@@ -6,6 +6,7 @@ exports.styles = (0, lit_1.css) `
6
6
  :host {
7
7
  position: relative;
8
8
  anchor-name: --date-range-picker;
9
+ anchor-scope: --date-range-picker;
9
10
  }
10
11
 
11
12
  :host(:state(disabled)) {
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n position: relative;\n anchor-name: --date-range-picker;\n }\n\n :host(:state(disabled)) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n tt-side-panel::part(side-panel) {\n border-right: 1px solid var(--color-border-200);\n }\n\n tt-side-panel:empty {\n display: none;\n }\n\n [part='container'] {\n padding: var(--space-scale-1) var(--space-scale-1-5);\n gap: var(--space-scale-1);\n }\n\n [part='controls'] {\n display: flex;\n border: 1px solid var(--color-border-200);\n border-radius: var(--border-radius);\n width: fit-content;\n height: var(--date-picker-height, fit-content);\n background-color: var(--color-surface-100);\n font-size: var(--font-size-200);\n color: var(--color-text-400);\n align-items: stretch;\n justify-content: space-around;\n padding: 0;\n\n &[aria-invalid='true'] {\n outline: 2px solid var(--color-alert-strong);\n }\n\n button {\n border: 0;\n padding-inline: var(--space-scale-1);\n background-color: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n border-left: 1px solid var(--color-border-200);\n box-sizing: border-box;\n color: var(--color-text-400);\n }\n\n &:has(+ tt-dialog[open]) .show-calendar svg,\n .show-calendar:hover svg {\n color: var(--color-primary-400);\n }\n }\n\n [part='dialog']::part(dialog) {\n margin-top: var(--space-scale-1);\n flex-direction: row-reverse;\n }\n\n @supports (position-anchor: --date-range-picker) {\n [part='dialog'] {\n position-anchor: --date-range-picker;\n position: fixed;\n z-index: 1;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n position: relative;\n anchor-name: --date-range-picker;\n anchor-scope: --date-range-picker;\n }\n\n :host(:state(disabled)) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n tt-side-panel::part(side-panel) {\n border-right: 1px solid var(--color-border-200);\n }\n\n tt-side-panel:empty {\n display: none;\n }\n\n [part='container'] {\n padding: var(--space-scale-1) var(--space-scale-1-5);\n gap: var(--space-scale-1);\n }\n\n [part='controls'] {\n display: flex;\n border: 1px solid var(--color-border-200);\n border-radius: var(--border-radius);\n width: fit-content;\n height: var(--date-picker-height, fit-content);\n background-color: var(--color-surface-100);\n font-size: var(--font-size-200);\n color: var(--color-text-400);\n align-items: stretch;\n justify-content: space-around;\n padding: 0;\n\n &[aria-invalid='true'] {\n outline: 2px solid var(--color-alert-strong);\n }\n\n button {\n border: 0;\n padding-inline: var(--space-scale-1);\n background-color: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n border-left: 1px solid var(--color-border-200);\n box-sizing: border-box;\n color: var(--color-text-400);\n }\n\n &:has(+ tt-dialog[open]) .show-calendar svg,\n .show-calendar:hover svg {\n color: var(--color-primary-400);\n }\n }\n\n [part='dialog']::part(dialog) {\n margin-top: var(--space-scale-1);\n flex-direction: row-reverse;\n }\n\n @supports (position-anchor: --date-range-picker) {\n [part='dialog'] {\n position-anchor: --date-range-picker;\n position: fixed;\n z-index: 1;\n }\n }\n`;\n"]}
@@ -3,6 +3,7 @@ export const styles = css `
3
3
  :host {
4
4
  position: relative;
5
5
  anchor-name: --date-range-picker;
6
+ anchor-scope: --date-range-picker;
6
7
  }
7
8
 
8
9
  :host(:state(disabled)) {
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n position: relative;\n anchor-name: --date-range-picker;\n }\n\n :host(:state(disabled)) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n tt-side-panel::part(side-panel) {\n border-right: 1px solid var(--color-border-200);\n }\n\n tt-side-panel:empty {\n display: none;\n }\n\n [part='container'] {\n padding: var(--space-scale-1) var(--space-scale-1-5);\n gap: var(--space-scale-1);\n }\n\n [part='controls'] {\n display: flex;\n border: 1px solid var(--color-border-200);\n border-radius: var(--border-radius);\n width: fit-content;\n height: var(--date-picker-height, fit-content);\n background-color: var(--color-surface-100);\n font-size: var(--font-size-200);\n color: var(--color-text-400);\n align-items: stretch;\n justify-content: space-around;\n padding: 0;\n\n &[aria-invalid='true'] {\n outline: 2px solid var(--color-alert-strong);\n }\n\n button {\n border: 0;\n padding-inline: var(--space-scale-1);\n background-color: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n border-left: 1px solid var(--color-border-200);\n box-sizing: border-box;\n color: var(--color-text-400);\n }\n\n &:has(+ tt-dialog[open]) .show-calendar svg,\n .show-calendar:hover svg {\n color: var(--color-primary-400);\n }\n }\n\n [part='dialog']::part(dialog) {\n margin-top: var(--space-scale-1);\n flex-direction: row-reverse;\n }\n\n @supports (position-anchor: --date-range-picker) {\n [part='dialog'] {\n position-anchor: --date-range-picker;\n position: fixed;\n z-index: 1;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n position: relative;\n anchor-name: --date-range-picker;\n anchor-scope: --date-range-picker;\n }\n\n :host(:state(disabled)) {\n pointer-events: none;\n opacity: 0.5;\n }\n\n tt-side-panel::part(side-panel) {\n border-right: 1px solid var(--color-border-200);\n }\n\n tt-side-panel:empty {\n display: none;\n }\n\n [part='container'] {\n padding: var(--space-scale-1) var(--space-scale-1-5);\n gap: var(--space-scale-1);\n }\n\n [part='controls'] {\n display: flex;\n border: 1px solid var(--color-border-200);\n border-radius: var(--border-radius);\n width: fit-content;\n height: var(--date-picker-height, fit-content);\n background-color: var(--color-surface-100);\n font-size: var(--font-size-200);\n color: var(--color-text-400);\n align-items: stretch;\n justify-content: space-around;\n padding: 0;\n\n &[aria-invalid='true'] {\n outline: 2px solid var(--color-alert-strong);\n }\n\n button {\n border: 0;\n padding-inline: var(--space-scale-1);\n background-color: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n border-left: 1px solid var(--color-border-200);\n box-sizing: border-box;\n color: var(--color-text-400);\n }\n\n &:has(+ tt-dialog[open]) .show-calendar svg,\n .show-calendar:hover svg {\n color: var(--color-primary-400);\n }\n }\n\n [part='dialog']::part(dialog) {\n margin-top: var(--space-scale-1);\n flex-direction: row-reverse;\n }\n\n @supports (position-anchor: --date-range-picker) {\n [part='dialog'] {\n position-anchor: --date-range-picker;\n position: fixed;\n z-index: 1;\n }\n }\n`;\n"]}
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent tt-date-range-picker following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "@triptease",
6
- "version": "6.4.0",
6
+ "version": "6.4.1",
7
7
  "type": "module",
8
8
  "files": [
9
9
  "dist/esm",