@illinois-grad/grad-vue 2.5.0 → 2.5.1

package/custom-elements.json

@@ -170,6 +170,16 @@
               "optional": true,
               "description": "Optional icon classes to render an icon span before the label. Example: \"fa-solid fa-plus\" or \"material-symbols:add\". If a named slot `icon` is provided, it takes precedence over this prop.",
               "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"button\" | \"submit\" | \"reset\""
+              },
+              "optional": true,
+              "description": "Native button type",
+              "default": "\"button\""
             }
           ],
           "events": [
@@ -341,6 +351,16 @@
               "description": "Name for form registration",
               "default": "undefined"
             },
+            {
+              "kind": "field",
+              "name": "formKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Form channel key for custom elements mode",
+              "default": "undefined"
+            },
             {
               "kind": "field",
               "name": "modelValue",
@@ -423,6 +443,16 @@
               "description": "Name for form registration",
               "default": "undefined"
             },
+            {
+              "kind": "field",
+              "name": "formKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Form channel key for custom elements mode",
+              "default": "undefined"
+            },
             {
               "kind": "field",
               "name": "modelValue",
@@ -515,6 +545,16 @@
               "description": "Name for form registration",
               "default": "undefined"
             },
+            {
+              "kind": "field",
+              "name": "formKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Form channel key for custom elements mode",
+              "default": "undefined"
+            },
             {
               "kind": "field",
               "name": "modelValue",
@@ -686,6 +726,16 @@
               "description": "HTTP method (optional, for native form submission)",
               "default": "\"post\""
             },
+            {
+              "kind": "field",
+              "name": "formKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Form channel key for custom elements mode",
+              "default": "\"default\""
+            },
             {
               "kind": "field",
               "name": "modelValue",
@@ -724,6 +774,16 @@
               "optional": true,
               "description": "Accessible label",
               "default": "\"Main Navigation\""
+            },
+            {
+              "kind": "field",
+              "name": "sidebarKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Sidebar channel key for custom elements mode",
+              "default": "\"default\""
             }
           ],
           "events": [
@@ -877,7 +937,9 @@
               "type": {
                 "text": "boolean"
               },
-              "optional": true
+              "optional": true,
+              "description": "v-model binding for the open state. Also works as a plain prop/attribute in custom-element mode where `defineModel` would revert local state.",
+              "default": "false"
             }
           ],
           "events": [
@@ -892,6 +954,42 @@
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "name": "update:modelValue",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/web-components.js",
+      "declarations": [
+        {
+          "kind": "custom-element",
+          "name": "GTooltipElement",
+          "tagName": "g-tooltip",
+          "members": [
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string"
+              },
+              "optional": false,
+              "description": "Tooltip text"
+            }
+          ],
+          "events": [
+            {
+              "name": "tooltip-hide",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ]
         }
@@ -1127,6 +1225,16 @@
               "description": "Error messages array (supports multiple validation errors)",
               "default": "() => []"
             },
+            {
+              "kind": "field",
+              "name": "formKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Form channel key for custom elements mode",
+              "default": "undefined"
+            },
             {
               "kind": "field",
               "name": "modelValue",
@@ -1214,6 +1322,16 @@
               "description": "Error messages array (supports multiple validation errors)",
               "default": "() => []"
             },
+            {
+              "kind": "field",
+              "name": "formKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Form channel key for custom elements mode",
+              "default": "undefined"
+            },
             {
               "kind": "field",
               "name": "modelValue",
@@ -1302,6 +1420,16 @@
               "optional": true,
               "description": "Width Width of the sidebar",
               "default": "\"300px\""
+            },
+            {
+              "kind": "field",
+              "name": "sidebarKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Sidebar channel key for custom elements mode",
+              "default": "\"default\""
             }
           ],
           "events": []
@@ -1426,6 +1554,16 @@
               "optional": true,
               "description": "Variant",
               "default": "\"primary\""
+            },
+            {
+              "kind": "field",
+              "name": "formKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Form channel key for custom elements mode",
+              "default": "\"default\""
             }
           ],
           "events": []
@@ -2008,6 +2146,16 @@
               "description": "Name for form registration",
               "default": "undefined"
             },
