@uplynk/lynk-design 1.11.1 → 1.11.3

package/cdn/react/tree/index.js

@@ -1,24 +1,24 @@
 import {
   tree_default
-} from "../../chunks/chunk.HDPQWIML.js";
-import "../../chunks/chunk.GNPZZMXV.js";
+} from "../../chunks/chunk.ICXR5N4J.js";
+import "../../chunks/chunk.S2WW5JMH.js";
 import "../../chunks/chunk.RUOAOQIU.js";
-import "../../chunks/chunk.F5UP76LN.js";
-import "../../chunks/chunk.DLCO7X2W.js";
+import "../../chunks/chunk.FUYNCNGW.js";
+import "../../chunks/chunk.3E4VGRJI.js";
 import "../../chunks/chunk.HF7GESMZ.js";
-import "../../chunks/chunk.OYK47NRX.js";
+import "../../chunks/chunk.3NIKFQUD.js";
 import "../../chunks/chunk.74H6X2VH.js";
 import "../../chunks/chunk.UDBTSFT6.js";
 import "../../chunks/chunk.74D2ZUAN.js";
 import "../../chunks/chunk.G4EGOHGJ.js";
-import "../../chunks/chunk.2Z5ZYVEU.js";
+import "../../chunks/chunk.VS4RHZSK.js";
 import "../../chunks/chunk.52NG72GJ.js";
 import "../../chunks/chunk.2LNQMRJE.js";
 import "../../chunks/chunk.ONECFZZX.js";
 import "../../chunks/chunk.JSLXCIMZ.js";
 import "../../chunks/chunk.VS2OBD6I.js";
 import "../../chunks/chunk.FYVOT65L.js";
-import "../../chunks/chunk.XVR7M5CE.js";
+import "../../chunks/chunk.IWR5L5US.js";
 import "../../chunks/chunk.ZGZZZ6WN.js";
 import "../../chunks/chunk.76AUAX6M.js";
 import "../../chunks/chunk.MBGTEG7M.js";
@@ -26,11 +26,11 @@ import "../../chunks/chunk.325EGD4Y.js";
 import "../../chunks/chunk.ZTDXF4HQ.js";
 import "../../chunks/chunk.XQGSWNOO.js";
 import "../../chunks/chunk.OW5NIGGX.js";
-import "../../chunks/chunk.RB5L7E7Z.js";
 import "../../chunks/chunk.YOMDZYX5.js";
 import "../../chunks/chunk.BB43Q4ZV.js";
 import "../../chunks/chunk.VXKMS4DN.js";
-import "../../chunks/chunk.PIQ7PU74.js";
+import "../../chunks/chunk.RB5L7E7Z.js";
+import "../../chunks/chunk.OZC3U74R.js";
 import "../../chunks/chunk.ADWNFIQR.js";
 import "../../chunks/chunk.BW3AXSF6.js";
 import "../../chunks/chunk.QIOX6AG5.js";

package/cdn/react/tree-item/index.d.ts

@@ -38,6 +38,7 @@ export type { LynkLazyLoadEvent } from '../../events/events.js';
  * @csspart base - The component's base wrapper.
  * @csspart item - The tree item's container. This element wraps everything except slotted tree item children.
  * @csspart item--disabled - Applied when the tree item is disabled.
+ * @csspart item--readonly - Applied when the tree item is readonly.
  * @csspart item--expanded - Applied when the tree item is expanded.
  * @csspart item--indeterminate - Applied when the selection is indeterminate.
  * @csspart item--selected - Applied when the tree item is selected.

package/cdn/react/tree-item/index.js

@@ -1,21 +1,21 @@
 import {
   tree_item_default
-} from "../../chunks/chunk.7CCIDSX3.js";
-import "../../chunks/chunk.F5UP76LN.js";
-import "../../chunks/chunk.DLCO7X2W.js";
-import "../../chunks/chunk.OYK47NRX.js";
+} from "../../chunks/chunk.M3UNDBHF.js";
+import "../../chunks/chunk.FUYNCNGW.js";
+import "../../chunks/chunk.3E4VGRJI.js";
+import "../../chunks/chunk.3NIKFQUD.js";
 import "../../chunks/chunk.74H6X2VH.js";
 import "../../chunks/chunk.UDBTSFT6.js";
 import "../../chunks/chunk.74D2ZUAN.js";
 import "../../chunks/chunk.G4EGOHGJ.js";
