1 files changed, 62 insertions, 5 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 598eae4..445e5c6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use 'iro-sass/src/bem';
 @use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
@@ -9,12 +10,12 @@
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
 $-dirs: (
     '': '',
+    'b':  '-block',
     'bs': '-block-start',
     'be': '-block-end',
-    'b':  '-block',
+    'i':  '-inline',
     'is': '-inline-start',
     'ie': '-inline-end',
-    'i':  '-inline',
 ) !default;
 
 /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -96,8 +97,8 @@ $-sizes: (
         vertical-align: baseline;
     }
 
-    @include bem.utility('va-center') {
-        vertical-align: center;
+    @include bem.utility('va-middle') {
+        vertical-align: middle;
     }
 
     @include bem.utility('va-bottom') {
@@ -132,6 +133,10 @@ $-sizes: (
         align-items: flex-end;
     }
 
+    @include bem.utility('ac-center') {
+        align-content: center;
+    }
+
     @include bem.utility('jc-center') {
         justify-content: center;
     }
@@ -154,18 +159,50 @@ $-sizes: (
 
     @include bem.utility('c-heading') {
         color: props.get(vars.$theme, --heading);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
+    
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --900);
+            }
+        }
     }
 
     @include bem.utility('c-text') {
         color: props.get(vars.$theme, --text);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
+    
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --800);
+            }
+        }
     }
 
     @include bem.utility('c-mute') {
         color: props.get(vars.$theme, --text-mute);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
+    
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --700);
+            }
+        }
     }
 
     @include bem.utility('c-mute-more') {
         color: props.get(vars.$theme, --text-mute-more);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
+    
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --600);
+            }
+        }
     }
 
     @each $dir, $prop in (is: inline-size, bs: block-size) {
@@ -200,6 +237,14 @@ $-sizes: (
         white-space:   nowrap;
     }
 
+    @include bem.utility('o-auto') {
+        overflow: auto;
+    }
+
+    @include bem.utility('o-hidden') {
+        overflow: hidden;
+    }
+
     @include bem.utility('p-static') {
         position: static;
     }
@@ -214,7 +259,7 @@ $-sizes: (
 
     @include bem.utility('p-sticky-bs') {
         position:          sticky;
-        inset-block-start: 0;
+        inset-block-start: props.get(vars.$sticky-top-offset);
     }
 
     @include bem.utility('p-sticky-be') {
@@ -301,4 +346,16 @@ $-sizes: (
             content:       '';
         }
     }
+    
+    @include bem.utility('sr-only') {
+        position:    absolute;
+        width:       1px;
+        height:      1px;
+        padding:     0;
+        margin:      -1px;
+        overflow:    hidden;
+        clip-path:   inset(50%);
+        white-space: nowrap;
+        border:      0;
+    }
 }