@vaneui/ui 0.3.0-alpha.20250914103012.c204dad → 0.3.1-alpha.20250914210126.5142197

package/dist/index.js

@@ -35,11 +35,25 @@ const LINK = 'link';
 const APPEARANCE_VALUES = [DEFAULT, ACCENT, PRIMARY, SECONDARY, TERTIARY, SUCCESS, DANGER, WARNING, INFO, LINK];
 
 /** Show border - adds appearance-based border styling */
-const BORDER = 'border';
+const BORDER$1 = 'border';
+/** Show top border */
+const BORDER_T = 'borderT';
+/** Show bottom border */
+const BORDER_B = 'borderB';
+/** Show left border */
+const BORDER_L = 'borderL';
+/** Show right border */
+const BORDER_R = 'borderR';
+/** Show horizontal borders (left and right) */
+const BORDER_X = 'borderX';
+/** Show vertical borders (top and bottom) */
+const BORDER_Y = 'borderY';
 /** Hide border - removes border styling (overrides appearance colors) */
 const NO_BORDER = 'noBorder';
-/** All border property values */
-const BORDER_VALUES = [BORDER, NO_BORDER];
+/** All border property values - includes all border variations and noBorder */
+const BORDER_VALUES = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, BORDER_X, BORDER_Y, NO_BORDER];
+/** All border side keys (excluding noBorder since it doesn't have a CSS class) */
+const BORDER_KEYS = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, BORDER_X, BORDER_Y];
 
 /** Extra-small column breakpoint - responsive grid column sizing for xs screens */
 const XS_COL = 'xsCol';
@@ -374,10 +388,12 @@ const PADDING = ['padding'];
 const BREAKPOINT = ['breakpoint'];
 /** Core visual properties including appearance colors and transparency */
 const VISUAL_CORE = ['appearance', 'transparent'];
-/** Visual decoration properties for borders, shadows, and focus rings */
-const VISUAL_DECORATION = ['border', 'shadow', 'ring', 'focusVisible'];
+/** Border properties for visual decoration */
+const BORDER = ['border'];
+/** Visual decoration properties for shadows and focus rings */
+const VISUAL_DECORATION = ['shadow', 'ring', 'focusVisible'];
 /** Layout-specific visual decoration (excluding focusVisible for non-interactive elements) */
-const VISUAL_DECORATION_LAYOUT = ['border', 'shadow', 'ring'];
+const VISUAL_DECORATION_LAYOUT = ['shadow', 'ring'];
 /** Shape properties for border radius and corner rounding */
 const SHAPE = ['shape'];
 /** Typography styling properties for text appearance and formatting */
