release: version 2025.1.22

package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-forge.helpers",
-  "version": "2025.1.18",
+  "version": "2025.1.22",
   "description": "Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.",
   "type": "module",
   "main": "helpers.css",

src/all.css

@@ -1,10 +1,13 @@
+@import './units/all.css';
+
 @import './columns/all.css';
 
 @import './inline.css';
 @import './flex.css';
 @import './grid.css';
 @import './gap.css';
 
+@import './appearance.css';
 @import './background.css';
 @import './border.css';
 @import './clear.css';
@@ -15,12 +18,20 @@
 @import './float.css';
 @import './image.css';
 @import './margin.css';
+@import './mix-blend-mode.css';
 @import './op.css';
 @import './order.css';
-@import './ov.css';
+@import './outline.css';
 @import './padding.css';
+@import './pointer-events.css';
 @import './position.css';
 @import './radius.css';
+@import './resize.css';
+@import './scroll.css';
 @import './size.css';
 @import './text.css';
+@import './touch-action.css';
+@import './transition.css';
+@import './user-select.css';
+@import './will-change.css';
 @import './z.css';

src/appearance.css

@@ -0,0 +1,4 @@
+.ap\:n { appearance: none }
+.ap\:a { appearance: auto }
+.ap\:m { appearance: menulist-button }
+.ap\:tf { appearance: textfield }

src/background.css

@@ -1,64 +1,64 @@
 .bg\:n { background: none }
 
-.bgi\:n { background-image: none }
+.bg\:i\:n { background-image: none }
 
-.bga\:f { background-attachment: fixed }
-.bga\:s { background-attachment: scroll }
+.bg\:a\:f { background-attachment: fixed }
+.bg\:a\:s { background-attachment: scroll }
 
-.bgc\:t { background-color: transparent }
+.bg\:c\:t { background-color: transparent }
 
-.bgb\:c { background-blend-mode: color }
-.bgb\:cb { background-blend-mode: color-burn }
-.bgb\:cd { background-blend-mode: color-dodge }
-.bgb\:d { background-blend-mode: darken }
-.bgb\:diff { background-blend-mode: difference }
-.bgb\:e { background-blend-mode: exclusion }
-.bgb\:hl { background-blend-mode: hard-light }
-.bgb\:h { background-blend-mode: hue }
-.bgb\:l { background-blend-mode: lighten }
-.bgb\:lum { background-blend-mode: luminosity }
-.bgb\:m { background-blend-mode: multiply }
-.bgb\:n { background-blend-mode: normal }
-.bgb\:o { background-blend-mode: overlay }
-.bgb\:s { background-blend-mode: saturation }
-.bgb\:sc { background-blend-mode: screen }
-.bgb\:sl { background-blend-mode: soft-light }
+.bg\:b\:c { background-blend-mode: color }
+.bg\:b\:cb { background-blend-mode: color-burn }
+.bg\:b\:cd { background-blend-mode: color-dodge }
+.bg\:b\:d { background-blend-mode: darken }
+.bg\:b\:diff { background-blend-mode: difference }
+.bg\:b\:e { background-blend-mode: exclusion }
+.bg\:b\:hl { background-blend-mode: hard-light }
+.bg\:b\:h { background-blend-mode: hue }
+.bg\:b\:l { background-blend-mode: lighten }
+.bg\:b\:lum { background-blend-mode: luminosity }
+.bg\:b\:m { background-blend-mode: multiply }
+.bg\:b\:n { background-blend-mode: normal }
+.bg\:b\:o { background-blend-mode: overlay }
+.bg\:b\:s { background-blend-mode: saturation }
+.bg\:b\:sc { background-blend-mode: screen }
+.bg\:b\:sl { background-blend-mode: soft-light }
 
-.bgbk\:bb { background-break: bounding-box }
-.bgbk\:c { background-break: continuous }
-.bgbk\:eb { background-break: each-box }
+.bg\:bk\:bb { background-break: bounding-box }
+.bg\:bk\:c { background-break: continuous }
+.bg\:bk\:eb { background-break: each-box }
 
