rezel 1.0.4 → 1.0.5

package/dist/rezel.cjs.js

@@ -0,0 +1,4 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));require(`react`);var c=`:host{--d0:var(--rezel-dim-none,0px);--d1:var(--rezel-dim-small,4px);--d2:var(--rezel-dim-medium,8px);--d3:var(--rezel-dim-large,16px);--d4:var(--rezel-dim-xlarge,32px);--d5:var(--rezel-dim-xxlarge,64px);--f0:var(--rezel-font-xsmall,12px);--f1:var(--rezel-font-small,14px);--f2:var(--rezel-font-medium,16px);--f3:var(--rezel-font-large,24px);--f4:var(--rezel-font-xlarge,32px);--f5:var(--rezel-font-xxlarge,40px);display:block;box-sizing:border-box!important}slot{display:contents!important}.row{box-sizing:border-box;justify-content:flex-start;gap:var(--gap);--gap:0px;flex-flow:wrap;margin:0;padding:0;display:flex}.cell{box-sizing:border-box}:host([r-cell]){flex:auto}::slotted(hr){width:100%}:host([r-c1]),:host([r-c2]),:host([r-c3]),:host([r-c4]){max-width:calc(var(--rc)/12*100% - var(--gap)*(12 - var(--rc))/12);flex:100%}:host([r-sb1]),:host([r-sb2]),:host([r-sb3]),:host([r-sb4]){margin-left:calc(var(--rsb)/12*100% + var(--gap)*var(--rsb)/12)}:host([r-sa1]),:host([r-sa2]),:host([r-sa3]),:host([r-sa4]){margin-right:calc(var(--rsa)/12*100% + var(--gap)*var(--rsa)/12)}@media (min-width:0){:host([r-ta1]){text-align:var(--text-align-small)}:host([r-d1]){display:var(--display-small)}:host([r-f1="1"]){font-size:var(--f1)}:host([r-f1="2"]){font-size:var(--f2)}:host([r-f1="3"]){font-size:var(--f3)}:host([r-f1="4"]){font-size:var(--f4)}:host([r-f1="5"]){font-size:var(--f5)}:host([r-f1="6"]){font-size:var(--f6)}.row.gap-small-1{--gap:var(--d1)}:host([r-p1="1"]){padding:var(--d1)}:host([r-pt1="1"]){padding-top:var(--d1)}:host([r-pl1="1"]){padding-left:var(--d1)}:host([r-pb1="1"]){padding-bottom:var(--d1)}:host([r-pr1="1"]){padding-right:var(--d1)}:host([r-m1="1"]){margin:var(--d1)}:host([r-mt1="1"]){margin-top:var(--d1)}:host([r-ml1="1"]){margin-left:var(--d1)}:host([r-mb1="1"]){margin-bottom:var(--d1)}:host([r-mr1="1"]){margin-right:var(--d1)}.row.gap-small-2{--gap:var(--d2)}:host([r-p1="2"]){padding:var(--d2)}:host([r-pt1="2"]){padding-top:var(--d2)}:host([r-pl1="2"]){padding-left:var(--d2)}:host([r-pb1="2"]){padding-bottom:var(--d2)}:host([r-pr1="2"]){padding-right:var(--d2)}:host([r-m1="2"]){margin:var(--d2)}:host([r-mt1="2"]){margin-top:var(--d2)}:host([r-ml1="2"]){margin-left:var(--d2)}:host([r-mb1="2"]){margin-bottom:var(--d2)}:host([r-mr1="2"]){margin-right:var(--d2)}.row.gap-small-3{--gap:var(--d3)}:host([r-p1="3"]){padding:var(--d3)}:host([r-pt1="3"]){padding-top:var(--d3)}:host([r-pl1="3"]){padding-left:var(--d3)}:host([r-pb1="3"]){padding-bottom:var(--d3)}:host([r-pr1="3"]){padding-right:var(--d3)}:host([r-m1="3"]){margin:var(--d3)}:host([r-mt1="3"]){margin-top:var(--d3)}:host([r-ml1="3"]){margin-left:var(--d3)}:host([r-mb1="3"]){margin-bottom:var(--d3)}:host([r-mr1="3"]){margin-right:var(--d3)}.row.gap-small-4{--gap:var(--d4)}:host([r-p1="4"]){padding:var(--d4)}:host([r-pt1="4"]){padding-top:var(--d4)}:host([r-pl1="4"]){padding-left:var(--d4)}:host([r-pb1="4"]){padding-bottom:var(--d4)}:host([r-pr1="4"]){padding-right:var(--d4)}:host([r-m1="4"]){margin:var(--d4)}:host([r-mt1="4"]){margin-top:var(--d4)}:host([r-ml1="4"]){margin-left:var(--d4)}:host([r-mb1="4"]){margin-bottom:var(--d4)}:host([r-mr1="4"]){margin-right:var(--d4)}.row.gap-small-5{--gap:var(--d5)}:host([r-p1="5"]){padding:var(--d5)}:host([r-pt1="5"]){padding-top:var(--d5)}:host([r-pl1="5"]){padding-left:var(--d5)}:host([r-pb1="5"]){padding-bottom:var(--d5)}:host([r-pr1="5"]){padding-right:var(--d5)}:host([r-m1="5"]){margin:var(--d5)}:host([r-mt1="5"]){margin-top:var(--d5)}:host([r-ml1="5"]){margin-left:var(--d5)}:host([r-mb1="5"]){margin-bottom:var(--d5)}:host([r-mr1="5"]){margin-right:var(--d5)}.row.gap-small-6{--gap:var(--d6)}:host([r-p1="6"]){padding:var(--d6)}:host([r-pt1="6"]){padding-top:var(--d6)}:host([r-pl1="6"]){padding-left:var(--d6)}:host([r-pb1="6"]){padding-bottom:var(--d6)}:host([r-pr1="6"]){padding-right:var(--d6)}:host([r-m1="6"]){margin:var(--d6)}:host([r-mt1="6"]){margin-top:var(--d6)}:host([r-ml1="6"]){margin-left:var(--d6)}:host([r-mb1="6"]){margin-bottom:var(--d6)}:host([r-mr1="6"]){margin-right:var(--d6)}:host([r-or1="12"]){order:12}:host([r-c1="12"]){--rc:12}:host([r-or1="11"]){order:11}:host([r-c1="11"]){--rc:11}:host([r-or1="10"]){order:10}:host([r-c1="10"]){--rc:10}:host([r-or1="9"]){order:9}:host([r-c1="9"]){--rc:9}:host([r-or1="8"]){order:8}:host([r-c1="8"]){--rc:8}:host([r-or1="7"]){order:7}:host([r-c1="7"]){--rc:7}:host([r-or1="6"]){order:6}:host([r-c1="6"]){--rc:6}:host([r-or1="5"]){order:5}:host([r-c1="5"]){--rc:5}:host([r-or1="4"]){order:4}:host([r-c1="4"]){--rc:4}:host([r-or1="3"]){order:3}:host([r-c1="3"]){--rc:3}:host([r-or1="2"]){order:2}:host([r-c1="2"]){--rc:2}:host([r-or1="1"]){order:1}:host([r-c1="1"]){--rc:1}:host([r-sb1="11"]){--rsb:11}:host([r-sa1="11"]){--rsa:11}:host([r-sb1="10"]){--rsb:10}:host([r-sa1="10"]){--rsa:10}:host([r-sb1="9"]){--rsb:9}:host([r-sa1="9"]){--rsa:9}:host([r-sb1="8"]){--rsb:8}:host([r-sa1="8"]){--rsa:8}:host([r-sb1="7"]){--rsb:7}:host([r-sa1="7"]){--rsa:7}:host([r-sb1="6"]){--rsb:6}:host([r-sa1="6"]){--rsa:6}:host([r-sb1="5"]){--rsb:5}:host([r-sa1="5"]){--rsa:5}:host([r-sb1="4"]){--rsb:4}:host([r-sa1="4"]){--rsa:4}:host([r-sb1="3"]){--rsb:3}:host([r-sa1="3"]){--rsa:3}:host([r-sb1="2"]){--rsb:2}:host([r-sa1="2"]){--rsa:2}:host([r-sb1="1"]){--rsb:1}:host([r-sa1="1"]){--rsa:1}:host([r-sb1="0"]){--rsb:0}:host([r-sa1="0"]){--rsa:0}}@media (min-width:768px){:host([r-ta2]){text-align:var(--text-align-medium)}:host([r-d2]){display:var(--display-medium)}:host([r-f2="1"]){font-size:var(--f1)}:host([r-f2="2"]){font-size:var(--f2)}:host([r-f2="3"]){font-size:var(--f3)}:host([r-f2="4"]){font-size:var(--f4)}:host([r-f2="5"]){font-size:var(--f5)}:host([r-f2="6"]){font-size:var(--f6)}.row.gap-medium-1{--gap:var(--d1)}:host([r-p2="1"]){padding:var(--d1)}:host([r-pt2="1"]){padding-top:var(--d1)}:host([r-pl2="1"]){padding-left:var(--d1)}:host([r-pb2="1"]){padding-bottom:var(--d1)}:host([r-pr2="1"]){padding-right:var(--d1)}:host([r-m2="1"]){margin:var(--d1)}:host([r-mt2="1"]){margin-top:var(--d1)}:host([r-ml2="1"]){margin-left:var(--d1)}:host([r-mb2="1"]){margin-bottom:var(--d1)}:host([r-mr2="1"]){margin-right:var(--d1)}.row.gap-medium-2{--gap:var(--d2)}:host([r-p2="2"]){padding:var(--d2)}:host([r-pt2="2"]){padding-top:var(--d2)}:host([r-pl2="2"]){padding-left:var(--d2)}:host([r-pb2="2"]){padding-bottom:var(--d2)}:host([r-pr2="2"]){padding-right:var(--d2)}:host([r-m2="2"]){margin:var(--d2)}:host([r-mt2="2"]){margin-top:var(--d2)}:host([r-ml2="2"]){margin-left:var(--d2)}:host([r-mb2="2"]){margin-bottom:var(--d2)}:host([r-mr2="2"]){margin-right:var(--d2)}.row.gap-medium-3{--gap:var(--d3)}:host([r-p2="3"]){padding:var(--d3)}:host([r-pt2="3"]){padding-top:var(--d3)}:host([r-pl2="3"]){padding-left:var(--d3)}:host([r-pb2="3"]){padding-bottom:var(--d3)}:host([r-pr2="3"]){padding-right:var(--d3)}:host([r-m2="3"]){margin:var(--d3)}:host([r-mt2="3"]){margin-top:var(--d3)}:host([r-ml2="3"]){margin-left:var(--d3)}:host([r-mb2="3"]){margin-bottom:var(--d3)}:host([r-mr2="3"]){margin-right:var(--d3)}.row.gap-medium-4{--gap:var(--d4)}:host([r-p2="4"]){padding:var(--d4)}:host([r-pt2="4"]){padding-top:var(--d4)}:host([r-pl2="4"]){padding-left:var(--d4)}:host([r-pb2="4"]){padding-bottom:var(--d4)}:host([r-pr2="4"]){padding-right:var(--d4)}:host([r-m2="4"]){margin:var(--d4)}:host([r-mt2="4"]){margin-top:var(--d4)}:host([r-ml2="4"]){margin-left:var(--d4)}:host([r-mb2="4"]){margin-bottom:var(--d4)}:host([r-mr2="4"]){margin-right:var(--d4)}.row.gap-medium-5{--gap:var(--d5)}:host([r-p2="5"]){padding:var(--d5)}:host([r-pt2="5"]){padding-top:var(--d5)}:host([r-pl2="5"]){padding-left:var(--d5)}:host([r-pb2="5"]){padding-bottom:var(--d5)}:host([r-pr2="5"]){padding-right:var(--d5)}:host([r-m2="5"]){margin:var(--d5)}:host([r-mt2="5"]){margin-top:var(--d5)}:host([r-ml2="5"]){margin-left:var(--d5)}:host([r-mb2="5"]){margin-bottom:var(--d5)}:host([r-mr2="5"]){margin-right:var(--d5)}.row.gap-medium-6{--gap:var(--d6)}:host([r-p2="6"]){padding:var(--d6)}:host([r-pt2="6"]){padding-top:var(--d6)}:host([r-pl2="6"]){padding-left:var(--d6)}:host([r-pb2="6"]){padding-bottom:var(--d6)}:host([r-pr2="6"]){padding-right:var(--d6)}:host([r-m2="6"]){margin:var(--d6)}:host([r-mt2="6"]){margin-top:var(--d6)}:host([r-ml2="6"]){margin-left:var(--d6)}:host([r-mb2="6"]){margin-bottom:var(--d6)}:host([r-mr2="6"]){margin-right:var(--d6)}:host([r-or2="12"]){order:12}:host([r-c2="12"]){--rc:12}:host([r-or2="11"]){order:11}:host([r-c2="11"]){--rc:11}:host([r-or2="10"]){order:10}:host([r-c2="10"]){--rc:10}:host([r-or2="9"]){order:9}:host([r-c2="9"]){--rc:9}:host([r-or2="8"]){order:8}:host([r-c2="8"]){--rc:8}:host([r-or2="7"]){order:7}:host([r-c2="7"]){--rc:7}:host([r-or2="6"]){order:6}:host([r-c2="6"]){--rc:6}:host([r-or2="5"]){order:5}:host([r-c2="5"]){--rc:5}:host([r-or2="4"]){order:4}:host([r-c2="4"]){--rc:4}:host([r-or2="3"]){order:3}:host([r-c2="3"]){--rc:3}:host([r-or2="2"]){order:2}:host([r-c2="2"]){--rc:2}:host([r-or2="1"]){order:1}:host([r-c2="1"]){--rc:1}:host([r-sb2="11"]){--rsb:11}:host([r-sa2="11"]){--rsa:11}:host([r-sb2="10"]){--rsb:10}:host([r-sa2="10"]){--rsa:10}:host([r-sb2="9"]){--rsb:9}:host([r-sa2="9"]){--rsa:9}:host([r-sb2="8"]){--rsb:8}:host([r-sa2="8"]){--rsa:8}:host([r-sb2="7"]){--rsb:7}:host([r-sa2="7"]){--rsa:7}:host([r-sb2="6"]){--rsb:6}:host([r-sa2="6"]){--rsa:6}:host([r-sb2="5"]){--rsb:5}:host([r-sa2="5"]){--rsa:5}:host([r-sb2="4"]){--rsb:4}:host([r-sa2="4"]){--rsa:4}:host([r-sb2="3"]){--rsb:3}:host([r-sa2="3"]){--rsa:3}:host([r-sb2="2"]){--rsb:2}:host([r-sa2="2"]){--rsa:2}:host([r-sb2="1"]){--rsb:1}:host([r-sa2="1"]){--rsa:1}:host([r-sb2="0"]){--rsb:0}:host([r-sa2="0"]){--rsa:0}}@media (min-width:1024px){:host([r-ta3]){text-align:var(--text-align-large)}:host([r-d3]){display:var(--display-large)}:host([r-f3="1"]){font-size:var(--f1)}:host([r-f3="2"]){font-size:var(--f2)}:host([r-f3="3"]){font-size:var(--f3)}:host([r-f3="4"]){font-size:var(--f4)}:host([r-f3="5"]){font-size:var(--f5)}:host([r-f3="6"]){font-size:var(--f6)}.row.gap-large-1{--gap:var(--d1)}:host([r-p3="1"]){padding:var(--d1)}:host([r-pt3="1"]){padding-top:var(--d1)}:host([r-pl3="1"]){padding-left:var(--d1)}:host([r-pb3="1"]){padding-bottom:var(--d1)}:host([r-pr3="1"]){padding-right:var(--d1)}:host([r-m3="1"]){margin:var(--d1)}:host([r-mt3="1"]){margin-top:var(--d1)}:host([r-ml3="1"]){margin-left:var(--d1)}:host([r-mb3="1"]){margin-bottom:var(--d1)}:host([r-mr3="1"]){margin-right:var(--d1)}.row.gap-large-2{--gap:var(--d2)}:host([r-p3="2"]){padding:var(--d2)}:host([r-pt3="2"]){padding-top:var(--d2)}:host([r-pl3="2"]){padding-left:var(--d2)}:host([r-pb3="2"]){padding-bottom:var(--d2)}:host([r-pr3="2"]){padding-right:var(--d2)}:host([r-m3="2"]){margin:var(--d2)}:host([r-mt3="2"]){margin-top:var(--d2)}:host([r-ml3="2"]){margin-left:var(--d2)}:host([r-mb3="2"]){margin-bottom:var(--d2)}:host([r-mr3="2"]){margin-right:var(--d2)}.row.gap-large-3{--gap:var(--d3)}:host([r-p3="3"]){padding:var(--d3)}:host([r-pt3="3"]){padding-top:var(--d3)}:host([r-pl3="3"]){padding-left:var(--d3)}:host([r-pb3="3"]){padding-bottom:var(--d3)}:host([r-pr3="3"]){padding-right:var(--d3)}:host([r-m3="3"]){margin:var(--d3)}:host([r-mt3="3"]){margin-top:var(--d3)}:host([r-ml3="3"]){margin-left:var(--d3)}:host([r-mb3="3"]){margin-bottom:var(--d3)}:host([r-mr3="3"]){margin-right:var(--d3)}.row.gap-large-4{--gap:var(--d4)}:host([r-p3="4"]){padding:var(--d4)}:host([r-pt3="4"]){padding-top:var(--d4)}:host([r-pl3="4"]){padding-left:var(--d4)}:host([r-pb3="4"]){padding-bottom:var(--d4)}:host([r-pr3="4"]){padding-right:var(--d4)}:host([r-m3="4"]){margin:var(--d4)}:host([r-mt3="4"]){margin-top:var(--d4)}:host([r-ml3="4"]){margin-left:var(--d4)}:host([r-mb3="4"]){margin-bottom:var(--d4)}:host([r-mr3="4"]){margin-right:var(--d4)}.row.gap-large-5{--gap:var(--d5)}:host([r-p3="5"]){padding:var(--d5)}:host([r-pt3="5"]){padding-top:var(--d5)}:host([r-pl3="5"]){padding-left:var(--d5)}:host([r-pb3="5"]){padding-bottom:var(--d5)}:host([r-pr3="5"]){padding-right:var(--d5)}:host([r-m3="5"]){margin:var(--d5)}:host([r-mt3="5"]){margin-top:var(--d5)}:host([r-ml3="5"]){margin-left:var(--d5)}:host([r-mb3="5"]){margin-bottom:var(--d5)}:host([r-mr3="5"]){margin-right:var(--d5)}.row.gap-large-6{--gap:var(--d6)}:host([r-p3="6"]){padding:var(--d6)}:host([r-pt3="6"]){padding-top:var(--d6)}:host([r-pl3="6"]){padding-left:var(--d6)}:host([r-pb3="6"]){padding-bottom:var(--d6)}:host([r-pr3="6"]){padding-right:var(--d6)}:host([r-m3="6"]){margin:var(--d6)}:host([r-mt3="6"]){margin-top:var(--d6)}:host([r-ml3="6"]){margin-left:var(--d6)}:host([r-mb3="6"]){margin-bottom:var(--d6)}:host([r-mr3="6"]){margin-right:var(--d6)}:host([r-or3="12"]){order:12}:host([r-c3="12"]){--rc:12}:host([r-or3="11"]){order:11}:host([r-c3="11"]){--rc:11}:host([r-or3="10"]){order:10}:host([r-c3="10"]){--rc:10}:host([r-or3="9"]){order:9}:host([r-c3="9"]){--rc:9}:host([r-or3="8"]){order:8}:host([r-c3="8"]){--rc:8}:host([r-or3="7"]){order:7}:host([r-c3="7"]){--rc:7}:host([r-or3="6"]){order:6}:host([r-c3="6"]){--rc:6}:host([r-or3="5"]){order:5}:host([r-c3="5"]){--rc:5}:host([r-or3="4"]){order:4}:host([r-c3="4"]){--rc:4}:host([r-or3="3"]){order:3}:host([r-c3="3"]){--rc:3}:host([r-or3="2"]){order:2}:host([r-c3="2"]){--rc:2}:host([r-or3="1"]){order:1}:host([r-c3="1"]){--rc:1}:host([r-sb3="11"]){--rsb:11}:host([r-sa3="11"]){--rsa:11}:host([r-sb3="10"]){--rsb:10}:host([r-sa3="10"]){--rsa:10}:host([r-sb3="9"]){--rsb:9}:host([r-sa3="9"]){--rsa:9}:host([r-sb3="8"]){--rsb:8}:host([r-sa3="8"]){--rsa:8}:host([r-sb3="7"]){--rsb:7}:host([r-sa3="7"]){--rsa:7}:host([r-sb3="6"]){--rsb:6}:host([r-sa3="6"]){--rsa:6}:host([r-sb3="5"]){--rsb:5}:host([r-sa3="5"]){--rsa:5}:host([r-sb3="4"]){--rsb:4}:host([r-sa3="4"]){--rsa:4}:host([r-sb3="3"]){--rsb:3}:host([r-sa3="3"]){--rsa:3}:host([r-sb3="2"]){--rsb:2}:host([r-sa3="2"]){--rsa:2}:host([r-sb3="1"]){--rsb:1}:host([r-sa3="1"]){--rsa:1}:host([r-sb3="0"]){--rsb:0}:host([r-sa3="0"]){--rsa:0}}@media (min-width:1280px){:host([r-ta4]){text-align:var(--text-align-xlarge)}:host([r-d4]){display:var(--display-xlarge)}:host([r-f4="1"]){font-size:var(--f1)}:host([r-f4="2"]){font-size:var(--f2)}:host([r-f4="3"]){font-size:var(--f3)}:host([r-f4="4"]){font-size:var(--f4)}:host([r-f4="5"]){font-size:var(--f5)}:host([r-f4="6"]){font-size:var(--f6)}.row.gap-xlarge-1{--gap:var(--d1)}:host([r-p4="1"]){padding:var(--d1)}:host([r-pt4="1"]){padding-top:var(--d1)}:host([r-pl4="1"]){padding-left:var(--d1)}:host([r-pb4="1"]){padding-bottom:var(--d1)}:host([r-pr4="1"]){padding-right:var(--d1)}:host([r-m4="1"]){margin:var(--d1)}:host([r-mt4="1"]){margin-top:var(--d1)}:host([r-ml4="1"]){margin-left:var(--d1)}:host([r-mb4="1"]){margin-bottom:var(--d1)}:host([r-mr4="1"]){margin-right:var(--d1)}.row.gap-xlarge-2{--gap:var(--d2)}:host([r-p4="2"]){padding:var(--d2)}:host([r-pt4="2"]){padding-top:var(--d2)}:host([r-pl4="2"]){padding-left:var(--d2)}:host([r-pb4="2"]){padding-bottom:var(--d2)}:host([r-pr4="2"]){padding-right:var(--d2)}:host([r-m4="2"]){margin:var(--d2)}:host([r-mt4="2"]){margin-top:var(--d2)}:host([r-ml4="2"]){margin-left:var(--d2)}:host([r-mb4="2"]){margin-bottom:var(--d2)}:host([r-mr4="2"]){margin-right:var(--d2)}.row.gap-xlarge-3{--gap:var(--d3)}:host([r-p4="3"]){padding:var(--d3)}:host([r-pt4="3"]){padding-top:var(--d3)}:host([r-pl4="3"]){padding-left:var(--d3)}:host([r-pb4="3"]){padding-bottom:var(--d3)}:host([r-pr4="3"]){padding-right:var(--d3)}:host([r-m4="3"]){margin:var(--d3)}:host([r-mt4="3"]){margin-top:var(--d3)}:host([r-ml4="3"]){margin-left:var(--d3)}:host([r-mb4="3"]){margin-bottom:var(--d3)}:host([r-mr4="3"]){margin-right:var(--d3)}.row.gap-xlarge-4{--gap:var(--d4)}:host([r-p4="4"]){padding:var(--d4)}:host([r-pt4="4"]){padding-top:var(--d4)}:host([r-pl4="4"]){padding-left:var(--d4)}:host([r-pb4="4"]){padding-bottom:var(--d4)}:host([r-pr4="4"]){padding-right:var(--d4)}:host([r-m4="4"]){margin:var(--d4)}:host([r-mt4="4"]){margin-top:var(--d4)}:host([r-ml4="4"]){margin-left:var(--d4)}:host([r-mb4="4"]){margin-bottom:var(--d4)}:host([r-mr4="4"]){margin-right:var(--d4)}.row.gap-xlarge-5{--gap:var(--d5)}:host([r-p4="5"]){padding:var(--d5)}:host([r-pt4="5"]){padding-top:var(--d5)}:host([r-pl4="5"]){padding-left:var(--d5)}:host([r-pb4="5"]){padding-bottom:var(--d5)}:host([r-pr4="5"]){padding-right:var(--d5)}:host([r-m4="5"]){margin:var(--d5)}:host([r-mt4="5"]){margin-top:var(--d5)}:host([r-ml4="5"]){margin-left:var(--d5)}:host([r-mb4="5"]){margin-bottom:var(--d5)}:host([r-mr4="5"]){margin-right:var(--d5)}.row.gap-xlarge-6{--gap:var(--d6)}:host([r-p4="6"]){padding:var(--d6)}:host([r-pt4="6"]){padding-top:var(--d6)}:host([r-pl4="6"]){padding-left:var(--d6)}:host([r-pb4="6"]){padding-bottom:var(--d6)}:host([r-pr4="6"]){padding-right:var(--d6)}:host([r-m4="6"]){margin:var(--d6)}:host([r-mt4="6"]){margin-top:var(--d6)}:host([r-ml4="6"]){margin-left:var(--d6)}:host([r-mb4="6"]){margin-bottom:var(--d6)}:host([r-mr4="6"]){margin-right:var(--d6)}:host([r-or4="12"]){order:12}:host([r-c4="12"]){--rc:12}:host([r-or4="11"]){order:11}:host([r-c4="11"]){--rc:11}:host([r-or4="10"]){order:10}:host([r-c4="10"]){--rc:10}:host([r-or4="9"]){order:9}:host([r-c4="9"]){--rc:9}:host([r-or4="8"]){order:8}:host([r-c4="8"]){--rc:8}:host([r-or4="7"]){order:7}:host([r-c4="7"]){--rc:7}:host([r-or4="6"]){order:6}:host([r-c4="6"]){--rc:6}:host([r-or4="5"]){order:5}:host([r-c4="5"]){--rc:5}:host([r-or4="4"]){order:4}:host([r-c4="4"]){--rc:4}:host([r-or4="3"]){order:3}:host([r-c4="3"]){--rc:3}:host([r-or4="2"]){order:2}:host([r-c4="2"]){--rc:2}:host([r-or4="1"]){order:1}:host([r-c4="1"]){--rc:1}:host([r-sb4="11"]){--rsb:11}:host([r-sa4="11"]){--rsa:11}:host([r-sb4="10"]){--rsb:10}:host([r-sa4="10"]){--rsa:10}:host([r-sb4="9"]){--rsb:9}:host([r-sa4="9"]){--rsa:9}:host([r-sb4="8"]){--rsb:8}:host([r-sa4="8"]){--rsa:8}:host([r-sb4="7"]){--rsb:7}:host([r-sa4="7"]){--rsa:7}:host([r-sb4="6"]){--rsb:6}:host([r-sa4="6"]){--rsa:6}:host([r-sb4="5"]){--rsb:5}:host([r-sa4="5"]){--rsa:5}:host([r-sb4="4"]){--rsb:4}:host([r-sa4="4"]){--rsa:4}:host([r-sb4="3"]){--rsb:3}:host([r-sa4="3"]){--rsa:3}:host([r-sb4="2"]){--rsb:2}:host([r-sa4="2"]){--rsa:2}:host([r-sb4="1"]){--rsb:1}:host([r-sa4="1"]){--rsa:1}:host([r-sb4="0"]){--rsb:0}:host([r-sa4="0"]){--rsa:0}}`,l=new CSSStyleSheet;l.replaceSync(c);var u=l;const d=[`inherit`,`initial`,`revert`,`revert-layer`,`unset`],f=[`display`,`font`,`text-align`,`padding`,`padding-top`,`padding-right`,`padding-bottom`,`padding-left`,`margin`,`margin-top`,`margin-right`,`margin-bottom`,`margin-left`],p=[`row`,`cell`,`col`,`display`,`text-align`,`order`,`skip-before`,`skip-after`,`gap`,`padding`,`font`],m=[`small`,`medium`,`large`,`xlarge`],h=[`none`,`small`,`medium`,`large`,`xlarge`,`xxlarge`],g=[`none`,`block`,`flex`,`grid`,`inline`,`inline-block`,`inline-flex`,`inline-grid`,`flow-root`,`contents`,`table`,`table-row`,`list-item`,...d],_=[`start`,`end`,`left`,`right`,`center`,`justify`,`match-parent`],v=[`xsmall`,`small`,`medium`,`large`,`xlarge`,`xxlarge`],y=e=>f.includes(e),b=e=>p.includes(e);var x=e=>{let t=parseInt(e.trim());return t===void 0?null:String(t)},S=e=>{let t=e.trim().toLowerCase();return g.includes(t)?t:null},C=e=>{let t=e.trim().toLowerCase();return h.includes(t)?String(h.indexOf(t)):null},w=e=>{let t=e.trim().toLowerCase();return _.includes(t)?t:null},T=e=>{let t=e.trim().toLowerCase();return v.includes(t)?String(v.indexOf(t)):null};const E={row:`boolean`,cell:`boolean`,"text-align":w,"skip-before":x,"skip-after":x,col:x,gap:C,font:T,order:x,display:S,padding:C},D={font:T,margin:C,padding:C,display:S,"text-align":w,"margin-top":C,"margin-right":C,"margin-bottom":C,"margin-left":C,"padding-top":C,"padding-right":C,"padding-bottom":C,"padding-left":C},O={font:`f`,padding:`p`,display:`d`,row:`row`,cell:`cell`,col:`c`,gap:`g`,order:`or`,"skip-before":`sb`,"skip-after":`sa`,"text-align":`ta`},k={font:`f`,margin:`m`,padding:`p`,display:`d`,"text-align":`ta`,"margin-top":`mt`,"margin-right":`mr`,"margin-bottom":`mb`,"margin-left":`ml`,"padding-top":`pt`,"padding-right":`pr`,"padding-bottom":`pb`,"padding-left":`pl`},A=(e,t,n)=>{let r=[];for(let i of e)if(t[i]!==void 0){let e=n[i];e===`boolean`?r.push(`${i}`):t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=m[n],o=e(t);a&&o&&r.push(`${i}-${a}-${o}`)})}return r},j=(e,t,n,r)=>{let i={};for(let a of e)if(m.forEach((e,t)=>{i[`r-${r[a]}${t+1}`]=void 0}),t[a]!==void 0){let e=n[a];e===`boolean`?i[`r-${a}`]=a:t[a].split(` `).filter(Boolean).forEach((t,n)=>{let o=m[n],s=e(t);o&&s&&(i[`r-${r[a]}${n+1}`]=s)})}return Object.entries(i)},M=(e,t,n)=>{let r={};for(let i of e)if(m.forEach(e=>{r[`--${i}-${e}`]=void 0}),t[i]!==void 0){let e=n[i];e!==`boolean`&&t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=m[n],o=e(t);a&&o&&(r[`--${i}-${a}`]=o)})}return Object.entries(r)};var N=class extends HTMLElement{static observedAttributes=p;attr={};mainSlot=()=>this.shadowRoot?.querySelector(`slot`)||null;container=()=>this.shadowRoot?.firstElementChild||null;constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[u]}detectRowChange(){let e=this.mainSlot(),t=this.container();if(!e||!t)return;let n=e.assignedElements().some(e=>e.matches(`r-grid`)),r=this.attr.row!==`row`&&n,i=this.attr.row===`row`&&!n;return r&&(this.attr.row=`row`),i&&delete this.attr.row,r||i}detectCellChange(){let e=this.parentElement?.matches(`r-grid`),t=this.attr.cell!==`cell`&&e,n=this.attr.cell===`cell`&&!e;return t&&(this.attr.cell=`cell`),n&&delete this.attr.cell,t||n}attributeChangedCallback(e,t,n){b(e)&&(this.attr[e]=n,this.render())}connectedMoveCallback(){this.detectCellChange()}connectedCallback(){this.mainSlot()?.addEventListener(`slotchange`,()=>{this.detectRowChange()&&this.render()}),this.render();let e=this.detectRowChange(),t=this.detectCellChange();(e||t)&&this.render()}render(){let e=A([`row`,`gap`],this.attr,E),t=j(p,this.attr,E,O);M([`display`,`text-align`],this.attr,E).forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),t.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`
+      <div class="${e.join(` `)}"><slot></slot></div>
+    `}};customElements.define(`r-grid`,N);var P=class extends HTMLElement{static observedAttributes=f;attr={};constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[u]}attributeChangedCallback(e,t,n){y(e)&&(this.attr[e]=n,this.render())}connectedCallback(){this.render()}render(){let e=j(f,this.attr,D,k);M([`display`,`text-align`],this.attr,D).forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),e.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`<slot></slot>`}};customElements.define(`r-elm`,P),exports.GridElement=N,exports.ResponsiveElement=P;
+//# sourceMappingURL=rezel.cjs.js.map

