@yoobic/yobi 8.2.0-41 → 8.2.0-42

package/dist/cjs/yoo-videoplayer-dailymotion.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
-const videoPlayerHelpers = require('./video-player-helpers-ce8af359.js');
+const videoPlayerHelpers = require('./video-player-helpers-e133133d.js');
 const index$2 = require('./index-dbc0dad6.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');
-require('./common-helpers-4d075db4.js');
+require('./common-helpers-83174231.js');
 
 const videoplayerDailymotionCss = ":host .dm-container,:host .dm-player{width:100%;height:100%;background:var(--dark, #000000)}";
 

package/dist/cjs/yoo-videoplayer-videojs.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c8609d4f.js');
-const index = require('./index-43d2768f.js');
+const index = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
 const _commonjsHelpers = require('./_commonjsHelpers-94df2ea7.js');
 const bufferEs6 = require('./buffer-es6-7c29ccf5.js');
-const localForage = require('./localForage-7e323bf1.js');
-const commonHelpers = require('./common-helpers-4d075db4.js');
-const videoPlayerHelpers = require('./video-player-helpers-ce8af359.js');
+const localForage = require('./localForage-d1a1cb13.js');
+const commonHelpers = require('./common-helpers-83174231.js');
+const videoPlayerHelpers = require('./video-player-helpers-e133133d.js');
 const index$2 = require('./index-dbc0dad6.js');
 require('./index-ea29129a.js');
 

package/dist/cjs/yoo-videoplayer-vimeo.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const videoPlayerHelpers = require('./video-player-helpers-ce8af359.js');
+const videoPlayerHelpers = require('./video-player-helpers-e133133d.js');
 const index$1 = require('./index-dbc0dad6.js');
-require('./index-43d2768f.js');
+require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');
-require('./common-helpers-4d075db4.js');
+require('./common-helpers-83174231.js');
 
 const videoplayerVimeoCss = ":host iframe{width:100%;background:var(--dark, #000000)}";
 

package/dist/cjs/yoo-videoplayer-youtube.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$2 = require('./index-43d2768f.js');
-const videoPlayerHelpers = require('./video-player-helpers-ce8af359.js');
+const index$2 = require('./index-6fb682f1.js');
+const videoPlayerHelpers = require('./video-player-helpers-e133133d.js');
 const index$1 = require('./index-dbc0dad6.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');
-require('./common-helpers-4d075db4.js');
+require('./common-helpers-83174231.js');
 
 const videoplayerYoutubeCss = ":host{width:100%}:host .yt-container,:host .yt-player{width:100%;height:100%}:host .yt-container.error{pointer-events:none}:host(.played){height:90%}";
 

package/dist/cjs/yoo-virtual-item.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-virtual-scroll.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-4d075db4.js');
+const commonHelpers = require('./common-helpers-83174231.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');
 

