@illinois-grad/grad-vue 6.0.1 → 6.0.2

package/custom-elements.json

@@ -86,6 +86,26 @@
               "optional": true,
               "description": "Top-left corner text You can customize this text element with the \"left\" slot.",
               "default": "\"GRAD\""
+            },
+            {
+              "kind": "field",
+              "name": "navigationLabel",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Accessible label for the main navigation",
+              "default": "\"Main navigation\""
+            },
+            {
+              "kind": "field",
+              "name": "navigationMediaQuery",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Media query for when the main navigation should collapse",
+              "default": "\"(max-width: 800px)\""
             }
           ],
           "events": []
@@ -1084,6 +1104,26 @@
               "optional": true,
               "description": "Show a visible label",
               "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "\"sidebar\" | \"popover\""
+              },
+              "optional": true,
+              "description": "Whether the menu controls a sidebar or shows a popover",
+              "default": "\"sidebar\""
+            },
+            {
+              "kind": "field",
+              "name": "modelValue",
+              "type": {
+                "text": "boolean"
+              },
+              "optional": true,
+              "description": "Open state for popover mode",
+              "default": "false"
             }
           ],
           "events": [
@@ -1092,6 +1132,12 @@
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "name": "update:modelValue",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ]
         }

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

@@ -6,6 +6,9 @@
  *
  * **Slot** `title` is to the right of the logo.
  *
+ * **Slot** `navigation` shows a short set of main navigation links. On small
+ * screens it automatically switches to a popover menu.
+ *
  * **Slot** `app-controls` is the remaining area to the right.
  */
 declare const _default: typeof __VLS_export;
@@ -22,6 +25,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     brand?: string;
+    /**
+     * Accessible label for the main navigation
+     * @demo
+     */
+    navigationLabel?: string;
+    /**
+     * Media query for when the main navigation should collapse
+     * @demo
+     */
+    navigationMediaQuery?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
      * Whether to show the Illinois logo
@@ -34,9 +47,21 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     brand?: string;
+    /**
+     * Accessible label for the main navigation
+     * @demo
+     */
+    navigationLabel?: string;
+    /**
+     * Media query for when the main navigation should collapse
+     * @demo
+     */
+    navigationMediaQuery?: string;
 }> & Readonly<{}>, {
     illinois: boolean;
     brand: string;
+    navigationLabel: string;
+    navigationMediaQuery: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     left?: (props: {}) => any;
 } & {
@@ -44,9 +69,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 } & {
     title?: (props: {}) => any;
 } & {
-    'app-controls'?: (props: {
-        class: string;
-    }) => any;
+    navigation?: (props: {}) => any;
+} & {
+    navigation?: (props: {}) => any;
+} & {
+    'app-controls'?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -2,6 +2,8 @@
  * A hamburger menu button that toggles a sidebar, intended for the
  * GAppHeader and GSidebar components.
  *
+ * When `mode="popover"`, the default slot becomes the popover content.
+ *
  * <span id="use-sidebar">Use with the `useSidebar`</span> composable function
  * that takes care of passing state between the different components.
  *
@@ -30,7 +32,7 @@
  */
 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<{
     /**
      * Accessible label
      * @demo
@@ -51,7 +53,24 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     labelVisible?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /**
+     * Whether the menu controls a sidebar or shows a popover
+     * @demo
+     */
+    mode?: "sidebar" | "popover";
+    /**
+     * Open state for popover mode
+     */
+    modelValue?: boolean;
+}, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+    focusItem: (index: number) => Promise<boolean>;
+    focusTrigger: () => void;
+    getFocusedItemIndex: () => number;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
     toggle: () => any;
 }, string, import("vue").PublicProps, Readonly<{
     /**
@@ -74,10 +93,29 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     labelVisible?: boolean;
+    /**
+     * Whether the menu controls a sidebar or shows a popover
+     * @demo
+     */
+    mode?: "sidebar" | "popover";
+    /**
+     * Open state for popover mode
+     */
+    modelValue?: boolean;
 }> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onToggle?: (() => any) | undefined;
 }>, {
     label: string;
+    modelValue: boolean;
+    mode: "sidebar" | "popover";
     sidebarKey: string;
     labelVisible: boolean;
-}, {}, {}, {}, 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/hamburger/GHamburgerMenuButton.vue.d.ts

@@ -0,0 +1,15 @@
+type Props = {
+    id: string;
+    controlsId?: string;
+    expanded: boolean;
+    label: string;
+    labelVisible: boolean;
+    popover?: boolean;
+    collapsible?: boolean;
+};
+declare function focus(): void;
+declare const __VLS_export: import("vue").DefineComponent<Props, {
+    focus: typeof focus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/compose/focusable.d.ts

@@ -0,0 +1,3 @@
+export declare const focusableSelector: string;
+export declare function getFocusableElements(root: ParentNode | null | undefined): HTMLElement[];
+export declare function getFocusedItemIndex(items: HTMLElement[]): number;