@uplynk/lynk-design 1.11.3 → 1.12.0

package/dist/react/wisp/index.js

@@ -1,9 +1,9 @@
 import {
   wisp_default
-} from "../../chunks/chunk.TWVJAH47.js";
-import "../../chunks/chunk.XFRHEL3R.js";
+} from "../../chunks/chunk.4RSAH72C.js";
+import "../../chunks/chunk.2QCQTR7S.js";
 import "../../chunks/chunk.LOOPWOZG.js";
-import "../../chunks/chunk.DEGSHN2L.js";
+import "../../chunks/chunk.A3H2VZ6N.js";
 import "../../chunks/chunk.Y7724W4D.js";
 import "../../chunks/chunk.Q44EX5TP.js";
 export {

package/dist/types/vue/index.d.ts

@@ -1,9 +1,9 @@
 import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
+import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkAnimation } from "../../components/animation/animation.component.js";
-import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
 import type { LynkBox } from "../../components/box/box.component.js";
@@ -100,6 +100,15 @@ type LynkAccordionProps = {
   shape?: LynkAccordion["shape"];
 };
 
+type LynkAutoGridProps = {
+  /** How to justify auto-grid items */
+  "auto-size"?: LynkAutoGrid["autoSize"];
+  /** How to align auto-grid items to each-other */
+  "min-size"?: LynkAutoGrid["minSize"];
+  /** The space between auto-grid items. Use spacing tokens or any custom size. */
+  gap?: LynkAutoGrid["gap"];
+};
+
 type LynkAlertProps = {
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
   open?: LynkAlert["open"];
@@ -168,15 +177,6 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkAutoGridProps = {
-  /** How to justify auto-grid items */
-  "auto-size"?: LynkAutoGrid["autoSize"];
-  /** How to align auto-grid items to each-other */
-  "min-size"?: LynkAutoGrid["minSize"];
-  /** The space between auto-grid items. Use spacing tokens or any custom size. */
-  gap?: LynkAutoGrid["gap"];
-};
-
 type LynkAvatarProps = {
   /** The image source to use for the avatar. */
   image?: LynkAvatar["image"];
@@ -767,6 +767,12 @@ inside of the viewport. */
   "inline-pickers"?: LynkDateTimePicker["inlinePickers"];
   /** Adds a clear button when the input is populated. */
   clearable?: LynkDateTimePicker["clearable"];
+  /** Controls how incoming values with timezone information are normalized.
+- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).
+- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time
+  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display
+  them in the user's local time. */
+  normalize?: LynkDateTimePicker["normalizeMode"];
   /**  */
   dropdown?: LynkDateTimePicker["dropdown"];
   /**  */
@@ -1227,6 +1233,8 @@ type LynkMenuItemProps = {
   checked?: LynkMenuItem["checked"];
   /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
   value?: LynkMenuItem["value"];
+  /** Draws the menu item in a loading state. */
+  loading?: LynkMenuItem["loading"];
   /** Draws the menu item in a disabled state. */
   disabled?: LynkMenuItem["disabled"];
   /**  */
@@ -2434,6 +2442,23 @@ export type CustomElements = {
    */
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
+  /**
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   *
+   * ### **CSS Properties:**
+   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
+   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+
   /**
    * Alerts are used to display important messages inline or as toast notifications.
    * ---
@@ -2489,23 +2514,6 @@ export type CustomElements = {
    */
   "lynk-animation": DefineComponent<LynkAnimationProps>;
 
-  /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   *
-   * ### **CSS Properties:**
-   *  - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_
-   * - **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
-
   /**
    * Avatars are used to represent a person or object.
    * ---
@@ -3159,7 +3167,8 @@ export type CustomElements = {
    * - **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   *  - **base** - The component's base wrapper, an `<sl-popup>` element.
+   * - **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.
    * - **trigger** - The container that wraps the trigger.
    * - **panel** - The panel that gets shown when the dropdown is open.
    */
@@ -3386,6 +3395,10 @@ export type CustomElements = {
    *  - _default_ - The menu item's label.
    * - **prefix** - Used to prepend an icon or similar element to the menu item.
    * - **suffix** - Used to append an icon or similar element to the menu item.
+   * - **submenu** - Used to denote a nested menu.
+   *
+   * ### **CSS Properties:**
+   *  - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's internal wrapper.
@@ -3393,6 +3406,9 @@ export type CustomElements = {
    * - **prefix** - The prefix container.
    * - **label** - The menu item label.
    * - **suffix** - The suffix container.
+   * - **spinner** - The spinner that shows when the menu item is in the loading state.
+   * - **spinner__base** - The spinner's base part.
+   * - **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
    */
   "lynk-menu-item": DefineComponent<LynkMenuItemProps>;
 

package/dist/vscode.html-custom-data.json

@@ -33,6 +33,33 @@
         }
       ]
     },
+    {
+      "name": "lynk-auto-grid",
+      "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+      "attributes": [
+        {
+          "name": "auto-size",
+          "description": "How to justify auto-grid items",
+          "values": [{ "name": "fit" }, { "name": "fill" }]
+        },
+        {
+          "name": "min-size",
+          "description": "How to align auto-grid items to each-other",
+          "values": []
+        },
+        {
+          "name": "gap",
+          "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/auto-grid"
+        }
+      ]
+    },
     {
       "name": "lynk-alert",
       "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
@@ -144,33 +171,6 @@
         }
       ]
     },
