origam 0.3.10 → 2.2.1

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -1,11 +1,13 @@
 <template>
 	<origam-input
 			ref="origamInputRef"
-			v-model="model"
+			v-model:model-value="model"
 			:class="passwordFieldClasses"
 			:focused="isFocused"
 			:style="passwordFieldStyles"
-			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,22 +72,63 @@
 						<slot name="prefix"/>
 					</template>
 
-					<template #default="{class: fieldSlotClass, ...fieldSlotProps}">
+					<template #default="{class: fieldSlotClass, ref, ...fieldSlotProps}">
 						<div
 								:class="fieldSlotClass"
 								data-no-activator=""
 						>
+							<origam-menu
+									v-if="!minimal"
+									ref="origamMenuRef"
+									:model-value="showRequirements"
+									persistent
+									:target="origamInputRef"
+									content-class="origam-password-field__info"
+									v-bind="resolvedMenuProps"
+							>
+								<slot
+										name="info"
+										v-bind="{infos}"
+								>
+									<origam-row dense>
+										<origam-col
+												v-for="info in infos"
+												:key="info.key"
+										>
+											<origam-sheet
+													:class="{'origam-password-field__item--valid': isChecked(info.key)}"
+													class="origam-password-field__item"
+													:color="isChecked(info.key) ? 'success' : 'default'"
+													rounded="12px"
+											>
+												<div class="origam-password-field__validate">
+													<origam-icon
+															:color="isChecked(info.key) ? 'success' : 'accent'"
+															:icon="isChecked(info.key) ? MDI_ICONS.CHECK_CIRCLE_OUTLINE : MDI_ICONS.CLOSE_CIRCLE_OUTLINE"
+													/>
+												</div>
+												<div
+														v-if="info.icon"
+														class="origam-password-field__icon"
+												>
+													{{ info.icon }}
+												</div>
+											</origam-sheet>
+										</origam-col>
+									</origam-row>
+								</slot>
+							</origam-menu>
 							<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="currentType"
@@ -105,7 +148,10 @@
 						<slot name="suffix"/>
 					</template>
 
-					<template #appendInner>
+					<template
+							v-if="!minimal"
+							#appendInner
+					>
 						<div
 								class="origam-password-field__toggle-icon"
 								@mousedown="handleToggleShow"
@@ -114,10 +160,7 @@
 									name="appendInner"
 									v-bind="{icon: currentIcon}"
 							>
-								<origam-icon
-										:key="currentIcon"
-										:icon="currentIcon"
-								/>
+								<origam-icon :icon="currentIcon"/>
 							</slot>
 						</div>
 					</template>
@@ -140,7 +183,7 @@
 		</template>
 
 		<template
-				v-if="hasDetails"
+				v-if="hasDetails || hasInlineFooter"
 				#details="detailsSlotProps"
 		>
 			<slot
@@ -148,21 +191,85 @@
 					v-bind="detailsSlotProps"
 			>
 				<origam-counter
-						:active="props.persistentCounter || isFocused"
-						:disabled="props.disabled"
+						v-if="hasCounter"
+						:active="persistentCounter || isFocused"
+						:disabled="disabled"
 						:max="max"
 						:value="counterValue"
 				>
 					<template
 							v-if="slots.counter"
-							#default="{counter, value, max}"
+							#default="{counter, max, value}"
 					>
 						<slot
 								name="counter"
-								v-bind="{counter, value, max}"
+								v-bind="{counter, max, value}"
 						/>
 					</template>
 				</origam-counter>