+            {
+              "kind": "field",
+              "name": "formKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Form channel key for custom elements mode",
+              "default": "undefined"
+            },
             {
               "kind": "field",
               "name": "modelValue",

package/dist/components/GButton.vue.d.ts

@@ -53,6 +53,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * If a named slot `icon` is provided, it takes precedence over this prop.
      */
     icon?: string;
+    /**
+     * Native button type
+     */
+    type?: "button" | "submit" | "reset";
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
     focus: (...args: any[]) => void;
@@ -98,6 +102,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * If a named slot `icon` is provided, it takes precedence over this prop.
      */
     icon?: string;
+    /**
+     * Native button type
+     */
+    type?: "button" | "submit" | "reset";
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
@@ -110,6 +118,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     onMouseleave?: ((...args: any[]) => any) | undefined;
 }>, {
     size: "small" | "medium" | "large";
+    type: "button" | "submit" | "reset";
     text: boolean;
     theme: "primary" | "secondary" | "accent" | "danger" | "none";
     outlined: boolean;

package/dist/components/GCurrencyInput.vue.d.ts

@@ -3,6 +3,10 @@
  *
  * This component is a wrapper around a text input with a prefix and
  * appropriate input type for currency values.
+ *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -35,6 +39,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -68,6 +76,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | null;
 }> & Readonly<{
@@ -79,4 +91,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     disabled: boolean;
     errors: string[];
     instructions: string;
+    formKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/GDateInput.vue.d.ts

@@ -3,6 +3,10 @@
  *
  * This component is a wrapper around GTextInput with type="date" for
  * proper date selection using the browser's native date picker.
+ *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -35,6 +39,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -68,6 +76,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | null;
 }> & Readonly<{
@@ -79,4 +91,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     disabled: boolean;
     errors: string[];
     instructions: string;
+    formKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/GDateRangeInput.vue.d.ts

@@ -3,6 +3,10 @@
  *
  * This component uses two GDateInput components laid out horizontally
  * to allow selecting a date range.
+ *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -40,6 +44,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: {
         start: string | null;
@@ -84,6 +92,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: {
         start: string | null;
@@ -100,6 +112,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     disabled: boolean;
     errors: string[];
     instructions: string;
+    formKey: string;
     startLabel: string;
     endLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/GForm.vue.d.ts

@@ -11,6 +11,8 @@
  * - Reactive error handling by providing a computed list of errors
  * - Optionally manage your own form state in a parent component by providing a
  *   `form` injection
+ * - In web components mode, use the `form-key` prop to pair a form with
+ *   matching inputs/buttons across custom element app boundaries
  *
  * ### Basic example
  *
@@ -36,6 +38,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     method?: string;
+    /**
+     * Form channel key for custom elements mode
+     * @demo
+     */
+    formKey?: string;
 } & {
     modelValue?: Record<string, any>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -52,12 +59,18 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     method?: string;
+    /**
+     * Form channel key for custom elements mode
+     * @demo
+     */
+    formKey?: string;
 } & {
     modelValue?: Record<string, any>;
 }> & Readonly<{
     onSubmit?: ((values: Record<string, any>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
 }>, {
+    formKey: string;
     action: string;
     method: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/components/GHamburgerMenu.vue.d.ts

@@ -25,6 +25,8 @@
  *
  * > [!NOTE]
  * > This button hides itself automatically according to the useSidebar media query.
+ * > In web components mode, use the `sidebar-key` prop to pair this menu with a
+ * > matching GSidebar instance.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -34,6 +36,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     label?: string;
+    /**
+     * Sidebar channel key for custom elements mode
+     * @demo
+     */
+    sidebarKey?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -42,8 +49,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     label?: string;
+    /**
+     * Sidebar channel key for custom elements mode
+     * @demo
+     */
+    sidebarKey?: string;
 }> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {
     label: string;
+    sidebarKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/GModal.vue.d.ts

@@ -26,12 +26,6 @@
  *
  * Adding a dimming overlay behind modals can be done by placing `GOverlay`
  * at the end of the page structure.
- *
- * > [!WARNING]
- * > There are some shenanigans in the modal and overlay implementation in order
- * > to support Nuxt without including it as a dependency. Specifically, the refs
- * > to store the state of the overlay stack is added to `window._g_overlay_stack_state`
- * > when `document` is defined. That makes it only load in the client.
  */
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/GPopover.vue.d.ts

@@ -2,11 +2,14 @@
  * Popover that appears next to or over a trigger element, staying visible
  * in the viewport as much as possible.
  *
- * **Slot** `trigger` must have an interactive element for which
- * the only interaction is to open the popover. The trigger element is also used
- * for `aria-labelledby`. The trigger is passed a prop `toggle` which is a function
+ * **Slot** `trigger` is optional. When provided, it should contain an
+ * interactive element for opening the popover and it is used for
+ * `aria-labelledby`. The trigger is passed a prop `toggle` which is a function
  * that toggles the popover's open state.
  *
+ * Without a trigger slot, open the popover programmatically via `show()` or
+ * `toggle()` on the component instance / custom element.
+ *
  * **Slot** `default` is the content of the popover.
  *
  * Example:
@@ -30,25 +33,38 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     minimal?: boolean;
-} & {
+    /**
+     * v-model binding for the open state. Also works as a plain
+     * prop/attribute in custom-element mode where `defineModel`
+     * would revert local state.
+     */
     modelValue?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
     show: (...args: any[]) => void;
     hide: (...args: any[]) => void;
-    "update:modelValue": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<{
     /**
      * Render without padding
      * @demo
      */
     minimal?: boolean;
-} & {
+    /**
+     * v-model binding for the open state. Also works as a plain
+     * prop/attribute in custom-element mode where `defineModel`
+     * would revert local state.
+     */
     modelValue?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
 }>, {
+    modelValue: boolean;
     minimal: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     trigger?: (props: {

package/dist/components/GSelect.vue.d.ts

@@ -2,6 +2,10 @@
  * By default, this component behaves like a normal select element with
  * custom styling.
  *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
+ *
  * The component can be marked `searchable` to enable search functionality.
  * This turns it into a text input that filters the options. Filtering is
  * done with a simple lower-case string search.
@@ -64,6 +68,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Error messages array (supports multiple validation errors)
      */
     errors?: string[];
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | number | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -122,6 +130,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Error messages array (supports multiple validation errors)
      */
     errors?: string[];
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | number | null;
 }> & Readonly<{
@@ -131,6 +143,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     name: string;
     disabled: boolean;
     errors: string[];
+    formKey: string;
     searchable: boolean;
     compact: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/components/GSelectButton.vue.d.ts

@@ -1,6 +1,10 @@
 /**
  * This component is just a radio button group with special styling.
  *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
+ *
  * Use the `options` prop to provide a list of choices. Each option can
  * be a string or an object with `label` and `value` properties.
  *
@@ -40,6 +44,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Error messages array (supports multiple validation errors)
      */
     errors?: string[];
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | number;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -76,6 +84,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Error messages array (supports multiple validation errors)
      */
     errors?: string[];
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | number;
 }> & Readonly<{
@@ -86,4 +98,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     name: string;
     disabled: boolean;
     errors: string[];
+    formKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/GSidebar.vue.d.ts

@@ -11,6 +11,9 @@
  * The sidebar can be made collapsible by providing the `sidebar` injected
  * object from `useSidebar`. See the [Hamburger Menu Documentation](#use-sidebar)
  * for details.
+ *
+ * In web components mode, use the `sidebar-key` prop to pair this sidebar
+ * with a matching GHamburgerMenu instance.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -45,6 +48,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     width?: string;
+    /**
+     * Sidebar channel key for custom elements mode
+     * @demo
+     */
+    sidebarKey?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
      * Custom background color
@@ -76,9 +84,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     width?: string;
+    /**
+     * Sidebar channel key for custom elements mode
+     * @demo
+     */
+    sidebarKey?: string;
 }> & Readonly<{}>, {
     width: string;
     theme: "light" | "dark";
+    sidebarKey: string;
     backgroundColor: string;
     backgroundImage: string;
     topOffset: string;