-    {
-      "name": "lynk-auto-grid",
-      "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-      "attributes": [
-        {
-          "name": "auto-size",
-          "description": "How to justify auto-grid items",
-          "values": [{ "name": "fit" }, { "name": "fill" }]
-        },
-        {
-          "name": "min-size",
-          "description": "How to align auto-grid items to each-other",
-          "values": []
-        },
-        {
-          "name": "gap",
-          "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://lynk.design/components/auto-grid"
-        }
-      ]
-    },
     {
       "name": "lynk-avatar",
       "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
@@ -1315,6 +1315,11 @@
           "name": "clearable",
           "description": "Adds a clear button when the input is populated.",
           "values": []
+        },
+        {
+          "name": "normalize",
+          "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+          "values": [{ "name": "none" }, { "name": "local" }]
         }
       ],
       "references": [
@@ -1421,7 +1426,7 @@
     },
     {
       "name": "lynk-dropdown",
-      "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dropdown opens.\n- **ev-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **ev-hide** - Emitted when the dropdown closes.\n- **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's content.\n- **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+      "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dropdown opens.\n- **ev-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **ev-hide** - Emitted when the dropdown closes.\n- **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's content.\n- **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
       "attributes": [
         {
           "name": "open",
@@ -2256,7 +2261,7 @@
     },
     {
       "name": "lynk-menu-item",
-      "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Events:**\n - **ev-click** - Emitted when a menu item is clicked\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.",
+      "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Events:**\n - **ev-click** - Emitted when a menu item is clicked\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
       "attributes": [
         {
           "name": "type",
@@ -2273,6 +2278,11 @@
           "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
           "values": []
         },
+        {
+          "name": "loading",
+          "description": "Draws the menu item in a loading state.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Draws the menu item in a disabled state.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@uplynk/lynk-design",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -49,6 +49,53 @@
             "events": []
           }
         },
+        {
+          "name": "lynk-auto-grid",
+          "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "auto-size",
+              "description": "How to justify auto-grid items",
+              "value": { "type": "'fit' | 'fill'", "default": "'fit'" }
+            },
+            {
+              "name": "min-size",
+              "description": "How to align auto-grid items to each-other",
+              "value": { "type": "string", "default": "'20rem'" }
+            },
+            {
+              "name": "gap",
+              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+              "value": {
+                "type": "string",
+                "default": "'var(--lynk-spacing-base)'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The default slot." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "autoSize",
+                "description": "How to justify auto-grid items",
+                "type": "'fit' | 'fill'"
+              },
+              {
+                "name": "minSize",
+                "description": "How to align auto-grid items to each-other",
+                "type": "string"
+              },
+              {
+                "name": "gap",
+                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-alert",
           "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the alert opens.\n- **ev-after-show** - Emitted after the alert opens and all animations are complete.\n- **ev-hide** - Emitted when the alert closes.\n- **ev-after-hide** - Emitted after the alert closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the alert.\n- **hide()** - Hides the alert\n- **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.\n\n### **Slots:**\n - _default_ - The alert's content.\n- **icon** - An icon to show in the alert.\n- **action** - Append custom actions to alert.\n\n### **CSS Properties:**\n - **--box-shadow** - The alert's box shadow. _(default: undefined)_\n- **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal block wrapper.\n- **icon** - The container that wraps the alert icon.\n- **message** - The alert message.\n- **close-button** - The close button.\n- **close-button__base** - The close button's `base` part.",
@@ -323,53 +370,6 @@
             ]
           }
         },
-        {
-          "name": "lynk-auto-grid",
-          "description": "A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--gap** - Customize the gap of the auto-grid group. _(default: var(--lynk-spacing-base))_\n- **--min-size** - Customize the allowed min-size of the auto-grid items. _(default: 20rem)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "auto-size",
-              "description": "How to justify auto-grid items",
-              "value": { "type": "'fit' | 'fill'", "default": "'fit'" }
-            },
-            {
-              "name": "min-size",
-              "description": "How to align auto-grid items to each-other",
-              "value": { "type": "string", "default": "'20rem'" }
-            },
-            {
-              "name": "gap",
-              "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-              "value": {
-                "type": "string",
-                "default": "'var(--lynk-spacing-base)'"
-              }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The default slot." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "autoSize",
-                "description": "How to justify auto-grid items",
-                "type": "'fit' | 'fill'"
-              },
-              {
-                "name": "minSize",
-                "description": "How to align auto-grid items to each-other",
-                "type": "string"
-              },
-              {
-                "name": "gap",
-                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-avatar",
           "description": "Avatars are used to represent a person or object.\n---\n\n\n### **Events:**\n - **ev-error** - The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause.\n\n### **Slots:**\n - **icon** - The default icon to use when no image or initials are present. Works best with `<wa-icon>`.\n\n### **CSS Properties:**\n - **--size** - The size of the avatar. _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The container that wraps the avatar's icon.\n- **initials** - The container that wraps the avatar's initials.\n- **image** - The avatar image. Only shown when the `image` attribute is set.",
@@ -2688,6 +2688,11 @@
               "name": "clearable",
               "description": "Adds a clear button when the input is populated.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "normalize",
+              "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+              "value": { "type": "'none' | 'local'", "default": "'none'" }
             }
           ],
           "slots": [
@@ -2851,6 +2856,11 @@
                 "description": "Adds a clear button when the input is populated.",
                 "type": "boolean"
               },
