@uplynk/lynk-design 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -33,6 +33,50 @@
         }
       ]
     },
+    {
+      "name": "lynk-alert",
+      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **on:show** - Emitted when the alert opens.\n- **after:show** - Emitted after the alert opens and all animations are complete.\n- **on:hide** - Emitted when the alert closes.\n- **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.",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
+          "values": []
+        },
+        {
+          "name": "closable",
+          "description": "Makes the alert closable.",
+          "values": []
+        },
+        {
+          "name": "type",
+          "description": "The alert's type (color).",
+          "values": [
+            { "name": "primary" },
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "neutral" },
+            { "name": "warning" },
+            { "name": "danger" }
+          ]
+        },
+        {
+          "name": "duration",
+          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
+          "values": []
+        },
+        {
+          "name": "countdown",
+          "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
+          "values": [{ "name": "rtl" }, { "name": "ltr" }]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/alert"
+        }
+      ]
+    },
     {
       "name": "lynk-animation",
       "description": "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).\n---\n\n\n### **Events:**\n - **on:cancel** - Emitted when the animation is canceled.\n- **on:finish** - Emitted when the animation finishes.\n- **on:start** - Emitted when the animation starts or restarts.\n\n### **Methods:**\n - **cancel()** - Clears all KeyframeEffects caused by this animation and aborts its playback.\n- **finish()** - Sets the playback time to the end of the animation corresponding to the current playback direction.\n\n### **Slots:**\n - _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.",
@@ -100,50 +144,6 @@
         }
       ]
     },
-    {
-      "name": "lynk-alert",
-      "description": "Alerts are used to display important messages inline or as toast notifications.\n---\n\n\n### **Events:**\n - **on:show** - Emitted when the alert opens.\n- **after:show** - Emitted after the alert opens and all animations are complete.\n- **on:hide** - Emitted when the alert closes.\n- **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.",
-      "attributes": [
-        {
-          "name": "open",
-          "description": "Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods.",
-          "values": []
-        },
-        {
-          "name": "closable",
-          "description": "Makes the alert closable.",
-          "values": []
-        },
-        {
-          "name": "type",
-          "description": "The alert's type (color).",
-          "values": [
-            { "name": "primary" },
-            { "name": "info" },
-            { "name": "success" },
-            { "name": "neutral" },
-            { "name": "warning" },
-            { "name": "danger" }
-          ]
-        },
-        {
-          "name": "duration",
-          "description": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.",
-          "values": []
-        },
-        {
-          "name": "countdown",
-          "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
-          "values": [{ "name": "rtl" }, { "name": "ltr" }]
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://lynk.design/components/alert"
-        }
-      ]
-    },
     {
       "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.",
@@ -180,10 +180,12 @@
           "description": "The badge's variant.",
           "values": [
             { "name": "primary" },
+            { "name": "accent" },
             { "name": "success" },
             { "name": "neutral" },
             { "name": "warning" },
-            { "name": "danger" }
+            { "name": "danger" },
+            { "name": "info" }
           ]
         },
         {
@@ -212,23 +214,6 @@
         { "name": "Documentation", "url": "https://lynk.design/components/box" }
       ]
     },
-    {
-      "name": "lynk-breadcrumb",
-      "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://lynk.design/components/breadcrumb"
-        }
-      ]
-    },
     {
       "name": "lynk-breadcrumb-item",
       "description": "Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.\n---\n\n\n### **Slots:**\n - _default_ - The breadcrumb item's label.\n- **prefix** - An optional prefix, usually an icon or icon button.\n- **suffix** - An optional suffix, usually an icon or icon button.\n- **separator** - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on `<lynk-breadcrumb>` instead.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The breadcrumb item's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **separator** - The container that wraps the separator.",
@@ -261,6 +246,23 @@
         }
       ]
     },
+    {
+      "name": "lynk-breadcrumb",
+      "description": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n---\n\n\n### **Slots:**\n - _default_ - One or more breadcrumb items to display.\n- **separator** - The separator to use between breadcrumb items. Works best with `<lynk-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/breadcrumb"
+        }
+      ]
+    },
     {
       "name": "lynk-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **on:blur** - Emitted when the button loses focus.\n- **on:click** - Emitted when the button is clicked.\n- **on:focus** - Emitted when the button gains focus.\n- **on:invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied..\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\n- **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - Used to prepend an icon or similar element to the button.\n- **suffix** - Used to append an icon or similar element to the button.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **prefix** - The prefix slot's container.\n- **label** - The button's label.\n- **suffix** - The suffix slot's container.\n- **caret** - The button's caret.",
@@ -270,12 +272,15 @@
           "name": "color",
           "description": "The button's color.",
           "values": [
+            { "name": "" },
             { "name": "default" },
             { "name": "primary" },
+            { "name": "accent" },
             { "name": "success" },
             { "name": "neutral" },
             { "name": "warning" },
             { "name": "danger" },
+            { "name": "info" },
             { "name": "text" }
           ]
         },
@@ -456,9 +461,11 @@
           "description": "Draws the table row using status colors",
           "values": [
             { "name": "primary" },
+            { "name": "accent" },
             { "name": "danger" },
             { "name": "success" },
             { "name": "warning" },
+            { "name": "info" },
             { "name": "neutral" }
           ]
         },
