@bedrock-layout/solid 0.8.0 → 0.11.0

package/lib/columns.d.ts

@@ -0,0 +1,31 @@
+import { Component, JSX } from "solid-js";
+import { SpacingOptions } from "./spacing-constants";
+import { StackProps } from "./stack";
+interface ColumnsBaseProps {
+    gutter?: SpacingOptions;
+    columns?: number;
+    dense?: boolean;
+}
+export interface ColumnsProps extends StackProps, ColumnsBaseProps {
+    switchAt?: number | string;
+    as?: Component | keyof JSX.IntrinsicElements;
+    ref?: (ref: HTMLElement) => void;
+}
+export declare const Columns: Component<ColumnsProps>;
+export interface ColumnProps {
+    colSpan?: number;
+    offsetStart?: number;
+    offsetEnd?: number;
+}
+/**
+ * ColumnsProps passed twice to make propTypes work.
+ *
+ * span is remaped to colSpan due to span being an attribute that gets
+ * passed to the underlying element.  This can cause issues with Grid layout.
+ *
+ * In a future breaking change, colSpan should be the public API.
+ * */
+export declare const Column: ((props: ColumnProps & JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element) & {
+    className: (props: ColumnProps & JSX.HTMLAttributes<HTMLDivElement>) => string;
+};
+export {};

package/lib/create-container-query.d.ts

@@ -0,0 +1,2 @@
+import { Accessor, Setter } from "solid-js";
+export declare function createContainerQuery<T extends Element>(width?: number, maxWidth?: number): [Accessor<boolean>, Setter<T | undefined>];

package/lib/index.cjs.js

@@ -1,11 +1,11 @@
-"use strict";var A=Object.defineProperty,j=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var h=(e,t,n)=>t in e?A(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,g=(e,t)=>{for(var n in t||(t={}))v.call(t,n)&&h(e,n,t[n]);if(u)for(var n of u(t))$.call(t,n)&&h(e,n,t[n]);return e},y=(e,t)=>j(e,z(t));var S=(e,t)=>{var n={};for(var i in e)v.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(e!=null&&u)for(var i of u(e))t.indexOf(i)<0&&$.call(e,i)&&(n[i]=e[i]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var a=require("solid-styled-components");function p(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const b={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function I(e){return e.reduce((t,[n,i])=>y(g({},t),{[n]:i}),{})}const s=(e,t)=>{var r,c;const n=(c=(r=t==null?void 0:t.space)!=null?r:t==null?void 0:t.spacing)!=null?c:b,o=I(Object.entries(n).map(([f,x])=>[f,typeof x=="number"?`${x}px`:x]))[e];return p(o)?o:void 0};function R(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const W=a.styled.div`
+"use strict";var X=Object.defineProperty,H=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var M=(e,t,n)=>t in e?X(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,g=(e,t)=>{for(var n in t||(t={}))j.call(t,n)&&M(e,n,t[n]);if(b)for(var n of b(t))I.call(t,n)&&M(e,n,t[n]);return e},w=(e,t)=>H(e,F(t));var P=(e,t)=>{var n={};for(var r in e)j.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&b)for(var r of b(e))t.indexOf(r)<0&&I.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var o=require("solid-styled-components"),p=require("@bedrock-layout/register-resize-callback"),s=require("solid-js");function R(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const k={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function G(e){return e.reduce((t,[n,r])=>w(g({},t),{[n]:r}),{})}const u=(e,t)=>{var i,l;const n=(l=(i=t==null?void 0:t.space)!=null?i:t==null?void 0:t.spacing)!=null?l:k,a=G(Object.entries(n).map(([d,f])=>[d,typeof f=="number"?`${f}px`:f]))[e];return R(a)?a:void 0};function N(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const _=o.styled.div`
   @property --maxWidth {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 100%;
   }
 
-  --maxWidth: ${e=>R(e.maxWidth)};
+  --maxWidth: ${e=>N(e.maxWidth)};
 
   box-sizing: content-box;
 
@@ -17,16 +17,16 @@
 
   max-inline-size: var(--maxWidth, 100%);
 
-  ${e=>e.centerChildren?a.css`
+  ${e=>e.centerChildren?o.css`
           display: flex;
           flex-direction: column;
           align-items: center;
         `:""}
 
-  ${e=>e.centerText?a.css`
+  ${e=>e.centerText?o.css`
           text-align: center;
         `:""}
-`;function E(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const M=a.styled("div")`
+`;function q(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const Q=o.styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
@@ -39,8 +39,8 @@
     initial-value: 0px;
   }
 
-  --basis: ${e=>E(e.basis)};
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --basis: ${e=>q(e.basis)};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -53,14 +53,14 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
-`;function O(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function P(e){return Array.isArray(e)?e.join("/"):e}function D(e){return O(e)?P(e):void 0}const L=a.styled.div`
+`;function E(e=1,t){if(t!==void 0&&t<=e)throw new Error(`The second width value, ${t}, is not larger than ${e}. Please provide a value greater than first width value`);const[n,r]=s.createSignal(!1),[a,c]=s.createSignal();return s.onMount(()=>{p.init()}),s.createEffect(()=>{const i=a();if(i==null)return;const l=p.registerCallback(i,d=>{var m,x;const f=(x=(m=d.borderBoxSize)==null?void 0:m.inlineSize)!=null?x:d.contentRect.width;if(f>0){const S=t===void 0?f<=e:f>=e&&f<=t;r(S)}});s.onCleanup(l)}),[n,c]}function U(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function J(e){return Array.isArray(e)?e.join("/"):e}function K(e){return U(e)?J(e):void 0}const Y=o.styled.div`
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   position: relative;
   overflow: hidden;
 
-  ${e=>{const t=D(e.ratio);return t?a.css`
+  ${e=>{const t=K(e.ratio);return t?o.css`
         aspect-ratio: ${t};
       `:""}};
 
@@ -88,7 +88,7 @@
     object-fit: cover;
     object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
   }
-`,T=a.styled("div")`
+`,O=o.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -101,7 +101,7 @@
     initial-value: 639px;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
   --minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
 
   box-sizing: border-box;
@@ -116,8 +116,17 @@
     auto-fit,
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
-`,d={start:"flex-start",end:"flex-end",center:"center"},m=y(g({},d),{stretch:"stretch"}),C=a.styled.div`
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+`,y=96;function L(e){var r;e=String(e);const t=parseFloat(e),[,n]=(r=e.match(/[\d.\-+]*\s*(.*)/))!=null?r:["",""];return[t,n]}function h(e,t){if(!e)return null;const n=t!=null?t:document.body,r=(e!=null?e:"px").trim().toLowerCase();switch(r){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return Z(r,n);case"em":return C(n,"font-size");case"rem":return C(document.body,"font-size");case"in":return y;case"cm":return y/2.54;case"mm":return y/25.4;case"pt":return y/72;case"pc":return y/6;case"px":return 1;default:{const[a,c]=L(r);if(isNaN(a))return null;if(!c)return a;const i=h(c,t);return typeof i=="number"?a*i:null}}}function C(e,t){var a;const[n,r]=L(getComputedStyle(e).getPropertyValue(t));return n*((a=h(r,e))!=null?a:1)}function Z(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const r=C(n,"height")/128;return t.removeChild(n),r}const ee=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,te=o.styled.div`
+  grid-row: span var(--rows, 1);
+
+  > * {
+    display: block;
+    height: 100%;
+  }
+`,ne=e=>{const[t,n]=s.createSignal(1),[r,a]=s.createSignal(),c=o.useTheme();return s.onMount(()=>{p.init()}),s.createEffect(()=>{const i=r();if(i==null)return;const l=p.registerCallback(i,({target:d})=>{var z;n(1);const f=e.gutter&&(z=u(e.gutter,c))!=null?z:"1px",m=ee?h(f,d):null,x=Math.max(m!=null?m:1,1),[S]=Array.from(d.children),W=1+Math.min(d.scrollHeight,S.scrollHeight),D=Math.ceil(W/x);n(D)});s.onCleanup(l)}),React.createElement(te,{style:`--rows: ${t()}`,ref:a},e.children)},re=o.styled(O)`
+  grid-template-rows: 1px;
+`,ie=e=>{const t=s.children(()=>e.children),r=[].concat(t()).filter(Boolean).map(a=>React.createElement(ne,{gutter:e.gutter},a));return React.createElement(re,g({},e),r)},v={start:"flex-start",end:"flex-end",center:"center"},$=w(g({},v),{stretch:"stretch"}),V=o.styled.div`
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -128,10 +137,10 @@
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
 
-  justify-content: ${e=>typeof e.justify!="undefined"&&d[e.justify]?d[e.justify]:d.start};
+  justify-content: ${e=>typeof e.justify!="undefined"&&v[e.justify]?v[e.justify]:v.start};
 
-  align-items: ${e=>typeof e.align!="undefined"&&m[e.align]?m[e.align]:m.start};
-`;function V(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const B=a.styled(C)`
+  align-items: ${e=>typeof e.align!="undefined"&&$[e.align]?$[e.align]:$.start};
+`;function ae(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ce=o.styled(V)`
   @property --switchAt {
     syntax: "<length-percentage>";
     inherits: true;
@@ -140,7 +149,7 @@
   flex-wrap: nowrap;
   ${e=>e.stretch==="all"?"> *  { flex: 1 }":e.stretch==="start"?"> :first-child { flex: 1 }":e.stretch==="end"?"> :last-child { flex: 1 }":typeof e.stretch=="number"?`> :nth-child(${e.stretch+1}) { flex: 1 }`:""}
 
-  ${e=>V(e.switchAt)?`
+  ${e=>ae(e.switchAt)?`
           --switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
           flex-wrap: wrap;
           > * {
@@ -150,17 +159,17 @@
             );
           }
         `:""}
-`,k=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),F=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function X(e){return t=>{const n=s(t,e);return n!=null?n:"0px"}}function w(e,t){var l;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((l=e==null?void 0:e.spacing)!=null?l:b));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(r=>n.has(r)):t&&Object.keys(t).every(r=>k.has(r))&&Object.values(t).every(r=>n.has(r)))()||console.error("Invalid padding Type");const o=X(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((r,[c,f])=>k.has(c)?r+F(c,o(f)):r,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(r=>o(r)).join(" ")};`:""}const G=a.styled.div`
+`,B=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),oe=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function se(e){return t=>{const n=u(t,e);return n!=null?n:"0px"}}function le(e,t){var c;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((c=e==null?void 0:e.spacing)!=null?c:k));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(i=>n.has(i)):t&&Object.keys(t).every(i=>B.has(i))&&Object.values(t).every(i=>n.has(i)))()||console.error("Invalid padding Type");const a=se(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((i,[l,d])=>B.has(l)?i+oe(l,a(d)):i,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(i=>a(i)).join(" ")};`:""}const ue=o.styled.div`
   box-sizing: border-box;
-  ${e=>(console.log(w(e.theme,e.padding)),w(e.theme,e.padding))}
-`,_=a.styled.div`
+  ${e=>le(e.theme,e.padding)}
+`,de=o.styled.div`
   box-sizing: border-box;
   > * {
     margin: 0;
     scroll-snap-align: start;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   display: flex;
   gap: var(--gutter, 0px);
@@ -168,14 +177,14 @@
   overflow-x: scroll;
 
   scroll-snap-type: ${({snapType:e="none"})=>{switch(e){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
-`,q=a.styled("div")`
+`,A=o.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 0;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
   box-sizing: border-box;
   > * {
     margin: 0;
@@ -189,7 +198,18 @@
   & > [data-bedrock-column] {
     grid-column: span 1 / auto;
   }
-`;function H(e){return typeof e=="number"?`${e}px`:e&&p(e)?e:"100vh"}const K=a.styled.div`
+`,T={"1/4":"1fr 3fr","1/3":"1fr 2fr","1/2":"1fr 1fr","2/3":"2fr 1fr","3/4":"3fr 1fr","auto-start":"auto 1fr","auto-end":"1fr auto"},fe=o.styled.div`
+    box-sizing: border-box;
+    > * {
+      margin: 0;
+    }
+    
+    --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
+  
+    display: grid;
+    gap: var(--gutter, 0px);
+    grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=T[e])!=null?t:T["1/2"]}}};
+  `,ge=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,a]=E(n),c=i=>{var l;a(i),(l=e.ref)==null||l.call(e,i)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(fe,g({as:e.as,ref:c,fraction:e.fraction},e))),React.createElement(s.Match,{when:r()===!0},React.createElement(A,g({as:e.as,ref:c},e))))};function me(e){return typeof e=="number"?`${e}px`:e&&R(e)?e:"100vh"}const ye=o.styled.div`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -202,9 +222,9 @@
     initial-value: 100vh;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=s(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
-  --minHeight: ${e=>H(e.minHeight)};
+  --minHeight: ${e=>me(e.minHeight)};
 
   > * {
     margin: 0;
@@ -229,4 +249,60 @@
             }
           `:""};
   }
-`,N=e=>{const l=e,{top:t,bottom:n,children:i}=l,o=S(l,["top","bottom","children"]);return React.createElement(K,g({},o),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)};exports.Center=W;exports.ColumnDrop=M;exports.Cover=N;exports.Frame=L;exports.Grid=T;exports.Inline=B;exports.InlineCluster=C;exports.PadBox=G;exports.Reel=_;exports.Stack=q;exports.checkIsCSSLength=p;exports.getSpacingValue=s;exports.spacing=b;
+`,he=e=>{const c=e,{top:t,bottom:n,children:r}=c,a=P(c,["top","bottom","children"]);return React.createElement(ye,g({},a),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},xe=o.styled.div`
+  @property --gutter {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --columns {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
+
+  --columns: ${e=>e.columns&&e.columns>0?e.columns:1};
+
+  box-sizing: border-box;
+  > * {
+    margin: 0;
+  }
+
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 1), 1fr);
+  gap: var(--gutter, 0px);
+  grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
+`,be=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,a]=E(n),c=i=>{var l;a(i),(l=e.ref)==null||l.call(e,i)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(xe,g({as:e.as,ref:c,columns:e.columns},e))),React.createElement(s.Match,{when:r()===!0},React.createElement(A,g({as:e.as,ref:c},e))))},ve=e=>typeof e=="number"?e:1,pe=o.styled.div`
+  @property --span {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+
+  --span: ${e=>ve(e.colSpan)};
+
+  grid-column: span min(var(--span, 1), var(--columns, 1));
+
+  ${e=>e.offsetStart||e.offsetEnd?`
+    display: contents; 
+    > * {
+        grid-column: span min(var(--span, 1), var(--columns, 1));
+    }
+    `:""}
+
+  ${e=>e.offsetStart&&e.offsetStart>0?`
+  &::before {
+    content: "";
+    grid-column: span min(${e.offsetStart}, var(--columns, 1));
+  }
+  `:""}
+
+${e=>e.offsetEnd&&e.offsetEnd>0?`
+  &::after {
+    content: "";
+    grid-column: span min(${e.offsetEnd}, var(--columns, 1));
+  }
+  `:""}
+`;exports.Center=_;exports.Column=pe;exports.ColumnDrop=Q;exports.Columns=be;exports.Cover=he;exports.Frame=Y;exports.Grid=O;exports.Inline=ce;exports.InlineCluster=V;exports.MasonryGrid=ie;exports.PadBox=ue;exports.Reel=de;exports.Split=ge;exports.Stack=A;exports.checkIsCSSLength=R;exports.createContainerQuery=E;exports.getSpacingValue=u;exports.spacing=k;

package/lib/index.d.ts

@@ -1,11 +1,15 @@
 export * from "./spacing-constants";
 export * from "./center";
 export * from "./column-drop";
+export * from "./create-container-query";
 export * from "./frame";
 export * from "./grid";
+export * from "./masonry-grid";
 export * from "./inline-cluster";
 export * from "./inline";
 export * from "./padbox";
 export * from "./reel";
+export * from "./split";
 export * from "./stack";
 export * from "./cover";
+export * from "./columns";

package/lib/index.m.js

@@ -29,7 +29,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { styled, css } from "solid-styled-components";
+import { styled, css, useTheme } from "solid-styled-components";
+import { init, registerCallback } from "@bedrock-layout/register-resize-callback";
+import { createSignal, onMount, createEffect, onCleanup, children, Switch, Match } from "solid-js";
 function checkIsCSSLength(str) {
   if (typeof str !== "string")
     return false;
@@ -141,6 +143,31 @@ const ColumnDrop = styled("div")`
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
 `;
+function createContainerQuery(width = 1, maxWidth) {
+  if (maxWidth !== void 0 && maxWidth <= width) {
+    throw new Error(`The second width value, ${maxWidth}, is not larger than ${width}. Please provide a value greater than first width value`);
+  }
+  const [matches, setMatch] = createSignal(false);
+  const [node, nodeRef] = createSignal();
+  onMount(() => {
+    init();
+  });
+  createEffect(() => {
+    const ref = node();
+    if (ref === void 0 || ref === null)
+      return;
+    const cleanup = registerCallback(ref, (entry) => {
+      var _a, _b;
+      const nodeWidth = (_b = (_a = entry.borderBoxSize) == null ? void 0 : _a.inlineSize) != null ? _b : entry.contentRect.width;
+      if (nodeWidth > 0) {
+        const newMatch = maxWidth === void 0 ? nodeWidth <= width : nodeWidth >= width && nodeWidth <= maxWidth;
+        setMatch(newMatch);
+      }
+    });
+    onCleanup(cleanup);
+  });
+  return [matches, nodeRef];
+}
 function checkIsRatio(ratio) {
   const isCorrectArray = Array.isArray(ratio) && ratio.length === 2 && ratio.every(Number.isFinite);
   return isCorrectArray || typeof ratio === "string" && /^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(ratio);
@@ -229,6 +256,118 @@ const Grid = styled("div")`
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
 `;
+const PIXELS_PER_INCH = 96;
+function parseUnit(str) {
+  var _a;
+  str = String(str);
+  const num = parseFloat(str);
+  const [, unit] = (_a = str.match(/[\d.\-+]*\s*(.*)/)) != null ? _a : ["", ""];
+  return [num, unit];
+}
+function toPX(str, element) {
+  if (!str)
+    return null;
+  const elementOrBody = element != null ? element : document.body;
+  const safeStr = (str != null ? str : "px").trim().toLowerCase();
+  switch (safeStr) {
+    case "vmin":
+    case "vmax":
+    case "vh":
+    case "vw":
+    case "%":
+      return null;
+    case "ch":
+    case "ex":
+      return getSizeBrutal(safeStr, elementOrBody);
+    case "em":
+      return getPropertyInPX(elementOrBody, "font-size");
+    case "rem":
+      return getPropertyInPX(document.body, "font-size");
+    case "in":
+      return PIXELS_PER_INCH;
+    case "cm":
+      return PIXELS_PER_INCH / 2.54;
+    case "mm":
+      return PIXELS_PER_INCH / 25.4;
+    case "pt":
+      return PIXELS_PER_INCH / 72;
+    case "pc":
+      return PIXELS_PER_INCH / 6;
+    case "px":
+      return 1;
+    default: {
+      const [value, units] = parseUnit(safeStr);
+      if (isNaN(value))
+        return null;
+      if (!units)
+        return value;
+      const px = toPX(units, element);
+      return typeof px === "number" ? value * px : null;
+    }
+  }
+}
+function getPropertyInPX(element, prop) {
+  var _a;
+  const [value, units] = parseUnit(getComputedStyle(element).getPropertyValue(prop));
+  return value * ((_a = toPX(units, element)) != null ? _a : 1);
+}
+function getSizeBrutal(unit, element) {
+  const testDIV = document.createElement("div");
+  testDIV.style["height"] = "128" + unit;
+  element.appendChild(testDIV);
+  const size = getPropertyInPX(testDIV, "height") / 128;
+  element.removeChild(testDIV);
+  return size;
+}
+const isBrowser = typeof window === "object" && typeof document === "object" && document.nodeType === 9;
+const RowSpanner = styled.div`
+  grid-row: span var(--rows, 1);
+
+  > * {
+    display: block;
+    height: 100%;
+  }
+`;
+const Resizer = (props) => {
+  const [rowSpan, setRowSpan] = createSignal(1);
+  const [node, nodeRef] = createSignal();
+  const theme = useTheme();
+  onMount(() => {
+    init();
+  });
+  createEffect(() => {
+    const ref = node();
+    if (ref === void 0 || ref === null)
+      return;
+    const cleanup = registerCallback(ref, ({ target }) => {
+      var _a;
+      setRowSpan(1);
+      const gapString = props.gutter ? (_a = getSpacingValue(props.gutter, theme)) != null ? _a : "1px" : "1px";
+      const maybeGap = isBrowser ? toPX(gapString, target) : null;
+      const gap = Math.max(maybeGap != null ? maybeGap : 1, 1);
+      const [child] = Array.from(target.children);
+      const height = 1 + Math.min(target.scrollHeight, child.scrollHeight);
+      const rowHeight = Math.ceil(height / gap);
+      setRowSpan(rowHeight);
+    });
+    onCleanup(cleanup);
+  });
+  return /* @__PURE__ */ React.createElement(RowSpanner, {
+    style: `--rows: ${rowSpan()}`,
+    ref: nodeRef
+  }, props.children);
+};
+const MasonryGridWrapper = styled(Grid)`
+  grid-template-rows: 1px;
+`;
+const MasonryGrid = (props) => {
+  const childrenMemo = children(() => props.children);
+  const emptyResolvedChildren = [];
+  const wrappedChildren = emptyResolvedChildren.concat(childrenMemo()).filter(Boolean).map((child) => /* @__PURE__ */ React.createElement(Resizer, {
+    gutter: props.gutter
+  }, child));
+  return /* @__PURE__ */ React.createElement(MasonryGridWrapper, __spreadValues({}, props), wrappedChildren);
+};
 const justifyMap = {
   start: "flex-start",
   end: "flex-end",
@@ -336,7 +475,7 @@ function paddingToString(theme, padding) {
 }
 const PadBox = styled.div`
   box-sizing: border-box;
-  ${(props) => (console.log(paddingToString(props.theme, props.padding)), paddingToString(props.theme, props.padding))}
+  ${(props) => paddingToString(props.theme, props.padding)}
 `;
 const Reel = styled.div`
   box-sizing: border-box;
@@ -397,6 +536,55 @@ const Stack = styled("div")`
     grid-column: span 1 / auto;
   }
 `;
+const fractions = {
+  "1/4": "1fr 3fr",
+  "1/3": "1fr 2fr",
+  "1/2": "1fr 1fr",
+  "2/3": "2fr 1fr",
+  "3/4": "3fr 1fr",
+  "auto-start": `auto 1fr`,
+  "auto-end": `1fr auto`
+};
+const SplitBase = styled.div`
+    box-sizing: border-box;
+    > * {
+      margin: 0;
+    }
+    
+    --gutter: ${(props) => {
+  var _a;
+  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
+}};
+  
+    display: grid;
+    gap: var(--gutter, 0px);
+    grid-template-columns: ${({ fraction = "1/2" }) => {
+  var _a;
+  return (_a = fractions[fraction]) != null ? _a : fractions["1/2"];
+}}};
+  `;
+const Split = (props) => {
+  const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
+  const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
+  const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
+  const combineRef = (ref) => {
+    var _a;
+    nodeRef(ref);
+    (_a = props.ref) == null ? void 0 : _a.call(props, ref);
+  };
+  return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
+    when: shouldSwitch() === false
+  }, /* @__PURE__ */ React.createElement(SplitBase, __spreadValues({
+    as: props.as,
+    ref: combineRef,
+    fraction: props.fraction
+  }, props))), /* @__PURE__ */ React.createElement(Match, {
+    when: shouldSwitch() === true
+  }, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
+    as: props.as,
+    ref: combineRef
+  }, props))));
+};
 function getSafeMinHeight(minHeight) {
   if (typeof minHeight === "number")
     return `${minHeight}px`;
@@ -447,9 +635,95 @@ const CoverWrapper = styled.div`
   }
 `;
 const Cover = (props) => {
-  const _a = props, { top, bottom, children } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
+  const _a = props, { top, bottom, children: children2 } = _a, rest = __objRest(_a, ["top", "bottom", "children"]);
   return /* @__PURE__ */ React.createElement(CoverWrapper, __spreadValues({}, rest), props.top, /* @__PURE__ */ React.createElement("div", {
     "data-bedrock-cover-centered": true
   }, props.children), props.bottom);
 };
-export { Center, ColumnDrop, Cover, Frame, Grid, Inline, InlineCluster, PadBox, Reel, Stack, checkIsCSSLength, getSpacingValue, spacing };
+const ColumnsBase = styled.div`
+  @property --gutter {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --columns {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+  --gutter: ${(props) => {
+  var _a;
+  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
+}};
+
+  --columns: ${(props) => props.columns && props.columns > 0 ? props.columns : 1};
+
+  box-sizing: border-box;
+  > * {
+    margin: 0;
+  }
+
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 1), 1fr);
+  gap: var(--gutter, 0px);
+  grid-auto-flow: row ${({ dense = false }) => dense === true ? "dense" : ""};
+`;
+const Columns = (props) => {
+  const maybePx = typeof props.switchAt === "string" ? toPX(props.switchAt) : props.switchAt;
+  const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
+  const [shouldSwitch, nodeRef] = createContainerQuery(widthToSwitchAt);
+  const combineRef = (ref) => {
+    var _a;
+    nodeRef(ref);
+    (_a = props.ref) == null ? void 0 : _a.call(props, ref);
+  };
+  return /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Match, {
+    when: shouldSwitch() === false
+  }, /* @__PURE__ */ React.createElement(ColumnsBase, __spreadValues({
+    as: props.as,
+    ref: combineRef,
+    columns: props.columns
+  }, props))), /* @__PURE__ */ React.createElement(Match, {
+    when: shouldSwitch() === true
+  }, /* @__PURE__ */ React.createElement(Stack, __spreadValues({
+    as: props.as,
+    ref: combineRef
+  }, props))));
+};
+const safeSpan = (span) => {
+  return typeof span === "number" ? span : 1;
+};
+const Column = styled.div`
+  @property --span {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+
+  --span: ${(props) => safeSpan(props.colSpan)};
+
+  grid-column: span min(var(--span, 1), var(--columns, 1));
+
+  ${(props) => props.offsetStart || props.offsetEnd ? `
+    display: contents; 
+    > * {
+        grid-column: span min(var(--span, 1), var(--columns, 1));
+    }
+    ` : ""}
+
+  ${(props) => props.offsetStart && props.offsetStart > 0 ? `
+  &::before {
+    content: "";
+    grid-column: span min(${props.offsetStart}, var(--columns, 1));
+  }
+  ` : ""}
+
+${(props) => props.offsetEnd && props.offsetEnd > 0 ? `
+  &::after {
+    content: "";
+    grid-column: span min(${props.offsetEnd}, var(--columns, 1));
+  }
+  ` : ""}
+`;
+export { Center, Column, ColumnDrop, Columns, Cover, Frame, Grid, Inline, InlineCluster, MasonryGrid, PadBox, Reel, Split, Stack, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing };

package/lib/index.umd.js

@@ -1,11 +1,11 @@
-var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var S=(n,i,r)=>i in n?K(n,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[i]=r,y=(n,i)=>{for(var r in i||(i={}))w.call(i,r)&&S(n,r,i[r]);if(x)for(var r of x(i))A.call(i,r)&&S(n,r,i[r]);return n},p=(n,i)=>N(n,U(i));var j=(n,i)=>{var r={};for(var a in n)w.call(n,a)&&i.indexOf(a)<0&&(r[a]=n[a]);if(n!=null&&x)for(var a of x(n))i.indexOf(a)<0&&A.call(n,a)&&(r[a]=n[a]);return r};(function(n,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("solid-styled-components")):typeof define=="function"&&define.amd?define(["exports","solid-styled-components"],i):(n=typeof globalThis!="undefined"?globalThis:n||self,i(n.solid={},n.solidStyledComponents))})(this,function(n,i){"use strict";function r(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const a={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function z(e){return e.reduce((t,[l,d])=>p(y({},t),{[l]:d}),{})}const c=(e,t)=>{var s,g;const l=(g=(s=t==null?void 0:t.space)!=null?s:t==null?void 0:t.spacing)!=null?g:a,o=z(Object.entries(l).map(([h,b])=>[h,typeof b=="number"?`${b}px`:b]))[e];return r(o)?o:void 0};function I(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const R=i.styled.div`
+var ve=Object.defineProperty,we=Object.defineProperties;var $e=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var O=(n,r,l)=>r in n?ve(n,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[r]=l,h=(n,r)=>{for(var l in r||(r={}))L.call(r,l)&&O(n,l,r[l]);if($)for(var l of $(r))V.call(r,l)&&O(n,l,r[l]);return n},M=(n,r)=>we(n,$e(r));var W=(n,r)=>{var l={};for(var c in n)L.call(n,c)&&r.indexOf(c)<0&&(l[c]=n[c]);if(n!=null&&$)for(var c of $(n))r.indexOf(c)<0&&V.call(n,c)&&(l[c]=n[c]);return l};(function(n,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("solid-styled-components"),require("@bedrock-layout/register-resize-callback"),require("solid-js")):typeof define=="function"&&define.amd?define(["exports","solid-styled-components","@bedrock-layout/register-resize-callback","solid-js"],r):(n=typeof globalThis!="undefined"?globalThis:n||self,r(n.solid={},n.solidStyledComponents,n.registerResizeCallback,n.solidJs))})(this,function(n,r,l,c){"use strict";function p(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const S={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function D(e){return e.reduce((t,[i,o])=>M(h({},t),{[i]:o}),{})}const g=(e,t)=>{var a,f;const i=(f=(a=t==null?void 0:t.space)!=null?a:t==null?void 0:t.spacing)!=null?f:S,s=D(Object.entries(i).map(([d,m])=>[d,typeof m=="number"?`${m}px`:m]))[e];return p(s)?s:void 0};function X(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const H=r.styled.div`
   @property --maxWidth {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 100%;
   }
 
-  --maxWidth: ${e=>I(e.maxWidth)};
+  --maxWidth: ${e=>X(e.maxWidth)};
 
   box-sizing: content-box;
 
@@ -17,16 +17,16 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
 
   max-inline-size: var(--maxWidth, 100%);
 
-  ${e=>e.centerChildren?i.css`
+  ${e=>e.centerChildren?r.css`
           display: flex;
           flex-direction: column;
           align-items: center;
         `:""}
 
-  ${e=>e.centerText?i.css`
+  ${e=>e.centerText?r.css`
           text-align: center;
         `:""}
-`;function W(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const C=i.styled("div")`
+`;function F(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const G=r.styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
@@ -39,8 +39,8 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     initial-value: 0px;
   }
 
-  --basis: ${e=>W(e.basis)};
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --basis: ${e=>F(e.basis)};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -53,14 +53,14 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
-`;function E(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function M(e){return Array.isArray(e)?e.join("/"):e}function O(e){return E(e)?M(e):void 0}const T=i.styled.div`
+`;function R(e=1,t){if(t!==void 0&&t<=e)throw new Error(`The second width value, ${t}, is not larger than ${e}. Please provide a value greater than first width value`);const[i,o]=c.createSignal(!1),[s,u]=c.createSignal();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const a=s();if(a==null)return;const f=l.registerCallback(a,d=>{var y,w;const m=(w=(y=d.borderBoxSize)==null?void 0:y.inlineSize)!=null?w:d.contentRect.width;if(m>0){const z=t===void 0?m<=e:m>=e&&m<=t;o(z)}});c.onCleanup(f)}),[i,u]}function N(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function _(e){return Array.isArray(e)?e.join("/"):e}function q(e){return N(e)?_(e):void 0}const Q=r.styled.div`
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   position: relative;
   overflow: hidden;
 
-  ${e=>{const t=O(e.ratio);return t?i.css`
+  ${e=>{const t=q(e.ratio);return t?r.css`
         aspect-ratio: ${t};
       `:""}};
 
@@ -88,7 +88,7 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     object-fit: cover;
     object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
   }
-`,P=i.styled("div")`
+`,j=r.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -101,7 +101,7 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     initial-value: 639px;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
   --minItemWidth: ${e=>{var t;return typeof e.minItemWidth=="string"?e.minItemWidth:`${(t=e.minItemWidth)!=null?t:0}px`}};
 
   box-sizing: border-box;
@@ -116,8 +116,17 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     auto-fit,
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
-`,f={start:"flex-start",end:"flex-end",center:"center"},m=p(y({},f),{stretch:"stretch"}),v=i.styled.div`
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+`,x=96;function C(e){var o;e=String(e);const t=parseFloat(e),[,i]=(o=e.match(/[\d.\-+]*\s*(.*)/))!=null?o:["",""];return[t,i]}function b(e,t){if(!e)return null;const i=t!=null?t:document.body,o=(e!=null?e:"px").trim().toLowerCase();switch(o){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return U(o,i);case"em":return k(i,"font-size");case"rem":return k(document.body,"font-size");case"in":return x;case"cm":return x/2.54;case"mm":return x/25.4;case"pt":return x/72;case"pc":return x/6;case"px":return 1;default:{const[s,u]=C(o);if(isNaN(s))return null;if(!u)return s;const a=b(u,t);return typeof a=="number"?s*a:null}}}function k(e,t){var s;const[i,o]=C(getComputedStyle(e).getPropertyValue(t));return i*((s=b(o,e))!=null?s:1)}function U(e,t){const i=document.createElement("div");i.style.height="128"+e,t.appendChild(i);const o=k(i,"height")/128;return t.removeChild(i),o}const K=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,Y=r.styled.div`
+  grid-row: span var(--rows, 1);
+
+  > * {
+    display: block;
+    height: 100%;
+  }
+`,Z=e=>{const[t,i]=c.createSignal(1),[o,s]=c.createSignal(),u=r.useTheme();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const a=o();if(a==null)return;const f=l.registerCallback(a,({target:d})=>{var B;i(1);const m=e.gutter&&(B=g(e.gutter,u))!=null?B:"1px",y=K?b(m,d):null,w=Math.max(y!=null?y:1,1),[z]=Array.from(d.children),xe=1+Math.min(d.scrollHeight,z.scrollHeight),be=Math.ceil(xe/w);i(be)});c.onCleanup(f)}),React.createElement(Y,{style:`--rows: ${t()}`,ref:s},e.children)},J=r.styled(j)`
+  grid-template-rows: 1px;
+`,ee=e=>{const t=c.children(()=>e.children),o=[].concat(t()).filter(Boolean).map(s=>React.createElement(Z,{gutter:e.gutter},s));return React.createElement(J,h({},e),o)},v={start:"flex-start",end:"flex-end",center:"center"},E=M(h({},v),{stretch:"stretch"}),I=r.styled.div`
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -128,10 +137,10 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
 
-  justify-content: ${e=>typeof e.justify!="undefined"&&f[e.justify]?f[e.justify]:f.start};
+  justify-content: ${e=>typeof e.justify!="undefined"&&v[e.justify]?v[e.justify]:v.start};
 
-  align-items: ${e=>typeof e.align!="undefined"&&m[e.align]?m[e.align]:m.start};
-`;function D(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const L=i.styled(v)`
+  align-items: ${e=>typeof e.align!="undefined"&&E[e.align]?E[e.align]:E.start};
+`;function te(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ne=r.styled(I)`
   @property --switchAt {
     syntax: "<length-percentage>";
     inherits: true;
@@ -140,7 +149,7 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   flex-wrap: nowrap;
   ${e=>e.stretch==="all"?"> *  { flex: 1 }":e.stretch==="start"?"> :first-child { flex: 1 }":e.stretch==="end"?"> :last-child { flex: 1 }":typeof e.stretch=="number"?`> :nth-child(${e.stretch+1}) { flex: 1 }`:""}
 
-  ${e=>D(e.switchAt)?`
+  ${e=>te(e.switchAt)?`
           --switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
           flex-wrap: wrap;
           > * {
@@ -150,17 +159,17 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
             );
           }
         `:""}
-`,$=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),V=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function B(e){return t=>{const l=c(t,e);return l!=null?l:"0px"}}function k(e,t){var u;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const l=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:a));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(s=>l.has(s)):t&&Object.keys(t).every(s=>$.has(s))&&Object.values(t).every(s=>l.has(s)))()||console.error("Invalid padding Type");const o=B(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((s,[g,h])=>$.has(g)?s+V(g,o(h)):s,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(s=>o(s)).join(" ")};`:""}const F=i.styled.div`
+`,P=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),re=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function ie(e){return t=>{const i=g(t,e);return i!=null?i:"0px"}}function ae(e,t){var u;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const i=new Set(Object.keys((u=e==null?void 0:e.spacing)!=null?u:S));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>i.has(a)):t&&Object.keys(t).every(a=>P.has(a))&&Object.values(t).every(a=>i.has(a)))()||console.error("Invalid padding Type");const s=ie(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[f,d])=>P.has(f)?a+re(f,s(d)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>s(a)).join(" ")};`:""}const ce=r.styled.div`
   box-sizing: border-box;
-  ${e=>(console.log(k(e.theme,e.padding)),k(e.theme,e.padding))}
-`,X=i.styled.div`
+  ${e=>ae(e.theme,e.padding)}
+`,oe=r.styled.div`
   box-sizing: border-box;
   > * {
     margin: 0;
     scroll-snap-align: start;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
 
   display: flex;
   gap: var(--gutter, 0px);
@@ -168,14 +177,14 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   overflow-x: scroll;
 
   scroll-snap-type: ${({snapType:e="none"})=>{switch(e){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
-`,G=i.styled("div")`
+`,A=r.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 0;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
   box-sizing: border-box;
   > * {
     margin: 0;
@@ -189,7 +198,18 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
   & > [data-bedrock-column] {
     grid-column: span 1 / auto;
   }
-`;function _(e){return typeof e=="number"?`${e}px`:e&&r(e)?e:"100vh"}const q=i.styled.div`
+`,T={"1/4":"1fr 3fr","1/3":"1fr 2fr","1/2":"1fr 1fr","2/3":"2fr 1fr","3/4":"3fr 1fr","auto-start":"auto 1fr","auto-end":"1fr auto"},se=r.styled.div`
+    box-sizing: border-box;
+    > * {
+      margin: 0;
+    }
+    
+    --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
+  
+    display: grid;
+    gap: var(--gutter, 0px);
+    grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=T[e])!=null?t:T["1/2"]}}};
+  `,le=e=>{const t=typeof e.switchAt=="string"?b(e.switchAt):e.switchAt,i=t&&t>-1?t:0,[o,s]=R(i),u=a=>{var f;s(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(c.Switch,null,React.createElement(c.Match,{when:o()===!1},React.createElement(se,h({as:e.as,ref:u,fraction:e.fraction},e))),React.createElement(c.Match,{when:o()===!0},React.createElement(A,h({as:e.as,ref:u},e))))};function ue(e){return typeof e=="number"?`${e}px`:e&&p(e)?e:"100vh"}const fe=r.styled.div`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -202,9 +222,9 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
     initial-value: 100vh;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=c(e.gutter,e.theme))!=null?t:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
 
-  --minHeight: ${e=>_(e.minHeight)};
+  --minHeight: ${e=>ue(e.minHeight)};
 
   > * {
     margin: 0;
@@ -229,4 +249,60 @@ var K=Object.defineProperty,N=Object.defineProperties;var U=Object.getOwnPropert
             }
           `:""};
   }
-`,H=e=>{const u=e,{top:t,bottom:l,children:d}=u,o=j(u,["top","bottom","children"]);return React.createElement(q,y({},o),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)};n.Center=R,n.ColumnDrop=C,n.Cover=H,n.Frame=T,n.Grid=P,n.Inline=L,n.InlineCluster=v,n.PadBox=F,n.Reel=X,n.Stack=G,n.checkIsCSSLength=r,n.getSpacingValue=c,n.spacing=a,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+`,ge=e=>{const u=e,{top:t,bottom:i,children:o}=u,s=W(u,["top","bottom","children"]);return React.createElement(fe,h({},s),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},de=r.styled.div`
+  @property --gutter {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --columns {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
+
+  --columns: ${e=>e.columns&&e.columns>0?e.columns:1};
+
+  box-sizing: border-box;
+  > * {
+    margin: 0;
+  }
+
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 1), 1fr);
+  gap: var(--gutter, 0px);
+  grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
+`,me=e=>{const t=typeof e.switchAt=="string"?b(e.switchAt):e.switchAt,i=t&&t>-1?t:0,[o,s]=R(i),u=a=>{var f;s(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(c.Switch,null,React.createElement(c.Match,{when:o()===!1},React.createElement(de,h({as:e.as,ref:u,columns:e.columns},e))),React.createElement(c.Match,{when:o()===!0},React.createElement(A,h({as:e.as,ref:u},e))))},he=e=>typeof e=="number"?e:1,ye=r.styled.div`
+  @property --span {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+
+  --span: ${e=>he(e.colSpan)};
+
+  grid-column: span min(var(--span, 1), var(--columns, 1));
+
+  ${e=>e.offsetStart||e.offsetEnd?`
+    display: contents; 
+    > * {
+        grid-column: span min(var(--span, 1), var(--columns, 1));
+    }
+    `:""}
+
+  ${e=>e.offsetStart&&e.offsetStart>0?`
+  &::before {
+    content: "";
+    grid-column: span min(${e.offsetStart}, var(--columns, 1));
+  }
+  `:""}
+
+${e=>e.offsetEnd&&e.offsetEnd>0?`
+  &::after {
+    content: "";
+    grid-column: span min(${e.offsetEnd}, var(--columns, 1));
+  }
+  `:""}
+`;n.Center=H,n.Column=ye,n.ColumnDrop=G,n.Columns=me,n.Cover=ge,n.Frame=Q,n.Grid=j,n.Inline=ne,n.InlineCluster=I,n.MasonryGrid=ee,n.PadBox=ce,n.Reel=oe,n.Split=le,n.Stack=A,n.checkIsCSSLength=p,n.createContainerQuery=R,n.getSpacingValue=g,n.spacing=S,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});

package/lib/masonry-grid.d.ts

@@ -0,0 +1,3 @@
+import { Component } from "solid-js";
+import { GridProps } from "./grid";
+export declare const MasonryGrid: Component<GridProps>;

package/lib/spacing-constants.d.ts

@@ -1,4 +1,4 @@
-import { DefaultTheme } from "solid-styled-components";
+import type { DefaultTheme } from "solid-styled-components";
 declare type LowercaseCharacter = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z";
 declare type AllCharacter = LowercaseCharacter | Uppercase<LowercaseCharacter>;
 declare type NonEmptyString = `${AllCharacter}${string}`;

package/lib/split.d.ts

@@ -0,0 +1,15 @@
+import { Component, JSX } from "solid-js";
+import { CSSLength, SpacingOptions } from "./spacing-constants";
+import { StackProps } from "./stack";
+declare type FractionTypes = "auto-start" | "auto-end" | "1/4" | "1/3" | "1/2" | "2/3" | "3/4";
+interface SplitBaseProps {
+    gutter?: SpacingOptions;
+    fraction?: FractionTypes;
+}
+export interface SplitProps extends StackProps, SplitBaseProps {
+    switchAt?: number | CSSLength;
+    as?: Component | keyof JSX.IntrinsicElements;
+    ref?: (ref: HTMLElement) => void;
+}
+export declare const Split: Component<SplitProps>;
+export {};

package/lib/toPx.d.ts

@@ -0,0 +1,4 @@
+/**
+ * This module is adapted from https://github.com/mikolalysenko/to-px/blob/master/browser.js
+ */
+export declare function toPX(str: string, element?: Element): number | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrock-layout/solid",
-  "version": "0.8.0",
+  "version": "0.11.0",
   "description": "solid.js port of bedrock-layout primitives",
   "sideEffects": false,
   "private": false,
@@ -46,6 +46,9 @@
     "solid-js": "^1.3.7",
     "solid-styled-components": "^0.27.4"
   },
+  "dependencies": {
+    "@bedrock-layout/register-resize-callback": "^1.1.0"
+  },
   "scripts": {
     "test": "echo \"Error: run tests from root\" && exit 1",
     "lint": "eslint --ignore-path .gitignore .",
@@ -59,5 +62,5 @@
   "bugs": {
     "url": "https://github.com/Bedrock-Layouts/Solid-Bedrock/issues"
   },
-  "gitHead": "6a87cc2d65eb589c4b6b2583e437f7d107033e51"
+  "gitHead": "53a63be6fd53636f40b532537925eb1b1282b376"
 }