+              {
+                "name": "normalizeMode",
+                "description": "Controls how incoming values with timezone information are normalized.\n- `'none'` (default): Values are passed through as-is with only basic format normalization (e.g. SQL datetime to ISO).\n- `'local'`: Values with timezone indicators (Z, +HH:MM, -HH:MM) and Unix timestamps are converted to local time\n  with the local timezone offset. This is useful when receiving UTC timestamps from APIs and wanting to display\n  them in the user's local time.",
+                "type": "'none' | 'local'"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -3168,7 +3178,7 @@
         },
         {
           "name": "lynk-dropdown",
-          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dropdown opens.\n- **ev-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **ev-hide** - Emitted when the dropdown closes.\n- **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's content.\n- **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **ev-show** - Emitted when the dropdown opens.\n- **ev-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **ev-hide** - Emitted when the dropdown closes.\n- **ev-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's content.\n- **trigger** - The dropdown's trigger, usually a `<lynk-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<sl-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
           "doc-url": "",
           "attributes": [
             {
@@ -4775,7 +4785,7 @@
         },
         {
           "name": "lynk-menu-item",
-          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Events:**\n - **ev-click** - Emitted when a menu item is clicked\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.",
+          "description": "Menu items provide options for the user to pick from in a menu.\n---\n\n\n### **Events:**\n - **ev-click** - Emitted when a menu item is clicked\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The menu item's label.\n- **prefix** - Used to prepend an icon or similar element to the menu item.\n- **suffix** - Used to append an icon or similar element to the menu item.\n- **submenu** - Used to denote a nested menu.\n\n### **CSS Properties:**\n - **--submenu-offset** - The distance submenus shift to overlap the parent menu. _(default: -2px)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **checked-icon** - The checked icon, which is only visible when the menu item is checked.\n- **prefix** - The prefix container.\n- **label** - The menu item label.\n- **suffix** - The suffix container.\n- **spinner** - The spinner that shows when the menu item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **submenu-icon** - The submenu icon, visible only when the menu item has a submenu (not yet implemented).",
           "doc-url": "",
           "attributes": [
             {
@@ -4796,6 +4806,11 @@
               "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "loading",
+              "description": "Draws the menu item in a loading state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Draws the menu item in a disabled state.",
@@ -4811,6 +4826,10 @@
             {
               "name": "suffix",
               "description": "Used to append an icon or similar element to the menu item."
+            },
+            {
+              "name": "submenu",
+              "description": "Used to denote a nested menu."
             }
           ],
           "events": [
@@ -4838,6 +4857,11 @@
                 "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.",
                 "type": "string"
               },
+              {
+                "name": "loading",
+                "description": "Draws the menu item in a loading state.",
+                "type": "boolean"
+              },
               {
                 "name": "disabled",
                 "description": "Draws the menu item in a disabled state.",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uplynk/lynk-design",
   "description": "A library of web components for building web applications with the Uplynk user interface style guide.",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "homepage": "https://lynk.design/",
   "author": "Harley Jessop",
   "license": "SEE LICENSE IN .LICENSE",
@@ -79,7 +79,7 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.2.0",
-    "@floating-ui/dom": "^1.7.5",
+    "@floating-ui/dom": "^1.7.6",
     "@lit/react": "^1.0.8",
     "@shoelace-style/animations": "^1.2.0",
     "@shoelace-style/localize": "^3.2.1",
@@ -91,11 +91,11 @@
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "1.57.0",
-    "@types/color": "^4.2.0",
+    "@types/color": "^4.2.1",
     "@types/mocha": "^10.0.10",
     "@types/react": "^19.2.14",
-    "@typescript-eslint/eslint-plugin": "^8.55.0",
-    "@typescript-eslint/parser": "^8.55.0",
+    "@typescript-eslint/eslint-plugin": "^8.57.1",
+    "@typescript-eslint/parser": "^8.57.1",
     "@web/dev-server-esbuild": "^1.0.5",
     "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
@@ -106,17 +106,17 @@
     "change-case": "^5.4.4",
     "command-line-args": "^6.0.1",
     "comment-parser": "^1.4.5",
-    "cspell": "^9.6.4",
+    "cspell": "^9.7.0",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-vs-code-integration": "^1.5.0",
     "custom-element-vuejs-integration": "^1.4.0",
     "del": "^8.0.1",
     "download": "^8.0.0",
-    "esbuild": "^0.27.3",
+    "esbuild": "^0.27.4",
     "esbuild-plugin-replace": "^1.4.0",
-    "eslint": "^10.0.0",
-    "eslint-plugin-chai-expect": "^3.1.0",
-    "eslint-plugin-chai-friendly": "^1.1.0",
+    "eslint": "^10.0.3",
+    "eslint-plugin-chai-expect": "^4.0.0",
+    "eslint-plugin-chai-friendly": "^1.1.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-lit": "^2.2.1",
     "eslint-plugin-lit-a11y": "^5.1.1",
@@ -124,24 +124,24 @@
     "eslint-plugin-wc": "^3.1.0",
     "front-matter": "^4.0.2",
     "get-port": "^7.1.0",
-    "globby": "^16.1.0",
+    "globby": "^16.1.1",
     "husky": "^9.1.7",
-    "jsdom": "^28.0.0",
-    "lint-staged": "^16.2.7",
+    "jsdom": "^29.0.0",
+    "lint-staged": "^16.4.0",
     "lunr": "^2.3.9",
     "markdown-it-container": "^4.0.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-kbd": "^3.0.2",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-replace-it": "^1.0.0",
-    "npm-check-updates": "^19.3.2",
+    "npm-check-updates": "^19.6.5",
     "ora": "^9.3.0",
     "plop": "^4.0.5",
     "prettier": "^3.8.1",
     "prismjs": "^1.30.0",
     "react": "^19.2.4",
     "recursive-copy": "^2.0.14",
-    "sinon": "^21.0.1",
+    "sinon": "^21.0.3",
     "smartquotes": "^2.3.2",
     "source-map": "^0.7.6",
     "strip-css-comments": "^5.0.0",
@@ -155,5 +155,5 @@
       "prettier --write"
     ]
   },
-  "packageManager": "pnpm@10.29.3"
+  "packageManager": "pnpm@10.32.1"
 }