@lightspeed/crane-api 2.3.2 → 2.3.3-rc.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Reactive, ComputedRef, Component, App, Ref } from 'vue';
+import { Reactive, ComputedRef, Component, App, Ref, CSSProperties, StyleValue } from 'vue';
 import { z } from 'zod';
 
 /**
@@ -388,9 +388,9 @@ declare const DescriptorSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"DIVIDER">;
@@ -465,9 +465,9 @@ declare const DescriptorSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -891,9 +891,9 @@ declare const CollectionDescriptorSchema: z.ZodObject<{
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>, z.ZodObject<{
                     type: z.ZodLiteral<"DIVIDER">;
@@ -968,9 +968,9 @@ declare const CollectionDescriptorSchema: z.ZodObject<{
                                 color: z.ZodOptional<z.ZodCustom<string, string>>;
                             }, z.core.$strict>>;
                             capitalization: z.ZodOptional<z.ZodEnum<{
+                                small: "small";
                                 none: "none";
                                 all: "all";
-                                small: "small";
                             }>>;
                         }, z.core.$strict>, z.ZodObject<{
                             type: z.ZodLiteral<"DIVIDER">;
@@ -1350,7 +1350,7 @@ interface CategorySelectorContent {
     hasCategories: boolean;
     /** Array of selected category IDs */
     categoryIds: Array<number>;
-    /** `true` if selector data exists */
+    /** `true` if there are categories to render */
     hasContent: boolean;
 }
 
