gd-design-library 1.2.0 → 1.3.0

package/tokens/accordion.js

@@ -12,9 +12,15 @@ const o = {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
+      gap: (e) => n(e, "spacing.md", "theme.spacing.md"),
       ":first-of-type": {
         flex: "1"
       }
+    },
+    inline: {
+      width: "auto",
+      display: "inline-flex",
+      justifyContent: "start"
     }
   },
   content: {
@@ -44,16 +50,23 @@ const o = {
         left: (e) => n(e, "spacing.none", "theme.spacing.none"),
         right: (e) => n(e, "spacing.none", "theme.spacing.none"),
         height: "1px",
-        width: "100%",
         backgroundColor: (e) => n(e, "colors.border.default", "theme.colors.border.default")
       }
-    }
-  },
-  itemNoSeparator: {
-    default: {
+    },
+    noSeparator: {
       position: "relative",
       padding: (e) => n(e, "spacing.none", "theme.spacing.none")
-    }
+    },
+    inline: {
+      width: "auto",
+      display: "inline-flex",
+      flexWrap: "wrap",
+      flexDirection: "column"
+    },
+    opened: {
+      width: "100%"
+    },
+    closed: {}
   },
   icon: {
     default: {

package/tokens/chatbubble.d.ts

@@ -55,10 +55,11 @@ export declare const chatbubble: {
         flexDirection: FlexDirection;
     };
     loader: {
-        props: {
+        attrs: {
             name: string;
             size: string;
             withWrapper: boolean;
+            rounded: (theme: Record<symbol, unknown>) => string;
         };
     };
 };

package/tokens/chatbubble.js

@@ -1,6 +1,6 @@
 import { display as s, flexAlignItems as o } from "./display.js";
-import { FlexDirection as a } from "../types/layout.js";
 import { get as t } from "../utils/helpers.js";
+import { FlexDirection as a } from "../types/layout.js";
 import { TypographyVariant as n } from "../types/typography.js";
 const g = {
   default: {
@@ -64,10 +64,11 @@ const g = {
     flexDirection: a.Row
   },
   loader: {
-    props: {
+    attrs: {
       name: "dots",
       size: "xs",
-      withWrapper: !1
+      withWrapper: !1,
+      rounded: (e) => t(e, "radius.round", "theme.spacing.sm")
     }
   }
 };

package/tokens/defaultTheme.d.ts

@@ -288,10 +288,11 @@ export declare const defaultTheme: {
             flexDirection: import('../types').FlexDirection;
         };
         loader: {
-            props: {
+            attrs: {
                 name: string;
                 size: string;
                 withWrapper: boolean;
+                rounded: (theme: Record<symbol, unknown>) => string;
             };
         };
     };
@@ -2426,6 +2427,7 @@ export declare const defaultTheme: {
         dropdown: {
             position: string;
             textAlign: string;
+            color: (theme: Record<symbol, unknown>) => string;
             background: (theme: Record<symbol, unknown>) => string;
             boxShadow: (theme: Record<symbol, unknown>) => string;
             fontFamily: (theme: Record<symbol, unknown>) => string;
@@ -3203,11 +3205,18 @@ export declare const defaultTheme: {
         content: {
             default: {
                 backgroundColor: (theme: Record<symbol, unknown>) => string;
+                zIndex: (theme: Record<symbol, unknown>) => string;
                 position: string;
                 overflow: string;
                 boxShadow: (theme: Record<symbol, unknown>) => string;
             };
         };
+        attrs: {
+            minHeight: number;
+            maxHeight: number;
+            offsetX: number;
+            offsetY: number;
+        };
     };
     price: {
         default: {
@@ -3419,10 +3428,16 @@ export declare const defaultTheme: {
                 display: string;
                 alignItems: string;
                 justifyContent: string;
+                gap: (theme: Record<symbol, unknown>) => string;
                 ':first-of-type': {
                     flex: string;
                 };
             };
+            inline: {
+                width: string;
+                display: string;
+                justifyContent: string;
+            };
         };
         content: {
             default: {
@@ -3451,16 +3466,23 @@ export declare const defaultTheme: {
                     left: (theme: Record<symbol, unknown>) => string;
                     right: (theme: Record<symbol, unknown>) => string;
                     height: string;
-                    width: string;
                     backgroundColor: (theme: Record<symbol, unknown>) => string;
                 };
             };
-        };
-        itemNoSeparator: {
-            default: {
+            noSeparator: {
                 position: string;
                 padding: (theme: Record<symbol, unknown>) => string;
             };
+            inline: {
+                width: string;
+                display: string;
+                flexWrap: string;
+                flexDirection: string;
+            };
+            opened: {
+                width: string;
+            };
+            closed: {};
         };
         icon: {
             default: {

package/tokens/index.d.ts

@@ -484,10 +484,11 @@ export declare const defaultTokens: {
             flexDirection: import('../types').FlexDirection;
         };
         loader: {
-            props: {
+            attrs: {
                 name: string;
                 size: string;
                 withWrapper: boolean;
+                rounded: (theme: Record<symbol, unknown>) => string;
             };
         };
     };
@@ -2734,6 +2735,7 @@ export declare const defaultTokens: {
         dropdown: {
             position: string;
             textAlign: string;
+            color: (theme: Record<symbol, unknown>) => string;
             background: (theme: Record<symbol, unknown>) => string;
             boxShadow: (theme: Record<symbol, unknown>) => string;
             fontFamily: (theme: Record<symbol, unknown>) => string;
@@ -3574,11 +3576,18 @@ export declare const defaultTokens: {
         content: {
             default: {
                 backgroundColor: (theme: Record<symbol, unknown>) => string;
+                zIndex: (theme: Record<symbol, unknown>) => string;
                 position: string;
                 overflow: string;
                 boxShadow: (theme: Record<symbol, unknown>) => string;
             };
         };
+        attrs: {
+            minHeight: number;
+            maxHeight: number;
+            offsetX: number;
+            offsetY: number;
+        };
     };
     spacing: {
         none: number;

package/tokens/menu.d.ts

@@ -5,9 +5,16 @@ export declare const menu: {
     content: {
         default: {
             backgroundColor: (theme: Record<symbol, unknown>) => string;
+            zIndex: (theme: Record<symbol, unknown>) => string;
             position: string;
             overflow: string;
             boxShadow: (theme: Record<symbol, unknown>) => string;
         };
     };
+    attrs: {
+        minHeight: number;
+        maxHeight: number;
+        offsetX: number;
+        offsetY: number;
+    };
 };

package/tokens/menu.js

@@ -1,17 +1,24 @@
-import { get as e } from "../utils/helpers.js";
-const r = {
+import { get as o } from "../utils/helpers.js";
+const h = {
   wrapper: {
     default: {}
   },
   content: {
     default: {
-      backgroundColor: (o) => e(o, "colors.neutral.white", "theme.colors.neutral.white"),
+      backgroundColor: (e) => o(e, "colors.neutral.white", "theme.colors.neutral.white"),
+      zIndex: (e) => o(e, "zIndex.high", "theme.zIndex.high"),
       position: "absolute",
       overflow: "auto",
-      boxShadow: (o) => e(o, 'shadows.box["1"]', 'theme.shadows.box["1"]')
+      boxShadow: (e) => o(e, 'shadows.box["1"]', 'theme.shadows.box["1"]')
     }
+  },
+  attrs: {
+    minHeight: 80,
+    maxHeight: 400,
+    offsetX: 4,
+    offsetY: 4
   }
 };
 export {
-  r as menu
+  h as menu
 };

package/tokens/select.d.ts

@@ -18,6 +18,7 @@ export declare const select: {
     dropdown: {
         position: string;
         textAlign: string;
+        color: (theme: Record<symbol, unknown>) => string;
         background: (theme: Record<symbol, unknown>) => string;
         boxShadow: (theme: Record<symbol, unknown>) => string;
         fontFamily: (theme: Record<symbol, unknown>) => string;

package/tokens/select.js

@@ -4,8 +4,8 @@ import { flexAlignItems as t, display as r } from "./display.js";
 import { get as o } from "../utils/helpers.js";
 import { FlexDirection as f } from "../types/layout.js";
 import { Cursors as n } from "../types/cursors.js";
-import { ButtonVariant as p } from "../types/button.js";
-import { TextAlign as m, TypographyVariant as i } from "../types/typography.js";
+import { ButtonVariant as c } from "../types/button.js";
+import { TextAlign as p, TypographyVariant as i } from "../types/typography.js";
 var a, l;
 const v = {
   default: {
@@ -26,6 +26,7 @@ const v = {
   dropdown: {
     position: "absolute",
     textAlign: "left",
+    color: (e) => o(e, "colors.text.default", "theme.colors.text.default"),
     background: (e) => o(e, "colors.bg.surface", "theme.colors.bg.surface"),
     boxShadow: (e) => o(e, 'shadows.box["3"]', 'theme.shadows.box["3"]'),
     fontFamily: (e) => o(e, "font.family", "theme.font.family"),
@@ -49,13 +50,13 @@ const v = {
       flexDirection: "row",
       justifyContent: "space-between",
       alignItems: (l = t) == null ? void 0 : l.center,
-      textAlign: m.Left,
+      textAlign: p.Left,
       ".gd-button__content": {
         justifyContent: t.start
       }
     },
     attrs: {
-      variant: p.Inherit
+      variant: c.Inherit
     }
   },
   item: {
@@ -88,7 +89,7 @@ const v = {
   icons: {
     arrowIcon: {
       name: "arrowDown",
-      fill: 'neutral["grey.90"]',
+      fill: "icon.default",
       width: 18,
       height: 18
     }

package/utils/play/formUtils.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Fill an input field (clear + type)
+ * @param input - The input element to fill
+ * @param value - The value to type
+ */
+export declare function fillInput(input: HTMLElement, value: string): Promise<void>;
+/**
+ * Type into an input with optional delay between keystrokes
+ * @param input - The input element
+ * @param value - The value to type
+ * @param delay - Delay in ms between keystrokes (default: 0)
+ */
+export declare function typeIntoInput(input: HTMLElement, value: string, delay?: number): Promise<void>;
+/**
+ * Clear an input field
+ * @param input - The input element to clear
+ */
+export declare function clearInput(input: HTMLElement): Promise<void>;
+/**
+ * Click a checkbox or radio button
+ * @param input - The checkbox/radio element
+ */
+export declare function clickInput(input: HTMLElement): Promise<void>;
+/**
+ * Tab to next element
+ */
+export declare function tabToNext(): Promise<void>;

package/utils/play/imageUtils.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Wait for an image to load
+ * @param imageGetter - Function that returns the image element
+ * @param timeout - Maximum time to wait in milliseconds (default: 3000ms)
+ */
+export declare function waitForImageLoad(imageGetter: () => HTMLElement, timeout?: number): Promise<void>;
+/**
+ * Wait for image to be visible
+ * @param imageGetter - Function that returns the image element
+ * @param timeout - Maximum time to wait in milliseconds (default: 3000ms)
+ */
+export declare function waitForImageToBeVisible(imageGetter: () => HTMLElement, timeout?: number): Promise<void>;

package/utils/play/index.d.ts

@@ -0,0 +1,5 @@
+export * from './formUtils';
+export * from './modalUtils';
+export * from './mockUtils';
+export * from './waitUtils';
+export * from './imageUtils';

package/utils/play/mockUtils.d.ts

@@ -0,0 +1,29 @@
+interface MockFunction {
+    mock: {
+        calls: Array<any[]>;
+        results: Array<{
+            value: any;
+        }>;
+    };
+}
+/**
+ * Get the arguments from the last call to a mock function
+ * @param mockFn - The mock function
+ * @returns The arguments array from the last call, or undefined if no calls
+ */
+export declare function getLastCallArgs(mockFn: MockFunction): any;
+/**
+ * Get the result (return value) from a specific call to a mock function
+ * @param mockFn - The mock function
+ * @param callIndex - Index of the call (0-based)
+ * @returns The return value from that call, or undefined
+ */
+export declare function getMockCallResult(mockFn: MockFunction, callIndex: number): any;
+/**
+ * Get the arguments from a specific call to a mock function
+ * @param mockFn - The mock function
+ * @param callIndex - Index of the call (0-based)
+ * @returns The arguments array from the specified call, or undefined if call doesn't exist
+ */
+export declare function getMockCallArgs(mockFn: MockFunction, callIndex: number): any;
+export {};

package/utils/play/modalUtils.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Open a modal by clicking the trigger and waiting for it to appear
+ * @param triggerGetter - Function that returns the trigger button element
+ * @param modalGetter - Function that returns the modal element
+ * @param timeout - Maximum time to wait in milliseconds (default: 1000ms)
+ */
+export declare function openModal(triggerGetter: () => HTMLElement, modalGetter: () => HTMLElement, timeout?: number): Promise<void>;
+/**
+ * Close a modal by clicking the close button and waiting for it to disappear
+ * @param closeButtonGetter - Function that returns the close button element
+ * @param queryModalGetter - Function that returns the modal element or null (use query variant)
+ * @param timeout - Maximum time to wait in milliseconds (default: 2000ms)
+ */
+export declare function closeModal(closeButtonGetter: () => HTMLElement, queryModalGetter: () => HTMLElement | null, timeout?: number): Promise<void>;
+/**
+ * Close a modal by pressing the Escape key and waiting for it to disappear
+ * @param queryModalGetter - Function that returns the modal element or null (use query variant)
+ * @param timeout - Maximum time to wait in milliseconds (default: 1000ms)
+ */
+export declare function closeModalWithEscape(queryModalGetter: () => HTMLElement | null, timeout?: number): Promise<void>;
+/**
+ * Wait for modal to be visible (checks both existence and visibility)
+ * @param modalGetter - Function that returns the modal element
+ * @param timeout - Maximum time to wait in milliseconds (default: 1000ms)
+ */
+export declare function waitForModalToBeVisible(modalGetter: () => HTMLElement, timeout?: number): Promise<void>;

package/utils/play/waitUtils.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Wait for an element to appear in the DOM
+ * @param getter - Function that returns the element
+ * @param timeout - Maximum time to wait in milliseconds (default: 1000ms)
+ */
+export declare function waitForElementToAppear(getter: () => HTMLElement, timeout?: number): Promise<void>;
+/**
+ * Wait for an element to disappear from the DOM
+ * Use with query variants (queryBy*) that return null when element doesn't exist
+ * @param getter - Function that returns the element or null
+ * @param timeout - Maximum time to wait in milliseconds (default: 1000ms)
+ */
+export declare function waitForElementToDisappear(getter: () => HTMLElement | null, timeout?: number): Promise<void>;
+/**
+ * Wait for an element to become visible
+ * @param getter - Function that returns the element
+ * @param timeout - Maximum time to wait in milliseconds (default: 500ms)
+ */
+export declare function waitForElementToBeVisible(getter: () => HTMLElement, timeout?: number): Promise<void>;
+/**
+ * Wait for text content to change to expected value
+ * @param getter - Function that returns the element
+ * @param expectedText - Expected text content (string or regex)
+ * @param timeout - Maximum time to wait in milliseconds (default: 2000ms)
+ */
+export declare function waitForTextChange(getter: () => HTMLElement, expectedText: string | RegExp, timeout?: number): Promise<void>;
+/**
+ * Wait for an input value to change to expected value
+ * @param getter - Function that returns the input element
+ * @param expectedValue - Expected input value
+ * @param timeout - Maximum time to wait in milliseconds (default: 1000ms)
+ */
+export declare function waitForValueChange(getter: () => HTMLElement, expectedValue: string, timeout?: number): Promise<void>;
+/**
+ * Wait for an element to have a specific attribute value
+ * @param getter - Function that returns the element
+ * @param attribute - Attribute name
+ * @param expectedValue - Expected attribute value (optional - checks for existence if not provided)
+ * @param timeout - Maximum time to wait in milliseconds (default: 1000ms)
+ */
+export declare function waitForAttribute(getter: () => HTMLElement, attribute: string, expectedValue?: string, timeout?: number): Promise<void>;
+/**
+ * Wait for loading to complete (loading element disappears)
+ * @param queryLoadingGetter - Function that returns the loading element or null
+ * @param timeout - Maximum time to wait in milliseconds (default: 3000ms)
+ */
+export declare function waitForLoadingToComplete(queryLoadingGetter: () => HTMLElement | null, timeout?: number): Promise<void>;