+
+				<div
+						v-if="hasInlineFooter && !minimal"
+						class="origam-password-field__inline-footer"
+				>
+					<div
+							v-if="strengthBar"
+							class="origam-password-field__strength"
+							:data-strength-level="strength.level"
+							:data-strength-score="strength.score"
+					>
+						<span
+								v-for="i in 4"
+								:key="i"
+								class="origam-password-field__strength-segment"
+								:class="[
+										`origam-password-field__strength-segment--${i <= strength.score ? strength.level : 'empty'}`
+									]"
+						/>
+					</div>
+
+					<template v-if="hasInlineRequirements">
+						<ul
+								v-if="requirementsLayout !== 'tiles'"
+								class="origam-password-field__requirements origam-password-field__requirements--list"
+						>
+							<li
+									v-for="rule in inlineRequirements"
+									:key="rule.id"
+									:class="[
+											'origam-password-field__requirement',
+											isRuleSatisfied(rule) ? 'origam-password-field__requirement--satisfied' : 'origam-password-field__requirement--pending'
+										]"
+									:data-requirement-id="rule.id"
+									:data-satisfied="isRuleSatisfied(rule) ? 'true' : 'false'"
+							>
+								<origam-icon
+										class="origam-password-field__requirement-icon"
+										:icon="isRuleSatisfied(rule) ? MDI_ICONS.CHECK_CIRCLE_OUTLINE : MDI_ICONS.CLOSE_CIRCLE_OUTLINE"
+								/>
+								<span class="origam-password-field__requirement-label">{{ rule.label }}</span>
+							</li>
+						</ul>
+						<div
+								v-else
+								class="origam-password-field__requirements origam-password-field__requirements--tiles"
+						>
+							<origam-chip
+									v-for="rule in inlineRequirements"
+									:key="rule.id"
+									class="origam-password-field__requirement-chip"
+									:class="[
+											isRuleSatisfied(rule) ? 'origam-password-field__requirement-chip--satisfied' : 'origam-password-field__requirement-chip--pending'
+										]"
+									:bg-color="isRuleSatisfied(rule) ? 'success' : undefined"
+									:prepend-icon="isRuleSatisfied(rule) ? MDI_ICONS.CHECK_CIRCLE_OUTLINE : MDI_ICONS.CLOSE_CIRCLE_OUTLINE"
+									:text="rule.label"
+									:data-requirement-id="rule.id"
+									:data-satisfied="isRuleSatisfied(rule) ? 'true' : 'false'"
+							/>
+						</div>
+					</template>
+				</div>
 			</slot>
 		</template>
 