package/dist/rezel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rezel.cjs.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","gridAttrShort: Record<ObservedGridAttribute, string>","elmAttrShort: Record<ObservedElemAttribute, string>","classes: string[]","hostAttributes: Record<string, string | undefined>","hostCSS: Record<string, string | undefined>"],"sources":["../src/grid.scss?inline","../src/grid-style.ts","../src/util.ts","../src/components/grid-element.ts","../src/components/resonsive-element.ts"],"sourcesContent":["@use 'sass:map';\r\n@use 'sass:math';\r\n@use 'sass:list';\r\n\r\n$mediaSizes: (\r\n  small: 0px,\r\n  medium: 768px,\r\n  large: 1024px,\r\n  xlarge: 1280px,\r\n);\r\n$dimensions: 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n\r\n:host {\r\n  --d0: var(--rezel-dim-none, 0px);\r\n  --d1: var(--rezel-dim-small, 4px);\r\n  --d2: var(--rezel-dim-medium, 8px);\r\n  --d3: var(--rezel-dim-large, 16px);\r\n  --d4: var(--rezel-dim-xlarge, 32px);\r\n  --d5: var(--rezel-dim-xxlarge, 64px);\r\n  --f0: var(--rezel-font-xsmall, 12px);\r\n  --f1: var(--rezel-font-small, 14px);\r\n  --f2: var(--rezel-font-medium, 16px);\r\n  --f3: var(--rezel-font-large, 24px);\r\n  --f4: var(--rezel-font-xlarge, 32px);\r\n  --f5: var(--rezel-font-xxlarge, 40px);\r\n  display: block;\r\n  box-sizing: border-box !important;\r\n}\r\n\r\nslot {\r\n  display: contents !important;\r\n}\r\n\r\n.row {\r\n  box-sizing: border-box;\r\n  justify-content: flex-start;\r\n  gap: var(--gap);\r\n  --gap: 0px;\r\n  flex-flow: wrap;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n}\r\n\r\n.cell {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:host([r-cell]) {\r\n  flex: auto;\r\n}\r\n\r\n::slotted(hr) {\r\n  width: 100%;\r\n}\r\n\r\n:host([r-c1]),\r\n:host([r-c2]),\r\n:host([r-c3]),\r\n:host([r-c4]) {\r\n  flex: 100%;\r\n  max-width: calc(((var(--rc) / 12) * 100%) - var(--gap) * (calc((12 - var(--rc)) / 12)));\r\n}\r\n\r\n:host([r-sb1]),\r\n:host([r-sb2]),\r\n:host([r-sb3]),\r\n:host([r-sb4]) {\r\n  margin-left: calc(((var(--rsb) / 12) * 100%) + var(--gap) * (calc(var(--rsb) / 12)));\r\n}\r\n\r\n:host([r-sa1]),\r\n:host([r-sa2]),\r\n:host([r-sa3]),\r\n:host([r-sa4]) {\r\n  margin-right: calc(((var(--rsa) / 12) * 100%) + var(--gap) * (calc(var(--rsa) / 12)));\r\n}\r\n\r\n@each $mediaName, $mediaSize in $mediaSizes {\r\n  $mIndex: list.index(map.keys($mediaSizes), $mediaName);\r\n\r\n  @media (min-width:  #{$mediaSize}) {\r\n    :host([r-ta#{$mIndex}]) {\r\n      text-align: var(--text-align-#{$mediaName});\r\n    }\r\n    :host([r-d#{$mIndex}]) {\r\n      display: var(--display-#{$mediaName});\r\n    }\r\n\r\n    @each $font in $fonts {\r\n      $fIndex: list.index($fonts, $font);\r\n\r\n      :host([r-f#{$mIndex}='#{$fIndex}']) {\r\n        font-size: var(--f#{$fIndex});\r\n      }\r\n    }\r\n    @each $dimension in $dimensions {\r\n      $dIndex: list.index($dimensions, $dimension);\r\n\r\n      .row.gap-#{$mediaName}-#{$dIndex} {\r\n        --gap: var(--d#{$dIndex});\r\n      }\r\n      :host([r-p#{$mIndex}='#{$dIndex}']) {\r\n        padding: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pt#{$mIndex}='#{$dIndex}']) {\r\n        padding-top: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pl#{$mIndex}='#{$dIndex}']) {\r\n        padding-left: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pb#{$mIndex}='#{$dIndex}']) {\r\n        padding-bottom: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pr#{$mIndex}='#{$dIndex}']) {\r\n        padding-right: var(--d#{$dIndex});\r\n      }\r\n      :host([r-m#{$mIndex}='#{$dIndex}']) {\r\n        margin: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mt#{$mIndex}='#{$dIndex}']) {\r\n        margin-top: var(--d#{$dIndex});\r\n      }\r\n      :host([r-ml#{$mIndex}='#{$dIndex}']) {\r\n        margin-left: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mb#{$mIndex}='#{$dIndex}']) {\r\n        margin-bottom: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mr#{$mIndex}='#{$dIndex}']) {\r\n        margin-right: var(--d#{$dIndex});\r\n      }\r\n    }\r\n\r\n    @for $i from 12 through 1 {\r\n      :host([r-or#{$mIndex}='#{$i}']) {\r\n        order: #{$i};\r\n      }\r\n      :host([r-c#{$mIndex}='#{$i}']) {\r\n        --rc: #{$i};\r\n      }\r\n    }\r\n    @for $i from 11 through 0 {\r\n      :host([r-sb#{$mIndex}='#{$i}']) {\r\n        --rsb: #{$i};\r\n      }\r\n      :host([r-sa#{$mIndex}='#{$i}']) {\r\n        --rsa: #{$i};\r\n      }\r\n    }\r\n  }\r\n}\r\n","import gridStyles from \"./grid.scss?inline\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(gridStyles);\r\n\r\nexport default sheet;\r\n","type AttrValues<K extends string> = Partial<Record<K, string | undefined>>;\r\ntype AttrValidations<K extends string> = Record<K, 'boolean' | ((val: string) => string | null)>;\r\n\r\nexport const GlobalValues = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n  'display',\r\n  'font',\r\n  'text-align',\r\n  'padding',\r\n  'padding-top',\r\n  'padding-right',\r\n  'padding-bottom',\r\n  'padding-left',\r\n  'margin',\r\n  'margin-top',\r\n  'margin-right',\r\n  'margin-bottom',\r\n  'margin-left',\r\n] as const;\r\nexport const ObservedGridAttributes = [\r\n  'row',\r\n  'cell',\r\n  'col',\r\n  'display',\r\n  'text-align',\r\n  'order',\r\n  'skip-before',\r\n  'skip-after',\r\n  'gap',\r\n  'padding',\r\n  'font',\r\n] as const;\r\nexport const MediaSizes = ['small', 'medium', 'large', 'xlarge'] as const;\r\nexport const DimensionSizes = ['none', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\nexport const DisplayValues = [\r\n  'none',\r\n  'block',\r\n  'flex',\r\n  'grid',\r\n  'inline',\r\n  'inline-block',\r\n  'inline-flex',\r\n  'inline-grid',\r\n  'flow-root',\r\n  'contents',\r\n  'table',\r\n  'table-row',\r\n  'list-item',\r\n  ...GlobalValues,\r\n] as const;\r\nexport const TextAlignValues = [\r\n  'start',\r\n  'end',\r\n  'left',\r\n  'right',\r\n  'center',\r\n  'justify',\r\n  'match-parent',\r\n] as const;\r\nexport const FontSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\n\r\nexport type ObservedGridAttribute = (typeof ObservedGridAttributes)[number];\r\nexport type ObservedElemAttribute = (typeof ObservedElemAttributes)[number];\r\n\r\nexport type DimensionSize = (typeof DimensionSizes)[number];\r\nexport type DisplayValue = (typeof DisplayValues)[number];\r\nexport type TextAlignValue = (typeof TextAlignValues)[number];\r\nexport type FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute =>\r\n  ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\n\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute =>\r\n  ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\n\r\nconst getValidNumber = (val: string): string | null => {\r\n  const value = parseInt(val.trim());\r\n  return value !== undefined ? String(value) : null;\r\n};\r\n\r\nconst getValidDisplay = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return DisplayValues.includes(value as DisplayValue) ? (value as DisplayValue) : null;\r\n};\r\n\r\nconst getValidDimension = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return DimensionSizes.includes(value as DimensionSize)\r\n    ? String(DimensionSizes.indexOf(value as DimensionSize))\r\n    : null;\r\n};\r\n\r\nconst getValidTextAlign = (val: string): TextAlignValue | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return TextAlignValues.includes(value as TextAlignValue) ? (value as TextAlignValue) : null;\r\n};\r\n\r\nconst getValidFont = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return FontSizes.includes(value as FontSize)\r\n    ? String(FontSizes.indexOf(value as FontSize))\r\n    : null;\r\n};\r\n\r\nexport type GridAttributeValues = AttrValues<ObservedGridAttribute>;\r\nexport type ElemAttributeValues = AttrValues<ObservedElemAttribute>;\r\n\r\nexport const getGridAttributeValue: AttrValidations<ObservedGridAttribute> = {\r\n  row: 'boolean',\r\n  cell: 'boolean',\r\n  'text-align': getValidTextAlign,\r\n  'skip-before': getValidNumber,\r\n  'skip-after': getValidNumber,\r\n  col: getValidNumber,\r\n  gap: getValidDimension,\r\n  font: getValidFont,\r\n  order: getValidNumber,\r\n  display: getValidDisplay,\r\n  padding: getValidDimension,\r\n};\r\n\r\nexport const getElemAttributeValue: AttrValidations<ObservedElemAttribute> = {\r\n  font: getValidFont,\r\n  margin: getValidDimension,\r\n  padding: getValidDimension,\r\n  display: getValidDisplay,\r\n  'text-align': getValidTextAlign,\r\n  'margin-top': getValidDimension,\r\n  'margin-right': getValidDimension,\r\n  'margin-bottom': getValidDimension,\r\n  'margin-left': getValidDimension,\r\n  'padding-top': getValidDimension,\r\n  'padding-right': getValidDimension,\r\n  'padding-bottom': getValidDimension,\r\n  'padding-left': getValidDimension,\r\n};\r\n\r\nexport const gridAttrShort: Record<ObservedGridAttribute, string> = {\r\n  font: 'f',\r\n  padding: 'p',\r\n  display: 'd',\r\n  row: 'row',\r\n  cell: 'cell',\r\n  col: 'c',\r\n  gap: 'g',\r\n  order: 'or',\r\n  'skip-before': 'sb',\r\n  'skip-after': 'sa',\r\n  'text-align': 'ta',\r\n};\r\n\r\nexport const elmAttrShort: Record<ObservedElemAttribute, string> = {\r\n  font: 'f',\r\n  margin: 'm',\r\n  padding: 'p',\r\n  display: 'd',\r\n  'text-align': 'ta',\r\n  'margin-top': 'mt',\r\n  'margin-right': 'mr',\r\n  'margin-bottom': 'mb',\r\n  'margin-left': 'ml',\r\n  'padding-top': 'pt',\r\n  'padding-right': 'pr',\r\n  'padding-bottom': 'pb',\r\n  'padding-left': 'pl',\r\n};\r\n\r\nexport const getClasses = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n) => {\r\n  const classes: string[] = [];\r\n  for (const attr of attrNames) {\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation === 'boolean') {\r\n        classes.push(`${attr}`);\r\n      } else {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            classes.push(`${attr}-${mediaSize}-${value}`);\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return classes;\r\n};\r\n\r\nexport const getHostAttributes = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n  short: Record<K, string>,\r\n) => {\r\n  const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n  for (const attr of attrNames) {\r\n    MediaSizes.forEach((_mediaSize, i) => {\r\n      hostAttributes[`r-${short[attr]}${i + 1}`] = undefined;\r\n    });\r\n\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation === 'boolean') {\r\n        hostAttributes[`r-${attr}`] = attr;\r\n      } else {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            hostAttributes[`r-${short[attr]}${i + 1}`] = value;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return Object.entries(hostAttributes);\r\n};\r\n\r\nexport const getHostCSS = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n) => {\r\n  const hostCSS: Record<string, string | undefined> = {};\r\n\r\n  for (const attr of attrNames) {\r\n    MediaSizes.forEach((mediaSize) => {\r\n      hostCSS[`--${attr}-${mediaSize}`] = undefined;\r\n    });\r\n\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation !== 'boolean') {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            hostCSS[`--${attr}-${mediaSize}`] = value;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return Object.entries(hostCSS);\r\n};\r\n","import sheet from '../grid-style';\r\nimport {\r\n  getClasses,\r\n  getGridAttributeValue as getValues,\r\n  getHostAttributes,\r\n  isGridAttribute,\r\n  ObservedGridAttributes as Attributes,\r\n  getHostCSS,\r\n  gridAttrShort,\r\n} from '../util';\r\nimport type { GridAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} skip-before - skip the given columns before the element for each breakpoint  (Integers)\r\n * @attr {string} skip-after - skip the given columns after the element for each breakpoint  (Integers)\r\n * @attr {string} display - set element's display value for each breakpoint\r\n * @attr {string} padding - set element's padding for each breakpoint (Dimension values)\r\n * @attr {string} order - set element's flex order for each breakpoint (Integers)\r\n * @attr {string} font - set element's font-size for each breakpoint (Font values)\r\n * @attr {string} col - set element's column spans for each breakpoint  (Integers)\r\n * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-grid\r\n */\r\nexport class GridElement extends HTMLElement {\r\n  static observedAttributes = Attributes;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private attr: Partial<GridAttributeValues> = {};\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private readonly mainSlot = (): HTMLSlotElement | null =>\r\n    this.shadowRoot?.querySelector('slot') || null;\r\n  /**\r\n   * @internal\r\n   */\r\n  private readonly container = (): Element | null => this.shadowRoot?.firstElementChild || null;\r\n\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' });\r\n    this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private detectRowChange() {\r\n    const slot = this.mainSlot();\r\n    const container = this.container();\r\n\r\n    if (!slot || !container) return;\r\n\r\n    const tenants = slot.assignedElements();\r\n    const isRow = tenants.some((el) => el.matches('r-grid'));\r\n    const isNowRow = this.attr.row !== 'row' && isRow;\r\n    const noLongerRow = this.attr.row === 'row' && !isRow;\r\n\r\n    if (isNowRow) this.attr.row = 'row';\r\n    if (noLongerRow) delete this.attr.row;\r\n    return isNowRow || noLongerRow;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private detectCellChange() {\r\n    const isCell = this.parentElement?.matches('r-grid');\r\n    const isNowCell = this.attr.cell !== 'cell' && isCell;\r\n    const noLongerCell = this.attr.cell === 'cell' && !isCell;\r\n\r\n    if (isNowCell) this.attr.cell = 'cell';\r\n    if (noLongerCell) delete this.attr.cell;\r\n    return isNowCell || noLongerCell;\r\n  }\r\n\r\n  attributeChangedCallback(name: string, _old: string, value: string) {\r\n    if (isGridAttribute(name)) {\r\n      this.attr[name] = value;\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  connectedMoveCallback() {\r\n    this.detectCellChange();\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.mainSlot()?.addEventListener('slotchange', () => {\r\n      if (this.detectRowChange()) this.render();\r\n    });\r\n\r\n    this.render();\r\n    const hasRowChange = this.detectRowChange();\r\n    const hasCellChange = this.detectCellChange();\r\n    if (hasRowChange || hasCellChange) this.render();\r\n  }\r\n\r\n  render() {\r\n    const classes = getClasses(['row', 'gap'], this.attr, getValues);\r\n    const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, gridAttrShort);\r\n    const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n    hostCSS.forEach(([attr, value]) => {\r\n      if (value) this.style.setProperty(attr, value);\r\n      if (value === undefined) this.style.removeProperty(attr);\r\n    });\r\n\r\n    hostAttributes.forEach(([attr, value]) => {\r\n      if (value) this.setAttribute(attr, value);\r\n      if (value === undefined) this.removeAttribute(attr);\r\n    });\r\n\r\n    this.shadowRoot!.innerHTML = `\r\n      <div class=\"${classes.join(' ')}\"><slot></slot></div>\r\n    `;\r\n  }\r\n}\r\n\r\ncustomElements.define('r-grid', GridElement);\r\n","import sheet from '../grid-style';\r\nimport {\r\n  getElemAttributeValue as getValues,\r\n  getHostAttributes,\r\n  isElemAttribute,\r\n  ObservedElemAttributes as Attributes,\r\n  getHostCSS,\r\n  elmAttrShort,\r\n} from '../util';\r\nimport type { ElemAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} display - set element's display value for each breakpoint, space-separated\r\n * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)\r\n * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin - set element's margin for each breakpoint, space-separated  (Integers)\r\n * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-elm\r\n */\r\nexport class ResponsiveElement extends HTMLElement {\r\n  static observedAttributes = Attributes;\r\n  private attr: Partial<ElemAttributeValues> = {};\r\n\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' });\r\n    this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n  }\r\n\r\n  attributeChangedCallback(name: string, _old: string, value: string) {\r\n    if (isElemAttribute(name)) {\r\n      this.attr[name] = value;\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.render();\r\n  }\r\n\r\n  render() {\r\n    const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, elmAttrShort);\r\n    const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n    hostCSS.forEach(([attr, value]) => {\r\n      if (value) this.style.setProperty(attr, value);\r\n      if (value === undefined) this.style.removeProperty(attr);\r\n    });\r\n\r\n    hostAttributes.forEach(([attr, value]) => {\r\n      if (value) this.setAttribute(attr, value);\r\n      if (value === undefined) this.removeAttribute(attr);\r\n    });\r\n\r\n    this.shadowRoot!.innerHTML = `<slot></slot>`;\r\n  }\r\n}\r\n\r\ncustomElements.define('r-elm', ResponsiveElement);\r\n"],"mappings":"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"}

package/dist/rezel.d.ts

@@ -0,0 +1,156 @@
+import * as React_2 from 'react';
+
+declare type ColumnNumber = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+
+declare type DimensionSize = (typeof DimensionSizes)[number];
+
+declare const DimensionSizes: readonly ["none", "small", "medium", "large", "xlarge", "xxlarge"];
+
+declare type DisplayValue = (typeof DisplayValues)[number];
+
+declare const DisplayValues: readonly ["none", "block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid", "flow-root", "contents", "table", "table-row", "list-item", "inherit", "initial", "revert", "revert-layer", "unset"];
+
+declare type FontSize = (typeof FontSizes)[number];
+
+declare const FontSizes: readonly ["xsmall", "small", "medium", "large", "xlarge", "xxlarge"];
+
+/**
+ * @attr {string} text-align - set element's text alignment for each breakpoint
+ * @attr {string} skip-before - skip the given columns before the element for each breakpoint  (Integers)
+ * @attr {string} skip-after - skip the given columns after the element for each breakpoint  (Integers)
+ * @attr {string} display - set element's display value for each breakpoint
+ * @attr {string} padding - set element's padding for each breakpoint (Dimension values)
+ * @attr {string} order - set element's flex order for each breakpoint (Integers)
+ * @attr {string} font - set element's font-size for each breakpoint (Font values)
+ * @attr {string} col - set element's column spans for each breakpoint  (Integers)
+ * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)
+ *
+ * @summary attributes are space-separated values for each break-point
+ * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-
+ * - Font values: xsmall, small, medium, large, xlarge, xxlarge
+ * - ex:
+ * - font="medium large xlarge"
+ * - col="12 6 4"
+ *
+ * @tag r-grid
+ */
+export declare class GridElement extends HTMLElement {
+    static observedAttributes: readonly ["row", "cell", "col", "display", "text-align", "order", "skip-before", "skip-after", "gap", "padding", "font"];
+    /* Excluded from this release type: attr */
+    /* Excluded from this release type: mainSlot */
+    /* Excluded from this release type: container */
+    constructor();
+    /* Excluded from this release type: detectRowChange */
+    /* Excluded from this release type: detectCellChange */
+    attributeChangedCallback(name: string, _old: string, value: string): void;
+    /* Excluded from this release type: connectedMoveCallback */
+    connectedCallback(): void;
+    render(): void;
+}
+
+declare type Hint<T extends string> = T | `${T} ${string}`;
+
+declare type OffsetNumber = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11';
+
+/**
+ * @attr {string} text-align - set element's text alignment for each breakpoint
+ * @attr {string} display - set element's display value for each breakpoint, space-separated
+ * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)
+ * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)
+ * @attr {string} margin - set element's margin for each breakpoint, space-separated  (Integers)
+ * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)
+ * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)
+ * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)
+ * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)
+ * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)
+ * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)
+ * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)
+ * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)
+ *
+ * @summary attributes are space-separated values for each break-point
+ * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-
+ * - Font values: xsmall, small, medium, large, xlarge, xxlarge
+ * - ex:
+ * - font="medium large xlarge"
+ * - col="12 6 4"
+ *
+ * @tag r-elm
+ */
+export declare class ResponsiveElement extends HTMLElement {
+    static observedAttributes: readonly ["display", "font", "text-align", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin", "margin-top", "margin-right", "margin-bottom", "margin-left"];
+    private attr;
+    constructor();
+    attributeChangedCallback(name: string, _old: string, value: string): void;
+    connectedCallback(): void;
+    render(): void;
+}
+
+export declare type Rezel<T> = React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLElement>, HTMLElement> & T;
+
+export declare interface RezElement {
+    /** set element's text alignment for each breakpoint */
+    'text-align'?: Hint<TextAlignValue>;
+    /** set element's display value, space-separated */
+    display?: Hint<DisplayValue>;
+    /** set element's font-size, space-separated (Font values) */
+    font?: Hint<FontSize>;
+    /** set element's padding, space-separated (Dimension values) */
+    padding?: Hint<DimensionSize>;
+    /** set element's margin, space-separated (Dimension values) */
+    margin?: Hint<DimensionSize>;
+    'margin-top'?: Hint<DimensionSize>;
+    'margin-right'?: Hint<DimensionSize>;
+    'margin-bottom'?: Hint<DimensionSize>;
+    'margin-left'?: Hint<DimensionSize>;
+    'padding-top'?: Hint<DimensionSize>;
+    'padding-right'?: Hint<DimensionSize>;
+    'padding-bottom'?: Hint<DimensionSize>;
+    'padding-left'?: Hint<DimensionSize>;
+}
+
+export declare interface RezGrid {
+    /** set element's text alignment for each breakpoint */
+    'text-align'?: Hint<TextAlignValue>;
+    /** skip the given columns before the element (0 to 11) */
+    'skip-before'?: Hint<OffsetNumber>;
+    /** skip the given columns after the element (0 to 11) */
+    'skip-after'?: Hint<OffsetNumber>;
+    /** set element's display value (e.g., block, flex, none) */
+    display?: Hint<DisplayValue>;
+    /** set element's padding (none, small, medium, large, etc.) */
+    padding?: Hint<DimensionSize>;
+    /** set element's flex order (0-11) */
+    order?: Hint<ColumnNumber>;
+    /** set element's font-size (xsmall to xxlarge) */
+    font?: Hint<FontSize>;
+    /** set element's column spans (1-12) */
+    col?: Hint<ColumnNumber>;
+    /** set element's flex gap (Dimension values) */
+    gap?: Hint<DimensionSize>;
+}
+
+declare type TextAlignValue = (typeof TextAlignValues)[number];
+
+declare const TextAlignValues: readonly ["start", "end", "left", "right", "center", "justify", "match-parent"];
+
+export { }
+
+
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * `<r-grid>`: A responsive grid layout container using space-separated breakpoint values.
+             * * @summary Breakpoints: `[small] [medium] [large] [xlarge]`
+             * @example: <r-grid col="12 6 4" gap="small medium">...</r-grid>
+             */
+            'r-grid': Rezel<RezGrid>;
+            /**
+             * `<r-elm>`: A general purpose responsive element using space-separated breakpoint values.
+             * * @summary Breakpoints: `[small] [medium] [large] [xlarge]`
+             * @example <r-elm margin-top="medium" font="large">...</r-elm>
+             */
+            'r-elm': Rezel<RezElement>;
+        }
+    }
+}

package/dist/{r-grid.es.js → rezel.es.js}

@@ -1,3 +1,4 @@
+import "react";
 var grid_default = ":host{--d0:var(--rezel-dim-none,0px);--d1:var(--rezel-dim-small,4px);--d2:var(--rezel-dim-medium,8px);--d3:var(--rezel-dim-large,16px);--d4:var(--rezel-dim-xlarge,32px);--d5:var(--rezel-dim-xxlarge,64px);--f0:var(--rezel-font-xsmall,12px);--f1:var(--rezel-font-small,14px);--f2:var(--rezel-font-medium,16px);--f3:var(--rezel-font-large,24px);--f4:var(--rezel-font-xlarge,32px);--f5:var(--rezel-font-xxlarge,40px);display:block;box-sizing:border-box!important}slot{display:contents!important}.row{box-sizing:border-box;justify-content:flex-start;gap:var(--gap);--gap:0px;flex-flow:wrap;margin:0;padding:0;display:flex}.cell{box-sizing:border-box}:host([r-cell]){flex:auto}::slotted(hr){width:100%}:host([r-c1]),:host([r-c2]),:host([r-c3]),:host([r-c4]){max-width:calc(var(--rc)/12*100% - var(--gap)*(12 - var(--rc))/12);flex:100%}:host([r-sb1]),:host([r-sb2]),:host([r-sb3]),:host([r-sb4]){margin-left:calc(var(--rsb)/12*100% + var(--gap)*var(--rsb)/12)}:host([r-sa1]),:host([r-sa2]),:host([r-sa3]),:host([r-sa4]){margin-right:calc(var(--rsa)/12*100% + var(--gap)*var(--rsa)/12)}@media (min-width:0){:host([r-ta1]){text-align:var(--text-align-small)}:host([r-d1]){display:var(--display-small)}:host([r-f1=\"1\"]){font-size:var(--f1)}:host([r-f1=\"2\"]){font-size:var(--f2)}:host([r-f1=\"3\"]){font-size:var(--f3)}:host([r-f1=\"4\"]){font-size:var(--f4)}:host([r-f1=\"5\"]){font-size:var(--f5)}:host([r-f1=\"6\"]){font-size:var(--f6)}.row.gap-small-1{--gap:var(--d1)}:host([r-p1=\"1\"]){padding:var(--d1)}:host([r-pt1=\"1\"]){padding-top:var(--d1)}:host([r-pl1=\"1\"]){padding-left:var(--d1)}:host([r-pb1=\"1\"]){padding-bottom:var(--d1)}:host([r-pr1=\"1\"]){padding-right:var(--d1)}:host([r-m1=\"1\"]){margin:var(--d1)}:host([r-mt1=\"1\"]){margin-top:var(--d1)}:host([r-ml1=\"1\"]){margin-left:var(--d1)}:host([r-mb1=\"1\"]){margin-bottom:var(--d1)}:host([r-mr1=\"1\"]){margin-right:var(--d1)}.row.gap-small-2{--gap:var(--d2)}:host([r-p1=\"2\"]){padding:var(--d2)}:host([r-pt1=\"2\"]){padding-top:var(--d2)}:host([r-pl1=\"2\"]){padding-left:var(--d2)}:host([r-pb1=\"2\"]){padding-bottom:var(--d2)}:host([r-pr1=\"2\"]){padding-right:var(--d2)}:host([r-m1=\"2\"]){margin:var(--d2)}:host([r-mt1=\"2\"]){margin-top:var(--d2)}:host([r-ml1=\"2\"]){margin-left:var(--d2)}:host([r-mb1=\"2\"]){margin-bottom:var(--d2)}:host([r-mr1=\"2\"]){margin-right:var(--d2)}.row.gap-small-3{--gap:var(--d3)}:host([r-p1=\"3\"]){padding:var(--d3)}:host([r-pt1=\"3\"]){padding-top:var(--d3)}:host([r-pl1=\"3\"]){padding-left:var(--d3)}:host([r-pb1=\"3\"]){padding-bottom:var(--d3)}:host([r-pr1=\"3\"]){padding-right:var(--d3)}:host([r-m1=\"3\"]){margin:var(--d3)}:host([r-mt1=\"3\"]){margin-top:var(--d3)}:host([r-ml1=\"3\"]){margin-left:var(--d3)}:host([r-mb1=\"3\"]){margin-bottom:var(--d3)}:host([r-mr1=\"3\"]){margin-right:var(--d3)}.row.gap-small-4{--gap:var(--d4)}:host([r-p1=\"4\"]){padding:var(--d4)}:host([r-pt1=\"4\"]){padding-top:var(--d4)}:host([r-pl1=\"4\"]){padding-left:var(--d4)}:host([r-pb1=\"4\"]){padding-bottom:var(--d4)}:host([r-pr1=\"4\"]){padding-right:var(--d4)}:host([r-m1=\"4\"]){margin:var(--d4)}:host([r-mt1=\"4\"]){margin-top:var(--d4)}:host([r-ml1=\"4\"]){margin-left:var(--d4)}:host([r-mb1=\"4\"]){margin-bottom:var(--d4)}:host([r-mr1=\"4\"]){margin-right:var(--d4)}.row.gap-small-5{--gap:var(--d5)}:host([r-p1=\"5\"]){padding:var(--d5)}:host([r-pt1=\"5\"]){padding-top:var(--d5)}:host([r-pl1=\"5\"]){padding-left:var(--d5)}:host([r-pb1=\"5\"]){padding-bottom:var(--d5)}:host([r-pr1=\"5\"]){padding-right:var(--d5)}:host([r-m1=\"5\"]){margin:var(--d5)}:host([r-mt1=\"5\"]){margin-top:var(--d5)}:host([r-ml1=\"5\"]){margin-left:var(--d5)}:host([r-mb1=\"5\"]){margin-bottom:var(--d5)}:host([r-mr1=\"5\"]){margin-right:var(--d5)}.row.gap-small-6{--gap:var(--d6)}:host([r-p1=\"6\"]){padding:var(--d6)}:host([r-pt1=\"6\"]){padding-top:var(--d6)}:host([r-pl1=\"6\"]){padding-left:var(--d6)}:host([r-pb1=\"6\"]){padding-bottom:var(--d6)}:host([r-pr1=\"6\"]){padding-right:var(--d6)}:host([r-m1=\"6\"]){margin:var(--d6)}:host([r-mt1=\"6\"]){margin-top:var(--d6)}:host([r-ml1=\"6\"]){margin-left:var(--d6)}:host([r-mb1=\"6\"]){margin-bottom:var(--d6)}:host([r-mr1=\"6\"]){margin-right:var(--d6)}:host([r-or1=\"12\"]){order:12}:host([r-c1=\"12\"]){--rc:12}:host([r-or1=\"11\"]){order:11}:host([r-c1=\"11\"]){--rc:11}:host([r-or1=\"10\"]){order:10}:host([r-c1=\"10\"]){--rc:10}:host([r-or1=\"9\"]){order:9}:host([r-c1=\"9\"]){--rc:9}:host([r-or1=\"8\"]){order:8}:host([r-c1=\"8\"]){--rc:8}:host([r-or1=\"7\"]){order:7}:host([r-c1=\"7\"]){--rc:7}:host([r-or1=\"6\"]){order:6}:host([r-c1=\"6\"]){--rc:6}:host([r-or1=\"5\"]){order:5}:host([r-c1=\"5\"]){--rc:5}:host([r-or1=\"4\"]){order:4}:host([r-c1=\"4\"]){--rc:4}:host([r-or1=\"3\"]){order:3}:host([r-c1=\"3\"]){--rc:3}:host([r-or1=\"2\"]){order:2}:host([r-c1=\"2\"]){--rc:2}:host([r-or1=\"1\"]){order:1}:host([r-c1=\"1\"]){--rc:1}:host([r-sb1=\"11\"]){--rsb:11}:host([r-sa1=\"11\"]){--rsa:11}:host([r-sb1=\"10\"]){--rsb:10}:host([r-sa1=\"10\"]){--rsa:10}:host([r-sb1=\"9\"]){--rsb:9}:host([r-sa1=\"9\"]){--rsa:9}:host([r-sb1=\"8\"]){--rsb:8}:host([r-sa1=\"8\"]){--rsa:8}:host([r-sb1=\"7\"]){--rsb:7}:host([r-sa1=\"7\"]){--rsa:7}:host([r-sb1=\"6\"]){--rsb:6}:host([r-sa1=\"6\"]){--rsa:6}:host([r-sb1=\"5\"]){--rsb:5}:host([r-sa1=\"5\"]){--rsa:5}:host([r-sb1=\"4\"]){--rsb:4}:host([r-sa1=\"4\"]){--rsa:4}:host([r-sb1=\"3\"]){--rsb:3}:host([r-sa1=\"3\"]){--rsa:3}:host([r-sb1=\"2\"]){--rsb:2}:host([r-sa1=\"2\"]){--rsa:2}:host([r-sb1=\"1\"]){--rsb:1}:host([r-sa1=\"1\"]){--rsa:1}:host([r-sb1=\"0\"]){--rsb:0}:host([r-sa1=\"0\"]){--rsa:0}}@media (min-width:768px){:host([r-ta2]){text-align:var(--text-align-medium)}:host([r-d2]){display:var(--display-medium)}:host([r-f2=\"1\"]){font-size:var(--f1)}:host([r-f2=\"2\"]){font-size:var(--f2)}:host([r-f2=\"3\"]){font-size:var(--f3)}:host([r-f2=\"4\"]){font-size:var(--f4)}:host([r-f2=\"5\"]){font-size:var(--f5)}:host([r-f2=\"6\"]){font-size:var(--f6)}.row.gap-medium-1{--gap:var(--d1)}:host([r-p2=\"1\"]){padding:var(--d1)}:host([r-pt2=\"1\"]){padding-top:var(--d1)}:host([r-pl2=\"1\"]){padding-left:var(--d1)}:host([r-pb2=\"1\"]){padding-bottom:var(--d1)}:host([r-pr2=\"1\"]){padding-right:var(--d1)}:host([r-m2=\"1\"]){margin:var(--d1)}:host([r-mt2=\"1\"]){margin-top:var(--d1)}:host([r-ml2=\"1\"]){margin-left:var(--d1)}:host([r-mb2=\"1\"]){margin-bottom:var(--d1)}:host([r-mr2=\"1\"]){margin-right:var(--d1)}.row.gap-medium-2{--gap:var(--d2)}:host([r-p2=\"2\"]){padding:var(--d2)}:host([r-pt2=\"2\"]){padding-top:var(--d2)}:host([r-pl2=\"2\"]){padding-left:var(--d2)}:host([r-pb2=\"2\"]){padding-bottom:var(--d2)}:host([r-pr2=\"2\"]){padding-right:var(--d2)}:host([r-m2=\"2\"]){margin:var(--d2)}:host([r-mt2=\"2\"]){margin-top:var(--d2)}:host([r-ml2=\"2\"]){margin-left:var(--d2)}:host([r-mb2=\"2\"]){margin-bottom:var(--d2)}:host([r-mr2=\"2\"]){margin-right:var(--d2)}.row.gap-medium-3{--gap:var(--d3)}:host([r-p2=\"3\"]){padding:var(--d3)}:host([r-pt2=\"3\"]){padding-top:var(--d3)}:host([r-pl2=\"3\"]){padding-left:var(--d3)}:host([r-pb2=\"3\"]){padding-bottom:var(--d3)}:host([r-pr2=\"3\"]){padding-right:var(--d3)}:host([r-m2=\"3\"]){margin:var(--d3)}:host([r-mt2=\"3\"]){margin-top:var(--d3)}:host([r-ml2=\"3\"]){margin-left:var(--d3)}:host([r-mb2=\"3\"]){margin-bottom:var(--d3)}:host([r-mr2=\"3\"]){margin-right:var(--d3)}.row.gap-medium-4{--gap:var(--d4)}:host([r-p2=\"4\"]){padding:var(--d4)}:host([r-pt2=\"4\"]){padding-top:var(--d4)}:host([r-pl2=\"4\"]){padding-left:var(--d4)}:host([r-pb2=\"4\"]){padding-bottom:var(--d4)}:host([r-pr2=\"4\"]){padding-right:var(--d4)}:host([r-m2=\"4\"]){margin:var(--d4)}:host([r-mt2=\"4\"]){margin-top:var(--d4)}:host([r-ml2=\"4\"]){margin-left:var(--d4)}:host([r-mb2=\"4\"]){margin-bottom:var(--d4)}:host([r-mr2=\"4\"]){margin-right:var(--d4)}.row.gap-medium-5{--gap:var(--d5)}:host([r-p2=\"5\"]){padding:var(--d5)}:host([r-pt2=\"5\"]){padding-top:var(--d5)}:host([r-pl2=\"5\"]){padding-left:var(--d5)}:host([r-pb2=\"5\"]){padding-bottom:var(--d5)}:host([r-pr2=\"5\"]){padding-right:var(--d5)}:host([r-m2=\"5\"]){margin:var(--d5)}:host([r-mt2=\"5\"]){margin-top:var(--d5)}:host([r-ml2=\"5\"]){margin-left:var(--d5)}:host([r-mb2=\"5\"]){margin-bottom:var(--d5)}:host([r-mr2=\"5\"]){margin-right:var(--d5)}.row.gap-medium-6{--gap:var(--d6)}:host([r-p2=\"6\"]){padding:var(--d6)}:host([r-pt2=\"6\"]){padding-top:var(--d6)}:host([r-pl2=\"6\"]){padding-left:var(--d6)}:host([r-pb2=\"6\"]){padding-bottom:var(--d6)}:host([r-pr2=\"6\"]){padding-right:var(--d6)}:host([r-m2=\"6\"]){margin:var(--d6)}:host([r-mt2=\"6\"]){margin-top:var(--d6)}:host([r-ml2=\"6\"]){margin-left:var(--d6)}:host([r-mb2=\"6\"]){margin-bottom:var(--d6)}:host([r-mr2=\"6\"]){margin-right:var(--d6)}:host([r-or2=\"12\"]){order:12}:host([r-c2=\"12\"]){--rc:12}:host([r-or2=\"11\"]){order:11}:host([r-c2=\"11\"]){--rc:11}:host([r-or2=\"10\"]){order:10}:host([r-c2=\"10\"]){--rc:10}:host([r-or2=\"9\"]){order:9}:host([r-c2=\"9\"]){--rc:9}:host([r-or2=\"8\"]){order:8}:host([r-c2=\"8\"]){--rc:8}:host([r-or2=\"7\"]){order:7}:host([r-c2=\"7\"]){--rc:7}:host([r-or2=\"6\"]){order:6}:host([r-c2=\"6\"]){--rc:6}:host([r-or2=\"5\"]){order:5}:host([r-c2=\"5\"]){--rc:5}:host([r-or2=\"4\"]){order:4}:host([r-c2=\"4\"]){--rc:4}:host([r-or2=\"3\"]){order:3}:host([r-c2=\"3\"]){--rc:3}:host([r-or2=\"2\"]){order:2}:host([r-c2=\"2\"]){--rc:2}:host([r-or2=\"1\"]){order:1}:host([r-c2=\"1\"]){--rc:1}:host([r-sb2=\"11\"]){--rsb:11}:host([r-sa2=\"11\"]){--rsa:11}:host([r-sb2=\"10\"]){--rsb:10}:host([r-sa2=\"10\"]){--rsa:10}:host([r-sb2=\"9\"]){--rsb:9}:host([r-sa2=\"9\"]){--rsa:9}:host([r-sb2=\"8\"]){--rsb:8}:host([r-sa2=\"8\"]){--rsa:8}:host([r-sb2=\"7\"]){--rsb:7}:host([r-sa2=\"7\"]){--rsa:7}:host([r-sb2=\"6\"]){--rsb:6}:host([r-sa2=\"6\"]){--rsa:6}:host([r-sb2=\"5\"]){--rsb:5}:host([r-sa2=\"5\"]){--rsa:5}:host([r-sb2=\"4\"]){--rsb:4}:host([r-sa2=\"4\"]){--rsa:4}:host([r-sb2=\"3\"]){--rsb:3}:host([r-sa2=\"3\"]){--rsa:3}:host([r-sb2=\"2\"]){--rsb:2}:host([r-sa2=\"2\"]){--rsa:2}:host([r-sb2=\"1\"]){--rsb:1}:host([r-sa2=\"1\"]){--rsa:1}:host([r-sb2=\"0\"]){--rsb:0}:host([r-sa2=\"0\"]){--rsa:0}}@media (min-width:1024px){:host([r-ta3]){text-align:var(--text-align-large)}:host([r-d3]){display:var(--display-large)}:host([r-f3=\"1\"]){font-size:var(--f1)}:host([r-f3=\"2\"]){font-size:var(--f2)}:host([r-f3=\"3\"]){font-size:var(--f3)}:host([r-f3=\"4\"]){font-size:var(--f4)}:host([r-f3=\"5\"]){font-size:var(--f5)}:host([r-f3=\"6\"]){font-size:var(--f6)}.row.gap-large-1{--gap:var(--d1)}:host([r-p3=\"1\"]){padding:var(--d1)}:host([r-pt3=\"1\"]){padding-top:var(--d1)}:host([r-pl3=\"1\"]){padding-left:var(--d1)}:host([r-pb3=\"1\"]){padding-bottom:var(--d1)}:host([r-pr3=\"1\"]){padding-right:var(--d1)}:host([r-m3=\"1\"]){margin:var(--d1)}:host([r-mt3=\"1\"]){margin-top:var(--d1)}:host([r-ml3=\"1\"]){margin-left:var(--d1)}:host([r-mb3=\"1\"]){margin-bottom:var(--d1)}:host([r-mr3=\"1\"]){margin-right:var(--d1)}.row.gap-large-2{--gap:var(--d2)}:host([r-p3=\"2\"]){padding:var(--d2)}:host([r-pt3=\"2\"]){padding-top:var(--d2)}:host([r-pl3=\"2\"]){padding-left:var(--d2)}:host([r-pb3=\"2\"]){padding-bottom:var(--d2)}:host([r-pr3=\"2\"]){padding-right:var(--d2)}:host([r-m3=\"2\"]){margin:var(--d2)}:host([r-mt3=\"2\"]){margin-top:var(--d2)}:host([r-ml3=\"2\"]){margin-left:var(--d2)}:host([r-mb3=\"2\"]){margin-bottom:var(--d2)}:host([r-mr3=\"2\"]){margin-right:var(--d2)}.row.gap-large-3{--gap:var(--d3)}:host([r-p3=\"3\"]){padding:var(--d3)}:host([r-pt3=\"3\"]){padding-top:var(--d3)}:host([r-pl3=\"3\"]){padding-left:var(--d3)}:host([r-pb3=\"3\"]){padding-bottom:var(--d3)}:host([r-pr3=\"3\"]){padding-right:var(--d3)}:host([r-m3=\"3\"]){margin:var(--d3)}:host([r-mt3=\"3\"]){margin-top:var(--d3)}:host([r-ml3=\"3\"]){margin-left:var(--d3)}:host([r-mb3=\"3\"]){margin-bottom:var(--d3)}:host([r-mr3=\"3\"]){margin-right:var(--d3)}.row.gap-large-4{--gap:var(--d4)}:host([r-p3=\"4\"]){padding:var(--d4)}:host([r-pt3=\"4\"]){padding-top:var(--d4)}:host([r-pl3=\"4\"]){padding-left:var(--d4)}:host([r-pb3=\"4\"]){padding-bottom:var(--d4)}:host([r-pr3=\"4\"]){padding-right:var(--d4)}:host([r-m3=\"4\"]){margin:var(--d4)}:host([r-mt3=\"4\"]){margin-top:var(--d4)}:host([r-ml3=\"4\"]){margin-left:var(--d4)}:host([r-mb3=\"4\"]){margin-bottom:var(--d4)}:host([r-mr3=\"4\"]){margin-right:var(--d4)}.row.gap-large-5{--gap:var(--d5)}:host([r-p3=\"5\"]){padding:var(--d5)}:host([r-pt3=\"5\"]){padding-top:var(--d5)}:host([r-pl3=\"5\"]){padding-left:var(--d5)}:host([r-pb3=\"5\"]){padding-bottom:var(--d5)}:host([r-pr3=\"5\"]){padding-right:var(--d5)}:host([r-m3=\"5\"]){margin:var(--d5)}:host([r-mt3=\"5\"]){margin-top:var(--d5)}:host([r-ml3=\"5\"]){margin-left:var(--d5)}:host([r-mb3=\"5\"]){margin-bottom:var(--d5)}:host([r-mr3=\"5\"]){margin-right:var(--d5)}.row.gap-large-6{--gap:var(--d6)}:host([r-p3=\"6\"]){padding:var(--d6)}:host([r-pt3=\"6\"]){padding-top:var(--d6)}:host([r-pl3=\"6\"]){padding-left:var(--d6)}:host([r-pb3=\"6\"]){padding-bottom:var(--d6)}:host([r-pr3=\"6\"]){padding-right:var(--d6)}:host([r-m3=\"6\"]){margin:var(--d6)}:host([r-mt3=\"6\"]){margin-top:var(--d6)}:host([r-ml3=\"6\"]){margin-left:var(--d6)}:host([r-mb3=\"6\"]){margin-bottom:var(--d6)}:host([r-mr3=\"6\"]){margin-right:var(--d6)}:host([r-or3=\"12\"]){order:12}:host([r-c3=\"12\"]){--rc:12}:host([r-or3=\"11\"]){order:11}:host([r-c3=\"11\"]){--rc:11}:host([r-or3=\"10\"]){order:10}:host([r-c3=\"10\"]){--rc:10}:host([r-or3=\"9\"]){order:9}:host([r-c3=\"9\"]){--rc:9}:host([r-or3=\"8\"]){order:8}:host([r-c3=\"8\"]){--rc:8}:host([r-or3=\"7\"]){order:7}:host([r-c3=\"7\"]){--rc:7}:host([r-or3=\"6\"]){order:6}:host([r-c3=\"6\"]){--rc:6}:host([r-or3=\"5\"]){order:5}:host([r-c3=\"5\"]){--rc:5}:host([r-or3=\"4\"]){order:4}:host([r-c3=\"4\"]){--rc:4}:host([r-or3=\"3\"]){order:3}:host([r-c3=\"3\"]){--rc:3}:host([r-or3=\"2\"]){order:2}:host([r-c3=\"2\"]){--rc:2}:host([r-or3=\"1\"]){order:1}:host([r-c3=\"1\"]){--rc:1}:host([r-sb3=\"11\"]){--rsb:11}:host([r-sa3=\"11\"]){--rsa:11}:host([r-sb3=\"10\"]){--rsb:10}:host([r-sa3=\"10\"]){--rsa:10}:host([r-sb3=\"9\"]){--rsb:9}:host([r-sa3=\"9\"]){--rsa:9}:host([r-sb3=\"8\"]){--rsb:8}:host([r-sa3=\"8\"]){--rsa:8}:host([r-sb3=\"7\"]){--rsb:7}:host([r-sa3=\"7\"]){--rsa:7}:host([r-sb3=\"6\"]){--rsb:6}:host([r-sa3=\"6\"]){--rsa:6}:host([r-sb3=\"5\"]){--rsb:5}:host([r-sa3=\"5\"]){--rsa:5}:host([r-sb3=\"4\"]){--rsb:4}:host([r-sa3=\"4\"]){--rsa:4}:host([r-sb3=\"3\"]){--rsb:3}:host([r-sa3=\"3\"]){--rsa:3}:host([r-sb3=\"2\"]){--rsb:2}:host([r-sa3=\"2\"]){--rsa:2}:host([r-sb3=\"1\"]){--rsb:1}:host([r-sa3=\"1\"]){--rsa:1}:host([r-sb3=\"0\"]){--rsb:0}:host([r-sa3=\"0\"]){--rsa:0}}@media (min-width:1280px){:host([r-ta4]){text-align:var(--text-align-xlarge)}:host([r-d4]){display:var(--display-xlarge)}:host([r-f4=\"1\"]){font-size:var(--f1)}:host([r-f4=\"2\"]){font-size:var(--f2)}:host([r-f4=\"3\"]){font-size:var(--f3)}:host([r-f4=\"4\"]){font-size:var(--f4)}:host([r-f4=\"5\"]){font-size:var(--f5)}:host([r-f4=\"6\"]){font-size:var(--f6)}.row.gap-xlarge-1{--gap:var(--d1)}:host([r-p4=\"1\"]){padding:var(--d1)}:host([r-pt4=\"1\"]){padding-top:var(--d1)}:host([r-pl4=\"1\"]){padding-left:var(--d1)}:host([r-pb4=\"1\"]){padding-bottom:var(--d1)}:host([r-pr4=\"1\"]){padding-right:var(--d1)}:host([r-m4=\"1\"]){margin:var(--d1)}:host([r-mt4=\"1\"]){margin-top:var(--d1)}:host([r-ml4=\"1\"]){margin-left:var(--d1)}:host([r-mb4=\"1\"]){margin-bottom:var(--d1)}:host([r-mr4=\"1\"]){margin-right:var(--d1)}.row.gap-xlarge-2{--gap:var(--d2)}:host([r-p4=\"2\"]){padding:var(--d2)}:host([r-pt4=\"2\"]){padding-top:var(--d2)}:host([r-pl4=\"2\"]){padding-left:var(--d2)}:host([r-pb4=\"2\"]){padding-bottom:var(--d2)}:host([r-pr4=\"2\"]){padding-right:var(--d2)}:host([r-m4=\"2\"]){margin:var(--d2)}:host([r-mt4=\"2\"]){margin-top:var(--d2)}:host([r-ml4=\"2\"]){margin-left:var(--d2)}:host([r-mb4=\"2\"]){margin-bottom:var(--d2)}:host([r-mr4=\"2\"]){margin-right:var(--d2)}.row.gap-xlarge-3{--gap:var(--d3)}:host([r-p4=\"3\"]){padding:var(--d3)}:host([r-pt4=\"3\"]){padding-top:var(--d3)}:host([r-pl4=\"3\"]){padding-left:var(--d3)}:host([r-pb4=\"3\"]){padding-bottom:var(--d3)}:host([r-pr4=\"3\"]){padding-right:var(--d3)}:host([r-m4=\"3\"]){margin:var(--d3)}:host([r-mt4=\"3\"]){margin-top:var(--d3)}:host([r-ml4=\"3\"]){margin-left:var(--d3)}:host([r-mb4=\"3\"]){margin-bottom:var(--d3)}:host([r-mr4=\"3\"]){margin-right:var(--d3)}.row.gap-xlarge-4{--gap:var(--d4)}:host([r-p4=\"4\"]){padding:var(--d4)}:host([r-pt4=\"4\"]){padding-top:var(--d4)}:host([r-pl4=\"4\"]){padding-left:var(--d4)}:host([r-pb4=\"4\"]){padding-bottom:var(--d4)}:host([r-pr4=\"4\"]){padding-right:var(--d4)}:host([r-m4=\"4\"]){margin:var(--d4)}:host([r-mt4=\"4\"]){margin-top:var(--d4)}:host([r-ml4=\"4\"]){margin-left:var(--d4)}:host([r-mb4=\"4\"]){margin-bottom:var(--d4)}:host([r-mr4=\"4\"]){margin-right:var(--d4)}.row.gap-xlarge-5{--gap:var(--d5)}:host([r-p4=\"5\"]){padding:var(--d5)}:host([r-pt4=\"5\"]){padding-top:var(--d5)}:host([r-pl4=\"5\"]){padding-left:var(--d5)}:host([r-pb4=\"5\"]){padding-bottom:var(--d5)}:host([r-pr4=\"5\"]){padding-right:var(--d5)}:host([r-m4=\"5\"]){margin:var(--d5)}:host([r-mt4=\"5\"]){margin-top:var(--d5)}:host([r-ml4=\"5\"]){margin-left:var(--d5)}:host([r-mb4=\"5\"]){margin-bottom:var(--d5)}:host([r-mr4=\"5\"]){margin-right:var(--d5)}.row.gap-xlarge-6{--gap:var(--d6)}:host([r-p4=\"6\"]){padding:var(--d6)}:host([r-pt4=\"6\"]){padding-top:var(--d6)}:host([r-pl4=\"6\"]){padding-left:var(--d6)}:host([r-pb4=\"6\"]){padding-bottom:var(--d6)}:host([r-pr4=\"6\"]){padding-right:var(--d6)}:host([r-m4=\"6\"]){margin:var(--d6)}:host([r-mt4=\"6\"]){margin-top:var(--d6)}:host([r-ml4=\"6\"]){margin-left:var(--d6)}:host([r-mb4=\"6\"]){margin-bottom:var(--d6)}:host([r-mr4=\"6\"]){margin-right:var(--d6)}:host([r-or4=\"12\"]){order:12}:host([r-c4=\"12\"]){--rc:12}:host([r-or4=\"11\"]){order:11}:host([r-c4=\"11\"]){--rc:11}:host([r-or4=\"10\"]){order:10}:host([r-c4=\"10\"]){--rc:10}:host([r-or4=\"9\"]){order:9}:host([r-c4=\"9\"]){--rc:9}:host([r-or4=\"8\"]){order:8}:host([r-c4=\"8\"]){--rc:8}:host([r-or4=\"7\"]){order:7}:host([r-c4=\"7\"]){--rc:7}:host([r-or4=\"6\"]){order:6}:host([r-c4=\"6\"]){--rc:6}:host([r-or4=\"5\"]){order:5}:host([r-c4=\"5\"]){--rc:5}:host([r-or4=\"4\"]){order:4}:host([r-c4=\"4\"]){--rc:4}:host([r-or4=\"3\"]){order:3}:host([r-c4=\"3\"]){--rc:3}:host([r-or4=\"2\"]){order:2}:host([r-c4=\"2\"]){--rc:2}:host([r-or4=\"1\"]){order:1}:host([r-c4=\"1\"]){--rc:1}:host([r-sb4=\"11\"]){--rsb:11}:host([r-sa4=\"11\"]){--rsa:11}:host([r-sb4=\"10\"]){--rsb:10}:host([r-sa4=\"10\"]){--rsa:10}:host([r-sb4=\"9\"]){--rsb:9}:host([r-sa4=\"9\"]){--rsa:9}:host([r-sb4=\"8\"]){--rsb:8}:host([r-sa4=\"8\"]){--rsa:8}:host([r-sb4=\"7\"]){--rsb:7}:host([r-sa4=\"7\"]){--rsa:7}:host([r-sb4=\"6\"]){--rsb:6}:host([r-sa4=\"6\"]){--rsa:6}:host([r-sb4=\"5\"]){--rsb:5}:host([r-sa4=\"5\"]){--rsa:5}:host([r-sb4=\"4\"]){--rsb:4}:host([r-sa4=\"4\"]){--rsa:4}:host([r-sb4=\"3\"]){--rsb:3}:host([r-sa4=\"3\"]){--rsa:3}:host([r-sb4=\"2\"]){--rsb:2}:host([r-sa4=\"2\"]){--rsa:2}:host([r-sb4=\"1\"]){--rsb:1}:host([r-sa4=\"1\"]){--rsa:1}:host([r-sb4=\"0\"]){--rsb:0}:host([r-sa4=\"0\"]){--rsa:0}}", sheet = new CSSStyleSheet();
 sheet.replaceSync(grid_default);
 var grid_style_default = sheet;
@@ -44,22 +45,17 @@ const GlobalValues = [
 	"medium",
 	"large",
 	"xlarge",
-	"xxlarge",
-	"small-",
-	"medium-",
-	"large-",
-	"xlarge-",
-	"xxlarge-"
+	"xxlarge"
 ], DisplayValues = [
+	"none",
 	"block",
+	"flex",
+	"grid",
 	"inline",
 	"inline-block",
-	"flex",
 	"inline-flex",
-	"grid",
 	"inline-grid",
 	"flow-root",
-	"none",
 	"contents",
 	"table",
 	"table-row",
@@ -251,4 +247,4 @@ var ResponsiveElement = class extends HTMLElement {
 customElements.define("r-elm", ResponsiveElement);
 export { GridElement, ResponsiveElement };
 
-//# sourceMappingURL=r-grid.es.js.map
+//# sourceMappingURL=rezel.es.js.map

package/dist/rezel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rezel.es.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","gridAttrShort: Record<ObservedGridAttribute, string>","elmAttrShort: Record<ObservedElemAttribute, string>","classes: string[]","hostAttributes: Record<string, string | undefined>","hostCSS: Record<string, string | undefined>"],"sources":["../src/grid.scss?inline","../src/grid-style.ts","../src/util.ts","../src/components/grid-element.ts","../src/components/resonsive-element.ts"],"sourcesContent":["@use 'sass:map';\r\n@use 'sass:math';\r\n@use 'sass:list';\r\n\r\n$mediaSizes: (\r\n  small: 0px,\r\n  medium: 768px,\r\n  large: 1024px,\r\n  xlarge: 1280px,\r\n);\r\n$dimensions: 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n\r\n:host {\r\n  --d0: var(--rezel-dim-none, 0px);\r\n  --d1: var(--rezel-dim-small, 4px);\r\n  --d2: var(--rezel-dim-medium, 8px);\r\n  --d3: var(--rezel-dim-large, 16px);\r\n  --d4: var(--rezel-dim-xlarge, 32px);\r\n  --d5: var(--rezel-dim-xxlarge, 64px);\r\n  --f0: var(--rezel-font-xsmall, 12px);\r\n  --f1: var(--rezel-font-small, 14px);\r\n  --f2: var(--rezel-font-medium, 16px);\r\n  --f3: var(--rezel-font-large, 24px);\r\n  --f4: var(--rezel-font-xlarge, 32px);\r\n  --f5: var(--rezel-font-xxlarge, 40px);\r\n  display: block;\r\n  box-sizing: border-box !important;\r\n}\r\n\r\nslot {\r\n  display: contents !important;\r\n}\r\n\r\n.row {\r\n  box-sizing: border-box;\r\n  justify-content: flex-start;\r\n  gap: var(--gap);\r\n  --gap: 0px;\r\n  flex-flow: wrap;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n}\r\n\r\n.cell {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:host([r-cell]) {\r\n  flex: auto;\r\n}\r\n\r\n::slotted(hr) {\r\n  width: 100%;\r\n}\r\n\r\n:host([r-c1]),\r\n:host([r-c2]),\r\n:host([r-c3]),\r\n:host([r-c4]) {\r\n  flex: 100%;\r\n  max-width: calc(((var(--rc) / 12) * 100%) - var(--gap) * (calc((12 - var(--rc)) / 12)));\r\n}\r\n\r\n:host([r-sb1]),\r\n:host([r-sb2]),\r\n:host([r-sb3]),\r\n:host([r-sb4]) {\r\n  margin-left: calc(((var(--rsb) / 12) * 100%) + var(--gap) * (calc(var(--rsb) / 12)));\r\n}\r\n\r\n:host([r-sa1]),\r\n:host([r-sa2]),\r\n:host([r-sa3]),\r\n:host([r-sa4]) {\r\n  margin-right: calc(((var(--rsa) / 12) * 100%) + var(--gap) * (calc(var(--rsa) / 12)));\r\n}\r\n\r\n@each $mediaName, $mediaSize in $mediaSizes {\r\n  $mIndex: list.index(map.keys($mediaSizes), $mediaName);\r\n\r\n  @media (min-width:  #{$mediaSize}) {\r\n    :host([r-ta#{$mIndex}]) {\r\n      text-align: var(--text-align-#{$mediaName});\r\n    }\r\n    :host([r-d#{$mIndex}]) {\r\n      display: var(--display-#{$mediaName});\r\n    }\r\n\r\n    @each $font in $fonts {\r\n      $fIndex: list.index($fonts, $font);\r\n\r\n      :host([r-f#{$mIndex}='#{$fIndex}']) {\r\n        font-size: var(--f#{$fIndex});\r\n      }\r\n    }\r\n    @each $dimension in $dimensions {\r\n      $dIndex: list.index($dimensions, $dimension);\r\n\r\n      .row.gap-#{$mediaName}-#{$dIndex} {\r\n        --gap: var(--d#{$dIndex});\r\n      }\r\n      :host([r-p#{$mIndex}='#{$dIndex}']) {\r\n        padding: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pt#{$mIndex}='#{$dIndex}']) {\r\n        padding-top: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pl#{$mIndex}='#{$dIndex}']) {\r\n        padding-left: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pb#{$mIndex}='#{$dIndex}']) {\r\n        padding-bottom: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pr#{$mIndex}='#{$dIndex}']) {\r\n        padding-right: var(--d#{$dIndex});\r\n      }\r\n      :host([r-m#{$mIndex}='#{$dIndex}']) {\r\n        margin: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mt#{$mIndex}='#{$dIndex}']) {\r\n        margin-top: var(--d#{$dIndex});\r\n      }\r\n      :host([r-ml#{$mIndex}='#{$dIndex}']) {\r\n        margin-left: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mb#{$mIndex}='#{$dIndex}']) {\r\n        margin-bottom: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mr#{$mIndex}='#{$dIndex}']) {\r\n        margin-right: var(--d#{$dIndex});\r\n      }\r\n    }\r\n\r\n    @for $i from 12 through 1 {\r\n      :host([r-or#{$mIndex}='#{$i}']) {\r\n        order: #{$i};\r\n      }\r\n      :host([r-c#{$mIndex}='#{$i}']) {\r\n        --rc: #{$i};\r\n      }\r\n    }\r\n    @for $i from 11 through 0 {\r\n      :host([r-sb#{$mIndex}='#{$i}']) {\r\n        --rsb: #{$i};\r\n      }\r\n      :host([r-sa#{$mIndex}='#{$i}']) {\r\n        --rsa: #{$i};\r\n      }\r\n    }\r\n  }\r\n}\r\n","import gridStyles from \"./grid.scss?inline\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(gridStyles);\r\n\r\nexport default sheet;\r\n","type AttrValues<K extends string> = Partial<Record<K, string | undefined>>;\r\ntype AttrValidations<K extends string> = Record<K, 'boolean' | ((val: string) => string | null)>;\r\n\r\nexport const GlobalValues = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n  'display',\r\n  'font',\r\n  'text-align',\r\n  'padding',\r\n  'padding-top',\r\n  'padding-right',\r\n  'padding-bottom',\r\n  'padding-left',\r\n  'margin',\r\n  'margin-top',\r\n  'margin-right',\r\n  'margin-bottom',\r\n  'margin-left',\r\n] as const;\r\nexport const ObservedGridAttributes = [\r\n  'row',\r\n  'cell',\r\n  'col',\r\n  'display',\r\n  'text-align',\r\n  'order',\r\n  'skip-before',\r\n  'skip-after',\r\n  'gap',\r\n  'padding',\r\n  'font',\r\n] as const;\r\nexport const MediaSizes = ['small', 'medium', 'large', 'xlarge'] as const;\r\nexport const DimensionSizes = ['none', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\nexport const DisplayValues = [\r\n  'none',\r\n  'block',\r\n  'flex',\r\n  'grid',\r\n  'inline',\r\n  'inline-block',\r\n  'inline-flex',\r\n  'inline-grid',\r\n  'flow-root',\r\n  'contents',\r\n  'table',\r\n  'table-row',\r\n  'list-item',\r\n  ...GlobalValues,\r\n] as const;\r\nexport const TextAlignValues = [\r\n  'start',\r\n  'end',\r\n  'left',\r\n  'right',\r\n  'center',\r\n  'justify',\r\n  'match-parent',\r\n] as const;\r\nexport const FontSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\n\r\nexport type ObservedGridAttribute = (typeof ObservedGridAttributes)[number];\r\nexport type ObservedElemAttribute = (typeof ObservedElemAttributes)[number];\r\n\r\nexport type DimensionSize = (typeof DimensionSizes)[number];\r\nexport type DisplayValue = (typeof DisplayValues)[number];\r\nexport type TextAlignValue = (typeof TextAlignValues)[number];\r\nexport type FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute =>\r\n  ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\n\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute =>\r\n  ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\n\r\nconst getValidNumber = (val: string): string | null => {\r\n  const value = parseInt(val.trim());\r\n  return value !== undefined ? String(value) : null;\r\n};\r\n\r\nconst getValidDisplay = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return DisplayValues.includes(value as DisplayValue) ? (value as DisplayValue) : null;\r\n};\r\n\r\nconst getValidDimension = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return DimensionSizes.includes(value as DimensionSize)\r\n    ? String(DimensionSizes.indexOf(value as DimensionSize))\r\n    : null;\r\n};\r\n\r\nconst getValidTextAlign = (val: string): TextAlignValue | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return TextAlignValues.includes(value as TextAlignValue) ? (value as TextAlignValue) : null;\r\n};\r\n\r\nconst getValidFont = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return FontSizes.includes(value as FontSize)\r\n    ? String(FontSizes.indexOf(value as FontSize))\r\n    : null;\r\n};\r\n\r\nexport type GridAttributeValues = AttrValues<ObservedGridAttribute>;\r\nexport type ElemAttributeValues = AttrValues<ObservedElemAttribute>;\r\n\r\nexport const getGridAttributeValue: AttrValidations<ObservedGridAttribute> = {\r\n  row: 'boolean',\r\n  cell: 'boolean',\r\n  'text-align': getValidTextAlign,\r\n  'skip-before': getValidNumber,\r\n  'skip-after': getValidNumber,\r\n  col: getValidNumber,\r\n  gap: getValidDimension,\r\n  font: getValidFont,\r\n  order: getValidNumber,\r\n  display: getValidDisplay,\r\n  padding: getValidDimension,\r\n};\r\n\r\nexport const getElemAttributeValue: AttrValidations<ObservedElemAttribute> = {\r\n  font: getValidFont,\r\n  margin: getValidDimension,\r\n  padding: getValidDimension,\r\n  display: getValidDisplay,\r\n  'text-align': getValidTextAlign,\r\n  'margin-top': getValidDimension,\r\n  'margin-right': getValidDimension,\r\n  'margin-bottom': getValidDimension,\r\n  'margin-left': getValidDimension,\r\n  'padding-top': getValidDimension,\r\n  'padding-right': getValidDimension,\r\n  'padding-bottom': getValidDimension,\r\n  'padding-left': getValidDimension,\r\n};\r\n\r\nexport const gridAttrShort: Record<ObservedGridAttribute, string> = {\r\n  font: 'f',\r\n  padding: 'p',\r\n  display: 'd',\r\n  row: 'row',\r\n  cell: 'cell',\r\n  col: 'c',\r\n  gap: 'g',\r\n  order: 'or',\r\n  'skip-before': 'sb',\r\n  'skip-after': 'sa',\r\n  'text-align': 'ta',\r\n};\r\n\r\nexport const elmAttrShort: Record<ObservedElemAttribute, string> = {\r\n  font: 'f',\r\n  margin: 'm',\r\n  padding: 'p',\r\n  display: 'd',\r\n  'text-align': 'ta',\r\n  'margin-top': 'mt',\r\n  'margin-right': 'mr',\r\n  'margin-bottom': 'mb',\r\n  'margin-left': 'ml',\r\n  'padding-top': 'pt',\r\n  'padding-right': 'pr',\r\n  'padding-bottom': 'pb',\r\n  'padding-left': 'pl',\r\n};\r\n\r\nexport const getClasses = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n) => {\r\n  const classes: string[] = [];\r\n  for (const attr of attrNames) {\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation === 'boolean') {\r\n        classes.push(`${attr}`);\r\n      } else {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            classes.push(`${attr}-${mediaSize}-${value}`);\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return classes;\r\n};\r\n\r\nexport const getHostAttributes = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n  short: Record<K, string>,\r\n) => {\r\n  const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n  for (const attr of attrNames) {\r\n    MediaSizes.forEach((_mediaSize, i) => {\r\n      hostAttributes[`r-${short[attr]}${i + 1}`] = undefined;\r\n    });\r\n\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation === 'boolean') {\r\n        hostAttributes[`r-${attr}`] = attr;\r\n      } else {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            hostAttributes[`r-${short[attr]}${i + 1}`] = value;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return Object.entries(hostAttributes);\r\n};\r\n\r\nexport const getHostCSS = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n) => {\r\n  const hostCSS: Record<string, string | undefined> = {};\r\n\r\n  for (const attr of attrNames) {\r\n    MediaSizes.forEach((mediaSize) => {\r\n      hostCSS[`--${attr}-${mediaSize}`] = undefined;\r\n    });\r\n\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation !== 'boolean') {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            hostCSS[`--${attr}-${mediaSize}`] = value;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return Object.entries(hostCSS);\r\n};\r\n","import sheet from '../grid-style';\r\nimport {\r\n  getClasses,\r\n  getGridAttributeValue as getValues,\r\n  getHostAttributes,\r\n  isGridAttribute,\r\n  ObservedGridAttributes as Attributes,\r\n  getHostCSS,\r\n  gridAttrShort,\r\n} from '../util';\r\nimport type { GridAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} skip-before - skip the given columns before the element for each breakpoint  (Integers)\r\n * @attr {string} skip-after - skip the given columns after the element for each breakpoint  (Integers)\r\n * @attr {string} display - set element's display value for each breakpoint\r\n * @attr {string} padding - set element's padding for each breakpoint (Dimension values)\r\n * @attr {string} order - set element's flex order for each breakpoint (Integers)\r\n * @attr {string} font - set element's font-size for each breakpoint (Font values)\r\n * @attr {string} col - set element's column spans for each breakpoint  (Integers)\r\n * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-grid\r\n */\r\nexport class GridElement extends HTMLElement {\r\n  static observedAttributes = Attributes;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private attr: Partial<GridAttributeValues> = {};\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private readonly mainSlot = (): HTMLSlotElement | null =>\r\n    this.shadowRoot?.querySelector('slot') || null;\r\n  /**\r\n   * @internal\r\n   */\r\n  private readonly container = (): Element | null => this.shadowRoot?.firstElementChild || null;\r\n\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' });\r\n    this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private detectRowChange() {\r\n    const slot = this.mainSlot();\r\n    const container = this.container();\r\n\r\n    if (!slot || !container) return;\r\n\r\n    const tenants = slot.assignedElements();\r\n    const isRow = tenants.some((el) => el.matches('r-grid'));\r\n    const isNowRow = this.attr.row !== 'row' && isRow;\r\n    const noLongerRow = this.attr.row === 'row' && !isRow;\r\n\r\n    if (isNowRow) this.attr.row = 'row';\r\n    if (noLongerRow) delete this.attr.row;\r\n    return isNowRow || noLongerRow;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private detectCellChange() {\r\n    const isCell = this.parentElement?.matches('r-grid');\r\n    const isNowCell = this.attr.cell !== 'cell' && isCell;\r\n    const noLongerCell = this.attr.cell === 'cell' && !isCell;\r\n\r\n    if (isNowCell) this.attr.cell = 'cell';\r\n    if (noLongerCell) delete this.attr.cell;\r\n    return isNowCell || noLongerCell;\r\n  }\r\n\r\n  attributeChangedCallback(name: string, _old: string, value: string) {\r\n    if (isGridAttribute(name)) {\r\n      this.attr[name] = value;\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  connectedMoveCallback() {\r\n    this.detectCellChange();\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.mainSlot()?.addEventListener('slotchange', () => {\r\n      if (this.detectRowChange()) this.render();\r\n    });\r\n\r\n    this.render();\r\n    const hasRowChange = this.detectRowChange();\r\n    const hasCellChange = this.detectCellChange();\r\n    if (hasRowChange || hasCellChange) this.render();\r\n  }\r\n\r\n  render() {\r\n    const classes = getClasses(['row', 'gap'], this.attr, getValues);\r\n    const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, gridAttrShort);\r\n    const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n    hostCSS.forEach(([attr, value]) => {\r\n      if (value) this.style.setProperty(attr, value);\r\n      if (value === undefined) this.style.removeProperty(attr);\r\n    });\r\n\r\n    hostAttributes.forEach(([attr, value]) => {\r\n      if (value) this.setAttribute(attr, value);\r\n      if (value === undefined) this.removeAttribute(attr);\r\n    });\r\n\r\n    this.shadowRoot!.innerHTML = `\r\n      <div class=\"${classes.join(' ')}\"><slot></slot></div>\r\n    `;\r\n  }\r\n}\r\n\r\ncustomElements.define('r-grid', GridElement);\r\n","import sheet from '../grid-style';\r\nimport {\r\n  getElemAttributeValue as getValues,\r\n  getHostAttributes,\r\n  isElemAttribute,\r\n  ObservedElemAttributes as Attributes,\r\n  getHostCSS,\r\n  elmAttrShort,\r\n} from '../util';\r\nimport type { ElemAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} display - set element's display value for each breakpoint, space-separated\r\n * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)\r\n * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin - set element's margin for each breakpoint, space-separated  (Integers)\r\n * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-elm\r\n */\r\nexport class ResponsiveElement extends HTMLElement {\r\n  static observedAttributes = Attributes;\r\n  private attr: Partial<ElemAttributeValues> = {};\r\n\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' });\r\n    this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n  }\r\n\r\n  attributeChangedCallback(name: string, _old: string, value: string) {\r\n    if (isElemAttribute(name)) {\r\n      this.attr[name] = value;\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.render();\r\n  }\r\n\r\n  render() {\r\n    const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, elmAttrShort);\r\n    const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n    hostCSS.forEach(([attr, value]) => {\r\n      if (value) this.style.setProperty(attr, value);\r\n      if (value === undefined) this.style.removeProperty(attr);\r\n    });\r\n\r\n    hostAttributes.forEach(([attr, value]) => {\r\n      if (value) this.setAttribute(attr, value);\r\n      if (value === undefined) this.removeAttribute(attr);\r\n    });\r\n\r\n    this.shadowRoot!.innerHTML = `<slot></slot>`;\r\n  }\r\n}\r\n\r\ncustomElements.define('r-elm', ResponsiveElement);\r\n"],"mappings":"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"}

package/package.json

@@ -1,26 +1,38 @@
 {
   "name": "rezel",
   "description": "custom elements with responsive attributes",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "files": [
     "dist"
   ],
-  "main": "./dist/r-grid.cjs.js",
-  "module": "./dist/r-grid.es.js",
+  "main": "./dist/rezel.cjs.js",
+  "module": "./dist/rezel.es.js",
+  "types": "./dist/rezel.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/rezel.d.ts",
+      "import": "./dist/rezel.es.js",
+      "require": "./dist/rezel.cjs.js"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build-manifest": "custom-elements-manifest analyze",
+    "tsc": "tsc",
     "build": "tsc && npm run build-manifest && vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@types/node": "^25.0.3",
+    "@types/react": "18.2.38",
+    "@types/react-dom": "18.2.15",
     "eslint": "^9.39.2",
     "sass": "^1.95.1",
     "typescript": "~5.9.3",
-    "vite": "npm:rolldown-vite@7.2.5"
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vite-plugin-dts": "^4.5.4"
   },
   "overrides": {
     "vite": "npm:rolldown-vite@7.2.5"

package/dist/r-grid.cjs.js

@@ -1,4 +0,0 @@
-var e=`:host{--d0:var(--rezel-dim-none,0px);--d1:var(--rezel-dim-small,4px);--d2:var(--rezel-dim-medium,8px);--d3:var(--rezel-dim-large,16px);--d4:var(--rezel-dim-xlarge,32px);--d5:var(--rezel-dim-xxlarge,64px);--f0:var(--rezel-font-xsmall,12px);--f1:var(--rezel-font-small,14px);--f2:var(--rezel-font-medium,16px);--f3:var(--rezel-font-large,24px);--f4:var(--rezel-font-xlarge,32px);--f5:var(--rezel-font-xxlarge,40px);display:block;box-sizing:border-box!important}slot{display:contents!important}.row{box-sizing:border-box;justify-content:flex-start;gap:var(--gap);--gap:0px;flex-flow:wrap;margin:0;padding:0;display:flex}.cell{box-sizing:border-box}:host([r-cell]){flex:auto}::slotted(hr){width:100%}:host([r-c1]),:host([r-c2]),:host([r-c3]),:host([r-c4]){max-width:calc(var(--rc)/12*100% - var(--gap)*(12 - var(--rc))/12);flex:100%}:host([r-sb1]),:host([r-sb2]),:host([r-sb3]),:host([r-sb4]){margin-left:calc(var(--rsb)/12*100% + var(--gap)*var(--rsb)/12)}:host([r-sa1]),:host([r-sa2]),:host([r-sa3]),:host([r-sa4]){margin-right:calc(var(--rsa)/12*100% + var(--gap)*var(--rsa)/12)}@media (min-width:0){:host([r-ta1]){text-align:var(--text-align-small)}:host([r-d1]){display:var(--display-small)}:host([r-f1="1"]){font-size:var(--f1)}:host([r-f1="2"]){font-size:var(--f2)}:host([r-f1="3"]){font-size:var(--f3)}:host([r-f1="4"]){font-size:var(--f4)}:host([r-f1="5"]){font-size:var(--f5)}:host([r-f1="6"]){font-size:var(--f6)}.row.gap-small-1{--gap:var(--d1)}:host([r-p1="1"]){padding:var(--d1)}:host([r-pt1="1"]){padding-top:var(--d1)}:host([r-pl1="1"]){padding-left:var(--d1)}:host([r-pb1="1"]){padding-bottom:var(--d1)}:host([r-pr1="1"]){padding-right:var(--d1)}:host([r-m1="1"]){margin:var(--d1)}:host([r-mt1="1"]){margin-top:var(--d1)}:host([r-ml1="1"]){margin-left:var(--d1)}:host([r-mb1="1"]){margin-bottom:var(--d1)}:host([r-mr1="1"]){margin-right:var(--d1)}.row.gap-small-2{--gap:var(--d2)}:host([r-p1="2"]){padding:var(--d2)}:host([r-pt1="2"]){padding-top:var(--d2)}:host([r-pl1="2"]){padding-left:var(--d2)}:host([r-pb1="2"]){padding-bottom:var(--d2)}:host([r-pr1="2"]){padding-right:var(--d2)}:host([r-m1="2"]){margin:var(--d2)}:host([r-mt1="2"]){margin-top:var(--d2)}:host([r-ml1="2"]){margin-left:var(--d2)}:host([r-mb1="2"]){margin-bottom:var(--d2)}:host([r-mr1="2"]){margin-right:var(--d2)}.row.gap-small-3{--gap:var(--d3)}:host([r-p1="3"]){padding:var(--d3)}:host([r-pt1="3"]){padding-top:var(--d3)}:host([r-pl1="3"]){padding-left:var(--d3)}:host([r-pb1="3"]){padding-bottom:var(--d3)}:host([r-pr1="3"]){padding-right:var(--d3)}:host([r-m1="3"]){margin:var(--d3)}:host([r-mt1="3"]){margin-top:var(--d3)}:host([r-ml1="3"]){margin-left:var(--d3)}:host([r-mb1="3"]){margin-bottom:var(--d3)}:host([r-mr1="3"]){margin-right:var(--d3)}.row.gap-small-4{--gap:var(--d4)}:host([r-p1="4"]){padding:var(--d4)}:host([r-pt1="4"]){padding-top:var(--d4)}:host([r-pl1="4"]){padding-left:var(--d4)}:host([r-pb1="4"]){padding-bottom:var(--d4)}:host([r-pr1="4"]){padding-right:var(--d4)}:host([r-m1="4"]){margin:var(--d4)}:host([r-mt1="4"]){margin-top:var(--d4)}:host([r-ml1="4"]){margin-left:var(--d4)}:host([r-mb1="4"]){margin-bottom:var(--d4)}:host([r-mr1="4"]){margin-right:var(--d4)}.row.gap-small-5{--gap:var(--d5)}:host([r-p1="5"]){padding:var(--d5)}:host([r-pt1="5"]){padding-top:var(--d5)}:host([r-pl1="5"]){padding-left:var(--d5)}:host([r-pb1="5"]){padding-bottom:var(--d5)}:host([r-pr1="5"]){padding-right:var(--d5)}:host([r-m1="5"]){margin:var(--d5)}:host([r-mt1="5"]){margin-top:var(--d5)}:host([r-ml1="5"]){margin-left:var(--d5)}:host([r-mb1="5"]){margin-bottom:var(--d5)}:host([r-mr1="5"]){margin-right:var(--d5)}.row.gap-small-6{--gap:var(--d6)}:host([r-p1="6"]){padding:var(--d6)}:host([r-pt1="6"]){padding-top:var(--d6)}:host([r-pl1="6"]){padding-left:var(--d6)}:host([r-pb1="6"]){padding-bottom:var(--d6)}:host([r-pr1="6"]){padding-right:var(--d6)}:host([r-m1="6"]){margin:var(--d6)}:host([r-mt1="6"]){margin-top:var(--d6)}:host([r-ml1="6"]){margin-left:var(--d6)}:host([r-mb1="6"]){margin-bottom:var(--d6)}:host([r-mr1="6"]){margin-right:var(--d6)}:host([r-or1="12"]){order:12}:host([r-c1="12"]){--rc:12}:host([r-or1="11"]){order:11}:host([r-c1="11"]){--rc:11}:host([r-or1="10"]){order:10}:host([r-c1="10"]){--rc:10}:host([r-or1="9"]){order:9}:host([r-c1="9"]){--rc:9}:host([r-or1="8"]){order:8}:host([r-c1="8"]){--rc:8}:host([r-or1="7"]){order:7}:host([r-c1="7"]){--rc:7}:host([r-or1="6"]){order:6}:host([r-c1="6"]){--rc:6}:host([r-or1="5"]){order:5}:host([r-c1="5"]){--rc:5}:host([r-or1="4"]){order:4}:host([r-c1="4"]){--rc:4}:host([r-or1="3"]){order:3}:host([r-c1="3"]){--rc:3}:host([r-or1="2"]){order:2}:host([r-c1="2"]){--rc:2}:host([r-or1="1"]){order:1}:host([r-c1="1"]){--rc:1}:host([r-sb1="11"]){--rsb:11}:host([r-sa1="11"]){--rsa:11}:host([r-sb1="10"]){--rsb:10}:host([r-sa1="10"]){--rsa:10}:host([r-sb1="9"]){--rsb:9}:host([r-sa1="9"]){--rsa:9}:host([r-sb1="8"]){--rsb:8}:host([r-sa1="8"]){--rsa:8}:host([r-sb1="7"]){--rsb:7}:host([r-sa1="7"]){--rsa:7}:host([r-sb1="6"]){--rsb:6}:host([r-sa1="6"]){--rsa:6}:host([r-sb1="5"]){--rsb:5}:host([r-sa1="5"]){--rsa:5}:host([r-sb1="4"]){--rsb:4}:host([r-sa1="4"]){--rsa:4}:host([r-sb1="3"]){--rsb:3}:host([r-sa1="3"]){--rsa:3}:host([r-sb1="2"]){--rsb:2}:host([r-sa1="2"]){--rsa:2}:host([r-sb1="1"]){--rsb:1}:host([r-sa1="1"]){--rsa:1}:host([r-sb1="0"]){--rsb:0}:host([r-sa1="0"]){--rsa:0}}@media (min-width:768px){:host([r-ta2]){text-align:var(--text-align-medium)}:host([r-d2]){display:var(--display-medium)}:host([r-f2="1"]){font-size:var(--f1)}:host([r-f2="2"]){font-size:var(--f2)}:host([r-f2="3"]){font-size:var(--f3)}:host([r-f2="4"]){font-size:var(--f4)}:host([r-f2="5"]){font-size:var(--f5)}:host([r-f2="6"]){font-size:var(--f6)}.row.gap-medium-1{--gap:var(--d1)}:host([r-p2="1"]){padding:var(--d1)}:host([r-pt2="1"]){padding-top:var(--d1)}:host([r-pl2="1"]){padding-left:var(--d1)}:host([r-pb2="1"]){padding-bottom:var(--d1)}:host([r-pr2="1"]){padding-right:var(--d1)}:host([r-m2="1"]){margin:var(--d1)}:host([r-mt2="1"]){margin-top:var(--d1)}:host([r-ml2="1"]){margin-left:var(--d1)}:host([r-mb2="1"]){margin-bottom:var(--d1)}:host([r-mr2="1"]){margin-right:var(--d1)}.row.gap-medium-2{--gap:var(--d2)}:host([r-p2="2"]){padding:var(--d2)}:host([r-pt2="2"]){padding-top:var(--d2)}:host([r-pl2="2"]){padding-left:var(--d2)}:host([r-pb2="2"]){padding-bottom:var(--d2)}:host([r-pr2="2"]){padding-right:var(--d2)}:host([r-m2="2"]){margin:var(--d2)}:host([r-mt2="2"]){margin-top:var(--d2)}:host([r-ml2="2"]){margin-left:var(--d2)}:host([r-mb2="2"]){margin-bottom:var(--d2)}:host([r-mr2="2"]){margin-right:var(--d2)}.row.gap-medium-3{--gap:var(--d3)}:host([r-p2="3"]){padding:var(--d3)}:host([r-pt2="3"]){padding-top:var(--d3)}:host([r-pl2="3"]){padding-left:var(--d3)}:host([r-pb2="3"]){padding-bottom:var(--d3)}:host([r-pr2="3"]){padding-right:var(--d3)}:host([r-m2="3"]){margin:var(--d3)}:host([r-mt2="3"]){margin-top:var(--d3)}:host([r-ml2="3"]){margin-left:var(--d3)}:host([r-mb2="3"]){margin-bottom:var(--d3)}:host([r-mr2="3"]){margin-right:var(--d3)}.row.gap-medium-4{--gap:var(--d4)}:host([r-p2="4"]){padding:var(--d4)}:host([r-pt2="4"]){padding-top:var(--d4)}:host([r-pl2="4"]){padding-left:var(--d4)}:host([r-pb2="4"]){padding-bottom:var(--d4)}:host([r-pr2="4"]){padding-right:var(--d4)}:host([r-m2="4"]){margin:var(--d4)}:host([r-mt2="4"]){margin-top:var(--d4)}:host([r-ml2="4"]){margin-left:var(--d4)}:host([r-mb2="4"]){margin-bottom:var(--d4)}:host([r-mr2="4"]){margin-right:var(--d4)}.row.gap-medium-5{--gap:var(--d5)}:host([r-p2="5"]){padding:var(--d5)}:host([r-pt2="5"]){padding-top:var(--d5)}:host([r-pl2="5"]){padding-left:var(--d5)}:host([r-pb2="5"]){padding-bottom:var(--d5)}:host([r-pr2="5"]){padding-right:var(--d5)}:host([r-m2="5"]){margin:var(--d5)}:host([r-mt2="5"]){margin-top:var(--d5)}:host([r-ml2="5"]){margin-left:var(--d5)}:host([r-mb2="5"]){margin-bottom:var(--d5)}:host([r-mr2="5"]){margin-right:var(--d5)}.row.gap-medium-6{--gap:var(--d6)}:host([r-p2="6"]){padding:var(--d6)}:host([r-pt2="6"]){padding-top:var(--d6)}:host([r-pl2="6"]){padding-left:var(--d6)}:host([r-pb2="6"]){padding-bottom:var(--d6)}:host([r-pr2="6"]){padding-right:var(--d6)}:host([r-m2="6"]){margin:var(--d6)}:host([r-mt2="6"]){margin-top:var(--d6)}:host([r-ml2="6"]){margin-left:var(--d6)}:host([r-mb2="6"]){margin-bottom:var(--d6)}:host([r-mr2="6"]){margin-right:var(--d6)}:host([r-or2="12"]){order:12}:host([r-c2="12"]){--rc:12}:host([r-or2="11"]){order:11}:host([r-c2="11"]){--rc:11}:host([r-or2="10"]){order:10}:host([r-c2="10"]){--rc:10}:host([r-or2="9"]){order:9}:host([r-c2="9"]){--rc:9}:host([r-or2="8"]){order:8}:host([r-c2="8"]){--rc:8}:host([r-or2="7"]){order:7}:host([r-c2="7"]){--rc:7}:host([r-or2="6"]){order:6}:host([r-c2="6"]){--rc:6}:host([r-or2="5"]){order:5}:host([r-c2="5"]){--rc:5}:host([r-or2="4"]){order:4}:host([r-c2="4"]){--rc:4}:host([r-or2="3"]){order:3}:host([r-c2="3"]){--rc:3}:host([r-or2="2"]){order:2}:host([r-c2="2"]){--rc:2}:host([r-or2="1"]){order:1}:host([r-c2="1"]){--rc:1}:host([r-sb2="11"]){--rsb:11}:host([r-sa2="11"]){--rsa:11}:host([r-sb2="10"]){--rsb:10}:host([r-sa2="10"]){--rsa:10}:host([r-sb2="9"]){--rsb:9}:host([r-sa2="9"]){--rsa:9}:host([r-sb2="8"]){--rsb:8}:host([r-sa2="8"]){--rsa:8}:host([r-sb2="7"]){--rsb:7}:host([r-sa2="7"]){--rsa:7}:host([r-sb2="6"]){--rsb:6}:host([r-sa2="6"]){--rsa:6}:host([r-sb2="5"]){--rsb:5}:host([r-sa2="5"]){--rsa:5}:host([r-sb2="4"]){--rsb:4}:host([r-sa2="4"]){--rsa:4}:host([r-sb2="3"]){--rsb:3}:host([r-sa2="3"]){--rsa:3}:host([r-sb2="2"]){--rsb:2}:host([r-sa2="2"]){--rsa:2}:host([r-sb2="1"]){--rsb:1}:host([r-sa2="1"]){--rsa:1}:host([r-sb2="0"]){--rsb:0}:host([r-sa2="0"]){--rsa:0}}@media (min-width:1024px){:host([r-ta3]){text-align:var(--text-align-large)}:host([r-d3]){display:var(--display-large)}:host([r-f3="1"]){font-size:var(--f1)}:host([r-f3="2"]){font-size:var(--f2)}:host([r-f3="3"]){font-size:var(--f3)}:host([r-f3="4"]){font-size:var(--f4)}:host([r-f3="5"]){font-size:var(--f5)}:host([r-f3="6"]){font-size:var(--f6)}.row.gap-large-1{--gap:var(--d1)}:host([r-p3="1"]){padding:var(--d1)}:host([r-pt3="1"]){padding-top:var(--d1)}:host([r-pl3="1"]){padding-left:var(--d1)}:host([r-pb3="1"]){padding-bottom:var(--d1)}:host([r-pr3="1"]){padding-right:var(--d1)}:host([r-m3="1"]){margin:var(--d1)}:host([r-mt3="1"]){margin-top:var(--d1)}:host([r-ml3="1"]){margin-left:var(--d1)}:host([r-mb3="1"]){margin-bottom:var(--d1)}:host([r-mr3="1"]){margin-right:var(--d1)}.row.gap-large-2{--gap:var(--d2)}:host([r-p3="2"]){padding:var(--d2)}:host([r-pt3="2"]){padding-top:var(--d2)}:host([r-pl3="2"]){padding-left:var(--d2)}:host([r-pb3="2"]){padding-bottom:var(--d2)}:host([r-pr3="2"]){padding-right:var(--d2)}:host([r-m3="2"]){margin:var(--d2)}:host([r-mt3="2"]){margin-top:var(--d2)}:host([r-ml3="2"]){margin-left:var(--d2)}:host([r-mb3="2"]){margin-bottom:var(--d2)}:host([r-mr3="2"]){margin-right:var(--d2)}.row.gap-large-3{--gap:var(--d3)}:host([r-p3="3"]){padding:var(--d3)}:host([r-pt3="3"]){padding-top:var(--d3)}:host([r-pl3="3"]){padding-left:var(--d3)}:host([r-pb3="3"]){padding-bottom:var(--d3)}:host([r-pr3="3"]){padding-right:var(--d3)}:host([r-m3="3"]){margin:var(--d3)}:host([r-mt3="3"]){margin-top:var(--d3)}:host([r-ml3="3"]){margin-left:var(--d3)}:host([r-mb3="3"]){margin-bottom:var(--d3)}:host([r-mr3="3"]){margin-right:var(--d3)}.row.gap-large-4{--gap:var(--d4)}:host([r-p3="4"]){padding:var(--d4)}:host([r-pt3="4"]){padding-top:var(--d4)}:host([r-pl3="4"]){padding-left:var(--d4)}:host([r-pb3="4"]){padding-bottom:var(--d4)}:host([r-pr3="4"]){padding-right:var(--d4)}:host([r-m3="4"]){margin:var(--d4)}:host([r-mt3="4"]){margin-top:var(--d4)}:host([r-ml3="4"]){margin-left:var(--d4)}:host([r-mb3="4"]){margin-bottom:var(--d4)}:host([r-mr3="4"]){margin-right:var(--d4)}.row.gap-large-5{--gap:var(--d5)}:host([r-p3="5"]){padding:var(--d5)}:host([r-pt3="5"]){padding-top:var(--d5)}:host([r-pl3="5"]){padding-left:var(--d5)}:host([r-pb3="5"]){padding-bottom:var(--d5)}:host([r-pr3="5"]){padding-right:var(--d5)}:host([r-m3="5"]){margin:var(--d5)}:host([r-mt3="5"]){margin-top:var(--d5)}:host([r-ml3="5"]){margin-left:var(--d5)}:host([r-mb3="5"]){margin-bottom:var(--d5)}:host([r-mr3="5"]){margin-right:var(--d5)}.row.gap-large-6{--gap:var(--d6)}:host([r-p3="6"]){padding:var(--d6)}:host([r-pt3="6"]){padding-top:var(--d6)}:host([r-pl3="6"]){padding-left:var(--d6)}:host([r-pb3="6"]){padding-bottom:var(--d6)}:host([r-pr3="6"]){padding-right:var(--d6)}:host([r-m3="6"]){margin:var(--d6)}:host([r-mt3="6"]){margin-top:var(--d6)}:host([r-ml3="6"]){margin-left:var(--d6)}:host([r-mb3="6"]){margin-bottom:var(--d6)}:host([r-mr3="6"]){margin-right:var(--d6)}:host([r-or3="12"]){order:12}:host([r-c3="12"]){--rc:12}:host([r-or3="11"]){order:11}:host([r-c3="11"]){--rc:11}:host([r-or3="10"]){order:10}:host([r-c3="10"]){--rc:10}:host([r-or3="9"]){order:9}:host([r-c3="9"]){--rc:9}:host([r-or3="8"]){order:8}:host([r-c3="8"]){--rc:8}:host([r-or3="7"]){order:7}:host([r-c3="7"]){--rc:7}:host([r-or3="6"]){order:6}:host([r-c3="6"]){--rc:6}:host([r-or3="5"]){order:5}:host([r-c3="5"]){--rc:5}:host([r-or3="4"]){order:4}:host([r-c3="4"]){--rc:4}:host([r-or3="3"]){order:3}:host([r-c3="3"]){--rc:3}:host([r-or3="2"]){order:2}:host([r-c3="2"]){--rc:2}:host([r-or3="1"]){order:1}:host([r-c3="1"]){--rc:1}:host([r-sb3="11"]){--rsb:11}:host([r-sa3="11"]){--rsa:11}:host([r-sb3="10"]){--rsb:10}:host([r-sa3="10"]){--rsa:10}:host([r-sb3="9"]){--rsb:9}:host([r-sa3="9"]){--rsa:9}:host([r-sb3="8"]){--rsb:8}:host([r-sa3="8"]){--rsa:8}:host([r-sb3="7"]){--rsb:7}:host([r-sa3="7"]){--rsa:7}:host([r-sb3="6"]){--rsb:6}:host([r-sa3="6"]){--rsa:6}:host([r-sb3="5"]){--rsb:5}:host([r-sa3="5"]){--rsa:5}:host([r-sb3="4"]){--rsb:4}:host([r-sa3="4"]){--rsa:4}:host([r-sb3="3"]){--rsb:3}:host([r-sa3="3"]){--rsa:3}:host([r-sb3="2"]){--rsb:2}:host([r-sa3="2"]){--rsa:2}:host([r-sb3="1"]){--rsb:1}:host([r-sa3="1"]){--rsa:1}:host([r-sb3="0"]){--rsb:0}:host([r-sa3="0"]){--rsa:0}}@media (min-width:1280px){:host([r-ta4]){text-align:var(--text-align-xlarge)}:host([r-d4]){display:var(--display-xlarge)}:host([r-f4="1"]){font-size:var(--f1)}:host([r-f4="2"]){font-size:var(--f2)}:host([r-f4="3"]){font-size:var(--f3)}:host([r-f4="4"]){font-size:var(--f4)}:host([r-f4="5"]){font-size:var(--f5)}:host([r-f4="6"]){font-size:var(--f6)}.row.gap-xlarge-1{--gap:var(--d1)}:host([r-p4="1"]){padding:var(--d1)}:host([r-pt4="1"]){padding-top:var(--d1)}:host([r-pl4="1"]){padding-left:var(--d1)}:host([r-pb4="1"]){padding-bottom:var(--d1)}:host([r-pr4="1"]){padding-right:var(--d1)}:host([r-m4="1"]){margin:var(--d1)}:host([r-mt4="1"]){margin-top:var(--d1)}:host([r-ml4="1"]){margin-left:var(--d1)}:host([r-mb4="1"]){margin-bottom:var(--d1)}:host([r-mr4="1"]){margin-right:var(--d1)}.row.gap-xlarge-2{--gap:var(--d2)}:host([r-p4="2"]){padding:var(--d2)}:host([r-pt4="2"]){padding-top:var(--d2)}:host([r-pl4="2"]){padding-left:var(--d2)}:host([r-pb4="2"]){padding-bottom:var(--d2)}:host([r-pr4="2"]){padding-right:var(--d2)}:host([r-m4="2"]){margin:var(--d2)}:host([r-mt4="2"]){margin-top:var(--d2)}:host([r-ml4="2"]){margin-left:var(--d2)}:host([r-mb4="2"]){margin-bottom:var(--d2)}:host([r-mr4="2"]){margin-right:var(--d2)}.row.gap-xlarge-3{--gap:var(--d3)}:host([r-p4="3"]){padding:var(--d3)}:host([r-pt4="3"]){padding-top:var(--d3)}:host([r-pl4="3"]){padding-left:var(--d3)}:host([r-pb4="3"]){padding-bottom:var(--d3)}:host([r-pr4="3"]){padding-right:var(--d3)}:host([r-m4="3"]){margin:var(--d3)}:host([r-mt4="3"]){margin-top:var(--d3)}:host([r-ml4="3"]){margin-left:var(--d3)}:host([r-mb4="3"]){margin-bottom:var(--d3)}:host([r-mr4="3"]){margin-right:var(--d3)}.row.gap-xlarge-4{--gap:var(--d4)}:host([r-p4="4"]){padding:var(--d4)}:host([r-pt4="4"]){padding-top:var(--d4)}:host([r-pl4="4"]){padding-left:var(--d4)}:host([r-pb4="4"]){padding-bottom:var(--d4)}:host([r-pr4="4"]){padding-right:var(--d4)}:host([r-m4="4"]){margin:var(--d4)}:host([r-mt4="4"]){margin-top:var(--d4)}:host([r-ml4="4"]){margin-left:var(--d4)}:host([r-mb4="4"]){margin-bottom:var(--d4)}:host([r-mr4="4"]){margin-right:var(--d4)}.row.gap-xlarge-5{--gap:var(--d5)}:host([r-p4="5"]){padding:var(--d5)}:host([r-pt4="5"]){padding-top:var(--d5)}:host([r-pl4="5"]){padding-left:var(--d5)}:host([r-pb4="5"]){padding-bottom:var(--d5)}:host([r-pr4="5"]){padding-right:var(--d5)}:host([r-m4="5"]){margin:var(--d5)}:host([r-mt4="5"]){margin-top:var(--d5)}:host([r-ml4="5"]){margin-left:var(--d5)}:host([r-mb4="5"]){margin-bottom:var(--d5)}:host([r-mr4="5"]){margin-right:var(--d5)}.row.gap-xlarge-6{--gap:var(--d6)}:host([r-p4="6"]){padding:var(--d6)}:host([r-pt4="6"]){padding-top:var(--d6)}:host([r-pl4="6"]){padding-left:var(--d6)}:host([r-pb4="6"]){padding-bottom:var(--d6)}:host([r-pr4="6"]){padding-right:var(--d6)}:host([r-m4="6"]){margin:var(--d6)}:host([r-mt4="6"]){margin-top:var(--d6)}:host([r-ml4="6"]){margin-left:var(--d6)}:host([r-mb4="6"]){margin-bottom:var(--d6)}:host([r-mr4="6"]){margin-right:var(--d6)}:host([r-or4="12"]){order:12}:host([r-c4="12"]){--rc:12}:host([r-or4="11"]){order:11}:host([r-c4="11"]){--rc:11}:host([r-or4="10"]){order:10}:host([r-c4="10"]){--rc:10}:host([r-or4="9"]){order:9}:host([r-c4="9"]){--rc:9}:host([r-or4="8"]){order:8}:host([r-c4="8"]){--rc:8}:host([r-or4="7"]){order:7}:host([r-c4="7"]){--rc:7}:host([r-or4="6"]){order:6}:host([r-c4="6"]){--rc:6}:host([r-or4="5"]){order:5}:host([r-c4="5"]){--rc:5}:host([r-or4="4"]){order:4}:host([r-c4="4"]){--rc:4}:host([r-or4="3"]){order:3}:host([r-c4="3"]){--rc:3}:host([r-or4="2"]){order:2}:host([r-c4="2"]){--rc:2}:host([r-or4="1"]){order:1}:host([r-c4="1"]){--rc:1}:host([r-sb4="11"]){--rsb:11}:host([r-sa4="11"]){--rsa:11}:host([r-sb4="10"]){--rsb:10}:host([r-sa4="10"]){--rsa:10}:host([r-sb4="9"]){--rsb:9}:host([r-sa4="9"]){--rsa:9}:host([r-sb4="8"]){--rsb:8}:host([r-sa4="8"]){--rsa:8}:host([r-sb4="7"]){--rsb:7}:host([r-sa4="7"]){--rsa:7}:host([r-sb4="6"]){--rsb:6}:host([r-sa4="6"]){--rsa:6}:host([r-sb4="5"]){--rsb:5}:host([r-sa4="5"]){--rsa:5}:host([r-sb4="4"]){--rsb:4}:host([r-sa4="4"]){--rsa:4}:host([r-sb4="3"]){--rsb:3}:host([r-sa4="3"]){--rsa:3}:host([r-sb4="2"]){--rsb:2}:host([r-sa4="2"]){--rsa:2}:host([r-sb4="1"]){--rsb:1}:host([r-sa4="1"]){--rsa:1}:host([r-sb4="0"]){--rsb:0}:host([r-sa4="0"]){--rsa:0}}`,t=new CSSStyleSheet;t.replaceSync(e);var n=t;const r=[`inherit`,`initial`,`revert`,`revert-layer`,`unset`],i=[`display`,`font`,`text-align`,`padding`,`padding-top`,`padding-right`,`padding-bottom`,`padding-left`,`margin`,`margin-top`,`margin-right`,`margin-bottom`,`margin-left`],a=[`row`,`cell`,`col`,`display`,`text-align`,`order`,`skip-before`,`skip-after`,`gap`,`padding`,`font`],o=[`small`,`medium`,`large`,`xlarge`],s=[`none`,`small`,`medium`,`large`,`xlarge`,`xxlarge`,`small-`,`medium-`,`large-`,`xlarge-`,`xxlarge-`],c=[`block`,`inline`,`inline-block`,`flex`,`inline-flex`,`grid`,`inline-grid`,`flow-root`,`none`,`contents`,`table`,`table-row`,`list-item`,...r],l=[`start`,`end`,`left`,`right`,`center`,`justify`,`match-parent`],u=[`xsmall`,`small`,`medium`,`large`,`xlarge`,`xxlarge`],d=e=>i.includes(e),f=e=>a.includes(e);var p=e=>{let t=parseInt(e.trim());return t===void 0?null:String(t)},m=e=>{let t=e.trim().toLowerCase();return c.includes(t)?t:null},h=e=>{let t=e.trim().toLowerCase();return s.includes(t)?String(s.indexOf(t)):null},g=e=>{let t=e.trim().toLowerCase();return l.includes(t)?t:null},_=e=>{let t=e.trim().toLowerCase();return u.includes(t)?String(u.indexOf(t)):null};const v={row:`boolean`,cell:`boolean`,"text-align":g,"skip-before":p,"skip-after":p,col:p,gap:h,font:_,order:p,display:m,padding:h},y={font:_,margin:h,padding:h,display:m,"text-align":g,"margin-top":h,"margin-right":h,"margin-bottom":h,"margin-left":h,"padding-top":h,"padding-right":h,"padding-bottom":h,"padding-left":h},b={font:`f`,padding:`p`,display:`d`,row:`row`,cell:`cell`,col:`c`,gap:`g`,order:`or`,"skip-before":`sb`,"skip-after":`sa`,"text-align":`ta`},x={font:`f`,margin:`m`,padding:`p`,display:`d`,"text-align":`ta`,"margin-top":`mt`,"margin-right":`mr`,"margin-bottom":`mb`,"margin-left":`ml`,"padding-top":`pt`,"padding-right":`pr`,"padding-bottom":`pb`,"padding-left":`pl`},S=(e,t,n)=>{let r=[];for(let i of e)if(t[i]!==void 0){let e=n[i];e===`boolean`?r.push(`${i}`):t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=o[n],s=e(t);a&&s&&r.push(`${i}-${a}-${s}`)})}return r},C=(e,t,n,r)=>{let i={};for(let a of e)if(o.forEach((e,t)=>{i[`r-${r[a]}${t+1}`]=void 0}),t[a]!==void 0){let e=n[a];e===`boolean`?i[`r-${a}`]=a:t[a].split(` `).filter(Boolean).forEach((t,n)=>{let s=o[n],c=e(t);s&&c&&(i[`r-${r[a]}${n+1}`]=c)})}return Object.entries(i)},w=(e,t,n)=>{let r={};for(let i of e)if(o.forEach(e=>{r[`--${i}-${e}`]=void 0}),t[i]!==void 0){let e=n[i];e!==`boolean`&&t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=o[n],s=e(t);a&&s&&(r[`--${i}-${a}`]=s)})}return Object.entries(r)};var T=class extends HTMLElement{static observedAttributes=a;attr={};mainSlot=()=>this.shadowRoot?.querySelector(`slot`)||null;container=()=>this.shadowRoot?.firstElementChild||null;constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[n]}detectRowChange(){let e=this.mainSlot(),t=this.container();if(!e||!t)return;let n=e.assignedElements().some(e=>e.matches(`r-grid`)),r=this.attr.row!==`row`&&n,i=this.attr.row===`row`&&!n;return r&&(this.attr.row=`row`),i&&delete this.attr.row,r||i}detectCellChange(){let e=this.parentElement?.matches(`r-grid`),t=this.attr.cell!==`cell`&&e,n=this.attr.cell===`cell`&&!e;return t&&(this.attr.cell=`cell`),n&&delete this.attr.cell,t||n}attributeChangedCallback(e,t,n){f(e)&&(this.attr[e]=n,this.render())}connectedMoveCallback(){this.detectCellChange()}connectedCallback(){this.mainSlot()?.addEventListener(`slotchange`,()=>{this.detectRowChange()&&this.render()}),this.render();let e=this.detectRowChange(),t=this.detectCellChange();(e||t)&&this.render()}render(){let e=S([`row`,`gap`],this.attr,v),t=C(a,this.attr,v,b);w([`display`,`text-align`],this.attr,v).forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),t.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`
-      <div class="${e.join(` `)}"><slot></slot></div>
-    `}};customElements.define(`r-grid`,T);var E=class extends HTMLElement{static observedAttributes=i;attr={};constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[n]}attributeChangedCallback(e,t,n){d(e)&&(this.attr[e]=n,this.render())}connectedCallback(){this.render()}render(){let e=C(i,this.attr,y,x);w([`display`,`text-align`],this.attr,y).forEach(([e,t])=>{t&&this.style.setProperty(e,t),t===void 0&&this.style.removeProperty(e)}),e.forEach(([e,t])=>{t&&this.setAttribute(e,t),t===void 0&&this.removeAttribute(e)}),this.shadowRoot.innerHTML=`<slot></slot>`}};customElements.define(`r-elm`,E),exports.GridElement=T,exports.ResponsiveElement=E;
-//# sourceMappingURL=r-grid.cjs.js.map

