origam 2.16.0 → 2.17.0

package/dist/src/components/Snackbar/OrigamSnackbarItem.vue

@@ -1,12 +1,13 @@
 <template>
   <div
+    :id="id"
     v-contrast
     :aria-atomic="true"
     :aria-live="resolvedAriaLive"
     :class="itemClasses"
     :data-cy="dataCy"
     :role="resolvedRole"
-    :style="typographyStyles"
+    :style="rootStyles"
   >
     <div class="origam-snackbar-item__content">
       <div
@@ -72,11 +73,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, useSlots } from "vue";
-import { OrigamBtn, OrigamIcon } from "../../components";
-import { useLocale, usePassedProps, useProps, useTypography } from "../../composables";
-import { vContrast } from "../../directives";
-import { MDI_ICONS } from "../../enums";
+import { StyleValue, computed, useSlots } from "vue";
+import OrigamBtn from "../Btn/OrigamBtn.vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { usePassedProps } from "../../composables/Commons/passedProps.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 const props = defineProps({
   intent: { type: null, required: false, default: "info" },
   title: { type: String, required: false },
@@ -91,14 +96,10 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  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 }
+  fontSize: { type: null, required: false }
 });
 const { t } = useLocale();
-const dismissLabel = computed(() => props.dismissLabel ?? t("origam.snackbar.dismiss", "Dismiss notification"));
+const dismissLabel = computed(() => props.dismissLabel ?? t("origam.snackbar.dismiss"));
 const { filterProps } = useProps(props);
 const wasIconPassed = usePassedProps(props, "OrigamSnackbarItem");
 const { typographyStyles } = useTypography(props, "snackbar-item");
