@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.2

package/components/Paragraph/Listing/fragment.graphql

@@ -0,0 +1,14 @@
+fragment paragraphIcmsLayoutListing on ParagraphIcmsLayoutListing {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  contentTypes: fieldIcmsContentTypes
+  listingType: fieldIcmsListingType
+  sorting: fieldIcmsSorting
+  topics: fieldIcmsTopics {
+    id
+    name
+  }
+}

package/components/Paragraph/Listing/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <DesignSystemOrganismsFacetedListing
+    :pretitle="pretitle"
+    :title="title"
+    :title-weight="titleWeight"
+    :title-style="titleStyle"
+    :text="text"
+    :align-horizontal-full="alignHorizontalFull"
+    :color-scheme="colorScheme"
+    :spacing="spacing"
+    :listing-type="listingType"
+    :prefilter="topics ? { topics: topics } : undefined"
+    :content-type-filter="contentTypeFilter"
+    :sort="sort"
+    :slider="slider"
+    :slider-columns="sliderColumns"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutListingFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutListingFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData as any
+
+const themedClass = useTheme('ParagraphListing')
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const teaserVariant = computed(() => {
+  return options.value.teaserVariant
+})
+
+const alignHorizontalFull = computed(() => {
+  const classList = []
+  if (options.value.alignHorizontalFull == 'center') {
+    classList.push(
+      themedClass(
+        'alignHorizontalFullCenterClass',
+        'text-center md:col-span-8 md:col-start-3',
+      ),
+    )
+  }
+  if (options.value.alignHorizontalFull == 'right') {
+    classList.push(
+      themedClass('alignHorizontalFullRightClass', 'text-right md:col-start-4'),
+    )
+  }
+  return classList.join(' ')
+})
+
+// Restrict the results to the content types picked by the editor. Without a
+// selection every indexed content type is listed.
+const contentTypeFilter = computed(() => {
+  const types = (props.contentTypes || []).filter(
+    (type): type is string => !!type,
+  )
+  return types.length ? types : undefined
+})
+
+// Map the editor-selected sorting option to a search sort. Without a
+// selection the FacetedListing default (weight, then newest first) applies.
+const sort = computed(() => {
+  switch (props.sorting) {
+    case 'alphabetical':
+      return [{ field: 'title_sort', direction: 'ASC' as const }]
+    case 'weight':
+      return [{ field: 'weight', direction: 'DESC' as const }]
+    default:
+      return undefined
+  }
+})
+
+const slider = computed(() => {
+  return options.value.slider
+})
+
+const sliderColumns = computed(() => {
+  return options.value.sliderColumns
+})
+
+provide('isEditing', isEditing)
+provide('teaserVariant', teaserVariant)
+</script>

package/components/Paragraph/Logo/Element/fragment.graphql

@@ -4,7 +4,7 @@ fragment paragraphIcmsLogoElement on ParagraphIcmsLogoElement {
   }
   link: fieldIcmsLink {
     uri {
-      path
+      ...linkUrl
     }
   }
   title: fieldIcmsLinkTitle

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

@@ -1,10 +1,11 @@
 <template>
   <DesignSystemOrganismsLogoElement
     :logo="logo"
-    :link="link?.uri?.path"
-    :targetBlank="targetBlank"
+    :link="resolvedLink.url"
+    :external="resolvedLink.isFile"
+    :target-blank="targetBlank || resolvedLink.isFile"
     :title="title"
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :class="themedClass('containerClass', 'w-full md:w-[calc(50%-12px)]')"
   />
 </template>
@@ -13,7 +14,9 @@
 import type { ParagraphIcmsLogoElementFragment } from '#graphql-operations'
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 
-defineProps<ParagraphIcmsLogoElementFragment>()
+const props = defineProps<ParagraphIcmsLogoElementFragment>()
+
+const resolvedLink = computed(() => resolveLinkUrl(props.link?.uri))
 
 const themedClass = useTheme('ParagraphLogoElement')
 

package/components/Paragraph/Media/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -9,44 +9,46 @@
         <DesignSystemMoleculesMediaSlider
           v-if="media && media.length > 1"
           :media="media"
-          :imageSizes="imageSizes"
-          :imageFormat="imageFormat"
-          :containerClass="themedClass('mediaSliderContainerClass', 'py-0')"
-          :mediaClass="themedClass('mediaSliderMediaClass')"
-          :elementClass="
+          :image-sizes="imageSizes"
+          :image-format="imageFormat"
+          :container-class="themedClass('mediaSliderContainerClass', 'py-0')"
+          :media-class="themedClass('mediaSliderMediaClass')"
+          :element-class="
             themedClass(
               'mediaSliderElementClass',
               'block w-full h-auto max-h-dvh object-cover object-center',
             )
           "
