wcs-core 2.6.0 → 2.10.0

package/dist/cjs/wcs.cjs.js

@@ -3,7 +3,7 @@
 const index = require('./index-3cb9d725.js');
 
 /*
- Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('wcs.cjs.js', document.baseURI).href));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["wcs-editable-field.cjs",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-grid.cjs",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper.cjs",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-dropdown.cjs",[[1,"wcs-dropdown",{"mode":[1],"shape":[1],"disabled":[4],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["wcs-galactic-menu.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[1,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[4],"enterkeyhint":[1],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-modal.cjs",[[4,"wcs-modal",{"backdrop":[516],"show":[1540],"showCloseButton":[516,"show-close-button"]},[[4,"keydown","onKeyDown"]]]]],["wcs-textarea.cjs",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-action-bar.cjs",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app.cjs",[[1,"wcs-app"]]],["wcs-badge.cjs",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card.cjs",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body.cjs",[[1,"wcs-card-body"]]],["wcs-com-nav.cjs",[[1,"wcs-com-nav",{"appName":[1,"app-name"]}]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider.cjs",[[1,"wcs-divider"]]],["wcs-dropdown-item.cjs",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]]]],["wcs-field.cjs",[[1,"wcs-field"]]],["wcs-field-content.cjs",[[1,"wcs-field-content"]]],["wcs-field-label.cjs",[[1,"wcs-field-label"]]],["wcs-footer.cjs",[[1,"wcs-footer"]]],["wcs-galactic.cjs",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column.cjs",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1537,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item.cjs",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties.cjs",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property.cjs",[[1,"wcs-list-item-property"]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[1537]}]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[1028]}]]],["wcs-tab.cjs",[[1,"wcs-tab",{"header":[1537],"itemKey":[8,"item-key"]}]]],["wcs-tabs.cjs",[[1,"wcs-tabs",{"align":[1537],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip.cjs",[[1,"wcs-tooltip",{"for":[513],"position":[513]}]]],["wcs-progress-bar.cjs",[[1,"wcs-progress-bar",{"small":[1028],"showLabel":[1028,"show-label"],"value":[1026]}]]],["wcs-radio.cjs",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2.cjs",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"icon":[8],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[1537]}]]],["wcs-button.cjs",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox.cjs",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"]}]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
+  return index.bootstrapLazy([["wcs-editable-field.cjs",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-grid.cjs",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination.cjs",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper.cjs",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-dropdown.cjs",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["wcs-galactic-menu.cjs",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input.cjs",[[1,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-modal.cjs",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1]},[[4,"keydown","onKeyDown"]]]]],["wcs-textarea.cjs",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-action-bar.cjs",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app.cjs",[[1,"wcs-app"]]],["wcs-badge.cjs",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card.cjs",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body.cjs",[[1,"wcs-card-body"]]],["wcs-com-nav.cjs",[[1,"wcs-com-nav",{"appName":[1,"app-name"]}]]],["wcs-com-nav-category.cjs",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu.cjs",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider.cjs",[[1,"wcs-divider"]]],["wcs-dropdown-divider.cjs",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header.cjs",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item.cjs",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]]]],["wcs-field.cjs",[[1,"wcs-field"]]],["wcs-field-content.cjs",[[1,"wcs-field-content"]]],["wcs-field-label.cjs",[[1,"wcs-field-label"]]],["wcs-footer.cjs",[[1,"wcs-footer"]]],["wcs-galactic.cjs",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column.cjs",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell.cjs",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header.cjs",[[1,"wcs-header"]]],["wcs-hint.cjs",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon.cjs",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label.cjs",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item.cjs",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties.cjs",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property.cjs",[[1,"wcs-list-item-property"]]],["wcs-nav.cjs",[[1,"wcs-nav"]]],["wcs-nav-item.cjs",[[4,"wcs-nav-item",{"text":[513],"href":[513]}]]],["wcs-progress-radial.cjs",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group.cjs",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch.cjs",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab.cjs",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs.cjs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip.cjs",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar.cjs",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio.cjs",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2.cjs",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2.cjs",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner.cjs",[[1,"wcs-spinner",{"mode":[513]}]]],["wcs-button.cjs",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox.cjs",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-mat-icon.cjs",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -12,6 +12,8 @@
     "./components/com-nav-submenu/com-nav-submenu.js",
     "./components/divider/divider.js",
     "./components/dropdown/dropdown.js",
+    "./components/dropdown-divider/dropdown-divider.js",
+    "./components/dropdown-header/dropdown-header.js",
     "./components/dropdown-item/dropdown-item.js",
     "./components/editable-field/editable-field.js",
     "./components/error/error.js",
@@ -54,7 +56,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.10.0",
+    "version": "2.13.0",
     "typescriptVersion": "4.3.5"
   },
   "collections": [],

package/dist/collection/components/badge/badge-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/badge/badge.js

@@ -26,9 +26,14 @@ export class Badge {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'normal' | 'rounded'",
+        "original": "BadgeShape",
         "resolved": "\"normal\" | \"rounded\"",
-        "references": {}
+        "references": {
+          "BadgeShape": {
+            "location": "import",
+            "path": "./badge-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -44,9 +49,14 @@ export class Badge {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'initial' | 'lighter'",
+        "original": "BadgeColor",
         "resolved": "\"initial\" | \"lighter\"",
-        "references": {}
+        "references": {
+          "BadgeColor": {
+            "location": "import",
+            "path": "./badge-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/card/card-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/card/card.js

@@ -19,9 +19,14 @@ export class Card {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "'flat' | 'raised'",
+        "original": "CardMode",
         "resolved": "\"flat\" | \"raised\"",
-        "references": {}
+        "references": {
+          "CardMode": {
+            "location": "import",
+            "path": "./card-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/checkbox/checkbox.css

@@ -1,9 +1,14 @@
 :host {
   --wcs-checkbox-border-color: var(--wcs-text-medium);
-  --wcs-checkbox-text-color: var(--wcs-black);
+  --wcs-checkbox-text-color: var(--wcs-text-medium);
   display: flex;
 }
 
+:host([disabled]) {
+  --wcs-checkbox-border-color: var(--wcs-light);
+  --wcs-checkbox-text-color: var(--wcs-text-disabled);
+}
+
 .wcs-checkmark {
   transition: background-color 225ms cubic-bezier(0.17, 0.84, 0.44, 1), color 225ms cubic-bezier(0.17, 0.84, 0.44, 1);
 }
@@ -11,13 +16,16 @@
 /* Customize the label (the wcs-container) */
 .wcs-container {
   position: relative;
-  cursor: pointer;
   font-size: 1rem;
   user-select: none;
   font-weight: 500;
   display: flex;
 }
 