-import "../../chunks/chunk.2Z5ZYVEU.js";
+import "../../chunks/chunk.VS4RHZSK.js";
 import "../../chunks/chunk.52NG72GJ.js";
 import "../../chunks/chunk.2LNQMRJE.js";
 import "../../chunks/chunk.ONECFZZX.js";
 import "../../chunks/chunk.JSLXCIMZ.js";
 import "../../chunks/chunk.VS2OBD6I.js";
 import "../../chunks/chunk.FYVOT65L.js";
-import "../../chunks/chunk.XVR7M5CE.js";
+import "../../chunks/chunk.IWR5L5US.js";
 import "../../chunks/chunk.ZGZZZ6WN.js";
 import "../../chunks/chunk.76AUAX6M.js";
 import "../../chunks/chunk.MBGTEG7M.js";
@@ -23,11 +23,11 @@ import "../../chunks/chunk.325EGD4Y.js";
 import "../../chunks/chunk.ZTDXF4HQ.js";
 import "../../chunks/chunk.XQGSWNOO.js";
 import "../../chunks/chunk.OW5NIGGX.js";
-import "../../chunks/chunk.RB5L7E7Z.js";
 import "../../chunks/chunk.YOMDZYX5.js";
 import "../../chunks/chunk.BB43Q4ZV.js";
 import "../../chunks/chunk.VXKMS4DN.js";
-import "../../chunks/chunk.PIQ7PU74.js";
+import "../../chunks/chunk.RB5L7E7Z.js";
+import "../../chunks/chunk.OZC3U74R.js";
 import "../../chunks/chunk.ADWNFIQR.js";
 import "../../chunks/chunk.BW3AXSF6.js";
 import "../../chunks/chunk.QIOX6AG5.js";

package/cdn/react/truncate/index.js

@@ -1,11 +1,11 @@
 import {
   truncate_default
-} from "../../chunks/chunk.DUYYFD73.js";
-import "../../chunks/chunk.PXG4VPTV.js";
+} from "../../chunks/chunk.2F2PNR7Y.js";
+import "../../chunks/chunk.5GSXGFWD.js";
 import "../../chunks/chunk.46M22A57.js";
 import "../../chunks/chunk.BB43Q4ZV.js";
 import "../../chunks/chunk.VXKMS4DN.js";
-import "../../chunks/chunk.PIQ7PU74.js";
+import "../../chunks/chunk.OZC3U74R.js";
 import "../../chunks/chunk.ADWNFIQR.js";
 import "../../chunks/chunk.BW3AXSF6.js";
 import "../../chunks/chunk.QIOX6AG5.js";

package/cdn/react/visually-hidden/index.js

@@ -1,9 +1,9 @@
 import {
   visually_hidden_default
-} from "../../chunks/chunk.Y43VV6ZU.js";
-import "../../chunks/chunk.VEZ5DAI3.js";
+} from "../../chunks/chunk.KV3UDLSL.js";
+import "../../chunks/chunk.P3TMTEKG.js";
 import "../../chunks/chunk.QWI3BPEG.js";
-import "../../chunks/chunk.PIQ7PU74.js";
+import "../../chunks/chunk.OZC3U74R.js";
 import "../../chunks/chunk.ADWNFIQR.js";
 import "../../chunks/chunk.BW3AXSF6.js";
 import "../../chunks/chunk.QIOX6AG5.js";

package/cdn/react/wisp/index.js

@@ -1,11 +1,11 @@
 import {
   wisp_default
-} from "../../chunks/chunk.HOOF23NC.js";
-import "../../chunks/chunk.JXSIANTO.js";
+} from "../../chunks/chunk.FWBDYLZN.js";
+import "../../chunks/chunk.JD7LPC5W.js";
 import "../../chunks/chunk.EA4MTWML.js";
 import "../../chunks/chunk.BB43Q4ZV.js";
 import "../../chunks/chunk.VXKMS4DN.js";
-import "../../chunks/chunk.PIQ7PU74.js";
+import "../../chunks/chunk.OZC3U74R.js";
 import "../../chunks/chunk.ADWNFIQR.js";
 import "../../chunks/chunk.BW3AXSF6.js";
 import "../../chunks/chunk.QIOX6AG5.js";