-          :figcaptionClass="themedClass('mediaSliderFigcaptionClass')"
-          :carouselClass="themedClass('mediaSliderCarouselClass')"
-          :carouselContentClass="themedClass('mediaSliderCarouselContentClass')"
-          :carouselItemClass="themedClass('mediaSliderCarouselItemClass')"
-          :carouselButtonPrevClass="
+          :figcaption-class="themedClass('mediaSliderFigcaptionClass')"
+          :carousel-class="themedClass('mediaSliderCarouselClass')"
+          :carousel-content-class="
+            themedClass('mediaSliderCarouselContentClass')
+          "
+          :carousel-item-class="themedClass('mediaSliderCarouselItemClass')"
+          :carousel-button-prev-class="
             themedClass('mediaSliderCarouselButtonPrevClass')
           "
-          :carouselButtonNextClass="
+          :carousel-button-next-class="
             themedClass('mediaSliderCarouselButtonNextClass')
           "
-          colorScheme="none"
-          :showCaption="showCaptions"
+          color-scheme="none"
+          :show-caption="showCaptions"
         />
 
         <Media
           v-else-if="media && media.length === 1 && media[0]"
           :media="media[0]"
-          :imageSizes="imageSizes"
-          :imageFormat="imageFormat"
-          :mediaClass="themedClass('mediaMediaClass')"
-          :elementClass="
+          :image-sizes="imageSizes"
+          :image-format="imageFormat"
+          :media-class="themedClass('mediaMediaClass')"
+          :element-class="
             themedClass(
               'mediaElementClass',
               'block w-full h-auto max-h-dvh object-cover object-center',
             )
           "
-          :figcaptionClass="themedClass('mediaFigcaptionClass')"
-          :showCaption="showCaptions"
+          :figcaption-class="themedClass('mediaFigcaptionClass')"
+          :show-caption="showCaptions"
         />
       </div>
     </div>
@@ -61,7 +63,7 @@ defineProps<ParagraphIcmsLayoutMediaFragment>()
 
 const themedClass = useTheme('ParagraphMedia')
 
-const { options, isEditing } = useAttrs().blokkliData as any
+const { options } = useAttrs().blokkliData as any
 
 const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')
 const colorScheme = computed(() => {

package/components/Paragraph/Partnerships/Element/fragment.graphql

@@ -4,7 +4,7 @@ fragment paragraphIcmsPartnershipElement on ParagraphIcmsPartnershipElement {
   }
   link: fieldIcmsLink {
     uri {
-      path
+      ...linkUrl
     }
   }
   title: fieldIcmsLinkTitle

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

@@ -1,20 +1,23 @@
 <template>
   <DesignSystemMoleculesPartnership
     :logo="logo"
-    :link="link?.uri?.path"
-    :targetBlank="targetBlank"
+    :link="resolvedLink.url"
+    :external="resolvedLink.isFile"
+    :target-blank="targetBlank || resolvedLink.isFile"
     :title="title"
-    :linkClass="themedClass('linkClass')"
-    :mediaClass="themedClass('mediaClass')"
-    :figcaptionClass="themedClass('figcaptionClass')"
-    :elementClass="themedClass('elementClass')"
+    :link-class="themedClass('linkClass')"
+    :media-class="themedClass('mediaClass')"
+    :figcaption-class="themedClass('figcaptionClass')"
+    :element-class="themedClass('elementClass')"
   />
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsPartnershipElementFragment } from '#graphql-operations'
 
-defineProps<ParagraphIcmsPartnershipElementFragment>()
+const props = defineProps<ParagraphIcmsPartnershipElementFragment>()
+
+const resolvedLink = computed(() => resolveLinkUrl(props.link?.uri))
 
 const themedClass = useTheme('ParagraphPartnershipsElement')
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -18,11 +18,11 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :colorScheme="colorScheme"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :color-scheme="colorScheme"
         />
 
         <ul :class="themedClass('textRowsClass', 'flex flex-col gap-4')">
@@ -66,20 +66,20 @@
         <Media
           v-if="image"
           :media="image"
-          :imageFormat="imageFormat"
-          imageSizes="xs:100vw sm:100vw md:50vw lg:600px"
-          :mediaClass="themedClass('mediaClass')"
-          :elementClass="themedClass('elementClass')"
-          :figcaptionClass="themedClass('figcaptionClass')"
+          :image-format="imageFormat"
+          image-sizes="xs:100vw sm:100vw md:50vw lg:600px"
+          :media-class="themedClass('mediaClass')"
+          :element-class="themedClass('elementClass')"
+          :figcaption-class="themedClass('figcaptionClass')"
         />
 
         <div :class="partnershipsOffsetRow({ colorScheme })">
           <DesignSystemOrganismsContentBlock
             :pretitle="overlayTitle"
-            :pretitleClass="themedClass('overlayTitle')"
+            :pretitle-class="themedClass('overlayTitle')"
             :text="overlayText"
-            :textClass="themedClass('overlayText')"
-            :colorScheme="colorScheme"
+            :text-class="themedClass('overlayText')"
+            :color-scheme="colorScheme"
           />
 
           <BlokkliField

package/components/Paragraph/SingleTestimonial/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer
     :spacing="spacing"
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
@@ -15,12 +15,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -36,7 +36,7 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="textplain"
-          :pretitleClass="themedClass('textPlainClass', 'mb-0')"
+          :pretitle-class="themedClass('textPlainClass', 'mb-0')"
         />
       </div>
       <div
@@ -49,14 +49,14 @@
       >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
+          :subtitle-class="themedClass('subtitleClass')"
           :text="text"
-          :textClass="themedClass('textClass')"
+          :text-class="themedClass('textClass')"
           :media="media"
-          :imageFormat="imageFormat"
-          :mediaClass="themedClass('mediaClass')"
-          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
-          :colorScheme="colorScheme"
+          :image-format="imageFormat"
+          :media-class="themedClass('mediaClass')"
+          :media-container-class="themedClass('mediaContainerClass', 'mt-0')"
+          :color-scheme="colorScheme"
         />
 
         <BlokkliField

package/components/Paragraph/Table/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer
     :spacing="spacing"
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :class="themedClass('containerClass')"
   >
     <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
@@ -19,13 +19,13 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
+          :subtitle-class="themedClass('subtitleClass')"
         />
       </div>
       <div
@@ -42,7 +42,7 @@
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
-          :textClass="themedClass('textClass')"
+          :text-class="themedClass('textClass')"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -58,10 +58,10 @@
     >
       <div :class="themedClass('secondRowColumnClass', 'relative col-span-12')">
         <DesignSystemMoleculesTable
-          :tableData="tableData"
-          :colorScheme="colorScheme"
-          :containerClass="themedClass('tableContainerClass')"
-          :tableClass="themedClass('tableClass')"
+          :table-data="tableData"
+          :color-scheme="colorScheme"
+          :container-class="themedClass('tableContainerClass')"
+          :table-class="themedClass('tableClass')"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -76,7 +76,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 defineProps<ParagraphIcmsLayoutTableFragment>()
 const themedClass = useTheme('ParagraphTable')
 
-const { options, parentType } = useAttrs().blokkliData as any
+const { options } = useAttrs().blokkliData as any
 
 const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }

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

