@uplynk/lynk-design 1.17.0 → 1.17.1

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

@@ -1,20 +1,20 @@
 import {
   tree_item_default
-} from "../../chunks/chunk.6KIRQ6OP.js";
-import "../../chunks/chunk.SA2NOVMV.js";
+} from "../../chunks/chunk.E2NXNXHK.js";
+import "../../chunks/chunk.SNFF4OSO.js";
 import "../../chunks/chunk.BCKYPNNK.js";
-import "../../chunks/chunk.X4L5M6UU.js";
+import "../../chunks/chunk.MEPQUO34.js";
 import "../../chunks/chunk.EXYXB64C.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.66FHFCF6.js";
-import "../../chunks/chunk.7SF5L2IC.js";
+import "../../chunks/chunk.Y3FOOVFE.js";
 import "../../chunks/chunk.A7I3LAZL.js";
 import "../../chunks/chunk.HGPZOHO6.js";
 import "../../chunks/chunk.5SGOC3ZM.js";
 import "../../chunks/chunk.SPWJX47D.js";
 import "../../chunks/chunk.NJBJM2FD.js";
 import "../../chunks/chunk.3DOFV6GR.js";
-import "../../chunks/chunk.MFQRG6PF.js";
+import "../../chunks/chunk.FBFDH3EB.js";
 import "../../chunks/chunk.UL4VYCAE.js";
 import "../../chunks/chunk.F6KAX7QU.js";
 import "../../chunks/chunk.MBGTEG7M.js";
@@ -22,7 +22,7 @@ import "../../chunks/chunk.3OJGCEAO.js";
 import "../../chunks/chunk.OW5NIGGX.js";
 import "../../chunks/chunk.GQZ7EGMM.js";
 import "../../chunks/chunk.YOMDZYX5.js";
-import "../../chunks/chunk.V4JS4TJ7.js";
+import "../../chunks/chunk.TIGM5LWI.js";
 import "../../chunks/chunk.Y7724W4D.js";
 import "../../chunks/chunk.Q44EX5TP.js";
 export {

package/dist/react/truncate/index.js

@@ -1,9 +1,9 @@
 import {
   truncate_default
-} from "../../chunks/chunk.C6RDWK7W.js";
-import "../../chunks/chunk.4OEMFZHB.js";
+} from "../../chunks/chunk.VZTJK2FX.js";
+import "../../chunks/chunk.MVXAR2BF.js";
 import "../../chunks/chunk.GJSBWWXK.js";
-import "../../chunks/chunk.V4JS4TJ7.js";
+import "../../chunks/chunk.TIGM5LWI.js";
 import "../../chunks/chunk.Y7724W4D.js";
 import "../../chunks/chunk.Q44EX5TP.js";
 export {

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

@@ -1,9 +1,9 @@
 import {
   visually_hidden_default
-} from "../../chunks/chunk.XQV67LMN.js";
-import "../../chunks/chunk.5DYOLD7S.js";
+} from "../../chunks/chunk.7BRPOBFU.js";
+import "../../chunks/chunk.XOXZ4A26.js";
 import "../../chunks/chunk.YKKSQ2FG.js";
-import "../../chunks/chunk.V4JS4TJ7.js";
+import "../../chunks/chunk.TIGM5LWI.js";
 import "../../chunks/chunk.Y7724W4D.js";
 import "../../chunks/chunk.Q44EX5TP.js";
 export {

package/dist/react/wisp/index.js

@@ -1,9 +1,9 @@
 import {
   wisp_default
-} from "../../chunks/chunk.PCLZOZPS.js";
-import "../../chunks/chunk.YJX7IE25.js";
+} from "../../chunks/chunk.AKHRP7DH.js";
+import "../../chunks/chunk.7PIQSXTK.js";
 import "../../chunks/chunk.LOOPWOZG.js";
