@nanoporetech-digital/components-vue 7.9.2 → 8.0.0-alpha.0

package/dist/vetur/tags.json

@@ -1,18 +1,18 @@
 {
   "nano-accordion": {
-    "description": "Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.",
-    "attributes": [
-      "color"
-    ]
+    "description": "Groups multiple details elements together, allowing only one to be open at a time.",
+    "attributes": []
   },
   "nano-alert": {
     "description": "Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.",
     "attributes": [
       "closable",
       "color",
+      "countdown",
       "duration",
       "hoist",
-      "open"
+      "open",
+      "theme"
     ]
   },
   "nano-algolia": {
@@ -77,13 +77,47 @@
       "playback-rate"
     ]
   },
+  "nano-avatar": {
+    "description": "Avatars are used to represent a person or object.",
+    "attributes": [
+      "initials"
+    ]
+  },
+  "nano-badge": {
+    "description": "Badges are used to draw attention and display statuses or counts.",
+    "attributes": [
+      "pulse",
+      "strength",
+      "theme"
+    ]
+  },
+  "nano-breadcrumb": {
+    "description": "Breadcrumbs are used to indicate the current page's location within a navigational hierarchy.",
+    "attributes": [
+      "breadcrumbs"
+    ]
+  },
+  "nano-card": {
+    "description": "Cards are used to display content in a compact and organized way.",
+    "attributes": [
+      "layout",
+      "size",
+      "variant"
+    ]
+  },
+  "nano-card-carousel": {
+    "description": "Showcase up to 6 pieces of content in a slide-show format.",
+    "attributes": [
+      "carousel-title"
+    ]
+  },
   "nano-checkbox": {
-    "description": "`nano-checkbox` is used to let a user choose one or more options from a limited number of options.\nThey appear as checked when activated.\nThey can be checked by mouse, keyboard, touch or programmatically by setting the checked property.",
+    "description": "Checkboxes are used to let a user choose one or more values from a limited number of options.",
     "attributes": [
       "checked",
-      "color",
       "disabled",
       "form",
+      "hide-label",
       "indeterminate",
       "invalid",
       "label",
@@ -95,7 +129,7 @@
     ]
   },
   "nano-checkbox-group": {
-    "description": "`nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\nIt provides a convenient place to anchor a collective label and any validation issues.",
+    "description": "Checkbox group is an optional wrapper for all checkbox controls.\nIt provides a convenient place to anchor labels and validation messages.",
     "attributes": [
       "disabled",
       "hide-legend",
@@ -109,8 +143,55 @@
       "value"
     ]
   },
