pgo-ui 1.0.78 → 1.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.0.78",
+  "version": "1.0.80",
   "description": "A Vue 3 component library with PGO design system",
   "private": false,
   "type": "module",

package/src/App.vue

@@ -58,7 +58,7 @@
         <!-- ACTIONS -->
         <template #actions>
           <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-700">
-            <HeroIcon name="bell" size="22" class="text-black" />
+            <HeroIcon name="bell" size="22" color="text-current" />
           </button>
 
           <button class="hidden md:block p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-700">
@@ -68,8 +68,8 @@
 
         <!-- APPEND -->
         <template #append>
-          <button class="px-3 py-1 rounded-md bg-gray-600 text-white hover:bg-gray-700 cursor-pointer">
-            <HeroIcon name="arrow-right-start-on-rectangle" size="22" />
+          <button class="p-2 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer">
+            <HeroIcon name="arrow-right-start-on-rectangle" size="22" color="text-current" />
           </button>
         </template>
 

package/src/components/pgo/AppBar.vue

@@ -17,7 +17,7 @@
       densityClass,
       collapseClass
     ]"
-    :style="[themeStyles, customStyle,]"
+    :style="[themeStyles, customStyle]"
   >
     <div
         :class="['w-full flex items-center justify-between', innerDirectionClass, dense ? 'h-12' : 'h-16']"
@@ -86,36 +86,48 @@
               </div>
             </div>
 
-            <!-- Font Size Accessibility -->
-            <div class="flex items-center">
-              <button
-                @click="onDecreaseFontScale"
-                :disabled="fontScaleAtMin"
-                class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
-                title="Decrease font size"
-              >
-                <span class="font-bold" style="font-size: 0.7rem;">A-</span>
-              </button>
-              <button
-                @click="onResetFontScale"
-                class="px-1 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer"
-                title="Reset font size"
-              >
-                <span style="font-size: 0.65rem;">{{ currentFontScale }}%</span>
+            <!-- Accessibility Menu -->
+            <div class="relative" ref="a11yMenuRef">
+              <button @click="toggleA11yMenu" class="p-2 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer">
+                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="7.5" r="1.5"/><path d="M8 11.5l4 1.333 4-1.333"/><path d="M12 12.833v1.5l-2 3"/><path d="M12 14.333l2 3"/></svg>
               </button>
-              <button
-                @click="onIncreaseFontScale"
-                :disabled="fontScaleAtMax"
-                class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
-                title="Increase font size"
+              <div
+                v-if="isA11yOpen"
+                :class="['absolute vts-mt-2 w-40 rounded shadow-lg z-50 p-3', overflowPositionClass]"
+                :style="{ backgroundColor: 'var(--vts-color-surfaceElevated)', borderColor: 'var(--vts-color-divider)' }"
               >
-                <span class="font-bold" style="font-size: 0.85rem;">A+</span>
-              </button>
+                <div class="text-xs opacity-60 mb-2">Font Size</div>
+                <div class="flex items-center justify-between">
+                  <button
+                    @click="onDecreaseFontScale"
+                    :disabled="fontScaleAtMin"
+                    class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                    title="Decrease font size"
+                  >
+                    <span class="font-bold" style="font-size: 0.7rem;">A-</span>
+                  </button>
+                  <button
+                    @click="onResetFontScale"
+                    class="px-1 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer"
+                    title="Reset font size"
+                  >
+                    <span style="font-size: 0.65rem;">{{ currentFontScale }}%</span>
+                  </button>
+                  <button
+                    @click="onIncreaseFontScale"
+                    :disabled="fontScaleAtMax"
+                    class="px-1.5 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
+                    title="Increase font size"
+                  >
+                    <span class="font-bold" style="font-size: 0.85rem;">A+</span>
+                  </button>
+                </div>
+              </div>
             </div>
 
             <!-- Language Selector -->
             <div class="relative" ref="langMenuRef">
-              <button @click="toggleLangMenu" class="px-2 py-1 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer">
+              <button @click="toggleLangMenu" class="p-2 rounded-md hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer">
                 <HeroIcon name="language" size="22" color="text-current" />
               </button>
               <div
