@iqual/nuxt-icms 1.4.0 → 1.4.1

package/components/DesignSystem/Atoms/Button.vue

@@ -27,7 +27,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemAtomsCaption')
 
 const props = defineProps<{
   label?: string

package/components/DesignSystem/Atoms/Caption.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemAtomsCaption')
 
 defineProps<{
   caption?: string

package/components/DesignSystem/Atoms/Container.vue

@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemAtomsContainer')
 
 const props = withDefaults(
   defineProps<{

package/components/DesignSystem/Atoms/GridRow.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemAtomsGridRow')
 
 defineProps<{
   class?: string

package/components/DesignSystem/Atoms/LinkListItem.vue

@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemAtomsLinkListItem')
 
 defineProps<{
   title?: string

package/components/DesignSystem/Molecules/ButtonGroup.vue

@@ -30,7 +30,7 @@ import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemMoleculesButtonGroup')
 
 type Link = {
   props: {

package/components/DesignSystem/Molecules/Card.vue

@@ -61,7 +61,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemMoleculesCard')
 
 defineProps<{
   title?: string

package/components/DesignSystem/Molecules/IconText.vue

@@ -27,7 +27,7 @@ import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemMoleculesIconText')
 
 defineProps<{
   title?: string

package/components/DesignSystem/Molecules/MediaLightbox.vue

@@ -288,7 +288,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemMoleculesMediaLightbox')
 const { $texts } = useNuxtApp()
 
 // Refs

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -89,7 +89,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { useMediaLightbox } from '@iqual/nuxt-icms/composables/useMediaLightbox'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemMoleculesMediaSlider')
 
 const props = defineProps<{
   media?: (MediaFragment | null)[] | undefined

package/components/DesignSystem/Molecules/Partnership.vue

@@ -24,7 +24,7 @@ import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemMoleculesPartnership')
 
 defineProps<{
   logo?: MediaFragment

package/components/DesignSystem/Molecules/Table.vue

@@ -50,7 +50,7 @@ import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { tv } from 'tailwind-variants'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemMoleculesTable')
 
 const props = defineProps<{
   tableData?: Record<string, any>

package/components/DesignSystem/Molecules/TitleComposition.vue

@@ -24,7 +24,7 @@
 <script lang="ts" setup>
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemMoleculesTitleComposition')
 
 const props = withDefaults(
   defineProps<{

package/components/DesignSystem/Organisms/ContentBlock.vue

@@ -54,7 +54,7 @@ import type { MediaFragment } from '#graphql-operations'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsContentBlock')
 
 type Link = {
   props: {

package/components/DesignSystem/Organisms/FacetedListing.vue

@@ -124,7 +124,7 @@ const props = withDefaults(
   },
 )
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsFacetedListing')
 const { $texts } = useNuxtApp()
 
 // Helper function to filter valid items

package/components/DesignSystem/Organisms/FlipTeaser.vue

@@ -93,7 +93,7 @@ import { tv } from 'tailwind-variants'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsFlipTeaser')
 
 defineProps<{
   image?: MediaFragment

package/components/DesignSystem/Organisms/HeaderHero.vue

@@ -151,7 +151,7 @@ defineProps<{
   subtitleContainerClass?: string
 }>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsHeaderHero')
 const { $texts } = useNuxtApp()
 </script>
 

package/components/DesignSystem/Organisms/HeaderTextImage.vue

@@ -67,5 +67,5 @@ defineProps<{
   elementClass?: string
 }>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsHeaderTextImage')
 </script>

package/components/DesignSystem/Organisms/LogoElement.vue

@@ -24,7 +24,7 @@ import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsLogoElement')
 
 defineProps<{
   logo?: MediaFragment

package/components/DesignSystem/Organisms/SearchResults.vue

@@ -32,7 +32,7 @@ defineProps<{
   results: GroupedSearchResults
 }>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsSearchResults')
 
 const { $resolveDynamicEntityComponent } = useNuxtApp()
 const searchComponent = (bundle: string) => {

package/components/DesignSystem/Organisms/TeamElement.vue

@@ -105,7 +105,7 @@ import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsTeamElement')
 
 defineProps<{
   firstname?: string

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -77,7 +77,7 @@ import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsTeaserCard')
 
 defineProps<{
   image?: MediaFragment

package/components/DesignSystem/Organisms/Testimonial.vue

@@ -70,7 +70,7 @@ import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsTestimonial')
 
 defineProps<{
   title?: string

package/components/DesignSystem/Organisms/TimelineElement.vue

@@ -57,7 +57,7 @@ import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsTimelineElement')
 
 const props = defineProps<{
   pretitle?: string

package/components/DesignSystem/Organisms/TwoColumnTextElement.vue

@@ -54,7 +54,7 @@
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemOrganismsTwoColumnTextElement')
 
 defineProps<{
   pretitle?: string

package/components/DesignSystem/Pages/Search.vue

@@ -34,6 +34,6 @@
 <script lang="ts" setup>
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemPagesSearch')
 const { $texts } = useNuxtApp()
 </script>

package/components/Drupal/Breadcrumb/index.vue

@@ -35,7 +35,7 @@ import type { BreadcrumbFragment } from '#graphql-operations'
 import type { Langcode } from '#nuxt-language-negotiation/config'
 import { NuxtLink } from '#components'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme()
+const themedClass = useTheme('DesignSystemAtomsButton')
 
 const props = defineProps<{
   links: BreadcrumbFragment[]

package/components/Drupal/Messages/index.vue

@@ -21,7 +21,7 @@
 import type { DrupalMessageType } from '@iqual/nuxt-icms/composables/useDrupalMessages'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme()
+const themedClass = useTheme('DrupalMessages')
 
 const props = defineProps<{
   wrapperClass?: string

package/components/Drupal/Webform/index.vue

@@ -94,7 +94,7 @@ interface FormData {
     | undefined
 }
 
-const themedClass = useTheme()
+const themedClass = useTheme('DrupalWebform')
 
 const props = defineProps<{
   formId: string

package/components/Media/Icon/index.vue

@@ -11,7 +11,7 @@
 import type { MediaIconFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('MediaIcon')
 
 defineProps<{
   media: MediaIconFragment

package/components/Media/Image/index.vue

@@ -37,7 +37,7 @@
 import type { MediaImageFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('MediaImage')
 
 const props = withDefaults(
   defineProps<{

package/components/Media/RemoteVideo/index.vue

@@ -54,7 +54,7 @@
 import type { MediaRemoteVideoFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('MediaRemoteVideo')
 
 const props = defineProps<{
   media: MediaRemoteVideoFragment

package/components/Media/Video/index.vue

@@ -23,7 +23,7 @@
 import type { MediaVideoFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('MediaVideo')
 
 withDefaults(
   defineProps<{

package/components/Paragraph/Button/Element/index.vue

@@ -22,7 +22,7 @@ import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { ParagraphIcmsButtonElementFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphButtonElement')
 
 defineProps<ParagraphIcmsButtonElementFragment>()
 

package/components/Paragraph/CallToAction/index.vue

@@ -70,7 +70,7 @@
 import type { ParagraphIcmsLayoutCallToActionFragment } from '#graphql-operations'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphCallToAction')
 
 defineProps<ParagraphIcmsLayoutCallToActionFragment>()
 

package/components/Paragraph/Card/Layout/index.vue

@@ -55,7 +55,7 @@
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutCardsFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphCardLayout')
 
 const props = defineProps<ParagraphIcmsLayoutCardsFragment>()
 

package/components/Paragraph/Contact/index.vue

@@ -74,7 +74,7 @@ defineProps<ParagraphIcmsLayoutContactFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphContact')
 
 const colorScheme = computed(() => {
   return options.value.colorScheme

package/components/Paragraph/Downloads/index.vue

@@ -75,7 +75,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 defineProps<ParagraphIcmsLayoutDownloadsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphDownloads')
 
 const colorScheme = computed(() => options.value.colorScheme)
 

package/components/Paragraph/FAQ/Element/index.vue

@@ -44,7 +44,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsFaqElementFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphFAQElement')
 
 const accordionTrigger = tv({
   base: themedClass(

package/components/Paragraph/FAQ/Layout/index.vue

@@ -80,7 +80,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const props = defineProps<ParagraphIcmsLayoutFaqFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphFAQLayout')
 
 const defaultValue = computed(() => {
   if (!isEditing) {

package/components/Paragraph/FlipTeasers/index.vue

@@ -61,7 +61,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutFlipTeasersFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphFlipTeasers')
 
 const { options, parentType } = useAttrs().blokkliData
 

package/components/Paragraph/Gallery/index.vue

@@ -86,7 +86,7 @@ const { options } = useAttrs().blokkliData as any
 
 const props = defineProps<ParagraphIcmsLayoutGalleryFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphGallery')
 
 const {
   isOpen,

package/components/Paragraph/HeroImage/index.vue

@@ -92,7 +92,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutHeroImageFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphHeroImage')
 
 const prefetch = provide('prefetch', true)
 

package/components/Paragraph/IconText/Element/index.vue

@@ -17,7 +17,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsIconTextElementFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphIconTextElement')
 
 const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')

package/components/Paragraph/IconText/Layout/index.vue

@@ -69,7 +69,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutTextcolIconlistFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphIconTextLayout')
 
 const { options, isEditing } = useAttrs().blokkliData
 

package/components/Paragraph/Introduction/index.vue

@@ -87,7 +87,7 @@ defineProps<ParagraphIcmsLayoutTextImageIntroFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphIntroduction')
 
 const introductionRow = tv({
   base: themedClass('introductionRowBase', 'w-full p-0'),

package/components/Paragraph/Logo/Element/index.vue

@@ -16,7 +16,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLogoElementFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphLogoElement')
 
 const colorScheme = inject<ColorScheme>('colorScheme')
 </script>

package/components/Paragraph/Media/index.vue

@@ -48,7 +48,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutMediaFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphMedia')
 
 const { options, isEditing } = useAttrs().blokkliData
 

package/components/Paragraph/Partnerships/Element/index.vue

@@ -17,5 +17,5 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsPartnershipElementFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphPartnershipsElement')
 </script>

package/components/Paragraph/Partnerships/Layout/index.vue

@@ -106,7 +106,7 @@ defineProps<ParagraphIcmsLayoutPartnershipsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphPartnershipsLayout')
 
 const partnershipsRow = tv({
   base: themedClass('partnershipsRowBase', 'w-full p-0'),

package/components/Paragraph/SingleTestimonial/index.vue

@@ -95,7 +95,7 @@ defineProps<ParagraphIcmsLayoutTestimonialFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphSingleTestimonial')
 
 const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }

package/components/Paragraph/Table/index.vue

@@ -52,7 +52,7 @@ import type { ParagraphIcmsLayoutTableFragment } from '#graphql-operations'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutTableFragment>()
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTable')
 
 const { options, parentType } = useAttrs().blokkliData
 

package/components/Paragraph/Tabs/Element/index.vue

@@ -48,7 +48,7 @@ defineProps<ParagraphIcmsTabElementFragment>()
 
 const { isEditing } = useAttrs().blokkliData as any
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTabsElement')
 
 const tabContent = tv({
   base: themedClass(

package/components/Paragraph/Tabs/Layout/index.vue

@@ -142,7 +142,7 @@ const props = defineProps<ParagraphIcmsLayoutTabsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData as any
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTabsLayout')
 const { isMobile } = useIsMobile()
 
 const tabList = tv({

package/components/Paragraph/Team/Element/index.vue

@@ -33,7 +33,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsTeamElementFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTeamElement')
 
 const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')

package/components/Paragraph/Team/Layout/index.vue

@@ -57,7 +57,7 @@ const props = defineProps<ParagraphIcmsLayoutTeamFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTeamLayout')
 
 const colorScheme = computed(() => {
   return options.value.colorScheme

package/components/Paragraph/Teasers/index.vue

@@ -57,7 +57,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutTeasersFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTeasers')
 
 const { options, parentType } = useAttrs().blokkliData as any
 

package/components/Paragraph/Testimonial/Element/index.vue

@@ -45,7 +45,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 
 defineProps<ParagraphIcmsTestimonialElementFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTestimonialElement')
 
 const { isEditing } = useAttrs().blokkliData
 

package/components/Paragraph/Testimonial/Layout/index.vue

@@ -94,7 +94,7 @@ const props = defineProps<ParagraphIcmsLayoutTestimonialsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTestimonialLayout')
 
 const carousel = tv({
   base: themedClass('carouselBase', 'px-16 py-8 xl:px-40 xl:py-12'),

package/components/Paragraph/Text/index.vue

@@ -46,7 +46,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 
 defineProps<ParagraphIcmsLayoutTextFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphText')
 
 const { options, isEditing } = useAttrs().blokkliData
 

package/components/Paragraph/TextMedia/index.vue

@@ -70,7 +70,7 @@ defineProps<ParagraphIcmsLayoutTextMediaFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTextMedia')
 
 const reverseColumns = ref(false)
 

package/components/Paragraph/Timeline/Element/index.vue

@@ -34,7 +34,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsTimelineElementFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTimelineElement')
 
 const { options, isEditing } = useAttrs().blokkliData
 

package/components/Paragraph/Timeline/Layout/index.vue

@@ -239,7 +239,7 @@ const props = defineProps<ParagraphIcmsLayoutTimelineFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTimelineLayout')
 const { isMobile } = useIsMobile()
 
 const colorScheme = computed(() => {

package/components/Paragraph/TwoColumnText/Element/index.vue

@@ -33,7 +33,7 @@ defineProps<ParagraphIcms2ColTextElementFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTwoColumnTextElement')
 
 const twoColumnTextElementClassList = computed(() => {
   const classList = []

package/components/Paragraph/TwoColumnText/Layout/index.vue

@@ -20,7 +20,7 @@ defineProps<ParagraphIcmsLayout2ColTextElementsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphTwoColumnTextLayout')
 
 const colorScheme = computed(() => {
   return options.value.colorScheme

package/components/Paragraph/iFrame/index.vue

@@ -39,7 +39,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('ParagraphiFrame')
 
 const { options, isEditing } = useAttrs().blokkliData
 

package/components/Search/Facets/FacetDropdownUI.vue

@@ -181,7 +181,7 @@ import PopoverTrigger from '@iqual/nuxt-icms/components/ui/popover/PopoverTrigge
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 
-const themedClass = useTheme()
+const themedClass = useTheme('SearchFacetsFacetDropdownUI')
 
 // Incoming facet shape from GraphQL API.
 export interface GraphQLFacetItem {

package/components/Search/Facets/FacetedSearchUI.vue

@@ -270,7 +270,7 @@ const props = withDefaults(defineProps<FacetedSearchUIProps>(), {
   conjunction: 'AND',
 })
 
-const themedClass = useTheme()
+const themedClass = useTheme('SearchFacetsFacetedSearchUI')
 
 // Get the $texts function for internationalization
 const { $texts } = useNuxtApp()

package/components/Search/Input/index.vue

@@ -41,7 +41,7 @@ const props = defineProps<{
   colorScheme?: ColorScheme
 }>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('SearchInput')
 
 const searchTermInternal = ref('')
 const isFocused = ref(false)

package/components/Section/Footer/index.vue

@@ -250,7 +250,7 @@ import type { NuxtSvgSpriteSymbol } from '#nuxt-svg-icon-sprite/runtime'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
-const themedClass = useTheme()
+const themedClass = useTheme('SectionFooter')
 const { menuItems: footerMenuLinks } = await useMenu('footerMenu')
 const { menuItems: footerMetaMenuLinks } = await useMenu('footerMetaMenu')
 const {

package/components/Section/Header/Buttons.vue

@@ -29,6 +29,6 @@ defineProps<{
   buttons: any[] | undefined
 }>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderButtons')
 const { close } = useMobileMenuOverlayBus()
 </script>

package/components/Section/Header/DesktopMainMenu.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { MappedMenuLink } from '@/packages/nuxt-icms/plugins/initData'
+import type { MappedMenuLink } from '@iqual/nuxt-icms/plugins/initData'
 import { NuxtLink } from '#components'
 import DesktopMainMenuDropdown from './DesktopMainMenuDropdown.vue'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
@@ -85,7 +85,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const { menuItems, menuItemActive } = await useMenu('mainMenu')
 
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderDesktopMainMenu')
 
 const isActive = (item: MappedMenuLink) => menuItemActive.value?.id === item.id
 const hasSubmenu = (item: MappedMenuLink) => (item.children?.length ?? 0) > 0

package/components/Section/Header/DesktopMainMenuDropdown.vue

@@ -68,12 +68,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { MappedMenuLink } from '@/packages/nuxt-icms/plugins/initData'
+import type { MappedMenuLink } from '@iqual/nuxt-icms/plugins/initData'
 import { NuxtLink } from '#components'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderDesktopMainMenuDropdown')
 
 const props = defineProps<{
   item: MappedMenuLink

package/components/Section/Header/LanguageDropdown.vue

@@ -107,7 +107,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const links = useLanguageLinks()
 const currentLanguage = useCurrentLanguage()
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderLanguageDropdown')
 
 const isLangDropdownOpen = ref(false)
 

package/components/Section/Header/LanguageLinks.vue

@@ -35,5 +35,5 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 const { close } = useMobileMenuOverlayBus()
 
 const links = useLanguageLinks()
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderLanguageLinks')
 </script>

package/components/Section/Header/Logo.vue

@@ -15,9 +15,10 @@
 </template>
 
 <script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 const { companyLogo, companyName } = await useGlobalConfig()
 
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderLogo')
 const currentLanguage = useCurrentLanguage()
 const { close } = useMobileMenuOverlayBus()
 </script>

package/components/Section/Header/MainButtons.vue

@@ -26,6 +26,6 @@
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const { contactButtons } = await useGlobalConfig()
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderMainButtons')
 const { close } = useMobileMenuOverlayBus()
 </script>

package/components/Section/Header/MenuIcon.vue

@@ -60,11 +60,12 @@
 </template>
 
 <script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 defineProps<{
   isInClosableState: boolean
 }>()
 
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderMenuIcon')
 const { close, open } = useMobileMenuOverlayBus()
 </script>
 

package/components/Section/Header/MetaButtons.vue

@@ -26,6 +26,6 @@
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const { metaLinks } = await useGlobalConfig()
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderMetaButtons')
 const { close } = useMobileMenuOverlayBus()
 </script>

package/components/Section/Header/MetaMenu.vue

@@ -65,7 +65,7 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const { menuItems, menuItemActive } = await useMenu('metaMenu')
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderMetaMenu')
 const { $texts } = useNuxtApp()
 const { close } = useMobileMenuOverlayBus()
 </script>

package/components/Section/Header/MobileMainMenu.vue

@@ -19,5 +19,5 @@ import MobileMainMenuItem from './MobileMainMenuItem.vue'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 const { menuItems, menuItemActive } = await useMenu('mainMenu')
 
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderMobileMainMenu')
 </script>

package/components/Section/Header/MobileMainMenuItem.vue

@@ -79,13 +79,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { MappedMenuLink } from '@/packages/nuxt-icms/plugins/initData'
+import type { MappedMenuLink } from '@iqual/nuxt-icms/plugins/initData'
 import { NuxtLink } from '#components'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const route = useRoute()
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeaderMobileMainMenuItem')
 const { close } = useMobileMenuOverlayBus()
 
 const props = defineProps<{

package/components/Section/Header/index.vue

@@ -177,8 +177,10 @@
 </template>
 
 <script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
 const { metaLinks, contactButtons } = await useGlobalConfig()
-const themedClass = useTheme()
+const themedClass = useTheme('SectionHeader')
 const { close, onOpen, onClose } = useMobileMenuOverlayBus()
 const viewport = useViewport()
 

package/composables/useTheme.ts

@@ -1,33 +1,12 @@
 import { getCurrentInstance } from 'vue'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
-/**
- * Helper function that extracts a component name from a file path by converting the path structure to a component identifier.
- * 
- * @param filePath - The full file path of the component
- * @returns The component name derived from the path (e.g., "Section/Header/index.vue" becomes "SectionHeader")
- */
-function getComponentName(filePath: string): string {
-  if (!filePath.includes('/components/')) return 'Unknown'
-
-  return filePath.substring(filePath.indexOf('/components/') + 12)
-    .replace(/\.(vue|tsx?|jsx?)$/, '')
-    .replace(/\/index$/, '')
-    .split('/').join('')
-}
-
-interface UseThemeOptions {
-  componentName?: string
-  themeName?: string
-}
-
 /**
  * A composable that provides theme-aware class generation for Vue components.
  * Automatically detects the calling component and merges theme classes with component props and default classes.
  * 
- * @param options - Configuration options for the theme
- * @param options.componentName - Optional component name to manually override auto-detection
- * @param options.themeName - The name of the theme to use from app config (defaults to 'default')
+ * @param componentName - Component name to manually override auto-detection
+ * @param themeName - The name of the theme to use from app config (defaults to 'default')
  * @returns A function that generates themed classes for component elements
  * 
  * @example
@@ -39,20 +18,11 @@ interface UseThemeOptions {
  * </template>
  * 
  * <script setup>
- * // Auto-detects component name and uses default theme
- * const theme = useTheme()
- * 
- * // Manually set component name
- * const customTheme = useTheme({ componentName: 'CustomComponent' })
+ * // Uses default theme
+ * const customTheme = useTheme('CustomComponent')
  * 
- * // Use a specific theme with auto-detection
- * const darkTheme = useTheme({ themeName: 'dark' })
- * 
- * // Manually set component name with specific theme
- * const customDarkTheme = useTheme({ 
- *   componentName: 'CustomComponent', 
- *   themeName: 'dark' 
- * })
+ * // Use a specific theme
+ * const darkTheme = useTheme('CustomComponent', 'dark')
  * 
  * // The returned function merges:
  * // 1. Default classes passed as second parameter
@@ -75,14 +45,12 @@ interface UseThemeOptions {
  * })
  * ```
  */
-export function useTheme(options: UseThemeOptions = {}) {
-  const { componentName, themeName = 'default' } = options
+export function useTheme(componentName: string, themeName: string = 'default') {
   const instance = getCurrentInstance()
   const { props } = instance || {}
   const appConfig = useAppConfig()
 
-  const component = componentName || getComponentName(instance?.type?.__file || '')
-  const componentTheme = (appConfig?.theme as any)?.[themeName]?.[component] ?? {}
+  const componentTheme = (appConfig?.theme as any)?.[themeName]?.[componentName] ?? {}
 
   /**
    * Generates themed classes by merging default classes, theme classes, and component prop classes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "ICMS Base",
   "type": "module",
   "private": false,