unit.gl 0.1.11 → 0.1.13

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="https://raw.githubusercontent.com/stylescape/brand/master/src/logo/logo-transparant.png" width="20%" height="20%" alt="Stylescape Logo">
+    <img src="https://raw.githubusercontent.com/stylescape/brand/master/src/logo/logo-transparant.png" width="20%" alt="Stylescape Logo">
 </p>
 <h1 align="center" style='border-bottom: none;'>unit.gl</h1>
 <h3 align="center">Dynamic Layout Engine</h3>
@@ -78,7 +78,7 @@ Please refer to the [contribution guidelines](.github/CONTRIBUTING.md) for infor
 
 #### Copyright
 
-Copyright &copy; 2023 [Scape Agency BV](https://www.scape.agency/ "Scape Agency website"). All Rights Reserved.
+Copyright &copy; 2025 [Scape Agency BV](https://www.scape.agency/ "Scape Agency website"). All Rights Reserved.
 
 #### License
 

package/css/unit.gl.css

@@ -148,17 +148,12 @@ main {
   display: block;
 }
 
-.ratio_1x1 {
+.aspect_ratio--1x1 {
   position: relative;
   width: 100%;
   aspect-ratio: 1;
 }
-.ratio_1x1::before {
-  content: "";
-  display: block;
-  padding-top: calc(1 / 1 * 100%);
-}
-.ratio_1x1 > * {
+.aspect_ratio--1x1 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -168,17 +163,12 @@ main {
   height: 100%;
 }
 
-.ratio_1x2 {
+.aspect_ratio--1x2 {
   position: relative;
   width: 100%;
   aspect-ratio: 0.5;
 }
-.ratio_1x2::before {
-  content: "";
-  display: block;
-  padding-top: calc(2 / 1 * 100%);
-}
-.ratio_1x2 > * {
+.aspect_ratio--1x2 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -188,17 +178,12 @@ main {
   height: 100%;
 }
 
-.ratio_2x1 {
+.aspect_ratio--2x1 {
   position: relative;
   width: 100%;
   aspect-ratio: 2;
 }
-.ratio_2x1::before {
-  content: "";
-  display: block;
-  padding-top: calc(1 / 2 * 100%);
-}
-.ratio_2x1 > * {
+.aspect_ratio--2x1 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -208,17 +193,12 @@ main {
   height: 100%;
 }
 
-.ratio_1x3 {
+.aspect_ratio--1x3 {
   position: relative;
   width: 100%;
   aspect-ratio: 0.3333333333;
 }
-.ratio_1x3::before {
-  content: "";
-  display: block;
-  padding-top: calc(3 / 1 * 100%);
-}
-.ratio_1x3 > * {
+.aspect_ratio--1x3 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -228,17 +208,12 @@ main {
   height: 100%;
 }
 
-.ratio_3x1 {
+.aspect_ratio--3x1 {
   position: relative;
   width: 100%;
   aspect-ratio: 3;
 }
-.ratio_3x1::before {
-  content: "";
-  display: block;
-  padding-top: calc(1 / 3 * 100%);
-}
-.ratio_3x1 > * {
+.aspect_ratio--3x1 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -248,17 +223,12 @@ main {
   height: 100%;
 }
 
-.ratio_1x4 {
+.aspect_ratio--1x4 {
   position: relative;
   width: 100%;
   aspect-ratio: 0.25;
 }
-.ratio_1x4::before {
-  content: "";
-  display: block;
-  padding-top: calc(4 / 1 * 100%);
-}
-.ratio_1x4 > * {
+.aspect_ratio--1x4 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -268,17 +238,12 @@ main {
   height: 100%;
 }
 
-.ratio_4x1 {
+.aspect_ratio--4x1 {
   position: relative;
   width: 100%;
   aspect-ratio: 4;
 }
-.ratio_4x1::before {
-  content: "";
-  display: block;
-  padding-top: calc(1 / 4 * 100%);
-}
-.ratio_4x1 > * {
+.aspect_ratio--4x1 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -288,17 +253,12 @@ main {
   height: 100%;
 }
 
-.ratio_3x2 {
+.aspect_ratio--3x2 {
   position: relative;
   width: 100%;
   aspect-ratio: 1.5;
 }
-.ratio_3x2::before {
-  content: "";
-  display: block;
-  padding-top: calc(2 / 3 * 100%);
-}
-.ratio_3x2 > * {
+.aspect_ratio--3x2 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -308,17 +268,12 @@ main {
   height: 100%;
 }
 
-.ratio_2x3 {
+.aspect_ratio--2x3 {
   position: relative;
   width: 100%;
   aspect-ratio: 0.6666666667;
 }
-.ratio_2x3::before {
-  content: "";
-  display: block;
-  padding-top: calc(3 / 2 * 100%);
-}
-.ratio_2x3 > * {
+.aspect_ratio--2x3 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -328,17 +283,12 @@ main {
   height: 100%;
 }
 
-.ratio_4x3 {
+.aspect_ratio--4x3 {
   position: relative;
   width: 100%;
   aspect-ratio: 1.3333333333;
 }
-.ratio_4x3::before {
-  content: "";
-  display: block;
-  padding-top: calc(3 / 4 * 100%);
-}
-.ratio_4x3 > * {
+.aspect_ratio--4x3 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -348,17 +298,12 @@ main {
   height: 100%;
 }
 
-.ratio_3x4 {
+.aspect_ratio--3x4 {
   position: relative;
   width: 100%;
   aspect-ratio: 0.75;
 }
-.ratio_3x4::before {
-  content: "";
-  display: block;
-  padding-top: calc(4 / 3 * 100%);
-}
-.ratio_3x4 > * {
+.aspect_ratio--3x4 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -368,17 +313,12 @@ main {
   height: 100%;
 }
 
-.ratio_16x9 {
+.aspect_ratio--16x9 {
   position: relative;
   width: 100%;
   aspect-ratio: 1.7777777778;
 }
-.ratio_16x9::before {
-  content: "";
-  display: block;
-  padding-top: calc(9 / 16 * 100%);
-}
-.ratio_16x9 > * {
+.aspect_ratio--16x9 > * {
   position: absolute;
   top: 0;
   right: 0;
@@ -388,17 +328,12 @@ main {
   height: 100%;
 }
 
-.ratio_16x10 {
+.aspect_ratio--16x10 {
   position: relative;
   width: 100%;
   aspect-ratio: 1.6;
 }
-.ratio_16x10::before {
-  content: "";
-  display: block;
-  padding-top: calc(10 / 16 * 100%);
-}
-.ratio_16x10 > * {
+.aspect_ratio--16x10 > * {
   position: absolute;
   top: 0;
   right: 0;

package/css/unit.gl.min.css

@@ -1,2 +1,2 @@
-*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{border:0;font-size:100%;font:inherit;margin:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}.ratio_1x1{aspect-ratio:1;position:relative;width:100%}.ratio_1x1:before{content:"";display:block;padding-top:100%}.ratio_1x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_1x2{aspect-ratio:.5;position:relative;width:100%}.ratio_1x2:before{content:"";display:block;padding-top:200%}.ratio_1x2>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_2x1{aspect-ratio:2;position:relative;width:100%}.ratio_2x1:before{content:"";display:block;padding-top:50%}.ratio_2x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_1x3{aspect-ratio:.3333333333;position:relative;width:100%}.ratio_1x3:before{content:"";display:block;padding-top:300%}.ratio_1x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_3x1{aspect-ratio:3;position:relative;width:100%}.ratio_3x1:before{content:"";display:block;padding-top:33.33333%}.ratio_3x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_1x4{aspect-ratio:.25;position:relative;width:100%}.ratio_1x4:before{content:"";display:block;padding-top:400%}.ratio_1x4>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_4x1{aspect-ratio:4;position:relative;width:100%}.ratio_4x1:before{content:"";display:block;padding-top:25%}.ratio_4x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_3x2{aspect-ratio:1.5;position:relative;width:100%}.ratio_3x2:before{content:"";display:block;padding-top:66.66667%}.ratio_3x2>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_2x3{aspect-ratio:.6666666667;position:relative;width:100%}.ratio_2x3:before{content:"";display:block;padding-top:150%}.ratio_2x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_4x3{aspect-ratio:1.3333333333;position:relative;width:100%}.ratio_4x3:before{content:"";display:block;padding-top:75%}.ratio_4x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_3x4{aspect-ratio:.75;position:relative;width:100%}.ratio_3x4:before{content:"";display:block;padding-top:133.33333%}.ratio_3x4>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_16x9{aspect-ratio:1.7777777778;position:relative;width:100%}.ratio_16x9:before{content:"";display:block;padding-top:56.25%}.ratio_16x9>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.ratio_16x10{aspect-ratio:1.6;position:relative;width:100%}.ratio_16x10:before{content:"";display:block;padding-top:62.5%}.ratio_16x10>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.guide{background-attachment:local;height:100%;margin:0;opacity:1}.guide,.guide--layer{left:0;min-height:100vh;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide--layer{display:none}.guide--layer.active{display:block!important}.guide--graph,.guide--graph_centered{background-attachment:local;background-image:repeating-linear-gradient(90deg,hsla(188,6%,46%,.483) 0,hsla(188,6%,46%,.483) 1px,transparent 0,transparent 1.25rem),repeating-linear-gradient(180deg,hsla(188,6%,46%,.483) 0,hsla(188,6%,46%,.483) 1px,transparent 0,transparent 1.25rem);background-repeat:repeat;background-size:1.25rem 1.25rem;height:100%;left:0;margin:0;min-height:100vh;opacity:1;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide--graph_centered{background-position:calc(50% - 7.5rem) 0}.guide--baseline{background-attachment:local;background-image:repeating-linear-gradient(180deg,#00c8ff 0 1px,transparent 1px 100%);background-repeat:repeat;background-size:100% 1.25rem;height:100%;left:0;margin:0;min-height:100vh;opacity:1;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(8.57143px + 1.07143vw)}}@media screen and (min-width:1440px){html{font-size:24px}}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}
+*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{border:0;font-size:100%;font:inherit;margin:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}.aspect_ratio--1x1{aspect-ratio:1;position:relative;width:100%}.aspect_ratio--1x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--1x2{aspect-ratio:.5;position:relative;width:100%}.aspect_ratio--1x2>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--2x1{aspect-ratio:2;position:relative;width:100%}.aspect_ratio--2x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--1x3{aspect-ratio:.3333333333;position:relative;width:100%}.aspect_ratio--1x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--3x1{aspect-ratio:3;position:relative;width:100%}.aspect_ratio--3x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--1x4{aspect-ratio:.25;position:relative;width:100%}.aspect_ratio--1x4>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--4x1{aspect-ratio:4;position:relative;width:100%}.aspect_ratio--4x1>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--3x2{aspect-ratio:1.5;position:relative;width:100%}.aspect_ratio--3x2>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--2x3{aspect-ratio:.6666666667;position:relative;width:100%}.aspect_ratio--2x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--4x3{aspect-ratio:1.3333333333;position:relative;width:100%}.aspect_ratio--4x3>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--3x4{aspect-ratio:.75;position:relative;width:100%}.aspect_ratio--3x4>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--16x9{aspect-ratio:1.7777777778;position:relative;width:100%}.aspect_ratio--16x9>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.aspect_ratio--16x10{aspect-ratio:1.6;position:relative;width:100%}.aspect_ratio--16x10>*{bottom:0;right:0}.aspect_ratio--16x10>*,.guide{height:100%;left:0;position:absolute;top:0;width:100%}.guide{background-attachment:local;margin:0;opacity:1}.guide,.guide--layer{min-height:100vh;pointer-events:none;z-index:9999}.guide--layer{display:none;left:0;position:absolute;top:0;width:100%}.guide--layer.active{display:block!important}.guide--graph,.guide--graph_centered{background-attachment:local;background-image:repeating-linear-gradient(90deg,hsla(188,6%,46%,.483) 0,hsla(188,6%,46%,.483) 1px,transparent 0,transparent 1.25rem),repeating-linear-gradient(180deg,hsla(188,6%,46%,.483) 0,hsla(188,6%,46%,.483) 1px,transparent 0,transparent 1.25rem);background-repeat:repeat;background-size:1.25rem 1.25rem;height:100%;left:0;margin:0;min-height:100vh;opacity:1;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide--graph_centered{background-position:calc(50% - 7.5rem) 0}.guide--baseline{background-attachment:local;background-image:repeating-linear-gradient(180deg,#00c8ff 0 1px,transparent 1px 100%);background-repeat:repeat;background-size:100% 1.25rem;height:100%;left:0;margin:0;min-height:100vh;opacity:1;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(8.57143px + 1.07143vw)}}@media screen and (min-width:1440px){html{font-size:24px}}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}
 /*# sourceMappingURL=to.css.map */

package/js/GridManager.js

@@ -1,4 +1,7 @@
-export class GridManager {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridManager = void 0;
+class GridManager {
     constructor() {
         this.STORAGE_KEY = 'unitgl:grid:visibility';
         this.visibilityMap = {};
@@ -10,7 +13,7 @@ export class GridManager {
         try {
             this.visibilityMap = JSON.parse(localStorage.getItem(this.STORAGE_KEY) || '{}');
         }
-        catch (_a) {
+        catch {
             this.visibilityMap = {};
         }
     }
@@ -60,4 +63,5 @@ export class GridManager {
         });
     }
 }
+exports.GridManager = GridManager;
 //# sourceMappingURL=GridManager.js.map

package/js/GridManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridManager.js","sourceRoot":"","sources":["../../src/ts/GridManager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"GridManager.js","sourceRoot":"","sources":["../../src/ts/GridManager.ts"],"names":[],"mappings":"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"}

package/js/unit.gl.js

@@ -1,5 +1,7 @@
-import { GridManager } from './GridManager.js';
-new GridManager();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const GridManager_js_1 = require("./GridManager.js");
+new GridManager_js_1.GridManager();
 document.addEventListener('DOMContentLoaded', () => {
     console.log('[unit.gl] Test site initialized');
     const current = location.pathname.split('/').pop();

package/js/unit.gl.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ts/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,IAAI,WAAW,EAAE,CAAC;AAElB,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;IACjD,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;IAG/C,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,OAAO,IAAI,CAAC,CAAC;IACnE,IAAI,UAAU,EAAE,CAAC;QACf,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;AAGH,CAAC,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ts/index.ts"],"names":[],"mappings":";;AAEA,qDAA+C;AAE/C,IAAI,4BAAW,EAAE,CAAC;AAElB,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;IACjD,OAAO,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;IAG/C,MAAM,OAAO,GAAG,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,OAAO,IAAI,CAAC,CAAC;IACnE,IAAI,UAAU,EAAE,CAAC;QACf,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;AAGH,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unit.gl",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Dynamic Layout Engine.",
   "keywords": [
     "unit.gl",

package/scss/_reset.scss

@@ -12,6 +12,7 @@
 ///
 ////
 
+
 // ============================================================================
 // Use
 // ============================================================================
@@ -30,6 +31,7 @@
     vertical-align: baseline; // Aligns elements to the baseline to avoid layout shifts
 }
 
+
 // Apply the reset mixin to all elements
 *,
 a,

package/scss/classes/_ratio.scss

@@ -32,47 +32,47 @@
 // ============================================================================
 
 @each $name, $ratio in maps.$ratio_map {
-    .ratio_#{$name} {
+    .aspect_ratio--#{$name} {
         @include mixins.aspect_ratio(list.nth($ratio, 1), list.nth($ratio, 2));
     }
 }
 
 // .ratio_1x1 {
-//     @include aspect_ratio_1x1;
+//     @include aspect_ratio--1x1;
 // }
 // .ratio_1x2 {
-//     @include aspect_ratio_1x2;
+//     @include aspect_ratio--1x2;
 // }
 // .ratio_2x1 {
-//     @include aspect_ratio_2x1;
+//     @include aspect_ratio--2x1;
 // }
 // .ratio_1x3 {
-//     @include aspect_ratio_1x3;
+//     @include aspect_ratio--1x3;
 // }
 // .ratio_3x1 {
-//     @include aspect_ratio_3x1;
+//     @include aspect_ratio--3x1;
 // }
 // .ratio_1x4 {
-//     @include aspect_ratio_1x4;
+//     @include aspect_ratio--1x4;
 // }
 // .ratio_4x1 {
-//     @include aspect_ratio_4x1;
+//     @include aspect_ratio--4x1;
 // }
 // .ratio_3x2 {
-//     @include aspect_ratio_3x2;
+//     @include aspect_ratio--3x2;
 // }
 // .ratio_2x3 {
-//     @include aspect_ratio_2x3;
+//     @include aspect_ratio--2x3;
 // }
 // .ratio_4x3 {
-//     @include aspect_ratio_4x3;
+//     @include aspect_ratio--4x3;
 // }
 // .ratio_3x4 {
-//     @include aspect_ratio_3x4;
+//     @include aspect_ratio--3x4;
 // }
 // .ratio_16x9 {
-//     @include aspect_ratio_16x9;
+//     @include aspect_ratio--16x9;
 // }
 // .ratio_16x10 {
-//     @include aspect_ratio_16x10;
+//     @include aspect_ratio--16x10;
 // }

package/scss/mixins/_device.scss

@@ -19,6 +19,7 @@
 ///
 ////
 
+
 // ============================================================================
 // Use
 // ============================================================================
@@ -27,6 +28,7 @@
 @use "../variables" as *;
 @use "../maps" as *;
 
+
 // ============================================================================
 // Mixins
 // ============================================================================

package/scss/mixins/_display.scss

@@ -26,6 +26,7 @@
 @use "../variables" as *;
 @use "../maps" as *;
 
+
 // ============================================================================
 // Mixins
 // ============================================================================

package/scss/mixins/_ratio.scss

@@ -8,7 +8,7 @@
 /// using `padding-top` for broader browser compatibility.
 ///
 /// Built from a shared `$ratio-map`, this module auto-generates both semantic
-/// mixins (e.g. `aspect_ratio_16x9`) and utility classes (e.g. `.ratio_16x9`).
+/// mixins (e.g. `aspect_ratio--16x9`) and utility classes (e.g. `.ratio_16x9`).
 ///
 /// @file _ratio.scss
 /// @title Ratio Mixins Module
@@ -63,11 +63,11 @@
     aspect-ratio: math.div($width, $height); // Native CSS support
 
     // Fallback for legacy browsers
-    &::before {
-        content: "";
-        display: block;
-        padding-top: calc((#{$height} / #{$width}) * 100%);
-    }
+    // &::before {
+    //     content: "";
+    //     display: block;
+    //     padding-top: calc((#{$height} / #{$width}) * 100%);
+    // }
 
     > * {
         position: absolute;
@@ -84,42 +84,48 @@
 // Semantic Mixins
 // ============================================================================
 
-@mixin aspect_ratio_1x1 {
+@mixin aspect_ratio--1x1 {
     @include aspect_ratio(1, 1);
 }
-@mixin aspect_ratio_1x2 {
+@mixin aspect_ratio--1x2 {
     @include aspect_ratio(1, 2);
 }
-@mixin aspect_ratio_2x1 {
+@mixin aspect_ratio--2x1 {
     @include aspect_ratio(2, 1);
 }
-@mixin aspect_ratio_1x3 {
+@mixin aspect_ratio--1x3 {
     @include aspect_ratio(1, 3);
 }
-@mixin aspect_ratio_3x1 {
+@mixin aspect_ratio--3x1 {
     @include aspect_ratio(3, 1);
 }
-@mixin aspect_ratio_1x4 {
+@mixin aspect_ratio--1x4 {
     @include aspect_ratio(1, 4);
 }
-@mixin aspect_ratio_4x1 {
+@mixin aspect_ratio--4x1 {
     @include aspect_ratio(4, 1);
 }
-@mixin aspect_ratio_3x2 {
+@mixin aspect_ratio--3x2 {
     @include aspect_ratio(3, 2);
 }
-@mixin aspect_ratio_2x3 {
+@mixin aspect_ratio--2x3 {
     @include aspect_ratio(2, 3);
 }
-@mixin aspect_ratio_4x3 {
+@mixin aspect_ratio--4x3 {
     @include aspect_ratio(4, 3);
 }
-@mixin aspect_ratio_3x4 {
+@mixin aspect_ratio--3x4 {
     @include aspect_ratio(3, 4);
 }
-@mixin aspect_ratio_16x9 {
+@mixin aspect_ratio--16x9 {
     @include aspect_ratio(16, 9);
 }
-@mixin aspect_ratio_16x10 {
+@mixin aspect_ratio--9x16 {
+    @include aspect_ratio(9, 16);
+}
+@mixin aspect_ratio--16x10 {
     @include aspect_ratio(16, 10);
 }
+@mixin aspect_ratio--10x16 {
+    @include aspect_ratio(10, 16);
+}

package/scss/mixins/_unit.scss

@@ -31,7 +31,8 @@
 ///
 /// @name q
 /// @param {Number} $multiplier - The multiplier to apply to the base Kyū unit.
-/// @param {String} $property - The CSS property to which the calculated value is applied.
+/// @param {String} $property - The CSS property to which the calculated value
+/// is applied.
 ///
 /// @example scss - Usage
 ///   .element {
@@ -47,10 +48,14 @@
 /// minimum and maximum viewport width, ensuring a smooth transition.
 ///
 /// @name fluid_type
-/// @param {Length} $min_vw - The minimum viewport width where the fluid scaling starts.
-/// @param {Length} $max_vw - The maximum viewport width where the fluid scaling ends.
-/// @param {Length} $min_font_size - The minimum font size for the smallest viewport.
-/// @param {Length} $max_font_size - The maximum font size for the largest viewport.
+/// @param {Length} $min_vw - The minimum viewport width where the fluid
+/// scaling starts.
+/// @param {Length} $max_vw - The maximum viewport width where the fluid
+/// scaling ends.
+/// @param {Length} $min_font_size - The minimum font size for the smallest
+/// viewport.
+/// @param {Length} $max_font_size - The maximum font size for the largest
+/// viewport.
 ///
 /// @example scss - Usage
 ///   html {

package/scss/tags/_index.scss

@@ -12,10 +12,12 @@
 ///
 ////
 
+
 // ============================================================================
 // Use
 // ============================================================================
 
+
 // ============================================================================
 // Forward
 // ============================================================================

package/scss/tags/_unit.scss

@@ -12,6 +12,7 @@
 ///
 ////
 
+
 // ============================================================================
 // Use
 // ============================================================================
@@ -19,6 +20,7 @@
 @use "../variables" as *;
 @use "../mixins" as *;
 
+
 // ============================================================================
 // Classes
 // ============================================================================

package/scss/variables/_color.scss

@@ -32,6 +32,8 @@ $guide--color: rgb(0, 200, 255);
 $guide--graph_primary: rgba(111, 124, 126, 0.483);
 
 $guide--bleed_primary: rgba(178, 51, 170, 0.5);
+
+
 ///
 /// Primary Guide Color
 /// ---------------------------------------------------------------------------

package/scss/variables/_index.scss

@@ -61,4 +61,9 @@
 ///
 @forward "unit"; // Measurement units and spacing
 
+
+//////
+/// Forwards variables that define layout layers and z-indexing to manage the
+/// stacking order of elements within the design.
+///
 @forward "guide";

package/scss/variables/_scale.scss

@@ -18,12 +18,14 @@
 ///
 ////
 
+
 // ============================================================================
 // Use
 // ============================================================================
 
 @use "unit" as *;
 
+
 // ============================================================================
 // Variables
 // ============================================================================

package/scss/variables/_unit.scss

@@ -35,26 +35,26 @@
 
 ///
 /// The base unit in the Kyū measurement system. It represents 1/16th of a rem,
-/// which is equivalent to 1px or 0.25mm.
+/// which is equivalent to 1px in digital design or 0.25mm in physical design.
 ///
 /// @name $q
 /// @type Length
 ///
-$q: 0.0625rem !default; // 1px, or 0.25mm
+$q: 0.0625rem !default; // 1px in digital design, or 0.25mm in physical design
 
 ///
 /// The minimum Kyū size used for fluid typography.
 ///
-/// @type Length
 /// @name $q_min
+/// @type Length
 ///
 $q_min: 0.75px !default;
 
 ///
 /// The maximum Kyū size used for fluid typography.
 ///
-/// @type Length
 /// @name $q_max
+/// @type Length
 ///
 $q_max: 1.5px !default;
 
@@ -62,8 +62,8 @@ $q_max: 1.5px !default;
 /// The minimum font size calculated using the minimum Kyū size, based on
 /// the rem unit.
 ///
-/// @type Length
 /// @name $font_min
+/// @type Length
 ///
 $font_min: calc((1rem / $q) * $q_min) !default;
 
@@ -71,8 +71,8 @@ $font_min: calc((1rem / $q) * $q_min) !default;
 /// The maximum font size calculated using the maximum Kyū size, based on
 /// the rem unit.
 ///
-/// @type Length
 /// @name $font_max
+/// @type Length
 ///
 $font_max: calc((1rem / $q) * $q_max) !default;
 

package/scss/variables/_view.scss

@@ -33,12 +33,14 @@
 ///
 ////
 
+
 // ============================================================================
 // Use
 // ============================================================================
 
 @use "sass:map";
 
+
 // ============================================================================
 // Variables
 // ============================================================================
@@ -147,7 +149,8 @@ $media_sl: map.get($breakpoints, sl) !default;
 ///
 $media_dif: calc($media_sl - $media_xs);
 
-// Uncomment below if you want to use the following predefined breakpoints for various devices:
+// Uncomment below if you want to use the following predefined breakpoints 
+// for various devices:
 
 // $media_min: 320px !default;  // Mobile
 // $media_med: 640px !default;  // Tablet