@sankhyalabs/ezui 1.1.4 → 1.1.8

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9403fe8f.js');
+
+/*
+ Stencil Client Patch Esm v2.6.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errormessage":[1537],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1537],"align":[1537],"oppened":[1540],"closeesc":[1540],"closeoutsideclick":[1540]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errormessage":[1537],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["form-metadata.cjs",[[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}]]],["ez-button_14.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"metadata":[1040],"slavemode":[4],"validate":[64],"getChanges":[64]}],[1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"showvalue":[516],"options":[1040],"errormessage":[1537],"_inputLabelValue":[32],"_criteria":[32],"_preSelection":[32],"_visibleOptions":[32],"setFocus":[64],"setBlur":[64]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errormessage":[1537]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"qtdHotItems":[514,"qtd-hot-items"],"showvalue":[516],"errormessage":[1537],"loadexecutor":[1],"hotsearchid":[1],"_preSelection":[32],"_visibleOptions":[32],"onInputTeste":[64]}],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-check",{"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsable-box",{"value":[1540],"label":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"place-holder"],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"hide":[64]}],[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"updatePosition":[64],"show":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"onlynumber":[516],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,31 @@
+{
+  "entries": [
+    "./components/ez-search/ez-search.js",
+    "./components/ez-action-chip/ez-action-chip.js",
+    "./components/ez-button/ez-button.js",
+    "./components/ez-calendar/ez-calendar.js",
+    "./components/ez-check/ez-check.js",
+    "./components/ez-collapsable-box/ez-collapsable-box.js",
+    "./components/ez-combo-box/ez-combo-box.js",
+    "./components/ez-date-input/ez-date-input.js",
+    "./components/ez-form/ez-form.js",
+    "./components/ez-form/subcomponents/form-metadata.js",
+    "./components/ez-form/subcomponents/place-holder.js",
+    "./components/ez-icon/ez-icon.js",
+    "./components/ez-label-chip/ez-label-chip.js",
+    "./components/ez-modal/ez-modal.js",
+    "./components/ez-number-input/ez-number-input.js",
+    "./components/ez-popover/ez-popover.js",
+    "./components/ez-tabselector/ez-tabselector.js",
+    "./components/ez-text-area/ez-text-area.js",
+    "./components/ez-text-input/ez-text-input.js",
+    "./components/ez-time-input/ez-time-input.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.6.0",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/ez-action-chip/ez-action-chip.css

@@ -0,0 +1,82 @@
+:host {
+  /* dimensions */
+  --ac--height: 36px;
+  --ac--width: 100%;
+  --ac__icon--width: 48px;
+  /* general */
+  --ac--border-radius: var(--border--radius-large, 24px);
+  --ac--font-size: var(--text--medium, 14px);
+  --ac--font-family: var(--font-pattern, Arial);
+  --ac--font-weight: var(--text-weight--large, 500);
+  --ac--space--medium: var(--space--medium, 6px);
+  --ac__border: 1px solid;
+  --ac__border-color-strokes: var(--color--strokes, #DCE0E8);
+  /* label */
+  --ac__label--title--primary: var(--title--primary, #919191);
+  --ac__label--color-primary: var(--color--primary, #008561);
+  --ac__label-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
+  --ac__label--background-color: #0085610F;
+  --ac__label__default--background-color--hover: var(--color--primary-200, #f2faf8);
+  --ac__label__default--border-color--hover: var(--color--primary-600, #007a5a);
+  --ac__label--text--disabled: var(--text--disable, #AFB6C0);
+  --ac__label--text--primary: var(--text--primary, #626e82);
+  /* message box */
+  --ac__message_box--font-size: var(--text--small, 12px);
+  --ac__message_box--info--color: var(--color--success, #22085d);
+  --ac__message_box--error--color: var(--color--error, #FF0000);
+  /***************
+     host style  
+  ***************/
+  /*public*/
+  width: 100%;
+}
+
+.padding-right--small {
+  padding-right: var(--ac--space--medium);
+}
+
+.padding-left--small {
+  padding-left: var(--ac--space--medium);
+}
+
+.label__container {
+  /*private*/
+  width: fit-content;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+  align-self: center;
+  color: var(--ac__label--title--primary);
+  fill: var(--ac__label--title--primary);
+  border: var(--ac__border);
+  border-radius: var(--ac--border-radius);
+  border-color: var( --ac__border-color-strokes);
+  padding-right: var(--space--large, 12px);
+  padding-left: var(--space--large, 12px);
+  cursor: pointer;
+}
+
+.label__container:hover {
+  border-color:  var(--ac__label__default--border-color--hover);
+  background-color: var(--ac__label__default--background-color--hover);
+}
+
+.label__container--active:hover {
+  border-color: var(--ac__label__active--background-color--hover);
+  background-color: var(--ac__label__active--background-color--hover);
+}
+
+label {
+  /*private*/
+  display: flex;
+  align-items: center;
+  width: calc(100% - var(--ac__icon--width));
+  width: fit-content;
+  font-weight: var(--text-weight--large, 600);
+  cursor: pointer;
+  /*public*/
+  height: var(--ac--height);
+  font-family: var(--ac--font-family);
+  font-size: var(--ac--font-size);
+}

package/dist/collection/components/ez-action-chip/ez-action-chip.js

@@ -0,0 +1,109 @@
+import { Component, Prop, h, Event } from '@stencil/core';
+export class EzLabelChip {
+  constructor() {
+    /**
+     * Deixa o componente disponível ou não para seleção.
+     */
+    this.enabled = true;
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.position = "absolute";
+      content.style.display = "flex";
+      content.style.alignItems = "center";
+      content.style.justifyContent = "center";
+      content.style.overflow = "hidden";
+      content.style.top = "0px";
+      content.style.width = "var(--ac__icon--width)";
+      content.style.height = "var(--ac--height)";
+      if (slot.name == "leftIcon") {
+        content.style.left = "0px";
+        this._labelElem.classList.add('padding-left--small');
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.right = "0px";
+        this._labelElem.classList.add('padding-right--small');
+      }
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  render() {
+    return (h("div", { onClick: () => this.actionClick.emit(), class: "label__container" },
+      h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+      h("label", { ref: (el) => this._labelElem = el }, this.label),
+      h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+  }
+  static get is() { return "ez-action-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-action-chip.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-action-chip.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label \u00E9 o t\u00EDtulo exibido no componente."
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o componente dispon\u00EDvel ou n\u00E3o para sele\u00E7\u00E3o."
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    }
+  }; }
+  static get events() { return [{
+      "method": "actionClick",
+      "name": "actionClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "ClickOptions",
+        "resolved": "ClickOptions",
+        "references": {
+          "ClickOptions": {
+            "location": "import",
+            "path": "puppeteer"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/components/ez-button/ez-button.css

@@ -0,0 +1,94 @@
+:host {
+  
+  /* dimensions */
+  --bt--min-width: 100px;
+  
+  /* dimensions */
+  --bt--height: 42px;
+  --bt__icon--width: 18px;
+  --bt__inline__icon--padding: 12px;
+
+  --bt--padding-top: var(--space--medium, 12px);
+  --bt--padding-bottom: var(--space--medium, 12px);
+  --bt--padding-right: var(--space--large, 24px);
+  --bt--padding-left: var(--space--large, 24px);
+  
+  /* general */
+  --bt--color: var(--text--inverted, #FFF);
+  --bt--font-size: var(--text--medium, 14px);
+  --bt--font-family: var(--font-pattern, Arial);
+  --bt--font-weight: var(--text-weight--large);
+  --bt--background-color: var(--color--primary, #c0c0c0);
+  --bt--border-radius: var(--border--radius-large, 12px);
+  --bt--border: none;
+
+  --bt--hover--background-color: var(--color--primary-700, var(--bt--background-color));
+  
+  --bt--disabled--color: var(--color--disable-primary, var(--bt--color));
+  --bt--disabled--background-color: var(--color--disabled, var(--bt--background-color));
+
+  --bt--focus--border: var(--bt--border);
+  --bt--focus--box-shadow: none;
+}
+
+button {
+  /*private*/
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  cursor: pointer;
+  transition: background-color 0.2s linear;
+  
+  /*public*/
+  min-width: var(--bt--min-width);
+  height: var(--bt--height);
+  font-family: var(--bt--font-family);
+  font-size: var(--bt--font-size);
+  font-weight: var(--bt--font-weight);
+  padding: var(--bt--padding-top) var(--bt--padding-right) var(--bt--padding-bottom) var(--bt--padding-left);
+  border-radius: var(--bt--border-radius);
+  
+  background-color: var(--bt--background-color);
+  color: var(--bt--color);
+  fill: var(--bt--color);
+  border: var(--bt--border);
+}
+
+button:hover{
+  background-color: var(--bt--hover--background-color);
+}
+
+button:focus{
+  /*FIXME: Estranho o botão não dar nenhuma indicação de que recebeu foco*/
+  outline: none;
+  border: var(--bt--focus--border);
+  box-shadow: var(--bt--focus--box-shadow);
+}
+
+button:disabled{
+  background-color: var(--bt--disabled--background-color);
+  color: var(--bt--disabled--color);
+  fill: var(--bt--disabled--color);
+  border: none;
+  cursor: no-drop;
+}
+
+button.icon{
+  width: 42px;
+  min-width: 42px;
+  height: 42px;
+  padding: 0px;
+}
+
+a {
+  /*private*/
+  font-family: var(--bt--font-family);
+  font-size: var(--bt--font-size);
+  font-weight: var(--bt--font-weight);
+  cursor: pointer;  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+

package/dist/collection/components/ez-button/ez-button.js

@@ -0,0 +1,125 @@
+import { Component, h, Prop } from '@stencil/core';
+export class EzButton {
+  constructor() {
+    /**
+     * Deixa o botão disponível ou não para interação com o usuário.
+     */
+    this.enabled = true;
+    /**
+       * Define o modo de uso do botão; opções: icon, link e regular
+       */
+    this.mode = "regular";
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (this.mode == "link") {
+      content.style.display = "inline";
+      if (slot.name == "leftIcon") {
+        content.style.paddingRight = "var(--bt__inline__icon--padding)";
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.paddingLeft = "var(--bt__inline__icon--padding)";
+      }
+    }
+  }
+  render() {
+    if (this.mode == "icon") {
+      return (h("button", { class: "icon", type: "button", disabled: !this.enabled },
+        h("ez-icon", { class: "icon", href: this.image, size: "large", onClick: evt => { if (!this.enabled)
+            evt.stopPropagation(); } })));
+    }
+    else if (this.mode == "link") {
+      return (h("a", null,
+        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+        this.label,
+        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+    else {
+      return (h("button", { type: "button", disabled: !this.enabled },
+        h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
+        this.label,
+        h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+    }
+  }
+  static get is() { return "ez-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-button.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Texto indicativo da a\u00E7\u00E3o do bot\u00E3o."
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Deixa o bot\u00E3o dispon\u00EDvel ou n\u00E3o para intera\u00E7\u00E3o com o usu\u00E1rio."
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o modo de uso do bot\u00E3o; op\u00E7\u00F5es: icon, link e regular"
+      },
+      "attribute": "mode",
+      "reflect": true,
+      "defaultValue": "\"regular\""
+    },
+    "image": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o, est\u00E1 propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo 'icon'"
+      },
+      "attribute": "image",
+      "reflect": true
+    }
+  }; }
+}

package/dist/collection/components/ez-calendar/ez-calendar.css

@@ -0,0 +1,210 @@
+:host {
+  --cal--font-family: var(--font-pattern, Arial);
+  --cal--color: var(--title--primary, #626e82);
+  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535,0 0 1px transparent);
+  
+  /* cal__body */
+  --cal__body--background-color: var(--background--xlight, #FFF);
+  --cal__body--padding: var(--space--medium, 12px);
+  --cal__body--border-radius: var(--border--radius-medium, 12px);
+  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+  
+  /* cal__header */
+  --cal__header-line--stroke: 2px;
+  --cal__header-line--color: var(--color--strokes, #C0C0C0);
+  
+  /* nav buttons */
+  --cal__nav-btn--fill: var(--text--primary, #008561);
+  --cal__nav-btn--over--fill: var(--color--primary, #350404);
+  --cal__nav-btn--width: 10px;
+  --cal__nav-btn--height: 16px;
+  --cal__nav-btn--previous-path: path("M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z");
+  --cal__nav-btn--next-path: path("M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z");
+
+  /* cell */
+  --cal__cell--margin: 0px var(--space--small, 12px);
+  --cal__cell--width: var(--space--large, 24px);
+  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
+  --cal__cell--border-radius: var(--border--radius-small, 6px);
+  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
+  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
+  --cal__cell--selected--background-color: var(--color--primary, #008561);
+  --cal__cell--selected--color: var(--color--inverted, #FFF);
+
+  /* btn today */
+  --cal__btn-today--color: var(--color--primary);
+  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
+  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  position: relative;
+  display: flex;
+  user-select: none;
+}
+
+.calendar{
+  /*private*/
+  z-index: var(--more-visible, 2);
+  display: flex;
+  flex-direction: column;
+  
+  /*public*/
+  background-color: var(--cal__body--background-color);
+  padding: var(--cal__body--padding);
+  border-radius: var(--cal__body--border-radius);
+  box-shadow: var(--cal__body--shadow);
+}
+
+.calendar__header{
+  /*private*/
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--space--medium, 12px);
+  margin: var(--space--small, 6px) var(--space--, 12px);
+  
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
+}
+
+.calendar__btn-next, .calendar__btn-previous{
+  /*private*/
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  padding: 0px;
+}
+
+.calendar__btn-next::after, .calendar__btn-previous::after{
+  /*private*/
+  content: '';
+  display: flex;
+
+  /*public*/
+  background-color: var(--cal__nav-btn--fill);/*parece estranho, mas o bg funciona como fill pq aplicaremos clip-path.*/
+  width: var(--cal__nav-btn--width);
+  height: var(--cal__nav-btn--height);
+}
+
+.calendar__btn-previous::after{
+  /*public*/
+  clip-path: var(--cal__nav-btn--previous-path);
+}
+
+.calendar__btn-next::after{
+  /*public*/
+  clip-path: var(--cal__nav-btn--next-path);
+}
+
+.calendar__btn-next:hover::after, .calendar__btn-previous:hover::after{
+  /*public*/
+  background-color: var(--cal__nav-btn--over--fill);
+}
+
+.calendar__lbl-month{
+  /*private*/
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--medium, 16px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+}
+
+.calendar__line{
+  /*private*/
+  display: flex;
+  padding: 0px;
+  margin: 0px;
+}
+
+.calendar__cell{
+  /*private*/
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+  font-size: var(--text--small, 12px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+  padding: var(--cal__cell--padding);
+  margin: var(--cal__cell--margin);
+  min-width: var(--cal__cell--width);
+  border-radius: var(--cal__cell--border-radius);
+}
+
+
+.calendar__cell:hover{
+  /*public*/
+  background-color: var(--cal__cell--over--background-color);
+}
+
+.calendar__cell--secondary{
+  /*public*/
+  color: var(--cal__cell--outset--color);
+}
+
+.calendar__cell--unselectable:hover{
+  /*private*/
+  background-color: unset;
+  border-radius: unset;
+  cursor: unset;
+}
+
+.calendar__cell--unselectable{
+  /*private*/
+  font-weight: var(--text-weight--large, 600);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  color: var(--cal--color);
+  text-shadow: var(--cal--text-shadow);
+}
+
+.calendar__cell--selected, .calendar__cell--selected:hover{
+  /*public*/
+  background-color: var(--cal__cell--selected--background-color);
+  color: var(--cal__cell--selected--color);
+}
+
+.calendar__body {
+  /*private*/
+  padding: var(--space--small, 6px) 0px;
+}
+
+.calendar__footer{
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar__btn-today{
+  /*private*/
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--small);
+  padding: var(--space--extra-small, 6px);
+
+  /*public*/
+  font-family: var(--cal--font-family);
+  text-shadow: var(--cal--text-shadow);
+  color: var(--cal__btn-today--color);
+  border-radius: var(--cal__btn-today--border-radius);
+}
+
+.calendar__btn-today:hover{
+  /*public*/
+  background-color: var(--cal__btn-today--hover--background-color);
+}