rezel 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/r-grid.cjs.js +2 -2
  2. package/dist/r-grid.cjs.js.map +1 -1
  3. package/dist/r-grid.es.js +62 -65
  4. package/dist/r-grid.es.js.map +1 -1
  5. package/package.json +1 -1
package/dist/r-grid.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- var e=`:host{--d0:var(--grid-dim-none,0px);--d1:var(--grid-dim-small,4px);--d2:var(--grid-dim-medium,8px);--d3:var(--grid-dim-large,16px);--d4:var(--grid-dim-xlarge,32px);--d5:var(--grid-dim-xxlarge,64px);--f0:var(--grid-font-xsmall,12px);--f1:var(--grid-font-small,14px);--f2:var(--grid-font-medium,16px);--f3:var(--grid-font-large,24px);--f4:var(--grid-font-xlarge,32px);--f5:var(--grid-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}: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),p=e=>l.includes(e),m=e=>c.includes(e);var h=e=>{let t=parseInt(e.trim());return t===void 0?null:String(t)},g=e=>{let t=e.trim().toLowerCase();return m(t)?t:null},_=e=>{let t=e.trim().toLowerCase();return s.includes(t)?String(s.indexOf(t)):null},v=e=>{let t=e.trim().toLowerCase();return p(t)?t:null},y=e=>{let t=e.trim().toLowerCase();return u.includes(t)?String(u.indexOf(t)):null};const b={row:`boolean`,cell:`boolean`,"text-align":v,"skip-before":h,"skip-after":h,col:h,gap:_,font:y,order:h,display:g,padding:_},x={font:y,margin:_,padding:_,display:g,"text-align":v,"margin-top":_,"margin-right":_,"margin-bottom":_,"margin-left":_,"padding-top":_,"padding-right":_,"padding-bottom":_,"padding-left":_},S={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`},C={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`},w=(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},T=(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)},E=(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 D=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=w([`row`,`gap`],this.attr,b),t=T(a,this.attr,b,S),n=E([`display`,`text-align`],this.attr,b);`skip-before`in this.attr&&console.log({hostAttributes:t,attr:this.attr}),n.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=`
1
+ 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=`
2
2
  <div class="${e.join(` `)}"><slot></slot></div>
3
- `}};customElements.define(`r-grid`,D);var O=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=T(i,this.attr,x,C);E([`display`,`text-align`],this.attr,x).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-element`,O),exports.GridElement=D,exports.ResponsiveElement=O;
3
+ `}};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;
4
4
  //# sourceMappingURL=r-grid.cjs.js.map
