@yoobic/yobi 8.3.1-2 → 8.3.1-20

package/dist/cjs/yoo-workflow.cjs.entry.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e1afd31.js');
-require('./index-3de7d090.js');
+const index = require('./index-819e2530.js');
+require('./index-ce31bddc.js');
 const lodash = require('./lodash-72d493b9.js');
 const workflow_interface = require('./workflow.interface-ffda8358.js');
-const commonHelpers = require('./common-helpers-cd16e15e.js');
-const index$3 = require('./index-8198924a.js');
-const index$1 = require('./index-5e0d4a26.js');
+const commonHelpers = require('./common-helpers-a58df3d7.js');
+const index$3 = require('./index-7252f9bf.js');
+const index$1 = require('./index-a4837d82.js');
 const index$2 = require('./index-9c56868f.js');
-const overlays = require('./overlays-69c47931.js');
-require('./index-ab0f1725.js');
+const overlays = require('./overlays-24592dac.js');
+require('./index-50ff0b20.js');
 require('./annotations-helpers-6cf88388.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-zebra.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e1afd31.js');
-const overlays = require('./overlays-69c47931.js');
-require('./index-3de7d090.js');
+const index = require('./index-819e2530.js');
+const overlays = require('./overlays-24592dac.js');
+require('./index-ce31bddc.js');
 require('./lodash-72d493b9.js');
-require('./index-ab0f1725.js');
+require('./index-50ff0b20.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/cjs/yoo-zoom.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2e1afd31.js');
-require('./index-3de7d090.js');
+const index = require('./index-819e2530.js');
+require('./index-ce31bddc.js');
 const lodash = require('./lodash-72d493b9.js');
 const annotationsHelpers = require('./annotations-helpers-6cf88388.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');
-const overlays = require('./overlays-69c47931.js');
+const overlays = require('./overlays-24592dac.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-ab0f1725.js');
+require('./index-50ff0b20.js');
 
 const zoomCss = ":host{overflow:hidden}:host([disabled]){cursor:default}:host([disabled]) ::slotted(*){-ms-touch-action:auto !important;touch-action:auto !important}";
 

package/dist/collection/collection-manifest.json

@@ -360,7 +360,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.17.1",
+    "version": "2.17.2",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

package/dist/collection/components/1.atoms/progress-bar/progress-bar.css

@@ -258,12 +258,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host([shape=line]) svg:not(.has-markers) line {
   stroke-width: var(--stroke-width-line);
 }
