@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/components/FSCard.vue

@@ -34,11 +34,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -73,7 +71,7 @@ export default defineComponent({
       default: "8px"
     },
     variant: {
-      type: String as PropType<"background" | "standard" | "gradient">,
+      type: String as PropType<"background" | "standard" | "full" | "gradient">,
       required: false,
       default: "background"
     },
@@ -117,8 +115,19 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
+        case "background": return {
+          "--fs-card-border-size"     : props.border ? "1px" : "0",
+          "--fs-card-border-style"    : props.borderStyle,
+          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+          "--fs-card-padding"         : sizeToVar(props.padding),
+          "--fs-card-height"          : sizeToVar(props.height),
+          "--fs-card-width"           : sizeToVar(props.width),
+          "--fs-card-background-color": backgrounds.base,
+          "--fs-card-border-color"    : lights.dark,
+          "--fs-card-color"           : darks.base
+        }
         case "standard": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
           "--fs-card-border-style"    : props.borderStyle,
@@ -127,19 +136,19 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": colors.value.light,
-          "--fs-card-border-color"    : colors.value.lightContrast,
-          "--fs-card-color"           : colors.value.lightContrast
+          "--fs-card-border-color"    : colors.value.lightContrast!,
+          "--fs-card-color"           : colors.value.lightContrast!
         }
