@yoobic/yobi 8.3.0-3 → 8.3.0-32

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

@@ -1,8 +1,8 @@
-import { copyToClipboard, debounce as _debounce, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
+import { copyToClipboard, debounce as _debounce, enableKeyboardResize, extractTextFromStringHTML, isAndroid, isAnimationsDisabled, isHTML, isIOS, isNativeMobile, isNullOrUndefined, isSafari, isWeb, resizeObserve, showToast, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { isFunction, isNumber, isString } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
-import { convertValueForInputType, initNumber, onIconClicked, onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput, validate } from '../../../utils/helpers/form-input-helpers';
+import { clearFocused, convertValueForInputType, initNumber, onIconClicked, onInputBlurred, onInputClear, onInputFocused, setValidator, setValueAndValidateInput, validate } from '../../../utils/helpers/form-input-helpers';
 import { getRenderer } from '../../grid/ag-grid/grid-renderers';
 export class YooFormInputComponent {
   constructor() {
@@ -20,6 +20,7 @@ export class YooFormInputComponent {
     this.initialCheckboxParams = null;
     this.fireInputChangeEvent = false;
     this.allowDecimals = false;
+    this.format = 'input';
     this.checkboxParams = null;
     this.hostWidth = 0;
     this.onWheel = () => {
@@ -160,11 +161,19 @@ export class YooFormInputComponent {
       this.inputElement.value = this.value;
       this.updateRemainingCharacters();
     }
+    if (isNativeMobile() && isIOS()) {
+      enableKeyboardResize();
+    }
     if (this.focusOnRendered) {
       this.setFocus();
     }
     this.animateContent();
   }
+  componentDidUpdate() {
+    if (this.format === 'contenteditable' && !this.modified) {
+      this.contentEditableElement.textContent = `${this.value || ''}`;
+    }
+  }
   onInitInput() {
     var _a, _b;
     setValidator(this);
@@ -270,7 +279,7 @@ export class YooFormInputComponent {
   }
   setLocalValue(updateTranslation) {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && isString(this.value) && updateTranslation) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.value && isString(this.value) && updateTranslation) {
       isHTML(this.value) && (this.value = extractTextFromStringHTML(this.value));
       const key = this.value.replace(/%/g, '');
       const translationIndex = this.translations.findIndex((tran) => { var _a; return tran.key === key || tran.key === ((_a = this.translationKey) === null || _a === void 0 ? void 0 : _a.replace(/%/g, '')); });
@@ -398,7 +407,7 @@ export class YooFormInputComponent {
         } },
         this.finalIconPrefix && this.hasIconPrefix && (h("div", { class: "icon-prefix", onClick: () => (this.inputElement && this.inputElement.focus ? this.inputElement.focus() : null) },
           h("yoo-icon", { name: this.finalIconPrefix, size: this.getIconSize() }))),
-        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
+        h("input", { type: this.inputType, name: this.name, tabindex: this.inputTabIndex, ref: (el) => (this.inputElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, autoComplete: ['username', 'password'].includes(this.name) ? this.name : undefined, inputmode: this.inputmode ? this.inputmode : undefined, placeholder: !this.placeholdertolabel && this.internalPlaceholder ? translate(this.internalPlaceholder) : '', required: this.required, onBlur: (ev) => onInputBlurred(ev, this, '.input-container', this.type, this.uiValidation), onChange: (ev) => this.fireInputChangeEvent ? this.onInputChanged(ev) : ev === null || ev === void 0 ? void 0 : ev.stopPropagation(), onInput: (ev) => this.onInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onKeyPress(ev), onWheel: this.onWheel, min: this.min, max: this.max, pattern: this.getPattern(), step: this.step, class: {
             last: !((hasValue && this.clearable) || (this.type === 'password' && this.showPasswordToggle) || (this.uiValidation.invalid && this.validity === false)),
             'hide-value': (_a = this.checkboxParams) === null || _a === void 0 ? void 0 : _a.value,
             'has-icon-prefix': this.finalIconPrefix && this.hasIconPrefix
@@ -423,6 +432,65 @@ export class YooFormInputComponent {
       this.uiValidation.invalid && h("div", { class: { 'invalid-message': true, invalid: (this.validity === false && !this.inputReloaded) } }, translate(invalidMessageKey))
     ];
   }
+  contentEditableInputBlurred(ev) {
+    var _a;
+    this.inputBlurred.emit(ev);
+    clearFocused(this, '.input-container');
+    if (!((_a = this.contentEditableActionsElement) === null || _a === void 0 ? void 0 : _a.offsetParent)) {
+      this.cancel();
+    }
+  }
+  onContentEditableInputChanged(ev, skipChecks = true) {
+    var _a, _b;
+    if (this.fireInputChangeEvent || skipChecks) {
+      this.localValue = (_b = (_a = this.contentEditableElement) === null || _a === void 0 ? void 0 : _a.firstChild) === null || _b === void 0 ? void 0 : _b.textContent;
+      this.modified = this.value !== this.localValue;
+    }
+    else {
+      ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+    }
+  }
+  onContentEditableKeyPress(ev) {
+    this.onKeyPress(ev);
+    if (ev.key === 'Enter') {
+      this.confirm();
+      this.contentEditableElement.blur();
+    }
+    else if (ev.key === 'Escape') {
+      this.cancel();
+      this.contentEditableElement.blur();
+    }
+  }
+  cancel() {
+    this.setLocalValue();
+    this.modified = false;
+  }
+  confirm() {
+    this.value = this.localValue;
+    this.modified = false;
+  }
+  renderContentEditable() {
+    return (h("div", { class: {
+        'input-container': true,
+        placeholderlabel: this.placeholdertolabel,
+        'has-value': !!this.value || !!this.localValue
+      } },
+      h("div", { class: "placeholder" },
+        translate(this.internalPlaceholder),
+        h("yoo-icon", { name: "pen", size: this.getIconSize(), color: "stable" })),
+      h("div", { contenteditable: !this.disabled, tabindex: this.inputTabIndex, ref: (el) => (this.contentEditableElement = el), autocapitalize: this.autocapitalize, autocorrect: this.autocorrect, spellcheck: "false", onBlur: (ev) => this.contentEditableInputBlurred(ev), onChange: (ev) => this.onContentEditableInputChanged(ev, false), onInput: (ev) => this.onContentEditableInputChanged(ev), onFocus: () => onInputFocused(this, '.input-container'), onKeyDown: (ev) => this.onContentEditableKeyPress(ev), onWheel: () => this.onWheel() }, this.value),
+      this.renderActions()));
+  }
+  renderActions() {
+    return (h("section", { class: "actions", ref: (el) => (this.contentEditableActionsElement = el) },
+      this.renderAction('cancel'),
+      this.renderAction('confirm')));
+  }
+  renderAction(type) {
+    return h("div", { class: type },
+      h("yoo-button", { disabled: !this.modified || this.disabled, size: this.size, customColor: "stable-alt", onClick: () => this[type]() },
+        h("yoo-icon", { size: this.getIconSize(), name: type === 'cancel' ? 'close' : 'tick' })));
+  }
   render() {
     return (h(Host, { class: {
         'swiper-no-swiping': true,
@@ -431,7 +499,7 @@ export class YooFormInputComponent {
         'has-checkbox': this.checkboxParams || this.tooltip,
         'no-animation': isAnimationsDisabled(),
         ...getAppContext(this.host)
-      } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
+      } }, this.format === 'contenteditable' ? this.renderContentEditable() : this.readonly ? this.renderReadonly() : this.renderEditable()));
   }
   static get is() { return "yoo-form-input"; }
   static get encapsulation() { return "shadow"; }
@@ -826,8 +894,8 @@ export class YooFormInputComponent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "'email' | 'number' | 'password' | 'text'",
+        "resolved": "\"email\" | \"number\" | \"password\" | \"text\"",
         "references": {}
       },
       "required": false,
@@ -1287,12 +1355,31 @@ export class YooFormInputComponent {
       "attribute": "allow-decimals",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "format": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'input' | 'contenteditable'",
+        "resolved": "\"contenteditable\" | \"input\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "format",
+      "reflect": true,
+      "defaultValue": "'input'"
     }
   }; }
   static get states() { return {
     "inputType": {},
     "remainingCharacters": {},
-    "checkboxParams": {}
+    "checkboxParams": {},
+    "modified": {}
   }; }
   static get events() { return [{
       "method": "validityChanged",

package/dist/collection/components/form/form-input-container/form-input-container.js

@@ -308,7 +308,7 @@ export class YooFormInputContainerComponent {
   renderLabel() {
     var _a, _b, _c;
     const contentClass = ((_a = this.field) === null || _a === void 0 ? void 0 : _a.title) ? 'field-title-name ' : '';
-    return (h("div", { ref: (el) => (this.labelElement = el), class: {
+    return (h("label", { ref: (el) => (this.labelElement = el), class: {
         label: true,
         center: (_c = (_b = this.field) === null || _b === void 0 ? void 0 : _b.extraClass) === null || _c === void 0 ? void 0 : _c.includes('center'),
         readonly: this.readonly,

package/dist/collection/components/form/form-multi-input/form-multi-input.js

@@ -11,9 +11,9 @@
  * https://zpl.io/29KpyAW
  */
 import { FormFieldType } from '@shared/interfaces';
-import { getUUID, isValueATranslationKey, isWeb, translate } from '@shared/utils';
+import { getUUID, isValueATranslationKey, isWeb, MODAL_BASE_ZINDEX, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
-import { isEqual } from 'lodash-es';
+import { isEqual, isString } from 'lodash-es';
 import Sortable from 'sortablejs';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
@@ -531,7 +531,7 @@ export class YooFormMultiInputComponent {
         debounce: TagType === 'yoo-form-input' && 500,
         maxHeight: this.host.classList.contains('image-collection') ? 60 : undefined,
         minHeight: this.host.classList.contains('image-collection') ? 60 : undefined,
-        customZIndex: TagType === 'yoo-form-text-editor' && 20000 - cell.rowIndex,
+        customZIndex: TagType === 'yoo-form-text-editor' && (MODAL_BASE_ZINDEX - cell.rowIndex),
         reloadText: TagType === 'yoo-form-text-editor' && this.deletedRowIndex !== null && cell.rowIndex >= this.deletedRowIndex
       };
       textInput = (h(TagType, { ...props }, (_u = cell.column.inputComponentSlots) === null || _u === void 0 ? void 0 : _u.map(({ tag, props = {}, text }) => {
@@ -628,7 +628,7 @@ export class YooFormMultiInputComponent {
   }
   renderTranslation(text) {
     var _a;
-    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && text && !isValueATranslationKey(text)) {
+    if (((_a = this.translations) === null || _a === void 0 ? void 0 : _a.length) > 0 && text && isString(text) && !isValueATranslationKey(text)) {
       const key = text.replace(/%/g, '');
       const keyRemovedHTML = key === null || key === void 0 ? void 0 : key.replace(/(<([^>]+)>)/ig, '');
       const translationIndex = this.translations.findIndex((tran) => tran.key === key || keyRemovedHTML === tran.key);

package/dist/collection/components/form/form-products-sales/form-products-sales.js

@@ -211,7 +211,7 @@ export class YooFormProductsSalesComponent {
     const displayAllProductsLimitReached = this.value.length > DISPLAY_ALL_PRODUCTS_LIMIT;
     const products = this.value.filter((p) => p.product && (!displayAllProductsLimitReached || this.selectedProducts.includes(p.productRef)));
     return (h("div", { class: "outer-container" },
-      displayAllProductsLimitReached && (h("yoo-form-catalog", { ref: (el) => (this.catalogEl = el), selectorMode: true, onInputChanged: (ev) => this.onProductsSelected(ev), onProductScanned: (ev) => this.onProductScanned(ev), onProductNotFound: () => this.onProductNotFound(), onValidityChanged: (ev) => this.onCatalogValidityChanged(ev), onFetchData: (ev) => this.onCatalogFetchData(ev), onFetchFieldFilterData: (ev) => this.onCatalogFetchFieldFilterData(ev) })),
+      displayAllProductsLimitReached && (h("yoo-form-catalog", { ref: (el) => (this.catalogEl = el), selectorMode: true, keepAutocompleteSelection: true, onInputChanged: (ev) => this.onProductsSelected(ev), onProductScanned: (ev) => this.onProductScanned(ev), onProductNotFound: () => this.onProductNotFound(), onValidityChanged: (ev) => this.onCatalogValidityChanged(ev), onFetchData: (ev) => this.onCatalogFetchData(ev), onFetchFieldFilterData: (ev) => this.onCatalogFetchFieldFilterData(ev) })),
       h("div", { class: "label" }, translate('PRODUCTS')),
       h("div", { class: "total-items" }, translate('ITEMSCOUNT', { n: (products === null || products === void 0 ? void 0 : products.length) || 0 })),
       this.renderProducts(products),

package/dist/collection/components/form/form-progress-indicator/form-progress-indicator.css

@@ -207,7 +207,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .scroll-container {
   position: relative;
-  min-height: 6rem;
+  min-height: 5rem;
   margin: var(--scroll-container-margin);
   padding-bottom: var(--spacing-08, 0.5rem);
   background-color: var(--scroll-container-color);

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

@@ -1,3 +1,4 @@
+import { IRoute } from '@shared/interfaces';
 import { getAsyncExtraData, getCssColor, getCurrentLanguage, getLocaleVariantScormCloudId, getSession, isAndroid, isNativeMobile, isSafari, isWeb, screenOrientationLock, screenOrientationUnlock, showAlert, showModal, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Method, Prop, State, Watch } from '@stencil/core';
 import { get, isNumber } from 'lodash-es';
@@ -14,7 +15,7 @@ export class YooFormScormComponent {
   }
   componentWillLoad() {
     setValidator(this);
-    this.isPreview = window.location.href.indexOf('missionviewer') >= 0 || window.location.href.indexOf('courseeditor') >= 0;
+    this.isPreview = window.location.href.indexOf(IRoute.missionviewer) >= 0 || window.location.href.indexOf(IRoute.courseeditor) >= 0;
     this.fetchLocalizedScorm();
   }
   componentWillUpdate() {

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

@@ -92,7 +92,7 @@ export class YooFormShoppingComponent {
         h("div", { class: "title" },
           translate('TOTAL'),
           ":"),
-        h("div", { class: "price" }, pipes.currency.transform(ret.price, false, this.currencySymbol, true)))),
+        h("div", { class: "price" }, pipes.currency.transform(ret.price, { strictPrecision: false, customSymbol: this.currencySymbol, forceSymbol: true })))),
       this.shoppingView === 'checkout-complete' && h("span", { class: "bottom-info" }, translate('VQEMAILCONFIRM')))) : (h("yoo-empty-state", { type: "shopping" }));
   }
   renderInnerProducts(readonly) {
@@ -117,7 +117,7 @@ export class YooFormShoppingComponent {
                   this.setProduct(product, ev.detail);
                 } })),
               price > 0 && h("div", { class: "price" },
-                pipes.currency.transform(price, false, this.currencySymbol, true),
+                pipes.currency.transform(price, { strictPrecision: false, customSymbol: this.currencySymbol, forceSymbol: true }),
                 " ")))
           ];
         }

package/dist/collection/components/form/form-swipe-cards/form-swipe-cards.css

@@ -300,7 +300,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: relative;
   display: block;
   height: 100%;
-  overflow: hidden;
 }
 :host yoo-banner {
   height: 0;
@@ -310,13 +309,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: opacity 1s ease-in-out;
 }
 :host #instructions #header {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
-  background: var(--dark, #000000);
-  border-radius: var(--border-radius-04, 0.25rem);
+  display: flex;
+  flex-direction: column;
 }
-:host #instructions #header h1 {
-  margin: 0;
-  color: var(--light, #ffffff);
+:host #instructions #header #title {
+  font-weight: bold;
 }
 :host #instructions #categories {
   display: inline-grid;
@@ -325,9 +322,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin: var(--spacing-24, 1.5rem) 0;
   text-align: center;
 }
-:host #instructions #categories yoo-icon {
-  margin: 0 auto;
-}
 :host #instructions #categories .category {
   display: flex;
   flex-direction: column;
@@ -339,12 +333,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-width: 75%;
   margin: auto;
   padding: var(--spacing-16, 1rem) 0;
+  font-weight: bold;
 }
 :host #instructions #categories .category yoo-tag {
   margin: 0 auto;
 }
 :host #instructions yoo-button {
-  padding: var(--spacing-16, 1rem);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  box-sizing: border-box;
 }
 :host #instructions #document {
   background-color: var(--light, #ffffff);
@@ -382,7 +381,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host [direction].card.current.card + .card + .card + .card {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
 }
 :host [direction=left]#game, :host [direction=left].current > .content-category {
   background-color: var(--app-color, #5a30f4) !important;
@@ -440,23 +439,23 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: 85%;
   content: "";
 }
-:host #stack {
+:host #cards {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   width: 65%;
-  max-width: 25rem;
+  max-width: 16rem;
   height: 100%;
   margin-top: var(--spacing-16, 1rem);
 }
-:host #stack.rtl {
+:host #cards.rtl {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%);
 }
-:host #stack .card {
+:host #cards .card {
   position: absolute;
   top: 0;
   right: 0;
@@ -475,20 +474,21 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-05, -0.375rem -0.375rem 0.5rem 0 rgba(0, 0, 0, 0.1));
   transition: transform 0.25s, opacity 0.25s, background-color 0.25s;
+  will-change: transform, opacity;
 }
-:host #stack .card:not([direction]) {
+:host #cards .card:not([direction]) {
   transform: translate(0, -5%) scale(0.85);
   opacity: 0;
 }
-:host #stack .card.current {
+:host #cards .card.current {
   z-index: 3;
 }
-:host #stack .card.current:not(.revealing) {
+:host #cards .card.current:not(.revealing) {
   transform: translate(0%, 9%) scale(1);
   opacity: 1;
   transition-delay: 200ms;
 }
-:host #stack .card.current.revealing {
+:host #cards .card.current.revealing {
   animation: "current" 0.25s ease-in-out;
   animation-delay: 150ms;
   animation-fill-mode: forwards;
@@ -499,15 +499,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.second {
+:host #cards .card.second {
   z-index: 2;
 }
-:host #stack .card.second:not(.revealing) {
+:host #cards .card.second:not(.revealing) {
   transform: translate(0%, 3.5%) scale(0.95);
   opacity: 1;
   transition-delay: 400ms;
 }
-:host #stack .card.second.revealing {
+:host #cards .card.second.revealing {
   animation: "second" 0.25s ease-in-out;
   animation-delay: 300ms;
   animation-fill-mode: forwards;
@@ -518,15 +518,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     opacity: 1;
   }
 }
-:host #stack .card.third {
+:host #cards .card.third {
   z-index: 1;
 }
-:host #stack .card.third:not(.revealing) {
+:host #cards .card.third:not(.revealing) {
   transform: translate(0%, -2%) scale(0.9);
-  opacity: 0.7;
+  opacity: 1;
   transition-delay: 600ms;
 }
-:host #stack .card.third.revealing {
+:host #cards .card.third.revealing {
   animation: "third" 0.25s ease-in-out;
   animation-delay: 450ms;
   animation-fill-mode: forwards;
@@ -534,60 +534,54 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 @keyframes third {
   to {
     transform: translate(0%, -2%) scale(0.9);
-    opacity: 0.7;
+    opacity: 1;
   }
 }
-:host #stack .card:after {
-  display: block;
-  height: 0;
-  padding-top: 133%;
-  content: "";
-}
-:host #stack .card.current .content-image,
-:host #stack .card.current .content-text, :host #stack .card[direction] .content-image,
-:host #stack .card[direction] .content-text {
+:host #cards .card.current .content-image,
+:host #cards .card.current .content-text, :host #cards .card[direction] .content-image,
+:host #cards .card[direction] .content-text {
   opacity: 1 !important;
 }