package/dist/r-grid.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"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(--grid-dim-none, 0px);\r\n --d1: var(--grid-dim-small, 4px);\r\n --d2: var(--grid-dim-medium, 8px);\r\n --d3: var(--grid-dim-large, 16px);\r\n --d4: var(--grid-dim-xlarge, 32px);\r\n --d5: var(--grid-dim-xxlarge, 64px);\r\n --f0: var(--grid-font-xsmall, 12px);\r\n --f1: var(--grid-font-small, 14px);\r\n --f2: var(--grid-font-medium, 16px);\r\n --f3: var(--grid-font-large, 24px);\r\n --f4: var(--grid-font-xlarge, 32px);\r\n --f5: var(--grid-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: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\nexport const isTextAlignValue = (value: string): value is TextAlignValue =>\r\n TextAlignValues.includes(value as TextAlignValue);\r\n\r\nexport const isDisplayValue = (value: string): value is DisplayValue =>\r\n DisplayValues.includes(value as DisplayValue);\r\n\r\nexport const isFontSize = (size: string): size is FontSize => FontSizes.includes(size as FontSize);\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 isDisplayValue(value) ? value : 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 isTextAlignValue(value) ? value : 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 - move element left by the given columns for each breakpoint (Integers)\r\n * @attr {string} skip-after - clear 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 if ('skip-before' in this.attr) {\r\n console.log({ hostAttributes, attr: this.attr });\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-element\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-element', ResponsiveElement);\r\n"],"mappings":"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"}
1
+ {"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 CHANGED
@@ -1,4 +1,4 @@
1
- var grid_default = ":host{--d0:var(--grid-dim-none,0px);--d1:var(--grid-dim-small,4px);--d2:var(--grid-dim-medium,8px);--d3:var(--grid-dim-large,16px);--d4:var(--grid-dim-xlarge,32px);--d5:var(--grid-dim-xxlarge,64px);--f0:var(--grid-font-xsmall,12px);--f1:var(--grid-font-small,14px);--f2:var(--grid-font-medium,16px);--f3:var(--grid-font-large,24px);--f4:var(--grid-font-xlarge,32px);--f5:var(--grid-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}: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();
1
+ 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();
2
2
  sheet.replaceSync(grid_default);
3
3
  var grid_style_default = sheet;
4
4
  const GlobalValues = [
@@ -80,22 +80,22 @@ const GlobalValues = [
80
80
  "large",
81
81
  "xlarge",
82
82
  "xxlarge"
83
- ], isElemAttribute = (e) => ObservedElemAttributes.includes(e), isGridAttribute = (e) => ObservedGridAttributes.includes(e), isTextAlignValue = (e) => TextAlignValues.includes(e), isDisplayValue = (e) => DisplayValues.includes(e);
83
+ ], isElemAttribute = (e) => ObservedElemAttributes.includes(e), isGridAttribute = (e) => ObservedGridAttributes.includes(e);
84
84
  var getValidNumber = (e) => {
85
- let S = parseInt(e.trim());
86
- return S === void 0 ? null : String(S);
85
+ let b = parseInt(e.trim());
86
+ return b === void 0 ? null : String(b);
87
87
  }, getValidDisplay = (e) => {
88
- let S = e.trim().toLowerCase();
89
- return isDisplayValue(S) ? S : null;
88
+ let b = e.trim().toLowerCase();
89
+ return DisplayValues.includes(b) ? b : null;
90
90
  }, getValidDimension = (e) => {
91
- let S = e.trim().toLowerCase();
92
- return DimensionSizes.includes(S) ? String(DimensionSizes.indexOf(S)) : null;
91
+ let b = e.trim().toLowerCase();
92
+ return DimensionSizes.includes(b) ? String(DimensionSizes.indexOf(b)) : null;
93
93
  }, getValidTextAlign = (e) => {
94
- let S = e.trim().toLowerCase();
95
- return isTextAlignValue(S) ? S : null;
94
+ let b = e.trim().toLowerCase();
95
+ return TextAlignValues.includes(b) ? b : null;
96
96
  }, getValidFont = (e) => {
97
- let S = e.trim().toLowerCase();
98
- return FontSizes.includes(S) ? String(FontSizes.indexOf(S)) : null;
97
+ let b = e.trim().toLowerCase();
98
+ return FontSizes.includes(b) ? String(FontSizes.indexOf(b)) : null;
99
99
  };
100
100
  const getGridAttributeValue = {
101
101
  row: "boolean",
@@ -149,40 +149,40 @@ const getGridAttributeValue = {
149
149
  "padding-right": "pr",
150
150
  "padding-bottom": "pb",
151
151
  "padding-left": "pl"
152
- }, getClasses = (e, S, C) => {
153
- let w = [];
154
- for (let T of e) if (S[T] !== void 0) {
155
- let e = C[T];
156
- e === "boolean" ? w.push(`${T}`) : S[T].split(" ").filter(Boolean).forEach((S, C) => {
157
- let E = MediaSizes[C], D = e(S);
158
- E && D && w.push(`${T}-${E}-${D}`);
152
+ }, getClasses = (e, b, x) => {
153
+ let S = [];
154
+ for (let C of e) if (b[C] !== void 0) {
155
+ let e = x[C];
156
+ e === "boolean" ? S.push(`${C}`) : b[C].split(" ").filter(Boolean).forEach((b, x) => {
157
+ let w = MediaSizes[x], T = e(b);
158
+ w && T && S.push(`${C}-${w}-${T}`);
159
159
  });
160
160
  }
161
- return w;
162
- }, getHostAttributes = (e, S, C, w) => {
163
- let T = {};
164
- for (let E of e) if (MediaSizes.forEach((e, S) => {
165
- T[`r-${w[E]}${S + 1}`] = void 0;
166
- }), S[E] !== void 0) {
167
- let e = C[E];
168
- e === "boolean" ? T[`r-${E}`] = E : S[E].split(" ").filter(Boolean).forEach((S, C) => {
169
- let D = MediaSizes[C], O = e(S);
170
- D && O && (T[`r-${w[E]}${C + 1}`] = O);
161
+ return S;
162
+ }, getHostAttributes = (e, b, x, S) => {
163
+ let C = {};
164
+ for (let w of e) if (MediaSizes.forEach((e, b) => {
165
+ C[`r-${S[w]}${b + 1}`] = void 0;
166
+ }), b[w] !== void 0) {
167
+ let e = x[w];
168
+ e === "boolean" ? C[`r-${w}`] = w : b[w].split(" ").filter(Boolean).forEach((b, x) => {
169
+ let T = MediaSizes[x], E = e(b);
170
+ T && E && (C[`r-${S[w]}${x + 1}`] = E);
171
171
  });
172
172
  }
173
- return Object.entries(T);
174
- }, getHostCSS = (e, S, C) => {
175
- let w = {};
176
- for (let T of e) if (MediaSizes.forEach((e) => {
177
- w[`--${T}-${e}`] = void 0;
178
- }), S[T] !== void 0) {
179
- let e = C[T];
180
- e !== "boolean" && S[T].split(" ").filter(Boolean).forEach((S, C) => {
181
- let E = MediaSizes[C], D = e(S);
182
- E && D && (w[`--${T}-${E}`] = D);
173
+ return Object.entries(C);
174
+ }, getHostCSS = (e, b, x) => {
175
+ let S = {};
176
+ for (let C of e) if (MediaSizes.forEach((e) => {
177
+ S[`--${C}-${e}`] = void 0;
178
+ }), b[C] !== void 0) {
179
+ let e = x[C];
180
+ e !== "boolean" && b[C].split(" ").filter(Boolean).forEach((b, x) => {
181
+ let w = MediaSizes[x], T = e(b);
182
+ w && T && (S[`--${C}-${w}`] = T);
183
183
  });
184
184
  }
185
- return Object.entries(w);
185
+ return Object.entries(S);
186
186
  };
187
187
  var GridElement = class extends HTMLElement {
188
188
  static observedAttributes = ObservedGridAttributes;
@@ -193,17 +193,17 @@ var GridElement = class extends HTMLElement {
193
193
  super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
194
194
  }
195
195
  detectRowChange() {
196
- let e = this.mainSlot(), S = this.container();
197
- if (!e || !S) return;
198
- let C = e.assignedElements().some((e) => e.matches("r-grid")), w = this.attr.row !== "row" && C, T = this.attr.row === "row" && !C;
199
- return w && (this.attr.row = "row"), T && delete this.attr.row, w || T;
196
+ let e = this.mainSlot(), b = this.container();
197
+ if (!e || !b) return;
198
+ let x = e.assignedElements().some((e) => e.matches("r-grid")), S = this.attr.row !== "row" && x, C = this.attr.row === "row" && !x;
199
+ return S && (this.attr.row = "row"), C && delete this.attr.row, S || C;
200
200
  }
201
201
  detectCellChange() {
202
- let e = this.parentElement?.matches("r-grid"), S = this.attr.cell !== "cell" && e, C = this.attr.cell === "cell" && !e;
203
- return S && (this.attr.cell = "cell"), C && delete this.attr.cell, S || C;
202
+ let e = this.parentElement?.matches("r-grid"), b = this.attr.cell !== "cell" && e, x = this.attr.cell === "cell" && !e;
203
+ return b && (this.attr.cell = "cell"), x && delete this.attr.cell, b || x;
204
204
  }
205
- attributeChangedCallback(e, S, C) {
206
- isGridAttribute(e) && (this.attr[e] = C, this.render());
205
+ attributeChangedCallback(e, b, x) {
206
+ isGridAttribute(e) && (this.attr[e] = x, this.render());
207
207
  }
208
208
  connectedMoveCallback() {
209
209
  this.detectCellChange();
@@ -212,18 +212,15 @@ var GridElement = class extends HTMLElement {
212
212
  this.mainSlot()?.addEventListener("slotchange", () => {
213
213
  this.detectRowChange() && this.render();
214
214
  }), this.render();
215
- let e = this.detectRowChange(), S = this.detectCellChange();
216
- (e || S) && this.render();
215
+ let e = this.detectRowChange(), b = this.detectCellChange();
216
+ (e || b) && this.render();
217
217
  }
218
218
  render() {
219
- let e = getClasses(["row", "gap"], this.attr, getGridAttributeValue), S = getHostAttributes(ObservedGridAttributes, this.attr, getGridAttributeValue, gridAttrShort), C = getHostCSS(["display", "text-align"], this.attr, getGridAttributeValue);
220
- "skip-before" in this.attr && console.log({
221
- hostAttributes: S,
222
- attr: this.attr
223
- }), C.forEach(([e, S]) => {
224
- S && this.style.setProperty(e, S), S === void 0 && this.style.removeProperty(e);
225
- }), S.forEach(([e, S]) => {
226
- S && this.setAttribute(e, S), S === void 0 && this.removeAttribute(e);
219
+ let e = getClasses(["row", "gap"], this.attr, getGridAttributeValue), b = getHostAttributes(ObservedGridAttributes, this.attr, getGridAttributeValue, gridAttrShort);
220
+ getHostCSS(["display", "text-align"], this.attr, getGridAttributeValue).forEach(([e, b]) => {
221
+ b && this.style.setProperty(e, b), b === void 0 && this.style.removeProperty(e);
222
+ }), b.forEach(([e, b]) => {
223
+ b && this.setAttribute(e, b), b === void 0 && this.removeAttribute(e);
227
224
  }), this.shadowRoot.innerHTML = `
228
225
  <div class="${e.join(" ")}"><slot></slot></div>
229
226
  `;
@@ -236,22 +233,22 @@ var ResponsiveElement = class extends HTMLElement {
236
233
  constructor() {
237
234
  super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
238
235
  }
239
- attributeChangedCallback(e, S, C) {
240
- isElemAttribute(e) && (this.attr[e] = C, this.render());
236
+ attributeChangedCallback(e, b, x) {
237
+ isElemAttribute(e) && (this.attr[e] = x, this.render());
241
238
  }
242
239
  connectedCallback() {
243
240
  this.render();
244
241
  }
245
242
  render() {
246
243
  let e = getHostAttributes(ObservedElemAttributes, this.attr, getElemAttributeValue, elmAttrShort);
247
- getHostCSS(["display", "text-align"], this.attr, getElemAttributeValue).forEach(([e, S]) => {
248
- S && this.style.setProperty(e, S), S === void 0 && this.style.removeProperty(e);
249
- }), e.forEach(([e, S]) => {
250
- S && this.setAttribute(e, S), S === void 0 && this.removeAttribute(e);
244
+ getHostCSS(["display", "text-align"], this.attr, getElemAttributeValue).forEach(([e, b]) => {
245
+ b && this.style.setProperty(e, b), b === void 0 && this.style.removeProperty(e);
246
+ }), e.forEach(([e, b]) => {
247
+ b && this.setAttribute(e, b), b === void 0 && this.removeAttribute(e);
251
248
  }), this.shadowRoot.innerHTML = "<slot></slot>";
252
249
  }
253
250
  };
254
- customElements.define("r-element", ResponsiveElement);
251
+ customElements.define("r-elm", ResponsiveElement);
255
252
  export { GridElement, ResponsiveElement };
256
253
 
257
254
  //# sourceMappingURL=r-grid.es.js.map
package/dist/r-grid.es.js.map CHANGED
@@ -1 +1 @@
1
- {"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(--grid-dim-none, 0px);\r\n --d1: var(--grid-dim-small, 4px);\r\n --d2: var(--grid-dim-medium, 8px);\r\n --d3: var(--grid-dim-large, 16px);\r\n --d4: var(--grid-dim-xlarge, 32px);\r\n --d5: var(--grid-dim-xxlarge, 64px);\r\n --f0: var(--grid-font-xsmall, 12px);\r\n --f1: var(--grid-font-small, 14px);\r\n --f2: var(--grid-font-medium, 16px);\r\n --f3: var(--grid-font-large, 24px);\r\n --f4: var(--grid-font-xlarge, 32px);\r\n --f5: var(--grid-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: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\nexport const isTextAlignValue = (value: string): value is TextAlignValue =>\r\n TextAlignValues.includes(value as TextAlignValue);\r\n\r\nexport const isDisplayValue = (value: string): value is DisplayValue =>\r\n DisplayValues.includes(value as DisplayValue);\r\n\r\nexport const isFontSize = (size: string): size is FontSize => FontSizes.includes(size as FontSize);\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 isDisplayValue(value) ? value : 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 isTextAlignValue(value) ? value : 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 - move element left by the given columns for each breakpoint (Integers)\r\n * @attr {string} skip-after - clear 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 if ('skip-before' in this.attr) {\r\n console.log({ hostAttributes, attr: this.attr });\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-element\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-element', ResponsiveElement);\r\n"],"mappings":"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"}
1
+ {"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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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "rezel",
3
3
  "description": "custom elements with responsive attributes",
4
- "version": "1.0.2",
4
+ "version": "1.0.4",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"