+  "nano-collapsible-comparison": {
+    "description": "Collapsible comparison allows users to compare two short lists of titles which can be expanded to reveal more detail about each item.",
+    "attributes": [
+      "open"
+    ]
+  },
+  "nano-content-links": {
+    "description": "Content links are used to group multiple links together.",
+    "attributes": []
+  },
+  "nano-cta": {
+    "description": "CTAs (Call To Actions) invite the user to take action.\nThey are used to highlight important content and interactions and are often used in conjunction with other components like cards, modals, and forms.",
+    "attributes": [
+      "group",
+      "icon",
+      "loading",
+      "secondary",
+      "size",
+      "theme"
+    ]
+  },
+  "nano-data-table": {
+    "description": "Enables the search, filter and sort of tabular data.",
+    "attributes": [
+      "applied-filters",
+      "blocks-length",
+      "caption",
+      "columns",
+      "custom-filter-fn",
+      "custom-renderer",
+      "custom-sort-fn",
+      "default-sort",
+      "foot-render",
+      "head-render",
+      "loading",
+      "per-block",
+      "placeholder-size",
+      "row-render",
+      "rows",
+      "scrollable",
+      "search-term",
+      "show-caption",
+      "show-footer",
+      "show-paginate-spinner",
+      "virtual-total-items"
+    ]
+  },
   "nano-datalist": {
-    "description": "`nano-datalist` a visually consistent and more flexible replacement for a native\n[datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\nor linked to any input control via the `input` prop. Is used internally within `nano-select`.\nOptions can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop",
+    "description": "Represents a permissible or recommended list of options available to choose from within other controls.",
     "attributes": [
       "active-options",
       "disable-filter",
@@ -124,10 +205,10 @@
     ]
   },
   "nano-date-input": {
-    "description": "The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.",
+    "description": "The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.\nIt has specific options for localisation, date formatting and validation.",
     "attributes": [
       "autofocus",
-      "clear-input",
+      "clearable",
       "close-after-picked",
       "color",
       "date-order",
@@ -161,9 +242,8 @@
     ]
   },
   "nano-date-picker": {
-    "description": "A highly performant, small and accessible date-picker.\nCustomised from [Duet date-picker](https://duetds.github.io/date-picker/).",
+    "description": "Enables the selection of a date from a calendar view.",
     "attributes": [
-      "color",
       "first-day-of-week",
       "is-date-disabled",
       "is-modal",
@@ -174,14 +254,12 @@
     ]
   },
   "nano-details": {
-    "description": "A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](/story/nano-components-accordion--accordion) element to add 'one item open at a time' support.",
+    "description": "Details show a brief summary and on interaction expand to show additional content.",
     "attributes": [
       "disabled",
-      "icon-rotation",
       "label",
-      "no-handle",
       "open",
-      "use-cache-height"
+      "size"
     ]
   },
   "nano-dialog": {
@@ -189,7 +267,6 @@
     "attributes": [
       "hoist",
       "label",
-      "no-footer",
       "no-header",
       "no-user-dismiss",
       "open",
@@ -208,12 +285,13 @@
       "no-user-dismiss",
       "open",
       "placement",
+      "resizable",
       "store-id",
       "store-method"
     ]
   },
   "nano-dropdown": {
-    "description": "Dropdowns show additional content in a panel.\nDesigned to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).",
+    "description": "Dropdowns expose additional content that “drops down” in a panel.",
     "attributes": [
       "auto-open",
       "close-on-select",
@@ -228,7 +306,7 @@
     ]
   },
   "nano-field-validator": {
-    "description": "A toolbox for `nano-...` form fields and form validation.\n- Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n= Access to 2-way, data bound reactive store\n- Scroll to invalid field on submit",
+    "description": "A toolbox to expose a form's data model and validation state",
     "attributes": [
       "dirty",
       "extra-field-selector",
@@ -265,35 +343,27 @@
       "value"
     ]
   },
+  "nano-footer": {
+    "description": "The footer is used to provide navigation, copyright info and links to social media platforms.",
+    "attributes": []
+  },
   "nano-global-nav": {
-    "description": "Nanopore digital global navigation and search bar.\nIncorporates MyAccount / SSO states (messages / cart / user name etc).\nIncorporates Algolia search.",
+    "description": "The Global nav component standardises navigation within and across web applications.",
     "attributes": [
-      "active-my-account-sections",
       "cart-count",
       "cart-url",
-      "env",
-      "get-my-account-data",
+      "contact-url",
+      "login-url",
       "logo-url",
+      "logout-url",
       "msg-count",
       "msg-url",
       "my-account-data",
+      "my-account-url",
       "my-account-user",
-      "search-api-key",
-      "search-app-id",
-      "search-indeces",
       "search-index",
       "search-value",
-      "show-logo",
-      "show-search",
-      "sso-data-url",
-      "sso-redirect"
-    ]
-  },
-  "nano-global-nav-user-profile": {
-    "description": "Nanopore digital global navigation user profile.",
-    "attributes": [
-      "my-account-user",
-      "user-profile-url"
+      "session-redirect"
     ]
   },
   "nano-global-search-results": {
@@ -301,7 +371,7 @@
     "attributes": []
   },
   "nano-grid": {
-    "description": "A lightweight, context-aware CSS grid implementation.\n\n- Define multiple grids templates at different breakpoints\n- Uses `@container` queries to select the correct grid depending on the current dimensions\n- Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n- SSR optimised",
+    "description": "A context-aware CSS grid implementation.",
     "attributes": [
       "l-cols",
       "l-size",
@@ -335,7 +405,7 @@
     ]
   },
   "nano-icon": {
-    "description": "An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).\nLazily loads SVG for each icon, so will only request the icons that you're using and that are visible.",
+    "description": "An SVG loader / helper. Comes bundled with font-awesome pro icons & ONT pictogram and device icons.\nLazily loads SVG as icons become visible.",
     "attributes": [
       "aria-label",
       "color",
@@ -349,7 +419,7 @@
     ]
   },
   "nano-icon-button": {
-    "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.",
+    "description": "Simple icon-only buttons designed to be used for actions and in toolbars.",
     "attributes": [
       "disabled",
       "form",
@@ -365,6 +435,13 @@
       "value"
     ]
   },