-.bgsz\:a { background-size: auto }
-.bgsz\:ct { background-size: contain }
-.bgsz\:cv { background-size: cover }
+.bg\:sz\:a { background-size: auto }
+.bg\:sz\:ct { background-size: contain }
+.bg\:sz\:cv { background-size: cover }
 
-.bgp\:tl { background-position: top left }
-.bgp\:tc { background-position: top center }
-.bgp\:tr { background-position: top right }
-.bgp\:cl { background-position: center left }
-.bgp\:cc { background-position: center center }
-.bgp\:cr { background-position: center right }
-.bgp\:bl { background-position: bottom left }
-.bgp\:bc { background-position: bottom center }
-.bgp\:br { background-position: bottom right }
-.bgp\:x50y50 { background-position: 50% 50% }
+.bg\:p\:tl { background-position: top left }
+.bg\:p\:tc { background-position: top center }
+.bg\:p\:tr { background-position: top right }
+.bg\:p\:cl { background-position: center left }
+.bg\:p\:cc { background-position: center center }
+.bg\:p\:cr { background-position: center right }
+.bg\:p\:bl { background-position: bottom left }
+.bg\:p\:bc { background-position: bottom center }
+.bg\:p\:br { background-position: bottom right }
+.bg\:p\:x50y50 { background-position: 50% 50% }
 
-.bgr\:n { background-repeat: no-repeat }
-.bgr\:x { background-repeat: repeat-x }
-.bgr\:y { background-repeat: repeat-y }
-.bgr\:r { background-repeat: repeat }
-.bgr\:s { background-repeat: space }
-.bgr\:r { background-repeat: round }
+.bg\:r\:n { background-repeat: no-repeat }
+.bg\:r\:x { background-repeat: repeat-x }
+.bg\:r\:y { background-repeat: repeat-y }
+.bg\:r\:r { background-repeat: repeat }
+.bg\:r\:s { background-repeat: space }
+.bg\:r\:r { background-repeat: round }
 
-.bgcp\:b { background-clip: border-box }
-.bgcp\:p { background-clip: padding-box }
-.bgcp\:c { background-clip: content-box }
-.bgcp\:t { background-clip: text }
+.bg\:cp\:b { background-clip: border-box }
+.bg\:cp\:p { background-clip: padding-box }
+.bg\:cp\:c { background-clip: content-box }
+.bg\:cp\:t { background-clip: text }
 
-.bgo\:b { background-origin: border-box }
-.bgo\:p { background-origin: padding-box }
-.bgo\:c { background-origin: content-box }
+.bg\:o\:b { background-origin: border-box }
+.bg\:o\:p { background-origin: padding-box }
+.bg\:o\:c { background-origin: content-box }
 
-.bgsz\:f { background-size: 100% 100% }
-.bgsz\:h { background-size: 100% auto }
-.bgsz\:w { background-size: auto 100% }
+.bg\:sz\:f { background-size: 100% 100% }
+.bg\:sz\:h { background-size: 100% auto }
+.bg\:sz\:w { background-size: auto 100% }

src/border.css

@@ -1,60 +1,97 @@
 :root {
-  --sf-bdw: 1px;
+  --sf-bd-w: 1px;
 }
 
+.bd\:c\:i { border-color: inherit }
+.bd\:c\:ii { border-color: initial }
+
+.bd\:st { border-style: solid }
+.bd\:st\:n { border-style: none }
+.bd\:st\:r { border-style: ridge }
+.bd\:st\:da { border-style: dashed }
+.bd\:st\:do { border-style: dotted }
+.bd\:st\:dbl { border-style: double }
+.bd\:st\:g { border-style: groove }
+.bd\:st\:h { border-style: hidden }
+.bd\:st\:in { border-style: inset }
+.bd\:st\:out { border-style: outset }
+
 .bd\:0 { border: 0 }
