@inc2734/unitone-css 1.0.1 → 1.1.0

package/dist/layout-primitives/decorator/react.js

@@ -1 +1 @@
-"use strict";var o=require("react");function t(){return t=Object.assign?Object.assign.bind():function(o){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var e in r)({}).hasOwnProperty.call(r,e)&&(o[e]=r[e])}return o},t.apply(null,arguments)}function r(o){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},r(o)}function e(o){var t=function(o,t){if("object"!=r(o)||!o)return o;var e=o[Symbol.toPrimitive];if(void 0!==e){var n=e.call(o,t);if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(o)}(o,"string");return"symbol"==r(t)?t:t+""}function n(o,t,r){return(t=e(t))in o?Object.defineProperty(o,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):o[t]=r,o}var i=["backgroundColor","borderColor","borderRadius","borderWidth","maxHeight","minHeight","maxWidth","color","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","gap","alignContent","justifyItems","shadow","position","top","right","bottom","left","zIndex","mixBlendMode","overflow","backdropFilter","progressiveBackdropFilter","progressiveBackdropFilterAngle","progressiveBackdropFilterStart","style"];function d(o,t){var r=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);t&&(e=e.filter(function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})),r.push.apply(r,e)}return r}function a(o){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(Object(r),!0).forEach(function(t){n(o,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(r)):d(Object(r)).forEach(function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(r,t))})}return o}exports.Decorator=function(r){var e=r.backgroundColor,n=r.borderColor,d=r.borderRadius,l=r.borderWidth,c=r.maxHeight,u=r.minHeight,p=r.maxWidth,s=r.color,g=r.padding,v=r.paddingTop,f=r.paddingRight,b=r.paddingBottom,m=r.paddingLeft,y=r.gap,h=r.alignContent,O=r.justifyItems,j=r.shadow,w=r.position,k=r.top,x=r.right,P=r.bottom,S=r.left,B=r.zIndex,F=r.mixBlendMode,C=r.overflow,D=r.backdropFilter,E=r.progressiveBackdropFilter,I=r.progressiveBackdropFilterAngle,H=r.progressiveBackdropFilterStart,R=r.style,W=function(o,t){if(null==o)return{};var r,e,n=function(o,t){if(null==o)return{};var r={};for(var e in o)if({}.hasOwnProperty.call(o,e)){if(-1!==t.indexOf(e))continue;r[e]=o[e]}return r}(o,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(o);for(e=0;e<i.length;e++)r=i[e],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(o,r)&&(n[r]=o[r])}return n}(r,i);return R=a(a({},R),{},{"--unitone--background-color":""!==e?e:void 0,"--unitone--border-color":""!==n?n:void 0,"--unitone--border-radius":""!==d?d:void 0,"--unitone--border-width":""!==l?l:void 0,"--unitone--max-height":""!==c?c:void 0,"--unitone--min-height":""!==u?u:void 0,"--unitone--max-width":""!==p?p:void 0,"--unitone--color":""!==s?s:void 0,"--unitone--top":""!==k?k:void 0,"--unitone--right":""!==x?x:void 0,"--unitone--bottom":""!==P?P:void 0,"--unitone--left":""!==S?S:void 0,"--unitone--z-index":""!==B?B:void 0,"--unitone--backdrop-filter":""!==D?D:void 0,"--unitone--progressive-backdrop-filter-angle":E&&""!==I?I:void 0,"--unitone--progressive-backdrop-filter-start":H&&""!==H?H:void 0}),o.createElement("div",t({"data-unitone-layout":["decorator",""!==(null!=y?y:"")?"-gap:".concat(y):void 0,""!==(null!=h?h:"")?"-align-content:".concat(h):void 0,""!==(null!=O?O:"")?"-justify-items:".concat(O):void 0,""!==(null!=g?g:"")?"-padding:".concat(g):void 0,""!==(null!=v?v:"")?"-padding-top:".concat(v):void 0,""!==(null!=f?f:"")?"-padding-right:".concat(f):void 0,""!==(null!=b?b:"")?"-padding-bottom:".concat(b):void 0,""!==(null!=m?m:"")?"-padding-left:".concat(m):void 0,j?"-shadow":void 0,""!==(null!=w?w:"")?"-position:".concat(w):void 0,""!==(null!=F?F:"")?"-mix-blend-mode:".concat(F):void 0,""!==(null!=C?C:"")?"-overflow:".concat(C):void 0,E?"-progressive-backdrop-filter":void 0].filter(Boolean).join(" "),style:R},W),W.children)};
+"use strict";var o=require("react");function t(){return t=Object.assign?Object.assign.bind():function(o){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var e in r)({}).hasOwnProperty.call(r,e)&&(o[e]=r[e])}return o},t.apply(null,arguments)}function r(o){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},r(o)}function e(o){var t=function(o,t){if("object"!=r(o)||!o)return o;var e=o[Symbol.toPrimitive];if(void 0!==e){var n=e.call(o,t);if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(o)}(o,"string");return"symbol"==r(t)?t:t+""}function n(o,t,r){return(t=e(t))in o?Object.defineProperty(o,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):o[t]=r,o}var i=["backgroundColor","borderColor","borderRadius","borderWidth","maxHeight","minHeight","maxWidth","color","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","gap","alignContent","containerType","justifyItems","shadow","position","top","right","bottom","left","zIndex","mixBlendMode","overflow","backdropFilter","progressiveBackdropFilter","progressiveBackdropFilterAngle","progressiveBackdropFilterStart","style"];function d(o,t){var r=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);t&&(e=e.filter(function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable})),r.push.apply(r,e)}return r}function a(o){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?d(Object(r),!0).forEach(function(t){n(o,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(r)):d(Object(r)).forEach(function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(r,t))})}return o}exports.Decorator=function(r){var e=r.backgroundColor,n=r.borderColor,d=r.borderRadius,l=r.borderWidth,c=r.maxHeight,u=r.minHeight,p=r.maxWidth,s=r.color,v=r.padding,g=r.paddingTop,f=r.paddingRight,b=r.paddingBottom,y=r.paddingLeft,m=r.gap,h=r.alignContent,O=r.containerType,j=r.justifyItems,w=r.shadow,k=r.position,x=r.top,P=r.right,S=r.bottom,B=r.left,F=r.zIndex,C=r.mixBlendMode,D=r.overflow,E=r.backdropFilter,I=r.progressiveBackdropFilter,T=r.progressiveBackdropFilterAngle,H=r.progressiveBackdropFilterStart,R=r.style,W=function(o,t){if(null==o)return{};var r,e,n=function(o,t){if(null==o)return{};var r={};for(var e in o)if({}.hasOwnProperty.call(o,e)){if(-1!==t.indexOf(e))continue;r[e]=o[e]}return r}(o,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(o);for(e=0;e<i.length;e++)r=i[e],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(o,r)&&(n[r]=o[r])}return n}(r,i);return R=a(a({},R),{},{"--unitone--background-color":""!==e?e:void 0,"--unitone--border-color":""!==n?n:void 0,"--unitone--border-radius":""!==d?d:void 0,"--unitone--border-width":""!==l?l:void 0,"--unitone--max-height":""!==c?c:void 0,"--unitone--min-height":""!==u?u:void 0,"--unitone--max-width":""!==p?p:void 0,"--unitone--color":""!==s?s:void 0,"--unitone--top":""!==x?x:void 0,"--unitone--right":""!==P?P:void 0,"--unitone--bottom":""!==S?S:void 0,"--unitone--left":""!==B?B:void 0,"--unitone--z-index":""!==F?F:void 0,"--unitone--backdrop-filter":""!==E?E:void 0,"--unitone--progressive-backdrop-filter-angle":I&&""!==T?T:void 0,"--unitone--progressive-backdrop-filter-start":H&&""!==H?H:void 0}),o.createElement("div",t({"data-unitone-layout":["decorator",""!==(null!=m?m:"")?"-gap:".concat(m):void 0,""!==(null!=h?h:"")?"-align-content:".concat(h):void 0,""!==(null!=O?O:"")?"-container-type:".concat(O):void 0,""!==(null!=j?j:"")?"-justify-items:".concat(j):void 0,""!==(null!=v?v:"")?"-padding:".concat(v):void 0,""!==(null!=g?g:"")?"-padding-top:".concat(g):void 0,""!==(null!=f?f:"")?"-padding-right:".concat(f):void 0,""!==(null!=b?b:"")?"-padding-bottom:".concat(b):void 0,""!==(null!=y?y:"")?"-padding-left:".concat(y):void 0,w?"-shadow":void 0,""!==(null!=k?k:"")?"-position:".concat(k):void 0,""!==(null!=C?C:"")?"-mix-blend-mode:".concat(C):void 0,""!==(null!=D?D:"")?"-overflow:".concat(D):void 0,I?"-progressive-backdrop-filter":void 0].filter(Boolean).join(" "),style:R},W),W.children)};

