@bedrock-layout/solid 0.7.2 → 0.10.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/cover.d.ts

@@ -0,0 +1,15 @@
+import { Component, JSX, JSXElement } from "solid-js";
+import { CSSLength, SpacingOptions } from "./spacing-constants";
+declare type MinHeight = CSSLength | number;
+interface CoverWrapperProps {
+    gutter?: SpacingOptions;
+    minHeight?: MinHeight;
+    stretchContent?: boolean;
+}
+export interface CoverProps extends CoverWrapperProps {
+    top?: JSXElement;
+    bottom?: JSXElement;
+    as?: Component | keyof JSX.IntrinsicElements;
+}
+export declare const Cover: Component<CoverProps>;
+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 S=Object.defineProperty,k=Object.defineProperties;var w=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var A=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var b=(t,e,n)=>e in t?S(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,f=(t,e)=>{for(var n in e||(e={}))A.call(e,n)&&b(t,n,e[n]);if(m)for(var n of m(e))j.call(e,n)&&b(t,n,e[n]);return t},x=(t,e)=>k(t,w(e));Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var r=require("solid-styled-components");function v(t){return typeof t!="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(e=>e.test(t))}const p={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 C(t){return t.reduce((e,[n,c])=>x(f({},e),{[n]:c}),{})}const s=(t,e)=>{var i,o;const n=(o=(i=e==null?void 0:e.space)!=null?i:e==null?void 0:e.spacing)!=null?o:p,a=C(Object.entries(n).map(([g,d])=>[g,typeof d=="number"?`${d}px`:d]))[t];return v(a)?a:void 0};function z(t){return t===void 0?"100%":typeof t=="number"?`${t}px`:t}const I=r.styled.div`
+"use strict";var L=Object.defineProperty,V=Object.defineProperties;var D=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var A=(e,t,n)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))E.call(t,n)&&A(e,n,t[n]);if(y)for(var n of y(t))z.call(t,n)&&A(e,n,t[n]);return e},b=(e,t)=>V(e,D(t));var j=(e,t)=>{var n={};for(var r in e)E.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&y)for(var r of y(e))t.indexOf(r)<0&&z.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperty(exports,"__esModule",{value:!0});exports[Symbol.toStringTag]="Module";var c=require("solid-styled-components"),I=require("@bedrock-layout/register-resize-callback"),l=require("solid-js");function S(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 $={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 W(e){return e.reduce((t,[n,r])=>b(f({},t),{[n]:r}),{})}const u=(e,t)=>{var i,o;const n=(o=(i=t==null?void 0:t.space)!=null?i:t==null?void 0:t.spacing)!=null?o:$,a=W(Object.entries(n).map(([g,d])=>[g,typeof d=="number"?`${d}px`:d]))[e];return S(a)?a:void 0};function X(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const F=c.styled.div`
   @property --maxWidth {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 100%;
   }
 
-  --maxWidth: ${t=>z(t.maxWidth)};
+  --maxWidth: ${e=>X(e.maxWidth)};
 
   box-sizing: content-box;
 
@@ -17,16 +17,16 @@
 
   max-inline-size: var(--maxWidth, 100%);
 
-  ${t=>t.centerChildren?r.css`
+  ${e=>e.centerChildren?c.css`
           display: flex;
           flex-direction: column;
           align-items: center;
         `:""}
 
-  ${t=>t.centerText?r.css`
+  ${e=>e.centerText?c.css`
           text-align: center;
         `:""}
-`;function O(t){return t===void 0?"100%":typeof t=="number"?`${t}px`:t}const R=r.styled("div")`
+`;function N(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const _=c.styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
@@ -39,29 +39,29 @@
     initial-value: 0px;
   }
 
-  --basis: ${t=>O(t.basis)};
-  --gutter: ${t=>{var e;return t.gutter&&(e=s(t.gutter,t.theme))!=null?e:"0px"}};
+  --basis: ${e=>N(e.basis)};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
     margin: 0;
     flex-basis: var(--basis, 100%);
-    flex-grow: ${t=>t.noStretchedColumns?"0":"1"};
+    flex-grow: ${e=>e.noStretchedColumns?"0":"1"};
     flex-shrink: 1;
   }
 
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
-`;function W(t){return Array.isArray(t)&&t.length===2&&t.every(Number.isFinite)||typeof t=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(t)}function M(t){return Array.isArray(t)?t.join("/"):t}function E(t){return W(t)?M(t):void 0}const P=r.styled.div`
+`;function w(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]=l.createSignal(!1),[a,s]=l.createSignal();return l.onMount(()=>{I.init()}),l.createEffect(()=>{const i=a();if(i==null)return;const o=I.registerCallback(i,g=>{var k,R;const d=(R=(k=g.borderBoxSize)==null?void 0:k.inlineSize)!=null?R:g.contentRect.width;if(d>0){const T=t===void 0?d<=e:d>=e&&d<=t;r(T)}});l.onCleanup(o)}),[n,s]}function q(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 G(e){return Array.isArray(e)?e.join("/"):e}function H(e){return q(e)?G(e):void 0}const Q=c.styled.div`
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   position: relative;
   overflow: hidden;
 
-  ${t=>{const e=E(t.ratio);return e?r.css`
-        aspect-ratio: ${e};
+  ${e=>{const t=H(e.ratio);return t?c.css`
+        aspect-ratio: ${t};
       `:""}};
 
   > * {
@@ -86,9 +86,9 @@
     size: 100%;
 
     object-fit: cover;
-    object-position: ${t=>typeof t.position=="string"?t.position:"50%"};
+    object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
   }
-`,D=r.styled("div")`
+`,U=c.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -101,8 +101,8 @@
     initial-value: 639px;
   }
 
-  --gutter: ${t=>{var e;return t.gutter&&(e=s(t.gutter,t.theme))!=null?e:"0px"}};
-  --minItemWidth: ${t=>{var e;return typeof t.minItemWidth=="string"?t.minItemWidth:`${(e=t.minItemWidth)!=null?e:0}px`}};
+  --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,8 @@
     auto-fit,
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
-`,l={start:"flex-start",end:"flex-end",center:"center"},y=x(f({},l),{stretch:"stretch"}),$=r.styled.div`
-  --gutter: ${t=>{var e;return t.gutter&&(e=s(t.gutter,t.theme))!=null?e:"0px"}};
+`,x={start:"flex-start",end:"flex-end",center:"center"},v=b(f({},x),{stretch:"stretch"}),O=c.styled.div`
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
   > * {
@@ -128,20 +128,20 @@
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
 
-  justify-content: ${t=>typeof t.justify!="undefined"&&l[t.justify]?l[t.justify]:l.start};
+  justify-content: ${e=>typeof e.justify!="undefined"&&x[e.justify]?x[e.justify]:x.start};
 
-  align-items: ${t=>typeof t.align!="undefined"&&y[t.align]?y[t.align]:y.start};
-`;function L(t){return typeof t=="number"&&t>-1?!0:typeof t=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${t}`):!1}const T=r.styled($)`
+  align-items: ${e=>typeof e.align!="undefined"&&v[e.align]?v[e.align]:v.start};
+`;function J(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const K=c.styled(O)`
   @property --switchAt {
     syntax: "<length-percentage>";
     inherits: true;
     initial-value: 0;
   }
   flex-wrap: nowrap;
-  ${t=>t.stretch==="all"?"> *  { flex: 1 }":t.stretch==="start"?"> :first-child { flex: 1 }":t.stretch==="end"?"> :last-child { flex: 1 }":typeof t.stretch=="number"?`> :nth-child(${t.stretch+1}) { flex: 1 }`:""}
+  ${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 }`:""}
 
-  ${t=>L(t.switchAt)?`
-          --switchAt: ${typeof t.switchAt=="string"?t.switchAt:`${t.switchAt}px`};
+  ${e=>J(e.switchAt)?`
+          --switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
           flex-wrap: wrap;
           > * {
             min-inline-size: fit-content;
@@ -150,32 +150,32 @@
             );
           }
         `:""}
-`,h=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),V=(t,e)=>({left:`padding-inline-start:${e};`,right:`padding-inline-end:${e};`,top:`padding-block-start:${e};`,bottom:`padding-block-end:${e};`,inlineStart:`padding-inline-start:${e};`,inlineEnd:`padding-inline-end:${e};`,blockStart:`padding-block-start:${e};`,blockEnd:`padding-block-end:${e};`})[t];function B(t){return e=>{const n=s(e,t);return n!=null?n:"0px"}}function F(t,e){var u;if(Array.isArray(e)&&e.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((u=t==null?void 0:t.spacing)!=null?u:p));(()=>typeof e=="string"?!0:Array.isArray(e)?e.every(i=>n.has(i)):e&&Object.keys(e).every(i=>h.has(i))&&Object.values(e).every(i=>n.has(i)))()||console.error("Invalid padding Type");const a=B(t);return typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((i,[o,g])=>h.has(o)?i+V(o,a(g)):i,""):e?`padding: ${Array.from(Array.isArray(e)?e:[e]).map(i=>a(i)).join(" ")}`:""}const X=r.styled.div`
+`,M=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),Y=(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 Z(e){return t=>{const n=u(t,e);return n!=null?n:"0px"}}function ee(e,t){var s;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((s=e==null?void 0:e.spacing)!=null?s:$));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(i=>n.has(i)):t&&Object.keys(t).every(i=>M.has(i))&&Object.values(t).every(i=>n.has(i)))()||console.error("Invalid padding Type");const a=Z(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((i,[o,g])=>M.has(o)?i+Y(o,a(g)):i,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(i=>a(i)).join(" ")};`:""}const te=c.styled.div`
   box-sizing: border-box;
-  ${t=>F(t.theme,t.padding)}
-`,G=r.styled.div`
+  ${e=>ee(e.theme,e.padding)}
+`,ne=c.styled.div`
   box-sizing: border-box;
   > * {
     margin: 0;
     scroll-snap-align: start;
   }
 
-  --gutter: ${t=>{var e;return t.gutter&&(e=s(t.gutter,t.theme))!=null?e:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
 
   display: flex;
   gap: var(--gutter, 0px);
 
   overflow-x: scroll;
 
-  scroll-snap-type: ${({snapType:t="none"})=>{switch(t){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
-`,_=r.styled("div")`
+  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"}}};
+`,C=c.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 0;
   }
 
-  --gutter: ${t=>{var e;return t.gutter&&(e=s(t.gutter,t.theme))!=null?e:"0px"}};
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
   box-sizing: border-box;
   > * {
     margin: 0;
@@ -189,4 +189,111 @@
   & > [data-bedrock-column] {
     grid-column: span 1 / auto;
   }
-`;exports.Center=I;exports.ColumnDrop=R;exports.Frame=P;exports.Grid=D;exports.Inline=T;exports.InlineCluster=$;exports.PadBox=X;exports.Reel=G;exports.Stack=_;exports.checkIsCSSLength=v;exports.getSpacingValue=s;exports.spacing=p;
+`,m=96;function B(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 re(r,n);case"em":return p(n,"font-size");case"rem":return p(document.body,"font-size");case"in":return m;case"cm":return m/2.54;case"mm":return m/25.4;case"pt":return m/72;case"pc":return m/6;case"px":return 1;default:{const[a,s]=B(r);if(isNaN(a))return null;if(!s)return a;const i=h(s,t);return typeof i=="number"?a*i:null}}}function p(e,t){var a;const[n,r]=B(getComputedStyle(e).getPropertyValue(t));return n*((a=h(r,e))!=null?a:1)}function re(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const r=p(n,"height")/128;return t.removeChild(n),r}const P={"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"},ie=c.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=P[e])!=null?t:P["1/2"]}}};
+  `,ae=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0;console.log(n);const[r,a]=w(n),s=i=>{var o;a(i),(o=e.ref)==null||o.call(e,i)};return React.createElement(l.Switch,null,React.createElement(l.Match,{when:r()===!1},React.createElement(ie,f({as:e.as,ref:s,fraction:e.fraction},e))),React.createElement(l.Match,{when:r()===!0},React.createElement(C,f({as:e.as,ref:s},e))))};function se(e){return typeof e=="number"?`${e}px`:e&&S(e)?e:"100vh"}const ce=c.styled.div`
+  @property --gutter {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --minHeight {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 100vh;
+  }
+
+  --gutter: ${e=>{var t;return e.gutter&&(t=u(e.gutter,e.theme))!=null?t:"0px"}};
+
+  --minHeight: ${e=>se(e.minHeight)};
+
+  > * {
+    margin: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--gutter, 0px);
+
+  min-block-size: var(--minHeight, 100vh);
+
+  > [data-bedrock-cover-centered] {
+    margin-block-start: auto;
+    margin-block-end: auto;
+
+    ${({stretchContent:e})=>e===!0?`
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            > * {
+              flex: 1;
+            }
+          `:""};
+  }
+`,oe=e=>{const s=e,{top:t,bottom:n,children:r}=s,a=j(s,["top","bottom","children"]);return React.createElement(ce,f({},a),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},le=c.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":""};
+`,ue=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt;console.log(t);const n=t&&t>-1?t:0;console.log(n);const[r,a]=w(n),s=i=>{var o;a(i),(o=e.ref)==null||o.call(e,i)};return React.createElement(l.Switch,null,React.createElement(l.Match,{when:r()===!1},React.createElement(le,f({as:e.as,ref:s,columns:e.columns},e))),React.createElement(l.Match,{when:r()===!0},React.createElement(C,f({as:e.as,ref:s},e))))},de=e=>typeof e=="number"?e:1,fe=c.styled.div`
+  @property --span {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+
+  --span: ${e=>de(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=F;exports.Column=fe;exports.ColumnDrop=_;exports.Columns=ue;exports.Cover=oe;exports.Frame=Q;exports.Grid=U;exports.Inline=K;exports.InlineCluster=O;exports.PadBox=te;exports.Reel=ne;exports.Split=ae;exports.Stack=C;exports.checkIsCSSLength=S;exports.createContainerQuery=w;exports.getSpacingValue=u;exports.spacing=$;

package/lib/index.d.ts

@@ -1,10 +1,14 @@
 export * from "./spacing-constants";
 export * from "./center";
 export * from "./column-drop";
+export * from "./create-container-query";
 export * from "./frame";
 export * from "./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

@@ -17,7 +17,21 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { styled, css } from "solid-styled-components";
+import { init, registerCallback } from "@bedrock-layout/register-resize-callback";
+import { createSignal, onMount, createEffect, onCleanup, Switch, Match } from "solid-js";
 function checkIsCSSLength(str) {
   if (typeof str !== "string")
     return false;
@@ -129,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);
@@ -320,7 +359,7 @@ function paddingToString(theme, padding) {
     console.error("Invalid padding Type");
   }
   const getPadding = paddingOrDefault(theme);
-  return typeof padding === "object" && !Array.isArray(padding) ? Object.entries(padding).reduce((acc, [key, val]) => validKeys.has(key) ? acc + keyToProperty(key, getPadding(val)) : acc, "") : padding ? `padding: ${Array.from(Array.isArray(padding) ? padding : [padding]).map((pad) => getPadding(pad)).join(" ")}` : "";
+  return typeof padding === "object" && !Array.isArray(padding) ? Object.entries(padding).reduce((acc, [key, val]) => validKeys.has(key) ? acc + keyToProperty(key, getPadding(val)) : acc, "") : padding !== void 0 ? `padding: ${Array.from(Array.isArray(padding) ? padding : [padding]).map((pad) => getPadding(pad)).join(" ")};` : "";
 }
 const PadBox = styled.div`
   box-sizing: border-box;
@@ -385,4 +424,260 @@ const Stack = styled("div")`
     grid-column: span 1 / auto;
   }
 `;
-export { Center, ColumnDrop, Frame, Grid, Inline, InlineCluster, PadBox, Reel, Stack, checkIsCSSLength, getSpacingValue, spacing };
+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 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;
+  console.log(widthToSwitchAt);
+  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`;
+  return minHeight && checkIsCSSLength(minHeight) ? minHeight : "100vh";
+}
+const CoverWrapper = styled.div`
+  @property --gutter {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --minHeight {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 100vh;
+  }
+
+  --gutter: ${(props) => {
+  var _a;
+  return props.gutter ? (_a = getSpacingValue(props.gutter, props.theme)) != null ? _a : "0px" : "0px";
+}};
+
+  --minHeight: ${(props) => getSafeMinHeight(props.minHeight)};
+
+  > * {
+    margin: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--gutter, 0px);
+
+  min-block-size: var(--minHeight, 100vh);
+
+  > [data-bedrock-cover-centered] {
+    margin-block-start: auto;
+    margin-block-end: auto;
+
+    ${({ stretchContent }) => stretchContent === true ? `
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            > * {
+              flex: 1;
+            }
+          ` : ""};
+  }
+`;
+const Cover = (props) => {
+  const _a = props, { top, bottom, children } = _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);
+};
+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;
+  console.log(maybePx);
+  const widthToSwitchAt = maybePx && maybePx > -1 ? maybePx : 0;
+  console.log(widthToSwitchAt);
+  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, PadBox, Reel, Split, Stack, checkIsCSSLength, createContainerQuery, getSpacingValue, spacing };

package/lib/index.umd.js

@@ -1,11 +1,11 @@
-var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var $=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var S=(n,i,r)=>i in n?F(n,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[i]=r,p=(n,i)=>{for(var r in i||(i={}))_.call(i,r)&&S(n,r,i[r]);if($)for(var r of $(i))q.call(i,r)&&S(n,r,i[r]);return n},b=(n,i)=>X(n,G(i));(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 g={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 k(e){return e.reduce((t,[s,d])=>b(p({},t),{[s]:d}),{})}const l=(e,t)=>{var a,o;const s=(o=(a=t==null?void 0:t.space)!=null?a:t==null?void 0:t.spacing)!=null?o:g,c=k(Object.entries(s).map(([y,m])=>[y,typeof m=="number"?`${m}px`:m]))[e];return r(c)?c:void 0};function w(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const A=i.styled.div`
+var fe=Object.defineProperty,ge=Object.defineProperties;var de=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var P=(n,r,o)=>r in n?fe(n,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[r]=o,m=(n,r)=>{for(var o in r||(r={}))T.call(r,o)&&P(n,o,r[o]);if(v)for(var o of v(r))O.call(r,o)&&P(n,o,r[o]);return n},E=(n,r)=>ge(n,de(r));var B=(n,r)=>{var o={};for(var s in n)T.call(n,s)&&r.indexOf(s)<0&&(o[s]=n[s]);if(n!=null&&v)for(var s of v(n))r.indexOf(s)<0&&O.call(n,s)&&(o[s]=n[s]);return o};(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,o,s){"use strict";function $(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 w={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 L(e){return e.reduce((t,[i,c])=>E(m({},t),{[i]:c}),{})}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:w,l=L(Object.entries(i).map(([h,d])=>[h,typeof d=="number"?`${d}px`:d]))[e];return $(l)?l:void 0};function V(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const D=r.styled.div`
   @property --maxWidth {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 100%;
   }
 
-  --maxWidth: ${e=>w(e.maxWidth)};
+  --maxWidth: ${e=>V(e.maxWidth)};
 
   box-sizing: content-box;
 
@@ -17,16 +17,16 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=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 j(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const z=i.styled("div")`
+`;function W(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const X=r.styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
@@ -39,8 +39,8 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
     initial-value: 0px;
   }
 
-  --basis: ${e=>j(e.basis)};
-  --gutter: ${e=>{var t;return e.gutter&&(t=l(e.gutter,e.theme))!=null?t:"0px"}};
+  --basis: ${e=>W(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 F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
   display: flex;
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
-`;function I(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 O(e){return Array.isArray(e)?e.join("/"):e}function R(e){return I(e)?O(e):void 0}const W=i.styled.div`
+`;function S(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,c]=s.createSignal(!1),[l,u]=s.createSignal();return s.onMount(()=>{o.init()}),s.createEffect(()=>{const a=l();if(a==null)return;const f=o.registerCallback(a,h=>{var I,M;const d=(M=(I=h.borderBoxSize)==null?void 0:I.inlineSize)!=null?M:h.contentRect.width;if(d>0){const ue=t===void 0?d<=e:d>=e&&d<=t;c(ue)}});s.onCleanup(f)}),[i,u]}function F(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 N(e){return Array.isArray(e)?e.join("/"):e}function _(e){return F(e)?N(e):void 0}const q=r.styled.div`
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   position: relative;
   overflow: hidden;
 
-  ${e=>{const t=R(e.ratio);return t?i.css`
+  ${e=>{const t=_(e.ratio);return t?r.css`
         aspect-ratio: ${t};
       `:""}};
 
@@ -88,7 +88,7 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
     object-fit: cover;
     object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
   }
-`,M=i.styled("div")`
+`,G=r.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -101,7 +101,7 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
     initial-value: 639px;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=l(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,8 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
     auto-fit,
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
-`,u={start:"flex-start",end:"flex-end",center:"center"},f=b(p({},u),{stretch:"stretch"}),h=i.styled.div`
-  --gutter: ${e=>{var t;return e.gutter&&(t=l(e.gutter,e.theme))!=null?t:"0px"}};
+`,x={start:"flex-start",end:"flex-end",center:"center"},p=E(m({},x),{stretch:"stretch"}),R=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 +128,10 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
   flex-wrap: wrap;
   gap: var(--gutter, 0px);
 
-  justify-content: ${e=>typeof e.justify!="undefined"&&u[e.justify]?u[e.justify]:u.start};
+  justify-content: ${e=>typeof e.justify!="undefined"&&x[e.justify]?x[e.justify]:x.start};
 
-  align-items: ${e=>typeof e.align!="undefined"&&f[e.align]?f[e.align]:f.start};
-`;function T(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const C=i.styled(h)`
+  align-items: ${e=>typeof e.align!="undefined"&&p[e.align]?p[e.align]:p.start};
+`;function H(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const Q=r.styled(R)`
   @property --switchAt {
     syntax: "<length-percentage>";
     inherits: true;
@@ -140,7 +140,7 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=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=>T(e.switchAt)?`
+  ${e=>H(e.switchAt)?`
           --switchAt: ${typeof e.switchAt=="string"?e.switchAt:`${e.switchAt}px`};
           flex-wrap: wrap;
           > * {
@@ -150,17 +150,17 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
             );
           }
         `:""}
-`,v=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),E=(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 P(e){return t=>{const s=l(t,e);return s!=null?s:"0px"}}function D(e,t){var x;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const s=new Set(Object.keys((x=e==null?void 0:e.spacing)!=null?x:g));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>s.has(a)):t&&Object.keys(t).every(a=>v.has(a))&&Object.values(t).every(a=>s.has(a)))()||console.error("Invalid padding Type");const c=P(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[o,y])=>v.has(o)?a+E(o,c(y)):a,""):t?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>c(a)).join(" ")}`:""}const L=i.styled.div`
+`,z=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),U=(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 K(e){return t=>{const i=g(t,e);return i!=null?i:"0px"}}function Y(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:w));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>i.has(a)):t&&Object.keys(t).every(a=>z.has(a))&&Object.values(t).every(a=>i.has(a)))()||console.error("Invalid padding Type");const l=K(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[f,h])=>z.has(f)?a+U(f,l(h)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>l(a)).join(" ")};`:""}const Z=r.styled.div`
   box-sizing: border-box;
-  ${e=>D(e.theme,e.padding)}
-`,V=i.styled.div`
+  ${e=>Y(e.theme,e.padding)}
+`,J=r.styled.div`
   box-sizing: border-box;
   > * {
     margin: 0;
     scroll-snap-align: start;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=l(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 +168,14 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=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"}}};
-`,B=i.styled("div")`
+`,k=r.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
     initial-value: 0;
   }
 
-  --gutter: ${e=>{var t;return e.gutter&&(t=l(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,4 +189,111 @@ var F=Object.defineProperty,X=Object.defineProperties;var G=Object.getOwnPropert
   & > [data-bedrock-column] {
     grid-column: span 1 / auto;
   }
-`;n.Center=A,n.ColumnDrop=z,n.Frame=W,n.Grid=M,n.Inline=C,n.InlineCluster=h,n.PadBox=L,n.Reel=V,n.Stack=B,n.checkIsCSSLength=r,n.getSpacingValue=l,n.spacing=g,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+`,y=96;function j(e){var c;e=String(e);const t=parseFloat(e),[,i]=(c=e.match(/[\d.\-+]*\s*(.*)/))!=null?c:["",""];return[t,i]}function b(e,t){if(!e)return null;const i=t!=null?t:document.body,c=(e!=null?e:"px").trim().toLowerCase();switch(c){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return ee(c,i);case"em":return A(i,"font-size");case"rem":return A(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[l,u]=j(c);if(isNaN(l))return null;if(!u)return l;const a=b(u,t);return typeof a=="number"?l*a:null}}}function A(e,t){var l;const[i,c]=j(getComputedStyle(e).getPropertyValue(t));return i*((l=b(c,e))!=null?l:1)}function ee(e,t){const i=document.createElement("div");i.style.height="128"+e,t.appendChild(i);const c=A(i,"height")/128;return t.removeChild(i),c}const C={"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"},te=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=C[e])!=null?t:C["1/2"]}}};
+  `,ne=e=>{const t=typeof e.switchAt=="string"?b(e.switchAt):e.switchAt,i=t&&t>-1?t:0;console.log(i);const[c,l]=S(i),u=a=>{var f;l(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:c()===!1},React.createElement(te,m({as:e.as,ref:u,fraction:e.fraction},e))),React.createElement(s.Match,{when:c()===!0},React.createElement(k,m({as:e.as,ref:u},e))))};function re(e){return typeof e=="number"?`${e}px`:e&&$(e)?e:"100vh"}const ie=r.styled.div`
+  @property --gutter {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --minHeight {
+    syntax: "<length-percentage>";
+    inherits: false;
+    initial-value: 100vh;
+  }
+
+  --gutter: ${e=>{var t;return e.gutter&&(t=g(e.gutter,e.theme))!=null?t:"0px"}};
+
+  --minHeight: ${e=>re(e.minHeight)};
+
+  > * {
+    margin: 0;
+  }
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--gutter, 0px);
+
+  min-block-size: var(--minHeight, 100vh);
+
+  > [data-bedrock-cover-centered] {
+    margin-block-start: auto;
+    margin-block-end: auto;
+
+    ${({stretchContent:e})=>e===!0?`
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            > * {
+              flex: 1;
+            }
+          `:""};
+  }
+`,ae=e=>{const u=e,{top:t,bottom:i,children:c}=u,l=B(u,["top","bottom","children"]);return React.createElement(ie,m({},l),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},ce=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":""};
+`,se=e=>{const t=typeof e.switchAt=="string"?b(e.switchAt):e.switchAt;console.log(t);const i=t&&t>-1?t:0;console.log(i);const[c,l]=S(i),u=a=>{var f;l(a),(f=e.ref)==null||f.call(e,a)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:c()===!1},React.createElement(ce,m({as:e.as,ref:u,columns:e.columns},e))),React.createElement(s.Match,{when:c()===!0},React.createElement(k,m({as:e.as,ref:u},e))))},le=e=>typeof e=="number"?e:1,oe=r.styled.div`
+  @property --span {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+  }
+
+  --span: ${e=>le(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=D,n.Column=oe,n.ColumnDrop=X,n.Columns=se,n.Cover=ae,n.Frame=q,n.Grid=G,n.Inline=Q,n.InlineCluster=R,n.PadBox=Z,n.Reel=J,n.Split=ne,n.Stack=k,n.checkIsCSSLength=$,n.createContainerQuery=S,n.getSpacingValue=g,n.spacing=w,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});

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.7.2",
+  "version": "0.10.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": "f383b93fdab7e65c717821aaec9fc4903cd61b80"
+  "gitHead": "af80ca54feda5c1b9f0173c867802bc3a87ee259"
 }