@inc2734/unitone-css 0.102.4 → 1.0.1

package/src/library.js

@@ -870,54 +870,6 @@ export const verticalsResizeObserver = (target) => {
   });
 };
 
-/**
- * Writes the computed 1em value to a CSS custom property for Firefox.
- *
- * @param {HTMLElement} target Target element.
- * @returns {void}
- */
-export const setResult1emPxForFireFox = (target) => {
-  const ownerDocument = target.ownerDocument;
-  const defaultView = ownerDocument.defaultView;
-
-  const computedStyle = defaultView.getComputedStyle(target);
-  const fontSize = parseFloat(computedStyle.fontSize);
-  const result1emPx = parseFloat(computedStyle.getPropertyValue('--unitone--result--1em-px'));
-  if (fontSize === result1emPx) {
-    return;
-  }
-
-  target.style.setProperty('--unitone--result--1em-px', fontSize);
-};
-
-/**
- * Creates the observer bundle for the Firefox 1em measurement workaround.
- *
- * @param {HTMLElement} target Target element.
- * @returns {void}
- */
-export const result1emPxForFireFoxObserver = (target) => {
-  const ownerDocument = target.ownerDocument;
-  const defaultView = ownerDocument.defaultView;
-  const computedStyle = defaultView.getComputedStyle(ownerDocument.documentElement);
-  const isFirefox = computedStyle.getPropertyValue('--unitone--is-firefox').trim();
-  if (!isFirefox) {
-    return;
-  }
-
-  createLayoutObserver(target, setResult1emPxForFireFox, {
-    getResizeValue: getBorderBoxInlineSize,
-    targetMutation: {
-      options: {
-        attributes: true,
-        attributeFilter: ['style', 'data-unitone-layout', 'class'],
-        characterData: true,
-      },
-      shouldApply: () => true,
-    },
-  });
-};
-
 /**
  * Creates duplicated marquee content and refreshes initialization markers.
  *

package/src/settings/_body.scss

@@ -3,7 +3,6 @@
   background-color: var(--unitone--color--background);
   color: var(--unitone--color--text);
   font-family: var(--unitone--font-family);
-
   -webkit-font-smoothing: antialiased;
   // -moz-osx-font-smooting: grayscale; // White out elements will activate this.
   -webkit-text-size-adjust: 100%;

package/src/settings/_index.scss

@@ -1 +1,3 @@
-@forward './settings-core';
+@use 'root';
+@use 'html';
+@use 'body';

package/src/settings/_root.scss

@@ -8,6 +8,12 @@
   initial-value: 0px;
 }
 
+@property --unitone--property--1rem {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
 @property --unitone--property--100vw {
   syntax: "<length>";
   inherits: false;
@@ -20,6 +26,12 @@
   initial-value: 0;
 }
 
+@property --unitone--result--1rem-px {
+  syntax: "<number> | <length>";
+  inherits: false;
+  initial-value: 0;
+}
+
 @property --unitone--result--100vw-px {
   syntax: "<number> | <length>";
   inherits: false;
@@ -29,7 +41,7 @@
 @function _generate-fluid-spacing($min, $max) {
   @return clamp(
     #{ $min },
-    #{ $min } + ((#{ $max } - #{ $min }) / (#{ variables.$max-breakpoint - variables.$min-breakpoint } * var(--unitone--base-font-size)) * (var(--unitone--result--100vw-px) - (#{ variables.$min-breakpoint } * var(--unitone--base-font-size)))),
+    #{ $min } + ((#{ $max } - #{ $min }) / (#{ variables.$max-breakpoint - variables.$min-breakpoint } * var(--unitone--result--1rem-px)) * (var(--unitone--result--100vw-px) - (#{ variables.$min-breakpoint } * var(--unitone--result--1rem-px)))),
     #{ $max }
   );
 }
@@ -46,16 +58,38 @@
   @return _generate-fluid-spacing(#{ $min }, #{ $max });
 }
 
+$font-sizes: (
+  -3: 2xs,
+  -2: xs,
+  -1: s,
+  0: m,
+  1: l,
+  2: xl,
+  3: 2xl,
+  4: 3xl,
+  5: 4xl,
+  6: 5xl,
+  7: 6xl,
+);
+
 * {
   /**
    * A value to get the unitless px value in trigonometric functions. (For Safari)
    */
   --unitone--property--1em: 1em;
