@toife/vue 3.1.4 → 3.1.6

package/src/components/checkbox/checkbox.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from "vue";
 import type { CheckboxProps, CheckboxEmit } from "./checkbox.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -32,11 +32,11 @@ const checkboxAttrs = computed(() => {
   const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
   return {
     class: [
-      withPrefix(["layer", "checkbox"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix(["size", props.size]),
-      withPrefix("checkbox"),
+      cssPrefix(["layer", "checkbox"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix(["size", props.size]),
+      cssPrefix("checkbox"),
       props.variant,
       {
         on: props.modelValue,
@@ -50,7 +50,7 @@ const checkboxAttrs = computed(() => {
 });
 
 const checkboxIconAttrs = {
-  class: [withPrefix("checkbox-icon")],
+  class: [cssPrefix("checkbox-icon")],
 } as const;
 
 // Methods

package/src/components/collapse/collapse.html

@@ -3,7 +3,7 @@
     v-bind="triggerAttrs"
     role="button"
     tabindex="0"
-    @click="toggle"
+    @pointerup="toggle"
     @keydown.enter.space.prevent="toggle"
   >
     <slot name="trigger" />

package/src/components/collapse/collapse.scss

@@ -8,19 +8,16 @@ $collapse-content-inner: sass.fn-naming-prefix("collapse-content-inner");
 
 // Property name - layer: collapse
 $collapse-height: sass.fn-naming-dvar(("collapse", "height"), 0);
-$collapse-duration: sass.fn-naming-dvar(
-  ("collapse", "duration"),
-  sass.fn-naming-var("motion", "duration")
-);
+$collapse-duration: sass.fn-naming-dvar(("collapse", "duration"), sass.fn-naming-var("duration"));
 
 $collapse-background-color: sass.fn-naming-var("collapse", "background-color");
 $collapse-color: sass.fn-naming-var("collapse", "color");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 // Collapse
 .#{$collapse} {
-  background-color: rgb(#{$collapse-background-color});
-  color: rgb(#{$collapse-color});
+  background-color: rgba(#{$collapse-background-color});
+  color: rgba(#{$collapse-color});
   transition:
     background-color #{$transition-duration} ease,
     color #{$transition-duration} ease;

package/src/components/collapse/collapse.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, onMounted, ref, watch } from "vue";
 import type { CollapseEmit, CollapseProps } from "./collapse.type";
-import { withPrefix, property } from "../../utils";
+import { cssPrefix, cssProperty } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -36,9 +36,9 @@ const durationCss = computed(() =>
 const wrapperAttrs = computed(() => {
   return {
     class: [
-      withPrefix(["layer", "collapse"]),
-      withPrefix(["role", role.value]),
-      withPrefix("collapse"),
+      cssPrefix(["layer", "collapse"]),
+      cssPrefix(["role", role.value]),
+      cssPrefix("collapse"),
       {
         open: isOpen.value,
         disabled: props.disabled,
@@ -49,7 +49,7 @@ const wrapperAttrs = computed(() => {
 
 const triggerAttrs = computed(() => {
   return {
-    class: [withPrefix("collapse-trigger")],
+    class: [cssPrefix("collapse-trigger")],
     "aria-expanded": isOpen.value,
     "aria-disabled": props.disabled,
   };
@@ -57,15 +57,15 @@ const triggerAttrs = computed(() => {
 
 const contentAttrs = computed(() => {
   return {
-    class: [withPrefix("collapse-content")],
+    class: [cssPrefix("collapse-content")],
     style: {
-      [property("collapse-duration")]: durationCss.value || undefined,
-      [property("collapse-height")]: isOpen.value ? `${contentHeight.value}px` : "0px",
+      [cssProperty("collapse-duration")]: durationCss.value || undefined,
+      [cssProperty("collapse-height")]: isOpen.value ? `${contentHeight.value}px` : "0px",
     },
   };
 });
 
-const contentInnerClass = computed(() => withPrefix("collapse-content-inner"));
+const contentInnerClass = computed(() => cssPrefix("collapse-content-inner"));
 
 // Methods
 // ----------------------------------------------------------------------------

package/src/components/container/container.vue

@@ -1,10 +1,10 @@
 <style lang="scss" src="./container.scss" scoped></style>
 <template src="./container.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 
 // Static layout wrapper classes
 const containerAttrs = {
-  class: [withPrefix("container")],
+  class: [cssPrefix("container")],
 } as const;
 </script>

package/src/components/decision-modal/decision-modal.scss

@@ -9,9 +9,9 @@ $button: sass.fn-naming-prefix("button");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Property name - layer: decision-modal
-$decision-modal-background-color: sass.fn-naming-var("decision-modal", "background-color");
-$decision-modal-border-color: sass.fn-naming-var("decision-modal", "border-color");
-$decision-modal-color: sass.fn-naming-var("decision-modal", "color");
+$decision-modal-background-color: sass.fn-naming-var("modal", "background-color");
+$decision-modal-border-color: sass.fn-naming-var("modal", "border-color");
+$decision-modal-color: sass.fn-naming-var("modal", "color");
 
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
@@ -21,15 +21,15 @@ $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
 $margin-y: sass.fn-naming-var("spacing", "y");
 $margin-x: sass.fn-naming-var("spacing", "x");
-$animation-duration: sass.fn-naming-var("motion", "duration");
+$animation-duration: sass.fn-naming-var("duration");
 $border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$decision-modal} {
   // Styles
-  background-color: rgb(#{$decision-modal-background-color});
-  color: rgb(#{$decision-modal-color});
+  background-color: rgba(#{$decision-modal-background-color});
+  color: rgba(#{$decision-modal-color});
   width: #{$width};
   max-width: #{$max-width};
   overflow: hidden;
@@ -51,7 +51,7 @@ $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
     align-items: center;
     font-weight: 600;
     border-bottom: #{$border-width} solid transparent;
-    color: rgb(#{$decision-modal-color});
+    color: rgba(#{$decision-modal-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -63,14 +63,14 @@ $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
   // Content of alert
   .#{$decision-modal-body} {
     padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
-    color: rgb(#{$decision-modal-color});
+    color: rgba(#{$decision-modal-color});
   }
 
   // Footer of alert
   .#{$decision-modal-footer} {
     display: flex;
     border-top: #{$border-width} solid transparent;
-    color: rgb(#{$decision-modal-color});
+    color: rgba(#{$decision-modal-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -111,7 +111,7 @@ $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
   &.divider {
     .#{$decision-modal-header},
     .#{$decision-modal-footer} {
-      border-color: rgb(#{$decision-modal-border-color});
+      border-color: rgba(#{$decision-modal-border-color});
     }
   }
 

package/src/components/decision-modal/decision-modal.vue

@@ -9,7 +9,7 @@ import {
   type DecisionModalButton,
   type DecisionModalProps,
 } from "./decision-modal.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -45,10 +45,10 @@ const decisionModalAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "decision-modal"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape.value]),
-      withPrefix("decision-modal"),
+      cssPrefix(["layer", "modal"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape.value]),
+      cssPrefix("decision-modal"),
       {
         pop: pop.value,
         divider: divider.value,
@@ -59,19 +59,19 @@ const decisionModalAttrs = computed(() => {
 
 const decisionModalHeaderAttrs = computed(() => {
   return {
-    class: [withPrefix("decision-modal-header")],
+    class: [cssPrefix("decision-modal-header")],
   };
 });
 
 const decisionModalBodyAttrs = computed(() => {
   return {
-    class: [withPrefix("decision-modal-body")],
+    class: [cssPrefix("decision-modal-body")],
   };
 });
 
 const decisionModalFooterAttrs = computed(() => {
   return {
-    class: [withPrefix("decision-modal-footer"), `actions-flow-${props.flow}`],
+    class: [cssPrefix("decision-modal-footer"), `actions-flow-${props.flow}`],
   };
 });
 

package/src/components/divider/divider.scss

@@ -6,7 +6,7 @@ $divider: sass.fn-naming-prefix("divider");
 // Property name - layer: divider
 $divider-border-color: sass.fn-naming-var("divider", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 // Divider
 .#{$divider} {
@@ -19,11 +19,11 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 
   &.horizontal {
     width: 100%;
-    border-bottom: #{$border-width} solid rgb(#{$divider-border-color});
+    border-bottom: #{$border-width} solid rgba(#{$divider-border-color});
   }
 
   &.vertical {
     height: 100%;
-    border-right: #{$border-width} solid rgb(#{$divider-border-color});
+    border-right: #{$border-width} solid rgba(#{$divider-border-color});
   }
 }

package/src/components/divider/divider.vue

@@ -1,7 +1,7 @@
 <style lang="scss" src="./divider.scss" scoped></style>
 <template src="./divider.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type DividerProps } from "./divider.type";
 import { computed, inject } from "vue";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
@@ -19,9 +19,9 @@ const dividerAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   return {
     class: [
-      withPrefix(["layer", "divider"]),
-      withPrefix(["role", role]),
-      withPrefix("divider"),
+      cssPrefix(["layer", "divider"]),
+      cssPrefix(["role", role]),
+      cssPrefix("divider"),
       {
         [props.direction]: true,
       },

package/src/components/dropdown/dropdown.scss

@@ -14,7 +14,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 $size-font-size: sass.fn-naming-var("font-size");
 $size-line-height: sass.fn-naming-var("line-height");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $size-control-block-size: sass.fn-naming-var("control-block-size");
 $radius-size: sass.fn-naming-var("radius-size");
@@ -34,9 +34,9 @@ $radius-size: sass.fn-naming-var("radius-size");
   border-width: #{$border-width};
   margin: #{$spacing-y} 0;
   border-style: solid;
-  border-color: rgb(#{$dropdown-border-color});
-  background-color: rgb(#{$dropdown-background-color});
-  color: rgb(#{$dropdown-color});
+  border-color: rgba(#{$dropdown-border-color});
+  background-color: rgba(#{$dropdown-background-color});
+  color: rgba(#{$dropdown-color});
   font-size: #{$size-font-size};
   line-height: #{$size-line-height};
   max-height: min(50vh, 16rem);

package/src/components/dropdown/dropdown.type.ts

@@ -1,8 +1,8 @@
-import type { AppDirection, AppSize } from "../app";
+import type { AppDirection } from "../app";
 
 export type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
 
-export type DropdownSize = AppSize;
+export type DropdownSize = string;
 
 export type DropdownProps = {
   modelValue?: boolean;

package/src/components/dropdown/dropdown.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
 import type { DropdownEmit, DropdownProps } from "./dropdown.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -35,11 +35,11 @@ const wrapperAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "dropdown"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix(["size", props.size]),
-      withPrefix("dropdown"),
+      cssPrefix(["layer", "dropdown"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix(["size", props.size]),
+      cssPrefix("dropdown"),
       {
         open: isOpen.value,
         disabled: props.disabled,
@@ -50,10 +50,8 @@ const wrapperAttrs = computed(() => {
 });
 
 const panelAttrs = computed(() => {
-  const shape = props.shape ?? appState?.shape.value ?? "";
-
   return {
-    class: [withPrefix("dropdown-panel"), props.placement],
+    class: [cssPrefix("dropdown-panel"), props.placement],
   };
 });
 

package/src/components/field/field.html

@@ -1,12 +1,31 @@
-<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs">
-  <template #start-input>
+<div v-bind="fieldAttrs">
+  <div v-bind="fieldContentAttrs">
     <slot name="start-input"></slot>
-  </template>
-  <template #input>
-    <slot name="input"></slot>
-  </template>
-  <template #end-input>
+    <slot name="input">
+      <textarea
+        v-bind="fieldInputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @beforeinput="onBeforeinput"
+        v-model="content"
+        :rows="line"
+        v-if="type === 'paragraph'"
+      />
+      <input
+        v-bind="fieldInputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @beforeinput="onBeforeinput"
+        v-model="content"
+        :type="type"
+        v-else
+      />
+    </slot>
     <slot name="end-input"></slot>
-  </template>
+  </div>
+  <div v-bind="fieldMessageAttrs" v-if="message">{{ message }}</div>
+  <div v-bind="fieldHelpAttrs" v-if="help">{{ help }}</div>
   <slot></slot>
-</OutlineField>
+</div>

package/src/components/field/{outline/outline.scss → field.scss}

@@ -4,20 +4,25 @@
 $field: sass.fn-naming-prefix("field");
 $field-content: sass.fn-naming-prefix("field-content");
 $field-input: sass.fn-naming-prefix("field-input");
-$field-input-editable: sass.fn-naming-prefix("field-input-editable");
 $field-message: sass.fn-naming-prefix("field-message");
 $field-help: sass.fn-naming-prefix("field-help");
 
 // Property name - layer: field
 $field-border-color: sass.fn-naming-var("field", "border-color");
+$field-border-color-focus: sass.fn-naming-var("field", "border-color", "focus");
+$field-border-color-hover: sass.fn-naming-var("field", "border-color", "hover");
+$field-border-color-active: sass.fn-naming-var("field", "border-color", "active");
+$field-border-color-disabled: sass.fn-naming-var("field", "border-color", "disabled");
 $field-background-color: sass.fn-naming-var("field", "background-color");
+$field-color: sass.fn-naming-var("field", "color");
+$field-placeholder-color: sass.fn-naming-var("field", "placeholder-color");
+$field-help-color: sass.fn-naming-var("field", "help-color");
 $field-line: sass.fn-naming-var("field", "line");
 $field-max-line: sass.fn-naming-var("field", "max-line");
 
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
-$app-color: sass.fn-naming-var("app", "color");
 
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
@@ -28,7 +33,7 @@ $size-coefficient-x: sass.fn-naming-var("coefficient-x");
 $size-coefficient-y: sass.fn-naming-var("coefficient-y");
 $size-line-height: sass.fn-naming-var("line-height");
 
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $direction-text-align: sass.fn-naming-var("text-align");
 $direction-justify-content: sass.fn-naming-var("justify-content");
@@ -45,7 +50,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
       background-color #{$transition-duration} ease,
       color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease;
-    border-color: rgb(#{$field-border-color});
+    border-color: rgba(#{$field-border-color});
     border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
     border-width: #{$border-width};
     border-style: solid;
@@ -58,38 +63,6 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     align-items: center;
   }
 
-  // Input shell wrapping contenteditable (flex layout); must not apply display:flex to <input>.
-  div.#{$field-input} {
-    padding: calc(#{$spacing-y} * #{$size-coefficient-y})
-      calc(#{$spacing-x} * #{$size-coefficient-x});
-    position: relative;
-    background-color: transparent;
-    z-index: 2;
-    min-height: calc(#{$field-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    max-height: calc(#{$field-max-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    box-sizing: border-box;
-    width: 100%;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    transition:
-      box-shadow #{$transition-duration} ease,
-      border-color #{$transition-duration} ease,
-      background-color #{$transition-duration} ease,
-      color #{$transition-duration} ease,
-      border-radius #{$transition-duration} ease;
-
-    &:focus-within,
-    &:active,
-    &:hover {
-      outline: none;
-    }
-
-    &::placeholder {
-      color: rgba(#{$app-color}, 0.5);
-    }
-  }
-
   // Native password <input> (single node, not wrapped).
   input.#{$field-input} {
     padding: calc(#{$spacing-y} * #{$size-coefficient-y})
@@ -102,8 +75,8 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     box-sizing: border-box;
     width: 100%;
     flex: 1;
-    color: rgb(#{$app-color});
-    caret-color: rgb(#{$app-color});
+    color: rgba(#{$field-color});
+    caret-color: rgba(#{$field-color});
     border: none;
     -webkit-user-select: text;
     user-select: text;
@@ -136,41 +109,13 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     }
 
     &::placeholder {
-      color: rgba(#{$app-color}, 0.5);
-    }
-  }
-
-  .#{$field-input-editable} {
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-    display: block;
-    position: relative;
-    z-index: 2;
-    background-color: transparent;
-    color: rgb(#{$app-color});
-    caret-color: rgb(#{$app-color});
-    border: none;
-    // user-select:all breaks caret placement on many mobile browsers for contenteditable.
-    -webkit-user-select: text;
-    user-select: text;
-    font-size: #{$size-font-size};
-    line-height: #{$size-line-height};
-    box-sizing: border-box;
-    width: 100%;
-    overflow: auto;
-    outline: none;
-
-    &:focus,
-    &:active {
-      outline: none;
-      border: none;
+      color: rgba(#{$field-placeholder-color});
     }
   }
 
   // Message
   .#{$field-message} {
-    color: rgb(#{$field-background-color});
+    color: rgba(#{$field-background-color});
     font-size: 0.9em;
     line-height: 1.5;
     transition:
@@ -183,7 +128,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
 
   // Help
   .#{$field-help} {
-    color: rgb(#{$app-color}, 0.75);
+    color: rgba(#{$field-help-color});
     font-size: 0.8em;
     line-height: 1.5;
     transition:
@@ -195,85 +140,44 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
   }
 
   &.focus {
+    .#{$field-content} {
+      border-color: rgba(#{$field-border-color-focus});
+    }
+
     &.shadow {
       .#{$field-content} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$field-border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgba(#{$field-border-color-focus}, 0.25);
       }
     }
 
     &:not(.shadow) {
       .#{$field-content} {
-        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$field-border-color});
+        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgba(#{$field-border-color-focus});
       }
     }
   }
 
+  &.hover {
+    .#{$field-content} {
+      border-color: rgba(#{$field-border-color-hover});
+    }
+  }
+
   &.disabled {
     opacity: 0.5;
     cursor: not-allowed;
-    div.#{$field-input},
-    input.#{$field-input},
-    .#{$field-input-editable} {
+    input.#{$field-input} {
       cursor: not-allowed;
       -webkit-user-select: none;
       user-select: none;
     }
-  }
 
-  &.empty:not(.typing) {
-    div.#{$field-input} {
-      &::before {
-        content: attr(placeholder);
-        color: rgba(#{$app-color}, 0.5);
-        transition: color #{$transition-duration} ease;
-        position: absolute;
-        height: calc(#{$size-control-block-size} - #{$border-width} * 2);
-        box-sizing: border-box;
-        top: 0;
-        pointer-events: none;
-        z-index: 0;
-        display: block;
-        white-space: pre-wrap;
-        word-break: break-word;
-        line-height: inherit;
-        font-size: inherit;
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  // Type
-  &.paragraph {
-    div.#{$field-input} {
-      align-items: flex-start;
-    }
-
-    .#{$field-input-editable} {
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-  }
-
-  &.text {
-    .#{$field-input-editable},
-    input.#{$field-input} {
-      white-space: nowrap;
-    }
-  }
-
-  &.password {
-    input.#{$field-input} {
-      white-space: nowrap;
+    .#{$field-content} {
+      border-color: rgba(#{$field-border-color-disabled});
     }
   }
 
   // Direction
-  div.#{$field-input} {
-    justify-content: #{$direction-justify-content};
-  }
-
-  .#{$field-input-editable},
   input.#{$field-input} {
     text-align: #{$direction-text-align};
   }