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

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

@@ -2,24 +2,25 @@ 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 { LynkAnimation } from "../../components/animation/animation.component.js";
 import type { LynkAutoGrid } from "../../components/auto-grid/auto-grid.component.js";
 import type { LynkBadge } from "../../components/badge/badge.component.js";
-import type { LynkAnimation } from "../../components/animation/animation.component.js";
 import type { LynkBox } from "../../components/box/box.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";
-import type { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
 import type { LynkCard } from "../../components/card/card.component.js";
 import type { LynkCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { LynkButtonGroup } from "../../components/button-group/button-group.component.js";
+import type { LynkCombobox } from "../../components/combobox/combobox.component.js";
 import type { LynkCopyButton } from "../../components/copy-button/copy-button.component.js";
 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 { LynkFormatDate } from "../../components/format-date/format-date.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";
 import type { LynkGrid } from "../../components/grid/grid.component.js";
 import type { LynkIcon } from "../../components/icon/icon.component.js";
@@ -34,6 +35,7 @@ import type { LynkMutationObserver } from "../../components/mutation-observer/mu
 import type { LynkNav } from "../../components/nav/nav.component.js";
 import type { LynkNavGroup } from "../../components/nav-group/nav-group.component.js";
 import type { LynkNavItem } from "../../components/nav-item/nav-item.component.js";
+import type { LynkOptgroup } from "../../components/optgroup/optgroup.component.js";
 import type { LynkOption } from "../../components/option/option.component.js";
 import type { LynkPage } from "../../components/page/page.component.js";
 import type { LynkPageContent } from "../../components/page-content/page-content.component.js";
@@ -110,24 +112,6 @@ Typically used to indicate the remaining time before a whole app refresh. */
   "onafter:hide"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkAutoGridProps = {
-  /** How to justify auto-grid items */
-  "auto-size"?: LynkAutoGrid["autoSize"];
-  /** How to align auto-grid items to eachother */
-  "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 LynkAnimationProps = {
   /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */
   name?: LynkAnimation["name"];
@@ -169,6 +153,24 @@ value can be changed without causing the animation to restart. */
   "onon:start"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkAutoGridProps = {
+  /** How to justify auto-grid items */
+  "auto-size"?: LynkAutoGrid["autoSize"];
+  /** How to align auto-grid items to eachother */
+  "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 LynkBreadcrumbProps = {
@@ -273,16 +275,6 @@ value of this attribute must be an id of a form in the same document or shadow r
   "onon:invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type LynkButtonGroupProps = {
-  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended. */
-  label?: LynkButtonGroup["label"];
-  /**  */
-  defaultSlot?: LynkButtonGroup["defaultSlot"];
-  /**  */
-  disableRole?: LynkButtonGroup["disableRole"];
-};
-
 type LynkCardProps = {
   /** Draws the table row using status colors */
   state?: LynkCard["state"];
@@ -344,6 +336,112 @@ the same document or shadow root for this to work. */
   "onon:invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkButtonGroupProps = {
+  /** A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
+devices when interacting with the control and is strongly recommended. */
+  label?: LynkButtonGroup["label"];
+  /**  */
+  defaultSlot?: LynkButtonGroup["defaultSlot"];
+  /**  */
+  disableRole?: LynkButtonGroup["disableRole"];
+};
+
+type LynkComboboxProps = {
+  /** The name of the combobox, submitted as a name/value pair with form data. */
+  name?: LynkCombobox["name"];
+  /** The current value of the combobox, submitted as a name/value pair with form data. */
+  value?: LynkCombobox["value"];
+  /** The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation */
+  state?: LynkCombobox["state"];
+  /** The combobox's size. */
+  size?: LynkCombobox["size"];
+  /** Placeholder text to show as a hint when the combobox is empty. */
+  placeholder?: LynkCombobox["placeholder"];
+  /** Disables the combobox control. */
+  disabled?: LynkCombobox["disabled"];
+  /** Adds a clear button when the combobox is not empty. */
+  clearable?: LynkCombobox["clearable"];
+  /** Indicates whether or not the combobox is open.
+You can toggle this attribute to show and hide the listbox, or you can use the `show()`
+and `hide()` methods and this attribute will reflect the combobox's open state. */
+  open?: LynkCombobox["open"];
+  /** Enable this option to prevent the listbox from being clipped,
+when the component is placed inside a container with `overflow: auto|scroll`.
+Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: LynkCombobox["hoist"];
+  /** The combobox's label. If you need to display HTML, use the `label` slot instead. */
+  label?: LynkCombobox["label"];
+  /** The preferred placement of the combobox's menu.
+Note that the actual placement may vary as needed to keep the listbox inside of the viewport. */
+  placement?: LynkCombobox["placement"];
+  /** The help tooltip appended to the label. Alternatively, you can use the help-tip slot. */
+  "help-tip"?: LynkCombobox["helpTip"];
+  /** The combobox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: LynkCombobox["helpText"];
+  /** By default, form controls are associated with the nearest containing `<form>` element.
+This attribute allows you to place the form control outside of a form and associate it
+with the form that has this `id`.
+The form must be in the same document or shadow root for this to work. */
+  form?: LynkCombobox["form"];
+  /** The combobox's required attribute. */
+  required?: LynkCombobox["required"];
+  /** A function that customizes the rendered option. The first argument is the option, the second
+is the query string, which is typed into the combobox.
+The function should return either a Lit TemplateResult or a string containing trusted HTML
+to render in the shown list of filtered options.
+If the query string should be highlighted use the `highlightOptionRenderer` function. */
+  getOption?: LynkCombobox["getOption"];
+  /** A function used to filter options in the combobox component.
+The default filter method is a case- and diacritic-insensitive string comparison. */
+  filter?: LynkCombobox["filter"];
+  /**  */
+  popup?: LynkCombobox["popup"];
+  /**  */
+  combobox?: LynkCombobox["combobox"];
+  /**  */
+  displayInput?: LynkCombobox["displayInput"];
+  /**  */
+  valueInput?: LynkCombobox["valueInput"];
+  /**  */
+  listbox?: LynkCombobox["listbox"];
+  /**  */
+  displayLabel?: LynkCombobox["displayLabel"];
+  /**  */
+  selectedOption?: LynkCombobox["selectedOption"];
+  /**  */
+  numberFilteredOptions?: LynkCombobox["numberFilteredOptions"];
+  /**  */
+  cachedOptions?: LynkCombobox["cachedOptions"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultValue?: LynkCombobox["defaultValue"];
+  /** Gets the validity state object */
+  validity?: LynkCombobox["validity"];
+  /** Gets the validation message */
+  validationMessage?: LynkCombobox["validationMessage"];
+  /** Emitted when the control's value changes. */
+  "onon:change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's value is cleared. */
+  "onon:clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "onon:input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "onon:focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "onon:blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the combobox's menu opens. */
+  "onon:show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the combobox's menu opens and all animations are complete. */
+  "onafter:show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the combobox's menu closes. */
+  "onon:hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the combobox's menu closes and all animations are complete. */
+  "onafter:hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "onon:invalid"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the combobox menu fails to open. */
+  "onon:error"?: (e: CustomEvent<never>) => void;
+};
+
 type LynkCopyButtonProps = {
   /** The text value to copy. */
   value?: LynkCopyButton["value"];
@@ -530,6 +628,15 @@ type LynkFormFieldProps = {
   "onon:blur"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkFormatBytesProps = {
+  /** The number to format in bytes. */
+  value?: LynkFormatBytes["value"];
+  /** The type of unit to display. */
+  unit?: LynkFormatBytes["unit"];
+  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+  display?: LynkFormatBytes["display"];
+};
+
 type LynkFormatDateProps = {
   /** The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
 recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
@@ -559,15 +666,6 @@ in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/do
   "hour-format"?: LynkFormatDate["hourFormat"];
 };
 
-type LynkFormatBytesProps = {
-  /** The number to format in bytes. */
-  value?: LynkFormatBytes["value"];
-  /** The type of unit to display. */
-  unit?: LynkFormatBytes["unit"];
-  /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
-  display?: LynkFormatBytes["display"];
-};
-
 type LynkFormatNumberProps = {
   /** The number to format. */
   value?: LynkFormatNumber["value"];
@@ -899,6 +997,15 @@ type LynkNavItemProps = {
   "onafter:collapse"?: (e: CustomEvent<never>) => void;
 };
 
+type LynkOptgroupProps = {
+  /** Disables all options in the optgroup. */
+  disabled?: LynkOptgroup["disabled"];
+  /** The optgroups label. If you need to display HTML, use the `label` slot instead. */
+  label?: LynkOptgroup["label"];
+  /**  */
+  defaultSlot?: LynkOptgroup["defaultSlot"];
+};
+
 type LynkOptionProps = {
   /** The option's value. When selected, the containing form control will receive this value. The value must be unique
 from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
@@ -1611,7 +1718,7 @@ type LynkTagProps = {
   removable?: LynkTag["removable"];
   /** Makes the tag pulsate to draw attention. */
   pulse?: LynkTag["pulse"];
-  /** Drwas a solid filled badge-styled tag . */
+  /** Draws a solid filled badge-styled tag . */
   badge?: LynkTag["badge"];
 
   /** Emitted when the remove button is activated. */
@@ -1797,6 +1904,25 @@ export type CustomElements = {
    */
   "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).
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **on:cancel** - Emitted when the animation is canceled.
+   * - **on:finish** - Emitted when the animation finishes.
+   * - **on:start** - Emitted when the animation starts or restarts.
+   *
+   * ### **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.
+   *
+   * ### **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-animation": DefineComponent<LynkAnimationProps>;
+
   /**
    * A simple automatic two-dimensional grid-based layout system based off CSS Grid spec.
    * ---
@@ -1832,25 +1958,6 @@ export type CustomElements = {
    */
   "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:**
-   *  - **on:cancel** - Emitted when the animation is canceled.
-   * - **on:finish** - Emitted when the animation finishes.
-   * - **on:start** - Emitted when the animation starts or restarts.
-   *
-   * ### **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.
-   *
-   * ### **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-animation": DefineComponent<LynkAnimationProps>;
-
   /**
    *
    * ---
@@ -1944,19 +2051,6 @@ export type CustomElements = {
    */
   "lynk-button": DefineComponent<LynkButtonProps>;
 
-  /**
-   * Button groups can be used to group related buttons into sections.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more `<lynk-button>` elements to display in the button group.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's internal wrapper.
-   */
-  "lynk-button-group": DefineComponent<LynkButtonGroupProps>;
-
   /**
    * Cards can be used to group media with related subjects into a container.
    * ---
@@ -2023,6 +2117,74 @@ export type CustomElements = {
    */
   "lynk-checkbox": DefineComponent<LynkCheckboxProps>;
 
+  /**
+   * Button groups can be used to group related buttons into sections.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<lynk-button>` elements to display in the button group.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's internal wrapper.
+   */
+  "lynk-button-group": DefineComponent<LynkButtonGroupProps>;
+
+  /**
+   * Comboboxes allow you to choose items from a menu of predefined options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **on:change** - Emitted when the control's value changes.
+   * - **on:clear** - Emitted when the control's value is cleared.
+   * - **on:input** - Emitted when the control receives input.
+   * - **on:focus** - Emitted when the control gains focus.
+   * - **on:blur** - Emitted when the control loses focus.
+   * - **on:show** - Emitted when the combobox's menu opens.
+   * - **after:show** - Emitted after the combobox's menu opens and all animations are complete.
+   * - **on:hide** - Emitted when the combobox's menu closes.
+   * - **after:hide** - Emitted after the combobox's menu closes and all animations are complete.
+   * - **on:invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   * - **on:error** - Emitted when the combobox menu fails to open.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the listbox. If it is not possible to open the listbox, because there are no
+   * appropriate filtered options, a on:error is emitted and the listbox stays closed.
+   * - **hide()** - Hides the listbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message.
+   * Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
+   *
+   * ### **Slots:**
+   *  - _default_ - The listbox options. Must be `<lynk-option>` elements. You can use `<lynk-optgroup>`'s to group items visually.
+   * - **label** - The combobox's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.
+   * - **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, combobox, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The combobox's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container the wraps the prefix, combobox, clear icon, and expand button.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected option's label, an `<input>` element.
+   * - **listbox** - The listbox container where the options are slotted and the filtered options list exists.
+   * - **filtered-listbox** - The container that wraps the filtered options.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
+   */
+  "lynk-combobox": DefineComponent<LynkComboboxProps>;
+
   /**
    * Copies text data to the clipboard when the user clicks the trigger.
    * ---
@@ -2206,18 +2368,18 @@ export type CustomElements = {
   "lynk-form-field": DefineComponent<LynkFormFieldProps>;
 
   /**
-   * Formats a date/time using the specified locale and options.
+   * Formats a number as a human readable bytes value.
    * ---
    *
    */
-  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
+  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
 
   /**
-   * Formats a number as a human readable bytes value.
+   * Formats a date/time using the specified locale and options.
    * ---
    *
    */
-  "lynk-format-bytes": DefineComponent<LynkFormatBytesProps>;
+  "lynk-format-date": DefineComponent<LynkFormatDateProps>;
 
   /**
    * Formats a number using the specified locale and options.
@@ -2499,6 +2661,30 @@ export type CustomElements = {
    */
   "lynk-nav-item": DefineComponent<LynkNavItemProps>;
 
+  /**
+   * Creates a grouping for [options](/components/option) within a [select](/components/select) or [combobox](/components/combobox).
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The given options. Must be `lynk-option` elements.
+   * - **prefix** - A presentational prefix icon or similar element.
+   * - **label** - The label for the optgroup
+   * - **suffix** - A presentational suffix icon or similar element.
+   *
+   * ### **CSS Properties:**
+   *  - **--display-divider** - Display property of the divider. Defaults to "block" _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **label-container** - The container that wraps prefix, label and base
+   * - **divider** - The divider that is displayed above the content
+   * - **prefix** - The container that wraps the prefix.
+   * - **suffix** - The container that wraps the suffix.
+   * - **options** - The container that wraps the option elements.
+   */
+  "lynk-optgroup": DefineComponent<LynkOptgroupProps>;
+
   /**
    * Options define the selectable items within various form controls such as [select](/components/select).
    * ---

package/cdn/utilities/animation.js

@@ -2,7 +2,7 @@ import "../chunks/chunk.QL5C2XOW.js";
 import {
   getAnimationNames,
   getEasingNames
-} from "../chunks/chunk.S32TRDOY.js";
+} from "../chunks/chunk.U3Q5UN44.js";
 import "../chunks/chunk.W27M6RDR.js";
 export {
   getAnimationNames,

package/cdn/utilities/localize.js

@@ -1,9 +1,9 @@
 import {
   LocalizeController
-} from "../chunks/chunk.JRPNDW7P.js";
+} from "../chunks/chunk.AFESEORB.js";
 import {
   registerTranslation
-} from "../chunks/chunk.5EREESQJ.js";
+} from "../chunks/chunk.T3MRNJEM.js";
 import "../chunks/chunk.W27M6RDR.js";
 export {
   LocalizeController,