xv-webcomponents 0.1.44 → 0.1.48

package/dist/collection/components/xv-data-table/xv-data-table.css

@@ -1,4 +1,100 @@
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
 :host {
+  --xv-data-table-min-height: 51.11px;
   --xv-data-table-border-width: 1px;
   --xv-data-table-border-color: var(--border-subtle-01, #D1D1D1);
   --xv-data-table-padding-x: var(--spacing-05, 16px);
@@ -12,7 +108,7 @@
   line-height: 18px;
   letter-spacing: 0.16px;
 }
-@media screen and (max-width: 980px) {
+@media screen and (max-width: 1180px) {
   :host {
     display: block;
     position: relative;
@@ -21,12 +117,13 @@
     scrollbar-color: var(--layer-accent-03) transparent;
   }
   :host ::slotted([slot=title]), :host > table {
-    min-width: 1000px;
+    min-width: 1180px;
   }
 }
 :host .bar {
   position: sticky;
   left: 0;
+  z-index: 10;
 }
 :host .bar_batch {
   position: absolute;
@@ -70,6 +167,19 @@
 :host > caption {
   display: contents;
 }
+:host .loading {
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--xv-data-table-min-height, 51.11px);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+}
 
 :host([block]) {
   width: 100%;

package/dist/collection/components/xv-data-table/xv-data-table.js

@@ -7,7 +7,7 @@ export class XvDataTable {
         this.hover = false;
     }
     render() {
-        return (h(Host, { key: '207324db4e9adea03e0137788fa43f8e9a7eb677', class: "xv-data-table" }, h("caption", { key: 'f5925136510194c00db68b12ef921f6e68b56904' }, h("slot", { key: 'b0b40ae6031c154f75f84587c4fa54f2c86fb011', name: "title" })), h("div", { key: '69121d921fcdc8f1c82e44d7eede6cdcab9e22d4', class: "bar" }, h("div", { key: '6b3db04362ba12983581946f00a66738dee3c2da', class: "bar_batch" }, h("slot", { key: 'caac537802365f29fefb13ac7f2c3060849ac47e', name: "batch" })), h("div", { key: 'b918df57e54dca14d66dd8a14994ceab12ff7ad2', class: "bar_toolbar" }, h("slot", { key: 'a567d9d6258abf3b3ed888e5ecee3817962949f6', name: "toolbar" }))), h("table", { key: 'fd0e463d79710b09db9a6e5655279d6c6591ed2e', role: "table" }, this.columnWidths.length > 0 && (h("colgroup", { key: '05aa18155327d5ecb1c62081dc081efb1f3b8db3' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("slot", { key: 'f95cdd075cad05b53bf8e3cef85eccd908c1191f' }))));
+        return (h(Host, { key: '1a8dba81544ccb3a0881cd2d1573ee4000269d12', class: "xv-data-table" }, h("caption", { key: 'bc5c9defcb9541c7b95cbf4f1a3dbed563ff34aa' }, h("slot", { key: '5deafd8370e965164f4cc242e12e9a14120ec07b', name: "title" })), h("div", { key: '8665b876dcad814e4f758968fc5cc69726c12d74', class: "bar" }, h("div", { key: 'dce555dbfaac502afd04b253e431001beeb9e78e', class: "bar_batch" }, h("slot", { key: '48c79bee9b1e02eaff0e5ec12a5e49a1eea40f84', name: "batch" })), h("div", { key: 'a6b242b9c095221be3e8a93bdd1d911a3683c08d', class: "bar_toolbar" }, h("slot", { key: 'e651e2dc0886251743d2d2de68ad6233420405e5', name: "toolbar" }))), h("table", { key: '411a552a506abf324be71e1ab1e59c7fdcfb5373', role: "table" }, this.columnWidths.length > 0 && (h("colgroup", { key: 'dccdffbda2c37ad60ad066c9fc04a3cf5321ced1' }, this.columnWidths.map((width = 'auto') => h("col", { style: { width } })))), h("thead", { key: '365e8597c85c9c2482041093caa097cef826f0e6' }, h("slot", { key: '5c5efeba7f80a428c24608d6420d0a7705453db4', name: "header" })), h("tbody", { key: '3125e64b5488d9210d671d76223bfc715eae376c' }, h("slot", { key: '926c9406e2fd63e64a5872eb33cbcb9c59af9613' })), h("tfoot", { key: 'a62e2c69d7bf4cfbea88ee3bdae99050eb77c42a' }, h("slot", { key: '9d0a2dedadc5082f5f3aae6a658e755cc34e69b0', name: "footer" }))), !!this.loading && (h("div", { key: '59780110176efb21d4cff6f820826a62ea59404c', class: "loading" }, h("xv-loader-v2", { key: 'e4fe3baec8de82403e3b109f6fe02899388e296a', size: SIZE_VAR.LG })))));
     }
     static get is() { return "xv-data-table"; }
     static get encapsulation() { return "shadow"; }
@@ -68,6 +68,25 @@ export class XvDataTable {
                 "setter": false,
                 "reflect": false
             },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "columnWidths": {
                 "type": "unknown",
                 "attribute": "column-widths",

package/dist/collection/components/xv-data-table/xv-data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-data-table.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/xv-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAOU,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;QAE7B,iBAAY,GAAsB,EAAE,CAAC;QACrC,UAAK,GAAY,KAAK,CAAC;KA4BhC;IA1BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB;gBACE,6DAAM,IAAI,EAAC,OAAO,GAAG,CACb;YACV,4DAAK,KAAK,EAAC,KAAK;gBACd,4DAAK,KAAK,EAAC,WAAW;oBACpB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBACN,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,8DAAO,IAAI,EAAC,OAAO;gBAChB,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,mEACG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,EAAE,EAAE,CAAC,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,CAAC,CAC5D,CACZ;gBAED,8DAAQ,CACF,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-data-table',\n  styleUrl: 'xv-data-table.scss',\n  shadow: true,\n})\nexport class XvDataTable {\n  @Element() el: HTMLElement;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() block?: boolean;\n  @Prop() columnWidths: (string | null)[] = [];\n  @Prop() hover: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"xv-data-table\">\n        <caption>\n          <slot name=\"title\" />\n        </caption>\n        <div class=\"bar\">\n          <div class=\"bar_batch\">\n            <slot name=\"batch\" />\n          </div>\n          <div class=\"bar_toolbar\">\n            <slot name=\"toolbar\" />\n          </div>\n        </div>\n        <table role=\"table\">\n          {this.columnWidths.length > 0 && (\n            <colgroup>\n              {this.columnWidths.map((width = 'auto') => <col style={{ width }} />)}\n            </colgroup>\n          )}\n\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xv-data-table.js","sourceRoot":"","sources":["../../../src/components/xv-data-table/xv-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,WAAW;IALxB;QAOU,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;QAG7B,iBAAY,GAAsB,EAAE,CAAC;QACrC,UAAK,GAAY,KAAK,CAAC;KAmChC;IAjCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe;YACzB;gBACE,6DAAM,IAAI,EAAC,OAAO,GAAG,CACb;YACV,4DAAK,KAAK,EAAC,KAAK;gBACd,4DAAK,KAAK,EAAC,WAAW;oBACpB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;gBACN,4DAAK,KAAK,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF;YACN,8DAAO,IAAI,EAAC,OAAO;gBAChB,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,mEACG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,MAAM,EAAE,EAAE,CAAC,WAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAI,CAAC,CAC5D,CACZ;gBACD;oBAAO,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAAQ;gBACrC;oBAAO,8DAAQ,CAAQ;gBACvB;oBAAO,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAAQ,CAC/B;YAEP,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CACjB,4DAAK,KAAK,EAAC,SAAS;gBAClB,qEAAc,IAAI,EAAE,QAAQ,CAAC,EAAE,GAAI,CAC/B,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-data-table',\n  styleUrl: 'xv-data-table.scss',\n  shadow: true,\n})\nexport class XvDataTable {\n  @Element() el: HTMLElement;\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n  @Prop() block?: boolean;\n  @Prop() loading?: boolean;\n  @Prop() columnWidths: (string | null)[] = [];\n  @Prop() hover: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"xv-data-table\">\n        <caption>\n          <slot name=\"title\" />\n        </caption>\n        <div class=\"bar\">\n          <div class=\"bar_batch\">\n            <slot name=\"batch\" />\n          </div>\n          <div class=\"bar_toolbar\">\n            <slot name=\"toolbar\" />\n          </div>\n        </div>\n        <table role=\"table\">\n          {this.columnWidths.length > 0 && (\n            <colgroup>\n              {this.columnWidths.map((width = 'auto') => <col style={{ width }} />)}\n            </colgroup>\n          )}\n          <thead><slot name=\"header\" /></thead>\n          <tbody><slot /></tbody>\n          <tfoot><slot name=\"footer\" /></tfoot>\n        </table>\n\n        {!!this.loading && (\n          <div class=\"loading\">\n            <xv-loader-v2 size={SIZE_VAR.LG} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-datepicker/xv-datepicker.css

@@ -0,0 +1,401 @@
+@charset "UTF-8";
+.xv-tooltip[role=tooltip] {
+  position: absolute;
+  background-color: var(--background-inverse, #333333);
+  color: var(--text-on-color);
+  padding: var(--spacing-03) var(--spacing-04);
+  border-radius: 3px;
+  font-size: var(--fz-sm);
+  z-index: 999;
+  min-width: min(150px, 90vw);
+  max-width: min(400px, 90vw);
+}
+.xv-tooltip[role=tooltip]::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
+  bottom: -5px;
+  left: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
+  bottom: -5px;
+  right: 12px;
+  border-width: 5px 5px 0 5px;
+  border-color: var(--background-inverse, black) transparent transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
+  top: -5px;
+  left: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
+  top: -5px;
+  right: 12px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent var(--background-inverse, black) transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
+  top: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
+  bottom: 12px;
+  right: -5px;
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent var(--background-inverse, black);
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
+  top: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
+  bottom: 12px;
+  left: -5px;
+  border-width: 5px 5px 5px 0;
+  border-color: transparent var(--background-inverse, black) transparent transparent;
+}
+
+:host {
+  --xv-datepicker-padding: var(--spacing-04);
+  display: inline-block;
+  font-size: var(--fz-md, 14px);
+}
+:host .control {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--spacing-03);
+  text-align: left;
+  letter-spacing: 0.32px;
+}
+:host .control_label {
+  color: var(--text-secondary, #515151);
+  font-size: 0.8571428571em;
+  font-weight: 700;
+}
+:host .control_field {
+  position: relative;
+  display: flex;
+  column-gap: var(--spacing-03);
+}
+:host .control_field input[type=date] {
+  flex: 1 1 0;
+  border-radius: 3px;
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body);
+  font-size: 1em;
+  background-color: transparent;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.32px;
+  padding: var(--xv-datepicker-padding) calc(var(--spacing-05) + 20px) var(--xv-datepicker-padding) var(--spacing-05);
+  border: 1px solid var(--border-subtle-01);
+  box-shadow: none;
+  outline: 2px solid transparent;
+  transition: 0.25s ease-in-out outline-color;
+  appearance: none;
+}
+:host .control_field input[type=date]:empty {
+  color: var(--text-helper, #646464);
+}
+:host .control_field input[type=date]:focus {
+  outline-color: var(--focus);
+}
+:host .control_field input[type=date]::-webkit-calendar-picker-indicator {
+  visibility: hidden;
+  opacity: 0;
+  appearance: none;
+  pointer-events: none;
+  display: none;
+}
+:host .control_field:before {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  top: calc(50% - 8px);
+  right: var(--spacing-04);
+  position: absolute;
+  content: "";
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zm0-13H5V6h14v1z'/%3E%3C/svg%3E");
+}
+@supports not selector(::-webkit-calendar-picker-indicator) {
+  :host .control_field:before {
+    background-image: none;
+  }
+}
+:host .control_field.warning, :host .control_field.error, :host .control_field.loading {
+  position: relative;
+}
+:host .control_field.warning:before, :host .control_field.error:before, :host .control_field.loading:before {
+  background-image: none;
+}
+:host .control_field.warning:before {
+  content: "⚠";
+  color: var(--support-warning);
+}
+:host .control_field.error:before {
+  font-size: 12px;
+  border-radius: 50%;
+  content: "!";
+  color: #fff;
+  background-color: var(--support-error);
+}
+:host .control_field.error input[type=date] {
+  outline-color: var(--support-error);
+  border: 1px solid var(--support-error);
+}
+:host .control_field.loading {
+  /* Animation */
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+:host .control_field.loading:before {
+  content: "";
+  background-color: transparent;
+  border-radius: 50%;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: var(--highlight-01, #CEDE94);
+  animation: spin 0.8s linear infinite;
+}
+:host .control_message {
+  font-size: 0.8571428571em;
+  color: var(--text-primary, #333);
+  margin: 0;
+  padding: 0;
+}
+:host .control_message.error {
+  color: var(--text-error, #D62512);
+}
+:host .popover {
+  opacity: 1;
+  z-index: 12;
+  position: absolute;
+  max-width: fit-content;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  background-color: var(--layer-02, #fff);
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 3px rgba(39, 52, 53, 0.15), 0 1px 3px 0 rgba(39, 52, 53, 0.3);
+  padding: var(--spacing-02) var(--spacing-03);
+  row-gap: var(--spacing-02, 4px);
+}
+:host .popover:not(.open) {
+  opacity: 0;
+  z-index: -1;
+  user-select: none;
+  pointer-events: none;
+}
+:host .popover .header {
+  display: grid;
+  width: 100%;
+  grid-template-columns: auto 1fr auto;
+  column-gap: var(--spacing-03);
+}
+:host .popover .header_date {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: capitalize;
+  color: var(--text-primary, #333);
+  text-align: center;
+  font-family: var(--ff-body);
+  font-size: 1em;
+  font-weight: 700;
+  letter-spacing: 0.16px;
+}
+:host .popover .header_date input[type=number] {
+  display: inline-block;
+  padding: 0.25rem;
+  border: none;
+  margin: 0 0 0 var(--spacing-02);
+  cursor: default;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 600;
+  inline-size: 3.75em;
+  border-radius: 3px;
+}
+:host .popover .header_date input[type=number]:focus {
+  outline: 1px solid var(--focus);
+}
+:host .popover .header_icon {
+  display: inline-block;
+  position: relative;
+  border: solid currentColor;
+  padding: 5px;
+  border-width: 0 2px 2px 0;
+}
+:host .popover .header_icon.prev {
+  transform: translate(4px) rotate(135deg);
+}
+:host .popover .header_icon.next {
+  transform: translate(-4px) rotate(-45deg);
+}
+:host .popover .week {
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(8, 1fr);
+}
+:host .popover .week_day {
+  width: 40px;
+  line-height: 40px;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body);
+  font-size: 1em;
+  letter-spacing: 0.16px;
+  user-select: none;
+}
+:host .popover .week_day:is(button) {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  transition: 250ms ease-in-out background-color, 250ms ease-in-out color;
+}
+:host .popover .week_day:is(button):hover:not(:disabled) {
+  cursor: pointer;
+  background-color: var(--layer-hover-01, #E9E9E9);
+}
+:host .popover .week_day:is(button):focus:not(:disabled) {
+  cursor: pointer;
+  outline: 1px solid var(--focus, #273435);
+  background-blend-mode: multiply;
+}
+:host .popover .week_day:is(button):active:not(:disabled) {
+  background-color: rgba(139, 139, 139, 0.5);
+}
+:host .popover .week_day:is(button).inRange:not(.disabled):not(.active) {
+  background-color: var(--highlight-01, #CEDE94);
+}
+:host .popover .week_day:is(button).active {
+  background-color: var(--button-primary, #273435);
+  color: var(--text-on-color, #fff);
+  z-index: 1;
+}
+:host .popover .week_day:is(button).active:hover {
+  background-color: var(--button-primary-hover, #303F40);
+}
+:host .popover .week_day:is(button).active:active {
+  background-color: var(--button-primary-active, #455D5E);
+}
+:host .popover .week_day.isToday {
+  position: relative;
+  font-weight: bold;
+}
+:host .popover .week_day.isToday:before {
+  content: "";
+  position: absolute;
+  bottom: 2px;
+  left: calc(50% - 2px);
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: currentColor;
+}
+:host .popover .week_day.disabled {
+  color: var(--text-placeholder, #ACACAC);
+}
+:host .popover .week_day__mobile {
+  display: none;
+}
+@media screen and (max-width: 920px) {
+  :host .popover .week_day__mobile {
+    display: inline-block;
+  }
+}
+:host .popover .week_day__desktop {
+  display: inline-block;
+}
+@media screen and (max-width: 920px) {
+  :host .popover .week_day__desktop {
+    display: none;
+  }
+}
+
+:host([block]) {
+  display: block;
+  max-width: unset;
+}
+
+:host(.disabled) .control_message,
+:host(.disabled) .control_field input[type=date],
+:host(.disabled) .control_label {
+  color: var(--text-disabled, rgba(19, 19, 19, 0.25));
+}
+:host(.disabled) .control_field:before {
+  opacity: 0.4;
+}
+
+:host([size=xs]) {
+  --xv-datepicker-padding: var(--spacing-02, 4px);
+  font-size: var(--fz-sm);
+}
+
+:host([size=sm]) {
+  --xv-datepicker-padding: var(--spacing-03, 8px);
+}
+
+:host([size=md]) {
+  --xv-datepicker-padding: var(--spacing-04, 12px);
+}
+
+:host([size=lg]) {
+  --xv-datepicker-padding: var(--spacing-05, 16px);
+}
+
+:host([size=xl]) {
+  --xv-datepicker-padding: var(--spacing-06, 24px);
+  font-size: var(--fz-lg);
+}