@onsvisual/svelte-components 0.0.24 → 0.0.26

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/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/Cards.svelte.d.ts

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

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

@@ -6,7 +6,7 @@ export default class Hero extends SvelteComponentTyped<{
     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;
@@ -28,7 +28,7 @@ declare const __propDef: {
         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;

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

@@ -5,7 +5,7 @@ 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;
@@ -25,7 +25,7 @@ declare const __propDef: {
         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;

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/Section/Section.svelte.d.ts

@@ -6,7 +6,7 @@ export default class Section extends SvelteComponentTyped<{
     id?: string;
     cls?: string;
     background?: string;
-    width?: "narrow" | "medium" | "wide" | "full";
+    width?: "narrow" | "medium" | "wide" | "wider" | "full";
     marginTop?: boolean;
     marginBottom?: boolean;
     themeOverrides?: any;
@@ -28,7 +28,7 @@ declare const __propDef: {
         id?: string;
         cls?: string;
         background?: string;
-        width?: "narrow" | "medium" | "wide" | "full";
+        width?: "narrow" | "medium" | "wide" | "wider" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;
         themeOverrides?: object;

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/wrappers/Container/Container.svelte.d.ts

@@ -6,7 +6,7 @@ export default class Container extends SvelteComponentTyped<{
     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;
@@ -27,7 +27,7 @@ declare const __propDef: {
         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/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"}

package/dist/layout/AnalyticsBanner/AnalyticsBanner.svelte

@@ -26,9 +26,9 @@
   export let usageCookies = false;
   /**
    * Set the width of the banner
-   * @type {"medium"|"wide"}
+   * @type {"wide"|"wider"}
    */
-  export let width = "medium";
+  export let width = "wide";
 
   let live; // Don't run analytics unless page is live on ONS site (re-set in the onMount function)
   let showBanner = false;
@@ -163,7 +163,7 @@
       >
         <div
           class="ons-container ons-cookies-banner__primary"
-          class:ons-page__container--wide="{width === 'wide'}"
+          class:ons-page__container--wider="{width === 'wider'}"
         >
           <div class="ons-grid">
             <div class="ons-grid__col ons-col-8@m">
@@ -217,7 +217,7 @@
     {:else}
       <div
         class="ons-container ons-cookies-banner__confirmation"
-        class:ons-page__container--wide="{width === 'wide'}"
+        class:ons-page__container--wider="{width === 'wider'}"
       >
         <div
           class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center"
@@ -251,6 +251,6 @@
     /* padding: 0; */
     background: none !important;
   }
-  .ons-page__container--wide {
+  .ons-page__container--wider {
     max-width: 1240px;
   }</style>

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -8,9 +8,9 @@
   export let links = [];
   /**
    * 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"}

package/dist/layout/Cards/Cards.svelte

@@ -14,9 +14,9 @@
   export let cls = "ons-cards";
   /**
    * Sets the width of the section
-   * @type {"narrow"|"medium"|"wide"|"full"}
+   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
    */
-  export let width = "medium";
+  export let width = "wide";
   /**
    * Sets the title of the section
    * @type {string}

package/dist/layout/Grid/Grid.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
   import Container from "../../wrappers/Container/Container.svelte";
 
   /**
@@ -70,9 +72,30 @@
   let gridClass = !colwidth || colwidth === "full" ? "" : `grid-${colwidth}`;
   let rowHeight = height === "full" ? "100vh" : !Number.isNaN(height) ? height + "px" : height;
   let gridGap = !Number.isNaN(gap) ? gap + "px" : gap;
+
+  const defs = {
+    narrow: { w: 180, c: 4 },
+    medium: { w: 280, c: 3 },
+    wide: { w: 400, c: 2 },
+    full: { w: "100%", c: 1 },
+  };
+
+  let w;
+
+  const cols = writable(defs[colwidth].c);
+
+  $: columns =
+    colwidth == "full"
+      ? 1
+      : w
+      ? Math.floor((w + gap) / (defs[colwidth].w + gap))
+      : defs[colwidth].c;
+  $: cols.set(columns);
+
+  setContext("cols", cols);
 </script>
 
-<figure aria-label="{caption}">
+<figure aria-label="{caption}" bind:clientWidth="{w}">
   <Container
     id="{id}"
     cls="{cls}"
@@ -122,10 +145,10 @@
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
   }
   .grid-medium {
-    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
   }
   .grid-wide {
-    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)) !important;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
   }
   :global(.grid > div) {
     min-height: inherit;

package/dist/layout/Hero/Hero.svelte

@@ -14,9 +14,9 @@
   export let cls = null;
   /**
    * Sets the width of the section
-   * @type {"narrow"|"medium"|"wide"|"full"}
+   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
    */
-  export let width = "medium";
+  export let width = "wide";
   /**
    * Sets the minimum height of the section
    * @type {"auto"|"tall"|"full"}

package/dist/layout/Highlight/Highlight.svelte

@@ -8,9 +8,9 @@
   export let id = null;
   /**
    * Sets the width of the section
-   * @type {"narrow"|"medium"|"wide"|"full"}
+   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
    */
-  export let width = "narrow";
+  export let width = "medium";
   /**
    * Sets the minimum height of the section
    * @type {"auto"|"tall"|"full"}

package/dist/layout/NavSections/NavSections.svelte

@@ -1,26 +1,62 @@
 <script>
   import { onMount, setContext } from "svelte";
   import { writable } from "svelte/store";
+  import Container from "../../wrappers/Container/Container.svelte";
 
   /**
-   * A label for the page contents nav
+   * ID for back-linking to table of contents
    * @type {string}
    */
-  export let contentsLabel = "Page contents";
+  export let id = "toc";
   /**
-   * ID for contents nav section (for back links)
+   * (Optional) Sets a css class for the section
    * @type {string}
    */
-  export let tocId = "toc";
+  export let cls = null;
+  /**
+   * Sets the width of the container
+   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+   */
+  export let width = "wide";
+  /**
+   * A label for the page contents nav
+   * @type {string}
+   */
+  export let contentsLabel = "Page contents";
   /**
    * Don't include table of contents (allows for custom uses of nav panel)
    * @type {boolean}
    */
   export let noContents = false;
+  /**
+   * Sets a predefined theme
+   * @type {"light"|"dark"|"lightblue"}
+   */
+  export let theme = null;
+  /**
+   * Define additional props to override the base theme
+   * @type {object}
+   */
+  export let themeOverrides = null;
+  /**
+   * Overrides the background CSS for the section
+   * @type {string}
+   */
+  export let background = null;
+  /**
+   * Optional margin above section
+   * @type {boolean}
+   */
+  export let marginTop = false;
+  /**
+   * Optional margin below section
+   * @type {boolean}
+   */
+  export let marginBottom = true;
 
   let active;
 
-  setContext("tocId", tocId);
+  setContext("tocId", id);
 
   const sections = writable([]);
   setContext("sections", sections);
@@ -49,10 +85,18 @@
   });
 </script>
 
-<div class="ons-page__container ons-container">
+<Container
+  cls="{cls}"
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  width="{width}"
+  marginTop="{marginTop}"
+  marginBottom="{marginBottom}"
+  background="{background}"
+>
   <div class="ons-grid ons-js-toc-container ons-u-ml-no">
     <slot name="header" />
-    <div class="ons-grid__col ons-col-4@m ons-u-pl-no ons-grid__col--sticky@m" id="{tocId}">
+    <div class="ons-grid__col ons-col-4@m ons-u-pl-no ons-grid__col--sticky@m" id="{id}">
       <aside class="ons-toc-container" role="complementary">
         <nav class="ons-toc" aria-label="Pages in this guide">
           <slot name="before-nav" />
@@ -89,4 +133,16 @@
     </div>
     <slot name="footer" />
   </div>
-</div>
+</Container>
+
+<style>
+  @media (min-width: 740px) {
+    .ons-col-4\@m {
+      max-width: 280px;
+      width: 280px;
+    }
+    .ons-col-8\@m {
+      max-width: calc(100% - 280px);
+      width: calc(100% - 280px);
+    }
+  }</style>

package/dist/layout/Section/Section.svelte

@@ -14,7 +14,7 @@
   export let cls = null;
   /**
    * Sets the width of the container
-   * @type {"narrow"|"medium"|"wide"|"full"}
+   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
    */
   export let width = "narrow";
   /**

package/dist/layout/ShareButtons/ShareButtons.svelte

@@ -9,7 +9,7 @@
   export let title = "Share this page";
   /**
    * Sets the width of the container
-   * @type {"narrow"|"medium"|"wide"|"full"}
+   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
    */
   export let width = "narrow";
   /**

package/dist/wrappers/Container/Container.svelte

@@ -13,9 +13,9 @@
   export let cls = null;
   /**
    * 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 the minimum height of the container relative to the height of the viewport
    * @type {"auto"|"tall"|"full"}
@@ -51,7 +51,7 @@
   $: _cls = cls && !(theme || background) ? cls : "";
 </script>
 
-{#if width === "narrow"}
+{#if ["narrow", "medium"].includes(width)}
   <Theme
     id="{id}"
     cls="{cls}"
@@ -66,7 +66,10 @@
       class:ons-page__container--full-height="{height === 'full'}"
     >
       {#if marginTop}<div class="ons-spacer"></div>{/if}
-      <div class="ons-page__container--narrow">
+      <div
+        class:ons-page__container--narrow="{width === 'narrow'}"
+        class:ons-page__container--medium="{width === 'medium'}"
+      >
         <slot />
       </div>
       {#if marginBottom}<div class="ons-spacer"></div>{/if}
@@ -83,7 +86,7 @@
     <div
       id="{_id}"
       class="ons-page__container ons-container {_cls}"
-      class:ons-page__container--wide="{width === 'wide'}"
+      class:ons-page__container--wider="{width === 'wider'}"
       class:ons-page__container--full="{width === 'full'}"
       class:ons-page__container--tall-height="{height === 'tall'}"
       class:ons-page__container--full-height="{height === 'full'}"
@@ -102,10 +105,14 @@
     padding-bottom: 0.05px;
   }
   .ons-page__container--narrow {
-    max-width: 640px;
+    max-width: 608px;
     margin: 0 auto 0 0;
   }
-  .ons-page__container--wide {
+  .ons-page__container--medium {
+    max-width: 800px;
+    margin: 0 auto 0 0;
+  }
+  .ons-page__container--wider {
     max-width: 1240px;
   }
   .ons-page__container--full {

package/package.json

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