+.wcs-container:not([aria-disabled]) {
+  cursor: pointer;
+}
+
 /* Let the user choose the alignment of the checkbox with the label text */
 :host([label-alignment=top]) .wcs-container {
   align-items: start;
@@ -35,13 +43,11 @@
 .wcs-container input {
   position: absolute;
   opacity: 0;
-  cursor: pointer;
   height: 0;
   width: 0;
 }
 
-.wcs-container:hover,
-input:focus {
+.wcs-container:hover:not([aria-disabled]), input:focus {
   --wcs-checkbox-border-color: var(--wcs-primary);
   --wcs-checkbox-text-color: var(--wcs-primary);
 }
@@ -60,11 +66,16 @@ input:focus {
 }
 
 /* When the checkbox is checked, add a blue background */
-.wcs-container input:checked ~ .wcs-checkmark {
+.wcs-container:not([aria-disabled]) input:checked ~ .wcs-checkmark {
   background-color: var(--wcs-primary);
   --wcs-checkbox-border-color: var(--wcs-primary);
 }
 
+.wcs-container[aria-disabled] input:checked ~ .wcs-checkmark {
+  background-color: var(--wcs-light);
+  --wcs-checkbox-border-color: var(--wcs-light);
+}
+
 /* Create the wcs-checkmark/indicator (hidden when not checked) */
 .wcs-checkmark:after {
   content: "";
@@ -89,7 +100,7 @@ input:focus {
   transform: rotate(45deg);
 }
 
-.wcs-container input:checked ~ .text {
+.wcs-container:not([aria-disabled]) input:checked ~ .text {
   --wcs-checkbox-text-color: var(--wcs-primary);
 }
 

package/dist/collection/components/checkbox/checkbox.js

@@ -15,6 +15,10 @@ export class Checkbox {
      * Specifie the alignment of the checkbox with the label content
      */
     this.labelAlignment = 'center';
+    /**
+     * Specify wether the checkbox is disabled or not.
+     */
+    this.disabled = false;
   }
   handleChange(_event) {
     this.indeterminate = false;
@@ -25,8 +29,8 @@ export class Checkbox {
   }
   render() {
     return (h(Host, null,
-      h("label", { htmlFor: this.name, class: "wcs-container" },
-        h("input", { onChange: (evt) => this.handleChange(evt), checked: this.checked, class: "wcs-checkbox", type: "checkbox", name: this.name, id: this.name }),
+      h("label", { htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled },
+        h("input", { onChange: (evt) => this.handleChange(evt), checked: this.checked, class: "wcs-checkbox", type: "checkbox", name: this.name, disabled: this.disabled, id: this.name }),
         h("span", { class: "wcs-checkmark" }),
         h("span", { class: "text" },
           h("slot", null)))));
@@ -116,6 +120,24 @@ export class Checkbox {
       "attribute": "label-alignment",
       "reflect": true,
       "defaultValue": "'center'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify wether the checkbox is disabled or not."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/dropdown/dropdown-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/dropdown/dropdown.css

@@ -1,21 +1,23 @@
 :host {
-  display: inline-flex;
-  flex-direction: row;
-  position: relative;
-  flex-flow: row-reverse;
+  display: flex;
 }
 
 wcs-button {
   --wcs-button-padding: 8px 10px 8px 16px !important;
 }
 
-:host([shape=small]) .show {
-  top: 48px !important;
+:host([no-arrow]) wcs-button {
+  --wcs-button-padding: 8px 16px 8px 16px !important;
 }
+
 :host([shape=small]) wcs-button {
   --wcs-button-padding: 2px 10px 2px 16px !important;
 }
 
+:host([shape=small][no-arrow]) wcs-button {
+  --wcs-button-padding: 2px 16px 2px 16px !important;
+}
+
 .wcs-button-content-wrapper {
   display: flex;
 }
@@ -24,47 +26,53 @@ wcs-button {
   display: none;
   border: 1px solid #d7d7d7;
   border-radius: var(--wcs-border-radius);
-  white-space: nowrap;
+  background-color: var(--wcs-white);
+  z-index: 9999;
+}
+
+.show {
+  display: block;
+}
+
+.container {
+  border-radius: inherit;
+  overflow: hidden;
+  padding: calc(var(--wcs-padding) / 2) 0;
+  background-color: var(--wcs-white);
 }
 
-.popover::before, .popover::after {
+#arrow,
+#arrow::before {
   position: absolute;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  content: " ";
-  border: solid transparent;
-  z-index: 1000;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  border: solid 1px #d7d7d7;
 }
 
-.popover::before {
-  border-color: rgba(216, 216, 216, 0);
-  border-width: 0.625rem;
-  right: 1.0625rem;
-  margin-left: -0.625rem;
-  bottom: 100%;
-  border-bottom-color: #d7d7d7;
+#arrow {
+  visibility: hidden;
+  z-index: -1;
 }
 
-.popover::after {
-  border-color: rgba(255, 255, 255, 0);
-  border-width: 9px;
-  right: 1.125rem;
-  margin-left: -0.5625rem;
-  bottom: 100%;
-  border-bottom-color: #fff;
+#arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
 }
 
-.show {
-  z-index: 1000;
-  display: block;
-  flex-direction: column;
-  position: absolute;
-  background-color: var(--wcs-white);
-  top: 58px;
+.popover[data-popper-placement^=top] > #arrow {
+  bottom: -5px;
 }
 
-.container {
-  border-radius: inherit;
-  overflow: hidden;
+.popover[data-popper-placement^=bottom] > #arrow {
+  top: -6px;
+}
+
+.popover[data-popper-placement^=left] > #arrow {
+  right: -4px;
+}
+
+.popover[data-popper-placement^=right] > #arrow {
+  left: -6px;
 }

package/dist/collection/components/dropdown/dropdown.js

@@ -1,31 +1,41 @@
-import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';
+import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 import { SelectArrow } from '../select/select-arrow';
-/**
- * Dropdown component.
- *
- * @example ```hmtl
- *   <wcs-dropdown>
- *       <div slot="placeholder"></div>
- *       <div slot="items">
- *           <wcs-dropdown-header></wcs-dropdown-header>
- *           <wcs-divider></wcs-divider>
- *           <wcs-dropdown-item></wcs-dropdown-item>
- *      </div>
- *   </wcs-dropdown>
- * ```
- * @todo Complete keyboard navigation.
- */
+import { createPopper } from '@popperjs/core';
+import { clickTargetIsElementOrChildren } from '../../utils/helpers';
 export class Dropdown {
   constructor() {
+    /** Hides the arrow in the button */
+    this.noArrow = false;
+    /** Dropdown's button mode */
     this.mode = 'stroked';
+    /** Dropdown's button shape */
     this.shape = 'normal';
+    /** Specifies whether the dropdown button is clickable or not */
     this.disabled = false;
+    /** placement of the dropdown's popover */
+    this.placement = 'bottom-end';
     this.expanded = false;
   }
+  placementChange() {
+    this.popper.setOptions(Object.assign(Object.assign({}, this.popper.state.options), { placement: this.placement })).then(_ => this.popper.update());
+  }
   componentDidLoad() {
-    const buttonWrapper = this.el.shadowRoot.querySelector('wcs-button').shadowRoot.querySelector('button');
-    const buttonTextColor = window.getComputedStyle(buttonWrapper).color;
-    this.el.shadowRoot.querySelector('.arrow').style.fill = buttonTextColor;
+    const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');
+    const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');
+    this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;
+    const popoverDiv = this.el.shadowRoot.querySelector('.popover');
+    this.popper = createPopper(wcsButtonElement, popoverDiv, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8]
+          }
+        }
+      ]
+    });
+    this.el.shadowRoot.querySelector('.arrow').style.fill = this.buttonTextColor;
     this.fixForFirefoxBelow63();
   }
   fixForFirefoxBelow63() {
@@ -39,14 +49,11 @@ export class Dropdown {
       });
     }
   }
-  onButtonClick(e) {
-    e.stopPropagation();
+  onButtonClick(_) {
     this.expanded = !this.expanded;
   }
   onWindowClickEvent(event) {
-    // TODO: Extract to utils
-    const clickedOnDropdownOrChildren = event.target instanceof Node
-      && this.el.contains(event.target);
+    const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);
     if (this.expanded && !clickedOnDropdownOrChildren) {
       this.expanded = false;
     }
@@ -54,13 +61,22 @@ export class Dropdown {
   dropdownItemClick(_) {
     this.expanded = false;
   }
+  componentDidRender() {
+    if (this.popper) {
+      this.popper.update();
+    }
+    if (!this.noArrow) {
+      this.el.shadowRoot.querySelector('.arrow').style.fill = this.buttonTextColor;
+    }
+  }
   render() {
     return (h(Host, null,
-      h("wcs-button", { mode: this.mode, shape: this.shape, onClick: ($event) => this.onButtonClick($event) },
+      h("wcs-button", { mode: this.mode, shape: this.shape, disabled: this.disabled, onClick: ($event) => this.onButtonClick($event) },
         h("div", { class: "wcs-button-content-wrapper" },
           h("slot", { name: "placeholder" }),
-          h(SelectArrow, { up: this.expanded }))),
+          this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))),
       h("div", { class: (this.expanded ? 'show ' : '') + 'popover' },
+        h("div", { id: "arrow", "data-popper-arrow": true }),
         h("div", { class: "container" },
           h("slot", { name: "item" })))));
   }
@@ -73,6 +89,24 @@ export class Dropdown {
     "$": ["dropdown.css"]
   }; }
   static get properties() { return {
+    "noArrow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hides the arrow in the button"
+      },
+      "attribute": "no-arrow",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "mode": {
       "type": "string",
       "mutable": false,
@@ -90,7 +124,7 @@ export class Dropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Dropdown's button mode"
       },
       "attribute": "mode",
       "reflect": false,
@@ -113,7 +147,7 @@ export class Dropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Dropdown's button shape"
       },
       "attribute": "shape",
       "reflect": false,
@@ -131,17 +165,44 @@ export class Dropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Specifies whether the dropdown button is clickable or not"
       },
       "attribute": "disabled",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "WcsDropdownPlacement",