package/dist/r-grid.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"r-grid.cjs.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","gridAttrShort: Record<ObservedGridAttribute, string>","elmAttrShort: Record<ObservedElemAttribute, string>","classes: string[]","hostAttributes: Record<string, string | undefined>","hostCSS: Record<string, string | undefined>"],"sources":["../src/grid.scss?inline","../src/grid-style.ts","../src/util.ts","../src/components/grid-element.ts","../src/components/resonsive-element.ts"],"sourcesContent":["@use 'sass:map';\r\n@use 'sass:math';\r\n@use 'sass:list';\r\n\r\n$mediaSizes: (\r\n  small: 0px,\r\n  medium: 768px,\r\n  large: 1024px,\r\n  xlarge: 1280px,\r\n);\r\n$dimensions: 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n\r\n:host {\r\n  --d0: var(--rezel-dim-none, 0px);\r\n  --d1: var(--rezel-dim-small, 4px);\r\n  --d2: var(--rezel-dim-medium, 8px);\r\n  --d3: var(--rezel-dim-large, 16px);\r\n  --d4: var(--rezel-dim-xlarge, 32px);\r\n  --d5: var(--rezel-dim-xxlarge, 64px);\r\n  --f0: var(--rezel-font-xsmall, 12px);\r\n  --f1: var(--rezel-font-small, 14px);\r\n  --f2: var(--rezel-font-medium, 16px);\r\n  --f3: var(--rezel-font-large, 24px);\r\n  --f4: var(--rezel-font-xlarge, 32px);\r\n  --f5: var(--rezel-font-xxlarge, 40px);\r\n  display: block;\r\n  box-sizing: border-box !important;\r\n}\r\n\r\nslot {\r\n  display: contents !important;\r\n}\r\n\r\n.row {\r\n  box-sizing: border-box;\r\n  justify-content: flex-start;\r\n  gap: var(--gap);\r\n  --gap: 0px;\r\n  flex-flow: wrap;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n}\r\n\r\n.cell {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:host([r-cell]) {\r\n  flex: auto;\r\n}\r\n\r\n::slotted(hr) {\r\n  width: 100%;\r\n}\r\n\r\n:host([r-c1]),\r\n:host([r-c2]),\r\n:host([r-c3]),\r\n:host([r-c4]) {\r\n  flex: 100%;\r\n  max-width: calc(((var(--rc) / 12) * 100%) - var(--gap) * (calc((12 - var(--rc)) / 12)));\r\n}\r\n\r\n:host([r-sb1]),\r\n:host([r-sb2]),\r\n:host([r-sb3]),\r\n:host([r-sb4]) {\r\n  margin-left: calc(((var(--rsb) / 12) * 100%) + var(--gap) * (calc(var(--rsb) / 12)));\r\n}\r\n\r\n:host([r-sa1]),\r\n:host([r-sa2]),\r\n:host([r-sa3]),\r\n:host([r-sa4]) {\r\n  margin-right: calc(((var(--rsa) / 12) * 100%) + var(--gap) * (calc(var(--rsa) / 12)));\r\n}\r\n\r\n@each $mediaName, $mediaSize in $mediaSizes {\r\n  $mIndex: list.index(map.keys($mediaSizes), $mediaName);\r\n\r\n  @media (min-width:  #{$mediaSize}) {\r\n    :host([r-ta#{$mIndex}]) {\r\n      text-align: var(--text-align-#{$mediaName});\r\n    }\r\n    :host([r-d#{$mIndex}]) {\r\n      display: var(--display-#{$mediaName});\r\n    }\r\n\r\n    @each $font in $fonts {\r\n      $fIndex: list.index($fonts, $font);\r\n\r\n      :host([r-f#{$mIndex}='#{$fIndex}']) {\r\n        font-size: var(--f#{$fIndex});\r\n      }\r\n    }\r\n    @each $dimension in $dimensions {\r\n      $dIndex: list.index($dimensions, $dimension);\r\n\r\n      .row.gap-#{$mediaName}-#{$dIndex} {\r\n        --gap: var(--d#{$dIndex});\r\n      }\r\n      :host([r-p#{$mIndex}='#{$dIndex}']) {\r\n        padding: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pt#{$mIndex}='#{$dIndex}']) {\r\n        padding-top: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pl#{$mIndex}='#{$dIndex}']) {\r\n        padding-left: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pb#{$mIndex}='#{$dIndex}']) {\r\n        padding-bottom: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pr#{$mIndex}='#{$dIndex}']) {\r\n        padding-right: var(--d#{$dIndex});\r\n      }\r\n      :host([r-m#{$mIndex}='#{$dIndex}']) {\r\n        margin: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mt#{$mIndex}='#{$dIndex}']) {\r\n        margin-top: var(--d#{$dIndex});\r\n      }\r\n      :host([r-ml#{$mIndex}='#{$dIndex}']) {\r\n        margin-left: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mb#{$mIndex}='#{$dIndex}']) {\r\n        margin-bottom: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mr#{$mIndex}='#{$dIndex}']) {\r\n        margin-right: var(--d#{$dIndex});\r\n      }\r\n    }\r\n\r\n    @for $i from 12 through 1 {\r\n      :host([r-or#{$mIndex}='#{$i}']) {\r\n        order: #{$i};\r\n      }\r\n      :host([r-c#{$mIndex}='#{$i}']) {\r\n        --rc: #{$i};\r\n      }\r\n    }\r\n    @for $i from 11 through 0 {\r\n      :host([r-sb#{$mIndex}='#{$i}']) {\r\n        --rsb: #{$i};\r\n      }\r\n      :host([r-sa#{$mIndex}='#{$i}']) {\r\n        --rsa: #{$i};\r\n      }\r\n    }\r\n  }\r\n}\r\n","import gridStyles from \"./grid.scss?inline\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(gridStyles);\r\n\r\nexport default sheet;\r\n","type AttrValues<K extends string> = Partial<Record<K, string | undefined>>;\r\ntype AttrValidations<K extends string> = Record<K, 'boolean' | ((val: string) => string | null)>;\r\n\r\nexport const GlobalValues = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n  'display',\r\n  'font',\r\n  'text-align',\r\n  'padding',\r\n  'padding-top',\r\n  'padding-right',\r\n  'padding-bottom',\r\n  'padding-left',\r\n  'margin',\r\n  'margin-top',\r\n  'margin-right',\r\n  'margin-bottom',\r\n  'margin-left',\r\n] as const;\r\nexport const ObservedGridAttributes = [\r\n  'row',\r\n  'cell',\r\n  'col',\r\n  'display',\r\n  'text-align',\r\n  'order',\r\n  'skip-before',\r\n  'skip-after',\r\n  'gap',\r\n  'padding',\r\n  'font',\r\n] as const;\r\nexport const MediaSizes = ['small', 'medium', 'large', 'xlarge'] as const;\r\nexport const DimensionSizes = [\r\n  'none',\r\n  'small',\r\n  'medium',\r\n  'large',\r\n  'xlarge',\r\n  'xxlarge',\r\n  'small-',\r\n  'medium-',\r\n  'large-',\r\n  'xlarge-',\r\n  'xxlarge-',\r\n] as const;\r\nexport const DisplayValues = [\r\n  'block',\r\n  'inline',\r\n  'inline-block',\r\n  'flex',\r\n  'inline-flex',\r\n  'grid',\r\n  'inline-grid',\r\n  'flow-root',\r\n  'none',\r\n  'contents',\r\n  'table',\r\n  'table-row',\r\n  'list-item',\r\n  ...GlobalValues,\r\n] as const;\r\nexport const TextAlignValues = [\r\n  'start',\r\n  'end',\r\n  'left',\r\n  'right',\r\n  'center',\r\n  'justify',\r\n  'match-parent',\r\n] as const;\r\nexport const FontSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\n\r\nexport type ObservedGridAttribute = (typeof ObservedGridAttributes)[number];\r\nexport type ObservedElemAttribute = (typeof ObservedElemAttributes)[number];\r\n\r\nexport type DimensionSize = (typeof DimensionSizes)[number];\r\nexport type DisplayValue = (typeof DisplayValues)[number];\r\nexport type TextAlignValue = (typeof TextAlignValues)[number];\r\nexport type FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute =>\r\n  ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\n\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute =>\r\n  ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\n\r\nconst getValidNumber = (val: string): string | null => {\r\n  const value = parseInt(val.trim());\r\n  return value !== undefined ? String(value) : null;\r\n};\r\n\r\nconst getValidDisplay = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return DisplayValues.includes(value as DisplayValue) ? (value as DisplayValue) : null;\r\n};\r\n\r\nconst getValidDimension = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return DimensionSizes.includes(value as DimensionSize)\r\n    ? String(DimensionSizes.indexOf(value as DimensionSize))\r\n    : null;\r\n};\r\n\r\nconst getValidTextAlign = (val: string): TextAlignValue | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return TextAlignValues.includes(value as TextAlignValue) ? (value as TextAlignValue) : null;\r\n};\r\n\r\nconst getValidFont = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return FontSizes.includes(value as FontSize)\r\n    ? String(FontSizes.indexOf(value as FontSize))\r\n    : null;\r\n};\r\n\r\nexport type GridAttributeValues = AttrValues<ObservedGridAttribute>;\r\nexport type ElemAttributeValues = AttrValues<ObservedElemAttribute>;\r\n\r\nexport const getGridAttributeValue: AttrValidations<ObservedGridAttribute> = {\r\n  row: 'boolean',\r\n  cell: 'boolean',\r\n  'text-align': getValidTextAlign,\r\n  'skip-before': getValidNumber,\r\n  'skip-after': getValidNumber,\r\n  col: getValidNumber,\r\n  gap: getValidDimension,\r\n  font: getValidFont,\r\n  order: getValidNumber,\r\n  display: getValidDisplay,\r\n  padding: getValidDimension,\r\n};\r\n\r\nexport const getElemAttributeValue: AttrValidations<ObservedElemAttribute> = {\r\n  font: getValidFont,\r\n  margin: getValidDimension,\r\n  padding: getValidDimension,\r\n  display: getValidDisplay,\r\n  'text-align': getValidTextAlign,\r\n  'margin-top': getValidDimension,\r\n  'margin-right': getValidDimension,\r\n  'margin-bottom': getValidDimension,\r\n  'margin-left': getValidDimension,\r\n  'padding-top': getValidDimension,\r\n  'padding-right': getValidDimension,\r\n  'padding-bottom': getValidDimension,\r\n  'padding-left': getValidDimension,\r\n};\r\n\r\nexport const gridAttrShort: Record<ObservedGridAttribute, string> = {\r\n  font: 'f',\r\n  padding: 'p',\r\n  display: 'd',\r\n  row: 'row',\r\n  cell: 'cell',\r\n  col: 'c',\r\n  gap: 'g',\r\n  order: 'or',\r\n  'skip-before': 'sb',\r\n  'skip-after': 'sa',\r\n  'text-align': 'ta',\r\n};\r\n\r\nexport const elmAttrShort: Record<ObservedElemAttribute, string> = {\r\n  font: 'f',\r\n  margin: 'm',\r\n  padding: 'p',\r\n  display: 'd',\r\n  'text-align': 'ta',\r\n  'margin-top': 'mt',\r\n  'margin-right': 'mr',\r\n  'margin-bottom': 'mb',\r\n  'margin-left': 'ml',\r\n  'padding-top': 'pt',\r\n  'padding-right': 'pr',\r\n  'padding-bottom': 'pb',\r\n  'padding-left': 'pl',\r\n};\r\n\r\nexport const getClasses = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n) => {\r\n  const classes: string[] = [];\r\n  for (const attr of attrNames) {\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation === 'boolean') {\r\n        classes.push(`${attr}`);\r\n      } else {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            classes.push(`${attr}-${mediaSize}-${value}`);\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return classes;\r\n};\r\n\r\nexport const getHostAttributes = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n  short: Record<K, string>,\r\n) => {\r\n  const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n  for (const attr of attrNames) {\r\n    MediaSizes.forEach((_mediaSize, i) => {\r\n      hostAttributes[`r-${short[attr]}${i + 1}`] = undefined;\r\n    });\r\n\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation === 'boolean') {\r\n        hostAttributes[`r-${attr}`] = attr;\r\n      } else {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            hostAttributes[`r-${short[attr]}${i + 1}`] = value;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return Object.entries(hostAttributes);\r\n};\r\n\r\nexport const getHostCSS = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n) => {\r\n  const hostCSS: Record<string, string | undefined> = {};\r\n\r\n  for (const attr of attrNames) {\r\n    MediaSizes.forEach((mediaSize) => {\r\n      hostCSS[`--${attr}-${mediaSize}`] = undefined;\r\n    });\r\n\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation !== 'boolean') {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            hostCSS[`--${attr}-${mediaSize}`] = value;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return Object.entries(hostCSS);\r\n};\r\n","import sheet from '../grid-style';\r\nimport {\r\n  getClasses,\r\n  getGridAttributeValue as getValues,\r\n  getHostAttributes,\r\n  isGridAttribute,\r\n  ObservedGridAttributes as Attributes,\r\n  getHostCSS,\r\n  gridAttrShort,\r\n} from '../util';\r\nimport type { GridAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} skip-before - skip the given columns before the element for each breakpoint  (Integers)\r\n * @attr {string} skip-after - skip the given columns after the element for each breakpoint  (Integers)\r\n * @attr {string} display - set element's display value for each breakpoint\r\n * @attr {string} padding - set element's padding for each breakpoint (Dimension values)\r\n * @attr {string} order - set element's flex order for each breakpoint (Integers)\r\n * @attr {string} font - set element's font-size for each breakpoint (Font values)\r\n * @attr {string} col - set element's column spans for each breakpoint  (Integers)\r\n * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-grid\r\n */\r\nexport class GridElement extends HTMLElement {\r\n  static observedAttributes = Attributes;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private attr: Partial<GridAttributeValues> = {};\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private readonly mainSlot = (): HTMLSlotElement | null =>\r\n    this.shadowRoot?.querySelector('slot') || null;\r\n  /**\r\n   * @internal\r\n   */\r\n  private readonly container = (): Element | null => this.shadowRoot?.firstElementChild || null;\r\n\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' });\r\n    this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private detectRowChange() {\r\n    const slot = this.mainSlot();\r\n    const container = this.container();\r\n\r\n    if (!slot || !container) return;\r\n\r\n    const tenants = slot.assignedElements();\r\n    const isRow = tenants.some((el) => el.matches('r-grid'));\r\n    const isNowRow = this.attr.row !== 'row' && isRow;\r\n    const noLongerRow = this.attr.row === 'row' && !isRow;\r\n\r\n    if (isNowRow) this.attr.row = 'row';\r\n    if (noLongerRow) delete this.attr.row;\r\n    return isNowRow || noLongerRow;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private detectCellChange() {\r\n    const isCell = this.parentElement?.matches('r-grid');\r\n    const isNowCell = this.attr.cell !== 'cell' && isCell;\r\n    const noLongerCell = this.attr.cell === 'cell' && !isCell;\r\n\r\n    if (isNowCell) this.attr.cell = 'cell';\r\n    if (noLongerCell) delete this.attr.cell;\r\n    return isNowCell || noLongerCell;\r\n  }\r\n\r\n  attributeChangedCallback(name: string, _old: string, value: string) {\r\n    if (isGridAttribute(name)) {\r\n      this.attr[name] = value;\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  connectedMoveCallback() {\r\n    this.detectCellChange();\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.mainSlot()?.addEventListener('slotchange', () => {\r\n      if (this.detectRowChange()) this.render();\r\n    });\r\n\r\n    this.render();\r\n    const hasRowChange = this.detectRowChange();\r\n    const hasCellChange = this.detectCellChange();\r\n    if (hasRowChange || hasCellChange) this.render();\r\n  }\r\n\r\n  render() {\r\n    const classes = getClasses(['row', 'gap'], this.attr, getValues);\r\n    const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, gridAttrShort);\r\n    const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n    hostCSS.forEach(([attr, value]) => {\r\n      if (value) this.style.setProperty(attr, value);\r\n      if (value === undefined) this.style.removeProperty(attr);\r\n    });\r\n\r\n    hostAttributes.forEach(([attr, value]) => {\r\n      if (value) this.setAttribute(attr, value);\r\n      if (value === undefined) this.removeAttribute(attr);\r\n    });\r\n\r\n    this.shadowRoot!.innerHTML = `\r\n      <div class=\"${classes.join(' ')}\"><slot></slot></div>\r\n    `;\r\n  }\r\n}\r\n\r\ncustomElements.define('r-grid', GridElement);\r\n","import sheet from '../grid-style';\r\nimport {\r\n  getElemAttributeValue as getValues,\r\n  getHostAttributes,\r\n  isElemAttribute,\r\n  ObservedElemAttributes as Attributes,\r\n  getHostCSS,\r\n  elmAttrShort,\r\n} from '../util';\r\nimport type { ElemAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} display - set element's display value for each breakpoint, space-separated\r\n * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)\r\n * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin - set element's margin for each breakpoint, space-separated  (Integers)\r\n * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-elm\r\n */\r\nexport class ResponsiveElement extends HTMLElement {\r\n  static observedAttributes = Attributes;\r\n  private attr: Partial<ElemAttributeValues> = {};\r\n\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' });\r\n    this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n  }\r\n\r\n  attributeChangedCallback(name: string, _old: string, value: string) {\r\n    if (isElemAttribute(name)) {\r\n      this.attr[name] = value;\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.render();\r\n  }\r\n\r\n  render() {\r\n    const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, elmAttrShort);\r\n    const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n    hostCSS.forEach(([attr, value]) => {\r\n      if (value) this.style.setProperty(attr, value);\r\n      if (value === undefined) this.style.removeProperty(attr);\r\n    });\r\n\r\n    hostAttributes.forEach(([attr, value]) => {\r\n      if (value) this.setAttribute(attr, value);\r\n      if (value === undefined) this.removeAttribute(attr);\r\n    });\r\n\r\n    this.shadowRoot!.innerHTML = `<slot></slot>`;\r\n  }\r\n}\r\n\r\ncustomElements.define('r-elm', ResponsiveElement);\r\n"],"mappings":"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"}

