@illinois-grad/grad-vue 2.5.5 → 3.0.1

package/README.md

@@ -131,7 +131,7 @@ The project uses Vitest 4 for unit and accessibility testing in **browser mode**
 npm test
 
 # Run tests once
-npm run test:run
+npm run test:report
 ```
 
 ### Building

package/custom-elements.json

@@ -1869,12 +1869,12 @@
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "heading",
               "type": {
                 "text": "string"
               },
               "optional": true,
-              "description": "Title and accessible name"
+              "description": "Heading and accessible name"
             },
             {
               "kind": "field",
@@ -2348,12 +2348,12 @@
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "heading",
               "type": {
                 "text": "string"
               },
               "optional": true,
-              "description": "Title for the popover.",
+              "description": "Heading for the popover.",
               "default": "\"Period Selection\""
             },
             {
@@ -2833,21 +2833,12 @@
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "heading",
               "type": {
                 "text": "string"
               },
               "optional": true,
-              "description": "Title and accessible name for the nav landmark"
-            },
-            {
-              "kind": "field",
-              "name": "items",
-              "type": {
-                "text": "TreeMenuItem[]"
-              },
-              "optional": false,
-              "description": "Items for the menu"
+              "description": "Heading and accessible name for the nav landmark"
             },
             {
               "kind": "field",
@@ -2856,7 +2847,7 @@
                 "text": "\"ul\" | \"ol\""
               },
               "optional": true,
-              "description": "List element type - use `ol` for numbered hierarchies like book chapters",
+              "description": "List element type",
               "default": "\"ul\""
             },
             {
@@ -2868,12 +2859,60 @@
               "optional": true,
               "description": "Theme",
               "default": "\"light\""
+            },
+            {
+              "kind": "field",
+              "name": "storageKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "When provided, expanded/collapsed states are saved to `sessionStorage` under this key and restored on page load. Item states are keyed by each the `label` prop."
             }
           ],
           "events": []
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/web-components.js",
+      "declarations": [
+        {
+          "kind": "custom-element",
+          "name": "GTreeMenuListElement",
+          "tagName": "g-tree-menu-list",
+          "members": [],
+          "events": []
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/web-components.js",
+      "declarations": [
+        {
+          "kind": "custom-element",
+          "name": "GTreeMenuItemElement",
+          "tagName": "g-tree-menu-item",
+          "members": [],
+          "events": [
+            {
+              "name": "expand",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "collapse",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ]
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/web-components.js",

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

@@ -70,10 +70,10 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     /**
-     * Title and accessible name
+     * Heading and accessible name
      * @demo Sidebar Menu
      */
-    title?: string;
+    heading?: string;
     /**
      * Items for the menu
      */
@@ -106,10 +106,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (value: string | null) => any;
 }, string, import("vue").PublicProps, Readonly<{
     /**
-     * Title and accessible name
+     * Heading and accessible name
      * @demo Sidebar Menu
      */
-    title?: string;
+    heading?: string;
     /**
      * Items for the menu
      */

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

@@ -6,10 +6,10 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     /**
-     * Title for the popover.
+     * Heading for the popover.
      * @demo Period Selection
      */
-    title?: string;
+    heading?: string;
     /**
      * Label for year select.
      * @demo Select Year
@@ -40,10 +40,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     }) => any;
 }, string, import("vue").PublicProps, Readonly<{
     /**
-     * Title for the popover.
+     * Heading for the popover.
      * @demo Period Selection
      */
-    title?: string;
+    heading?: string;
     /**
      * Label for year select.
      * @demo Select Year
@@ -73,7 +73,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         name: string;
     }) => any) | undefined;
 }>, {
-    title: string;
+    heading: string;
     termYears: string[];
     termNames: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,20 +1,37 @@
-import type { TreeMenuItem } from "./tree-menu/GTreeMenuList.vue";
 /**
  * A hierarchical sidebar menu component suitable for book-like or nested-section
  * navigation. Items with children start collapsed and can be expanded/collapsed
  * individually.
  *
+ * Links are authored directly in HTML for progressive enhancement — the page
+ * works as a basic list of links even without JavaScript.
+ *
+ * Use `GTreeMenuList` and `GTreeMenuItem` sub-components to build the menu:
+ *
+ * ```vue-html
+ * <GTreeMenu heading="Contents">
+ *     <GTreeMenuList>
+ *         <GTreeMenuItem label="Chapter 1">
+ *             <a href="#ch1">Chapter 1</a>
+ *             <template #children>
+ *                 <GTreeMenuItem><a href="#s1">Section 1.1</a></GTreeMenuItem>
+ *             </template>
+ *         </GTreeMenuItem>
+ *     </GTreeMenuList>
+ * </GTreeMenu>
+ * ```
+ *
  * **Props**:
  *
- * - `title` - optional heading and accessible name for the nav landmark.
- * - `items` - array of `TreeMenuItem` objects. Each item may have:
- *   - `label` - display text (required).
- *   - `href` or `to` - link destination. When `to` is provided and `vue-router`
- *     is present the link is rendered as a `<router-link>`.
- *   - `children` - nested `TreeMenuItem[]` for sub-levels (unlimited depth).
+ * - `heading` - optional heading and accessible name for the nav landmark.
  * - `listType` - `ul` (default) or `ol`. Use `ol` for numbered
- *   hierarchies such as book chapters.
+ *   hierarchies such as book chapters. Inherited by nested `GTreeMenuList`
+ *   components via provide/inject.
  * - `theme` - `light` (default) or `dark`.
+ * - `storageKey` - when provided, expanded/collapsed states are persisted to
+ *   `sessionStorage` under this key and restored on page load. This is useful
+ *   in Web Component / Drupal contexts where every page navigation is a full
+ *   refresh. Item states are keyed by the item's `label` prop.
  *
  * **Keyboard navigation** (tree-view style):
  *
@@ -26,18 +43,14 @@ import type { TreeMenuItem } from "./tree-menu/GTreeMenuList.vue";
  */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
-     * Title and accessible name for the nav landmark
+     * Heading and accessible name for the nav landmark
      * @demo Tree Menu
      */
-    title?: string;
+    heading?: string;
     /**
-     * Items for the menu
-     */
-    items: TreeMenuItem[];
-    /**
-     * List element type - use `ol` for numbered hierarchies like book chapters
+     * List element type
      * @demo
      */
     listType?: "ul" | "ol";
@@ -46,18 +59,20 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     theme?: "light" | "dark";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
-     * Title and accessible name for the nav landmark
-     * @demo Tree Menu
+     * When provided, expanded/collapsed states are saved to `sessionStorage`
+     * under this key and restored on page load. Item states are keyed by each
+     * the `label` prop.
      */
-    title?: string;
+    storageKey?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
-     * Items for the menu
+     * Heading and accessible name for the nav landmark
+     * @demo Tree Menu
      */
-    items: TreeMenuItem[];
+    heading?: string;
     /**
-     * List element type - use `ol` for numbered hierarchies like book chapters
+     * List element type
      * @demo
      */
     listType?: "ul" | "ol";
@@ -66,7 +81,20 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     theme?: "light" | "dark";
+    /**
+     * When provided, expanded/collapsed states are saved to `sessionStorage`
+     * under this key and restored on page load. Item states are keyed by each
+     * the `label` prop.
+     */
+    storageKey?: string;
 }> & Readonly<{}>, {
     theme: "light" | "dark";
     listType: "ul" | "ol";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tree-menu/GTreeMenuItem.vue.d.ts

@@ -0,0 +1,52 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Accessible label used for the toggle button's aria-label when the
+     * item has children (e.g. "Chapter 1" → "Chapter 1 sub-menu").
+     */
+    label?: string;
+    /**
+     * Whether the item starts expanded. Only meaningful for items that
+     * have a `#children` slot. When a `storageKey` is active on the parent
+     * `GTreeMenu` and a stored value exists for this item's `label`, the
+     * stored value takes precedence over this prop and subsequent prop
+     * updates are ignored for that item.
+     * @demo
+     */
+    expanded?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
+    collapse: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Accessible label used for the toggle button's aria-label when the
+     * item has children (e.g. "Chapter 1" → "Chapter 1 sub-menu").
+     */
+    label?: string;
+    /**
+     * Whether the item starts expanded. Only meaningful for items that
+     * have a `#children` slot. When a `storageKey` is active on the parent
+     * `GTreeMenu` and a stored value exists for this item's `label`, the
+     * stored value takes precedence over this prop and subsequent prop
+     * updates are ignored for that item.
+     * @demo
+     */
+    expanded?: boolean;
+}> & Readonly<{
+    onExpand?: (() => any) | undefined;
+    onCollapse?: (() => any) | undefined;
+}>, {
+    expanded: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    children?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tree-menu/GTreeMenuList.vue.d.ts

@@ -1,23 +1,28 @@
-export type TreeMenuItem = {
-    label: string;
-    href?: string;
-    to?: string;
-    children?: TreeMenuItem[];
-};
+/**
+ * List wrapper for `GTreeMenuItem` items inside a `GTreeMenu`.
+ * Renders as `<ul>` or `<ol>` depending on the `listType` prop.
+ * When no `listType` is specified the value provided by the parent
+ * `GTreeMenu` (via provide/inject) is used, falling back to `ul`.
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    items: TreeMenuItem[];
-    listType: "ul" | "ol";
-    expandedItems: Set<string>;
-    keyPrefix: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (key: string) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    items: TreeMenuItem[];
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * List element type (`ul` or `ol`).
+     */
+    listType?: "ul" | "ol";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * List element type (`ul` or `ol`).
+     */
+    listType?: "ul" | "ol";
+}> & Readonly<{}>, {
     listType: "ul" | "ol";
-    expandedItems: Set<string>;
-    keyPrefix: string;
-}> & Readonly<{
-    onToggle?: ((key: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};