package/dist/layout-primitives/frame/react.js

@@ -1 +1 @@
-"use strict";var r=require("react");function t(){return t=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)({}).hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},t.apply(null,arguments)}function e(r){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},e(r)}function n(r){var t=function(r,t){if("object"!=e(r)||!r)return r;var n=r[Symbol.toPrimitive];if(void 0!==n){var o=n.call(r,t);if("object"!=e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(r)}(r,"string");return"symbol"==e(t)?t:t+""}function o(r,t,e){return(t=n(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}var i=["ratio","switchRatio","style"];function c(r,t){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})),e.push.apply(e,n)}return e}function u(r){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?c(Object(e),!0).forEach(function(t){o(r,t,e[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):c(Object(e)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})}return r}exports.Frame=function(e){var n=e.ratio,o=e.switchRatio,c=e.style,a=function(r,t){if(null==r)return{};var e,n,o=function(r,t){if(null==r)return{};var e={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==t.indexOf(n))continue;e[n]=r[n]}return e}(r,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)e=i[n],-1===t.indexOf(e)&&{}.propertyIsEnumerable.call(r,e)&&(o[e]=r[e])}return o}(e,i);return c=u(u({},c),{},{"--unitone--ratio":""!==n?n:void 0}),r.createElement("div",t({"data-unitone-layout":["frame",o?"-switch":void 0].filter(Boolean).join(" "),style:c},a),a.children)};
+"use strict";var r=require("react");function t(){return t=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)({}).hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},t.apply(null,arguments)}function e(r){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},e(r)}function n(r){var t=function(r,t){if("object"!=e(r)||!r)return r;var n=r[Symbol.toPrimitive];if(void 0!==n){var o=n.call(r,t);if("object"!=e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(r)}(r,"string");return"symbol"==e(t)?t:t+""}function o(r,t,e){return(t=n(t))in r?Object.defineProperty(r,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[t]=e,r}var i=["ratio","switchRatio","queryContext","style"];function c(r,t){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})),e.push.apply(e,n)}return e}function u(r){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?c(Object(e),!0).forEach(function(t){o(r,t,e[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):c(Object(e)).forEach(function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})}return r}exports.Frame=function(e){var n=e.ratio,o=e.switchRatio,c=e.queryContext,a=e.style,l=function(r,t){if(null==r)return{};var e,n,o=function(r,t){if(null==r)return{};var e={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==t.indexOf(n))continue;e[n]=r[n]}return e}(r,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)e=i[n],-1===t.indexOf(e)&&{}.propertyIsEnumerable.call(r,e)&&(o[e]=r[e])}return o}(e,i);return a=u(u({},a),{},{"--unitone--ratio":""!==n?n:void 0}),r.createElement("div",t({"data-unitone-layout":["frame",o?"-switch":void 0,c?"@".concat(c):void 0].filter(Boolean).join(" "),style:a},l),l.children)};

