@onsvisual/svelte-components 0.0.23 → 0.0.25

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  DividerSlots */
 export default class Divider extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
-    width?: "narrow" | "medium" | "wide" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     marginTop?: boolean;
     marginBottom?: boolean;
     themeOverrides?: any;
@@ -19,7 +19,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
-        width?: "narrow" | "medium" | "wide" | "full";
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;
         themeOverrides?: object;

package/dist/@types/index.d.ts

@@ -5,6 +5,8 @@ export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
 export { default as Backlink } from "./layout/Backlink/Backlink.svelte";
 export { default as Breadcrumb } from "./layout/Breadcrumb/Breadcrumb.svelte";
+export { default as Cards } from "./layout/Cards/Cards.svelte";
+export { default as Card } from "./layout/Cards/Card.svelte";
 export { default as Contents } from "./layout/Contents/Contents.svelte";
 export { default as ErrorPage } from "./layout/ErrorPage/ErrorPage.svelte";
 export { default as Footer } from "./layout/Footer/Footer.svelte";

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  CheckboxEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxSlots */
 export default class Checkbox extends SvelteComponentTyped<{
-    label: string;
     id: string;
+    label: string;
     compact?: boolean;
     description?: string;
     variant?: "default" | "ghost";
@@ -22,8 +22,8 @@ export type CheckboxSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        label: string;
         id: string;
+        label: string;
         compact?: boolean;
         description?: string;
         variant?: "default" | "ghost";

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

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  DropdownEvents */
 /** @typedef {typeof __propDef.slots}  DropdownSlots */
 export default class Dropdown extends SvelteComponentTyped<{
-    label?: string;
     id?: string;
+    label?: string;
     value?: any;
     hideLabel?: boolean;
     placeholder?: string;
@@ -20,8 +20,8 @@ export type DropdownSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        label?: string;
         id?: string;
+        label?: string;
         value?: object;
         hideLabel?: boolean;
         placeholder?: string;

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  InputEvents */
 /** @typedef {typeof __propDef.slots}  InputSlots */
 export default class Input extends SvelteComponentTyped<{
+    id?: string;
     width?: number;
     label?: string;
-    id?: string;
     numeric?: boolean;
     error?: boolean;
     pattern?: string;
@@ -27,9 +27,9 @@ export type InputSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string;
         width?: number;
         label?: string;
-        id?: string;
         numeric?: boolean;
         error?: boolean;
         pattern?: string;

package/dist/@types/inputs/Radios/Radio.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  RadioEvents */
 /** @typedef {typeof __propDef.slots}  RadioSlots */
 export default class Radio extends SvelteComponentTyped<{
-    label: string;
     id: string;
+    label: string;
     groupId: string;
     compact?: boolean;
     value?: string;
@@ -20,8 +20,8 @@ export type RadioSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        label: string;
         id: string;
+        label: string;
         groupId: string;
         compact?: boolean;
         value?: string;

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  RadiosEvents */
 /** @typedef {typeof __propDef.slots}  RadiosSlots */
 export default class Radios extends SvelteComponentTyped<{
+    id?: string;
     label?: string;
     compact?: boolean;
-    id?: string;
     items?: any[];
     value?: string;
 }, {
@@ -21,9 +21,9 @@ export type RadiosSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string;
         label?: string;
         compact?: boolean;
-        id?: string;
         items?: any[];
         value?: string;
     };

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 export default class Select extends SvelteComponentTyped<{
+    id?: string;
     width?: number;
     label?: string;
-    id?: string;
     mode?: "default" | "search";
     value?: any;
     hideLabel?: boolean;
@@ -35,9 +35,9 @@ export type SelectSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string;
         width?: number;
         label?: string;
-        id?: string;
         mode?: "default" | "search";
         value?: object;
         hideLabel?: boolean;

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  TextareaEvents */
 /** @typedef {typeof __propDef.slots}  TextareaSlots */
 export default class Textarea extends SvelteComponentTyped<{
+    id?: string;
     width?: number;
     label?: string;
-    id?: string;
     value?: string;
     description?: string;
     hideLabel?: boolean;
@@ -20,9 +20,9 @@ export type TextareaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string;
         width?: number;
         label?: string;
-        id?: string;
         value?: string;
         description?: string;
         hideLabel?: boolean;

package/dist/@types/layout/Accordion/AccordionItem.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  AccordionItemEvents */
 /** @typedef {typeof __propDef.slots}  AccordionItemSlots */
 export default class AccordionItem extends SvelteComponentTyped<{
-    title?: string;
     id?: string;
+    title?: string;
     open?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type AccordionItemSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title?: string;
         id?: string;
+        title?: string;
         open?: boolean;
     };
     events: {

package/dist/@types/layout/AnalyticsBanner/AnalyticsBanner.svelte.d.ts

@@ -3,7 +3,7 @@ export function analyticsEvent(props: any): void;
 /** @typedef {typeof __propDef.events}  AnalyticsBannerEvents */
 /** @typedef {typeof __propDef.slots}  AnalyticsBannerSlots */
 export default class AnalyticsBanner extends SvelteComponentTyped<{
-    width?: "medium" | "wide";
+    width?: "wide" | "wider";
     analyticsId?: string;
     analyticsProps?: any;
     usageCookies?: boolean;
@@ -17,7 +17,7 @@ export type AnalyticsBannerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        width?: "medium" | "wide";
+        width?: "wide" | "wider";
         analyticsId?: string;
         analyticsProps?: object;
         usageCookies?: boolean;

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

@@ -4,7 +4,7 @@
 export default class Breadcrumb extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
     background?: string;
-    width?: "narrow" | "medium" | "wide" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     themeOverrides?: any;
     links?: any[];
 }, {
@@ -19,7 +19,7 @@ declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
         background?: string;
-        width?: "narrow" | "medium" | "wide" | "full";
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         themeOverrides?: object;
         links?: any[];
     };

package/dist/@types/layout/Cards/Card.svelte.d.ts

@@ -0,0 +1,43 @@
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponentTyped<{
+    id?: any;
+    title?: string;
+    href?: string;
+    hideTitle?: boolean;
+    noBackground?: any;
+    image?: string;
+    imageAlt?: string;
+    colspan?: number;
+    grow?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: any;
+        title?: string;
+        href?: string;
+        hideTitle?: boolean;
+        noBackground?: any;
+        image?: string;
+        imageAlt?: string;
+        colspan?: number;
+        grow?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/Cards/Cards.svelte.d.ts

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  CardsProps */
+/** @typedef {typeof __propDef.events}  CardsEvents */
+/** @typedef {typeof __propDef.slots}  CardsSlots */
+export default class Cards extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "lightblue";
+    id?: string;
+    cls?: string;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
+    height?: string | number;
+    marginTop?: boolean;
+    marginBottom?: boolean;
+    themeOverrides?: any;
+    title?: string;
+    hideTitle?: boolean;
+    colwidth?: "narrow" | "medium" | "wide" | "full";
+    gap?: number;
+    noBackground?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CardsProps = typeof __propDef.props;
+export type CardsEvents = typeof __propDef.events;
+export type CardsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        theme?: "light" | "dark" | "lightblue";
+        id?: string;
+        cls?: string;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
+        height?: number | string;
+        marginTop?: boolean;
+        marginBottom?: boolean;
+        themeOverrides?: object;
+        title?: string;
+        hideTitle?: boolean;
+        colwidth?: "narrow" | "medium" | "wide" | "full";
+        gap?: number;
+        noBackground?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/Grid/Grid.svelte.d.ts

@@ -3,13 +3,16 @@
 /** @typedef {typeof __propDef.slots}  GridSlots */
 export default class Grid extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
-    width?: "narrow" | "medium" | "wide" | "full";
+    id?: string;
+    cls?: string;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: string | number;
     marginTop?: boolean;
     marginBottom?: boolean;
     themeOverrides?: any;
     caption?: string;
-    id?: string;
+    title?: string;
+    hideTitle?: boolean;
     colwidth?: "narrow" | "medium" | "wide" | "full";
     gap?: number;
 }, {
@@ -25,13 +28,16 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
-        width?: "narrow" | "medium" | "wide" | "full";
+        id?: string;
+        cls?: string;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: number | string;
         marginTop?: boolean;
         marginBottom?: boolean;
         themeOverrides?: object;
         caption?: string;
-        id?: string;
+        title?: string;
+        hideTitle?: boolean;
         colwidth?: "narrow" | "medium" | "wide" | "full";
         gap?: number;
     };

package/dist/@types/layout/Hero/Hero.svelte.d.ts

@@ -3,12 +3,13 @@
 /** @typedef {typeof __propDef.slots}  HeroSlots */
 export default class Hero extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
+    id?: string;
+    cls?: string;
     background?: string;
-    width?: "narrow" | "medium" | "wide" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
     themeOverrides?: any;
     title?: string;
-    id?: string;
     lede?: string;
     date?: string;
 }, {
@@ -24,12 +25,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        id?: string;
+        cls?: string;
         background?: string;
-        width?: "narrow" | "medium" | "wide" | "full";
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";
         themeOverrides?: object;
         title?: string;
-        id?: string;
         lede?: string;
         date?: string;
     };

package/dist/@types/layout/Highlight/Highlight.svelte.d.ts

@@ -3,13 +3,13 @@
 /** @typedef {typeof __propDef.slots}  HighlightSlots */
 export default class Highlight extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
+    id?: string;
     background?: string;
-    width?: "narrow" | "medium" | "wide" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
     marginTop?: boolean;
     marginBottom?: boolean;
     themeOverrides?: any;
-    id?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,13 +23,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        id?: string;
         background?: string;
-        width?: "narrow" | "medium" | "wide" | "full";
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;
         themeOverrides?: object;
-        id?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/layout/NavSections/NavSection.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  NavSectionEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionSlots */
 export default class NavSection extends SvelteComponentTyped<{
+    id?: string;
     title?: string;
     hideTitle?: boolean;
-    id?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +17,9 @@ export type NavSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string;
         title?: string;
         hideTitle?: boolean;
-        id?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/layout/NavSections/NavSections.svelte.d.ts

@@ -2,7 +2,14 @@
 /** @typedef {typeof __propDef.events}  NavSectionsEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionsSlots */
 export default class NavSections extends SvelteComponentTyped<{
-    tocId?: string;
+    theme?: "light" | "dark" | "lightblue";
+    id?: string;
+    cls?: string;
+    background?: string;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
+    marginTop?: boolean;
+    marginBottom?: boolean;
+    themeOverrides?: any;
     contentsLabel?: string;
     noContents?: boolean;
 }, {
@@ -23,7 +30,14 @@ export type NavSectionsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        tocId?: string;
+        theme?: "light" | "dark" | "lightblue";
+        id?: string;
+        cls?: string;
+        background?: string;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
+        marginTop?: boolean;
+        marginBottom?: boolean;
+        themeOverrides?: object;
         contentsLabel?: string;
         noContents?: boolean;
     };

package/dist/@types/layout/Scroller/Scroller.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  ScrollerEvents */
 /** @typedef {typeof __propDef.slots}  ScrollerSlots */
 export default class Scroller extends SvelteComponentTyped<{
+    id?: string;
     marginBottom?: boolean;
     progress?: number;
-    id?: string;
     splitscreen?: boolean;
     threshold?: number;
     count?: number;
@@ -27,9 +27,9 @@ export type ScrollerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string;
         marginBottom?: boolean;
         progress?: number;
-        id?: string;
         splitscreen?: boolean;
         threshold?: number;
         count?: number;

package/dist/@types/layout/Scroller/ScrollerSection.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  ScrollerSectionSlots */
 export default class ScrollerSection extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
+    id?: string;
     title?: string;
     hideTitle?: boolean;
-    id?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -19,9 +19,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        id?: string;
         title?: string;
         hideTitle?: boolean;
-        id?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/layout/Section/Section.svelte.d.ts

@@ -3,14 +3,15 @@
 /** @typedef {typeof __propDef.slots}  SectionSlots */
 export default class Section extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
+    id?: string;
+    cls?: string;
     background?: string;
-    width?: "narrow" | "medium" | "wide" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     marginTop?: boolean;
     marginBottom?: boolean;
     themeOverrides?: any;
     title?: string;
     hideTitle?: boolean;
-    id?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -24,14 +25,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        id?: string;
+        cls?: string;
         background?: string;
-        width?: "narrow" | "medium" | "wide" | "full";
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;
         themeOverrides?: object;
         title?: string;
         hideTitle?: boolean;
-        id?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/layout/ShareButtons/ShareButtons.svelte.d.ts

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  ShareButtonsSlots */
 export default class ShareButtons extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
-    width?: "narrow" | "medium" | "wide" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     marginTop?: boolean;
     marginBottom?: boolean;
     themeOverrides?: any;
@@ -19,7 +19,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
-        width?: "narrow" | "medium" | "wide" | "full";
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;
         themeOverrides?: object;

package/dist/@types/layout/Tabs/Tab.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  TabEvents */
 /** @typedef {typeof __propDef.slots}  TabSlots */
 export default class Tab extends SvelteComponentTyped<{
+    id?: string;
     title?: string;
     hideTitle?: boolean;
-    id?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +17,9 @@ export type TabSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string;
         title?: string;
         hideTitle?: boolean;
-        id?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/wrappers/Container/Container.svelte.d.ts

@@ -3,8 +3,10 @@
 /** @typedef {typeof __propDef.slots}  ContainerSlots */
 export default class Container extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
+    id?: string;
+    cls?: string;
     background?: string;
-    width?: "narrow" | "medium" | "wide" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
     marginTop?: boolean;
     marginBottom?: boolean;
@@ -22,8 +24,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        id?: string;
+        cls?: string;
         background?: string;
-        width?: "narrow" | "medium" | "wide" | "full";
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;

package/dist/@types/wrappers/Theme/Theme.svelte.d.ts

@@ -3,6 +3,8 @@
 /** @typedef {typeof __propDef.slots}  ThemeSlots */
 export default class Theme extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
+    id?: string;
+    cls?: string;
     global?: boolean;
     overrides?: any;
     background?: string;
@@ -19,6 +21,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        id?: string;
+        cls?: string;
         global?: boolean;
         overrides?: object;
         background?: string;

package/dist/decorators/Divider/Divider.svelte

@@ -8,9 +8,9 @@
   export let hr = "narrow";
   /**
    * Sets the width of the container
-   * @type {"narrow"|"medium"|"wide"|"full"}
+   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
    */
-  export let width = "medium";
+  export let width = "wide";
   /**
    * Sets a predefined theme
    * @type {"light"|"dark"|"lightblue"}