@@ -562,6 +569,115 @@
         }
       ]
     },
+    {
+      "name": "lynk-combobox",
+      "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **on:change** - Emitted when the control's value changes.\n- **on:clear** - Emitted when the control's value is cleared.\n- **on:input** - Emitted when the control receives input.\n- **on:focus** - Emitted when the control gains focus.\n- **on:blur** - Emitted when the control loses focus.\n- **on:show** - Emitted when the combobox's menu opens.\n- **after:show** - Emitted after the combobox's menu opens and all animations are complete.\n- **on:hide** - Emitted when the combobox's menu closes.\n- **after:hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **on:invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **on:error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no\nappropriate filtered options, a on:error is emitted and the listbox stays closed.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the combobox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "state",
+          "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
+          "values": [
+            { "name": "error" },
+            { "name": "warning" },
+            { "name": "success" },
+            { "name": "default" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "The combobox's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text to show as a hint when the combobox is empty.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the combobox control.",
+          "values": []
+        },
+        {
+          "name": "clearable",
+          "description": "Adds a clear button when the combobox is not empty.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "Indicates whether or not the combobox is open.\nYou can toggle this attribute to show and hide the listbox, or you can use the `show()`\nand `hide()` methods and this attribute will reflect the combobox's open state.",
+          "values": []
+        },
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the listbox from being clipped,\nwhen the component is placed inside a container with `overflow: auto|scroll`.\nHoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "placement",
+          "description": "The preferred placement of the combobox's menu.\nNote that the actual placement may vary as needed to keep the listbox inside of the viewport.",
+          "values": [{ "name": "top" }, { "name": "bottom" }]
+        },
+        {
+          "name": "help-tip",
+          "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`.\nThe form must be in the same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "The combobox's required attribute.",
+          "values": []
+        },
+        {
+          "name": "getOption",
+          "description": "A function that customizes the rendered option. The first argument is the option, the second\nis the query string, which is typed into the combobox.\nThe function should return either a Lit TemplateResult or a string containing trusted HTML\nto render in the shown list of filtered options.\nIf the query string should be highlighted use the `highlightOptionRenderer` function.",
+          "values": [{ "name": "OptionRenderer" }]
+        },
+        {
+          "name": "filter",
+          "description": "A function used to filter options in the combobox component.\nThe default filter method is a case- and diacritic-insensitive string comparison.",
+          "values": [
+            { "name": "(option: LynkOption" },
+            { "name": "queryString: string) => boolean" }
+          ]
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/combobox"
+        }
+      ]
+    },
     {
       "name": "lynk-copy-button",
       "description": "Copies text data to the clipboard when the user clicks the trigger.\n---\n\n\n### **Events:**\n - **on:copy** - Emitted when the data has been copied.\n- **on:error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<lynk-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<lynk-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<lynk-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
@@ -1677,6 +1793,28 @@
         }
       ]
     },
+    {
+      "name": "lynk-optgroup",
+      "description": "Creates a grouping for [options](/components/option) within a [select](/components/select) or [combobox](/components/combobox).\n---\n\n\n### **Slots:**\n - _default_ - The given options. Must be `lynk-option` elements.\n- **prefix** - A presentational prefix icon or similar element.\n- **label** - The label for the optgroup\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Properties:**\n - **--display-divider** - Display property of the divider. Defaults to \"block\" _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label-container** - The container that wraps prefix, label and base\n- **divider** - The divider that is displayed above the content\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.\n- **options** - The container that wraps the option elements.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables all options in the optgroup.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lynk.design/components/optgroup"
+        }
+      ]
+    },
     {
       "name": "lynk-option",
       "description": "Options define the selectable items within various form controls such as [select](/components/select).\n---\n\n\n### **Methods:**\n - **getTextLabel()** - Returns a plain text label based on the option's content.\n\n### **Slots:**\n - _default_ - The option'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 - **checked-icon** - The checked icon, an `<lynk-icon>` element.\n- **base** - The component's base wrapper.\n- **label** - The option's label.\n- **prefix** - The container that wraps the prefix.\n- **suffix** - The container that wraps the suffix.",
@@ -2991,11 +3129,14 @@
           "name": "state",
           "description": "Draws the table row using status colors",
           "values": [
+            { "name": "" },
             { "name": "primary" },
+            { "name": "accent" },
             { "name": "danger" },
             { "name": "success" },
             { "name": "warning" },
             { "name": "neutral" },
+            { "name": "info" },
             { "name": "custom" }
           ]
         },
@@ -3041,11 +3182,14 @@
           "name": "type",
           "description": "The tag's variant.",
           "values": [
+            { "name": "" },
             { "name": "primary" },
+            { "name": "accent" },
             { "name": "success" },
             { "name": "neutral" },
             { "name": "warning" },
             { "name": "danger" },
+            { "name": "info" },
             { "name": "text" }
           ]
         },
@@ -3075,7 +3219,7 @@
         },
         {
           "name": "badge",
-          "description": "Drwas a solid filled badge-styled tag .",
+          "description": "Draws a solid filled badge-styled tag .",
           "values": []
         }
       ],