support for 'auto' alignment

lib/grids/KFixedGridItem.vue

@@ -1,7 +1,10 @@
 <template>
 
   <div class="grid-item" :class="unitClass" :style="computedStyle">
-    <div :class="{ debug: gridMetrics.debug, error: !validInputs }">
+    <div
+      :class="{ debug: gridMetrics.debug, error: !validInputs }"
+      :dir="alignment === 'auto' ? 'auto' : null"
+    >
       <!-- @slot Contents of the grid item -->
       <slot></slot>
     </div>
@@ -34,8 +37,9 @@
         validator: validateSpan,
       },
       /**
-       * Horizontal alignment of the item's contents. Can be `'right'`,
-       * `'left'`, or `'center'`.
+       * Horizontal alignment of the item's contents. `'left'`, `'right'`,
+       * and `'center'` will set `text-align`. `'auto'` will set `dir="auto"`
+       * for user-generated content to support bidirectional text.
        */
       alignment: {
         type: String,
@@ -72,6 +76,19 @@
           paddingLeft: padding,
           paddingRight: padding,
         };
+
+        // no text-align should be set - handled by dir="auto"
+        if (this.alignment === 'auto') {
+          return style;
+        }
+
+        // centered regardless of RTL
+        if (this.alignment === 'center') {
+          style.textAlign = 'center';
+          return style;
+        }
+
+        // handle left and right alignment
         let isRtl = this.isRtl;
         if (this.gridMetrics && this.gridMetrics.direction) {
           isRtl = this.gridMetrics.direction === 'rtl';

lib/grids/KGridItem.vue

@@ -39,14 +39,15 @@
   /**
    * Responsive grid item used with KGrid.
    *
-   * Accepts "layout objects" as props, which can define values for  'span',
+   * Accepts "layout objects" as props, which can define values for 'span',
    * 'alignment', or both.
    *
    * If no span is defined for a particular layout, the item will span the full
    * width of the grid.
    *
    * If no alignment is defined for a particular layout, the item's contents
-   * will be left-aligned.
+   * will be left-aligned. Set `alignment` to `'auto'` to set `dir="auto"`
+   * for user-generated content to support bidirectional text.
    */
   export default {
     name: 'KGridItem',

lib/grids/common.js

@@ -1,8 +1,8 @@
 import log from 'loglevel';
 
 export function validateAlignment(value) {
-  if (!['right', 'center', 'left'].includes(value)) {
-    log.error(`If provided, alignment must be one of: 'left', 'right', or 'center'`);
+  if (!['right', 'center', 'left', 'auto'].includes(value)) {
+    log.error(`If provided, alignment must be one of: 'left', 'right', 'center', or 'auto`);
     return false;
   }
   return true;