origam 2.16.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,37 +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,
-  useTheme,
-  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 },
@@ -318,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 },
@@ -372,7 +367,6 @@ 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: null, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
@@ -406,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();
@@ -532,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;
@@ -604,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;
@@ -643,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"]);
@@ -708,7 +701,7 @@ defineExpose(forwardRefs({
 			&.origam-field--no-label,
 			&.origam-field--active {
 				textarea {
-					opacity: 1;
+					opacity: var(--origam-textarea-field__textarea---opacity-active, 1);
 				}
 			}
 
@@ -720,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: 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,6 +1,7 @@
 <template>
 	<component
 		:is="tag || 'div'"
+		:id="id"
 		:class="timelineClasses"
 		:style="timelineStyles"
 		role="list"
@@ -51,15 +52,14 @@
 
 <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 { DIRECTION, TIMELINE_SIDE } from "../../enums";
+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" },
@@ -75,6 +75,7 @@ const props = defineProps({
   density: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const orientation = computed(() => props.orientation ?? DIRECTION.VERTICAL);
 const isHorizontal = computed(() => orientation.value === DIRECTION.HORIZONTAL);
@@ -109,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,18 +42,18 @@
 
 <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 { DIRECTION, TIMELINE_SIDE } from "../../enums";
+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 },
@@ -66,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);
@@ -149,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 },
@@ -71,8 +68,8 @@ const _props = defineProps({
   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);

package/dist/src/components/Toolbar/OrigamToolbar.vue

@@ -38,21 +38,19 @@
 
 <script lang="ts" setup>
 import { computed, toRef, useSlots } from "vue";
-import { OrigamTitle } from "../../components";
-import {
-  useActive,
-  useDensity,
-  useDimension,
-  useHover,
-  usePosition,
-  useProps,
-  useRtl,
-  useStateEffect,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { vContrast } from "../../directives";
-import { DENSITY } from "../../enums";
+import OrigamTitle from "../Title/OrigamTitle.vue";
+import { useUnsupportedProp } from "../../composables/Commons/unsupportedProp.composable";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { usePosition } from "../../composables/Commons/position.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRtl } from "../../composables/Commons/rtl.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { DENSITY } from "../../enums/Commons/density.enum";
 const props = defineProps({
   collapse: { type: Boolean, required: false },
   flat: { type: Boolean, required: false },
@@ -113,12 +111,13 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
-  fontFamily: { type: null, required: false },
+  hoverClass: { type: String, required: false },
   fontSize: { type: null, required: false },
   fontWeight: { type: null, required: false },
   lineHeight: { type: null, required: false },
   letterSpacing: { type: null, required: false }
 });
+defineEmits([]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
@@ -132,8 +131,14 @@ const hasAppend = computed(() => {
   return slots.append;
 });
 const { rtlClasses } = useRtl();
-const { isHover, hoverState } = useHover(props);
-const { isActive, activeState } = useActive(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
+useUnsupportedProp(
+  "OrigamToolbar",
+  "modelValue",
+  "the toolbar has no open/closed state to bind \u2014 nothing reads this value.",
+  () => props.modelValue !== void 0
+);
+const { isOn: isActive, config: activeState } = useStateFlag(props, { state: "active" });
 const {
   colorClasses,
   colorStyles,
@@ -185,7 +190,7 @@ const barClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(barStyles);
+const { id, css, load, isLoaded, unload } = useStyle(barStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -243,7 +248,7 @@ defineExpose({
 		overflow: var(--origam-toolbar---overflow);
 
 		position: var(--origam-toolbar---position);
-		z-index: var(--origam-toolbar---zIndex);
+		z-index: var(--origam-toolbar---z-index);
 
 		transform: var(--origam-toolbar---transform);
 		transition-duration: var(--origam-toolbar---transition-duration);
@@ -267,6 +272,14 @@ defineExpose({
 		box-shadow: var(--origam-toolbar---box-shadow);
 		color: var(--origam-toolbar---color);
 
+    &--is-rtl {
+      direction: rtl;
+    }
+
+    &--is-ltr {
+      direction: ltr;
+    }
+
 		&--border {
 			--origam-toolbar---border-top-width: thin;
 			--origam-toolbar---border-right-width: thin;
@@ -303,10 +316,10 @@ defineExpose({
 		}
 
 		&--rounded {
-			--origam-toolbar---border-start-start-radius: 4px;
-			--origam-toolbar---border-start-end-radius: 4px;
-			--origam-toolbar---border-end-end-radius: 4px;
-			--origam-toolbar---border-end-start-radius: 4px;
+			--origam-toolbar---border-start-start-radius: var(--origam-toolbar__rounded---border-radius, 4px);
+			--origam-toolbar---border-start-end-radius: var(--origam-toolbar__rounded---border-radius, 4px);
+			--origam-toolbar---border-end-end-radius: var(--origam-toolbar__rounded---border-radius, 4px);
+			--origam-toolbar---border-end-start-radius: var(--origam-toolbar__rounded---border-radius, 4px);
 		}
 
 		&--absolute {
@@ -322,9 +335,9 @@ defineExpose({
 		}
 
 		&--collapse {
-			--origam-toolbar---max-width: 112px;
-			--origam-toolbar---overflow: hidden;
-			--origam-toolbar---border-end-end-radius: 24px;
+			--origam-toolbar---max-width: var(--origam-toolbar__collapse---max-width, 112px);
+			--origam-toolbar---overflow: var(--origam-toolbar__collapse---overflow, hidden);
+			--origam-toolbar---border-end-end-radius: var(--origam-toolbar__collapse---border-end-end-radius, 24px);
 
 			#{$this}__title {
 				--origam-toolbar__title---display: none;
@@ -340,11 +353,11 @@ defineExpose({
 		}
 
 		&--flat {
-			--origam-toolbar---box-shadow: none;
+			--origam-toolbar---box-shadow: var(--origam-toolbar__flat---box-shadow, none);
 		}
 
 		&--floating {
-			--origam-toolbar---display: inline-flex;
+			--origam-toolbar---display: var(--origam-toolbar__floating---display, inline-flex);
 		}
 
 		&__wrapper {
@@ -388,13 +401,20 @@ defineExpose({
 			> #{$this}__title {
 				--origam-toolbar__title---margin-inline-start: 16px;
 			}
+			// NOTE: the shorthand --origam-toolbar__{title,prepend,append}---margin-inline
+			// / ---padding-block / ---padding-inline vars used to be read directly by
+			// __title / __prepend / __append below. The pipeline only ever emits the
+			// split -start / -end variants (never the shorthand), so those reads were
+			// unresolvable custom properties with no fallback — the declaration was
+			// silently dropped, not applied. Removed as dead code (#440-2): spacing
+			// is provided by `gap` on __wrapper (see above) plus the -start/-end
+			// vars consumed elsewhere. Confirmed zero visual change before removal.
 		}
 
 		&__prepend {
 			align-items: var(--origam-toolbar__prepend---align-items);
 			align-self: var(--origam-toolbar__prepend---align-self);
 			display: var(--origam-toolbar__prepend---display);
-			margin-inline: var(--origam-toolbar__prepend---margin-inline);
 			height: var(--origam-toolbar__prepend---height);
 			flex-grow: var(--origam-toolbar__prepend---flex-grow);
 			flex-shrink: var(--origam-toolbar__prepend---flex-shrink);
@@ -405,7 +425,6 @@ defineExpose({
 			align-items: var(--origam-toolbar__append---align-items);
 			align-self: var(--origam-toolbar__append---align-self);
 			display: var(--origam-toolbar__append---display);
-			margin-inline: var(--origam-toolbar__append---margin-inline);
 			height: var(--origam-toolbar__append---height);
 			flex-grow: var(--origam-toolbar__append---flex-grow);
 			flex-shrink: var(--origam-toolbar__append---flex-shrink);
@@ -419,10 +438,7 @@ defineExpose({
 			flex-shrink: var(--origam-toolbar__title---flex-shrink);
 			flex-basis: var(--origam-toolbar__title---flex-basis);
 			align-self: var(--origam-toolbar__title---align-self);
-			padding-block: var(--origam-toolbar__title---padding-block);
-			padding-inline: var(--origam-toolbar__title---padding-inline);
 			min-width: var(--origam-toolbar__title---min-width);
-			margin-inline: var(--origam-toolbar__title---margin-inline);
 			display: var(--origam-toolbar__title---display);
 
 			.origam-title {