From 578a43cae387e2bcce45a9cb39d7a8311362bd44 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Wed, 15 Jan 2025 16:13:00 +0200 Subject: [PATCH] feat: add middle and end slots to horizontal layout --- .../src/vaadin-horizontal-layout-styles.js | 16 ++++ .../src/vaadin-horizontal-layout.js | 72 +++++++++++++++- .../src/vaadin-lit-horizontal-layout.js | 17 +++- .../visual/lumo/horizontal-layout.test.js | 78 ++++++++++++++++++ .../baseline/slots-all-wrap-end.png | Bin 0 -> 1715 bytes .../baseline/slots-all-wrap-middle.png | Bin 0 -> 1721 bytes .../horizontal-layout/baseline/slots-all.png | Bin 0 -> 1601 bytes .../baseline/slots-without-end-wrap.png | Bin 0 -> 1290 bytes .../baseline/slots-without-end.png | Bin 0 -> 1190 bytes .../baseline/slots-without-start-wrap.png | Bin 0 -> 1266 bytes .../baseline/slots-without-start.png | Bin 0 -> 1109 bytes 11 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png create mode 100644 packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-middle.png create mode 100644 packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all.png create mode 100644 packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-end-wrap.png create mode 100644 packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-end.png create mode 100644 packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png create mode 100644 packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start.png diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js index c3401ceab7..010d43cd5c 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js @@ -27,4 +27,20 @@ export const horizontalLayoutStyles = css` :host([theme~='spacing']) { gap: 1em; } + + :host([has-end]:not([has-middle])) ::slotted([last-start-child]) { + margin-inline-end: auto; + } + + ::slotted([first-middle-child]) { + margin-inline-start: auto; + } + + ::slotted([last-middle-child]) { + margin-inline-end: auto; + } + + :host([has-start]:not([has-middle])) ::slotted([first-end-child]) { + margin-inline-start: auto; + } `; diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout.js b/packages/horizontal-layout/src/vaadin-horizontal-layout.js index 8cc85759a8..a385a87c9a 100644 --- a/packages/horizontal-layout/src/vaadin-horizontal-layout.js +++ b/packages/horizontal-layout/src/vaadin-horizontal-layout.js @@ -5,7 +5,9 @@ */ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; +import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js'; import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; +import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js'; import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; import { horizontalLayoutStyles } from './vaadin-horizontal-layout-styles.js'; @@ -39,12 +41,80 @@ registerStyles('vaadin-horizontal-layout', horizontalLayoutStyles, { moduleId: ' */ class HorizontalLayout extends ElementMixin(ThemableMixin(PolymerElement)) { static get template() { - return html``; + return html` + + + + `; } static get is() { return 'vaadin-horizontal-layout'; } + + /** @protected */ + ready() { + super.ready(); + + const startSlot = this.shadowRoot.querySelector('slot:not([name])'); + this.__startSlotObserver = new SlotObserver(startSlot, ({ currentNodes, removedNodes }) => { + if (removedNodes.length) { + const last = removedNodes.find( + (node) => node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('last-start-child'), + ); + if (last) { + last.removeAttribute('last-start-child'); + } + } + + const children = currentNodes.filter((node) => node.nodeType === Node.ELEMENT_NODE); + + if (children.length) { + children[children.length - 1].setAttribute('last-start-child', ''); + } + + const nodes = currentNodes.filter((node) => !isEmptyTextNode(node)); + this.toggleAttribute('has-start', nodes.length > 0); + }); + + const endSlot = this.shadowRoot.querySelector('[name="end"]'); + this.__endSlotObserver = new SlotObserver(endSlot, ({ currentNodes, removedNodes }) => { + if (removedNodes.length) { + const first = removedNodes.find((el) => el.hasAttribute('first-end-child')); + if (first) { + first.removeAttribute('first-end-child'); + } + } + + if (currentNodes.length) { + currentNodes[0].setAttribute('first-end-child', ''); + } + + this.toggleAttribute('has-end', currentNodes.length > 0); + }); + + const middleSlot = this.shadowRoot.querySelector('[name="middle"]'); + this.__middleSlotObserver = new SlotObserver(middleSlot, ({ currentNodes, removedNodes }) => { + if (removedNodes.length) { + const first = removedNodes.find((el) => el.hasAttribute('first-middle-child')); + if (first) { + first.removeAttribute('first-middle-child'); + } + + const last = removedNodes.find((el) => el.hasAttribute('last-middle-child')); + if (last) { + last.removeAttribute('last-middle-child'); + } + } + + if (currentNodes.length) { + currentNodes[0].setAttribute('first-middle-child', ''); + currentNodes[currentNodes.length - 1].setAttribute('last-middle-child', ''); + } + + this.toggleAttribute('has-middle', currentNodes.length > 0); + }); + } } defineCustomElement(HorizontalLayout); diff --git a/packages/horizontal-layout/src/vaadin-lit-horizontal-layout.js b/packages/horizontal-layout/src/vaadin-lit-horizontal-layout.js index 47645c1ff4..3d40776949 100644 --- a/packages/horizontal-layout/src/vaadin-lit-horizontal-layout.js +++ b/packages/horizontal-layout/src/vaadin-lit-horizontal-layout.js @@ -7,6 +7,7 @@ import { html, LitElement } from 'lit'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js'; import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; +import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; import { horizontalLayoutStyles } from './vaadin-horizontal-layout-styles.js'; @@ -30,7 +31,21 @@ class HorizontalLayout extends ThemableMixin(ElementMixin(PolylitMixin(LitElemen /** @protected */ render() { - return html``; + return html` + + + + `; + } + + /** @protected */ + ready() { + super.ready(); + + const endSlot = this.shadowRoot.querySelector('[name="end"]'); + this.__endSlotObserver = new SlotObserver(endSlot, ({ currentNodes }) => { + this.toggleAttribute('has-end-children', currentNodes.length > 0); + }); } } diff --git a/packages/horizontal-layout/test/visual/lumo/horizontal-layout.test.js b/packages/horizontal-layout/test/visual/lumo/horizontal-layout.test.js index 4af9483dce..6c687c2a15 100644 --- a/packages/horizontal-layout/test/visual/lumo/horizontal-layout.test.js +++ b/packages/horizontal-layout/test/visual/lumo/horizontal-layout.test.js @@ -78,4 +78,82 @@ describe('horizontal-layout', () => { element.style.width = '100px'; await visualDiff(div, 'theme-wrap'); }); + + describe('slots', () => { + describe('all', () => { + beforeEach(() => { + element = fixtureSync( + ` + +
Start
+
Start
+
Middle
+
End
+ + `, + ); + }); + + it('default', async () => { + await visualDiff(element, 'slots-all'); + }); + + it('wrap end', async () => { + element.style.width = '350px'; + await visualDiff(element, 'slots-all-wrap-end'); + }); + + it('wrap middle', async () => { + element.style.width = '350px'; + element.firstElementChild.style.width = '200px'; + await visualDiff(element, 'slots-all-wrap-middle'); + }); + }); + + describe('without end', () => { + beforeEach(() => { + element = fixtureSync( + ` + +
Start
+
Start
+
Middle
+ + `, + ); + }); + + it('default', async () => { + await visualDiff(element, 'slots-without-end'); + }); + + it('wrap', async () => { + element.style.width = '250px'; + await visualDiff(element, 'slots-without-end-wrap'); + }); + }); + + describe('without start', () => { + beforeEach(() => { + element = fixtureSync( + ` + +
Middle
+
End
+
End
+ + `, + ); + }); + + it('default', async () => { + await visualDiff(element, 'slots-without-start'); + }); + + it('wrap', async () => { + element.style.width = '250px'; + await visualDiff(element, 'slots-without-start-wrap'); + }); + }); + }); }); diff --git a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-end.png new file mode 100644 index 0000000000000000000000000000000000000000..3e2e7e4df3d45539eb4a529cce83397a11fc8403 GIT binary patch literal 1715 zcmbW2`#;kQ7{|Y3ZWD7o;UF#AiqO%>?c_4Ia@&Mla$7iUWX@p?DGM_ll3PQi7Uq)6 zmfVVRjxD5SGP%@5PSin28N=Dx`4`SFpV#}R=Xt$8pXc*>a(%tslps0~005Lc+))?+ z0EJ1|QeH};KzR&TqM+X}ZcacmSNAgj$i{o198Z&OFAE&qe+<%+TNRt=bCTt*5d%Y^ z_FBFH)#M+lHS**webI^vM=<8u_VU~S=y$c+u21wSIBCK;OKl3tI}B;|wQ)LRTFS^W zft;u3Ji>>#48(BKHq3JmZbVmwcqQ$KP3L>Gi_HoKtrDKn&@%2&ut*lHwE>@-a*DuW^b=ut1GVer18M`^DMyWU3(%(-*KwVboVJaK#oO z^4hL-o#Y^e{tZ+Jbi;||$fBn^wx_EvxAT>UKF1LJ9?nsf4iwt${xPlFf+5uNRn(_} z$LWdtKYY;9$2YBWlwaB$Z-g0714D-N{`N#Iq@m zldZ8Ea%r<+cHcI|a0?`RdTVA0Zz2tpB!8pUa`V!oC{(?rAge#0zkCx(Nx7OBcO+`l zl1Y_I^WMItwWZ$os#D}#8U9S2LwI_59L%VI!lznd8M6NIeLEzQklJdiyTR`(Q<1ZK z6`#E=y#louP|wHWHHn@`EblHd@eC9cUw0_#wA*t}rRe;0Zxe9$JZH7JjE?(LZZnI4 zbCsWv_i3mfidl9Q5un-?Hrka(kNJ-_dx;xTr4`Stk&wwhb)#=zOukKsYwG(rX`4vm z71+j4+Pb`U$;o4UjV|3Ec%|Jg`g&D~sq>T`Z0am@ojLkC`Js;6yK#Xm38}hQc{`x< z1n|sR@IQ3jE_MP z$NY=BBZlAKHIfp--qA3v6vqfAQ!yk4Hvt*0{ymbIL*0J-miZyYsJ@`Qc=`l4w{w2y zS7Q%}DK((JjIuh0>DmM`yFu$iqLJBIx-2NDT`*&ter@+en^)9ss| zq#H83mO>gH102dz^#P`;at<)F8y*6vq|%-|YHo;$Jg5;5+u5_<|{j|y*+953%scP=^lUDUG zN2(NNNf{RJs1r~n(@ zfKoH+6(#wuq#T$e*5GH*XFvaZ7xAdNqqq2%2AjWt+&Zn3885tP(_QVSzw}%5oEM5K z<66QB3^USeD7>QSDByZkUI`U~5X!im7gVMDfR?;O7V|PN#lb?I_Q2Y4h#o{$Z=W^B z8MYSL!6Jr_x3pYHXp|jF?g@o@C&b1d9{>K;=%5*&!T>ZV|R@2B>`27P1p53dftAD^1-lCTkjvQ{9FCh;&{mR!l zxoGnsqpfDU3ok$Rv5iz5RAc~K9Oxl+^`r_4#Alv1*400es^XY9Txfwvo9{HbsRd<9 zU8-!fH{P{0)U8CRW1`(>PL5~X>>Q5@bLA6zlE?fTkCbjJwOR*#uU^o&^kY#+;K=!V z2;YozP78Nv+Z?__ElBKVsXBO6k~H|g$Po??CyuI&u-463dMn0-Cn352JtGenZ&b5W H#MOTRdgLVE literal 0 HcmV?d00001 diff --git a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-middle.png b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all-wrap-middle.png new file mode 100644 index 0000000000000000000000000000000000000000..107df8ceb3ec17cfad7b81fc3b00c7d844f149f1 GIT binary patch literal 1721 zcmV;q21fabP)Px*b4f%&RCt{2-A_nccK`?QZ$^(2vVdqeXLInNpiHEK1y>4*2x*{VJtVY9A=ypv zt@fZ7ef6TSYM;>C;wYhAa;TzU1?dw?XQ?zL%TR~|59#LGh~To|Jv+R_{OK<>=@OHg z@8^{Fd(Y=Dc|X6t-=C*CAPyp;Oy>Y7hjZnw2Ax5}Uk(>^{Mvn`ZPhc8O{ z4T$J7#b_WRfpf_hvB1r7&nf`4xhI|9yjEecbe6ShRE^jUD@7t2!pgV@gOi6HdLXtq zFZFKO)-2_&8&w^)!^)v`D8jpwunl+U0RZ}br?O^CJ0`3u;lj?kA5a%##jGY(1-8Qq zqD6zzXvNB0AoVGBrtadxin3DJIb(ql&)Z^FlBxvTVFl3vapiChepTvSNp$e~^~t?q z)tI^-wl&4l7?^MIY-!up!O2G*dH{Y^>U}%tzTk1K!2DhF`mZ~QuV@<#IXmi3|4mUv z_>{>@w!{3K!sKN#8UXC4K5pBZl1%GZ;O4mJqNGSB?e%Z{lg@sXf z!{Tn*1<-d43qSC%+TyverX+9Jh>DHvuwoo{C{`4sn!GBpz}yPPn@j+pH(mq)><0pV z0C@XX3;_JQxrd95Mk@fo9|-K1wDNTJupL&4WHj_k%3;&4QId?3WIP`40RUrT8zvQL z1Wlc$rg3b!#wDX9y@XBc3jX+1>Rkc0JT3Fd3!pb%#FlGZdTBgk!@^W@Y=;#iZH9uV zsQBb%>F~)*A}S9?0}%-@8i+_h2gKw26L3V7hGPvxB*thUA^}DN5eYCFh)96ZKtuwJ z1|kw*G!T&hqk)J77!5=uz-S;M0Y(E62{0OnNPy8mL;{QkA`)OU5Rt&Sa#x^&?dZx~ zgQRBuMU5i(_wLi~V1VSfR8ZT5lFEr1uJ?H?=m4Z&v>eHSX4$bwIH?g(~V9k}zjwIxbaNx?mR9&+P)Et0(nJ)e?#t30ZS>XSuxn5IKk9yU>y&GnWYDq{vA_h zT>JWjFCPsFav`hS{s3NcacWBit7(0l_botYxBRR+a)Hs1hfa9S7;__%Ru=ICR`8#( ze)f*G7xv0shf2k0IGNp*edF+O1fyB^|3TJhW%tI0UgdgRb-gg3vkAHV@F} zfcFLBAzXQvmKV9oGx>&q3B*H)htM^0LWoe|)E@2UT$T-PHCecKUv}RGo<6yE8@8x? zXTEvI8PtN{Xu;=xGjJy=%TZHQshV)$Fl1irE;t-`egJzdd~Vn$GIzHl?oFk`<`OWI zn5yVXjd$fN&k%%T9au*yYWx_r7yS)YGt2QXqrmqcO153&og`%QATqVahAVK3;! zz#rNaMuVvzcv_}=!tt$OhBDpr*|d$?)cr-S@@!_j4<+sz;-TaW z2$evcskQN>WBg$?ZL6m7?9W;zFdFi8YX+D_pBq!Te&HvX%vk=rfbwkX2!CQ7sX#TY z*BgMnjr+N~35|wk?4%D#R0~GK2{zv)UesGL1uO%%(iSge{iufz0N{!hm`#ikL{>2d zj5#nJ%vqjss&;tIxHOcS5b<#&vZRi-Z@BT1>B~A(>s6>d+5qIywxR;6yBfwL`R{OZ ziTEt%wbhU?(8b5AiXifH%X#5yNLXCaZfL`h+Tutldap<8Ml=unVQ;P5+ei#pHV@1< zJaJaRYDj}T!Dz^hPhOraeDX4X2ANM@5|Id_frtbc4MZfM1K5uxqHO;GAqwcIEyTMw P00000NkvXXu0mjfPTw^- literal 0 HcmV?d00001 diff --git a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all.png b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-all.png new file mode 100644 index 0000000000000000000000000000000000000000..c1192941c321e29666e911850eeadb0965f3760f GIT binary patch literal 1601 zcmV-H2EO@;P)Px)`$=qQ9m+#+=_1B#{&2GXg!>Ucc*6cP2A%qakB!N%}Aw*j{Q}`j5xDkx50bB@& z{BJ)oaJd{!ZQAJ}eJff)IyR2)F~HS(EW7`)f1lw?tN`%C4g>oPU&8wx-m}#eXKk>+ zWdDoGW8=i!wf>6uKcp99n*V8y9alzgf8E!4%%j9Nv>^i7!JZRtUF*pQ!jvA2G8W3% zEs$G^sF$}q>#khmVyt(r&sdcW*AU0({Eh#{isVd8fuvW^GKt z%nQrSh?2H>_bEX@jM2-3Qy(lUX=cAdGKlLk6_RwaT0tO+5?YnXp>` zu#EWibx&EHl%c2UJL+D-SjwGbGhboSx1zPodo7D%2()HC*n!8Ks`f7d0%q4C`pPytS zUun{}qQy8^a55DpT~?NkgPYzawn{YG!S>>Av)j9Z+$db!plA%qDA8t5IGlHlD9Gymmt8AnKLP{!-f5y{~E4w-5HVV^&SG zYO%$Gid|Msvu?Ce*eoQ=I9&RU60t?M0zox^XI*zWfL>Q7q}&KbKTvhG7jlUkQNkg8 z#KK-8Vv9bB+g%vyskIF0ThVIzS#aVDb90_Qn@pZ>^cf11F{ByAjp@K3 zn4vCw2l(bLqqnn~XEAoypWMAR*aHWPvG9+hx3hhn>~3G*fYYBSL*?TWU3Py)H}7Dr zUalIxm@M|MbpMEjxS`sjTV|QVrLTM7!kAB{RgNZoD_V>>DExLGAQr}3mB!r9;X-L^ za~baC(?I3H1)>yf5qH7%=YKaUo_ee`^y1*S_Gq@CxA z(QY^CXLQa?EA8nWX;!QMcV-~WC6)@`1syIu6B=`~6?jr3i^H70`~F=$qk8_iSJWVV zD_T-NGvHf>B)<1*JR?!=+qtrhv!!9*QRUT~{ISDf@$>P2ZM*mvx_bN0y{t|=Wt44| z1<2E`Fd|%fR(5H&*e7aUic^Ly`p&wpt1>{ThxDyzNjLAo9K&H|UiMULualME>L{=F zm^yQ#MFVv9UF(6}jr&L6`#Wbn&(rc-iS42|HM*)RM&X||mw2#B@ZDYji}C>gdx=CG z;Q6mPfcUec(;XGXyz3rMNJ0ll--_0<`Fs9{ZZ|Wq0yoPZjjsx9seOPC-7uF=he@w7 z1yep|lSh_U9IBrMCl|*{Nvbi)muZ%R?dxG)@Bl?uZ{HP+Au~hS8T$x^Qpn~Hs>Pv6ZYdHBY~daYePz$+sva^ccs!xiRk$!Uv^DbxfD2Px(#7RU!RCt{2-Opi)3#PX~ zhUBtdEO;?c5+<<61QuD)Q%JxD1OrP;NLXQN@i2SH!BDzM5G?o)Ob;^?N2BPNm}uVj zb8_B1$LE``&o>W$cmM-LVweD+)^{Ge8DnGZ+cj79cm8AF_RDSGy5;fUo1s1c(MVz3 zNgxyUjfVCnnK=T0+1*t9`_DxLgZ@Wt+S9?l9TisGt7f&6#C>QQ7M-L6m$S)p$fgsi@qHL;j#z2m`aR==4zAI^Ni~qrr@OL)*76nEXMt zo{EJ~S^3=I8tPixlNIG;My)I1+k2@4_U#CsbP&)6vq#(;706|35vq-7R24?)zGf7ldl8US-CkUI<(BFPn7V|(Q89B8l!3<4yu$+({rFz%cmrJrV%t?j#n* zodm+TlRy}E5(wi?0%6=qAdEW+gmEW8R8G8kW3Pg)@6ISL;x5(~He= zkMi7Vmq($2Fz#+WUw#iG3jl{lxVp9b>;Q)V)?w&a05FLI9m|vL)i%9IbUM1TJhzJI z@x8ZSXpH-S((Ax6KC}(bHEjNkbO5iv>v8vYI?}z$m)|2BxS!UNiE$s4AK3sByDbC! zRS5`zKWaL%827;~ue1;FA2#qV)LN-*PvRY$p4+qbZso0dTsBZIjQbtTwGQxQoNZyj zS)mM1)UjE^QWV)gVCZ=D)$tnWR^BSN3j7K~hoNI(qsI$_I%3@K#2ny1)c_#3i{-X| zOP#YWYE5Scz?OB{y5R3!-lB}?F`_?Pqk95Kl!owpo;t?;Zsw2%q6a`3(H}ajz&L%{ zc5F;G-v_#tw+rA>w?=nEhw;l@+b$r+{jT0_0oz#GMY`7?VNVBe_^*rdcE@n}7p&Bd zaUamxSL?>}5YoUQ@OG}bw=KTa8UVZs0o&G``|1b@AQ8o8xodgLq2`bc;K$YGLQsxZ zs{=8}jmzd*xIMeL+(J4FLvNX>12}bTnpdKy>(=J$Eu>-Jt4n$Ff!3{R&ZYWOooCJ+ zz~CPx(U`a$lRCt{2+_7sLcNDrTEgQ+kPI7OS*-ir&!?vc_q(Te;tXgagb;pk4baZosKfA$#m^Uqn!oms<3DjN||bNt3k!GDx(eTQzE$)uA|}tMi3*& zT)Ef&6Xt^6g#FfL@ubJZ&^IXlAMjhCvLvkxx z#^UQV3jjN1j?V4g-)0AROtZ!`aGmWM@$22wmV=~w9ld?LxIkj}(&HaJcfqP3W{E9M z1po-#o7XR5ZFB0Dt`B$AW82zlTxOU)Cb<>ea*tt`r(Gq|3Cn+wo8j(P1OELV7pRDR$tSb?d<80CD%ZL*xHTc*-k$ZBOOs{+UNrs=g~)PvSZSh1A3X>VD|ROc%KP+f^aC73YOIi>xa9D@?afsA44AHcyyKPDwscT$HEc)A_kMmgcP&= zNp8hCZjtr!1faM3=ktgXYgQz$UC*z=UBTfzJ{FSJ&2!5@a?R`l_31y-5cAlI)r zY8jtl=j{;V-F6xBZuAv(`jxPxO{?{h8unU=%)~fAz`O~-v29lX-u&GFs2ujcy=9ti z@33M^V;Cg2qTBvE@5NY@9PGfu(AnOu1*m=ka3>0@UhnCsOd8S&maBcoI}R11FvG2d zvzwAd-}c?Fd4KOI{S3=g+TF~k(@VYi^&}~+eotnfjXN1isf z9(h{Be@dR#AcPPfl`L372;YzeO9h($ literal 0 HcmV?d00001 diff --git a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start-wrap.png new file mode 100644 index 0000000000000000000000000000000000000000..21b088a9f0d81406c7e6bdcbe7a5e3d8f8e363ad GIT binary patch literal 1266 zcmVPx(tVu*cRCt{2-91PnX&lG#?;MuGr4ik`ASojRE{zZ&EDO=bT~JPo2{sFQoyDD6 zXqCq*7V2(cck!^<%M=P)tj$JPB(MRun1evvPLAA~B~1>}=ZYleccGDi zZdU-vS<8ga0A_YLp8ntYJhM+Z0pLT1K%UvBnCF;7%@=NsL7a8}ZROT7)^w|%(vxyW zmRh`QapL*>+8f_shp%#xR8uS!g6;>do%1*$?jzhYj@r$^SE6?evo zhuDabt1HW0z%-sN)~e?e(?{8E*TJcr6n8L}nj83oRo0vO9yZ1psm4QNj4ivxWi84Z zS<98nW=|jJJ#<~6@OSMX`%0;Wbn#2taw+9f)={zHluIdBQlp#0S#ihT*udMQb_mp8 zU}J>q4)e^0iJw!-@a%KlJ%=fxdf?!YdyF{14n<|g1ahYw{J^@ud2IS2&P4SvevUar>USn~DX+)|R%@%LEz56~Z*LZ@%8O8y7tavr zu}8#me~dk8xvI+KQXxors9IiR{k5@H)aFuWwT~60MRLVM67oi1_qQ0N}h=9l*GMv$tM5{y-3`JMkMY+BL>Lc c9YPoX0XRD6@Z0vDJ^%m!07*qoM6N<$f?dLGUjP6A literal 0 HcmV?d00001 diff --git a/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start.png b/packages/horizontal-layout/test/visual/lumo/screenshots/horizontal-layout/baseline/slots-without-start.png new file mode 100644 index 0000000000000000000000000000000000000000..f0f8077cb974df69328b7cd5736676ff237bdf61 GIT binary patch literal 1109 zcmV-b1giUqP)Px(4@pEpRCt{2oIhw=R}_aom5hdJF;-GxJX#>A7K05U6l5=Q!6Mf19$pMqHV1VK=Sd!u&Xb`-5`^fQ391Jc3&T`v)O$O!;%FIX%QdWiN0ZMw5# z!UIX7zMJgUHde6Pf0-1DDa+Wp>~di>yz|^U)#qK#v&IUMvfn*q@6<+OI~a-zmPW4qm2BJn5j0BhfU;?JWOUDT?>t{ssK z49DAXW6Jxy@1OJqzwv4^M$~YS*!Dne!D4}AfL)Vfi>-JLLFPv2)g(~KrwXI?VO){e z_C|5R0xi-x$vS>Yv||Nl@MB9*xRwT>)k@9LwW`kDVP6hHVV%SVg?Tw;2tQLGE1L!83N4Nl++yPOzYILx1=q>$AgmjW` z(5A_ql7PjV?d@3G5TklTE!CBHKy?1DpYZD;vtnc#jabAFwP9oK0WbFn@05)nQ`Y{L zU0C%1!Bi<;E*SlJ?jgeEZw+O$l zZFRZl9>E_Y@>>NYwtb=ek`Ta09P~8U=-+p#U1;U?VM}AWIgRRN?I$yv){bCQ|z zuDhX-ebzgFGV7e@vNate^oPW@H);!3?w|S>SCBZIz-CJcXomn@l>mMS!eKqFUOZ(N zc6AbVPkY;~d?W)bZ8tY1tx3+iSMnPsH*CJo%z0PItkhD%mHaOm$e0tAA-+8l+a5Te zs^H7dMQizft3pG&QIn2mD*xuKKx$u&J?mvGgE8+=6<;~ z0oB+8zWgk)9RQ~hQ&h0zw1zK=oG8#ga$3XPA*VG6f}j#2Sb`uZg9w%&2+H7)Ba#I{ bP=)^hXp7w$KrG4)00000NkvXXu0mjf@EjZw literal 0 HcmV?d00001