@@ -225,6 +237,10 @@
   const currentFontScale = computed(() => globalFontScale.value)
   const fontScaleAtMin = computed(() => globalFontScale.value <= FONT_SCALE_STEPS[0])
   const fontScaleAtMax = computed(() => globalFontScale.value >= FONT_SCALE_STEPS[FONT_SCALE_STEPS.length - 1])
+
+  const isA11yOpen = ref(false)
+  const a11yMenuRef = ref<HTMLElement | null>(null)
+  const toggleA11yMenu = () => (isA11yOpen.value = !isA11yOpen.value)
   /* ---------------------------------------------
  * layout integration
  ----------------------------------------------*/
@@ -307,7 +323,7 @@
     selectedRtl ? 'hidden md:flex md:mr-6 md:space-x-4 items-center' : 'hidden md:flex md:ml-6 md:space-x-4 items-center'
   )
 
-  const actionsSpaceClass = computed(() => (selectedRtl ? 'space-x-2 space-x-reverse' : 'space-x-2'))
+  const actionsSpaceClass = computed(() => 'gap-2')
 
   const overflowPositionClass = computed(() => (selectedRtl ? 'left-0' : 'right-0'))
 
@@ -340,17 +356,13 @@
   }
 
   function onDocumentClick(e: MouseEvent) {
-    if (!isLangOpen.value) return
-    isLangOpen.value = false
-    // const root = langMenuRef.value
-    // const target = e.target as Node | null
-    // if (!root || !target) {
-    //   isLangOpen.value = false
-    //   return
-    // }
-    // if (!root.contains(target)) {
-    //   isLangOpen.value = false
-    // }
+    const target = e.target as Node | null
+    if (isLangOpen.value && langMenuRef.value && target && !langMenuRef.value.contains(target)) {
+      isLangOpen.value = false
+    }
+    if (isA11yOpen.value && a11yMenuRef.value && target && !a11yMenuRef.value.contains(target)) {
+      isA11yOpen.value = false
+    }
   }
 
 function getLangLabel(lang: string) {

package/src/components/pgo/DataTable copy 2.vue

@@ -206,7 +206,7 @@
                           cellText,
                           textAlign[header?.align ?? 'defaults'],
                         ]"
-                      >
+                      >   
                         <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
                           <div class="flex flex-wrap items-center gap-1">
                             <template

package/src/components/pgo/DataTable.vue

@@ -16,7 +16,7 @@
                 type="text"
                 :placeholder="searchPlaceholder"
                 :class="[
-                  'pl-10 pr-4 py-2 rounded-lg w-64 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0',
+                  'pl-10 pr-4 py-2 rounded-lg w-64 text-base transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0',
                   inputBorder
                 ]"
                 @input="debounceSearch"
@@ -44,7 +44,7 @@
         </div>
 
         <!-- Desktop Table View -->
-        <table :dir="dir" class="w-full caption-bottom text-sm hidden md:table" style="table-layout: fixed;">
+        <table :dir="dir" class="w-full caption-bottom text-base hidden md:table" style="table-layout: fixed;">
           <!-- Colgroup for consistent column widths -->
           <colgroup>
             <col v-if="selectable" style="width: 48px;" />
@@ -146,7 +146,7 @@
                   <svg class="w-12 h-12 text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                   </svg>
-                  <span class="text-sm text-gray-500">{{ noDataText }}</span>
+                  <span class="text-base text-gray-500">{{ noDataText }}</span>
                 </div>
               </td>
             </tr>
@@ -196,7 +196,7 @@
                       <!-- html -->
                       <div
                         v-if="header.displayType == 'html'" :class="[
-                          'text-sm truncate',
+                          'text-base truncate',
                           cellText,
                           textAlign[header?.align ?? 'defaults'],
                         ]" v-html="getCustomColumnData(header, item)"
@@ -205,22 +205,22 @@
                       <!-- Custom column -->
                       <div
                         v-else-if="header.displayType == 'custom'" :class="[
-                          'text-sm',
+                          'text-base truncate',
                           cellText,
                           textAlign[header?.align ?? 'defaults'],
                         ]"
                       >
                         <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
-                          <div class="flex flex-wrap items-center gap-1">fff
+                          <div class="flex flex-wrap items-center gap-1">
                             <template
                               v-for="(chip, idx) in getCustomColumnData(header, item).CopyTextBox"
                               :key="idx"