+  --unitone--property--1rem: 1rem;
 
   /**
    * em unitless px real value
    */
   --unitone--result--1em-px: calc(tan(atan2(var(--unitone--property--1em), 1px)));
+
+  /**
+   * rem unitless px real value
+   */
+  --unitone--result--1rem-px: calc(tan(atan2(var(--unitone--property--1rem), 1px)));
+
+  @include variables.line-height();
 }
 
 /**
@@ -99,15 +133,9 @@
   --unitone--measure: 42rem;
 
   /**
-   * Font size level.
-   * It is not recommended to override this value with :root in order to have the size determined based on 0.
-   */
-  --unitone--font-size: 0;
-
-  /**
-   * The 1rem px font size (no units).
+   * Root font size.
    */
-  --unitone--base-font-size: 16;
+  --unitone--root-font-size: 100%;
 
   --unitone--harmonic-sequence-base: 8;
   --unitone--min-harmonic-sequence-base: 10;
@@ -128,6 +156,16 @@
   --unitone--font-family: sans-serif;
 }
 
+/**
+ * Font size tokens.
+ */
+:root {
+  @each $level, $name in $font-sizes {
+    --unitone--font-size-#{ $name }: #{ variables.font-size-rem($level) };
+    --unitone--font-size-#{ $name }-fluid: #{ variables.font-size-fluid($level) };
+  }
+}
+
 /**
  * Modular scales for spaces (em based).
  */

package/src/utilities/_font-size.scss