-:host([shape=line]) svg.has-markers {
-  max-height: 10vh;
-}
-:host([shape=line]) svg.has-markers .marker {
-  font-size: var(--spacing-04, 0.25rem);
-  transform: translateX(calc(var(--spacing-08, 0.5rem) * -1));
+:host([shape=line]) svg .marker {
+  font-size: var(--font-size-12, 0.75rem);
+  transform: translate(calc(var(--spacing-16, 1rem) * -1), calc(var(--spacing-16, 1rem) * 1.5));
 }
 :host([shape=line]) span {
   width: 100%;
@@ -315,7 +312,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   top: 50%;
   left: 50%;
   display: flex;
-  align-items: center;
+  align-items: baseline;
   transform: translate(var(--progress-value-tsx), var(--progress-value-tsy));
 }
 

package/dist/collection/components/1.atoms/progress-bar/progress-bar.js

@@ -107,36 +107,11 @@ export class YooProgressBarComponent {
   }
   componentDidLoad() {
     if (this.progressSVGElement) {
-      this.resizeListener = debounce(this.initProgressBar, 750).bind(this);
+      this.resizeListener = debounce(this.setProgress, 750).bind(this);
       window.addEventListener('resize', this.resizeListener);
-      this.initProgressBar();
-    }
-  }
-  initProgressBar() {
-    if (this.progressSVGElement) {
-      this.initSVGPaths();
       this.setProgress();
     }
   }
-  initSVGPaths() {
-    const clampAngle = (value) => Math.min(Math.max(0, value), 360);
-    const { width, height } = this.progressSVGElement.getBoundingClientRect();
-    !this.isShape.line && this.host.shadowRoot.querySelectorAll('path').forEach((pathElement, i) => {
-      if (pathElement) {
-        const finalSize = Math[this.isShape.circle ? 'min' : 'max'](width, height);
-        const yPos = finalSize * .5;
-        this.progressSVGElement.style.width = `${finalSize}px`;
-        this.progressSVGElement.style.height = `${finalSize * (this.isShape.circle ? 1 : .5)}px`;
-        const d = DEFAULT_SHAPES[this.shape]
-          .replace('y', yPos.toString())
-          .replace('d', finalSize.toString())
-          .replace('-d', `-${finalSize.toString()}`)
-          .replace(/r/g, (finalSize / 2).toString());
-        pathElement.setAttribute('d', d);
-        i && this.isShape.circle && (pathElement.setAttribute('transform', `rotate(${clampAngle(this.angle)} ${yPos.toString()} ${yPos.toString()})`));
-      }
-    });
-  }
   setProgress(currentProgress = 0) {
     if (this.progressSVGElement) {
       const getProgressPathLength = (progress = 0) => Math.round(progressBarElement.getTotalLength() * (1 - progress / 100)).toString();
@@ -174,12 +149,8 @@ export class YooProgressBarComponent {
           stroke: this.getProgressColor(0)
         })
       };
-      const progressStarted = () => {
-        this.initSVGPaths();
-      };
       const toAnimation = {
         attr: { x2: `${clampProgress(toProgress)}%` },
-        onStart: progressStarted,
         onUpdate() {
           animateProgressValue(this.progress());
         },
@@ -257,15 +228,28 @@ export class YooProgressBarComponent {
       const { xPercent, text } = marker || {};
       return [
         h("line", { "marker-end": `url(#dot${i})`, y1: "50%", y2: "50%", x2: `${isFinite(xPercent) ? xPercent : 0}%` }),
-        text && h("text", { class: "marker", y: "125%", x: `${isFinite(xPercent) ? xPercent : 0}%` }, text)
+        text && h("text", { class: "marker", y: "0%", x: `${isFinite(xPercent) ? xPercent : 0}%` }, text)
       ];
     });
   }