-import "../../chunks/chunk.V4JS4TJ7.js";
+import "../../chunks/chunk.TIGM5LWI.js";
 import "../../chunks/chunk.Y7724W4D.js";
 import "../../chunks/chunk.Q44EX5TP.js";
 export {

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

@@ -1,12 +1,12 @@
 import type { DefineComponent } from "vue";
 
 import type { LynkAccordion } from "../../components/accordion/accordion.component.js";
-import type { LynkAlert } from "../../components/alert/alert.component.js";
 import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.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";
+import type { LynkAvatar } from "../../components/avatar/avatar.component.js";
+import type { LynkAlert } from "../../components/alert/alert.component.js";
+import type { LynkAnimation } from "../../components/animation/animation.component.js";
 import type { LynkBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { LynkBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { LynkButton } from "../../components/button/button.component.js";
@@ -26,8 +26,8 @@ import type { LynkDialog } from "../../components/dialog/dialog.component.js";
 import type { LynkDivider } from "../../components/divider/divider.component.js";
 import type { LynkDrawer } from "../../components/drawer/drawer.component.js";
 import type { LynkDropdown } from "../../components/dropdown/dropdown.component.js";
-import type { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { LynkFlank } from "../../components/flank/flank.component.js";
+import type { LynkFormField } from "../../components/form-field/form-field.component.js";
 import type { LynkFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { LynkFormatDate } from "../../components/format-date/format-date.component.js";
 import type { LynkFormatNumber } from "../../components/format-number/format-number.component.js";
@@ -101,6 +101,42 @@ 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 LynkBadgeProps = {
+  /** The badge's variant. */
+  type?: LynkBadge["type"];
+  /** Draws a pill-style badge with rounded edges. */
+  pill?: LynkBadge["pill"];
+  /** Makes the badge pulsate to draw attention. */
+  pulse?: LynkBadge["pulse"];
+};
+
+type LynkBoxProps = {};
+
+type LynkAvatarProps = {
+  /** The image source to use for the avatar. */
+  image?: LynkAvatar["image"];
+  /** A label to use to describe the avatar to assistive devices. */
+  label?: LynkAvatar["label"];
+  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
+  initials?: LynkAvatar["initials"];
+  /** Indicates how the browser should load the image. */
+  loading?: LynkAvatar["loading"];
+  /** The shape of the avatar. */
+  shape?: LynkAvatar["shape"];
+
+  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
+  "onev-error"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkAlertProps = {
   /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
   open?: LynkAlert["open"];
@@ -128,15 +164,6 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onev-after-hide"?: (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 LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -178,33 +205,6 @@ value can be changed without causing the animation to restart. */
   "onev-start"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkAvatarProps = {
-  /** The image source to use for the avatar. */
-  image?: LynkAvatar["image"];
-  /** A label to use to describe the avatar to assistive devices. */
-  label?: LynkAvatar["label"];
-  /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
-  initials?: LynkAvatar["initials"];
-  /** Indicates how the browser should load the image. */
-  loading?: LynkAvatar["loading"];
-  /** The shape of the avatar. */
-  shape?: LynkAvatar["shape"];
-
-  /** The image could not be loaded. This may because of an invalid URL, a temporary network condition, or some unknown cause. */
-  "onev-error"?: (e: CustomEvent<never>) => void;
-};
-
-type LynkBadgeProps = {
-  /** The badge's variant. */
-  type?: LynkBadge["type"];
-  /** Draws a pill-style badge with rounded edges. */
-  pill?: LynkBadge["pill"];
-  /** Makes the badge pulsate to draw attention. */
-  pulse?: LynkBadge["pulse"];
-};
-
-type LynkBoxProps = {};
-
 type LynkBreadcrumbProps = {
   /** The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users. */
@@ -952,6 +952,17 @@ components that use a dropdown internally. */
   "onev-after-hide"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkFlankProps = {
+  /** Flank from first item */
+  start?: LynkFlank["start"];
+  /** Flank from the last item */
+  end?: LynkFlank["end"];
+  /** How to align flanked items to each-other */
+  align?: LynkFlank["align"];
+  /** The space between flanked items. Use spacing tokens or any custom size. */
+  gap?: LynkFlank["gap"];
+};
+
 type LynkFormFieldProps = {
   /** The fields's styled validity state */
   state?: LynkFormField["state"];
@@ -987,17 +998,6 @@ type LynkFormFieldProps = {
   "onev-blur"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkFlankProps = {
-  /** Flank from first item */
-  start?: LynkFlank["start"];
-  /** Flank from the last item */
-  end?: LynkFlank["end"];
-  /** How to align flanked items to each-other */
-  align?: LynkFlank["align"];
-  /** The space between flanked items. Use spacing tokens or any custom size. */
-  gap?: LynkFlank["gap"];
-};
-
 type LynkFormatBytesProps = {
   /** The number to format in bytes. */
   value?: LynkFormatBytes["value"];
@@ -2577,76 +2577,64 @@ export type CustomElements = {
   "lynk-accordion": DefineComponent<LynkAccordionProps>;
 
   /**
-   * Alerts are used to display important messages inline or as toast notifications.
+   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **ev-show** - Emitted when the alert opens.
-   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
-   * - **ev-hide** - Emitted when the alert closes.
-   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
-   *
-   * ### **Methods:**
-   *  - **show()** - Shows the alert.
-   * - **hide()** - Hides the alert
-   * - **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
-   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
-   * calling this method again. The returned promise will resolve after the alert is hidden.
-   *
    * ### **Slots:**
-   *  - _default_ - The alert's content.
-   * - **icon** - An icon to show in the alert.
-   * - **action** - Append custom actions to alert.
+   *  - _default_ - The default slot.
    *
    * ### **CSS Properties:**
-   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
-   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
+   *  - **--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 block wrapper.
-   * - **icon** - The container that wraps the alert icon.
-   * - **message** - The alert message.
-   * - **close-button** - The close button.
-   * - **close-button__base** - The close button's `base` part.
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-alert": DefineComponent<LynkAlertProps>;
+  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
 
   /**
-   * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
+   * Badges are used to draw attention and display statuses or counts.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The default slot.
+   *  - _default_ - The badge's content.
    *
    * ### **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)_
+   *  - **--background-color** - The badges background and pulse color. _(default: undefined)_
+   * - **--color** - The badges text color. _(default: undefined)_
+   * - **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_
    *
    * ### **CSS Parts:**
    *  - **base** - The component's internal wrapper.
    */
-  "lynk-auto-grid": DefineComponent<LynkAutoGridProps>;
+  "lynk-badge": DefineComponent<LynkBadgeProps>;
 
   /**
-   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+   *
    * ---
    *
    *
-   * ### **Events:**
-   *  - **ev-cancel** - Emitted when the animation is canceled.
-   * - **ev-finish** - Emitted when the animation finishes.
-   * - **ev-start** - Emitted when the animation starts or restarts.
+   * ### **Slots:**
+   *  - _default_ - The default slot.
    *
-   * ### **Methods:**
-   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
-   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
+   * ### **CSS Properties:**
+   *  - **--align** - Custom text align (left, center, right). _(default: left)_
+   * - **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_
+   * - **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_
+   * - **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_
+   * - **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_
+   * - **--height** - Any custom px, rem, %, or vh value. _(default: auto)_
+   * - **--width** - Any custom px, rem, %, or vh value. _(default: auto)_
+   * - **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
+   * - **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
+   * - **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_
    *
-   * ### **Slots:**
-   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
    */
-  "lynk-animation": DefineComponent<LynkAnimationProps>;
+  "lynk-box": DefineComponent<LynkBoxProps>;
 
   /**
    * Avatars are used to represent a person or object.
@@ -2670,47 +2658,59 @@ export type CustomElements = {
   "lynk-avatar": DefineComponent<LynkAvatarProps>;
 
   /**
-   * Badges are used to draw attention and display statuses or counts.
+   * Alerts are used to display important messages inline or as toast notifications.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **ev-show** - Emitted when the alert opens.
+   * - **ev-after-show** - Emitted after the alert opens and all animations are complete.
+   * - **ev-hide** - Emitted when the alert closes.
+   * - **ev-after-hide** - Emitted after the alert closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the alert.
+   * - **hide()** - Hides the alert
+   * - **toast()** - Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   *
    * ### **Slots:**
-   *  - _default_ - The badge's content.
+   *  - _default_ - The alert's content.
+   * - **icon** - An icon to show in the alert.
+   * - **action** - Append custom actions to alert.
    *
    * ### **CSS Properties:**
-   *  - **--background-color** - The badges background and pulse color. _(default: undefined)_
-   * - **--color** - The badges text color. _(default: undefined)_
-   * - **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_
+   *  - **--box-shadow** - The alert's box shadow. _(default: undefined)_
+   * - **--padding** - The top and bottom padding of the message. Use any spacing token (--lynk-spacing-large) or a custom value. _(default: undefined)_
    *
    * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   *  - **base** - The component's internal block wrapper.
+   * - **icon** - The container that wraps the alert icon.
+   * - **message** - The alert message.
+   * - **close-button** - The close button.
+   * - **close-button__base** - The close button's `base` part.
    */
-  "lynk-badge": DefineComponent<LynkBadgeProps>;
+  "lynk-alert": DefineComponent<LynkAlertProps>;
 
   /**
-   *
+   * Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
+   * ### **Events:**
+   *  - **ev-cancel** - Emitted when the animation is canceled.
+   * - **ev-finish** - Emitted when the animation finishes.
+   * - **ev-start** - Emitted when the animation starts or restarts.
    *
-   * ### **CSS Properties:**
-   *  - **--align** - Custom text align (left, center, right). _(default: left)_
-   * - **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_
-   * - **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_
-   * - **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_
-   * - **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_
-   * - **--height** - Any custom px, rem, %, or vh value. _(default: auto)_
-   * - **--width** - Any custom px, rem, %, or vh value. _(default: auto)_
-   * - **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
-   * - **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_
-   * - **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_
+   * ### **Methods:**
+   *  - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.
+   * - **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.
    *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
+   * ### **Slots:**
+   *  - _default_ - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<lynk-animation>` elements.
    */
-  "lynk-box": DefineComponent<LynkBoxProps>;
+  "lynk-animation": DefineComponent<LynkAnimationProps>;
 
   /**
    * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
@@ -3313,6 +3313,22 @@ export type CustomElements = {
    */
   "lynk-dropdown": DefineComponent<LynkDropdownProps>;
 
+  /**
+   * Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The default slot.
+   *
+   * ### **CSS Properties:**
+   *  - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   */
+  "lynk-flank": DefineComponent<LynkFlankProps>;
+
   /**
    * A standalone or wrapper component for all lynk form components. Handles basic label, help-tip, and help-text styles.
    * ---
@@ -3340,22 +3356,6 @@ export type CustomElements = {
    */
   "lynk-form-field": DefineComponent<LynkFormFieldProps>;
 
-  /**
-   * Position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space..
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The default slot.
-   *
-   * ### **CSS Properties:**
-   *  - **--gap** - Customize the gap of the flank group. _(default: var(--lynk-spacing-small))_
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   */
-  "lynk-flank": DefineComponent<LynkFlankProps>;
-
   /**
    * Formats a number as a human readable bytes value.
    * ---