@@ -189,39 +296,85 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, StyleValue, useAttrs, useSlots } from "vue";
-import { OrigamCounter, OrigamField, OrigamIcon, OrigamInput } from "../../components";
-import { useAdjacentInner, useFocus, useProps, useVModel } from "../../composables";
+import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
+import {
+  OrigamChip,
+  OrigamCol,
+  OrigamCounter,
+  OrigamField,
+  OrigamIcon,
+  OrigamInput,
+  OrigamMenu,
+  OrigamRow,
+  OrigamSheet
+} from "../../components";
+import {
+  computeStrength,
+  useAdjacent,
+  useAdjacentInner,
+  useDefaults,
+  useFocus,
+  useLocale,
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
+import {
+  DEFAULT_PASSWORD_REQUIREMENTS,
+  REQUIREMENT_MIN_LENGTH,
+  REQUIREMENT_NUMBER,
+  REQUIREMENT_SPECIAL,
+  REQUIREMENT_TINY,
+  REQUIREMENT_UPPERCASE
+} from "../../consts";
 import { vIntersect } from "../../directives";
 import { DENSITY, DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { filterInputAttrs, forwardRefs } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   onIcon: { type: null, required: false, default: MDI_ICONS.EYE_OUTLINE },
-  offIcon: { type: null, required: false, default: MDI_ICONS.EYE_OFF_OUTLINE },
-  placeholder: { type: String, required: false },
-  role: { type: String, required: false },
-  autofocus: { type: Boolean, required: false },
-  counter: { type: [Boolean, Number, String], required: false },
-  counterValue: { type: [Number, Function], required: false },
-  persistentPlaceholder: { type: Boolean, required: false },
-  persistentCounter: { type: Boolean, required: false },
+  offIcon: { type: null, required: false, default: MDI_ICONS.EYE_OFF },
   maxlength: { type: Number, required: false },
+  requirements: { type: Boolean, required: false },
+  persistentRequirements: { type: Boolean, required: false },
+  minLength: { type: Number, required: false, default: 8 },
+  needTiny: { type: Boolean, required: false },
+  needUppercase: { type: Boolean, required: false },
+  needNumber: { type: Boolean, required: false },
+  needSpecial: { type: Boolean, required: false },
+  menuProps: { type: Object, required: false, default: () => ({
+    closeDelay: 250,
+    closeOnContentClick: true,
+    locationStrategy: "connected",
+    location: "bottom left",
+    openDelay: 300,
+    scrim: false,
+    scrollStrategy: "reposition"
+  }) },
+  menu: { type: Boolean, required: false },
+  strengthBar: { type: Boolean, required: false },
+  requirementRules: { type: Array, required: false },
+  requirementsLayout: { type: String, required: false },
+  minimal: { type: Boolean, 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 },
+  autofocus: { type: Boolean, required: false },
+  counter: { type: [Boolean, Number, String], required: false },
+  counterValue: { type: [Number, Function], required: false },
+  placeholder: { type: String, required: false },
+  persistentPlaceholder: { type: Boolean, required: false },
+  persistentCounter: { type: Boolean, required: false },
+  role: { type: String, required: false },
+  type: { type: null, required: false },
+  modelModifiers: { type: [String, 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 },
@@ -229,9 +382,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 },
@@ -239,18 +393,9 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   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 },
@@ -258,12 +403,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 },
@@ -272,7 +419,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 },
@@ -282,7 +443,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 },
@@ -293,54 +453,33 @@ 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", "update:strength", "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 show = ref(false);
-const currentIcon = computed(() => {
-  return show.value ? props.offIcon : props.onIcon;
-});
-const currentType = computed(() => {
-  return show.value ? TEXT_FIELD_TYPE.TEXT : TEXT_FIELD_TYPE.PASSWORD;
-});
-const handleToggleShow = () => {
-  show.value = !show.value;
-};
-const counterValue = computed(() => {
-  if (typeof props.counterValue === "function") {
-    return props.counterValue(model.value);
-  }
-  if (props.counterValue) {
-    return props.counterValue;
-  }
-  return (model.value ?? "").toString().length;
-});
-const max = computed(() => {
-  if (props.maxlength) return props.maxlength;
-  if (!props.counter || typeof props.counter !== "number" && typeof props.counter !== "string") {
-    return void 0;
-  }
-  return props.counter;
-});
-const intersect = computed(() => {
-  return [{
-    handler: handleIntersect
-  }, null, ["once"]];
-});
+const {
+  onClickPrepend: handleClickPrepend,
+  onClickAppend: handleClickAppend
+} = useAdjacent(props);
 const handleIntersect = (isIntersecting, entries) => {
   if (!props.autofocus || !isIntersecting) return;
   entries[0].target?.focus?.();
 };
+const intersect = computed(() => {
+  return [{ handler: handleIntersect }, null, ["once"]];
+});
 const origamInputRef = ref();
 const origamFieldRef = ref();
+const origamMenuRef = ref();
 const inputRef = ref();
+const { isFocused, onFocus, onBlur: handleBlur } = useFocus(props);
 const isActive = computed(() => {
   return props.persistentPlaceholder || isFocused.value || props.active;
 });
@@ -375,12 +514,96 @@ const handleInput = (e) => {
   const el = e.target;
   model.value = el.value;
 };
+const counterValue = computed(() => {
+  if (typeof props.counterValue === "function") {
+    return props.counterValue(model.value);
+  }
+  if (props.counterValue) {
+    return props.counterValue;
+  }
+  return (model.value ?? "").toString().length;
+});
+const max = computed(() => {
+  if (props.maxlength) return props.maxlength;
+  if (!props.counter || typeof props.counter !== "number" && typeof props.counter !== "string") {
+    return void 0;
+  }
+  return props.counter;
+});
 const hasCounter = computed(() => {
   return slots.counter || props.counter !== false && props.counter != null;
 });
 const hasDetails = computed(() => {
   return hasCounter.value || slots.details;
 });
