procode-vs-theme 1.0.5 → 1.0.7

package/dist/components.esm.js

@@ -2,19 +2,22 @@
 // Provides access to all component styles
 const buttons = './components/_buttons.scss';
 const input = './components/_input.scss';
+const placeholder = './components/_placeholder.scss';
 const cards = './components/_cards.scss';
 // All components combined
 const allComponents = [
     buttons,
     input,
+    placeholder,
     cards
 ];
 var components = {
     buttons,
     input,
+    placeholder,
     cards,
     all: allComponents
 };
 
-export { allComponents, buttons, cards, components as default, input };
+export { allComponents, buttons, cards, components as default, input, placeholder };
 //# sourceMappingURL=components.esm.js.map

package/dist/components.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components.js

@@ -6,16 +6,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 // Provides access to all component styles
 const buttons = './components/_buttons.scss';
 const input = './components/_input.scss';
+const placeholder = './components/_placeholder.scss';
 const cards = './components/_cards.scss';
 // All components combined
 const allComponents = [
     buttons,
     input,
+    placeholder,
     cards
 ];
 var components = {
     buttons,
     input,
+    placeholder,
     cards,
     all: allComponents
 };
@@ -25,4 +28,5 @@ exports.buttons = buttons;
 exports.cards = cards;
 exports.default = components;
 exports.input = input;
+exports.placeholder = placeholder;
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.esm.js