-                            >dda
+                            >
                               <CopyTextBox
                                 :text="chip.text"
                                 class="mr-1 "
                               />
- b
+
                             </template>
                           </div>
                         </template>
@@ -232,7 +232,7 @@
                         v-else-if="header.displayType == 'copyButton'"
                         :class="['align-middle leading-0', getColumnFont(lang)]"
                       >
-                      
+
                         <CopyTextBox
                           :text="getNestedValue(item, header.value)"
                           class="mr-1 "
@@ -276,7 +276,7 @@
                           v-bind="header.select"
                           @update:model-value="(value) => handleCellUpdate(item, header.value, value, index)"
                         />
-                        <div v-else :class="['text-sm', cellText]">
+                        <div v-else :class="['text-base', cellText]">
                           {{ formatCellValue(getNestedValue(item, header.value), header) }}
                         </div>
                       </div>
@@ -290,10 +290,10 @@
                           v-if="editMode && header.inlineEditable"
                           :value="getNestedValue(item, header.value)"
                           type="text"
-                          class="w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-2 focus:ring-primary"
+                          class="w-full px-2 py-1 text-base border rounded focus:outline-none focus:ring-2 focus:ring-primary"
                           @input="(e) => handleCellUpdate(item, header.value, e.target.value, index)"
                         >
-                        <div v-else :class="['text-sm', cellText]">
+                        <div v-else :class="['text-base', cellText]">
                           {{ formatCellValue(getNestedValue(item, header.value), header) }}
                         </div>
                       </div>
@@ -308,11 +308,54 @@
                           @view-file="emit('viewpdf', $event)"
                         />
                       </div>
+                      <!-- Nested List Display -->
+                      <div
+                        v-else-if="header.displayType == 'nestedList'"
+                        :class="['align-middle leading-normal', getColumnFont(lang)]"
+                      >
+                        <div
+                          v-for="(nestedItem, nIdx) in (getNestedValue(item, header.value) || [])"
+                          :key="nIdx"
+                          :class="[
+                            'py-1.5',
+                            nIdx > 0 ? 'border-t border-input-border' : ''
+                          ]"
+                        >
+                          <div
+                            v-for="col in header.nestedColumns"
+                            :key="col.key"
+                            class="flex items-center gap-2 py-0.5"
+                          >
+                            <span :class="['text-xs font-medium shrink-0 w-20', headerText]">
+                              {{ col.label?.[lang] || col.label?.en || col.key }}
+                            </span>
+                            <div class="flex-1 min-w-0">
+                              <!-- Chip -->
+                              <Chip
+                                v-if="col.displayType === 'chip' && col.chip?.[String(nestedItem[col.key])]"
+                                v-bind="col.chip[String(nestedItem[col.key])]"
+                                size="small"
+                              />
+                              <!-- HTML -->
+                              <div
+                                v-else-if="col.displayType === 'html'"
+                                :class="['text-sm', cellText]"
+                                v-html="nestedItem[col.key]"
+                              />
+                              <!-- Text (default) -->
+                              <span v-else :class="['text-sm', cellText]">
+                                {{ nestedItem[col.key] ?? '-' }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                        <span v-if="!getNestedValue(item, header.value)?.length" class="text-xs text-gray-400">-</span>
+                      </div>
 
                       <!-- Default Text Display -->
                       <bdi
                         v-else :class="[
-                          'text-sm',
+                          'text-base',
                           cellText,
                           textAlign[header.align ?? 'defaults'],
                           header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang),
@@ -351,7 +394,7 @@
               <svg class="w-12 h-12 text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
               </svg>
-              <span class="text-sm text-gray-500">{{ noDataText }}</span>
+              <span class="text-base text-gray-500">{{ noDataText }}</span>
             </div>
           </div>
 
@@ -398,8 +441,8 @@
                   :header="header"
                   :index="index"
                 >
