@inc2734/unitone-css 1.1.0 → 1.2.0

package/dist/library.js

@@ -1 +1 @@
-"use strict";function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}function e(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 n(n){return function(e){if(Array.isArray(e))return t(e)}(n)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(n)||e(n)||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 r(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,i,o,l,u=[],a=!0,s=!1;try{if(o=(n=n.call(t)).next,0===e);else for(;!(a=(r=o.call(n)).done)&&(u.push(r.value),u.length!==e);a=!0);}catch(t){s=!0,i=t}finally{try{if(!a&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw i}}return u}}(t,n)||e(t,n)||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 i(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return o(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t))||e){n&&(t=n);var r=0,i=function(){};return{s:i,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},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 l,u=!0,a=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return u=t.done,t},e:function(t){a=!0,l=t},f:function(){try{u||null==n.return||n.return()}finally{if(a)throw l}}}}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}var l="data-unitone-layout",u="".concat(200,"px 0px"),a=function(t){var e;return(null!==(e=t.getAttribute(l))&&void 0!==e?e:"").split(/\s+/).filter(Boolean)},s=function(t,e){return t.filter(function(t){return!e.includes(t)})},c=function(t,e){var n,r=e.filter(Boolean).join(" ");(null!==(n=t.getAttribute(l))&&void 0!==n?n:"")!==r&&t.setAttribute(l,r)},d=function(t,e){var n,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=r.getValue,l=r.delay,u=!0,a=new ResizeObserver(b(function(t){var r,l=i(t);try{for(l.s();!(r=l.n()).done;){var a=r.value,s=null==o?void 0:o(a);u?(n=s,u=!1):void 0!==s&&s===n||(e(a.target,a),n=s)}}catch(t){l.e(t)}finally{l.f()}},void 0===l?250:l));return a.observe(t),a},f=function(t,e,n){var r=new MutationObserver(function(e){requestAnimationFrame(function(){null!=t&&t.isConnected&&n(e)})});return r.observe(t,e),r},v=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=n.getResizeValue,l=n.delay,a=void 0===l?250:l,s=n.observeResize,c=void 0===s||s,v=n.observeIntersection,p=void 0!==v&&v,y=n.observeDirectChildrenResize,h=void 0!==y&&y,m=n.targetMutation,w=n.directChildMutation,A=p&&"undefined"!=typeof IntersectionObserver,C=!A||g(t),z=A&&!C,S=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t;null!=n&&n.isConnected&&(!A||C?(z=!1,e(n)):z=!0)},O=function(t,e){var n,r=0;return function(){var i,o;null!==(o=n=null==t||null===(i=t.ownerDocument)||void 0===i?void 0:i.defaultView)&&void 0!==o&&o.requestAnimationFrame?r||(r=n.requestAnimationFrame(function(){r=0,n=null,null!=t&&t.isConnected&&e(t)})):e(t)}}(t,S),R=function(){null!=t&&t.isConnected&&(!A||C?(z=!0,O()):z=!0)},V=function(){},x=c?h?function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.getValue,o=n.delay,l=void 0===o?250:o,u=n.onChildList,a=new WeakMap,s=new Set,c=new ResizeObserver(b(function(n){var o,l=!1,u=i(n);try{for(u.s();!(o=u.n()).done;){var s=o.value,c=null==r?void 0:r(s);a.has(s.target)?(void 0!==c&&c===a.get(s.target)||(l=!0),a.set(s.target,c)):a.set(s.target,c)}}catch(t){u.e(t)}finally{u.f()}l&&e(t)},l)),d=function(){var e;Array.from(s).forEach(function(e){e.parentElement!==t&&(c.unobserve(e),s.delete(e),a.delete(e))}),Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]).forEach(function(t){s.has(t)||(c.observe(t),s.add(t))})};c.observe(t),d();var v=f(t,{childList:!0},function(n){n.some(function(t){return"childList"===t.type})&&(d(),null==u||u(n),e(t))});return{resizeObserver:c,mutationObserver:v}}(t,R,{getValue:o,delay:a,onChildList:function(){V()}}):{resizeObserver:d(t,R,{getValue:o,delay:a})}:{mutationObserver:null};A&&function(t,e){var n=new IntersectionObserver(function(t){var n=r(t,1)[0];n&&e(n)},{rootMargin:u});n.observe(t)}(t,function(t){(C=t.isIntersecting)&&z&&R()}),null!=m&&m.options&&f(t,m.options,function(t){var e,n;(null!==(e=null===(n=m.shouldApply)||void 0===n?void 0:n.call(m,t))&&void 0!==e?e:0<t.length)&&R()});var E=null!=w&&w.attributeFilter&&w.shouldApply?function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.attributeFilter,i=n.shouldApply,o=n.attributeOldValue,l=void 0===o||o,u=new MutationObserver(function(n){requestAnimationFrame(function(){null!=t&&t.isConnected&&n.some(function(e){return"attributes"===e.type&&e.target.parentElement===t&&i(e)})&&e(t)})}),a=function(){var e;u.disconnect(),Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]).forEach(function(t){u.observe(t,{attributes:!0,attributeFilter:r,attributeOldValue:l})})};return a(),{observer:u,syncObservedChildren:a}}(t,R,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;E&&(V=E.syncObservedChildren),!x.mutationObserver&&E&&f(t,{childList:!0},function(t){t.some(function(t){return"childList"===t.type})&&(V(),R())}),A&&!C||S(t)},p=function(t){var e;return null===(e=t.borderBoxSize)||void 0===e?void 0:e[0].inlineSize},y=function(t){var e;return parseInt(null===(e=t.contentRect)||void 0===e?void 0:e.width)},h=function(t){return!(null==t||!t.isConnected)&&0<t.getClientRects().length},g=function(t){var e;if(!h(t))return!1;var n=null==t||null===(e=t.ownerDocument)||void 0===e?void 0:e.defaultView;if(!n)return!0;var r=t.getBoundingClientRect(),i=n.innerWidth,o=n.innerHeight;return r.bottom>-200&&r.right>0&&r.top<o+200&&r.left<i};function b(t,e){var n;return function(){for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];var l=this;clearTimeout(n),n=setTimeout(function(){t.apply(l,i)},e)}}var m=function(t){var e,r=Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]),i=r[0];if(i){var o=s(a(t),["divider:initialized","-stack"]);c(t,o);var l=new Map;if(r.forEach(function(t){var e=s(a(t),["-bol","-linewrap"]);l.set(t,e),c(t,e)}),h(t)){var u,d=i.getBoundingClientRect(),f=r.reduce(function(t,e){var n,r=window.getComputedStyle(e).getPropertyValue("position"),i=window.getComputedStyle(e).getPropertyValue("display");"absolute"!==r&&"fixed"!==r&&"none"!==i&&t.push({child:e,layoutTokens:null!==(n=l.get(e))&&void 0!==n?n:[],rect:e.getBoundingClientRect()});return t},[]);f.map(function(t,e){var r,i,o=t.child,l=t.layoutTokens,a=t.rect,s=n(l);return(0===e||(null===(r=u)||void 0===r?void 0:r.top)<a.top&&(null===(i=u)||void 0===i?void 0:i.left)>=a.left)&&s.push("-bol"),0<e&&d.top<a.top&&s.push("-linewrap"),u=a,{child:o,layoutTokens:s}}).forEach(function(t){var e=t.child,n=t.layoutTokens;c(e,n)});var v=f.every(function(t){return t.rect.left===d.left}),p=n(o);v&&p.push("-stack"),p.push("divider:initialized"),c(t,p)}}},w=function(t){var e,r,i=Array.from(t.children),o=s(a(t),["stairs:initialized"]);c(t,o);var l=i[0];if(l){if(t.style.removeProperty("--unitone--stairs-step-overflow-volume"),t.style.removeProperty("--unitone--max-stairs-step"),i.forEach(function(t){t.style.removeProperty("--unitone--stairs-step")}),h(t)){var u,d=null===(e=(null!==(r=t.getAttribute("data-unitone-layout"))&&void 0!==r?r:"").split(/\s+/).find(function(t){return t.startsWith("-stairs-up:")}))||void 0===e?void 0:e.replace("-stairs-up:",""),f=["up-down","down-up"].includes(d),v=window.getComputedStyle(t).getPropertyValue("flex-direction"),p=t.getBoundingClientRect().bottom,y=i.reduce(function(t,e){var n=window.getComputedStyle(e).getPropertyValue("position"),r=window.getComputedStyle(e).getPropertyValue("display");return"absolute"===n||"fixed"===n||"none"===r||t.push({child:e,rect:e.getBoundingClientRect()}),t},[]),g=0,b=g;y.map(function(t,e){var n,r,i=t.child,o=t.rect,a="row-reverse"===v?(null===(n=u)||void 0===n?void 0:n.left)<=o.left:(null===(r=u)||void 0===r?void 0:r.left)>=o.left;return 0===e||l===i&&!u||a?g=0:f?g=0===g?1:0:g++,u=o,g>b&&(b=g),{child:i,stairsStep:g}}).forEach(function(t){var e=t.child,n=t.stairsStep;e.style.setProperty("--unitone--stairs-step",n)}),t.style.setProperty("--unitone--max-stairs-step",b);var m=y.reduce(function(t,e){var n=e.child.getBoundingClientRect().bottom-p;return t>n?t:n},0);t.style.setProperty("--unitone--stairs-step-overflow-volume",m),c(t,[].concat(n(o),["stairs:initialized"]))}}else c(t,[].concat(n(o),["stairs:initialized"]))},A=function(t){return t.some(function(t){return"attributes"===t.type||"childList"===t.type&&[].concat(n(t.addedNodes),n(t.removedNodes)).some(function(t){return!function(t){return(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE&&["vertical-writing__thresholder","vertical-writing:initialized","vertical-writing:safari"].includes(t.getAttribute("data-unitone-layout"))}(t)})})},C=function(t){if(t){var e,r=a(t),i=s(r,["vertical-writing:safari","-force-switch"]),o=s(r,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(c(t,i),Array.from(t.children).reverse().some(function(t){if(!["absolute","fixed"].includes(getComputedStyle(t).position)&&"none"!==getComputedStyle(t).display)return e=t,!0}),e){var u=getComputedStyle(t),d=String(u.getPropertyValue("--unitone--threshold")).trim(),f=!1;if(d){var v=t.ownerDocument.createElement("div");v.setAttribute(l,"vertical-writing__thresholder"),t.appendChild(v),f=v.offsetWidth>=t.offsetWidth,v.remove()}if(f)o.push("-force-switch");else t.getBoundingClientRect().left>e.getBoundingClientRect().left&&o.push("vertical-writing:safari");c(t,[].concat(n(o),["vertical-writing:initialized"])),requestAnimationFrame(function(){var n;if(null!=t&&t.isConnected&&null!==(n=t.parentNode)&&void 0!==n&&n.style){if(f)return void(t.parentNode.style.height="");var r=t.getBoundingClientRect(),i=e.getBoundingClientRect(),o=r.top+r.height,l=i.top+i.height;t.parentNode.style.height=o!==l?"".concat(Math.ceil(l-r.top),"px"):""}})}else c(t,[].concat(n(o),["vertical-writing:initialized"]))}},z=function(t){var e,n=function(t){var e,n=null!==(e=t.getAttribute("data-unitone-layout"))&&void 0!==e?e:"";n.split(/\s+/).includes("marquee:initialized")||t.setAttribute("data-unitone-layout","".concat(n," marquee:initialized").trim())},r=function(){return t.querySelectorAll(':scope > [data-unitone-layout~="marquee"]')},i=r();if(0!==i.length){var o=Array.from(i).some(function(t){var e;return(null!==(e=t.getAttribute(l))&&void 0!==e?e:"").split(/\s+/).includes("marquee:initialized")});if(1===t.childElementCount&&1===i.length){var u=i[0];(e=u.cloneNode(!0)).setAttribute("aria-hidden","true"),u.after(e)}return i=r(),o?(i.forEach(function(t){var e,n,r;r=(null!==(n=(e=t).getAttribute("data-unitone-layout"))&&void 0!==n?n:"").split(/\s+/).filter(function(t){return t&&"marquee:initialized"!==t}).join(" "),e.setAttribute("data-unitone-layout",r)}),requestAnimationFrame(function(){null!=t&&t.isConnected&&r().forEach(function(t){n(t)})}),e):(i.forEach(function(t){n(t)}),e)}};exports.debounce=b,exports.dividersResizeObserver=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=function(t){if("data-unitone-layout"===t.attributeName){var r,i,o,l,u=[].concat(n(null!==(r=null==e||null===(i=e.ignore)||void 0===i?void 0:i.layout)&&void 0!==r?r:[]),["divider:initialized","-bol","-linewrap","-stack"]);return(null!==(o=t.target.getAttribute(t.attributeName))&&void 0!==o?o:"").split(" ").filter(function(t){return!u.includes(t)}).join(" ")!==(null!==(l=t.oldValue)&&void 0!==l?l:"").split(" ").filter(function(t){return!u.includes(t)}).join(" ")}if("class"===t.attributeName){var a,s,c,d,f=n(null!==(a=null==e||null===(s=e.ignore)||void 0===s?void 0:s.className)&&void 0!==a?a:[]);return(null!==(c=t.target.getAttribute(t.attributeName))&&void 0!==c?c:"").split(" ").filter(function(t){return!f.includes(t)}).join(" ")!==(null!==(d=t.oldValue)&&void 0!==d?d:"").split(" ").filter(function(t){return!f.includes(t)}).join(" ")}return"style"===t.attributeName};v(t,m,{getResizeValue:p,observeIntersection:!0,observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","data-unitone-layout","class"],attributeOldValue:!0},shouldApply:function(e){return function(t,e){return t.some(function(t){return"attributes"===t.type&&e(t)})}(e,function(e){return e.target===t&&r(e)})}},directChildMutation:{attributeFilter:["style","data-unitone-layout","class"],attributeOldValue:!0,shouldApply:r}})},exports.marqueeResizeObserver=function(t){var e;v(t,function(t){e=z(t)},{observeResize:!1,observeIntersection:!0,targetMutation:{options:{childList:!0},shouldApply:function(t){var n,r=t.flatMap(function(t){var e;return Array.from(null!==(e=t.addedNodes)&&void 0!==e?e:[])}),i=t.flatMap(function(t){var e;return Array.from(null!==(e=t.removedNodes)&&void 0!==e?e:[])});return null!==(n=e)&&void 0!==n&&n.isConnected&&1===r.length&&0===i.length&&r[0]===e?(e=null,!1):(e=null,!0)}}})},exports.setColumnCountForVertical=C,exports.setDividerLinewrap=m,exports.setMarquee=z,exports.setStairsStep=w,exports.stairsResizeObserver=function(t){v(t,w,{observeIntersection:!0,observeDirectChildrenResize:!0})},exports.verticalsResizeObserver=function(t){v(t,function(t){var e;null!==(e=t.parentNode)&&void 0!==e&&e.style&&(t.parentNode.style.height=""),C(t)},{getResizeValue:y,observeIntersection:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0},shouldApply:A}})};
+"use strict";function t(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=Array(e);n<e;n++)i[n]=t[n];return i}function e(e,n){if(e){if("string"==typeof e)return t(e,n);var i={}.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?t(e,n):void 0}}function n(n){return function(e){if(Array.isArray(e))return t(e)}(n)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(n)||e(n)||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(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var i,r,o,l,u=[],a=!0,s=!1;try{if(o=(n=n.call(t)).next,0===e);else for(;!(a=(i=o.call(n)).done)&&(u.push(i.value),u.length!==e);a=!0);}catch(t){s=!0,r=t}finally{try{if(!a&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(s)throw r}}return u}}(t,n)||e(t,n)||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 r(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return o(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}(t))||e){n&&(t=n);var i=0,r=function(){};return{s:r,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:r}}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 l,u=!0,a=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return u=t.done,t},e:function(t){a=!0,l=t},f:function(){try{u||null==n.return||n.return()}finally{if(a)throw l}}}}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=Array(e);n<e;n++)i[n]=t[n];return i}var l="data-unitone-layout",u="".concat(200,"px 0px"),a=function(t){var e;return(null!==(e=t.getAttribute(l))&&void 0!==e?e:"").split(/\s+/).filter(Boolean)},s=function(t,e){return t.filter(function(t){return!e.includes(t)})},d=function(t,e){var n,i=e.filter(Boolean).join(" ");(null!==(n=t.getAttribute(l))&&void 0!==n?n:"")!==i&&t.setAttribute(l,i)},c=function(t,e){var n,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=i.getValue,l=i.delay,u=!0,a=new ResizeObserver(b(function(t){var i,l=r(t);try{for(l.s();!(i=l.n()).done;){var a=i.value,s=null==o?void 0:o(a);u?(n=s,u=!1):void 0!==s&&s===n||(e(a.target,a),n=s)}}catch(t){l.e(t)}finally{l.f()}},void 0===l?250:l));return a.observe(t),a},f=function(t,e,n){var i=new MutationObserver(function(e){requestAnimationFrame(function(){null!=t&&t.isConnected&&n(e)})});return i.observe(t,e),i},v=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=n.getResizeValue,l=n.delay,a=void 0===l?250:l,s=n.observeResize,d=void 0===s||s,v=n.observeIntersection,p=void 0!==v&&v,y=n.observeDirectChildrenResize,h=void 0!==y&&y,m=n.targetMutation,w=n.directChildMutation,A=p&&"undefined"!=typeof IntersectionObserver,C=!A||g(t),z=A&&!C,S=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:t;null!=n&&n.isConnected&&(!A||C?(z=!1,e(n)):z=!0)},V=function(t,e){var n,i=0;return function(){var r,o;null!==(o=n=null==t||null===(r=t.ownerDocument)||void 0===r?void 0:r.defaultView)&&void 0!==o&&o.requestAnimationFrame?i||(i=n.requestAnimationFrame(function(){i=0,n=null,null!=t&&t.isConnected&&e(t)})):e(t)}}(t,S),O=function(){null!=t&&t.isConnected&&(!A||C?(z=!0,V()):z=!0)},R=function(){},x=d?h?function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=n.getValue,o=n.delay,l=void 0===o?250:o,u=n.onChildList,a=new WeakMap,s=new Set,d=new ResizeObserver(b(function(n){var o,l=!1,u=r(n);try{for(u.s();!(o=u.n()).done;){var s=o.value,d=null==i?void 0:i(s);a.has(s.target)?(void 0!==d&&d===a.get(s.target)||(l=!0),a.set(s.target,d)):a.set(s.target,d)}}catch(t){u.e(t)}finally{u.f()}l&&e(t)},l)),c=function(){var e;Array.from(s).forEach(function(e){e.parentElement!==t&&(d.unobserve(e),s.delete(e),a.delete(e))}),Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]).forEach(function(t){s.has(t)||(d.observe(t),s.add(t))})};d.observe(t),c();var v=f(t,{childList:!0},function(n){n.some(function(t){return"childList"===t.type})&&(c(),null==u||u(n),e(t))});return{resizeObserver:d,mutationObserver:v}}(t,O,{getValue:o,delay:a,onChildList:function(){R()}}):{resizeObserver:c(t,O,{getValue:o,delay:a})}:{mutationObserver:null};A&&function(t,e){var n=new IntersectionObserver(function(t){var n=i(t,1)[0];n&&e(n)},{rootMargin:u});n.observe(t)}(t,function(t){(C=t.isIntersecting)&&z&&O()}),null!=m&&m.options&&f(t,m.options,function(t){var e,n;(null!==(e=null===(n=m.shouldApply)||void 0===n?void 0:n.call(m,t))&&void 0!==e?e:0<t.length)&&O()});var E=null!=w&&w.attributeFilter&&w.shouldApply?function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=n.attributeFilter,r=n.shouldApply,o=n.attributeOldValue,l=void 0===o||o,u=new MutationObserver(function(n){requestAnimationFrame(function(){null!=t&&t.isConnected&&n.some(function(e){return"attributes"===e.type&&e.target.parentElement===t&&r(e)})&&e(t)})}),a=function(){var e;u.disconnect(),Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]).forEach(function(t){u.observe(t,{attributes:!0,attributeFilter:i,attributeOldValue:l})})};return a(),{observer:u,syncObservedChildren:a}}(t,O,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;E&&(R=E.syncObservedChildren),!x.mutationObserver&&E&&f(t,{childList:!0},function(t){t.some(function(t){return"childList"===t.type})&&(R(),O())}),A&&!C||S(t)},p=function(t){var e;return null===(e=t.borderBoxSize)||void 0===e?void 0:e[0].inlineSize},y=function(t){var e;return parseInt(null===(e=t.contentRect)||void 0===e?void 0:e.width)},h=function(t){return!(null==t||!t.isConnected)&&0<t.getClientRects().length},g=function(t){var e;if(!h(t))return!1;var n=null==t||null===(e=t.ownerDocument)||void 0===e?void 0:e.defaultView;if(!n)return!0;var i=t.getBoundingClientRect(),r=n.innerWidth,o=n.innerHeight;return i.bottom>-200&&i.right>0&&i.top<o+200&&i.left<r},m=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.direction,i=void 0===n?"ltr":n,r=e.flexDirection,o=void 0===r?"row":r,l=e.writingMode,u=void 0===l?"horizontal-tb":l,a=!u.startsWith("horizontal"),s="rtl"===i!==("sideways-lr"===u),d=a?t.top:t.left,c=a?t.bottom:t.right;if(s){var f=[-c,-d];d=f[0],c=f[1]}if("row-reverse"===o){var v=[-c,-d];d=v[0],c=v[1]}return{start:d,end:c}};function b(t,e){var n;return function(){for(var i=arguments.length,r=new Array(i),o=0;o<i;o++)r[o]=arguments[o];var l=this;clearTimeout(n),n=setTimeout(function(){t.apply(l,r)},e)}}var w=function(t){var e,i,r,o=Array.from(null!==(e=null==t?void 0:t.children)&&void 0!==e?e:[]),l=s(a(t),["divider:initialized","-stack"]);d(t,l);var u=o.map(function(t){return{child:t,layoutTokens:s(a(t),["-bol","-linewrap"])}}),c=function(){u.forEach(function(t){var e=t.child,n=t.layoutTokens;d(e,n)})};if(l.some(function(t){return t.startsWith("-divider:")}))if(0!==o.length)if(h(t)){var f=null!==(i=null==t||null===(r=t.ownerDocument)||void 0===r?void 0:r.defaultView)&&void 0!==i?i:"undefined"!=typeof window?window:void 0;if(null!=f&&f.getComputedStyle){var v,p=f.getComputedStyle(t),y={direction:p.getPropertyValue("direction"),flexDirection:p.getPropertyValue("flex-direction"),writingMode:p.getPropertyValue("writing-mode")},g=u.reduce(function(t,e){var n=e.child,i=e.layoutTokens,r=f.getComputedStyle(n),o=r.getPropertyValue("position"),l=r.getPropertyValue("display");if("absolute"!==o&&"fixed"!==o&&"none"!==l){var u=n.getBoundingClientRect();t.push({child:n,layoutTokens:i,inlineRect:m(u,y)})}return t},[]);if(0===g.length)return c(),void d(t,[].concat(n(l),["divider:initialized"]));var b=!1,w=!0,A=g.map(function(t,e){var i=t.child,r=t.layoutTokens,o=t.inlineRect,l=n(r);return 0===e||o.start<v.end-.5||o.start<=v.start+.5?(l.push("-bol"),0<e&&(b=!0)):w=!1,b&&l.push("-linewrap"),v=o,{child:i,layoutTokens:l}}),C=new Map(A.map(function(t){return[t.child,t.layoutTokens]}));u.forEach(function(t){var e,n=t.child,i=t.layoutTokens;d(n,null!==(e=C.get(n))&&void 0!==e?e:i)});var z=n(l);w&&z.push("-stack"),z.push("divider:initialized"),d(t,z)}else c()}else c();else d(t,[].concat(n(l),["divider:initialized"]));else c()},A=function(t){var e,i,r=Array.from(t.children),o=s(a(t),["stairs:initialized"]);d(t,o);var l=r[0];if(l){if(t.style.removeProperty("--unitone--stairs-step-overflow-volume"),t.style.removeProperty("--unitone--max-stairs-step"),r.forEach(function(t){t.style.removeProperty("--unitone--stairs-step")}),h(t)){var u,c=null===(e=(null!==(i=t.getAttribute("data-unitone-layout"))&&void 0!==i?i:"").split(/\s+/).find(function(t){return t.startsWith("-stairs-up:")}))||void 0===e?void 0:e.replace("-stairs-up:",""),f=["up-down","down-up"].includes(c),v=window.getComputedStyle(t).getPropertyValue("flex-direction"),p=t.getBoundingClientRect().bottom,y=r.reduce(function(t,e){var n=window.getComputedStyle(e).getPropertyValue("position"),i=window.getComputedStyle(e).getPropertyValue("display");return"absolute"===n||"fixed"===n||"none"===i||t.push({child:e,rect:e.getBoundingClientRect()}),t},[]),g=0,m=g;y.map(function(t,e){var n,i,r=t.child,o=t.rect,a="row-reverse"===v?(null===(n=u)||void 0===n?void 0:n.left)<=o.left:(null===(i=u)||void 0===i?void 0:i.left)>=o.left;return 0===e||l===r&&!u||a?g=0:f?g=0===g?1:0:g++,u=o,g>m&&(m=g),{child:r,stairsStep:g}}).forEach(function(t){var e=t.child,n=t.stairsStep;e.style.setProperty("--unitone--stairs-step",n)}),t.style.setProperty("--unitone--max-stairs-step",m);var b=y.reduce(function(t,e){var n=e.child.getBoundingClientRect().bottom-p;return t>n?t:n},0);t.style.setProperty("--unitone--stairs-step-overflow-volume",b),d(t,[].concat(n(o),["stairs:initialized"]))}}else d(t,[].concat(n(o),["stairs:initialized"]))},C=function(t){return t.some(function(t){return"attributes"===t.type||"childList"===t.type&&[].concat(n(t.addedNodes),n(t.removedNodes)).some(function(t){return!function(t){return(null==t?void 0:t.nodeType)===Node.ELEMENT_NODE&&["vertical-writing__thresholder","vertical-writing:initialized","vertical-writing:safari"].includes(t.getAttribute("data-unitone-layout"))}(t)})})},z=function(t){if(t){var e,i=a(t),r=s(i,["vertical-writing:safari","-force-switch"]),o=s(i,["vertical-writing:initialized","vertical-writing:safari","-force-switch"]);if(d(t,r),Array.from(t.children).reverse().some(function(t){if(!["absolute","fixed"].includes(getComputedStyle(t).position)&&"none"!==getComputedStyle(t).display)return e=t,!0}),e){var u=getComputedStyle(t),c=String(u.getPropertyValue("--unitone--threshold")).trim(),f=!1;if(c){var v=t.ownerDocument.createElement("div");v.setAttribute(l,"vertical-writing__thresholder"),t.appendChild(v),f=v.offsetWidth>=t.offsetWidth,v.remove()}if(f)o.push("-force-switch");else t.getBoundingClientRect().left>e.getBoundingClientRect().left&&o.push("vertical-writing:safari");d(t,[].concat(n(o),["vertical-writing:initialized"])),requestAnimationFrame(function(){var n;if(null!=t&&t.isConnected&&null!==(n=t.parentNode)&&void 0!==n&&n.style){if(f)return void(t.parentNode.style.height="");var i=t.getBoundingClientRect(),r=e.getBoundingClientRect(),o=i.top+i.height,l=r.top+r.height;t.parentNode.style.height=o!==l?"".concat(Math.ceil(l-i.top),"px"):""}})}else d(t,[].concat(n(o),["vertical-writing:initialized"]))}},S=function(t){var e,n=function(t){var e,n=null!==(e=t.getAttribute("data-unitone-layout"))&&void 0!==e?e:"";n.split(/\s+/).includes("marquee:initialized")||t.setAttribute("data-unitone-layout","".concat(n," marquee:initialized").trim())},i=function(){return t.querySelectorAll(':scope > [data-unitone-layout~="marquee"]')},r=i();if(0!==r.length){var o=Array.from(r).some(function(t){var e;return(null!==(e=t.getAttribute(l))&&void 0!==e?e:"").split(/\s+/).includes("marquee:initialized")});if(1===t.childElementCount&&1===r.length){var u=r[0];(e=u.cloneNode(!0)).setAttribute("aria-hidden","true"),u.after(e)}return r=i(),o?(r.forEach(function(t){var e,n,i;i=(null!==(n=(e=t).getAttribute("data-unitone-layout"))&&void 0!==n?n:"").split(/\s+/).filter(function(t){return t&&"marquee:initialized"!==t}).join(" "),e.setAttribute("data-unitone-layout",i)}),requestAnimationFrame(function(){null!=t&&t.isConnected&&i().forEach(function(t){n(t)})}),e):(r.forEach(function(t){n(t)}),e)}};exports.debounce=b,exports.dividersResizeObserver=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=function(t){if("data-unitone-layout"===t.attributeName){var i,r,o,l,u=[].concat(n(null!==(i=null==e||null===(r=e.ignore)||void 0===r?void 0:r.layout)&&void 0!==i?i:[]),["divider:initialized","-bol","-linewrap","-stack"]);return(null!==(o=t.target.getAttribute(t.attributeName))&&void 0!==o?o:"").split(" ").filter(function(t){return!u.includes(t)}).join(" ")!==(null!==(l=t.oldValue)&&void 0!==l?l:"").split(" ").filter(function(t){return!u.includes(t)}).join(" ")}if("class"===t.attributeName){var a,s,d,c,f=n(null!==(a=null==e||null===(s=e.ignore)||void 0===s?void 0:s.className)&&void 0!==a?a:[]);return(null!==(d=t.target.getAttribute(t.attributeName))&&void 0!==d?d:"").split(" ").filter(function(t){return!f.includes(t)}).join(" ")!==(null!==(c=t.oldValue)&&void 0!==c?c:"").split(" ").filter(function(t){return!f.includes(t)}).join(" ")}return["style","dir"].includes(t.attributeName)};v(t,w,{getResizeValue:p,observeIntersection:!0,observeDirectChildrenResize:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style","dir","data-unitone-layout","class"],attributeOldValue:!0},shouldApply:function(e){return function(t,e){return t.some(function(t){return"attributes"===t.type&&e(t)})}(e,function(e){return e.target===t&&i(e)})}},directChildMutation:{attributeFilter:["style","data-unitone-layout","class"],attributeOldValue:!0,shouldApply:i}})},exports.marqueeResizeObserver=function(t){var e;v(t,function(t){e=S(t)},{observeResize:!1,observeIntersection:!0,targetMutation:{options:{childList:!0},shouldApply:function(t){var n,i=t.flatMap(function(t){var e;return Array.from(null!==(e=t.addedNodes)&&void 0!==e?e:[])}),r=t.flatMap(function(t){var e;return Array.from(null!==(e=t.removedNodes)&&void 0!==e?e:[])});return null!==(n=e)&&void 0!==n&&n.isConnected&&1===i.length&&0===r.length&&i[0]===e?(e=null,!1):(e=null,!0)}}})},exports.setColumnCountForVertical=z,exports.setDividerLinewrap=w,exports.setMarquee=S,exports.setStairsStep=A,exports.stairsResizeObserver=function(t){v(t,A,{observeIntersection:!0,observeDirectChildrenResize:!0})},exports.verticalsResizeObserver=function(t){v(t,function(t){var e;null!==(e=t.parentNode)&&void 0!==e&&e.style&&(t.parentNode.style.height=""),z(t)},{getResizeValue:y,observeIntersection:!0,targetMutation:{options:{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0},shouldApply:C}})};

package/package.json

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

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

@@ -48,14 +48,25 @@
     }
 
     > :not([data-unitone-layout~="-bol"]) {
-      padding-left: var(--unitone--column-gap);
-
       &::before {
         border-left: 0;
       }
     }
   }
 