@@ -2,26 +2,28 @@
   <DesignSystemOrganismsTeamElement
     :firstname="firstname"
     :lastname="lastname"
-    :titleWeight="titleWeight"
+    :title-weight="titleWeight"
     :position="position"
     :email="email"
     :phone="phone"
     :text="text"
     :image="image"
     :buttons="buttons"
-    :colorScheme="colorScheme"
-    :containerClass="themedClass('containerClass')"
-    :mediaClass="themedClass('mediaClass')"
-    :figcaptionClass="themedClass('figcaptionClass')"
-    :elementClass="themedClass('elementClass')"
-    :textContainerClass="themedClass('textContainerClass')"
-    :titleClass="themedClass('titleClass')"
-    :subtitleClass="themedClass('subtitleClass')"
-    :textClass="themedClass('textClass')"
-    :contactButtonsContainerClass="themedClass('contactButtonsContainerClass')"
-    :buttonsContainerClass="themedClass('buttonsContainerClass')"
-    :buttonClass="themedClass('buttonClass')"
-    :labelClass="themedClass('labelClass')"
+    :color-scheme="colorScheme"
+    :container-class="themedClass('containerClass')"
+    :media-class="themedClass('mediaClass')"
+    :figcaption-class="themedClass('figcaptionClass')"
+    :element-class="themedClass('elementClass')"
+    :text-container-class="themedClass('textContainerClass')"
+    :title-class="themedClass('titleClass')"
+    :subtitle-class="themedClass('subtitleClass')"
+    :text-class="themedClass('textClass')"
+    :contact-buttons-container-class="
+      themedClass('contactButtonsContainerClass')
+    "
+    :buttons-container-class="themedClass('buttonsContainerClass')"
+    :button-class="themedClass('buttonClass')"
+    :label-class="themedClass('labelClass')"
   />
 </template>
 

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

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="themedClass('containerClass')"
   >
@@ -16,14 +16,14 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
+          :title-class="themedClass('titleClass', 'mb-0')"
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :subtitle-class="themedClass('subtitleClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -37,8 +37,8 @@
       >
         <DesignSystemOrganismsContentBlock
           :text="text"
-          :textClass="themedClass('textClass')"
-          :colorScheme="colorScheme"
+          :text-class="themedClass('textClass')"
+          :color-scheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>

package/components/Paragraph/Teasers/index.vue

