origam 0.3.10 → 2.3.0

package/dist/src/components/Tabs/OrigamTabs.vue

@@ -0,0 +1,242 @@
+<template>
+	<component
+			:is="tag"
+			:id="id"
+			ref="rootRef"
+			role="tablist"
+			:aria-orientation="ariaOrientation"
+			:class="tabsClasses"
+			:style="tabsStyles"
+			@keydown="handleKeydown"
+	>
+		<origam-defaults-provider :defaults="slotDefaults">
+			<slot
+					name="default"
+					v-bind="slotProps"
+			/>
+		</origam-defaults-provider>
+	</component>
+</template>
+
+<script setup>
+import { computed, ref, StyleValue } from "vue";
+import { OrigamDefaultsProvider } from "../../components";
+import {
+  useDensity,
+  useGroup,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
+import { ORIGAM_TABS_KEY } from "../../consts";
+import { DENSITY, DIRECTION, TAB_VARIANT } from "../../enums";
+const props = defineProps({
+  tag: { type: String, required: false, default: "div" },
+  variant: { type: null, required: false, default: TAB_VARIANT.DEFAULT },
+  fixed: { type: Boolean, required: false, default: false },
+  centered: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  disabled: { type: Boolean, required: false },
+  modelValue: { type: null, required: false },
+  multiple: { type: Boolean, required: false },
+  mandatory: { type: Boolean, required: false, default: true },
+  max: { type: Number, required: false },
+  selectedClass: { type: String, required: false, default: "origam-tab--active" }
+});
+defineEmits(["update:modelValue"]);
+const { filterProps } = useProps(props);
+const { isSelected, select, next, prev, selected, items } = useGroup(props, ORIGAM_TABS_KEY);
+const rootRef = ref();
+const slotProps = computed(() => ({
+  isSelected,
+  select,
+  next,
+  prev,
+  selected,
+  items: items.value
+}));
+const slotDefaults = computed(() => ({
+  "origam-tab": {
+    density: props.density,
+    color: props.color,
+    variant: props.variant,
+    fixed: props.fixed
+  }
+}));
+const ariaOrientation = computed(() => props.direction === DIRECTION.VERTICAL ? "vertical" : "horizontal");
+const focusTab = (id2) => {
+  if (!rootRef.value) return;
+  const target = rootRef.value.querySelector(`[data-origam-tab-id="${id2}"]`);
+  target?.focus();
+};
+const focusFirstNonDisabled = (offset) => {
+  const list = items.value;
+  if (!list.length) return;
+  const start = offset > 0 ? 0 : list.length - 1;
+  const end = offset > 0 ? list.length : -1;
+  for (let i = start; i !== end; i += offset) {
+    const item = list[i];
+    if (!item.disabled) {
+      select(item.id, true);
+      focusTab(item.id);
+      return;
+    }
+  }
+};
+const handleKeydown = (event) => {
+  const isHorizontal = props.direction !== DIRECTION.VERTICAL;
+  const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+  const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+  const currentId = selected.value[0];
+  if (event.key === prevKey) {
+    event.preventDefault();
+    prev();
+    if (selected.value[0] != null) focusTab(selected.value[0]);
+  } else if (event.key === nextKey) {
+    event.preventDefault();
+    next();
+    if (selected.value[0] != null) focusTab(selected.value[0]);
+  } else if (event.key === "Home") {
+    event.preventDefault();
+    focusFirstNonDisabled(1);
+  } else if (event.key === "End") {
+    event.preventDefault();
+    focusFirstNonDisabled(-1);
+  } else if (event.key === "Enter" || event.key === " ") {
+    if (currentId != null) {
+      event.preventDefault();
+      select(currentId, true);
+    }
+  }
+};
+const { densityClasses } = useDensity(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const tabsStyles = computed(() => {
+  return [
+    roundedStyles.value,
+    props.style
+  ];
+});
+const tabsClasses = computed(() => {
+  return [
+    "origam-tabs",
+    `origam-tabs--${props.variant}`,
+    `origam-tabs--direction-${props.direction}`,
+    {
+      "origam-tabs--fixed": props.fixed,
+      "origam-tabs--centered": props.centered
+    },
+    densityClasses.value,
+    roundedClasses.value,
+    props.class
+  ];
+});
+const { id, css, load, isLoaded, unload } = useStyle(tabsStyles);
+defineExpose({
+  filterProps,
+  next,
+  prev,
+  select,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-tabs {
+		display: flex;
+		flex-wrap: nowrap;
+		position: relative;
+		min-height: var(--origam-tabs---height, 48px);
+
+		gap: var(--origam-tabs---gap, 0);
+		padding-block: var(--origam-tabs---padding-block, 0);
+		padding-inline: var(--origam-tabs---padding-inline, 0);
+
+		background-color: var(--origam-tabs---background-color, transparent);
+		border-radius: var(--origam-tabs---border-radius, 0);
+		border-width: var(--origam-tabs---border-width, 0);
+		border-style: var(--origam-tabs---border-style, solid);
+		border-color: var(--origam-tabs---border-color, currentColor);
+		color: var(--origam-tabs---color, inherit);
+
+		&--direction-horizontal {
+			flex-direction: row;
+			align-items: stretch;
+		}
+
+		&--direction-vertical {
+			flex-direction: column;
+			align-items: stretch;
+			min-height: 0;
+		}
+
+		&--fixed {
+			:deep(.origam-tab) {
+				flex: 1 1 0;
+				min-width: 0;
+			}
+		}
+
+		&--centered {
+			justify-content: center;
+		}
+
+		&--default {
+			border-block-end-width: var(--origam-tabs--default---border-block-end-width, 1px);
+			border-block-end-color: var(--origam-tabs--default---border-block-end-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
+		}
+
+		&--pills {
+			background-color: var(--origam-tabs--pills---background-color, transparent);
+			gap: var(--origam-tabs--pills---gap, 8px);
+			padding: var(--origam-tabs--pills---padding, 4px);
+		}
+
+		&--underline {
+			border-block-end-width: var(--origam-tabs--underline---border-block-end-width, 1px);
+			border-block-end-color: var(--origam-tabs--underline---border-block-end-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
+		}
+
+		&--density-comfortable {
+			--origam-tabs---height: 56px;
+		}
+
+		&--density-default {
+			--origam-tabs---height: 48px;
+		}
+
+		&--density-compact {
+			--origam-tabs---height: 36px;
+		}
+	}
+</style>
+
+<style>
+	:root {
+		--origam-tabs---height: 48px;
+		--origam-tabs---gap: 0;
+		--origam-tabs---padding-block: 0;
+		--origam-tabs---padding-inline: 0;
+		--origam-tabs---background-color: transparent;
+		--origam-tabs---border-radius: 0;
+		--origam-tabs---border-width: 0;
+		--origam-tabs---border-style: solid;
+		--origam-tabs---border-color: currentColor;
+		--origam-tabs---color: inherit;
+	}
+</style>

package/dist/src/components/Tabs/index.cjs

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamTab", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTab.default;
+  }
+});
+Object.defineProperty(exports, "OrigamTabPanel", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTabPanel.default;
+  }
+});
+Object.defineProperty(exports, "OrigamTabPanels", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTabPanels.default;
+  }
+});
+Object.defineProperty(exports, "OrigamTabs", {
+  enumerable: true,
+  get: function () {
+    return _OrigamTabs.default;
+  }
+});
+var _OrigamTabs = _interopRequireDefault(require("./OrigamTabs.vue"));
+var _OrigamTab = _interopRequireDefault(require("./OrigamTab.vue"));
+var _OrigamTabPanels = _interopRequireDefault(require("./OrigamTabPanels.vue"));
+var _OrigamTabPanel = _interopRequireDefault(require("./OrigamTabPanel.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { default as OrigamTabs } from './OrigamTabs.vue';
+export { default as OrigamTab } from './OrigamTab.vue';
+export { default as OrigamTabPanels } from './OrigamTabPanels.vue';
+export { default as OrigamTabPanel } from './OrigamTabPanel.vue';

package/dist/src/components/Tabs/index.js

@@ -0,0 +1,4 @@
+export { default as OrigamTabs } from "./OrigamTabs.vue";
+export { default as OrigamTab } from "./OrigamTab.vue";
+export { default as OrigamTabPanels } from "./OrigamTabPanels.vue";
+export { default as OrigamTabPanel } from "./OrigamTabPanel.vue";

package/dist/src/components/TextField/OrigamTextField.vue

@@ -5,7 +5,9 @@
 			:class="textFieldClasses"
 			:focused="isFocused"
 			:style="textFieldStyles"
-			v-bind="{...rootAttrs, ...inputProps}"
+			v-bind="{...rootAttrs, ...inputProps, rules: enrichedRules}"
+			@click:prepend="handleClickPrepend"
+			@click:append="handleClickAppend"
 	>
 		<template
 				v-if="slots.prepend"
@@ -23,11 +25,11 @@
 						:id="id"
 						ref="origamFieldRef"
 						:active="isActive || isDirty"
-						:dirty="isDirty || props.dirty"
+						:dirty="isDirty || dirty"
 						:disabled="isDisabled"
 						:error="isValid === false"
 						:focused="isFocused"
-						:role="props.role"
+						:role="role"
 						v-bind="{...fieldProps}"
 						@click="handleControlClick"
 						@mousedown="handleControlMousedown"
@@ -70,30 +72,32 @@
 						<slot name="prefix"/>
 					</template>
 
-					<template #default="{class: fieldSlotClass, ...fieldSlotProps}">
+					<template #default="{class: fieldSlotClass, ref, ...fieldSlotProps}">
 						<div
 								:class="fieldSlotClass"
 								data-no-activator=""
 						>
 							<slot
 									name="default"
-									v-bind="fieldSlotProps"
+									v-bind="{ref, ...fieldSlotProps}"
 							/>
 							<input
 									ref="inputRef"
 									v-intersect="intersect"
-									:autofocus="props.autofocus"
+									:autofocus="autofocus"
 									:disabled="isDisabled"
-									:name="props.name"
-									:placeholder="props.placeholder"
+									:name="name"
+									:placeholder="placeholder"
 									:readonly="isReadonly"
 									:size="1"
-									:type="props.type"
-									:value="model"
+									:type="resolvedInputType"
+									:value="displayValue"
+									:aria-invalid="ariaInvalid"
 									v-bind="{ ...fieldSlotProps, ...inputAttrs }"
 									@blur="handleBlur"
 									@focus="handleFocus"
 									@input="handleInput"
+									@paste="handlePaste"
 							>
 						</div>
 					</template>
@@ -138,8 +142,8 @@
 					v-bind="detailsSlotProps"
 			>
 				<origam-counter
-						:active="props.persistentCounter || isFocused"
-						:disabled="props.disabled"
+						:active="persistentCounter || isFocused"
+						:disabled="disabled"
 						:max="max"
 						:value="counterValue"
 				>
@@ -179,14 +183,24 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, StyleValue, useAttrs, useSlots } from "vue";
+import { computed, nextTick, ref, toRef, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamCounter, OrigamField, OrigamInput } from "../../components";
-import { useAdjacentInner, useFocus, useProps, useVModel } from "../../composables";
+import {
+  useAdjacent,
+  useAdjacentInner,
+  useDefaults,
+  useFocus,
+  useLocale,
+  useMask,
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { ACTIVE_TEXT_FIELD_TYPE, INPUT_TEXT_FIELD_TYPE } from "../../consts";
 import { vIntersect } from "../../directives";
 import { DENSITY, DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
-import { filterInputAttrs, forwardRefs } from "../../utils";
-const props = defineProps({
+import { applyMask, filterInputAttrs, forwardRefs, resolveMaskConfig } from "../../utils";
+const _props = defineProps({
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -196,22 +210,18 @@ const props = defineProps({
   role: { type: String, required: false },
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
+  mask: { type: null, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  active: { type: Boolean, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   flat: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
@@ -219,9 +229,10 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -229,18 +240,9 @@ const props = defineProps({
   clearIcon: { type: null, required: false, default: MDI_ICONS.CLOSE_CIRCLE_OUTLINE },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
-  hideDetails: { type: [Boolean, String], required: false },
-  hideSpinButtons: { type: Boolean, required: false },
-  hint: { type: String, required: false },
-  persistentHint: { type: Boolean, required: false },
-  messages: { type: [Array, String], required: false },
-  padding: { type: [Boolean, Number, String], required: false },
-  paddingTop: { type: [Boolean, Number, String], required: false },
-  paddingLeft: { type: [Boolean, Number, String], required: false },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false },
+  text: { type: String, required: false },
+  floating: { type: Boolean, required: false },
+  name: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -248,12 +250,14 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
   borderBottom: { type: [Boolean, Number, String], required: false },
@@ -262,7 +266,21 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -272,7 +290,6 @@ const props = defineProps({
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
-  name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false },
@@ -283,16 +300,22 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const emits = defineEmits(["click:control", "mousedown:control", "update:focused", "update:modelValue", "click:prepend", "click:prependInner", "click:append", "click:appendInner", "click:clear"]);
-const { filterProps } = useProps(props);
-const attrs = useAttrs();
+const props = useDefaults(_props);
+const emits = defineEmits(["click:control", "mousedown:control", "valid", "complete", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+defineSlots();
 const slots = useSlots();
+const attrs = useAttrs();
+const { t } = useLocale();
 const model = useVModel(props, "modelValue");
 const { isFocused, onFocus, onBlur: handleBlur } = useFocus(props);
 const {
   onClickPrependInner: handleClickPrependInner,
   onClickAppendInner: handleClickAppendInner
 } = useAdjacentInner(props);
+const {
+  onClickPrepend: handleClickPrepend,
+  onClickAppend: handleClickAppend
+} = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const counterValue = computed(() => {
   if (typeof props.counterValue === "function") {
     return props.counterValue(model.value);
@@ -351,8 +374,57 @@ const handleClear = (e) => {
     emits("click:clear", e);
   });
 };
+const maskConfig = computed(() => resolveMaskConfig(props.mask ?? null));
+const hasMask = computed(() => maskConfig.value !== null);
+const {
+  masked: maskedValue,
+  unmasked: unmaskedValue,
+  isValid: maskIsValid,
+  complete: maskComplete
+} = useMask(model, toRef(props, "mask"));
+const displayValue = computed(() => {
+  return hasMask.value ? maskedValue.value : model.value ?? "";
+});
+const ariaInvalid = computed(() => {
+  if (!hasMask.value) return void 0;
+  if (!isFocused.value && !model.value) return void 0;
+  return !maskIsValid.value;
+});
+const resolvedInputType = computed(() => {
+  if (!hasMask.value) return props.type;
+  const pattern = maskConfig.value?.pattern ?? "";
+  if (typeof props.mask === "string" && props.mask.startsWith("phone")) {
+    return "tel";
+  }
+  if (pattern && /^[#\s+()\-./]+$/.test(pattern)) {
+    return "tel";
+  }
+  return props.type;
+});
+watch(maskIsValid, (v) => {
+  if (hasMask.value) emits("valid", v);
+}, { immediate: false });
+watch(maskComplete, (c) => {
+  if (hasMask.value) emits("complete", { complete: c, unmasked: unmaskedValue.value });
+}, { immediate: false });
 const handleInput = (e) => {
   const el = e.target;
+  if (hasMask.value) {
+    const cfg = maskConfig.value;
+    const tokens = cfg?.pattern ?? "";
+    const r = applyMask(el.value, tokens);
+    model.value = r.unmasked;
+    nextTick(() => {
+      if (el.value !== r.masked) el.value = r.masked;
+      const pos = r.masked.length;
+      try {
+        el.setSelectionRange(pos, pos);
+      } catch (err) {
+        void err;
+      }
+    });
+    return;
+  }
   model.value = el.value;
   if (typeof props.modelModifiers === "string" && INPUT_TEXT_FIELD_TYPE.includes(props.type)) {
     const caretPosition = [el.selectionStart, el.selectionEnd];
@@ -362,12 +434,37 @@ const handleInput = (e) => {
     });
   }
 };
+const handlePaste = (e) => {
+  if (!hasMask.value) return;
+  const text = e.clipboardData?.getData("text") ?? "";
+  if (!text) return;
+  e.preventDefault();
+  const cfg = maskConfig.value;
+  if (!cfg) return;
+  const merged = (unmaskedValue.value ?? "") + text;
+  const r = applyMask(merged, cfg.pattern);
+  model.value = r.unmasked;
+};
 const hasCounter = computed(() => {
   return slots.counter || props.counter !== false && props.counter != null;
 });
 const hasDetails = computed(() => {
   return hasCounter.value || slots.details;
 });
+const enrichedRules = computed(() => {
+  const base = Array.isArray(props.rules) ? [...props.rules] : [];
+  if (props.counter && typeof props.counter === "number") {
+    const limit = props.counter;
+    base.push((v) => !v || v.length <= limit || t("origam.validation.max_length", [limit]));
+  }
+  if (hasMask.value) {
+    base.push(() => {
+      if (!model.value) return true;
+      return maskIsValid.value || t("origam.validation.invalid_format", "Invalid format");
+    });
+  }
+  return base;
+});
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused"]);
@@ -386,7 +483,16 @@ const textFieldClasses = computed(() => {
     props.class
   ];
 });
-defineExpose(forwardRefs({ filterProps }, origamInputRef, origamFieldRef, inputRef));
+const { filterProps } = useProps(props);
+const { id, css, load, isLoaded, unload } = useStyle(textFieldStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+}, origamInputRef, origamFieldRef, inputRef));
 </script>
 
 <style lang="scss" scoped>
@@ -411,7 +517,7 @@ defineExpose(forwardRefs({ filterProps }, origamInputRef, origamFieldRef, inputR
 		}
 
 		&__details {
-			padding-inline: 16px;
+			padding-inline: var(--origam-text-field__details---padding-inline, 16px);
 		}
 
 		:deep(.origam-field) {
@@ -421,12 +527,11 @@ defineExpose(forwardRefs({ filterProps }, origamInputRef, origamFieldRef, inputR
 					opacity: 1;
 				}
 			}
-		}
-	}
-</style>
-
-<style>
-	:root {
 
+			input {
+				border: none;
+				background: transparent;
+			}
+		}
 	}
 </style>