-:host #stack .card[swiped] {
+:host #cards .card[swiped] {
   animation: fade-out 1s ease-out;
   animation-fill-mode: forwards;
 }
-:host #stack .card[swiped=left] {
+:host #cards .card[swiped=left] {
   transform: translate(-100%, 15%) rotate(-15deg);
 }
-:host #stack .card[swiped=right] {
+:host #cards .card[swiped=right] {
   transform: translate(100%, 15%) rotate(15deg);
 }
-:host #stack .card .content-category,
-:host #stack .card .content-image,
-:host #stack .card .content-text {
+:host #cards .card [class^=content] {
   position: absolute;
   width: 100%;
   height: 100%;
   word-break: break-word;
   opacity: 0;
 }
-:host #stack .card .content-category,
-:host #stack .card .content-text {
+:host #cards .card .content-category,
+:host #cards .card .content-text {
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  padding: var(--spacing-16, 1rem);
 }
-:host #stack .card .content-image {
+:host #cards .card .content-image {
   transition: opacity 0.25s linear;
 }
-:host #stack .card[type=image] yoo-img {
+:host #cards .card[type=image] yoo-img {
   height: 100%;
 }
-:host #stack .card[type=textimage] .content-image {
+:host #cards .card[type=textimage] .content-image {
   top: 0;
   bottom: 3.5rem;
 }