+const infos = computed(() => {
+  const localeInfos = {
+    minLength: REQUIREMENT_MIN_LENGTH(props.minLength)
+  };
+  if (props.needTiny) localeInfos.tiny = REQUIREMENT_TINY;
+  if (props.needUppercase) localeInfos.uppercase = REQUIREMENT_UPPERCASE;
+  if (props.needNumber) localeInfos.number = REQUIREMENT_NUMBER;
+  if (props.needSpecial) localeInfos.special = REQUIREMENT_SPECIAL;
+  return localeInfos;
+});
+const showRequirements = computed(() => {
+  if (props.requirements !== true) return false;
+  if (props.minimal) return false;
+  return isFocused.value || props.persistentRequirements;
+});
+const isChecked = (key) => {
+  return infos.value[key]?.reg.test(model.value);
+};
+const strength = computed(() => computeStrength(model.value));
+watch(() => strength.value.level, (level) => {
+  emits("update:strength", level);
+}, { immediate: false });
+const inlineRequirements = computed(() => {
+  if (Array.isArray(props.requirementRules) && props.requirementRules.length > 0) {
+    return props.requirementRules;
+  }
+  if (props.requirements === true) {
+    return DEFAULT_PASSWORD_REQUIREMENTS;
+  }
+  return [];
+});
+const hasInlineRequirements = computed(() => {
+  if (props.minimal) return false;
+  if (Array.isArray(props.requirementRules) && props.requirementRules.length > 0) return true;
+  return props.requirements === true && props.requirementsLayout != null;
+});
+const hasInlineFooter = computed(() => {
+  if (props.minimal) return false;
+  return !!props.strengthBar || hasInlineRequirements.value;
+});
+const isRuleSatisfied = (rule) => {
+  const v = (model.value ?? "").toString();
+  try {
+    return !!rule.test(v);
+  } catch {
+    return false;
+  }
+};
+const show = ref(false);
+const currentIcon = computed(() => {
+  return show.value ? props.offIcon : props.onIcon;
+});
+const currentType = computed(() => {
+  return show.value ? TEXT_FIELD_TYPE.TEXT : TEXT_FIELD_TYPE.PASSWORD;
+});
+const handleToggleShow = () => {
+  show.value = !show.value;
+};
+const enrichedRules = computed(() => {
+  const base = Array.isArray(props.rules) ? [...props.rules] : [];
+  Object.keys(infos.value).forEach((key) => {
+    const info = infos.value[key];
+    base.push((value) => {
+      return info.reg.test(value || "") || t("origam.validation.must_contains", { value: info.message });
+    });
+  });
+  return base;
+});
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
   return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused"]);