package/cdn/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,15 +100,6 @@ 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"];
@@ -177,6 +168,15 @@ 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"];
@@ -2362,6 +2362,8 @@ type LynkTreeItemProps = {
   selected?: LynkTreeItem["selected"];
   /** Disables the tree item. */
   disabled?: LynkTreeItem["disabled"];
+  /** Makes the tree item readonly. The item cannot be selected but can still be expanded/collapsed. */
+  readonly?: LynkTreeItem["readonly"];
   /** Enables lazy loading behavior. */
   lazy?: LynkTreeItem["lazy"];
   /**  */
@@ -2432,23 +2434,6 @@ 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.
    * ---
@@ -2504,6 +2489,23 @@ 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.
    * ---
@@ -4540,6 +4542,7 @@ export type CustomElements = {
    *  - **base** - The component's base wrapper.
    * - **item** - The tree item's container. This element wraps everything except slotted tree item children.
    * - **item--disabled** - Applied when the tree item is disabled.
+   * - **item--readonly** - Applied when the tree item is readonly.
    * - **item--expanded** - Applied when the tree item is expanded.
    * - **item--indeterminate** - Applied when the selection is indeterminate.
    * - **item--selected** - Applied when the tree item is selected.

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

@@ -33,33 +33,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-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.",
@@ -171,6 +144,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-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.",
@@ -4489,7 +4489,7 @@
     },
     {
       "name": "lynk-tree-item",
-      "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the tree item expands.\n- **ev-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ev-collapse** - Emitted when the tree item collapses.\n- **ev-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ev-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ev-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
+      "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the tree item expands.\n- **ev-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ev-collapse** - Emitted when the tree item collapses.\n- **ev-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ev-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ev-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--readonly** - Applied when the tree item is readonly.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
       "attributes": [
         {
           "name": "expanded",
@@ -4506,6 +4506,11 @@
           "description": "Disables the tree item.",
           "values": []
         },
+        {
+          "name": "readonly",
+          "description": "Makes the tree item readonly. The item cannot be selected but can still be expanded/collapsed.",
+          "values": []
+        },
         {
           "name": "lazy",
           "description": "Enables lazy loading behavior.",

package/cdn/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.1",
+  "version": "1.11.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -49,53 +49,6 @@
             "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.",
@@ -370,6 +323,53 @@
             ]
           }
         },
+        {
+          "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.",
@@ -9565,7 +9565,7 @@
         },
         {
           "name": "lynk-tree-item",
-          "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the tree item expands.\n- **ev-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ev-collapse** - Emitted when the tree item collapses.\n- **ev-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ev-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ev-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
+          "description": "A tree item serves as a hierarchical node that lives inside a [tree](/components/tree).\n---\n\n\n### **Events:**\n - **ev-expand** - Emitted when the tree item expands.\n- **ev-after-expand** - Emitted after the tree item expands and all animations are complete.\n- **ev-collapse** - Emitted when the tree item collapses.\n- **ev-after-collapse** - Emitted after the tree item collapses and all animations are complete.\n- **ev-lazy-change** - Emitted when the tree item's lazy state changes.\n- **ev-lazy-load** - Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the `lazy` attribute to remove the loading state and update the tree.\n\n### **Methods:**\n - **getChildrenItems({ includeDisabled = true }: _{ includeDisabled?: boolean }_): _LynkTreeItem[]_** - Gets all the nested tree items in this node.\n\n### **Slots:**\n - _default_ - The default slot.\n- **expand-icon** - The icon to show when the tree item is expanded.\n- **collapse-icon** - The icon to show when the tree item is collapsed.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **item** - The tree item's container. This element wraps everything except slotted tree item children.\n- **item--disabled** - Applied when the tree item is disabled.\n- **item--readonly** - Applied when the tree item is readonly.\n- **item--expanded** - Applied when the tree item is expanded.\n- **item--indeterminate** - Applied when the selection is indeterminate.\n- **item--selected** - Applied when the tree item is selected.\n- **indentation** - The tree item's indentation container.\n- **expand-button** - The container that wraps the tree item's expand button and spinner.\n- **spinner** - The spinner that shows when a lazy tree item is in the loading state.\n- **spinner__base** - The spinner's base part.\n- **label** - The tree item's label.\n- **children** - The container that wraps the tree item's nested children.\n- **checkbox** - The checkbox that shows when using multiselect.\n- **checkbox__base** - The checkbox's exported `base` part.\n- **checkbox__control** - The checkbox's exported `control` part.\n- **checkbox__control--checked** - The checkbox's exported `control--checked` part.\n- **checkbox__control--indeterminate** - The checkbox's exported `control--indeterminate` part.\n- **checkbox__checked-icon** - The checkbox's exported `checked-icon` part.\n- **checkbox__indeterminate-icon** - The checkbox's exported `indeterminate-icon` part.\n- **checkbox__label** - The checkbox's exported `label` part.",
           "doc-url": "",
           "attributes": [
             {
@@ -9583,6 +9583,11 @@
               "description": "Disables the tree item.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "readonly",
+              "description": "Makes the tree item readonly. The item cannot be selected but can still be expanded/collapsed.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "lazy",
               "description": "Enables lazy loading behavior.",
@@ -9647,6 +9652,11 @@
                 "description": "Disables the tree item.",
                 "type": "boolean"
               },
+              {
+                "name": "readonly",
+                "description": "Makes the tree item readonly. The item cannot be selected but can still be expanded/collapsed.",
+                "type": "boolean"
+              },
               {
                 "name": "lazy",
                 "description": "Enables lazy loading behavior.",

package/dist/chunks/chunk.23GIWWSU.js

@@ -0,0 +1,24 @@
+import {
+  LynkTag
+} from "./chunk.DBRJ7PJR.js";
+
+// src/react/tag/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "lynk-tag";
+LynkTag.define("lynk-tag");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: LynkTag,
+  react: React,
+  events: {
+    EvRemove: "ev-remove"
+  },
+  displayName: "LynkTag"
+});
+var tag_default = reactWrapper;
+
+export {
+  tag_default
+};

package/dist/chunks/chunk.23HPDV2C.js

@@ -0,0 +1,111 @@
+import {
+  mutation_observer_styles_default
+} from "./chunk.2W6X55FG.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.DEGSHN2L.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/mutation-observer/mutation-observer.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkMutationObserver = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.attrOldValue = false;
+    this.charData = false;
+    this.charDataOldValue = false;
+    this.childList = false;
+    this.disabled = false;
+    this.handleMutation = (mutationList) => {
+      this.emit("ev-mutation", {
+        detail: { mutationList }
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.mutationObserver = new MutationObserver(this.handleMutation);
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  startObserver() {
+    const observeAttributes = typeof this.attr === "string" && this.attr.length > 0;
+    const attributeFilter = observeAttributes && this.attr !== "*" ? this.attr.split(" ") : void 0;
+    try {
+      this.mutationObserver.observe(this, {
+        subtree: true,
+        childList: this.childList,
+        attributes: observeAttributes,
+        attributeFilter,
+        attributeOldValue: this.attrOldValue,
+        characterData: this.charData,
+        characterDataOldValue: this.charDataOldValue
+      });
+    } catch (e) {
+    }
+  }
+  stopObserver() {
+    this.mutationObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  handleChange() {
+    this.stopObserver();
+    this.startObserver();
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+LynkMutationObserver.styles = [component_styles_default, mutation_observer_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], LynkMutationObserver.prototype, "attr", 2);
+__decorateClass([
+  property({ attribute: "attr-old-value", type: Boolean, reflect: true })
+], LynkMutationObserver.prototype, "attrOldValue", 2);
+__decorateClass([
+  property({ attribute: "char-data", type: Boolean, reflect: true })
+], LynkMutationObserver.prototype, "charData", 2);
+__decorateClass([
+  property({ attribute: "char-data-old-value", type: Boolean, reflect: true })
+], LynkMutationObserver.prototype, "charDataOldValue", 2);
+__decorateClass([
+  property({ attribute: "child-list", type: Boolean, reflect: true })
+], LynkMutationObserver.prototype, "childList", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkMutationObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], LynkMutationObserver.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("attr", { waitUntilFirstUpdate: true }),
+  watch("attr-old-value", { waitUntilFirstUpdate: true }),
+  watch("char-data", { waitUntilFirstUpdate: true }),
+  watch("char-data-old-value", { waitUntilFirstUpdate: true }),
+  watch("childList", { waitUntilFirstUpdate: true })
+], LynkMutationObserver.prototype, "handleChange", 1);
+
+export {
+  LynkMutationObserver
+};