package/dist/cjs/yoo-waitlist-location-result.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-waitlist-location-start.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-web-menu.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
-const commonHelpers = require('./common-helpers-4d075db4.js');
+const index$1 = require('./index-6fb682f1.js');
+const commonHelpers = require('./common-helpers-83174231.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-welcome-banner.cjs.entry.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
-const commonHelpers = require('./common-helpers-4d075db4.js');
+const index$1 = require('./index-6fb682f1.js');
+const commonHelpers = require('./common-helpers-83174231.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-widget-chart.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-widget-small-size.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-widget-tab.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

package/dist/cjs/yoo-widget-tile.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
 const workflow_interface = require('./workflow.interface-ffda8358.js');
-const commonHelpers = require('./common-helpers-4d075db4.js');
+const commonHelpers = require('./common-helpers-83174231.js');
 const index$4 = require('./index-1016fbe6.js');
-const index$2 = require('./index-fb684c39.js');
+const index$2 = require('./index-50b1d74d.js');
 const index$3 = require('./index-9c56868f.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-c8609d4f.js');
-const index = require('./index-43d2768f.js');
+const index = require('./index-6fb682f1.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./index-ea29129a.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-43d2768f.js');
+const index$1 = require('./index-6fb682f1.js');
 const lodash = require('./lodash-597bda6d.js');
 const annotationsHelpers = require('./annotations-helpers-45b1c2e4.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');

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

@@ -201,12 +201,13 @@ 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 {
+  overflow: hidden;
+}
 :host .breadcrumb {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.375rem 0rem;
-  padding-left: 0;
   font-size: var(--font-size-16, 1rem);
   line-height: 2;
 }
@@ -221,10 +222,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   text-decoration: underline;
   cursor: pointer;
 }
+:host .breadcrumb .breadcrumb-item:last-of-type {
+  overflow: hidden;
+}
+:host .breadcrumb .breadcrumb-item:last-of-type > * {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 :host .breadcrumb .breadcrumb-item.active {
   color: var(--dark, #000000);
 }
 :host .breadcrumb .separator {
-  padding: 0 0.25rem;
+  padding: 0 var(--spacing-08, 0.5rem);
   color: var(--text-color, #807f83);
 }

package/dist/collection/components/1.atoms/breadcrumbs/breadcrumbs.js

@@ -1,8 +1,3 @@
-/**
- * @name: yoo-breadcrumbs
- * @author: Augustin Abele
- * Zeplin Link: zpl:zpl://screen?pid=5b3389c17e5fb54c63704827&sid=5d1a0350db0aef274d9de2e4
- */
 import { isNullOrUndefined, isWeb, translate, translateMulti } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Method, Prop } from '@stencil/core';
 import { compact, isString } from 'lodash-es';
@@ -10,37 +5,22 @@ export class YooBreadcrumbsComponent {
   constructor() {
     /**
      * Set the separator between each items
-     * @property {separator}
-     * @type string
-     * @default '/'
      */
     this.separator = '/';
     /**
      * Set the maximum number of item to display
-     * @property {maxVisibleItems}
-     * @type number
-     * @default 3
      */
     this.maxVisibleItems = 3;
     /**
      * Set to true to show the home icon
-     * @property {showHome}
-     * @type boolean
-     * @default false
      */
     this.showHome = false;
     /**
      * Set to false to display long texts
-     * @property {truncate}
-     * @type boolean
-     * @default true
      */
     this.truncate = true;
     /**
      * Set the path where the current file/folder is located
-     * @property {items}
-     * @type IEntityWithName
-     * @default []
      */
     this.items = [];
   }
@@ -104,10 +84,7 @@ export class YooBreadcrumbsComponent {
       contentButtons.push(itemButton);
     });
     // add active class to the last item
-    const itemClassList = {
-      'breadcrumb-item': true,
-      active: this.isLastItem(index)
-    };
+    const itemClassList = { 'breadcrumb-item': true, active: this.isLastItem(index) };
     return isItemVisible
       ? [
         h("div", { class: itemClassList, onClick: this.selectItem.bind(this, item, index) }, this.truncate && itemText.length > this.maxLengthItems ? (h("yoo-tooltip", { hoverable: isWeb(this.host), placement: "bottom", content: itemText },
@@ -144,16 +121,7 @@ export class YooBreadcrumbsComponent {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "property",
-            "text": "{separator}"
-          }, {
-            "name": "type",
-            "text": "string"
-          }, {
-            "name": "default",
-            "text": "'/'"
-          }],
+        "tags": [],
         "text": "Set the separator between each items"
       },
       "attribute": "separator",
@@ -171,16 +139,7 @@ export class YooBreadcrumbsComponent {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "property",
-            "text": "{maxVisibleItems}"
-          }, {
-            "name": "type",
-            "text": "number"
-          }, {
-            "name": "default",
-            "text": "3"
-          }],
+        "tags": [],
         "text": "Set the maximum number of item to display"
       },
       "attribute": "max-visible-items",
@@ -198,16 +157,7 @@ export class YooBreadcrumbsComponent {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "property",
-            "text": "{maxVisibleItems}"
-          }, {
-            "name": "type",
-            "text": "number"
-          }, {
-            "name": "default",
-            "text": "20"
-          }],
+        "tags": [],
         "text": "Set the maximum length (number of item characters) to display"
       },
       "attribute": "max-length-items",
@@ -224,16 +174,7 @@ export class YooBreadcrumbsComponent {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "property",
-            "text": "{showHome}"
-          }, {
-            "name": "type",
-            "text": "boolean"
-          }, {
-            "name": "default",
-            "text": "false"
-          }],
+        "tags": [],
         "text": "Set to true to show the home icon"
       },
       "attribute": "show-home",
@@ -251,13 +192,7 @@ export class YooBreadcrumbsComponent {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "property",
-            "text": "{homeName}"
-          }, {
-            "name": "type",
-            "text": "string"
-          }],
+        "tags": [],
         "text": "Home name to use instead of the home icon"
       },
       "attribute": "home-name",
@@ -274,16 +209,7 @@ export class YooBreadcrumbsComponent {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "property",
-            "text": "{truncate}"
-          }, {
-            "name": "type",
-            "text": "boolean"
-          }, {
-            "name": "default",
-            "text": "true"
-          }],
+        "tags": [],
         "text": "Set to false to display long texts"
       },
       "attribute": "truncate",
@@ -306,16 +232,7 @@ export class YooBreadcrumbsComponent {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [{
-            "name": "property",
-            "text": "{items}"
-          }, {
-            "name": "type",
-            "text": "IEntityWithName"
-          }, {
-            "name": "default",
-            "text": "[]"
-          }],
+        "tags": [],
         "text": "Set the path where the current file/folder is located"
       },
       "defaultValue": "[]"