package/dist/layout-primitives/layers/react.js

@@ -1 +1 @@
-"use strict";var r=require("react");function e(){return e=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)({}).hasOwnProperty.call(t,n)&&(r[n]=t[n])}return r},e.apply(null,arguments)}function t(r){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},t(r)}function n(r){var e=function(r,e){if("object"!=t(r)||!r)return r;var n=r[Symbol.toPrimitive];if(void 0!==n){var o=n.call(r,e);if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(r)}(r,"string");return"symbol"==t(e)?e:e+""}function o(r,e,t){return(e=n(e))in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function i(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==e.indexOf(n))continue;t[n]=r[n]}return t}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],-1===e.indexOf(t)&&{}.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}var l=["cover","fill","fixed","applyBlur","blur","portrait","gap","rowGap","columnGap","minHeight","columns","rows","rowTrackSize","style"],u=["alignSelf","justifySelf","gridColumn","gridRow","mixBlendMode","maxWidth","style"];function a(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})),t.push.apply(t,n)}return t}function c(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach(function(e){o(r,e,t[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))})}return r}exports.Layer=function(t){var n=t.alignSelf,o=t.justifySelf,l=t.gridColumn,a=t.gridRow,f=t.mixBlendMode,y=t.maxWidth,p=t.style,s=i(t,u);return p=c(c({},p),{},{"--unitone--grid-column":""!==l?l:void 0,"--unitone--grid-row":""!==a?a:void 0,"--unitone--max-width":""!==y?y:void 0}),r.createElement("div",e({"data-unitone-layout":["layer",""!==(null!=n?n:"")?"-align-self:".concat(n):void 0,""!==(null!=o?o:"")?"-justify-self:".concat(o):void 0,""!==(null!=f?f:"")?"-mix-blend-mode:".concat(f):void 0].filter(Boolean).join(" "),style:p},s),s.children)},exports.Layers=function(t){var n=t.cover,o=t.fill,u=t.fixed,a=t.applyBlur,f=t.blur,y=t.portrait,p=t.gap,s=t.rowGap,d=t.columnGap,v=t.minHeight,b=t.columns,m=t.rows,g=t.rowTrackSize,O=t.style,w=i(t,l);return O=c(c({},O),{},{"--unitone--min-height":""!==v?v:void 0,"--unitone--columns":""!==b?b:void 0,"--unitone--rows":""!==m?m:void 0,"--unitone--row-track-size":""!==g?g:void 0,"--unitone--blur":""!==f?f:void 0}),r.createElement("div",e({"data-unitone-layout":["layers",n?"-cover":void 0,o?"-fill":void 0,u?"-fixed":void 0,a?"-blur":void 0,y?"-portrait":void 0,""!==(null!=p?p:"")?"-gap:".concat(p):void 0,""!==(null!=d?d:"")?"-column-gap:".concat(d):void 0,""!==(null!=s?s:"")?"-row-gap:".concat(s):void 0].filter(Boolean).join(" "),style:O},w),w.children)};
+"use strict";var r=require("react");function e(){return e=Object.assign?Object.assign.bind():function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)({}).hasOwnProperty.call(t,n)&&(r[n]=t[n])}return r},e.apply(null,arguments)}function t(r){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(r){return typeof r}:function(r){return r&&"function"==typeof Symbol&&r.constructor===Symbol&&r!==Symbol.prototype?"symbol":typeof r},t(r)}function n(r){var e=function(r,e){if("object"!=t(r)||!r)return r;var n=r[Symbol.toPrimitive];if(void 0!==n){var o=n.call(r,e);if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(r)}(r,"string");return"symbol"==t(e)?e:e+""}function o(r,e,t){return(e=n(e))in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function i(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==e.indexOf(n))continue;t[n]=r[n]}return t}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],-1===e.indexOf(t)&&{}.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}var l=["cover","fill","fixed","applyBlur","blur","portrait","gap","rowGap","columnGap","minHeight","columns","rows","rowTrackSize","queryContext","style"],u=["alignSelf","justifySelf","gridColumn","gridRow","mixBlendMode","maxWidth","style"];function a(r,e){var t=Object.keys(r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})),t.push.apply(t,n)}return t}function c(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?a(Object(t),!0).forEach(function(e){o(r,e,t[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(t,e))})}return r}exports.Layer=function(t){var n=t.alignSelf,o=t.justifySelf,l=t.gridColumn,a=t.gridRow,f=t.mixBlendMode,y=t.maxWidth,d=t.style,p=i(t,u);return d=c(c({},d),{},{"--unitone--grid-column":""!==l?l:void 0,"--unitone--grid-row":""!==a?a:void 0,"--unitone--max-width":""!==y?y:void 0}),r.createElement("div",e({"data-unitone-layout":["layer",""!==(null!=n?n:"")?"-align-self:".concat(n):void 0,""!==(null!=o?o:"")?"-justify-self:".concat(o):void 0,""!==(null!=f?f:"")?"-mix-blend-mode:".concat(f):void 0].filter(Boolean).join(" "),style:d},p),p.children)},exports.Layers=function(t){var n=t.cover,o=t.fill,u=t.fixed,a=t.applyBlur,f=t.blur,y=t.portrait,d=t.gap,p=t.rowGap,s=t.columnGap,v=t.minHeight,b=t.columns,m=t.rows,g=t.rowTrackSize,O=t.queryContext,w=t.style,j=i(t,l);return w=c(c({},w),{},{"--unitone--min-height":""!==v?v:void 0,"--unitone--columns":""!==b?b:void 0,"--unitone--rows":""!==m?m:void 0,"--unitone--row-track-size":""!==g?g:void 0,"--unitone--blur":""!==f?f:void 0}),r.createElement("div",e({"data-unitone-layout":["layers",n?"-cover":void 0,o?"-fill":void 0,u?"-fixed":void 0,a?"-blur":void 0,y?"-portrait":void 0,""!==(null!=d?d:"")?"-gap:".concat(d):void 0,""!==(null!=s?s:"")?"-column-gap:".concat(s):void 0,""!==(null!=p?p:"")?"-row-gap:".concat(p):void 0,O?"@".concat(O):void 0].filter(Boolean).join(" "),style:w},j),j.children)};

