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

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.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -158,99 +158,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 eachother",
-              "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 eachother",
-                "type": "string"
-              },
-              {
-                "name": "gap",
-                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "lynk-badge",
-          "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Properties:**\n - **--background-color** - The badges background and pulse color. _(default: undefined)_\n- **--color** - The badges text color. _(default: undefined)_\n- **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "type",
-              "description": "The badge's variant.",
-              "value": {
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | undefined"
-              }
-            },
-            {
-              "name": "pill",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "pulse",
-              "description": "Makes the badge pulsate to draw attention.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The badge's content." }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "type",
-                "description": "The badge's variant.",
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | undefined"
-              },
-              {
-                "name": "pill",
-                "description": "Draws a pill-style badge with rounded edges.",
-                "type": "boolean"
-              },
-              {
-                "name": "pulse",
-                "description": "Makes the badge pulsate to draw attention.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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.",
@@ -416,6 +323,99 @@
             ]
           }
         },
+        {
+          "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 eachother",
+              "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 eachother",
+                "type": "string"
+              },
+              {
+                "name": "gap",
+                "description": "The space between auto-grid items. Use spacing tokens or any custom size.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "lynk-badge",
+          "description": "Badges are used to draw attention and display statuses or counts.\n---\n\n\n### **Slots:**\n - _default_ - The badge's content.\n\n### **CSS Properties:**\n - **--background-color** - The badges background and pulse color. _(default: undefined)_\n- **--color** - The badges text color. _(default: undefined)_\n- **--pulse-speed** - The badges pulse speed in seconds or ms. Default is 1.5s. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "The badge's variant.",
+              "value": {
+                "type": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
+              }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pulse",
+              "description": "Makes the badge pulsate to draw attention.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The badge's content." }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "The badge's variant.",
+                "type": "'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' | undefined"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style badge with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "pulse",
+                "description": "Makes the badge pulsate to draw attention.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-box",
           "description": "\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--align** - Custom text align (left, center, right). _(default: left)_\n- **--background** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: transparent)_\n- **--border** - <border-style> <border-width> <border-color>. _(default: undefined)_\n- **--border-radius** - Any Border Radius token (--lynk-border-radius-medium) or a custom value. _(default: undefined)_\n- **--color** - Any color token (--lynk-color-neutral-100) or a custom value. _(default: inherit)_\n- **--height** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--width** - Any custom px, rem, %, or vh value. _(default: auto)_\n- **--margin** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--padding** - Any spacing token (--lynk-spacing-large) or a custom value. _(default: 0)_\n- **--shadow** - Any elevation shadow token (--lynk-shadow-large); _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
@@ -531,7 +531,7 @@
               "name": "color",
               "description": "The button's color.",
               "value": {
-                "type": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'",
+                "type": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'text'",
                 "default": "'default'"
               }
             },
@@ -708,7 +708,7 @@
               {
                 "name": "color",
                 "description": "The button's color.",
-                "type": "'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "type": "| 'default'\n    | 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'text'"
               },
               {
                 "name": "size",
@@ -859,37 +859,6 @@
             ]
           }
         },