+  "nano-icon-item": {
+    "description": "Icon Items are a standard way of displaying a Pictogram or Device Icon with some concise text.",
+    "attributes": [
+      "layout",
+      "size"
+    ]
+  },
   "nano-img": {
     "description": "Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.",
     "attributes": [
@@ -376,24 +453,34 @@
       "src-set"
     ]
   },
+  "nano-in-page-nav": {
+    "description": "\\\nIn-page navigation allows users to quickly find different sections on a page.",
+    "attributes": [
+      "breakpoint",
+      "sticky-headers"
+    ]
+  },
   "nano-input": {
-    "description": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\nThe default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)",
+    "description": "Inputs collect text data from the user.",
     "attributes": [
       "accept",
+      "always-show-placeholder",
       "autocapitalise",
       "autocomplete",
       "autocorrect",
       "autofocus",
-      "clear-input",
       "clear-on-edit",
-      "color",
+      "clearable",
+      "close-after-picked",
       "debounce",
       "disabled",
       "float-label",
       "form",
       "hide-label",
+      "initial-picker-date",
       "inputmode",
       "invalid",
+      "is-date-disabled",
       "label",
       "max",
       "maxlength",
@@ -402,6 +489,7 @@
       "multiple",
       "name",
       "pattern",
+      "picker-options",
       "placeholder",
       "readonly",
       "required",
@@ -409,25 +497,41 @@
       "rows",
       "show-char-count",
       "show-inline-error",
+      "show-picker",
       "size",
       "spellcheck",
       "step",
       "type",
       "validate-on",
       "validity-message",
-      "value"
+      "value",
+      "value-as-date",
+      "value-as-number"
     ]
   },
   "nano-intersection-observe": {
-    "description": "A thin, declarative interface to the IntersectionObserver API.",
+    "description": "A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).",
     "attributes": [
       "root",
       "root-margin",
       "threshold"
     ]
   },
+  "nano-masked-overflow": {
+    "description": "`masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,\nautomatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.",
+    "attributes": [
+      "active-handler",
+      "hide-scrollbars",
+      "inactive-handler",
+      "is-active-handler",
+      "label",
+      "orientation",
+      "scroll-controls",
+      "show-indicator"
+    ]
+  },
   "nano-menu": {
-    "description": "Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\nManages focus state / active.",
+    "description": "Menus provide a list of options for the user to choose from.",
     "attributes": [
       "has-focus",
       "label",
@@ -453,15 +557,14 @@
     ]
   },
   "nano-nav-item": {
-    "description": "Nav items to be used with the various nav items.\n[Globla-Nav](/story/compounds-global-nav)\n[Menu-Drawer](/story/components-menu-drawer)\n[Dropdown](/story/components-dropdown)",
+    "description": "Nav items provide options or links for the user to pick from a menu or navigation bar.",
     "attributes": [
+      "checkbox",
       "close-on-blur",
       "disabled",
       "href",
       "notification",
       "open",
-      "secondary-active-width",
-      "secondary-fallback",
       "selected",
       "target"
     ]
@@ -471,23 +574,14 @@
     "attributes": [
       "disabled",
       "filter-meta",
+      "href",
       "label",
       "selected",
       "value"
     ]
   },
