origam 2.15.0 → 2.17.0

package/dist/src/components/TextareaField/OrigamTextareaField.vue

@@ -85,7 +85,7 @@
 									name="toolbar"
 									v-bind="toolbarSlotPayload"
 							>
-								<origam-rich-toolbar
+								<origam-textarea-field-rich-toolbar
 										v-if="hasToolbar"
 										:items="resolvedToolbar"
 										:active="richActive"
@@ -118,7 +118,7 @@
 									name="toolbar"
 									v-bind="toolbarSlotPayload"
 							>
-								<origam-rich-toolbar
+								<origam-textarea-field-rich-toolbar
 										v-if="hasToolbar"
 										:items="resolvedToolbar"
 										:active="richActive"
@@ -260,36 +260,36 @@ import {
   toRef,
   useAttrs,
   useSlots,
-  watch,
-  watchEffect
+  watch
 } from "vue";
-import { OrigamCounter, OrigamField, OrigamInput } from "../../components";
-import OrigamRichToolbar from "./OrigamRichToolbar.vue";
-import {
-  useAdjacent,
-  useAdjacentInner,
-  useDefaults,
-  useDragResizer,
-  useFocus,
-  useLocale,
-  useProps,
-  useStyle,
-  useTextareaRich,
-  useTypography,
-  useVModel
-} from "../../composables";
-import { DEFAULT_TOOLBAR } from "../../consts";
-import { vIntersect } from "../../directives";
-import {
-  AXIS,
-  DENSITY,
-  MDI_ICONS,
-  TEXTAREA_MODE,
-  TEXTAREA_OUTPUT,
-  TEXTAREA_TOOLBAR_POSITION
-} from "../../enums";
-import { clamp, convertToUnit, filterInputAttrs, forwardRefs, htmlToMarkdown, sanitizeHtml } from "../../utils";
-const _props = defineProps({
+import OrigamCounter from "../Counter/OrigamCounter.vue";
+import OrigamField from "../Field/OrigamField.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamTextareaFieldRichToolbar from "./OrigamTextareaFieldRichToolbar.vue";
+import { useAdjacent } from "../../composables/Commons/adjacent.composable";
+import { useAdjacentInner } from "../../composables/Commons/adjacentInner.composable";
+import { useDragResizer } from "../../composables/Commons/dragResizer.composable";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTextareaRich } from "../../composables/TextareaField/textarea-field-rich.composable";
+import { useTheme } from "../../composables/Commons/theme.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DEFAULT_TOOLBAR } from "../../consts/TextareaField/textarea-field.const";
+import vIntersect from "../../directives/Intersect/intersect.directive";
+import { AXIS } from "../../enums/Commons/drag.enum";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { TEXTAREA_MODE, TEXTAREA_OUTPUT } from "../../enums/TextareaField/textarea-field.enum";
+import { TEXTAREA_TOOLBAR_POSITION } from "../../enums/TextareaField/textarea-field-rich-toolbar.enum";
+import { clamp, convertToUnit } from "../../utils/Commons/commons.util";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { forwardRefs } from "../../utils/Commons/forwardRefs.util";
+import { htmlToMarkdown } from "../../utils/TextareaField/html-to-markdown.util";
+import { sanitizeHtml } from "../../utils/TextareaField/sanitize-html.util";
+const props = defineProps({
   autoGrow: { type: Boolean, required: false },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
@@ -317,14 +317,10 @@ const _props = defineProps({
   dirty: { type: Boolean, required: false },
   disabled: { 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 },
-  reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
@@ -371,11 +367,10 @@ const _props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -405,8 +400,7 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const props = useDefaults(_props);
-const emits = defineEmits(["update:height", "click:control", "mousedown:control", "format", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+const emits = defineEmits(["update:height", "click:control", "mousedown:control", "format", "update:focused", "click:appendInner", "click:prependInner", "click:clear", "update:modelValue", "click:append", "click:prepend"]);
 defineSlots();
 const slots = useSlots();
 const attrs = useAttrs();
@@ -531,13 +525,13 @@ const handleInput = (e) => {
 const handleFocus = () => {
   focus();
 };
-const rows = ref(+(props.rows ?? 3));
+const autoGrowRows = ref(3);
+const rows = computed(() => {
+  return props.autoGrow ? autoGrowRows.value : +(props.rows ?? 3);
+});
 const isUniqueRow = computed(() => {
   return rows.value === 1;
 });
-watchEffect(() => {
-  if (!props.autoGrow) rows.value = +(props.rows ?? 3);
-});
 const parseCssFloat = (value, fallback = 0) => {
   const parsed = parseFloat(value);
   return Number.isNaN(parsed) ? fallback : parsed;
@@ -585,7 +579,8 @@ const calculateInputHeight = () => {
     emits("update:height", controlHeight.value);
   });
 };
-watch([model, () => props.maxRows, () => props.density, () => props.rows], () => {
+const { theme: activeTheme, mode: activeMode } = useTheme();
+watch([model, () => props.maxRows, () => props.density, () => props.rows, activeTheme, activeMode], () => {
   calculateInputHeight();
 }, { immediate: true });
 watch(minHeight, () => {
@@ -602,7 +597,7 @@ watch(controlHeight, (newHeight) => {
     const padding = getPadding(style);
     const lineHeight = getLineHeight(style);
     if (lineHeight <= 0) return;
-    rows.value = Math.floor((newHeight - padding) / lineHeight);
+    autoGrowRows.value = Math.floor((newHeight - padding) / lineHeight);
   });
 });
 let observer;
@@ -641,7 +636,7 @@ const enrichedRules = computed(() => {
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "focused", "centerAffix"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "style", "focused", "centerAffix"]);
 });
 const fieldProps = computed(() => {
   return origamFieldRef.value?.filterProps(props, ["class", "id", "style", "active", "dirty", "disabled", "focused", "error", "centerAffix"]);
@@ -706,7 +701,7 @@ defineExpose(forwardRefs({
 			&.origam-field--no-label,
 			&.origam-field--active {
 				textarea {
-					opacity: 1;
+					opacity: var(--origam-textarea-field__textarea---opacity-active, 1);
 				}
 			}
 
@@ -718,11 +713,11 @@ defineExpose(forwardRefs({
 		}
 
 		:deep(textarea) {
-			opacity: 0;
+			opacity: var(--origam-textarea-field__textarea---opacity, 0);
 			flex: 1;
 			min-width: 0;
-			transition: 0.15s opacity cubic-bezier(0.4, 0, 0.2, 1);
-			line-height: 1;
+			transition: var(--origam-textarea-field__textarea---transition-duration, 0.15s) opacity var(--origam-textarea-field__textarea---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+			line-height: var(--origam-textarea-field__textarea---line-height, 1);
 
 			&:focus,
 			&:active {

package/dist/src/components/TextareaField/{OrigamRichToolbar.vue → OrigamTextareaFieldRichToolbar.vue}

@@ -82,9 +82,11 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, ref } from "vue";
-import { OrigamBtn, OrigamIcon } from "../../components";
-import { useLocale } from "../../composables";
-import { MDI_ICONS, TEXTAREA_TOOLBAR_COMMAND, TEXTAREA_TOOLBAR_POSITION } from "../../enums";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { TEXTAREA_TOOLBAR_COMMAND, TEXTAREA_TOOLBAR_POSITION } from "../../enums/TextareaField/textarea-field-rich-toolbar.enum";
 const props = defineProps({
   items: { type: Array, required: true },
   active: { type: Object, required: true },
@@ -92,13 +94,14 @@ const props = defineProps({
   disabled: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["format"]);
+defineSlots();
 const { t } = useLocale();
 const linkPopoverOpen = ref(false);
 const linkInput = ref("");
 const linkInputRef = ref();
-const toolbarLabel = computed(() => t("origam.textarea.rich.toolbar.aria_label", "Text formatting"));
-const linkPlaceholder = computed(() => t("origam.textarea.rich.link.placeholder", "https://example.com"));
-const linkApplyLabel = computed(() => t("origam.textarea.rich.link.apply", "Apply"));
+const toolbarLabel = computed(() => t("origam.textarea.rich.toolbar.aria_label"));
+const linkPlaceholder = computed(() => t("origam.textarea.rich.link.placeholder"));
+const linkApplyLabel = computed(() => t("origam.textarea.rich.link.apply"));
 const ICON_MAP = {
   [TEXTAREA_TOOLBAR_COMMAND.BOLD]: MDI_ICONS.FORMAT_BOLD,
   [TEXTAREA_TOOLBAR_COMMAND.ITALIC]: MDI_ICONS.FORMAT_ITALIC,

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

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "OrigamRichToolbar", {
+Object.defineProperty(exports, "OrigamTextareaField", {
   enumerable: true,
   get: function () {
-    return _OrigamRichToolbar.default;
+    return _OrigamTextareaField.default;
   }
 });
-Object.defineProperty(exports, "OrigamTextareaField", {
+Object.defineProperty(exports, "OrigamTextareaFieldRichToolbar", {
   enumerable: true,
   get: function () {
-    return _OrigamTextareaField.default;
+    return _OrigamTextareaFieldRichToolbar.default;
   }
 });
 var _OrigamTextareaField = _interopRequireDefault(require("./OrigamTextareaField.vue"));
-var _OrigamRichToolbar = _interopRequireDefault(require("./OrigamRichToolbar.vue"));
+var _OrigamTextareaFieldRichToolbar = _interopRequireDefault(require("./OrigamTextareaFieldRichToolbar.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1,2 +1,2 @@
 export { default as OrigamTextareaField } from './OrigamTextareaField.vue';
-export { default as OrigamRichToolbar } from './OrigamRichToolbar.vue';
+export { default as OrigamTextareaFieldRichToolbar } from './OrigamTextareaFieldRichToolbar.vue';

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

@@ -1,2 +1,2 @@
 export { default as OrigamTextareaField } from "./OrigamTextareaField.vue";
-export { default as OrigamRichToolbar } from "./OrigamRichToolbar.vue";
+export { default as OrigamTextareaFieldRichToolbar } from "./OrigamTextareaFieldRichToolbar.vue";

package/dist/src/components/ThemeProvider/OrigamThemeProvider.vue

@@ -4,6 +4,7 @@
 			:class="themeProviderClasses"
 			:data-theme="dataTheme"
 			:data-mode="dataMode"
+			v-bind="restAttrs"
 	>
 		<slot/>
 	</component>
@@ -11,14 +12,17 @@
 
 <script lang="ts" setup>
 import { computed, inject, ref, useAttrs } from "vue";
-import { provideDefaults } from "../../composables";
-import { ORIGAM_DEFAULTS_KEY, ORIGAM_THEME_DEFAULTS_KEY } from "../../consts";
+import { provideDefaults } from "../../composables/Commons/defaults.composable";
+import { ORIGAM_DEFAULTS_KEY } from "../../consts/Commons/defaults.const";
+import { ORIGAM_THEME_DEFAULTS_KEY } from "../../consts/Commons/theme.const";
+import { omit } from "../../utils/Commons/commons.util";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
-  theme: { type: [String, Object], required: false, default: "auto" },
-  mode: { type: String, required: false, default: "auto" },
+  theme: { type: null, required: false, default: "auto" },
+  mode: { type: null, required: false, default: "auto" },
   tag: { type: String, required: false, default: "div" }
 });
+defineEmits([]);
 defineSlots();
 const attrs = useAttrs();
 const dataTheme = computed(() => props.theme === "auto" ? void 0 : props.theme);
@@ -26,6 +30,7 @@ const dataMode = computed(() => props.mode === "auto" ? void 0 : props.mode);
 const themeProviderClasses = computed(() => {
   return ["origam-theme-provider", attrs.class];
 });
+const restAttrs = computed(() => omit(attrs, ["class"]));
 const resolveThemeDefaults = inject(ORIGAM_THEME_DEFAULTS_KEY, null);
 const parentDefaults = inject(ORIGAM_DEFAULTS_KEY, ref({}));
 const scopedDefaults = computed(() => {
@@ -39,10 +44,15 @@ provideDefaults(scopedDefaults, { scoped: true });
 <style lang="scss" scoped>
 	.origam-theme-provider {
 		display: contents;
-		// Base text color for the sub-tree (#201): `color` is inherited and passes
-		// through `display: contents`, so a local `data-mode="dark"` sub-tree gets
-		// readable default text (and currentColor icons) without painting a box.
-		// No background here — a provider is not a surface.
+		/*********************************************************
+		 * color
+		 *
+		 * @description
+		 * Base text color for the sub-tree (#201): `color` is inherited and passes
+		 * through `display: contents`, so a local `data-mode="dark"` sub-tree gets
+		 * readable default text (and currentColor icons) without painting a box.
+		 * No background here — a provider is not a surface.
+		 ********************************************************/
 		color: var(--origam-color__text---primary);
 	}
 </style>

package/dist/src/components/Timeline/OrigamTimeline.vue

@@ -1,13 +1,14 @@
 <template>
 	<component
 		:is="tag || 'div'"
+		:id="id"
 		:class="timelineClasses"
 		:style="timelineStyles"
 		role="list"
 		:aria-label="ariaLabel"
 	>
 		<div
-				v-if="orientation === 'horizontal'"
+				v-if="isHorizontal"
 				class="origam-timeline__track-wrapper"
 		>
 			<slot name="default">
@@ -21,7 +22,7 @@
 					:intent="entry.intent"
 					:is-last="index === (items?.length ?? 0) - 1"
 					:truncate-line="truncateLine ?? false"
-					:side="side ?? 'start'"
+					:side="side ?? TIMELINE_SIDE.START"
 					:orientation="orientation"
 					:index="index"
 					:data-cy="`timeline-item-${index}`"
@@ -51,18 +52,18 @@
 
 <script lang="ts" setup>
 import { computed, provide } from "vue";
-import { OrigamTimelineItem } from "../../components";
-import {
-  useDensity,
-  useProps,
-  useSize,
-  useStyle
-} from "../../composables";
-import { TIMELINE_CONTEXT_KEY } from "../../consts";
+import OrigamTimelineItem from "./OrigamTimelineItem.vue";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { TIMELINE_CONTEXT_KEY } from "../../consts/Timeline/timeline.const";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { TIMELINE_SIDE } from "../../enums/Timeline/timeline.enum";
 const props = defineProps({
   items: { type: Array, required: false },
   orientation: { type: null, required: false, default: "vertical" },
-  side: { type: String, required: false, default: "start" },
+  side: { type: null, required: false, default: "start" },
   truncateLine: { type: Boolean, required: false, default: false },
   ariaLabel: { type: String, required: false },
   id: { type: String, required: false },
@@ -74,13 +75,15 @@ const props = defineProps({
   density: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
-const orientation = computed(() => props.orientation ?? "vertical");
+const orientation = computed(() => props.orientation ?? DIRECTION.VERTICAL);
+const isHorizontal = computed(() => orientation.value === DIRECTION.HORIZONTAL);
 const { densityClasses } = useDensity(props);
 const { sizeClasses } = useSize(props);
 provide(TIMELINE_CONTEXT_KEY, {
   get side() {
-    return props.side ?? "start";
+    return props.side ?? TIMELINE_SIDE.START;
   },
   get truncateLine() {
     return props.truncateLine ?? false;
@@ -107,7 +110,7 @@ const timelineClasses = computed(() => [
 const timelineStyles = computed(() => [
   props.style
 ]);
-const { id, css, load, isLoaded, unload } = useStyle(timelineStyles);
+const { id, css, load, isLoaded, unload } = useStyle(timelineStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Timeline/OrigamTimelineItem.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="itemClasses" :style="itemStyles" role="listitem">
+	<div :id="id" :class="itemClasses" :style="itemStyles" role="listitem">
 		<div class="origam-timeline-item__track" aria-hidden="true">
 			<div class="origam-timeline-item__dot" :style="dotStyles">
 				<slot name="dot">
@@ -42,22 +42,23 @@
 
 <script lang="ts" setup>
 import { computed, inject } from "vue";
-import { OrigamIcon } from "../../components";
-import {
-  useDensity,
-  useProps,
-  useSize,
-  useStyle
-} from "../../composables";
-import { TIMELINE_CONTEXT_KEY } from "../../consts";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { TIMELINE_CONTEXT_KEY } from "../../consts/Timeline/timeline.const";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { TIMELINE_SIDE } from "../../enums/Timeline/timeline.enum";
 const props = defineProps({
   title: { type: String, required: false },
   subtitle: { type: String, required: false },
+  description: { type: String, required: false, default: void 0 },
   icon: { type: null, required: false },
   intent: { type: null, required: false },
   isLast: { type: Boolean, required: false, default: false },
   truncateLine: { type: Boolean, required: false, default: false },
-  side: { type: String, required: false, default: "start" },
+  side: { type: null, required: false, default: "start" },
   orientation: { type: null, required: false, default: "vertical" },
   index: { type: Number, required: false, default: 0 },
   id: { type: String, required: false },
@@ -65,11 +66,11 @@ const props = defineProps({
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
-  size: { type: null, required: false },
-  description: { type: String, required: false, default: void 0 }
+  size: { type: null, required: false }
 });
 const timelineCtx = inject(TIMELINE_CONTEXT_KEY, null);
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { densityClasses } = useDensity(props);
 const { sizeClasses } = useSize(props);
@@ -79,7 +80,7 @@ const effectiveSide = computed(() => {
 });
 const effectiveOrientation = computed(() => {
   if (timelineCtx?.orientation) return timelineCtx.orientation;
-  return props.orientation ?? "vertical";
+  return props.orientation ?? DIRECTION.VERTICAL;
 });
 const effectiveTruncateLine = computed(() => {
   if (timelineCtx?.truncateLine !== void 0) return timelineCtx.truncateLine;
@@ -100,7 +101,7 @@ const dotStyles = computed(() => {
   };
 });
 const connectorStyles = computed(() => {
-  const isH = effectiveOrientation.value === "horizontal";
+  const isH = effectiveOrientation.value === DIRECTION.HORIZONTAL;
   return {
     "background-color": "var(--origam-timeline---connector-color, var(--origam-color__border---subtle))",
     [isH ? "height" : "width"]: "var(--origam-timeline---connector-thickness, var(--origam-border__width---thin, 1px))"
@@ -126,8 +127,8 @@ function intentToFgToken(intent) {
 }
 const contentSide = computed(() => {
   const side = effectiveSide.value;
-  if (side === "alternating") {
-    return props.index % 2 === 0 ? "start" : "end";
+  if (side === TIMELINE_SIDE.ALTERNATING) {
+    return props.index % 2 === 0 ? TIMELINE_SIDE.START : TIMELINE_SIDE.END;
   }
   return side;
 });
@@ -135,10 +136,10 @@ const itemClasses = computed(() => [
   "origam-timeline-item",
   `origam-timeline-item--orientation-${effectiveOrientation.value}`,
   {
-    "origam-timeline-item--side-start": effectiveSide.value === "start" || contentSide.value === "start",
-    "origam-timeline-item--side-end": effectiveSide.value === "end" || contentSide.value === "end",
-    "origam-timeline-item--alternating": effectiveSide.value === "alternating",
-    "origam-timeline-item--content-end": contentSide.value === "end",
+    "origam-timeline-item--side-start": effectiveSide.value === TIMELINE_SIDE.START || contentSide.value === TIMELINE_SIDE.START,
+    "origam-timeline-item--side-end": effectiveSide.value === TIMELINE_SIDE.END || contentSide.value === TIMELINE_SIDE.END,
+    "origam-timeline-item--alternating": effectiveSide.value === TIMELINE_SIDE.ALTERNATING,
+    "origam-timeline-item--content-end": contentSide.value === TIMELINE_SIDE.END,
     "origam-timeline-item--last": props.isLast
   },
   densityClasses.value,
@@ -148,7 +149,7 @@ const itemClasses = computed(() => [
 const itemStyles = computed(() => [
   props.style
 ]);
-const { id, css, load, isLoaded, unload } = useStyle(itemStyles);
+const { id, css, load, isLoaded, unload } = useStyle(itemStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Title/OrigamTitle.vue

@@ -1,6 +1,6 @@
 <template>
 	<component
-			:is="props.tag"
+			:is="tag"
 			:id="id"
 			v-contrast
 			:class="titleClasses"
@@ -17,19 +17,16 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useDefaults,
-  useDensity,
-  useMargin,
-  usePadding,
-  useProps,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { vContrast } from "../../directives";
-const _props = defineProps({
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useMargin } from "../../composables/Commons/margin.composable";
+import { usePadding } from "../../composables/Commons/padding.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+const props = defineProps({
   text: { type: String, required: false },
   tag: { type: String, required: false, default: "h2" },
   id: { type: String, required: false },
@@ -65,14 +62,14 @@ const _props = defineProps({
   borderRightColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderBottomColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
-const props = useDefaults(_props);
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { densityClasses } = useDensity(props);
@@ -120,7 +117,7 @@ defineExpose({
 	.origam-title {
 		color:          var(--origam-title---color);
 		font-family:    var(--origam-title---font-family);
-		font-size:      var(--origam-title---font-size);
+		font-size:      var(--origam-title---font-size, var(--origam-title---font-size-md));
 		font-weight:    var(--origam-title---font-weight);
 		letter-spacing: var(--origam-title---letter-spacing);
 		line-height:    var(--origam-title---line-height);