npm - @keenmate/pure-admin-core - Versions diffs - 2.0.2 → 2.1.1 - Mend

@keenmate/pure-admin-core 2.0.2 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/src/scss/core-components/_utilities.scss CHANGED Viewed

@@ -1,362 +1,362 @@
-/* ========================================
-   Utility Components
-   Font utilities, compact mode, component showcase
-   ======================================== */
-@use '../variables' as *;
-// Font size classes - Apply to <html> element for proportional scaling of all rem units
-// These use absolute px values because rem would be calculated against browser default (16px),
-// not the framework's 10px base. Scaling the html font-size scales all rem values proportionally.
-// Example: document.documentElement.classList.add('font-size-large');
-html.font-size-small {
-  font-size: 9px;   // ~14px body text (9 * 1.6 = 14.4px)
-}
-html.font-size-default {
-  font-size: 10px;  // 16px body text (default, same as html base)
-}
-html.font-size-large {
-  font-size: 11px;  // ~18px body text (11 * 1.6 = 17.6px)
-}
-html.font-size-xlarge {
-  font-size: 12px;  // ~19px body text (12 * 1.6 = 19.2px)
-}
-// Font family utilities
-// Only for overriding the theme's default font
-.font-family-serif {
-  font-family: $font-stack-serif;
-}
-.font-family-mono {
-  font-family: $font-stack-mono;
-}
-// Compact mode
-.compact-mode {
-  .pa-card__body {
-    padding: $spacing-md;
-  }
-  .pa-table td,
-  .pa-table th {
-    padding: $btn-padding-v $btn-padding-h;
-  }
-  .pa-sidebar__nav ul li a {
-    padding: $sidebar-padding;
-  }
-  .pa-form-group {
-    margin-bottom: $form-group-margin-compact;
-  }
-}
-// Min-height utilities (rem-based)
-.min-h-2x { min-height: 2rem; }   // 32px
-.min-h-3x { min-height: 3rem; }   // 48px
-.min-h-5x { min-height: 5rem; }   // 80px
-.min-h-8x { min-height: 8rem; }   // 128px
-.min-h-10x { min-height: 10rem; } // 160px
-.min-h-12x { min-height: 12rem; } // 192px
-.min-h-15x { min-height: 15rem; } // 240px
-.min-h-20x { min-height: 20rem; } // 320px
-.min-h-25x { min-height: 25rem; } // 400px
-.min-h-30x { min-height: 30rem; } // 480px
-// Fixed height utilities (rem-based) - for scrollable containers
-.h-2x { height: 2rem; }   // 32px
-.h-3x { height: 3rem; }   // 48px
-.h-5x { height: 5rem; }   // 80px
-.h-8x { height: 8rem; }   // 128px
-.h-10x { height: 10rem; } // 160px
-.h-12x { height: 12rem; } // 192px
-.h-15x { height: 15rem; } // 240px
-.h-20x { height: 20rem; } // 320px
-.h-25x { height: 25rem; } // 400px
-.h-30x { height: 30rem; } // 480px
-.h-40x { height: 40rem; } // 640px
-.h-50x { height: 50rem; } // 800px
-// Max-height utilities (rem-based) - useful for limiting content height
-.max-h-5x { max-height: 5rem; }   // 80px
-.max-h-8x { max-height: 8rem; }   // 128px
-.max-h-10x { max-height: 10rem; } // 160px
-.max-h-12x { max-height: 12rem; } // 192px
-.max-h-15x { max-height: 15rem; } // 240px
-.max-h-20x { max-height: 20rem; } // 320px
-.max-h-25x { max-height: 25rem; } // 400px
-.max-h-30x { max-height: 30rem; } // 480px
-.max-h-40x { max-height: 40rem; } // 640px
-.max-h-50x { max-height: 50rem; } // 800px
-// Percentage-based height utilities - for filling available space
-.h-full { height: 100%; }
-.h-screen { height: 100vh; }
-.min-h-full { min-height: 100%; }
-.min-h-screen { min-height: 100vh; }
-.max-h-full { max-height: 100%; }
-.max-h-screen { max-height: 100vh; }
-// Flex utilities - for filling available space in flex containers
-.flex-1 { flex: 1 1 0%; }           // Grow and shrink equally, ignore content size
-.flex-auto { flex: 1 1 auto; }      // Grow and shrink, based on content size
-.flex-initial { flex: 0 1 auto; }   // Shrink but don't grow (default)
-.flex-none { flex: none; }          // Don't grow or shrink
-.flex-grow { flex-grow: 1; }        // Grow to fill space
-.flex-grow-0 { flex-grow: 0; }      // Don't grow
-.flex-shrink { flex-shrink: 1; }    // Allow shrinking
-.flex-shrink-0 { flex-shrink: 0; }  // Don't shrink
-// Overflow utilities - pair with height/max-height for scrollable content
-.overflow-auto { overflow: auto; }
-.overflow-y-auto { overflow-y: auto; }
-.overflow-x-auto { overflow-x: auto; }
-.overflow-hidden { overflow: hidden; }
-.overflow-visible { overflow: visible; }
-// Overlay scrollbar utilities (scrollbar floats over content, doesn't reduce width)
-// Supported in Chromium browsers; Firefox falls back to auto
-.overflow-overlay {
-  overflow: auto;
-  overflow: overlay;
-}
-.overflow-y-overlay {
-  overflow-y: auto;
-  overflow-y: overlay;
-}
-.overflow-x-overlay {
-  overflow-x: auto;
-  overflow-x: overlay;
-}
-// Scroll lock - prevents body scrolling when overlays are open
-// Apply to <body> element via JavaScript
-.pa-scroll-lock {
-  overflow: hidden !important;
-}
-// Cursor utilities
-.cursor-pointer { cursor: pointer; }
-.cursor-help { cursor: help; }
-.cursor-wait { cursor: wait; }
-.cursor-not-allowed { cursor: not-allowed; }
-.cursor-text { cursor: text; }
-.cursor-move { cursor: move; }
-.cursor-default { cursor: default; }
-.cursor-grab { cursor: grab; }
-.cursor-grabbing { cursor: grabbing; }
-.cursor-zoom-in { cursor: zoom-in; }
-.cursor-zoom-out { cursor: zoom-out; }
-// ========================================
-// Text Component (BEM pattern)
-// For paragraph typography across pages
-// ========================================
-.pa-text {
-  font-size: $font-size-sm;  // 1.4rem (14px) - default
-  color: var(--pa-text-color-1);
-  // Size modifiers
-  &--xs {
-    font-size: $font-size-2xs;  // 1rem (10px)
-  }
-  &--sm {
-    font-size: $font-size-xs;   // 1.2rem (12px)
-  }
-  &--lg {
-    font-size: $font-size-base; // 1.6rem (16px)
-  }
-  &--xl {
-    font-size: $font-size-lg;   // 1.8rem (18px)
-  }
-  // Color modifiers
-  &--primary {
-    color: var(--pa-text-color-1);
-  }
-  &--secondary {
-    color: var(--pa-text-color-2);
-  }
-  // Alignment modifiers (logical properties for RTL support)
-  &--start {
-    text-align: start; // RTL: flips to right
-  }
-  &--center {
-    text-align: center;
-  }
-  &--end {
-    text-align: end; // RTL: flips to left
-  }
-  // Semantic variants (compound styles)
-  &--caption {
-    font-size: $font-size-xs;
-    color: var(--pa-text-color-2);
-    margin-bottom: $spacing-sm;
-  }
-  &--lead {
-    font-size: $font-size-base;
-    line-height: $line-height-relaxed;
-  }
-}
-// Gap utilities (10px rem base)
-// Semantic gap classes using spacing variables
-@each $name, $value in $semantic-spacers {
-  .gap-#{$name} { gap: #{$value}; }
-  .row-gap-#{$name} { row-gap: #{$value}; }
-  .column-gap-#{$name} { column-gap: #{$value}; }
-}
-// Numeric gap classes (in 10px rem units) - kept for backwards compatibility
-.gap-1 { gap: 0.1rem; }  // 1px
-.gap-2 { gap: 0.2rem; }  // 2px
-.gap-3 { gap: 0.3rem; }  // 3px
-.gap-4 { gap: 0.4rem; }  // 4px
-.gap-5 { gap: 0.5rem; }  // 5px
-.gap-6 { gap: 0.6rem; }  // 6px
-.gap-8 { gap: 0.8rem; }  // 8px
-.gap-10 { gap: 1rem; }   // 10px
-.gap-12 { gap: 1.2rem; } // 12px
-.gap-15 { gap: 1.5rem; } // 15px
-.gap-20 { gap: 2rem; }   // 20px
-// Align-self utilities (for flex/grid children)
-.self-start { align-self: flex-start; }
-.self-center { align-self: center; }
-.self-end { align-self: flex-end; }
-.self-stretch { align-self: stretch; }
-.self-baseline { align-self: baseline; }
-// Font-size utilities (10px rem base)
-// Direct font-size classes using typography variables
-.text-2xs { font-size: $font-size-2xs; }   // 1rem = 10px
-.text-xs  { font-size: $font-size-xs; }    // 1.2rem = 12px
-.text-sm  { font-size: $font-size-sm; }    // 1.4rem = 14px
-.text-md  { font-size: $font-size-md; }    // 1.5rem = 15px
-.text-base { font-size: $font-size-base; } // 1.6rem = 16px
-.text-lg  { font-size: $font-size-lg; }    // 1.8rem = 18px
-.text-xl  { font-size: $font-size-xl; }    // 2rem = 20px
-.text-2xl { font-size: $font-size-2xl; }   // 2.4rem = 24px
-.text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
-.text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
-// Text truncation with ellipsis
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-// Link styling
-.pa-link {
-  color: $accent-color;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-// Component showcase styling
-.component-showcase {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $spacing-sm;
-  margin-bottom: $spacing-lg;
-}
-// Usage example styling
-.usage-example {
-  .user-item,
-  .project-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: $spacing-md;
-    margin-bottom: $spacing-sm;
-    background-color: var(--pa-card-bg);
-    border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius;
-    .user-name {
-      font-weight: $font-weight-medium;
-    }
-    h5 {
-      margin: 0 0 $spacing-sm 0;
-      font-size: $font-size-base;
-      font-weight: $font-weight-semibold;
-    }
-    .project-tags {
-      display: flex;
-      flex-wrap: wrap;
-      gap: $spacing-xs;
-    }
-  }
-  .project-item {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-// Theme color utilities (color-1 through color-9)
-// Use these to apply theme colors to any element
-@for $i from 1 through 9 {
-  .pa-bg-color-#{$i} { background-color: var(--pa-color-#{$i}); }
-  .pa-text-color-#{$i} { color: var(--pa-color-#{$i}); }
-  .pa-border-color-#{$i} { border-color: var(--pa-color-#{$i}); }
-}
-// ========================================
-// Logical Spacing Utilities (RTL-aware)
-// ms = margin-inline-start, me = margin-inline-end
-// ps = padding-inline-start, pe = padding-inline-end
-// ========================================
-// Margin inline-start (ms-*) - RTL: flips to margin-right
-@each $name, $value in $semantic-spacers {
-  .ms-#{$name} { margin-inline-start: #{$value}; }
-}
-.ms-auto { margin-inline-start: auto; }
-// Margin inline-end (me-*) - RTL: flips to margin-left
-@each $name, $value in $semantic-spacers {
-  .me-#{$name} { margin-inline-end: #{$value}; }
-}
-.me-auto { margin-inline-end: auto; }
-// Padding inline-start (ps-*) - RTL: flips to padding-right
-@each $name, $value in $semantic-spacers {
-  .ps-#{$name} { padding-inline-start: #{$value}; }
-}
-// Padding inline-end (pe-*) - RTL: flips to padding-left
-@each $name, $value in $semantic-spacers {
-  .pe-#{$name} { padding-inline-end: #{$value}; }
-}
-// Text alignment utilities (RTL-aware)
-.text-start { text-align: start; } // RTL: flips to right
-.text-center { text-align: center; }
-.text-end { text-align: end; } // RTL: flips to left
+/* ========================================
+   Utility Components
+   Font utilities, compact mode, component showcase
+   ======================================== */
+@use '../variables' as *;
+// Font size classes - Apply to <html> element for proportional scaling of all rem units
+// These use absolute px values because rem would be calculated against browser default (16px),
+// not the framework's 10px base. Scaling the html font-size scales all rem values proportionally.
+// Example: document.documentElement.classList.add('font-size-large');
+html.font-size-small {
+  font-size: 9px;   // ~14px body text (9 * 1.6 = 14.4px)
+}
+html.font-size-default {
+  font-size: 10px;  // 16px body text (default, same as html base)
+}
+html.font-size-large {
+  font-size: 11px;  // ~18px body text (11 * 1.6 = 17.6px)
+}
+html.font-size-xlarge {
+  font-size: 12px;  // ~19px body text (12 * 1.6 = 19.2px)
+}
+// Font family utilities
+// Only for overriding the theme's default font
+.font-family-serif {
+  font-family: $font-stack-serif;
+}
+.font-family-mono {
+  font-family: $font-stack-mono;
+}
+// Compact mode
+.compact-mode {
+  .pa-card__body {
+    padding: $spacing-md;
+  }
+  .pa-table td,
+  .pa-table th {
+    padding: $btn-padding-v $btn-padding-h;
+  }
+  .pa-sidebar__nav ul li a {
+    padding: $sidebar-padding;
+  }
+  .pa-form-group {
+    margin-bottom: $form-group-margin-compact;
+  }
+}
+// Min-height utilities (rem-based)
+.min-h-2x { min-height: 2rem; }   // 32px
+.min-h-3x { min-height: 3rem; }   // 48px
+.min-h-5x { min-height: 5rem; }   // 80px
+.min-h-8x { min-height: 8rem; }   // 128px
+.min-h-10x { min-height: 10rem; } // 160px
+.min-h-12x { min-height: 12rem; } // 192px
+.min-h-15x { min-height: 15rem; } // 240px
+.min-h-20x { min-height: 20rem; } // 320px
+.min-h-25x { min-height: 25rem; } // 400px
+.min-h-30x { min-height: 30rem; } // 480px
+// Fixed height utilities (rem-based) - for scrollable containers
+.h-2x { height: 2rem; }   // 32px
+.h-3x { height: 3rem; }   // 48px
+.h-5x { height: 5rem; }   // 80px
+.h-8x { height: 8rem; }   // 128px
+.h-10x { height: 10rem; } // 160px
+.h-12x { height: 12rem; } // 192px
+.h-15x { height: 15rem; } // 240px
+.h-20x { height: 20rem; } // 320px
+.h-25x { height: 25rem; } // 400px
+.h-30x { height: 30rem; } // 480px
+.h-40x { height: 40rem; } // 640px
+.h-50x { height: 50rem; } // 800px
+// Max-height utilities (rem-based) - useful for limiting content height
+.max-h-5x { max-height: 5rem; }   // 80px
+.max-h-8x { max-height: 8rem; }   // 128px
+.max-h-10x { max-height: 10rem; } // 160px
+.max-h-12x { max-height: 12rem; } // 192px
+.max-h-15x { max-height: 15rem; } // 240px
+.max-h-20x { max-height: 20rem; } // 320px
+.max-h-25x { max-height: 25rem; } // 400px
+.max-h-30x { max-height: 30rem; } // 480px
+.max-h-40x { max-height: 40rem; } // 640px
+.max-h-50x { max-height: 50rem; } // 800px
+// Percentage-based height utilities - for filling available space
+.h-full { height: 100%; }
+.h-screen { height: 100vh; }
+.min-h-full { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.max-h-full { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }
+// Flex utilities - for filling available space in flex containers
+.flex-1 { flex: 1 1 0%; }           // Grow and shrink equally, ignore content size
+.flex-auto { flex: 1 1 auto; }      // Grow and shrink, based on content size
+.flex-initial { flex: 0 1 auto; }   // Shrink but don't grow (default)
+.flex-none { flex: none; }          // Don't grow or shrink
+.flex-grow { flex-grow: 1; }        // Grow to fill space
+.flex-grow-0 { flex-grow: 0; }      // Don't grow
+.flex-shrink { flex-shrink: 1; }    // Allow shrinking
+.flex-shrink-0 { flex-shrink: 0; }  // Don't shrink
+// Overflow utilities - pair with height/max-height for scrollable content
+.overflow-auto { overflow: auto; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-visible { overflow: visible; }
+// Overlay scrollbar utilities (scrollbar floats over content, doesn't reduce width)
+// Supported in Chromium browsers; Firefox falls back to auto
+.overflow-overlay {
+  overflow: auto;
+  overflow: overlay;
+}
+.overflow-y-overlay {
+  overflow-y: auto;
+  overflow-y: overlay;
+}
+.overflow-x-overlay {
+  overflow-x: auto;
+  overflow-x: overlay;
+}
+// Scroll lock - prevents body scrolling when overlays are open
+// Apply to <body> element via JavaScript
+.pa-scroll-lock {
+  overflow: hidden !important;
+}
+// Cursor utilities
+.cursor-pointer { cursor: pointer; }
+.cursor-help { cursor: help; }
+.cursor-wait { cursor: wait; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-text { cursor: text; }
+.cursor-move { cursor: move; }
+.cursor-default { cursor: default; }
+.cursor-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }
+.cursor-zoom-in { cursor: zoom-in; }
+.cursor-zoom-out { cursor: zoom-out; }
+// ========================================
+// Text Component (BEM pattern)
+// For paragraph typography across pages
+// ========================================
+.pa-text {
+  font-size: $font-size-sm;  // 1.4rem (14px) - default
+  color: var(--pa-text-color-1);
+  // Size modifiers
+  &--xs {
+    font-size: $font-size-2xs;  // 1rem (10px)
+  }
+  &--sm {
+    font-size: $font-size-xs;   // 1.2rem (12px)
+  }
+  &--lg {
+    font-size: $font-size-base; // 1.6rem (16px)
+  }
+  &--xl {
+    font-size: $font-size-lg;   // 1.8rem (18px)
+  }
+  // Color modifiers
+  &--primary {
+    color: var(--pa-text-color-1);
+  }
+  &--secondary {
+    color: var(--pa-text-color-2);
+  }
+  // Alignment modifiers (logical properties for RTL support)
+  &--start {
+    text-align: start; // RTL: flips to right
+  }
+  &--center {
+    text-align: center;
+  }
+  &--end {
+    text-align: end; // RTL: flips to left
+  }
+  // Semantic variants (compound styles)
+  &--caption {
+    font-size: $font-size-xs;
+    color: var(--pa-text-color-2);
+    margin-bottom: $spacing-sm;
+  }
+  &--lead {
+    font-size: $font-size-base;
+    line-height: $line-height-relaxed;
+  }
+}
+// Gap utilities (10px rem base)
+// Semantic gap classes using spacing variables
+@each $name, $value in $semantic-spacers {
+  .gap-#{$name} { gap: #{$value}; }
+  .row-gap-#{$name} { row-gap: #{$value}; }
+  .column-gap-#{$name} { column-gap: #{$value}; }
+}
+// Numeric gap classes (in 10px rem units) - kept for backwards compatibility
+.gap-1 { gap: 0.1rem; }  // 1px
+.gap-2 { gap: 0.2rem; }  // 2px
+.gap-3 { gap: 0.3rem; }  // 3px
+.gap-4 { gap: 0.4rem; }  // 4px
+.gap-5 { gap: 0.5rem; }  // 5px
+.gap-6 { gap: 0.6rem; }  // 6px
+.gap-8 { gap: 0.8rem; }  // 8px
+.gap-10 { gap: 1rem; }   // 10px
+.gap-12 { gap: 1.2rem; } // 12px
+.gap-15 { gap: 1.5rem; } // 15px
+.gap-20 { gap: 2rem; }   // 20px
+// Align-self utilities (for flex/grid children)
+.self-start { align-self: flex-start; }
+.self-center { align-self: center; }
+.self-end { align-self: flex-end; }
+.self-stretch { align-self: stretch; }
+.self-baseline { align-self: baseline; }
+// Font-size utilities (10px rem base)
+// Direct font-size classes using typography variables
+.text-2xs { font-size: $font-size-2xs; }   // 1rem = 10px
+.text-xs  { font-size: $font-size-xs; }    // 1.2rem = 12px
+.text-sm  { font-size: $font-size-sm; }    // 1.4rem = 14px
+.text-md  { font-size: $font-size-md; }    // 1.5rem = 15px
+.text-base { font-size: $font-size-base; } // 1.6rem = 16px
+.text-lg  { font-size: $font-size-lg; }    // 1.8rem = 18px
+.text-xl  { font-size: $font-size-xl; }    // 2rem = 20px
+.text-2xl { font-size: $font-size-2xl; }   // 2.4rem = 24px
+.text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
+.text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
+// Text truncation with ellipsis
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+// Link styling
+.pa-link {
+  color: $accent-color;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+// Component showcase styling
+.component-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+  margin-bottom: $spacing-lg;
+}
+// Usage example styling
+.usage-example {
+  .user-item,
+  .project-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $spacing-md;
+    margin-bottom: $spacing-sm;
+    background-color: var(--pa-card-bg);
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius;
+    .user-name {
+      font-weight: $font-weight-medium;
+    }
+    h5 {
+      margin: 0 0 $spacing-sm 0;
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+    }
+    .project-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $spacing-xs;
+    }
+  }
+  .project-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+// Theme color utilities (color-1 through color-9)
+// Use these to apply theme colors to any element
+@for $i from 1 through 9 {
+  .pa-bg-color-#{$i} { background-color: var(--pa-color-#{$i}); }
+  .pa-text-color-#{$i} { color: var(--pa-color-#{$i}); }
+  .pa-border-color-#{$i} { border-color: var(--pa-color-#{$i}); }
+}
+// ========================================
+// Logical Spacing Utilities (RTL-aware)
+// ms = margin-inline-start, me = margin-inline-end
+// ps = padding-inline-start, pe = padding-inline-end
+// ========================================
+// Margin inline-start (ms-*) - RTL: flips to margin-right
+@each $name, $value in $semantic-spacers {
+  .ms-#{$name} { margin-inline-start: #{$value}; }
+}
+.ms-auto { margin-inline-start: auto; }
+// Margin inline-end (me-*) - RTL: flips to margin-left
+@each $name, $value in $semantic-spacers {
+  .me-#{$name} { margin-inline-end: #{$value}; }
+}
+.me-auto { margin-inline-end: auto; }
+// Padding inline-start (ps-*) - RTL: flips to padding-right
+@each $name, $value in $semantic-spacers {
+  .ps-#{$name} { padding-inline-start: #{$value}; }
+}
+// Padding inline-end (pe-*) - RTL: flips to padding-left
+@each $name, $value in $semantic-spacers {
+  .pe-#{$name} { padding-inline-end: #{$value}; }
+}
+// Text alignment utilities (RTL-aware)
+.text-start { text-align: start; } // RTL: flips to right
+.text-center { text-align: center; }
+.text-end { text-align: end; } // RTL: flips to left