-        {
-          "name": "lynk-button-group",
-          "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<lynk-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "value": { "type": "string", "default": "''" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "One or more `<lynk-button>` elements to display in the button group."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "disableRole", "type": "boolean" },
-              {
-                "name": "label",
-                "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-                "type": "string"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-card",
           "description": "Cards can be used to group media with related subjects into a container.\n---\n\n\n### **Slots:**\n - _default_ - The card's main content.\n- **header** - An optional header for the card.\n- **footer** - An optional footer for the card.\n- **image** - An optional image to render at the start of the card.\n\n### **CSS Properties:**\n - **--border-color** - The card's border color, including borders that occur inside the card. _(default: undefined)_\n- **--border-radius** - The border radius for the card's edges. _(default: undefined)_\n- **--border-width** - The width of the card's borders. _(default: undefined)_\n- **--state-color** - A custom color for the interactive state. _(default: undefined)_\n- **--pulse-speed** - A custom speed for the pulse animation. _(default: undefined)_\n- **--padding** - The padding to use for the card's sections. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **image** - The container that wraps the card's image.\n- **header** - The container that wraps the card's header.\n- **body** - The container that wraps the card's main content.\n- **footer** - The container that wraps the card's footer.",
@@ -899,7 +868,7 @@
               "name": "state",
               "description": "Draws the table row using status colors",
               "value": {
-                "type": "'primary' | 'danger' | 'success' | 'warning' | 'neutral'"
+                "type": "'primary' | 'accent' | 'danger' | 'success' | 'warning' | 'info' | 'neutral'"
               }
             },
             {
@@ -939,7 +908,7 @@
               {
                 "name": "state",
                 "description": "Draws the table row using status colors",
-                "type": "'primary' | 'danger' | 'success' | 'warning' | 'neutral'"
+                "type": "'primary' | 'accent' | 'danger' | 'success' | 'warning' | 'info' | 'neutral'"
               },
               {
                 "name": "interactive",
@@ -1031,97 +1000,440 @@
           "slots": [
             { "name": "", "description": "The checkbox's label." },
             {
-              "name": "help-text",
-              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute."
-            }
-          ],
-          "events": [
+              "name": "help-text",
+              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "on:blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "on:change",
+              "description": "Emitted when the control's checked state changes."
+            },
+            {
+              "name": "on:focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "on:input",
+              "description": "Emitted when the checkbox receives input."
+            },
+            {
+              "name": "on:invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "title", "type": "string" },
+              {
+                "name": "name",
+                "description": "Name of the HTML form control. Submitted with the form as part of a name/value pair.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "size",
+                "description": "The checkbox's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the checkbox.",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
+                "type": "boolean"
+              },
+              {
+                "name": "indeterminate",
+                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+                "type": "boolean"
+              },
+              {
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "boolean"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Makes the checkbox a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "noBubble",
+                "description": "Used to override the default event bubbling.",
+                "type": "boolean"
+              },
+              {
+                "name": "state",
+                "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
+                "type": "'error' | 'warning' | 'success' | 'default'"
+              },
+              {
+                "name": "helpText",
+                "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "on:blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "on:change",
+                "description": "Emitted when the control's checked state changes."
+              },
+              {
+                "name": "on:focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "on:input",
+                "description": "Emitted when the checkbox receives input."
+              },
+              {
+                "name": "on:invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              }
+            ]
+          }
+        },
+        {
+          "name": "lynk-button-group",
+          "description": "Button groups can be used to group related buttons into sections.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<lynk-button>` elements to display in the button group.\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<lynk-button>` elements to display in the button group."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              { "name": "disableRole", "type": "boolean" },
+              {
+                "name": "label",
+                "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the combobox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "state",
+              "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
+              "value": {
+                "type": "'error' | 'warning' | 'success' | 'default'",
+                "default": "'default'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The combobox's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the combobox control.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "clearable",
+              "description": "Adds a clear button when the combobox is not empty.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "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.",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+            },
+            {
+              "name": "help-tip",
+              "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "The combobox's required attribute.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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.",
+              "value": {
+                "type": "OptionRenderer",
+                "default": "defaultOptionRenderer"
+              }
+            },
+            {
+              "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.",
+              "value": {
+                "type": "(option: LynkOption, queryString: string) => boolean"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually."
+            },
+            {
+              "name": "label",
+              "description": "The combobox's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "prefix",
+              "description": "Used to prepend a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "expand-icon",
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "on:change",
+              "description": "Emitted when the control's value changes."
+            },
+            {
+              "name": "on:clear",
+              "description": "Emitted when the control's value is cleared."
+            },
+            {
+              "name": "on:input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "on:focus",
+              "description": "Emitted when the control gains focus."
+            },
             {
               "name": "on:blur",
               "description": "Emitted when the control loses focus."
             },
             {
-              "name": "on:change",
-              "description": "Emitted when the control's checked state changes."
+              "name": "on:show",
+              "description": "Emitted when the combobox's menu opens."
             },
             {
-              "name": "on:focus",
-              "description": "Emitted when the control gains focus."
+              "name": "after:show",
+              "description": "Emitted after the combobox's menu opens and all animations are complete."
             },
             {
-              "name": "on:input",
-              "description": "Emitted when the checkbox receives input."
+              "name": "on:hide",
+              "description": "Emitted when the combobox's menu closes."
+            },
+            {
+              "name": "after:hide",
+              "description": "Emitted after the combobox's menu closes and all animations are complete."
             },
             {
               "name": "on:invalid",
               "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+            },
+            {
+              "name": "on:error",
+              "description": "Emitted when the combobox menu fails to open."
             }
           ],
           "js": {
             "properties": [
-              { "name": "defaultSlot", "type": "HTMLSlotElement" },
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "title", "type": "string" },
+              { "name": "popup", "type": "LynkPopup" },
+              { "name": "combobox", "type": "HTMLSlotElement" },
+              { "name": "displayInput", "type": "HTMLInputElement" },
+              { "name": "valueInput", "type": "HTMLInputElement" },
+              { "name": "listbox", "type": "HTMLSlotElement" },
+              { "name": "displayLabel", "type": "string" },
+              { "name": "selectedOption", "type": "LynkOption | undefined" },
+              { "name": "numberFilteredOptions", "type": "number" },
+              { "name": "cachedOptions", "type": "LynkOption[]" },
               {
                 "name": "name",
-                "description": "Name of the HTML form control. Submitted with the form as part of a name/value pair.",
+                "description": "The name of the combobox, submitted as a name/value pair with form data.",
                 "type": "string"
               },
               {
                 "name": "value",
-                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+                "description": "The current value of the combobox, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
                 "type": "string"
               },
+              {
+                "name": "state",
+                "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
+                "type": "'error' | 'warning' | 'success' | 'default'"
+              },
               {
                 "name": "size",
-                "description": "The checkbox's size.",
+                "description": "The combobox's size.",
                 "type": "'small' | 'medium' | 'large'"
               },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the combobox is empty.",
+                "type": "string"
+              },
               {
                 "name": "disabled",
-                "description": "Disables the checkbox.",
+                "description": "Disables the combobox control.",
                 "type": "boolean"
               },
               {
-                "name": "checked",
-                "description": "Draws the checkbox in a checked state.",
+                "name": "clearable",
+                "description": "Adds a clear button when the combobox is not empty.",
                 "type": "boolean"
               },
               {
-                "name": "indeterminate",
-                "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+                "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.",
                 "type": "boolean"
               },
               {
-                "name": "defaultChecked",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "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.",
                 "type": "boolean"
               },
               {
-                "name": "form",
-                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "name": "label",
+                "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
-                "name": "required",
-                "description": "Makes the checkbox a required field.",
-                "type": "boolean"
+                "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.",
+                "type": "'top' | 'bottom'"
               },
               {
-                "name": "noBubble",
-                "description": "Used to override the default event bubbling.",
-                "type": "boolean"
+                "name": "helpTip",
+                "description": "The help tooltip appended to the label. Alternatively, you can use the help-tip slot.",
+                "type": "string"
               },
               {
-                "name": "state",
-                "description": "The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation",
-                "type": "'error' | 'warning' | 'success' | 'default'"
+                "name": "helpText",
+                "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
               },
               {
-                "name": "helpText",
-                "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "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.",
                 "type": "string"
               },
+              {
+                "name": "required",
+                "description": "The combobox's required attribute.",
+                "type": "boolean"
+              },
+              {
+                "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.",
+                "type": "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.",
+                "type": "(option: LynkOption, queryString: string) => boolean"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -1133,24 +1445,48 @@
             ],
             "events": [
               {
-                "name": "on:blur",
-                "description": "Emitted when the control loses focus."
+                "name": "on:change",
+                "description": "Emitted when the control's value changes."
               },
               {
-                "name": "on:change",
-                "description": "Emitted when the control's checked state changes."
+                "name": "on:clear",
+                "description": "Emitted when the control's value is cleared."
+              },
+              {
+                "name": "on:input",
+                "description": "Emitted when the control receives input."
               },
               {
                 "name": "on:focus",
                 "description": "Emitted when the control gains focus."
               },
               {
-                "name": "on:input",
-                "description": "Emitted when the checkbox receives input."
+                "name": "on:blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "on:show",
+                "description": "Emitted when the combobox's menu opens."
+              },
+              {
+                "name": "after:show",
+                "description": "Emitted after the combobox's menu opens and all animations are complete."
+              },
+              {
+                "name": "on:hide",
+                "description": "Emitted when the combobox's menu closes."
+              },
+              {
+                "name": "after:hide",
+                "description": "Emitted after the combobox's menu closes and all animations are complete."
               },
               {
                 "name": "on:invalid",
                 "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
+              },
+              {
+                "name": "on:error",
+                "description": "Emitted when the combobox menu fails to open."
               }
             ]
           }
@@ -1858,6 +2194,52 @@
             ]
           }
         },
+        {
+          "name": "lynk-format-bytes",
+          "description": "Formats a number as a human readable bytes value.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The number to format in bytes.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "unit",
+              "description": "The type of unit to display.",
+              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
+            },
+            {
+              "name": "display",
+              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+              "value": {
+                "type": "'long' | 'short' | 'narrow'",
+                "default": "'short'"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The number to format in bytes.",
+                "type": "number"
+              },
+              {
+                "name": "unit",
+                "description": "The type of unit to display.",
+                "type": "'byte' | 'bit'"
+              },
+              {
+                "name": "display",
+                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+                "type": "'long' | 'short' | 'narrow'"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "lynk-format-date",
           "description": "Formats a date/time using the specified locale and options.\n---\n",
@@ -1993,52 +2375,6 @@
             "events": []
           }
         },
-        {
-          "name": "lynk-format-bytes",
-          "description": "Formats a number as a human readable bytes value.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "value",
-              "description": "The number to format in bytes.",
-              "value": { "type": "number", "default": "0" }
-            },
-            {
-              "name": "unit",
-              "description": "The type of unit to display.",
-              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
-            },
-            {
-              "name": "display",
-              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-              "value": {
-                "type": "'long' | 'short' | 'narrow'",
-                "default": "'short'"
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The number to format in bytes.",
-                "type": "number"
-              },
-              {
-                "name": "unit",
-                "description": "The type of unit to display.",
-                "type": "'byte' | 'bit'"
-              },
-              {
-                "name": "display",
-                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-                "type": "'long' | 'short' | 'narrow'"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "lynk-format-number",
           "description": "Formats a number using the specified locale and options.\n---\n",
@@ -3522,6 +3858,55 @@
             ]
           }
         },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Disables all options in the optgroup.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The given options. Must be `lynk-option` elements."
+            },
+            {
+              "name": "prefix",
+              "description": "A presentational prefix icon or similar element."
+            },
+            { "name": "label", "description": "The label for the optgroup" },
+            {
+              "name": "suffix",
+              "description": "A presentational suffix icon or similar element."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "disabled",
+                "description": "Disables all options in the optgroup.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The optgroups label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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.",
@@ -6344,7 +6729,7 @@
               "name": "state",
               "description": "Draws the table row using status colors",
               "value": {
-                "type": "'primary' | 'danger' | 'success' | 'warning' | 'neutral' | 'custom'"
+                "type": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
               }
             },
             {
@@ -6380,7 +6765,7 @@
               {
                 "name": "state",
                 "description": "Draws the table row using status colors",
-                "type": "'primary' | 'danger' | 'success' | 'warning' | 'neutral' | 'custom'"
+                "type": "| 'primary'\n    | 'accent'\n    | 'danger'\n    | 'success'\n    | 'warning'\n    | 'neutral'\n    | 'info'\n    | 'custom'"
               },
               {
                 "name": "interactive",
@@ -6423,7 +6808,7 @@
               "name": "type",
               "description": "The tag's variant.",
               "value": {
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "type": "| 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'text'"
               }
             },
             {
@@ -6451,7 +6836,7 @@
             },
             {
               "name": "badge",
-              "description": "Drwas a solid filled badge-styled tag .",
+              "description": "Draws a solid filled badge-styled tag .",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -6467,7 +6852,7 @@
               {
                 "name": "type",
                 "description": "The tag's variant.",
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "type": "| 'primary'\n    | 'accent'\n    | 'success'\n    | 'neutral'\n    | 'warning'\n    | 'danger'\n    | 'info'\n    | 'text'"
               },
               {
                 "name": "size",
@@ -6491,7 +6876,7 @@
               },
               {
                 "name": "badge",
-                "description": "Drwas a solid filled badge-styled tag .",
+                "description": "Draws a solid filled badge-styled tag .",
                 "type": "boolean"
               }
             ],