-        case "background": return {
+        case "full": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
           "--fs-card-border-style"    : props.borderStyle,
           "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
           "--fs-card-padding"         : sizeToVar(props.padding),
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-background-color": backgrounds.base,
-          "--fs-card-border-color"    : lights.dark,
-          "--fs-card-color"           : darks.base
+          "--fs-card-background-color": colors.value.base,
+          "--fs-card-border-color"    : colors.value.base,
+          "--fs-card-color"           : colors.value.baseContrast!
         }
         case "gradient": return {
           "--fs-card-border-size"     : props.border ? "1px" : "0",
@@ -149,19 +158,23 @@ export default defineComponent({
           "--fs-card-height"          : sizeToVar(props.height),
           "--fs-card-width"           : sizeToVar(props.width),
           "--fs-card-background-color": gradients.value.base,
-          "--fs-card-border-color"    : colors.value.lightContrast,
-          "--fs-card-color"           : colors.value.lightContrast
+          "--fs-card-border-color"    : colors.value.lightContrast!,
+          "--fs-card-color"           : colors.value.lightContrast!
         }
       }
     });
 
     const classes = computed((): string[] => {
-      const classNames = ["fs-card", "fs-background"];
+      const classNames = ["fs-card"];
       switch(props.variant) {
         case "gradient": 
           classNames.push("fs-card-gradient"); 
           break;
-        default: 
+        case "background":
+          classNames.push("fs-card-background");
+          classNames.push("fs-card-clickable");
+          break;
+        default:
           classNames.push("fs-card-background");
           break;
       }

package/components/FSCardPlaceholder.vue

@@ -30,8 +30,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import { ColorEnum } from "../models";
 

package/components/FSCheckbox.vue

@@ -49,7 +49,7 @@
       <FSSpan
         v-if="$props.description"
         class="fs-checkbox-description"
-        font="text-underline"
+        font="text-overline"
         :style="style"
       >
         {{ $props.description }}
@@ -59,12 +59,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
@@ -131,7 +129,7 @@ export default defineComponent({
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-checkbox-cursor"        : "default",
@@ -155,7 +153,7 @@ export default defineComponent({
 
     const icon = computed((): string => props.modelValue ? "mdi-checkbox-marked" : props.indeterminate ? "mdi-minus-box" : "mdi-checkbox-blank-outline");
 
-    const font = computed((): string => props.modelValue ? "text-button" : "text-body");
+    const font = computed((): "text-button" | "text-body" => props.modelValue ? "text-button" : "text-body");
 
     const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, props.rules));
 

package/components/FSChip.vue

@@ -44,11 +44,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -107,7 +105,7 @@ export default defineComponent({
     const backgrounds = getColors(ColorEnum.Background);
     const darks = getColors(ColorEnum.Dark);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       switch (props.variant) {
         case "standard": return {
           "--fs-chip-height"                 : sizeToVar(props.height),
@@ -125,13 +123,13 @@ export default defineComponent({
           "--fs-chip-height"                 : sizeToVar(props.height),
           "--fs-chip-background-color"       : colors.value.base,
           "--fs-chip-border-color"           : colors.value.base,
-          "--fs-chip-color"                  : colors.value.baseContrast,
+          "--fs-chip-color"                  : colors.value.baseContrast!,
           "--fs-chip-hover-background-color" : colors.value.base,
           "--fs-chip-hover-border-color"     : colors.value.base,
-          "--fs-chip-hover-color"            : colors.value.baseContrast,
+          "--fs-chip-hover-color"            : colors.value.baseContrast!,
           "--fs-chip-active-background-color": colors.value.dark,
-          "--fs-chip-active-border-color"    : colors.value.darkContrast,
-          "--fs-chip-active-color"           : colors.value.darkContrast
+          "--fs-chip-active-border-color"    : colors.value.darkContrast!,
+          "--fs-chip-active-color"           : colors.value.darkContrast!
         };
         case "borderless": return {
           "--fs-chip-height"                 : sizeToVar(props.height),
@@ -157,9 +155,9 @@ export default defineComponent({
     });
 
     return {
+      classes,
       colors,
-      style,
-      classes
+      style
     };
   }
 });

package/components/FSClickable.vue

@@ -3,18 +3,19 @@
     v-if="$props.href"
     :href="$props.href"
     :style="style"
+    :class="$props.class"
     @mouseover="hover = true"
     @mouseleave="hover = false"
     @mousedown="active = true"
     @mouseup="active = false"
   >
     <FSCard
+      height="100%"
+      width="100%"
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
-      :height="$props.height"
-      :width="$props.width"
+      :padding="$props.padding"
       :class="classes"
-      :style="style"
       v-bind="$attrs"
     >
       <template
@@ -43,18 +44,19 @@
     v-else-if="$props.to"
     :style="style"
     :to="$props.to"
+    :class="$props.class"
     @mouseover="hover = true"
     @mouseleave="hover = false"
     @mousedown="active = true"
     @mouseup="active = false"
   >
     <FSCard
+      height="100%"
+      width="100%"
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
-      :height="$props.height"
-      :width="$props.width"
+      :padding="$props.padding"
       :class="classes"
-      :style="style"
       v-bind="$attrs"
     >
       <template
@@ -83,6 +85,7 @@
     v-else
     :type="$props.type"
     :style="style"
+    :class="$props.class"
     @click.stop="onClick"
     @mouseover="hover = true"
     @mouseleave="hover = false"
@@ -90,12 +93,12 @@
     @mouseup="active = false"
   >
     <FSCard
+      height="100%"
+      width="100%"
       :borderRadius="$props.borderRadius"
       :borderStyle="$props.borderStyle"
-      :height="$props.height"
-      :width="$props.width"
+      :padding="$props.padding"
       :class="classes"
-      :style="style"
       v-bind="$attrs"
     >
       <template
@@ -112,6 +115,7 @@
       v-if="$props.load"
     >
       <v-progress-circular
+        :class="$props.class"
         class="fs-clickable-load"
         width="2"
         size="24"
@@ -123,12 +127,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
-import type { RouteLocation } from "vue-router";
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -150,6 +152,16 @@ export default defineComponent({
       required: false,
       default: null
     },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "0"
+    },
+    class: {
+      type: [String, Array] as PropType<string | string[] | null>,
+      required: false,
+      default: null
+    },
     to: {
       type: [String, Object] as PropType<string | RouteLocation | null>,
       required: false,
@@ -213,7 +225,7 @@ export default defineComponent({
     const hover = ref(false);
     const active = ref(false);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-clickable-border-size"     : props.border ? "1px" : "0",
@@ -229,41 +241,39 @@ export default defineComponent({
       switch (props.variant) {
         case "standard":
           switch (props.color) {
-            case ColorEnum.Dark:
-            case ColorEnum.Light:
-              return {
-                "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-                "--fs-clickable-border-style"           : props.borderStyle,
-                "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-                "--fs-clickable-background-color"       : backgrounds.base,
-                "--fs-clickable-border-color"           : lights.dark,
-                "--fs-clickable-color"                  : lights.lightContrast,
-                "--fs-clickable-hover-background-color" : lights.base,
-                "--fs-clickable-hover-border-color"     : lights.dark,
-                "--fs-clickable-hover-color"            : lights.baseContrast,
-                "--fs-clickable-active-background-color": lights.dark,
-                "--fs-clickable-active-border-color"    : lights.dark,
-                "--fs-clickable-active-color"           : lights.darkContrast,
-                "--fs-clickable-height"                 : sizeToVar(props.height),
-                "--fs-clickable-width"                  : sizeToVar(props.width)
-              };
-            default:
-              return {
-                "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-                "--fs-clickable-border-style"           : props.borderStyle,
-                "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-                "--fs-clickable-background-color"       : colors.value.light,
-                "--fs-clickable-border-color"           : colors.value.lightContrast,
-                "--fs-clickable-color"                  : colors.value.lightContrast,
-                "--fs-clickable-hover-background-color" : colors.value.base,
-                "--fs-clickable-hover-border-color"     : colors.value.base,
-                "--fs-clickable-hover-color"            : colors.value.baseContrast,
-                "--fs-clickable-active-background-color": colors.value.dark,
-                "--fs-clickable-active-border-color"    : colors.value.darkContrast,
-                "--fs-clickable-active-color"           : colors.value.darkContrast,
-                "--fs-clickable-height"                 : sizeToVar(props.height),
-                "--fs-clickable-width"                  : sizeToVar(props.width)
-              };
+            case ColorEnum.Dark :
+            case ColorEnum.Light: return {
+              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+              "--fs-clickable-border-style"           : props.borderStyle,
+              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+              "--fs-clickable-background-color"       : backgrounds.base,
+              "--fs-clickable-border-color"           : lights.dark,
+              "--fs-clickable-color"                  : lights.lightContrast!,
+              "--fs-clickable-hover-background-color" : lights.base,
+              "--fs-clickable-hover-border-color"     : lights.dark,
+              "--fs-clickable-hover-color"            : lights.baseContrast!,
+              "--fs-clickable-active-background-color": lights.dark,
+              "--fs-clickable-active-border-color"    : lights.dark,
+              "--fs-clickable-active-color"           : lights.darkContrast!,
+              "--fs-clickable-height"                 : sizeToVar(props.height),
+              "--fs-clickable-width"                  : sizeToVar(props.width)
+            };
+            default: return {
+              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
+              "--fs-clickable-border-style"           : props.borderStyle,
+              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
+              "--fs-clickable-background-color"       : colors.value.light,
+              "--fs-clickable-border-color"           : colors.value.lightContrast!,
+              "--fs-clickable-color"                  : colors.value.lightContrast!,
+              "--fs-clickable-hover-background-color" : colors.value.base,
+              "--fs-clickable-hover-border-color"     : colors.value.base,
+              "--fs-clickable-hover-color"            : colors.value.baseContrast!,
+              "--fs-clickable-active-background-color": colors.value.dark,
+              "--fs-clickable-active-border-color"    : colors.value.darkContrast!,
+              "--fs-clickable-active-color"           : colors.value.darkContrast!,
+              "--fs-clickable-height"                 : sizeToVar(props.height),
+              "--fs-clickable-width"                  : sizeToVar(props.width)
+            };
           }
         case "background": return {
           "--fs-clickable-border-size"            : props.border ? "1px" : "0",
@@ -273,11 +283,11 @@ export default defineComponent({
           "--fs-clickable-border-color"           : lights.dark,
           "--fs-clickable-color"                  : darks.base,
           "--fs-clickable-hover-background-color" : colors.value.base,
-          "--fs-clickable-hover-border-color"     : colors.value.baseContrast,
-          "--fs-clickable-hover-color"            : colors.value.baseContrast,
+          "--fs-clickable-hover-border-color"     : colors.value.baseContrast!,
+          "--fs-clickable-hover-color"            : colors.value.baseContrast!,
           "--fs-clickable-active-background-color": colors.value.dark,
-          "--fs-clickable-active-border-color"    : colors.value.darkContrast,
-          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-active-border-color"    : colors.value.darkContrast!,
+          "--fs-clickable-active-color"           : colors.value.darkContrast!,
           "--fs-clickable-height"                 : sizeToVar(props.height),
           "--fs-clickable-width"                  : sizeToVar(props.width)
         };
@@ -287,13 +297,13 @@ export default defineComponent({
           "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
           "--fs-clickable-background-color"       : colors.value.base,
           "--fs-clickable-border-color"           : colors.value.base,
-          "--fs-clickable-color"                  : colors.value.baseContrast,
+          "--fs-clickable-color"                  : colors.value.baseContrast!,
           "--fs-clickable-hover-background-color" : colors.value.base,
           "--fs-clickable-hover-border-color"     : colors.value.base,
-          "--fs-clickable-hover-color"            : colors.value.baseContrast,
+          "--fs-clickable-hover-color"            : colors.value.baseContrast!,
           "--fs-clickable-active-background-color": colors.value.dark,
           "--fs-clickable-active-border-color"    : colors.value.dark,
-          "--fs-clickable-active-color"           : colors.value.darkContrast,
+          "--fs-clickable-active-color"           : colors.value.darkContrast!,
           "--fs-clickable-height"                 : sizeToVar(props.height),
           "--fs-clickable-width"                  : sizeToVar(props.width)
         };

package/components/FSClock.vue

@@ -52,10 +52,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSSlider from "./FSSlider.vue";
@@ -98,7 +98,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToLongDateFormat } = useAppTimeZone();
+    const { epochToLongDateFormat } = useDateFormat();
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
@@ -109,7 +109,7 @@ export default defineComponent({
     const innerHours = ref(0);
     const innerMinutes = ref(0);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-clock-field-cursor"             : "default",

package/components/FSCol.vue

@@ -9,8 +9,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
@@ -49,7 +48,7 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const style = computed((): { [key: string] : string | null | undefined } => ({
+    const style = computed((): StyleValue => ({
       "--fs-col-overflow": props.overflow,
       "--fs-col-padding" : sizeToVar(props.padding),
       "--fs-col-gap"     : sizeToVar(props.gap),

package/components/FSColor.vue

@@ -1,8 +1,8 @@
 <template>
   <FSCard
+    :variant="$props.variant"
     :border="$props.border"
-    :class="classes"
-    :style="style"
+    :color="$props.color"
     v-bind="$attrs"
   >
     <slot
@@ -12,11 +12,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSCard from "./FSCard.vue";
@@ -27,15 +25,20 @@ export default defineComponent({
     FSCard
   },
   props: {
-    border: {
-      type: Boolean,
+    variant: {
+      type: String as PropType<"standard" | "full">,
       required: false,
-      default: true
+      default: "standard"
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
+    },
+    border: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {
@@ -43,29 +46,8 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
-      return {
-        "--fs-color-background-color": colors.value.light,
-        "--fs-color-border-color"    : colors.value.lightContrast,
-        "--fs-color-color"           : colors.value.lightContrast,
-        "--fs-color-light"           : colors.value.light,
-        "--fs-color-base"            : colors.value.base,
-        "--fs-color-dark"            : colors.value.dark
-      };
-    });
-
-    const classes = computed((): string[] => {
-      const classNames = ["fs-color"];
-      if (props.border) {
-        classNames.push("fs-color-border");
-      }
-      return classNames;
-    });
-
     return {
-      classes,
-      colors,
-      style
+      colors
     };
   }
 });

package/components/FSColorIcon.vue

@@ -3,15 +3,15 @@
     class="fs-color-icon"
     :color="$props.color"
     :border="false"
-    :height="size"
-    :width="size"
+    :height="actualSize"
+    :width="actualSize"
   >
     <FSRow
       align="center-center"
     >
       <FSIcon
         :color="$props.color"
-        :size="$props.size"
+        :size="iconSize"
       >
         <slot />
       </FSIcon>
@@ -20,13 +20,13 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
 
+import { sizeToVar } from "../utils";
+
 import FSColor from "./FSColor.vue";
 import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
@@ -48,12 +48,17 @@ export default defineComponent({
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Dark
+    },
+    padding: {
+      type: [String, Number] as PropType<string | number>,
+      required: false,
+      default: "8px"
     }
   },
   setup(props) {
     const { isMobileSized } = useBreakpoints();
 
-    const size = computed((): string[] | number[] | string | number | null => {
+    const actualSize = computed((): string[] | number[] | string | number | null => {
       switch(props.size) {
         case "s": return isMobileSized.value ? "18px" : "20px";
         case "m": return isMobileSized.value ? "20px" : "26px";
@@ -62,8 +67,19 @@ export default defineComponent({
       }
     });
 
+    const iconSize = computed((): string => {
+      switch(props.size) {
+        case "s": 
+        case "m": 
+        case "l":
+          return props.size;
+        default: return `calc(${sizeToVar(props.size)} - ${sizeToVar(props.padding)})`;
+      }
+    });
+
     return {
-      size
+      actualSize,
+      iconSize
     };
   }
 });

package/components/FSDialog.vue

@@ -29,8 +29,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";