-                  <div v-if="header.displayType == 'html'" :class="['text-sm', cellText]" v-html="getCustomColumnData(header, item)" />
-                  <div v-else-if="header.displayType == 'custom'" :class="['text-sm', cellText]">
+                  <div v-if="header.displayType == 'html'" :class="['text-base', cellText]" v-html="getCustomColumnData(header, item)" />
+                  <div v-else-if="header.displayType == 'custom'" :class="['text-base', cellText]">
                     <template v-if="getCustomColumnData(header, item)?.type === 'CopyTextBox'">
                       <div class="flex flex-wrap items-center gap-1 justify-end">
                         <CopyTextBox v-for="(chip, idx) in getCustomColumnData(header, item).CopyTextBox" :key="idx" v-bind="chip" />
@@ -420,7 +463,26 @@
                   <div v-else-if="header.displayType == 'docButton'" :class="['align-middle', getColumnFont(header.lang)]">
                     <FileDisplay :item="getNestedValue(item, header.value)" v-bind="header.docButton" @view-file="emit('viewpdf', $event)" />
                   </div>
-                  <bdi v-else :class="['text-sm', cellText, header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang)]">
+                  <div v-else-if="header.displayType === 'nestedList'" :class="['align-middle', getColumnFont(lang)]">
+                    <div
+                      v-for="(nestedItem, nIdx) in (getNestedValue(item, header.value) || [])"
+                      :key="nIdx"
+                      :class="['py-1.5', nIdx > 0 ? 'border-t border-input-border' : '']"
+                    >
+                      <div v-for="col in header.nestedColumns" :key="col.key" class="flex items-center gap-2 py-0.5">
+                        <span :class="['text-xs font-medium shrink-0 w-20', headerText]">
+                          {{ col.label?.[lang] || col.label?.en || col.key }}
+                        </span>
+                        <div class="flex-1 min-w-0">
+                          <Chip v-if="col.displayType === 'chip' && col.chip?.[String(nestedItem[col.key])]" v-bind="col.chip[String(nestedItem[col.key])]" size="small" />
+                          <div v-else-if="col.displayType === 'html'" :class="['text-sm', cellText]" v-html="nestedItem[col.key]" />
+                          <span v-else :class="['text-sm', cellText]">{{ nestedItem[col.key] ?? '-' }}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <span v-if="!getNestedValue(item, header.value)?.length" class="text-xs text-gray-400">-</span>
+                  </div>
+                  <bdi v-else :class="['text-base', cellText, header.displayType == 'englishText' || header.displayType == 'date' ? 'eng-font' : getColumnFont(lang)]">
                     {{ formatCellValue(getNestedValue(item, header.value), header) }}
                   </bdi>
                 </slot>
@@ -482,7 +544,7 @@
 
       title="Confirm Update"
     >
-      <p class="text-sm text-gray-600 mb-6">
+      <p class="text-base text-gray-600 mb-6">
         Are you sure you want to update <strong>{{ pendingUpdate.header }}</strong>
         from <strong>{{ pendingUpdate.oldValue }}</strong> to <strong>{{ pendingUpdate.newValue }}</strong>?
       </p>

package/src/components/pgo/HeroIcon.vue

@@ -16,7 +16,7 @@
     :height="sizePx"
     viewBox="0 0 24 24"
     fill="none"
-    stroke="currentColor"
+    :stroke="color"
     stroke-width="1.5"
     aria-hidden="true"
   >

package/src/components/pgo/Main.vue

@@ -2,7 +2,7 @@
   <main
     :class="['flex-1 w-full transition-padding duration-200', contentClass]"
     ref="el"
-    :style="style"
+    :style="[style, contentFontStyle]"
   >
     <slot />
   </main>
@@ -14,10 +14,12 @@ import { ref, computed, inject, watch, onMounted } from "vue";
 const layout = inject<any>("layout", null);
 const el = ref<HTMLElement | null>(null);
 