@@ -1,6 +1,6 @@
 <template>
   <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
+    :color-scheme="colorScheme"
     :spacing="spacing"
     :class="
       cn(
@@ -24,12 +24,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="themedClass('pretitleClass')"
+          :pretitle-class="themedClass('pretitleClass')"
           :title="title"
-          :titleClass="themedClass('titleClass', 'mb-0')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :title-class="themedClass('titleClass', 'mb-0')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
       <div
@@ -46,12 +46,12 @@
       >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
-          :subtitleClass="themedClass('subtitleClass')"
+          :subtitle-class="themedClass('subtitleClass')"
           :text="text"
-          :textClass="themedClass('textClass')"
-          :titleWeight="titleWeight"
-          :titleStyle="titleStyle"
-          :colorScheme="colorScheme"
+          :text-class="themedClass('textClass')"
+          :title-weight="titleWeight"
+          :title-style="titleStyle"
+          :color-scheme="colorScheme"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -68,8 +68,8 @@
       "
     >
       <component
-        v-for="(teaser, index) in teasers"
         :is="teaserComponent(teaser?.__typename)"
+        v-for="(teaser, index) in teasers"
         :key="teaser?.__typename + '-' + teaserVariant + '-' + index"
         v-bind="teaser"
       />
@@ -87,12 +87,11 @@
     >
       <div :class="themedClass('carouselContainer', 'relative col-span-12')">
         <UCarousel
-          v-model="carouselIndex"
           :items="teasers || []"
           :arrows="(teasers?.length || 0) > sliderColumns"
           :watch-drag="(teasers?.length || 0) > sliderColumns"
-          nextIcon="i-lucide-chevron-right"
-          prevIcon="i-lucide-chevron-left"
+          next-icon="i-lucide-chevron-right"
+          prev-icon="i-lucide-chevron-left"
           :ui="{
             viewport: themedClass('carouselViewport'),
             item: sliderItemClass,
@@ -173,8 +172,6 @@ const alignmentClassList = computed(() => {
   return classList.join(' ')
 })
 
-const carouselIndex = ref(0)
-
 const viewport = useViewport()
 
 const sliderItemClass = computed(() => {

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

@@ -12,27 +12,27 @@
   >
     <DesignSystemOrganismsTestimonial
       :title="title"
-      :titleWeight="titleWeight"
+      :title-weight="titleWeight"
       :text="text"
       :image="image"
-      :firstName="firstName"
-      :lastName="lastName"
+      :first-name="firstName"
+      :last-name="lastName"
       :position="position"
       :logo="logo"
-      :colorScheme="colorScheme"
-      :containerClass="themedClass('containerClass')"
-      :titleClass="themedClass('titleClass')"
-      :textClass="themedClass('textClass')"
-      :mediaClass="themedClass('mediaClass')"
-      :figcaptionClass="themedClass('figcaptionClass')"
-      :elementClass="themedClass('elementClass')"
-      :authorContainerClass="themedClass('authorContainerClass')"
-      :authorNameContainerClass="themedClass('authorNameContainerClass')"
-      :authorNameClass="themedClass('authorNameClass')"
-      :authorPositionClass="themedClass('authorPositionClass')"
-      :logoMediaClass="themedClass('logoMediaClass')"
-      :logoFigcaptionClass="themedClass('logoFigcaptionClass')"
-      :logoElementClass="themedClass('logoElementClass')"
+      :color-scheme="colorScheme"
+      :container-class="themedClass('containerClass')"
+      :title-class="themedClass('titleClass')"
+      :text-class="themedClass('textClass')"
+      :media-class="themedClass('mediaClass')"
+      :figcaption-class="themedClass('figcaptionClass')"
+      :element-class="themedClass('elementClass')"
+      :author-container-class="themedClass('authorContainerClass')"
+      :author-name-container-class="themedClass('authorNameContainerClass')"
+      :author-name-class="themedClass('authorNameClass')"
+      :author-position-class="themedClass('authorPositionClass')"
+      :logo-media-class="themedClass('logoMediaClass')"
+      :logo-figcaption-class="themedClass('logoFigcaptionClass')"
+      :logo-element-class="themedClass('logoElementClass')"
     />
   </div>
 </template>
@@ -40,13 +40,14 @@
 <script lang="ts" setup>
 import type { ParagraphIcmsTestimonialElementFragment } from '#graphql-operations'
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { DefineBlokkliContext } from '#blokkli/types'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
 defineProps<ParagraphIcmsTestimonialElementFragment>()
 
 const themedClass = useTheme('ParagraphTestimonialElement')
 
-const { isEditing } = useAttrs().blokkliData
+const { isEditing } = useAttrs().blokkliData as DefineBlokkliContext
 
 const colorScheme = inject<ColorScheme>('colorScheme')
 const titleWeight = inject<string>('titleWeight')