@@ -395,6 +411,7 @@ const COMPONENT_PROPS_CATEGORY = [
     ...LAYOUT_CORE,
     ...BREAKPOINT,
     ...PADDING,
+    ...BORDER,
     ...VISUAL_DECORATION,
     ...SHAPE,
     ...VARIANT,
@@ -408,7 +425,7 @@ const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent',
 const ComponentKeys = {
     /** Color appearance options */
     appearance: APPEARANCE_VALUES,
-    /** Border visibility: border (show) or noBorder (hide) */
+    /** Border visibility: includes all border variations and noBorder (border, borderT, borderB, etc., noBorder) */
     border: BORDER_VALUES,
     /** Column breakpoints for responsive grid layouts */
     breakpoint: BREAKPOINT_VALUES,
@@ -467,9 +484,9 @@ const ComponentKeys = {
 /** Complete layout category including core and flex properties */
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
 /** Complete visual category including core, decoration, and shape properties */
-const VISUAL_FULL = [...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
+const VISUAL_FULL = [...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE];
 /** Layout-specific visual category (excludes focusVisible for non-interactive elements) */
-const VISUAL_LAYOUT = [...VISUAL_CORE, ...VISUAL_DECORATION_LAYOUT, ...SHAPE];
+const VISUAL_LAYOUT = [...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION_LAYOUT, ...SHAPE];
 /** Complete typography category for text styling */
 const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE];
 /** Categories for interactive components like buttons, badges, chips */
@@ -506,14 +523,14 @@ const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
 const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT];
 /** Form component categories */
 /** Categories for checkbox form components */
-const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
 /** Categories for label form components with typography support */
 const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
 /** Categories for input form components with interactive and form-specific properties */
 const INPUT_CATEGORIES = [...INTERACTIVE_CATEGORIES];
 /** Media component categories */
 /** Categories for image media components */
-const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
 /** All available component names in the library */
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
     'grid2', 'grid3', 'grid4', 'grid5', 'grid6', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img', 'input'];
@@ -551,10 +568,15 @@ const ComponentCategories = {
 class HideTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Hide element on extra-small screens and below */
         this.xsHide = "max-xs:hidden";
+        /** Hide element on small screens and below */
         this.smHide = "max-sm:hidden";
+        /** Hide element on medium screens and below */
         this.mdHide = "max-md:hidden";
+        /** Hide element on large screens and below */
         this.lgHide = "max-lg:hidden";
+        /** Hide element on extra-large screens and below */
         this.xlHide = "max-xl:hidden";
     }
     getClasses(extractedKeys) {
@@ -565,10 +587,15 @@ class HideTheme extends BaseTheme {
 class ItemsTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Align flex items to the start of the cross axis */
         this.itemsStart = "items-start";
+        /** Align flex items to the end of the cross axis */
         this.itemsEnd = "items-end";
+        /** Center flex items along the cross axis */
         this.itemsCenter = "items-center";
+        /** Align flex items along their baseline */
         this.itemsBaseline = "items-baseline";
+        /** Stretch flex items to fill the cross axis */
         this.itemsStretch = "items-stretch";
     }
     getClasses(extractedKeys) {
@@ -579,13 +606,21 @@ class ItemsTheme extends BaseTheme {
 class JustifyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Pack flex items toward the start of the main axis */
         this.justifyStart = "justify-start";
+        /** Pack flex items toward the end of the main axis */
         this.justifyEnd = "justify-end";
+        /** Pack flex items around the center of the main axis */
         this.justifyCenter = "justify-center";
+        /** Distribute flex items with equal space between them */
         this.justifyBetween = "justify-between";
+        /** Distribute flex items with equal space around them */
         this.justifyAround = "justify-around";
+        /** Distribute flex items with equal space around them, including edges */
         this.justifyEvenly = "justify-evenly";
+        /** Stretch flex items to fill the main axis */
         this.justifyStretch = "justify-stretch";
+        /** Align flex items along their baseline on the main axis */
         this.justifyBaseline = "justify-baseline";
     }
     getClasses(extractedKeys) {
@@ -596,10 +631,15 @@ class JustifyTheme extends BaseTheme {
 class PositionTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Relative positioning - positioned relative to its normal position */
         this.relative = "relative";
+        /** Absolute positioning - positioned relative to its closest positioned ancestor */
         this.absolute = "absolute";
+        /** Fixed positioning - positioned relative to the viewport */
         this.fixed = "fixed";
+        /** Sticky positioning - toggles between relative and fixed based on scroll position */
         this.sticky = "sticky";
+        /** Static positioning - default positioning, not affected by top/left/right/bottom */
         this.static = "static";
     }
     getClasses(extractedKeys) {
@@ -610,7 +650,9 @@ class PositionTheme extends BaseTheme {
 class FontStyleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Italic font style - slanted text */
         this.italic = "italic";
+        /** Normal font style - upright text (not italic) */
         this.notItalic = "not-italic";
     }
     getClasses(extractedKeys) {
@@ -621,8 +663,11 @@ class FontStyleTheme extends BaseTheme {
 class FontFamilyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Sans-serif font family - clean, modern fonts without serifs */
         this.sans = "font-sans";
+        /** Serif font family - traditional fonts with serifs */
         this.serif = "font-serif";
+        /** Monospace font family - fixed-width fonts for code and data */
         this.mono = "font-mono";
     }
     getClasses(extractedKeys) {
@@ -633,14 +678,23 @@ class FontFamilyTheme extends BaseTheme {
 class FontWeightTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Thin font weight (100) - lightest weight */
         this.thin = "font-thin";
+        /** Extra-light font weight (200) - very light */
         this.extralight = "font-extralight";
+        /** Light font weight (300) - lighter than normal */
         this.light = "font-light";
+        /** Normal font weight (400) - default font weight */
         this.normal = "font-normal";
+        /** Medium font weight (500) - slightly bold */
         this.medium = "font-medium";
+        /** Semi-bold font weight (600) - moderately bold */
         this.semibold = "font-semibold";
+        /** Bold font weight (700) - standard bold */
         this.bold = "font-bold";
+        /** Extra-bold font weight (800) - very bold */
         this.extrabold = "font-extrabold";
+        /** Black font weight (900) - heaviest weight */
         this.black = "font-black";
     }
     getClasses(extractedKeys) {
@@ -651,9 +705,13 @@ class FontWeightTheme extends BaseTheme {
 class TextDecorationTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Underline text decoration - line below text */
         this.underline = "underline";
+        /** Line-through text decoration - strikethrough */
         this.lineThrough = "line-through";
+        /** Remove underline text decoration */
         this.noUnderline = "no-underline";
+        /** Overline text decoration - line above text */
         this.overline = "overline";
     }
     getClasses(extractedKeys) {
@@ -664,9 +722,13 @@ class TextDecorationTheme extends BaseTheme {
 class TextTransformTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Transform text to UPPERCASE */
         this.uppercase = "uppercase";
+        /** Transform text to lowercase */
         this.lowercase = "lowercase";
+        /** Capitalize First Letter Of Each Word */
         this.capitalize = "capitalize";
+        /** Normal case - no text transformation */
         this.normalCase = "normal-case";
     }
     getClasses(extractedKeys) {
@@ -677,9 +739,13 @@ class TextTransformTheme extends BaseTheme {
 class TextAlignTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Left-align text */
         this.textLeft = "text-left";
+        /** Center-align text */
         this.textCenter = "text-center";
+        /** Right-align text */
         this.textRight = "text-right";
+        /** Justify text - stretch lines to fill width */
         this.textJustify = "text-justify";
     }
     getClasses(extractedKeys) {
@@ -690,16 +756,27 @@ class TextAlignTheme extends BaseTheme {
 class DisplayTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Inline display - element flows with text */
         this.inline = "inline";
+        /** Block display - element takes full width */
         this.block = "block";
+        /** Inline-block display - element flows with text but can have width/height */
         this.inlineBlock = "inline-block";
+        /** Flex display - creates a flex container */
         this.flex = "flex";
+        /** Inline-flex display - creates an inline flex container */
         this.inlineFlex = "inline-flex";
+        /** Grid display - creates a grid container */
         this.grid = "grid";
+        /** Inline-grid display - creates an inline grid container */
         this.inlineGrid = "inline-grid";
+        /** Contents display - element's children behave as if they are direct children of the parent */
         this.contents = "contents";
+        /** Table display - element behaves like a table */
         this.table = "table";
+        /** Table-cell display - element behaves like a table cell */
         this.tableCell = "table-cell";
+        /** Hidden display - element is completely removed from layout */
         this.hidden = "hidden";
     }
     getClasses(extractedKeys) {
@@ -3421,20 +3498,35 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 class OverflowTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Auto overflow - adds scrollbars when content overflows */
         this.overflowAuto = 'overflow-auto';
+        /** Hidden overflow - clips content that overflows */
         this.overflowHidden = 'overflow-hidden';
+        /** Clip overflow - clips content without scrollbars */
         this.overflowClip = 'overflow-clip';
+        /** Visible overflow - content overflows and remains visible */
         this.overflowVisible = 'overflow-visible';
+        /** Scroll overflow - always shows scrollbars */
         this.overflowScroll = 'overflow-scroll';
+        /** Auto horizontal overflow - adds horizontal scrollbar when needed */
         this.overflowXAuto = 'overflow-x-auto';
+        /** Auto vertical overflow - adds vertical scrollbar when needed */
         this.overflowYAuto = 'overflow-y-auto';
+        /** Hidden horizontal overflow - clips content horizontally */
         this.overflowXHidden = 'overflow-x-hidden';
+        /** Hidden vertical overflow - clips content vertically */
         this.overflowYHidden = 'overflow-y-hidden';
+        /** Clip horizontal overflow - clips content horizontally without scrollbars */
         this.overflowXClip = 'overflow-x-clip';
+        /** Clip vertical overflow - clips content vertically without scrollbars */
         this.overflowYClip = 'overflow-y-clip';
+        /** Visible horizontal overflow - content overflows horizontally and remains visible */
         this.overflowXVisible = 'overflow-x-visible';
+        /** Visible vertical overflow - content overflows vertically and remains visible */
         this.overflowYVisible = 'overflow-y-visible';
+        /** Scroll horizontal overflow - always shows horizontal scrollbar */
         this.overflowXScroll = 'overflow-x-scroll';
+        /** Scroll vertical overflow - always shows vertical scrollbar */
         this.overflowYScroll = 'overflow-y-scroll';
     }
     getClasses(extractedKeys) {
@@ -3506,6 +3598,9 @@ class ComponentTheme {
                 extractedKeys[category] = key;
             }
         }
+        // No need for border/noBorder mutual exclusion logic anymore
+        // since noBorder is now part of the border category and 
+        // pickFirstTruthyKeyByCategory handles the priority naturally
         const walk = (map) => {
             for (const key of Object.keys(map)) {
                 const node = map[key];
@@ -3561,10 +3656,15 @@ class ComponentTheme {
 class SizeTheme extends BaseTheme {
     constructor(sizeMap, useDefaultKey = true) {
         super();
+        /** Extra-small size variant */
         this.xs = "";
+        /** Small size variant */
         this.sm = "";
+        /** Medium size variant (default) */
         this.md = "";
+        /** Large size variant */
         this.lg = "";
+        /** Extra-large size variant */
         this.xl = "";
         this.useDefaultKey = useDefaultKey;
         ComponentKeys.size.forEach((key) => {
@@ -3582,10 +3682,15 @@ class SizeTheme extends BaseTheme {
 class GapTheme extends BaseTheme {
     constructor(sizeMap) {
         super();
+        /** Extra-small gap - 0.5rem spacing between items */
         this.xs = 'gap-2';
+        /** Small gap - 0.75rem spacing between items */
         this.sm = 'gap-3';
+        /** Medium gap - 1rem spacing between items */
         this.md = 'gap-4';
+        /** Large gap - 1.25rem spacing between items */
         this.lg = 'gap-5';
+        /** Extra-large gap - 1.5rem spacing between items */
         this.xl = 'gap-6';
         if (sizeMap) {
             ComponentKeys.size.forEach((key) => {
@@ -3623,7 +3728,9 @@ const layoutBorderRadiusClasses = {
 class RadiusTheme extends BaseTheme {
     constructor(roundedClasses) {
         super();
+        /** Pill shape - fully rounded corners */
         this.pill = "rounded-full";
+        /** Sharp shape - no rounded corners */
         this.sharp = "rounded-none";
         this.rounded = roundedClasses;
     }
@@ -3655,26 +3762,49 @@ class RadiusTheme extends BaseTheme {
 class BorderTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        this.base = "border";
-        this.hover = "";
-        this.active = "";
-        this.focus = "";
-        this.focusVisible = "";
+        /** Show border - adds appearance-based border styling */
+        this.border = "border";
+        /** Show top border */
+        this.borderT = "border-t";
+        /** Show bottom border */
+        this.borderB = "border-b";
+        /** Show left border */
+        this.borderL = "border-l";
+        /** Show right border */
+        this.borderR = "border-r";
+        /** Show horizontal borders (left and right) */
+        this.borderX = "border-x";
+        /** Show vertical borders (top and bottom) */
+        this.borderY = "border-y";
     }
     getClasses(extractedKeys) {
-        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border) === "border"
-            ? ModeKeys.mode.map((mode) => this[mode])
-            : [];
+        const classes = [];
+        // Now all border variations and noBorder come through the 'border' category
+        const borderValue = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border;
+        // If noBorder is selected, don't apply any border classes
+        if (borderValue === "noBorder") {
+            return [];
+        }
+        // Check if the border value matches any of our border keys (BORDER_KEYS excludes noBorder)
+        if (borderValue && BORDER_KEYS.includes(borderValue)) {
+            classes.push(this[borderValue]);
+        }
+        return classes;
     }
 }
 
 class RingTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base ring styling - ring with inset positioning */
         this.base = "ring ring-inset";
+        /** Ring styling on hover state */
         this.hover = "";
+        /** Ring styling on active state */
         this.active = "";
+        /** Ring styling on focus state */
         this.focus = "";
+        /** Ring styling on focus-visible state for keyboard navigation */
         this.focusVisible = "";
     }
     getClasses(extractedKeys) {
@@ -3687,10 +3817,15 @@ class RingTheme extends BaseTheme {
 class FocusVisibleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base focus-visible styling */
         this.base = "";
+        /** Focus-visible styling on hover state */
         this.hover = "";
+        /** Focus-visible styling on active state */
         this.active = "";
+        /** Focus-visible styling on focus state */
         this.focus = "";
+        /** Focus-visible styling for keyboard navigation - outline on focus */
         this.focusVisible = "focus-visible:outline-2 focus-visible:outline-offset-2";
     }
     getClasses(extractedKeys) {
@@ -3703,10 +3838,15 @@ class FocusVisibleTheme extends BaseTheme {
 class PaddingTheme extends BaseTheme {
     constructor(initial) {
         super();
+        /** Extra-small padding - varies by component implementation */
         this.xs = "";
+        /** Small padding - varies by component implementation */
         this.sm = "";
+        /** Medium padding - varies by component implementation */
         this.md = "";
+        /** Large padding - varies by component implementation */
         this.lg = "";
+        /** Extra-large padding - varies by component implementation */
         this.xl = "";
         if (initial) {
             ComponentKeys.size.forEach((key) => {
@@ -3726,6 +3866,7 @@ class PaddingTheme extends BaseTheme {
     }
 }
 
+/** Horizontal padding theme - controls left and right padding */
 class PxTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -3740,6 +3881,7 @@ class PxTheme extends PaddingTheme {
     }
 }
 
+/** Vertical padding theme - controls top and bottom padding */
 class PyTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -3764,8 +3906,17 @@ class AppearanceTheme extends BaseTheme {
     }
     getClasses(extractedKeys) {
         var _a;
-        if (this.category === 'border' && (extractedKeys.border === 'noBorder' || extractedKeys.border === undefined)) {
-            return [];
+        if (this.category === 'border') {
+            // If noBorder is selected from the border category, don't apply appearance colors
+            if (extractedKeys.border === NO_BORDER) {
+                return [];
+            }
+            // Only apply appearance colors if any border prop is set (and not noBorder)
+            const hasBorderProps = extractedKeys.border !== undefined && extractedKeys.border !== NO_BORDER;
+            // If no border props are set, don't apply appearance colors
+            if (!hasBorderProps) {
+                return [];
+            }
         }
         if (this.category === 'ring' && (extractedKeys.ring === 'noRing' || extractedKeys.ring === undefined)) {
             return [];
@@ -4308,8 +4459,11 @@ class GenericVariantTheme extends BaseTheme {
 class WrapTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Allow flex items to wrap to new lines */
         this.flexWrap = "flex-wrap";
+        /** Prevent flex items from wrapping - keep on single line */
         this.flexNoWrap = "flex-nowrap";
+        /** Allow flex items to wrap in reverse order */
         this.flexWrapReverse = "flex-wrap-reverse";
     }
     getClasses(extractedKeys) {
@@ -4320,9 +4474,13 @@ class WrapTheme extends BaseTheme {
 class DirectionTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Horizontal flex direction - items flow left to right */
         this.row = "flex-row";
+        /** Vertical flex direction - items flow top to bottom */
         this.column = "flex-col";
+        /** Reversed horizontal flex direction - items flow right to left */
         this.rowReverse = "flex-row-reverse";
+        /** Reversed vertical flex direction - items flow bottom to top */
         this.columnReverse = "flex-col-reverse";
     }
     getClasses(extractedKeys) {
@@ -4767,6 +4925,7 @@ const mergeDefaults = (baseDefaults, overrideDefaults) => {
     return finalDefaults;
 };
 
+/** Left padding theme - controls left padding only */
 class PlTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -4784,7 +4943,9 @@ class PlTheme extends PaddingTheme {
 class ListStyleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Disc list style - bullet points for unordered lists */
         this.disc = 'list-disc';
+        /** Decimal list style - numbers for ordered lists */
         this.decimal = 'list-decimal';
     }
     getClasses(extractedKeys) {
@@ -4876,10 +5037,15 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
 class BreakpointTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Switch to column layout on extra-small screens and below */
         this.xsCol = "max-xs:flex-col";
+        /** Switch to column layout on small screens and below */
         this.smCol = "max-sm:flex-col";
+        /** Switch to column layout on medium screens and below */
         this.mdCol = "max-md:flex-col";
+        /** Switch to column layout on large screens and below */
         this.lgCol = "max-lg:flex-col";
+        /** Switch to column layout on extra-large screens and below */
         this.xlCol = "max-xl:flex-col";
     }
     getClasses(extractedKeys) {
@@ -5530,7 +5696,14 @@ exports.BLACK = BLACK;
 exports.BLOCK = BLOCK;
 exports.BOLD = BOLD;
 exports.BORDER = BORDER;
+exports.BORDER_B = BORDER_B;
+exports.BORDER_KEYS = BORDER_KEYS;
+exports.BORDER_L = BORDER_L;
+exports.BORDER_R = BORDER_R;
+exports.BORDER_T = BORDER_T;
 exports.BORDER_VALUES = BORDER_VALUES;
+exports.BORDER_X = BORDER_X;
+exports.BORDER_Y = BORDER_Y;
 exports.BREAKPOINT = BREAKPOINT;
 exports.BREAKPOINT_VALUES = BREAKPOINT_VALUES;
 exports.BUTTON_CATEGORIES = BUTTON_CATEGORIES;