@@ -142,6 +143,7 @@ const hasActions = computed(() => {
 const handleActionClick = (action) => {
   emit("action", action);
 };
+const rootStyles = computed(() => [typographyStyles.value, props.style]);
 const itemClasses = computed(() => {
   const intent = props.intent ?? "info";
   return [

package/dist/src/components/Stepper/OrigamStepper.vue

@@ -3,7 +3,7 @@
 			:id="id"
 			v-contrast
 			:class="stepperClasses"
-			:aria-label="t('origam.stepper.progress_steps', 'Progress steps')"
+			:aria-label="t('origam.stepper.progress_steps')"
 	>
 		<slot name="default">
 			<template v-if="hasItems">
@@ -31,20 +31,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, ref, StyleValue, useSlots, watch } from "vue";
-import { OrigamStepperItem } from "../../components";
-import { ORIGAM_STEPPER_KEY } from "../../consts";
-import { DENSITY, DIRECTION, SIZES } from "../../enums";
-import { vContrast } from "../../directives";
-import {
-  useDensity,
-  useDimension,
-  useLocale,
-  useProps,
-  useSize,
-  useStateEffect,
-  useStyle
-} from "../../composables";
+import { computed, provide, StyleValue, useSlots } from "vue";
+import OrigamStepperItem from "./OrigamStepperItem.vue";
+import { ORIGAM_STEPPER_KEY } from "../../consts/Stepper/stepper.const";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { SIZES } from "../../enums/Commons/size.enum";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { useDensity } from "../../composables/Commons/density.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useSize } from "../../composables/Commons/size.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
 const props = defineProps({
   items: { type: Array, required: false },
   modelValue: { type: Number, required: false, default: 0 },
@@ -99,14 +100,11 @@ const props = defineProps({
   borderLeftColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { t } = useLocale();
-const emit = defineEmits(["update:modelValue"]);
+defineEmits(["update:modelValue"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
-const internalModel = ref(props.modelValue ?? 0);
-watch(() => props.modelValue, (val) => {
-  if (val !== void 0) internalModel.value = val;
-});
+const internalModel = useVModel(props, "modelValue", 0);
 provide(ORIGAM_STEPPER_KEY, {
   modelValue: internalModel,
   orientation: computed(() => props.orientation ?? DIRECTION.HORIZONTAL),
@@ -116,7 +114,6 @@ provide(ORIGAM_STEPPER_KEY, {
 const handleItemClick = (index) => {
   if (!props.clickable) return;
   internalModel.value = index;
-  emit("update:modelValue", index);
 };
 const hasItems = computed(() => {
   return props.items && props.items.length > 0 || !!slots.default;
@@ -172,7 +169,7 @@ const stepperClasses = computed(() => [
   paddingClasses.value,
   props.class
 ]);
-const { id, css, load, isLoaded, unload } = useStyle(stepperStyles);
+const { id, css, load, isLoaded, unload } = useStyle(stepperStyles, () => props.id);
 defineExpose({
   filterProps,
   css,

package/dist/src/components/Stepper/OrigamStepperItem.vue

@@ -1,7 +1,9 @@
 <template>
 	<component
 			:is="isClickable ? 'button' : 'div'"
+			:id="id"
 			:class="itemClasses"
+			:style="rootStyles"
 			:type="isClickable ? 'button' : undefined"
 			:aria-current="resolvedStatus === STEPPER_ITEM_STATUS.ACTIVE ? 'step' : undefined"
 			:aria-label="stepAriaLabel"
@@ -41,12 +43,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from "vue";
-import { OrigamIcon } from "../../components";
-import { ORIGAM_STEPPER_KEY } from "../../consts";
-import { DIRECTION, MDI_ICONS, STEPPER_ITEM_STATUS } from "../../enums";
-import { useLocale, useProps } from "../../composables";
-import { vContrast } from "../../directives";
+import { StyleValue, computed, inject } from "vue";
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import { ORIGAM_STEPPER_KEY } from "../../consts/Stepper/stepper.const";
+import { DIRECTION } from "../../enums/Commons/direction.enum";
+import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
+import { STEPPER_ITEM_STATUS } from "../../enums/Stepper/stepper.enum";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
 const props = defineProps({
   index: { type: Number, required: false, default: 0 },
   title: { type: String, required: false },
@@ -64,6 +69,7 @@ const stepAriaLabel = computed(() => {
   return t("origam.stepper.step_aria_label", (props.index ?? 0) + 1, props.title);
 });
 const emit = defineEmits(["click"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const stepper = inject(ORIGAM_STEPPER_KEY);
 const isClickable = computed(() => {
@@ -86,6 +92,7 @@ const handleClick = () => {
   }
 };
 const orientation = computed(() => stepper?.orientation.value ?? DIRECTION.HORIZONTAL);
+const rootStyles = computed(() => props.style);
 const itemClasses = computed(() => [
   "origam-stepper-item",
   `origam-stepper-item--${resolvedStatus.value}`,

package/dist/src/components/Switch/OrigamSwitch.vue

@@ -34,6 +34,7 @@
         type="checkbox"
         v-bind="{ ...controlProps, ...controlAttrs }"
         @blur="handleBlur"
+        @click:label="handleClickLabel"
         @focus="handleFocus"
         @update:model-value="handleChange"
       >
@@ -136,32 +137,30 @@
 
 <script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
-import {
-  OrigamIcon,
-  OrigamInput,
-  OrigamProgress,
-  OrigamSelectionControl,
-  OrigamSwitchTrack,
-  OrigamTranslateScale
-} from "../../components";
-import {
-  useDefaults,
-  useFocus,
-  useHover,
-  useLoader,
-  useLocale,
-  useProps,
-  useRounded,
-  useStateEffect,
-  useStyle,
-  useVModel
-} from "../../composables";
-import { DENSITY, LOADER_KIND, PROGRESS_TYPE, SIZES } from "../../enums";
-import { filterInputAttrs, getUid } from "../../utils";
-const _props = defineProps({
+import OrigamIcon from "../Icon/OrigamIcon.vue";
+import OrigamInput from "../Input/OrigamInput.vue";
+import OrigamProgress from "../Progress/OrigamProgress.vue";
+import OrigamSelectionControl from "../SelectionControl/OrigamSelectionControl.vue";
+import OrigamSwitchTrack from "./OrigamSwitchTrack.vue";
+import OrigamTranslateScale from "../Transition/OrigamTranslateScale.vue";
+import { useFocus } from "../../composables/Commons/focus.composable";
+import { useLoader } from "../../composables/Commons/loader.composable";
+import { useLocale } from "../../composables/Commons/locale.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStateEffect } from "../../composables/Commons/stateEffect.composable";
+import { useStateFlag } from "../../composables/Commons/stateFlag.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useVModel } from "../../composables/Commons/vModel.composable";
+import { DENSITY } from "../../enums/Commons/density.enum";
+import { LOADER_KIND } from "../../enums/Commons/loader.enum";
+import { PROGRESS_TYPE } from "../../enums/Progress/progress.enum";
+import { SIZES } from "../../enums/Commons/size.enum";
+import { filterInputAttrs } from "../../utils/Input/input.util";
+import { getUid } from "../../utils/Commons/getCurrentInstance.util";
+const props = defineProps({
   indeterminate: { type: Boolean, required: false },
   inset: { type: Boolean, required: false },
-  flat: { 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 },
@@ -220,7 +219,6 @@ const _props = defineProps({
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
-  label: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false },
@@ -232,34 +230,31 @@ const _props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, 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 },
+  label: { type: String, required: false },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, 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 },
-  inline: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  valueComparator: { type: Function, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
   multiple: { type: Boolean, required: false },
-  type: { type: String, required: false },
-  valueComparator: { type: Function, required: false },
-  ripple: { type: [Boolean, Object], required: false },
-  active: { type: [Boolean, Object], required: false },
-  activeClass: { type: String, required: false },
+  inline: { type: Boolean, required: false },
   hover: { type: [Boolean, Object], required: false },
+  hoverClass: { type: String, required: false },
+  ripple: { type: [Boolean, Object], required: false },
   loading: { type: [Boolean, Number, Object], required: false },
-  loadingText: { type: String, required: false }
+  loadingText: { type: String, required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false }
 });
-const props = useDefaults(_props);
-defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
+const emits = defineEmits(["update:modelValue", "update:focused", "update:indeterminate", "click:label"]);
 defineSlots();
-const { isHover, hoverState } = useHover(props);
+const { isOn: isHover, config: hoverState } = useStateFlag(props, { state: "hover" });
 useStateEffect(props, isHover, void 0, hoverState, void 0);
 const { filterProps } = useProps(props);
 const origamSelectionControlRef = ref();
@@ -282,13 +277,16 @@ const handleChange = () => {
     indeterminate.value = false;
   }
 };
+const handleClickLabel = (e) => {
+  emits("click:label", e);
+};
 const handleTrackClick = (_e) => {
   ;
   origamSelectionControlRef.value?.inputRef?.click();
 };
 const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
-  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "focused", "id", "style", "color", "bgColor", "activeColor", "activeBgColor", "hoverColor", "hoverBgColor"]);
+  return origamInputRef.value?.filterProps(props, ["modelValue", "class", "focused", "id", "style", "color", "bgColor"]);
 });
 const controlProps = computed(() => {
   return origamSelectionControlRef.value?.filterProps(props, ["modelValue", "type", "disabled", "readonly", "class", "style", "id"]);
@@ -328,7 +326,6 @@ const switchClasses = computed(() => {
   return [
     "origam-switch",
     {
-      "origam-switch--flat": props.flat,
       "origam-switch--inset": props.inset,
       "origam-switch--indeterminate": indeterminate.value
     },
@@ -445,8 +442,8 @@ defineExpose({
       :deep(.origam-selection-control__wrapper) {
         width: max-content;
         height: max-content;
-        min-width: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
-        min-height: calc(40px + 1.5 * var(--origam-selection-control--density, 0px));
+        min-width: calc(40px + 1.5 * var(--origam-selection-control---density, 0px));
+        min-height: calc(40px + 1.5 * var(--origam-selection-control---density, 0px));
       }
 
       :deep(.origam-selection-control__input) {
@@ -469,8 +466,8 @@ defineExpose({
       &--error {
         &:not(.origam-selection-control--disabled) {
           #{$this}__thumb {
-            background-color: rgba(255, 0, 0, 1);
-            color: rgba(255, 255, 255, 1);
+            background-color: var(--origam-switch__thumb---background-color-error, rgba(255, 0, 0, 1));
+            color: var(--origam-switch__thumb---color-error, rgba(255, 255, 255, 1));
           }
         }
       }
@@ -490,17 +487,47 @@ defineExpose({
       }
     }
 
-    .origam-selection-control__wrapper.origam--color-primary &__thumb,
-    .origam-selection-control__wrapper.origam--color-secondary &__thumb,
-    .origam-selection-control__wrapper.origam--color-success &__thumb,
-    .origam-selection-control__wrapper.origam--color-warning &__thumb,
-    .origam-selection-control__wrapper.origam--color-danger &__thumb,
-    .origam-selection-control__wrapper.origam--color-info &__thumb,
-    .origam-selection-control__wrapper.origam--color-neutral &__thumb {
+    /*
+     * Le canal couleur vit sur `.origam-selection-control__input`, PAS sur le
+     * wrapper. Ces règles ciblaient le wrapper et ne matchaient donc jamais :
+     * le pouce restait blanc quelle que soit la prop `color` (#512).
+     *
+     * C'est la régression décrite dans le CLAUDE.md — le contrat de style
+     * inline cassé lors de l'extraction d'`OrigamSwitchTrack` — revenue par le
+     * même mécanisme : le canal a bougé, le sélecteur est resté.
+     *
+     * `:has()` est la SEULE des trois pistes envisagées qui fonctionne ici, et
+     * c'est la structure du DOM qui l'impose, pas une préférence :
+     *
+     *     .origam-selection-control__wrapper
+     *       ├─ <slot default>  → OrigamSwitchTrack → &__thumb
+     *       └─ .origam-selection-control__input   ← porte la couleur
+     *
+     *   · sélecteur frère (`~` / `+`) : impossible — `&__thumb` PRÉCÈDE
+     *     `__input`, et CSS n'a pas de combinateur « frère précédent » ;
+     *   · custom property sur un ancêtre commun : impossible sans toucher
+     *     `OrigamSelectionControl` — la couleur est posée sur `__input`, un
+     *     ENFANT du wrapper, et les custom properties héritent vers le bas
+     *     seulement. La publier plus haut changerait le composant partagé par
+     *     Checkbox, Radio et Switch, au lieu de rester contenu ici ;
+     *   · `:has()` sur le wrapper, ancêtre commun réel : fonctionne, et le
+     *     motif est déjà employé dans le DS (OrigamCard, OrigamNumberField).
+     *
+     * Les conditions sont conservées à l'identique — sept intentions plus la
+     * porte de secours en style inline pour les couleurs personnalisées. Seule
+     * la cible du test change.
+     */
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-primary) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-secondary) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-success) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-warning) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-danger) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-info) &__thumb,
+    .origam-selection-control__wrapper:has(.origam-selection-control__input.origam--color-neutral) &__thumb {
       background-color: currentColor;
     }
 
-    .origam-selection-control__wrapper[style*="color:"] &__thumb {
+    .origam-selection-control__wrapper:has(.origam-selection-control__input[style*="color:"]) &__thumb {
       background-color: currentColor;
     }
 

package/dist/src/components/Switch/OrigamSwitchTrack.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+			:id="id"
 			:class="switchTrackClasses"
 			:style="switchTrackStyles"
 			@click="handleClick"
@@ -35,14 +36,12 @@
 
 <script lang="ts" setup>
 import { computed, StyleValue, useSlots } from "vue";
-import {
-  useBackgroundColor,
-  useBorder,
-  useElevation,
-  useProps,
-  useRounded,
-  useStyle
-} from "../../composables";
+import { useBackgroundColor } from "../../composables/Commons/backgroundColor.composable";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
 const props = defineProps({
   modelValue: { type: Boolean, required: false, default: false },
   isValid: { type: [Boolean, null], required: false, default: null },
@@ -75,7 +74,7 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false }
 });
-const emits = defineEmits(["click", "update:modelValue"]);
+const emits = defineEmits(["click"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
@@ -88,6 +87,7 @@ const { borderClasses, borderStyles } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { elevationClasses, elevationStyles } = useElevation(props);
 const slotProps = computed(() => ({
+  color: props.color,
   model: props.modelValue,
   isValid: props.isValid
 }));
@@ -122,7 +122,7 @@ const switchTrackClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(switchTrackStyles);
+const { id, css, load, isLoaded, unload } = useStyle(switchTrackStyles, () => props.id);
 defineExpose({
   filterProps,
   css,
@@ -143,13 +143,22 @@ defineExpose({
 		font-size: 0.5rem;
 		padding: 0 5px;
 		background-color: var(--origam-switch__track---background-color, rgb(163, 163, 163));
-		border-radius: var(--origam-switch__track---border-radius, 9999px);
+
+		// #C2 — zero-specificity default so a scale-driven utility class
+		// (`.origam--rounded-lg` from `rounded="lg"`) wins the cascade.
+		// Without `:where()`, this scoped rule's [data-v-hash] pushes it
+		// to (0,2,0), beating the utility's (0,1,0), and the `rounded`
+		// prop's scale form goes silently inert.
+		:where(&) {
+			border-radius: var(--origam-switch__track---border-radius, 9999px);
+		}
+
 		height: var(--origam-switch__track---height, 14px);
 		min-width: var(--origam-switch__track---width, 36px);
 		backdrop-filter: var(--origam-switch__track---backdrop-filter, none);
 		-webkit-backdrop-filter: var(--origam-switch__track---backdrop-filter, none);
 		cursor: pointer;
-		transition: 0.2s background-color cubic-bezier(0.4, 0, 0.2, 1);
+		transition: var(--origam-switch---transition-duration, 0.2s) background-color var(--origam-switch---transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
 		overflow: hidden;
 
 		@media (prefers-reduced-motion: reduce) {
@@ -187,19 +196,28 @@ defineExpose({
 			opacity: var(--origam-switch---opacity-disabled, 0.32);
 		}
 
+		&--readonly {
+			cursor: default;
+			pointer-events: none;
+		}
+
 		&--dirty#{$this}--disabled {
 			background-color: var(--origam-switch__track---background-color-disabled, rgb(163, 163, 163));
 		}
 
 		&--error {
 			&:not(#{$this}--disabled) {
-				background-color: rgba(255, 0, 0, 1);
-				color: rgba(255, 255, 255, 1);
+				background-color: var(--origam-switch__track---background-color-error, rgba(255, 0, 0, 1));
+				color: var(--origam-switch__track---color-error, rgba(255, 255, 255, 1));
 			}
 		}
 
 		&--inset {
-			border-radius: var(--origam-switch__track---border-radius, 9999px);
+			// #C2 — same zero-specificity requirement as the base rule above.
+			:where(&) {
+				border-radius: var(--origam-switch__track---border-radius, 9999px);
+			}
+
 			font-size: 0.75rem;
 			height: var(--origam-switch__track--inset---height, 32px);
 			min-width: var(--origam-switch__track--inset---width, 52px);

package/dist/src/components/SystemBar/OrigamSystemBar.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			:id="id"
 			v-contrast
 			:class="systemBarClasses"
 			:style="systemBarStyles"
@@ -10,20 +11,19 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, shallowRef, StyleValue, toRef } from "vue";
-import {
-  useBorder,
-  useBothColor,
-  useDimension,
-  useElevation,
-  useLayoutItem,
-  useProps,
-  useRounded,
-  useSsrBoot,
-  useStyle,
-  useTypography
-} from "../../composables";
-import { vContrast } from "../../directives";
+import { computed, StyleValue, toRef } from "vue";
+import { useBorder } from "../../composables/Commons/border.composable";
+import { useBothColor } from "../../composables/Commons/bothColor.composable";
+import { useDimension } from "../../composables/Commons/dimension.composable";
+import { useElevation } from "../../composables/Commons/elevation.composable";
+import { useLayoutItem } from "../../composables/Commons/layoutItem.composable";
+import { useProps } from "../../composables/Commons/props.composable";
+import { useRounded } from "../../composables/Commons/rounded.composable";
+import { useSsrBoot } from "../../composables/Commons/ssrBoot.composable";
+import { useStyle } from "../../composables/Commons/style.composable";
+import { useTypography } from "../../composables/Commons/typography.composable";
+import vContrast from "../../directives/Contrast/contrast.directive";
+import { BLOCK, INLINE } from "../../enums/Commons/anchor.enum";
 const props = defineProps({
   window: { type: Boolean, required: false },
   id: { type: String, required: false },
@@ -36,7 +36,7 @@ const props = defineProps({
   name: { type: String, required: false },
   order: { type: [String, Number], required: false },
   absolute: { type: Boolean, required: false },
-  location: { type: null, required: false },
+  location: { type: null, required: false, default: BLOCK.TOP },
   rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
@@ -61,13 +61,13 @@ const props = defineProps({
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, 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 { filterProps } = useProps(props);
+defineEmits([]);
 defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { borderClasses, borderStyles } = useBorder(props);
@@ -77,24 +77,26 @@ const { typographyStyles } = useTypography(props, "system-bar");
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { ssrBootStyles } = useSsrBoot();
 const height = computed(() => props.height ?? (props.window ? 32 : 24));
+const isHorizontalDock = computed(() => props.location === INLINE.LEFT || props.location === INLINE.RIGHT);
+const explicitElementSize = computed(() => props.height !== void 0 || isHorizontalDock.value ? height.value : void 0);
 const { layoutItemStyles } = useLayoutItem({
   id: props.name,
   order: computed(() => parseInt(String(props.order ?? 0), 10)),
-  position: shallowRef("top"),
+  position: toRef(props, "location"),
   layoutSize: height,
-  elementSize: height,
+  elementSize: explicitElementSize,
   active: computed(() => true),
   absolute: toRef(props, "absolute")
 });
 const systemBarStyles = computed(() => {
   return [
+    layoutItemStyles.value,
     borderStyles.value,
     roundedStyles.value,
     dimensionStyles.value,
     colorStyles.value,
     typographyStyles.value,
     ssrBootStyles.value,
-    layoutItemStyles.value,
     props.style
   ];
 });
@@ -111,7 +113,7 @@ const systemBarClasses = computed(() => {
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(systemBarStyles);
+const { id, css, load, isLoaded, unload } = useStyle(systemBarStyles, () => props.id);
 defineExpose({
   filterProps,
   css,