-  "nano-overflow-nav": {
-    "description": "Primarily used to display navigational items that may not fit on smaller screens.\n\n- Accepts any collection of elements\n- Gives visual cues of 'more' with auto display fade effect and scroll buttons\n- Auto scrolls to the active item onload",
-    "attributes": [
-      "active-handler",
-      "in-active-handler",
-      "is-active-handler",
-      "orientation",
-      "scroll-controls"
-    ]
-  },
   "nano-progress-bar": {
-    "description": "Used to show the status of an ongoing operation.",
+    "description": "Shows the status of an ongoing operation.",
     "attributes": [
       "indeterminate",
       "show-percent",
@@ -495,7 +589,7 @@
     ]
   },
   "nano-range": {
-    "description": "The Range slider lets users select from a range of values by moving\nthe slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n\nLabels can be placed on either side of the range by adding the\n`slot=\"start\"` or `slot=\"end\"` to the element.",
+    "description": "Ranges allow the user to select a value within a given range using a slider.",
     "attributes": [
       "color",
       "debounce",
@@ -525,19 +619,18 @@
     ]
   },
   "nano-resize-observe": {
-    "description": "A Resize-Observer utility component.\nTakes a string list of sizes and optional class-names.\nAdds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\nAdditionally, can fire events when content no-longer fits within the element.",
+    "description": "A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
     "attributes": [
       "notify-content-fit",
       "states"
     ]
   },
   "nano-select": {
-    "description": "The select component is a wrapper to the HTML select element with custom styling and additional functionality.\nIt accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\nIt's multi selection functionality is vastly improved from the native solution. It allows for the control of\nvalue order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.",
+    "description": "Selects allow users to choose items from a menu of options.",
     "attributes": [
       "allow-custom-values",
       "autofocus",
-      "clear-select",
-      "color",
+      "clearable",
       "debounce",
       "disabled",
       "drop-down-config",
@@ -565,7 +658,7 @@
     ]
   },
   "nano-skeleton": {
-    "description": "Skeletons are used to show where content will eventually be drawn.\nSimple containers for scaffolding layouts that mimic what users will see when content has finished loading.\nPrevents large areas of empty space during asynchronous operations.",
+    "description": "Skeletons are used to show where content will eventually be drawn.",
     "attributes": [
       "animated"
     ]
@@ -577,7 +670,7 @@
     ]
   },
   "nano-slides": {
-    "description": "The Slides component is a multi-section container. Each section can be swiped or dragged between.\nIt contains any number of Slide components.\n\nUses [Flickity](https://flickity.metafizzy.co/) under the hood.",
+    "description": "A toolbox for creating carousel or slide-show widgets, allowing users to navigate through a collection of items one at a time.",
     "attributes": [
       "animation",
       "autoplay",
@@ -590,7 +683,7 @@
     ]
   },
   "nano-sortable": {
-    "description": "An accessible and flexible re-order / sort utility component.\n\n- Drag and drop via mouse, touch or keyboard\n- Live announcements for screen readers\n- Works with or without an explicit handle (although with is preferable)",
+    "description": "An accessible and flexible sort and re-order utility.",
     "attributes": [
       "animation-enabled",
       "animation-timing",
@@ -648,7 +741,7 @@
     ]
   },
   "nano-tab": {
-    "description": "",
+    "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab content](tab-content).",
     "attributes": [
       "active",
       "closable",
@@ -657,46 +750,37 @@
     ]
   },
   "nano-tab-content": {
-    "description": "",
+    "description": "Used inside [tab groups](/components/tab-group) to display content.",
     "attributes": [
       "active",
       "name"
     ]
   },
   "nano-tab-group": {
-    "description": "A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n\nTabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\nHorizontal tabs that don't fit will overflow and scroll appropriately.\nTab-content can also be swiped to change tabs.",
+    "description": "Tab groups organize content into a container that shows one section at a time.",
     "attributes": [
-      "color",
       "disable-swipe",
+      "equal-tab-size",
       "no-scroll-controls",
       "placement",
+      "size",
       "store-id",
       "store-method"
     ]
   },
   "nano-table": {
-    "description": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level",
+    "description": "Displays tabular data in rows and columns.",
     "attributes": [
-      "applied-filters",
-      "blocks-length",
-      "caption",
-      "columns",
-      "custom-filter-fn",
-      "custom-renderer",
-      "custom-sort-fn",
-      "default-sort",
-      "foot-render",
-      "head-render",
-      "loading",
-      "per-block",
-      "placeholder-size",
-      "row-render",
-      "rows",
-      "search-term",
-      "show-caption",
-      "show-footer",
-      "type",
-      "virtual-total-items"
+      "compact",
+      "hide-caption",
+      "scrollable"
+    ]
+  },
+  "nano-tag": {
+    "description": "Tags provide a quick visual clue about the content, and help to organise and group content based on shared attributes.",
+    "attributes": [
+      "closable",
+      "size"
     ]
   },
   "nano-tooltip": {