rezel 1.0.0

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 (7) hide show
  1. package/README.md +2 -0
  2. package/dist/r-grid.cjs.js +4 -0
  3. package/dist/r-grid.cjs.js.map +1 -0
  4. package/dist/r-grid.es.js +209 -0
  5. package/dist/r-grid.es.js.map +1 -0
  6. package/dist/vite.svg +1 -0
  7. package/package.json +28 -0
package/README.md ADDED
@@ -0,0 +1,2 @@
1
+ # responsive-grid
2
+ custom elements with responsive attributes
package/dist/r-grid.cjs.js ADDED
@@ -0,0 +1,4 @@
1
+ var e=`:host{--dim-none:0px;--dim-small:4px;--dim-medium:8px;--dim-large:16px;--dim-xlarge:32px;--dim-xxlarge:64px;--dim-small-:-4px;--dim-medium-:-8px;--dim-large-:-16px;--dim-xlarge-:-32px;--dim-xxlarge-:-64px;--font-xsmall:12px;--font-small:14px;--font-medium:16px;--font-large:24px;--font-xlarge:32px;--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([data-cell]){flex:auto}:host([data-col-small]),:host([data-col-medium]),:host([data-col-large]),:host([data-col-xlarge]){max-width:calc(var(--columns)/12*100% - var(--gap)*(12 - var(--columns))/12);flex:100%}:host([data-offset-small]),:host([data-offset-medium]),:host([data-offset-large]),:host([data-offset-xlarge]){margin-left:calc(var(--offset)/12*100% + var(--gap)*var(--offset)/12)}@media (min-width:0){:host([data-display-small]){display:var(--display-small)}:host([data-font-small=xsmall]){font-size:var(--font-xsmall)}:host([data-font-small=small]){font-size:var(--font-small)}:host([data-font-small=medium]){font-size:var(--font-medium)}:host([data-font-small=large]){font-size:var(--font-large)}:host([data-font-small=xlarge]){font-size:var(--font-xlarge)}:host([data-font-small=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-small-none{--gap:var(--dim-none)}:host([data-padding-small=none]){padding:var(--dim-none)}:host([data-padding-top-small=none]){padding-top:var(--dim-none)}:host([data-padding-left-small=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-small=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-small=none]){padding-right:var(--dim-none)}:host([data-margin-small=none]){margin:var(--dim-none)}:host([data-margin-top-small=none]){margin-top:var(--dim-none)}:host([data-margin-left-small=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-small=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-small=none]){margin-right:var(--dim-none)}.row.gap-small-small{--gap:var(--dim-small)}:host([data-padding-small=small]){padding:var(--dim-small)}:host([data-padding-top-small=small]){padding-top:var(--dim-small)}:host([data-padding-left-small=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-small=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-small=small]){padding-right:var(--dim-small)}:host([data-margin-small=small]){margin:var(--dim-small)}:host([data-margin-top-small=small]){margin-top:var(--dim-small)}:host([data-margin-left-small=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-small=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-small=small]){margin-right:var(--dim-small)}.row.gap-small-medium{--gap:var(--dim-medium)}:host([data-padding-small=medium]){padding:var(--dim-medium)}:host([data-padding-top-small=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-small=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-small=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-small=medium]){padding-right:var(--dim-medium)}:host([data-margin-small=medium]){margin:var(--dim-medium)}:host([data-margin-top-small=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-small=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-small=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-small=medium]){margin-right:var(--dim-medium)}.row.gap-small-large{--gap:var(--dim-large)}:host([data-padding-small=large]){padding:var(--dim-large)}:host([data-padding-top-small=large]){padding-top:var(--dim-large)}:host([data-padding-left-small=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-small=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-small=large]){padding-right:var(--dim-large)}:host([data-margin-small=large]){margin:var(--dim-large)}:host([data-margin-top-small=large]){margin-top:var(--dim-large)}:host([data-margin-left-small=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-small=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-small=large]){margin-right:var(--dim-large)}.row.gap-small-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-small=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-small=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-small=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-small=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-small=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-small=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-small=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-small=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-small=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-small=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-small-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-small=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-small=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-small=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-small=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-small=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-small=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-small=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-small=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-small=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-small=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-small-small-{--gap:var(--dim-small-)}:host([data-padding-small=small-]){padding:var(--dim-small-)}:host([data-padding-top-small=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-small=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-small=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-small=small-]){padding-right:var(--dim-small-)}:host([data-margin-small=small-]){margin:var(--dim-small-)}:host([data-margin-top-small=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-small=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-small=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-small=small-]){margin-right:var(--dim-small-)}.row.gap-small-medium-{--gap:var(--dim-medium-)}:host([data-padding-small=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-small=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-small=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-small=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-small=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-small=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-small=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-small=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-small=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-small=medium-]){margin-right:var(--dim-medium-)}.row.gap-small-large-{--gap:var(--dim-large-)}:host([data-padding-small=large-]){padding:var(--dim-large-)}:host([data-padding-top-small=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-small=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-small=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-small=large-]){padding-right:var(--dim-large-)}:host([data-margin-small=large-]){margin:var(--dim-large-)}:host([data-margin-top-small=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-small=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-small=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-small=large-]){margin-right:var(--dim-large-)}.row.gap-small-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-small=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-small=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-small=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-small=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-small=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-small=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-small=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-small=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-small=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-small=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-small-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-small=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-small=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-small=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-small=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-small=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-small=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-small=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-small=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-small=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-small=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-small="12"]){order:12}:host([data-col-small="12"]){--columns:12}:host([data-offset-small="12"]){--offset:12}:host([data-order-small="11"]){order:11}:host([data-col-small="11"]){--columns:11}:host([data-offset-small="11"]){--offset:11}:host([data-order-small="10"]){order:10}:host([data-col-small="10"]){--columns:10}:host([data-offset-small="10"]){--offset:10}:host([data-order-small="9"]){order:9}:host([data-col-small="9"]){--columns:9}:host([data-offset-small="9"]){--offset:9}:host([data-order-small="8"]){order:8}:host([data-col-small="8"]){--columns:8}:host([data-offset-small="8"]){--offset:8}:host([data-order-small="7"]){order:7}:host([data-col-small="7"]){--columns:7}:host([data-offset-small="7"]){--offset:7}:host([data-order-small="6"]){order:6}:host([data-col-small="6"]){--columns:6}:host([data-offset-small="6"]){--offset:6}:host([data-order-small="5"]){order:5}:host([data-col-small="5"]){--columns:5}:host([data-offset-small="5"]){--offset:5}:host([data-order-small="4"]){order:4}:host([data-col-small="4"]){--columns:4}:host([data-offset-small="4"]){--offset:4}:host([data-order-small="3"]){order:3}:host([data-col-small="3"]){--columns:3}:host([data-offset-small="3"]){--offset:3}:host([data-order-small="2"]){order:2}:host([data-col-small="2"]){--columns:2}:host([data-offset-small="2"]){--offset:2}:host([data-order-small="1"]){order:1}:host([data-col-small="1"]){--columns:1}:host([data-offset-small="1"]){--offset:1}}@media (min-width:768px){:host([data-display-medium]){display:var(--display-medium)}:host([data-font-medium=xsmall]){font-size:var(--font-xsmall)}:host([data-font-medium=small]){font-size:var(--font-small)}:host([data-font-medium=medium]){font-size:var(--font-medium)}:host([data-font-medium=large]){font-size:var(--font-large)}:host([data-font-medium=xlarge]){font-size:var(--font-xlarge)}:host([data-font-medium=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-medium-none{--gap:var(--dim-none)}:host([data-padding-medium=none]){padding:var(--dim-none)}:host([data-padding-top-medium=none]){padding-top:var(--dim-none)}:host([data-padding-left-medium=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-medium=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-medium=none]){padding-right:var(--dim-none)}:host([data-margin-medium=none]){margin:var(--dim-none)}:host([data-margin-top-medium=none]){margin-top:var(--dim-none)}:host([data-margin-left-medium=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-medium=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-medium=none]){margin-right:var(--dim-none)}.row.gap-medium-small{--gap:var(--dim-small)}:host([data-padding-medium=small]){padding:var(--dim-small)}:host([data-padding-top-medium=small]){padding-top:var(--dim-small)}:host([data-padding-left-medium=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-medium=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-medium=small]){padding-right:var(--dim-small)}:host([data-margin-medium=small]){margin:var(--dim-small)}:host([data-margin-top-medium=small]){margin-top:var(--dim-small)}:host([data-margin-left-medium=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-medium=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-medium=small]){margin-right:var(--dim-small)}.row.gap-medium-medium{--gap:var(--dim-medium)}:host([data-padding-medium=medium]){padding:var(--dim-medium)}:host([data-padding-top-medium=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-medium=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-medium=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-medium=medium]){padding-right:var(--dim-medium)}:host([data-margin-medium=medium]){margin:var(--dim-medium)}:host([data-margin-top-medium=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-medium=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-medium=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-medium=medium]){margin-right:var(--dim-medium)}.row.gap-medium-large{--gap:var(--dim-large)}:host([data-padding-medium=large]){padding:var(--dim-large)}:host([data-padding-top-medium=large]){padding-top:var(--dim-large)}:host([data-padding-left-medium=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-medium=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-medium=large]){padding-right:var(--dim-large)}:host([data-margin-medium=large]){margin:var(--dim-large)}:host([data-margin-top-medium=large]){margin-top:var(--dim-large)}:host([data-margin-left-medium=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-medium=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-medium=large]){margin-right:var(--dim-large)}.row.gap-medium-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-medium=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-medium=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-medium=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-medium=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-medium=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-medium=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-medium=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-medium=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-medium=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-medium=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-medium-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-medium=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-medium=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-medium=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-medium=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-medium=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-medium=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-medium=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-medium=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-medium=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-medium=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-medium-small-{--gap:var(--dim-small-)}:host([data-padding-medium=small-]){padding:var(--dim-small-)}:host([data-padding-top-medium=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-medium=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-medium=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-medium=small-]){padding-right:var(--dim-small-)}:host([data-margin-medium=small-]){margin:var(--dim-small-)}:host([data-margin-top-medium=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-medium=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-medium=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-medium=small-]){margin-right:var(--dim-small-)}.row.gap-medium-medium-{--gap:var(--dim-medium-)}:host([data-padding-medium=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-medium=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-medium=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-medium=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-medium=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-medium=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-medium=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-medium=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-medium=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-medium=medium-]){margin-right:var(--dim-medium-)}.row.gap-medium-large-{--gap:var(--dim-large-)}:host([data-padding-medium=large-]){padding:var(--dim-large-)}:host([data-padding-top-medium=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-medium=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-medium=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-medium=large-]){padding-right:var(--dim-large-)}:host([data-margin-medium=large-]){margin:var(--dim-large-)}:host([data-margin-top-medium=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-medium=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-medium=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-medium=large-]){margin-right:var(--dim-large-)}.row.gap-medium-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-medium=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-medium=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-medium=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-medium=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-medium=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-medium=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-medium=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-medium=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-medium=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-medium=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-medium-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-medium=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-medium=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-medium=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-medium=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-medium=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-medium=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-medium=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-medium=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-medium=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-medium=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-medium="12"]){order:12}:host([data-col-medium="12"]){--columns:12}:host([data-offset-medium="12"]){--offset:12}:host([data-order-medium="11"]){order:11}:host([data-col-medium="11"]){--columns:11}:host([data-offset-medium="11"]){--offset:11}:host([data-order-medium="10"]){order:10}:host([data-col-medium="10"]){--columns:10}:host([data-offset-medium="10"]){--offset:10}:host([data-order-medium="9"]){order:9}:host([data-col-medium="9"]){--columns:9}:host([data-offset-medium="9"]){--offset:9}:host([data-order-medium="8"]){order:8}:host([data-col-medium="8"]){--columns:8}:host([data-offset-medium="8"]){--offset:8}:host([data-order-medium="7"]){order:7}:host([data-col-medium="7"]){--columns:7}:host([data-offset-medium="7"]){--offset:7}:host([data-order-medium="6"]){order:6}:host([data-col-medium="6"]){--columns:6}:host([data-offset-medium="6"]){--offset:6}:host([data-order-medium="5"]){order:5}:host([data-col-medium="5"]){--columns:5}:host([data-offset-medium="5"]){--offset:5}:host([data-order-medium="4"]){order:4}:host([data-col-medium="4"]){--columns:4}:host([data-offset-medium="4"]){--offset:4}:host([data-order-medium="3"]){order:3}:host([data-col-medium="3"]){--columns:3}:host([data-offset-medium="3"]){--offset:3}:host([data-order-medium="2"]){order:2}:host([data-col-medium="2"]){--columns:2}:host([data-offset-medium="2"]){--offset:2}:host([data-order-medium="1"]){order:1}:host([data-col-medium="1"]){--columns:1}:host([data-offset-medium="1"]){--offset:1}}@media (min-width:1024px){:host([data-display-large]){display:var(--display-large)}:host([data-font-large=xsmall]){font-size:var(--font-xsmall)}:host([data-font-large=small]){font-size:var(--font-small)}:host([data-font-large=medium]){font-size:var(--font-medium)}:host([data-font-large=large]){font-size:var(--font-large)}:host([data-font-large=xlarge]){font-size:var(--font-xlarge)}:host([data-font-large=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-large-none{--gap:var(--dim-none)}:host([data-padding-large=none]){padding:var(--dim-none)}:host([data-padding-top-large=none]){padding-top:var(--dim-none)}:host([data-padding-left-large=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-large=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-large=none]){padding-right:var(--dim-none)}:host([data-margin-large=none]){margin:var(--dim-none)}:host([data-margin-top-large=none]){margin-top:var(--dim-none)}:host([data-margin-left-large=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-large=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-large=none]){margin-right:var(--dim-none)}.row.gap-large-small{--gap:var(--dim-small)}:host([data-padding-large=small]){padding:var(--dim-small)}:host([data-padding-top-large=small]){padding-top:var(--dim-small)}:host([data-padding-left-large=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-large=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-large=small]){padding-right:var(--dim-small)}:host([data-margin-large=small]){margin:var(--dim-small)}:host([data-margin-top-large=small]){margin-top:var(--dim-small)}:host([data-margin-left-large=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-large=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-large=small]){margin-right:var(--dim-small)}.row.gap-large-medium{--gap:var(--dim-medium)}:host([data-padding-large=medium]){padding:var(--dim-medium)}:host([data-padding-top-large=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-large=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-large=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-large=medium]){padding-right:var(--dim-medium)}:host([data-margin-large=medium]){margin:var(--dim-medium)}:host([data-margin-top-large=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-large=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-large=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-large=medium]){margin-right:var(--dim-medium)}.row.gap-large-large{--gap:var(--dim-large)}:host([data-padding-large=large]){padding:var(--dim-large)}:host([data-padding-top-large=large]){padding-top:var(--dim-large)}:host([data-padding-left-large=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-large=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-large=large]){padding-right:var(--dim-large)}:host([data-margin-large=large]){margin:var(--dim-large)}:host([data-margin-top-large=large]){margin-top:var(--dim-large)}:host([data-margin-left-large=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-large=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-large=large]){margin-right:var(--dim-large)}.row.gap-large-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-large=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-large=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-large=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-large=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-large=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-large=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-large=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-large=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-large=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-large=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-large-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-large=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-large=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-large=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-large=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-large=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-large=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-large=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-large=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-large=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-large=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-large-small-{--gap:var(--dim-small-)}:host([data-padding-large=small-]){padding:var(--dim-small-)}:host([data-padding-top-large=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-large=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-large=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-large=small-]){padding-right:var(--dim-small-)}:host([data-margin-large=small-]){margin:var(--dim-small-)}:host([data-margin-top-large=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-large=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-large=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-large=small-]){margin-right:var(--dim-small-)}.row.gap-large-medium-{--gap:var(--dim-medium-)}:host([data-padding-large=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-large=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-large=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-large=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-large=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-large=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-large=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-large=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-large=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-large=medium-]){margin-right:var(--dim-medium-)}.row.gap-large-large-{--gap:var(--dim-large-)}:host([data-padding-large=large-]){padding:var(--dim-large-)}:host([data-padding-top-large=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-large=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-large=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-large=large-]){padding-right:var(--dim-large-)}:host([data-margin-large=large-]){margin:var(--dim-large-)}:host([data-margin-top-large=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-large=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-large=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-large=large-]){margin-right:var(--dim-large-)}.row.gap-large-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-large=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-large=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-large=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-large=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-large=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-large=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-large=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-large=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-large=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-large=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-large-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-large=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-large=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-large=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-large=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-large=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-large=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-large=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-large=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-large=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-large=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-large="12"]){order:12}:host([data-col-large="12"]){--columns:12}:host([data-offset-large="12"]){--offset:12}:host([data-order-large="11"]){order:11}:host([data-col-large="11"]){--columns:11}:host([data-offset-large="11"]){--offset:11}:host([data-order-large="10"]){order:10}:host([data-col-large="10"]){--columns:10}:host([data-offset-large="10"]){--offset:10}:host([data-order-large="9"]){order:9}:host([data-col-large="9"]){--columns:9}:host([data-offset-large="9"]){--offset:9}:host([data-order-large="8"]){order:8}:host([data-col-large="8"]){--columns:8}:host([data-offset-large="8"]){--offset:8}:host([data-order-large="7"]){order:7}:host([data-col-large="7"]){--columns:7}:host([data-offset-large="7"]){--offset:7}:host([data-order-large="6"]){order:6}:host([data-col-large="6"]){--columns:6}:host([data-offset-large="6"]){--offset:6}:host([data-order-large="5"]){order:5}:host([data-col-large="5"]){--columns:5}:host([data-offset-large="5"]){--offset:5}:host([data-order-large="4"]){order:4}:host([data-col-large="4"]){--columns:4}:host([data-offset-large="4"]){--offset:4}:host([data-order-large="3"]){order:3}:host([data-col-large="3"]){--columns:3}:host([data-offset-large="3"]){--offset:3}:host([data-order-large="2"]){order:2}:host([data-col-large="2"]){--columns:2}:host([data-offset-large="2"]){--offset:2}:host([data-order-large="1"]){order:1}:host([data-col-large="1"]){--columns:1}:host([data-offset-large="1"]){--offset:1}}@media (min-width:1280px){:host([data-display-xlarge]){display:var(--display-xlarge)}:host([data-font-xlarge=xsmall]){font-size:var(--font-xsmall)}:host([data-font-xlarge=small]){font-size:var(--font-small)}:host([data-font-xlarge=medium]){font-size:var(--font-medium)}:host([data-font-xlarge=large]){font-size:var(--font-large)}:host([data-font-xlarge=xlarge]){font-size:var(--font-xlarge)}:host([data-font-xlarge=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-xlarge-none{--gap:var(--dim-none)}:host([data-padding-xlarge=none]){padding:var(--dim-none)}:host([data-padding-top-xlarge=none]){padding-top:var(--dim-none)}:host([data-padding-left-xlarge=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-xlarge=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-xlarge=none]){padding-right:var(--dim-none)}:host([data-margin-xlarge=none]){margin:var(--dim-none)}:host([data-margin-top-xlarge=none]){margin-top:var(--dim-none)}:host([data-margin-left-xlarge=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-xlarge=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-xlarge=none]){margin-right:var(--dim-none)}.row.gap-xlarge-small{--gap:var(--dim-small)}:host([data-padding-xlarge=small]){padding:var(--dim-small)}:host([data-padding-top-xlarge=small]){padding-top:var(--dim-small)}:host([data-padding-left-xlarge=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-xlarge=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-xlarge=small]){padding-right:var(--dim-small)}:host([data-margin-xlarge=small]){margin:var(--dim-small)}:host([data-margin-top-xlarge=small]){margin-top:var(--dim-small)}:host([data-margin-left-xlarge=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-xlarge=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-xlarge=small]){margin-right:var(--dim-small)}.row.gap-xlarge-medium{--gap:var(--dim-medium)}:host([data-padding-xlarge=medium]){padding:var(--dim-medium)}:host([data-padding-top-xlarge=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-xlarge=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-xlarge=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-xlarge=medium]){padding-right:var(--dim-medium)}:host([data-margin-xlarge=medium]){margin:var(--dim-medium)}:host([data-margin-top-xlarge=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-xlarge=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-xlarge=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-xlarge=medium]){margin-right:var(--dim-medium)}.row.gap-xlarge-large{--gap:var(--dim-large)}:host([data-padding-xlarge=large]){padding:var(--dim-large)}:host([data-padding-top-xlarge=large]){padding-top:var(--dim-large)}:host([data-padding-left-xlarge=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-xlarge=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-xlarge=large]){padding-right:var(--dim-large)}:host([data-margin-xlarge=large]){margin:var(--dim-large)}:host([data-margin-top-xlarge=large]){margin-top:var(--dim-large)}:host([data-margin-left-xlarge=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-xlarge=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-xlarge=large]){margin-right:var(--dim-large)}.row.gap-xlarge-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-xlarge=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-xlarge=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-xlarge=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-xlarge=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-xlarge=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-xlarge=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-xlarge=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-xlarge=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-xlarge=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-xlarge=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-xlarge-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-xlarge=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-xlarge=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-xlarge=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-xlarge=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-xlarge=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-xlarge=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-xlarge=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-xlarge=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-xlarge=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-xlarge=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-xlarge-small-{--gap:var(--dim-small-)}:host([data-padding-xlarge=small-]){padding:var(--dim-small-)}:host([data-padding-top-xlarge=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-xlarge=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-xlarge=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-xlarge=small-]){padding-right:var(--dim-small-)}:host([data-margin-xlarge=small-]){margin:var(--dim-small-)}:host([data-margin-top-xlarge=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-xlarge=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-xlarge=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-xlarge=small-]){margin-right:var(--dim-small-)}.row.gap-xlarge-medium-{--gap:var(--dim-medium-)}:host([data-padding-xlarge=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-xlarge=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-xlarge=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-xlarge=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-xlarge=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-xlarge=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-xlarge=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-xlarge=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-xlarge=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-xlarge=medium-]){margin-right:var(--dim-medium-)}.row.gap-xlarge-large-{--gap:var(--dim-large-)}:host([data-padding-xlarge=large-]){padding:var(--dim-large-)}:host([data-padding-top-xlarge=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-xlarge=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-xlarge=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-xlarge=large-]){padding-right:var(--dim-large-)}:host([data-margin-xlarge=large-]){margin:var(--dim-large-)}:host([data-margin-top-xlarge=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-xlarge=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-xlarge=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-xlarge=large-]){margin-right:var(--dim-large-)}.row.gap-xlarge-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-xlarge=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-xlarge=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-xlarge=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-xlarge=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-xlarge=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-xlarge=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-xlarge=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-xlarge=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-xlarge=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-xlarge=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-xlarge-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-xlarge=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-xlarge=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-xlarge=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-xlarge=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-xlarge=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-xlarge=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-xlarge=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-xlarge=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-xlarge=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-xlarge=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-xlarge="12"]){order:12}:host([data-col-xlarge="12"]){--columns:12}:host([data-offset-xlarge="12"]){--offset:12}:host([data-order-xlarge="11"]){order:11}:host([data-col-xlarge="11"]){--columns:11}:host([data-offset-xlarge="11"]){--offset:11}:host([data-order-xlarge="10"]){order:10}:host([data-col-xlarge="10"]){--columns:10}:host([data-offset-xlarge="10"]){--offset:10}:host([data-order-xlarge="9"]){order:9}:host([data-col-xlarge="9"]){--columns:9}:host([data-offset-xlarge="9"]){--offset:9}:host([data-order-xlarge="8"]){order:8}:host([data-col-xlarge="8"]){--columns:8}:host([data-offset-xlarge="8"]){--offset:8}:host([data-order-xlarge="7"]){order:7}:host([data-col-xlarge="7"]){--columns:7}:host([data-offset-xlarge="7"]){--offset:7}:host([data-order-xlarge="6"]){order:6}:host([data-col-xlarge="6"]){--columns:6}:host([data-offset-xlarge="6"]){--offset:6}:host([data-order-xlarge="5"]){order:5}:host([data-col-xlarge="5"]){--columns:5}:host([data-offset-xlarge="5"]){--offset:5}:host([data-order-xlarge="4"]){order:4}:host([data-col-xlarge="4"]){--columns:4}:host([data-offset-xlarge="4"]){--offset:4}:host([data-order-xlarge="3"]){order:3}:host([data-col-xlarge="3"]){--columns:3}:host([data-offset-xlarge="3"]){--offset:3}:host([data-order-xlarge="2"]){order:2}:host([data-col-xlarge="2"]){--columns:2}:host([data-offset-xlarge="2"]){--offset:2}:host([data-order-xlarge="1"]){order:1}:host([data-col-xlarge="1"]){--columns:1}:host([data-offset-xlarge="1"]){--offset:1}}`,t=new CSSStyleSheet;t.replaceSync(e);var n=t;const r=`grid-element`,i=[`display`,`font`,`padding`,`padding-top`,`padding-right`,`padding-bottom`,`padding-left`,`margin`,`margin-top`,`margin-right`,`margin-bottom`,`margin-left`],a=[`row`,`cell`,`col`,`display`,`order`,`offset`,`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`,`inherit`,`initial`,`revert`,`revert-layer`,`unset`],l=[`xsmall`,`small`,`medium`,`large`,`xlarge`,`xxlarge`],u=e=>i.includes(e),d=e=>a.includes(e),f=e=>s.includes(e),p=e=>c.includes(e),m=e=>l.includes(e);var h=e=>{let t=parseInt(e.trim());return t?String(t):null},g=e=>{let t=e.trim().toLowerCase();return p(t)?t:null},_=e=>{let t=e.trim().toLowerCase();return f(t)?t:null},v=e=>{let t=e.trim().toLowerCase();return m(t)?t:null};const y={row:`boolean`,cell:`boolean`,col:h,gap:_,font:v,order:h,offset:h,display:g,padding:_},b={font:v,margin:_,padding:_,display:g,"margin-top":_,"margin-right":_,"margin-bottom":_,"margin-left":_,"padding-top":_,"padding-right":_,"padding-bottom":_,"padding-left":_},x=(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},S=(e,t,n)=>{let r={};for(let i of e)if(o.forEach(e=>{r[`data-${i}-${e}`]=void 0}),t[i]!==void 0){let e=n[i];e===`boolean`?r[`data-${i}`]=i:t[i].split(` `).filter(Boolean).forEach((t,n)=>{let a=o[n],s=e(t);a&&s&&(r[`data-${i}-${a}`]=s)})}return Object.entries(r)},C=(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 w=class extends HTMLElement{static observedAttributes=a;attr={};mainSlot=()=>this.shadowRoot?.querySelector(`slot`)||null;container=()=>this.shadowRoot?.querySelector(`.grid-element`)||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){d(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=x(a,this.attr,y),t=S(a,this.attr,y);C([`display`],this.attr,y).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
+ <div class="grid-element ${e.join(` `)}"><slot></slot></div>
3
+ `}};customElements.define(`r-grid`,w);var T=class extends HTMLElement{static observedAttributes=i;attr={};constructor(){super(),this.attachShadow({mode:`open`}),this.shadowRoot.adoptedStyleSheets=[n]}attributeChangedCallback(e,t,n){u(e)&&(this.attr[e]=n,this.render())}connectedCallback(){this.render()}render(){let e=S(i,this.attr,b);C([`display`],this.attr,b).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`,T),exports.GridElement=w,exports.ResponsiveElement=T;
4
+ //# sourceMappingURL=r-grid.cjs.js.map
package/dist/r-grid.cjs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"r-grid.cjs.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","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\";\n@use \"sass:math\";\n\n$mediaSizes: (\n small: 0px,\n medium: 768px,\n large: 1024px,\n xlarge: 1280px,\n);\n$dimensions: \"none\", \"small\", \"medium\", \"large\", \"xlarge\", \"xxlarge\", \"small-\", \"medium-\", \"large-\", \"xlarge-\", \"xxlarge-\";\n$fonts: \"xsmall\", \"small\", \"medium\", \"large\", \"xlarge\", \"xxlarge\";\n\n:host {\n --dim-none: 0px;\n --dim-small: 4px;\n --dim-medium: 8px;\n --dim-large: 16px;\n --dim-xlarge: 32px;\n --dim-xxlarge: 64px;\n --dim-small-: -4px;\n --dim-medium-: -8px;\n --dim-large-: -16px;\n --dim-xlarge-: -32px;\n --dim-xxlarge-: -64px;\n --font-xsmall: 12px;\n --font-small: 14px;\n --font-medium: 16px;\n --font-large: 24px;\n --font-xlarge: 32px;\n --font-xxlarge: 40px;\n display: block;\n box-sizing: border-box !important;\n}\n\nslot {\n display: contents !important;\n}\n\n.row {\n box-sizing: border-box;\n justify-content: flex-start;\n gap: var(--gap);\n --gap: 0px;\n flex-flow: wrap;\n margin: 0;\n padding: 0;\n display: flex;\n}\n\n.cell {\n box-sizing: border-box;\n}\n\n:host([data-cell]) {\n flex: auto;\n}\n\n:host([data-col-small]),\n:host([data-col-medium]),\n:host([data-col-large]),\n:host([data-col-xlarge]) {\n flex: 100%;\n max-width: calc(((var(--columns) / 12) * 100%) - var(--gap) * (calc((12 - var(--columns)) / 12)));\n}\n\n:host([data-offset-small]),\n:host([data-offset-medium]),\n:host([data-offset-large]),\n:host([data-offset-xlarge]) {\n margin-left: calc(((var(--offset) / 12) * 100%) + var(--gap) * (calc(var(--offset) / 12)));\n}\n\n@each $mediaName, $mediaSize in $mediaSizes {\n @media (min-width: #{$mediaSize}) {\n :host([data-display-#{$mediaName}]) {\n display: var(--display-#{$mediaName});\n }\n\n @each $font in $fonts {\n :host([data-font-#{$mediaName}=\"#{$font}\"]) {\n font-size: var(--font-#{$font});\n }\n }\n @each $dimension in $dimensions {\n .row.gap-#{$mediaName}-#{$dimension} {\n --gap: var(--dim-#{$dimension});\n }\n :host([data-padding-#{$mediaName}=\"#{$dimension}\"]) {\n padding: var(--dim-#{$dimension});\n }\n :host([data-padding-top-#{$mediaName}=\"#{$dimension}\"]) {\n padding-top: var(--dim-#{$dimension});\n }\n :host([data-padding-left-#{$mediaName}=\"#{$dimension}\"]) {\n padding-left: var(--dim-#{$dimension});\n }\n :host([data-padding-bottom-#{$mediaName}=\"#{$dimension}\"]) {\n padding-bottom: var(--dim-#{$dimension});\n }\n :host([data-padding-right-#{$mediaName}=\"#{$dimension}\"]) {\n padding-right: var(--dim-#{$dimension});\n }\n :host([data-margin-#{$mediaName}=\"#{$dimension}\"]) {\n margin: var(--dim-#{$dimension});\n }\n :host([data-margin-top-#{$mediaName}=\"#{$dimension}\"]) {\n margin-top: var(--dim-#{$dimension});\n }\n :host([data-margin-left-#{$mediaName}=\"#{$dimension}\"]) {\n margin-left: var(--dim-#{$dimension});\n }\n :host([data-margin-bottom-#{$mediaName}=\"#{$dimension}\"]) {\n margin-bottom: var(--dim-#{$dimension});\n }\n :host([data-margin-right-#{$mediaName}=\"#{$dimension}\"]) {\n margin-right: var(--dim-#{$dimension});\n }\n }\n\n @for $i from 12 through 1 {\n :host([data-order-#{$mediaName}=\"#{$i}\"]) {\n order: #{$i};\n }\n :host([data-col-#{$mediaName}=\"#{$i}\"]) {\n --columns: #{$i};\n }\n :host([data-offset-#{$mediaName}=\"#{$i}\"]) {\n --offset: #{$i};\n }\n }\n }\n}\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 ContainerClass = \"grid-element\" as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n \"display\",\r\n \"font\",\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 = [\"row\", \"cell\", \"col\", \"display\", \"order\", \"offset\", \"gap\", \"padding\", \"font\"] 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 \"inherit\",\r\n \"initial\",\r\n \"revert\",\r\n \"revert-layer\",\r\n \"unset\",\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 FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute => ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute => ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\nexport const isDimensionSize = (size: string): size is DimensionSize => DimensionSizes.includes(size as DimensionSize);\r\nexport const isDisplayValue = (value: string): value is DisplayValue => DisplayValues.includes(value as DisplayValue);\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 ? 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): DimensionSize | null => {\r\n const value = val.trim().toLowerCase();\r\n return isDimensionSize(value) ? value : null;\r\n};\r\n\r\nconst getValidFont = (val: string): FontSize | null => {\r\n const value = val.trim().toLowerCase();\r\n return isFontSize(value) ? value : 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 col: getValidNumber,\r\n gap: getValidDimension,\r\n font: getValidFont,\r\n order: getValidNumber,\r\n offset: 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 \"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 getClasses = <K extends string>(attrNames: readonly K[], attrs: AttrValues<K>, validations: AttrValidations<K>) => {\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>(attrNames: readonly K[], attrs: AttrValues<K>, validations: AttrValidations<K>) => {\r\n const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((mediaSize) => {\r\n hostAttributes[`data-${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 hostAttributes[`data-${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[`data-${attr}-${mediaSize}`] = 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>(attrNames: readonly K[], attrs: AttrValues<K>, validations: AttrValidations<K>) => {\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 ContainerClass,\r\n getClasses,\r\n getGridAttributeValue as getValues,\r\n getHostAttributes,\r\n isGridAttribute,\r\n ObservedGridAttributes as Attributes,\r\n getHostCSS,\r\n} from \"../util\";\r\nimport type { GridAttributeValues } from \"../util\";\r\n\r\n/**\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} offset - set element's column offset for each breakpoint (Integers)\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 => this.shadowRoot?.querySelector(\"slot\") || null;\r\n /**\r\n * @internal\r\n */\r\n private readonly container = (): Element | null => this.shadowRoot?.querySelector(`.${ContainerClass}`) || 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(Attributes, this.attr, getValues);\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues);\r\n const hostCSS = getHostCSS([\"display\"], 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=\"${ContainerClass} ${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 { getElemAttributeValue as getValues, getHostAttributes, isElemAttribute, ObservedElemAttributes as Attributes, getHostCSS } from \"../util\";\r\nimport type { ElemAttributeValues } from \"../util\";\r\n\r\n/**\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);\r\n const hostCSS = getHostCSS([\"display\"], 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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"}
package/dist/r-grid.es.js ADDED
@@ -0,0 +1,209 @@
1
+ var grid_default = ":host{--dim-none:0px;--dim-small:4px;--dim-medium:8px;--dim-large:16px;--dim-xlarge:32px;--dim-xxlarge:64px;--dim-small-:-4px;--dim-medium-:-8px;--dim-large-:-16px;--dim-xlarge-:-32px;--dim-xxlarge-:-64px;--font-xsmall:12px;--font-small:14px;--font-medium:16px;--font-large:24px;--font-xlarge:32px;--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([data-cell]){flex:auto}:host([data-col-small]),:host([data-col-medium]),:host([data-col-large]),:host([data-col-xlarge]){max-width:calc(var(--columns)/12*100% - var(--gap)*(12 - var(--columns))/12);flex:100%}:host([data-offset-small]),:host([data-offset-medium]),:host([data-offset-large]),:host([data-offset-xlarge]){margin-left:calc(var(--offset)/12*100% + var(--gap)*var(--offset)/12)}@media (min-width:0){:host([data-display-small]){display:var(--display-small)}:host([data-font-small=xsmall]){font-size:var(--font-xsmall)}:host([data-font-small=small]){font-size:var(--font-small)}:host([data-font-small=medium]){font-size:var(--font-medium)}:host([data-font-small=large]){font-size:var(--font-large)}:host([data-font-small=xlarge]){font-size:var(--font-xlarge)}:host([data-font-small=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-small-none{--gap:var(--dim-none)}:host([data-padding-small=none]){padding:var(--dim-none)}:host([data-padding-top-small=none]){padding-top:var(--dim-none)}:host([data-padding-left-small=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-small=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-small=none]){padding-right:var(--dim-none)}:host([data-margin-small=none]){margin:var(--dim-none)}:host([data-margin-top-small=none]){margin-top:var(--dim-none)}:host([data-margin-left-small=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-small=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-small=none]){margin-right:var(--dim-none)}.row.gap-small-small{--gap:var(--dim-small)}:host([data-padding-small=small]){padding:var(--dim-small)}:host([data-padding-top-small=small]){padding-top:var(--dim-small)}:host([data-padding-left-small=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-small=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-small=small]){padding-right:var(--dim-small)}:host([data-margin-small=small]){margin:var(--dim-small)}:host([data-margin-top-small=small]){margin-top:var(--dim-small)}:host([data-margin-left-small=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-small=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-small=small]){margin-right:var(--dim-small)}.row.gap-small-medium{--gap:var(--dim-medium)}:host([data-padding-small=medium]){padding:var(--dim-medium)}:host([data-padding-top-small=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-small=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-small=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-small=medium]){padding-right:var(--dim-medium)}:host([data-margin-small=medium]){margin:var(--dim-medium)}:host([data-margin-top-small=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-small=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-small=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-small=medium]){margin-right:var(--dim-medium)}.row.gap-small-large{--gap:var(--dim-large)}:host([data-padding-small=large]){padding:var(--dim-large)}:host([data-padding-top-small=large]){padding-top:var(--dim-large)}:host([data-padding-left-small=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-small=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-small=large]){padding-right:var(--dim-large)}:host([data-margin-small=large]){margin:var(--dim-large)}:host([data-margin-top-small=large]){margin-top:var(--dim-large)}:host([data-margin-left-small=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-small=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-small=large]){margin-right:var(--dim-large)}.row.gap-small-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-small=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-small=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-small=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-small=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-small=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-small=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-small=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-small=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-small=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-small=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-small-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-small=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-small=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-small=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-small=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-small=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-small=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-small=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-small=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-small=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-small=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-small-small-{--gap:var(--dim-small-)}:host([data-padding-small=small-]){padding:var(--dim-small-)}:host([data-padding-top-small=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-small=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-small=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-small=small-]){padding-right:var(--dim-small-)}:host([data-margin-small=small-]){margin:var(--dim-small-)}:host([data-margin-top-small=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-small=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-small=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-small=small-]){margin-right:var(--dim-small-)}.row.gap-small-medium-{--gap:var(--dim-medium-)}:host([data-padding-small=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-small=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-small=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-small=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-small=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-small=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-small=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-small=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-small=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-small=medium-]){margin-right:var(--dim-medium-)}.row.gap-small-large-{--gap:var(--dim-large-)}:host([data-padding-small=large-]){padding:var(--dim-large-)}:host([data-padding-top-small=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-small=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-small=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-small=large-]){padding-right:var(--dim-large-)}:host([data-margin-small=large-]){margin:var(--dim-large-)}:host([data-margin-top-small=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-small=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-small=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-small=large-]){margin-right:var(--dim-large-)}.row.gap-small-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-small=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-small=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-small=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-small=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-small=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-small=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-small=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-small=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-small=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-small=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-small-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-small=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-small=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-small=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-small=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-small=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-small=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-small=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-small=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-small=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-small=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-small=\"12\"]){order:12}:host([data-col-small=\"12\"]){--columns:12}:host([data-offset-small=\"12\"]){--offset:12}:host([data-order-small=\"11\"]){order:11}:host([data-col-small=\"11\"]){--columns:11}:host([data-offset-small=\"11\"]){--offset:11}:host([data-order-small=\"10\"]){order:10}:host([data-col-small=\"10\"]){--columns:10}:host([data-offset-small=\"10\"]){--offset:10}:host([data-order-small=\"9\"]){order:9}:host([data-col-small=\"9\"]){--columns:9}:host([data-offset-small=\"9\"]){--offset:9}:host([data-order-small=\"8\"]){order:8}:host([data-col-small=\"8\"]){--columns:8}:host([data-offset-small=\"8\"]){--offset:8}:host([data-order-small=\"7\"]){order:7}:host([data-col-small=\"7\"]){--columns:7}:host([data-offset-small=\"7\"]){--offset:7}:host([data-order-small=\"6\"]){order:6}:host([data-col-small=\"6\"]){--columns:6}:host([data-offset-small=\"6\"]){--offset:6}:host([data-order-small=\"5\"]){order:5}:host([data-col-small=\"5\"]){--columns:5}:host([data-offset-small=\"5\"]){--offset:5}:host([data-order-small=\"4\"]){order:4}:host([data-col-small=\"4\"]){--columns:4}:host([data-offset-small=\"4\"]){--offset:4}:host([data-order-small=\"3\"]){order:3}:host([data-col-small=\"3\"]){--columns:3}:host([data-offset-small=\"3\"]){--offset:3}:host([data-order-small=\"2\"]){order:2}:host([data-col-small=\"2\"]){--columns:2}:host([data-offset-small=\"2\"]){--offset:2}:host([data-order-small=\"1\"]){order:1}:host([data-col-small=\"1\"]){--columns:1}:host([data-offset-small=\"1\"]){--offset:1}}@media (min-width:768px){:host([data-display-medium]){display:var(--display-medium)}:host([data-font-medium=xsmall]){font-size:var(--font-xsmall)}:host([data-font-medium=small]){font-size:var(--font-small)}:host([data-font-medium=medium]){font-size:var(--font-medium)}:host([data-font-medium=large]){font-size:var(--font-large)}:host([data-font-medium=xlarge]){font-size:var(--font-xlarge)}:host([data-font-medium=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-medium-none{--gap:var(--dim-none)}:host([data-padding-medium=none]){padding:var(--dim-none)}:host([data-padding-top-medium=none]){padding-top:var(--dim-none)}:host([data-padding-left-medium=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-medium=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-medium=none]){padding-right:var(--dim-none)}:host([data-margin-medium=none]){margin:var(--dim-none)}:host([data-margin-top-medium=none]){margin-top:var(--dim-none)}:host([data-margin-left-medium=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-medium=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-medium=none]){margin-right:var(--dim-none)}.row.gap-medium-small{--gap:var(--dim-small)}:host([data-padding-medium=small]){padding:var(--dim-small)}:host([data-padding-top-medium=small]){padding-top:var(--dim-small)}:host([data-padding-left-medium=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-medium=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-medium=small]){padding-right:var(--dim-small)}:host([data-margin-medium=small]){margin:var(--dim-small)}:host([data-margin-top-medium=small]){margin-top:var(--dim-small)}:host([data-margin-left-medium=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-medium=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-medium=small]){margin-right:var(--dim-small)}.row.gap-medium-medium{--gap:var(--dim-medium)}:host([data-padding-medium=medium]){padding:var(--dim-medium)}:host([data-padding-top-medium=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-medium=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-medium=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-medium=medium]){padding-right:var(--dim-medium)}:host([data-margin-medium=medium]){margin:var(--dim-medium)}:host([data-margin-top-medium=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-medium=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-medium=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-medium=medium]){margin-right:var(--dim-medium)}.row.gap-medium-large{--gap:var(--dim-large)}:host([data-padding-medium=large]){padding:var(--dim-large)}:host([data-padding-top-medium=large]){padding-top:var(--dim-large)}:host([data-padding-left-medium=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-medium=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-medium=large]){padding-right:var(--dim-large)}:host([data-margin-medium=large]){margin:var(--dim-large)}:host([data-margin-top-medium=large]){margin-top:var(--dim-large)}:host([data-margin-left-medium=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-medium=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-medium=large]){margin-right:var(--dim-large)}.row.gap-medium-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-medium=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-medium=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-medium=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-medium=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-medium=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-medium=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-medium=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-medium=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-medium=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-medium=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-medium-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-medium=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-medium=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-medium=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-medium=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-medium=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-medium=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-medium=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-medium=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-medium=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-medium=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-medium-small-{--gap:var(--dim-small-)}:host([data-padding-medium=small-]){padding:var(--dim-small-)}:host([data-padding-top-medium=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-medium=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-medium=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-medium=small-]){padding-right:var(--dim-small-)}:host([data-margin-medium=small-]){margin:var(--dim-small-)}:host([data-margin-top-medium=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-medium=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-medium=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-medium=small-]){margin-right:var(--dim-small-)}.row.gap-medium-medium-{--gap:var(--dim-medium-)}:host([data-padding-medium=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-medium=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-medium=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-medium=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-medium=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-medium=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-medium=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-medium=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-medium=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-medium=medium-]){margin-right:var(--dim-medium-)}.row.gap-medium-large-{--gap:var(--dim-large-)}:host([data-padding-medium=large-]){padding:var(--dim-large-)}:host([data-padding-top-medium=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-medium=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-medium=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-medium=large-]){padding-right:var(--dim-large-)}:host([data-margin-medium=large-]){margin:var(--dim-large-)}:host([data-margin-top-medium=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-medium=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-medium=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-medium=large-]){margin-right:var(--dim-large-)}.row.gap-medium-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-medium=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-medium=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-medium=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-medium=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-medium=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-medium=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-medium=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-medium=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-medium=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-medium=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-medium-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-medium=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-medium=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-medium=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-medium=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-medium=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-medium=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-medium=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-medium=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-medium=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-medium=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-medium=\"12\"]){order:12}:host([data-col-medium=\"12\"]){--columns:12}:host([data-offset-medium=\"12\"]){--offset:12}:host([data-order-medium=\"11\"]){order:11}:host([data-col-medium=\"11\"]){--columns:11}:host([data-offset-medium=\"11\"]){--offset:11}:host([data-order-medium=\"10\"]){order:10}:host([data-col-medium=\"10\"]){--columns:10}:host([data-offset-medium=\"10\"]){--offset:10}:host([data-order-medium=\"9\"]){order:9}:host([data-col-medium=\"9\"]){--columns:9}:host([data-offset-medium=\"9\"]){--offset:9}:host([data-order-medium=\"8\"]){order:8}:host([data-col-medium=\"8\"]){--columns:8}:host([data-offset-medium=\"8\"]){--offset:8}:host([data-order-medium=\"7\"]){order:7}:host([data-col-medium=\"7\"]){--columns:7}:host([data-offset-medium=\"7\"]){--offset:7}:host([data-order-medium=\"6\"]){order:6}:host([data-col-medium=\"6\"]){--columns:6}:host([data-offset-medium=\"6\"]){--offset:6}:host([data-order-medium=\"5\"]){order:5}:host([data-col-medium=\"5\"]){--columns:5}:host([data-offset-medium=\"5\"]){--offset:5}:host([data-order-medium=\"4\"]){order:4}:host([data-col-medium=\"4\"]){--columns:4}:host([data-offset-medium=\"4\"]){--offset:4}:host([data-order-medium=\"3\"]){order:3}:host([data-col-medium=\"3\"]){--columns:3}:host([data-offset-medium=\"3\"]){--offset:3}:host([data-order-medium=\"2\"]){order:2}:host([data-col-medium=\"2\"]){--columns:2}:host([data-offset-medium=\"2\"]){--offset:2}:host([data-order-medium=\"1\"]){order:1}:host([data-col-medium=\"1\"]){--columns:1}:host([data-offset-medium=\"1\"]){--offset:1}}@media (min-width:1024px){:host([data-display-large]){display:var(--display-large)}:host([data-font-large=xsmall]){font-size:var(--font-xsmall)}:host([data-font-large=small]){font-size:var(--font-small)}:host([data-font-large=medium]){font-size:var(--font-medium)}:host([data-font-large=large]){font-size:var(--font-large)}:host([data-font-large=xlarge]){font-size:var(--font-xlarge)}:host([data-font-large=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-large-none{--gap:var(--dim-none)}:host([data-padding-large=none]){padding:var(--dim-none)}:host([data-padding-top-large=none]){padding-top:var(--dim-none)}:host([data-padding-left-large=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-large=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-large=none]){padding-right:var(--dim-none)}:host([data-margin-large=none]){margin:var(--dim-none)}:host([data-margin-top-large=none]){margin-top:var(--dim-none)}:host([data-margin-left-large=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-large=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-large=none]){margin-right:var(--dim-none)}.row.gap-large-small{--gap:var(--dim-small)}:host([data-padding-large=small]){padding:var(--dim-small)}:host([data-padding-top-large=small]){padding-top:var(--dim-small)}:host([data-padding-left-large=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-large=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-large=small]){padding-right:var(--dim-small)}:host([data-margin-large=small]){margin:var(--dim-small)}:host([data-margin-top-large=small]){margin-top:var(--dim-small)}:host([data-margin-left-large=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-large=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-large=small]){margin-right:var(--dim-small)}.row.gap-large-medium{--gap:var(--dim-medium)}:host([data-padding-large=medium]){padding:var(--dim-medium)}:host([data-padding-top-large=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-large=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-large=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-large=medium]){padding-right:var(--dim-medium)}:host([data-margin-large=medium]){margin:var(--dim-medium)}:host([data-margin-top-large=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-large=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-large=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-large=medium]){margin-right:var(--dim-medium)}.row.gap-large-large{--gap:var(--dim-large)}:host([data-padding-large=large]){padding:var(--dim-large)}:host([data-padding-top-large=large]){padding-top:var(--dim-large)}:host([data-padding-left-large=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-large=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-large=large]){padding-right:var(--dim-large)}:host([data-margin-large=large]){margin:var(--dim-large)}:host([data-margin-top-large=large]){margin-top:var(--dim-large)}:host([data-margin-left-large=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-large=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-large=large]){margin-right:var(--dim-large)}.row.gap-large-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-large=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-large=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-large=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-large=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-large=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-large=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-large=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-large=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-large=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-large=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-large-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-large=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-large=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-large=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-large=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-large=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-large=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-large=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-large=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-large=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-large=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-large-small-{--gap:var(--dim-small-)}:host([data-padding-large=small-]){padding:var(--dim-small-)}:host([data-padding-top-large=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-large=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-large=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-large=small-]){padding-right:var(--dim-small-)}:host([data-margin-large=small-]){margin:var(--dim-small-)}:host([data-margin-top-large=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-large=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-large=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-large=small-]){margin-right:var(--dim-small-)}.row.gap-large-medium-{--gap:var(--dim-medium-)}:host([data-padding-large=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-large=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-large=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-large=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-large=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-large=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-large=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-large=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-large=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-large=medium-]){margin-right:var(--dim-medium-)}.row.gap-large-large-{--gap:var(--dim-large-)}:host([data-padding-large=large-]){padding:var(--dim-large-)}:host([data-padding-top-large=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-large=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-large=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-large=large-]){padding-right:var(--dim-large-)}:host([data-margin-large=large-]){margin:var(--dim-large-)}:host([data-margin-top-large=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-large=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-large=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-large=large-]){margin-right:var(--dim-large-)}.row.gap-large-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-large=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-large=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-large=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-large=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-large=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-large=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-large=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-large=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-large=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-large=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-large-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-large=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-large=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-large=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-large=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-large=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-large=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-large=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-large=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-large=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-large=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-large=\"12\"]){order:12}:host([data-col-large=\"12\"]){--columns:12}:host([data-offset-large=\"12\"]){--offset:12}:host([data-order-large=\"11\"]){order:11}:host([data-col-large=\"11\"]){--columns:11}:host([data-offset-large=\"11\"]){--offset:11}:host([data-order-large=\"10\"]){order:10}:host([data-col-large=\"10\"]){--columns:10}:host([data-offset-large=\"10\"]){--offset:10}:host([data-order-large=\"9\"]){order:9}:host([data-col-large=\"9\"]){--columns:9}:host([data-offset-large=\"9\"]){--offset:9}:host([data-order-large=\"8\"]){order:8}:host([data-col-large=\"8\"]){--columns:8}:host([data-offset-large=\"8\"]){--offset:8}:host([data-order-large=\"7\"]){order:7}:host([data-col-large=\"7\"]){--columns:7}:host([data-offset-large=\"7\"]){--offset:7}:host([data-order-large=\"6\"]){order:6}:host([data-col-large=\"6\"]){--columns:6}:host([data-offset-large=\"6\"]){--offset:6}:host([data-order-large=\"5\"]){order:5}:host([data-col-large=\"5\"]){--columns:5}:host([data-offset-large=\"5\"]){--offset:5}:host([data-order-large=\"4\"]){order:4}:host([data-col-large=\"4\"]){--columns:4}:host([data-offset-large=\"4\"]){--offset:4}:host([data-order-large=\"3\"]){order:3}:host([data-col-large=\"3\"]){--columns:3}:host([data-offset-large=\"3\"]){--offset:3}:host([data-order-large=\"2\"]){order:2}:host([data-col-large=\"2\"]){--columns:2}:host([data-offset-large=\"2\"]){--offset:2}:host([data-order-large=\"1\"]){order:1}:host([data-col-large=\"1\"]){--columns:1}:host([data-offset-large=\"1\"]){--offset:1}}@media (min-width:1280px){:host([data-display-xlarge]){display:var(--display-xlarge)}:host([data-font-xlarge=xsmall]){font-size:var(--font-xsmall)}:host([data-font-xlarge=small]){font-size:var(--font-small)}:host([data-font-xlarge=medium]){font-size:var(--font-medium)}:host([data-font-xlarge=large]){font-size:var(--font-large)}:host([data-font-xlarge=xlarge]){font-size:var(--font-xlarge)}:host([data-font-xlarge=xxlarge]){font-size:var(--font-xxlarge)}.row.gap-xlarge-none{--gap:var(--dim-none)}:host([data-padding-xlarge=none]){padding:var(--dim-none)}:host([data-padding-top-xlarge=none]){padding-top:var(--dim-none)}:host([data-padding-left-xlarge=none]){padding-left:var(--dim-none)}:host([data-padding-bottom-xlarge=none]){padding-bottom:var(--dim-none)}:host([data-padding-right-xlarge=none]){padding-right:var(--dim-none)}:host([data-margin-xlarge=none]){margin:var(--dim-none)}:host([data-margin-top-xlarge=none]){margin-top:var(--dim-none)}:host([data-margin-left-xlarge=none]){margin-left:var(--dim-none)}:host([data-margin-bottom-xlarge=none]){margin-bottom:var(--dim-none)}:host([data-margin-right-xlarge=none]){margin-right:var(--dim-none)}.row.gap-xlarge-small{--gap:var(--dim-small)}:host([data-padding-xlarge=small]){padding:var(--dim-small)}:host([data-padding-top-xlarge=small]){padding-top:var(--dim-small)}:host([data-padding-left-xlarge=small]){padding-left:var(--dim-small)}:host([data-padding-bottom-xlarge=small]){padding-bottom:var(--dim-small)}:host([data-padding-right-xlarge=small]){padding-right:var(--dim-small)}:host([data-margin-xlarge=small]){margin:var(--dim-small)}:host([data-margin-top-xlarge=small]){margin-top:var(--dim-small)}:host([data-margin-left-xlarge=small]){margin-left:var(--dim-small)}:host([data-margin-bottom-xlarge=small]){margin-bottom:var(--dim-small)}:host([data-margin-right-xlarge=small]){margin-right:var(--dim-small)}.row.gap-xlarge-medium{--gap:var(--dim-medium)}:host([data-padding-xlarge=medium]){padding:var(--dim-medium)}:host([data-padding-top-xlarge=medium]){padding-top:var(--dim-medium)}:host([data-padding-left-xlarge=medium]){padding-left:var(--dim-medium)}:host([data-padding-bottom-xlarge=medium]){padding-bottom:var(--dim-medium)}:host([data-padding-right-xlarge=medium]){padding-right:var(--dim-medium)}:host([data-margin-xlarge=medium]){margin:var(--dim-medium)}:host([data-margin-top-xlarge=medium]){margin-top:var(--dim-medium)}:host([data-margin-left-xlarge=medium]){margin-left:var(--dim-medium)}:host([data-margin-bottom-xlarge=medium]){margin-bottom:var(--dim-medium)}:host([data-margin-right-xlarge=medium]){margin-right:var(--dim-medium)}.row.gap-xlarge-large{--gap:var(--dim-large)}:host([data-padding-xlarge=large]){padding:var(--dim-large)}:host([data-padding-top-xlarge=large]){padding-top:var(--dim-large)}:host([data-padding-left-xlarge=large]){padding-left:var(--dim-large)}:host([data-padding-bottom-xlarge=large]){padding-bottom:var(--dim-large)}:host([data-padding-right-xlarge=large]){padding-right:var(--dim-large)}:host([data-margin-xlarge=large]){margin:var(--dim-large)}:host([data-margin-top-xlarge=large]){margin-top:var(--dim-large)}:host([data-margin-left-xlarge=large]){margin-left:var(--dim-large)}:host([data-margin-bottom-xlarge=large]){margin-bottom:var(--dim-large)}:host([data-margin-right-xlarge=large]){margin-right:var(--dim-large)}.row.gap-xlarge-xlarge{--gap:var(--dim-xlarge)}:host([data-padding-xlarge=xlarge]){padding:var(--dim-xlarge)}:host([data-padding-top-xlarge=xlarge]){padding-top:var(--dim-xlarge)}:host([data-padding-left-xlarge=xlarge]){padding-left:var(--dim-xlarge)}:host([data-padding-bottom-xlarge=xlarge]){padding-bottom:var(--dim-xlarge)}:host([data-padding-right-xlarge=xlarge]){padding-right:var(--dim-xlarge)}:host([data-margin-xlarge=xlarge]){margin:var(--dim-xlarge)}:host([data-margin-top-xlarge=xlarge]){margin-top:var(--dim-xlarge)}:host([data-margin-left-xlarge=xlarge]){margin-left:var(--dim-xlarge)}:host([data-margin-bottom-xlarge=xlarge]){margin-bottom:var(--dim-xlarge)}:host([data-margin-right-xlarge=xlarge]){margin-right:var(--dim-xlarge)}.row.gap-xlarge-xxlarge{--gap:var(--dim-xxlarge)}:host([data-padding-xlarge=xxlarge]){padding:var(--dim-xxlarge)}:host([data-padding-top-xlarge=xxlarge]){padding-top:var(--dim-xxlarge)}:host([data-padding-left-xlarge=xxlarge]){padding-left:var(--dim-xxlarge)}:host([data-padding-bottom-xlarge=xxlarge]){padding-bottom:var(--dim-xxlarge)}:host([data-padding-right-xlarge=xxlarge]){padding-right:var(--dim-xxlarge)}:host([data-margin-xlarge=xxlarge]){margin:var(--dim-xxlarge)}:host([data-margin-top-xlarge=xxlarge]){margin-top:var(--dim-xxlarge)}:host([data-margin-left-xlarge=xxlarge]){margin-left:var(--dim-xxlarge)}:host([data-margin-bottom-xlarge=xxlarge]){margin-bottom:var(--dim-xxlarge)}:host([data-margin-right-xlarge=xxlarge]){margin-right:var(--dim-xxlarge)}.row.gap-xlarge-small-{--gap:var(--dim-small-)}:host([data-padding-xlarge=small-]){padding:var(--dim-small-)}:host([data-padding-top-xlarge=small-]){padding-top:var(--dim-small-)}:host([data-padding-left-xlarge=small-]){padding-left:var(--dim-small-)}:host([data-padding-bottom-xlarge=small-]){padding-bottom:var(--dim-small-)}:host([data-padding-right-xlarge=small-]){padding-right:var(--dim-small-)}:host([data-margin-xlarge=small-]){margin:var(--dim-small-)}:host([data-margin-top-xlarge=small-]){margin-top:var(--dim-small-)}:host([data-margin-left-xlarge=small-]){margin-left:var(--dim-small-)}:host([data-margin-bottom-xlarge=small-]){margin-bottom:var(--dim-small-)}:host([data-margin-right-xlarge=small-]){margin-right:var(--dim-small-)}.row.gap-xlarge-medium-{--gap:var(--dim-medium-)}:host([data-padding-xlarge=medium-]){padding:var(--dim-medium-)}:host([data-padding-top-xlarge=medium-]){padding-top:var(--dim-medium-)}:host([data-padding-left-xlarge=medium-]){padding-left:var(--dim-medium-)}:host([data-padding-bottom-xlarge=medium-]){padding-bottom:var(--dim-medium-)}:host([data-padding-right-xlarge=medium-]){padding-right:var(--dim-medium-)}:host([data-margin-xlarge=medium-]){margin:var(--dim-medium-)}:host([data-margin-top-xlarge=medium-]){margin-top:var(--dim-medium-)}:host([data-margin-left-xlarge=medium-]){margin-left:var(--dim-medium-)}:host([data-margin-bottom-xlarge=medium-]){margin-bottom:var(--dim-medium-)}:host([data-margin-right-xlarge=medium-]){margin-right:var(--dim-medium-)}.row.gap-xlarge-large-{--gap:var(--dim-large-)}:host([data-padding-xlarge=large-]){padding:var(--dim-large-)}:host([data-padding-top-xlarge=large-]){padding-top:var(--dim-large-)}:host([data-padding-left-xlarge=large-]){padding-left:var(--dim-large-)}:host([data-padding-bottom-xlarge=large-]){padding-bottom:var(--dim-large-)}:host([data-padding-right-xlarge=large-]){padding-right:var(--dim-large-)}:host([data-margin-xlarge=large-]){margin:var(--dim-large-)}:host([data-margin-top-xlarge=large-]){margin-top:var(--dim-large-)}:host([data-margin-left-xlarge=large-]){margin-left:var(--dim-large-)}:host([data-margin-bottom-xlarge=large-]){margin-bottom:var(--dim-large-)}:host([data-margin-right-xlarge=large-]){margin-right:var(--dim-large-)}.row.gap-xlarge-xlarge-{--gap:var(--dim-xlarge-)}:host([data-padding-xlarge=xlarge-]){padding:var(--dim-xlarge-)}:host([data-padding-top-xlarge=xlarge-]){padding-top:var(--dim-xlarge-)}:host([data-padding-left-xlarge=xlarge-]){padding-left:var(--dim-xlarge-)}:host([data-padding-bottom-xlarge=xlarge-]){padding-bottom:var(--dim-xlarge-)}:host([data-padding-right-xlarge=xlarge-]){padding-right:var(--dim-xlarge-)}:host([data-margin-xlarge=xlarge-]){margin:var(--dim-xlarge-)}:host([data-margin-top-xlarge=xlarge-]){margin-top:var(--dim-xlarge-)}:host([data-margin-left-xlarge=xlarge-]){margin-left:var(--dim-xlarge-)}:host([data-margin-bottom-xlarge=xlarge-]){margin-bottom:var(--dim-xlarge-)}:host([data-margin-right-xlarge=xlarge-]){margin-right:var(--dim-xlarge-)}.row.gap-xlarge-xxlarge-{--gap:var(--dim-xxlarge-)}:host([data-padding-xlarge=xxlarge-]){padding:var(--dim-xxlarge-)}:host([data-padding-top-xlarge=xxlarge-]){padding-top:var(--dim-xxlarge-)}:host([data-padding-left-xlarge=xxlarge-]){padding-left:var(--dim-xxlarge-)}:host([data-padding-bottom-xlarge=xxlarge-]){padding-bottom:var(--dim-xxlarge-)}:host([data-padding-right-xlarge=xxlarge-]){padding-right:var(--dim-xxlarge-)}:host([data-margin-xlarge=xxlarge-]){margin:var(--dim-xxlarge-)}:host([data-margin-top-xlarge=xxlarge-]){margin-top:var(--dim-xxlarge-)}:host([data-margin-left-xlarge=xxlarge-]){margin-left:var(--dim-xxlarge-)}:host([data-margin-bottom-xlarge=xxlarge-]){margin-bottom:var(--dim-xxlarge-)}:host([data-margin-right-xlarge=xxlarge-]){margin-right:var(--dim-xxlarge-)}:host([data-order-xlarge=\"12\"]){order:12}:host([data-col-xlarge=\"12\"]){--columns:12}:host([data-offset-xlarge=\"12\"]){--offset:12}:host([data-order-xlarge=\"11\"]){order:11}:host([data-col-xlarge=\"11\"]){--columns:11}:host([data-offset-xlarge=\"11\"]){--offset:11}:host([data-order-xlarge=\"10\"]){order:10}:host([data-col-xlarge=\"10\"]){--columns:10}:host([data-offset-xlarge=\"10\"]){--offset:10}:host([data-order-xlarge=\"9\"]){order:9}:host([data-col-xlarge=\"9\"]){--columns:9}:host([data-offset-xlarge=\"9\"]){--offset:9}:host([data-order-xlarge=\"8\"]){order:8}:host([data-col-xlarge=\"8\"]){--columns:8}:host([data-offset-xlarge=\"8\"]){--offset:8}:host([data-order-xlarge=\"7\"]){order:7}:host([data-col-xlarge=\"7\"]){--columns:7}:host([data-offset-xlarge=\"7\"]){--offset:7}:host([data-order-xlarge=\"6\"]){order:6}:host([data-col-xlarge=\"6\"]){--columns:6}:host([data-offset-xlarge=\"6\"]){--offset:6}:host([data-order-xlarge=\"5\"]){order:5}:host([data-col-xlarge=\"5\"]){--columns:5}:host([data-offset-xlarge=\"5\"]){--offset:5}:host([data-order-xlarge=\"4\"]){order:4}:host([data-col-xlarge=\"4\"]){--columns:4}:host([data-offset-xlarge=\"4\"]){--offset:4}:host([data-order-xlarge=\"3\"]){order:3}:host([data-col-xlarge=\"3\"]){--columns:3}:host([data-offset-xlarge=\"3\"]){--offset:3}:host([data-order-xlarge=\"2\"]){order:2}:host([data-col-xlarge=\"2\"]){--columns:2}:host([data-offset-xlarge=\"2\"]){--offset:2}:host([data-order-xlarge=\"1\"]){order:1}:host([data-col-xlarge=\"1\"]){--columns:1}:host([data-offset-xlarge=\"1\"]){--offset:1}}", sheet = new CSSStyleSheet();
2
+ sheet.replaceSync(grid_default);
3
+ var grid_style_default = sheet;
4
+ const ObservedElemAttributes = [
5
+ "display",
6
+ "font",
7
+ "padding",
8
+ "padding-top",
9
+ "padding-right",
10
+ "padding-bottom",
11
+ "padding-left",
12
+ "margin",
13
+ "margin-top",
14
+ "margin-right",
15
+ "margin-bottom",
16
+ "margin-left"
17
+ ], ObservedGridAttributes = [
18
+ "row",
19
+ "cell",
20
+ "col",
21
+ "display",
22
+ "order",
23
+ "offset",
24
+ "gap",
25
+ "padding",
26
+ "font"
27
+ ], MediaSizes = [
28
+ "small",
29
+ "medium",
30
+ "large",
31
+ "xlarge"
32
+ ], DimensionSizes = [
33
+ "none",
34
+ "small",
35
+ "medium",
36
+ "large",
37
+ "xlarge",
38
+ "xxlarge",
39
+ "small-",
40
+ "medium-",
41
+ "large-",
42
+ "xlarge-",
43
+ "xxlarge-"
44
+ ], DisplayValues = [
45
+ "block",
46
+ "inline",
47
+ "inline-block",
48
+ "flex",
49
+ "inline-flex",
50
+ "grid",
51
+ "inline-grid",
52
+ "flow-root",
53
+ "none",
54
+ "contents",
55
+ "table",
56
+ "table-row",
57
+ "list-item",
58
+ "inherit",
59
+ "initial",
60
+ "revert",
61
+ "revert-layer",
62
+ "unset"
63
+ ], FontSizes = [
64
+ "xsmall",
65
+ "small",
66
+ "medium",
67
+ "large",
68
+ "xlarge",
69
+ "xxlarge"
70
+ ], isElemAttribute = (e) => ObservedElemAttributes.includes(e), isGridAttribute = (e) => ObservedGridAttributes.includes(e), isDimensionSize = (e) => DimensionSizes.includes(e), isDisplayValue = (e) => DisplayValues.includes(e), isFontSize = (e) => FontSizes.includes(e);
71
+ var getValidNumber = (e) => {
72
+ let y = parseInt(e.trim());
73
+ return y ? String(y) : null;
74
+ }, getValidDisplay = (e) => {
75
+ let y = e.trim().toLowerCase();
76
+ return isDisplayValue(y) ? y : null;
77
+ }, getValidDimension = (e) => {
78
+ let y = e.trim().toLowerCase();
79
+ return isDimensionSize(y) ? y : null;
80
+ }, getValidFont = (e) => {
81
+ let y = e.trim().toLowerCase();
82
+ return isFontSize(y) ? y : null;
83
+ };
84
+ const getGridAttributeValue = {
85
+ row: "boolean",
86
+ cell: "boolean",
87
+ col: getValidNumber,
88
+ gap: getValidDimension,
89
+ font: getValidFont,
90
+ order: getValidNumber,
91
+ offset: getValidNumber,
92
+ display: getValidDisplay,
93
+ padding: getValidDimension
94
+ }, getElemAttributeValue = {
95
+ font: getValidFont,
96
+ margin: getValidDimension,
97
+ padding: getValidDimension,
98
+ display: getValidDisplay,
99
+ "margin-top": getValidDimension,
100
+ "margin-right": getValidDimension,
101
+ "margin-bottom": getValidDimension,
102
+ "margin-left": getValidDimension,
103
+ "padding-top": getValidDimension,
104
+ "padding-right": getValidDimension,
105
+ "padding-bottom": getValidDimension,
106
+ "padding-left": getValidDimension
107
+ }, getClasses = (e, y, b) => {
108
+ let x = [];
109
+ for (let S of e) if (y[S] !== void 0) {
110
+ let e = b[S];
111
+ e === "boolean" ? x.push(`${S}`) : y[S].split(" ").filter(Boolean).forEach((y, b) => {
112
+ let C = MediaSizes[b], w = e(y);
113
+ C && w && x.push(`${S}-${C}-${w}`);
114
+ });
115
+ }
116
+ return x;
117
+ }, getHostAttributes = (e, y, b) => {
118
+ let x = {};
119
+ for (let S of e) if (MediaSizes.forEach((e) => {
120
+ x[`data-${S}-${e}`] = void 0;
121
+ }), y[S] !== void 0) {
122
+ let e = b[S];
123
+ e === "boolean" ? x[`data-${S}`] = S : y[S].split(" ").filter(Boolean).forEach((y, b) => {
124
+ let C = MediaSizes[b], w = e(y);
125
+ C && w && (x[`data-${S}-${C}`] = w);
126
+ });
127
+ }
128
+ return Object.entries(x);
129
+ }, getHostCSS = (e, y, b) => {
130
+ let x = {};
131
+ for (let S of e) if (MediaSizes.forEach((e) => {
132
+ x[`--${S}-${e}`] = void 0;
133
+ }), y[S] !== void 0) {
134
+ let e = b[S];
135
+ e !== "boolean" && y[S].split(" ").filter(Boolean).forEach((y, b) => {
136
+ let C = MediaSizes[b], w = e(y);
137
+ C && w && (x[`--${S}-${C}`] = w);
138
+ });
139
+ }
140
+ return Object.entries(x);
141
+ };
142
+ var GridElement = class extends HTMLElement {
143
+ static observedAttributes = ObservedGridAttributes;
144
+ attr = {};
145
+ mainSlot = () => this.shadowRoot?.querySelector("slot") || null;
146
+ container = () => this.shadowRoot?.querySelector(".grid-element") || null;
147
+ constructor() {
148
+ super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
149
+ }
150
+ detectRowChange() {
151
+ let e = this.mainSlot(), y = this.container();
152
+ if (!e || !y) return;
153
+ let b = e.assignedElements().some((e) => e.matches("r-grid")), x = this.attr.row !== "row" && b, S = this.attr.row === "row" && !b;
154
+ return x && (this.attr.row = "row"), S && delete this.attr.row, x || S;
155
+ }
156
+ detectCellChange() {
157
+ let e = this.parentElement?.matches("r-grid"), y = this.attr.cell !== "cell" && e, b = this.attr.cell === "cell" && !e;
158
+ return y && (this.attr.cell = "cell"), b && delete this.attr.cell, y || b;
159
+ }
160
+ attributeChangedCallback(e, y, b) {
161
+ isGridAttribute(e) && (this.attr[e] = b, this.render());
162
+ }
163
+ connectedMoveCallback() {
164
+ this.detectCellChange();
165
+ }
166
+ connectedCallback() {
167
+ this.mainSlot()?.addEventListener("slotchange", () => {
168
+ this.detectRowChange() && this.render();
169
+ }), this.render();
170
+ let e = this.detectRowChange(), y = this.detectCellChange();
171
+ (e || y) && this.render();
172
+ }
173
+ render() {
174
+ let e = getClasses(ObservedGridAttributes, this.attr, getGridAttributeValue), y = getHostAttributes(ObservedGridAttributes, this.attr, getGridAttributeValue);
175
+ getHostCSS(["display"], this.attr, getGridAttributeValue).forEach(([e, y]) => {
176
+ y && this.style.setProperty(e, y), y === void 0 && this.style.removeProperty(e);
177
+ }), y.forEach(([e, y]) => {
178
+ y && this.setAttribute(e, y), y === void 0 && this.removeAttribute(e);
179
+ }), this.shadowRoot.innerHTML = `
180
+ <div class="grid-element ${e.join(" ")}"><slot></slot></div>
181
+ `;
182
+ }
183
+ };
184
+ customElements.define("r-grid", GridElement);
185
+ var ResponsiveElement = class extends HTMLElement {
186
+ static observedAttributes = ObservedElemAttributes;
187
+ attr = {};
188
+ constructor() {
189
+ super(), this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [grid_style_default];
190
+ }
191
+ attributeChangedCallback(e, y, b) {
192
+ isElemAttribute(e) && (this.attr[e] = b, this.render());
193
+ }
194
+ connectedCallback() {
195
+ this.render();
196
+ }
197
+ render() {
198
+ let e = getHostAttributes(ObservedElemAttributes, this.attr, getElemAttributeValue);
199
+ getHostCSS(["display"], this.attr, getElemAttributeValue).forEach(([e, y]) => {
200
+ y && this.style.setProperty(e, y), y === void 0 && this.style.removeProperty(e);
201
+ }), e.forEach(([e, y]) => {
202
+ y && this.setAttribute(e, y), y === void 0 && this.removeAttribute(e);
203
+ }), this.shadowRoot.innerHTML = "<slot></slot>";
204
+ }
205
+ };
206
+ customElements.define("r-element", ResponsiveElement);
207
+ export { GridElement, ResponsiveElement };
208
+
209
+ //# sourceMappingURL=r-grid.es.js.map
package/dist/r-grid.es.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"r-grid.es.js","names":["getGridAttributeValue: AttrValidations<ObservedGridAttribute>","getElemAttributeValue: AttrValidations<ObservedElemAttribute>","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\";\n@use \"sass:math\";\n\n$mediaSizes: (\n small: 0px,\n medium: 768px,\n large: 1024px,\n xlarge: 1280px,\n);\n$dimensions: \"none\", \"small\", \"medium\", \"large\", \"xlarge\", \"xxlarge\", \"small-\", \"medium-\", \"large-\", \"xlarge-\", \"xxlarge-\";\n$fonts: \"xsmall\", \"small\", \"medium\", \"large\", \"xlarge\", \"xxlarge\";\n\n:host {\n --dim-none: 0px;\n --dim-small: 4px;\n --dim-medium: 8px;\n --dim-large: 16px;\n --dim-xlarge: 32px;\n --dim-xxlarge: 64px;\n --dim-small-: -4px;\n --dim-medium-: -8px;\n --dim-large-: -16px;\n --dim-xlarge-: -32px;\n --dim-xxlarge-: -64px;\n --font-xsmall: 12px;\n --font-small: 14px;\n --font-medium: 16px;\n --font-large: 24px;\n --font-xlarge: 32px;\n --font-xxlarge: 40px;\n display: block;\n box-sizing: border-box !important;\n}\n\nslot {\n display: contents !important;\n}\n\n.row {\n box-sizing: border-box;\n justify-content: flex-start;\n gap: var(--gap);\n --gap: 0px;\n flex-flow: wrap;\n margin: 0;\n padding: 0;\n display: flex;\n}\n\n.cell {\n box-sizing: border-box;\n}\n\n:host([data-cell]) {\n flex: auto;\n}\n\n:host([data-col-small]),\n:host([data-col-medium]),\n:host([data-col-large]),\n:host([data-col-xlarge]) {\n flex: 100%;\n max-width: calc(((var(--columns) / 12) * 100%) - var(--gap) * (calc((12 - var(--columns)) / 12)));\n}\n\n:host([data-offset-small]),\n:host([data-offset-medium]),\n:host([data-offset-large]),\n:host([data-offset-xlarge]) {\n margin-left: calc(((var(--offset) / 12) * 100%) + var(--gap) * (calc(var(--offset) / 12)));\n}\n\n@each $mediaName, $mediaSize in $mediaSizes {\n @media (min-width: #{$mediaSize}) {\n :host([data-display-#{$mediaName}]) {\n display: var(--display-#{$mediaName});\n }\n\n @each $font in $fonts {\n :host([data-font-#{$mediaName}=\"#{$font}\"]) {\n font-size: var(--font-#{$font});\n }\n }\n @each $dimension in $dimensions {\n .row.gap-#{$mediaName}-#{$dimension} {\n --gap: var(--dim-#{$dimension});\n }\n :host([data-padding-#{$mediaName}=\"#{$dimension}\"]) {\n padding: var(--dim-#{$dimension});\n }\n :host([data-padding-top-#{$mediaName}=\"#{$dimension}\"]) {\n padding-top: var(--dim-#{$dimension});\n }\n :host([data-padding-left-#{$mediaName}=\"#{$dimension}\"]) {\n padding-left: var(--dim-#{$dimension});\n }\n :host([data-padding-bottom-#{$mediaName}=\"#{$dimension}\"]) {\n padding-bottom: var(--dim-#{$dimension});\n }\n :host([data-padding-right-#{$mediaName}=\"#{$dimension}\"]) {\n padding-right: var(--dim-#{$dimension});\n }\n :host([data-margin-#{$mediaName}=\"#{$dimension}\"]) {\n margin: var(--dim-#{$dimension});\n }\n :host([data-margin-top-#{$mediaName}=\"#{$dimension}\"]) {\n margin-top: var(--dim-#{$dimension});\n }\n :host([data-margin-left-#{$mediaName}=\"#{$dimension}\"]) {\n margin-left: var(--dim-#{$dimension});\n }\n :host([data-margin-bottom-#{$mediaName}=\"#{$dimension}\"]) {\n margin-bottom: var(--dim-#{$dimension});\n }\n :host([data-margin-right-#{$mediaName}=\"#{$dimension}\"]) {\n margin-right: var(--dim-#{$dimension});\n }\n }\n\n @for $i from 12 through 1 {\n :host([data-order-#{$mediaName}=\"#{$i}\"]) {\n order: #{$i};\n }\n :host([data-col-#{$mediaName}=\"#{$i}\"]) {\n --columns: #{$i};\n }\n :host([data-offset-#{$mediaName}=\"#{$i}\"]) {\n --offset: #{$i};\n }\n }\n }\n}\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 ContainerClass = \"grid-element\" as const;\r\n\r\nexport const ObservedElemAttributes = [\r\n \"display\",\r\n \"font\",\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 = [\"row\", \"cell\", \"col\", \"display\", \"order\", \"offset\", \"gap\", \"padding\", \"font\"] 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 \"inherit\",\r\n \"initial\",\r\n \"revert\",\r\n \"revert-layer\",\r\n \"unset\",\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 FontSize = (typeof FontSizes)[number];\r\n\r\nexport const isElemAttribute = (name: string): name is ObservedElemAttribute => ObservedElemAttributes.includes(name as ObservedElemAttribute);\r\nexport const isGridAttribute = (name: string): name is ObservedGridAttribute => ObservedGridAttributes.includes(name as ObservedGridAttribute);\r\nexport const isDimensionSize = (size: string): size is DimensionSize => DimensionSizes.includes(size as DimensionSize);\r\nexport const isDisplayValue = (value: string): value is DisplayValue => DisplayValues.includes(value as DisplayValue);\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 ? 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): DimensionSize | null => {\r\n const value = val.trim().toLowerCase();\r\n return isDimensionSize(value) ? value : null;\r\n};\r\n\r\nconst getValidFont = (val: string): FontSize | null => {\r\n const value = val.trim().toLowerCase();\r\n return isFontSize(value) ? value : 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 col: getValidNumber,\r\n gap: getValidDimension,\r\n font: getValidFont,\r\n order: getValidNumber,\r\n offset: 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 \"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 getClasses = <K extends string>(attrNames: readonly K[], attrs: AttrValues<K>, validations: AttrValidations<K>) => {\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>(attrNames: readonly K[], attrs: AttrValues<K>, validations: AttrValidations<K>) => {\r\n const hostAttributes: Record<string, string | undefined> = {};\r\n\r\n for (const attr of attrNames) {\r\n MediaSizes.forEach((mediaSize) => {\r\n hostAttributes[`data-${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 hostAttributes[`data-${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[`data-${attr}-${mediaSize}`] = 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>(attrNames: readonly K[], attrs: AttrValues<K>, validations: AttrValidations<K>) => {\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 ContainerClass,\r\n getClasses,\r\n getGridAttributeValue as getValues,\r\n getHostAttributes,\r\n isGridAttribute,\r\n ObservedGridAttributes as Attributes,\r\n getHostCSS,\r\n} from \"../util\";\r\nimport type { GridAttributeValues } from \"../util\";\r\n\r\n/**\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} offset - set element's column offset for each breakpoint (Integers)\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 => this.shadowRoot?.querySelector(\"slot\") || null;\r\n /**\r\n * @internal\r\n */\r\n private readonly container = (): Element | null => this.shadowRoot?.querySelector(`.${ContainerClass}`) || 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(Attributes, this.attr, getValues);\r\n const hostAttributes = getHostAttributes(Attributes, this.attr, getValues);\r\n const hostCSS = getHostCSS([\"display\"], 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=\"${ContainerClass} ${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 { getElemAttributeValue as getValues, getHostAttributes, isElemAttribute, ObservedElemAttributes as Attributes, getHostCSS } from \"../util\";\r\nimport type { ElemAttributeValues } from \"../util\";\r\n\r\n/**\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);\r\n const hostCSS = getHostCSS([\"display\"], 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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"}
package/dist/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/package.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "name": "rezel",
3
+ "description": "custom elements with responsive attributes",
4
+ "version": "1.0.0",
5
+ "type": "module",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "main": "./dist/r-grid.cjs.js",
10
+ "module": "./dist/r-grid.es.js",
11
+ "scripts": {
12
+ "dev": "vite",
13
+ "build": "tsc && vite build",
14
+ "preview": "vite preview"
15
+ },
16
+ "devDependencies": {
17
+ "@custom-elements-manifest/analyzer": "^0.11.0",
18
+ "@types/node": "^25.0.3",
19
+ "eslint": "^9.39.2",
20
+ "sass": "^1.95.1",
21
+ "typescript": "~5.9.3",
22
+ "vite": "npm:rolldown-vite@7.2.5"
23
+ },
24
+ "overrides": {
25
+ "vite": "npm:rolldown-vite@7.2.5"
26
+ },
27
+ "customElements": "custom-elements.json"
28
+ }