+        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "WcsDropdownPlacement": {
+            "location": "import",
+            "path": "./dropdown-interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "placement of the dropdown's popover"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom-end'"
     }
   }; }
   static get states() { return {
     "expanded": {}
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "placement",
+      "methodName": "placementChange"
+    }]; }
   static get listeners() { return [{
       "name": "click",
       "method": "onWindowClickEvent",

package/dist/collection/components/dropdown-divider/dropdown-divider.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+  margin: var(--wcs-base-margin) calc(var(--wcs-base-margin) * 2);
+  overflow: hidden;
+  border-top: 1px solid var(--wcs-text-light);
+  width: calc(100% - var(--wcs-base-margin) * 4);
+}

package/dist/collection/components/dropdown-divider/dropdown-divider.js

@@ -0,0 +1,14 @@
+import { Component, h, Host } from '@stencil/core';
+export class DropdownDivider {
+  render() {
+    return (h(Host, { slot: "item" }));
+  }
+  static get is() { return "wcs-dropdown-divider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dropdown-divider.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dropdown-divider.css"]
+  }; }
+}

package/dist/collection/components/dropdown-header/dropdown-header.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: var(--wcs-text-medium);
+  white-space: nowrap;
+}

package/dist/collection/components/dropdown-header/dropdown-header.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class DropdownHeader {
+  render() {
+    return (h(Host, { slot: "item" },
+      h("slot", null)));
+  }
+  static get is() { return "wcs-dropdown-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dropdown-header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dropdown-header.css"]
+  }; }
+}

package/dist/collection/components/editable-field/editable-field.js

@@ -233,9 +233,14 @@ export class EditableField {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'input' | 'textarea' | 'select'",
+        "original": "EditableFieldType",
         "resolved": "\"input\" | \"select\" | \"textarea\"",
-        "references": {}
+        "references": {
+          "EditableFieldType": {
+            "location": "import",
+            "path": "./editable-field-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/form-field/form-field.css

@@ -1,8 +1,7 @@
 :host {
-  --wcs-form-field-icon-color: var(--wcs-text-medium);
   --wcs-form-field-border-radius-left: var(--wcs-border-radius);
   --wcs-form-field-border-radius-right: var(--wcs-border-radius);
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
 }