+  &[data-unitone-layout~="-divider\:divide"] {
+    column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width)) !important;
+    align-items: stretch;
+
+    > :not([data-unitone-layout~="-bol"]) {
+      &::before {
+        right: auto;
+        left: calc(var(--unitone--column-gap) * -1);
+        border-left-width: var(--unitone--divider-width);
+      }
+    }
+  }
+
   &[data-unitone-layout~="-divider\:slash"] {
     column-gap: calc(var(--unitone--column-gap) * 2 + var(--unitone--divider-width));
     align-items: stretch;
@@ -84,8 +95,6 @@
     }
 
     > :not([data-unitone-layout~="-bol"]) {
-      padding-left: var(--unitone--column-gap);
-
       &::before {
         border-left-width: 0;
       }

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

@@ -51,6 +51,11 @@
       @media (orientation: portrait) and (width < 600px) {
         column-count: auto;
         writing-mode: horizontal-tb;
+
+        > * {
+          box-sizing: border-box;
+          max-inline-size: none;
+        }
       }
     }
 
@@ -58,6 +63,11 @@
       @container (width < 600px) {
         column-count: auto;
         writing-mode: horizontal-tb;
+
+        > * {
+          box-sizing: border-box;
+          max-inline-size: none;
+        }
       }
     }
   }
