@ndla/primitives 0.0.16 → 0.0.18

package/dist/styles.css

@@ -109,31 +109,31 @@
     padding-block: var(--spacing-medium);
 }
 
-  .shadow-color_stroke\.subtle {
-    --shadow-color: var(--colors-stroke-subtle);
+  .w_100\% {
+    width: 100%;
 }
 
-  .shadow_inset_0_0_0_1px_var\(--shadow-color\) {
-    box-shadow: inset 0 0 0 1px var(--shadow-color);
+  .bdr_xsmall {
+    border-radius: var(--radii-xsmall);
 }
 
-  .rounded_xsmall {
-    border-radius: var(--radii-xsmall);
+  .bx-sh-c_stroke\.subtle {
+    --shadow-color: var(--colors-stroke-subtle);
 }
 
-  .w_100\% {
-    width: 100%;
+  .bx-sh_inset_0_0_0_1px_var\(--shadow-color\) {
+    box-shadow: inset 0 0 0 1px var(--shadow-color);
 }
 
-  .text_icon\.strong {
+  .c_icon\.strong {
     color: var(--colors-icon-strong);
 }
 
-  .origin_center {
+  .trf-o_center {
     transform-origin: center;
 }
 
-  .overflow_hidden {
+  .ov_hidden {
     overflow: hidden;
 }
 
@@ -145,12 +145,12 @@
     padding-inline: var(--spacing-small);
 }
 
-  .rounded-b_xsmall {
+  .bdr-b_xsmall {
     border-bottom-left-radius: var(--radii-xsmall);
     border-bottom-right-radius: var(--radii-xsmall);
 }
 
-  .list-style_revert {
+  .li-s_revert {
     list-style: revert;
 }
 
@@ -162,7 +162,7 @@
     padding-inline: var(--spacing-xsmall);
 }
 
-  .border_1px_solid {
+  .bd_1px_solid {
     border: 1px solid;
 }
 
@@ -170,7 +170,7 @@
     width: fit-content;
 }
 
-  .border-s_4px_solid {
+  .bd-s_4px_solid {
     border-inline-start: 4px solid;
 }
 
@@ -190,11 +190,11 @@
     gap: var(--spacing-xsmall);
 }
 
-  .text-decor_none {
+  .td_none {
     text-decoration: none;
 }
 
-  .text-align_center {
+  .ta_center {
     text-align: center;
 }
 
@@ -203,11 +203,11 @@
     outline-offset: 2px;
 }
 
-  .shadow-color_stroke\.default {
+  .bx-sh-c_stroke\.default {
     --shadow-color: var(--colors-stroke-default);
 }
 
-  .text_text\.onAction {
+  .c_text\.onAction {
     color: var(--colors-text-on-action);
 }
 
@@ -215,7 +215,7 @@
     background: var(--colors-surface-action);
 }
 
-  .text_text\.strong {
+  .c_text\.strong {
     color: var(--colors-text-strong);
 }
 
@@ -231,15 +231,15 @@
     background: var(--colors-surface-success);
 }
 
-  .text_text\.link {
+  .c_text\.link {
     color: var(--colors-text-link);
 }
 
-  .text-decor_underline {
+  .td_underline {
     text-decoration: underline;
 }
 
-  .decoration-thickness_1px {
+  .td-t_1px {
     text-decoration-thickness: 1px;
 }
 
@@ -271,7 +271,7 @@
     width: var(--sizes-xxlarge);
 }
 
-  .select_none {
+  .us_none {
     -webkit-user-select: none;
     user-select: none;
 }
@@ -280,7 +280,7 @@
     gap: var(--spacing-xxsmall);
 }
 
-  .text_text\.default {
+  .c_text\.default {
     color: var(--colors-text-default);
 }
 
@@ -296,7 +296,7 @@
     padding-block: var(--spacing-4xsmall);
 }
 
-  .rounded_large {
+  .bdr_large {
     border-radius: var(--radii-large);
 }
 
@@ -312,7 +312,7 @@
     height: var(--sizes-medium);
 }
 
-  .border_2px_solid {
+  .bd_2px_solid {
     border: 2px solid;
 }
 
@@ -324,7 +324,7 @@
     z-index: var(--z-index-dropdown);
 }
 
-  .shadow_large {
+  .bx-sh_large {
     box-shadow: var(--shadows-large);
 }
 
@@ -336,7 +336,7 @@
     max-height: var(--sizes-surface-xsmall);
 }
 
-  .text_stroke\.default {
+  .c_stroke\.default {
     color: var(--colors-stroke-default);
 }
 
@@ -376,7 +376,7 @@
     position: relative;
 }
 
-  .shadow_xlarge {
+  .bx-sh_xlarge {
     box-shadow: var(--shadows-xlarge);
 }
 
@@ -396,15 +396,15 @@
     margin: auto;
 }
 
-  .rounded_sharp {
+  .bdr_sharp {
     border-radius: var(--radii-sharp);
 }
 
-  .pt_env\(safe-area-inset-top\) {
+  .pbs_env\(safe-area-inset-top\) {
     padding-block-start: env(safe-area-inset-top);
 }
 
-  .pb_env\(safe-area-inset-bottom\) {
+  .pbe_env\(safe-area-inset-bottom\) {
     padding-block-end: env(safe-area-inset-bottom);
 }
 
@@ -432,11 +432,11 @@
     margin-inline-end: var(--margin);
 }
 
-  .mb_var\(--margin\) {
+  .mbe_var\(--margin\) {
     margin-block-end: var(--margin);
 }
 
-  .mt_var\(--margin\) {
+  .mbs_var\(--margin\) {
     margin-block-start: var(--margin);
 }
 
@@ -480,15 +480,15 @@
     --size: var(--sizes-surface-3xsmall);
 }
 
-  .pt_medium {
+  .pbs_medium {
     padding-block-start: var(--spacing-medium);
 }
 
-  .pt_small {
+  .pbs_small {
     padding-block-start: var(--spacing-small);
 }
 
-  .pb_medium {
+  .pbe_medium {
     padding-block-end: var(--spacing-medium);
 }
 
@@ -500,7 +500,7 @@
     margin: calc(var(--spacing-medium) * -1);
 }
 
-  .text_text\.error {
+  .c_text\.error {
     color: var(--colors-text-error);
 }
 
@@ -516,7 +516,23 @@
     margin-block: var(--spacing-xsmall);
 }
 
-  .rounded_small {
+  .pe_medium {
+    padding-inline-end: var(--spacing-medium);
+}
+
+  .ps_medium {
+    padding-inline-start: var(--spacing-medium);
+}
+
+  .ps_0 {
+    padding-inline-start: 0;
+}
+
+  .pe_0 {
+    padding-inline-end: 0;
+}
+
+  .bdr_small {
     border-radius: var(--radii-small);
 }
 
@@ -540,7 +556,7 @@
     background: none;
 }
 
-  .border_0 {
+  .bd_0 {
     border: 0;
 }
 
@@ -564,7 +580,7 @@
     display: inline-block;
 }
 
-  .border_none {
+  .bd_none {
     border: none;
 }
 
@@ -584,7 +600,7 @@
     padding: var(--spacing-3xsmall);
 }
 
-  .shadow_small {
+  .bx-sh_small {
     box-shadow: var(--shadows-small);
 }
 
@@ -608,7 +624,7 @@
     background: var(--colors-surface-error-subtle);
 }
 
-  .text_primary {
+  .c_primary {
     color: var(--colors-primary);
 }
 
@@ -628,15 +644,15 @@
     --arrow-background: var(--colors-surface-default);
 }
 
-  .rounded_full {
+  .bdr_full {
     border-radius: var(--radii-full);
 }
 
-  .ring-offset_-6px {
+  .ring-o_-6px {
     outline-offset: -6px;
 }
 
-  .text_icon\.default {
+  .c_icon\.default {
     color: var(--colors-icon-default);
 }
 
@@ -644,11 +660,11 @@
     width: var(--sizes-surface-small);
 }
 
-  .animation_skeleton-pulse {
+  .anim_skeleton-pulse {
     animation: var(--animations-skeleton-pulse);
 }
 
-  .text_transparent {
+  .c_transparent {
     color: transparent;
 }
 
@@ -672,7 +688,7 @@
     z-index: 1;
 }
 
-  .animation_spin {
+  .anim_spin {
     animation: var(--animations-spin);
 }
 
@@ -680,7 +696,7 @@
     display: block;
 }
 
-  .border-y_background\.subtle {
+  .bd-y-c_background\.subtle {
     border-block-color: var(--colors-background-subtle);
 }
 
@@ -708,7 +724,7 @@
     padding: var(--spacing-1);
 }
 
-  .rounded_medium {
+  .bdr_medium {
     border-radius: var(--radii-medium);
 }
 
@@ -728,11 +744,11 @@
     padding: var(--spacing-4xsmall);
 }
 
-  .table_fixed {
+  .tbl_fixed {
     table-layout: fixed;
 }
 
-  .overflow_auto {
+  .ov_auto {
     overflow: auto;
 }
 
@@ -760,7 +776,7 @@
     cursor: initial;
 }
 
-  .shadow_medium {
+  .bx-sh_medium {
     box-shadow: var(--shadows-medium);
 }
 
@@ -772,11 +788,11 @@
     height: var(--height);
 }
 
-  .opacity_var\(--opacity\) {
+  .op_var\(--opacity\) {
     opacity: var(--opacity);
 }
 
-  .overflow-wrap_anywhere {
+  .ov-wrap_anywhere {
     overflow-wrap: anywhere;
 }
 
@@ -816,49 +832,57 @@
     --arrow-background: var(--colors-surface-action);
 }
 
-  .flex_column {
+  .h_200px {
+    height: 200px;
+}
+
+  .obj-f_cover {
+    object-fit: cover;
+}
+
+  .flex-d_column {
     flex-direction: column;
 }
 
-  .items_center {
+  .ai_center {
     align-items: center;
 }
 
-  .justify_space-between {
+  .jc_space-between {
     justify-content: space-between;
 }
 
-  .duration_fast {
+  .trs-dur_fast {
     --transition-duration: var(--durations-fast);
     transition-duration: var(--durations-fast);
 }
 
-  .ease_default {
+  .trs-tmf_default {
     --transition-easing: var(--easings-default);
     transition-timing-function: var(--easings-default);
 }
 
-  .transition-prop_background\,_border-color\,_border\,_border-radius {
+  .trs-prop_background\,_border-color\,_border\,_border-radius {
     --transition-prop: background, border-color, border, border-radius;
     transition-property: background, border-color, border, border-radius;
 }
 
-  .duration_normal {
+  .trs-dur_normal {
     --transition-duration: var(--durations-normal);
     transition-duration: var(--durations-normal);
 }
 
-  .transition-prop_transform {
+  .trs-prop_transform {
     --transition-prop: transform;
     transition-property: transform;
 }
 
-  .transition-prop_padding-bottom {
+  .trs-prop_padding-bottom {
     --transition-prop: padding-bottom;
     transition-property: padding-bottom;
 }
 
-  .border-w_0_1px_1px {
+  .bd-w_0_1px_1px {
     border-width: 0 1px 1px;
 }
 
@@ -866,47 +890,47 @@
     border-style: solid;
 }
 
-  .border_stroke\.default {
+  .bd-c_stroke\.default {
     border-color: var(--colors-stroke-default);
 }
 
-  .list-pos_inside {
+  .li-pos_inside {
     list-style-position: inside;
 }
 
-  .bg_surface\.brand\.1\.subtle {
+  .bg-c_surface\.brand\.1\.subtle {
     background-color: var(--colors-surface-brand-1-subtle);
 }
 
-  .border_surface\.brand\.1\.strong {
+  .bd-c_surface\.brand\.1\.strong {
     border-color: var(--colors-surface-brand-1-strong);
 }
 
-  .bg_surface\.brand\.2\.moderate {
+  .bg-c_surface\.brand\.2\.moderate {
     background-color: var(--colors-surface-brand-2-moderate);
 }
 
-  .border_surface\.brand\.2\.strong {
+  .bd-c_surface\.brand\.2\.strong {
     border-color: var(--colors-surface-brand-2-strong);
 }
 
-  .bg_surface\.brand\.3\.subtle {
+  .bg-c_surface\.brand\.3\.subtle {
     background-color: var(--colors-surface-brand-3-subtle);
 }
 
-  .border_surface\.brand\.3\.strong {
+  .bd-c_surface\.brand\.3\.strong {
     border-color: var(--colors-surface-brand-3-strong);
 }
 
-  .bg_surface\.infoSubtle {
+  .bg-c_surface\.infoSubtle {
     background-color: var(--colors-surface-info-subtle);
 }
 
-  .border_stroke\.subtle {
+  .bd-c_stroke\.subtle {
     border-color: var(--colors-stroke-subtle);
 }
 
-  .justify_center {
+  .jc_center {
     justify-content: center;
 }
 
@@ -914,29 +938,29 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .transition-prop_all {
+  .trs-prop_all {
     --transition-prop: all;
     transition-property: all;
 }
 
-  .leading_1 {
+  .lh_1 {
     line-height: 1;
 }
 
-  .ring-color_stroke\.subtle {
+  .ring-c_stroke\.subtle {
     outline-color: var(--colors-stroke-subtle);
 }
 
-  .transition-prop_border-color\,_background\,_box-shadow\,_color {
+  .trs-prop_border-color\,_background\,_box-shadow\,_color {
     --transition-prop: border-color, background, box-shadow, color;
     transition-property: border-color, background, box-shadow, color;
 }
 
-  .overflow-y_auto {
+  .ov-y_auto {
     overflow-y: auto;
 }
 
-  .transition-prop_background\,_color\,_border-color {
+  .trs-prop_background\,_color\,_border-color {
     --transition-prop: background, color, border-color;
     transition-property: background, color, border-color;
 }
@@ -949,7 +973,7 @@
     top: 0;
 }
 
-  .transition-prop_transform\,_width\,_height {
+  .trs-prop_transform\,_width\,_height {
     --transition-prop: transform, width, height;
     transition-property: transform, width, height;
 }
@@ -958,40 +982,40 @@
     left: auto;
 }
 
-  .bg_surface\.default {
+  .bg-c_surface\.default {
     background-color: var(--colors-surface-default);
 }
 
-  .bg_surface\.brand\.2\.subtle {
+  .bg-c_surface\.brand\.2\.subtle {
     background-color: var(--colors-surface-brand-2-subtle);
 }
 
-  .overflow-y_hidden {
+  .ov-y_hidden {
     overflow-y: hidden;
 }
 
-  .transition-prop_background\,_color {
+  .trs-prop_background\,_color {
     --transition-prop: background, color;
     transition-property: background, color;
 }
 
-  .items_flex-start {
+  .ai_flex-start {
     align-items: flex-start;
 }
 
-  .border_stroke\.warning {
+  .bd-c_stroke\.warning {
     border-color: var(--colors-stroke-warning);
 }
 
-  .border_stroke\.success {
+  .bd-c_stroke\.success {
     border-color: var(--colors-stroke-success);
 }
 
-  .border_stroke\.error {
+  .bd-c_stroke\.error {
     border-color: var(--colors-stroke-error);
 }
 
-  .numeric_tabular-nums {
+  .fv-num_tabular-nums {
     font-variant-numeric: tabular-nums;
 }
 
@@ -999,7 +1023,7 @@
     flex-wrap: wrap;
 }
 
-  .border-w_2px {
+  .bd-w_2px {
     border-width: 2px;
 }
 
@@ -1007,84 +1031,84 @@
     outline-style: solid;
 }
 
-  .ring-width_4px {
+  .ring-w_4px {
     outline-width: 4px;
 }
 
-  .ring-color_surface\.default {
+  .ring-c_surface\.default {
     outline-color: var(--colors-surface-default);
 }
 
-  .transition-prop_background\,_border-color\,_box-shadow {
+  .trs-prop_background\,_border-color\,_box-shadow {
     --transition-prop: background, border-color, box-shadow;
     transition-property: background, border-color, box-shadow;
 }
 
-  .bg_surface\.disabled {
+  .bg-c_surface\.disabled {
     background-color: var(--colors-surface-disabled);
 }
 
-  .bg-clip_padding-box {
+  .bg-cp_padding-box {
     background-clip: padding-box;
     -webkit-background-clip: padding-box;
 }
 
-  .transition-prop_background {
+  .trs-prop_background {
     --transition-prop: background;
     transition-property: background;
 }
 
-  .border-s_background\.subtle {
+  .bd-s-c_background\.subtle {
     border-inline-start-color: var(--colors-background-subtle);
 }
 
-  .border-e_stroke\.default {
+  .bd-e-c_stroke\.default {
     border-inline-end-color: var(--colors-stroke-default);
 }
 
-  .border-w_4px {
+  .bd-w_4px {
     border-width: 4px;
 }
 
-  .border-w_8px {
+  .bd-w_8px {
     border-width: 8px;
 }
 
-  .shrink_0 {
+  .flex-sh_0 {
     flex-shrink: 0;
 }
 
-  .transition-prop_color {
+  .trs-prop_color {
     --transition-prop: color;
     transition-property: color;
 }
 
-  .overflow-x_auto {
+  .ov-x_auto {
     overflow-x: auto;
 }
 
-  .transition-prop_color\,_background\,_border-color {
+  .trs-prop_color\,_background\,_border-color {
     --transition-prop: color, background, border-color;
     transition-property: color, background, border-color;
 }
 
-  .border_transparent {
+  .bd-c_transparent {
     border-color: transparent;
 }
 
-  .border-w_1px {
+  .bd-w_1px {
     border-width: 1px;
 }
 
-  .ring-color_transparent {
+  .ring-c_transparent {
     outline-color: transparent;
 }
 
-  .bg_surface\.actionSubtle\.selected {
+  .bg-c_surface\.actionSubtle\.selected {
     background-color: var(--colors-surface-action-subtle-selected);
 }
 
-  .transition-prop_background\,_outline-color\,_color {
+  .trs-prop_background\,_outline-color\,_color {
     --transition-prop: background, outline-color, color;
     transition-property: background, outline-color, color;
 }
@@ -1093,12 +1117,12 @@
     padding-bottom: var(--spacing-1);
 }
 
-  .duration_slow {
+  .trs-dur_slow {
     --transition-duration: var(--durations-slow);
     transition-duration: var(--durations-slow);
 }
 
-  .transition-prop_translate\,_scale\,_opacity\,_height {
+  .trs-prop_translate\,_scale\,_opacity\,_height {
     --transition-prop: translate, scale, opacity, height;
     transition-property: translate, scale, opacity, height;
 }
@@ -1115,36 +1139,36 @@
     cursor: not-allowed;
 }
 
-  .disabled\:bg_surface\.\.disabled\.subtle:is(:disabled, [disabled], [data-disabled]) {
-    background: surface..disabled.subtle;
+  .disabled\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--colors-surface-disabled-subtle);
 }
 
-  .disabled\:shadow-color_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
     --shadow-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:text_text\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]) {
     color: var(--colors-text-disabled);
 }
 
-  .open\:shadow-color_stroke\.default:is([open], [data-open], [data-state="open"]) {
+  .open\:bx-sh-c_stroke\.default:is([open], [data-open], [data-state="open"]) {
     --shadow-color: var(--colors-stroke-default);
 }
 
-  .open\:rounded-b_sharp:is([open], [data-open], [data-state="open"]) {
+  .open\:bdr-b_sharp:is([open], [data-open], [data-state="open"]) {
     border-bottom-left-radius: var(--radii-sharp);
     border-bottom-right-radius: var(--radii-sharp);
 }
 
-  .open\:transform_rotate\(180deg\):is([open], [data-open], [data-state="open"]) {
+  .open\:trf_rotate\(180deg\):is([open], [data-open], [data-state="open"]) {
     transform: rotate(180deg);
 }
 
-  .open\:animation_collapse-in:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_collapse-in:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-collapse-in);
 }
 
-  .closed\:animation_collapse-out:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_collapse-out:is([closed], [data-closed], [data-state="closed"]) {
     animation: var(--animations-collapse-out);
 }
 
@@ -1156,7 +1180,7 @@
     margin-inline-start: var(--spacing-medium);
 }
 
-  .disabled\:text_text\.onAction:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:c_text\.onAction:is(:disabled, [disabled], [data-disabled]) {
     color: var(--colors-text-on-action);
 }
 
@@ -1164,7 +1188,7 @@
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:shadow-color_surface\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bx-sh-c_surface\.disabled:is(:disabled, [disabled], [data-disabled]) {
     --shadow-color: var(--colors-surface-disabled);
 }
 
@@ -1184,7 +1208,7 @@
     height: var(--sizes-medium);
 }
 
-  .checked\:text_text\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:c_text\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-text-on-action);
 }
 
@@ -1196,11 +1220,11 @@
     background: var(--colors-surface-danger-subtle);
 }
 
-  .invalid\:ring-offset_-2px:is(:invalid, [data-invalid]) {
+  .invalid\:ring-o_-2px:is(:invalid, [data-invalid]) {
     outline-offset: -2px;
 }
 
-  .checked\:text_icon\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:c_icon\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-icon-on-action);
 }
 
@@ -1208,15 +1232,15 @@
     display: flex;
 }
 
-  .disabled\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
     color: var(--colors-stroke-disabled);
 }
 
-  .open\:animation_fade-shift-in_0\.25s_ease-out:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_fade-shift-in_0\.25s_ease-out:is([open], [data-open], [data-state="open"]) {
     animation: fade-shift-in 0.25s ease-out;
 }
 
-  .closed\:animation_fade-shift-out_0\.25s_ease-out:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_fade-shift-out_0\.25s_ease-out:is([closed], [data-closed], [data-state="closed"]) {
     animation: fade-shift-out 0.25s ease-out;
 }
 
@@ -1228,67 +1252,67 @@
     background: var(--colors-surface-selected);
 }
 
-  .\[\&_svg\]\:text_icon\.default svg {
+  .\[\&_svg\]\:c_icon\.default svg {
     color: var(--colors-icon-default);
 }
 
-  .\[\&_svg\]\:origin_center svg {
+  .\[\&_svg\]\:trf-o_center svg {
     transform-origin: center;
 }
 
-  .checked\:text-decor_underline:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:td_underline:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     text-decoration: underline;
 }
 
-  .highlighted\:text-decor_underline[data-highlighted] {
+  .highlighted\:td_underline[data-highlighted] {
     text-decoration: underline;
 }
 
-  .open\:animation_backdrop-in:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_backdrop-in:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-backdrop-in);
 }
 
-  .closed\:animation_backdrop-out:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_backdrop-out:is([closed], [data-closed], [data-state="closed"]) {
     animation: var(--animations-backdrop-out);
 }
 
-  .open\:animation_dialog-in:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_dialog-in:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-dialog-in);
 }
 
-  .closed\:animation_dialog-out:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_dialog-out:is([closed], [data-closed], [data-state="closed"]) {
     animation: var(--animations-dialog-out);
 }
 
-  .open\:animation_drawer-in-left:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_drawer-in-left:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-drawer-in-left);
 }
 
-  .closed\:animation_drawer-out-left:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_drawer-out-left:is([closed], [data-closed], [data-state="closed"]) {
     animation: var(--animations-drawer-out-left);
 }
 
-  .open\:animation_drawer-in-right:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_drawer-in-right:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-drawer-in-right);
 }
 
-  .closed\:animation_drawer-out-right:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_drawer-out-right:is([closed], [data-closed], [data-state="closed"]) {
     animation: var(--animations-drawer-out-right);
 }
 
-  .open\:animation_drawer-in-top:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_drawer-in-top:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-drawer-in-top);
 }
 
-  .closed\:animation_drawer-out-top:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_drawer-out-top:is([closed], [data-closed], [data-state="closed"]) {
     animation: var(--animations-drawer-out-top);
 }
 
-  .open\:animation_drawer-in-bottom:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_drawer-in-bottom:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-drawer-in-bottom);
 }
 
-  .closed\:animation_drawer-out-bottom:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_drawer-out-bottom:is([closed], [data-closed], [data-state="closed"]) {
     animation: var(--animations-drawer-out-bottom);
 }
 
@@ -1300,19 +1324,19 @@
     display: inline !important;
 }
 
-  .autofill\:transition_background-color_600000s_0s\,_color_600000s_0s:autofill {
+  .autofill\:trs_background-color_600000s_0s\,_color_600000s_0s:autofill {
     transition: background-color 600000s 0s, color 600000s 0s;
 }
 
-  .disabled\:text_text\.subtle:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:c_text\.subtle:is(:disabled, [disabled], [data-disabled]) {
     color: var(--colors-text-subtle);
 }
 
-  .\[\&_svg\]\:text_icon\.error svg {
+  .\[\&_svg\]\:c_icon\.error svg {
     color: icon.error;
 }
 
-  .highlighted\:text_text\.default[data-highlighted] {
+  .highlighted\:c_text\.default[data-highlighted] {
     color: var(--colors-text-default);
 }
 
@@ -1320,11 +1344,11 @@
     background: var(--colors-surface-error-subtle-hover);
 }
 
-  .open\:animation_fade-shift-in_0\.2s_ease-out:is([open], [data-open], [data-state="open"]) {
+  .open\:anim_fade-shift-in_0\.2s_ease-out:is([open], [data-open], [data-state="open"]) {
     animation: fade-shift-in 0.2s ease-out;
 }
 
-  .closed\:animation_fade-shift-out_0\.2s_ease-out:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:anim_fade-shift-out_0\.2s_ease-out:is([closed], [data-closed], [data-state="closed"]) {
     animation: fade-shift-out 0.2s ease-out;
 }
 
@@ -1336,7 +1360,7 @@
     background: var(--colors-surface-selected);
 }
 
-  .ariaInvalid\:shadow-color_stroke\.error:has([aria-invalid='true']),.ariaInvalid\:shadow-color_stroke\.error[aria-invalid='true'] {
+  .ariaInvalid\:bx-sh-c_stroke\.error:has([aria-invalid='true']),.ariaInvalid\:bx-sh-c_stroke\.error[aria-invalid='true'] {
     --shadow-color: var(--colors-stroke-error);
 }
 
@@ -1356,35 +1380,35 @@
     background: var(--colors-surface-action-active);
 }
 
-  .checked\:transform_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     transform: translateX(120%);
 }
 
-  .\[\&_\>_caption\]\:text-align_left > caption {
+  .\[\&_\>_caption\]\:ta_left > caption {
     text-align: left;
 }
 
-  .\[\&_\>_caption\]\:text-transform_uppercase > caption {
+  .\[\&_\>_caption\]\:tt_uppercase > caption {
     text-transform: uppercase;
 }
 
-  .\[\&_\>_caption\]\:mb_xsmall > caption {
+  .\[\&_\>_caption\]\:mbe_xsmall > caption {
     margin-block-end: var(--spacing-xsmall);
 }
 
-  .\[\&_thead\]\:overflow_hidden thead {
+  .\[\&_thead\]\:ov_hidden thead {
     overflow: hidden;
 }
 
-  .\[\&_thead_tr_th\]\:border-b_3px_solid thead tr th {
+  .\[\&_thead_tr_th\]\:bd-b_3px_solid thead tr th {
     border-bottom: 3px solid;
 }
 
-  .\[\&_thead_tr_th\]\:v-align_text-top thead tr th {
+  .\[\&_thead_tr_th\]\:va_text-top thead tr th {
     vertical-align: text-top;
 }
 
-  .\[\&_tbody_th\]\:border-r_3px_solid tbody th {
+  .\[\&_tbody_th\]\:bd-r_3px_solid tbody th {
     border-right: 3px solid;
 }
 
@@ -1392,11 +1416,11 @@
     padding: var(--spacing-3xsmall);
 }
 
-  .\[\&_thead_tr\:nth-child\(2\)_th\]\:border_1px_solid thead tr:nth-child(2) th {
+  .\[\&_thead_tr\:nth-child\(2\)_th\]\:bd_1px_solid thead tr:nth-child(2) th {
     border: 1px solid;
 }
 
-  .\[\&_thead_tr\:nth-child\(2\)_th\]\:text-transform_none thead tr:nth-child(2) th {
+  .\[\&_thead_tr\:nth-child\(2\)_th\]\:tt_none thead tr:nth-child(2) th {
     text-transform: none;
 }
 
@@ -1416,11 +1440,11 @@
     padding-inline-start: var(--spacing-3xsmall);
 }
 
-  .\[\&_td\]\:border_1px_solid td {
+  .\[\&_td\]\:bd_1px_solid td {
     border: 1px solid;
 }
 
-  .\[\&_td\]\:v-align_top td {
+  .\[\&_td\]\:va_top td {
     vertical-align: top;
 }
 
@@ -1436,7 +1460,7 @@
     padding-block: var(--spacing-3xsmall);
 }
 
-  .horizontal\:mb_-1px[data-orientation=horizontal] {
+  .horizontal\:mbe_-1px[data-orientation=horizontal] {
     margin-block-end: -1px;
 }
 
@@ -1444,19 +1468,19 @@
     margin-inline-end: -1px;
 }
 
-  .selected\:text_text\.strong:is([aria-selected=true], [data-selected]) {
+  .selected\:c_text\.strong:is([aria-selected=true], [data-selected]) {
     color: var(--colors-text-strong);
 }
 
-  .horizontal\:border-b_1px_solid[data-orientation=horizontal] {
+  .horizontal\:bd-b_1px_solid[data-orientation=horizontal] {
     border-bottom: 1px solid;
 }
 
-  .vertical\:border-l_1px_solid[data-orientation=vertical] {
+  .vertical\:bd-l_1px_solid[data-orientation=vertical] {
     border-left: 1px solid;
 }
 
-  .horizontal\:rounded-t_xsmall[data-orientation=horizontal] {
+  .horizontal\:bdr-t_xsmall[data-orientation=horizontal] {
     border-top-left-radius: var(--radii-xsmall);
     border-top-right-radius: var(--radii-xsmall);
 }
@@ -1465,7 +1489,7 @@
     background: var(--colors-surface-default);
 }
 
-  .horizontal\:pt_xsmall[data-orientation=horizontal] {
+  .horizontal\:pbs_xsmall[data-orientation=horizontal] {
     padding-block-start: var(--spacing-xsmall);
 }
 
@@ -1473,7 +1497,7 @@
     padding-inline-start: var(--spacing-xsmall);
 }
 
-  .highlighted\:ring-offset_-1px[data-highlighted] {
+  .highlighted\:ring-o_-1px[data-highlighted] {
     outline-offset: -1px;
 }
 
@@ -1481,12 +1505,12 @@
     display: inline-block;
 }
 
-  .closed\:transition-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
+  .closed\:trs-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
     --transition-prop: background, border-color, border, border-radius;
     transition-property: background, border-color, border, border-radius;
 }
 
-  .open\:bg_surface\.actionSubtle\.active:is([open], [data-open], [data-state="open"]) {
+  .open\:bg-c_surface\.actionSubtle\.active:is([open], [data-open], [data-state="open"]) {
     background-color: var(--colors-surface-action-subtle-active);
 }
 
@@ -1494,70 +1518,70 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .disabled\:border_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
     border-color: var(--colors-stroke-disabled);
 }
 
-  .checked\:border_surface\.actionSubtle\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:bd-c_surface\.actionSubtle\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-surface-action-subtle-selected);
 }
 
-  .checked\:ring-color_icon\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:ring-c_icon\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     outline-color: var(--colors-icon-on-action);
 }
 
-  .invalid\:border_stroke\.error:is(:invalid, [data-invalid]) {
+  .invalid\:bd-c_stroke\.error:is(:invalid, [data-invalid]) {
     border-color: var(--colors-stroke-error);
 }
 
-  .invalid\:ring-color_stroke\.error:is(:invalid, [data-invalid]) {
+  .invalid\:ring-c_stroke\.error:is(:invalid, [data-invalid]) {
     outline-color: var(--colors-stroke-error);
 }
 
-  .checked\:bg_surface\.action:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:bg-c_surface\.action:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     background-color: var(--colors-surface-action);
 }
 
-  .checked\:border_surface\.action:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:bd-c_surface\.action:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-surface-action);
 }
 
-  .highlighted\:border_stroke\.default[data-highlighted] {
+  .highlighted\:bd-c_stroke\.default[data-highlighted] {
     border-color: var(--colors-stroke-default);
 }
 
-  .checked\:border_stroke\.default:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .checked\:bd-c_stroke\.default:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-stroke-default);
 }
 
-  .\[\&_svg\]\:duration_normal svg {
+  .\[\&_svg\]\:trs-dur_normal svg {
     --transition-duration: var(--durations-normal);
     transition-duration: var(--durations-normal);
 }
 
-  .\[\&_svg\]\:transition-prop_transform svg {
+  .\[\&_svg\]\:trs-prop_transform svg {
     --transition-prop: transform;
     transition-property: transform;
 }
 
-  .\[\&_svg\]\:ease_default svg {
+  .\[\&_svg\]\:trs-tmf_default svg {
     --transition-easing: var(--easings-default);
     transition-timing-function: var(--easings-default);
 }
 
-  .ariaInvalid\:ring-color_stroke\.error:has([aria-invalid='true']),.ariaInvalid\:ring-color_stroke\.error[aria-invalid='true'] {
+  .ariaInvalid\:ring-c_stroke\.error:has([aria-invalid='true']),.ariaInvalid\:ring-c_stroke\.error[aria-invalid='true'] {
     outline-color: var(--colors-stroke-error);
 }
 
-  .\[\&\:disabled\,_\&\:has\(\:disabled\)\]\:ring-color_stroke\.subtle:disabled,.\[\&\:disabled\,_\&\:has\(\:disabled\)\]\:ring-color_stroke\.subtle:has(:disabled) {
+  .\[\&\:disabled\,_\&\:has\(\:disabled\)\]\:ring-c_stroke\.subtle:disabled,.\[\&\:disabled\,_\&\:has\(\:disabled\)\]\:ring-c_stroke\.subtle:has(:disabled) {
     outline-color: var(--colors-stroke-subtle);
 }
 
-  .vertical\:flex_column[data-orientation=vertical] {
+  .vertical\:flex-d_column[data-orientation=vertical] {
     flex-direction: column;
 }
 
-  .horizontal\:flex_row[data-orientation=horizontal] {
+  .horizontal\:flex-d_row[data-orientation=horizontal] {
     flex-direction: row;
 }
 
@@ -1565,11 +1589,11 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .\[\&_thead_tr_th\]\:border_surface\.brand\.1\.strong thead tr th,.\[\&_tbody_th\]\:border_surface\.brand\.1\.strong tbody th {
+  .\[\&_thead_tr_th\]\:bd-c_surface\.brand\.1\.strong thead tr th,.\[\&_tbody_th\]\:bd-c_surface\.brand\.1\.strong tbody th {
     border-color: var(--colors-surface-brand-1-strong);
 }
 
-  .\[\&_thead_tr\:nth-child\(2\)_th\]\:border_surface\.brand\.1\.subtle thead tr:nth-child(2) th {
+  .\[\&_thead_tr\:nth-child\(2\)_th\]\:bd-c_surface\.brand\.1\.subtle thead tr:nth-child(2) th {
     border-color: var(--colors-surface-brand-1-subtle);
 }
 
@@ -1577,63 +1601,63 @@
     font-weight: var(--font-weights-semibold);
 }
 
-  .\[\&_thead_tr\:nth-child\(2\)_th\]\:bg_surface\.brand\.1\.subtle thead tr:nth-child(2) th {
+  .\[\&_thead_tr\:nth-child\(2\)_th\]\:bg-c_surface\.brand\.1\.subtle thead tr:nth-child(2) th {
     background-color: var(--colors-surface-brand-1-subtle);
 }
 
-  .\[\&_td\]\:border_surface\.brand\.1\.subtle td {
+  .\[\&_td\]\:bd-c_surface\.brand\.1\.subtle td {
     border-color: var(--colors-surface-brand-1-subtle);
 }
 
-  .horizontal\:flex_column[data-orientation=horizontal] {
+  .horizontal\:flex-d_column[data-orientation=horizontal] {
     flex-direction: column;
 }
 
-  .vertical\:flex_row[data-orientation=vertical] {
+  .vertical\:flex-d_row[data-orientation=vertical] {
     flex-direction: row;
 }
 
-  .disabled\:border_stroke\.default:is(:disabled, [disabled], [data-disabled]) {
+  .disabled\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled]) {
     border-color: var(--colors-stroke-default);
 }
 
-  .vertical\:justify_flex-start[data-orientation=vertical] {
+  .vertical\:jc_flex-start[data-orientation=vertical] {
     justify-content: flex-start;
 }
 
-  .vertical\:rounded-tl_xsmall[data-orientation=vertical] {
+  .vertical\:bdr-tl_xsmall[data-orientation=vertical] {
     border-top-left-radius: var(--radii-xsmall);
 }
 
-  .vertical\:rounded-bl_xsmall[data-orientation=vertical] {
+  .vertical\:bdr-bl_xsmall[data-orientation=vertical] {
     border-bottom-left-radius: var(--radii-xsmall);
 }
 
-  .selected\:border_stroke\.subtle:is([aria-selected=true], [data-selected]) {
+  .selected\:bd-c_stroke\.subtle:is([aria-selected=true], [data-selected]) {
     border-color: var(--colors-stroke-subtle);
 }
 
-  .highlighted\:bg_surface\.actionSubtle\.hover[data-highlighted] {
+  .highlighted\:bg-c_surface\.actionSubtle\.hover[data-highlighted] {
     background-color: var(--colors-surface-action-subtle-hover);
 }
 
-  .highlighted\:ring-width_3px[data-highlighted] {
+  .highlighted\:ring-w_3px[data-highlighted] {
     outline-width: 3px;
 }
 
-  .highlighted\:ring-color_stroke\.hover[data-highlighted] {
+  .highlighted\:ring-c_stroke\.hover[data-highlighted] {
     outline-color: var(--colors-stroke-hover);
 }
 
-  .focusWithin\:ring-offset_-1px:focus-within {
+  .focusWithin\:ring-o_-1px:focus-within {
     outline-offset: -1px;
 }
 
-  .focusWithin\:ring-width_2px:focus-within {
+  .focusWithin\:ring-w_2px:focus-within {
     outline-width: 2px;
 }
 
-  .focusWithin\:ring-color_stroke\.default:focus-within {
+  .focusWithin\:ring-c_stroke\.default:focus-within {
     outline-color: var(--colors-stroke-default);
 }
 
@@ -1642,27 +1666,27 @@
     outline-offset: 2px;
 }
 
-  .focusVisible\:shadow-color_stroke\.default:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bx-sh-c_stroke\.default:is(:focus-visible, [data-focus-visible]) {
     --shadow-color: var(--colors-stroke-default);
 }
 
-  .focusVisible\:shadow_inset_0_0_0_2px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bx-sh_inset_0_0_0_2px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
     box-shadow: inset 0 0 0 2px var(--shadow-color);
 }
 
-  .focusVisible\:shadow_inset_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bx-sh_inset_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
     box-shadow: inset 0 0 0 3px var(--shadow-color);
 }
 
-  .focusVisible\:shadow_inset_0_0_0_3px_var\(--shadow-color\)\,_inset_0px_0px_0px_6px_currentcolor:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bx-sh_inset_0_0_0_3px_var\(--shadow-color\)\,_inset_0px_0px_0px_6px_currentcolor:is(:focus-visible, [data-focus-visible]) {
     box-shadow: inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor;
 }
 
-  .focusVisible\:shadow-color_surface\.error:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bx-sh-c_surface\.error:is(:focus-visible, [data-focus-visible]) {
     --shadow-color: var(--colors-surface-error);
 }
 
-  .focusVisible\:shadow-color_surface\.success:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bx-sh-c_surface\.success:is(:focus-visible, [data-focus-visible]) {
     --shadow-color: var(--colors-surface-success);
 }
 
@@ -1670,19 +1694,19 @@
     outline: 2px solid;
 }
 
-  .focus\:ring-offset_4xsmall:is(:focus, [data-focus]) {
+  .focus\:ring-o_4xsmall:is(:focus, [data-focus]) {
     outline-offset: var(--spacing-4xsmall);
 }
 
-  .focus\:rounded_xsmall:is(:focus, [data-focus]) {
+  .focus\:bdr_xsmall:is(:focus, [data-focus]) {
     border-radius: var(--radii-xsmall);
 }
 
-  .focus\:ring-offset_-2px:is(:focus, [data-focus]) {
+  .focus\:ring-o_-2px:is(:focus, [data-focus]) {
     outline-offset: -2px;
 }
 
-  .focus\:appearance_none:is(:focus, [data-focus]) {
+  .focus\:ap_none:is(:focus, [data-focus]) {
     appearance: none;
     -webkit-appearance: none;
 }
@@ -1691,19 +1715,19 @@
     outline: 2px solid;
 }
 
-  .\[\&\:has\(input\:focus-visible\)\]\:ring-offset_4xsmall:has(input:focus-visible) {
+  .\[\&\:has\(input\:focus-visible\)\]\:ring-o_4xsmall:has(input:focus-visible) {
     outline-offset: var(--spacing-4xsmall);
 }
 
-  .\[\&\:has\(input\:focus-visible\)\]\:rounded_xsmall:has(input:focus-visible) {
+  .\[\&\:has\(input\:focus-visible\)\]\:bdr_xsmall:has(input:focus-visible) {
     border-radius: var(--radii-xsmall);
 }
 
-  .focusVisible\:ring-offset_-1:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:ring-o_-1:is(:focus-visible, [data-focus-visible]) {
     outline-offset: calc(var(--spacing-1) * -1);
 }
 
-  .focusVisible\:border_2px_solid:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bd_2px_solid:is(:focus-visible, [data-focus-visible]) {
     border: 2px solid;
 }
 
@@ -1711,23 +1735,23 @@
     outline: 3px solid;
 }
 
-  .focusVisible\:ring-offset_0px:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:ring-o_0px:is(:focus-visible, [data-focus-visible]) {
     outline-offset: 0px;
 }
 
-  .focusVisible\:rounded_unset:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bdr_unset:is(:focus-visible, [data-focus-visible]) {
     border-radius: unset;
 }
 
-  .focusVisible\:ring-offset_-3px:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:ring-o_-3px:is(:focus-visible, [data-focus-visible]) {
     outline-offset: -3px;
 }
 
-  .focusVisible\:shadow_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bx-sh_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
     box-shadow: 0 0 0 3px var(--shadow-color);
 }
 
-  .focus\:ring-color_stroke\.default:is(:focus, [data-focus]) {
+  .focus\:ring-c_stroke\.default:is(:focus, [data-focus]) {
     outline-color: var(--colors-stroke-default);
 }
 
@@ -1735,23 +1759,23 @@
     outline-style: solid;
 }
 
-  .focus\:ring-width_2px:is(:focus, [data-focus]) {
+  .focus\:ring-w_2px:is(:focus, [data-focus]) {
     outline-width: 2px;
 }
 
-  .\[\&\:has\(input\:focus-visible\)\]\:ring-color_stroke\.default:has(input:focus-visible) {
+  .\[\&\:has\(input\:focus-visible\)\]\:ring-c_stroke\.default:has(input:focus-visible) {
     outline-color: var(--colors-stroke-default);
 }
 
-  .focusVisible\:border_background\.default:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:bd-c_background\.default:is(:focus-visible, [data-focus-visible]) {
     border-color: var(--colors-background-default);
 }
 
-  .focusVisible\:ring-color_surface\.action:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:ring-c_surface\.action:is(:focus-visible, [data-focus-visible]) {
     outline-color: var(--colors-surface-action);
 }
 
-  .focusVisible\:ring-color_stroke\.default:is(:focus-visible, [data-focus-visible]) {
+  .focusVisible\:ring-c_stroke\.default:is(:focus-visible, [data-focus-visible]) {
     outline-color: var(--colors-stroke-default);
 }
 
@@ -1759,11 +1783,11 @@
     background: var(--colors-surface-action-subtle-hover);
 }
 
-  .hover\:shadow-color_stroke\.hover:is(:hover, [data-hover]) {
+  .hover\:bx-sh-c_stroke\.hover:is(:hover, [data-hover]) {
     --shadow-color: var(--colors-stroke-hover);
 }
 
-  .hover\:text_text\.onAction:is(:hover, [data-hover]) {
+  .hover\:c_text\.onAction:is(:hover, [data-hover]) {
     color: var(--colors-text-on-action);
 }
 
@@ -1771,15 +1795,15 @@
     background: var(--colors-surface-action-hover);
 }
 
-  .hover\:shadow_inset_0_0_0_1px_var\(--shadow-color\):is(:hover, [data-hover]) {
+  .hover\:bx-sh_inset_0_0_0_1px_var\(--shadow-color\):is(:hover, [data-hover]) {
     box-shadow: inset 0 0 0 1px var(--shadow-color);
 }
 
-  .hover\:text_stroke\.hover:is(:hover, [data-hover]) {
+  .hover\:c_stroke\.hover:is(:hover, [data-hover]) {
     color: var(--colors-stroke-hover);
 }
 
-  .hover\:text_surface\.actionSubtle\.hover\.strong:is(:hover, [data-hover]) {
+  .hover\:c_surface\.actionSubtle\.hover\.strong:is(:hover, [data-hover]) {
     color: var(--colors-surface-action-subtle-hover-strong);
 }
 
@@ -1791,19 +1815,19 @@
     background: var(--colors-surface-success-hover);
 }
 
-  .hover\:text-decor_none:is(:hover, [data-hover]) {
+  .hover\:td_none:is(:hover, [data-hover]) {
     text-decoration: none;
 }
 
-  .hover\:text_text\.action:is(:hover, [data-hover]) {
+  .hover\:c_text\.action:is(:hover, [data-hover]) {
     color: var(--colors-text-action);
 }
 
-  .hover\:shadow_0_0_0_4px_var\(--shadow-color\):is(:hover, [data-hover]) {
+  .hover\:bx-sh_0_0_0_4px_var\(--shadow-color\):is(:hover, [data-hover]) {
     box-shadow: 0 0 0 4px var(--shadow-color);
 }
 
-  .hover\:shadow-color_surface\.actionSubtle\.hover\.strong:is(:hover, [data-hover]) {
+  .hover\:bx-sh-c_surface\.actionSubtle\.hover\.strong:is(:hover, [data-hover]) {
     --shadow-color: var(--colors-surface-action-subtle-hover-strong);
 }
 
@@ -1815,11 +1839,11 @@
     background: var(--colors-surface-default);
 }
 
-  .hover\:text-decor_underline:is(:hover, [data-hover]) {
+  .hover\:td_underline:is(:hover, [data-hover]) {
     text-decoration: underline;
 }
 
-  .hover\:text_text\.default:is(:hover, [data-hover]) {
+  .hover\:c_text\.default:is(:hover, [data-hover]) {
     color: var(--colors-text-default);
 }
 
@@ -1827,23 +1851,23 @@
     background: var(--colors-surface-error-subtle-hover);
 }
 
-  .hover\:transform_translateX\(20\%\):is(:hover, [data-hover]) {
+  .hover\:trf_translateX\(20\%\):is(:hover, [data-hover]) {
     transform: translateX(20%);
 }
 
-  .hover\:border_stroke\.hover:is(:hover, [data-hover]) {
+  .hover\:bd-c_stroke\.hover:is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-hover);
 }
 
-  .hover\:ring-color_stroke\.hover:is(:hover, [data-hover]) {
+  .hover\:ring-c_stroke\.hover:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-hover);
 }
 
-  .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
+  .hover\:bg-c_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
     background-color: var(--colors-surface-action-subtle-hover);
 }
 
-  .active\:text_text\.onAction:is(:active, [data-active]) {
+  .active\:c_text\.onAction:is(:active, [data-active]) {
     color: var(--colors-text-on-action);
 }
 
@@ -1871,7 +1895,7 @@
     background: var(--colors-surface-error-subtle-active);
 }
 
-  .active\:border_stroke\.default:is(:active, [data-active]) {
+  .active\:bd-c_stroke\.default:is(:active, [data-active]) {
     border-color: var(--colors-stroke-default);
 }
 
@@ -1879,23 +1903,23 @@
     background: var(--colors-surface-disabled-subtle);
 }
 
-  .disabled\:hover\:shadow-color_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     --shadow-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:hover\:text_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
 
-  .\[\&_li\]\:marker\:text_icon\.strong li::marker {
+  .\[\&_li\]\:marker\:c_icon\.strong li::marker {
     color: var(--colors-icon-strong);
 }
 
-  .disabled\:\[\&_svg\]\:text_text\.onAction:is(:disabled, [disabled], [data-disabled]) svg {
+  .disabled\:\[\&_svg\]\:c_text\.onAction:is(:disabled, [disabled], [data-disabled]) svg {
     color: var(--colors-text-on-action);
 }
 
-  .disabled\:hover\:text_text\.onAction:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.onAction:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     color: var(--colors-text-on-action);
 }
 
@@ -1903,7 +1927,7 @@
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:checked\:text_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:checked\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-text-disabled);
 }
 
@@ -1911,11 +1935,11 @@
     background: var(--colors-surface-disabled);
 }
 
-  .checked\:focus\:ring-offset_-4px:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:focus, [data-focus]) {
+  .checked\:focus\:ring-o_-4px:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:focus, [data-focus]) {
     outline-offset: -4px;
 }
 
-  .checked\:hover\:ring-offset_-2px:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .checked\:hover\:ring-o_-2px:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     outline-offset: -2px;
 }
 
@@ -1923,11 +1947,11 @@
     background: var(--colors-surface-action-subtle-hover);
 }
 
-  .checked\:hover\:text_text\.default:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .checked\:hover\:c_text\.default:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     color: var(--colors-text-default);
 }
 
-  .invalid\:checked\:text_text\.default:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .invalid\:checked\:c_text\.default:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-text-default);
 }
 
@@ -1935,23 +1959,23 @@
     background: var(--colors-surface-danger-subtle);
 }
 
-  .invalid\:checked\:ring-offset_-2px:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .invalid\:checked\:ring-o_-2px:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     outline-offset: -2px;
 }
 
-  .disabled\:hover\:shadow_none:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bx-sh_none:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     box-shadow: none;
 }
 
-  .invalid\:checked\:text_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .invalid\:checked\:c_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-stroke-error);
 }
 
-  .checked\:hover\:text_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .checked\:hover\:c_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     color: var(--colors-stroke-hover);
 }
 
-  .disabled\:hover\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     color: var(--colors-stroke-disabled);
 }
 
@@ -1959,19 +1983,19 @@
     background: var(--colors-surface-hover);
 }
 
-  .open\:\[\&_svg\]\:transform_rotate\(180deg\):is([open], [data-open], [data-state="open"]) svg {
+  .open\:\[\&_svg\]\:trf_rotate\(180deg\):is([open], [data-open], [data-state="open"]) svg {
     transform: rotate(180deg);
 }
 
-  .open\:\[\&_summary\]\:mb_-xxsmall:is([open], [data-open], [data-state="open"]) summary {
+  .open\:\[\&_summary\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) summary {
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
 
-  .disabled\:\[\&_svg\]\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) svg {
+  .disabled\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) svg {
     color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:hover\:text-decor_none:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:td_none:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     text-decoration: none;
 }
 
@@ -1979,7 +2003,7 @@
     background: var(--colors-surface-default);
 }
 
-  .highlighted\:\[\&_svg\]\:text_icon\.default[data-highlighted] svg {
+  .highlighted\:\[\&_svg\]\:c_icon\.default[data-highlighted] svg {
     color: var(--colors-icon-default);
 }
 
@@ -1995,7 +2019,7 @@
     background: var(--colors-surface-hover);
 }
 
-  .disabled\:highlighted\:text_text\.disabled:is(:disabled, [disabled], [data-disabled])[data-highlighted] {
+  .disabled\:highlighted\:c_text\.disabled:is(:disabled, [disabled], [data-disabled])[data-highlighted] {
     color: var(--colors-text-disabled);
 }
 
@@ -2003,7 +2027,7 @@
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:selected\:text_text\.disabled:is(:disabled, [disabled], [data-disabled]):is([aria-selected=true], [data-selected]) {
+  .disabled\:selected\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is([aria-selected=true], [data-selected]) {
     color: var(--colors-text-disabled);
 }
 
@@ -2011,27 +2035,27 @@
     background: var(--colors-surface-disabled);
 }
 
-  .checked\:hover\:transform_translateX\(100\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .checked\:hover\:trf_translateX\(100\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     transform: translateX(100%);
 }
 
-  .\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'center\'\]\]\:text-align_center td[data-align='center'],.\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'center\'\]\]\:text-align_center th[data-align='center'] {
+  .\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'center\'\]\]\:ta_center td[data-align='center'],.\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'center\'\]\]\:ta_center th[data-align='center'] {
     text-align: center;
 }
 
-  .\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'left\'\]\]\:text-align_left td[data-align='left'],.\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'left\'\]\]\:text-align_left th[data-align='left'] {
+  .\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'left\'\]\]\:ta_left td[data-align='left'],.\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'left\'\]\]\:ta_left th[data-align='left'] {
     text-align: left;
 }
 
-  .\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'right\'\]\]\:text-align_right td[data-align='right'],.\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'right\'\]\]\:text-align_right th[data-align='right'] {
+  .\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'right\'\]\]\:ta_right td[data-align='right'],.\[\&_td\,_\&_th\]\:\[\&\[data-align\=\'right\'\]\]\:ta_right th[data-align='right'] {
     text-align: right;
 }
 
-  .disabled\:hover\:text_text\.subtle:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:c_text\.subtle:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     color: var(--colors-text-subtle);
 }
 
-  .highlighted\:\[\&_svg\]\:text_stroke\.hover[data-highlighted] svg {
+  .highlighted\:\[\&_svg\]\:c_stroke\.hover[data-highlighted] svg {
     color: var(--colors-stroke-hover);
 }
 
@@ -2047,91 +2071,91 @@
     content: counter(list-item, upper-alpha) '. ';
 }
 
-  .disabled\:hover\:border_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-disabled);
 }
 
-  .disabled\:checked\:border_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:checked\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-stroke-disabled);
 }
 
-  .checked\:hover\:border_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .checked\:hover\:bd-c_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-hover);
 }
 
-  .checked\:hover\:ring-color_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .checked\:hover\:ring-c_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-hover);
 }
 
-  .invalid\:checked\:border_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .invalid\:checked\:bd-c_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-stroke-error);
 }
 
-  .invalid\:checked\:ring-color_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .invalid\:checked\:ring-c_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     outline-color: var(--colors-stroke-error);
 }
 
-  .invalid\:checked\:bg_surface\.default:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .invalid\:checked\:bg-c_surface\.default:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     background-color: var(--colors-surface-default);
 }
 
-  .ariaInvalid\:hover\:ring-color_stroke\.error:has([aria-invalid='true']):is(:hover, [data-hover]),.ariaInvalid\:hover\:ring-color_stroke\.error[aria-invalid='true']:is(:hover, [data-hover]) {
+  .ariaInvalid\:hover\:ring-c_stroke\.error:has([aria-invalid='true']):is(:hover, [data-hover]),.ariaInvalid\:hover\:ring-c_stroke\.error[aria-invalid='true']:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-error);
 }
 
-  .ariaInvalid\:focusWithin\:ring-color_stroke\.error:has([aria-invalid='true']):focus-within,.ariaInvalid\:focusWithin\:ring-color_stroke\.error[aria-invalid='true']:focus-within {
+  .ariaInvalid\:focusWithin\:ring-c_stroke\.error:has([aria-invalid='true']):focus-within,.ariaInvalid\:focusWithin\:ring-c_stroke\.error[aria-invalid='true']:focus-within {
     outline-color: var(--colors-stroke-error);
 }
 
-  .\[\&\:disabled\,_\&\:has\(\:disabled\)\]\:hover\:ring-color_stroke\.subtle:disabled:is(:hover, [data-hover]),.\[\&\:disabled\,_\&\:has\(\:disabled\)\]\:hover\:ring-color_stroke\.subtle:has(:disabled):is(:hover, [data-hover]) {
+  .\[\&\:disabled\,_\&\:has\(\:disabled\)\]\:hover\:ring-c_stroke\.subtle:disabled:is(:hover, [data-hover]),.\[\&\:disabled\,_\&\:has\(\:disabled\)\]\:hover\:ring-c_stroke\.subtle:has(:disabled):is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-subtle);
 }
 
-  .\[\&_thead_tr\:nth-child\(2\)_th\]\:empty\:bg_transparent thead tr:nth-child(2) th:is(:empty, [data-empty]) {
+  .\[\&_thead_tr\:nth-child\(2\)_th\]\:empty\:bg-c_transparent thead tr:nth-child(2) th:is(:empty, [data-empty]) {
     background-color: transparent;
 }
 
-  .disabled\:hover\:border_stroke\.default:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+  .disabled\:hover\:bd-c_stroke\.default:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-default);
 }
 
-  .selected\:horizontal\:border-b_transparent:is([aria-selected=true], [data-selected])[data-orientation=horizontal] {
+  .selected\:horizontal\:bd-b-c_transparent:is([aria-selected=true], [data-selected])[data-orientation=horizontal] {
     border-bottom-color: transparent;
 }
 
-  .selected\:vertical\:border-r_transparent:is([aria-selected=true], [data-selected])[data-orientation=vertical] {
+  .selected\:vertical\:bd-r-c_transparent:is([aria-selected=true], [data-selected])[data-orientation=vertical] {
     border-right-color: transparent;
 }
 
-  .focusWithin\:hover\:ring-color_stroke\.default:focus-within:is(:hover, [data-hover]) {
+  .focusWithin\:hover\:ring-c_stroke\.default:focus-within:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-default);
 }
 
-  .hover\:focusVisible\:shadow_inset_0_0_0_3px_var\(--shadow-color\):is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
+  .hover\:focusVisible\:bx-sh_inset_0_0_0_3px_var\(--shadow-color\):is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
     box-shadow: inset 0 0 0 3px var(--shadow-color);
 }
 
-  .hover\:\[\&_svg\]\:text_icon\.default:is(:hover, [data-hover]) svg {
+  .hover\:\[\&_svg\]\:c_icon\.default:is(:hover, [data-hover]) svg {
     color: var(--colors-icon-default);
 }
 
-  .hover\:disabled\:transform_translateX\(0\):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+  .hover\:disabled\:trf_translateX\(0\):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
     transform: translateX(0);
 }
 
-  .hover\:\[\&_svg\]\:text_stroke\.hover:is(:hover, [data-hover]) svg {
+  .hover\:\[\&_svg\]\:c_stroke\.hover:is(:hover, [data-hover]) svg {
     color: var(--colors-stroke-hover);
 }
 
-  .hover\:invalid\:bg_surface\.dangerSubtle:is(:hover, [data-hover]):is(:invalid, [data-invalid]) {
+  .hover\:invalid\:bg-c_surface\.dangerSubtle:is(:hover, [data-hover]):is(:invalid, [data-invalid]) {
     background-color: var(--colors-surface-danger-subtle);
 }
 
-  .hover\:focusVisible\:border_stroke\.default:is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
+  .hover\:focusVisible\:bd-c_stroke\.default:is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
     border-color: var(--colors-stroke-default);
 }
 
-  .disabled\:checked\:hover\:text_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
 
@@ -2139,11 +2163,11 @@
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:hover\:\[\&_svg\]\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) svg {
+  .disabled\:hover\:\[\&_svg\]\:c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) svg {
     color: var(--colors-stroke-disabled);
 }
 
-  .checked\:hover\:disabled\:transform_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
+  .checked\:hover\:disabled\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]) {
     transform: translateX(120%);
 }
 
@@ -2151,19 +2175,19 @@
     content: counter(list-item, lower-alpha) '. ';
 }
 
-  .disabled\:checked\:hover\:border_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-disabled);
 }
 
-  .invalid\:checked\:hover\:border_stroke\.hover:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .invalid\:checked\:hover\:bd-c_stroke\.hover:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-hover);
 }
 
-  .invalid\:checked\:hover\:ring-color_stroke\.hover:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+  .invalid\:checked\:hover\:ring-c_stroke\.hover:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-hover);
 }
 
-  .ariaInvalid\:focusWithin\:hover\:ring-color_stroke\.error:has([aria-invalid='true']):focus-within:is(:hover, [data-hover]),.ariaInvalid\:focusWithin\:hover\:ring-color_stroke\.error[aria-invalid='true']:focus-within:is(:hover, [data-hover]) {
+  .ariaInvalid\:focusWithin\:hover\:ring-c_stroke\.error:has([aria-invalid='true']):focus-within:is(:hover, [data-hover]),.ariaInvalid\:focusWithin\:hover\:ring-c_stroke\.error[aria-invalid='true']:focus-within:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-error);
 }
 
@@ -2172,10 +2196,10 @@
 }
 
   @media screen and (min-width: 37.5625rem) {
-    .tablet\:rounded_small {
+    .tablet\:bdr_small {
       border-radius: var(--radii-small);
 }
-    .tablet\:rounded_sharp {
+    .tablet\:bdr_sharp {
       border-radius: var(--radii-sharp);
 }
     .tablet\:w_50\% {
@@ -2192,18 +2216,12 @@
 }
     .tablet\:clear_left {
       clear: left;
-}
-    .tablet\:pe_medium {
-      padding-inline-end: var(--spacing-medium);
 }
     .tablet\:float_right {
       float: right;
 }
     .tablet\:clear_right {
       clear: right;
-}
-    .tablet\:ps_medium {
-      padding-inline-start: var(--spacing-medium);
 }
 }