@@ -95,16 +95,19 @@ var baseExports$1 = /*#__PURE__*/Object.freeze({
 // Provides access to all component styles
 const buttons = './components/_buttons.scss';
 const input = './components/_input.scss';
+const placeholder = './components/_placeholder.scss';
 const cards = './components/_cards.scss';
 // All components combined
 const allComponents = [
     buttons,
     input,
+    placeholder,
     cards
 ];
 var components = {
     buttons,
     input,
+    placeholder,
     cards,
     all: allComponents
 };
@@ -115,7 +118,8 @@ var components$1 = /*#__PURE__*/Object.freeze({
   buttons: buttons,
   cards: cards,
   default: components,
-  input: input
+  input: input,
+  placeholder: placeholder
 });
 
 // VS Theme Layout Export  

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -99,16 +99,19 @@ var baseExports$1 = /*#__PURE__*/Object.freeze({
 // Provides access to all component styles
 const buttons = './components/_buttons.scss';
 const input = './components/_input.scss';
+const placeholder = './components/_placeholder.scss';
 const cards = './components/_cards.scss';
 // All components combined
 const allComponents = [
     buttons,
     input,
+    placeholder,
     cards
 ];
 var components = {
     buttons,
     input,
+    placeholder,
     cards,
     all: allComponents
 };
@@ -119,7 +122,8 @@ var components$1 = /*#__PURE__*/Object.freeze({
   buttons: buttons,
   cards: cards,
   default: components,
-  input: input
+  input: input,
+  placeholder: placeholder
 });
 
 // VS Theme Layout Export  

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/base/_border.scss

@@ -6,6 +6,7 @@ $border-radius-xl: 1rem !default;
 $border-radius-pill: 50rem !default;
 $border-radius-full: 50% !default;
 
+$border-width-none: 0 !default;
 $border-width-sm: 1px !default;
 $border-width-md: 2px !default;
 $border-width-lg: 4px !default;

package/dist/src/base/_color.scss

@@ -10,6 +10,7 @@ $text-default: #808080 !default;
 $text-dark: #464646 !default;
 $text-light: #ffffff !default;
 $text-tertiary: #ed5085 !default;
+$text-placeholder: #808080 !default;
 
 $text-primary-hover: #1c428d !default;
 $text-danger-hover: #af251c !default;
@@ -21,13 +22,16 @@ $background-warning: #f97d0b !default;
 $background-danger: #e74c3c !default;
 $background-info: #17baff !default;
 $background-default: #ffffff !default;
-$background-dark: #29466e !default;
+$background-medium: #29466e !default;
+$background-dark: #0f233d !default;
 $background-dark-a: #0f233d33 !default;
-$background-light: #F7F7F7 !default;
+$background-light: #f7f7f7 !default;
 $background-tertiary: #ed5085 !default;
 $background-lime: #f3de1d !default;
 $background-transparent: color.change(#000000, $alpha: 0.1) !default;
 
+$background-disabled: #d9d9d9 !default;
+
 $border-primary: #2666e3 !default;
 $border-secondary: #c6c6c6 !default;
 $border-success: #67b926 !default;

package/dist/src/base/_custom-properties.scss

@@ -16,6 +16,7 @@
   --qo-text-dark: #{cl.$text-dark};
   --qo-text-light: #{cl.$text-light};
   --qo-text-tertiary: #{cl.$text-tertiary};
+  --qo-text-placeholder: #{cl.$text-placeholder};
 
   // Background colors
   --qo-bg-primary: #{cl.$background-primary};
@@ -26,8 +27,11 @@
   --qo-bg-info: #{cl.$background-info};
   --qo-bg-default: #{cl.$background-default};
   --qo-bg-dark: #{cl.$background-dark};
+  --qo-bg-dark-a: #{cl.$background-dark-a};
+  --qo-bg-medium: #{cl.$background-medium};
   --qo-bg-light: #{cl.$background-light};
   --qo-bg-tertiary: #{cl.$background-tertiary};
+  --qo-bg-disabled: #{cl.$background-disabled};
 
   // Border colors
   --qo-border-primary: #{cl.$border-primary};
@@ -89,6 +93,7 @@
   --qo-border-radius-full: #{bo.$border-radius-full};
 
   // Border widths
+  --qo-border-width-none: #{bo.$border-width-none};
   --qo-border-width-sm: #{bo.$border-width-sm};
   --qo-border-width-md: #{bo.$border-width-md};
   --qo-border-width-lg: #{bo.$border-width-lg};
@@ -99,4 +104,5 @@
   --qo-size-md: #{sz.$size-md};
   --qo-size-lg: #{sz.$size-lg};
   --qo-size-xl: #{sz.$size-xl};
+  --qo-size-xxl: #{sz.$size-xxl};
 }

package/dist/src/base/_size.scss

@@ -2,6 +2,16 @@ $menu-size: 32px !default;
 
 $size-xs: 8px !default;
 $size-sm: 16px !default;
-$size-md: 32px !default;
-$size-lg: 48px !default;
-$size-xl: 64px !default;
+$size-md: 20px !default;
+$size-lg: 32px !default;
+$size-xl: 48px !default;
+$size-xxl: 64px !default;
+
+$sizing-values: (
+  xs: $size-xs,
+  sm: $size-sm,
+  md: $size-md,
+  lg: $size-lg,
+  xl: $size-xl,
+  xxl: $size-xxl,
+) !default;

package/dist/src/base/_space.scss

@@ -7,6 +7,7 @@ $space-4: 1.5rem !default;
 $space-5: 3rem !default;
 
 // Legacy spacing aliases
+$space-xs: 2.5px !default;
 $space-sm: 5px !default;
 $space-md: 12.5px !default;
 $space-lg: 16.5px !default;
@@ -20,6 +21,7 @@ $spacers: (
   3: $space-3,
   4: $space-4,
   5: $space-5,
+  xs: $space-xs,
   sm: $space-sm,
   md: $space-md,
   lg: $space-lg,

package/dist/src/base/mixins/_meta-class.scss

@@ -0,0 +1,26 @@
+/// Generates two tiers for each utility class:
+///
+/// 1. Regular class:   .qo-x { ... }                                    → specificity (0,1,0)
+/// 2. Force-important: [data-prc-col-important~="qo-x"] { ... !important }
+///
+/// @param {String} $class-name — CSS class name without the dot
+/// @param {Map}    $properties — map of (property: value) pairs
+///
+/// Usage:
+///   @include meta("qo-padding-sm", (padding: 8px));
+///   @include meta("qo-text-truncate", (overflow: hidden, text-overflow: ellipsis, white-space: nowrap));
+@mixin meta($class-name, $properties) {
+  // Normal — direct class usage
+  .#{$class-name} {
+    @each $prop, $val in $properties {
+      #{$prop}: $val;
+    }
+  }
+
+  // Force override — column metadata with important flag
+  [data-prc-col-important~="#{$class-name}"] {
+    @each $prop, $val in $properties {
+      #{$prop}: $val !important;
+    }
+  }
+}

package/dist/src/components/_disabled.scss

@@ -0,0 +1,8 @@
+@use "../base/color" as cl;
+
+*:disabled,
+*[disabled],
+*.k-disabled {
+  background-color: cl.$background-disabled !important;
+  cursor: not-allowed !important;
+}

package/dist/src/components/_placeholder.scss

@@ -0,0 +1,46 @@
+@use "../base/color" as cl;
+@use "../base/font" as ft;
+@use "../base/mixins/font_size-mx" as mx;
+
+::placeholder {
+  color: cl.$text-placeholder;
+  opacity: 1;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+::-webkit-input-placeholder {
+  color: cl.$text-placeholder;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+:-ms-input-placeholder {
+  color: cl.$text-placeholder;
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+.qo-placeholder-xs::placeholder {
+  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
+}
+
+.qo-placeholder-sm::placeholder {
+  @include mx.font-size(ft.$font-size-sm, ft.$line-height-sm);
+}
+
+.qo-placeholder-md::placeholder {
+  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+}
+
+.qo-placeholder-italic::placeholder {
+  font-style: italic;
+}
+
+.qo-placeholder-primary::placeholder { color: cl.$text-primary; }
+.qo-placeholder-secondary::placeholder { color: cl.$text-secondary; }
+.qo-placeholder-success::placeholder { color: cl.$text-success; }
+.qo-placeholder-warning::placeholder { color: cl.$text-warning; }
+.qo-placeholder-danger::placeholder { color: cl.$text-danger; }
+.qo-placeholder-info::placeholder { color: cl.$text-info; }
+.qo-placeholder-default::placeholder { color: cl.$text-default; }
+.qo-placeholder-dark::placeholder { color: cl.$text-dark; }
+.qo-placeholder-light::placeholder { color: cl.$text-light; }
+.qo-placeholder-tertiary::placeholder { color: cl.$text-tertiary; }

package/dist/src/components.ts

@@ -1,20 +1,23 @@
-// VS Theme Components Export
-// Provides access to all component styles
-
-export const buttons = './components/_buttons.scss';
-export const input = './components/_input.scss';
-export const cards = './components/_cards.scss';
-
-// All components combined
-export const allComponents = [
-  buttons,
-  input,
-  cards
-];
-
-export default {
-  buttons,
-  input,
-  cards,
-  all: allComponents
-};
+// VS Theme Components Export
+// Provides access to all component styles
+
+export const buttons = './components/_buttons.scss';
+export const input = './components/_input.scss';
+export const placeholder = './components/_placeholder.scss';
+export const cards = './components/_cards.scss';
+
+// All components combined
+export const allComponents = [
+  buttons,
+  input,
+  placeholder,
+  cards
+];
+
+export default {
+  buttons,
+  input,
+  placeholder,
+  cards,
+  all: allComponents
+};

package/dist/src/index.scss

@@ -24,8 +24,6 @@
 // Box shadow
 @forward "./utilities/box-shadow/index.scss";
 
-// Size
-@forward "./utilities/size/index.scss";
 
 // Display
 @forward "./utilities/display";
@@ -66,6 +64,8 @@
 // Components
 @forward "./components/buttons";
 @forward "./components/input";
+@forward "./components/placeholder";
+@forward "./components/disabled";
 
 // Layout
 @forward "./layout/drawer";

package/dist/src/utilities/_cursor.scss

@@ -1,7 +1,7 @@
+@use "../base/mixins/meta-class" as mc;
+
 $_cursors: auto, default, pointer, wait, text, move, not-allowed, grab, grabbing;
 
 @each $cursor in $_cursors {
-  .qo-cursor-#{$cursor} {
-    cursor: $cursor;
-  }
+  @include mc.meta("qo-cursor-#{$cursor}", (cursor: $cursor));
 }

package/dist/src/utilities/_display.scss

@@ -1,20 +1,17 @@
 @use "../base/mixins/breakpoints" as bp;
+@use "../base/mixins/meta-class" as mc;
 
 $_displays: none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell;
 
 @each $display in $_displays {
-  .qo-d-#{$display} {
-    display: $display;
-  }
+  @include mc.meta("qo-d-#{$display}", (display: $display));
 }
 
 // Responsive variants
 @each $bp-name, $bp-value in bp.$breakpoints {
   @media (min-width: $bp-value) {
     @each $display in $_displays {
-      .qo-d-#{$bp-name}-#{$display} {
-        display: $display;
-      }
+      @include mc.meta("qo-d-#{$bp-name}-#{$display}", (display: $display));
     }
   }
 }

package/dist/src/utilities/_flex.scss

@@ -1,82 +1,83 @@
 @use "../base/mixins/breakpoints" as bp;
+@use "../base/mixins/meta-class" as mc;
 
 // Direction
-.qo-flex-row { flex-direction: row; }
-.qo-flex-column { flex-direction: column; }
-.qo-flex-row-reverse { flex-direction: row-reverse; }
-.qo-flex-column-reverse { flex-direction: column-reverse; }
+@include mc.meta("qo-flex-row", (flex-direction: row));
+@include mc.meta("qo-flex-column", (flex-direction: column));
+@include mc.meta("qo-flex-row-reverse", (flex-direction: row-reverse));
+@include mc.meta("qo-flex-column-reverse", (flex-direction: column-reverse));
 
 // Wrap
-.qo-flex-wrap { flex-wrap: wrap; }
-.qo-flex-nowrap { flex-wrap: nowrap; }
-.qo-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+@include mc.meta("qo-flex-wrap", (flex-wrap: wrap));
+@include mc.meta("qo-flex-nowrap", (flex-wrap: nowrap));
+@include mc.meta("qo-flex-wrap-reverse", (flex-wrap: wrap-reverse));
 
 // Justify content
-.qo-justify-content-start { justify-content: flex-start; }
-.qo-justify-content-end { justify-content: flex-end; }
-.qo-justify-content-center { justify-content: center; }
-.qo-justify-content-between { justify-content: space-between; }
-.qo-justify-content-around { justify-content: space-around; }
-.qo-justify-content-evenly { justify-content: space-evenly; }
+@include mc.meta("qo-justify-content-start", (justify-content: flex-start));
+@include mc.meta("qo-justify-content-end", (justify-content: flex-end));
+@include mc.meta("qo-justify-content-center", (justify-content: center));
+@include mc.meta("qo-justify-content-between", (justify-content: space-between));
+@include mc.meta("qo-justify-content-around", (justify-content: space-around));
+@include mc.meta("qo-justify-content-evenly", (justify-content: space-evenly));
 
 // Align items
-.qo-align-items-start { align-items: flex-start; }
-.qo-align-items-end { align-items: flex-end; }
-.qo-align-items-center { align-items: center; }
-.qo-align-items-baseline { align-items: baseline; }
-.qo-align-items-stretch { align-items: stretch; }
+@include mc.meta("qo-align-items-start", (align-items: flex-start));
+@include mc.meta("qo-align-items-end", (align-items: flex-end));
+@include mc.meta("qo-align-items-center", (align-items: center));
+@include mc.meta("qo-align-items-baseline", (align-items: baseline));
+@include mc.meta("qo-align-items-stretch", (align-items: stretch));
 
 // Align self
-.qo-align-self-start { align-self: flex-start; }
-.qo-align-self-end { align-self: flex-end; }
-.qo-align-self-center { align-self: center; }
-.qo-align-self-baseline { align-self: baseline; }
-.qo-align-self-stretch { align-self: stretch; }
+@include mc.meta("qo-align-self-start", (align-self: flex-start));
+@include mc.meta("qo-align-self-end", (align-self: flex-end));
+@include mc.meta("qo-align-self-center", (align-self: center));
+@include mc.meta("qo-align-self-baseline", (align-self: baseline));
+@include mc.meta("qo-align-self-stretch", (align-self: stretch));
 
 // Align content
-.qo-align-content-start { align-content: flex-start; }
-.qo-align-content-end { align-content: flex-end; }
-.qo-align-content-center { align-content: center; }
-.qo-align-content-between { align-content: space-between; }
-.qo-align-content-around { align-content: space-around; }
-.qo-align-content-stretch { align-content: stretch; }
+@include mc.meta("qo-align-content-start", (align-content: flex-start));
+@include mc.meta("qo-align-content-end", (align-content: flex-end));
+@include mc.meta("qo-align-content-center", (align-content: center));
+@include mc.meta("qo-align-content-between", (align-content: space-between));
+@include mc.meta("qo-align-content-around", (align-content: space-around));
+@include mc.meta("qo-align-content-stretch", (align-content: stretch));
 
 // Flex grow/shrink/fill
-.qo-flex-fill { flex: 1 1 auto; }
-.qo-flex-grow-0 { flex-grow: 0; }
-.qo-flex-grow-1 { flex-grow: 1; }
-.qo-flex-shrink-0 { flex-shrink: 0; }
-.qo-flex-shrink-1 { flex-shrink: 1; }
+@include mc.meta("qo-flex-fill", (flex: 1 1 auto));
+@include mc.meta("qo-flex-grow-0", (flex-grow: 0));
+@include mc.meta("qo-flex-grow-1", (flex-grow: 1));
+@include mc.meta("qo-flex-shrink-0", (flex-shrink: 0));
+@include mc.meta("qo-flex-shrink-1", (flex-shrink: 1));
 
 // Order
-.qo-order-first { order: -1; }
-.qo-order-0 { order: 0; }
-.qo-order-1 { order: 1; }
-.qo-order-2 { order: 2; }
-.qo-order-3 { order: 3; }
-.qo-order-4 { order: 4; }
-.qo-order-5 { order: 5; }
-.qo-order-last { order: 6; }
+@include mc.meta("qo-order-first", (order: -1));
+@include mc.meta("qo-order-0", (order: 0));
+@include mc.meta("qo-order-1", (order: 1));
+@include mc.meta("qo-order-2", (order: 2));
+@include mc.meta("qo-order-3", (order: 3));
+@include mc.meta("qo-order-4", (order: 4));
+@include mc.meta("qo-order-5", (order: 5));
+@include mc.meta("qo-order-last", (order: 6));
 
 // Responsive variants
 @each $bp-name, $bp-value in bp.$breakpoints {
   @media (min-width: $bp-value) {
-    .qo-flex-#{$bp-name}-row { flex-direction: row; }
-    .qo-flex-#{$bp-name}-column { flex-direction: column; }
-    .qo-flex-#{$bp-name}-row-reverse { flex-direction: row-reverse; }
-    .qo-flex-#{$bp-name}-column-reverse { flex-direction: column-reverse; }
-    .qo-flex-#{$bp-name}-wrap { flex-wrap: wrap; }
-    .qo-flex-#{$bp-name}-nowrap { flex-wrap: nowrap; }
-    .qo-justify-content-#{$bp-name}-start { justify-content: flex-start; }
-    .qo-justify-content-#{$bp-name}-end { justify-content: flex-end; }
-    .qo-justify-content-#{$bp-name}-center { justify-content: center; }
-    .qo-justify-content-#{$bp-name}-between { justify-content: space-between; }
-    .qo-justify-content-#{$bp-name}-around { justify-content: space-around; }
-    .qo-justify-content-#{$bp-name}-evenly { justify-content: space-evenly; }
-    .qo-align-items-#{$bp-name}-start { align-items: flex-start; }
-    .qo-align-items-#{$bp-name}-end { align-items: flex-end; }
-    .qo-align-items-#{$bp-name}-center { align-items: center; }
-    .qo-align-items-#{$bp-name}-baseline { align-items: baseline; }
-    .qo-align-items-#{$bp-name}-stretch { align-items: stretch; }
+    @include mc.meta("qo-flex-#{$bp-name}-row", (flex-direction: row));
+    @include mc.meta("qo-flex-#{$bp-name}-column", (flex-direction: column));
+    @include mc.meta("qo-flex-#{$bp-name}-row-reverse", (flex-direction: row-reverse));
+    @include mc.meta("qo-flex-#{$bp-name}-column-reverse", (flex-direction: column-reverse));
+    @include mc.meta("qo-flex-#{$bp-name}-wrap", (flex-wrap: wrap));
+    @include mc.meta("qo-flex-#{$bp-name}-nowrap", (flex-wrap: nowrap));
+    @include mc.meta("qo-justify-content-#{$bp-name}-start", (justify-content: flex-start));
+    @include mc.meta("qo-justify-content-#{$bp-name}-end", (justify-content: flex-end));
+    @include mc.meta("qo-justify-content-#{$bp-name}-center", (justify-content: center));
+    @include mc.meta("qo-justify-content-#{$bp-name}-between", (justify-content: space-between));
+    @include mc.meta("qo-justify-content-#{$bp-name}-around", (justify-content: space-around));
+    @include mc.meta("qo-justify-content-#{$bp-name}-evenly", (justify-content: space-evenly));
+    @include mc.meta("qo-align-items-#{$bp-name}-start", (align-items: flex-start));
+    @include mc.meta("qo-align-items-#{$bp-name}-end", (align-items: flex-end));
+    @include mc.meta("qo-align-items-#{$bp-name}-center", (align-items: center));
+    @include mc.meta("qo-align-items-#{$bp-name}-baseline", (align-items: baseline));
+    @include mc.meta("qo-align-items-#{$bp-name}-stretch", (align-items: stretch));
   }
 }

package/dist/src/utilities/_opacity.scss

@@ -1,7 +1,7 @@
+@use "../base/mixins/meta-class" as mc;
+
 $_opacities: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1);
 
 @each $key, $value in $_opacities {
-  .qo-opacity-#{$key} {
-    opacity: $value;
-  }
+  @include mc.meta("qo-opacity-#{$key}", (opacity: $value));
 }

package/dist/src/utilities/_overflow.scss

@@ -1,7 +1,9 @@
+@use "../base/mixins/meta-class" as mc;
+
 $_overflow-values: auto, hidden, visible, scroll;
 
 @each $value in $_overflow-values {
-  .qo-overflow-#{$value} { overflow: $value; }
-  .qo-overflow-x-#{$value} { overflow-x: $value; }
-  .qo-overflow-y-#{$value} { overflow-y: $value; }
+  @include mc.meta("qo-overflow-#{$value}", (overflow: $value));
+  @include mc.meta("qo-overflow-x-#{$value}", (overflow-x: $value));
+  @include mc.meta("qo-overflow-y-#{$value}", (overflow-y: $value));
 }

package/dist/src/utilities/_position.scss

@@ -1,26 +1,22 @@
-.qo-position-static { position: static; }
-.qo-position-relative { position: relative; }
-.qo-position-absolute { position: absolute; }
-.qo-position-fixed { position: fixed; }
-.qo-position-sticky { position: sticky; }
+@use "../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-position-static", (position: static));
+@include mc.meta("qo-position-relative", (position: relative));
+@include mc.meta("qo-position-absolute", (position: absolute));
+@include mc.meta("qo-position-fixed", (position: fixed));
+@include mc.meta("qo-position-sticky", (position: sticky));
 
 // Edge positioning
 $_positions: (0: 0, 50: 50%, 100: 100%);
 
 @each $key, $value in $_positions {
-  .qo-top-#{$key} { top: $value; }
-  .qo-bottom-#{$key} { bottom: $value; }
-  .qo-start-#{$key} { left: $value; }
-  .qo-end-#{$key} { right: $value; }
+  @include mc.meta("qo-top-#{$key}", (top: $value));
+  @include mc.meta("qo-bottom-#{$key}", (bottom: $value));
+  @include mc.meta("qo-start-#{$key}", (left: $value));
+  @include mc.meta("qo-end-#{$key}", (right: $value));
 }
 
 // Center transform helpers
-.qo-translate-middle {
-  transform: translate(-50%, -50%);
-}
-.qo-translate-middle-x {
-  transform: translateX(-50%);
-}
-.qo-translate-middle-y {
-  transform: translateY(-50%);
-}
+@include mc.meta("qo-translate-middle", (transform: translate(-50%, -50%)));
+@include mc.meta("qo-translate-middle-x", (transform: translateX(-50%)));
+@include mc.meta("qo-translate-middle-y", (transform: translateY(-50%)));