@@ -328,13 +245,7 @@ export class YooBreadcrumbsComponent {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "name": "event",
-            "text": "{clicked}"
-          }, {
-            "name": "type",
-            "text": "EventEmitter"
-          }],
+        "tags": [],
         "text": "Emitted when the item breadcrumbs is clicked on. It can be used to redirect user to the item."
       },
       "complexType": {
@@ -354,13 +265,7 @@ export class YooBreadcrumbsComponent {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [{
-            "name": "event",
-            "text": "{clicked}"
-          }, {
-            "name": "type",
-            "text": "EventEmitter"
-          }],
+        "tags": [],
         "text": "Emitted when the home icon is clicked on. It can be used to redirect user the home folder."
       },
       "complexType": {

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

@@ -248,8 +248,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.web.grid.form) .outer-container .top-container {
-  padding: 0;
-  padding-bottom: var(--spacing-08, 0.5rem);
+  padding: 0 0 var(--spacing-08, 0.5rem);
 }
 
 :host(.web.grid) .outer-container .top-container {
@@ -341,17 +340,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 
 :host([grid]) .top-container {
   display: grid;
+  grid-template-columns: var(--top-container-grid-template-columns);
 }
 :host([grid]) .end-container {
   justify-content: flex-end;
 }
 
-:host([grid][center-title]) .top-container {
-  grid-template-columns: repeat(3, 1fr);
+:host([grid][center-title]) {
+  --top-container-grid-template-columns: repeat(3, 1fr);
 }
 
-:host([grid]:not([center-title])) .top-container {
-  grid-template-columns: auto auto 1fr;
+:host([grid]:not([center-title])) {
+  --top-container-grid-template-columns: auto auto 1fr;
 }
 
 :host(.full-width) .top-container .start-container {

package/dist/collection/components/1.atoms/navbar/navbar.js

@@ -26,7 +26,7 @@ export class YooNavbarComponent {
       this.host.classList.add(backgroundClass);
       this.host.classList.remove(this.backgroundClass);
       const navButtons = Array.from(this.host.querySelectorAll('yoo-button'));
-      navButtons.forEach(button => button.color = button.color === this.buttonColor ? buttonColor : button.color);
+      navButtons.forEach((button) => (button.color = button.color === this.buttonColor ? buttonColor : button.color));
       this.backgroundClass = backgroundClass;
       this.buttonColor = buttonColor;
     }

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

@@ -51,7 +51,7 @@ export class YooBannerComponent {
           },
           "YooIconComponent": {
             "location": "import",
-            "path": "src/components/1.atoms/icon/icon"
+            "path": "../../1.atoms/icon/icon"
           }
         }
       },

package/dist/collection/components/3.organisms/mobile-tabbar-more/mobile-tabbar-more.css

@@ -203,76 +203,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* shadow */
 :host {
   display: block;
+  background: var(--light, #ffffff);
 }
-:host .top-container {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  padding: var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-  background: var(--stable-ultralight, #fafafa);
+:host li {
+  break-inside: avoid;
+  padding: var(--spacing-02, 0.125rem) 0 var(--spacing-16, 1rem);
 }
-:host .top-container .input {
-  margin-right: var(--spacing-16, 1rem);
-}
-:host .container {
-  padding: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
-}
-:host .container .section .items,
-:host .top-container .section .items {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 45% 45%;
-  padding-bottom: var(--spacing-16, 1rem);
-  white-space: nowrap;
-  row-gap: var(--spacing-16, 1rem);
+:host ul {
+  margin: 0;
+  padding: var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0;
+  column-count: 2;
   column-gap: var(--spacing-16, 1rem);
-}
-:host .container .section .items.single,
-:host .top-container .section .items.single {
-  grid-template-rows: auto;
-}
-:host .container .section .items.single::after,
-:host .top-container .section .items.single::after {
-  content: "";
-}
-:host .container .section .items.suggested,
-:host .top-container .section .items.suggested {
-  padding-bottom: unset;
-}
-:host .container .section .section-header,
-:host .top-container .section .section-header {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--spacing-16, 1rem) 0;
-}
-:host .container .section .section-header.empty,
-:host .top-container .section .section-header.empty {
-  padding-bottom: 0;
-}
-:host .container .section .section-header .section-title,
-:host .top-container .section .section-header .section-title {
-  font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-14, 0.875rem);
-  text-transform: uppercase;
-}
-:host .container .section .section-header .see-all,
-:host .top-container .section .section-header .see-all {
-  padding-right: var(--spacing-16, 1rem);
-  color: var(--stable, #adadad);
-  font-size: var(--font-size-16, 1rem);
+  list-style: none;
 }
 :host yoo-card-list-color {
-  --title-padding-top: var(--spacing-08, 0.5rem);
-  --title-margin-bottom: 0;
   --card-border-radius: var(--border-radius-04, 0.25rem);
+  --subheading-line-clamp: 3 !important;
+  --title-margin-bottom: 0;
+  --title-padding-top: var(--spacing-08, 0.5rem);
 }
-:host .extended {
-  display: grid;
-  grid-template-rows: repeat(10, 5rem);
-  grid-template-columns: 1fr 1fr;
+:host yoo-form-input {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  box-sizing: border-box;
   padding: var(--spacing-16, 1rem);
-  column-gap: var(--spacing-16, 1rem);
-  row-gap: var(--spacing-16, 1rem);
-  background: var(--stable-ultralight, #fafafa);
-  border-top: solid var(--stable-light, #f1f1f1) var(--border-width-01, 0.0625rem);
+  background: inherit;
+}
+:host yoo-form-input + ul {
+  padding-top: 0;
 }