-  renderProgressBar() {
+  renderPath(index, baseAttributes, size) {
+    const clampAngle = (value) => Math.min(Math.max(0, value), 360);
+    const yPos = (size * .5).toString();
+    return h("path", { ...baseAttributes, d: DEFAULT_SHAPES[this.shape]
+        .replace('y', yPos)
+        .replace('d', `${size}`)
+        .replace('-d', `-${size}`)
+        .replace(/r/g, yPos), ...(index && this.isShape.circle && {
+        transform: `rotate(${clampAngle(this.angle)} ${yPos} ${yPos})`
+      }) });
+  }
+  renderSVG() {
     const getAttr = (type, index) => ({ id: type, x2: `${index ? 0 : 100}%` });
-    return (h("svg", { ...(this.hasMarkers && { viewBox: '0 0 100 10', class: { 'has-markers': this.hasMarkers } }), ref: (el) => (this.progressSVGElement = el) },
+    const { width, height } = this.host.getBoundingClientRect();
+    const size = Math.round(Math[this.isShape.circle && !!(width && height) ? 'min' : 'max'](width, height)) || 100;
+    return (h("svg", { ...(!this.isShape.line && { viewBox: `0 0 ${size} ${size / (this.isShape.circle ? 1 : 2)}` }), ref: (el) => (this.progressSVGElement = el) },
       this.renderMarkersDefinition(),
-      ['trail', 'progress'].map((b, i) => this.isShape.line ? h("line", { y1: "50%", y2: "50%", ...getAttr(b, i) }) : h("path", { ...getAttr(b, i) })),
+      ['trail', 'progress'].map((b, i) => this.isShape.line ? h("line", { y1: "50%", y2: "50%", ...getAttr(b, i) }) : this.renderPath(i, getAttr(b, i), size)),
       this.renderMarkersPlacement()));
   }
   renderProgressValue() {
@@ -273,7 +257,7 @@ export class YooProgressBarComponent {
   }
   render() {
     return (h(Host, { class: { 'no-value': this.hideProgressValue }, ...((!this.hideProgressValue && this.isShape.line) && { y: this.verticalAlign, x: this.horizontalAlign }) },
-      [this.renderProgressBar(), this.renderProgressValue()],
+      [this.renderSVG(), this.renderProgressValue()],
       !this.isShape.line && h("slot", null)));
   }
   static get is() { return "yoo-progress-bar"; }

package/dist/collection/components/1.atoms/range/range.css

@@ -303,7 +303,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host([orientation=horizontal].has-ticks-labels) {
   display: block;
   width: calc(100% - 1.5rem);
-  height: 3rem;
+  min-height: 3rem;
   margin: 0 auto;
 }
 

package/dist/collection/components/2.molecules/action-sheet-controller/action-sheet-controller.js

@@ -12,7 +12,7 @@ export class YooIonActionSheetControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -27,7 +27,8 @@ export class YooIonActionSheetControllerComponent {
     }
   }
   actionSheetWillDismiss(ev) {
-    this.actionSheets.delete(ev.target.overlayId);
+    var _a, _b;
+    this.actionSheets.delete(ev.target.nodeName === 'YOO-ACTION-SHEET' ? ev.target.overlayId : (_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId);
   }
   escapeKeyUp(event) {
     if (event && event.key && event.key.toLowerCase && event.key.toLowerCase() === 'escape') {
@@ -208,11 +209,11 @@ export class YooIonActionSheetControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionActionSheetWillPresent",
       "method": "actionSheetWillPresent",

package/dist/collection/components/2.molecules/alert-controller/alert-controller.js

@@ -12,7 +12,7 @@ export class YooIonAlertControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -27,7 +27,8 @@ export class YooIonAlertControllerComponent {
     }
   }
   alertWillDismiss(ev) {
-    this.alerts.delete(ev.target.overlayId);
+    var _a, _b;
+    this.alerts.delete(ev.target.nodeName === 'YOO-ALERT' ? ev.target.overlayId : (_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId);
   }
   escapeKeyUp(event) {
     if (event && event.key && event.key.toLowerCase && event.key.toLowerCase() === 'escape') {
@@ -182,11 +183,11 @@ export class YooIonAlertControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionAlertWillPresent",
       "method": "alertWillPresent",

package/dist/collection/components/2.molecules/footer/footer.css

@@ -201,7 +201,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* used for logos */
 /* spacing for padding, margin, etc... */
 /* shadow */
-:host, yoo-ion-footer {
+yoo-ion-footer {
   position: relative;
   z-index: 11;
   display: block;

package/dist/collection/components/2.molecules/modal-controller/modal-controller.js

@@ -13,7 +13,7 @@ export class YooIonModalControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find(el => el.nodeName === 'YOO-DEVICE');
     }
@@ -30,7 +30,8 @@ export class YooIonModalControllerComponent {
     }
   }
   modalWillDismiss(ev) {
-    this.modals.delete(ev.target.overlayId);
+    var _a, _b;
+    this.modals.delete(ev.target.nodeName === 'YOO-ION-MODAL' ? ev.target.overlayId : (_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId);
     this.topOverlayID = Math.max(...this.modals.keys(), 0);
   }
   escapeKeyUp(event) {
@@ -220,11 +221,11 @@ export class YooIonModalControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionModalWillPresent",
       "method": "modalWillPresent",

package/dist/collection/components/2.molecules/rating/rating.js

@@ -88,7 +88,7 @@ export class YooRatingComponent {
         disabled: !this.isValidRating || !this.courseId,
         handler: () => this.onSubmitClick()
       }];
-    return (h("yoo-form-footer", { class: "rating", buttons: button }));
+    return (h("yoo-form-footer", { class: "rating relative", buttons: button }));
   }
   renderEditable() {
     return [

package/dist/collection/components/2.molecules/toast-controller/toast-controller.js

@@ -12,7 +12,7 @@ export class YooIonToastControllerComponent {
     const index = this.devices.findIndex(device => device === ev.detail);
     this.devices.splice(index, index + 1);
   }
-  onClick(ev) {
+  onPointerDown(ev) {
     if (this.devices.length) {
       this.device = ev.composedPath().find((el) => el.nodeName === 'YOO-DEVICE');
     }
@@ -27,7 +27,8 @@ export class YooIonToastControllerComponent {
     }
   }
   toastWillDismiss(ev) {
-    this.toasts.delete(ev.target.overlayId);
+    var _a, _b;
+    this.toasts.delete(ev.target.nodeName === 'YOO-TOAST' ? ev.target.overlayId : (_b = (_a = ev.composedPath()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.overlayId);
   }
   escapeKeyUp(event) {
     if (event && event.key && event.key.toLowerCase && event.key.toLowerCase() === 'escape') {
@@ -182,11 +183,11 @@ export class YooIonToastControllerComponent {
       "capture": false,
       "passive": false
     }, {
-      "name": "click",
-      "method": "onClick",
+      "name": "pointerdown",
+      "method": "onPointerDown",
       "target": "body",
       "capture": true,
-      "passive": false
+      "passive": true
     }, {
       "name": "ionToastWillPresent",
       "method": "toastWillPresent",

package/dist/collection/components/3.organisms/header/header.css

@@ -203,7 +203,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 yoo-header {
   position: relative;
-  z-index: 11 !important;
   display: block;
   order: -1;
   width: 100%;
@@ -215,8 +214,8 @@ yoo-header.transparent {
   background: transparent;
 }
 
-yoo-header.secondary {
-  z-index: unset !important;
+yoo-header:not(.secondary) {
+  z-index: 11 !important;
 }
 
 yoo-header.device-min-height {

package/dist/collection/components/3.organisms/video-player/videoplayer-videojs/videoplayer-videojs.js

@@ -353,10 +353,6 @@ export class YooVideoPlayerVideojsComponent {
     }
   }
   onVideoJSError() {
-    var _a;
-    if (this.currentFallbackSrcIndex === 0 && !((_a = this.source) === null || _a === void 0 ? void 0 : _a.includes('q_auto:eco'))) {
-      this.currentFallbackSrcIndex++;
-    }
     if (this.currentFallbackSrcIndex < this.fallbackSrc.length) {
       this.onFixSource(this.fallbackSrc[this.currentFallbackSrcIndex]);
       this.currentFallbackSrcIndex++;

package/dist/collection/components/form/form-audience/form-audience.js

@@ -1,6 +1,8 @@
+import { FormFieldType } from '@shared/interfaces';
 import { getAsyncExtraData, getDefaultAudience, isWeb, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
 import { cloneDeep, isEmpty, isEqual } from 'lodash-es';
+import { filterIsAutocompleteLocal } from '../../../utils/helpers/filters-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers'; //
 export class YooFormAudienceComponent {
   constructor() {
@@ -322,28 +324,42 @@ export class YooFormAudienceComponent {
       h("yoo-form-radio", { flow: "row", options: this.typeValues, readonly: this.forceManualType || this.readonly, size: "medium", value: type, onInputChanged: (ev) => this.onTypeChanged(ev), helpers: this.typeValues.map((option) => translate((this.tooltipPrefix || '') + `AUDIENCETYPE${option.toUpperCase()}HELP`)) }, this.typeValues.map((option, index) => h("div", { class: "radio-container", slot: `${index}` },
         h("span", { class: "radio-title" }, translate('AUDIENCETYPE' + option.toUpperCase()))))));
   }
+  updateFilterFields(model) {
+    var _a;
+    if (!isWeb(this.host)) {
+      (_a = model === null || model === void 0 ? void 0 : model.fields) === null || _a === void 0 ? void 0 : _a.forEach((field) => {
+        if (filterIsAutocompleteLocal(field)) {
+          field.filterType = FormFieldType.filterautocomplete;
+        }
+      });
+    }
+  }
   renderUserRules() {
     var _a, _b, _c;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     const value = ((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.usersQuery) === null || _c === void 0 ? void 0 : _c.sortsAndFilters) || {};
+    const model = this.models[0];
+    this.updateFilterFields(model);
     return (h("div", { class: "rule-container" },
       h("div", { class: "rule-title" },
         h("yoo-icon", { name: "user", color: "dark", size: "small" }),
         translate(type === 'manual' ? 'AUDIENCEFILTERUSER' : 'AUDIENCERULEUSER')),
       h("div", { class: "rule" },
-        h("yoo-form-query-builder", { readonly: this.readonly, size: isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: this.models[0], onInputChanged: (ev) => this.onUserQueryChanged(ev) }))));
+        h("yoo-form-query-builder", { readonly: this.readonly, size: isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: model, onInputChanged: (ev) => this.onUserQueryChanged(ev) }))));
   }
   renderStoreRules() {
     var _a, _b, _c;
     const type = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.type) || 'automatic';
     const value = ((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.storesQuery) === null || _c === void 0 ? void 0 : _c.sortsAndFilters) || {};
+    const model = this.models[1];
+    this.updateFilterFields(model);
     return (h("div", { class: "rule-container" },
       h("div", { class: "rule-title" },
         h("yoo-icon", { name: "pin", color: "dark", size: "small" }),
         translate(type === 'manual' ? 'AUDIENCEFILTERSITE' : 'AUDIENCERULESITE'),
         this.renderHelp('AUDIENCEFILTERSITEHELP')),
       h("div", { class: "rule" },
-        h("yoo-form-query-builder", { readonly: this.readonly, size: isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: this.models[1], onInputChanged: (ev) => this.onStoreQueryChanged(ev) }))));
+        h("yoo-form-query-builder", { readonly: this.readonly, size: isWeb(this.host) ? 'small' : 'medium', hideSorts: true, value: value, model: model, onInputChanged: (ev) => this.onStoreQueryChanged(ev) }))));
   }
   renderRules() {
     var _a;

package/dist/collection/components/form/form-carousel/form-carousel.js

@@ -123,7 +123,7 @@ export class YooFormCarouselComponent {
                     const filename = (item === null || item === void 0 ? void 0 : item._filename) || new Date().getTime().toString();
                     getAsyncExtraData({
                       type: 'email-dialog',
-                      params: { item: (item === null || item === void 0 ? void 0 : item._downloadURL) ? item : { _downloadURL: item, filename } }
+                      params: { item: (item === null || item === void 0 ? void 0 : item._downloadURL) ? item : { _downloadURL: item, filename }, forceMobile: !isWeb(this.host) }
                     });
                   }
                 },

package/dist/collection/components/form/form-categorize-words/form-categorize-words.css

@@ -202,90 +202,100 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
+  display: block;
+  overflow: hidden auto;
 }
 :host yoo-banner {
   height: 0;
 }
 :host yoo-tag {
   position: relative;
-  max-width: calc(100% - 5rem);
+  max-width: 100%;
   height: fit-content;
 }
-:host .drop-title span:first-of-type {
+:host [placement] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-08, 0.5rem);
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--spacing-16, 1rem);
+}
+:host [placement] #counter {
+  padding-left: var(--spacing-04, 0.25rem);
+  font-size: var(--font-size-12, 0.75rem);
+  opacity: 0.5;
+}
+:host [placement] #title[hidden] {
+  opacity: 0;
+}
+:host [placement] #title span:first-of-type {
   font-weight: bold;
 }
+:host [placement] .dropzone {
+  flex-grow: 1;
+}
 :host .dropzone {
-  transition: background-color 500ms ease-in-out;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-content: baseline;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  border-radius: var(--border-radius-08, 0.5rem);
 }
-:host .dropzone.hit {
+:host .dropzone[hit] {
   background-color: var(--light-10, rgba(255, 255, 255, 0.1));
 }
-:host .dropzone > * {
-  margin: calc(var(--spacing-08, 0.5rem) / 2) calc(var(--spacing-08, 0.5rem) / 2);
-}
-
-:host([readonly]) .drop-container:last-of-type {
-  margin-top: var(--spacing-16, 1rem);
-}
-:host([readonly]) .drop-title {
+:host .dropzone yoo-tag {
+  margin-right: var(--spacing-08, 0.5rem);
   margin-bottom: var(--spacing-08, 0.5rem);
 }
+:host .dropzone#zone-tags {
+  height: calc(var(--spacing-64, 4rem) * 2);
+  padding: var(--spacing-08, 0.5rem);
+}
 
-:host(:not([readonly])) h1 {
-  margin: 0 0 var(--spacing-16, 1rem);
-  color: var(--stable, #adadad);
-  font-weight: normal;
-  font-size: var(--font-size-18, 1.125rem);
+:host(:not([readonly])) main::-webkit-scrollbar {
+  display: none;
 }
-:host(:not([readonly])) .drop-container,
-:host(:not([readonly])) .dropzone {
+:host(:not([readonly])) [placement] {
+  min-height: calc(var(--spacing-32, 2rem) * 5);
   border-radius: var(--border-radius-08, 0.5rem);
-  transition: background-color 500ms ease-in-out;
-}
-:host(:not([readonly])) .drop-container {
-  z-index: 1;
-  display: grid;
-  grid-template-rows: 1.75rem 1fr;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 11rem;
-  margin: 0 auto;
-  padding: var(--spacing-16, 1rem);
   box-shadow: var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));
 }
-:host(:not([readonly])) .drop-container:first-of-type {
-  margin-bottom: var(--spacing-04, 0.25rem);
+:host(:not([readonly])) [placement] .dropzone {
+  min-height: calc(var(--spacing-32, 2rem) * 2);
+}
+:host(:not([readonly])) [placement] #title {
+  color: var(--light, #ffffff);
+}
+:host(:not([readonly])) [placement][placement=top] {
   background: var(--warning, #ed6e33);
 }
-:host(:not([readonly])) .drop-container:first-of-type.completed {
+:host(:not([readonly])) [placement][placement=top].completed {
   background-color: var(--warning-60, rgba(237, 110, 51, 0.6));
 }
-:host(:not([readonly])) .drop-container:last-of-type {
-  margin-top: var(--spacing-04, 0.25rem);
+:host(:not([readonly])) [placement][placement=bottom] {
   background: var(--app-color, #5a30f4);
 }
-:host(:not([readonly])) .drop-container:last-of-type.completed {
+:host(:not([readonly])) [placement][placement=bottom].completed {
   background-color: var(--app-color-60, rgba(90, 48, 244, 0.6));
 }
-:host(:not([readonly])) .drop-container .drop-title {
-  color: var(--light, #ffffff);
-}
-:host(:not([readonly])) section.tags #zone-tags {
-  height: 7.5rem;
-  margin: 0 var(--spacing-08, 0.5rem);
+
+:host([readonly]) .drop-container:last-of-type {
+  margin-top: var(--spacing-16, 1rem);
 }
-:host(:not([readonly])) .words-counter {
-  padding-left: var(--spacing-04, 0.25rem);
-  font-size: var(--font-size-12, 0.75rem);
-  opacity: 0.5;
+:host([readonly]) #title {
+  margin-bottom: var(--spacing-08, 0.5rem);
 }
 
-:host([animated]) .drop-title {
-  transition: opacity 750ms ease-in-out;
+:host([animated]) .dropzone,
+:host([animated]) section {
+  transition: background-color 500ms ease-in-out, height 750ms ease-in-out;
 }
-:host([animated]) .drop-title[hidden] {
-  opacity: 0;
+:host([animated]) #title {
+  transition: opacity 750ms ease-in-out;
 }