@@ -388,10 +611,17 @@ const inputProps = computed(() => {
 const fieldProps = computed(() => {
   return origamFieldRef.value?.filterProps(props, ["class", "id", "active", "dirty", "disabled", "focused", "error", "style"]);
 });
+const resolvedMenuProps = computed(() => {
+  return {
+    ...props.menuProps,
+    activatorProps: {
+      ...props.menuProps?.activatorProps || {},
+      "aria-haspopup": "listbox"
+    }
+  };
+});
 const passwordFieldStyles = computed(() => {
-  return [
-    props.style
-  ];
+  return [props.style];
 });
 const passwordFieldClasses = computed(() => {
   return [
@@ -399,7 +629,16 @@ const passwordFieldClasses = computed(() => {
     props.class
   ];
 });
-defineExpose(forwardRefs({ filterProps }, origamInputRef, origamFieldRef, inputRef));
+const { filterProps } = useProps(props);
+const { id, css, load, isLoaded, unload } = useStyle(passwordFieldStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+}));
 </script>
 
 <style lang="scss" scoped>
@@ -410,7 +649,7 @@ defineExpose(forwardRefs({ filterProps }, origamInputRef, origamFieldRef, inputR
 			color: inherit;
 			opacity: 0;
 			flex: 1;
-			transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
+			transition: var(--origam-password-field__input---transition, 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1));
 			min-width: 0;
 
 			&:focus,
@@ -424,11 +663,116 @@ defineExpose(forwardRefs({ filterProps }, origamInputRef, origamFieldRef, inputR
 		}
 
 		&__toggle-icon {
-			cursor: pointer;
+			cursor: var(--origam-password-field__toggle-icon---cursor, pointer);
+			opacity: var(--origam-password-field__toggle-icon---opacity, 1);
 		}
 
 		&__details {
-			padding-inline: 16px;
+			padding-inline: var(--origam-password-field__details---padding-inline, 16px);
+		}
+
+		&__infos {
+			padding-block: var(--origam-password-field__infos---padding, 0px);
+			padding-inline: var(--origam-password-field__infos---padding-inline, 10px);
+		}
+
+		&__item {
+			overflow: var(--origam-password-field__item---overflow, visible);
+			padding: var(--origam-password-field__item---padding, 8px);
+			position: var(--origam-password-field__item---position, relative);
+			text-align: var(--origam-password-field__item---text-align, center);
+
+			#{$this}__icon {
+				opacity: var(--origam-password-field__item-icon---opacity, 0.2);
+			}
+
+			&--valid {
+				#{$this}__icon {
+					opacity: var(--origam-password-field__item--valid---icon-opacity, 1);
+				}
+			}
+		}
+
+		&__validate {
+			position: var(--origam-password-field__validate---position, absolute);
+			top: var(--origam-password-field__validate---top, 0px);
+			right: var(--origam-password-field__validate---right, 0px);
+			transform: var(--origam-password-field__validate---transform, translate(50%, -50%));
+		}
+
+		&__icon {
+			font-size: var(--origam-password-field__icon---font-size, 45px);
+			font-weight: var(--origam-password-field__icon---font-weight, bold);
+		}
+
+		&__inline-footer {
+			display: flex;
+			flex-direction: column;
+			gap: var(--origam-password-field__requirements---gap, 4px);
+			margin-block-start: var(--origam-password-field__strength---margin-block-start, 8px);
+			width: 100%;
+		}
+
+		&__strength {
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+			gap: var(--origam-password-field__strength---gap, 4px);
+			margin-block-start: var(--origam-password-field__strength---margin-block-start, 8px);
+			width: 100%;
+		}
+
+		&__strength-segment {
+			height: var(--origam-password-field__strength---height, 4px);
+			border-radius: var(--origam-password-field__strength---border-radius, 9999px);
+			background-color: var(--origam-password-field__strength---bg-empty, #fafafa);
+			transition: background-color 0.18s ease-out;
+
+			&--empty  { background-color: var(--origam-password-field__strength---bg-empty,  #fafafa); }
+			&--weak   { background-color: var(--origam-password-field__strength---bg-weak,   #ef4444); }
+			&--fair   { background-color: var(--origam-password-field__strength---bg-fair,   #fb8c00); }
+			&--good   { background-color: var(--origam-password-field__strength---bg-good,   #2196f3); }
+			&--strong { background-color: var(--origam-password-field__strength---bg-strong, #4caf50); }
+		}
+
+		&__requirements {
+			margin: 0;
+			padding: 0;
+			font-size: var(--origam-password-field__requirements---font-size, 0.75rem);
+			margin-block-start: var(--origam-password-field__requirements---margin-block-start, 8px);
+
+			&--list {
+				list-style: none;
+				display: flex;
+				flex-direction: column;
+				gap: var(--origam-password-field__requirements---gap, 4px);
+			}
+
+			&--tiles {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--origam-password-field__requirements---gap, 4px);
+			}
+		}
+
+		&__requirement {
+			display: flex;
+			align-items: center;
+			gap: var(--origam-password-field__requirements---gap, 4px);
+			color: var(--origam-password-field__requirements---color-pending, #525252);
+			transition: color 0.18s ease-out;
+
+			&--satisfied {
+				color: var(--origam-password-field__requirements---color-satisfied, #4caf50);
+			}
+		}
+
+		&__requirement-icon {
+			font-size: var(--origam-password-field__requirements---icon-size, 0.875rem);
+			flex-shrink: 0;
+		}
+
+		&__requirement-label {
+			line-height: 1.2;
 		}
 
 		:deep(.origam-field) {
@@ -438,12 +782,11 @@ defineExpose(forwardRefs({ filterProps }, origamInputRef, origamFieldRef, inputR
 					opacity: 1;
 				}
 			}
-		}
-	}
-</style>
-
-<style>
-	:root {
 
+			input {
+				border: none;
+				background: transparent;
+			}
+		}
 	}
 </style>