package/dist/layout-primitives/vertical-writing/react.js

@@ -1 +1 @@
-"use strict";var e=require("react");function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function n(e,n){if(e){if("string"==typeof e)return t(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}function r(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||n(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,l=[],u=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t);else for(;!(u=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,i=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return l}}(e,t)||n(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return a(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,l=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return l=e.done,e},e:function(e){u=!0,o=e},f:function(){try{l||null==n.return||n.return()}finally{if(u)throw o}}}}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var l="data-unitone-layout",u="".concat(200,"px 0px"),c=function(e,t){return e.filter(function(e){return!t.includes(e)})},d=function(e,t){var n,r=t.filter(Boolean).join(" ");(null!==(n=e.getAttribute(l))&&void 0!==n?n:"")!==r&&e.setAttribute(l,r)},s=function(e,t){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r.getValue,a=r.delay,l=!0,u=new ResizeObserver(h(function(e){var r,a=o(e);try{for(a.s();!(r=a.n()).done;){var u=r.value,c=null==i?void 0:i(u);l?(n=c,l=!1):void 0!==c&&c===n||(t(u.target,u),n=c)}}catch(e){a.e(e)}finally{a.f()}},void 0===a?250:a));return u.observe(e),u},f=function(e,t,n){var r=new MutationObserver(function(t){requestAnimationFrame(function(){null!=e&&e.isConnected&&n(t)})});return r.observe(e,t),r},v=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getResizeValue,a=n.delay,l=void 0===a?250:a,c=n.observeResize,d=void 0===c||c,v=n.observeIntersection,y=void 0!==v&&v,p=n.observeDirectChildrenResize,g=void 0!==p&&p,m=n.targetMutation,w=n.directChildMutation,O=y&&"undefined"!=typeof IntersectionObserver,A=!O||b(e),S=O&&!A,E=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e;null!=n&&n.isConnected&&(!O||A?(S=!1,t(n)):S=!0)},C=function(e,t){var n,r=0;return function(){var i,o;null!==(o=n=null==e||null===(i=e.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==o&&o.requestAnimationFrame?r||(r=n.requestAnimationFrame(function(){r=0,n=null,null!=e&&e.isConnected&&t(e)})):t(e)}}(e,E),j=function(){null!=e&&e.isConnected&&(!O||A?(S=!0,C()):S=!0)},z=function(){},N=d?g?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getValue,i=n.delay,a=void 0===i?250:i,l=n.onChildList,u=new WeakMap,c=new Set,d=new ResizeObserver(h(function(n){var i,a=!1,l=o(n);try{for(l.s();!(i=l.n()).done;){var c=i.value,d=null==r?void 0:r(c);u.has(c.target)?(void 0!==d&&d===u.get(c.target)||(a=!0),u.set(c.target,d)):u.set(c.target,d)}}catch(e){l.e(e)}finally{l.f()}a&&t(e)},a)),s=function(){var t;Array.from(c).forEach(function(t){t.parentElement!==e&&(d.unobserve(t),c.delete(t),u.delete(t))}),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){c.has(e)||(d.observe(e),c.add(e))})};d.observe(e),s();var v=f(e,{childList:!0},function(n){n.some(function(e){return"childList"===e.type})&&(s(),null==l||l(n),t(e))});return{resizeObserver:d,mutationObserver:v}}(e,j,{getValue:r,delay:l,onChildList:function(){z()}}):{resizeObserver:s(e,j,{getValue:r,delay:l})}:{mutationObserver:null};O&&function(e,t){var n=new IntersectionObserver(function(e){var n=i(e,1)[0];n&&t(n)},{rootMargin:u});n.observe(e)}(e,function(e){(A=e.isIntersecting)&&S&&j()}),null!=m&&m.options&&f(e,m.options,function(e){var t,n;(null!==(t=null===(n=m.shouldApply)||void 0===n?void 0:n.call(m,e))&&void 0!==t?t:0<e.length)&&j()});var M=null!=w&&w.attributeFilter&&w.shouldApply?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.attributeFilter,i=n.shouldApply,o=n.attributeOldValue,a=void 0===o||o,l=new MutationObserver(function(n){requestAnimationFrame(function(){null!=e&&e.isConnected&&n.some(function(t){return"attributes"===t.type&&t.target.parentElement===e&&i(t)})&&t(e)})}),u=function(){var t;l.disconnect(),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){l.observe(e,{attributes:!0,attributeFilter:r,attributeOldValue:a})})};return u(),{observer:l,syncObservedChildren:u}}(e,j,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;M&&(z=M.syncObservedChildren),!N.mutationObserver&&M&&f(e,{childList:!0},function(e){e.some(function(e){return"childList"===e.type})&&(z(),j())}),O&&!A||E(e)},y=function(e){var t;return parseInt(null===(t=e.contentRect)||void 0===t?void 0:t.width)},b=function(e){var t;if(!function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length}(e))return!1;var n=null==e||null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView;if(!n)return!0;var r=e.getBoundingClientRect(),i=n.innerWidth,o=n.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i};function h(e,t){var n;return function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var a=this;clearTimeout(n),n=setTimeout(function(){e.apply(a,i)},t)}}var p=function(e){return e.some(function(e){return"attributes"===e.type||"childList"===e.type&&[].concat(r(e.addedNodes),r(e.removedNodes)).some(function(e){return!function(e){return(null==e?void 0:e.nodeType)===Node.ELEMENT_NODE&&["vertical-writing__thresholder","vertical-writing:initialized","vertical-writing:safari"].includes(e.getAttribute("data-unitone-layout"))}(e)})})},g=function(e){if(e){var t,n,i=(null!==(t=e.getAttribute(l))&&void 0!==t?t:"").split(/\s+/).filter(Boolean),o=c(i,["vertical-writing:safari","-force-switch"]),a=c(i,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(d(e,o),Array.from(e.children).reverse().some(function(e){if(!["absolute","fixed"].includes(getComputedStyle(e).position)&&"none"!==getComputedStyle(e).display)return n=e,!0}),n){var u=getComputedStyle(e),s=String(u.getPropertyValue("--unitone--threshold")).trim(),f=!1;if(s){var v=e.ownerDocument.createElement("div");v.setAttribute(l,"vertical-writing__thresholder"),e.appendChild(v),f=v.offsetWidth>=e.offsetWidth,v.remove()}if(f)a.push("-force-switch");else e.getBoundingClientRect().left>n.getBoundingClientRect().left&&a.push("vertical-writing:safari");d(e,[].concat(r(a),["vertical-writing:initialized"])),requestAnimationFrame(function(){var t;if(null!=e&&e.isConnected&&null!==(t=e.parentNode)&&void 0!==t&&t.style){if(f)return void(e.parentNode.style.height="");var r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),o=r.top+r.height,a=i.top+i.height;e.parentNode.style.height=o!==a?"".concat(Math.ceil(a-r.top),"px"):""}})}else d(e,[].concat(r(a),["vertical-writing:initialized"]))}},m=Symbol.for("@inc2734/unitone-css/layout-initializers"),w=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[m]||(globalThis[m]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[m])},O=function(e,t){var n,r;if(e.enabled()&&(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE){var i=new Set;null!==(n=t.matches)&&void 0!==n&&n.call(t,e.selector)&&i.add(t),null===(r=t.querySelectorAll)||void 0===r||r.call(t,e.selector).forEach(function(e){i.add(e)}),i.forEach(function(t){e.initialized.has(t)||(e.initialize(t),e.initialized.add(t))})}},A=function(e){var t=w();t&&t.initializers.forEach(function(t){O(t,e)})},S=function(){var e=w();e&&(e.pendingNodes.forEach(function(e){A(e)}),e.pendingNodes.clear(),e.rafId=0)},E=function(){var e=w();e&&!e.observer&&document.body&&(A(document.body),e.observer=new MutationObserver(function(t){t.forEach(function(t){t.addedNodes.forEach(function(t){(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE&&e.pendingNodes.add(t)})}),!e.rafId&&0<e.pendingNodes.size&&(e.rafId=requestAnimationFrame(S))}),e.observer.observe(document.body,{childList:!0,subtree:!0}))};function C(){return C=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},C.apply(null,arguments)}function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}function z(e){var t=function(e,t){if("object"!=j(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=j(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==j(t)?t:t+""}function N(e,t,n){return(t=z(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}!function(e){var t=e.key,n=e.selector,r=e.initialize,i=e.enabled,o=void 0===i?function(){return!0}:i,a=w();if(a&&!a.initializers.has(t)){var l={selector:n,initialize:r,enabled:o,initialized:new WeakSet};a.initializers.set(t,l),a.observer?O(l,document.body):"loading"!==document.readyState?E():a.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",E,{once:!0}),a.hasDOMContentLoadedListener=!0)}}({key:"layout-primitives/vertical-writing",selector:'[data-unitone-layout~="vertical-writing"]',initialize:function(e){v(e,function(e){var t;null!==(t=e.parentNode)&&void 0!==t&&t.style&&(e.parentNode.style.height=""),g(e)},{getResizeValue:y,observeIntersection:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0},shouldApply:p}})}});var M=["textOrientation","gap","maxHeight","switchWritingMode","threshold","style"];function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach(function(t){N(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}exports.VerticalWriting=function(t){var n=t.textOrientation,r=t.gap,i=t.maxHeight,o=t.switchWritingMode,a=t.threshold,l=t.style,u=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(t,M);return l=I(I({},l),{},{"--unitone--max-height":""!==i?i:void 0,"--unitone--threshold":""!==a?a:void 0}),e.createElement("div",{"data-unitone-layout":"vertical-writing-wrapper"},e.createElement("div",C({"data-unitone-layout":["vertical-writing",""!==(null!=n?n:"")?"-text-orientation:".concat(n):void 0,""!==(null!=r?r:"")?"-gap:".concat(r):void 0,o?"-switch":void 0].filter(Boolean).join(" "),style:l},u),u.children))};
+"use strict";var e=require("react");function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function n(e,n){if(e){if("string"==typeof e)return t(e,n);var r={}.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}function r(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||n(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,a,l=[],u=!0,c=!1;try{if(o=(n=n.call(e)).next,0===t);else for(;!(u=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,i=e}finally{try{if(!u&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw i}}return l}}(e,t)||n(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return a(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}(e))||t){n&&(e=n);var r=0,i=function(){};return{s:i,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,l=!0,u=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return l=e.done,e},e:function(e){u=!0,o=e},f:function(){try{l||null==n.return||n.return()}finally{if(u)throw o}}}}function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var l="data-unitone-layout",u="".concat(200,"px 0px"),c=function(e,t){return e.filter(function(e){return!t.includes(e)})},d=function(e,t){var n,r=t.filter(Boolean).join(" ");(null!==(n=e.getAttribute(l))&&void 0!==n?n:"")!==r&&e.setAttribute(l,r)},s=function(e,t){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r.getValue,a=r.delay,l=!0,u=new ResizeObserver(h(function(e){var r,a=o(e);try{for(a.s();!(r=a.n()).done;){var u=r.value,c=null==i?void 0:i(u);l?(n=c,l=!1):void 0!==c&&c===n||(t(u.target,u),n=c)}}catch(e){a.e(e)}finally{a.f()}},void 0===a?250:a));return u.observe(e),u},f=function(e,t,n){var r=new MutationObserver(function(t){requestAnimationFrame(function(){null!=e&&e.isConnected&&n(t)})});return r.observe(e,t),r},v=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getResizeValue,a=n.delay,l=void 0===a?250:a,c=n.observeResize,d=void 0===c||c,v=n.observeIntersection,y=void 0!==v&&v,p=n.observeDirectChildrenResize,g=void 0!==p&&p,m=n.targetMutation,w=n.directChildMutation,O=y&&"undefined"!=typeof IntersectionObserver,A=!O||b(e),S=O&&!A,E=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e;null!=n&&n.isConnected&&(!O||A?(S=!1,t(n)):S=!0)},C=function(e,t){var n,r=0;return function(){var i,o;null!==(o=n=null==e||null===(i=e.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==o&&o.requestAnimationFrame?r||(r=n.requestAnimationFrame(function(){r=0,n=null,null!=e&&e.isConnected&&t(e)})):t(e)}}(e,E),j=function(){null!=e&&e.isConnected&&(!O||A?(S=!0,C()):S=!0)},z=function(){},N=d?g?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getValue,i=n.delay,a=void 0===i?250:i,l=n.onChildList,u=new WeakMap,c=new Set,d=new ResizeObserver(h(function(n){var i,a=!1,l=o(n);try{for(l.s();!(i=l.n()).done;){var c=i.value,d=null==r?void 0:r(c);u.has(c.target)?(void 0!==d&&d===u.get(c.target)||(a=!0),u.set(c.target,d)):u.set(c.target,d)}}catch(e){l.e(e)}finally{l.f()}a&&t(e)},a)),s=function(){var t;Array.from(c).forEach(function(t){t.parentElement!==e&&(d.unobserve(t),c.delete(t),u.delete(t))}),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){c.has(e)||(d.observe(e),c.add(e))})};d.observe(e),s();var v=f(e,{childList:!0},function(n){n.some(function(e){return"childList"===e.type})&&(s(),null==l||l(n),t(e))});return{resizeObserver:d,mutationObserver:v}}(e,j,{getValue:r,delay:l,onChildList:function(){z()}}):{resizeObserver:s(e,j,{getValue:r,delay:l})}:{mutationObserver:null};O&&function(e,t){var n=new IntersectionObserver(function(e){var n=i(e,1)[0];n&&t(n)},{rootMargin:u});n.observe(e)}(e,function(e){(A=e.isIntersecting)&&S&&j()}),null!=m&&m.options&&f(e,m.options,function(e){var t,n;(null!==(t=null===(n=m.shouldApply)||void 0===n?void 0:n.call(m,e))&&void 0!==t?t:0<e.length)&&j()});var M=null!=w&&w.attributeFilter&&w.shouldApply?function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.attributeFilter,i=n.shouldApply,o=n.attributeOldValue,a=void 0===o||o,l=new MutationObserver(function(n){requestAnimationFrame(function(){null!=e&&e.isConnected&&n.some(function(t){return"attributes"===t.type&&t.target.parentElement===e&&i(t)})&&t(e)})}),u=function(){var t;l.disconnect(),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){l.observe(e,{attributes:!0,attributeFilter:r,attributeOldValue:a})})};return u(),{observer:l,syncObservedChildren:u}}(e,j,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;M&&(z=M.syncObservedChildren),!N.mutationObserver&&M&&f(e,{childList:!0},function(e){e.some(function(e){return"childList"===e.type})&&(z(),j())}),O&&!A||E(e)},y=function(e){var t;return parseInt(null===(t=e.contentRect)||void 0===t?void 0:t.width)},b=function(e){var t;if(!function(e){return!(null==e||!e.isConnected)&&0<e.getClientRects().length}(e))return!1;var n=null==e||null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView;if(!n)return!0;var r=e.getBoundingClientRect(),i=n.innerWidth,o=n.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i};function h(e,t){var n;return function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var a=this;clearTimeout(n),n=setTimeout(function(){e.apply(a,i)},t)}}var p=function(e){return e.some(function(e){return"attributes"===e.type||"childList"===e.type&&[].concat(r(e.addedNodes),r(e.removedNodes)).some(function(e){return!function(e){return(null==e?void 0:e.nodeType)===Node.ELEMENT_NODE&&["vertical-writing__thresholder","vertical-writing:initialized","vertical-writing:safari"].includes(e.getAttribute("data-unitone-layout"))}(e)})})},g=function(e){if(e){var t,n,i=(null!==(t=e.getAttribute(l))&&void 0!==t?t:"").split(/\s+/).filter(Boolean),o=c(i,["vertical-writing:safari","-force-switch"]),a=c(i,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(d(e,o),Array.from(e.children).reverse().some(function(e){if(!["absolute","fixed"].includes(getComputedStyle(e).position)&&"none"!==getComputedStyle(e).display)return n=e,!0}),n){var u=getComputedStyle(e),s=String(u.getPropertyValue("--unitone--threshold")).trim(),f=!1;if(s){var v=e.ownerDocument.createElement("div");v.setAttribute(l,"vertical-writing__thresholder"),e.appendChild(v),f=v.offsetWidth>=e.offsetWidth,v.remove()}if(f)a.push("-force-switch");else e.getBoundingClientRect().left>n.getBoundingClientRect().left&&a.push("vertical-writing:safari");d(e,[].concat(r(a),["vertical-writing:initialized"])),requestAnimationFrame(function(){var t;if(null!=e&&e.isConnected&&null!==(t=e.parentNode)&&void 0!==t&&t.style){if(f)return void(e.parentNode.style.height="");var r=e.getBoundingClientRect(),i=n.getBoundingClientRect(),o=r.top+r.height,a=i.top+i.height;e.parentNode.style.height=o!==a?"".concat(Math.ceil(a-r.top),"px"):""}})}else d(e,[].concat(r(a),["vertical-writing:initialized"]))}},m=Symbol.for("@inc2734/unitone-css/layout-initializers"),w=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[m]||(globalThis[m]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[m])},O=function(e,t){var n,r;if(e.enabled()&&(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE){var i=new Set;null!==(n=t.matches)&&void 0!==n&&n.call(t,e.selector)&&i.add(t),null===(r=t.querySelectorAll)||void 0===r||r.call(t,e.selector).forEach(function(e){i.add(e)}),i.forEach(function(t){e.initialized.has(t)||(e.initialize(t),e.initialized.add(t))})}},A=function(e){var t=w();t&&t.initializers.forEach(function(t){O(t,e)})},S=function(){var e=w();e&&(e.pendingNodes.forEach(function(e){A(e)}),e.pendingNodes.clear(),e.rafId=0)},E=function(){var e=w();e&&!e.observer&&document.body&&(A(document.body),e.observer=new MutationObserver(function(t){t.forEach(function(t){t.addedNodes.forEach(function(t){(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE&&e.pendingNodes.add(t)})}),!e.rafId&&0<e.pendingNodes.size&&(e.rafId=requestAnimationFrame(S))}),e.observer.observe(document.body,{childList:!0,subtree:!0}))};function C(){return C=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},C.apply(null,arguments)}function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}function z(e){var t=function(e,t){if("object"!=j(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t);if("object"!=j(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==j(t)?t:t+""}function N(e,t,n){return(t=z(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}!function(e){var t=e.key,n=e.selector,r=e.initialize,i=e.enabled,o=void 0===i?function(){return!0}:i,a=w();if(a&&!a.initializers.has(t)){var l={selector:n,initialize:r,enabled:o,initialized:new WeakSet};a.initializers.set(t,l),a.observer?O(l,document.body):"loading"!==document.readyState?E():a.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",E,{once:!0}),a.hasDOMContentLoadedListener=!0)}}({key:"layout-primitives/vertical-writing",selector:'[data-unitone-layout~="vertical-writing"]',initialize:function(e){v(e,function(e){var t;null!==(t=e.parentNode)&&void 0!==t&&t.style&&(e.parentNode.style.height=""),g(e)},{getResizeValue:y,observeIntersection:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0},shouldApply:p}})}});var M=["textOrientation","gap","maxHeight","switchWritingMode","threshold","style","queryContext"];function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function I(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach(function(t){N(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}exports.VerticalWriting=function(t){var n=t.textOrientation,r=t.gap,i=t.maxHeight,o=t.switchWritingMode,a=t.threshold,l=t.style,u=t.queryContext,c=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(t,M);return l=I(I({},l),{},{"--unitone--max-height":""!==i?i:void 0,"--unitone--threshold":""!==a?a:void 0}),e.createElement("div",{"data-unitone-layout":"vertical-writing-wrapper"},e.createElement("div",C({"data-unitone-layout":["vertical-writing",""!==(null!=n?n:"")?"-text-orientation:".concat(n):void 0,""!==(null!=r?r:"")?"-gap:".concat(r):void 0,o?"-switch":void 0,u?"@".concat(u):void 0].filter(Boolean).join(" "),style:l},c),c.children))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inc2734/unitone-css",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
   "engines": {
     "node": ">=20.10.0",

package/src/behaviors/_container-type.scss

@@ -0,0 +1,11 @@
+$_values: (
+  inline-size: inline-size,
+);
+
+@mixin container-type() {
+  @each $key, $value in $_values {
+    [data-unitone-layout~="-container-type\:#{ $key }"] {
+      --unitone--container-type: #{ $value } !important;
+    }
+  }
+}

package/src/behaviors/_index.scss

@@ -5,6 +5,7 @@
 @use './auto-repeat';
 @use './auto-phrase';
 @use './background-clip';
+@use './container-type';
 @use './divider';
 @use './font-size';
 @use './gap';
@@ -28,6 +29,7 @@
 @include auto-repeat.auto-repeat();
 @include auto-phrase.auto-phrase();
 @include background-clip.background-clip();
+@include container-type.container-type();
 @include divider.divider();
 @include font-size.font-size();
 @include gap.gap();

package/src/layout-primitives/decorator/_index.scss

@@ -32,6 +32,8 @@
   --unitone--left: initial;
   --unitone--z-index: initial;
 
+  --unitone--container-type: initial;
+
   appearance: none;
   border: var(--unitone--border-width) solid var(--unitone--border-color);
   border-radius: var(--unitone--border-radius);
@@ -54,6 +56,7 @@
   bottom: var(--unitone--bottom);
   left: var(--unitone--left);
   z-index: var(--unitone--z-index);
+  container-type: var(--unitone--container-type);
 
   // There are primitives that affect the min-width of child elements,
   // so we will increase the specificity a little to avoid this effect.

package/src/layout-primitives/decorator/index.jsx

@@ -16,6 +16,7 @@ export const Decorator = ({
   paddingLeft,
   gap,
   alignContent,
+  containerType,
   justifyItems,
   shadow,
   position,
@@ -65,6 +66,7 @@ export const Decorator = ({
         'decorator',
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (alignContent ?? '') ? `-align-content:${alignContent}` : undefined,
+        '' !== (containerType ?? '') ? `-container-type:${containerType}` : undefined,
         '' !== (justifyItems ?? '') ? `-justify-items:${justifyItems}` : undefined,
         '' !== (padding ?? '') ? `-padding:${padding}` : undefined,
         '' !== (paddingTop ?? '') ? `-padding-top:${paddingTop}` : undefined,

package/src/layout-primitives/frame/_index.scss

@@ -10,8 +10,10 @@
     width: 100%;
   }
 
-  img,
-  video {
+  :is(
+    img,
+    video
+  ) {
     height: 100% !important;
     width: 100% !important;
     max-height: 100% !important;
@@ -22,9 +24,17 @@
     vertical-align: top;
   }
 
-  @media (orientation: portrait) and (max-width: 599px) {
-    &[data-unitone-layout~="-switch"] {
-      aspect-ratio: calc(1 / (var(--unitone--ratio))) !important;
+  &[data-unitone-layout~="-switch"] {
+    &:where(:not([data-unitone-layout~="@container"])) {
+      @media (orientation: portrait) and (width < 600px) {
+        aspect-ratio: calc(1 / (var(--unitone--ratio))) !important;
+      }
+    }
+
+    &:where([data-unitone-layout~="@container"]) {
+      @container (width < 600px) {
+        aspect-ratio: calc(1 / (var(--unitone--ratio))) !important;
+      }
     }
   }
 }

package/src/layout-primitives/frame/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const Frame = ({ ratio, switchRatio, style, ...props }) => {
+export const Frame = ({ ratio, switchRatio, queryContext, style, ...props }) => {
   style = {
     ...style,
     '--unitone--ratio': '' !== ratio ? ratio : undefined,
@@ -8,7 +8,13 @@ export const Frame = ({ ratio, switchRatio, style, ...props }) => {
 
   return (
     <div
-      data-unitone-layout={['frame', switchRatio ? `-switch` : undefined].filter(Boolean).join(' ')}
+      data-unitone-layout={[
+        'frame',
+        switchRatio ? `-switch` : undefined,
+        queryContext ? `@${queryContext}` : undefined,
+      ]
+        .filter(Boolean)
+        .join(' ')}
       style={style}
       {...props}
     >

package/src/layout-primitives/layers/_index.scss

@@ -18,10 +18,19 @@
   row-gap: var(--unitone--row-gap);
   min-height: var(--unitone--min-height);
 
-  @media (orientation: portrait) and (max-width: 599px) {
-    &[data-unitone-layout~="-portrait"] {
-      --unitone--columns: var(--unitone--grid-rows);
-      --unitone--rows: var(--unitone--grid-columns);
+  &[data-unitone-layout~="-portrait"] {
+    &:where(:not([data-unitone-layout~="@container"])) {
+      @media (orientation: portrait) and (width < 600px) {
+        --unitone--columns: var(--unitone--grid-rows);
+        --unitone--rows: var(--unitone--grid-columns);
+      }
+    }
+
+    &:where([data-unitone-layout~="@container"]) {
+      @container (width < 600px) {
+        --unitone--columns: var(--unitone--grid-rows);
+        --unitone--rows: var(--unitone--grid-columns);
+      }
     }
   }
 

package/src/layout-primitives/layers/index.jsx

@@ -14,6 +14,7 @@ export const Layers = ({
   columns,
   rows,
   rowTrackSize,
+  queryContext,
   style,
   ...props
 }) => {
@@ -38,6 +39,7 @@ export const Layers = ({
         '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
         '' !== (columnGap ?? '') ? `-column-gap:${columnGap}` : undefined,
         '' !== (rowGap ?? '') ? `-row-gap:${rowGap}` : undefined,
+        queryContext ? `@${queryContext}` : undefined,
       ]
         .filter(Boolean)
         .join(' ')}

package/src/layout-primitives/vertical-writing/_index.scss

@@ -46,13 +46,18 @@
     }
   }
 
-  @media (orientation: portrait) and (max-width: 599px) {
-    &[data-unitone-layout~="-switch"] {
-      column-count: auto;
-      writing-mode: horizontal-tb;
+  &[data-unitone-layout~="-switch"] {
+    &:where(:not([data-unitone-layout~="@container"])) {
+      @media (orientation: portrait) and (width < 600px) {
+        column-count: auto;
+        writing-mode: horizontal-tb;
+      }
+    }
 
-      > * {
-        box-sizing: border-box;
+    &:where([data-unitone-layout~="@container"]) {
+      @container (width < 600px) {
+        column-count: auto;
+        writing-mode: horizontal-tb;
       }
     }
   }

package/src/layout-primitives/vertical-writing/index.jsx

@@ -7,6 +7,7 @@ export const VerticalWriting = ({
   switchWritingMode,
   threshold,
   style,
+  queryContext,
   ...props
 }) => {
   style = {
@@ -23,6 +24,7 @@ export const VerticalWriting = ({
           '' !== (textOrientation ?? '') ? `-text-orientation:${textOrientation}` : undefined,
           '' !== (gap ?? '') ? `-gap:${gap}` : undefined,
           switchWritingMode ? '-switch' : undefined,
+          queryContext ? `@${queryContext}` : undefined,
         ]
           .filter(Boolean)
           .join(' ')}

package/src/utilities/_container-type.scss

@@ -0,0 +1,7 @@
+@each $value in (
+  inline-size,
+) {
+  .-container-type\:#{ $value } {
+    container-type: #{ $value };
+  }
+}

package/src/utilities/_index.scss

@@ -3,6 +3,7 @@
 @use './align-self';
 @use './background-color';
 @use './color';
+@use './container-type';
 @use './display';
 @use './flex-direction';
 @use './flex-wrap';