-.bd, .bd\:1 { border: var(--sf-bdw) solid }
-.bd\:2 { border: calc(var(--sf-bdw) * 2) solid }
-
-.bdc\:i { border-color: initial }
-
-.bds { border-style: solid }
-.bds\:n { border-style: none }
-.bds\:r { border-style: ridge }
-.bds\:da { border-style: dashed }
-.bds\:do { border-style: dotted }
-.bds\:dbl { border-style: double }
-.bds\:g { border-style: groove }
-.bds\:h { border-style: hidden }
-.bds\:i { border-style: inset }
-.bds\:o { border-style: outset }
-
-.bdw\:0 { border-width: 0 }
-.bdw, .bdw\:1 { border-width: var(--sf-bdw) }
-.bdw\:2 { border-width: calc(var(--sf-bdw) * 2) }
-
-.bdyw { border-block-width: var(--sf-bdw) }
-.bdxw { border-inline-width: var(--sf-bdw) }
-.bdtw { border-block-start-width: var(--sf-bdw) }
-.bdlw { border-inline-start-width: var(--sf-bdw) }
-.bdrw { border-inline-end-width: var(--sf-bdw) }
-.bdbw { border-block-end-width: var(--sf-bdw) }
+.bd\:w\:0 { border-width: 0 }
 
-/* /// */
+.bd,
+.bd\:1 { border: var(--sf-bd-w) solid }
+.bd\:2 { border: calc(var(--sf-bd-w) * 2) solid }
+
+.bd\:w,
+.bd\:w\:1 { border-width: var(--sf-bd-w) }
+.bd\:t\:w { border-block-start-width: var(--sf-bd-w) }
+.bd\:r\:w { border-inline-end-width: var(--sf-bd-w) }
+.bd\:b\:w { border-block-end-width: var(--sf-bd-w) }
+.bd\:l\:w { border-inline-start-width: var(--sf-bd-w) }
+.bd\:x\:w { border-inline-width: var(--sf-bd-w) }
+.bd\:y\:w { border-block-width: var(--sf-bd-w) }
 
-html.var .bdyw { border-block-width: 1px }
-html.var .bdxw { border-inline-width: 1px }
-html.var .bdtw { border-block-start-width: 1px }
-html.var .bdlw { border-inline-start-width: 1px }
-html.var .bdrw { border-inline-end-width: 1px }
-html.var .bdbw { border-block-end-width: 1px }
-
-html.mpb .bdtw { border-top-width: 1px }
-html.mpb .bdlw { border-left-width: 1px }
-html.mpb .bdrw { border-right-width: 1px }
-html.mpb .bdbw { border-bottom-width: 1px }
-html.mpb .bdyw { border-top-width: 1px; border-bottom-width: 1px }
-html.mpb .bdxw { border-left-width: 1px; border-right-width: 1px }
-
-html.mpb .bdtw\:2 { border-top-width: 2px }
-html.mpb .bdlw\:2 { border-left-width: 2px }
-html.mpb .bdrw\:2 { border-right-width: 2px }
-html.mpb .bdbw\:2 { border-bottom-width: 2px }
-html.mpb .bdyw\:2 { border-top-width: 2px; border-bottom-width: 2px }
-html.mpb .bdxw\:2 { border-left-width: 2px; border-right-width: 2px }
-html.mpb .bdw\:2 { border-width: 2px }
-
-html.var .bdw, html.var .bdw\:1 { border-width: 1px }
+.bd\:t\:w\:0 { border-block-start-width: 0 }
+.bd\:r\:w\:0 { border-inline-end-width: 0 }
+.bd\:b\:w\:0 { border-block-end-width: 0 }
+.bd\:l\:w\:0 { border-inline-start-width: 0 }
+.bd\:x\:w\:0 { border-inline-width: 0 }
+.bd\:y\:w\:0 { border-block-width: 0 }
+
+.bd\:w\:2 { border-width: calc(var(--sf-bd-w) * 2) }
+.bd\:t\:w\:2 { border-block-start-width: calc(var(--sf-bd-w) * 2) }
+.bd\:r\:w\:2 { border-inline-end-width: calc(var(--sf-bd-w) * 2) }
+.bd\:b\:w\:2 { border-block-end-width: calc(var(--sf-bd-w) * 2) }
+.bd\:l\:w\:2 { border-inline-start-width: calc(var(--sf-bd-w) * 2) }
+.bd\:x\:w\:2 { border-inline-width: calc(var(--sf-bd-w) * 2) }
+.bd\:y\:w\:2 { border-block-width: calc(var(--sf-bd-w) * 2) }
+
+/* /// */
 
 html.var .bd, html.var .bd\:1 { border: 1px solid }
 html.var .bd\:2 { border: 2px solid }