+const fontScaleMode = inject('fontScaleMode', ref('app'));
+const globalFontScale = inject('globalFontScale', ref(100));
+
 const contentClass = computed(() => "");
 
 const style = computed(() => {
-//   console.log("Layout in Main.vue horizontal:", layout?.horizontalOffset?.value);
   const top = layout?.topOffset?.value || 0;
   const bottom = layout?.bottomOffset?.value || 0;
   const { left, right } = layout?.horizontalOffset?.value || {
@@ -33,5 +35,25 @@ const style = computed(() => {
   };
 });
 
+const contentFontStyle = computed(() => {
+  if (fontScaleMode.value !== 'body' || globalFontScale.value === 100) return {};
+  return {
+    '--content-font-scale': globalFontScale.value / 100,
+    fontSize: `${globalFontScale.value}%`,
+  };
+});
+
 onMounted(() => {});
 </script>
+
+<style>
+/* Scale Tailwind text classes inside main when --content-font-scale is set.
+   Uses calc(original-rem * scale) so text scales without affecting layout (padding, width, etc.).
+   Specificity of `main .text-*` beats Tailwind's flat `.text-*`. */
+main .text-xs  { font-size: calc(0.75rem * var(--content-font-scale, 1)); }
+main .text-sm  { font-size: calc(0.875rem * var(--content-font-scale, 1)); }
+main .text-base { font-size: calc(1rem * var(--content-font-scale, 1)); }
+main .text-lg  { font-size: calc(1.125rem * var(--content-font-scale, 1)); }
+main .text-xl  { font-size: calc(1.25rem * var(--content-font-scale, 1)); }
+main .text-2xl { font-size: calc(1.5rem * var(--content-font-scale, 1)); }
+</style>

package/src/components/pgo/NavigationDrawer.vue

@@ -193,7 +193,7 @@ function isActive(item: any) {
     backgroundColor: 'var(--vts-color-surface)',
     color: 'var(--vts-color-text)',
     borderRight: '1px solid var(--vts-color-border)',
-    boxShadow: 'var(--vts-elevation-2)'
+    boxShadow: 'var(--vts-elevation-2)',
   }))
 
   const scrimThemeStyles = computed(() => ({

package/src/components/pgo/Pagination.vue

@@ -22,7 +22,7 @@
     </bdi>
 
     <div :class="['flex items-center gap-2 text-base font-medium', textColor]">
-      <bdi :class="language == 'dv' ? 'text-right faruma' : 'text-left'">{{ startItem }}-{{ endItem }} {{ t('pagination.of') }} {{ itemsLength }}</bdi>
+      <bdi :class="language == 'dv' ? 'text-right faruma' : 'text-left'">{{ startItem }}-{{ endItem }} {{  itemsPerPage <= 1 ? t('pagination.of') : '' }} {{ itemsPerPage <= 1 ? itemsLength : '' }}</bdi>
     </div>
 
     <!-- Pagination controls -->

package/src/components/pgo/base/Base.vue

@@ -20,7 +20,7 @@
         {{ selectedlabels ? selectedlabels ?? selectedlabels.label  : label }}
       </div>
       <!-- main -->
-      <div class="flex items-center w-full gap-2 overflow-hidden min-w-0">
+      <div class="flex items-center w-full gap-2 overflow-hidden min-w-0 text-base">
         <div v-if="$slots.prepend || prepend" class="shrink-0">
           <slot name="prepend">
             <HeroIcon :size="iconSizes[size]" :name="prepend" :type="iconType == 'outline' ? 'outline' : 'solid'" />
@@ -434,11 +434,17 @@ function onInput(val) {
   // m on mount
 onMounted(() => {
   // Capture the initial width of the container to prevent it from growing
-    nextTick(() => {
-      if (inputContainerRef.value) {
-        containerMaxWidth.value = inputContainerRef.value.offsetWidth + 'px'
-      }
-    })
+  // Use ResizeObserver to wait until the element actually has a width (avoids 0px on initial load)
+    if (inputContainerRef.value) {
+      const ro = new ResizeObserver((entries) => {
+        const width = entries[0]?.contentRect?.width
+        if (width > 0) {
+          containerMaxWidth.value = width + 'px'
+          ro.disconnect()
+        }
+      })
+      ro.observe(inputContainerRef.value)
+    }
   if (formContext) {
     formContext.register(uid, {
       rules: props.rules,

package/src/components/pgo/inputs/Select.vue

@@ -34,7 +34,7 @@
       <template #control="{ attrs, events }">
         <div
           :class="[
-            'flex-none items-center h-full gap-1 min-w-0 w-full overflow-hidden',
+            'flex items-center h-full gap-1 min-w-0 w-full overflow-hidden',
             shouldAutoHeight ? 'flex-wrap py-1 -my-1' : '',
           ]"
         >
@@ -128,7 +128,7 @@
           name="chevron-down"
           type="outline"
           size="16"
-          :class="['transition-transform duration-200', isOpen ? 'rotate-180' : '', 'text-input-border']"
+          :class="['transition-transform duration-200', isOpen ? 'rotate-180' : '',]"
         />
         <svg v-else-if="loading" class="animate-spin h-4 w-4 text-input-border" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>

package/src/index.js

@@ -17,8 +17,8 @@ import { drawerOpen } from './pgo-components/lib/drawerState.ts'
 import {globalRtl} from './pgo-components/lib/core/rtl/rtl.ts'
 import { setRtl } from './pgo-components/lib/core/rtl/setRtl.ts'
 
-import { globalFontScale } from './pgo-components/lib/core/fontSize/fontSize.ts'
-import { setFontScale, increaseFontScale, decreaseFontScale, resetFontScale } from './pgo-components/lib/core/fontSize/setFontScale.ts'
+import { globalFontScale, fontScaleMode } from './pgo-components/lib/core/fontSize/fontSize.ts'
+import { setFontScale, setFontScaleMode, increaseFontScale, decreaseFontScale, resetFontScale } from './pgo-components/lib/core/fontSize/setFontScale.ts'
 
 //components
 import {Button, Card, HeroIcon} from './components/pgo/index.ts' // for Global registration
@@ -31,7 +31,8 @@ export { globalRtl }
 export { setRtl }
 export { drawerOpen }
 export { globalFontScale }
-export { setFontScale, increaseFontScale, decreaseFontScale, resetFontScale }
+export { setFontScale, setFontScaleMode, increaseFontScale, decreaseFontScale, resetFontScale }
+export { fontScaleMode }
 // export { useSnackBar }
 export { _useTheme as useTheme }
 export { createThemePlugin } from './pgo-components/plugins/theme-plugin.js'
@@ -52,7 +53,9 @@ if (typeof window !== 'undefined') {
   window.__VTS_THEMES__ = Object.keys(themes)
 }
 
-// set font scale default
+// set font scale mode from env, then restore saved scale
+const scaleMode = import.meta.env.VITE_FONT_SCALE_MODE === 'body' ? 'body' : 'app'
+setFontScaleMode(scaleMode)
 const savedFontScale = localStorage.getItem('fontScaleSetting')
 if (savedFontScale !== null) {
   setFontScale(parseInt(savedFontScale))
@@ -82,6 +85,7 @@ export default {
     app.provide('setRtl', setRtl)
     app.provide('drawerOpen', drawerOpen)
     app.provide('globalFontScale', globalFontScale)
+    app.provide('fontScaleMode', fontScaleMode)
     app.provide('increaseFontScale', increaseFontScale)
     app.provide('decreaseFontScale', decreaseFontScale)
     app.provide('resetFontScale', resetFontScale)

package/src/pgo-components/lib/core/fontSize/fontSize.ts

@@ -1,3 +1,4 @@
 import { ref } from "vue"
 
 export const globalFontScale = ref(100)
+export const fontScaleMode = ref<'app' | 'body'>('app')

package/src/pgo-components/lib/core/fontSize/setFontScale.ts

@@ -1,13 +1,23 @@
-import { globalFontScale } from './fontSize.ts'
+import { globalFontScale, fontScaleMode } from './fontSize.ts'
 
 export const FONT_SCALE_STEPS = [85, 100, 115, 130, 145]
 const STORAGE_KEY = 'fontScaleSetting'
 
+export function setFontScaleMode(mode: 'app' | 'body') {
+    fontScaleMode.value = mode
+}
+
 export function setFontScale(percentage: number) {
     globalFontScale.value = percentage
     localStorage.setItem(STORAGE_KEY, String(percentage))
     if (typeof document !== 'undefined') {
-        document.documentElement.style.fontSize = `${percentage}%`
+        if (fontScaleMode.value === 'app') {
+            document.documentElement.style.fontSize = `${percentage}%`
+        } else {
+            // In body mode, don't touch root font-size.
+            // Main.vue uses a CSS custom property to scale text only.
+            document.documentElement.style.fontSize = ''
+        }
     }
 }
 

package/dist/Radio-CuaoA4ip.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./index-DXUeDVX5.js";
-export {
-  f as default
-};