@@ -1686,7 +1686,7 @@ interface InternalColor {
  *
  * @see {@link asStructuredColor}
  */
-declare class Color implements InternalColor {
+declare class Color$1 implements InternalColor {
     readonly type: "STRUCTURED_COLOR";
     readonly raw: string;
     readonly hex: string;
@@ -1710,7 +1710,7 @@ declare class Color implements InternalColor {
  * // structured?.type === 'STRUCTURED_COLOR'
  * ```
  */
-declare function asStructuredColor(color: Omit<InternalColor, 'type'> | undefined): Color | undefined;
+declare function asStructuredColor(color: Omit<InternalColor, 'type'> | undefined): Color$1 | undefined;
 /**
  * Solid color configuration.
  *
@@ -1718,7 +1718,7 @@ declare function asStructuredColor(color: Omit<InternalColor, 'type'> | undefine
  */
 interface SolidColor {
     /** The solid color value (StructuredColor post-resolution, or GlobalColor pre-resolution) */
-    color: Color | undefined;
+    color: Color$1 | undefined;
 }
 /**
  * Gradient color configuration.
@@ -1727,9 +1727,9 @@ interface SolidColor {
  */
 interface GradientColor {
     /** Gradient start color (StructuredColor post-resolution, or GlobalColor pre-resolution) */
-    fromColor: Color | undefined;
+    fromColor: Color$1 | undefined;
     /** Gradient end color (StructuredColor post-resolution, or GlobalColor pre-resolution) */
-    toColor: Color | undefined;
+    toColor: Color$1 | undefined;
 }
 interface SolidColorTransformed {
     color: InternalColor | undefined;
@@ -1830,9 +1830,9 @@ declare const LogoDesignEditorDefaultsSchema: z.ZodObject<{
         color: z.ZodOptional<z.ZodCustom<string, string>>;
     }, z.core.$strict>>;
     capitalization: z.ZodOptional<z.ZodEnum<{
+        small: "small";
         none: "none";
         all: "all";
-        small: "small";
     }>>;
 }, z.core.$strict>;
 declare const LogoDesignEditorSchema: z.ZodObject<{
@@ -1855,9 +1855,9 @@ declare const LogoDesignEditorSchema: z.ZodObject<{
             color: z.ZodOptional<z.ZodCustom<string, string>>;
         }, z.core.$strict>>;
         capitalization: z.ZodOptional<z.ZodEnum<{
+            small: "small";
             none: "none";
             all: "all";
-            small: "small";
         }>>;
     }, z.core.$strict>>;
 }, z.core.$strict>;
@@ -2150,7 +2150,7 @@ interface ProductSelectorContent {
     categories: CategoryListComponentItem[];
     /** Selected category ID (when using category selection) */
     categoryId?: number;
-    /** `true` if selector data exists */
+    /** `true` if there are products to render */
     hasContent: boolean;
 }
 
@@ -4466,9 +4466,9 @@ declare const DesignEditorDefaultsSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
         color: z.ZodOptional<z.ZodCustom<string, string>>;
     }, z.core.$strict>>;
     capitalization: z.ZodOptional<z.ZodEnum<{
+        small: "small";
         none: "none";
         all: "all";
-        small: "small";
     }>>;
 }, z.core.$strict>, z.ZodObject<{
     type: z.ZodLiteral<"DIVIDER">;
@@ -4543,9 +4543,9 @@ declare const DesignEditorDefaultsSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
                 color: z.ZodOptional<z.ZodCustom<string, string>>;
             }, z.core.$strict>>;
             capitalization: z.ZodOptional<z.ZodEnum<{
+                small: "small";
                 none: "none";
                 all: "all";
-                small: "small";
             }>>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"DIVIDER">;
@@ -4663,9 +4663,9 @@ declare const AccordionShowcaseItemSchema: z.ZodObject<{
             color: z.ZodOptional<z.ZodCustom<string, string>>;
         }, z.core.$strict>>;
         capitalization: z.ZodOptional<z.ZodEnum<{
+            small: "small";
             none: "none";
             all: "all";
-            small: "small";
         }>>;
     }, z.core.$strict>, z.ZodObject<{
         type: z.ZodLiteral<"DIVIDER">;
@@ -4749,9 +4749,9 @@ declare const AccordionShowcaseDesignEditorDefaultsSchema: z.ZodObject<{
                 color: z.ZodOptional<z.ZodCustom<string, string>>;
             }, z.core.$strict>>;
             capitalization: z.ZodOptional<z.ZodEnum<{
+                small: "small";
                 none: "none";
                 all: "all";
-                small: "small";
             }>>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"DIVIDER">;
@@ -4896,9 +4896,9 @@ declare const AccordionDesignItemSchema: z.ZodObject<{
                 color: z.ZodOptional<z.ZodCustom<string, string>>;
             }, z.core.$strict>>;
             capitalization: z.ZodOptional<z.ZodEnum<{
+                small: "small";
                 none: "none";
                 all: "all";
-                small: "small";
             }>>;
         }, z.core.$strict>>;
     }, z.core.$strict>, z.ZodObject<{
@@ -5059,9 +5059,9 @@ declare const AccordionDesignEditorSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>>;
         }, z.core.$strict>, z.ZodObject<{
@@ -5322,9 +5322,9 @@ declare const DesignEditorSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
             color: z.ZodOptional<z.ZodCustom<string, string>>;
         }, z.core.$strict>>;
         capitalization: z.ZodOptional<z.ZodEnum<{
+            small: "small";
             none: "none";
             all: "all";
-            small: "small";
         }>>;
     }, z.core.$strict>>;
 }, z.core.$strict>, z.ZodObject<{
@@ -5467,9 +5467,9 @@ declare const DesignEditorSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>>;
         }, z.core.$strict>, z.ZodObject<{
@@ -5644,9 +5644,9 @@ declare const DesignSettingsSchema: z.ZodRecord<z.ZodString, z.ZodDiscriminatedU
             color: z.ZodOptional<z.ZodCustom<string, string>>;
         }, z.core.$strict>>;
         capitalization: z.ZodOptional<z.ZodEnum<{
+            small: "small";
             none: "none";
             all: "all";
-            small: "small";
         }>>;
     }, z.core.$strict>>;
 }, z.core.$strict>, z.ZodObject<{
@@ -5789,9 +5789,9 @@ declare const DesignSettingsSchema: z.ZodRecord<z.ZodString, z.ZodDiscriminatedU
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>>;
         }, z.core.$strict>, z.ZodObject<{
@@ -5987,9 +5987,11 @@ interface TextDesignEditorDefaultsTransformed {
     readonly size?: TextSize | string;
     readonly bold?: boolean;
     readonly italic?: boolean;
+    readonly visible?: boolean;
 }
 interface ImageDesignEditorDefaultsTransformed {
     readonly overlay: OverlayTransformed;
+    readonly visible?: boolean;
 }
 interface ColorPickerDesignEditorDefaultsTransformed {
     readonly color?: InternalColor;
@@ -6014,6 +6016,7 @@ interface LogoDesignEditorDefaultsTransformed {
     readonly italic?: boolean;
     readonly spacing?: number;
     readonly capitalization?: CapitalizationType;
+    readonly visible?: boolean;
 }
 interface SelectboxDesignEditorDefaultsTransformed {
     readonly value?: string;
@@ -6059,6 +6062,23 @@ interface BackgroundTransformed {
     /** Gradient color configuration */
     gradient: GradientColorTransformed | undefined;
 }
+/**
+ * Options for `useBackgroundStyle` and `getBackgroundStyle` utils.
+ *
+ * @see {@link BackgroundDesignData}
+ */
+interface BackgroundStyleOptions {
+    /**
+     * Direction of the gradient
+     * @default 'to right'
+     */
+    direction?: 'to bottom' | 'to right' | 'to left' | 'to top' | string;
+    /**
+     * Fallback color if no background is defined
+     * @default ''
+     */
+    fallbackColor?: string;
+}
 
 /** Button fill style */
 type ButtonAppearance = 'solid-button' | 'outline-button' | 'text-link';
@@ -6076,7 +6096,7 @@ type ButtonStyle = 'round-corner' | 'rectangle' | 'pill';
  * @see {@link ButtonSize}
  * @see {@link ButtonStyle}
  */
-interface ButtonDesignData {
+interface ButtonDesignData$1 {
     /** Button fill style: 'solid-button', 'outline-button', or 'text-link' */
     appearance: ButtonAppearance | undefined;
     /** Font family name (resolved from global reference) */
@@ -6086,10 +6106,32 @@ interface ButtonDesignData {
     /** Button shape: 'round-corner', 'rectangle', or 'pill' */
     style: ButtonStyle | undefined;
     /** Button color */
-    color: Color | undefined;
+    color: Color$1 | undefined;
     /** `true` if button should be displayed */
     visible: boolean;
 }
+/**
+ * Size style configuration for a single button size.
+ *
+ * @see {@link UseButtonStylesOptions}
+ */
+interface ButtonSizeStyles {
+    fontSize: string;
+    padding: string;
+}
+/**
+ * Options for `useButtonStyles` helper composable.
+ *
+ * @see {@link ButtonDesignData}
+ * @see {@link ButtonSizeStyles}
+ */
+interface UseButtonStylesOptions {
+    /**
+     * Custom size styles for each button size.
+     * Override defaults for specific sizes or provide all three.
+     */
+    sizes?: Partial<Record<ButtonSize, ButtonSizeStyles>>;
+}
 
 type AccordionItem = z.infer<typeof AccordionDesignItemSchema>;
 type ShowcaseAccordionItem = z.infer<typeof AccordionShowcaseItemSchema>;
@@ -6189,7 +6231,7 @@ interface TextDesignData$1 {
     /** `true` if text should be italic */
     italic: boolean | undefined;
     /** Text color */
-    color: Color | undefined;
+    color: Color$1 | undefined;
     /** `true` if element should be displayed */
     visible: boolean;
 }
@@ -6205,6 +6247,33 @@ interface TextareaDesignData$1 extends TextDesignData$1 {
     /** Always 'pre-wrap' to preserve line breaks */
     readonly whiteSpace: string;
 }
+/**
+ * Options for `createTextStyle` helper utility.
+ *
+ * @see {@link TextDesignData}
+ */
+interface TextStyleOptions {
+    /**
+     * Default font family if not specified in design
+     * @default 'inherit'
+     */
+    defaultFont?: string;
+    /**
+     * Default font size in pixels if not specified in design
+     * @default 16
+     */
+    defaultSize?: number;
+    /**
+     * Default color if not specified in design
+     * @default '#000000'
+     */
+    defaultColor?: string;
+    /**
+     * Default font weight if not bold
+     * @default 'normal'
+     */
+    defaultWeight?: string;
+}
 
 /**
  * Return type for `useToggleElementDesign` composable.
@@ -6263,7 +6332,7 @@ interface LogoDesignData$1 {
     /** `true` if text should be italic */
     italic: boolean | undefined;
     /** Text/logo color */
-    color: Color | undefined;
+    color: Color$1 | undefined;
     /** `true` if logo should be displayed */
     visible: boolean | undefined;
     /** Letter spacing value */
@@ -6375,9 +6444,9 @@ declare const LayoutDesignOverrideSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
             color: z.ZodOptional<z.ZodCustom<string, string>>;
         }, z.core.$strict>>;
         capitalization: z.ZodOptional<z.ZodEnum<{
+            small: "small";
             none: "none";
             all: "all";
-            small: "small";
         }>>;
     }, z.core.$strict>>;
 }, z.core.$strict>, z.ZodObject<{
@@ -6595,9 +6664,9 @@ declare const LayoutSettingsSchema: z.ZodObject<{
                 color: z.ZodOptional<z.ZodCustom<string, string>>;
             }, z.core.$strict>>;
             capitalization: z.ZodOptional<z.ZodEnum<{
+                small: "small";
                 none: "none";
                 all: "all";
-                small: "small";
             }>>;
         }, z.core.$strict>>;
     }, z.core.$strict>, z.ZodObject<{
@@ -7300,9 +7369,9 @@ declare const ManifestSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>>;
         }, z.core.$strict>, z.ZodObject<{
@@ -7445,9 +7514,9 @@ declare const ManifestSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>>;
                 }, z.core.$strict>, z.ZodObject<{
@@ -7685,9 +7754,9 @@ declare const ManifestSchema: z.ZodObject<{
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>>;
             }, z.core.$strict>, z.ZodObject<{
@@ -8075,9 +8144,9 @@ declare const ManifestSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"DIVIDER">;
@@ -8152,9 +8221,9 @@ declare const ManifestSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -8580,9 +8649,9 @@ declare const ManifestSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -8657,9 +8726,9 @@ declare const ManifestSchema: z.ZodObject<{
                                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                                 }, z.core.$strict>>;
                                 capitalization: z.ZodOptional<z.ZodEnum<{
+                                    small: "small";
                                     none: "none";
                                     all: "all";
-                                    small: "small";
                                 }>>;
                             }, z.core.$strict>, z.ZodObject<{
                                 type: z.ZodLiteral<"DIVIDER">;
@@ -9027,9 +9096,9 @@ declare const ManifestSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -9104,9 +9173,9 @@ declare const ManifestSchema: z.ZodObject<{
                                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                                 }, z.core.$strict>>;
                                 capitalization: z.ZodOptional<z.ZodEnum<{
+                                    small: "small";
                                     none: "none";
                                     all: "all";
-                                    small: "small";
                                 }>>;
                             }, z.core.$strict>, z.ZodObject<{
                                 type: z.ZodLiteral<"DIVIDER">;
@@ -9479,9 +9548,9 @@ declare const ManifestSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -9556,9 +9625,9 @@ declare const ManifestSchema: z.ZodObject<{
                                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                                 }, z.core.$strict>>;
                                 capitalization: z.ZodOptional<z.ZodEnum<{
+                                    small: "small";
                                     none: "none";
                                     all: "all";
-                                    small: "small";
                                 }>>;
                             }, z.core.$strict>, z.ZodObject<{
                                 type: z.ZodLiteral<"DIVIDER">;
@@ -10252,9 +10321,9 @@ declare const ManifestSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>>;
         }, z.core.$strict>, z.ZodObject<{
@@ -10397,9 +10466,9 @@ declare const ManifestSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>>;
                 }, z.core.$strict>, z.ZodObject<{
@@ -10638,9 +10707,9 @@ declare const ManifestSchema: z.ZodObject<{
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>>;
             }, z.core.$strict>, z.ZodObject<{
@@ -11060,9 +11129,9 @@ declare const ManifestSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -11137,9 +11206,9 @@ declare const ManifestSchema: z.ZodObject<{
                                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                                 }, z.core.$strict>>;
                                 capitalization: z.ZodOptional<z.ZodEnum<{
+                                    small: "small";
                                     none: "none";
                                     all: "all";
-                                    small: "small";
                                 }>>;
                             }, z.core.$strict>, z.ZodObject<{
                                 type: z.ZodLiteral<"DIVIDER">;
@@ -11546,9 +11615,9 @@ declare const CustomSectionSchema: z.ZodObject<{
                 color: z.ZodOptional<z.ZodCustom<string, string>>;
             }, z.core.$strict>>;
             capitalization: z.ZodOptional<z.ZodEnum<{
+                small: "small";
                 none: "none";
                 all: "all";
-                small: "small";
             }>>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"DIVIDER">;
@@ -11623,9 +11692,9 @@ declare const CustomSectionSchema: z.ZodObject<{
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>, z.ZodObject<{
                     type: z.ZodLiteral<"DIVIDER">;
@@ -11997,9 +12066,9 @@ declare const SectionSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
                 color: z.ZodOptional<z.ZodCustom<string, string>>;
             }, z.core.$strict>>;
             capitalization: z.ZodOptional<z.ZodEnum<{
+                small: "small";
                 none: "none";
                 all: "all";
-                small: "small";
             }>>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"DIVIDER">;
@@ -12074,9 +12143,9 @@ declare const SectionSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>, z.ZodObject<{
                     type: z.ZodLiteral<"DIVIDER">;
@@ -12451,9 +12520,9 @@ declare const TemplatePageSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"DIVIDER">;
@@ -12528,9 +12597,9 @@ declare const TemplatePageSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -12906,9 +12975,9 @@ declare const TemplatePageNamedSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"DIVIDER">;
@@ -12983,9 +13052,9 @@ declare const TemplatePageNamedSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -13421,9 +13490,9 @@ declare const TemplateConfigurationSectionSchema: z.ZodDiscriminatedUnion<[z.Zod
                 color: z.ZodOptional<z.ZodCustom<string, string>>;
             }, z.core.$strict>>;
             capitalization: z.ZodOptional<z.ZodEnum<{
+                small: "small";
                 none: "none";
                 all: "all";
-                small: "small";
             }>>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"DIVIDER">;
@@ -13498,9 +13567,9 @@ declare const TemplateConfigurationSectionSchema: z.ZodDiscriminatedUnion<[z.Zod
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>, z.ZodObject<{
                     type: z.ZodLiteral<"DIVIDER">;
@@ -13925,9 +13994,9 @@ declare const TemplateConfigurationSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"DIVIDER">;
@@ -14002,9 +14071,9 @@ declare const TemplateConfigurationSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -14372,9 +14441,9 @@ declare const TemplateConfigurationSchema: z.ZodObject<{
                     color: z.ZodOptional<z.ZodCustom<string, string>>;
                 }, z.core.$strict>>;
                 capitalization: z.ZodOptional<z.ZodEnum<{
+                    small: "small";
                     none: "none";
                     all: "all";
-                    small: "small";
                 }>>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"DIVIDER">;
@@ -14449,9 +14518,9 @@ declare const TemplateConfigurationSchema: z.ZodObject<{
                             color: z.ZodOptional<z.ZodCustom<string, string>>;
                         }, z.core.$strict>>;
                         capitalization: z.ZodOptional<z.ZodEnum<{
+                            small: "small";
                             none: "none";
                             all: "all";
-                            small: "small";
                         }>>;
                     }, z.core.$strict>, z.ZodObject<{
                         type: z.ZodLiteral<"DIVIDER">;
@@ -14883,9 +14952,9 @@ declare const TemplateSchema: z.ZodObject<{
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>, z.ZodObject<{
                     type: z.ZodLiteral<"DIVIDER">;
@@ -14960,9 +15029,9 @@ declare const TemplateSchema: z.ZodObject<{
                                 color: z.ZodOptional<z.ZodCustom<string, string>>;
                             }, z.core.$strict>>;
                             capitalization: z.ZodOptional<z.ZodEnum<{
+                                small: "small";
                                 none: "none";
                                 all: "all";
-                                small: "small";
                             }>>;
                         }, z.core.$strict>, z.ZodObject<{
                             type: z.ZodLiteral<"DIVIDER">;
@@ -15330,9 +15399,9 @@ declare const TemplateSchema: z.ZodObject<{
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>, z.ZodObject<{
                     type: z.ZodLiteral<"DIVIDER">;
@@ -15407,9 +15476,9 @@ declare const TemplateSchema: z.ZodObject<{
                                 color: z.ZodOptional<z.ZodCustom<string, string>>;
                             }, z.core.$strict>>;
                             capitalization: z.ZodOptional<z.ZodEnum<{
+                                small: "small";
                                 none: "none";
                                 all: "all";
-                                small: "small";
                             }>>;
                         }, z.core.$strict>, z.ZodObject<{
                             type: z.ZodLiteral<"DIVIDER">;
@@ -15782,9 +15851,9 @@ declare const TemplateSchema: z.ZodObject<{
                         color: z.ZodOptional<z.ZodCustom<string, string>>;
                     }, z.core.$strict>>;
                     capitalization: z.ZodOptional<z.ZodEnum<{
+                        small: "small";
                         none: "none";
                         all: "all";
-                        small: "small";
                     }>>;
                 }, z.core.$strict>, z.ZodObject<{
                     type: z.ZodLiteral<"DIVIDER">;
@@ -15859,9 +15928,9 @@ declare const TemplateSchema: z.ZodObject<{
                                 color: z.ZodOptional<z.ZodCustom<string, string>>;
                             }, z.core.$strict>>;
                             capitalization: z.ZodOptional<z.ZodEnum<{
+                                small: "small";
                                 none: "none";
                                 all: "all";
-                                small: "small";
                             }>>;
                         }, z.core.$strict>, z.ZodObject<{
                             type: z.ZodLiteral<"DIVIDER">;
@@ -15948,6 +16017,17 @@ type TemplateConfiguration = z.infer<typeof TemplateConfigurationSchema>;
 
 type TranslationSettings = Record<string, Record<string, string>>;
 
+/**
+ * Return type for `useCurrentLanguage` composable.
+ */
+interface UseCurrentLanguageReturn {
+    /**
+     * Current language code (e.g., 'en', 'nl', 'fr').
+     * Falls back to main language, then to 'en' if no language is selected.
+     */
+    currentLanguage: ComputedRef<Language['code']>;
+}
+
 interface AppBaseContext {
     readonly appName: string;
     readonly blockName: string;
@@ -15982,72 +16062,6 @@ declare function createVueClientApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
-interface InstantsiteTilePromise {
-    add(callback: (id: string) => void): void;
-}
-interface InstantsiteJSAPI {
-    /**
-       * Retrieves the current site ID.
-       *
-       * @returns {number} The site ID.
-       */
-    getSiteId: () => number;
-    /**
-       * Retrieves the public token for a given app.
-       *
-       * @param {string} appId - The ID of the app.
-       * @returns {string | undefined} The app's public token, or `undefined` if not found.
-       */
-    getAppPublicToken: (appId: string) => string | undefined;
-    /**
-       * Retrieves the public configuration for a given app.
-       *
-       * @param {string} appId - The ID of the app.
-       * @returns {string | undefined} The app's public configuration, or `undefined` if not found.
-       */
-    getAppPublicConfig: (appId: string) => string | undefined;
-    /**
-       * An event that triggers when a tile is loaded.
-       *
-       * @type {InstantsiteTilePromise}
-       *
-       * @example
-       * ```ts
-       * const tileLoadedPromise = instantsiteJsApi?.onTileLoaded;
-       *
-       * tileLoadedPromise?.add((tileId) => {
-       *     console.log('Tile loaded:', tileId);
-       * });
-       * ```
-       */
-    onTileLoaded: InstantsiteTilePromise;
-    /**
-       * An event that triggers when a tile is unloaded.
-       *
-       * @type {InstantsiteTilePromise}
-       *
-       * @example
-       * ```ts
-       * const tileUnloadedPromise = instantsiteJsApi?.onTileUnloaded;
-       *
-       * tileUnloadedPromise?.add((tileId) => {
-       *     console.log('Tile unloaded:', tileId);
-       * });
-       * ```
-       */
-    onTileUnloaded: InstantsiteTilePromise;
-    /**
-       * Opens the search page with the specified keyword.
-       *
-       * @param {string | undefined} keyword - The keyword to search for.
-       * @returns {void}
-       */
-    openSearchPage: (keyword: string | undefined) => void;
-}
-
-/** Composable for Instantsite JS API. Returns `window.instantsite` for platform interaction. */
-declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
-
 declare function createLayoutApp<C, D>(component: Component): {
     component: Component;
     initState(app: App<Element>, content: C, design: D, defaults: Record<string, unknown>): void;
@@ -16055,11 +16069,11 @@ declare function createLayoutApp<C, D>(component: Component): {
 };
 
 interface GlobalColors {
-    title?: Color;
-    body?: Color;
-    button?: Color;
-    link?: Color;
-    background?: Color;
+    title?: Color$1;
+    body?: Color$1;
+    button?: Color$1;
+    link?: Color$1;
+    background?: Color$1;
 }
 interface GlobalFonts {
     title: string;
@@ -16120,6 +16134,302 @@ declare function createVueServerApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
+/**
+ * Color Utilities
+ *
+ * Utilities for working with Crane Color objects and color calculations.
+ * Includes hex extraction and contrast color calculation.
+ */
+/**
+ * Safely extracts hex color from a Color object or string
+ *
+ * Handles multiple input types:
+ * - Color object with hex property
+ * - String (returned as-is)
+ * - undefined/null (returns fallback)
+ *
+ * @param color - The color value (Color object, string, or undefined)
+ * @param fallback - Fallback color if extraction fails
+ * @returns Hex color string
+ *
+ * @example
+ * ```typescript
+ * // With Color object
+ * const hex = getColorHex(titleDesign.color, '#FFFFFF')
+ *
+ * // With string
+ * const hex = getColorHex('#FF0000', '#000000') // Returns '#FF0000'
+ *
+ * // With undefined
+ * const hex = getColorHex(undefined, '#000000') // Returns '#000000'
+ * ```
+ */
+declare function getColorHex(color: Color | string | undefined | null, fallback?: string): string;
+/**
+ * Returns true if background color is dark enough to require light text.
+ * Uses WCAG relative luminance formula for accurate contrast calculation.
+ *
+ * @param backgroundColor - Hex color string (e.g., '#FF0000')
+ * @returns `true` for dark colors, `false` for light colors
+ */
+declare function isColorDark(backgroundColor: string): boolean;
+/**
+ * Returns the best contrast text color for a given background.
+ *
+ * @param backgroundColorHex - Hex color string
+ * @param darkTextColorHex - Color used on light backgrounds
+ * @param lightTextColorHex - Color used on dark backgrounds
+ */
+declare function getContrastTextColor(backgroundColorHex: string, darkTextColorHex?: string, lightTextColorHex?: string): string;
+
+/**
+ * Text Style Utilities
+ *
+ * Utilities for creating CSS styles from Crane TextDesignData.
+ */
+
+/**
+ * Creates CSS properties from Crane TextDesignData
+ *
+ * Handles:
+ * - Font family
+ * - Font size (number to px conversion)
+ * - Color (Color object to hex)
+ * - Bold/Italic styles
+ * - Visibility (returns display: none if not visible)
+ *
+ * @param design - TextDesignData from useTextElementDesign
+ * @param options - Default values for missing design properties
+ * @returns CSS properties object for Vue style binding
+ *
+ * @example
+ * ```typescript
+ * import { createTextStyle } from '@lightspeed/crane-api'
+ * import { useTextElementDesign } from '@lightspeed/crane-api'
+ *
+ * const titleDesign = useTextElementDesign<Design>('title')
+ * const titleStyle = computed(() => createTextStyle(titleDesign, {
+ *   defaultFont: 'Inter',
+ *   defaultSize: 24,
+ *   defaultColor: '#333333',
+ * }))
+ *
+ * // In template:
+ * // <h1 :style="titleStyle">{{ title }}</h1>
+ * ```
+ */
+declare function createTextStyle(design: TextDesignData | undefined, options?: TextStyleOptions): CSSProperties;
+
+/**
+ * useBackgroundStyle Composable
+ *
+ * Creates reactive CSS background styles from Crane BackgroundDesignData.
+ * Supports solid colors and gradients.
+ *
+ * @example
+ * ```typescript
+ * import { useBackgroundStyle } from '@lightspeed/crane-api'
+ * import { useBackgroundElementDesign } from '@lightspeed/crane-api'
+ *
+ * const backgroundDesign = useBackgroundElementDesign<Design>('background')
+ * const backgroundStyle = useBackgroundStyle(backgroundDesign)
+ *
+ * // In template:
+ * // <div :style="backgroundStyle">...</div>
+ * ```
+ */
+
+/**
+ * Extracts background styles from BackgroundDesignData.
+ *
+ * Returns a style object suitable for CSS `:style` bindings.
+ *
+ * **Gradient fallback behaviour:**
+ * When `background.type === 'gradient'`, each of `fromColor` and `toColor` is resolved
+ * independently via `getColorHex`. If a color is missing/undefined and `fallbackColor` is
+ * an empty string (the default), `getColorHex` returns `''` and the whole style object is
+ * returned as `{}`. If `fallbackColor` is a non-empty string, the missing color is replaced
+ * by that fallback, which may result in a gradient where both stops are the same colour
+ * (e.g. `linear-gradient(to right, #FFFFFF, #FFFFFF)`). This is valid CSS and visually
+ * equivalent to a solid colour, but it is worth being aware of when debugging gradient output.
+ *
+ * @param backgroundDesign - BackgroundDesignData from useBackgroundElementDesign
+ * @param options - Configuration options
+ * @returns CSS background style object
+ *
+ * @example
+ * ```typescript
+ * const backgroundDesign = useBackgroundElementDesign<Design>('background')
+ * const bgStyle = getBackgroundStyle(backgroundDesign, { fallbackColor: '#FFFFFF' })
+ * // Returns: { backgroundColor: '#FF0000' } or { backgroundImage: 'linear-gradient(...)' }
+ * // If one gradient colour is missing and fallbackColor is '#FFFFFF':
+ * // Returns: { backgroundImage: 'linear-gradient(to right, #FFFFFF, #FFFFFF)' }
+ * ```
+ */
+declare function getBackgroundStyle(backgroundDesign: BackgroundDesignData | undefined, options?: BackgroundStyleOptions): StyleValue;
+/**
+ * Creates reactive background styles from Crane BackgroundDesignData
+ *
+ * Supports solid colors and gradients. Returns a computed style object
+ * that can be bound directly to :style attribute.
+ *
+ * @param backgroundDesign - Reactive BackgroundDesignData from useBackgroundElementDesign.
+ *   Must be a reactive object (not a plain snapshot) for changes to be tracked.
+ * @param options - Configuration options
+ * @returns Computed style object with backgroundColor or backgroundImage
+ *
+ * @example
+ * ```typescript
+ * const backgroundDesign = useBackgroundElementDesign<Design>('background')
+ * const backgroundStyle = useBackgroundStyle(backgroundDesign)
+ *
+ * // In template:
+ * // <div :style="backgroundStyle">...</div>
+ * ```
+ */
+declare function useBackgroundStyle(backgroundDesign: Reactive<BackgroundDesignData> | BackgroundDesignData | undefined, options?: BackgroundStyleOptions): ComputedRef<StyleValue>;
+
+/**
+ * useButtonStyles Composable
+ *
+ * Generates dynamic button styles based on Crane's ButtonDesignData.
+ * Handles size, appearance, shape, and automatic contrast text color.
+ *
+ * @example
+ * ```typescript
+ * import { useButtonStyles } from '@lightspeed/crane-api'
+ * import { useButtonElementDesign } from '@lightspeed/crane-api'
+ *
+ * const ctaButtonDesign = useButtonElementDesign<Design>('cta_button')
+ * const ctaButtonStyle = useButtonStyles(ctaButtonDesign)
+ *
+ * // In template:
+ * // <button :style="ctaButtonStyle">Click me</button>
+ * ```
+ */
+
+/**
+ * Generates dynamic button styles based on Crane's button design data
+ *
+ * Handles:
+ * - Size: 'small', 'medium', 'large' (configurable via options)
+ * - Appearance: 'solid-button', 'outline-button', 'text-link'
+ * - Style (shape): 'rectangle', 'round-corner', 'pill'
+ *
+ * @param buttonDesign - Reactive button design data from useButtonElementDesign.
+ *   Must be a reactive object (not a plain snapshot) for changes to be tracked.
+ * @param options - Optional configuration (e.g., custom size styles)
+ * @returns Computed style object for inline application
+ */
+declare function useButtonStyles(buttonDesign: Reactive<ButtonDesignData> | Partial<ButtonDesignData> | undefined, options?: UseButtonStylesOptions): ComputedRef<Record<string, string>>;
+
+/**
+ * useCurrentLanguage Composable
+ *
+ * Provides access to the current language from site context.
+ * Useful for i18n, API calls with language parameter, and conditional rendering.
+ *
+ * @example
+ * ```typescript
+ * import { useCurrentLanguage } from '@lightspeed/crane-api'
+ *
+ * const { currentLanguage } = useCurrentLanguage()
+ *
+ * // Use in API calls
+ * fetchProducts({ lang: currentLanguage.value })
+ *
+ * // Use in computed
+ * const greeting = computed(() =>
+ *   currentLanguage.value === 'fr' ? 'Bonjour' : 'Hello'
+ * )
+ * ```
+ */
+
+/**
+ * Get current selected language code from site languages.
+ *
+ * Fallback chain: selected language → main language → 'en'.
+ *
+ * @param languages - Array of available languages from site content (global Language type)
+ * @returns Current language code (e.g., 'en', 'nl', 'fr')
+ */
+declare function getCurrentLanguageCode(languages: Language[] | undefined): Language['code'];
+/**
+ * Composable to get current language from site context.
+ *
+ * Uses the global Language type from types.d.ts.
+ * Fallback chain: selected language → main language → 'en'.
+ *
+ * @returns Object containing currentLanguage computed ref
+ */
+declare function useCurrentLanguage(): UseCurrentLanguageReturn;
+
+interface InstantsiteTilePromise {
+    add(callback: (id: string) => void): void;
+}
+interface InstantsiteJSAPI {
+    /**
+       * Retrieves the current site ID.
+       *
+       * @returns {number} The site ID.
+       */
+    getSiteId: () => number;
+    /**
+       * Retrieves the public token for a given app.
+       *
+       * @param {string} appId - The ID of the app.
+       * @returns {string | undefined} The app's public token, or `undefined` if not found.
+       */
+    getAppPublicToken: (appId: string) => string | undefined;
+    /**
+       * Retrieves the public configuration for a given app.
+       *
+       * @param {string} appId - The ID of the app.
+       * @returns {string | undefined} The app's public configuration, or `undefined` if not found.
+       */
+    getAppPublicConfig: (appId: string) => string | undefined;
+    /**
+       * An event that triggers when a tile is loaded.
+       *
+       * @type {InstantsiteTilePromise}
+       *
+       * @example
+       * ```ts
+       * const tileLoadedPromise = instantsiteJsApi?.onTileLoaded;
+       *
+       * tileLoadedPromise?.add((tileId) => {
+       *     console.log('Tile loaded:', tileId);
+       * });
+       * ```
+       */
+    onTileLoaded: InstantsiteTilePromise;
+    /**
+       * An event that triggers when a tile is unloaded.
+       *
+       * @type {InstantsiteTilePromise}
+       *
+       * @example
+       * ```ts
+       * const tileUnloadedPromise = instantsiteJsApi?.onTileUnloaded;
+       *
+       * tileUnloadedPromise?.add((tileId) => {
+       *     console.log('Tile unloaded:', tileId);
+       * });
+       * ```
+       */
+    onTileUnloaded: InstantsiteTilePromise;
+    /**
+       * Opens the search page with the specified keyword.
+       *
+       * @param {string | undefined} keyword - The keyword to search for.
+       * @returns {void}
+       */
+    openSearchPage: (keyword: string | undefined) => void;
+}
+
+/** Composable for Instantsite JS API. Returns `window.instantsite` for platform interaction. */
+declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
+
 /**
  * Composable for accessing BUTTON content with action link.
  *
@@ -16178,7 +16488,7 @@ declare function useButtonElementContent<CONTENT>(elementName: string, externalC
  * @returns `Reactive<CategorySelector>` — reactive object with:
  * - `categories: ComputedRef<CategoryListComponentItem[]>` — array of category objects with `id`, `name`, `url`, `imageUrl`, etc.
  * - `categoryIds: ComputedRef<Array<number>>` — array of selected category IDs
- * - `hasContent: ComputedRef<boolean>` — `true` if selector data exists
+ * - `hasContent: ComputedRef<boolean>` — `true` if there are categories to render
  * - `hasCategories: ComputedRef<boolean>` — `true` if at least one category is selected
  *
  * @see {@link CategorySelectorContent}
@@ -16404,7 +16714,7 @@ declare function useNavigationMenuElementContent<CONTENT>(): {
  * - `products: ComputedRef<ProductListComponentItem[]>` — array of product objects with `id`, `name`, `price`, `imageUrl`, etc.
  * - `categories: ComputedRef<CategoryListComponentItem[]>` — array of categories (when using category selection)
  * - `categoryId: ComputedRef<number>` — selected category ID (when using category selection)
- * - `hasContent: ComputedRef<boolean>` — `true` if selector data exists
+ * - `hasContent: ComputedRef<boolean>` — `true` if there are products to render
  * - `hasProducts: ComputedRef<boolean>` — `true` if at least one product is selected
  *
  * @see {@link ProductSelectorContent}
@@ -16691,7 +17001,7 @@ declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN):
  * </button>
  * ```
  */
-declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<ButtonDesignData>;
+declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<ButtonDesignData$1>;
 
 /**
  * Composable for accessing IMAGE design settings.
@@ -17761,5 +18071,5 @@ declare const translation: {
     readonly init: (config: TranslationSettings) => TranslationSettings;
 };
 
-export { ActionLinkTypeEnum, BackgroundStyleEnum, ButtonAppearanceEnum, ButtonShapeEnum, ButtonSizeEnum, ButtonTypeEnum, CatalogLayoutSlot, CategoryLayoutSlot, Color, ConfigTypeEnum, DesignEditorType, EditorTypes, ImageSet, InstantsiteJsEvent, LogoTypeEnum, OverlayType, OverlayTypeEnum, PluginTypeEnum, ProductLayoutSlot, SectionTypeEnum, TemplateCategoriesList, ValidationTypeEnum, asStructuredColor, collection, content, createLayoutApp, createVueClientApp, createVueServerApp, design, layout, section, showcase, template, translation, useAccordionElementDesign, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useCategorySelectorElementContent, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useProductSelectorElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useTranslation, useVueBaseProps };
-export type { AccordionDesignData, AccordionDesignEditor, AccordionDesignEditorDefaults, AccordionDesignItemData, AccordionItem, AccordionShowcaseDesignEditorDefaults, ActionLink, AppBaseContext, AppBaseData, AppBaseState, Background, BackgroundDesignData$1 as BackgroundDesignData, BackgroundDesignEditor, BackgroundDesignEditorDefaults, BackgroundDesignEditorDefaultsTransformed, BackgroundTransformed, BackgroundType, ButtonAppearance, ButtonContentData, ButtonContentEditor, ButtonContentEditorDefaults, ButtonDesignData, ButtonDesignEditor, ButtonDesignEditorDefaults, ButtonDesignEditorDefaultsTransformed, ButtonSize, ButtonStyle, CapitalizationType, Card, CategorySelectorContent, CategorySelectorContentEditor, CategorySelectorContentEditorDefaults, CategorySelectorData, CollectionDescriptor, CollectionDescriptorContent, CollectionDescriptorMetadata, ColorPickerDesignEditor, ColorPickerDesignEditorDefaults, ColorPickerDesignEditorDefaultsTransformed, ContentEditor, ContentEditorDefaults, ContentSettings, CustomSection, Deck, DeckContent, DeckContentEditor, DefaultSection, DesignEditor, DesignEditorDefaults, DesignEditorDefaultsTransformed, DesignSettings, DividerContentEditor, DividerContentEditorDefaults, DividerDesignEditor, Font, Frame, GlobalColorsString, GlobalDesign$1 as GlobalDesign, GlobalFontsString, GlobalTextSizeString, GradientColor, GradientColorTransformed, HSLColor, ImageBorderInfoData, ImageContent, ImageContentData, ImageContentEditor, ImageContentEditorDefaults, ImageDesignData$1 as ImageDesignData, ImageDesignEditor, ImageDesignEditorDefaults, ImageDesignEditorDefaultsTransformed, ImageInfoData, InfoContentEditor, InfoContentEditorDefaults, InfoDesignEditor, InfoDesignEditorDefaults, InputBoxContent, InputboxContentEditor, InputboxContentEditorDefaults, InstantsiteJSAPI$1 as InstantsiteJSAPI, InstantsiteTilePromise$1 as InstantsiteTilePromise, InternalColor, LayoutDesignData, LayoutDesignOverride, LayoutSettings, LogoContent, LogoContentData, LogoContentEditor, LogoContentEditorDefaults, LogoDesignData$1 as LogoDesignData, LogoDesignEditor, LogoDesignEditorDefaults, LogoDesignEditorDefaultsTransformed, LogoType, MandatoryContentSettings, MandatoryDesignSettings, Manifest, MenuContent, MenuContentData, MenuContentEditor, MenuItem, NavigationMenuContentEditor, Overlay, OverlayTransformed, ProductSelectorContent, ProductSelectorContentEditor, ProductSelectorContentEditorDefaults, ProductSelectorData, RGBAColor, Section, SelectBoxContent, SelectboxContentEditor, SelectboxContentEditorDefaults, SelectboxContentOption, SelectboxDesignData, SelectboxDesignEditor, SelectboxDesignEditorDefaults, SelectboxDesignEditorDefaultsTransformed, Showcase, ShowcaseAccordionItem, ShowcaseContentEditorsDefaults, ShowcaseDeckContentEditorDefaults, ShowcaseImageContentEditorDefaults, ShowcaseInputboxContentEditorDefaults, ShowcaseLogoContentEditorDefaults, ShowcaseMenuContentEditorDefaults, ShowcaseNavigationMenuContentEditorDefaults, ShowcaseOverride, ShowcaseTextareaContentEditorDefaults, SolidColor, SolidColorTransformed, StorePageConfiguration, StorefrontSection, StorefrontSectionId, Template, TemplateConfiguration, TemplateConfigurationSection, TemplateCustomSection, TemplateDefaultSection, TemplateMetadata, TemplatePage, TemplatePageNamed, TemplateStorefrontSection, TextAreaContent, TextDesignData$1 as TextDesignData, TextDesignEditor, TextDesignEditorDefaults, TextDesignEditorDefaultsTransformed, TextSize, TextareaContentEditor, TextareaContentEditorDefaults, TextareaDesignData$1 as TextareaDesignData, ToggleContent, ToggleContentData, ToggleContentEditor, ToggleContentEditorDefaults, ToggleDesignData, ToggleDesignEditor, ToggleDesignEditorDefaults, ToggleDesignEditorDefaultsTransformed, TransformedFrame, TranslationSettings, VuegaPageId };
+export { ActionLinkTypeEnum, BackgroundStyleEnum, ButtonAppearanceEnum, ButtonShapeEnum, ButtonSizeEnum, ButtonTypeEnum, CatalogLayoutSlot, CategoryLayoutSlot, Color$1 as Color, ConfigTypeEnum, DesignEditorType, EditorTypes, ImageSet, InstantsiteJsEvent, LogoTypeEnum, OverlayType, OverlayTypeEnum, PluginTypeEnum, ProductLayoutSlot, SectionTypeEnum, TemplateCategoriesList, ValidationTypeEnum, asStructuredColor, collection, content, createLayoutApp, createTextStyle, createVueClientApp, createVueServerApp, design, getBackgroundStyle, getColorHex, getContrastTextColor, getCurrentLanguageCode, isColorDark, layout, section, showcase, template, translation, useAccordionElementDesign, useBackgroundElementDesign, useBackgroundStyle, useButtonElementContent, useButtonElementDesign, useButtonStyles, useCategorySelectorElementContent, useCurrentLanguage, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useProductSelectorElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useTranslation, useVueBaseProps };
+export type { AccordionDesignData, AccordionDesignEditor, AccordionDesignEditorDefaults, AccordionDesignItemData, AccordionItem, AccordionShowcaseDesignEditorDefaults, ActionLink, AppBaseContext, AppBaseData, AppBaseState, Background, BackgroundDesignData$1 as BackgroundDesignData, BackgroundDesignEditor, BackgroundDesignEditorDefaults, BackgroundDesignEditorDefaultsTransformed, BackgroundStyleOptions, BackgroundTransformed, BackgroundType, ButtonAppearance, ButtonContentData, ButtonContentEditor, ButtonContentEditorDefaults, ButtonDesignData$1 as ButtonDesignData, ButtonDesignEditor, ButtonDesignEditorDefaults, ButtonDesignEditorDefaultsTransformed, ButtonSize, ButtonSizeStyles, ButtonStyle, CapitalizationType, Card, CategorySelectorContent, CategorySelectorContentEditor, CategorySelectorContentEditorDefaults, CategorySelectorData, CollectionDescriptor, CollectionDescriptorContent, CollectionDescriptorMetadata, ColorPickerDesignEditor, ColorPickerDesignEditorDefaults, ColorPickerDesignEditorDefaultsTransformed, ContentEditor, ContentEditorDefaults, ContentSettings, CustomSection, Deck, DeckContent, DeckContentEditor, DefaultSection, DesignEditor, DesignEditorDefaults, DesignEditorDefaultsTransformed, DesignSettings, DividerContentEditor, DividerContentEditorDefaults, DividerDesignEditor, Font, Frame, GlobalColorsString, GlobalDesign$1 as GlobalDesign, GlobalFontsString, GlobalTextSizeString, GradientColor, GradientColorTransformed, HSLColor, ImageBorderInfoData, ImageContent, ImageContentData, ImageContentEditor, ImageContentEditorDefaults, ImageDesignData$1 as ImageDesignData, ImageDesignEditor, ImageDesignEditorDefaults, ImageDesignEditorDefaultsTransformed, ImageInfoData, InfoContentEditor, InfoContentEditorDefaults, InfoDesignEditor, InfoDesignEditorDefaults, InputBoxContent, InputboxContentEditor, InputboxContentEditorDefaults, InstantsiteJSAPI$1 as InstantsiteJSAPI, InstantsiteTilePromise$1 as InstantsiteTilePromise, InternalColor, LayoutDesignData, LayoutDesignOverride, LayoutSettings, LogoContent, LogoContentData, LogoContentEditor, LogoContentEditorDefaults, LogoDesignData$1 as LogoDesignData, LogoDesignEditor, LogoDesignEditorDefaults, LogoDesignEditorDefaultsTransformed, LogoType, MandatoryContentSettings, MandatoryDesignSettings, Manifest, MenuContent, MenuContentData, MenuContentEditor, MenuItem, NavigationMenuContentEditor, Overlay, OverlayTransformed, ProductSelectorContent, ProductSelectorContentEditor, ProductSelectorContentEditorDefaults, ProductSelectorData, RGBAColor, Section, SelectBoxContent, SelectboxContentEditor, SelectboxContentEditorDefaults, SelectboxContentOption, SelectboxDesignData, SelectboxDesignEditor, SelectboxDesignEditorDefaults, SelectboxDesignEditorDefaultsTransformed, Showcase, ShowcaseAccordionItem, ShowcaseContentEditorsDefaults, ShowcaseDeckContentEditorDefaults, ShowcaseImageContentEditorDefaults, ShowcaseInputboxContentEditorDefaults, ShowcaseLogoContentEditorDefaults, ShowcaseMenuContentEditorDefaults, ShowcaseNavigationMenuContentEditorDefaults, ShowcaseOverride, ShowcaseTextareaContentEditorDefaults, SolidColor, SolidColorTransformed, StorePageConfiguration, StorefrontSection, StorefrontSectionId, Template, TemplateConfiguration, TemplateConfigurationSection, TemplateCustomSection, TemplateDefaultSection, TemplateMetadata, TemplatePage, TemplatePageNamed, TemplateStorefrontSection, TextAreaContent, TextDesignData$1 as TextDesignData, TextDesignEditor, TextDesignEditorDefaults, TextDesignEditorDefaultsTransformed, TextSize, TextStyleOptions, TextareaContentEditor, TextareaContentEditorDefaults, TextareaDesignData$1 as TextareaDesignData, ToggleContent, ToggleContentData, ToggleContentEditor, ToggleContentEditorDefaults, ToggleDesignData, ToggleDesignEditor, ToggleDesignEditorDefaults, ToggleDesignEditorDefaultsTransformed, TransformedFrame, TranslationSettings, UseButtonStylesOptions, UseCurrentLanguageReturn, VuegaPageId };