+
+html.var .bd\:w, html.var .bd\:w\:1 { border-width: 1px }
+html.var .bd\:t\:w { border-block-start-width: 1px }
+html.var .bd\:r\:w { border-inline-end-width: 1px }
+html.var .bd\:b\:w { border-block-end-width: 1px }
+html.var .bd\:l\:w { border-inline-start-width: 1px }
+html.var .bd\:x\:w { border-inline-width: 1px }
+html.var .bd\:y\:w { border-block-width: 1px }
+
+html.var .bd\:t\:w\:0 { border-block-start-width: 0 }
+html.var .bd\:r\:w\:0 { border-inline-end-width: 0 }
+html.var .bd\:b\:w\:0 { border-block-end-width: 0 }
+html.var .bd\:l\:w\:0 { border-inline-start-width: 0 }
+html.var .bd\:x\:w\:0 { border-inline-width: 0 }
+html.var .bd\:y\:w\:0 { border-block-width: 0 }
+
+html.var .bd\:w\:2 { border-width: 2px }
+html.var .bd\:t\:w\:2 { border-block-start-width: 2px }
+html.var .bd\:r\:w\:2 { border-inline-end-width: 2px }
+html.var .bd\:b\:w\:2 { border-block-end-width: 2px }
+html.var .bd\:l\:w\:2 { border-inline-start-width: 2px }
+html.var .bd\:x\:w\:2 { border-inline-width: 2px }
+html.var .bd\:y\:w\:2 { border-block-width: 2px }
+
+html.mpb .bd\:t\:w { border-top-width: 1px }
+html.mpb .bd\:r\:w { border-right-width: 1px }
+html.mpb .bd\:b\:w { border-bottom-width: 1px }
+html.mpb .bd\:l\:w { border-left-width: 1px }
+html.mpb .bd\:x\:w { border-left-width: 1px; border-right-width: 1px }
+html.mpb .bd\:y\:w { border-top-width: 1px; border-bottom-width: 1px }
+
+html.mpb .bd\:t\:w\:0 { border-top-width: 0 }
+html.mpb .bd\:r\:w\:0 { border-right-width: 0 }
+html.mpb .bd\:b\:w\:0 { border-bottom-width: 0 }
+html.mpb .bd\:l\:w\:0 { border-left-width: 0 }
+html.mpb .bd\:x\:w\:0 { border-left-width: 0; border-right-width: 0 }
+html.mpb .bd\:y\:w\:0 { border-top-width: 0; border-bottom-width: 0 }
+
+html.mpb .bd\:t\:w\:2 { border-top-width: 2px }
+html.mpb .bd\:r\:w\:2 { border-right-width: 2px }
+html.mpb .bd\:b\:w\:2 { border-bottom-width: 2px }
+html.mpb .bd\:l\:w\:2 { border-left-width: 2px }
+html.mpb .bd\:x\:w\:2 { border-left-width: 2px; border-right-width: 2px }
+html.mpb .bd\:y\:w\:2 { border-top-width: 2px; border-bottom-width: 2px }

src/color.css

@@ -1 +1,3 @@
 .c\:t { color: transparent }
+.c\:i { color: inherit }
+.c\:ii { color: initial }

src/columns/inline.css

@@ -1,6 +1,5 @@
 [class*='cols'] { display: block; letter-spacing: -1em !important }
-[class*='cols'] > * { display: inline-block; letter-spacing: normal }
-[class*='cols']:not([class*='va:']) > [class*='col']:not([class*='va:']) { vertical-align: top }
+[class*='cols'] > * { display: inline-block; letter-spacing: normal; vertical-align: top }
 
 .cols > .col,
 .cols > .col\:1 { width: 8.3333% }