@@ -115,6 +125,7 @@
   [data-unitone-layout~="vertical-writing-wrapper"] {
     display: flex;
     flex-direction: column;
+    overflow: clip;
   }
 
   [data-unitone-layout~="vertical-writing"] {

package/src/library.js

@@ -1,6 +1,7 @@
 const layoutAttributeName = 'data-unitone-layout';
 const layoutIntersectionMargin = 200;
 const layoutIntersectionRootMargin = `${layoutIntersectionMargin}px 0px`;
+const layoutPositionTolerance = 0.5;
 
 /**
  * Returns layout tokens from the target element.
@@ -437,6 +438,35 @@ const isNearViewport = (element) => {
   );
 };
 
+/**
+ * Returns the target rectangle's start and end positions along the layout's inline flow.
+ *
+ * @param {DOMRect} rect Target rectangle.
+ * @param {{ direction?: string, flexDirection?: string, writingMode?: string }} flow Layout flow.
+ * @returns {{ start: number, end: number }} Normalized inline positions.
+ */
+const getNormalizedInlineRect = (
+  rect,
+  { direction = 'ltr', flexDirection = 'row', writingMode = 'horizontal-tb' } = {},
+) => {
+  const isVertical = !writingMode.startsWith('horizontal');
+  const isSidewaysLr = 'sideways-lr' === writingMode;
+  const isInlineReverse = ('rtl' === direction) !== isSidewaysLr;
+
+  let start = isVertical ? rect.top : rect.left;
+  let end = isVertical ? rect.bottom : rect.right;
+
+  if (isInlineReverse) {
+    [start, end] = [-end, -start];
+  }
+
+  if ('row-reverse' === flexDirection) {
+    [start, end] = [-end, -start];
+  }
+
+  return { start, end };
+};
+
 /**
  * Returns whether the mutation list contains a matching attributes record.
  *
@@ -474,63 +504,107 @@ export function debounce(fn, delay) {
  */
 export const setDividerLinewrap = (target) => {
   const children = Array.from(target?.children ?? []);
-  const firstChild = children[0];
-  if (!firstChild) {
-    return;
-  }
-
   const currentLayoutArray = withoutLayoutTokens(getLayoutTokens(target), [
     'divider:initialized',
     '-stack',
   ]);
   setLayoutTokens(target, currentLayoutArray);
 
-  const childLayoutMap = new Map();
-  children.forEach((child) => {
-    const layoutTokens = withoutLayoutTokens(getLayoutTokens(child), ['-bol', '-linewrap']);
-    childLayoutMap.set(child, layoutTokens);
-    setLayoutTokens(child, layoutTokens);
-  });
+  const childLayouts = children.map((child) => ({
+    child,
+    layoutTokens: withoutLayoutTokens(getLayoutTokens(child), ['-bol', '-linewrap']),
+  }));
+
+  const resetChildLayouts = () => {
+    childLayouts.forEach(({ child, layoutTokens }) => {
+      setLayoutTokens(child, layoutTokens);
+    });
+  };
+
+  if (!currentLayoutArray.some((value) => value.startsWith('-divider:'))) {
+    resetChildLayouts();
+    return;
+  }
+
+  if (0 === children.length) {
+    setLayoutTokens(target, [...currentLayoutArray, 'divider:initialized']);
+    return;
+  }
 
   if (!hasLayoutBox(target)) {
+    resetChildLayouts();
     return;
   }
 
-  const baseRect = firstChild.getBoundingClientRect();
-  const targetChildren = children.reduce((accumulator, child) => {
-    const position = window.getComputedStyle(child).getPropertyValue('position');
-    const display = window.getComputedStyle(child).getPropertyValue('display');
+  const defaultView =
+    target?.ownerDocument?.defaultView ?? ('undefined' !== typeof window ? window : undefined);
+  if (!defaultView?.getComputedStyle) {
+    resetChildLayouts();
+    return;
+  }
+
+  const targetStyle = defaultView.getComputedStyle(target);
+  const flow = {
+    direction: targetStyle.getPropertyValue('direction'),
+    flexDirection: targetStyle.getPropertyValue('flex-direction'),
+    writingMode: targetStyle.getPropertyValue('writing-mode'),
+  };
+
+  const targetChildren = childLayouts.reduce((accumulator, { child, layoutTokens }) => {
+    const style = defaultView.getComputedStyle(child);
+    const position = style.getPropertyValue('position');
+    const display = style.getPropertyValue('display');
     if ('absolute' !== position && 'fixed' !== position && 'none' !== display) {
+      const rect = child.getBoundingClientRect();
       accumulator.push({
         child,
-        layoutTokens: childLayoutMap.get(child) ?? [],
-        rect: child.getBoundingClientRect(),
+        layoutTokens,
+        inlineRect: getNormalizedInlineRect(rect, flow),
       });
     }
     return accumulator;
   }, []);
 
-  let prevRect;
-  const nextChildLayouts = targetChildren.map(({ child, layoutTokens, rect }, index) => {
+  if (0 === targetChildren.length) {
+    resetChildLayouts();
+    setLayoutTokens(target, [...currentLayoutArray, 'divider:initialized']);
+    return;
+  }
+
+  let prevInlineRect;
+  let hasWrapped = false;
+  let isStack = true;
+  const nextChildLayouts = targetChildren.map(({ child, layoutTokens, inlineRect }, index) => {
     const nextLayoutTokens = [...layoutTokens];
+    const isBeginningOfLine =
+      0 === index ||
+      inlineRect.start < prevInlineRect.end - layoutPositionTolerance ||
+      inlineRect.start <= prevInlineRect.start + layoutPositionTolerance;
 
-    if (0 === index || (prevRect?.top < rect.top && prevRect?.left >= rect.left)) {
+    if (isBeginningOfLine) {
       nextLayoutTokens.push('-bol');
+      if (0 < index) {
+        hasWrapped = true;
+      }
+    } else {
+      isStack = false;
     }
 
-    if (0 < index && baseRect.top < rect.top) {
+    if (hasWrapped) {
       nextLayoutTokens.push('-linewrap');
     }
 
-    prevRect = rect;
+    prevInlineRect = inlineRect;
     return { child, layoutTokens: nextLayoutTokens };
   });
 
-  nextChildLayouts.forEach(({ child, layoutTokens }) => {
-    setLayoutTokens(child, layoutTokens);
+  const nextChildLayoutMap = new Map(
+    nextChildLayouts.map(({ child, layoutTokens }) => [child, layoutTokens]),
+  );
+  childLayouts.forEach(({ child, layoutTokens }) => {
+    setLayoutTokens(child, nextChildLayoutMap.get(child) ?? layoutTokens);
   });
 
-  const isStack = targetChildren.every(({ rect }) => rect.left === baseRect.left);
   const nextTargetLayout = [...currentLayoutArray];
   if (isStack) {
     nextTargetLayout.push('-stack');
@@ -584,7 +658,7 @@ export const dividersResizeObserver = (target, args = {}) => {
       return current !== old;
     }
 
-    return 'style' === entry.attributeName;
+    return ['style', 'dir'].includes(entry.attributeName);
   };
 
   createLayoutObserver(target, setDividerLinewrap, {
@@ -594,7 +668,7 @@ export const dividersResizeObserver = (target, args = {}) => {
     targetMutation: {
       options: {
         attributes: true,
-        attributeFilter: ['style', 'data-unitone-layout', 'class'],
+        attributeFilter: ['style', 'dir', 'data-unitone-layout', 'class'],
         attributeOldValue: true,
       },
       shouldApply: (entries) =>