@onsvisual/svelte-components 1.0.0-next.5 → 1.0.0-next.6

package/dist/datavis/DataTile/DataTile.svelte

@@ -36,9 +36,14 @@
 	 * @type {string}
 	 */
 	export let source = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<Card {title} {href} mode="featured">
+<Card {title} {href} mode="featured" {cls}>
 	{#if value}
 		<p class="headline-figures__figure ons-u-fs-3xl ons-u-fs-2xl@m">{value}</p>
 	{/if}

package/dist/datavis/DataTile/DataTile.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DataTileEvents */
 /** @typedef {typeof __propDef.slots}  DataTileSlots */
 export default class DataTile extends SvelteComponentTyped<{
+    cls?: string | undefined;
     caption?: string | undefined;
     data?: object[] | null | undefined;
     source?: string | undefined;
@@ -19,6 +20,7 @@ export type DataTileSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         caption?: string | undefined;
         data?: object[] | null | undefined;
         source?: string | undefined;

package/dist/datavis/Table/Table.svelte

@@ -39,12 +39,18 @@
 		Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
 	let _data = [...data];
 	let sort = columns.map((c) => "none");
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	$: sortable = columns.map((d) => d.sortable).includes(true);
 	$: formatters = columns.map((d) => formatter(d.dp));
 </script>
 
 <div
+	class={cls}
 	style:overflow={typeof height === "number" ? "auto" : null}
 	style:height={typeof height === "number" ? `${height}px` : null}
 	style:display={typeof height !== "number" ? "contents" : null}

package/dist/datavis/Table/Table.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  TableEvents */
 /** @typedef {typeof __propDef.slots}  TableSlots */
 export default class Table extends SvelteComponentTyped<{
+    cls?: string | undefined;
     height?: number | "auto" | undefined;
     data?: object[] | undefined;
     title?: string | undefined;
@@ -19,6 +20,7 @@ export type TableSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         height?: number | "auto" | undefined;
         data?: object[] | undefined;
         title?: string | undefined;

package/dist/decorators/Divider/Divider.svelte

@@ -17,18 +17,23 @@
 	 */
 	export let mode = "dark";
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = !!hr;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<Container {width} {marginTop} {marginBottom}>
+<Container {width} {marginTop} {marginBottom} {cls}>
 	<hr
 		class="ons-u-mt-no"
 		class:ons-u-vh={!hr}

package/dist/decorators/Divider/Divider.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DividerEvents */
 /** @typedef {typeof __propDef.slots}  DividerSlots */
 export default class Divider extends SvelteComponentTyped<{
+    cls?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
@@ -17,6 +18,7 @@ export type DividerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;

package/dist/inputs/Button/Button.svelte

@@ -54,6 +54,11 @@
 	 * @type {string}
 	 */
 	export let download = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 {#if href}
@@ -61,7 +66,7 @@
 		href={!disabled ? href : null}
 		role="button"
 		{download}
-		class="ons-btn ons-btn--link ons-js-submit-btn"
+		class="ons-btn ons-btn--link ons-js-submit-btn {cls}"
 		class:ons-btn--small={small}
 		class:ons-btn--secondary={variant === "secondary"}
 		class:ons-btn--ghost={variant === "ghost"}
@@ -91,7 +96,7 @@
 {:else}
 	<button
 		{type}
-		class="ons-btn"
+		class="ons-btn {cls}"
 		class:ons-btn--small={small}
 		class:ons-btn--secondary={variant === "secondary"}
 		class:ons-btn--ghost={variant === "ghost"}

package/dist/inputs/Button/Button.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
+    cls?: string | undefined;
     small?: boolean | undefined;
     href?: string | undefined;
     type?: "button" | "reset" | "sumbit" | undefined;
@@ -27,6 +28,7 @@ export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         small?: boolean | undefined;
         href?: string | undefined;
         type?: "button" | "reset" | "sumbit" | undefined;

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -53,6 +53,11 @@
 	 * @type {boolean}
 	 */
 	export let compact = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	const checkboxes = getContext("checkboxes");
 
@@ -96,7 +101,7 @@
 </script>
 
 <span
-	class="ons-checkboxes__item"
+	class="ons-checkboxes__item {cls}"
 	class:ons-checkboxes__item--ghost={variant === "ghost"}
 	class:ons-checkboxes__item--no-border={compact}
 >

package/dist/inputs/Checkbox/Checkbox.svelte.d.ts

@@ -4,6 +4,7 @@
 export default class Checkbox extends SvelteComponentTyped<{
     id: string;
     label: string;
+    cls?: string | undefined;
     group?: object[] | null | undefined;
     compact?: boolean | undefined;
     variant?: "default" | "ghost" | undefined;
@@ -26,6 +27,7 @@ declare const __propDef: {
     props: {
         id: string;
         label: string;
+        cls?: string | undefined;
         group?: object[] | null | undefined;
         compact?: boolean | undefined;
         variant?: "default" | "ghost" | undefined;

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -30,12 +30,17 @@
 	 * @type {object[]}
 	 */
 	export let value = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	const checkboxes = writable([]);
 	setContext("checkboxes", checkboxes);
 </script>
 
-<fieldset class="ons-fieldset">
+<fieldset class="ons-fieldset {cls}">
 	{#if title}
 		<legend class="ons-fieldset__legend ons-u-mb-no">
 			<span class="ons-fieldset__legend-title ons-u-pb-no" class:ons-u-vh={hideTitle}>{title}</span>

package/dist/inputs/Checkboxes/Checkboxes.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  CheckboxesEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxesSlots */
 export default class Checkboxes extends SvelteComponentTyped<{
+    cls?: string | undefined;
     label?: string | undefined;
     title?: string | undefined;
     compact?: boolean | undefined;
@@ -22,6 +23,7 @@ export type CheckboxesSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         label?: string | undefined;
         title?: string | undefined;
         compact?: boolean | undefined;

package/dist/inputs/Dropdown/Dropdown.svelte

@@ -33,9 +33,14 @@
 	 * @type {object[]}
 	 */
 	export let options = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}
 		<label class="ons-label" for={id} class:ons-u-vh={hideLabel}>{label}</label>
 	{/if}

package/dist/inputs/Dropdown/Dropdown.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DropdownEvents */
 /** @typedef {typeof __propDef.slots}  DropdownSlots */
 export default class Dropdown extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     label?: string | undefined;
     value?: object | null | undefined;
@@ -20,6 +21,7 @@ export type DropdownSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         label?: string | undefined;
         value?: object | null | undefined;

package/dist/inputs/ErrorPanel/ErrorPanel.svelte

@@ -4,9 +4,14 @@
 	 * @type {string}
 	 */
 	export let message = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-panel ons-panel--error ons-panel--no-title" id="number-of-employees-error">
+<div class="ons-panel ons-panel--error ons-panel--no-title {cls}" id="number-of-employees-error">
 	<span class="ons-panel__assistive-text ons-u-vh">Error: </span>
 	<div class="ons-panel__body">
 		{#if message}

package/dist/inputs/ErrorPanel/ErrorPanel.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ErrorPanelEvents */
 /** @typedef {typeof __propDef.slots}  ErrorPanelSlots */
 export default class ErrorPanel extends SvelteComponentTyped<{
+    cls?: string | undefined;
     message?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -15,6 +16,7 @@ export type ErrorPanelSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         message?: string | undefined;
     };
     events: {

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -11,9 +11,14 @@
 	 * @type {object[]}
 	 */
 	export let items = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
+<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error {cls}">
 	<div class="ons-panel__header">
 		<h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
 	</div>

package/dist/inputs/ErrorSummary/ErrorSummary.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ErrorSummaryEvents */
 /** @typedef {typeof __propDef.slots}  ErrorSummarySlots */
 export default class ErrorSummary extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     items?: object[] | undefined;
 }, {
@@ -16,6 +17,7 @@ export type ErrorSummarySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         items?: object[] | undefined;
     };

package/dist/inputs/Input/Input.svelte

@@ -68,9 +68,14 @@
 	 * @type {boolean}
 	 */
 	export let error = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}
 		<label
 			class="ons-label"

package/dist/inputs/Input/Input.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  InputEvents */
 /** @typedef {typeof __propDef.slots}  InputSlots */
 export default class Input extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     width?: number | undefined;
     label?: string | undefined;
@@ -27,6 +28,7 @@ export type InputSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         width?: number | undefined;
         label?: string | undefined;

package/dist/inputs/Radios/Radios.svelte

@@ -35,9 +35,14 @@
 	 * @type {boolean}
 	 */
 	export let compact = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<fieldset class="ons-fieldset">
+<fieldset class="ons-fieldset {cls}">
 	{#if title}
 		<legend class="ons-fieldset__legend ons-u-mb-no">
 			<span class="ons-fieldset__legend-title ons-u-pb-no" class:ons-u-vh={hideTitle}>{title}</span>

package/dist/inputs/Radios/Radios.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  RadiosEvents */
 /** @typedef {typeof __propDef.slots}  RadiosSlots */
 export default class Radios extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     label?: string | undefined;
     title?: string | undefined;
@@ -23,6 +24,7 @@ export type RadiosSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         label?: string | undefined;
         title?: string | undefined;

package/dist/inputs/Select/Select.svelte

@@ -108,6 +108,11 @@
 		hideMenu = false;
 		dispatch("clear", value);
 	}
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	function inputValueTemplate(result) {
 		return result && result[labelKey];
@@ -183,7 +188,7 @@
 	<script src={scriptUrl} on:load={handleScriptLoad}></script>
 </svelte:head>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}<label for={id} class="ons-label" class:ons-u-vh={hideLabel}>{label}</label>{/if}
 	<div class="ons-autocomplete-wrapper">
 		{#if scriptLoaded}

package/dist/inputs/Select/Select.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 export default class Select extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     label?: string | undefined;
     mode?: "default" | "search" | undefined;
@@ -31,6 +32,7 @@ export type SelectSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         label?: string | undefined;
         mode?: "default" | "search" | undefined;

package/dist/inputs/Textarea/Textarea.svelte

@@ -43,11 +43,16 @@
 	 * @type {number}
 	 */
 	export let width = 30;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	$: remaining = charLimit && value.length ? charLimit - value.length : charLimit || null;
 </script>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}
 		<label
 			class="ons-label ons-label--with-description"

package/dist/inputs/Textarea/Textarea.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  TextareaEvents */
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     width?: number | undefined;
     label?: string | undefined;
@@ -20,6 +21,7 @@ export type TextareaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         width?: number | undefined;
         label?: string | undefined;

package/dist/layout/Accordion/Accordion.svelte

@@ -10,7 +10,7 @@
 	 */
 	export let id = slugify();
 	/**
-	 * Optional: Set a CSS class for the component
+	 * Optional: Set an additional CSS class for the component
 	 * @type {string}
 	 */
 	export let cls = "";

package/dist/layout/Accordion/Accordion.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  AccordionEvents */
 /** @typedef {typeof __propDef.slots}  AccordionSlots */
 export default class Accordion extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     showToggle?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type AccordionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         showToggle?: boolean | undefined;
     };
     events: {

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -16,6 +16,11 @@
 	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
 	 */
 	export let width = "wide";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 	/**
 	 * Overrides the base theme background (accepts any valid CSS background value)
 	 * @type {string|null}
@@ -23,7 +28,7 @@
 	export let background = null;
 </script>
 
-<Container {width} {background}>
+<Container {width} {background} {cls}>
 	<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
 		<ol class="ons-breadcrumbs__items ons-u-fs-s">
 			{#each backHref ? [{ label: "Back", href: backHref }] : links as link}

package/dist/layout/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -2,8 +2,9 @@
 /** @typedef {typeof __propDef.events}  BreadcrumbEvents */
 /** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
 export default class Breadcrumb extends SvelteComponentTyped<{
-    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     background?: string | null | undefined;
+    cls?: string | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     links?: object[] | undefined;
     backHref?: string | undefined;
 }, {
@@ -16,8 +17,9 @@ export type BreadcrumbSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         background?: string | null | undefined;
+        cls?: string | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         links?: object[] | undefined;
         backHref?: string | undefined;
     };

package/dist/layout/Card/Card.svelte

@@ -7,7 +7,7 @@
 	 */
 	export let id = "";
 	/**
-	 * Optional: Set a CSS class for the section
+	 * Optional: Set an additional CSS class for the section
 	 * @type {string}
 	 */
 	export let cls = "";

package/dist/layout/Card/Card.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  CardEvents */
 /** @typedef {typeof __propDef.slots}  CardSlots */
 export default class Card extends SvelteComponentTyped<{
-    id?: string | undefined;
     cls?: string | undefined;
+    id?: string | undefined;
     title?: string | undefined;
     image?: string | undefined;
     headingTag?: "h2" | "h3" | undefined;
@@ -27,8 +27,8 @@ export type CardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
         cls?: string | undefined;
+        id?: string | undefined;
         title?: string | undefined;
         image?: string | undefined;
         headingTag?: "h2" | "h3" | undefined;

package/dist/layout/Contents/Contents.svelte

@@ -19,9 +19,14 @@
 	 * @type {string}
 	 */
 	export let skipHref = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<aside class="ons-table-of-contents-container" role="complementary">
+<aside class="ons-table-of-contents-container {cls}" role="complementary">
 	{#if skipHref}
 		<a class="ons-skip-to-content" href="#0">Skip to guide content</a>
 	{/if}

package/dist/layout/Contents/Contents.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ContentsEvents */
 /** @typedef {typeof __propDef.slots}  ContentsSlots */
 export default class Contents extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     links?: object[] | undefined;
     hideTitle?: boolean | undefined;
@@ -16,6 +17,7 @@ export type ContentsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         links?: object[] | undefined;
         hideTitle?: boolean | undefined;

package/dist/layout/DescriptionList/DescriptionList.svelte

@@ -14,10 +14,15 @@
 	 * @type {"default"|"inline"}
 	 */
 	export let mode = "default";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 <dl
-	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {mode ===
+	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {cls} {mode ===
 	'inline'
 		? 'ons-u-mt-s ons-u-mt-l@l'
 		: 'ons-u-cf'}"

package/dist/layout/DescriptionList/DescriptionList.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DescriptionListEvents */
 /** @typedef {typeof __propDef.slots}  DescriptionListSlots */
 export default class DescriptionList extends SvelteComponentTyped<{
+    cls?: string | undefined;
     title?: string | undefined;
     mode?: "default" | "inline" | undefined;
     items?: object[] | undefined;
@@ -15,6 +16,7 @@ export type DescriptionListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         title?: string | undefined;
         mode?: "default" | "inline" | undefined;
         items?: object[] | undefined;