@onsvisual/svelte-components 0.0.9 → 0.0.11

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

@@ -15,7 +15,7 @@ export { default as NavSections } from "./layout/NavSections/NavSections.svelte"
 export { default as Scroller } from "./layout/Scroller/Scroller.svelte";
 export { default as ScrollerSection } from "./layout/Scroller/ScrollerSection.svelte";
 export { default as Section } from "./layout/Section/Section.svelte";
-export { default as TitleBlock } from "./layout/TitleBlock/TitleBlock.svelte";
+export { default as Titleblock } from "./layout/Titleblock/Titleblock.svelte";
 export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
 export { default as Button } from "./inputs/Button/Button.svelte";
 export { default as Dropdown } from "./inputs/Dropdown/Dropdown.svelte";

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

@@ -2,6 +2,10 @@
 /** @typedef {typeof __propDef.events}  BreadcrumbEvents */
 /** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
 export default class Breadcrumb extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "lightblue";
+    background?: string;
+    width?: "narrow" | "medium" | "wide" | "full";
+    themeOverrides?: any;
     links?: any[];
 }, {
     [evt: string]: CustomEvent<any>;
@@ -13,6 +17,10 @@ export type BreadcrumbSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        theme?: "light" | "dark" | "lightblue";
+        background?: string;
+        width?: "narrow" | "medium" | "wide" | "full";
+        themeOverrides?: object;
         links?: any[];
     };
     events: {

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

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  SectionSlots */
 export default class Section extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
+    background?: string;
     width?: "narrow" | "medium" | "wide" | "full";
     marginTop?: boolean;
     marginBottom?: boolean;
@@ -23,6 +24,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "lightblue";
+        background?: string;
         width?: "narrow" | "medium" | "wide" | "full";
         marginTop?: boolean;
         marginBottom?: boolean;

package/dist/@types/layout/{TitleBlock/TitleBlock.svelte.d.ts → Titleblock/Titleblock.svelte.d.ts}

@@ -1,7 +1,7 @@
-/** @typedef {typeof __propDef.props}  TitleBlockProps */
-/** @typedef {typeof __propDef.events}  TitleBlockEvents */
-/** @typedef {typeof __propDef.slots}  TitleBlockSlots */
-export default class TitleBlock extends SvelteComponentTyped<{
+/** @typedef {typeof __propDef.props}  TitleblockProps */
+/** @typedef {typeof __propDef.events}  TitleblockEvents */
+/** @typedef {typeof __propDef.slots}  TitleblockSlots */
+export default class Titleblock extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "lightblue";
     background?: string;
     themeOverrides?: any;
@@ -17,9 +17,9 @@ export default class TitleBlock extends SvelteComponentTyped<{
     after: {};
 }> {
 }
-export type TitleBlockProps = typeof __propDef.props;
-export type TitleBlockEvents = typeof __propDef.events;
-export type TitleBlockSlots = typeof __propDef.slots;
+export type TitleblockProps = typeof __propDef.props;
+export type TitleblockEvents = typeof __propDef.events;
+export type TitleblockSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {

package/dist/decorators/Divider/Divider.svelte

@@ -40,14 +40,13 @@
   marginTop="{marginTop}"
   marginBottom="{marginBottom}"
 >
-  <hr style:border="{hr ? null : "none"}" />
+  <hr style:border-top="{hr ? null : "none"}" />
 </Container>
 
 <style>
   hr {
     width: 75px;
     border: none;
-    border-top: 2px solid;
+    border-top: 2px solid var(--muted, #777);
     margin: -10px auto 0;
-    color: var(--muted, #777);
   }</style>

package/dist/index.js

@@ -19,7 +19,7 @@ export { default as NavSections } from "./layout/NavSections/NavSections.svelte"
 export { default as Scroller } from "./layout/Scroller/Scroller.svelte";
 export { default as ScrollerSection } from "./layout/Scroller/ScrollerSection.svelte";
 export { default as Section } from "./layout/Section/Section.svelte";
-export { default as TitleBlock } from "./layout/TitleBlock/TitleBlock.svelte";
+export { default as Titleblock } from "./layout/Titleblock/Titleblock.svelte";
 export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
 
 // Inputs

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -1,12 +1,39 @@
 <script>
+  import Container from "../../wrappers/Container/Container.svelte";
+
   /**
    * An array of links in the format {label, href}
    * @type {array}
    */
   export let links = [];
+  /**
+   * Sets the width of the container
+   * @type {"narrow"|"medium"|"wide"|"full"}
+   */
+  export let width = "medium";
+  /**
+   * 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;
 </script>
 
-<div class="ons-page__container ons-container">
+<Container
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  width="{width}"
+  background="{background}"
+>
   <nav class="ons-breadcrumb print--hide" aria-label="Breadcrumbs">
     <ol class="ons-breadcrumb__items ons-u-fs-s">
       {#each links as link}
@@ -30,7 +57,7 @@
       {/each}
     </ol>
   </nav>
-</div>
+</Container>
 
 <style>
   .ons-svg-icon {

package/dist/layout/Section/Section.svelte

@@ -32,6 +32,11 @@
    * @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}
@@ -50,6 +55,7 @@
   width="{width}"
   marginTop="{marginTop}"
   marginBottom="{marginBottom}"
+  background="{background}"
 >
   <section id="{id ? id : slugify(title)}" aria-label="{title}" class="ons-feature__section">
     {#if title}

package/dist/layout/{TitleBlock/TitleBlock.svelte → Titleblock/Titleblock.svelte}

@@ -21,7 +21,7 @@
    * Array of {key, value} objects containing page metadata
    * @type {array}
    */
-  export let meta = [];
+  export let meta = null;
   /**
    * Sets a predefined theme
    * @type {"light"|"dark"|"lightblue"}

package/dist/wrappers/Container/Container.svelte

@@ -71,6 +71,7 @@
 <style>
   .ons-page__container {
     background: var(--background, "none");
+    overflow: auto;
   }
   .ons-page__container--narrow {
     max-width: 640px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -167,8 +167,8 @@
     "./layout/Survey/init-survey": "./dist/layout/Survey/init-survey.js",
     "./layout/Tabs/Tab.svelte": "./dist/layout/Tabs/Tab.svelte",
     "./layout/Tabs/Tabs.svelte": "./dist/layout/Tabs/Tabs.svelte",
-    "./layout/TitleBlock/Meta.svelte": "./dist/layout/TitleBlock/Meta.svelte",
-    "./layout/TitleBlock/TitleBlock.svelte": "./dist/layout/TitleBlock/TitleBlock.svelte",
+    "./layout/Titleblock/Meta.svelte": "./dist/layout/Titleblock/Meta.svelte",
+    "./layout/Titleblock/Titleblock.svelte": "./dist/layout/Titleblock/Titleblock.svelte",
     "./layout/Twisty/Twisty.svelte": "./dist/layout/Twisty/Twisty.svelte",
     "./wrappers/Container/Container.svelte": "./dist/wrappers/Container/Container.svelte",
     "./wrappers/Embed/Embed.svelte": "./dist/wrappers/Embed/Embed.svelte",