package/dist/r-grid.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"r-grid.es.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","gridAttrShort: Record<ObservedGridAttribute, string>","elmAttrShort: Record<ObservedElemAttribute, string>","classes: string[]","hostAttributes: Record<string, string | undefined>","hostCSS: Record<string, string | undefined>"],"sources":["../src/grid.scss?inline","../src/grid-style.ts","../src/util.ts","../src/components/grid-element.ts","../src/components/resonsive-element.ts"],"sourcesContent":["@use 'sass:map';\r\n@use 'sass:math';\r\n@use 'sass:list';\r\n\r\n$mediaSizes: (\r\n  small: 0px,\r\n  medium: 768px,\r\n  large: 1024px,\r\n  xlarge: 1280px,\r\n);\r\n$dimensions: 'none', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n$fonts: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge';\r\n\r\n:host {\r\n  --d0: var(--rezel-dim-none, 0px);\r\n  --d1: var(--rezel-dim-small, 4px);\r\n  --d2: var(--rezel-dim-medium, 8px);\r\n  --d3: var(--rezel-dim-large, 16px);\r\n  --d4: var(--rezel-dim-xlarge, 32px);\r\n  --d5: var(--rezel-dim-xxlarge, 64px);\r\n  --f0: var(--rezel-font-xsmall, 12px);\r\n  --f1: var(--rezel-font-small, 14px);\r\n  --f2: var(--rezel-font-medium, 16px);\r\n  --f3: var(--rezel-font-large, 24px);\r\n  --f4: var(--rezel-font-xlarge, 32px);\r\n  --f5: var(--rezel-font-xxlarge, 40px);\r\n  display: block;\r\n  box-sizing: border-box !important;\r\n}\r\n\r\nslot {\r\n  display: contents !important;\r\n}\r\n\r\n.row {\r\n  box-sizing: border-box;\r\n  justify-content: flex-start;\r\n  gap: var(--gap);\r\n  --gap: 0px;\r\n  flex-flow: wrap;\r\n  margin: 0;\r\n  padding: 0;\r\n  display: flex;\r\n}\r\n\r\n.cell {\r\n  box-sizing: border-box;\r\n}\r\n\r\n:host([r-cell]) {\r\n  flex: auto;\r\n}\r\n\r\n::slotted(hr) {\r\n  width: 100%;\r\n}\r\n\r\n:host([r-c1]),\r\n:host([r-c2]),\r\n:host([r-c3]),\r\n:host([r-c4]) {\r\n  flex: 100%;\r\n  max-width: calc(((var(--rc) / 12) * 100%) - var(--gap) * (calc((12 - var(--rc)) / 12)));\r\n}\r\n\r\n:host([r-sb1]),\r\n:host([r-sb2]),\r\n:host([r-sb3]),\r\n:host([r-sb4]) {\r\n  margin-left: calc(((var(--rsb) / 12) * 100%) + var(--gap) * (calc(var(--rsb) / 12)));\r\n}\r\n\r\n:host([r-sa1]),\r\n:host([r-sa2]),\r\n:host([r-sa3]),\r\n:host([r-sa4]) {\r\n  margin-right: calc(((var(--rsa) / 12) * 100%) + var(--gap) * (calc(var(--rsa) / 12)));\r\n}\r\n\r\n@each $mediaName, $mediaSize in $mediaSizes {\r\n  $mIndex: list.index(map.keys($mediaSizes), $mediaName);\r\n\r\n  @media (min-width:  #{$mediaSize}) {\r\n    :host([r-ta#{$mIndex}]) {\r\n      text-align: var(--text-align-#{$mediaName});\r\n    }\r\n    :host([r-d#{$mIndex}]) {\r\n      display: var(--display-#{$mediaName});\r\n    }\r\n\r\n    @each $font in $fonts {\r\n      $fIndex: list.index($fonts, $font);\r\n\r\n      :host([r-f#{$mIndex}='#{$fIndex}']) {\r\n        font-size: var(--f#{$fIndex});\r\n      }\r\n    }\r\n    @each $dimension in $dimensions {\r\n      $dIndex: list.index($dimensions, $dimension);\r\n\r\n      .row.gap-#{$mediaName}-#{$dIndex} {\r\n        --gap: var(--d#{$dIndex});\r\n      }\r\n      :host([r-p#{$mIndex}='#{$dIndex}']) {\r\n        padding: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pt#{$mIndex}='#{$dIndex}']) {\r\n        padding-top: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pl#{$mIndex}='#{$dIndex}']) {\r\n        padding-left: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pb#{$mIndex}='#{$dIndex}']) {\r\n        padding-bottom: var(--d#{$dIndex});\r\n      }\r\n      :host([r-pr#{$mIndex}='#{$dIndex}']) {\r\n        padding-right: var(--d#{$dIndex});\r\n      }\r\n      :host([r-m#{$mIndex}='#{$dIndex}']) {\r\n        margin: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mt#{$mIndex}='#{$dIndex}']) {\r\n        margin-top: var(--d#{$dIndex});\r\n      }\r\n      :host([r-ml#{$mIndex}='#{$dIndex}']) {\r\n        margin-left: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mb#{$mIndex}='#{$dIndex}']) {\r\n        margin-bottom: var(--d#{$dIndex});\r\n      }\r\n      :host([r-mr#{$mIndex}='#{$dIndex}']) {\r\n        margin-right: var(--d#{$dIndex});\r\n      }\r\n    }\r\n\r\n    @for $i from 12 through 1 {\r\n      :host([r-or#{$mIndex}='#{$i}']) {\r\n        order: #{$i};\r\n      }\r\n      :host([r-c#{$mIndex}='#{$i}']) {\r\n        --rc: #{$i};\r\n      }\r\n    }\r\n    @for $i from 11 through 0 {\r\n      :host([r-sb#{$mIndex}='#{$i}']) {\r\n        --rsb: #{$i};\r\n      }\r\n      :host([r-sa#{$mIndex}='#{$i}']) {\r\n        --rsa: #{$i};\r\n      }\r\n    }\r\n  }\r\n}\r\n","import gridStyles from \"./grid.scss?inline\";\r\n\r\nconst sheet = new CSSStyleSheet();\r\nsheet.replaceSync(gridStyles);\r\n\r\nexport default sheet;\r\n","type AttrValues<K extends string> = Partial<Record<K, string | undefined>>;\r\ntype AttrValidations<K extends string> = Record<K, 'boolean' | ((val: string) => string | null)>;\r\n\r\nexport const GlobalValues = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'] as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n  'display',\r\n  'font',\r\n  'text-align',\r\n  'padding',\r\n  'padding-top',\r\n  'padding-right',\r\n  'padding-bottom',\r\n  'padding-left',\r\n  'margin',\r\n  'margin-top',\r\n  'margin-right',\r\n  'margin-bottom',\r\n  'margin-left',\r\n] as const;\r\nexport const ObservedGridAttributes = [\r\n  'row',\r\n  'cell',\r\n  'col',\r\n  'display',\r\n  'text-align',\r\n  'order',\r\n  'skip-before',\r\n  'skip-after',\r\n  'gap',\r\n  'padding',\r\n  'font',\r\n] as const;\r\nexport const MediaSizes = ['small', 'medium', 'large', 'xlarge'] as const;\r\nexport const DimensionSizes = [\r\n  'none',\r\n  'small',\r\n  'medium',\r\n  'large',\r\n  'xlarge',\r\n  'xxlarge',\r\n  'small-',\r\n  'medium-',\r\n  'large-',\r\n  'xlarge-',\r\n  'xxlarge-',\r\n] as const;\r\nexport const DisplayValues = [\r\n  'block',\r\n  'inline',\r\n  'inline-block',\r\n  'flex',\r\n  'inline-flex',\r\n  'grid',\r\n  'inline-grid',\r\n  'flow-root',\r\n  'none',\r\n  'contents',\r\n  'table',\r\n  'table-row',\r\n  'list-item',\r\n  ...GlobalValues,\r\n] as const;\r\nexport const TextAlignValues = [\r\n  'start',\r\n  'end',\r\n  'left',\r\n  'right',\r\n  'center',\r\n  'justify',\r\n  'match-parent',\r\n] as const;\r\nexport const FontSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;\r\n\r\nexport type ObservedGridAttribute = (typeof ObservedGridAttributes)[number];\r\nexport type ObservedElemAttribute = (typeof ObservedElemAttributes)[number];\r\n\r\nexport type DimensionSize = (typeof DimensionSizes)[number];\r\nexport type DisplayValue = (typeof DisplayValues)[number];\r\nexport type TextAlignValue = (typeof TextAlignValues)[number];\r\nexport type FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute =>\r\n  ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\n\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute =>\r\n  ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\n\r\nconst getValidNumber = (val: string): string | null => {\r\n  const value = parseInt(val.trim());\r\n  return value !== undefined ? String(value) : null;\r\n};\r\n\r\nconst getValidDisplay = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return DisplayValues.includes(value as DisplayValue) ? (value as DisplayValue) : null;\r\n};\r\n\r\nconst getValidDimension = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return DimensionSizes.includes(value as DimensionSize)\r\n    ? String(DimensionSizes.indexOf(value as DimensionSize))\r\n    : null;\r\n};\r\n\r\nconst getValidTextAlign = (val: string): TextAlignValue | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return TextAlignValues.includes(value as TextAlignValue) ? (value as TextAlignValue) : null;\r\n};\r\n\r\nconst getValidFont = (val: string): string | null => {\r\n  const value = val.trim().toLowerCase();\r\n  return FontSizes.includes(value as FontSize)\r\n    ? String(FontSizes.indexOf(value as FontSize))\r\n    : null;\r\n};\r\n\r\nexport type GridAttributeValues = AttrValues<ObservedGridAttribute>;\r\nexport type ElemAttributeValues = AttrValues<ObservedElemAttribute>;\r\n\r\nexport const getGridAttributeValue: AttrValidations<ObservedGridAttribute> = {\r\n  row: 'boolean',\r\n  cell: 'boolean',\r\n  'text-align': getValidTextAlign,\r\n  'skip-before': getValidNumber,\r\n  'skip-after': getValidNumber,\r\n  col: getValidNumber,\r\n  gap: getValidDimension,\r\n  font: getValidFont,\r\n  order: getValidNumber,\r\n  display: getValidDisplay,\r\n  padding: getValidDimension,\r\n};\r\n\r\nexport const getElemAttributeValue: AttrValidations<ObservedElemAttribute> = {\r\n  font: getValidFont,\r\n  margin: getValidDimension,\r\n  padding: getValidDimension,\r\n  display: getValidDisplay,\r\n  'text-align': getValidTextAlign,\r\n  'margin-top': getValidDimension,\r\n  'margin-right': getValidDimension,\r\n  'margin-bottom': getValidDimension,\r\n  'margin-left': getValidDimension,\r\n  'padding-top': getValidDimension,\r\n  'padding-right': getValidDimension,\r\n  'padding-bottom': getValidDimension,\r\n  'padding-left': getValidDimension,\r\n};\r\n\r\nexport const gridAttrShort: Record<ObservedGridAttribute, string> = {\r\n  font: 'f',\r\n  padding: 'p',\r\n  display: 'd',\r\n  row: 'row',\r\n  cell: 'cell',\r\n  col: 'c',\r\n  gap: 'g',\r\n  order: 'or',\r\n  'skip-before': 'sb',\r\n  'skip-after': 'sa',\r\n  'text-align': 'ta',\r\n};\r\n\r\nexport const elmAttrShort: Record<ObservedElemAttribute, string> = {\r\n  font: 'f',\r\n  margin: 'm',\r\n  padding: 'p',\r\n  display: 'd',\r\n  'text-align': 'ta',\r\n  'margin-top': 'mt',\r\n  'margin-right': 'mr',\r\n  'margin-bottom': 'mb',\r\n  'margin-left': 'ml',\r\n  'padding-top': 'pt',\r\n  'padding-right': 'pr',\r\n  'padding-bottom': 'pb',\r\n  'padding-left': 'pl',\r\n};\r\n\r\nexport const getClasses = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n) => {\r\n  const classes: string[] = [];\r\n  for (const attr of attrNames) {\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation === 'boolean') {\r\n        classes.push(`${attr}`);\r\n      } else {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            classes.push(`${attr}-${mediaSize}-${value}`);\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return classes;\r\n};\r\n\r\nexport const getHostAttributes = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n  short: Record<K, string>,\r\n) => {\r\n  const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n  for (const attr of attrNames) {\r\n    MediaSizes.forEach((_mediaSize, i) => {\r\n      hostAttributes[`r-${short[attr]}${i + 1}`] = undefined;\r\n    });\r\n\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation === 'boolean') {\r\n        hostAttributes[`r-${attr}`] = attr;\r\n      } else {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            hostAttributes[`r-${short[attr]}${i + 1}`] = value;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return Object.entries(hostAttributes);\r\n};\r\n\r\nexport const getHostCSS = <K extends string>(\r\n  attrNames: readonly K[],\r\n  attrs: AttrValues<K>,\r\n  validations: AttrValidations<K>,\r\n) => {\r\n  const hostCSS: Record<string, string | undefined> = {};\r\n\r\n  for (const attr of attrNames) {\r\n    MediaSizes.forEach((mediaSize) => {\r\n      hostCSS[`--${attr}-${mediaSize}`] = undefined;\r\n    });\r\n\r\n    if (attrs[attr] !== undefined) {\r\n      const validation = validations[attr];\r\n      if (validation !== 'boolean') {\r\n        const values = attrs[attr].split(' ').filter(Boolean);\r\n        values.forEach((val, i) => {\r\n          const mediaSize = MediaSizes[i];\r\n          const value = validation(val);\r\n          if (mediaSize && value) {\r\n            hostCSS[`--${attr}-${mediaSize}`] = value;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  return Object.entries(hostCSS);\r\n};\r\n","import sheet from '../grid-style';\r\nimport {\r\n  getClasses,\r\n  getGridAttributeValue as getValues,\r\n  getHostAttributes,\r\n  isGridAttribute,\r\n  ObservedGridAttributes as Attributes,\r\n  getHostCSS,\r\n  gridAttrShort,\r\n} from '../util';\r\nimport type { GridAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} skip-before - skip the given columns before the element for each breakpoint  (Integers)\r\n * @attr {string} skip-after - skip the given columns after the element for each breakpoint  (Integers)\r\n * @attr {string} display - set element's display value for each breakpoint\r\n * @attr {string} padding - set element's padding for each breakpoint (Dimension values)\r\n * @attr {string} order - set element's flex order for each breakpoint (Integers)\r\n * @attr {string} font - set element's font-size for each breakpoint (Font values)\r\n * @attr {string} col - set element's column spans for each breakpoint  (Integers)\r\n * @attr {string} gap - set element's flex gap for each breakpoint (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-grid\r\n */\r\nexport class GridElement extends HTMLElement {\r\n  static observedAttributes = Attributes;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private attr: Partial<GridAttributeValues> = {};\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private readonly mainSlot = (): HTMLSlotElement | null =>\r\n    this.shadowRoot?.querySelector('slot') || null;\r\n  /**\r\n   * @internal\r\n   */\r\n  private readonly container = (): Element | null => this.shadowRoot?.firstElementChild || null;\r\n\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' });\r\n    this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private detectRowChange() {\r\n    const slot = this.mainSlot();\r\n    const container = this.container();\r\n\r\n    if (!slot || !container) return;\r\n\r\n    const tenants = slot.assignedElements();\r\n    const isRow = tenants.some((el) => el.matches('r-grid'));\r\n    const isNowRow = this.attr.row !== 'row' && isRow;\r\n    const noLongerRow = this.attr.row === 'row' && !isRow;\r\n\r\n    if (isNowRow) this.attr.row = 'row';\r\n    if (noLongerRow) delete this.attr.row;\r\n    return isNowRow || noLongerRow;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  private detectCellChange() {\r\n    const isCell = this.parentElement?.matches('r-grid');\r\n    const isNowCell = this.attr.cell !== 'cell' && isCell;\r\n    const noLongerCell = this.attr.cell === 'cell' && !isCell;\r\n\r\n    if (isNowCell) this.attr.cell = 'cell';\r\n    if (noLongerCell) delete this.attr.cell;\r\n    return isNowCell || noLongerCell;\r\n  }\r\n\r\n  attributeChangedCallback(name: string, _old: string, value: string) {\r\n    if (isGridAttribute(name)) {\r\n      this.attr[name] = value;\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  connectedMoveCallback() {\r\n    this.detectCellChange();\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.mainSlot()?.addEventListener('slotchange', () => {\r\n      if (this.detectRowChange()) this.render();\r\n    });\r\n\r\n    this.render();\r\n    const hasRowChange = this.detectRowChange();\r\n    const hasCellChange = this.detectCellChange();\r\n    if (hasRowChange || hasCellChange) this.render();\r\n  }\r\n\r\n  render() {\r\n    const classes = getClasses(['row', 'gap'], this.attr, getValues);\r\n    const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, gridAttrShort);\r\n    const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n    hostCSS.forEach(([attr, value]) => {\r\n      if (value) this.style.setProperty(attr, value);\r\n      if (value === undefined) this.style.removeProperty(attr);\r\n    });\r\n\r\n    hostAttributes.forEach(([attr, value]) => {\r\n      if (value) this.setAttribute(attr, value);\r\n      if (value === undefined) this.removeAttribute(attr);\r\n    });\r\n\r\n    this.shadowRoot!.innerHTML = `\r\n      <div class=\"${classes.join(' ')}\"><slot></slot></div>\r\n    `;\r\n  }\r\n}\r\n\r\ncustomElements.define('r-grid', GridElement);\r\n","import sheet from '../grid-style';\r\nimport {\r\n  getElemAttributeValue as getValues,\r\n  getHostAttributes,\r\n  isElemAttribute,\r\n  ObservedElemAttributes as Attributes,\r\n  getHostCSS,\r\n  elmAttrShort,\r\n} from '../util';\r\nimport type { ElemAttributeValues } from '../util';\r\n\r\n/**\r\n * @attr {string} text-align - set element's text alignment for each breakpoint\r\n * @attr {string} display - set element's display value for each breakpoint, space-separated\r\n * @attr {string} font - set element's font-size for each breakpoint, space-separated (Font values)\r\n * @attr {string} padding - set element's padding for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin - set element's margin for each breakpoint, space-separated  (Integers)\r\n * @attr {string} margin-top - set element's margin-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-right - set element's margin-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-bottom - set element's margin-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} margin-left - set element's margin-left for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-top - set element's padding-top for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-right - set element's padding-right for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-bottom - set element's padding-bottom for each breakpoint, space-separated (Dimension values)\r\n * @attr {string} padding-left - set element's padding-left for each breakpoint, space-separated (Dimension values)\r\n *\r\n * @summary attributes are space-separated values for each break-point\r\n * - Dimension values: none, small, medium, large, xlarge, xxlarge, small-, medium-, large-, xlarge-, xxlarge-\r\n * - Font values: xsmall, small, medium, large, xlarge, xxlarge\r\n * - ex:\r\n * - font=\"medium large xlarge\"\r\n * - col=\"12 6 4\"\r\n *\r\n * @tag r-elm\r\n */\r\nexport class ResponsiveElement extends HTMLElement {\r\n  static observedAttributes = Attributes;\r\n  private attr: Partial<ElemAttributeValues> = {};\r\n\r\n  constructor() {\r\n    super();\r\n    this.attachShadow({ mode: 'open' });\r\n    this.shadowRoot!.adoptedStyleSheets = [sheet];\r\n  }\r\n\r\n  attributeChangedCallback(name: string, _old: string, value: string) {\r\n    if (isElemAttribute(name)) {\r\n      this.attr[name] = value;\r\n      this.render();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.render();\r\n  }\r\n\r\n  render() {\r\n    const hostAttributes = getHostAttributes(Attributes, this.attr, getValues, elmAttrShort);\r\n    const hostCSS = getHostCSS(['display', 'text-align'], this.attr, getValues);\r\n\r\n    hostCSS.forEach(([attr, value]) => {\r\n      if (value) this.style.setProperty(attr, value);\r\n      if (value === undefined) this.style.removeProperty(attr);\r\n    });\r\n\r\n    hostAttributes.forEach(([attr, value]) => {\r\n      if (value) this.setAttribute(attr, value);\r\n      if (value === undefined) this.removeAttribute(attr);\r\n    });\r\n\r\n    this.shadowRoot!.innerHTML = `<slot></slot>`;\r\n  }\r\n}\r\n\r\ncustomElements.define('r-elm', ResponsiveElement);\r\n"],"mappings":"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"}