@onsvisual/svelte-components 0.1.32 → 0.1.34

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

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

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

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

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

@@ -5,6 +5,7 @@ export default class Grid extends SvelteComponentTyped<{
     id?: string;
     cls?: string;
     theme?: "light" | "dark" | "lightblue";
+    allowClientOverrides?: boolean;
     width?: "narrow" | "medium" | "wide" | "full";
     height?: string | number;
     marginTop?: boolean;
@@ -30,6 +31,7 @@ declare const __propDef: {
         id?: string;
         cls?: string;
         theme?: "light" | "dark" | "lightblue";
+        allowClientOverrides?: boolean;
         width?: "narrow" | "medium" | "wide" | "full";
         height?: number | string;
         marginTop?: boolean;

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

@@ -6,6 +6,7 @@ export default class Hero extends SvelteComponentTyped<{
     cls?: string;
     theme?: "light" | "dark" | "lightblue";
     background?: string;
+    allowClientOverrides?: boolean;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
     themeOverrides?: any;
@@ -28,6 +29,7 @@ declare const __propDef: {
         cls?: string;
         theme?: "light" | "dark" | "lightblue";
         background?: string;
+        allowClientOverrides?: boolean;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";
         themeOverrides?: object;

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

@@ -5,6 +5,7 @@ export default class Highlight extends SvelteComponentTyped<{
     id?: string;
     theme?: "light" | "dark" | "lightblue";
     background?: string;
+    allowClientOverrides?: boolean;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
     marginTop?: boolean;
@@ -25,6 +26,7 @@ declare const __propDef: {
         id?: string;
         theme?: "light" | "dark" | "lightblue";
         background?: string;
+        allowClientOverrides?: boolean;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";
         marginTop?: boolean;

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

@@ -5,6 +5,7 @@ export default class NavSection extends SvelteComponentTyped<{
     id?: string;
     title?: string;
     hideTitle?: boolean;
+    subsection?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,6 +21,7 @@ declare const __propDef: {
         id?: string;
         title?: string;
         hideTitle?: boolean;
+        subsection?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -6,6 +6,7 @@ export default class NavSections extends SvelteComponentTyped<{
     cls?: string;
     theme?: "light" | "dark" | "lightblue";
     background?: string;
+    allowClientOverrides?: boolean;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     marginTop?: boolean;
     marginBottom?: boolean;
@@ -34,6 +35,7 @@ declare const __propDef: {
         cls?: string;
         theme?: "light" | "dark" | "lightblue";
         background?: string;
+        allowClientOverrides?: boolean;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;

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

@@ -4,6 +4,8 @@
 export default class ScrollerSection extends SvelteComponentTyped<{
     id?: string;
     theme?: "light" | "dark" | "lightblue";
+    allowClientOverrides?: boolean;
+    themeOverrides?: any;
     title?: string;
     hideTitle?: boolean;
 }, {
@@ -20,6 +22,8 @@ declare const __propDef: {
     props: {
         id?: string;
         theme?: "light" | "dark" | "lightblue";
+        allowClientOverrides?: boolean;
+        themeOverrides?: object;
         title?: string;
         hideTitle?: boolean;
     };

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

@@ -6,6 +6,7 @@ export default class Section extends SvelteComponentTyped<{
     cls?: string;
     theme?: "light" | "dark" | "lightblue";
     background?: string;
+    allowClientOverrides?: boolean;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     marginTop?: boolean;
     marginBottom?: boolean;
@@ -28,6 +29,7 @@ declare const __propDef: {
         cls?: string;
         theme?: "light" | "dark" | "lightblue";
         background?: string;
+        allowClientOverrides?: boolean;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;

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

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

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

@@ -4,6 +4,7 @@
 export default class Titleblock extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
     background?: string;
+    allowClientOverrides?: boolean;
     themeOverrides?: any;
     meta?: any[];
     title?: string;
@@ -26,6 +27,7 @@ declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
         background?: string;
+        allowClientOverrides?: boolean;
         themeOverrides?: object;
         meta?: any[];
         title?: string;

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

@@ -6,6 +6,7 @@ export default class Container extends SvelteComponentTyped<{
     cls?: string;
     theme?: "light" | "dark" | "lightblue";
     background?: string;
+    allowClientOverrides?: boolean;
     width?: "narrow" | "medium" | "wide" | "wider" | "full";
     height?: "full" | "auto" | "tall";
     marginTop?: boolean;
@@ -27,6 +28,7 @@ declare const __propDef: {
         cls?: string;
         theme?: "light" | "dark" | "lightblue";
         background?: string;
+        allowClientOverrides?: boolean;
         width?: "narrow" | "medium" | "wide" | "wider" | "full";
         height?: "auto" | "tall" | "full";
         marginTop?: boolean;

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

@@ -8,7 +8,7 @@ export default class Theme extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
     overrides?: any;
     background?: string;
-    allowClientOverride?: boolean;
+    allowClientOverrides?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,7 +27,7 @@ declare const __propDef: {
         theme?: "light" | "dark" | "lightblue";
         overrides?: object;
         background?: string;
-        allowClientOverride?: boolean;
+        allowClientOverrides?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/decorators/Divider/Divider.svelte

@@ -21,6 +21,11 @@
    * @type {object}
    */
   export let themeOverrides = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
   /**
    * Optional margin above section
    * @type {boolean}
@@ -36,6 +41,7 @@
 <Container
   theme="{theme}"
   themeOverrides="{themeOverrides}"
+  allowClientOverrides="{allowClientOverrides}"
   width="{width}"
   marginTop="{marginTop}"
   marginBottom="{marginBottom}"

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -26,11 +26,17 @@
    * @type {string}
    */
   export let background = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
 </script>
 
 <Container
   theme="{theme}"
   themeOverrides="{themeOverrides}"
+  allowClientOverrides="{allowClientOverrides}"
   width="{width}"
   background="{background}"
 >

package/dist/layout/Grid/Grid.svelte

@@ -38,6 +38,11 @@
    * @type {object}
    */
   export let themeOverrides = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
   /**
    * Optional margin above section
    * @type {boolean}
@@ -101,6 +106,7 @@
     cls="{cls}"
     theme="{theme}"
     themeOverrides="{themeOverrides}"
+    allowClientOverrides="{allowClientOverrides}"
     width="{width}"
     height="{['tall', 'full'].includes(height) ? height : 'auto'}"
     marginTop="{marginTop}"
@@ -124,6 +130,7 @@
         cls="{cls}"
         theme="{theme}"
         themeOverrides="{themeOverrides}"
+        allowClientOverrides="{allowClientOverrides}"
         width="narrow"
         marginBottom="{marginBottom}"
       >

package/dist/layout/Hero/Hero.svelte

@@ -47,6 +47,11 @@
    * @type {object}
    */
   export let themeOverrides = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
   /**
    * Overrides the background CSS for the section
    * @type {string}
@@ -59,6 +64,7 @@
   cls="{cls}"
   theme="{theme}"
   themeOverrides="{themeOverrides}"
+  allowClientOverrides="{allowClientOverrides}"
   width="{width}"
   background="{background}"
   height="{height}"

package/dist/layout/Highlight/Highlight.svelte

@@ -31,6 +31,11 @@
    * @type {string}
    */
   export let background = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
   /**
    * Optional margin above section
    * @type {boolean}
@@ -46,6 +51,7 @@
 <Container
   theme="{theme}"
   themeOverrides="{themeOverrides}"
+  allowClientOverrides="{allowClientOverrides}"
   width="{width}"
   background="{background}"
   marginTop="{marginTop}"

package/dist/layout/NavSections/NavSection.svelte

@@ -18,6 +18,11 @@
    * @type {boolean}
    */
   export let hideTitle = false;
+  /**
+   * Treat a section as sub-section. It will have an h3 title, and will be indented in the contents table
+   * @type {boolean}
+   */
+  export let subsection = false;
 
   const sections = getContext("sections");
   const observer = getContext("observer");
@@ -27,7 +32,7 @@
 
   onMount(() => {
     if (sections && observer) {
-      $sections = [...$sections, { title, id }];
+      $sections = [...$sections, { title, id, subsection }];
       $observer.observe(section);
     }
   });
@@ -42,7 +47,13 @@
 
 <section id="{id}" aria-label="{title}" bind:this="{section}">
   {#if title}
-    <h2 class="ons-u-mt-xl ons-u-pb-no ons-u-pt-no" class:ons-u-vh="{hideTitle}">{title}</h2>
+    {#if subsection}
+      <h3 class="subsection-title ons-u-fs-m" class:ons-u-vh="{hideTitle}">{title}</h3>
+    {:else}
+      <h2 class="section-title ons-u-mt-l ons-u-pb-no ons-u-pt-no" class:ons-u-vh="{hideTitle}">
+        {title}
+      </h2>
+    {/if}
   {/if}
   <slot />
   {#if tocId}

package/dist/layout/NavSections/NavSections.svelte

@@ -43,6 +43,11 @@
    * @type {string}
    */
   export let background = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
   /**
    * Optional margin above section
    * @type {boolean}
@@ -89,6 +94,7 @@
   cls="{cls}"
   theme="{theme}"
   themeOverrides="{themeOverrides}"
+  allowClientOverrides="{allowClientOverrides}"
   width="{width}"
   marginTop="{marginTop}"
   marginBottom="{marginBottom}"
@@ -108,7 +114,7 @@
             {/if}
             <ol class="ons-list ons-u-mb-m ons-list--dashed">
               {#each $sections as section}
-                <li class="ons-list__item">
+                <li class="ons-list__item" class:ons-list__item-indented="{section.subsection}">
                   <a
                     href="#{section.id}"
                     class="ons-list__link"
@@ -124,7 +130,7 @@
         </nav>
       </aside>
     </div>
-    <div class="ons-grid__col ons-col-8@m ons-u-pl-no">
+    <div class="ons-nav-sections ons-grid__col ons-col-8@m ons-u-pl-no">
       <slot name="before" />
       {#if $observer}
         <slot />
@@ -145,4 +151,10 @@
       max-width: calc(100% - 280px);
       width: calc(100% - 280px);
     }
+  }
+  .ons-list__item-indented {
+    margin-left: 50px !important;
+  }
+  .ons-nav-sections :global(section:first-of-type h2) {
+    margin-top: 27px !important;
   }</style>

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -12,6 +12,16 @@
    * @type {"light"|"dark"|"lightblue"}
    */
   export let theme = null;
+  /**
+   * Define additional props to override the base theme
+   * @type {object}
+   */
+  export let themeOverrides = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
   /**
    * Sets the title of the section
    * @type {string}
@@ -41,7 +51,12 @@
 </script>
 
 <section data-id="{id}" bind:this="{section}">
-  <Container theme="{theme}" width="narrow">
+  <Container
+    theme="{theme}"
+    themeOverrides="{themeOverrides}"
+    allowClientOverrides="{allowClientOverrides}"
+    width="narrow"
+  >
     <div class="ons-scroller-section">
       {#if title}
         <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>

package/dist/layout/Section/Section.svelte

@@ -42,6 +42,11 @@
    * @type {string}
    */
   export let background = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
   /**
    * Optional margin above section
    * @type {boolean}
@@ -59,6 +64,7 @@
   cls="{cls}"
   theme="{theme}"
   themeOverrides="{themeOverrides}"
+  allowClientOverrides="{allowClientOverrides}"
   width="{width}"
   marginTop="{marginTop}"
   marginBottom="{marginBottom}"

package/dist/layout/ShareButtons/ShareButtons.svelte

@@ -22,6 +22,11 @@
    * @type {object}
    */
   export let themeOverrides = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
   /**
    * Optional margin above section
    * @type {boolean}
@@ -45,6 +50,7 @@
 <Container
   theme="{theme}"
   themeOverrides="{themeOverrides}"
+  allowClientOverrides="{allowClientOverrides}"
   width="{width}"
   marginTop="{marginTop}"
   marginBottom="{marginBottom}"

package/dist/layout/Titleblock/Titleblock.svelte

@@ -37,9 +37,19 @@
    * @type {string}
    */
   export let background = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
 </script>
 
-<Container theme="{theme}" themeOverrides="{themeOverrides}" background="{background}">
+<Container
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  allowClientOverrides="{allowClientOverrides}"
+  background="{background}"
+>
   <section class="ons-u-mb-xl">
     <slot name="before" />
     <div class="ons-grid">

package/dist/wrappers/Container/Container.svelte

@@ -46,6 +46,11 @@
    * @type {string}
    */
   export let background = null;
+  /**
+   * Allows client imported CSS for embeddable content
+   * @type {boolean}
+   */
+  export let allowClientOverrides = false;
 
   $: _id = id && !(theme || background) ? id : null;
   $: _cls = cls && !(theme || background) ? cls : "";
@@ -58,6 +63,7 @@
     theme="{theme}"
     background="{background}"
     overrides="{themeOverrides}"
+    allowClientOverrides="{allowClientOverrides}"
   >
     <div
       id="{_id}"
@@ -82,6 +88,7 @@
     theme="{theme}"
     background="{background}"
     overrides="{themeOverrides}"
+    allowClientOverrides="{allowClientOverrides}"
   >
     <div
       id="{_id}"

package/dist/wrappers/Theme/Theme.svelte

@@ -35,7 +35,7 @@
    * Allows client imported CSS for embeddable content
    * @type {boolean}
    */
-  export let allowClientOverride = false;
+  export let allowClientOverrides = false;
 
   function makeStyle(theme, overrides, background) {
     if (theme) {
@@ -66,7 +66,7 @@
     class="{cls ? `theme-wrapper ${cls}` : 'theme-wrapper'}"
     style="{style} display: contents"
   >
-    {#if allowClientOverride}
+    {#if allowClientOverrides}
       <div class="client-css-override" style:display="contents">
         <div class="theme-internal">
           <slot />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",