@nova-design-system/nova-webcomponents 3.0.0-beta.35 → 3.0.0-beta.37

package/dist/types/index.d.ts

@@ -10,6 +10,7 @@
 export * as constants from './utils/constants';
 export * as classUtils from './utils/class.utils';
 export * as eventUtils from './utils/events.utils';
+export * as stringUtils from './utils/string.utils';
 export type * from './components.d.ts';
 export * as animations from './animations';
 export { iconNames } from './components/nv-icon/nv-icons';

package/dist/types/nova-docs.d.ts

@@ -3,6 +3,12 @@ import type { JSX } from './components';
 
 type Optional<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>;
 
+/**
+ * See https://github.com/Sidnioulz/storybook-addon-tag-badges for customizing
+ * the Badges. Any changes requires additional styles in the blazor storybook
+ * at blazor/BlazingStory/BlazingStory/Internals/Components/SideBar/NavigationTree/TagBadges.razor.scss
+ */
+export type NovaBadge = 'new' | 'beta' | 'deprecated' | 'danger';
 export type NovaTemplate = string;
 export type NovaComponent = keyof JSX.IntrinsicElements;
 
@@ -18,20 +24,28 @@ export interface NovaDocsGeneric<T> {
    * Will not render the component in storybook, useful for composed components
    */
   skip?: boolean;
+  /**
+   * Add a badge to the sidebar in storybook group
+   */
+  badge?: NovaBadge;
+
   /**
    * Tag name of the component
    */
   component: T extends NovaTemplate ? undefined : NovaComponent;
+
   /**
    * List of components that will be rendered inside the component's docs,
    * required for correct imports
    */
   subcomponents?: Array<NovaComponent>;
+
   /**
    * List of components that will be used for composition.  Will render
    * additional docs tabs with props etc. for them.
    */
   composedComponents?: Array<NovaComponent>;
+
   /**
    * Each item will be rendered as a story in each storybook.
    */
@@ -42,6 +56,11 @@ export interface NovaDocsGeneric<T> {
        */
       name: string;
 
+      /**
+       * Add a badge to the sidebar in individual story
+       */
+      badge?: NovaBadge;
+
       /**
        * Props to pass to the component
        */

package/dist/types/utils/constants.d.ts

@@ -44,7 +44,7 @@ export declare enum LoaderColors {
     High = "brand",
     Low = "white"
 }
-export declare enum FieldLabelPlacement {
+export declare enum LabelPlacement {
     Before = "before",
     After = "after"
 }
@@ -114,3 +114,8 @@ export declare enum TextInputAutocomplete {
     Url = "url",
     Photo = "photo"
 }
+export declare enum TimeType {
+    Hours = "hours",
+    Minutes = "minutes",
+    Seconds = "seconds"
+}

package/dist/types/utils/string.utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Checks if a string starts with a given prefix, ignoring case.
+ * @param {string} str - The string to check.
+ * @param {string} prefix - The prefix to check for.
+ * @returns {boolean} - True if the string starts with the prefix, ignoring case.
+ * @example startsWithIgnoreCase('Hello, world!', 'hello') // true
+ * @example startsWithIgnoreCase('Hello, world!', 'world') // false
+ */
+export declare function startsWithIgnoreCase(str?: string, prefix?: string): boolean;

package/dist/vscode-data.json

@@ -244,7 +244,7 @@
       "name": "nv-breadcrumbs",
       "description": {
         "kind": "markdown",
-        "value": "The Breadcrumbs component displays navigation paths in a structured and accessible format. It supports icons, tooltips, and collapsible menus for flexible navigation. Designed with accessibility in mind, it includes proper ARIA roles and attributes to ensure usability for all users."
+        "value": "The Breadcrumbs component displays navigation paths in a structured and accessible format. It supports tooltips and collapsible menus for flexible navigation. Designed with accessibility in mind, it includes proper ARIA roles and attributes to ensure usability for all users.\n\n**Rules for Implementation**\n\nTo maintain consistency across projects, follow these guidelines:\n\n1. **Visually Hidden Last Breadcrumb**\n   - The last breadcrumb in the navigation path must be defined in the code but visually hidden using the `current` attribute.\n   - This prevents visual redundancy when a page header already contains the same content while ensuring screen readers can still access the information.\n\n2. **Breadcrumb Limit and Collapsible Menu**\n   - Only **three breadcrumbs** should be rendered at a time.\n   - If more breadcrumbs are needed, use a collapsible menu in the middle to handle additional items.\n\n3. **Integration-Side Implementation**\n   - Since links must be passed as slots and each framework has its own routing system, the logic for collapsing breadcrumbs cannot be handled automatically.\n   - Automatically generating a collapsible menu within the component could interfere with navigation behavior in different frameworks.\n\n4. **Consistency Across Projects**\n   - Adhering to these rules ensures a uniform experience and functionality across multiple integrations.\n   - Refer to the **Storybook** examples for proper implementation and best practices."
       },
       "attributes": []
     },
@@ -255,6 +255,10 @@
         "value": "The Button component enhances standard HTML buttons with Nova Design styling and extended functionality. It offers customizable visual emphasis, distinct styling for destructive actions, and built-in accessibility. \n\nThis component allows developers to guide user attention effectively, providing a unified approach to action triggers across your application."
       },
       "attributes": [
+        {
+          "name": "active",
+          "description": "Use this prop to highlight the button when it represents the current page\nor active selection. This helps users understand their navigation context."
+        },
         {
           "name": "danger",
           "description": "Applies styling that visually indicates the button represents a dangerous\naction."
@@ -416,6 +420,93 @@
       },
       "attributes": []
     },
+    {
+      "name": "nv-dialog",
+      "description": {
+        "kind": "markdown",
+        "value": "The `nv-dialog` component is a modal dialog that can be used to display content in a full-screen overlay."
+      },
+      "attributes": [
+        {
+          "name": "click-outside",
+          "description": "If true, the dialog will be closed when the backdrop is clicked."
+        },
+        {
+          "name": "controlled",
+          "description": "If true, the dialog visibility is managed manually through methods or the open prop."
+        },
+        {
+          "name": "full",
+          "description": "If true, the dialog takes full width styling."
+        },
+        {
+          "name": "manual-focus",
+          "description": "Controls the dialog's autofocus behavior. When false (default), the dialog will\nautomatically focus the first focusable element. When true, automatic focus is\ndisabled and you must manually set focus on an element for accessibility compliance."
+        },
+        {
+          "name": "open",
+          "description": "Use this prop to toggle the visibility of the dialog. Set to true to show\nthe dialog and false to hide it."
+        },
+        {
+          "name": "undismissable",
+          "description": "If true, the dialog cannot be closed by the user."
+        }
+      ]
+    },
+    {
+      "name": "nv-dialogfooter",
+      "description": {
+        "kind": "markdown",
+        "value": "Default footer for the dialog component."
+      },
+      "attributes": [
+        {
+          "name": "cancel-label",
+          "description": "Sets the label for the cancel button."
+        },
+        {
+          "name": "danger",
+          "description": "Sets the danger state for the submit button."
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the confirm button, preventing user interaction."
+        },
+        {
+          "name": "leading-icon",
+          "description": "Sets the leading icon for the submit button."
+        },
+        {
+          "name": "submit-label",
+          "description": "Sets the label for the submit button."
+        },
+        {
+          "name": "trailing-icon",
+          "description": "Sets the trailing icon for the submit button."
+        },
+        {
+          "name": "undismissable",
+          "description": "Controls the visibility of the cancel button. When true, the cancel button is\nhidden."
+        }
+      ]
+    },
+    {
+      "name": "nv-dialogheader",
+      "description": {
+        "kind": "markdown",
+        "value": "Default header for the dialog component."
+      },
+      "attributes": [
+        {
+          "name": "heading",
+          "description": "Sets the heading text for the dialog."
+        },
+        {
+          "name": "subheading",
+          "description": "Sets the subheading text for the dialog."
+        }
+      ]
+    },
     {
       "name": "nv-fieldcheckbox",
       "description": {
@@ -510,7 +601,7 @@
       "attributes": [
         {
           "name": "autocomplete",
-          "description": "The autocomplete prop helps users fill out the input field faster by\nsuggesting entries they’ve used before, like their email or address.\nYou can turn it on to make forms more convenient or off to ensure users\nalways type in fresh data.",
+          "description": "The autocomplete prop helps users fill out the input field faster by\nsuggesting entries they've used before, like their email or address.\nYou can turn it on to make forms more convenient or off to ensure users\nalways type in fresh data.",
           "values": [
             {
               "name": "on"
@@ -712,7 +803,7 @@
         },
         {
           "name": "disabled",
-          "description": "The disabled prop lets you turn off the input field so that users can’t\ntype in it. When disabled, the field is grayed out and won’t respond to\nclicks or touches."
+          "description": "The disabled prop lets you turn off the input field so that users can't\ntype in it. When disabled, the field is grayed out and won't respond to\nclicks or touches."
         },
         {
           "name": "emptyresult",
@@ -720,7 +811,7 @@
         },
         {
           "name": "error",
-          "description": "Alters the input field’s appearance to indicate an error, helping users\nidentify fields that need correction."
+          "description": "Alters the input field's appearance to indicate an error, helping users\nidentify fields that need correction."
         },
         {
           "name": "error-description",
@@ -736,23 +827,27 @@
         },
         {
           "name": "label",
-          "description": "Lets you define the text that explains what users should enter in the text\ninput field. It’s a crucial element for making forms clear and\nuser-friendly."
+          "description": "Lets you define the text that explains what users should enter in the text\ninput field. It's a crucial element for making forms clear and\nuser-friendly."
         },
         {
           "name": "name",
-          "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input’s data in form submissions. It should be\nunique within the form to avoid conflicts."
+          "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions. It should be\nunique within the form to avoid conflicts."
         },
         {
           "name": "open",
           "description": "State of the dropdown popover."
         },
+        {
+          "name": "options",
+          "description": "List of options available in the dropdown."
+        },
         {
           "name": "placeholder",
-          "description": "Display temporary text inside the input field to give users a hint about\nwhat to type. It’s a great way to provide examples or suggestions directly\nin the field before they start typing.\nThe placeholder is displayed only when the filterable option is enabled."
+          "description": "Display temporary text inside the input field to give users a hint about\nwhat to type. It's a great way to provide examples or suggestions directly\nin the field before they start typing.\nThe placeholder is displayed only when the filterable option is enabled."
         },
         {
           "name": "readonly",
-          "description": "Display the input field’s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won’t be\nable to type or delete anything."
+          "description": "Display the input field's content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won't be\nable to type or delete anything."
         },
         {
           "name": "required",
@@ -760,7 +855,7 @@
         },
         {
           "name": "value",
-          "description": "Specifies the value of the input field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the input’s value is managed by the component’s state."
+          "description": "Specifies the value of the input field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the input's value is managed by the component's state."
         }
       ]
     },
@@ -1049,11 +1144,11 @@
         },
         {
           "name": "error",
-          "description": "Alters the input field's appearance to indicate an error."
+          "description": "Alters the input field's appearance to indicate an error, helping users\nidentify fields that need correction."
         },
         {
           "name": "error-description",
-          "description": "A description that appears when there is an error."
+          "description": "A description that appears when there is an error related to the multiselect\nfield."
         },
         {
           "name": "filterable",
@@ -1589,6 +1684,10 @@
           "name": "name",
           "description": "Defines the name attribute of the select field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the selected data in form submissions. It should be\nunique within the form to avoid conflicts"
         },
+        {
+          "name": "options",
+          "description": "Options to display in the select. Can be passed as a JSON string.\nFormat: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]"
+        },
         {
           "name": "readonly",
           "description": "Display the select field’s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won’t be\nable to change or delete anything."
@@ -2020,59 +2119,95 @@
       ]
     },
     {
-      "name": "nv-fieldtoggle",
+      "name": "nv-fieldtime",
       "description": {
         "kind": "markdown",
-        "value": "The nv-fieldtoggle component is a form field that allows the user to toggle between two states. It is a styled checkbox input with a label that can be positioned before or after the checkbox. The nv-fieldtoggle component is a wrapper around the native input[type=\"checkbox\"] element."
+        "value": "A versatile and user-friendly input field designed to handle time values with precision and flexibility. The `nv-fieldtime` component allows users to input, select, and adjust time in various formats, making it suitable for a wide range of applications, from scheduling tools to time trackers. With customizable options and built-in accessibility features, it ensures a seamless and intuitive experience for all users."
       },
       "attributes": [
-        {
-          "name": "checked",
-          "description": "Indicates whether the toggle is checked or not."
-        },
         {
           "name": "description",
-          "description": "A description providing additional context or information about the\ntoggle."
+          "description": "Add helpful hints or extra information under the time input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions."
         },
         {
           "name": "disabled",
-          "description": "Disables the toggle, preventing user interaction."
-        },
-        {
-          "name": "hide-label",
-          "description": "Hides the label visually while still keeping it available for screen\nreaders."
+          "description": "The disabled prop lets you turn off the input field so that users can't\ninteract with it. When disabled, the field is grayed out and won't respond to\nclicks or touches."
         },
         {
-          "name": "input-id",
-          "description": "Sets the ID for the radio button’s input element and the for attribute of\nthe associated label. If no ID is provided, a random one will be\nautomatically generated to ensure unique identification, facilitating\nproper label association and accessibility."
+          "name": "error",
+          "description": "Alters the input field's appearance to indicate an error, helping users\nidentify fields that need correction."
         },
         {
-          "name": "label",
-          "description": "The label displayed next to the toggle."
+          "name": "error-description",
+          "description": "A description that appears when there is an error related to the time\nfield."
         },
         {
-          "name": "label-placement",
-          "description": "Determines the position of the label relative to the toggle, either\n'start' (before) or 'end' (after).",
+          "name": "format",
+          "description": "Specifies the time format to be used.\nAvailable formats:\n- HH: 24-hour format (00-23)\n- HH:mm: 24-hour format with minutes (00:00-23:59)\n- HH:mm:ss: 24-hour format with minutes and seconds (00:00:00-23:59:59)\n- hh: 12-hour format (01-12)\n- hh:mm: 12-hour format with minutes (01:00-12:59)\n- hh:mm:ss: 12-hour format with minutes and seconds (01:00:00-12:59:59)",
           "values": [
             {
-              "name": "after"
+              "name": "HH"
             },
             {
-              "name": "before"
+              "name": "HH:mm"
+            },
+            {
+              "name": "HH:mm:ss"
+            },
+            {
+              "name": "hh"
+            },
+            {
+              "name": "hh:mm"
+            },
+            {
+              "name": "hh:mm:ss"
             }
           ]
         },
+        {
+          "name": "input-id",
+          "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+        },
+        {
+          "name": "label",
+          "description": "Lets you define the text that explains what users should enter in the time\ninput field. It's a crucial element for making forms clear and\nuser-friendly."
+        },
+        {
+          "name": "max",
+          "description": "The maximum time value that can be selected."
+        },
+        {
+          "name": "min",
+          "description": "The minimum time value that can be selected."
+        },
         {
           "name": "name",
-          "description": "The name attribute for the toggle input, used to reference the form data\nafter submission."
+          "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions."
+        },
+        {
+          "name": "open",
+          "description": "State of the time picker popover."
         },
         {
           "name": "readonly",
-          "description": "Sets the toggle to read-only, preventing user changes but still allowing\nfocus and selection of text."
+          "description": "Display the input field's content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won't be\nable to type or delete anything."
+        },
+        {
+          "name": "required",
+          "description": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
+        },
+        {
+          "name": "step",
+          "description": "The step interval in milliseconds for time increments/decrements.\nThis affects how the time changes when using arrow keys or spinners."
+        },
+        {
+          "name": "success",
+          "description": "Changes the input field’s appearance to indicate successful input or\nvalidation."
         },
         {
           "name": "value",
-          "description": "The value attribute of the toggle input, representing the value sent on\nform submission when the toggle is checked."
+          "description": "The current value of the time input in the specified format."
         }
       ]
     },
@@ -2292,6 +2427,10 @@
           "name": "disable-close-on-select",
           "description": "Use this to disable the menu from closing automatically when a menu item is\nselected."
         },
+        {
+          "name": "items",
+          "description": "(New feature) Items to display in the menu, provided as a JSON string.\nFormat: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]"
+        },
         {
           "name": "nested",
           "description": "Use this if the menu is nested inside another menu. This will prevent the\nparent menu from closing when the child menu is opened."
@@ -3961,6 +4100,63 @@
       },
       "attributes": []
     },
+    {
+      "name": "nv-toggle",
+      "description": {
+        "kind": "markdown",
+        "value": "The nv-toggle component is a component that allows the user to toggle between two states. It is a styled checkbox input with a label that can be positioned before or after the checkbox. The nv-toggle component is a wrapper around the native input[type=\"checkbox\"] element."
+      },
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Indicates whether the toggle is checked or not."
+        },
+        {
+          "name": "description",
+          "description": "A description providing additional context or information about the\ntoggle."
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the toggle, preventing user interaction."
+        },
+        {
+          "name": "hide-label",
+          "description": "Hides the label visually while still keeping it available for screen\nreaders."
+        },
+        {
+          "name": "input-id",
+          "description": "Sets the ID for the radio button’s input element and the for attribute of\nthe associated label. If no ID is provided, a random one will be\nautomatically generated to ensure unique identification, facilitating\nproper label association and accessibility."
+        },
+        {
+          "name": "label",
+          "description": "The label displayed next to the toggle."
+        },
+        {
+          "name": "label-placement",
+          "description": "Determines the position of the label relative to the toggle, either\n'start' (before) or 'end' (after).",
+          "values": [
+            {
+              "name": "after"
+            },
+            {
+              "name": "before"
+            }
+          ]
+        },
+        {
+          "name": "name",
+          "description": "The name attribute for the toggle input, used to reference the form data\nafter submission."
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the toggle to read-only, preventing user changes but still allowing\nfocus and selection of text."
+        },
+        {
+          "name": "value",
+          "description": "The value attribute of the toggle input, representing the value sent on\nform submission when the toggle is checked."
+        }
+      ]
+    },
     {
       "name": "nv-tooltip",
       "description": {