-:host #stack .card[type=textimage] .content-image yoo-img {
+:host #cards .card[type=textimage] .content-image yoo-img {
   height: calc(100% - 3.5rem);
 }
-:host #stack .card[type=textimage] .content-text,
-:host #stack .card[type=textimage] .content-category {
+:host #cards .card[type=textimage] .content-text,
+:host #cards .card[type=textimage] .content-category {
   bottom: 0;
   height: 3.5rem;
 }
@@ -726,6 +720,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   transition: transform 0.8s linear;
 }
 
+:host([live-preview]),
+:host(.mobile) {
+  min-height: 70vh;
+}
+:host([live-preview]) #instructions #header,
+:host(.mobile) #instructions #header {
+  padding: var(--spacing-16, 1rem);
+  background: var(--dark, #000000);
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+:host([live-preview]) #instructions #header #title,
+:host(.mobile) #instructions #header #title {
+  color: var(--light, #ffffff);
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
+}
 :host([live-preview]) #instructions yoo-button,
 :host(.mobile) #instructions yoo-button {
   position: absolute;
@@ -733,20 +743,28 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: stretch;
 }
 
-:host(.web:not([live-preview])) #instructions #header {
-  background: unset;
+:host(.web:not([live-preview])) #instructions {
+  position: relative;
+}
+:host(.web:not([live-preview])) #instructions yoo-icon[name=swipe-explanation] {
+  width: 5rem;
+  height: 5rem;
+  margin: auto;
+  --inner-width: 5rem;
+  --inner-height: 5rem;
 }
 :host(.web:not([live-preview])) #instructions yoo-button {
   position: fixed;
-  right: var(--spacing-16, 1rem);
+  right: var(--spacing-32, 2rem);
   bottom: var(--spacing-16, 1rem);
   z-index: 1;
   transform: translateY(-50%);
 }
 :host(.web:not([live-preview])) #game {
+  height: 60%;
   max-height: 21rem;
 }
-:host(.web:not([live-preview])) #game #stack {
+:host(.web:not([live-preview])) #game #cards {
   top: 5%;
   margin-top: unset;
   transform: translate(-50%, 0);
@@ -761,11 +779,15 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-self: end;
 }
 :host(.web:not([live-preview])) #header {
-  margin-bottom: var(--spacing-24, 1.5rem);
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
   line-height: 1.75;
   text-align: center;
+  background-color: var(--stable-ultralight, #fafafa);
 }
-:host(.web:not([live-preview])) #header h1 {
-  margin: var(--spacing-08, 0.5rem) 0 !important;
+:host(.web:not([live-preview])) #header #title {
   color: var(--dark, #000000) !important;
+  font-weight: bold;
+  font-size: var(--font-size-28, 1.75rem);
 }