@@ -1,17 +1,10 @@
-@each $key, $value in (
-  -3: 2xs,
-  -2: xs,
-  -1: s,
-  0: m,
-  1: l,
-  2: xl,
-  3: 2xl,
-  4: 3xl,
-  5: 4xl,
-  6: 5xl,
-  7: 6xl,
-) {
-  .-font-size\:#{ $value } {
-    --unitone--font-size: #{ $key } !important;
+@each $name in 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl, 6xl {
+  .-font-size\:#{ $name } {
+    font-size: var(--unitone--font-size-#{ $name }) !important;
+  }
+
+  .-font-size\:#{ $name }[data-unitone-layout~="-fluid-typography"],
+  .-font-size\:#{ $name }.-fluid-typography {
+    font-size: var(--unitone--font-size-#{ $name }-fluid) !important;
   }
 }

package/src/utilities/_index.scss

@@ -18,4 +18,3 @@
 @use './padding';
 @use './position';
 @use './text-align';
-@use './typography';

package/src/variables/_index.scss

@@ -1 +1,83 @@
-@forward './variables-core';
+$fibonacci-sequence: 1, 2, 3, 5, 8, 13, 21, 34, 55;
+
+$min-breakpoint: 27; // = 432px
+$max-breakpoint: 80; // = 1280px
+
+$root-font-size: var(--unitone--root-font-size);
+
+@function _max-font-size($level) {
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - (#{ $level })));
+}
+
+@function _min-font-size($level) {
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - (#{ $level })) + 1 - (var(--unitone--harmonic-sequence-base) / var(--unitone--min-harmonic-sequence-base)));
+}
+
+@function _font-size-scale($level) {
+  @return calc(var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - (#{ $level })));
+}
+
+@function font-size-rem($level) {
+  @return calc(#{ _font-size-scale($level) } * 1rem);
+}
+
+@function font-size-fluid($level) {
+  $max-font-size: _max-font-size($level);
+  $min-font-size: _min-font-size($level);
+  $slope: calc((#{ $max-font-size } - #{ $min-font-size }) / (#{ $max-breakpoint - $min-breakpoint }));
+  $intercept: calc(#{-1 * $min-breakpoint } * #{ $slope } + #{ $min-font-size });
+  $preferred-font-size: calc((#{ $intercept } * 1rem) + (#{ $slope } * 100vw));
+
+  @return clamp(var(--unitone--fluid-typography-min-length, calc(1rem * #{ $min-font-size })), #{ $preferred-font-size }, var(--unitone--fluid-typography-max-length, calc(1rem * #{ $max-font-size })));
+}
+
+/**
+ * Line-height scaling (non-linear / hyperbolic reciprocal curve)
+ *
+ * This block computes a font-size–dependent line-height using a hyperbolic (reciprocal) curve:
+ *
+ * LH(fs) = Lmin' + K / (fs + C)
+ *
+ * ### Internal bias (-0.1) for the effective minimum (Lmin')
+ * We slightly lower the effective minimum to compensate for the
+ * asymptotic nature of the reciprocal curve. This makes the observed
+ * minimum in typical font-size ranges closer to the user’s expectation.
+ *
+ * ### C: Curvature / controls how quickly the curve approaches the minimum
+ * Larger C => slower decay (more generous line-height for larger text)
+ * Smaller C => faster decay (tighter line-height sooner)
+ *
+ * ### K: Amplitude / scale factor for the reciprocal term
+ * We compute K so that the curve respects the intended range between
+ * max-line-height and the biased minimum, and so that near the base
+ * font size the line-height stays close to max (and is clamped there).
+ */
+$_min-line-height: calc(var(--unitone--min-line-height) - 0.1);
+$_line-height-amplitude: calc((var(--unitone--max-line-height) - #{ $_min-line-height }) * (var(--unitone--result--1rem-px) + var(--unitone--line-height-curvature)));
+$_line-height: clamp(
+  var(--unitone--min-line-height),
+  (#{ $_min-line-height } + #{ $_line-height-amplitude } / (var(--unitone--result--1em-px) + var(--unitone--line-height-curvature))),
+  var(--unitone--max-line-height)
+);
+
+@mixin line-height {
+  --unitone--min-line-height: calc(1 + 2 * min(var(--unitone--min-half-leading), var(--unitone--half-leading)));
+  --unitone--max-line-height: calc(1 + 2 * var(--unitone--half-leading));
+  --unitone--line-height: #{ $_line-height };
+
+  line-height: var(--unitone--line-height);
+
+  // @todo In Firefox, using tan(atan2()) for line-height is considered invalid.
+  // Therefore, a fallback line-height is applied.
+  @supports (-moz-appearance: none) {
+    line-height: clamp(
+      calc(var(--unitone--min-line-height) * 1em),
+      calc((var(--unitone--min-line-height) - 0.1) * 1em + (var(--unitone--max-line-height) - (var(--unitone--min-line-height) - 0.1)) * 1rem),
+      calc(var(--unitone--max-line-height) * 1em)
+    );
+  }
+}
+
+$container-max-width: $max-breakpoint * 16px; // = 1280px
+$grid-columns: 12;
+$grid-rows: 7;

package/dist/compatibility/fluid-typography.js

@@ -1 +0,0 @@
-"use strict";function e(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 t(t,n){return function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,u,a=[],l=!0,d=!1;try{if(o=(n=n.call(e)).next,0===t);else for(;!(l=(r=o.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){d=!0,i=e}finally{try{if(!l&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(d)throw i}}return a}}(t,n)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,n):void 0}}(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 n(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 r(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)?r(e,t):void 0}}(e))||t){n&&(e=n);var i=0,o=function(){};return{s:o,n:function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},f:o}}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 u,a=!0,l=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){l=!0,u=e},f:function(){try{a||null==n.return||n.return()}finally{if(l)throw u}}}}function r(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 i="".concat(200,"px 0px"),o=function(e,t){var r,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=i.getValue,u=i.delay,a=!0,l=new ResizeObserver(c(function(e){var i,u=n(e);try{for(u.s();!(i=u.n()).done;){var l=i.value,d=null==o?void 0:o(l);a?(r=d,a=!1):void 0!==d&&d===r||(t(l.target,l),r=d)}}catch(e){u.e(e)}finally{u.f()}},void 0===u?250:u));return l.observe(e),l},u=function(e,t,n){var r=new MutationObserver(function(t){requestAnimationFrame(function(){null!=e&&e.isConnected&&n(t)})});return r.observe(e,t),r},a=function(e,r){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},l=a.getResizeValue,s=a.delay,f=void 0===s?250:s,v=a.observeResize,y=void 0===v||v,b=a.observeIntersection,h=void 0!==b&&b,m=a.observeDirectChildrenResize,p=void 0!==m&&m,g=a.targetMutation,w=a.directChildMutation,A=h&&"undefined"!=typeof IntersectionObserver,O=!A||d(e),z=A&&!O,E=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e;null!=t&&t.isConnected&&(!A||O?(z=!1,r(t)):z=!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),S=function(){null!=e&&e.isConnected&&(!A||O?(z=!0,C()):z=!0)},M=function(){},L=y?p?function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r.getValue,o=r.delay,a=void 0===o?250:o,l=r.onChildList,d=new WeakMap,s=new Set,f=new ResizeObserver(c(function(r){var o,u=!1,a=n(r);try{for(a.s();!(o=a.n()).done;){var l=o.value,c=null==i?void 0:i(l);d.has(l.target)?(void 0!==c&&c===d.get(l.target)||(u=!0),d.set(l.target,c)):d.set(l.target,c)}}catch(e){a.e(e)}finally{a.f()}u&&t(e)},a)),v=function(){var t;Array.from(s).forEach(function(t){t.parentElement!==e&&(f.unobserve(t),s.delete(t),d.delete(t))}),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){s.has(e)||(f.observe(e),s.add(e))})};f.observe(e),v();var y=u(e,{childList:!0},function(n){n.some(function(e){return"childList"===e.type})&&(v(),null==l||l(n),t(e))});return{resizeObserver:f,mutationObserver:y}}(e,S,{getValue:l,delay:f,onChildList:function(){M()}}):{resizeObserver:o(e,S,{getValue:l,delay:f})}:{mutationObserver:null};A&&function(e,n){var r=new IntersectionObserver(function(e){var r=t(e,1)[0];r&&n(r)},{rootMargin:i});r.observe(e)}(e,function(e){(O=e.isIntersecting)&&z&&S()}),null!=g&&g.options&&u(e,g.options,function(e){var t,n;(null!==(t=null===(n=g.shouldApply)||void 0===n?void 0:n.call(g,e))&&void 0!==t?t:0<e.length)&&S()});var V=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,u=void 0===o||o,a=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)})}),l=function(){var t;a.disconnect(),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){a.observe(e,{attributes:!0,attributeFilter:r,attributeOldValue:u})})};return l(),{observer:a,syncObservedChildren:l}}(e,S,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;V&&(M=V.syncObservedChildren),!L.mutationObserver&&V&&u(e,{childList:!0},function(e){e.some(function(e){return"childList"===e.type})&&(M(),S())}),A&&!O||E(e)},l=function(e){var t;return null===(t=e.borderBoxSize)||void 0===t?void 0:t[0].inlineSize},d=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 c(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 u=this;clearTimeout(n),n=setTimeout(function(){e.apply(u,i)},t)}}var s=function(e){var t=e.ownerDocument.defaultView.getComputedStyle(e),n=parseFloat(t.fontSize);n!==parseFloat(t.getPropertyValue("--unitone--result--1em-px"))&&e.style.setProperty("--unitone--result--1em-px",n)},f=Symbol.for("@inc2734/unitone-css/layout-initializers"),v=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[f]||(globalThis[f]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[f])},y=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))})}},b=function(e){var t=v();t&&t.initializers.forEach(function(t){y(t,e)})},h=function(){var e=v();e&&(e.pendingNodes.forEach(function(e){b(e)}),e.pendingNodes.clear(),e.rafId=0)},m=function(){var e=v();e&&!e.observer&&document.body&&(b(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(h))}),e.observer.observe(document.body,{childList:!0,subtree:!0}))};!function(e){var t=e.key,n=e.selector,r=e.initialize,i=e.enabled,o=void 0===i?function(){return!0}:i,u=v();if(u&&!u.initializers.has(t)){var a={selector:n,initialize:r,enabled:o,initialized:new WeakSet};u.initializers.set(t,a),u.observer?y(a,document.body):"loading"!==document.readyState?m():u.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",m,{once:!0}),u.hasDOMContentLoadedListener=!0)}}({key:"compatibility/fluid-typography",selector:'[style*="font-size:"], [data-unitone-layout~="-fluid-typography"]',initialize:function(e){var t=e.ownerDocument;t.defaultView.getComputedStyle(t.documentElement).getPropertyValue("--unitone--is-firefox").trim()&&a(e,s,{getResizeValue:l,targetMutation:{options:{attributes:!0,attributeFilter:["style","data-unitone-layout","class"],characterData:!0},shouldApply:function(){return!0}}})},enabled:function(){return"undefined"!=typeof window&&"undefined"!=typeof document&&!!window.getComputedStyle(document.documentElement).getPropertyValue("--unitone--is-firefox").trim()}});

package/dist/compatibility/index.js

@@ -1 +0,0 @@
-"use strict";function e(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 t(t,n){return function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,o,u,a=[],l=!0,d=!1;try{if(o=(n=n.call(e)).next,0===t);else for(;!(l=(r=o.call(n)).done)&&(a.push(r.value),a.length!==t);l=!0);}catch(e){d=!0,i=e}finally{try{if(!l&&null!=n.return&&(u=n.return(),Object(u)!==u))return}finally{if(d)throw i}}return a}}(t,n)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var r={}.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,n):void 0}}(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 n(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 r(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)?r(e,t):void 0}}(e))||t){n&&(e=n);var i=0,o=function(){};return{s:o,n:function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},f:o}}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 u,a=!0,l=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return a=e.done,e},e:function(e){l=!0,u=e},f:function(){try{a||null==n.return||n.return()}finally{if(l)throw u}}}}function r(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 i="".concat(200,"px 0px"),o=function(e,t){var r,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=i.getValue,u=i.delay,a=!0,l=new ResizeObserver(c(function(e){var i,u=n(e);try{for(u.s();!(i=u.n()).done;){var l=i.value,d=null==o?void 0:o(l);a?(r=d,a=!1):void 0!==d&&d===r||(t(l.target,l),r=d)}}catch(e){u.e(e)}finally{u.f()}},void 0===u?250:u));return l.observe(e),l},u=function(e,t,n){var r=new MutationObserver(function(t){requestAnimationFrame(function(){null!=e&&e.isConnected&&n(t)})});return r.observe(e,t),r},a=function(e,r){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},l=a.getResizeValue,s=a.delay,f=void 0===s?250:s,v=a.observeResize,y=void 0===v||v,b=a.observeIntersection,h=void 0!==b&&b,m=a.observeDirectChildrenResize,p=void 0!==m&&m,g=a.targetMutation,w=a.directChildMutation,A=h&&"undefined"!=typeof IntersectionObserver,O=!A||d(e),z=A&&!O,E=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:e;null!=t&&t.isConnected&&(!A||O?(z=!1,r(t)):z=!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),S=function(){null!=e&&e.isConnected&&(!A||O?(z=!0,C()):z=!0)},M=function(){},L=y?p?function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=r.getValue,o=r.delay,a=void 0===o?250:o,l=r.onChildList,d=new WeakMap,s=new Set,f=new ResizeObserver(c(function(r){var o,u=!1,a=n(r);try{for(a.s();!(o=a.n()).done;){var l=o.value,c=null==i?void 0:i(l);d.has(l.target)?(void 0!==c&&c===d.get(l.target)||(u=!0),d.set(l.target,c)):d.set(l.target,c)}}catch(e){a.e(e)}finally{a.f()}u&&t(e)},a)),v=function(){var t;Array.from(s).forEach(function(t){t.parentElement!==e&&(f.unobserve(t),s.delete(t),d.delete(t))}),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){s.has(e)||(f.observe(e),s.add(e))})};f.observe(e),v();var y=u(e,{childList:!0},function(n){n.some(function(e){return"childList"===e.type})&&(v(),null==l||l(n),t(e))});return{resizeObserver:f,mutationObserver:y}}(e,S,{getValue:l,delay:f,onChildList:function(){M()}}):{resizeObserver:o(e,S,{getValue:l,delay:f})}:{mutationObserver:null};A&&function(e,n){var r=new IntersectionObserver(function(e){var r=t(e,1)[0];r&&n(r)},{rootMargin:i});r.observe(e)}(e,function(e){(O=e.isIntersecting)&&z&&S()}),null!=g&&g.options&&u(e,g.options,function(e){var t,n;(null!==(t=null===(n=g.shouldApply)||void 0===n?void 0:n.call(g,e))&&void 0!==t?t:0<e.length)&&S()});var V=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,u=void 0===o||o,a=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)})}),l=function(){var t;a.disconnect(),Array.from(null!==(t=null==e?void 0:e.children)&&void 0!==t?t:[]).forEach(function(e){a.observe(e,{attributes:!0,attributeFilter:r,attributeOldValue:u})})};return l(),{observer:a,syncObservedChildren:l}}(e,S,{attributeFilter:w.attributeFilter,shouldApply:w.shouldApply,attributeOldValue:w.attributeOldValue}):null;V&&(M=V.syncObservedChildren),!L.mutationObserver&&V&&u(e,{childList:!0},function(e){e.some(function(e){return"childList"===e.type})&&(M(),S())}),A&&!O||E(e)},l=function(e){var t;return null===(t=e.borderBoxSize)||void 0===t?void 0:t[0].inlineSize},d=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 c(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 u=this;clearTimeout(n),n=setTimeout(function(){e.apply(u,i)},t)}}var s=function(e){var t=e.ownerDocument.defaultView.getComputedStyle(e),n=parseFloat(t.fontSize);n!==parseFloat(t.getPropertyValue("--unitone--result--1em-px"))&&e.style.setProperty("--unitone--result--1em-px",n)},f=Symbol.for("@inc2734/unitone-css/layout-initializers"),v=function(){return"undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof Node?null:(globalThis[f]||(globalThis[f]={initializers:new Map,pendingNodes:new Set,observer:null,rafId:0,hasDOMContentLoadedListener:!1}),globalThis[f])},y=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))})}},b=function(e){var t=v();t&&t.initializers.forEach(function(t){y(t,e)})},h=function(){var e=v();e&&(e.pendingNodes.forEach(function(e){b(e)}),e.pendingNodes.clear(),e.rafId=0)},m=function(){var e=v();e&&!e.observer&&document.body&&(b(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(h))}),e.observer.observe(document.body,{childList:!0,subtree:!0}))};!function(e){var t=e.key,n=e.selector,r=e.initialize,i=e.enabled,o=void 0===i?function(){return!0}:i,u=v();if(u&&!u.initializers.has(t)){var a={selector:n,initialize:r,enabled:o,initialized:new WeakSet};u.initializers.set(t,a),u.observer?y(a,document.body):"loading"!==document.readyState?m():u.hasDOMContentLoadedListener||(document.addEventListener("DOMContentLoaded",m,{once:!0}),u.hasDOMContentLoadedListener=!0)}}({key:"compatibility/fluid-typography",selector:'[style*="font-size:"], [data-unitone-layout~="-fluid-typography"]',initialize:function(e){var t=e.ownerDocument;t.defaultView.getComputedStyle(t.documentElement).getPropertyValue("--unitone--is-firefox").trim()&&a(e,s,{getResizeValue:l,targetMutation:{options:{attributes:!0,attributeFilter:["style","data-unitone-layout","class"],characterData:!0},shouldApply:function(){return!0}}})},enabled:function(){return"undefined"!=typeof window&&"undefined"!=typeof document&&!!window.getComputedStyle(document.documentElement).getPropertyValue("--unitone--is-firefox").trim()}});

package/src/behaviors/_typography.scss

@@ -1,21 +0,0 @@
-@use '../variables' as variables;
-
-@mixin typography() {
-  [data-unitone-layout~="-root\:typography"] {
-    font-size: #{ variables.$root-font-size };
-  }
-
-  [data-unitone-layout~="-typography"],
-  [data-unitone-layout~="-typography\:em"],
-  [data-unitone-layout~="-typography\:rem"] {
-    @include variables.typography();
-  }
-
-  [data-unitone-layout~="-typography\:em"] {
-    @include variables.typography-em();
-  }
-
-  [data-unitone-layout~="-fluid-typography"] {
-    @include variables.fluid-typography();
-  }
-}

package/src/compatibility/fluid-typography.js

@@ -1,18 +0,0 @@
-import { result1emPxForFireFoxObserver } from '../library';
-import { registerLayoutInitializer } from '../register-layout-initializer';
-
-const isFirefox = () => {
-  if ('undefined' === typeof window || 'undefined' === typeof document) {
-    return false;
-  }
-
-  const computedStyle = window.getComputedStyle(document.documentElement);
-  return !!computedStyle.getPropertyValue('--unitone--is-firefox').trim();
-};
-
-registerLayoutInitializer({
-  key: 'compatibility/fluid-typography',
-  selector: '[style*="font-size:"], [data-unitone-layout~="-fluid-typography"]',
-  initialize: result1emPxForFireFoxObserver,
-  enabled: isFirefox,
-});

package/src/foundation/_foundation-core.scss

@@ -1,135 +0,0 @@
-@use '../variables' as variables;
-
-:where(:not(a):not(b):not(bdi):not(bdo):not(cite):not(data):not(del):not(dfn):not(em):not(i):not(ins):not(mark):not(q):not(ruby):not(s):not(samp):not(small):not(span):not(strong):not(sub):not(sup):not(time):not(u):not(svg)) {
-  @include variables.typography();
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-a {
-  text-underline-offset: 0.1em;
-  text-decoration-thickness: 1px;
-}
-
-:where(
-  address,
-  article,
-  aside,
-  blockquote,
-  details,
-  dialog,
-  dd,
-  div,
-  dl,
-  dt,
-  fieldset,
-  figcaption,
-  figure,
-  footer,
-  form,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  header,
-  hgroup,
-  hr,
-  li,
-  main,
-  nav,
-  ol,
-  p,
-  pre,
-  section,
-  table,
-  ul
-) {
-  margin: 0;
-  padding: 0;
-}
-
-:where(li) {
-  margin-inline-start: 1.5em;
-}
-
-small {
-  font-size: smaller;
-}
-
-sup {
-  font-size: smaller;
-
-  @supports (font-variant-position: super) {
-    font-variant-position: super;
-    vertical-align: baseline;
-    font-size: inherit;
-  }
-}
-
-sub {
-  font-size: smaller;
-
-  @supports (font-variant-position: sub) {
-    font-variant-position: sub;
-    vertical-align: baseline;
-    font-size: inherit;
-  }
-}
-
-img,
-video {
-  height: auto;
-  max-width: 100%;
-}
-
-figure {
-  max-width: 100%;
-}
-
-figcaption {
-  --unitone--font-size: -2;
-
-  margin: var(--unitone--s-2) 0 0;
-  display: block;
-  width: 0;
-  min-width: fit-content !important;
-  text-align: start;
-}
-
-pre {
-  text-spacing-trim: space-all;
-}
-
-:where(
-  button,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"],
-  [role="button"],
-  [role="tab"],
-  [role="switch"],
-  label,
-  select,
-  input[type="checkbox"],
-  input[type="radio"],
-  input[type="range"], /* スライダー */
-  input[type="color"], /* カラーピッカー */
-  summary
- ) {
-  cursor: pointer;
-}
-
-:where(
-  button:disabled,
-  input:disabled,
-  select:disabled,
-  [aria-disabled="true"]
-) {
-  cursor: not-allowed;
-}

package/src/foundation/_foundation.scss

@@ -1,3 +0,0 @@
-@forward './foundation-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/foundation/foundation' will be removed in a future release. Use '@inc2734/unitone-css/src/foundation' instead.";

package/src/helper/_helper.scss

@@ -1,3 +0,0 @@
-@forward '../behaviors';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/helper/helper' will be removed in a future release. Use '@inc2734/unitone-css/src/behaviors' instead.";

package/src/layout-primitives/_layout-primitives-core.scss

@@ -1,49 +0,0 @@
-@use 'both-sides';
-@use 'center';
-@use 'cluster';
-@use 'container';
-@use 'cover';
-@use 'decorator';
-@use 'dialog';
-@use 'divider';
-@use 'float';
-@use 'frame';
-@use 'gutters';
-@use 'layers';
-@use 'marquee';
-@use 'masonry';
-@use 'popover';
-@use 'reel';
-@use 'responsive-grid';
-@use 'stack';
-@use 'switcher';
-@use 'text';
-@use 'texture';
-@use 'vertical-ends';
-@use 'vertical-writing';
-@use 'with-sidebar';
-
-@include both-sides.both-sides();
-@include center.center();
-@include cluster.cluster();
-@include container.container();
-@include cover.cover();
-@include decorator.decorator();
-@include dialog.dialog();
-@include divider.divider();
-@include float.float();
-@include frame.frame();
-@include gutters.gutters();
-@include layers.layers();
-@include marquee.marquee();
-@include masonry.masonry();
-@include popover.popover();
-@include reel.reel();
-@include responsive-grid.responsive-grid();
-@include stack.stack();
-@include switcher.switcher();
-@include text.text();
-@include texture.texture();
-@include vertical-ends.vertical-ends();
-@include vertical-writing.vertical-writing();
-@include with-sidebar.with-sidebar();

package/src/layout-primitives/_layout-primitives.scss

@@ -1,3 +0,0 @@
-@forward './layout-primitives-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/layout-primitives' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives' instead.";

package/src/layout-primitives/both-sides/_both-sides-core.scss

@@ -1,31 +0,0 @@
-@mixin abstract-both-sides() {
-  --unitone--gap: var(--unitone--global--gap);
-  --unitone--column-gap: var(--unitone--gap);
-  --unitone--row-gap: var(--unitone--gap);
-  --unitone--align-items: start;
-  --unitone--content-width: fit-content;
-  --unitone--content-max-width: 100%;
-
-  display: flex;
-  column-gap: var(--unitone--column-gap);
-  row-gap: var(--unitone--row-gap);
-  flex-wrap: wrap;
-  align-items: var(--unitone--align-items);
-  justify-content: space-between;
-
-  > * {
-    --unitone--max-width: var(--unitone--content-max-width);
-    --unitone--flex-basis: var(--unitone--content-width);
-
-    flex-basis: var(--unitone--flex-basis);
-    flex-grow: 0;
-    max-width: min(100%, var(--unitone--max-width));
-    min-width: 0;
-  }
-}
-
-@mixin both-sides() {
-  [data-unitone-layout~="both-sides"] {
-    @include abstract-both-sides();
-  }
-}

package/src/layout-primitives/both-sides/_both-sides.scss

@@ -1,3 +0,0 @@
-@forward './both-sides-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/both-sides/both-sides' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/both-sides' instead.";

package/src/layout-primitives/center/_center-core.scss

@@ -1,22 +0,0 @@
-@mixin abstract-center() {
-  --unitone--gutters: 0px;
-  --unitone--max-width: var(--unitone--measure);
-
-  box-sizing: content-box;
-  margin-right: auto;
-  margin-left: auto;
-  max-width: var(--unitone--max-width);
-  padding-right: var(--unitone--gutters);
-  padding-left: var(--unitone--gutters);
-  width: fit-content;
-
-  &[data-unitone-layout~="-with-text"] {
-    text-align: center;
-  }
-}
-
-@mixin center() {
-  [data-unitone-layout~="center"] {
-    @include abstract-center();
-  }
-}

package/src/layout-primitives/center/_center.scss

@@ -1,3 +0,0 @@
-@forward './center-core';
-
-@warn "Deprecated Sass entry '@inc2734/unitone-css/src/layout-primitives/center/center' will be removed in a future release. Use '@inc2734/unitone-css/src/layout-primitives/center' instead.";